/* ===========================================================================
   Minedy landing — styles
   ---------------------------------------------------------------------------
   Tokens mirror the app's design system (src/index.css + the design-system
   doc): same palette, same two typefaces, same radii. The one deliberate
   difference is scale — a marketing page gets larger type and more air than a
   phone-sized diary screen.

   Light only, on purpose: this page is a first impression, and one set of
   colours is one less thing that can look wrong in a screenshot or an ad.
   =========================================================================== */

:root {
  --bg: #f7f7f9;
  --surface: #ffffff;
  --surface-2: #ececef;
  --text: #0b0b0c;
  --hint: #9a9ba0;
  --subtitle: #7e7f83;
  --accent: #007aff;
  --accent-light: #ecf1ff;
  --free-accent: #f97316;
  --premium-gold: #ffb800;
  --border: rgba(11, 11, 12, 0.09);
  --border-soft: rgba(11, 11, 12, 0.05);
  --shadow: 0 1px 2px rgba(11, 11, 12, 0.04), 0 8px 24px rgba(11, 11, 12, 0.05);
  --shadow-lg: 0 2px 6px rgba(11, 11, 12, 0.05), 0 24px 60px rgba(11, 11, 12, 0.1);

  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'PT Serif', Georgia, 'Noto Serif', serif;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --page: 1120px;
  --gutter: 20px;

  /* Filled in by main.js — how far the logo and the menu travel between the
     two header states. Measured rather than guessed, so they land exactly. */
  --brand-dx: 0px;
  --nav-dx: 0px;
  --brand-dy: 132px;
  --brand-scale: 2.08;

  --ease: cubic-bezier(0.22, 0.7, 0.24, 1);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(56px, 9vw, 104px);
}

.section--tight {
  padding-block: clamp(40px, 6vw, 72px);
}

.section-head {
  max-width: 820px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* Width in pixels, not `ch`: `ch` is measured in the container's own font
   (16px body text), so 44ch was ~400px — far too narrow for a 44px serif
   headline, which is what pushed these titles onto three lines. */
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* --- Typography --------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  text-wrap: balance;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(36px, 6.4vw, 68px);
  max-width: 21ch;
  margin-inline: auto;
}

h2 {
  font-size: clamp(28px, 4.4vw, 44px);
}

h3 {
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.25;
}

p {
  margin: 0;
}

.lede {
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--subtitle);
  max-width: 660px;
  margin-top: 16px;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 17px 28px;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  opacity: 0.9;
}

.btn--block {
  width: 100%;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --- Header, and its two states ----------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}

html[data-scrolled='true'] .site-header {
  border-bottom-color: var(--border-soft);
}

.site-header .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 78px;
}

/* Every item names its row as well as its column. Without the row, grid
   auto-placement reads them in DOM order (menu, logo, right side), finds the
   cursor already past column 1 when the logo arrives, and drops it onto a
   second row — which is exactly the header falling apart into two levels. */
.brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  text-decoration: none;
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}

.brand img {
  height: 51px;
  width: auto;
  display: block;
  /* The mark is not symmetrical: the speech bubble adds weight at the top
     right, so true centring reads as sitting too low. */
  transform: translateY(-3px);
}

/* Before the page moves: the logo is parked over the headline, centred and
   two and a half times its size. It is the same element — it travels rather
   than being swapped for a second copy. */
html:not([data-scrolled='true']) .brand {
  transform: translate(var(--brand-dx), var(--brand-dy)) scale(var(--brand-scale));
}

.nav-links {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}

/* …and the menu sits at the left edge until then. */
html:not([data-scrolled='true']) .nav-links {
  transform: translateX(var(--nav-dx));
}

.nav-links a {
  font-size: 14.5px;
  color: var(--subtitle);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}

.nav-links a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.header-right {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-cta {
  padding: 12px 22px;
  font-size: 15px;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), width 0.45s var(--ease),
    padding 0.45s var(--ease), margin 0.45s var(--ease);
}

