/* rootscroll.com -- the marketing site, on the product's own design system.
 *
 * Tokens (--rsd-*), fonts and every rule that draws a highlighted word, a
 * word card, a root chip, a rating row or a family tree come from
 * engine/content.css, the extension's own stylesheet (copied, never edited:
 * scripts/sync-engine.py). This file is only the page around them: layout,
 * type, sections, and the few site-only pieces (browser frame, phone frame,
 * video player, games). Where a site piece imitates an app surface -- the
 * flashcard, the rating tiles -- its numbers are the app's (css/app.css in
 * rootscroll-pwa). */

:root{
  --bg:var(--rsd-bg); --paper:var(--rsd-paper); --paper2:#EDE3D3; --ink:var(--rsd-ink); --ink2:var(--rsd-ink2); --soft:var(--rsd-ink-soft);
  --line:var(--rsd-line); --line2:var(--rsd-line-strong); --bark:var(--rsd-bark); --bark2:var(--rsd-bark-deep);
  --sage:var(--rsd-sage); --sage-deep:var(--rsd-sage-deep); --sage-text:var(--rsd-sage-text); --cream:var(--rsd-cream);
  --serif:var(--rsd-serif); --sans:var(--rsd-sans);
  --maxw:1120px;
  color-scheme:light;
}
html{ overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:3px; border-radius:8px; }
[hidden]{ display:none !important; }
.in{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }
@media(min-width:760px){ .in{ padding:0 28px; } }

/* paper grain, the app's --rsd-noise, on every dark card */
.rs-card-dark{ position:relative; isolation:isolate; background:var(--bark); color:var(--cream); border-radius:var(--rsd-r-card); box-shadow:var(--rsd-shadow-card); }
.rs-card-dark::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.09; mix-blend-mode:overlay; background:var(--rsd-noise); }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:40; background:rgba(232,221,204,.86); backdrop-filter:saturate(1.3) blur(14px); -webkit-backdrop-filter:saturate(1.3) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s; }
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(90,56,32,.06); }
.nav .in{ display:flex; align-items:center; gap:12px; height:66px; }
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo img{ display:block; height:40px; width:auto; }
.nav .links{ margin-left:auto; display:none; align-items:center; gap:26px; }
.nav .links a{ color:var(--soft); text-decoration:none; font-size:14.5px; font-weight:600; transition:color .15s; }
.nav .links a:hover{ color:var(--ink); }
.nav .links a.on{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
.nav .links a.btn{ color:var(--cream); }
.menu-btn{ margin-left:auto; border:1px solid var(--line2); background:var(--paper); border-radius:12px; width:44px; height:42px; display:grid; place-items:center; cursor:pointer; }
.menu-btn span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; box-shadow:0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
@media(min-width:820px){ .nav .links{ display:flex; } .menu-btn{ display:none; } }
.sheet{ position:fixed; inset:0; z-index:60; background:rgba(42,30,22,.4); display:flex; align-items:flex-start; }
.sheet .panel{ width:100%; background:var(--bg); padding:14px 18px 22px; border-radius:0 0 24px 24px; animation:down .22s ease; }
@keyframes down{ from{ transform:translateY(-12px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sheet .x{ border:0; background:none; font-size:28px; width:44px; height:44px; cursor:pointer; color:var(--ink); }
.sheet a.it{ display:block; font-family:var(--serif); font-size:25px; font-weight:600; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.sheet .btn{ margin-top:18px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--bark); color:var(--cream); border:none; border-radius:14px; padding:13px 22px; min-height:48px; font-size:15.5px; font-weight:700; cursor:pointer; text-decoration:none; box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px -10px rgba(58,42,31,.7); transition:transform .12s, box-shadow .2s, background .15s; }
.btn:hover{ background:#46332A; transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(58,42,31,.8); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn.xl{ min-height:56px; padding:15px 26px; font-size:16.5px; border-radius:16px; }
.btn.sm{ min-height:40px; padding:9px 16px; font-size:14px; border-radius:12px; }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line2); }
.btn.ghost:hover{ background:rgba(90,56,32,.05); }
.btn.outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line2); }
.btn.outline:hover{ background:var(--paper2); }
.btn.light{ background:var(--sage); color:var(--bark); }
.btn.light:hover{ background:#CBDDB8; }
.btn.block{ display:flex; width:100%; }
.chip{ border:1px solid var(--line2); background:var(--paper); border-radius:99px; padding:10px 16px; min-height:42px; font-size:14px; font-weight:700; cursor:pointer; color:var(--ink); transition:background .15s, transform .1s; }
.chip:hover{ background:var(--rsd-paper-hover); }
.chip:active{ transform:scale(.97); }
.chip.go{ background:var(--bark); color:var(--cream); border-color:var(--bark); }
.chip.ghost{ background:transparent; }
.chip:disabled{ opacity:.4; cursor:default; }
.row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; align-items:center; }
.textlink{ font-weight:700; color:var(--ink); text-decoration:none; background:linear-gradient(var(--sage),var(--sage)) 0 100%/100% 3px no-repeat; padding-bottom:1px; transition:background-size .2s; }
.textlink:hover{ background-size:100% 100%; }

/* ---------- type + sections ---------- */
.kick{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:17px; color:var(--sage-text); margin-bottom:10px; letter-spacing:.005em; }
.step{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sage-text); background:rgba(111,140,88,.14); border-radius:99px; padding:4px 11px; margin-bottom:12px; }
h1{ font-family:var(--serif); font-weight:600; font-size:clamp(40px,6.4vw,70px); line-height:1.02; letter-spacing:-.028em; color:var(--ink); max-width:15ch; }
h2{ font-family:var(--serif); font-weight:600; font-size:clamp(30px,4.4vw,46px); line-height:1.08; letter-spacing:-.022em; color:var(--ink); max-width:20ch; }
h3{ font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.25; letter-spacing:-.01em; }
.lede{ font-size:clamp(17px,1.9vw,19.5px); line-height:1.55; color:var(--soft); margin-top:18px; max-width:36em; }
.lede.sm{ font-size:15.5px; margin-top:12px; }
.head p{ font-size:17px; color:var(--soft); margin-top:14px; max-width:34em; }
.sec{ padding:88px 0; }
.sec.alt{ background:var(--paper); }
.head{ margin-bottom:34px; }
.grid2{ display:grid; gap:40px; align-items:center; }
@media(min-width:900px){ .grid2{ grid-template-columns:1fr 1fr; gap:64px; } .grid2.flip > :first-child{ order:2; } .grid2 .head{ margin-bottom:0; } }
@media(max-width:600px){ .sec{ padding:64px 0; } }

.h-track{ display:inline-block; animation:fadein .3s ease both; }

/* ---------- hero ---------- */
.hero{ padding:56px 0 80px; position:relative; overflow-x:clip; }
.hero > .in{ display:grid; gap:44px; align-items:center; }
@media(min-width:980px){ .hero > .in{ grid-template-columns:1.02fr 1fr; gap:56px; } .hero{ padding:72px 0 104px; } }
.hero > .in > *, .grid2 > *{ min-width:0; }
.hero-slim{ padding:64px 0 36px; }
.hero-slim > .in{ display:block; }
.hero-slim h1{ max-width:16ch; }
.ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.under{ margin-top:14px; font-size:13.5px; color:var(--soft); }
.stage{ position:relative; }
.stage::before{ content:""; position:absolute; inset:-8% -6% -6% -4%; z-index:-1; border-radius:40px; background:radial-gradient(60% 55% at 60% 40%, rgba(191,212,170,.55), transparent 70%), radial-gradient(40% 40% at 20% 80%, rgba(162,85,58,.12), transparent 70%); filter:blur(8px); }

