/* ── TransReader marketing site — Warm Paper / Green ─────────────── */
:root{
  --bg:#F6F2E9; --surface:#FCFAF4; --surface-2:#F0EBDD; --surface-3:#E7E1D0;
  --ink:#211F19; --muted:#6C6759; --faint:#9C9684;
  --line:#E4DECF; --line-2:#D8D1BE;
  --primary:#3A6F5C; --primary-2:#2C5747; --primary-container:#CDE6D9;
  --on-primary:#FFFFFF; --on-pc:#0C3A2C;
  --gold:#9A7B2E; --danger:#A8392F;
  --known:color-mix(in srgb, var(--primary) 55%, transparent);
  --shadow:0 1px 2px rgba(30,28,22,.05), 0 6px 18px rgba(30,28,22,.06);
  --shadow-lg:0 14px 44px rgba(30,28,22,.14);
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", system-ui, -apple-system, sans-serif;
  --maxw:1160px;
  --r-card:20px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-weight:400; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:color-mix(in srgb, var(--primary) 22%, transparent); }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.08;
  letter-spacing:-.012em; margin:0; text-wrap:balance; color:var(--ink); }
p{ margin:0; text-wrap:pretty; }
.serif{ font-family:var(--serif); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
section{ position:relative; }
.eyebrow{ font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--primary); }
.lede{ color:var(--muted); font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.62; }
.green{ color:var(--primary); }