/* The button is not merely faded out before the scroll — it gives its width
   back, so the globe really does sit at the right edge on the first screen. */
html:not([data-scrolled='true']) .header-cta {
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  width: 0;
  padding-inline: 0;
  margin-left: -10px;
  overflow: hidden;
}

/* The footer logo must never take part in any of this. */
.brand--static {
  transform: none !important;
  transition: none;
}

/* Privacy and Terms reuse the header, but have no hero for a logo to park
   over and no menu to slide — so they opt out of the whole two-state dance. */
.site-header--static .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header--static .brand {
  transform: none !important;
  transition: none;
}

.site-header--static .header-cta {
  opacity: 1 !important;
  width: auto !important;
  padding-inline: 22px !important;
  margin-left: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* --- Language picker (ours, not the browser's) -------------------------- */

.lang {
  position: relative;
  flex-shrink: 0;
}

.lang-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--subtitle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.lang-btn svg {
  width: 20px;
  height: 20px;
}

.lang-btn:hover,
.lang-btn[aria-expanded='true'] {
  color: var(--accent);
  background: var(--accent-light);
}

/* Without this the menu is permanently open: `display: flex` on the class
   below outranks the browser's own `[hidden] { display: none }`. */
.lang-menu[hidden] {
  display: none;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  min-width: 190px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: lang-in 0.14s ease-out;
}

@keyframes lang-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.lang-menu button {
  font-family: var(--font-sans);
  font-size: 15px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lang-menu button:hover {
  background: var(--surface-2);
}

.lang-menu button[aria-selected='true'] {
  color: var(--accent);
}

.lang-menu button[aria-selected='true']::after {
  content: '';
  width: 7px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  flex-shrink: 0;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(48px, 7vw, 80px);
  text-align: center;
}

/* Keeps the headline clear of the parked logo. */
.hero-logo-slot {
  height: 132px;
}

.hero .lede {
  margin-inline: auto;
  text-align: center;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.hero-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--hint);
}

/* --- The app, framed by what it can do ---------------------------------- */

.showcase {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: center;
}

.showcase-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.showcase-stage {
  position: relative;
  display: flex;
  justify-content: center;
  isolation: isolate;
}

.stage-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 150%);
  aspect-ratio: 1;
  height: auto;
  color: var(--accent);
  opacity: 0.09;
  z-index: -1;
}

/* Hidden while the benefit cards flank the phone — two sets of illustrations
   either side of one mockup is one set too many. They come back below 1000px,
   where the cards move underneath and the sides are empty (see the media
   query at the end of this file). */
.stage-spot,
.stage-sparkle {
  display: none;
}

.stage-spot {
  position: absolute;
  width: clamp(48px, 5.5vw, 72px);
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(11, 11, 12, 0.08));
}

.stage-spot--photo {
  top: 4%;
  right: -14%;
}

.stage-spot--location {
  bottom: 26%;
  left: -15%;
}

.stage-spot--calendar {
  top: 22%;
  left: -13%;
}

.stage-spot--clock {
  top: 47%;
  right: -16%;
}

.stage-spot--history {
  bottom: 6%;
  right: -8%;
}

.stage-spot--mood {
  bottom: 4%;
  left: -6%;
}

.stage-sparkle {
  position: absolute;
  width: clamp(16px, 1.8vw, 24px);
  height: auto;
}

.stage-sparkle--a {
  top: 2%;
  left: -4%;
}

.stage-sparkle--b {
  bottom: 4%;
  right: -2%;
}

/* --- Phone mockup: the app's own onboarding screen ---------------------- */

.phone {
  --phone-w: clamp(230px, 24vw, 286px);
  position: relative;
  width: var(--phone-w);
  flex-shrink: 0;
  padding: calc(var(--phone-w) * 0.0455);
  border-radius: calc(var(--phone-w) * 0.1745);
  background: #1c1c1e;
  box-shadow: var(--shadow-lg);
}

.phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19;
  border-radius: calc(var(--phone-w) * 0.1382);
  overflow: hidden;
  background: #fff;
  text-align: left;
}

.phone-notch {
  position: absolute;
  top: calc(var(--phone-w) * 0.0364);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--phone-w) * 0.2909);
  height: calc(var(--phone-w) * 0.0909);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  z-index: 3;
}

/* Same band as the notch, so the time and battery line up on its centre. */
.phone-status {
  position: absolute;
  top: calc(var(--phone-w) * 0.0364);
  left: 0;
  right: 0;
  height: calc(var(--phone-w) * 0.0909);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--phone-w) * 0.09);
  color: rgba(0, 0, 0, 0.15);
}

.phone-status-right {
  display: flex;
  align-items: center;
  gap: calc(var(--phone-w) * 0.009);
}

.phone-status-right svg {
  width: calc(var(--phone-w) * 0.045);
  height: auto;
}

.phone-battery {
  width: calc(var(--phone-w) * 0.064);
  height: calc(var(--phone-w) * 0.036);
  border: 1px solid currentColor;
  border-radius: calc(var(--phone-w) * 0.011);
  padding: 1px;
  display: flex;
  align-items: center;
}

.phone-battery i {
  display: block;
  width: 80%;
  height: 100%;
  border-radius: calc(var(--phone-w) * 0.007);
  background: currentColor;
}

.phone-indicator {
  position: absolute;
  bottom: calc(var(--phone-w) * 0.0273);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--phone-w) * 0.4364);
  height: calc(var(--phone-w) * 0.0182);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
}

.phone-body {
  padding: calc(var(--phone-w) * 0.16) calc(var(--phone-w) * 0.062) calc(var(--phone-w) * 0.16);
}

/* Skeleton bars rather than invented diary text — the same choice the app's
   own onboarding makes, and the reason it needs no translating. */
.sk {
  display: block;
  height: calc(var(--phone-w) * 0.022);
  border-radius: 999px;
  background: #e8eaee;
  margin-bottom: calc(var(--phone-w) * 0.019);
}

.sk--tiny {
  height: calc(var(--phone-w) * 0.015);
}

.phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--phone-w) * 0.04);
  margin-bottom: calc(var(--phone-w) * 0.055);
}

.phone-head .sk {
  margin-bottom: 0;
}

.phone-row {
  padding-bottom: calc(var(--phone-w) * 0.042);
  margin-bottom: calc(var(--phone-w) * 0.042);
  border-bottom: 1px solid rgba(154, 155, 160, 0.18);
}

.phone-row:last-child {
  border-bottom: none;
}

.phone-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(var(--phone-w) * 0.026);
}

.phone-row-foot .sk {
  margin-bottom: 0;
}

.phone-mood {
  width: calc(var(--phone-w) * 0.05);
  height: calc(var(--phone-w) * 0.05);
  border-radius: 999px;
  flex-shrink: 0;
}

.phone-photos {
  display: flex;
  gap: calc(var(--phone-w) * 0.018);
  margin-bottom: calc(var(--phone-w) * 0.03);
}

.phone-photo {
  width: calc(var(--phone-w) * 0.12);
  height: calc(var(--phone-w) * 0.12);
  border-radius: calc(var(--phone-w) * 0.022);
  background: #e8eaee;
}

.phone-bar {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--phone-w) * 0.04) calc(var(--phone-w) * 0.062) calc(var(--phone-w) * 0.1);
  background: #fff;
}

.phone-round {
  width: calc(var(--phone-w) * 0.105);
  height: calc(var(--phone-w) * 0.105);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-round svg {
  width: 50%;
  height: 50%;
}

.phone-round--ghost {
  border: 1px solid rgba(154, 155, 160, 0.25);
  color: #0b0b0c;
}

.phone-round--accent {
  background: var(--accent);
  color: #fff;
}

/* --- The mockup's little demo ------------------------------------------
 * The phone plays a loop: tap +, write an entry, attach a photo and a place,
 * save it, then look back at the list and the calendar. Scenes cross-fade;
 * everything inside is driven by two attributes on .phone-screen that
 * main.js steps through (data-scene, data-step), so the CSS below is only
 * describing states rather than running a timeline of its own.
 * ---------------------------------------------------------------------- */

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease);
}

