/* =========================================================
   Notefile marketing site — shared stylesheet (Aurora direction)
   Vanilla CSS, no build step, no framework. Loaded by every page
   in /website. Product-shot iframes point at assets/panel-demo-*.html,
   which render with the extension's own (vendored) CSS — see
   assets/panel.css for why that's a copy rather than a link out.
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top reserves room for the sticky header (67px tall) so a
   nav anchor (#features, #how, …) or Back-to-top doesn't land a section's
   heading half-hidden underneath it — the browser stops short by this
   amount instead of scrolling the target flush to the very top. Applies
   to hash-link navigation and scrollIntoView() alike; smooth-scroll is
   opt-in per click (site.js's Back-to-top) rather than global, so a plain
   #anchor jump still lands instantly. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0}

:root{
  --bg:#0A0C18;
  --bg-2:#0E1122;
  --panel:#141728;
  --panel-2:#1B1F35;
  --line:#242847;
  --line-soft:#1C2039;
  --ink:#EEF0FA;
  --ink-dim:#C3C7E4;
  --muted:#8E94BC;
  --accent:#8B8BFA;
  --accent-2:#5B5BD6;
  --accent-ink:#0B0D1A;
  --gold:#F0B429;
  --teal:#3BC7B6;
  --coral:#FF6B57;
  --sky:#62A0FF;

  /* RGB triplets (no alpha) so component rules can write
     rgba(var(--wash-rgb),X) once and have it flip cleanly per theme,
     instead of every card/border/divider needing its own light override.
     --wash-rgb is "page chrome" washes (card fills, hairlines, dividers);
     --footer-wash is the one full rgba() that didn't fit that pattern. */
  --wash-rgb:255,255,255;
  --footer-wash:rgba(0,0,0,.25);
  /* Teal-glow-into-base gradient behind .privacy (large) and .callout
     (tighter, corner-anchored) — --spot-b/--spot-c are each card's "base"
     stop, --spot-a the shared teal highlight. Themed, not pinned: these
     cards follow the page like everything else. */
  --spot-a:rgba(59,199,182,.14);
  --spot-b:rgba(20,23,40,.5);
  --spot-c:rgba(20,23,40,.45);

  --font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --max:1140px;
  --r:16px;
  color-scheme:dark;
}

/* ---------- light theme ----------
   Token values only — not one component rule below this block is
   theme-specific. Reuses the extension's own Aurora/light palette
   (sidepanel.css :root[data-design='aurora'][data-theme='light']) so the
   site and the product agree on what "Aurora, light" looks like, rather
   than a second palette invented just for marketing.

   The one surface deliberately NOT reflowed here: the browser-chrome
   product mockup (.shot-frame/.chrome-bar/.fakepage/.mini-device) stays
   dark-glass in both themes — a mockup pretending to be a browser window
   reads oddly if it changes color with the page around it. Everything
   else, including the .privacy/.callout accent cards, is fully
   token-driven and follows the toggle. */
:root[data-theme='light']{
  --bg:#F8F5EE;
  --bg-2:#F2EEE3;
  --panel:#FCFAF3;
  --panel-2:#F2EFE6;
  --line:#E7E2D5;
  --line-soft:#EFEBE0;
  --ink:#161930;
  --ink-dim:#39406A;
  --muted:#5D6389;
  --accent:#5B5BD6;
  --accent-2:#4340A8;
  --accent-ink:#FFFFFF;
  --gold:#96620A;
  /* Darker than the extension's own light-mode ic-restore/ic-export teal
     (#0F8478) — that value only clears 4.2:1 against this page's cream
     background, just under the 4.5:1 text-contrast floor, measured against
     the .tick checkmarks in the hero trust bar. */
  --teal:#0C7267;
  --coral:#D24A34;
  --sky:#2563C9;

  --wash-rgb:22,25,48;
  --footer-wash:rgba(22,25,48,.035);
  --spot-a:rgba(15,132,103,.12);
  --spot-b:rgba(242,239,230,.92);
  --spot-c:rgba(242,239,230,.88);
  color-scheme:light;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* color is explicit, not left to inherit from body: `color` inherits the
   *computed* value, resolved once wherever it was last declared — so a
   heading with no color of its own doesn't re-evaluate var(--ink) in a
   locally-scoped subtree (e.g. inside .privacy/.callout, which pin --ink
   back to the dark set). Declaring it here means every heading re-reads
   whatever --ink resolves to right where it sits. */
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-0.03em;font-weight:680;color:var(--ink)}
p{margin:0}
img,svg{display:block;max-width:100%}
code{font-family:var(--mono)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- ambient light ---------- */
.aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aurora::before{
  content:'';position:absolute;left:50%;top:-460px;transform:translateX(-50%);
  width:1200px;height:900px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,139,250,.30),rgba(91,91,214,.12) 45%,transparent 72%);
  filter:blur(30px);
}
.aurora::after{
  content:'';position:absolute;right:-260px;top:900px;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(59,199,182,.16),transparent 70%);filter:blur(40px);
}
.grid-fade{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(var(--wash-rgb),.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(var(--wash-rgb),.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000 20%,transparent 75%);
          mask-image:radial-gradient(120% 70% at 50% 0%,#000 20%,transparent 75%);
}
main,header,footer{position:relative;z-index:1}

/* ---------- nav ---------- */
header.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 68%,transparent));
  border-bottom:1px solid rgba(var(--wash-rgb),.06)}