/* ── buttons ─────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:15.5px; cursor:pointer;
  border:none; border-radius:999px; padding:0 22px; height:48px;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary); color:var(--on-primary);
  box-shadow:0 1px 1px rgba(12,58,44,.18), 0 6px 18px rgba(12,58,44,.16); }
.btn-primary:hover{ background:var(--primary-2); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary-2); }
.btn-sm{ height:40px; font-size:14.5px; padding:0 17px; }
.btn-lg{ height:54px; font-size:16.5px; padding:0 28px; }

/* ── nav ─────────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s; }
.nav.scrolled{ border-bottom-color:var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent); }
.nav-in{ display:flex; align-items:center; gap:18px; height:68px; }
.nav .wrap{ max-width:none; padding-inline:32px; }
.wordmark{ font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:-.02em; color:var(--ink); }
.wordmark b{ font-weight:600; color:var(--primary); }
.nav-links{ display:flex; gap:6px; margin-inline-start:auto; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--muted); padding:9px 13px; border-radius:10px;
  transition:color .15s, background .15s; }
.nav-links a:hover{ color:var(--ink); background:var(--surface-2); }
.nav-cta{ margin-inline-start:8px; }
.nav-burger{ display:none; margin-inline-start:auto; width:44px; height:44px; border:1px solid var(--line-2);
  background:var(--surface); border-radius:12px; align-items:center; justify-content:center; cursor:pointer; }
.nav-burger span{ width:18px; height:2px; background:var(--ink); position:relative; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.nav-burger span::before{ top:-6px; } .nav-burger span::after{ top:6px; }

/* ── hero ────────────────────────────────────────────────────── */
.hero{ padding:54px 0 30px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(2.5rem,6.2vw,4.4rem); margin:18px 0 0; }
.hero .lede{ margin-top:22px; max-width:34ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:30px; }
.trust{ margin-top:20px; font-size:13.5px; color:var(--faint); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.trust .dot{ width:3px; height:3px; border-radius:999px; background:var(--line-2); }

/* coming-soon email capture */
.capture{ display:flex; gap:8px; background:var(--surface); border:1.5px solid var(--line-2);
  border-radius:999px; padding:5px 5px 5px 8px; max-width:380px; box-shadow:var(--shadow);
  transition:border-color .15s; }
.capture:focus-within{ border-color:var(--primary); }
.capture input{ flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:var(--sans); font-size:15px; color:var(--ink); padding-inline-start:8px; }
.capture input::placeholder{ color:var(--faint); }
.capture .btn{ height:40px; padding:0 18px; }
.capture-note{ margin-top:10px; font-size:12.5px; color:var(--faint); }
.capture.done{ justify-content:center; color:var(--primary-2); font-weight:600; font-size:14.5px; padding:14px; }

/* ── phone mockup frame ──────────────────────────────────────── */
.phone{ position:relative; width:100%; max-width:296px; aspect-ratio:9/19.3; margin-inline:auto;
  background:#15140F; border-radius:42px; padding:9px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.06); }
.phone::after{ content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:46px; height:5px; border-radius:999px; background:rgba(255,255,255,.18); z-index:3; }
.phone .screen{ position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden;
  background:var(--bg); display:flex; flex-direction:column; }
.phone.tilt{ transform:rotate(-2.2deg); }

/* ── hero reading screen (polished, real-looking) ────────────── */
.hero-shot{ flex:1; display:flex; flex-direction:column; background:var(--bg); }
.hs-bar{ display:flex; align-items:center; gap:11px; padding:14px 16px 12px; background:var(--bg); border-bottom:1px solid var(--line); }
.hs-back{ width:9px; height:9px; border-left:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); }
.hs-title{ flex:1; font-family:var(--serif); font-weight:600; font-size:16px; color:var(--ink); }
.hs-spark{ width:26px; height:26px; border-radius:999px; background:var(--primary-container); }
.hs-read{ flex:1; padding:20px 18px; background:#F4EEE1; }
.hs-read p{ font-family:var(--serif); font-size:18px; line-height:1.95; color:#241F16; }
.hs-recall{ margin:0 14px 12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 14px; box-shadow:var(--shadow); }
.hs-recall-head{ display:flex; align-items:baseline; gap:9px; }
.hs-recall-word{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); }
.hs-recall-q{ font-size:12px; color:var(--muted); }
.hs-recall-field{ height:38px; margin-top:11px; border:1.5px solid var(--primary); border-radius:10px;
  position:relative; }
.hs-recall-field::after{ content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:2px; height:17px; background:var(--primary); animation:caret 1.1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
.hs-foot{ display:flex; align-items:center; gap:12px; padding:12px 16px 16px; background:var(--bg); }
.hs-cov{ flex:1; }
.hs-cov-top{ display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:var(--faint);
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px; }
.hs-cov-top span:last-child{ color:var(--primary); }
.hs-cov-track{ height:7px; background:var(--surface-3); border-radius:999px; overflow:hidden; }
.hs-cov-track i{ display:block; width:62%; height:100%; background:var(--primary); border-radius:999px; }
.hs-add{ display:inline-flex; align-items:center; height:34px; padding:0 15px; border-radius:999px;
  background:var(--primary); color:#fff; font-size:13px; font-weight:600; }
@media (prefers-reduced-motion:reduce){ .hs-recall-field::after{ animation:none; } }

/* screenshot placeholder (clearly labeled — a capture spec) */
.shot{ flex:1; position:relative; display:flex; flex-direction:column;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb,var(--surface-2) 70%, var(--bg)) 0 11px, var(--surface) 11px 22px);
  color:var(--muted); }
.shot-bar{ display:flex; align-items:center; gap:9px; padding:13px 16px 10px; background:var(--bg);
  border-bottom:1px solid var(--line); }
.shot-bar .t{ font-family:var(--serif); font-weight:600; font-size:16px; color:var(--ink); flex:1; }
.shot-bar .ic{ width:22px; height:22px; border-radius:7px; background:var(--surface-2); }
.shot-bar .pill{ width:26px; height:26px; border-radius:999px; background:var(--primary-container); }
.shot-cap{ position:absolute; inset:auto 16px 18px; text-align:center; }
.shot-cap .tag{ font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:10.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--faint);
  background:color-mix(in srgb,var(--surface) 70%, transparent); padding:5px 10px; border-radius:8px;
  display:inline-block; border:1px solid var(--line); }
.shot-mid{ flex:1; display:flex; align-items:center; justify-content:center; padding:18px; }
.shot-mid .glyph{ width:54px; height:54px; border-radius:16px; background:var(--surface);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.shot-mid .glyph svg{ width:26px; height:26px; }

/* ── generic section heading ─────────────────────────────────── */
.sec{ padding:84px 0; }
.sec-head{ max-width:640px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(2rem,4.2vw,3rem); margin-top:14px; }
.sec-head p{ margin-top:16px; }

/* ── how it works ────────────────────────────────────────────── */
.howit{ background:var(--surface); border-block:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:48px; }
.step .num{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--primary);
  width:38px; height:38px; border-radius:999px; border:1.5px solid var(--primary-container);
  background:var(--primary-container); color:var(--on-pc); display:flex; align-items:center; justify-content:center; }
.step h3{ font-size:1.32rem; margin-top:20px; }
.step p{ margin-top:9px; color:var(--muted); font-size:15.5px; }
.step .ln{ height:1px; background:var(--line); margin-top:22px; }

/* ── features: marquee alternating rows ──────────────────────── */
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:62px 0; }
.feat + .feat{ border-top:1px solid var(--line); }
.feat.flip .feat-text{ order:2; }
.feat-text .eyebrow{ color:var(--muted); }
.feat-text h3{ font-size:clamp(1.7rem,3vw,2.3rem); margin-top:14px; }
.feat-text p{ margin-top:16px; color:var(--muted); font-size:16.5px; line-height:1.62; }
.feat-media{ display:flex; justify-content:center; }
.feat-media.trio{ gap:0; }