.phone-screen[data-scene='list'] .scene--list,
.phone-screen[data-scene='compose'] .scene--compose,
.phone-screen[data-scene='calendar'] .scene--calendar {
  opacity: 1;
  visibility: visible;
}

/* The entry that has just been saved drops into the list. */
.phone-row--new {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.phone-screen[data-saved='true'] .phone-row--new {
  opacity: 1;
  transform: none;
}

/* Composer */
.compose-caret {
  display: inline-block;
  width: 2px;
  height: calc(var(--phone-w) * 0.05);
  background: var(--accent);
  vertical-align: middle;
  animation: caret 1s step-end infinite;
}

@keyframes caret {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

.compose-line {
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.phone-screen[data-step='1'] .compose-line:nth-of-type(1),
.phone-screen[data-step='2'] .compose-line:nth-of-type(-n + 2),
.phone-screen[data-step='3'] .compose-line,
.phone-screen[data-step='4'] .compose-line,
.phone-screen[data-step='5'] .compose-line {
  opacity: 1;
}

.compose-extras {
  display: flex;
  align-items: center;
  gap: calc(var(--phone-w) * 0.02);
  margin-top: calc(var(--phone-w) * 0.04);
}

.compose-photos,
.compose-place {
  display: flex;
  align-items: center;
  gap: calc(var(--phone-w) * 0.018);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.phone-screen[data-step='4'] .compose-photos,
.phone-screen[data-step='5'] .compose-photos,
.phone-screen[data-step='5'] .compose-place {
  opacity: 1;
  transform: none;
}

.compose-place {
  padding: calc(var(--phone-w) * 0.012) calc(var(--phone-w) * 0.03);
  border-radius: 999px;
  background: #ecf1ff;
  color: var(--accent);
}

.compose-place svg {
  width: calc(var(--phone-w) * 0.045);
  height: calc(var(--phone-w) * 0.045);
}

.compose-place .sk {
  width: calc(var(--phone-w) * 0.13);
  background: rgba(0, 122, 255, 0.25);
  margin: 0;
}

.compose-tools {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: calc(var(--phone-w) * 0.03);
  padding: calc(var(--phone-w) * 0.04) calc(var(--phone-w) * 0.062) calc(var(--phone-w) * 0.1);
  background: #fff;
}

.compose-tool {
  width: calc(var(--phone-w) * 0.105);
  height: calc(var(--phone-w) * 0.105);
  border-radius: 999px;
  border: 1px solid rgba(154, 155, 160, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b0b0c;
  flex-shrink: 0;
}

.compose-tool svg {
  width: 50%;
  height: 50%;
}

.compose-save {
  margin-left: auto;
  padding: calc(var(--phone-w) * 0.028) calc(var(--phone-w) * 0.06);
  border-radius: 999px;
  background: var(--accent);
}

.compose-save .sk {
  width: calc(var(--phone-w) * 0.12);
  background: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Calendar */
.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--phone-w) * 0.014);
}

.cal-weekdays span {
  height: calc(var(--phone-w) * 0.018);
  width: 60%;
  margin-inline: auto;
  border-radius: 999px;
  background: #e8eaee;
}

.cal-month {
  display: flex;
  align-items: center;
  gap: calc(var(--phone-w) * 0.03);
  margin: calc(var(--phone-w) * 0.05) 0 calc(var(--phone-w) * 0.03);
}

.cal-month::before,
.cal-month::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(154, 155, 160, 0.18);
}

.cal-month .sk {
  width: calc(var(--phone-w) * 0.16);
  margin: 0;
}

.cal-day {
  aspect-ratio: 1;
  border-radius: calc(var(--phone-w) * 0.018);
  background: #e8eaee;
}

.cal-day--on {
  background: var(--accent);
}

.cal-day--soft {
  background: #ecf1ff;
}

/* The pointer: a soft disc that lands on whatever is being "tapped". */
.tap {
  position: absolute;
  width: calc(var(--phone-w) * 0.13);
  height: calc(var(--phone-w) * 0.13);
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.18);
  border: 1.5px solid rgba(0, 122, 255, 0.45);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: left 0.35s var(--ease), top 0.35s var(--ease);
}

.tap[data-on='true'] {
  animation: tap-pulse 0.55s var(--ease);
}

@keyframes tap-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

/* The toggle in the bottom bar, so the calendar switch has something to
   actually switch. */
.phone-toggle {
  display: flex;
  align-items: center;
  gap: calc(var(--phone-w) * 0.008);
  padding: calc(var(--phone-w) * 0.008);
  border-radius: 999px;
  background: #e8eaee;
}

.phone-toggle span {
  width: calc(var(--phone-w) * 0.085);
  height: calc(var(--phone-w) * 0.085);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a9ba0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.phone-toggle span svg {
  width: 52%;
  height: 52%;
}

.phone-screen[data-scene='calendar'] .phone-toggle-cal,
.phone-screen:not([data-scene='calendar']) .phone-toggle-list {
  background: var(--accent);
  color: #fff;
}

/* Someone who asked for less motion gets the finished list and no loop. */
@media (prefers-reduced-motion: reduce) {
  .tap {
    display: none;
  }
}

/* --- Benefit cards ------------------------------------------------------ */

.benefit {
  position: relative;
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefit-art {
  width: 52px;
  height: 52px;
  display: block;
}

.benefit p {
  color: var(--subtitle);
  font-size: 14.5px;
}

/* "Coming soon" belongs to the card, not to the title — it sits in the
   corner and leaves the heading its own line. */
.benefit-flag {
  position: absolute;
  top: 16px;
  right: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge--soon {
  background: var(--surface-2);
  color: var(--hint);
}

.badge--save {
  background: var(--free-accent);
  color: #fff;
}

/* --- Pricing ------------------------------------------------------------ */

.plans {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.plan--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.plan-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--subtitle);
}

.plan-price {
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.1;
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-period {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--hint);
}

.plan p {
  margin-top: 14px;
  font-size: 15px;
  color: var(--subtitle);
}

.plan-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
}

.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.plan-list svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
}

.plan-tag {
  position: absolute;
  top: -11px;
  right: 22px;
}

.pricing-cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pay-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--hint);
  max-width: 60ch;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  max-width: 760px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}

