/* =========================================================================
   mymemo.cloud — marketing site styles.
   Plain CSS. No build step, no preprocessor, no external requests.

   Palette + shape tokens mirror the Flutter app
   (mymemo-app/lib/core/theme/app_theme.dart, ADR-0005: dark + plum + gold).
   The hexes below are hand-approximated M3 tones off seed #6A3E8F — when the
   design-system lib publishes real tokens, reconcile against those.
   ========================================================================= */

:root{
  /* --- app-aligned palette: dark plum surfaces + gold accent ------------ */
  --seed-plum:    #6A3E8F;   /* app seed — AppTheme.seedPlum            */
  --gold:         #F4C168;   /* app accent — AppTheme.accentGold        */
  --on-gold:      #231300;   /* app _onAccentGold                       */

  --surface:      #141018;   /* scaffold background                     */
  --surface-1:    #1D1722;   /* surfaceContainerLow  — cards            */
  --surface-2:    #262030;   /* surfaceContainerHigh                    */
  --surface-3:    #322A3D;   /* surfaceContainerHighest — inputs        */
  --on-surface:   #E9E0EE;
  --on-surface-2: #CBC1D6;   /* onSurfaceVariant                        */
  --on-surface-3: #9B90A8;   /* faint / captions                        */
  --outline:      #6C6178;
  --outline-var:  #4A4256;
  --primary:      #D9B9FF;   /* M3 dark primary off the plum seed       */
  --primary-cont: #52286E;   /* primaryContainer                        */

  --ph-fill:      #241E2E;   /* image placeholder                       */
  --ph-hatch:     #362E43;
  --ph-label:     #A79CB4;

  /* --- type: system stacks only (app uses Roboto/system, not a serif) --- */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* --- type scale (fluid display; tracking mirrors the app's ramp) ------ */
  --fs-micro: 0.75rem;    /* 12 — kicker, legal */
  --fs-small: 0.875rem;   /* 14 — captions */
  --fs-body:  1.0625rem;  /* 17 — body */
  --fs-lead:  1.3125rem;  /* 21 — hero pitch, prop lead */
  --fs-h3:    1.625rem;   /* 26 */
  --fs-h2:    clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  --fs-h1:    clamp(2.5rem, 1.1rem + 5.8vw, 4.75rem);

  /* --- spacing rhythm: 4px base ---------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --s10: 160px;

  /* --- radii: the app's shape tokens verbatim -------------------------- */
  --r-sm: 12px;   /* AppTheme.radiusSm — buttons, inputs, chips */
  --r-md: 16px;   /* AppTheme.radiusMd — rows */
  --r-lg: 18px;   /* AppTheme.radiusCard */
  --r-xl: 22px;   /* AppTheme.radiusLg — sheets, brand mark */

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 620ms;

  --measure: 34ch;      /* body copy measure */
  --shell: 1180px;      /* page shell */
}

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

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

/* the hero glow is full-bleed via width:100vw, which is wider than the
   content box once a vertical scrollbar exists — clip the overflow so the
   page never scrolls sideways. */
html, body{ overflow-x:clip; }

body{
  margin:0;
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
}

/* One soft plum glow behind the hero — echoes the app's mic-FAB halo.
   CSS-drawn, no asset.
   Deliberately NOT position:fixed over the whole viewport: a full-page fixed
   gradient layer forces the compositor to repaint it on every scroll frame
   (it also stalled headless screenshot capture). Scoped + absolute inside the
   hero band instead, so it paints once and scrolls away with its section. */
.glow{ position:relative; isolation:isolate; }
.glow::before{
  content:"";
  position:absolute; pointer-events:none; z-index:-1;
  /* full-bleed: the hero is a max-width shell, so an inset:0 box shows its
     own edges against the dark ground. Span the viewport width instead. */
  top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background:
    radial-gradient(680px 460px at 78% 0%, rgba(106,62,143,.46), rgba(106,62,143,0) 70%),
    radial-gradient(520px 400px at 2% 22%, rgba(106,62,143,.20), rgba(106,62,143,0) 72%);
}

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(28px, 9vw, 132px);
}

/* ---------------------------------------------------------------- header */
.masthead{
  position:relative; z-index:3;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s5);
  padding-block:var(--s5);
  border-bottom:1px solid var(--outline-var);
}
.wordmark{
  font-size:1.375rem; font-weight:600; letter-spacing:-0.02em;
  text-decoration:none; color:var(--on-surface);
}
.wordmark::after{
  content:"."; color:var(--gold);
}
.masthead-actions{ display:flex; align-items:center; gap:var(--s4); }
.masthead .link{
  font-size:var(--fs-small); font-weight:600;
  color:var(--on-surface-2); text-decoration:none;
  padding:var(--s2) var(--s3);
  border-radius:var(--r-sm);
}
.masthead .link:hover{ color:var(--on-surface); background:var(--surface-2); }

/* ------------------------------------------------------------ typography */
/* kicker — the app's labelSmall: uppercase, wide tracking, w600 */
.eyebrow{
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
  margin:0 0 var(--s4);
}
h1{
  font-size:var(--fs-h1);
  line-height:1.02; letter-spacing:-0.03em;
  font-weight:600;
  /* extra bottom space: the .mark rule hangs below the last baseline */
  margin:0 0 var(--s6);
  max-width:19ch;
  text-wrap:balance;
}
h2{
  font-size:var(--fs-h2);
  line-height:1.06; letter-spacing:-0.02em; font-weight:600;
  margin:0 0 var(--s4);
  max-width:26ch; text-wrap:balance;
}
h3{
  font-size:var(--fs-h3);
  line-height:1.15; letter-spacing:-0.015em; font-weight:600;
  margin:0 0 var(--s3);
  max-width:22ch;
}
.lead{
  font-size:var(--fs-lead);
  line-height:1.45; color:var(--on-surface-2);
  max-width:44ch; margin:0 0 var(--s6);
}
p{ max-width:var(--measure); }

