/* ==========================================================================
   Stasis — marketing site
   Visual language mirrors the dark mode of the Stasis iOS app
   (see Stasis/Views/AppTheme.swift). Calm, editorial, deep-teal.
   ========================================================================== */

/* ---- Design tokens (from AppTheme.swift, dark mode) --------------------- */
:root {
  --deep:         #0C3847; /* stasisDeep — background top            */
  --deep-bottom:  #08242E; /* dark background gradient bottom        */
  --mid:          #1A8591; /* stasisMid — glow / accent             */
  --mint:         #38BCC2; /* stasisMint — bright accent            */
  --headline:     #E3F1EE; /* stasisHeadline (dark) — serif text     */

  --health:       #E78D65; /* coral ring  (Health)                  */
  --mental:       #82C6B9; /* mint ring   (Mental)                  */
  --focus:        #417EB8; /* sky ring    (Focus)                   */

  --card-fill:    rgba(0, 0, 0, 0.22);   /* StasisCardModifier dark  */
  --card-stroke:  rgba(255, 255, 255, 0.08);
  --card-fill-hi: rgba(255, 255, 255, 0.04);

  --text:         #E3F1EE;
  --text-soft:    rgba(227, 241, 238, 0.72);
  --text-faint:   rgba(227, 241, 238, 0.52);

  --radius:       18px;
  --radius-lg:    28px;
  --maxw:         1120px;
  --gutter:       clamp(20px, 5vw, 56px);

  --serif: "Newsreader", Georgia, "Times New Roman", "Songti TC",
           "Songti SC", "PingFang TC", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
           system-ui, "Helvetica Neue", "PingFang TC", "Microsoft JhengHei",
           sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* overflow-x clip on html (not just body) — iOS Safari ignores body's overflow-x
   and lets the root element scroll horizontally past elements that bleed off the
   right edge (the watch mockup, ambient glows). `clip` doesn't create a scroll
   container, so the sticky nav keeps working. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  line-height: 1.6;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  background-color: var(--deep);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(26, 133, 145, 0.18), transparent 60%),
    linear-gradient(180deg, var(--deep) 0%, var(--deep-bottom) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--headline);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

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

/* ---- Layout helpers ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(72px, 12vw, 140px);
  /* Hairline seam at every section boundary (the lower section draws the line, so
     junctions never double up) — gives the long scroll clear "rooms". */
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
/* Light-mode sections — deep-teal "ink" text on a soft pastel ring-colour
   background, alternating with the dark sections to give the long page rhythm.
   Overriding the colour custom-properties locally inverts most descendants
   automatically (headings, body, leads, cards). Backgrounds are opaque so they
   fully cover the page's fixed teal gradient. */
.section.light {
  --headline:     #0B2D38;                 /* deep teal ink */
  --text:         #0B2D38;
  --text-soft:    rgba(11, 45, 56, 0.74);
  --text-faint:   rgba(11, 45, 56, 0.50);
  --card-stroke:  rgba(11, 45, 56, 0.12);
  --card-fill:    rgba(255, 255, 255, 0.66);
  --card-fill-hi: rgba(255, 255, 255, 0.92);
  color: var(--text);
}
.section.light .eyebrow { color: rgba(11, 45, 56, 0.60) !important; } /* beats the ring-hue eyebrow rules */
.section.light .manifesto-closing { color: var(--mid); }              /* keep a teal accent for the tagline */

