/* Technically Not website: shared design system.
   Direction: editorial ink + one red strike + one blue spark (matches the logo).
   Neutrals carry the page; --strike is ONLY for the brush strike-through; the AI gradient is a rare spark.
   Theme: follows prefers-color-scheme; :root[data-theme="light"|"dark"] overrides. Old token names stay mapped. */
:root{
  --paper:#f7f6f3;--surface:#fff;--soft:#efeee9;--line:#e4e2dc;--line-strong:#d3d0c8;
  --ink:#0f1012;--text-soft:#55575c;--muted:#737579;
  --strike:#ff2a2a;--strike-deep:#d9141a;
  --ai-from:#1ee0f5;--ai-to:#2563eb;--ai-grad:linear-gradient(90deg,var(--ai-from),var(--ai-to));--ai-solid:#1d6fe0;
  --focus:#22b8f0;
  --accent:#2563eb;--accent-bg:#eef3fd;
  --lime:#c7f36b;--green:#294c3d;--working:#3fae6a;--waiting:#c7a24e;
  --shadow:0 1px 2px #0f10120a,0 8px 24px #0f10120d;--shadow-lg:0 2px 6px #0f10120d,0 30px 70px -20px #0f101229;
  --r:16px;--r-sm:10px;--r-lg:22px;
  --btn:#0f1012;--btn-fg:#f7f6f3;--btn-hover:#26282d;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  --strike-blend:normal;
  font-family:var(--font);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0c0d0f;--surface:#141518;--soft:#1b1d21;--line:#26282d;--line-strong:#34373d;
    --ink:#f2f1ee;--text-soft:#b4b6bb;--muted:#80838a;
    --ai-to:#3b82f6;--ai-solid:#4fa3f7;--accent:#5ab8f5;--accent-bg:#0f1c2a;
    --shadow:0 1px 2px #0006,0 8px 24px #0005;--shadow-lg:0 2px 6px #0006,0 30px 70px -20px #000c;
    --btn:#f2f1ee;--btn-fg:#0c0d0f;--btn-hover:#fff;--strike-blend:normal;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0c0d0f;--surface:#141518;--soft:#1b1d21;--line:#26282d;--line-strong:#34373d;
  --ink:#f2f1ee;--text-soft:#b4b6bb;--muted:#80838a;
  --ai-to:#3b82f6;--ai-solid:#4fa3f7;--accent:#5ab8f5;--accent-bg:#0f1c2a;
  --shadow:0 1px 2px #0006,0 8px 24px #0005;--shadow-lg:0 2px 6px #0006,0 30px 70px -20px #000c;
  --btn:#f2f1ee;--btn-fg:#0c0d0f;--btn-hover:#fff;--strike-blend:normal;
  color-scheme:dark;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
body>main{width:100%;box-sizing:border-box} /* body is a flex column: without this a narrow main.wrap shrinks to its content */
body > main{flex:1 0 auto}
::selection{background:color-mix(in srgb,var(--ai-from) 32%,transparent);color:var(--ink)}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
img,video,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--ink);font-weight:800;text-wrap:balance}
h3{font-size:18px;line-height:1.3;letter-spacing:-.015em;font-weight:700}
p{text-wrap:pretty}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
code,kbd,samp{font-family:var(--mono);font-size:.875em}
code{background:var(--soft);border:1px solid var(--line);padding:.12em .4em;border-radius:6px;line-height:1.4}
kbd{background:var(--surface);border:1px solid var(--line-strong);border-bottom-width:2px;padding:.1em .45em;border-radius:6px}
pre{font-family:var(--mono);font-size:13.5px;line-height:1.6;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 18px;overflow:auto}
pre code{background:none;border:0;padding:0;font-size:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* Header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 78%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 85%,transparent)}
.top .wrap{height:64px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;letter-spacing:-.02em;text-decoration:none;flex:none;border-radius:6px}
.brand-logo{height:18px;width:auto}
.brand-logo.on-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-logo{display:none}:root:not([data-theme="light"]) .brand-logo.on-dark{display:block}}
:root[data-theme="dark"] .brand-logo{display:none}:root[data-theme="dark"] .brand-logo.on-dark{display:block}
.top nav{display:flex;gap:4px;margin-left:auto;font-size:14px;font-weight:500}
.top nav a{color:var(--text-soft);text-decoration:none;padding:6px 12px;border-radius:8px;transition:color .2s var(--ease),background .2s var(--ease);white-space:nowrap}
.top nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--soft) 80%,transparent)}
.top nav a[aria-current="page"]{color:var(--ink)}

