/* FileFroggy — shared stylesheet
   Design tokens first, then layout, then components. Both colour schemes are
   defined on :root so the page renders correctly before any script runs; there
   is no JS theme switching and therefore no flash of wrong theme. */

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#fbfbfd; --ink:#0b0c0f; --dim:#565b67; --faint:#7c828f;
  --line:#e4e5ea; --card:#ffffff; --raise:#f5f6f9;
  --accent:#0f9d63; --accent-ink:#ffffff;
  --green:#137a37; --purple:#6429c0; --amber:#8f5500; --red:#b3251f;
  --water-1:#d4f3e6; --water-2:#bfe8f5;
  --maxw:1120px; --radius:12px;
  --shadow-sm:0 1px 2px rgba(16,20,30,.05);
  --shadow-lg:0 2px 6px rgba(16,20,30,.05), 0 18px 46px rgba(16,20,30,.10);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c0f; --ink:#f2f3f6; --dim:#a8aebb; --faint:#7d8492;
    --line:#232630; --card:#121419; --raise:#171a21;
    --accent:#34d399; --accent-ink:#06251a;
    --green:#3fb950; --purple:#bc8cff; --amber:#e3b341; --red:#f85149;
    --water-1:#0d3b2e; --water-2:#0d2b3b;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 18px 46px rgba(0,0,0,.45);
  }
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
                       transition-duration:.01ms!important; scroll-behavior:auto!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 var(--font); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-underline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}
h1,h2,h3,h4{letter-spacing:-.022em; line-height:1.14; margin:0}
p{margin:0}
code{font:.92em/1.5 var(--mono); background:var(--raise); padding:.12em .38em;
     border-radius:4px; border:1px solid var(--line)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:0 0 8px 0; z-index:200; font-weight:600;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.nav .wrap{display:flex; align-items:center; gap:22px; height:58px}
.brand{
  display:flex; align-items:center; gap:9px; font-weight:660; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; font-size:16px;
}
.brand svg, .brand img.frog-mark{width:24px; height:24px; flex:0 0 24px; border-radius:6px}
.nav .sp{flex:1}
.nav a.lk{color:var(--dim); text-decoration:none; font-size:14.5px}
.nav a.lk:hover{color:var(--ink)}
@media(max-width:760px){ .nav .hide{display:none} }

/* ---------------------------------------------------------------- hero */
.hero{padding:78px 0 6px; text-align:center}
h1{font-size:clamp(35px,5.5vw,60px); font-weight:680; margin-bottom:20px}
.lede-hero{font-size:clamp(17px,2.1vw,20.5px); color:var(--dim); max-width:650px; margin:0 auto}

/* ledger strip */
.strip{
  max-width:820px; margin:38px auto 0; background:var(--card); border:1px solid var(--line);
  border-radius:13px; overflow:hidden; text-align:left; box-shadow:var(--shadow-lg);
}
.strip .cap{
  padding:9px 16px; border-bottom:1px solid var(--line); font-size:12px; color:var(--faint);
  display:flex; gap:7px; align-items:center;
}
.strip .cap i{width:9px;height:9px;border-radius:50%;background:#28c840;display:inline-block}
.lrow{
  display:flex; gap:13px; padding:11px 16px; align-items:baseline; font-size:15px;
  border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.lrow:last-child{border-bottom:0}
.lrow .tm{font:13.5px/1.5 var(--mono); color:var(--faint); width:46px; flex:0 0 46px}
.lrow .vb{width:104px; flex:0 0 104px; font-weight:600; font-size:14px}
.lrow .fn{font-weight:520}
.lrow .an{color:var(--faint); font-size:13.5px; margin-left:auto; text-align:right;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44%}
.v-dl{color:var(--accent)} .v-rn,.v-mv{color:var(--purple)} .v-ed{color:var(--green)}
@media(max-width:640px){
  .lrow{flex-wrap:wrap; gap:8px}
  .lrow .vb{width:auto; flex:none}
  .lrow .an{margin-left:0; max-width:100%; text-align:left; width:100%}
}
.strip-note{font-size:13.5px; color:var(--faint); margin-top:14px}

/* ---------------------------------------------------------------- hero CTA */
.hero-cta{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin:34px 0 0;
}
.btn--xl{
  font-size:19px; font-weight:660; padding:19px 42px; border-radius:13px;
  letter-spacing:-.01em; box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 34%,transparent);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn--xl:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px color-mix(in srgb,var(--accent) 42%,transparent);
}
.btn--xl:active{transform:translateY(0)}
/* Secondary action: same weight and size, no fill, so it reads as an equal
   option rather than a disabled-looking afterthought.
   Doubled class (.btn.btn--quiet) on purpose — the base .btn rule is declared
   further down this file, so at equal specificity it would win and the button
   would render filled. */
.btn.btn--quiet{
  background:transparent; color:var(--ink); box-shadow:none;
  border:1.5px solid var(--line);
}
.btn.btn--quiet:hover{
  background:var(--raise); border-color:color-mix(in srgb,var(--ink) 22%,transparent);
  box-shadow:none; filter:none;
}
.hero-cta-note{
  margin-top:15px; font-size:13.5px; color:var(--faint);
}
@media(max-width:560px){
  .hero-cta{flex-direction:column; align-items:stretch; padding:0 8px}
  .btn--xl{width:100%; padding:17px 24px; font-size:17.5px}
}

/* ---------------------------------------------------------------- sections */
section{padding:80px 0}
section.alt{background:var(--card); border-block:1px solid var(--line)}

/* ---------------------------------------------------------------- pond */
/* A decorative frog hopping across lily pads, between the hero and the "how it
   works" section. The pond itself is aria-hidden in the markup (it conveys
   nothing a screen reader needs); the tagline above it is real text and stays
   readable. The global prefers-reduced-motion rule further up already freezes
   every animation here, so none of this needs its own reduced-motion handling.

   Keyframes below are generated — edit site/pond.py and re-run it, don't hand-
   edit them. The pad geometry in index.html comes out of the same script, so
   the frog's landing coordinates and the pads cannot drift apart. */
.pond-wrap{
  background:linear-gradient(160deg, var(--water-1), var(--water-2));
  border-block:1px solid var(--line); overflow:hidden; padding:0;
}
.pond-tagline{
  text-align:center; padding:34px 24px 0; margin:0;
  font-size:clamp(20px,2.6vw,27px); font-weight:640; letter-spacing:-.02em;
  color:var(--ink);
}
.pond-tagline em{font-style:normal; color:var(--accent)}
.pond{position:relative; height:230px; max-width:1400px; margin:0 auto}

/* --- water --- */
.shimmer{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.5), transparent 70%);
  animation:drift 17s ease-in-out infinite;
}
.shimmer--a{left:14%; bottom:18px; width:180px; height:26px}
.shimmer--b{left:46%; bottom:52px; width:240px; height:30px; animation-duration:23s;
            animation-delay:-6s}
