/* ───────────────────────────────────────────────────────────────────
   home.css — sasankmed.com, the front door.

   The app is paper: warm, quiet, serif, nothing moving. This is the
   opposite on purpose, because it is an advertisement and it has about
   four seconds. It is dark, it is liquid, and every feature on it is the
   real thing running, not a screenshot of it.

   The performance rule that shapes all of it: only transform, opacity and
   filter are ever animated, so every effect lives on the compositor and
   nothing here can touch layout. The one expensive thing — the fragment
   shader behind the hero — renders at an adaptive resolution and stops
   dead the moment it scrolls out of view. See home.js.
   ─────────────────────────────────────────────────────────────────── */

/* The palette sits on :root, not on #home. The sign-in sheet is a sibling of
   #home, not a child of it, so anything scoped to #home leaves the sheet with
   unresolved var() — which drops the whole declaration and renders a button
   with black text on a black background. Learned the hard way. */
:root {
  --home-bg:    #07080b;
  --home-ink:   #eceadf;
  --home-dim:   #9a958a;
  /* The hero's body copy sits over the liquid, everything below it sits over
     flat near-black. Measured against the shader, --home-dim over the hero
     is 3.6:1 and this is 5.1:1 — so the hero gets its own, lighter grey
     rather than the whole page being brightened to suit one section. */
  --home-lede:  #b8b3a6;
  --home-line:  rgba(236, 234, 223, .13);
  --home-glass: rgba(22, 23, 28, .58);
  --gold:       #e0b979;
  --jade:       #7fae94;
  --clay:       #d08e6b;
}

#home {
  position: fixed; inset: 0; z-index: 20;
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
  background: var(--home-bg);
  color: var(--home-ink);
  font-family: var(--sans);
}

/* The shader. Fixed behind everything, faded out by scroll (home.js sets
   --shade), and never repainted when the hero is off screen. */
#liquid {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
  opacity: var(--shade, 1);
  will-change: opacity;
}
/* If WebGL will not start, the page still has a sky. */
#home.noshader #liquid {
  background:
    radial-gradient(70% 55% at 22% 18%, rgba(224,185,121,.30), transparent 70%),
    radial-gradient(65% 60% at 82% 32%, rgba(127,174,148,.24), transparent 72%),
    radial-gradient(80% 70% at 50% 92%, rgba(208,142,107,.20), transparent 75%),
    var(--home-bg);
}

/* The headline has to win. This sits between the liquid and the words: a
   wash that is heaviest over the left column where the type lives and
   thinnest out to the right where the picture can be itself. It fades on
   exactly the same curve as the shader, so past the hero there is nothing
   here at all. */
.scrim {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--shade, 1);
  background:
    linear-gradient(100deg,
      rgba(7,8,11,.95) 0%, rgba(7,8,11,.88) 22%,
      rgba(7,8,11,.56) 52%, rgba(7,8,11,.12) 86%, rgba(7,8,11,.04) 100%),
    linear-gradient(to bottom,
      rgba(7,8,11,.72) 0%, rgba(7,8,11,.10) 24%,
      rgba(7,8,11,.12) 76%, rgba(7,8,11,.66) 100%);
}

#home .wrap { position: relative; z-index: 1; }

/* ── the bar ─────────────────────────────────────────────────────── */
#topnav {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem max(1.1rem, env(safe-area-inset-left));
  padding-right: max(1.1rem, env(safe-area-inset-right));
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  background: linear-gradient(to bottom, rgba(7,8,11,.72), rgba(7,8,11,.28));
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
#home.scrolled #topnav {
  border-bottom-color: var(--home-line);
  background: rgba(7,8,11,.82);
}

.brand {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; letter-spacing: -.01em; font-weight: 600;
  color: var(--home-ink); margin-right: auto;
}
.brand .mark {
  width: 1.45rem; height: 1.45rem; flex: none; border-radius: 7px;
  background: conic-gradient(from 140deg, var(--gold), var(--clay),
                             var(--jade), var(--gold));
  box-shadow: 0 0 18px rgba(224,185,121,.35);
  animation: markspin 14s linear infinite;
}
@keyframes markspin { to { transform: rotate(360deg); } }
.brand .dotcom { color: var(--home-dim); font-weight: 400; }