.faq details + details {
  border-top: 1px solid var(--border-soft);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 1.8px solid var(--hint);
  border-bottom: 1.8px solid var(--hint);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s;
}

.faq details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq .answer {
  padding: 0 24px 22px;
  color: var(--subtitle);
  font-size: 15px;
  max-width: 68ch;
}

/* --- Support form ------------------------------------------------------- */

.support {
  max-width: 620px;
  margin-inline: auto;
}

.form {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.form-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13.5px;
  color: var(--subtitle);
}

.field input,
.field textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 100%;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field-label {
  font-size: 13.5px;
  color: var(--subtitle);
}

.field-optional {
  color: var(--hint);
}

.field-optional::before {
  content: '· ';
}

.field-error {
  font-size: 13px;
  line-height: 1.4;
  color: #ff3b30;
}

.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid .input-at,
.field.is-invalid .select-btn {
  border-color: #ff3b30;
}

/* Telegram: the @ belongs to the box, so it can't be deleted or doubled. The
   border moves from the input to this wrapper. */
.input-at {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding-left: 16px;
  cursor: text;
}

.input-at:focus-within {
  border-color: var(--accent);
}

.input-at-sign {
  font-size: 16px;
  color: var(--subtitle);
  user-select: none;
}

.field .input-at input,
.field.is-invalid .input-at input {
  border: none;
  background: transparent;
  padding-left: 1px;
}