.shimmer--c{left:72%; bottom:12px; width:150px; height:22px; animation-duration:19s;
            animation-delay:-11s}
@keyframes drift{
  0%,100%{ transform:translateX(-14px) scaleX(1); opacity:.30 }
  50%    { transform:translateX(14px)  scaleX(1.1); opacity:.55 }
}

/* --- lily pads --- */
.pad{position:absolute; pointer-events:none}
.pad-art{width:100%; height:100%; display:block}
.pad--0{animation:pad-life-0 9s ease-in-out infinite}
.pad--1{animation:pad-life-1 9s ease-in-out infinite}
.pad--2{animation:pad-life-2 9s ease-in-out infinite}
.pad--3{animation:pad-life-3 9s ease-in-out infinite}
.pad--deco{animation:pad-drift 6.5s ease-in-out infinite}
.pad--deco:last-of-type{animation-duration:8s; animation-delay:-3s}
@keyframes pad-drift{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

.bloom{
  position:absolute; left:52%; top:26%; width:34%; height:34%;
  overflow:visible; pointer-events:none;
}

/* A ring that expands out of a pad the instant the frog lands on it. */
.ripple{
  position:absolute; left:50%; top:50%; width:100%; height:100%;
  margin-left:-50%; margin-top:-50%; border-radius:50%;
  border:2px solid rgba(255,255,255,.8); opacity:0;
}
.pad--0 .ripple{animation:ripple-0 9s linear infinite}
.pad--1 .ripple{animation:ripple-1 9s linear infinite}
.pad--2 .ripple{animation:ripple-2 9s linear infinite}
.pad--3 .ripple{animation:ripple-3 9s linear infinite}

/* --- the frog ---
   Three nested elements, one animation each. A single element can only run one
   animation per property, and the hop needs horizontal motion to stay LINEAR
   while vertical motion eases out on the way up and in on the way down — that
   split is what makes the arc read as gravity rather than a floaty swim. */
.froggy-track{position:absolute; bottom:0; width:54px; height:54px; pointer-events:none;
              animation:froggy-x 9s linear infinite}
.froggy-lift{width:100%; height:100%; animation:froggy-y 9s linear infinite}
.froggy-body{width:100%; height:100%; transform-origin:50% 88%;
             animation:froggy-squash 9s linear infinite}
.froggy-art{width:100%; height:100%; display:block; overflow:visible}

/* Eyelids sit over the eyes in the body colour and scale down from the top. */
.froggy-art .lid{
  transform-box:fill-box; transform-origin:50% 0%; transform:scaleY(0);
  animation:blink 7s ease-in-out infinite;
}
@keyframes blink{
  0%,32%   { transform:scaleY(0) }
  34%,36%  { transform:scaleY(1) }
  38%,84%  { transform:scaleY(0) }
  86%,88%  { transform:scaleY(1) }
  90%,100% { transform:scaleY(0) }
}

@keyframes froggy-x {
  0% { left:calc(10% - 27px); animation-timing-function:linear; }
  14.5% { left:calc(10% - 27px); animation-timing-function:linear; }
  23% { left:calc(32% - 27px); animation-timing-function:linear; }
  25% { left:calc(32% - 27px); animation-timing-function:linear; }
  39.5% { left:calc(32% - 27px); animation-timing-function:linear; }
  48% { left:calc(56% - 27px); animation-timing-function:linear; }
  50% { left:calc(56% - 27px); animation-timing-function:linear; }
  64.5% { left:calc(56% - 27px); animation-timing-function:linear; }
  73% { left:calc(80% - 27px); animation-timing-function:linear; }
  75% { left:calc(80% - 27px); animation-timing-function:linear; }
  89.5% { left:calc(80% - 27px); animation-timing-function:linear; }
  98% { left:calc(10% - 27px); animation-timing-function:linear; }
  100% { left:calc(10% - 27px); animation-timing-function:linear; }
}
@keyframes froggy-y {
  0% { transform:translateY(-54px); animation-timing-function:linear; }
  14.5% { transform:translateY(-54px); animation-timing-function:ease-out; }
  18.75% { transform:translateY(-130px); animation-timing-function:ease-in; }
  23% { transform:translateY(-78px); animation-timing-function:linear; }
  25% { transform:translateY(-78px); animation-timing-function:linear; }
  39.5% { transform:translateY(-78px); animation-timing-function:ease-out; }
  43.75% { transform:translateY(-130px); animation-timing-function:ease-in; }
  48% { transform:translateY(-50px); animation-timing-function:linear; }
  50% { transform:translateY(-50px); animation-timing-function:linear; }
  64.5% { transform:translateY(-50px); animation-timing-function:ease-out; }
  68.75% { transform:translateY(-124px); animation-timing-function:ease-in; }
  73% { transform:translateY(-72px); animation-timing-function:linear; }
  75% { transform:translateY(-72px); animation-timing-function:linear; }
  89.5% { transform:translateY(-72px); animation-timing-function:ease-out; }
  93.75% { transform:translateY(-124px); animation-timing-function:ease-in; }
  98% { transform:translateY(-54px); animation-timing-function:linear; }
  100% { transform:translateY(-54px); animation-timing-function:linear; }
}
@keyframes froggy-squash {
  0% { transform:scale(1,1) rotate(0deg); animation-timing-function:ease-in-out; }
  6% { transform:scale(1.03,0.97) rotate(0deg); animation-timing-function:ease-in; }
  12% { transform:scale(1.22,0.78) rotate(0deg); animation-timing-function:ease-out; }
  14.5% { transform:scale(0.84,1.2) rotate(5.4deg); animation-timing-function:ease-out; }
  18.75% { transform:scale(1,1) rotate(9deg); animation-timing-function:ease-in; }
  23% { transform:scale(1.24,0.76) rotate(0deg); animation-timing-function:ease-out; }
  25% { transform:scale(1,1) rotate(0deg); animation-timing-function:ease-in-out; }
  31% { transform:scale(1.03,0.97) rotate(0deg); animation-timing-function:ease-in; }
  37% { transform:scale(1.22,0.78) rotate(0deg); animation-timing-function:ease-out; }
  39.5% { transform:scale(0.84,1.2) rotate(5.4deg); animation-timing-function:ease-out; }
  43.75% { transform:scale(1,1) rotate(9deg); animation-timing-function:ease-in; }
  48% { transform:scale(1.24,0.76) rotate(0deg); animation-timing-function:ease-out; }
  50% { transform:scale(1,1) rotate(0deg); animation-timing-function:ease-in-out; }
  56% { transform:scale(1.03,0.97) rotate(0deg); animation-timing-function:ease-in; }
  62% { transform:scale(1.22,0.78) rotate(0deg); animation-timing-function:ease-out; }
  64.5% { transform:scale(0.84,1.2) rotate(5.4deg); animation-timing-function:ease-out; }
  68.75% { transform:scale(1,1) rotate(9deg); animation-timing-function:ease-in; }
  73% { transform:scale(1.24,0.76) rotate(0deg); animation-timing-function:ease-out; }
  75% { transform:scale(1,1) rotate(0deg); animation-timing-function:ease-in-out; }
  81% { transform:scale(1.03,0.97) rotate(0deg); animation-timing-function:ease-in; }
  87% { transform:scale(1.22,0.78) rotate(0deg); animation-timing-function:ease-out; }
  89.5% { transform:scale(0.84,1.2) rotate(-5.4deg); animation-timing-function:ease-out; }
  93.75% { transform:scale(1,1) rotate(-9deg); animation-timing-function:ease-in; }
  98% { transform:scale(1.24,0.76) rotate(0deg); animation-timing-function:ease-out; }
  100% { transform:scale(1,1) rotate(0deg); animation-timing-function:ease-in-out; }
}
@keyframes pad-life-0 {
  0% { transform:translateY(-0.00px); }
  0.4% { transform:translateY(1.28px); }
  3.5% { transform:translateY(-0.98px); }
  8.333% { transform:translateY(-1.60px); }
  16.67% { transform:translateY(0.00px); }
  25% { transform:translateY(1.60px); }
  33.33% { transform:translateY(-0.00px); }
  41.67% { transform:translateY(-1.60px); }
  50% { transform:translateY(-0.00px); }
  58.33% { transform:translateY(1.60px); }
  66.67% { transform:translateY(-0.00px); }
  75% { transform:translateY(-1.60px); }
  83.33% { transform:translateY(0.00px); }
  91.67% { transform:translateY(1.60px); }
  97.4% { transform:translateY(0.75px); }
  98% { transform:translateY(4.79px); }
  100% { transform:translateY(-0.00px); }
}
@keyframes pad-life-1 {
  0% { transform:translateY(-0.00px); }
  8.333% { transform:translateY(-1.60px); }
  16.67% { transform:translateY(0.00px); }
  22.4% { transform:translateY(1.41px); }
  23% { transform:translateY(5.69px); }
  25% { transform:translateY(1.60px); }
  25.4% { transform:translateY(3.00px); }
  28.5% { transform:translateY(1.26px); }
  33.33% { transform:translateY(-0.00px); }
  41.67% { transform:translateY(-1.60px); }
  50% { transform:translateY(-0.00px); }
  58.33% { transform:translateY(1.60px); }
  66.67% { transform:translateY(-0.00px); }
  75% { transform:translateY(-1.60px); }
  83.33% { transform:translateY(0.00px); }
  91.67% { transform:translateY(1.60px); }
  100% { transform:translateY(-0.00px); }
}
@keyframes pad-life-2 {
  0% { transform:translateY(-0.00px); }
  8.333% { transform:translateY(-1.60px); }
  16.67% { transform:translateY(0.00px); }
  25% { transform:translateY(1.60px); }
  33.33% { transform:translateY(-0.00px); }
  41.67% { transform:translateY(-1.60px); }
  47.4% { transform:translateY(-0.75px); }
  48% { transform:translateY(3.61px); }
  50% { transform:translateY(-0.00px); }
  50.4% { transform:translateY(1.52px); }
  53.5% { transform:translateY(0.98px); }
  58.33% { transform:translateY(1.60px); }
  66.67% { transform:translateY(-0.00px); }
  75% { transform:translateY(-1.60px); }
  83.33% { transform:translateY(0.00px); }
  91.67% { transform:translateY(1.60px); }
  100% { transform:translateY(-0.00px); }
}
@keyframes pad-life-3 {
  0% { transform:translateY(-0.00px); }
  8.333% { transform:translateY(-1.60px); }
  16.67% { transform:translateY(0.00px); }
  25% { transform:translateY(1.60px); }
  33.33% { transform:translateY(-0.00px); }
  41.67% { transform:translateY(-1.60px); }
  50% { transform:translateY(-0.00px); }
  58.33% { transform:translateY(1.60px); }
  66.67% { transform:translateY(-0.00px); }
  72.4% { transform:translateY(-1.41px); }
  73% { transform:translateY(2.71px); }
  75% { transform:translateY(-1.60px); }
  75.4% { transform:translateY(-0.20px); }
  78.5% { transform:translateY(-1.26px); }
  83.33% { transform:translateY(0.00px); }
  91.67% { transform:translateY(1.60px); }
  100% { transform:translateY(-0.00px); }
}
@keyframes ripple-0 {
  0% { transform:scale(.28); opacity:0; }
  98% { transform:scale(.28); opacity:.55; }
  101.5% { opacity:.32; }
  107% { transform:scale(1.75); opacity:0; }
}
@keyframes ripple-1 {
  0% { transform:scale(.28); opacity:0; }
  23% { transform:scale(.28); opacity:.55; }
  26.5% { opacity:.32; }
  32% { transform:scale(1.75); opacity:0; }
  100% { transform:scale(.28); opacity:0; }
}
@keyframes ripple-2 {
  0% { transform:scale(.28); opacity:0; }
  48% { transform:scale(.28); opacity:.55; }
  51.5% { opacity:.32; }
  57% { transform:scale(1.75); opacity:0; }
  100% { transform:scale(.28); opacity:0; }
}
@keyframes ripple-3 {
  0% { transform:scale(.28); opacity:0; }
  73% { transform:scale(.28); opacity:.55; }
  76.5% { opacity:.32; }
  82% { transform:scale(1.75); opacity:0; }
  100% { transform:scale(.28); opacity:0; }
}
.eyebrow{font-size:12.5px; font-weight:660; letter-spacing:.05em; text-transform:uppercase;
         color:var(--faint); margin-bottom:12px}
h2{font-size:clamp(26px,3.4vw,36px); font-weight:660; margin-bottom:14px}
h3{font-size:17.5px; font-weight:640}
.lede{font-size:17.5px; color:var(--dim); max-width:670px}
.center{text-align:center}
.center .lede{margin-left:auto; margin-right:auto}

/* ---------------------------------------------------------------- media */
figure{margin:34px 0 0}
.shot{width:100%; border-radius:var(--radius); border:1px solid var(--line);
      box-shadow:var(--shadow-lg); background:#0d0f14}
figcaption{margin-top:12px; font-size:13.5px; color:var(--faint); display:flex; gap:9px;
           align-items:flex-start; line-height:1.55}
figcaption b{color:var(--dim); font-weight:620}
.pill{flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.045em;
      text-transform:uppercase; padding:3px 8px; border-radius:5px; margin-top:2px}
.pill.real{color:var(--green); background:color-mix(in srgb,var(--green) 15%,transparent)}
.pill.mock{color:var(--amber); background:color-mix(in srgb,var(--amber) 17%,transparent)}

/* ---------------------------------------------------------------- grid + cards */
.grid{display:grid; gap:20px; margin-top:38px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){ .g3,.g2{grid-template-columns:1fr} }
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
section.alt .card{background:var(--bg)}
.card h3{margin-bottom:8px}
.card p{font-size:14.8px; color:var(--dim)}
.card .num{font:660 13px/1 var(--mono); color:var(--accent); display:block; margin-bottom:11px}

/* before / after */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px}
@media(max-width:880px){.ba{grid-template-columns:1fr}}
.ba .panel{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
           background:var(--card)}
.ba .ph{padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; font-weight:640;
        display:flex; justify-content:space-between; align-items:center; gap:10px}
.ba .ph em{font-style:normal; font-weight:500; color:var(--faint); font-size:12px}
.ba pre{margin:0; padding:15px 16px; font:12.4px/1.75 var(--mono); color:var(--dim);
        overflow-x:auto; max-height:272px}
.ba .good{color:var(--ink)}

/* ---------------------------------------------------------------- notice */
.notice{
  border:1px solid color-mix(in srgb,var(--amber) 36%,var(--line));
  background:color-mix(in srgb,var(--amber) 8%,transparent);
  border-radius:var(--radius); padding:24px 26px; margin-top:34px;
}
.notice h3{margin-bottom:10px}
.notice p{font-size:15px; color:var(--dim); margin-bottom:9px}
.notice p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- table */
table{width:100%; border-collapse:collapse; margin-top:30px; font-size:15px; text-align:left}
caption{text-align:left; color:var(--faint); font-size:13px; padding-bottom:8px}
th,td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint);
   font-weight:660}