.navlinks { display: flex; gap: .2rem; }
.navlinks a {
  padding: .4rem .6rem; border-radius: 7px; font-size: .82rem;
  color: var(--home-dim); text-decoration: none;
  transition: color .16s, background .16s;
}
.navlinks a:hover { color: var(--home-ink); background: rgba(236,234,223,.07); }

.navauth { display: flex; align-items: center; gap: .5rem; }

/* One button style, two weights. Both lift on hover and press on click —
   transform only, so it is free. */
.btn {
  position: relative; overflow: hidden;
  padding: .5rem .95rem; border-radius: 9px; font: inherit; font-size: .83rem;
  border: 1px solid var(--home-line); background: rgba(236,234,223,.06);
  color: var(--home-ink); white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3),
              background .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1.5px); background: rgba(236,234,223,.12); }
.btn:active { transform: translateY(0) scale(.97); }
.btn.solid {
  border-color: transparent; color: #14110c; font-weight: 600;
  background: linear-gradient(135deg, var(--gold), #f0d6a8 55%, var(--clay));
  box-shadow: 0 4px 18px rgba(224,185,121,.22);
}
.btn.solid:hover { box-shadow: 0 8px 28px rgba(224,185,121,.34); }
/* the sheen that crosses a solid button on hover */
.btn.solid::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%,
              rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
.btn.solid:hover::after { transform: translateX(120%); }
.btn.big { padding: .78rem 1.4rem; font-size: .92rem; border-radius: 11px; }

/* ── the hero ────────────────────────────────────────────────────── */
.hero {
  position: relative;                 /* the scroll cue hangs off the bottom */
  min-height: calc(100svh - 3.6rem);
  display: grid; align-content: center;
  padding: 3rem max(1.2rem, env(safe-area-inset-left)) 4rem;
  max-width: 62rem; margin: 0 auto;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  padding: .3rem .7rem .3rem .45rem; margin-bottom: 1.4rem;
  border: 1px solid var(--home-line); border-radius: 999px;
  background: rgba(7,8,11,.5); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: .72rem; letter-spacing: .04em; color: var(--home-lede);
}
.eyebrow .pip {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--jade);
  box-shadow: 0 0 0 0 rgba(127,174,148,.6); animation: pip 2.6s ease-out infinite;
}
@keyframes pip {
  0%   { box-shadow: 0 0 0 0 rgba(127,174,148,.55); }
  70%  { box-shadow: 0 0 0 .5rem rgba(127,174,148,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,174,148,0); }
}

.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 7.2vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.025em; margin: 0 0 1.2rem;
  max-width: 16ch;
}
.hero h1 .lit {
  background: linear-gradient(102deg, var(--gold), #f5e3c0 40%, var(--jade) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede {
  font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.55;
  color: var(--home-lede); max-width: 44ch; margin: 0 0 2rem;
}
.hero p.lede b { color: var(--home-ink); font-weight: 500; }
.herocta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.herocta .note { font-size: .76rem; color: var(--home-lede); }

/* Each thing on the hero arrives a beat after the one above it. */
.hero > * { animation: heroin .85s cubic-bezier(.16,1,.3,1) backwards; }
.hero > :nth-child(1) { animation-delay: .05s; }
.hero > :nth-child(2) { animation-delay: .14s; }
.hero > :nth-child(3) { animation-delay: .23s; }
.hero > :nth-child(4) { animation-delay: .32s; }
.hero > :nth-child(5) { animation-delay: .41s; }
@keyframes heroin {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); }
}

.scrollcue {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--home-dim); animation: cue 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cue {
  0%,100% { opacity: .35; transform: translate(-50%, 0); }
  50%     { opacity: .9;  transform: translate(-50%, 6px); }
}

/* ── the numbers ─────────────────────────────────────────────────── */
.strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  max-width: 62rem; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: var(--home-line); border: 1px solid var(--home-line);
}
.strip div { background: rgba(10,11,15,.72); padding: 1.1rem 1rem; }
.strip b {
  display: block; font-family: var(--serif); font-size: clamp(1.4rem,3.4vw,2rem);
  font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.strip span {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--home-dim);
}