/* Topic: a styled list rather than the browser's own, sharing the language
   menu's look (.lang-menu) so the page has one kind of dropdown. */
.select {
  position: relative;
}

.select-btn {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 44px 14px 16px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.select-btn::after {
  content: '';
  position: absolute;
  right: 19px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--hint);
  border-bottom: 2px solid var(--hint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}

.select-btn[aria-expanded='true']::after {
  transform: translateY(-30%) rotate(-135deg);
}

.select-btn:focus-visible,
.select-btn[aria-expanded='true'] {
  outline: none;
  border-color: var(--accent);
}

.select-value[data-empty='true'] {
  color: var(--hint);
}

.select-menu {
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 0;
  max-height: min(340px, 60vh);
  overflow-y: auto;
}

.select-menu button:focus-visible {
  outline: none;
  background: var(--surface-2);
}

/* The honeypot: out of sight and out of the tab order for people, still in
   the markup for bots that fill in every field they find. Not display:none —
   some bots skip fields hidden that way. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 13.5px;
  color: var(--hint);
  text-align: center;
  margin-top: 14px;
}

.form-status {
  font-size: 14.5px;
  text-align: center;
  padding: 12px;
  border-radius: var(--radius);
}

.form-status[data-state='ok'] {
  background: var(--accent-light);
  color: var(--accent);
}

.form-status[data-state='error'] {
  background: color-mix(in srgb, #ff3b30 12%, transparent);
  color: #ff3b30;
}

/* --- CTA band ----------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--accent);
  color: #fff;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
  text-align: center;
}

/* Spot illustrations tucked into the corners, behind the words. */
.band-art {
  position: absolute;
  width: clamp(88px, 12vw, 132px);
  display: block;
  z-index: 0;
  pointer-events: none;
}

.band-art--left {
  left: -18px;
  bottom: -24px;
  transform: rotate(-9deg);
}

.band-art--right {
  right: -14px;
  top: -26px;
  transform: rotate(8deg);
}

.band-sparkle {
  position: absolute;
  width: clamp(16px, 2vw, 26px);
  z-index: 0;
  pointer-events: none;
}

.band-sparkle--a {
  left: 13%;
  top: 18%;
}

.band-sparkle--b {
  right: 12%;
  bottom: 16%;
}

.cta-band h2,
.cta-band p,
.cta-band .btn {
  position: relative;
  z-index: 1;
}

/* On a phone the corners are where the text goes — the art would only crowd
   it, so only the smaller sparkles stay. */
@media (max-width: 640px) {
  .band-art {
    display: none;
  }
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.82);
  margin-top: 14px;
  font-size: 17px;
  max-width: 46ch;
  margin-inline: auto;
}

.cta-band .btn {
  margin-top: 28px;
  background: #fff;
  color: var(--accent);
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border-soft);
  padding-block: 44px 56px;
  font-size: 14.5px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-links a {
  color: var(--subtitle);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-bottom {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: var(--hint);
  font-size: 13.5px;
}

/* --- Consent banner ----------------------------------------------------- */

/* Same trap as the language menu: `display: flex` on the class below would
   outrank the browser's own `[hidden] { display: none }`, leaving the banner
   permanently on screen. */
.consent[hidden] {
  display: none;
}

.consent {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  width: min(380px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: consent-in 0.3s var(--ease);
}

@keyframes consent-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.consent-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--subtitle);
}

.consent-actions {
  display: flex;
  gap: 8px;
}

.consent-btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 14.5px;
}

.consent-more {
  font-size: 12.5px;
  color: var(--hint);
  text-align: center;
}

.btn--secondary {
  background: var(--surface-2);
  color: var(--text);
}

.btn--secondary:hover {
  background: color-mix(in srgb, var(--surface-2) 82%, var(--text) 8%);
}

@media (max-width: 560px) {
  .consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 18px;
  }
}