/* ---------- browser frame + article (hero demo) ---------- */
.browser{ background:var(--rsd-paper); border-radius:20px; box-shadow:0 40px 90px -30px rgba(58,42,31,.45), 0 0 0 1px rgba(90,56,32,.12); overflow:hidden; }
.bz-bar{ display:flex; align-items:center; gap:10px; padding:11px 12px; background:#E4D8C5; border-bottom:1px solid var(--line); }
.bz-dots{ display:flex; gap:6px; flex:none; }
.bz-dots i{ width:11px; height:11px; border-radius:50%; background:#CDBDA5; }
.bz-url{ flex:1; min-width:0; background:var(--rsd-paper); border-radius:99px; padding:7px 14px; font-size:12.5px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rsbtn{ flex:none; display:flex; align-items:center; gap:8px; border:0; background:var(--bark); color:var(--cream); border-radius:99px; padding:5px 6px 5px 8px; cursor:pointer; font-size:12.5px; font-weight:700; box-shadow:0 4px 12px -4px rgba(58,42,31,.6); }
.rsbtn img{ width:22px; height:22px; display:block; object-fit:contain; background:var(--rsd-bg); border-radius:50%; padding:2px; }
.bz-ext{ flex:none; width:26px; height:26px; display:grid; place-items:center; color:var(--soft); opacity:.7; }
.bz-ext svg{ width:18px; height:18px; }
.rsbtn .sw{ width:34px; height:20px; border-radius:99px; background:rgba(232,221,204,.22); position:relative; transition:background .2s; }
.rsbtn .sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--cream); transition:transform .22s cubic-bezier(.3,1.4,.5,1); }
.rsbtn[aria-checked="true"] .sw{ background:var(--sage-deep); }
.rsbtn[aria-checked="true"] .sw::after{ transform:translateX(14px); }
.rsbtn.pulse{ animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(111,140,88,.55); } 50%{ box-shadow:0 0 0 9px rgba(111,140,88,0); } }
.art-body{ padding:22px 24px 8px; background:#FBF7F0; }
.art-kick{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8E4630; }
.art-h{ font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:clamp(22px,2.6vw,27px); line-height:1.18; color:#241810; margin-top:6px; }
.art-by{ font-size:12.5px; color:#7b6a5a; margin:8px 0 14px; }
.paras p{ font-family:Georgia,"Times New Roman",serif; font-size:16.5px; line-height:1.72; color:#2c2016; margin:0 0 14px; }
.paras .orig{ transition:opacity .3s; }
.art-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--line); background:var(--rsd-paper); }
.art-status{ font-size:13px; color:var(--soft); min-height:20px; }
.art-status b{ color:var(--ink); }
.seg{ display:inline-flex; background:#E4D8C5; border-radius:99px; padding:3px; gap:2px; }
.seg button{ border:0; background:transparent; border-radius:99px; padding:5px 11px; font-size:12.5px; font-weight:700; color:var(--soft); cursor:pointer; }
.seg button[aria-pressed="true"]{ background:var(--bark); color:var(--cream); }
.art-hint{ margin-top:14px; font-size:13.5px; color:var(--soft); display:flex; gap:8px; align-items:center; }
.art-hint::before{ content:""; width:22px; height:14px; flex:none; background:url(../icons/brand/tendril-cream.png) center/contain no-repeat; filter:brightness(.35) sepia(1); transform:rotate(-90deg); }

/* the paint-in when a swap lands: the product's own stroke, revealed */
.site-paint::before{ animation:paint .6s cubic-bezier(.25,.8,.25,1) both; animation-delay:var(--d,0ms) !important; }
@keyframes paint{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.site-fadein{ animation:fadein .35s ease both; animation-delay:var(--d,0ms); }
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }

/* the word card on this page is the product's .rs-popup, positioned in the
   document like the extension positions it */
.rs-ui.rs-popup.site-pop{ position:absolute !important; animation:popin .18s ease both; }
@keyframes popin{ from{ opacity:0; transform:translateY(6px) scale(.985); } to{ opacity:1; transform:none; } }
.site-pop-x{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:0; background:rgba(232,221,204,.08); color:var(--cream); font-size:18px; line-height:1; cursor:pointer; z-index:2; }
.site-pop-x:hover{ background:rgba(232,221,204,.16); }
.rs-ui.rs-popup.site-pop .rs-pop-head{ padding-right:34px !important; }
.rs-ui.rs-toast.site-toast{ bottom:96px; }
@media(min-width:760px){ .rs-ui.rs-toast.site-toast{ bottom:28px; } }

/* ---------- how it works ---------- */
.steps{ display:grid; gap:16px; }
@media(min-width:860px){ .steps{ grid-template-columns:repeat(3,1fr); gap:20px; } }
.stepc{ background:var(--bg); border-radius:var(--rsd-r-card); padding:26px 24px 22px; display:flex; flex-direction:column; box-shadow:0 0 0 1px var(--line); }
.stepc .n{ font-family:var(--serif); font-weight:800; font-size:40px; line-height:1; color:var(--sage-deep); margin-bottom:12px; }
.stepc h3{ font-size:21px; }
.stepc p{ color:var(--soft); margin-top:8px; font-size:15.5px; }
.mini{ margin-top:auto; padding-top:20px; }
.mini-swap{ font-family:Georgia,serif; font-size:17px; line-height:1.9; color:#2c2016; background:#FBF7F0; border-radius:14px; padding:14px 16px; box-shadow:0 0 0 1px var(--line); margin-top:20px; }
.mini-swap s{ color:#9a8a7a; }
.mini-legend{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; background:#FBF7F0; border-radius:14px; padding:14px; box-shadow:0 0 0 1px var(--line); margin-top:20px; }
.mini-legend .lg{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; font-size:12px; font-weight:600; color:var(--soft); }
.mini-legend .lg .w{ font-family:Georgia,serif; font-size:17px; color:#2c2016; font-weight:400; }
.mini-sched{ display:flex; flex-direction:column; gap:8px; margin-top:20px; }
.mini-sched span{ display:flex; align-items:center; gap:10px; background:#FBF7F0; border-radius:12px; padding:10px 12px; font-size:14px; font-weight:600; box-shadow:0 0 0 1px var(--line); }
.mini-sched b{ margin-left:auto; font-weight:500; color:var(--soft); font-size:13px; }
i.d{ width:11px; height:11px; border-radius:50%; flex:none; display:inline-block; }
i.d.r{ background:var(--rsd-rate-dk); } i.d.y{ background:var(--rsd-rate-learn); } i.d.g{ background:var(--rsd-rate-got); } i.d.n{ background:var(--rsd-rate-new); }

/* ---------- roots family ---------- */
.famcard{ padding:26px 22px 24px; text-align:center; }
.fam-top{ display:flex; justify-content:center; }
.fam-top .rs-rootchips{ width:auto; }
.fam-top .rs-rootchips-row{ width:auto !important; }
.fam-top .rs-rootchip{ min-width:150px !important; max-width:200px !important; flex:none !important; }
.fam-lab{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--rsd-cream60); margin:22px 0 10px; }
.fam-known, .fam-sat{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 8px; }
.fam-known button{ border:1px solid rgba(232,221,204,.2); background:rgba(232,221,204,.06); color:var(--cream); border-radius:99px; padding:9px 16px; font-size:16px; font-family:Georgia,serif; cursor:pointer; transition:background .15s, border-color .15s, transform .1s; }
.fam-known button:hover{ background:rgba(232,221,204,.12); }
.fam-known button.on{ background:rgba(191,212,170,.16); border-color:var(--sage); }
.fam-sat .fw{ font-family:Georgia,serif; font-size:16.5px; color:var(--cream); padding:6px 4px; border-radius:10px; opacity:.42; transition:opacity .35s, transform .35s; transform:translateY(4px); }
.fam-sat .fw.lit{ opacity:1; transform:none; }
.fam-sat .fw .rs-word{ cursor:pointer !important; }
.fam-count{ margin-top:18px; font-size:14px; color:var(--rsd-cream70); min-height:22px; }
.fam-count b{ color:var(--sage); font-family:var(--serif); font-size:20px; }
.fam-note{ margin-top:14px; font-size:13px; color:var(--rsd-cream60); }

/* ---------- video ---------- */
.vdemo{ display:grid; gap:14px; }
.player{ position:relative; aspect-ratio:16/10; border-radius:22px; overflow:hidden; background:radial-gradient(120% 80% at 30% 20%, #5b6a45 0%, #2d3324 45%, #15170f 100%); box-shadow:0 30px 70px -28px rgba(20,14,8,.7); }
.player .scene{ position:absolute; inset:0; background:radial-gradient(35% 30% at 70% 45%, rgba(232,221,204,.14), transparent 70%), radial-gradient(25% 40% at 25% 70%, rgba(191,212,170,.14), transparent 70%); }
.player .scene::after{ content:""; position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay; background:var(--rsd-noise); }
.play{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:68px; height:68px; border-radius:50%; border:0; background:rgba(232,221,204,.92); cursor:pointer; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.4); transition:transform .15s, opacity .2s; }
.play:hover{ transform:translate(-50%,-50%) scale(1.05); }
.play::before{ content:""; margin-left:5px; border-left:20px solid var(--bark); border-top:12px solid transparent; border-bottom:12px solid transparent; }
.play.pause{ opacity:0; pointer-events:none; }
.player:hover .play.pause{ opacity:.8; pointer-events:auto; }
.play.pause::before{ margin:0; width:18px; height:22px; border:0; border-left:6px solid var(--bark); border-right:6px solid var(--bark); }
.capline{ position:absolute; left:0; right:0; bottom:11%; display:flex; justify-content:center; padding:0 18px; }
.capline > span{ background:rgba(8,8,8,.78); color:#fff; font-size:clamp(15px,2.1vw,19px); line-height:1.5; padding:4px 10px; border-radius:4px; text-align:center; max-width:92%; }
.player .bar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.18); }
.player .bar i{ display:block; height:100%; width:0; background:#E0564A; transition:width .5s linear; }
.player .ytlogo{ position:absolute; top:14px; left:16px; font-size:12px; font-weight:700; color:rgba(255,255,255,.75); letter-spacing:.02em; }
.player .added{ position:absolute; top:14px; right:14px; background:var(--bark); color:var(--cream); font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:99px; animation:added 1.6s ease both; }
@keyframes added{ 0%{ opacity:0; transform:translateY(-6px); } 15%,80%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.tracker{ padding:14px 16px; border-radius:18px; }
.tracker .tk-h{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; color:var(--cream); }
.tracker .tk-h span{ background:var(--sage); color:var(--bark); border-radius:99px; padding:1px 9px; font-size:12px; }
.tracker .tk-list{ margin-top:8px; display:flex; flex-direction:column; gap:2px; min-height:24px; }
.tracker .tk-empty{ font-size:13px; color:var(--rsd-cream60); padding:4px 0; }
.tracker .tk-row{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; cursor:pointer; animation:fadein .3s ease both; border:0; background:transparent; width:100%; text-align:left; color:var(--cream); font-size:14.5px; }
.tracker .tk-row:hover{ background:rgba(232,221,204,.07); }
.tracker .tk-row small{ color:var(--rsd-cream60); font-size:12.5px; }
.tracker .tk-row .dots{ margin-left:auto; display:flex; gap:4px; }
.tracker .tk-row .dots i{ width:8px; height:8px; border-radius:50%; background:rgba(232,221,204,.18); }
.tracker .tk-row[data-c="red"] .dots i:nth-child(1){ background:var(--rsd-rate-dk); }
.tracker .tk-row[data-c="yellow"] .dots i:nth-child(-n+2){ background:var(--rsd-rate-learn); }
.tracker .tk-row[data-c="green"] .dots i{ background:var(--rsd-rate-got); }

/* ---------- phone (the app's Today + flashcard, at the app's own numbers) ---------- */
.phone-wrap{ display:flex; justify-content:center; }
.phone{ width:min(340px,100%); aspect-ratio:9/19.2; border-radius:48px; background:#1d1510; padding:11px; box-shadow:0 50px 90px -40px rgba(40,25,15,.75), inset 0 0 0 2px #3a2c22; position:relative; }
.phone .scr{ position:relative; height:100%; border-radius:38px; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; }
.phone .notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:96px; height:26px; border-radius:99px; background:#1d1510; z-index:3; }
.ph-top{ display:flex; align-items:center; justify-content:space-between; padding:44px 18px 6px; }
.ph-top img{ height:26px; width:auto; }
.ph-streak{ font-family:var(--serif); font-weight:800; font-size:18px; color:var(--ink); display:flex; align-items:center; gap:4px; }
.ph-streak i{ width:9px; height:12px; background:#C98B3A; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; display:inline-block; }
.ph-sub{ padding:0 18px; display:flex; justify-content:space-between; align-items:baseline; }
.ph-sub b{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-text); }
.ph-sub span{ font-size:12px; color:var(--soft); font-weight:600; }
.ph-prog{ display:flex; gap:4px; padding:8px 18px 0; }
.ph-prog i{ flex:1; height:4px; border-radius:99px; background:rgba(90,56,32,.14); transition:background .3s; }
.ph-prog i.done{ background:var(--sage-deep); } .ph-prog i.cur{ background:var(--ink); }
.ph-body{ flex:1; padding:12px 14px 8px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.fc{ flex:1; perspective:1200px; cursor:pointer; min-height:0; border:0; background:none; padding:0; text-align:inherit; }
.fc-in{ position:relative; width:100%; height:100%; transition:transform .5s cubic-bezier(.3,.7,.2,1); transform-style:preserve-3d; }
.fc.flipped .fc-in{ transform:rotateY(180deg); }
.fc-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:26px; background:var(--bark); box-shadow:var(--rsd-shadow-card); padding:18px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; isolation:isolate; container-type:inline-size; }
.fc-face::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.08; mix-blend-mode:overlay; background:var(--rsd-noise); }
.fc-back{ transform:rotateY(180deg); justify-content:flex-start; padding-top:22px; overflow-y:auto; }
.fc-lvl{ position:absolute; top:14px; right:14px; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--cream); border:1px solid rgba(232,221,204,.3); border-radius:99px; padding:2px 9px; }
.fc-lvl.l{ left:14px; right:auto; }
.fc-word{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,13cqw,52px); letter-spacing:-.02em; line-height:1.02; color:var(--sage); overflow-wrap:anywhere; }
.fc-pos{ font-family:var(--serif); font-style:italic; color:var(--rsd-cream70); font-size:15px; margin-top:6px; }
.fc-tap{ position:absolute; bottom:16px; left:0; right:0; font-size:12px; color:var(--rsd-cream60); }
.fc-def{ font-weight:700; font-size:clamp(15px,6.2cqw,19px); line-height:1.2; color:var(--sage); text-wrap:balance; margin:6px 0 12px; }
.fc-wsm{ font-family:var(--serif); font-weight:500; font-size:15px; color:var(--rsd-cream85); }
.fc-back .rs-rootchips{ width:100%; }
.fc-back .rs-rootchips::after{ display:none !important; }
.fc-back .rs-rootchip{ padding:8px 4px 7px !important; }
.fc-back .rs-rootchip-name{ font-size:19px !important; }
.fc-back .rs-rootchip-emoji{ font-size:18px !important; margin-bottom:3px !important; }
.fc-back .rs-rootchip-mean{ font-size:11.5px !important; }
.fc-back .rs-rootchips-note{ display:none !important; }
.ph-rate{ display:flex; gap:7px; }
.ph-rate button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; min-height:58px; padding:10px 0 8px; border-radius:14px; border:1px solid var(--line); background:var(--paper); cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink); transition:background .15s, transform .1s, opacity .2s; }
.ph-rate button:hover{ background:var(--rsd-paper-hover); }
.ph-rate button:active{ transform:scale(.96); }
.ph-rate button i{ width:12px; height:12px; border-radius:50%; }
.ph-rate[aria-disabled="true"] button{ opacity:.45; pointer-events:none; }
.ph-back{ text-align:center; font-size:12px; color:var(--soft); min-height:16px; }
.ph-tabs{ display:flex; justify-content:space-around; padding:8px 8px 22px; border-top:1px solid var(--line); background:rgba(241,233,220,.9); }
.ph-tabs span{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; font-weight:600; color:var(--soft); padding:4px 10px; border-radius:14px; }
.ph-tabs span.on{ color:var(--ink); background:rgba(111,140,88,.18); }
.ph-tabs svg{ width:21px; height:21px; }
.ph-done{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 14px; }
.ph-done h3{ font-size:24px; }
.ph-done p{ font-size:14px; color:var(--soft); margin-top:8px; }
.appbadges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.appbadges span{ font-size:13px; font-weight:700; color:var(--ink); background:var(--paper); box-shadow:0 0 0 1px var(--line); border-radius:99px; padding:7px 13px; }

/* ---------- screenshots ---------- */
.shots{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 20px; scrollbar-width:thin; }
.shot{ scroll-snap-align:start; margin:0; }
.shot button{ display:block; width:100%; border:0; padding:0; background:none; cursor:zoom-in; border-radius:22px; overflow:hidden; box-shadow:0 24px 50px -24px rgba(58,42,31,.55), 0 0 0 1px var(--line); transition:transform .2s; }
.shot button:hover{ transform:translateY(-3px); }
.shot img{ display:block; width:100%; height:auto; background:var(--paper2); }
.shot figcaption{ margin-top:12px; font-size:14px; color:var(--soft); }
.shot figcaption b{ display:block; color:var(--ink); font-family:var(--serif); font-size:17px; font-weight:600; }
.shot.wide{ grid-column:span 2; }
@media(min-width:1000px){ .shots{ grid-auto-flow:row; grid-template-columns:repeat(6,1fr); overflow:visible; } .shot{ grid-column:span 2; } .shot.wide{ grid-column:span 3; } }
.lightbox{ position:fixed; inset:0; z-index:90; background:rgba(26,18,12,.82); display:grid; place-items:center; padding:24px; cursor:zoom-out; animation:fadein .2s ease both; }
.lightbox img{ max-width:min(1100px,100%); max-height:88vh; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); }

/* ---------- teaser ---------- */
.teaser{ display:grid; gap:28px; padding:34px 28px; align-items:center; }
.teaser h2{ color:var(--cream); font-size:clamp(26px,4vw,38px); }
.teaser .kick{ color:var(--sage); }
.teaser .lede{ color:var(--rsd-cream70); font-size:16.5px; }
@media(min-width:860px){ .teaser{ grid-template-columns:1.3fr 1fr; padding:44px 44px; } }
.tmeter{ height:16px; border-radius:99px; background:rgba(232,221,204,.12); overflow:hidden; }
.tmeter i{ display:block; height:100%; width:52%; border-radius:99px; background:linear-gradient(90deg,var(--rsd-rate-dk),var(--rsd-rate-learn),var(--rsd-rate-got)); animation:tm 5s ease-in-out infinite; }
@keyframes tm{ 0%{ width:100%; } 45%{ width:28%; } 55%{ width:100%; } 100%{ width:60%; } }
.tlabel{ display:flex; justify-content:space-between; margin-top:8px; font-size:12.5px; color:var(--rsd-cream60); }

/* ---------- tests ---------- */
.tracks{ display:grid; gap:18px; }
@media(min-width:760px){ .tracks{ grid-template-columns:1fr 1fr; } }
.trk{ background:var(--bg); border-radius:var(--rsd-r-card); padding:28px 26px; box-shadow:0 0 0 1px var(--line); }
.trk .t{ font-family:var(--serif); font-weight:800; font-size:34px; letter-spacing:-.02em; }
.trk .s{ font-size:13px; font-weight:700; color:var(--sage-text); margin-top:2px; }
.trk p{ color:var(--soft); margin-top:12px; font-size:15.5px; }
.trk .ex{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.exw{ display:inline-flex; align-items:center; gap:8px; background:#FBF7F0; border-radius:12px; padding:8px 12px; box-shadow:0 0 0 1px var(--line); font-family:Georgia,serif; font-size:16.5px; color:#2c2016; cursor:pointer; }
.exw .lv{ font-family:var(--sans); font-size:11px; font-weight:700; color:var(--soft); border:1px solid var(--line2); border-radius:99px; padding:1px 7px; }

/* ---------- why ---------- */
.why{ display:grid; gap:16px; }
@media(min-width:860px){ .why{ grid-template-columns:repeat(3,1fr); gap:20px; } }
.why > div{ background:var(--paper); border-radius:var(--rsd-r-card); padding:26px 24px; box-shadow:0 0 0 1px var(--line); }
.why .n{ font-family:var(--serif); font-weight:800; font-size:44px; line-height:1; letter-spacing:-.02em; color:var(--ink); margin-bottom:14px; }
.why .n em{ font-style:italic; font-weight:400; font-size:.6em; color:var(--soft); }
.why p{ color:var(--soft); margin-top:8px; font-size:15px; }
.why small{ display:block; margin-top:10px; font-size:12.5px; color:var(--ink2); }
.promise{ margin-top:30px; padding:28px 30px; }
.promise h3{ color:var(--sage); font-size:24px; }
.promise p{ color:var(--rsd-cream85); margin-top:8px; max-width:48em; }

/* ---------- pricing ---------- */
.plans2{ display:grid; gap:16px; max-width:860px; }
@media(min-width:700px){ .plans2{ grid-template-columns:1fr 1fr; } }
.plan{ position:relative; background:var(--bg); border-radius:var(--rsd-r-card); padding:28px 26px 24px; box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; }
.plan .nm{ font-size:14px; font-weight:700; color:var(--soft); }
.plan .amt{ font-family:var(--serif); font-weight:800; font-size:52px; line-height:1.05; letter-spacing:-.02em; margin-top:6px; }
.plan .amt small{ font-family:var(--sans); font-size:15px; font-weight:500; color:var(--soft); letter-spacing:0; }
.plan .per{ font-size:14px; font-weight:700; color:var(--sage-text); margin:4px 0 20px; }
.plan .btn{ margin-top:auto; }
.plan.pro{ background:var(--bark); color:var(--cream); box-shadow:var(--rsd-shadow-card); isolation:isolate; }
.plan.pro::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:.09; mix-blend-mode:overlay; background:var(--rsd-noise); pointer-events:none; }
.plan.pro .nm{ color:var(--rsd-cream70); }
.plan.pro .amt small{ color:var(--rsd-cream70); }
.plan.pro .per{ color:var(--sage); }
.plan .tag{ position:absolute; top:-12px; left:24px; background:var(--sage); color:var(--bark); font-size:12px; font-weight:800; border-radius:99px; padding:4px 11px; }
.trialnote{ margin-top:18px; font-size:14px; color:var(--soft); }
.incl{ margin-top:30px; background:var(--paper); border-radius:var(--rsd-r-card); padding:26px 26px; box-shadow:0 0 0 1px var(--line); max-width:860px; }
.incl ul{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
@media(min-width:700px){ .incl ul{ grid-template-columns:1fr 1fr; } }
.incl li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.incl li::before{ content:""; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%; background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%233A2A1F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.schoolbox{ margin-top:18px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; background:var(--paper); border-radius:var(--rsd-r-card); padding:22px 26px; box-shadow:0 0 0 1px var(--line); max-width:860px; }
.schoolbox p{ color:var(--soft); font-size:15px; margin-top:4px; }

/* ---------- faq ---------- */
.faq{ display:grid; gap:10px; max-width:860px; }
.faq details{ background:var(--bg); border-radius:18px; box-shadow:0 0 0 1px var(--line); transition:box-shadow .2s; }
.sec.alt .faq details, .hero ~ .sec .faq details{ background:var(--bg); }
.faq details[open]{ box-shadow:0 0 0 1.5px var(--line2); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 20px; font-weight:700; font-size:16px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:22px; font-weight:400; color:var(--soft); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 20px 18px; color:var(--soft); font-size:15.5px; }
#homefaq .faq details{ background:var(--paper); }

/* ---------- get / early access ---------- */
.get{ padding:88px 0 96px; text-align:center; background:radial-gradient(60% 60% at 50% 0%, rgba(191,212,170,.45), transparent 70%); }
.get h2{ margin:0 auto; }
.get-sub{ font-size:17px; color:var(--soft); max-width:34em; margin:14px auto 0; }
.ea{ max-width:460px; margin:30px auto 0; text-align:left; background:var(--paper); border-radius:var(--rsd-r-card); padding:26px 24px; box-shadow:var(--rsd-shadow-soft), 0 0 0 1px var(--line); }
.fl, legend{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; padding:0; }
.ea-in{ width:100%; font:inherit; font-size:16px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line2); background:#FBF7F0; color:var(--ink); }
.ea-in:focus{ outline:none; border-color:var(--sage-deep); box-shadow:0 0 0 4px rgba(111,140,88,.18); }
.ea-row{ display:grid; gap:14px; margin:18px 0 20px; grid-template-columns:1fr; }
@media(min-width:420px){ .ea-row{ grid-template-columns:1.4fr 1fr; } }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
fieldset label{ display:inline-block; margin:0 6px 6px 0; cursor:pointer; }
fieldset input{ position:absolute; opacity:0; pointer-events:none; }
fieldset span{ display:inline-block; border:1.5px solid var(--line2); border-radius:99px; padding:7px 14px; font-size:14px; font-weight:700; transition:background .15s, color .15s; }
fieldset input:checked + span{ background:var(--bark); border-color:var(--bark); color:var(--cream); }
fieldset input:focus-visible + span{ outline:2px solid var(--sage-deep); outline-offset:2px; }
.hp{ position:absolute; left:-9999px; }
.ea-err{ margin-top:10px; font-size:14px; color:var(--rsd-rust-text); }
.fine{ margin-top:14px; font-size:12.5px; color:var(--soft); }
.ea-done h3{ font-size:24px; }
.ea-done p{ color:var(--soft); margin-top:8px; }
.stores{ max-width:460px; margin:18px auto 0; display:grid; gap:10px; }
.store{ display:flex; align-items:center; gap:14px; background:var(--bark); color:var(--cream); border-radius:18px; padding:14px 18px; text-align:left; }
.store .glyph{ width:36px; height:36px; border-radius:10px; background:rgba(232,221,204,.1); display:grid; place-items:center; flex:none; }
.store .glyph svg{ width:20px; height:20px; }
.store b{ display:block; font-size:15.5px; }
.store small{ font-size:12.5px; color:var(--rsd-cream70); }

/* ---------- parents ---------- */
.parent-points{ display:grid; gap:16px; }
@media(min-width:860px){ .parent-points{ grid-template-columns:repeat(3,1fr); } }
.parent-points > div{ background:var(--bg); border-radius:var(--rsd-r-card); padding:24px; box-shadow:0 0 0 1px var(--line); }
.parent-points p{ color:var(--soft); margin-top:8px; font-size:15px; }
.idea{ border-top:1px solid var(--line); padding:30px 0; max-width:760px; }
.idea > p{ color:var(--soft); margin-top:8px; }
.stat{ margin-top:16px; background:var(--paper); border-radius:18px; padding:18px 20px; box-shadow:0 0 0 1px var(--line); border-left:4px solid var(--sage-deep); }
.stat .n{ font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.35; }
.stat .src, .src{ font-size:12.5px; color:var(--ink2); margin-top:8px; }
details.how{ margin-top:12px; }
details.how summary{ cursor:pointer; font-weight:700; font-size:14px; color:var(--sage-text); }
details.how p{ margin-top:8px; color:var(--soft); font-size:15px; }
.pgrid{ display:grid; gap:14px; margin-top:20px; }
@media(min-width:760px){ .pgrid{ grid-template-columns:repeat(3,1fr); } }
.pgrid > div{ background:var(--paper); border-radius:20px; padding:20px; box-shadow:0 0 0 1px var(--line); }
.pgrid h4{ font-family:var(--serif); font-size:17px; }
.pgrid p{ color:var(--soft); margin-top:6px; font-size:14.5px; }

/* ---------- science games ---------- */
.game{ background:var(--paper); border-radius:var(--rsd-r-card); padding:26px 22px; box-shadow:0 0 0 1px var(--line); max-width:760px; }
.sec.alt .game{ background:var(--bg); }
.game.rs-card-dark{ background:var(--bark); box-shadow:var(--rsd-shadow-card); }
.after{ display:grid; gap:16px; margin-top:22px; max-width:760px; }
@media(min-width:760px){ .after{ grid-template-columns:1fr 1fr; } }
.after > div{ padding:4px 2px; }
.after p{ color:var(--soft); margin-top:6px; font-size:15px; }
/* decode */
.dec-top{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; color:var(--rsd-cream70); }
.pips{ display:flex; gap:6px; }
.pips i{ width:28px; height:5px; border-radius:99px; background:rgba(232,221,204,.16); }
.pips i.cur{ background:var(--cream); } .pips i.ok{ background:var(--rsd-rate-got); } .pips i.miss{ background:var(--rsd-rate-dk); }
.dec-word{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin:26px 0 8px; font-family:var(--serif); font-size:clamp(38px,8vw,58px); font-weight:600; letter-spacing:-.02em; }
.dec-word .part{ border:0; background:none; font:inherit; color:var(--rsd-cream70); padding:0 2px; }
.dec-word .part.root{ color:#E0B58A; font-weight:800; cursor:pointer; border-bottom:3px dotted rgba(224,181,138,.6); transition:color .2s; }
.dec-word .part.root:hover{ color:#F0C9A0; }
.dec-word .part.root.lit{ color:var(--sage); border-bottom:3px solid var(--sage); }
.dec-hint{ text-align:center; font-size:14px; color:var(--rsd-cream60); }
.clues{ display:grid; gap:8px; margin-top:18px; }
.clue{ background:rgba(0,0,0,.18); border-radius:14px; padding:12px 14px; font-size:14.5px; color:var(--rsd-cream70); }
.clue.on{ color:var(--cream); }
.clue b{ color:var(--sage); }
.clue em{ color:var(--cream); font-style:italic; font-family:var(--serif); }
.dec-q{ margin-top:20px; font-weight:700; color:var(--cream); }
.opts{ display:grid; gap:8px; margin-top:10px; }
.opt{ text-align:left; border:1px solid rgba(232,221,204,.16); background:rgba(232,221,204,.05); color:var(--cream); border-radius:14px; padding:13px 15px; font-size:15px; cursor:pointer; transition:background .15s; }
.opt:hover{ background:rgba(232,221,204,.1); }
.opt.right{ background:rgba(157,183,133,.25); border-color:var(--rsd-rate-got); }
.opt.wrong{ background:rgba(192,105,75,.22); border-color:var(--rsd-rate-dk); }
.opts.locked .opt{ cursor:default; }
.verdict{ margin-top:14px; font-size:15px; color:var(--rsd-cream85); }
.verdict b{ color:var(--sage); }
.game .row .chip.go{ background:var(--sage); color:var(--bark); border-color:var(--sage); }
.end{ text-align:center; padding:10px 0; color:var(--cream); }
.end .big{ font-family:var(--serif); font-size:64px; font-weight:800; color:var(--sage); line-height:1; }
.end h3{ font-size:24px; margin-top:8px; }
.end p{ color:var(--rsd-cream70); margin-top:8px; }
.end .row{ justify-content:center; }
/* alive */
.alive-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.alive-word{ font-family:var(--serif); font-size:32px; font-weight:600; line-height:1.1; }
.alive-word small{ display:block; font-family:var(--sans); font-size:14px; color:var(--soft); font-weight:500; margin-top:4px; }
.daybox{ text-align:right; font-size:12px; color:var(--soft); font-weight:700; }
.daybox b{ display:block; font-family:var(--serif); font-size:22px; color:var(--ink); }
.meter{ position:relative; height:26px; border-radius:99px; background:rgba(90,56,32,.1); margin-top:20px; overflow:hidden; }
.meter .fill{ height:100%; border-radius:99px; background:var(--rsd-rate-got); transition:background .3s; }
.meter .fill.mid{ background:var(--rsd-rate-learn); } .meter .fill.low{ background:var(--rsd-rate-dk); }
.meter .pass{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--ink); opacity:.5; }
.meter .pct{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:800; }
.meter-l{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--soft); margin-top:6px; }
.chart{ margin-top:14px; background:#FBF7F0; border-radius:14px; box-shadow:0 0 0 1px var(--line); }
.chart svg{ display:block; width:100%; height:150px; }
.chart .passline{ stroke:var(--ink); stroke-opacity:.35; stroke-dasharray:5 5; }
.chart .trace{ fill:none; stroke:var(--sage-deep); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.alive-ctl{ display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.revbtn{ border:0; background:var(--bark); color:var(--cream); border-radius:14px; padding:14px 22px; font-size:16px; font-weight:800; cursor:pointer; }
.revbtn:disabled{ opacity:.35; cursor:default; }
.left{ display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--soft); }
.left i{ width:12px; height:12px; border-radius:50%; background:var(--sage-deep); }
.left i.used{ background:rgba(90,56,32,.16); }
.game .toast{ margin-top:12px; font-size:14.5px; font-weight:600; min-height:22px; }
.game .toast.good{ color:var(--sage-text); } .game .toast.bad{ color:var(--rsd-rust-text); } .game .toast.meh{ color:var(--rsd-gold-text); }
.result{ margin-top:12px; border-radius:16px; padding:16px 18px; }
.result.win{ background:rgba(157,183,133,.25); } .result.lose{ background:rgba(192,105,75,.16); }
.result p{ color:var(--soft); margin-top:4px; font-size:15px; }
.game .fine{ margin-top:14px; }
/* recall */
.duo{ display:grid; gap:14px; }
@media(min-width:680px){ .duo{ grid-template-columns:1fr 1fr; } }
.rcard{ background:#FBF7F0; border-radius:20px; padding:20px; box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; transition:box-shadow .2s; }
.rcard.done{ box-shadow:0 0 0 2px var(--sage-deep); }
.lab2{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sage-text); }
.rcard .w{ font-family:var(--serif); font-size:30px; font-weight:600; margin-top:10px; }
.rcard .d{ color:var(--soft); margin-top:4px; }
.rcard .note{ font-size:14px; font-weight:700; color:var(--sage-text); min-height:20px; margin-top:10px; }
.rcard .foot{ margin-top:auto; padding-top:12px; }
.rcard .foot.hint{ font-size:12.5px; color:var(--soft); }
.mini-opts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.mini-opts button{ border:1.5px solid var(--line2); background:var(--paper); border-radius:99px; padding:8px 14px; font-weight:700; font-family:var(--serif); font-size:16px; cursor:pointer; }
.mini-opts button.right{ background:var(--sage); border-color:var(--sage-deep); }
.mini-opts button.wrong{ opacity:.4; text-decoration:line-through; }
.ask{ margin-top:18px; text-align:center; }
.q2{ font-family:var(--serif); font-size:20px; font-weight:600; }
.reveal{ margin-top:18px; background:#FBF7F0; border-radius:20px; padding:20px; box-shadow:0 0 0 1px var(--line); }
.reveal .hd{ font-family:var(--serif); font-size:20px; font-weight:600; }
.reveal .sub{ color:var(--soft); font-size:14.5px; margin-top:6px; }
.bars{ display:grid; gap:12px; margin-top:14px; }
.bar-t{ display:flex; justify-content:space-between; font-size:14px; font-weight:700; }
.track{ height:14px; border-radius:99px; background:rgba(90,56,32,.1); margin-top:6px; overflow:hidden; }
.track i{ display:block; height:100%; width:0; border-radius:99px; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.track.re i{ background:var(--rsd-rate-new); } .track.rc i{ background:var(--sage-deep); }
.moves{ display:grid; gap:16px; }
@media(min-width:860px){ .moves{ grid-template-columns:repeat(3,1fr); } }
.move{ background:var(--bg); border-radius:var(--rsd-r-card); padding:24px; box-shadow:0 0 0 1px var(--line); }
.move p{ color:var(--soft); margin-top:8px; font-size:15px; }
.move .rs{ margin-top:14px; font-size:13.5px; font-weight:700; color:var(--sage-text); }

/* ---------- legal ---------- */
.legal{ padding-top:56px; padding-bottom:80px; max-width:760px; }
.legal h1{ font-size:clamp(34px,5vw,48px); max-width:none; }
.legal .updated{ color:var(--soft); margin-top:8px; font-size:14px; }
.legal .short{ background:var(--paper); border-radius:20px; padding:20px 24px; margin:24px 0; box-shadow:0 0 0 1px var(--line); }
.legal h2{ font-size:24px; margin:30px 0 10px; max-width:none; }
.legal .short h2{ margin-top:0; font-size:20px; }
.legal h3{ font-size:17px; margin:18px 0 6px; }
.legal p, .legal li{ color:var(--soft); font-size:15.5px; margin-top:8px; }
.legal ul{ padding-left:20px; }

/* ---------- footer + mobile CTA ---------- */
footer{ background:var(--bark); color:var(--rsd-cream70); padding:40px 0 110px; position:relative; isolation:isolate; }
footer::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.08; mix-blend-mode:overlay; background:var(--rsd-noise); pointer-events:none; }
footer .in{ display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; }
footer .logo img{ height:40px; }
footer .c{ font-size:13.5px; }
footer .links{ display:flex; flex-wrap:wrap; gap:14px 18px; font-size:14px; }
footer .links a{ text-decoration:none; color:var(--cream); }
footer .links a:hover{ color:var(--sage); }
footer .tm{ flex-basis:100%; font-size:12px; color:var(--rsd-cream60); }
@media(min-width:760px){ footer{ padding-bottom:44px; } }
.mcta{ position:fixed; left:12px; right:12px; bottom:12px; z-index:50; display:flex; align-items:center; gap:10px; background:rgba(58,42,31,.96); color:var(--cream); border-radius:20px; padding:10px 10px 10px 12px; box-shadow:0 18px 40px -12px rgba(0,0,0,.5); transform:translateY(140%); transition:transform .3s cubic-bezier(.3,1,.4,1); backdrop-filter:blur(10px); }
.mcta img{ width:32px; height:32px; filter:invert(1) sepia(.3) brightness(1.4); }
.mcta .t{ font-size:12.5px; line-height:1.25; color:var(--rsd-cream70); }
.mcta .t b{ display:block; color:var(--cream); font-size:14px; }
.mcta .btn{ margin-left:auto; background:var(--sage); color:var(--bark); }
.mcta.on{ transform:none; }
@media(min-width:760px){ .mcta{ display:none; } }

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* ---------- hero pickers ---------- */
.pickers{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:16px; }
.seg.seg-lg{ background:var(--paper); box-shadow:0 0 0 1px var(--line); padding:4px; }
.seg.seg-lg button{ padding:8px 16px; font-size:14px; }
.seg.seg-lg button[aria-pressed="false"]:hover{ color:var(--ink); }

/* ---------- iPhone + Safari frame (the hero's iPhone view) ---------- */
.iph{ width:min(330px,100%); margin:0 auto; aspect-ratio:9/18.6; border-radius:50px; background:#1d1510; padding:11px; box-shadow:0 50px 90px -40px rgba(40,25,15,.75), inset 0 0 0 2px #3a2c22; }
.iph-scr{ position:relative; height:100%; border-radius:40px; overflow:hidden; background:#FBF7F0; display:flex; flex-direction:column; isolation:isolate; }
.iph-status{ display:flex; align-items:center; justify-content:space-between; padding:13px 26px 6px; font-size:14px; color:#1a120c; flex:none; }
.iph-status .iph-isl{ width:88px; height:25px; border-radius:99px; background:#1d1510; }
.iph-status i{ width:24px; height:11px; border-radius:3px; border:1.5px solid #1a120c; opacity:.7; }
.iph-page{ flex:1; overflow-y:auto; padding:10px 18px 12px !important; overscroll-behavior:contain; }
.iph-page .art-h{ font-size:21px; }
.iph-page .paras p{ font-size:15.5px; line-height:1.66; }
.iph-bar{ flex:none; display:flex; align-items:center; gap:8px; margin:0 10px 22px; padding:7px 7px 7px 12px; border-radius:18px; background:rgba(245,238,228,.92); box-shadow:0 6px 18px rgba(0,0,0,.12), 0 0 0 1px var(--line); backdrop-filter:blur(10px); }
.iph-aa{ font-size:14px; font-weight:600; color:#1a120c; }
.iph-url{ flex:1; text-align:center; font-size:13.5px; color:#1a120c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iph-hint{ position:absolute; left:50%; bottom:84px; transform:translate(-50%,8px); background:var(--bark); color:var(--cream); font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:99px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; white-space:nowrap; }
.iph-hint.on{ opacity:1; transform:translate(-50%,0); }
.iph [data-site-hw]{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; }
.iph .iph-pressing::before{ filter:brightness(.85) saturate(1.4); transition:filter .4s ease; }
/* platforms/safari/rs-mobile.css's sheet, held inside the phone's screen
   rather than the viewport (the numbers are that file's). */
.iph-scr .rs-popup.rs-mobile-sheet{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; max-width:100% !important; max-height:82% !important; overflow-y:auto !important; border-radius:22px 22px 0 0 !important; padding:10px 16px 22px !important; box-shadow:0 -10px 40px rgba(0,0,0,.45) !important; transform:translateY(0); transition:transform .2s ease-out !important; animation:none !important; z-index:5 !important; }
.iph-scr .rs-popup.rs-mobile-sheet.rs-sheet-enter{ transform:translateY(100%); }
.iph-scr .rs-mobile-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.38); z-index:4; opacity:1; transition:opacity .2s ease-out; }
.iph-scr .rs-mobile-backdrop.rs-sheet-enter{ opacity:0; }
.iph-scr .rs-sheet-grabber{ width:38px; height:4px; border-radius:2px; background:rgba(232,221,204,.35); margin:2px auto 12px; }
.iph-scr .rs-mobile-sheet .site-pop-x{ display:none; }
.iph-scr .rs-mobile-sheet .rs-pop-head{ padding-right:0 !important; }
.iph-scr .rs-mobile-sheet .rs-pop-word{ font-size:36px !important; }
.iph-scr .rs-mobile-sheet .rs-rate{ min-height:50px !important; border-radius:14px !important; }
.iph-scr .rs-mobile-sheet .rs-rootchip-name{ font-size:20px !important; }

/* ---------- logo tiles ---------- */
footer .logo.ftile{ background:var(--rsd-bg); border-radius:14px; padding:6px 8px; }
footer .logo.ftile img{ height:34px; width:auto; }
.mcta .mtile{ flex:none; width:40px; height:40px; border-radius:12px; background:var(--rsd-bg); display:grid; place-items:center; }
.mcta .mtile img{ width:30px; height:auto; filter:none; }
.nav .logo img{ height:46px; }

/* the status + highlight control sit under either frame, not attached to it */
.artdemo .art-foot{ background:transparent; border-top:0; padding:14px 4px 0; justify-content:center; gap:10px 16px; }
.artdemo .art-foot .art-status{ text-align:center; }
.artdemo .art-foot .seg{ background:var(--paper); box-shadow:0 0 0 1px var(--line); }
.rsbtn img{ width:26px !important; height:26px !important; padding:1px !important; }
.rsbtn{ padding:4px 6px 4px 5px; }
.site-card-open .mcta{ transform:translateY(140%); }

/* Safari flattens a 3D flip unless each face carries its own transform: the
   back face showed through mirrored on the front. */
.fc-in{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; }
.fc-face{ -webkit-transform:rotateY(0deg) translateZ(1px); transform:rotateY(0deg) translateZ(1px); }
.fc-back{ -webkit-transform:rotateY(180deg) translateZ(1px); transform:rotateY(180deg) translateZ(1px); }
.fc-face{ isolation:auto; }

/* screenshots on a phone: one swipe per shot, top-aligned */
@media(max-width:999px){
  .shots{ grid-auto-columns:82%; align-items:start; }
  .shot.wide{ grid-column:auto; }
}

/* Don't rely on backface culling at all: each face hides itself at the
   midpoint of the turn (visibility flips after half the 0.5s transition). */
.fc-face{ transition:visibility 0s linear .22s; }
.fc:not(.flipped) .fc-back{ visibility:hidden; }
.fc.flipped .fc-face:not(.fc-back){ visibility:hidden; }

/* ---------- hero pickers, v2: two labelled choices with icons ---------- */
.pickers{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 auto 18px; max-width:560px; }
.pick{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.pick-l{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--soft); padding-left:4px; }
.pick-seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--paper); border-radius:16px; padding:4px; box-shadow:0 0 0 1px var(--line), 0 8px 20px -14px rgba(58,42,31,.5); }
.pick-seg button{ display:flex; align-items:center; gap:8px; min-width:0; border:0; background:transparent; border-radius:12px; padding:8px 10px; cursor:pointer; color:var(--soft); text-align:left; transition:background .15s, color .15s, transform .1s; }
.pick-seg button:hover{ background:rgba(90,56,32,.06); color:var(--ink); }
.pick-seg button:active{ transform:scale(.98); }
.pick-seg button svg{ width:22px; height:22px; flex:none; }
.pick-seg button > span{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.pick-seg b{ font-size:14px; font-weight:700; }
.pick-seg small{ font-size:11.5px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-seg .pick-badge{ flex:none; width:30px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:9.5px; font-weight:800; letter-spacing:.04em; background:rgba(90,56,32,.1); color:var(--ink); }
.pick-seg [data-v] > span:not(.pick-badge) b{ display:block; }
.pick-seg[data-pick="track"] button > span:not(.pick-badge) b{ display:none; }
.pick-seg[data-pick="track"] button > span:not(.pick-badge) small{ font-size:12.5px; font-weight:600; opacity:1; }
.pick-seg button[aria-pressed="true"]{ background:var(--bark); color:var(--cream); box-shadow:0 6px 14px -8px rgba(58,42,31,.8); }
.pick-seg button[aria-pressed="true"] svg{ color:var(--sage); }
.pick-seg button[aria-pressed="true"] .pick-badge{ background:var(--sage); color:var(--bark); }
@media(max-width:420px){ .pickers{ grid-template-columns:1fr; } }

/* ---------- nav: log in ---------- */
.nav .links a.btn.ghost.login{ color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1.5px var(--line2); }
.nav .links a.btn.ghost.login:hover{ background:rgba(90,56,32,.06); }
@media(min-width:820px) and (max-width:1080px){ .nav .links{ gap:16px; } .nav .links a{ font-size:13.5px; } .nav .links a[data-nav="home"]{ display:none; } }
/* pickers size to their content (the track labels were truncating) */
.pickers{ grid-template-columns:repeat(2, auto); justify-content:center; max-width:none; }
.pick-seg small{ overflow:visible; text-overflow:clip; }
.pick-seg button{ padding:8px 12px; }
@media(max-width:520px){ .pickers{ grid-template-columns:1fr; justify-content:stretch; } }
.pick-seg{ grid-template-columns:auto auto; }
.pick-seg button{ white-space:nowrap; }
@media(max-width:520px){ .pick-seg{ grid-template-columns:1fr 1fr; } }

/* ---------- track picker: just the test ---------- */
.pick-seg .pick-test{ font-weight:800; font-size:15px; letter-spacing:.02em; padding:5px 12px; }
.pick-seg[data-pick="track"] button{ justify-content:center; min-width:74px; }

/* ---------- dashboard demos (the product's My progress / Class & family, simplified) ---------- */
.dash{ background:var(--bg); border-radius:var(--rsd-r-card); padding:22px; box-shadow:0 0 0 1px var(--line), var(--rsd-shadow-soft); }
.sec:not(.alt) .dash{ background:var(--paper); }
.dash-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 16px; margin-bottom:16px; }
.dash-k{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sage-text); }
.dash-t{ font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:-.01em; line-height:1.1; margin-top:2px; }
.dseg{ display:inline-flex; flex-wrap:wrap; gap:3px; background:rgba(90,56,32,.07); border-radius:12px; padding:3px; }
.dseg button{ border:0; background:transparent; border-radius:9px; padding:7px 11px; font-size:13px; font-weight:700; color:var(--soft); cursor:pointer; white-space:nowrap; }
.dseg button:hover{ color:var(--ink); }
.dseg button[aria-pressed="true"]{ background:var(--bark); color:var(--cream); }
.dgrid{ display:grid; gap:12px; margin-bottom:12px; }
.dgrid-4{ grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .dgrid-4{ grid-template-columns:repeat(4,1fr); } .dgrid-2{ grid-template-columns:1fr 1fr; } }
.dk{ background:#FBF7F0; border-radius:16px; padding:14px 16px; box-shadow:0 0 0 1px var(--line); }
.dk b{ display:block; font-family:var(--serif); font-weight:800; font-size:30px; line-height:1.05; letter-spacing:-.01em; }
.dk span{ display:block; font-size:12.5px; color:var(--soft); margin-top:4px; line-height:1.3; }
.dcard{ background:#FBF7F0; border-radius:16px; padding:16px 16px 14px; box-shadow:0 0 0 1px var(--line); min-width:0; margin-bottom:12px; }
.dgrid .dcard{ margin-bottom:0; }
.dcard h4{ font-size:13px; font-weight:700; color:var(--ink); margin:0 0 10px; }
.dnote{ font-size:12.5px; color:var(--soft); margin-top:10px; line-height:1.45; }
.dempty, .dnone{ font-size:13.5px; color:var(--soft); }
.dchart{ width:100%; height:84px; display:block; }
.dchart .b{ fill:var(--sage-deep); } .dchart .b0{ fill:rgba(90,56,32,.08); }
.dtrail{ width:100%; height:auto; display:block; overflow:visible; }
.dtrail .tl{ fill:none; stroke:var(--ink); stroke-opacity:.35; stroke-width:2; }
.dtrail .tp{ fill:var(--sage-deep); stroke:#FBF7F0; stroke-width:2; }
.dtrail .tp.t-psat89{ fill:var(--rsd-rate-new); } .dtrail .tp.t-psat{ fill:var(--rsd-rate-learn); }
.dtrail .tv{ font-size:11.5px; font-weight:700; fill:var(--ink); text-anchor:middle; font-family:var(--sans); }
.dtrail .tx{ font-size:10px; fill:var(--soft); text-anchor:middle; font-family:var(--sans); }
.split{ display:flex; height:14px; border-radius:99px; overflow:hidden; background:rgba(90,56,32,.08); }
.split i{ display:block; height:100%; }
.split .sg{ background:var(--rsd-rate-got); } .split .sy{ background:var(--rsd-rate-learn); } .split .sr{ background:var(--rsd-rate-dk); }
.splitl{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:12.5px; color:var(--soft); }
.splitl span{ display:inline-flex; align-items:center; gap:6px; }
.dflags, .dchips{ display:flex; flex-wrap:wrap; gap:6px; }
.dflags span, .dchips span, .dflag{ font-size:12.5px; font-weight:600; background:rgba(162,85,58,.1); color:var(--rsd-rust-text); border-radius:99px; padding:4px 10px; white-space:nowrap; }
.dchips span{ background:rgba(90,56,32,.07); color:var(--ink); }
.dchips span.more{ background:transparent; color:var(--soft); }
.dacts{ display:grid; gap:10px; }
.dacts > div{ border-top:1px solid var(--line); padding-top:9px; }
.dacts > div:first-child{ border-top:0; padding-top:0; }
.dacts b{ font-size:14px; }
.dacts small{ display:block; font-size:12px; color:var(--soft); margin:1px 0 6px; }
.dscatter{ width:100%; height:auto; display:block; }
.dscatter .s0{ stroke:var(--ink); stroke-opacity:.2; stroke-dasharray:3 4; }
.dscatter .sd{ fill:var(--sage-deep); fill-opacity:.8; stroke:#FBF7F0; stroke-width:1.5; }
.dscatter .sf{ stroke:var(--rsd-rust); stroke-width:2; stroke-dasharray:6 5; }
.dscatter .sx{ font-size:10px; fill:var(--soft); font-family:var(--sans); }
.dladder{ display:grid; gap:7px; }
.dladder .lr{ display:grid; grid-template-columns:92px 1fr 40px; align-items:center; gap:8px; font-size:12.5px; }
.dladder .ln{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dladder .lt{ position:relative; height:10px; background:rgba(90,56,32,.07); border-radius:99px; }
.dladder .lt i{ position:absolute; top:3px; height:4px; border-radius:99px; }
.dladder .lt i.up{ background:var(--sage-deep); } .dladder .lt i.dn{ background:var(--rsd-rate-dk); }
.dladder .lt b{ position:absolute; top:0; width:10px; height:10px; margin-left:-5px; border-radius:50%; }
.dladder .lt b.pa{ background:var(--rsd-rate-learn); } .dladder .lt b.pc{ background:var(--sage-deep); }
.dladder .lg{ font-weight:700; text-align:right; }
.dbands{ display:grid; gap:7px; }
.dbands > div{ display:grid; grid-template-columns:70px 1fr 28px; align-items:center; gap:8px; font-size:12.5px; }
.dbands i{ display:block; height:12px; border-radius:4px; background:var(--sage-deep); min-width:2px; }
.dbands b{ text-align:right; }
.dtable-wrap{ overflow-x:auto; }
.dtable{ width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
.dtable th{ text-align:left; font-size:11.5px; font-weight:700; color:var(--soft); padding:6px 8px; border-bottom:1px solid var(--line2); }
.dtable td{ padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.dash-demo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--soft); margin-top:4px; }
.dash-demo span{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:var(--bark); color:var(--sage); border-radius:99px; padding:3px 9px; }

/* ---------- spacing animation (the memory game, playing itself) ---------- */
.textlink.light{ color:var(--cream); background-image:linear-gradient(var(--sage-deep),var(--sage-deep)); }
.spacing{ color:inherit; }
.sp-day{ font-size:13px; color:var(--soft); margin-bottom:8px; }
.sp-day b{ font-family:var(--serif); font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums; }
.sp-lanes{ display:grid; gap:12px; }
@media(min-width:760px){ .spacing:not(.spacing-sm) .sp-lanes{ grid-template-columns:1fr 1fr; } }
.sp-lane{ background:#FBF7F0; border-radius:16px; padding:12px 14px; box-shadow:0 0 0 1px var(--line); }
.sp-h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sp-h b{ font-family:var(--serif); font-size:18px; }
.sp-h span{ font-size:12px; color:var(--soft); }
.sp-lane svg{ width:100%; height:130px; display:block; margin-top:6px; }
.sp-pass{ stroke:var(--ink); stroke-opacity:.3; stroke-dasharray:4 5; }
.sp-pl, .sp-tl{ font-size:9.5px; fill:var(--soft); font-family:var(--sans); }
.sp-test{ stroke:var(--ink); stroke-opacity:.18; }
.sp-line{ fill:none; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.sp-cram .sp-line{ stroke:var(--rsd-rate-dk); } .sp-space .sp-line{ stroke:var(--sage-deep); }
.sp-m{ fill:var(--bark); stroke:#FBF7F0; stroke-width:2; }
.sp-end{ font-size:13px; color:var(--soft); min-height:20px; margin-top:4px; opacity:0; transition:opacity .3s; }
.sp-end.on{ opacity:1; } .sp-end b{ font-family:var(--serif); font-size:18px; }
.sp-end.lost b{ color:var(--rsd-rust-text); } .sp-end.ok b{ color:var(--sage-text); }
/* on the home teaser's dark card */
.teaser .sp-day{ color:var(--rsd-cream70); } .teaser .sp-day b{ color:var(--cream); }
.teaser .sp-lane{ background:rgba(232,221,204,.06); box-shadow:0 0 0 1px rgba(232,221,204,.12); }
.teaser .sp-h b{ color:var(--cream); } .teaser .sp-h span, .teaser .sp-end{ color:var(--rsd-cream70); }
.teaser .sp-pass, .teaser .sp-test{ stroke:var(--cream); }
.teaser .sp-pl, .teaser .sp-tl{ fill:var(--rsd-cream60); }
.teaser .sp-m{ fill:var(--cream); stroke:var(--bark); }
.teaser .sp-space .sp-line{ stroke:var(--sage); }
.teaser .sp-end.ok b{ color:var(--sage); } .teaser .sp-end.lost b{ color:#E0896B; }
.spacing-sm .sp-lane svg{ height:92px; }

/* ---------- goal slider (caseload) ---------- */
.dgoal{ display:flex; flex-direction:column; gap:6px; min-width:220px; flex:1 1 220px; max-width:320px; }
.dgoal > span{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--soft); }
.dgoal b{ color:var(--ink); font-family:var(--serif); font-size:15px; }
.dgoal input{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px; outline:none; cursor:pointer;
  background:linear-gradient(to right, var(--sage-deep) 0 var(--p,0%), rgba(90,56,32,.12) var(--p,0%) 100%); }
.dgoal input::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--bark); border:3px solid var(--rsd-bg); box-shadow:0 2px 8px rgba(58,42,31,.35); }
.dgoal input::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--bark); border:3px solid var(--rsd-bg); box-shadow:0 2px 8px rgba(58,42,31,.35); }
.dgoal input:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--sage-deep); outline-offset:2px; }

/* ---------- seed + dice (developer mode's control, for pitches) ---------- */
.dseed{ display:inline-flex; align-items:flex-end; gap:6px; }
.dseed label{ display:flex; flex-direction:column; gap:4px; }
.dseed label > span{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.dseed input{ width:96px; font:inherit; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; padding:7px 10px; border-radius:10px; border:1.5px solid var(--line2); background:#FBF7F0; color:var(--ink); }
.dseed input:focus{ outline:none; border-color:var(--sage-deep); box-shadow:0 0 0 3px rgba(111,140,88,.18); }
.dseed .dice{ width:38px; height:36px; border-radius:10px; border:1.5px solid var(--line2); background:#FBF7F0; font-size:18px; line-height:1; cursor:pointer; transition:transform .1s, background .15s; }
.dseed .dice:hover{ background:var(--rsd-paper-hover); }
.dseed .dice.roll{ animation:roll .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes roll{ 0%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(200deg) scale(1.12); } 100%{ transform:rotate(360deg) scale(1); } }
.dseed .dlink{ height:36px; border-radius:10px; border:0; background:transparent; font-size:12.5px; font-weight:700; color:var(--sage-text); cursor:pointer; padding:0 6px; white-space:nowrap; }
.dseed .dlink:hover{ text-decoration:underline; }

/* ---------- dashboards v2: tooltips, clickable students, student page ---------- */
.dtip{ position:absolute; z-index:80; max-width:260px; background:var(--bark); color:var(--cream); font-size:12.5px; line-height:1.4; padding:8px 11px; border-radius:10px; box-shadow:0 10px 26px rgba(40,25,15,.35); pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; }
.dtip.on{ opacity:1; transform:none; }
.dtip b{ color:var(--sage); } .dtip i{ color:var(--rsd-cream70); font-style:italic; }
.dchart .hit, .dtrail .hit, .dscatter .hit{ fill:transparent; }
.dchart .bcol{ cursor:default; } .dchart .bcol:hover .b{ fill:var(--bark); }
.dtrail .tpg{ cursor:default; } .dtrail .tpg:hover .tp{ r:7; }
.dscatter .sdg{ cursor:pointer; outline:none; }
.dscatter .sdg:hover .sd, .dscatter .sdg:focus .sd{ fill:var(--bark); r:6.5; }
.split i{ cursor:default; }
.dchips button{ font:inherit; font-size:12.5px; font-weight:600; background:rgba(90,56,32,.07); color:var(--ink); border:0; border-radius:99px; padding:4px 10px; cursor:pointer; white-space:nowrap; transition:background .15s; }
.dchips button:hover{ background:var(--bark); color:var(--cream); }
.dladder .lr{ display:grid; grid-template-columns:92px 1fr 40px; align-items:center; gap:8px; font:inherit; font-size:12.5px; background:none; border:0; padding:3px 4px; margin:0 -4px; border-radius:8px; cursor:pointer; text-align:left; color:var(--ink); width:calc(100% + 8px); }
.dladder .lr:hover{ background:rgba(90,56,32,.06); }
.dbands button{ display:grid; grid-template-columns:70px 1fr 28px; align-items:center; gap:8px; font:inherit; font-size:12.5px; background:none; border:0; padding:3px 4px; margin:0 -4px; border-radius:8px; cursor:pointer; text-align:left; color:var(--ink); width:calc(100% + 8px); }
.dbands button:hover, .dbands button.on{ background:rgba(90,56,32,.07); }
.dbands button.on i{ background:var(--bark); }
.dbands button i{ display:block; height:12px; border-radius:4px; background:var(--sage-deep); min-width:2px; }
.dbands button b{ text-align:right; }
.dtable th button{ font:inherit; font-size:11.5px; font-weight:700; color:var(--soft); background:none; border:0; padding:0; cursor:pointer; white-space:nowrap; }
.dtable th button:hover, .dtable th button.on{ color:var(--ink); }
.dtable tbody tr[data-sid]{ cursor:pointer; transition:background .1s; }
.dtable tbody tr[data-sid]:hover, .dtable tbody tr[data-sid]:focus{ background:rgba(111,140,88,.1); outline:none; }
.dtable.dtl{ min-width:420px; margin-top:6px; }
.dclear, .dall{ font:inherit; font-size:12px; font-weight:700; color:var(--sage-text); background:none; border:0; cursor:pointer; padding:0; text-decoration:underline; }
.dash-ctl{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 24px; margin:-4px 0 16px; }
.dlevel .dticks{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--soft); font-weight:600; margin-top:-2px; }
.dlevel .dticks i{ font-style:normal; }
.dlevel{ max-width:360px; }
.dstu-top{ display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.dback{ font:inherit; font-size:13px; font-weight:700; background:var(--bark); color:var(--cream); border:0; border-radius:10px; padding:8px 13px; cursor:pointer; }
.dback:hover{ background:#46332A; }
.dstu-name{ font-family:var(--serif); font-weight:600; font-size:24px; }
.dstu > .dflags{ margin-bottom:12px; }
.dwords{ display:flex; flex-wrap:wrap; gap:6px; }
.dw{ font-family:Georgia,serif; font-size:14.5px; padding:4px 10px; border-radius:99px; cursor:default; outline:none; }
.dw.red{ background:rgba(192,105,75,.14); color:var(--rsd-rust-text); }
.dw.yellow{ background:rgba(212,169,79,.18); color:var(--rsd-gold-text); }
.dw:focus{ box-shadow:0 0 0 2px var(--sage-deep); }

/* ---------- launch switch (js/config.js) ---------- */
html.launch-live [data-when="prelaunch"], html:not(.launch-live) [data-when="live"]{ display:none !important; }
html:not(.launch-live) .login{ display:none !important; }
a.store{ text-decoration:none; transition:transform .12s, background .15s; }
a.store:hover{ transform:translateY(-1px); background:#46332A; }