/* Account: header "Sign in" link / signed-in menu, added by assets/account.js only once accounts
   are configured (site.json "api" + "googleWebClientId"). Reuses .top nav a's look. */
.account-link{color:var(--text-soft);text-decoration:none;padding:6px 12px;border-radius:8px;font:inherit;font-size:14px;font-weight:500;background:none;border:0;cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease)}
.account-link:hover{color:var(--ink);background:color-mix(in srgb,var(--soft) 80%,transparent)}
.account-menu{position:relative}
.account-menu-list{position:absolute;top:calc(100% + 6px);right:0;min-width:160px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:60}
.account-menu-list a,.account-menu-list button{display:block;width:100%;text-align:left;color:var(--text-soft);text-decoration:none;font:inherit;font-size:14px;background:none;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}
.account-menu-list a:hover,.account-menu-list button:hover{color:var(--ink);background:var(--soft)}
.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.account-paid-note{font-size:14.5px;color:var(--ink);font-weight:600;margin:0 0 20px}
/* Email sign-in, password reset and Security forms (assets/account.js): layout only, reusing the shared input/button/note styles */
.account-auth{display:grid;gap:18px;width:100%}
.account-auth [hidden],.account-form [hidden],.account-security [hidden]{display:none}
.account-tabs{display:flex;flex-wrap:wrap;gap:10px}
.account-form{display:grid;gap:14px;width:100%;max-width:420px;margin:16px 0 0}
.account-auth .account-form{margin:0}
.account-form .account-actions{margin-top:2px}
.account-form>.button{justify-self:start}
.account-form .note,.account-form p{margin:0}
.account-field{display:grid;gap:6px}
.account-check{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:13.5px;color:var(--text-soft);cursor:pointer}
.account-linkbtn{justify-self:start;background:none;border:0;padding:0;font:inherit;font-size:13.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.account-error{color:var(--ink)}
.account-secret,.account-codes{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere}
.account-codes{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px 20px}

/* Buttons: .button = secondary, .button.dark = primary, .small / .lg sizes */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);padding:10px 18px;color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.button:hover{background:var(--soft);border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
.button:active{transform:translateY(1px)}
.button.small{padding:7px 14px;font-size:13.5px;border-radius:9px}
.button.lg{padding:14px 26px;font-size:16px;border-radius:12px}
.button.dark{background:var(--btn);border-color:var(--btn);color:var(--btn-fg);box-shadow:0 1px 2px #0f101226}
.button.dark:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.button.dark:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ai-grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.button.dark:hover:after,.button.dark:focus-visible:after{transform:scaleX(1)}
.button[aria-disabled="true"],.button:disabled,.button.dark[aria-disabled="true"],.button.dark:disabled{background:var(--soft);border:1px dashed var(--line-strong);color:var(--muted);box-shadow:none;opacity:1;pointer-events:none}
.button[aria-disabled="true"]:after,.button:disabled:after{display:none}
.button[aria-disabled="true"]:active,.button:disabled:active{transform:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.note{font-size:13.5px;color:var(--muted);margin:14px 0 0}

/* Type helpers */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.eyebrow:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ai-grad)}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 12px}
.display{font-size:clamp(44px,7vw,92px);line-height:1.02;letter-spacing:-.045em;font-weight:850;margin:0 0 24px;text-wrap:balance}
.lede,.lead{font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--text-soft);max-width:640px;margin:0 0 32px;letter-spacing:-.01em}
.ai{color:var(--ai-solid)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ai{background:var(--ai-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}
/* NOT: the brand word, heavy caps in ink */
.not{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--ink)}
s{text-decoration-thickness:2px;text-decoration-color:var(--strike);color:var(--muted)}

/* .strike: hand-painted red brush stroke drawn over a word (assets/brush-strike.svg).
   Visible by default; with JS (html.js) it draws left to right once .is-in is added. */
.strike{position:relative;display:inline-block;white-space:nowrap;
--brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ff2a2a' fill-rule='evenodd' d='M2 40C30 32 80 27 140 24L150 24.5C250 20 380 15 470 11L482 10.5C530 8.5 565 6.5 588 5L594 6L598 11L593 16L599 21L592 27L596 32L586 37C540 39.5 480 42 420 44L408 45C320 48 220 50.5 140 51.5L128 51C80 51.5 40 50 14 46.5C6 45 2 43 2 40ZM300 30C360 28 420 25.5 480 23L481 24.3C420 27 360 29.4 301 31.4ZM180 40C220 39 260 38 300 37L300 38.2C260 39.2 220 40.3 181 41.4ZM470 32C510 30.5 545 29 575 27.5L575 28.8C545 30.3 510 31.8 471 33.4ZM60 44C90 43 120 42.4 150 42L150 43C120 43.5 90 44.2 61 45.2Z'/%3E%3Cpath fill='%23ff2a2a' d='M400 48.5C460 46.5 520 43.5 575 40L577 41.5C520 45.2 460 48 402 50ZM500 6.5C530 5 560 3.5 585 2.4L584 3.6C560 4.8 530 6.3 501 7.8Z'/%3E%3C/svg%3E");
}
.strike:after{content:"";position:absolute;left:-.1em;right:-.12em;top:55%;height:.36em;margin-top:-.18em;background:var(--strike);-webkit-mask:var(--brush) center/100% 100% no-repeat;mask:var(--brush) center/100% 100% no-repeat;transform:rotate(-3deg);mix-blend-mode:var(--strike-blend);pointer-events:none;clip-path:inset(-20% 0 -20% 0)}
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .strike:after{background:var(--brush) center/100% 100% no-repeat}
}
html.js .strike:after{clip-path:inset(-20% 100% -20% 0);transition:clip-path .7s var(--ease) .2s}
html.js .strike.is-in:after{clip-path:inset(-20% 0 -20% 0)}