/* Soft pastel ring-hue backgrounds. */
.light-mint  { background: linear-gradient(180deg, #E7F1EC 0%, #DCEBE3 100%); } /* Mental */
.light-sky   { background: linear-gradient(180deg, #E7ECF4 0%, #DBE4F0 100%); } /* Focus  */
.light-peach { background: linear-gradient(180deg, #F6EAE0 0%, #F0DFD1 100%); } /* Health */

/* Features (light): the dark-page ambient glow makes no sense on a pastel — drop it. */
#features.light::before { display: none; }

/* Screenshot gallery (light): the dark phones contrast with the pastel directly,
   so strip the glassy stage panel + mint glow and let them sit on the colour. */
.shots.light .shots-row { background: none; border: none; box-shadow: none; }
.shots.light .shots-row::before { display: none; }

/* iPad/Watch (light): same idea — no container; the devices sit directly on the
   pastel, grounded by their own drop shadows. */
.devices.light .devices-stage { background: none; border: none; box-shadow: none; }
.devices.light .devices-stage::before { display: none; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mint);
  margin: 0 0 18px;
}
/* Rotate eyebrow labels through the three ring hues so the little uppercase
   tags carry the balance palette down the page (instead of all-mint). */
.manifesto .eyebrow { color: var(--focus); }
#equilibrium .eyebrow { color: var(--mental); }
#features .eyebrow { color: var(--health); }
#pillars .eyebrow { color: var(--focus); }
.shots .eyebrow { color: var(--mental); }
.devices .eyebrow { color: var(--health); }

.section-title {
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 400;   /* match the hero; lifted off the base 300 for presence */
  max-width: 18ch;
}
/* "Balance" mark — a three-segment coral|mint|sky bar under every section title,
   a recurring echo of the three rings. */
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 5px;
  margin-top: 20px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--health) 0 33.33%,
    var(--mental) 33.33% 66.66%,
    var(--focus)  66.66% 100%);
}
/* Centre the bar where the title itself is centred. */
.shots .section-title::after,
.devices .section-title::after { margin-inline: auto; }

.lead {
  color: var(--text-soft);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  max-width: 56ch;
  margin-top: 18px;
}

/* ---- Buttons / App Store badge ------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.btn-primary {
  background: var(--mint);
  color: #052028;
}
.btn-primary:hover { transform: translateY(-2px); background: #4fd0d6; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--card-stroke);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.28); transform: translateY(-2px); }

.appstore {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px 14px 22px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  color: #000;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.45);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.appstore:hover { transform: translateY(-2px); box-shadow: 0 13px 30px -10px rgba(0,0,0,0.5); }
.appstore svg { width: 28px; height: 28px; flex: none; fill: #000; }
.appstore .appstore-text { display: flex; flex-direction: column; line-height: 1.1; }
.appstore .appstore-small { font-size: 0.66rem; letter-spacing: 0.02em; opacity: 0.85; }
.appstore .appstore-big { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: rgba(10, 42, 53, 0.55);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav.scrolled {
  background: rgba(8, 33, 42, 0.82);
  border-bottom-color: var(--card-stroke);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--headline);
  letter-spacing: 0.01em;
}
.brand img { width: 30px; height: 30px; border-radius: 50%; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--text); }

.nav-right { display: flex; align-items: center; gap: 18px; }

/* Language switcher — a button that opens a dropdown listing every locale.
   Scales to any number of languages. */
.lang-menu { position: relative; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--card-stroke);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lang-toggle:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.lang-toggle .caret {
  width: 9px;
  height: 6px;
  fill: currentColor;
  opacity: 0.6;
  transition: transform 0.25s var(--ease);
}
.lang-menu.open .lang-toggle .caret { transform: rotate(180deg); }

.lang-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 168px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: rgba(8, 33, 42, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--card-stroke);
  border-radius: 14px;
  box-shadow: 0 22px 54px -22px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 60;
}
.lang-menu.open .lang-menu-list { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-menu-list a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.lang-menu-list a[aria-current="page"] { color: var(--mint); }

/* Footer variant: a plain text-link trigger (matches the other footer links)
   whose menu opens upward so it never overflows the bottom of the page. */
.lang-menu--footer .lang-toggle {
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  gap: 5px;
}
.lang-menu--footer .lang-toggle:hover { border-color: transparent; }
.lang-menu--footer .lang-menu-list {
  top: auto;
  bottom: calc(100% + 10px);
  left: 0;
  right: auto;
  transform: translateY(6px);
}
.lang-menu--footer.open .lang-menu-list { transform: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-top: clamp(56px, 9vw, 110px);
  padding-bottom: clamp(48px, 8vw, 96px);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-eyebrow {
  color: var(--text-faint);
  /* Bigger than the base 0.72rem eyebrow — this is the "what is this" category
     label, so it should read clearly at a glance (esp. for the short zh phrase). */
  font-size: clamp(0.9rem, 0.78rem + 0.5vw, 1.1rem);
  /* Optical alignment: the big serif "S" in the h1 below has an open counter and
     a thin entry stroke, so its visual left edge sits a touch right of its box.
     The flush uppercase eyebrow then reads as overhanging left. Nudge it right by
     a hair so the two left edges line up to the eye. */
  margin-left: 0.16em;
}
.hero h1 {
  font-size: clamp(3rem, 1.6rem + 7vw, 6rem);
  /* Newsreader regular (400) — lifted off the old spindly 200 to read with the
     same presence as the app's serif titles, while staying light enough to suit
     the very large hero size (the app's medium is tuned for ~30 pt, not 6rem). */
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.hero .hero-sub {
  margin-top: 22px;
  color: var(--text-soft);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  max-width: 40ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 38px;
}
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Aurora — three soft colour clouds (coral / sky / mint) drift slowly behind the
   phone and blend in the middle, so the first impression is alive and colourful.
   The global reduced-motion rule freezes it to a static tri-colour blend. */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -34% -26%;
  z-index: 0;
  background:
    radial-gradient(48% 52% at 50% 46%, rgba(216,240,238,0.40), transparent 70%),  /* big light halo right behind the phone */
    radial-gradient(48% 54% at 22% 26%, rgba(250,193,164,0.54), transparent 72%),  /* coral — lighter */
    radial-gradient(52% 56% at 80% 32%, rgba(152,192,238,0.50), transparent 72%),  /* sky   — lighter */
    radial-gradient(56% 60% at 50% 80%, rgba(178,232,218,0.48), transparent 72%);  /* mint  — lighter */
  filter: blur(30px);
  animation: heroAurora 24s ease-in-out infinite alternate;
}
@keyframes heroAurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(-3deg); }
  50%  { transform: translate3d(2%,  2%, 0) scale(1.09) rotate(3deg); }
  100% { transform: translate3d(4%, -1%, 0) scale(1.05) rotate(5deg); }
}
.phone {
  position: relative;
  z-index: 1;
  width: min(310px, 78%);
  /* CSS device frame: the thick dark border is the phone body, the screenshot is
     the screen (border-radius clips the image to rounded screen corners). */
  border: 9px solid #0b0e12;
  border-radius: 50px;
  background: #0b0e12;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10),   /* bright metal edge */
              0 40px 90px -30px rgba(0,0,0,0.7);
}

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto { text-align: center; }
.manifesto .wrap { max-width: 880px; }
.manifesto-lines {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--headline);
  font-size: clamp(1.4rem, 1rem + 1.9vw, 2.35rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.manifesto-lines p { margin-block: 0.35em; }
/* An empty manifesto line ("" in the lines array) is a stanza break — a calm
   pause between thematic groups, not a literal blank paragraph. */
.manifesto-lines p:empty { margin-block: 0; height: 0.7em; }
.manifesto-closing {
  display: block;
  margin-top: 0.8em;
  color: var(--mint);
  font-style: italic;
}

/* ==========================================================================
   Equilibrium / rings
   ========================================================================== */
.equilibrium-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.rings-figure {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rings-svg { width: min(360px, 86%); height: auto; }
.rings-svg .track { fill: none; stroke: rgba(255,255,255,0.07); }
.rings-svg .arc {
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dashoffset: var(--c);  /* start empty */
  transition: stroke-dashoffset 1.5s var(--ease);
}
.rings-figure.in .arc { stroke-dashoffset: var(--filled); }
/* Once filled, the rings breathe gently so the centrepiece feels alive.
   (Global reduced-motion disables this.) */
@keyframes ringBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.rings-figure.in .rings-svg {
  transform-origin: 50% 50%;
  animation: ringBreathe 6.5s ease-in-out infinite;
}
.ring-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ring-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.ring-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: none;
  translate: 0 -1px;
}
.ring-dot.health { background: var(--health); }
.ring-dot.mental { background: var(--mental); }
.ring-dot.focus  { background: var(--focus); }
/* Same luminous glow as the rings, on the Health/Mental/Focus bullets. */
.ring-list .ring-dot.health { box-shadow: 0 0 7px rgba(231,141,101,0.9); }
.ring-list .ring-dot.mental { box-shadow: 0 0 7px rgba(130,198,185,0.9); }
.ring-list .ring-dot.focus  { box-shadow: 0 0 7px rgba(65,126,184,0.95); }
.ring-name {
  font-weight: 600;
  color: var(--text);
}
.ring-line { color: var(--text-soft); }
.ring-examples {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 0.92rem;
}

/* ==========================================================================
   Cards (features + pillars)
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: clamp(36px, 5vw, 56px);
}
.card {
  position: relative;
  overflow: hidden;            /* clips the top accent bar to the rounded corners */
  --accent: var(--mint);
  --glow: rgba(56,188,194,0.42);
  background: var(--card-fill);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
              background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Coloured top edge in the card's ring hue. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
/* The six feature cards cycle coral → mint → sky (two of each = balanced). */
.card-grid .card:nth-child(3n+1) { --accent: var(--health); --glow: rgba(231,141,101,0.42); }
.card-grid .card:nth-child(3n+2) { --accent: var(--mental); --glow: rgba(130,198,185,0.42); }
.card-grid .card:nth-child(3n+3) { --accent: var(--focus);  --glow: rgba(65,126,184,0.46); }
.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--card-fill-hi), var(--card-fill));
  box-shadow: 0 22px 56px -24px var(--glow);   /* soft lift in the card's own hue */
}
.card h3 {
  font-size: 1.28rem;
  font-weight: 400;
  margin-bottom: 10px;
}
.card p { color: var(--text-soft); font-size: 0.98rem; }