/* three-phone cluster for reading modes */
.trio-wrap{ display:flex; align-items:flex-end; justify-content:center; width:100%; }
.trio-wrap .phone{ max-width:178px; }
.trio-wrap .phone:nth-child(1){ transform:translateX(24px) rotate(-5deg) scale(.92); z-index:1; opacity:.96; }
.trio-wrap .phone:nth-child(2){ z-index:3; }
.trio-wrap .phone:nth-child(3){ transform:translateX(-24px) rotate(5deg) scale(.92); z-index:1; opacity:.96; }

/* mode chips under reading-modes feature */
.modechips{ display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
.modechip{ font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
.modechip.on{ background:var(--primary-container); color:var(--on-pc); border-color:transparent; }

/* ── supporting feature grid ─────────────────────────────────── */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.fcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px 24px; box-shadow:var(--shadow); }
.fcard .ic{ width:46px; height:46px; border-radius:13px; background:var(--primary-container);
  color:var(--on-pc); display:flex; align-items:center; justify-content:center; }
.fcard .ic svg{ width:23px; height:23px; }
.fcard h3{ font-size:1.28rem; margin-top:18px; }
.fcard p{ margin-top:9px; color:var(--muted); font-size:15px; }
.theme-swatches{ display:flex; gap:7px; margin-top:16px; flex-wrap:wrap; }
.theme-swatches span{ width:26px; height:26px; border-radius:8px; border:1px solid rgba(0,0,0,.08);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }

/* ── word underline accent (used in copy + samples) ──────────── */
.known{ box-shadow:inset 0 -2px 0 var(--known); border-radius:3px; padding-bottom:1px; }
.accentword{ color:var(--primary); font-weight:600; }

/* ── languages band ──────────────────────────────────────────── */
.langs{ background:var(--ink); color:var(--surface); }
.langs .eyebrow{ color:color-mix(in srgb,var(--primary-container) 80%, white); }
.langs h2{ color:var(--bg); }
.langs p{ color:color-mix(in srgb,var(--bg) 72%, transparent); }
.scripts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }
.scriptcard{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:22px 26px; min-width:150px; flex:1 1 150px; }
.scriptcard .w{ font-size:34px; line-height:1.2; color:var(--bg); }
.scriptcard .l{ margin-top:10px; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:color-mix(in srgb,var(--bg) 56%, transparent); font-weight:600; }
.scriptcard.rtl{ direction:rtl; text-align:right; }