nav{display:flex;align-items:center;gap:32px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em}
.navlinks{display:flex;gap:28px;margin-left:auto;font-size:14.5px;color:var(--ink-dim)}
.navlinks a{transition:color .18s}
.navlinks a:hover{color:var(--ink)}

/* Sun/moon toggle, same idea as the extension's own Settings toggle.
   Two icons stacked; CSS shows whichever matches the current theme so
   there's no icon-swap flash while site.js decides what to do. */
.theme-toggle-btn{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:none;
  border:1px solid rgba(var(--wash-rgb),.14);background:rgba(var(--wash-rgb),.045);
  color:var(--ink-dim);cursor:pointer;transition:background .18s,color .18s,transform .15s;
}
.theme-toggle-btn:hover{background:rgba(var(--wash-rgb),.09);color:var(--ink);transform:translateY(-1px)}
.theme-toggle-btn svg{width:17px;height:17px;display:block}
.theme-toggle-btn .ic-moon{display:block}
.theme-toggle-btn .ic-sun{display:none}
:root[data-theme='light'] .theme-toggle-btn .ic-moon{display:none}
:root[data-theme='light'] .theme-toggle-btn .ic-sun{display:block}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:12px;font-weight:600;
  font-size:15px;padding:12px 20px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .2s,background .2s;white-space:nowrap;font-family:inherit}
.btn-primary{
  background:linear-gradient(180deg,#9A9AFB,#6C6CE4);
  color:#0B0D1A;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 30px -10px rgba(122,122,240,.85);
}
.btn-primary:hover{transform:translateY(-1.5px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 38px -12px rgba(122,122,240,1)}
.btn-ghost{background:rgba(var(--wash-rgb),.045);border-color:rgba(var(--wash-rgb),.14);color:var(--ink)}
.btn-ghost:hover{background:rgba(var(--wash-rgb),.09);transform:translateY(-1.5px)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:10px}

/* ---------- hero ---------- */
.hero{padding:96px 0 0;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-dim);
  background:rgba(139,139,250,.10);border:1px solid rgba(139,139,250,.26);
  padding:6px 14px 6px 8px;border-radius:999px;margin-bottom:26px;letter-spacing:.01em}
.eyebrow b{color:var(--accent);font-weight:650}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(59,199,182,.18)}