/* ── feature sections ────────────────────────────────────────────── */
.feat {
  max-width: 62rem; margin: 0 auto;
  padding: clamp(3rem, 7vh, 5rem) max(1.2rem, env(safe-area-inset-left));
  display: grid; gap: clamp(1.8rem, 5vw, 3.2rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
}
/* Flipping the order has to flip the track widths with it, or the demo
   lands in the narrow column and the prose gets the room it does not need. */
.feat.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.feat.flip .say { order: 2; }
.feat .say h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1;
  letter-spacing: -.02em; margin: .5rem 0 .7rem;
}
.feat .say p { color: var(--home-dim); margin: 0 0 1rem; line-height: 1.6; }
.feat .say p b { color: var(--home-ink); font-weight: 500; }
.kicker {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.feat ul { margin: 0; padding: 0; list-style: none; }
.feat ul li {
  position: relative; padding-left: 1.1rem; margin: .35rem 0;
  font-size: .86rem; color: var(--home-dim);
}
.feat ul li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .34rem; height: .34rem; border-radius: 50%; background: var(--gold);
}

/* Everything a feature demonstrates sits in one of these. */
.glass {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--home-line); background: var(--home-glass);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass .chrome {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--home-line);
  font-size: .68rem; color: var(--home-dim);
}
.glass .chrome i {
  width: .55rem; height: .55rem; border-radius: 50%; display: block;
  background: rgba(236,234,223,.2);
}
.glass .chrome .ttl { margin-left: .4rem; }

/* The reveal: sections rise as they enter, once. */
.rise { opacity: 0; transform: translate3d(0, 34px, 0); }
.rise.in {
  opacity: 1; transform: none;
  transition: opacity .75s cubic-bezier(.16,1,.3,1),
              transform .75s cubic-bezier(.16,1,.3,1);
}
.rise.d1.in { transition-delay: .08s; }
.rise.d2.in { transition-delay: .16s; }

/* ── demo: the tutor ─────────────────────────────────────────────── */
.chat { padding: 1rem 1.1rem; font-size: .84rem; line-height: 1.55; min-height: 13.5rem; }
.chat .t { margin: 0 0 .85rem; opacity: 0; transform: translateY(8px); }
.chat .t.on { opacity: 1; transform: none; transition: opacity .4s, transform .4s; }
.chat .t.you { color: var(--home-dim); }
.chat .t.you::before {
  content: 'you'; display: block; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--home-dim); opacity: .6; margin-bottom: .2rem;
}
.chat .cite {
  display: inline-block; margin-left: .35rem; padding: 0 .35rem;
  border-radius: 4px; font-size: .66rem; vertical-align: 1px;
  color: var(--jade); background: rgba(127,174,148,.13);
  border: 1px solid rgba(127,174,148,.25); cursor: default;
  transition: background .2s, transform .2s;
}
.chat .cite:hover { background: rgba(127,174,148,.24); transform: translateY(-1px); }
.chat .caret {
  display: inline-block; width: .5em; height: 1.05em; vertical-align: -.18em;
  background: var(--gold); animation: blink 1.05s steps(1) infinite;
}

/* ── demo: grounded ──────────────────────────────────────────────── */
.ground { display: grid; grid-template-columns: .9fr 1.2fr; min-height: 13rem; }
.ground .claim, .ground .vault { padding: .9rem 1rem; font-size: .8rem; }
.ground .vault {
  border-left: 1px solid var(--home-line); background: rgba(0,0,0,.22);
  font-variant-numeric: tabular-nums;
}
.ground .lbl {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--home-dim); margin-bottom: .6rem;
}
.ground .ln {
  padding: .18rem .4rem; border-radius: 4px; color: var(--home-dim);
  transition: background .35s, color .35s, box-shadow .35s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ground .ln.hot {
  color: var(--home-ink); background: rgba(224,185,121,.16);
  box-shadow: -.3rem 0 0 0 var(--gold);
}
.ground .cl {
  padding: .4rem .5rem; border-radius: 7px; margin-bottom: .4rem;
  border: 1px solid transparent; color: var(--home-dim);
  transition: border-color .35s, color .35s, background .35s;
}
.ground .cl.hot {
  color: var(--home-ink); border-color: rgba(224,185,121,.35);
  background: rgba(224,185,121,.07);
}
/* The verdict sits above the claim, not floated beside it — in a column
   this narrow a float steals the first line and the claim wraps to three. */
.ground .cl .tag {
  display: block; font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--jade); margin-bottom: .1rem;
}
.ground .cl.thin .tag { color: var(--clay); }