/* ── calm / privacy split ────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.bigcard{ background:var(--surface); border:1px solid var(--line); border-radius:24px;
  padding:44px 40px; box-shadow:var(--shadow); }
.bigcard .ic{ width:52px; height:52px; border-radius:15px; background:var(--surface-2);
  color:var(--primary); display:flex; align-items:center; justify-content:center; }
.bigcard .ic svg{ width:26px; height:26px; }
.bigcard h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin-top:22px; }
.bigcard p{ margin-top:14px; color:var(--muted); font-size:16px; }

/* ── pricing ─────────────────────────────────────────────────── */
.prices{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:48px; max-width:840px; margin-inline:auto; }
.price{ background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:34px 32px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; }
.price.featured{ border:1.5px solid var(--primary); box-shadow:var(--shadow-lg); position:relative; }
.price .ribbon{ position:absolute; top:-13px; left:32px; background:var(--primary); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.04em; padding:5px 12px; border-radius:999px; }
.price .pname{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.price .amt{ font-family:var(--serif); font-size:2.6rem; font-weight:600; margin-top:10px; line-height:1; }
.price .amt small{ font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.price ul{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; flex:1; }
.price li{ display:flex; gap:11px; font-size:15px; color:var(--ink); line-height:1.45; }
.price li svg{ width:19px; height:19px; flex-shrink:0; margin-top:2px; color:var(--primary); }
.price .btn{ margin-top:28px; width:100%; }
.price-note{ text-align:center; color:var(--faint); font-size:14px; margin-top:24px; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq{ max-width:760px; margin-inline:auto; margin-top:40px; }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:24px 4px; font-family:var(--serif); font-size:1.22rem; font-weight:600; color:var(--ink); }
.qa summary::-webkit-details-marker{ display:none; }
.qa .plus{ margin-inline-start:auto; width:24px; height:24px; flex-shrink:0; position:relative; color:var(--primary); transition:transform .25s; }
.qa .plus::before,.qa .plus::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:currentColor; border-radius:2px; }
.qa .plus::before{ width:15px; height:2px; } .qa .plus::after{ width:2px; height:15px; transition:transform .25s; }
.qa[open] .plus::after{ transform:translate(-50%,-50%) scaleY(0); }
.qa .ans{ padding:0 4px 26px; color:var(--muted); font-size:16px; max-width:62ch; line-height:1.62; }

/* ── footer CTA ──────────────────────────────────────────────── */
.cta{ text-align:center; }
.cta-card{ background:var(--primary); color:#fff; border-radius:30px; padding:72px 40px;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.cta-card h2{ color:#fff; font-size:clamp(2rem,4.5vw,3.2rem); max-width:18ch; margin-inline:auto; }
.cta-card .capture{ margin:30px auto 0; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
.cta-card .capture input{ color:#fff; }
.cta-card .capture input::placeholder{ color:rgba(255,255,255,.6); }
.cta-card .capture .btn-primary{ background:#fff; color:var(--primary-2); }
.cta-card .capture .btn-primary:hover{ background:var(--bg); }
.cta-card .capture.done{ color:#fff; }
.cta-card .sub{ margin:18px auto 0; color:rgba(255,255,255,.8); font-size:14px; }

/* ── footer ──────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:40px 0; margin-top:84px; }
.foot-in{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot .wordmark{ font-size:20px; }
.foot-links{ display:flex; gap:22px; margin-inline-start:auto; }
.foot-links a{ font-size:14px; color:var(--muted); }
.foot-links a:hover{ color:var(--ink); }
.foot .copy{ width:100%; font-size:13px; color:var(--faint); margin-top:6px; }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-cta{ display:inline-flex; margin-inline-start:auto; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero .lede{ max-width:none; }
  .hero-visual{ order:-1; max-width:300px; margin-inline:auto; }
  .feat{ grid-template-columns:1fr; gap:34px; padding:48px 0; }
  .feat.flip .feat-text{ order:0; }
  .feat-media{ order:-1; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .fgrid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .prices{ grid-template-columns:1fr; }
  .sec{ padding:60px 0; }
}
@media (max-width:520px){
  body{ font-size:16px; }
  .wrap{ padding-inline:18px; }
  .hero{ padding:34px 0 20px; }
  .cta-card{ padding:48px 24px; }
  .bigcard{ padding:32px 26px; }
  .scriptcard{ min-width:120px; padding:18px 20px; }
  .scriptcard .w{ font-size:28px; }
}

/* mobile nav drawer */
.drawer{ position:fixed; inset:0; z-index:60; background:var(--bg); padding:22px;
  display:none; flex-direction:column; gap:6px; }
.drawer.open{ display:flex; }
.drawer-top{ display:flex; align-items:center; height:46px; margin-bottom:14px; }
.drawer-close{ margin-inline-start:auto; width:44px; height:44px; border:1px solid var(--line-2);
  background:var(--surface); border-radius:12px; font-size:22px; color:var(--ink); cursor:pointer; }
.drawer a{ font-family:var(--serif); font-size:1.5rem; font-weight:600; padding:16px 6px;
  border-bottom:1px solid var(--line); }
.drawer .btn{ margin-top:20px; }

@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto; transition:none!important; } }