/* .reveal: fades and rises in once (only hidden when JS runs) */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}

/* Hero */
.hero{position:relative;isolation:isolate;padding-top:104px;padding-bottom:88px}
.hero:before{content:"";position:absolute;z-index:-1;left:50%;top:-40px;width:min(1100px,120vw);height:560px;transform:translateX(-35%);background:radial-gradient(closest-side,color-mix(in srgb,var(--ai-from) 11%,transparent),color-mix(in srgb,var(--ai-to) 5%,transparent) 55%,transparent);pointer-events:none}
.hero h1{font-size:clamp(42px,6.6vw,84px);line-height:1.03;letter-spacing:-.045em;font-weight:850;margin:0 0 24px;max-width:960px;text-wrap:balance}
.hero .lead{max-width:620px}
.hero h1 sup,.page-hero h1 sup{font-size:.3em;font-weight:600;color:var(--muted);margin-left:2px;letter-spacing:0;vertical-align:super}
.hero h1 sup a,.page-hero h1 sup a{text-decoration:none;color:inherit}
.footnote{margin:24px 0 0;font-size:13.5px;font-style:italic;color:var(--muted)}

/* Small live demo: the app iframe is drawn at desktop size and scaled to .mini-stage's width (index.html script) */
.try{padding-top:8px;border-top:0}
.wrap.wide{max-width:1320px}
.try-line{margin:0 0 16px;font-size:14.5px;color:var(--text-soft)}
.try-line b{color:var(--ink);font-weight:650}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.mini-bar{height:44px;display:flex;align-items:center;gap:12px;padding:0 10px 0 16px;border-bottom:1px solid var(--line);font-size:12.5px;white-space:nowrap;background:color-mix(in srgb,var(--soft) 45%,var(--surface))}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.mini-title{font-weight:650;overflow:hidden;text-overflow:ellipsis}
.mini-build{color:var(--muted);font-weight:400}
.mini-actions{margin-left:auto;display:flex;gap:6px}
.mini-btn{border:1px solid var(--line);background:var(--surface);color:var(--text-soft);border-radius:8px;padding:4px 10px;font:inherit;font-size:12.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.mini-btn:hover{background:var(--soft);color:var(--ink)}
.mini-stage{position:relative;overflow:hidden;aspect-ratio:1180/760;background:var(--paper)}
.mini-stage iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:var(--paper)}
.mini.is-full{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none}
.mini.is-full .mini-stage{flex:1;aspect-ratio:auto}
html.demo-full{overflow:hidden}
.mini-fallback{display:none;text-decoration:none;color:var(--text-soft);font-size:13.5px}
.mini-fallback img{width:100%;aspect-ratio:1440/900}
.mini-fallback span{display:block;padding:12px 16px;border-top:1px solid var(--line);color:var(--ink);font-weight:600}