h1{font-size:clamp(40px,6.4vw,74px);letter-spacing:-.045em;font-weight:700;max-width:15ch;margin:0 auto}
h1 .shine{background:linear-gradient(100deg,var(--ink) 10%,#A9A9FB 48%,var(--ink) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:26px auto 0;max-width:60ch;font-size:19px;color:var(--ink-dim);line-height:1.62}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.cta-note{margin-top:16px;font-size:13.5px;color:var(--muted)}

.trustbar{display:flex;gap:12px 34px;justify-content:center;flex-wrap:wrap;
  margin-top:44px;font-size:13.5px;color:var(--muted)}
.trustbar span{display:inline-flex;align-items:center;gap:8px}
.tick{color:var(--teal)}

/* ---------- product shot (real UI, embedded live) ---------- */
.shot{margin:64px auto 0;max-width:1020px;padding:0 24px;text-align:left}
.shot-frame{
  border-radius:20px;border:1px solid rgba(255,255,255,.10);overflow:hidden;
  background:linear-gradient(180deg,#151932,#0D0F1E);
  box-shadow:0 60px 130px -40px rgba(0,0,0,.9),0 0 0 1px rgba(139,139,250,.10),
             0 0 90px -30px rgba(139,139,250,.45);
}
.chrome-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;
  background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.07)}
.lights{display:flex;gap:7px}
.lights i{width:11px;height:11px;border-radius:50%;background:#3A3F63;display:block}
.lights i:nth-child(1){background:#FF5F57}.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
.urlpill{flex:1;max-width:400px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:5px 12px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.chrome-bar .pin{margin-left:auto;display:flex;gap:8px;align-items:center}
.chrome-bar .pin i{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.07);display:block}

.viewport{display:grid;grid-template-columns:1fr 380px;min-height:560px}
.fakepage{padding:34px 32px;background:#0B0D1B}
.fp-line{height:9px;border-radius:5px;background:rgba(255,255,255,.055);margin-bottom:13px}
.fp-h{height:19px;width:52%;background:rgba(255,255,255,.12);border-radius:6px;margin-bottom:22px}
.fp-img{height:120px;border-radius:12px;margin:24px 0;
  background:linear-gradient(135deg,rgba(139,139,250,.18),rgba(59,199,182,.10));
  border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.fp-sel{position:absolute;left:16%;top:20%;width:52%;height:56%;border:2px solid var(--accent);
  border-radius:6px;background:rgba(139,139,250,.14);box-shadow:0 0 0 9999px rgba(0,0,0,.34)}
.fp-sel b{position:absolute;left:0;bottom:-30px;font-size:11px;font-weight:600;color:var(--accent-ink);
  background:var(--accent);padding:3px 9px;border-radius:6px;white-space:nowrap}

/* The panel frame itself is an <iframe> onto assets/panel-demo-*.html,
   which renders with the extension's real (vendored) CSS — see
   assets/panel.css. This block only frames it; nothing inside is styled
   here. iframe is inert (see panel-demo-*.html) — decorative only. */
.panel-frame{border-left:1px solid var(--line);background:var(--bg);overflow:hidden}
.panel-frame iframe{width:100%;height:100%;border:0;display:block}

/* small inline device frame used in feature cards */
.mini-device{border-radius:14px;border:1px solid rgba(255,255,255,.10);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);margin-top:18px}
.mini-device iframe{width:100%;display:block;border:0}

/* ---------- section scaffolding ---------- */
section{padding:120px 0}
.sec-head{max-width:640px;margin:0 auto 60px;text-align:center}
.kicker{font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px}
.sec-head h2{font-size:clamp(30px,4.2vw,46px);letter-spacing:-.04em}
.sec-head p{margin-top:18px;color:var(--ink-dim);font-size:18px}

/* ---------- feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:linear-gradient(180deg,rgba(var(--wash-rgb),.06),rgba(var(--wash-rgb),.022));
  border:1px solid rgba(var(--wash-rgb),.11);border-radius:var(--r);padding:26px 24px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,background .22s;
}
.card:hover{transform:translateY(-3px);border-color:rgba(139,139,250,.34);
  background:linear-gradient(180deg,rgba(139,139,250,.09),rgba(var(--wash-rgb),.03))}
.card .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:rgba(139,139,250,.13);border:1px solid rgba(139,139,250,.22);margin-bottom:18px}
.card h3{font-size:17.5px;margin-bottom:9px;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:14.5px;line-height:1.58}
.card.wide{grid-column:span 2}

/* ---------- format rule strip ---------- */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.fmt{border:1px solid rgba(var(--wash-rgb),.12);border-radius:14px;padding:20px;background:rgba(var(--wash-rgb),.03)}
.fmt code{font-size:15px;font-weight:600;color:var(--gold)}
.fmt.docx code{color:var(--sky)}
.fmt.md code{color:var(--muted)}
.fmt p{margin-top:9px;font-size:14px;color:var(--muted)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{padding:28px 24px;border-radius:var(--r);border:1px solid rgba(var(--wash-rgb),.11);
  background:rgba(var(--wash-rgb),.03);position:relative}
.step::before{counter-increment:s;content:counter(s);
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent-ink);
  background:var(--accent);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-bottom:18px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14.5px}

/* ---------- privacy ---------- */
.privacy{position:relative;border-radius:24px;overflow:hidden;
  border:1px solid rgba(59,199,182,.22);
  /* Themed via --spot-a/--spot-b (defined per theme up at :root), not
     pinned dark: teal glow fading into whichever base tone matches the
     page, so this card looks intentional in both themes instead of the
     one surface that didn't get the memo about the toggle. */
  background:radial-gradient(90% 130% at 50% 0%,var(--spot-a),var(--spot-b) 60%);
  padding:66px 40px;text-align:center}
.privacy h2{font-size:clamp(26px,3.6vw,40px);max-width:20ch;margin:0 auto;letter-spacing:-.035em}
.privacy p{max-width:58ch;margin:20px auto 0;color:var(--ink-dim);font-size:17px}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:800px;margin:40px auto 0}
.pr{background:rgba(var(--wash-rgb),.06);border:1px solid rgba(var(--wash-rgb),.11);border-radius:13px;padding:18px;text-align:left}
.pr b{display:block;font-size:14.5px;margin-bottom:5px;color:var(--ink)}
.pr span{font-size:13px;color:var(--muted)}

/* ---------- pricing ----------
   Both cards get equal visual weight on purpose: .hi (trial) glows violet
   because it's where a new visitor should start, .premium (license) glows
   gold because it's the one that actually pays for the product. A flat
   card + a transparent btn-ghost next to a glowing card + solid button
   reads as "the lesser option, maybe don't click this" — exactly backwards
   for the button that makes money. */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:840px;margin:0 auto}
.plan{border:1px solid rgba(var(--wash-rgb),.13);border-radius:20px;padding:32px 30px;background:rgba(var(--wash-rgb),.035);position:relative}
.plan.hi{border-color:rgba(139,139,250,.45);background:linear-gradient(180deg,rgba(139,139,250,.11),rgba(var(--wash-rgb),.03));
  box-shadow:0 30px 70px -35px rgba(139,139,250,.6)}
.plan.hi::after{content:'Most people start here';position:absolute;top:-11px;left:30px;font-size:11px;font-weight:650;
  background:var(--accent);color:var(--accent-ink);padding:3px 11px;border-radius:999px}
.plan.premium{border-color:rgba(240,180,41,.4);background:linear-gradient(180deg,rgba(240,180,41,.10),rgba(var(--wash-rgb),.03));
  box-shadow:0 30px 70px -35px rgba(240,180,41,.5)}
/* Fixed gold, not var(--gold): that token is tuned for gold *text* on the
   page background (darker in light mode, so it stays readable there),
   which makes it too dark to also work as a badge fill — dark text on it
   in light mode measured 3.58:1, under the 4.5:1 floor. A dedicated fixed
   value (same in both themes, like the traffic-light dots in the browser
   mockup) keeps this badge at 9.97:1 everywhere, without touching the
   text token everything else on the page relies on. */
.plan.premium::after{content:'≈ $1.6/month, billed yearly';position:absolute;top:-11px;left:30px;font-size:11px;font-weight:650;
  background:#F0B429;color:#1A1200;padding:3px 11px;border-radius:999px}
.plan h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650}
.amount{font-size:46px;font-weight:700;letter-spacing:-.045em;margin:14px 0 4px}
.amount small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:24px 0 28px;display:flex;flex-direction:column;gap:11px}
.plan li{font-size:14.5px;color:var(--ink-dim);display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:'✓';color:var(--teal);font-weight:700;flex:none}
.plan .btn{width:100%;justify-content:center}

/* Solid gold button for "Buy a license" — same visual class (solid,
   confident, no transparency) as .btn-primary, distinct hue so it reads
   as "the paid tier" rather than a copy of the trial's violet CTA. */
.btn-gold{background:linear-gradient(180deg,#F7C550,#D89A1D);color:#1A1200;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 30px -10px rgba(240,180,41,.7)}
.btn-gold:hover{transform:translateY(-1.5px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 38px -12px rgba(240,180,41,.85)}

/* ---------- faq ---------- */
.faq{max-width:760px;margin:0 auto}
details{border-bottom:1px solid rgba(var(--wash-rgb),.12);padding:20px 4px}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;align-items:center;gap:14px;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';margin-left:auto;color:var(--accent);font-weight:400;font-size:22px;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:13px;color:var(--muted);font-size:15.5px;max-width:66ch}

/* ---------- final cta ---------- */
/* No top padding at all — same "padding-top:0" pattern every other
   section on the page uses (see #how, #privacy, the FAQ) so two adjacent
   sections contribute one side of spacing each, not both. This always
   follows a section that already supplies its own full bottom padding
   (e.g. the FAQ's 120px), so a top padding here just stacks on top of
   that. Bottom stays generous — it's the last thing before the footer. */
.final{text-align:center;padding:0 0 130px}
.final h2{font-size:clamp(32px,5vw,56px);letter-spacing:-.045em;max-width:16ch;margin:0 auto}

/* ---------- footer ---------- */
/* ---------- back to top ---------- */
/* Hidden by default (opacity/pointer-events, not display:none) so it can
   transition in/out smoothly; site.js toggles .show once the page has
   scrolled past one viewport height. */
.to-top-btn{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(var(--wash-rgb),.14);background:rgba(var(--wash-rgb),.08);
  backdrop-filter:blur(10px);color:var(--ink-dim);cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .22s,transform .22s,background .18s,color .18s;
}
.to-top-btn.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top-btn:hover{background:rgba(var(--wash-rgb),.14);color:var(--ink)}
.to-top-btn svg{width:19px;height:19px}
@media(max-width:900px){.to-top-btn{right:16px;bottom:16px;width:40px;height:40px}}

footer.site-footer{border-top:1px solid rgba(var(--wash-rgb),.10);padding:56px 0 40px;background:var(--footer-wash)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.f-grid h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:16px;font-weight:650}
.f-grid a{display:block;font-size:14.5px;color:var(--ink-dim);margin-bottom:11px;transition:color .16s}
.f-grid a:hover{color:var(--accent)}
.f-about p{font-size:14px;color:var(--muted);margin-top:14px;max-width:34ch}
.f-bot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(var(--wash-rgb),.10);
  display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px}

/* ---------- simple content pages (privacy / support / changelog) ---------- */
.page-hero{padding:76px 0 20px;text-align:center}
.page-hero h1{font-size:clamp(32px,5vw,52px)}
.page-hero p{margin-top:16px;color:var(--ink-dim);font-size:17px}
.doc{max-width:760px;margin:0 auto;padding:60px 0 40px}
.doc h2{font-size:23px;margin:44px 0 14px;letter-spacing:-.02em}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:var(--ink-dim);font-size:16px;line-height:1.72}
.doc ul{padding-left:22px;margin:12px 0}
.doc li{margin-bottom:8px}
.doc .updated{color:var(--muted);font-size:13.5px;margin-bottom:8px}
.doc h3{font-size:18px;margin:28px 0 10px;letter-spacing:-.02em}
.doc a{color:var(--accent)}
.doc strong{color:var(--ink)}
.doc code{background:rgba(var(--wash-rgb),.08);border:1px solid rgba(var(--wash-rgb),.13);
  border-radius:5px;padding:1px 6px;font-size:14px;color:var(--ink-dim)}

/* Summary callout at the top of the policy — same themed-gradient
   approach as .privacy above, tighter/corner-anchored. */
.callout{border:1px solid rgba(59,199,182,.28);border-radius:16px;padding:26px 28px;
  background:radial-gradient(120% 160% at 0% 0%,var(--spot-a),var(--spot-c) 65%);margin-bottom:40px}
.callout h2{margin:0 0 12px;font-size:19px}
.callout ul{margin:0;padding-left:20px}
.callout li{color:var(--ink-dim);font-size:15.5px;margin-bottom:7px}

/* Wide tables must scroll inside themselves, never the page body. */
.tablewrap{overflow-x:auto;border:1px solid rgba(var(--wash-rgb),.13);border-radius:12px;margin:18px 0}
.doc table{border-collapse:collapse;width:100%;min-width:540px;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:11px 14px;border-bottom:1px solid rgba(var(--wash-rgb),.10);vertical-align:top}
.doc th{background:rgba(var(--wash-rgb),.055);font-weight:650;color:var(--ink);font-size:13px;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.doc tbody tr:last-child td{border-bottom:none}
.doc td{color:var(--ink-dim);line-height:1.6}
.doc td code{white-space:nowrap}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto}
.support-card{border:1px solid rgba(var(--wash-rgb),.13);border-radius:16px;padding:26px;background:rgba(var(--wash-rgb),.035);text-align:left}
.support-card .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;
  background:rgba(139,139,250,.13);border:1px solid rgba(139,139,250,.22);margin-bottom:14px}
.support-card h3{font-size:16.5px;margin-bottom:8px}
.support-card p{color:var(--muted);font-size:14px;margin-bottom:14px}
.support-card a.link{color:var(--accent);font-size:14px;font-weight:600}
.changelog-entry{border-bottom:1px solid rgba(var(--wash-rgb),.12);padding:30px 0}
.changelog-entry:first-child{padding-top:0}
.cl-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.cl-version{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent)}
.cl-date{font-size:13.5px;color:var(--muted)}
.cl-tag{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.cl-tag.new{background:rgba(59,199,182,.15);color:var(--teal);border:1px solid rgba(59,199,182,.3)}
.changelog-entry ul{padding-left:20px;margin:0;color:var(--ink-dim);font-size:15px;line-height:1.7}
.changelog-entry li{margin-bottom:6px}

@media(max-width:900px){
  .cards,.steps,.formats,.pr-grid,.support-grid{grid-template-columns:1fr}
  .card.wide{grid-column:auto}
  .price-grid{grid-template-columns:1fr}
  .viewport{grid-template-columns:1fr}
  .fakepage{display:none}
  .f-grid{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
  section{padding:84px 0}
}