/* ============================================================
   Sera landing — "Sera indigo" system, ported from the app design.
   Light is the default theme (matches the design); a dark indigo
  variant rides the toggle. Brand: indigo #5b5bd6, privacy-safe
  system typography. The Sera mascot is the identity.
   ============================================================ */
:root{
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:ui-serif,Georgia,"Times New Roman",serif;

  /* neutrals — LIGHT base (design default) */
  --bg-page:#fcfcf9;
  --bg-elevated:#ffffff;
  --bg-card:#ffffff;
  --bg-card-2:#f6f6fb;
  --text-primary:#1a1a1b;
  --text-secondary:#6b6b70;
  --text-faint:#68686d;
  --border-subtle:rgba(0,0,0,.07);
  --border-strong:rgba(0,0,0,.12);

  /* brand — indigo */
  --brand:#5b5bd6;
  --brand-2:#4747b8;
  --brand-ink:#ffffff;          /* text that sits on brand fills */
  --accent-soft:#e9e9ff;        /* pale indigo tint */
  --on-soft:#5b5bd6;            /* icon/text colour on accent-soft */

  /* dark inverse band (privacy section) follows the dark palette below */
  --band-bg:#1a1a1b;
  --band-text:#ffffff;
  --band-muted:rgba(255,255,255,.62);
  --band-accent:#a9a9ec;

  /* status */
  --ok:#10b981;

  /* shadows / lines */
  --shadow-card:0 10px 40px rgba(91,91,214,.08);
  --shadow-soft:0 6px 24px rgba(20,20,40,.06);
  --shadow-glow:0 14px 40px rgba(91,91,214,.22);
  --ring-accent:0 0 0 1px rgba(91,91,214,.14);
  --focus-ring:0 0 0 3px rgba(91,91,214,.40);

  /* type scale */
  --t-body:1.0625rem; --t-sub:.9375rem; --t-cap:.75rem;
  /* radii */
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:28px; --r-pill:9999px;
  /* easings */
  --ease-rev:cubic-bezier(.32,.01,0,1.06); --ease-pop:cubic-bezier(.34,1.56,.64,1);

  --container-max:1140px;
  color-scheme:light;
}

/* DARK indigo variant — on the toggle */
[data-theme="dark"]{
  --bg-page:#0d0d16;
  --bg-elevated:#15151f;
  --bg-card:#181826;
  --bg-card-2:#1f1f30;
  --text-primary:#ececf2;
  --text-secondary:#a3a3b6;
  --text-faint:#9090a5;
  --border-subtle:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);

  --brand:#a5a5ee;
  --brand-2:#c4c4f5;
  --brand-ink:#0d0d16;
  --accent-soft:#20203a;
  --on-soft:#c4c4f5;

  --band-bg:#08080f;
  --band-text:#ffffff;
  --band-muted:rgba(255,255,255,.6);
  --band-accent:#c4c4f5;

  --shadow-card:0 12px 44px rgba(0,0,0,.5);
  --shadow-soft:0 8px 28px rgba(0,0,0,.45);
  --shadow-glow:0 16px 44px rgba(91,91,214,.35);
  --ring-accent:0 0 0 1px rgba(165,165,238,.22);
  --focus-ring:0 0 0 3px rgba(165,165,238,.5);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; font-family:var(--font-sans); color:var(--text-primary); line-height:1.6;
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-soft); color:var(--brand)}
img,svg,video{display:block; max-width:100%}
a{color:inherit}

/* ---- layout primitives ---- */
.wrap{max-width:var(--container-max); margin:0 auto; padding:0 24px}
section{padding:72px 0; position:relative}
.eyebrow{font-family:var(--font-sans); font-size:var(--t-cap); letter-spacing:.16em; font-weight:700;
  text-transform:uppercase; color:var(--brand); margin:0 0 16px}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em}
h2.s{font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.05; margin:0 0 16px; font-weight:800; text-wrap:balance}
.serif{font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--brand); letter-spacing:0}
.muted{color:var(--text-secondary); font-size:var(--t-body); line-height:1.65; margin:0}
.section-head{max-width:46ch}
.center{text-align:center}
.center.section-head{margin-left:auto; margin-right:auto}