/* --- Error pages -------------------------------------------------------- */

.errorpage {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(16px, 5vw, 56px);
}

.errorpage-code {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(72px, 15vw, 140px);
  line-height: 1;
  color: var(--accent);
  opacity: 0.16;
  margin-bottom: 4px;
}

.errorpage h1 {
  font-size: clamp(28px, 5vw, 44px);
  max-width: none;
}

.errorpage .lede {
  margin-inline: auto;
}

.errorpage .hero-actions {
  margin-top: 28px;
}

.errorpage .hero-note a {
  color: var(--accent);
}

/* --- Legal pages -------------------------------------------------------- */

.legal {
  max-width: 760px;
  margin-inline: auto;
}

.legal h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin-top: 42px;
}

.legal h2:first-of-type {
  margin-top: 30px;
}

.legal p,
.legal li {
  color: var(--subtitle);
  font-size: 15.5px;
  margin-top: 14px;
}

.legal ul {
  padding-left: 22px;
}

.legal a {
  color: var(--accent);
}

.legal .updated {
  color: var(--hint);
  font-size: 14px;
  margin-top: 12px;
}

/* --- Narrower screens --------------------------------------------------- */

/* Three columns need ~1000px before the side cards start squeezing the
   phone; below that the app goes on top and the cards follow it. */
@media (max-width: 1000px) {
  .showcase {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .showcase-stage {
    order: -1;
    margin-bottom: 8px;
  }
  .showcase-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
  }
  /* The cards have moved below the phone, so the sides are free again. */
  .stage-spot,
  .stage-sparkle {
    display: block;
  }
  /* Placed from the phone's own edge rather than the page's, so they stay
     close to the mockup however wide the screen is. Each sits a different
     distance out (--gap) so they read as scattered, not lined up; min()
     pulls them in when a narrow screen has no room for that distance. */
  .showcase-stage {
    --phone-w: clamp(230px, 24vw, 286px); /* same as .phone */
    --spot-w: clamp(48px, 5.5vw, 72px); /* same as .stage-spot */
  }
  .stage-spot,
  .stage-sparkle {
    /* Declared here, not on the stage: it reads each element's own --gap. */
    --beside: calc(50% + var(--phone-w) / 2 + min(var(--gap), (100% - var(--phone-w)) / 2 - var(--spot-w)));
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }
  .stage-spot--calendar {
    --gap: 52px;
    top: 13%;
    right: var(--beside);
    transform: rotate(-6deg);
  }
  .stage-spot--location {
    --gap: 16px;
    top: 45%;
    right: var(--beside);
  }
  .stage-spot--mood {
    --gap: 72px;
    bottom: 11%;
    right: var(--beside);
    transform: rotate(5deg);
  }
  .stage-spot--photo {
    --gap: 26px;
    top: 5%;
    left: var(--beside);
    transform: rotate(6deg);
  }
  .stage-spot--clock {
    --gap: 68px;
    top: 35%;
    left: var(--beside);
  }
  .stage-spot--history {
    --gap: 12px;
    bottom: 17%;
    left: var(--beside);
    transform: rotate(-4deg);
  }
  .stage-sparkle--a {
    --gap: 104px;
    top: 30%;
    right: var(--beside);
  }
  .stage-sparkle--b {
    --gap: 44px;
    bottom: 6%;
    left: var(--beside);
  }
}

@media (max-width: 760px) {
  .nav-links {
    display: none;
  }
  .site-header .wrap {
    height: 66px;
    grid-template-columns: auto 1fr;
  }
  .brand {
    grid-column: 1;
  }
  .header-right {
    grid-column: 2;
  }
  .header-cta {
    padding: 10px 16px;
    font-size: 14px;
  }
  :root {
    --brand-dy: 104px;
    --brand-scale: 1.7;
  }
  .hero-logo-slot {
    height: 104px;
  }
}

@media (max-width: 560px) {
  .header-cta {
    display: none;
  }
  .brand img {
    height: 44px;
  }
}