/* Pillars — numbered editorial list (distinct from the feature card grid) */
.pillar-list {
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--card-stroke);
}
.pillar-row {
  display: grid;
  grid-template-columns: clamp(52px, 8vw, 104px) 1fr;
  gap: clamp(16px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(24px, 3.5vw, 40px) 0;
  border-bottom: 1px solid var(--card-stroke);
}
.pillar-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 2.8rem);
  line-height: 1;
  color: var(--mint);
  letter-spacing: 0.01em;
}
/* Recolour the pillar numerals through the ring hues; the Equilibrium pillar (03)
   keeps the bright mint accent as the centrepiece of the balance idea. */
#pillars .pillar-row:nth-child(1) .pillar-num { color: var(--health); }
#pillars .pillar-row:nth-child(2) .pillar-num { color: var(--mental); }
#pillars .pillar-row:nth-child(3) .pillar-num { color: var(--mint); }
#pillars .pillar-row:nth-child(4) .pillar-num { color: var(--focus); }
#pillars .pillar-row:nth-child(5) .pillar-num { color: var(--health); }
.pillar-text h3 {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 400;
  margin-bottom: 8px;
}
.pillar-text p {
  color: var(--text-soft);
  max-width: 62ch;
}

/* ==========================================================================
   Screenshots
   ========================================================================== */