td.y{color:var(--green); font-weight:620} td.n{color:var(--red); font-weight:620}
td.p{color:var(--amber); font-weight:620}
@media(max-width:640px){ th:nth-child(3),td:nth-child(3){display:none} }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block; background:var(--accent); color:var(--accent-ink); text-decoration:none;
  padding:13px 26px; border-radius:9px; font-weight:620; font-size:15.5px;
  border:1px solid transparent; cursor:pointer; transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent);
           border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.btnrow{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap}

/* ---------------------------------------------------------------- pricing */
.price{max-width:470px; margin:38px auto 0; background:var(--card); border:1px solid var(--line);
       border-radius:15px; padding:34px; text-align:center; box-shadow:var(--shadow-lg)}
.price .amt{font-size:46px; font-weight:680; letter-spacing:-.03em}
.price .amt sup{font-size:22px; font-weight:600; vertical-align:super; margin-right:2px}
.price .once{color:var(--faint); font-size:14.5px; margin-bottom:6px}
.price ul{list-style:none; text-align:left; margin:22px 0; padding:0}
.price li{padding:7px 0 7px 26px; position:relative; font-size:15px; color:var(--dim)}
.price li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700}
.price .btn{width:100%}
.fineprint{font-size:13px; color:var(--faint); margin-top:14px}