/* ── demo: voice ─────────────────────────────────────────────────── */
.voice { display: grid; place-items: center; gap: 1rem; padding: 1.6rem 1rem; min-height: 13rem; }
.wavebox { display: flex; align-items: center; gap: .3rem; height: 4.5rem; }
.wavebox i {
  display: block; width: .32rem; border-radius: 999px;
  background: linear-gradient(to top, var(--gold), var(--clay));
  height: 100%; transform-origin: center;
  animation: wv 1.15s ease-in-out infinite;
  animation-play-state: paused;       /* thirteen bars are free; off-screen is freer */
}
.wavebox.run i { animation-play-state: running; }
@keyframes wv { 0%,100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
.voice .said { font-size: .82rem; color: var(--home-dim); text-align: center; max-width: 28ch; }
.voice .ring {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(224,185,121,.4); color: var(--gold);
  animation: ring 2.6s ease-out infinite;
}
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(224,185,121,.35); }
  70%  { box-shadow: 0 0 0 1.4rem rgba(224,185,121,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,185,121,0); }
}

/* ── demo: cards ─────────────────────────────────────────────────── */
.cardwrap { padding: 1.2rem; display: grid; gap: .8rem; min-height: 13rem; align-content: center; }
.flip { perspective: 1200px; }
.flip .inner {
  position: relative; transform-style: preserve-3d; min-height: 7.5rem;
  transition: transform .62s cubic-bezier(.2,.8,.25,1);
}
.flip.on .inner { transform: rotateX(180deg); }
.flip .face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: grid; place-items: center; text-align: center; padding: 1rem;
  border-radius: 12px; border: 1px solid var(--home-line);
  background: rgba(10,11,15,.6); font-size: .92rem;
}
.flip .face.back { transform: rotateX(180deg); color: var(--gold); }
.gradebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.gradebar button {
  padding: .5rem .2rem; border-radius: 8px; font: inherit; font-size: .74rem;
  border: 1px solid var(--home-line); background: rgba(236,234,223,.05);
  color: var(--home-dim);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.3), background .16s, color .16s;
}
.gradebar button:hover { transform: translateY(-2px); color: var(--home-ink); }
.gradebar button small { display: block; font-size: .6rem; opacity: .6; }

/* ── demo: arena ─────────────────────────────────────────────────── */
.duelbox { padding: 1rem 1.1rem; display: grid; gap: .7rem; min-height: 13rem; }
.duelbox .who { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; }
.duelbox .who b { font-weight: 550; }
.duelbox .who .vs { color: var(--home-dim); font-size: .68rem; letter-spacing: .1em; }
.tbar { height: 2px; background: rgba(236,234,223,.12); border-radius: 999px; overflow: hidden; }
.tbar i {
  display: block; height: 100%; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, var(--jade), var(--gold));
}
.tbar.run i { animation: drain 9s linear forwards; }
@keyframes drain { to { transform: scaleX(0); } }
.duelbox .stem { font-size: .84rem; line-height: 1.5; }
.opts2 { display: grid; gap: .4rem; }
.opts2 button {
  text-align: left; padding: .55rem .7rem; border-radius: 9px; font: inherit;
  font-size: .8rem; border: 1px solid var(--home-line);
  background: rgba(236,234,223,.04); color: var(--home-ink);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.3), background .16s, border-color .16s;
}
.opts2 button:hover { transform: translateX(3px); background: rgba(236,234,223,.09); }
.opts2 button.right { border-color: rgba(127,174,148,.6); background: rgba(127,174,148,.14); }
.opts2 button.wrong { border-color: rgba(208,142,107,.55); background: rgba(208,142,107,.12); }
.opts2 button:disabled { cursor: default; transform: none; }
.duelbox .verdict2 { font-size: .76rem; color: var(--home-dim); min-height: 1.2em; }

/* ── demo: roam graph ────────────────────────────────────────────── */
#roamcv { display: block; width: 100%; height: 17rem; }