/* gold accent on the operative words — the app uses gold for "active",
   so a gold bar (not an editorial marker swipe) is the on-brand emphasis. */
.mark{
  position:relative;
  color:var(--gold);
  white-space:nowrap;
}
.mark::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-.14em;
  height:.085em; min-height:3px;
  background:var(--gold);
  border-radius:999px;
  opacity:.9;
}

/* ----------------------------------------------------------------- action */
/* action pair — mirrors the app's FilledButton / OutlinedButton themes:
   radius 12, 20/14 padding, w600 label with +0.5 tracking. */
.actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  margin:0;
}
.cta{
  display:inline-flex; align-items:center; gap:var(--s3);
  font-size:var(--fs-body); font-weight:600; letter-spacing:.01em;
  text-decoration:none;
  padding:var(--s4) var(--s5);
  border-radius:var(--r-sm);
  background:var(--gold); color:var(--on-gold);
  border:1px solid transparent;
  transition:filter 140ms var(--ease), transform 140ms var(--ease),
             background-color 140ms var(--ease), border-color 140ms var(--ease);
}
.cta:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.cta:active{ transform:translateY(0); filter:brightness(.96); }
.cta .arrow{ font-family:var(--mono); }

/* secondary — "I already have an account" */
.cta--ghost{
  background:transparent; color:var(--on-surface);
  border-color:var(--outline);
}
.cta--ghost:hover{ background:var(--surface-2); border-color:var(--primary); filter:none; }

.cta-note{
  font-size:var(--fs-small); color:var(--on-surface-3);
  margin:var(--s4) 0 0;
}

/* visible focus everywhere — not just on the buttons */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip{
  position:absolute; left:-9999px;
  background:var(--gold); color:var(--on-gold);
  padding:var(--s3) var(--s4); z-index:9;
}
.skip:focus{ left:var(--s4); top:var(--s4); }

/* ------------------------------------------------------ image placeholder */
.ph{
  position:relative;
  background-color:var(--ph-fill);
  background-image:repeating-linear-gradient(
    -45deg, transparent 0 9px, var(--ph-hatch) 9px 10px);
  border:1px solid var(--ph-hatch);
  border-radius:var(--r-lg);
  box-shadow:0 18px 48px -24px rgba(0,0,0,.75);
  display:flex; align-items:flex-end;
  padding:var(--s4);
  min-height:200px;
}
.ph > span{
  font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ph-label);
  background:var(--surface-1);
  border:1px solid var(--outline-var);
  border-radius:var(--r-sm);
  padding:var(--s1) var(--s2);
}
.ph--hero{ aspect-ratio:4/3; min-height:280px; border-radius:var(--r-xl); }
.ph--prop{ aspect-ratio:5/4; min-height:170px; }

/* ------------------------------------------------------------------ hero */
.hero{
  padding-block:clamp(var(--s8), 11vh, var(--s10)) var(--s9);
  display:grid; gap:var(--s8);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.hero-copy{ min-width:0; }

/* --------------------------------------------------------------- section */
.band{ border-top:1px solid var(--outline-var); }
.section-head{ padding-block:var(--s8) var(--s6); }

/* value props: numbered editorial rows, alternating */
.props{ list-style:none; margin:0; padding:0 0 var(--s9); }
.prop{
  display:grid; gap:var(--s7);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  padding-block:var(--s7);
  border-top:1px solid var(--outline-var);
}
.prop:nth-child(even) .prop-figure{ order:-1; }
.prop-num{
  font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:.16em; color:var(--gold);
  display:block; margin-bottom:var(--s3);
}
.prop-body{ color:var(--on-surface-2); margin:0; max-width:40ch; }
.prop-figure{ min-width:0; }

/* ------------------------------------------------------------ closing CTA */
.closing{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary-cont) 62%, var(--surface)) 0%,
      var(--surface-1) 100%);
  color:var(--on-surface);
  border-top:1px solid var(--outline-var);
}
.closing .inner{
  padding-block:var(--s9);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s5);
}
.closing h2{ color:var(--on-surface); max-width:24ch; }
.closing .eyebrow{ color:var(--gold); }
.closing .lead{ color:var(--on-surface-2); margin-bottom:0; }
.closing .cta-note{ color:var(--on-surface-3); }

/* ---------------------------------------------------------------- legal */
.legal{
  padding-block:var(--s5);
  font-size:var(--fs-micro); color:var(--on-surface-3);
  border-top:1px solid var(--outline-var);
}
.legal p{ max-width:none; margin:0; }

/* -------------------------------------------------------------- narrow */
@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; gap:var(--s7); padding-block:var(--s7) var(--s8); }
  .prop{ grid-template-columns:1fr; gap:var(--s5); }
  .prop:nth-child(even) .prop-figure{ order:0; }
  .props{ padding-bottom:var(--s8); }
  .closing .inner{ padding-block:var(--s8); }
  h1{ max-width:none; }
}

/* =========================================================================
   REVEAL ON SCROLL
   Fail-safe by construction: the hidden state is scoped to .js-reveal, a
   class the inline script only adds when it runs AND motion is allowed.
   No JS  -> nothing is ever hidden.
   Reduced motion -> script bails, and the media query below is a hard stop.
   ========================================================================= */
.js-reveal .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms);
  will-change:opacity, transform;
}
.js-reveal .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js-reveal .reveal,
  .js-reveal .reveal.is-in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .cta{ transition:none; }
  .cta:hover, .cta:active{ transform:none; filter:none; }
}