/* ---- brand mark ---- */
.seramark{width:32px; height:32px; border-radius:11px; background:var(--brand);
  display:grid; place-items:center; box-shadow:0 3px 10px rgba(91,91,214,.3); flex:none}
.seramark::after{content:""; width:9px; height:9px; border-radius:50%; background:#fff}
.seramark.sm{width:28px; height:28px; border-radius:9px}
.seramark.sm::after{width:8px; height:8px}

/* ---- buttons / chips ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-size:var(--t-body); font-weight:600;
  border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer;
  padding:13px 26px; min-height:50px; line-height:1; text-decoration:none;
  transition:transform .2s var(--ease-pop), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  -webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.btn-primary{color:var(--brand-ink); background:var(--brand); box-shadow:var(--shadow-glow)}
.btn-primary:hover{background:var(--brand-2); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--text-primary)}
.btn-ghost:hover{color:var(--brand)}

/* ---- scroll reveal (shown by default; hidden only when js-reveal is on) ---- */
.reveal{will-change:opacity,transform}
html.js-reveal .reveal.armed{opacity:0; transform:translate3d(0,28px,0);
  transition:opacity .6s var(--ease-rev), transform .6s var(--ease-rev)}
html.js-reveal .reveal.armed.in{opacity:1; transform:none}
html.js-reveal [data-rev-stagger].in > *{animation:revealUp .6s var(--ease-rev) both}
html.js-reveal [data-rev-stagger].in > *:nth-child(2){animation-delay:.06s}
html.js-reveal [data-rev-stagger].in > *:nth-child(3){animation-delay:.12s}
html.js-reveal [data-rev-stagger].in > *:nth-child(4){animation-delay:.18s}
html.js-reveal [data-rev-stagger].in > *:nth-child(5){animation-delay:.24s}
html.js-reveal [data-rev-stagger].in > *:nth-child(6){animation-delay:.30s}

/* ============ KEYFRAMES ============ */
@keyframes revealUp{0%{opacity:0; transform:translate3d(0,40px,0)} 100%{opacity:1; transform:translateZ(0)}}
@keyframes typingBounce{0%,80%,100%{transform:scale(.4);opacity:.4} 40%{transform:scale(1);opacity:1}}

/* ============ HEADER ============ */
.bar{position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg-page) 80%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-subtle)}
.bar .wrap{display:flex; align-items:center; gap:14px; padding-top:14px; padding-bottom:14px}
.bar .sp{flex:1}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em;
  text-decoration:none; color:var(--text-primary); font-size:1.15rem}
.nav{display:flex; gap:28px}
.nav a{font-weight:500; font-size:15px; color:var(--text-secondary); text-decoration:none; transition:color .2s}
.nav a:hover{color:var(--text-primary)}
.account-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  color:var(--text-primary);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.header-cta{min-height:44px;padding:10px 18px;font-size:14px;white-space:nowrap}
.theme-toggle{background:var(--bg-elevated); border:1px solid var(--border-subtle); color:var(--text-secondary);
  border-radius:var(--r-pill); min-width:44px;min-height:44px;padding:8px 13px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-sans)}
.theme-toggle:hover{border-color:var(--brand); color:var(--text-primary)}
@media (max-width:880px){ .nav{display:none} }
@media (max-width:480px){
  .bar .wrap{gap:10px;padding:10px 16px}.brand{gap:6px;font-size:1rem}
  .header-cta{padding:10px 13px}.theme-toggle{padding:8px;font-size:0}
  .theme-toggle::before{content:'☾';font-size:18px}
  html[data-theme="dark"] .theme-toggle::before{content:'☀'}
}

/* ============ HERO ============ */
.hero{padding:48px 0 64px}
.hero .head{text-align:center; max-width:60ch; margin:0 auto}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem); font-weight:800; letter-spacing:-.035em; line-height:1.04;
  margin:22px auto 0; max-width:18ch; text-wrap:balance}
.hero .sub{font-size:clamp(1.05rem,2vw,1.3rem); color:var(--text-secondary); margin:22px auto 0; max-width:54ch; line-height:1.6}
.cta-stack{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; justify-content:center}
.entry-note{margin:14px auto 0;color:var(--text-secondary);font-size:14px;line-height:1.5}
.hero .eyebrow{margin:0}