/* Sections */
section{padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--line)}
h2{font-size:clamp(30px,3.8vw,46px);line-height:1.08;letter-spacing:-.038em;font-weight:800;margin:0 0 14px}
.sub{font-size:17px;color:var(--text-soft);margin:0 0 40px;max-width:640px}
.sub a{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;color:inherit;text-decoration:none}
.card h3{font-size:17px;letter-spacing:-.015em;margin:0 0 8px}
.card p{font-size:15px;line-height:1.6;color:var(--text-soft);margin:0}
a.card,.card[href]{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
a.card:hover,.card[href]:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.steps li:before{content:counter(s,decimal-leading-zero);margin-bottom:14px;font:700 12px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.steps b{font-size:17px;letter-spacing:-.015em;color:var(--ink)}
.steps span{font-size:15px;color:var(--text-soft)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 64px;align-items:start}
.split + .split{margin-top:72px}
.split .sub{margin-bottom:0}
.rows{margin:0;border-top:1px solid var(--line)}
.rows div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.rows dt{font-weight:700;letter-spacing:-.01em}
.rows dd{margin:0;color:var(--text-soft)}
.band{background:var(--surface)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.checks li{display:flex;gap:12px;align-items:baseline}
.checks li:before{content:"";flex:none;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(-45deg)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-size:17px;font-weight:650;letter-spacing:-.01em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;border-radius:6px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:none;color:var(--muted);font-weight:400;font-size:22px;line-height:1;transition:transform .25s var(--ease)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{margin:10px 0 0;color:var(--text-soft);font-size:15.5px;max-width:720px}
.cta{text-align:center}
.cta .sub,.cta .lede{margin-left:auto;margin-right:auto}
.cta .actions{justify-content:center}

/* Home page blocks (home.css may override) */
#how h2,#who h2{margin-bottom:28px}
.nots ul{list-style:none;padding:0;margin-top:0;margin-bottom:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 64px}
.nots li{display:flex;flex-direction:column;gap:4px;font-size:16px;color:var(--text-soft)}
.nots li span{font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.025em;font-weight:750;color:var(--ink)}
.who{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.who div{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.who dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.who dd{margin:0;font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.015em}
.privacy{margin:32px 0 0;font-size:14.5px;color:var(--text-soft)}
.privacy a{color:var(--ink)}
.term{font-family:var(--mono);color:var(--ink);font-weight:700;margin-right:4px}
.closer{font-size:clamp(34px,5.4vw,64px);line-height:1.05;letter-spacing:-.045em;font-weight:850;margin:0 0 32px}

/* Reusable: callout box (pricing teaser, notices on other pages) */
.callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:32px 36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.callout .sub{margin-bottom:0}
.callout.soft{background:var(--soft);border-color:transparent;box-shadow:none}

/* Reusable: inner-page hero and long-form text */
.page-hero{padding-top:88px;padding-bottom:48px}
.page-hero h1{font-size:clamp(36px,5.2vw,60px);line-height:1.05;letter-spacing:-.042em;font-weight:850;margin:0 0 18px;max-width:860px;text-wrap:balance}
.page-hero .lead{margin:0}
.prose{max-width:720px}
.prose h2{font-size:24px;letter-spacing:-.025em;margin:48px 0 12px}
.prose h3{font-size:17px;margin:32px 0 8px}
.prose p,.prose li{color:var(--text-soft)}
.prose a{color:var(--ink)}
.prose ul,.prose ol{padding-left:20px}
.prose li{margin:6px 0}
.prose li::marker{color:var(--muted)}

/* Forms */
label{font-size:14px;font-weight:600;color:var(--ink)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:11px 14px;width:100%;max-width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
textarea{min-height:120px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
input[type=checkbox],input[type=radio]{accent-color:var(--ink);width:16px;height:16px}

/* Skip link and focus */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--btn);color:var(--btn-fg);padding:8px 14px;border-radius:9px;text-decoration:none;font-size:13.5px;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a:focus-visible,.button:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* Footer: .site-foot is the shared site footer */
footer .brand{color:var(--ink);font-size:14px}
footer .brand-logo{height:16px}
footer a{color:var(--text-soft);text-decoration:none}
footer nav a{transition:color .2s var(--ease)}
footer nav a:hover{color:var(--ink);text-decoration:underline}
.site-foot{border-top:1px solid var(--line);background:var(--surface);padding:64px 0 0;font-size:14px;color:var(--muted)}
.site-foot > .wrap:first-child{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 64px}
.foot-brand p{margin:14px 0 0;max-width:300px;color:var(--text-soft);font-size:15px;line-height:1.5}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-cols div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-cols h4{margin:0 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.foot-base{margin-top:56px;padding:20px 0 32px;width:calc(100% - 48px);max-width:1112px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px}

/* Social bubbles: round icon links to the project's accounts. Hidden (via [hidden]) until site.js finds a non-empty
   URL in site.json's "social" object; a platform with no URL is left out entirely. See assets/site.js. */
.social-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text-soft);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.social-row a:hover{background:var(--soft);color:var(--ink);border-color:var(--line-strong);transform:translateY(-1px)}
.social-row svg{width:17px;height:17px;display:block}
.community .social-row{justify-content:center;margin-top:24px}

/* Legal pages */
.doc{padding:72px 0 88px;max-width:760px}
.doc h1{font-size:clamp(32px,4.4vw,44px);line-height:1.08;letter-spacing:-.04em;font-weight:850;margin:0 0 8px}
.doc h2{font-size:20px;letter-spacing:-.02em;margin:40px 0 10px}
.doc p,.doc li{color:var(--text-soft)}
.doc a{color:var(--ink)}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.doc th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.doc pre{white-space:pre-wrap;overflow-wrap:anywhere}
.list{margin:0;padding-left:18px;color:var(--text-soft)}
.list li{margin:6px 0}
.list b{color:var(--ink);font-weight:650}

@media (max-width:900px){
  .grid,.steps{grid-template-columns:1fr 1fr}
  .split,.who{grid-template-columns:1fr}
  .site-foot > .wrap:first-child{grid-template-columns:1fr}
}
/* Phones and narrow tablets: nav drops to a second, horizontally scrollable row */
@media (max-width:720px){
  html{scroll-padding-top:112px}
  .top .wrap{height:auto;flex-wrap:wrap;gap:0 12px;padding-top:12px}
  .top .brand{height:36px}
  .top .button.small{margin-left:auto}
  .top nav{order:3;width:100%;margin:0 -12px;padding:6px 0 8px;width:calc(100% + 24px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{padding:6px 12px;font-size:14px}
}
@media (max-width:760px){
  .mini-stage,.mini-actions #demoReset{display:none}
  .mini-fallback{display:block}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .grid,.steps{grid-template-columns:1fr}
  .hero{padding-top:56px;padding-bottom:56px}
  .page-hero{padding-top:56px;padding-bottom:32px}
  .actions .button{flex:1 1 auto}
  .mini{border-radius:var(--r)}
  .mini-build{display:none}
  .split + .split{margin-top:52px}
  .nots ul{grid-template-columns:1fr;gap:24px}
  .callout{padding:24px 20px}
  .site-foot{padding-top:44px}
  .foot-base{width:calc(100% - 32px)}
  .doc{padding:48px 0 64px}
}
@media (max-width:480px){
  .foot-cols{grid-template-columns:1fr 1fr}
  .top .brand-logo{height:15px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  html.js .strike:after{clip-path:inset(-20% 0 -20% 0)}
  html.js .reveal{opacity:1;transform:none}
}
@media print{
  .top,.site-foot,.skip{display:none}
  html.js .reveal{opacity:1;transform:none}
  html.js .strike:after{clip-path:inset(-20% 0 -20% 0)}
}