/* ── close ───────────────────────────────────────────────────────── */
.close {
  max-width: 62rem; margin: 0 auto; text-align: center;
  padding: clamp(4rem, 12vh, 8rem) 1.2rem 3rem;
}
.close h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .8rem;
}
.close p { color: var(--home-dim); margin: 0 auto 1.8rem; max-width: 40ch; }
.foot {
  border-top: 1px solid var(--home-line); color: var(--home-dim);
  font-size: .74rem; padding: 1.2rem; text-align: center;
}

/* ── the auth panel ──────────────────────────────────────────────── */
/* The gate is no longer a screen you land on — it is a sheet that comes
   down over the front page, so signing in never costs you the page. */
body.auth-open #gate {
  position: fixed; inset: 0; z-index: 60;
  height: 100%; display: grid; place-items: center;
  background: rgba(5,6,9,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: authbg .28s ease-out;
}
body.auth-open #gate .setup-inner {
  position: relative;
  background: #0e0f13; color: #eceadf;
  border: 1px solid rgba(236,234,223,.14); border-radius: 18px;
  padding: 1.8rem 1.6rem 1.5rem; max-width: 24rem;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  animation: authin .38s cubic-bezier(.16,1,.3,1);
}
@keyframes authbg { from { opacity: 0; } }
@keyframes authin { from { opacity: 0; transform: translateY(16px) scale(.97); } }
body.auth-open #gate .setup-head { margin-bottom: 1.4rem; }
body.auth-open #gate h1 { font-size: 1.5rem; }
/* The form inside is the app's, and the app's form is designed for paper.
   On a dark sheet its inputs render as small white bars, so the sheet
   restyles them rather than the app growing a second theme. */
body.auth-open #gate .sub,
body.auth-open #gate .hint { color: #9a958a; }
body.auth-open #gate .field { margin-bottom: 1.05rem; }
body.auth-open #gate .field > label { color: #8b867a; }
body.auth-open #gate input {
  width: 100%; padding: .62rem .72rem; font: inherit; font-size: .92rem;
  color: #eceadf; background: rgba(236,234,223,.06);
  border: 1px solid rgba(236,234,223,.16); border-radius: 9px;
  transition: border-color .16s, background .16s;
}
body.auth-open #gate input::placeholder { color: #6b665c; }
body.auth-open #gate input:focus {
  outline: none; border-color: var(--gold);
  background: rgba(236,234,223,.09);
}
body.auth-open #gate .begin {
  width: 100%; margin-top: .4rem; padding: .72rem 1rem;
  border: 0; border-radius: 10px; font-size: .92rem; font-weight: 600;
  color: #14110c; opacity: 1;
  background: linear-gradient(135deg, var(--gold), #f0d6a8 55%, var(--clay));
  box-shadow: 0 4px 18px rgba(224,185,121,.2);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .18s;
}
body.auth-open #gate .begin:not(:disabled):hover {
  transform: translateY(-1.5px); opacity: 1;
  box-shadow: 0 8px 26px rgba(224,185,121,.32);
}
body.auth-open #gate .begin:not(:disabled):active { transform: scale(.98); }
body.auth-open #gate .gate-alt { margin-top: 1rem; }
body.auth-open #gate .link { color: #9a958a; }
body.auth-open #gate .link:hover { color: #eceadf; }
body.auth-open #gate .err { color: var(--clay); }

#auth-x {
  position: absolute; top: .7rem; right: .8rem; padding: .25rem .45rem;
  border: 0; background: none; color: var(--home-dim); font-size: 1rem;
  border-radius: 6px; transition: color .15s, background .15s;
}
#auth-x:hover { color: #eceadf; background: rgba(236,234,223,.1); }

/* ── phone ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .feat, .feat.flip { grid-template-columns: minmax(0, 1fr); }
  .feat.flip .say { order: 0; }
  .navlinks { display: none; }
}
@media (max-width: 560px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .ground { grid-template-columns: 1fr; }
  .ground .vault { border-left: 0; border-top: 1px solid var(--home-line); }
  .hero { min-height: calc(100svh - 3.2rem); }
  .btn { padding: .45rem .75rem; font-size: .78rem; }
  #roamcv { height: 13rem; }
}

/* Motion is decoration here; the page has to read without any of it. */
@media (prefers-reduced-motion: reduce) {
  #home * { animation: none !important; }
  .rise { opacity: 1; transform: none; }
  #home { scroll-behavior: auto; }
}