.hero-show{margin-top:56px; position:relative}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:2fr 3fr; gap:26px; align-items:center;
  max-width:1000px; margin:0 auto}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr; gap:20px; max-width:440px} }
@media (max-width:860px){
  .hero{padding-top:32px}.hero-show{margin-top:32px}
  .hero-grid .chatcard{order:-1}.hero-grid .portrait{width:160px;justify-self:center}
}

/* ---- mascot portrait — Sera's identity ---- */
.portrait{position:relative; aspect-ratio:1; width:100%; margin:0}

/* ---- chat preview card ---- */
.chatcard{background:var(--bg-card); border-radius:var(--r-xl); box-shadow:var(--shadow-card);
  border:1px solid var(--border-subtle); overflow:hidden}
.chatcard .cc-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--border-subtle)}
.cc-id{display:flex; align-items:center; gap:11px; min-width:0}
.cc-id .nm{font-weight:600; font-size:14px; line-height:1.2}
.cc-id .mt{font-size:11px; color:var(--text-secondary)}
.cc-enc{display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-secondary); flex:none}
.cc-enc i{width:7px; height:7px; border-radius:50%; background:var(--ok)}
@media (max-width:420px){ .cc-enc{display:none} }
.cc-body{padding:20px 18px; display:flex; flex-direction:column; gap:14px; background:color-mix(in srgb, var(--bg-card-2) 60%, transparent)}
.brow{display:flex}
.brow.me{justify-content:flex-end}
.bubble{max-width:82%; padding:11px 14px; border-radius:18px; font-size:14px; line-height:1.5}
.bubble.sera{background:var(--bg-card); border:1px solid var(--border-subtle); border-top-left-radius:6px; color:var(--text-primary)}
.bubble.me{background:var(--brand); color:var(--brand-ink); border-top-right-radius:6px; box-shadow:0 4px 12px rgba(91,91,214,.2)}
.typing{display:inline-flex; gap:6px; padding:13px 15px; background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:18px; border-top-left-radius:6px}
.typing i{width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--text-secondary) 50%, transparent); animation:typingBounce 1.3s 8 both}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
.cc-input{display:flex; align-items:center; gap:12px; margin:0 18px 16px; padding:9px 9px 9px 16px;
  background:var(--bg-card-2); border:1px solid var(--border-subtle); border-radius:var(--r-pill)}
.cc-input .ph{flex:1; font-size:14px; color:var(--text-faint)}
.cc-input .send{width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none}
.cc-input .send svg{width:17px; height:17px}

/* ---- sera-says bubble (mascot still + serif) ---- */
.sera-says{display:flex; align-items:flex-start; gap:14px; max-width:36rem; margin:0 auto}
.sera-says .av{width:40px; height:40px; overflow:visible; flex:none; background:transparent}
.sera-says .av img{width:100%; height:100%; object-fit:contain}
.sera-says .sb{background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:18px; border-top-left-radius:6px;
  padding:13px 16px; box-shadow:var(--shadow-soft)}
.sera-says .sb p{margin:0; font-family:var(--font-serif); font-style:italic; font-size:1.05rem; line-height:1.45; color:var(--text-primary)}

/* ============ PAIN ============ */
.pain{background:var(--bg-elevated); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle)}
.pain .wrap{max-width:760px}
.pain h2{font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0;
  font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.12; margin:0 0 22px; text-wrap:balance}
.pain-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:36px 0 0; text-align:left}
.pain-cards div{background:var(--bg-card-2); border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:18px; font-size:14px; line-height:1.45}
@media (max-width:680px){ .pain-cards{grid-template-columns:1fr} }
.pain .sera-says{margin-top:40px}