.shots { text-align: center; }
.shots-row {
  /* inline-flex so the lighter "stage" hugs the trio and centres via .shots text-align. */
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;           /* a raised centre phone sits proud of the others */
  gap: clamp(20px, 4vw, 56px);
  margin-top: clamp(40px, 6vw, 64px);
  flex-wrap: wrap;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 60px);
}
.shot-wrap { display: flex; margin: 0; }
/* The larger centre phone is lifted via the wrapper's margin (with align-items:flex-end),
   leaving the .shot transform free for the hover lift. Degrades cleanly when the row wraps. */
.shot-wrap.center { margin-bottom: clamp(16px, 3vw, 30px); }
.shot {
  width: min(248px, 80vw);
  /* Matching CSS device frame (see .phone). */
  border: 8px solid #0b0e12;
  border-radius: 44px;
  background: #0b0e12;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12),
              0 42px 96px -30px rgba(0,0,0,0.82);   /* deeper — grounds onto the stage */
  transition: transform 0.4s var(--ease);
}
.shot-wrap.center .shot { width: min(284px, 84vw); }
.shot:hover { transform: translateY(-6px); }

/* ==========================================================================
   Cross-device showcase (iPad + Apple Watch)
   ========================================================================== */
.devices { text-align: center; }
.devices .lead { max-width: 46ch; }
.devices-stage {
  position: relative;
  display: inline-block;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(40px, 6vw, 72px) clamp(36px, 6vw, 72px) clamp(48px, 7vw, 84px);
}
.tablet-wrap { position: relative; display: inline-block; }
.tablet {
  position: relative;
  z-index: 1;
  width: min(520px, 86vw);
  /* iPad-proportioned frame: thinner radius than the phone. */
  border: 12px solid #0b0e12;
  border-radius: 30px;
  background: #0b0e12;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12),
              0 48px 110px -32px rgba(0,0,0,0.82);   /* deeper — grounds onto the stage */
}
/* The two Watch frames share one slot at the lower-right of the iPad. The stack
   owns the position + responsive width; the first image (rings) sits in flow and
   gives the stack its height, the second (habits) overlays it absolutely. CSS
   crossfades by fading the top image in/out over the static one beneath. */