/* ---------------------------------------------------------------- FAQ */
.faq{margin-top:34px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:18px 0; font-weight:600; font-size:16.5px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--faint); font-weight:400; font-size:22px; flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq .ans{padding:0 0 20px; color:var(--dim); font-size:15.5px; max-width:760px}
.faq .ans p+p{margin-top:10px}

/* ---------------------------------------------------------------- prose (legal) */
.prose{max-width:760px; margin:0 auto; padding:56px 0 30px}
.prose h1{font-size:clamp(30px,4.4vw,42px); text-align:left; margin-bottom:10px}
.prose .updated{color:var(--faint); font-size:14px; margin-bottom:34px}
.prose h2{font-size:21px; margin:36px 0 10px}
.prose h3{font-size:17px; margin:24px 0 8px}
.prose p, .prose li{color:var(--dim); font-size:16px}
.prose p{margin-bottom:13px}
.prose ul,.prose ol{margin:0 0 15px; padding-left:22px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink); font-weight:620}
.prose table{font-size:15px}
.prose .box{
  border:1px solid var(--line); background:var(--card); border-radius:var(--radius);
  padding:20px 22px; margin:20px 0;
}
.prose .box p:last-child{margin-bottom:0}
.toc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
     padding:18px 22px; margin-bottom:34px}