/* ============ BENEFITS ============ */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.benefit{background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--shadow-soft); transition:transform .25s var(--ease-pop), box-shadow .25s}
.benefit:hover{transform:translateY(-4px); box-shadow:var(--shadow-card)}
.benefit h3{font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:1.5rem; margin:0 0 8px; letter-spacing:0}
.benefit p{margin:0; font-size:var(--t-sub); color:var(--text-secondary); line-height:1.6}
@media (max-width:880px){ .benefits{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .benefits{grid-template-columns:1fr} }

/* ============ HOW IT WORKS ============ */
.how{background:var(--bg-elevated); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle)}
.how-grid{display:grid; grid-template-columns:3fr 2fr; gap:48px; align-items:center; max-width:1000px; margin:44px auto 0}
.how-steps{display:flex; flex-direction:column; gap:28px}
.how-step{display:flex; gap:16px}
.how-step .n{font-family:var(--font-serif); font-style:italic; font-size:1.6rem; color:var(--brand); line-height:1; width:34px; flex:none}
.how-step h4{font-size:1.1rem; font-weight:600; margin:0 0 4px}
.how-step p{margin:0; font-size:var(--t-sub); color:var(--text-secondary); line-height:1.6}
@media (max-width:860px){ .how-grid{grid-template-columns:1fr; gap:32px} .how-grid .chatcard{order:2} }

/* ============ TOOLS ============ */
.tools-grid{display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:start}
.tools-grid .lede{position:sticky; top:96px}
.tools-grid .lede .sera-says{margin:28px 0 0}
.tool-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.tool-cards div{background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-md);
  padding:18px 20px; transition:border-color .2s, box-shadow .2s}
.tool-cards div:hover{border-color:color-mix(in srgb, var(--brand) 40%, transparent); box-shadow:var(--shadow-soft)}
.tool-cards h4{font-size:1rem; font-weight:600; margin:0 0 5px}
.tool-cards p{margin:0; font-size:13.5px; color:var(--text-secondary); line-height:1.5}
@media (max-width:880px){ .tools-grid{grid-template-columns:1fr; gap:32px} .tools-grid .lede{position:static} }
@media (max-width:520px){ .tool-cards{grid-template-columns:1fr} }