.watch-stack {
  position: absolute;
  z-index: 2;
  right: -3%;
  bottom: -4%;
  width: min(150px, 30vw);
  display: inline-block;
  line-height: 0;          /* no descender gap under the in-flow image */
}
.watch {
  width: 100%;
  /* The PNGs are pre-framed (watch hardware + band) with a transparent background. */
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55));
}
.watch-a { position: relative; }            /* in flow — sizes the stack */
.watch-b {                                  /* overlays, crossfades on top */
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: watchSwap 9s ease-in-out infinite;
}
/* Habits (watch-b) is the resting frame; rings (watch-a) reveals periodically. */
@keyframes watchSwap {
  0%, 33%   { opacity: 1; }   /* show habit list */
  41%, 66%  { opacity: 0; }   /* show rings */
  74%, 100% { opacity: 1; }   /* back to habit list */
}
@media (prefers-reduced-motion: reduce) {
  .watch-b { animation: none; opacity: 1; }   /* freeze on the habit-list frame */
}
@media (max-width: 560px) {
  .watch-stack { right: 0; bottom: -2%; width: 86px; }
}

/* Shared "stage" surface + glow behind both device clusters — lifts the dark
   screenshots off the dark page so they no longer blend (lighter rounded panel,
   hairline border, soft top highlight, mint glow halo bleeding past the corners). */
.shots-row,
.devices-stage {
  isolation: isolate;              /* own stacking context so ::before can sit behind */
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.shots-row::before,
.devices-stage::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 38%, rgba(56,188,194,0.20), transparent 70%);
  filter: blur(12px);
}

/* ==========================================================================
   Ambient colour drift
   Faint, heavily-blurred glows in the three ring hues (coral / mint / sky),
   anchored per section so the page's colour gently shifts on scroll instead of
   reading as one flat teal field. All sit behind content (z-index:-1) and are
   non-interactive; opacities are deliberately low to stay calm/on-brand.
   ========================================================================== */
#equilibrium,
#features,
#pillars { position: relative; }

#equilibrium::before,
#equilibrium::after,
#features::before,
#pillars::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  filter: blur(22px);
}
/* Equilibrium — the balance section → all three ring hues at once. */
#equilibrium::before {            /* sky, lower-left */
  left: -6%; bottom: 4%;
  width: min(620px, 64%); height: 70%;
  background: radial-gradient(closest-side, rgba(65,126,184,0.13), transparent 72%);
}
#equilibrium::after {             /* coral, upper-right */
  right: -6%; top: 2%;
  width: min(560px, 58%); height: 66%;
  background: radial-gradient(closest-side, rgba(231,141,101,0.11), transparent 72%);
}
/* Features → mint, right. */
#features::before {
  right: -8%; top: 8%;
  width: min(620px, 60%); height: 76%;
  background: radial-gradient(closest-side, rgba(130,198,185,0.10), transparent 72%);
}
/* Pillars → sky, left. */
#pillars::before {
  left: -8%; top: 10%;
  width: min(640px, 62%); height: 80%;
  background: radial-gradient(closest-side, rgba(65,126,184,0.12), transparent 72%);
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta {
  text-align: center;
  position: relative;
}
/* Closing aurora — bookends the hero. Three saturated, well-separated colour pools
   (coral / sky / mint) frame the card; kept separate so they never composite into
   the muddy brown a single low-opacity coral wash produced. */
.cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1340px, 122%);
  height: 132%;
  background:
    radial-gradient(30% 36% at 19% 22%, rgba(245,170,134,0.34), transparent 68%),
    radial-gradient(34% 40% at 82% 28%, rgba(80,140,200,0.32), transparent 70%),
    radial-gradient(40% 44% at 50% 92%, rgba(140,210,196,0.26), transparent 70%);
  filter: blur(34px);
}
/* Light "callout" card (matches the iPad section background) lifting off the dark
   CTA section, framed by the aurora behind it. */
.cta-card {
  position: relative;
  --headline: #0B2D38;
  --text-soft: rgba(11, 45, 56, 0.74);
  color: #0B2D38;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(11, 45, 56, 0.12);
  background: linear-gradient(180deg, #E7ECF4 0%, #DBE4F0 100%);  /* same as .light-sky (iPad section) */
  box-shadow: 0 30px 80px -34px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.55);
  padding: clamp(52px, 8vw, 92px) var(--gutter);
  overflow: hidden;
}
/* Three-ring brand mark above the headline — gives the finale a clear, on-brand
   focal start (echoes the equilibrium ring dots). */