.toc p{font-weight:640; color:var(--ink); margin-bottom:8px; font-size:14px}
.toc ol{margin:0; padding-left:20px}
.toc li{margin-bottom:4px; font-size:15px}

/* ---------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line); padding:46px 0 58px; color:var(--faint); font-size:14px}
.fgrid{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
.fcol h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint);
         margin-bottom:12px; font-weight:660}
.fcol a{display:block; color:var(--dim); text-decoration:none; margin-bottom:8px; font-size:14.5px}
.fcol a:hover{color:var(--ink)}
.fbot{margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
      display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.fbot .sp{flex:1}

/* ---------------------------------------------------------------- cookie notice */
/* This site sets no cookies and runs no analytics, so this is an informational
   bar rather than a consent gate. Dismissal is remembered in localStorage,
   which is "strictly necessary" for a user-requested function and therefore
   exempt from consent requirements under ePrivacy. */
.cookiebar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:100; margin:0 auto;
  max-width:620px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:15px 18px;
  display:flex; gap:14px; align-items:center; font-size:14px; color:var(--dim);
}
.cookiebar[hidden]{display:none}
.cookiebar p{flex:1; margin:0}
.cookiebar button{
  flex:0 0 auto; background:var(--raise); border:1px solid var(--line); color:var(--ink);
  border-radius:7px; padding:7px 14px; font:600 14px/1 var(--font); cursor:pointer;
}
.cookiebar button:hover{background:var(--line)}
@media(max-width:560px){ .cookiebar{flex-direction:column; align-items:stretch; text-align:left} }

/* ---------------------------------------------------------------- 404 */
.mid{min-height:62vh; display:flex; flex-direction:column; align-items:center;
     justify-content:center; text-align:center; gap:14px; padding:60px 0}

/* ---------------------------------------------------------------- print */
@media print{
  .nav,.cookiebar,footer .fgrid,video{display:none}
  body{background:#fff; color:#000}
  section{padding:20px 0; break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:11px; color:#555}
}