/* ============ PRIVACY (dark band) ============ */
.privacy{background:var(--band-bg); color:var(--band-text)}
.privacy .eyebrow{color:var(--band-accent)}
.priv-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.privacy h2{color:var(--band-text)}
.privacy h2 .serif{color:var(--band-accent)}
.privacy .lead{color:var(--band-muted); font-size:var(--t-body); line-height:1.65; margin:0 0 28px}
.priv-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.priv-list li{display:flex; gap:14px}
.priv-list .ck{width:22px; height:22px; flex:none; color:var(--band-accent); margin-top:1px}
.priv-list b{display:block; font-weight:600; margin-bottom:2px}
.priv-list p{margin:0; font-size:14px; color:var(--band-muted); line-height:1.55}
.priv-portrait{display:grid; place-items:center; position:relative}
.iphone{position:relative; z-index:1; width:100%; max-width:280px; aspect-ratio:280/575;
  background:linear-gradient(150deg,#26262f,#0c0c11); border-radius:46px; padding:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 30px 60px rgba(0,0,0,.5)}
.iphone .screen{position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#c9bdf3}
.iphone .screen img{width:100%; height:100%; object-fit:cover; object-position:center bottom}
.iphone .island{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:82px; height:24px; background:#000; border-radius:13px; z-index:2}
.iphone .btn-l,.iphone .btn-l2,.iphone .btn-r{position:absolute; width:3px; background:#33333d}
.iphone .btn-l{left:-2px; top:118px; height:34px; border-radius:2px 0 0 2px}
.iphone .btn-l2{left:-2px; top:162px; height:60px; border-radius:2px 0 0 2px}
.iphone .btn-r{right:-2px; top:140px; height:74px; border-radius:0 2px 2px 0}
@media (max-width:860px){ .priv-grid{grid-template-columns:1fr; gap:36px} .priv-portrait{order:-1} }

/* ============ TESTIMONIALS ============ */
.testimonials{background:var(--bg-elevated); border-bottom:1px solid var(--border-subtle)}
.testimonials .wrap{max-width:1392px}
.testimonials .section-head{max-width:1120px; margin-left:auto; margin-right:auto}
.tst-showcase{margin-top:36px; padding:48px clamp(48px,6vw,84px);
  border:1px solid var(--border-subtle); border-radius:72px; box-shadow:var(--shadow-card);
  background:color-mix(in srgb,var(--accent-soft) 52%,var(--bg-card)); overflow:hidden; touch-action:pan-y}
.tst-stage{max-width:1120px; margin:0 auto}
.tst-showcase:not([data-carousel-ready="true"]) .tst-controls{display:none}
.tst-slide{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,342px);
  align-items:center; gap:clamp(48px,7vw,96px); min-width:0}
.tst-slide.is-entering{animation:tstFadeIn .48s ease both}
.tst-copy{min-width:0}
.tst .q{margin:0; color:var(--text-primary); font-size:clamp(1.35rem,2.25vw,2rem);
  line-height:1.42; letter-spacing:-.015em; text-wrap:pretty}
.tst .qm{display:block; height:30px; margin:0 0 16px; color:var(--brand);
  font-family:var(--font-serif); font-size:3.4rem; line-height:1}
.tst-meta-row{display:flex; align-items:center; gap:16px; margin-top:40px; flex-wrap:wrap}
.tst-controls{display:flex; gap:10px}
.tst-nav-btn,.tst-media-btn{min-width:44px; min-height:44px; border:1px solid var(--border-strong);
  border-radius:var(--r-pill); background:var(--bg-card); color:var(--text-primary);
  font:600 .875rem/1 var(--font-sans); cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; padding:10px 15px; box-shadow:var(--shadow-soft);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.tst-nav-btn:hover,.tst-media-btn:hover{border-color:var(--brand); color:var(--brand)}
.tst-nav-btn:focus-visible,.tst-media-btn:focus-visible,.tst-showcase:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px}
.tst-nav-btn .arrow{font-size:1.15rem; line-height:0}
.tst .who{display:flex; align-items:center; gap:12px; margin:0; font-style:normal; min-width:0}
.tst-av{width:48px; height:48px; border-radius:50%; flex:none; object-fit:cover;
  background:var(--bg-card-2); border:1px solid var(--border-subtle)}
.tst .who-label{font-size:1rem; font-weight:600; line-height:1.35; color:var(--text-secondary)}
.tst-media{position:relative; width:100%; max-width:342px; aspect-ratio:9/16; margin:0;
  justify-self:end; overflow:hidden; border-radius:24px; background:var(--bg-card-2);
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-soft)}
.tst-media video{width:100%; height:100%; object-fit:cover; background:var(--bg-card-2)}
.tst-media-btn{position:absolute; right:14px; bottom:14px; z-index:1;
  color:#1a1a1b; background:rgba(255,255,255,.9); border-color:rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.tst-media-btn[hidden]{display:none}
.tst-media-btn:hover{color:#4747b8; border-color:#5b5bd6}
.tst-noscript{margin-top:28px}
.tst-noscript-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.tst-noscript-item{margin:0; padding:20px; border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); background:var(--bg-card)}
.tst-noscript-item .q{font-size:var(--t-body); line-height:1.6; margin-top:14px}
.tst-noscript-item video{display:block; width:min(100%,220px); aspect-ratio:9/16; margin:20px auto 0;
  object-fit:cover; border-radius:18px; background:var(--bg-card-2); border:1px solid var(--border-subtle)}
@keyframes tstFadeIn{from{opacity:0} to{opacity:1}}
@media (min-width:900px) and (max-width:1100px){
  .tst-slide{grid-template-columns:minmax(0,1fr) 320px; gap:48px}
}
@media (max-width:899px){
  .tst-showcase{padding:44px 48px; border-radius:48px}
  .tst-slide{grid-template-columns:1fr; gap:40px}
  .tst-copy{text-align:center}
  .tst-meta-row{justify-content:center}
  .tst-media{justify-self:center; width:min(46vw,300px)}
}
@media (max-width:600px){
  .testimonials .wrap{padding:0 16px}
  .tst-showcase{padding:32px 20px; border-radius:24px}
  .tst-slide{gap:30px}
  .tst .q{font-size:clamp(1.25rem,5.6vw,1.5rem); line-height:1.45}
  .tst .qm{margin-bottom:10px}
  .tst-meta-row{gap:18px; margin-top:28px; flex-direction:column}
  .tst-controls{order:1}
  .tst .who{order:2; justify-content:center}
  .tst-nav-btn{padding:10px 13px}
  .tst-media{width:min(76vw,260px)}
  .tst-noscript-grid{grid-template-columns:1fr}
}

/* ============ PRICING / OFFER ============ */
.offer .head{text-align:center;max-width:760px;margin:0 auto 36px}
.offer-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;max-width:940px;margin:0 auto;align-items:start}
.price-card{width:100%;min-width:0;margin:0 auto; background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden}
.price-card h3{font-size:1.5rem;margin:0 0 12px;letter-spacing:-.025em}
.price-card.free .body{display:flex;flex-direction:column;gap:16px}
.price-card.free p{margin:0;color:var(--text-secondary)}
.price-card.free .plan-actions{margin-top:12px}
.price-card.free .eyebrow{color:var(--brand)}
.price-card .ribbon{background:var(--brand); color:var(--brand-ink); text-align:center; padding:14px; font-weight:600; font-size:.95rem}
.price-card .body{padding:30px}
.price-top{display:grid; gap:24px; margin-bottom:24px}
.price-amt{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.price-amt b{font-size:clamp(2rem,3vw,2.6rem); font-weight:800; letter-spacing:-.04em}
.price-amt span{color:var(--text-secondary)}
.price-lead{font-size:13px; color:var(--text-secondary); margin:0 0 4px}
.price-sub{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:12px 0 0}
.price-feats{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.price-feats li{display:flex; gap:10px; align-items:flex-start; font-size:var(--t-sub)}
.price-feats .ck{width:20px; height:20px; flex:none; color:var(--brand); margin-top:1px}
.price-card .btn{width:100%; border-radius:var(--r-md)}
.plan-actions{display:grid; gap:10px}
@media (max-width:760px){.offer-grid{grid-template-columns:1fr;max-width:560px}}
@media (max-width:640px){
  .price-top{grid-template-columns:1fr; gap:18px}
  .price-card .body{padding:24px 18px}
  .price-amt b{font-size:clamp(2rem,10vw,2.5rem); max-width:100%; white-space:nowrap}
}

/* ============ GUIDES ============ */
.landing-guides{border-top:1px solid var(--border-subtle);background:var(--bg-card-2)}
.landing-guides-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:30px}
.landing-guides-head > div{max-width:650px}
.landing-guides-head .btn{flex:none}
.landing-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.landing-guide-card{display:flex;flex-direction:column;text-decoration:none;padding:28px;background:var(--bg-card);
  border:1px solid var(--border-strong);border-radius:22px;transition:border-color .2s}
.landing-guide-card:hover{border-color:var(--brand)}
.landing-guide-card:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
.landing-guide-card > span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--brand)}
.landing-guide-card h3{font:400 1.85rem/1.2 var(--font-serif);letter-spacing:-.035em;margin:18px 0 12px;max-width:23ch}
.landing-guide-card p{font-size:.96rem;color:var(--text-secondary);margin:0 0 24px}
.landing-guide-card b{font-size:.88rem;color:var(--brand);margin-top:auto}
@media (max-width:760px){
  .landing-guides-head{align-items:start;flex-direction:column;gap:12px}
  .landing-guides-head .btn{padding-left:0}
  .landing-guide-grid{grid-template-columns:1fr;gap:16px}
  .landing-guide-card{padding:24px}
}

/* ============ FAQ ============ */
.faq{margin-top:28px; display:grid; gap:12px; max-width:760px; margin-left:auto; margin-right:auto}
.faq details{background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-md); overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:18px 20px; font-weight:600; font-size:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mk{flex:none; color:var(--brand); font-size:22px; line-height:1; transition:transform .25s}
.faq details[open] summary .mk{transform:rotate(45deg)}
.faq .ans{padding:0 20px 18px; color:var(--text-secondary); font-size:var(--t-sub); line-height:1.65}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border-subtle); padding:36px 0; background:var(--bg-elevated)}
footer .wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
footer .links{display:flex; gap:22px; flex-wrap:wrap; margin-left:auto}
footer .links a{font-size:14px; color:var(--text-secondary); text-decoration:none; font-weight:500}
footer .links a:hover{color:var(--brand)}
footer .fine{margin:0; font-size:12px; color:var(--text-faint)}

/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  section{padding:56px 0}
  footer .wrap{align-items:flex-start}
  footer .links{width:100%; margin-left:0}
  html.js-reveal .reveal.armed{transform:translate3d(0,18px,0)}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  html.js-reveal .reveal{opacity:1 !important; transform:none !important; transition:none}
  .btn,.benefit{transform:none !important}
  html{scroll-behavior:auto}
}