.cta-rings {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-bottom: 24px;
}
.cta-rings .ring-dot { width: 10px; height: 10px; translate: 0 0; }
.cta-card h2 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 400;   /* match the hero (was 200) */
  color: var(--headline);   /* deep-teal ink on the light card */
}
.cta-card p { color: var(--text-soft); margin-top: 14px; }
.cta-card .appstore { margin-top: 32px; }
/* Black badge on the light card (white text/logo) — strong contrast on the pastel. */
.cta-card .appstore {
  background: #000;
  color: #fff;
  border-color: rgba(255,255,255,0.16);
}
.cta-card .appstore svg { fill: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  border-top: none;
  padding-block: 56px;
}
/* Crisp tri-colour divider (fading at both ends) instead of a muddy warm wash —
   a clean brand sign-off line between the CTA and the footer. */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--health) 28%,
    var(--mental) 50%,
    var(--focus) 72%,
    transparent);
  opacity: 0.75;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.footer .brand { font-size: 1.15rem; }
.footer-tagline {
  font-family: var(--serif);
  color: var(--text-soft);
  font-style: italic;
  margin-top: 14px;
  max-width: 32ch;
}
.footer-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.footer-links a { color: var(--text-soft); font-size: 0.95rem; }
.footer-links a:hover { color: var(--text); }
.footer-meta {
  margin-top: 28px;
  color: var(--text-faint);
  font-size: 0.85rem;
  width: 100%;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-main {
  position: relative;
  isolation: isolate;
  padding-top: clamp(48px, 8vw, 96px);
}
/* Soft tri-colour aurora behind the contact area — lifts the dark page and frames
   the light form card (echoes the hero / CTA finale). */
.contact-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -4%;
  right: -6%;
  width: min(940px, 78%);
  height: 86%;
  background:
    radial-gradient(38% 46% at 28% 22%, rgba(231,141,101,0.16), transparent 70%),
    radial-gradient(44% 54% at 76% 30%, rgba(65,126,184,0.17), transparent 70%),
    radial-gradient(50% 58% at 54% 82%, rgba(130,198,185,0.15), transparent 70%);
  filter: blur(34px);
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}

/* Intro — the home page's brand accents: three-ring mark, ring-hue eyebrow,
   and the tri-colour balance bar under the title. */
.contact-rings { display: flex; gap: 10px; margin-bottom: 22px; }
.contact-rings .ring-dot { width: 9px; height: 9px; translate: 0 0; }
.contact-rings .ring-dot.health { box-shadow: 0 0 7px rgba(231,141,101,0.9); }
.contact-rings .ring-dot.mental { box-shadow: 0 0 7px rgba(130,198,185,0.9); }
.contact-rings .ring-dot.focus  { box-shadow: 0 0 7px rgba(65,126,184,0.95); }
.contact-intro .eyebrow { color: var(--health); }
.contact-intro h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem);
  font-weight: 400;   /* match the hero (was 200) */
}
.contact-intro h1::after {
  content: "";
  display: block;
  width: 60px; height: 5px;
  margin-top: 20px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--health) 0 33.33%, var(--mental) 33.33% 66.66%, var(--focus) 66.66% 100%);
}
.contact-intro .lead { margin-top: 22px; }

/* Form — a light "callout" card on the dark page (matches the iPad section / CTA
   card): light inputs, deep-teal ink, lifted by its shadow. */
.form {
  position: relative;
  --headline:    #0B2D38;
  --text:        #0B2D38;
  --text-soft:   rgba(11, 45, 56, 0.74);
  --text-faint:  rgba(11, 45, 56, 0.55);
  --card-stroke: rgba(11, 45, 56, 0.16);
  color: #0B2D38;
  background: linear-gradient(180deg, #E7F1EC 0%, #DCEBE3 100%);  /* same as .light-mint (Belief section) */
  border: 1px solid rgba(11, 45, 56, 0.12);
  box-shadow: 0 30px 80px -34px rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(255,255,255,0.55);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 9px;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--card-stroke);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(11, 45, 56, 0.42); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--mid);
  box-shadow: 0 0 0 3px rgba(26, 133, 145, 0.16);   /* soft teal focus ring */
}
.field textarea { resize: vertical; min-height: 140px; }

/* reCAPTCHA v2 widget is a fixed 304px; scale it down on very narrow phones
   so it never overflows the form padding. */
.recaptcha-field { overflow: hidden; }
@media (max-width: 360px) {
  .recaptcha-field .g-recaptcha {
    transform: scale(0.88);
    transform-origin: 0 0;
  }
}

/* Honeypot — visually hidden, off-screen, not display:none (bots skip those) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form .btn-primary[aria-busy="true"] { opacity: 0.65; pointer-events: none; }
/* Ghost button on the light card needs ink + a dark border (not the dark-page light text). */
.form .btn-ghost { color: #0B2D38; border-color: rgba(11, 45, 56, 0.22); }
.form .btn-ghost:hover { border-color: rgba(11, 45, 56, 0.45); }

.form-status {
  margin-top: 18px;
  font-size: 0.96rem;
  border-radius: 12px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), padding 0.3s var(--ease);
}
.form-status.show { padding: 14px 16px; max-height: 200px; }
.form-status.success { background: rgba(26,133,145,0.16); color: #0C5A62; }   /* readable on the light card */
.form-status.error   { background: rgba(231,141,101,0.20); color: #9A4A2C; }

/* ==========================================================================
   Guide page
   ========================================================================== */
.guide-main { padding-top: clamp(40px, 7vw, 72px); }

.guide-hero { padding-block: 0 clamp(8px, 2vw, 20px); }
.guide-hero h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem);
  font-weight: 400;   /* match the hero (was 200) */
  margin-top: 6px;
}
.guide-hero .lead { margin-top: 18px; }

/* Tighter than full marketing sections — these stack as one continuous page. */
.guide-section { padding-block: clamp(44px, 7vw, 84px); }

/* FAQ — native <details>/<summary>, no JS. */
.faq-list {
  margin-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--card-stroke);
}
.faq-item { border-bottom: 1px solid var(--card-stroke); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.6vw, 26px) 4px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--serif);
  color: var(--headline);
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.3;
  transition: color 0.2s var(--ease);
}
.faq-item summary:hover .faq-q { color: var(--mint); }
/* +/− toggle: the vertical bar hides when open, leaving a minus. */
.faq-icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--mint);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq-icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-answer { padding: 0 4px clamp(18px, 2.6vw, 26px); }
.faq-answer p { color: var(--text-soft); max-width: 72ch; }
.faq-answer strong { color: var(--text); font-weight: 600; }

/* (The in-app Guide's "Tips" section is intentionally omitted from the website —
   per-habit detail is for app users, not a landing page.) */

/* ==========================================================================
   Legal / Privacy page
   ========================================================================== */
.legal-updated {
  margin-top: 14px;
  color: var(--text-faint);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.legal-section-wrap { padding-top: clamp(8px, 2vw, 20px); }

/* Narrower measure than marketing sections — long-form text reads best ~68ch. */
.legal-wrap { max-width: 760px; }

.legal-section { margin-top: clamp(34px, 5vw, 56px); }
.legal-section:first-child { margin-top: 0; }
.legal-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--headline);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  line-height: 1.25;
  margin: 0 0 16px;
}
.legal-section p {
  color: var(--text-soft);
  margin: 0 0 14px;
  max-width: 68ch;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--text); font-weight: 600; }

.legal-list {
  margin: 4px 0 14px;
  padding-left: 1.25em;
  color: var(--text-soft);
  max-width: 68ch;
}
.legal-list li { margin-bottom: 8px; }
.legal-list li::marker { color: var(--mint); }

.legal-section a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s var(--ease);
}
.legal-section a:hover { color: var(--mental); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Staggered children (manifesto lines, card grids) */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-stagger].in > * { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-grid .hero-sub { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { order: -1; margin-bottom: 12px; }
  .equilibrium-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .section-title, .lead { margin-inline: auto; }
  .equilibrium-grid .lead { margin-inline: 0; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px var(--gutter) 24px;
    background: rgba(8, 33, 42, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-stroke);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .nav-links a { padding: 12px 0; width: 100%; font-size: 1.05rem; }
  .nav.open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .rings-svg .arc { stroke-dashoffset: var(--filled) !important; }
}