/* site.css (B2): DESIGN.md s6-s10, ARCH T1/T2/T6/T8. data-theme wins, else prefers-color-scheme. Class contract: run/b2/CLASS_CONTRACT.md */
:root{
color-scheme:light;
--bg:#F6F8FB;
--panel:#FFFFFF;
--panel-hover:#F1F5F9;
--input-bg:#F1F5F9;
--text:#0F172A;
--text-secondary:#334155;
--muted:#5B6675;
--accent:#0E7490;
--accent-hover:#155E75;
--btn-text:#FFFFFF;
--focus-ring:#0891B2;
--border:#D9E1EA;
--field-border:#868B91;
--danger:#B91C1C;
--danger-bg:#FDECEC;
--success:#15803D;
--notice-bg:#E9F5F8;
--scrim:rgba(0, 0, 0,.62);
--shadow-1:0 1px 2px rgba(15, 23, 42,.06), 0 4px 16px rgba(15, 23, 42,.06);
--font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--fs-display:clamp(2.25rem, 1.6rem + 2.9vw, 4rem);
--fs-h2:clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
--fs-h3:clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
--fs-lead:clamp(1.0625rem, 1rem + .3vw, 1.25rem);
--fs-body:1rem;
--fs-small:.875rem;
--fs-eyebrow:.8125rem;
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
--dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;
--ease:cubic-bezier(.2,.7,.2, 1);
--header-h:56px;
--gutter:16px;
--gap:12px;
--section-pad:64px;
--card-pad:24px;
}
/* dark:attribute, then no-JS OS preference */
:root[data-theme="dark"]{
color-scheme:dark;
--bg:#070B10;--panel:#0E141C;--panel-hover:#1A2431;--input-bg:#090E15;
--text:#F8FAFC;--text-secondary:#C4CFDC;--muted:#94A3B8;
--accent:#22D3EE;--accent-hover:#67E8F9;--btn-text:#06202A;--focus-ring:#67E8F9;
--border:#253041;--field-border:#556E95;
--danger:#FB7185;--danger-bg:#2A1518;--success:#4ADE80;--notice-bg:#102734;
--shadow-1:none;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--bg:#070B10;--panel:#0E141C;--panel-hover:#1A2431;--input-bg:#090E15;
--text:#F8FAFC;--text-secondary:#C4CFDC;--muted:#94A3B8;
--accent:#22D3EE;--accent-hover:#67E8F9;--btn-text:#06202A;--focus-ring:#67E8F9;
--border:#253041;--field-border:#556E95;
--danger:#FB7185;--danger-bg:#2A1518;--success:#4ADE80;--notice-bg:#102734;
--shadow-1:none;
}
}
@media (min-width:640px){ :root{ --header-h:64px;} }
@media (min-width:768px){ :root{ --gutter:24px;--gap:16px;--section-pad:96px;--card-pad:32px;} }
@media (min-width:1024px){ :root{ --gap:24px;} }
@media (min-width:1440px){ :root{ --header-h:72px;--gutter:32px;--section-pad:128px;} }
/* base */
*, *::before, *::after{ box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
margin:0;min-width:0;background:var(--bg);color:var(--text);
font-family:var(--font);font-size:var(--fs-body);line-height:1.6;
}
img, video, svg{ display:block;max-width:100%;}
img, video{ height:auto;}
h1, h2, h3{ margin:0 0 var(--s-4);color:var(--text);text-wrap:balance;}
h1{ font-size:var(--fs-display);line-height:1.05;font-weight:750;letter-spacing:-.02em;}
h2{ font-size:var(--fs-h2);line-height:1.15;font-weight:700;letter-spacing:-.015em;}
h3{ font-size:var(--fs-h3);line-height:1.25;font-weight:650;}
p, ul, ol, dl, table, pre, blockquote{ margin:0 0 var(--s-4);}
p, li, dd, label, summary, a, td.mono{ overflow-wrap:anywhere;}
td, th{ overflow-wrap:break-word;}
p{ max-width:68ch;}
a{ color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:.18em;transition:color var(--dur-fast) var(--ease);}
a:hover{ color:var(--accent-hover);text-decoration-thickness:2px;}
strong, b{ font-weight:650;}
hr{ border:0;border-top:1px solid var(--border);margin:var(--s-6) 0;}
code, kbd,.mono{ font-family:var(--font-mono);font-size:.9375em;}
/* focus ring, never removed (DESIGN s10.6) */
:focus-visible{ outline:3px solid var(--focus-ring);outline-offset:2px;}
:focus:not(:focus-visible){ outline:none;}
/* utilities */
.muted{ color:var(--muted);}
.small, small{ font-size:var(--fs-small);line-height:1.5;}
.lead{ font-size:var(--fs-lead);line-height:1.5;color:var(--text-secondary);max-width:60ch;}
.eyebrow{
display:block;margin:0 0 var(--s-3);font-size:var(--fs-eyebrow);line-height:1.2;
font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}
.visually-hidden,.tg-hidden{
position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
position:absolute;left:var(--s-4);top:-100px;z-index:100;padding:var(--s-3) var(--s-4);
background:var(--panel);color:var(--text);border:2px solid var(--accent);border-radius:var(--r-sm);
font-weight:650;text-decoration:none;
}
.skip:focus,.skip:focus-visible{ top:var(--s-2);}
[hidden]{ display:none !important;}
/* layout */
.container,.container-wide{
width:100%;max-width:calc(1200px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);
}
.container-wide{ max-width:calc(1320px + 2 * var(--gutter));}
main{ display:block;min-width:0;}
main:focus{ outline:none;}
.site-section{ padding-block:var(--section-pad);scroll-margin-top:var(--header-h);}
.site-section + .site-section{ border-top:1px solid var(--border);}
[id]{ scroll-margin-top:calc(var(--header-h) + var(--s-4));}
.section-head{ margin-bottom:var(--s-6);max-width:68ch;}
.section-head > :last-child,.section-intro > :last-child{ margin-bottom:0;}
.section-intro{ max-width:68ch;color:var(--text-secondary);}
.card-grid{
display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
margin:0 0 var(--s-6);padding:0;list-style:none;
}
/* buttons */
.cta, button, input[type="submit"]{ font:inherit;}
.cta, button[type="submit"], input[type="submit"]{
display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
min-height:44px;padding:10px 20px;border:2px solid var(--accent);border-radius:var(--r-pill);
background:var(--accent);color:var(--btn-text);font-weight:650;font-size:var(--fs-body);
line-height:1.2;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:break-word;cursor:pointer;
transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.cta:hover, button[type="submit"]:hover, input[type="submit"]:hover{
background:var(--accent-hover);border-color:var(--accent-hover);color:var(--btn-text);text-decoration:none;
}
.cta.secondary{ background:transparent;color:var(--accent);}
.cta.secondary:hover{ background:var(--notice-bg);color:var(--accent);border-color:var(--accent-hover);}
.cta.ghost{ background:transparent;border-color:transparent;color:var(--accent);text-decoration:underline;
text-underline-offset:.18em;}
.cta.ghost:hover{ background:transparent;border-color:transparent;color:var(--accent-hover);}
.cta.big, button.big{ min-height:48px;padding:12px 24px;font-size:1.0625rem;}
.cta-row{ display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin:var(--s-6) 0 var(--s-4);}
.cta-row > .cta,.nav-cta{ min-width:max-content;white-space:nowrap;}
button.link{
min-height:44px;padding:0 var(--s-2);border:0;background:none;color:var(--accent);
font-weight:500;text-decoration:underline;text-underline-offset:.18em;cursor:pointer;
}
button.link:hover{ color:var(--accent-hover);}
form.inline{ display:inline;margin:0;}
/* header */
.site-header{
position:sticky;top:0;z-index:50;height:var(--header-h);
background:var(--panel);border-bottom:1px solid var(--border);
}
.header-inner{
display:flex;align-items:center;gap:var(--s-3);height:100%;flex-wrap:nowrap;
width:100%;max-width:calc(1320px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);
}
.brand{
flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;margin-right:auto;
color:var(--text);font-weight:750;font-size:1.125rem;letter-spacing:.02em;text-decoration:none;
white-space:nowrap;
}
.brand:hover{ color:var(--text);text-decoration:none;}
.nav{ display:none;align-items:center;gap:var(--s-1);flex:0 1 auto;min-width:0;white-space:nowrap;}
.nav a,.menu-panel a{
min-width:44px;justify-content:center;
display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-2);
border-radius:var(--r-sm);color:var(--text-secondary);font-size:.9375rem;font-weight:500;
text-decoration:none;white-space:nowrap;
}
.nav a:hover,.menu-panel a:hover{ color:var(--text);background:var(--panel-hover);}
.nav a[aria-current="page"],.nav a.is-current{ color:var(--text);box-shadow:inset 0 -2px 0 var(--accent);}
.nav-cta.cta{ flex:0 0 auto;min-height:44px;padding:8px 14px;font-size:.875rem;}
.theme-toggle{
flex:0 0 44px;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;
border:1px solid var(--field-border);border-radius:var(--r-pill);background:transparent;
color:var(--text);font-size:0;line-height:0;cursor:pointer;overflow:hidden;
}
.theme-toggle:hover{ background:var(--panel-hover);}
.theme-toggle svg{ width:20px;height:20px;}
/* I1: theme.js rewrites the button's text (kept as-is, shared with the app), so the icon is a CSS
   pseudo-element keyed on data-theme-pref: half disc = system (also the no-JS default),
   filled disc + dotted ring = light, crescent = dark. No data: URIs (ARCH T4). */
.theme-toggle::before{ content:"";display:block;box-sizing:border-box;width:18px;height:18px;
border:2px solid currentColor;border-radius:50%;
background:linear-gradient(90deg, currentColor 50%, transparent 50%);}
:root[data-theme-pref="light"] .theme-toggle::before{ width:10px;height:10px;border:0;
background:currentColor;outline:2px dotted currentColor;outline-offset:2px;}
:root[data-theme-pref="dark"] .theme-toggle::before{ width:16px;height:16px;border:0;
background:transparent;box-shadow:inset 5px -3px 0 0 currentColor;}
.menu{ position:static;flex:0 0 auto;}
.menu > summary{
display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;min-width:44px;
padding:0 var(--s-3);border:1px solid var(--field-border);border-radius:var(--r-pill);
color:var(--text);font-weight:600;font-size:.9375rem;cursor:pointer;list-style:none;user-select:none;
}
.menu > summary::-webkit-details-marker{ display:none;}
.menu > summary svg{ width:20px;height:20px;}
.menu-panel{
position:absolute;left:0;right:0;top:100%;z-index:49;display:grid;gap:var(--s-1);
padding:var(--s-3) var(--gutter) var(--s-5);background:var(--panel);
border-bottom:1px solid var(--border);box-shadow:var(--shadow-1);
}
.menu-panel a{font-size:var(--fs-body);justify-content:flex-start;}
@media (min-width:640px){
.nav{ display:flex;}
.menu{ display:none;}
}
@media (max-width:639.98px){
.menu > summary{ padding:0;justify-content:center;width:44px;}
.menu > summary > span{ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
}
@media (max-width:1023.98px){ .header-inner{ gap:var(--s-2);} .nav{ gap:2px;} .nav a{ padding:0 6px;font-size:.875rem;} }
@media (min-width:1024px){ .nav{ gap:var(--s-2);} .nav a{ padding:0 var(--s-3);} .header-inner{ gap:var(--s-4);} .nav-cta.cta{ padding:8px 18px;font-size:.9375rem;} }
@media (max-width:379.98px){ .header-inner{ gap:6px;padding-inline:12px;} .brand{ font-size:1rem;} .nav-cta.cta{ padding:8px 12px;} }
/* hero */
.site-hero{ padding-block:var(--s-7) var(--section-pad);}
.site-hero > .container-wide,.hero-inner{ display:grid;gap:var(--s-7);align-items:center;}
.hero-copy{ min-width:0;}
.hero-copy h1{ max-width:22ch;margin-bottom:var(--s-5);}
.hero-copy .lead{ margin-bottom:0;}
.hero-copy .cta-row{ flex-direction:column;align-items:stretch;}
.hero-copy .cta-row > .cta{ width:100%;}
.hero-note{ margin:0;color:var(--muted);font-size:var(--fs-small);}
.hero-cluster{
display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap);
margin:0;padding:0;list-style:none;align-items:center;grid-auto-flow:dense;
}
@media (min-width:480px){
.hero-copy .cta-row{ flex-direction:row;align-items:center;}
.hero-copy .cta-row > .cta{ width:auto;}
}
@media (min-width:768px){ .hero-cluster{ width:70%;margin-inline:auto;} }
@media (min-width:1024px){
.site-hero{ padding-block:var(--s-8) var(--section-pad);}
.site-hero > .container-wide,.hero-inner{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--s-8);}
.hero-cluster{ width:100%;grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);}
.hero-cluster > :nth-child(1){ transform:translateY(-6%);}
.hero-cluster > :nth-child(3){ transform:translateY(6%);}
.hero-cluster > .is-open{ transform:none;}
}
/* video button: DOM + state hooks = run/b4/B4_JS_CONTRACT.md (site.js) */
.clip-cell{ position:relative;min-width:0;margin:0;}
.clip{
position:relative;display:block;width:100%;aspect-ratio:9 / 16;margin:0;padding:0;
border:0;border-radius:var(--r-lg);overflow:hidden;background:var(--panel-hover);
color:#FFFFFF;font:inherit;text-align:left;cursor:pointer;isolation:isolate;
transition:box-shadow var(--dur-base) var(--ease);
}
.clip-video,.clip img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
pointer-events:none;
}
.clip-caption{
position:absolute;left:var(--s-2);bottom:var(--s-2);z-index:2;max-width:calc(100% - 2 * var(--s-2));
padding:4px 10px;border-radius:var(--r-sm);background:var(--scrim);color:#FFFFFF;
font-size:var(--fs-small);line-height:1.35;font-weight:400;
}
.clip-caption b{ font-weight:650;}
.clip-play{
position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;
width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
background:var(--scrim);color:#FFFFFF;font-size:var(--fs-small);line-height:1.3;
transition:opacity var(--dur-fast) var(--ease);
}
.clip-play::before{
content:"";width:16px;height:18px;margin-left:4px;background:#FFFFFF;
clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.clip-play:not(:empty)::before{ display:none;}
.clip:hover,.clip.is-preview{ box-shadow:0 0 0 1px var(--accent);}
.clip.is-preview .clip-play,.clip.is-open:not(.is-paused):not(.is-failed) .clip-play{ opacity:0;}
/* failed: "Clip unavailable" text chip */
.clip.is-failed .clip-play,.clip-play:not(:empty){
width:auto;height:auto;max-width:calc(100% - 16px);margin:0;transform:translate(-50%, -50%);
padding:6px 12px;border-radius:var(--r-sm);text-align:center;opacity:1;
}
@media (max-width:1023.98px){ .hero-cluster .clip-caption{ display:none;} }
.clip-bar{ position:absolute;inset:0;z-index:3;pointer-events:none;}
.clip-bar[hidden]{ display:none;}
.clip-bar button{
position:absolute;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;
min-width:44px;min-height:44px;padding:0 14px;border:1px solid rgba(255, 255, 255,.7);border-radius:var(--r-pill);
background:var(--scrim);color:#FFFFFF;font:inherit;font-size:var(--fs-small);font-weight:600;cursor:pointer;
}
.clip-close{ top:var(--s-2);right:var(--s-2);}
.clip-toggle{ bottom:var(--s-2);left:var(--s-2);}
.clip-noscript{ display:inline-block;margin-top:var(--s-2);font-size:var(--fs-small);}
/* open */
.clip-cell.is-open{ grid-column:span 2;grid-row:span 2;align-self:start;}
.clip.is-open .clip-caption{ display:none;}
.clip.is-open,.clip[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--accent);}
.hero-cluster > .clip-cell.is-open{ grid-column:1 / -1;grid-row:auto;}
/* showcase */
.showcase-grid{
display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gap);grid-auto-flow:dense;
margin:0;padding:0;list-style:none;
}
.showcase-hint{ margin:calc(-1 * var(--s-3)) 0 var(--s-5);min-height:1.5em;}
.hint-fine,.hint-touch{ margin:0;color:var(--muted);font-size:var(--fs-small);}
.hint-fine{ display:none;}
@media (hover:hover) and (pointer:fine){ .hint-fine{ display:block;} .hint-touch{ display:none;} }
@media (min-width:768px){ .showcase-grid{ grid-template-columns:repeat(3, minmax(0, 1fr));} }
@media (min-width:1024px){ .showcase-grid{ grid-template-columns:repeat(4, minmax(0, 1fr));} }
/* X1 (FIXLIST F1): fewer than 3 cleared clips -> 2-up hero + centred 2-up showcase, no empty grid cells */
.hero-cluster.is-few{ grid-template-columns:repeat(2, minmax(0, 1fr));}
@media (min-width:768px){ .hero-cluster.is-few{ width:56%;} .showcase-grid.is-few{ grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (min-width:1024px){
.hero-cluster.is-few{ width:100%;max-width:560px;margin-inline:auto;grid-template-columns:repeat(2, minmax(0, 1fr));}
.hero-cluster.is-few > :nth-child(2){ transform:translateY(6%);}
.hero-cluster.is-few > .is-open{ transform:none;}
}
.showcase-grid.is-few{ max-width:720px;margin-inline:auto;}
/* cards:how it works */
.card,.step-card,.plan-card,.run-tile,.form-card{
min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);
box-shadow:var(--shadow-1);padding:var(--card-pad);
}
.card{ margin:0 0 var(--s-5);}
.card > :last-child,.step-card > :last-child,.run-tile > :last-child{ margin-bottom:0;}
.steps{ display:grid;gap:var(--gap);margin:0;padding:0;list-style:none;counter-reset:step;}
.step-card{ position:relative;display:flex;flex-direction:column;counter-increment:step;}
.step-media{
margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--s-5);overflow:hidden;
border-radius:var(--r-md) var(--r-md) 0 0;border-bottom:1px solid var(--border);background:var(--panel-hover);
}
.step-media img,.step-media video{ width:100%;height:auto;object-fit:cover;}
.step-num{
display:inline-grid;place-items:center;width:32px;height:32px;margin-bottom:var(--s-3);
border-radius:50%;background:var(--notice-bg);color:var(--accent);font-weight:750;font-size:var(--fs-small);
}
.step-num:empty::before{ content:counter(step);}
.step-card p{ color:var(--text-secondary);}
@media (min-width:1024px){ .steps{ grid-template-columns:repeat(3, minmax(0, 1fr));}
.step-media{ aspect-ratio:16/10;display:grid;place-items:center;}
.step-media img,.step-media video{ width:100%;height:100%;object-fit:contain;} }
/* plans */
.plan-grid{ display:grid;gap:var(--gap);align-items:stretch;margin:0 0 var(--s-6);row-gap:max(var(--gap), 24px);padding-top:12px;}
.plan-card{ position:relative;display:flex;flex-direction:column;gap:var(--s-3);}
.plan-card h3{ margin:0;}
.plan-sub{ margin:0;color:var(--text-secondary);}
.plan-step{ margin:0;color:var(--muted);font-size:var(--fs-small);}
.plan-items{ display:grid;gap:var(--s-3);margin:var(--s-2) 0 var(--s-4);padding:0;list-style:none;}
.plan-items li{ padding-left:var(--s-5);position:relative;}
.plan-items li::before{
content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;
border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}
.plan-tool{ display:block;font-weight:650;color:var(--text);}
.plan-what{ display:block;color:var(--muted);font-size:var(--fs-small);}
.plan-items .inherit{ color:var(--text-secondary);font-style:italic;}
.plan-card > .cta{ margin-top:auto;align-self:stretch;}
.plan-badge{
display:none;position:absolute;top:-13px;left:20px;padding:1px 10px;border-radius:var(--r-pill);
border:1px solid var(--accent);background:var(--notice-bg);color:var(--accent);font-size:var(--fs-small);font-weight:650;line-height:1.6;
}
/* current plan:badge text + border */
.plan-card.is-current{ border:2px solid var(--accent);}
.plan-card.is-current .plan-badge{ display:inline-block;}
.plan-notes{ color:var(--muted);font-size:var(--fs-small);max-width:68ch;}
@media (min-width:768px){
.plan-grid{ grid-template-columns:repeat(3, minmax(0, 1fr));}
.plan-card{ padding:var(--s-5);}
}
@media (min-width:1440px){
.plan-card{ padding:var(--s-6);}
.plan-card.featured{ border-color:var(--accent);}
}
/* what runs where + credits */
.runs-grid{ display:grid;gap:var(--gap);margin:0 0 var(--s-5);padding:0;list-style:none;}
.run-icon{ width:24px;height:24px;margin-bottom:var(--s-3);color:var(--accent);}
.run-tile p{ color:var(--text-secondary);}
.credits-strip{
display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;
padding:var(--s-5);border-radius:var(--r-md);background:var(--notice-bg);color:var(--text);
}
.credits-strip p{ margin:0;flex:1 1 280px;}
@media (min-width:768px){ .runs-grid{ grid-template-columns:repeat(3, minmax(0, 1fr));} }
/* getting started */
.start-steps{ display:grid;gap:var(--gap);margin:0;padding:0;list-style:none;counter-reset:start;}
.start-steps > li{
position:relative;counter-increment:start;padding:var(--s-5) var(--s-5) var(--s-5) 64px;
background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-secondary);
}
.start-steps > li::before{
content:counter(start);position:absolute;left:var(--s-5);top:var(--s-5);display:grid;place-items:center;
width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--btn-text);
font-weight:750;font-size:var(--fs-small);
}
.start-steps strong{ color:var(--text);display:block;}
@media (min-width:1024px){
.start-steps{ grid-template-columns:repeat(4, minmax(0, 1fr));}
.start-steps > li{ padding:64px var(--s-5) var(--s-5);}
}
/* FAQ */
.faq-list{ display:grid;gap:0 var(--s-6);align-items:start;max-width:68ch;}
.faq-item{ border-bottom:1px solid var(--border);}
.faq-item:first-child{ border-top:1px solid var(--border);}
.faq-item > summary{
display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:48px;
padding:var(--s-3) var(--s-1);color:var(--text);font-weight:600;cursor:pointer;list-style:none;
border-radius:var(--r-sm);
}
.faq-item > summary::-webkit-details-marker{ display:none;}
.faq-item > summary::after{
content:"";flex:0 0 auto;width:9px;height:9px;margin-right:6px;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-base) var(--ease);
}
.faq-item[open] > summary::after{ transform:translateY(2px) rotate(225deg);}
.faq-item > summary:hover{ color:var(--accent);}
.faq-answer{ padding:0 var(--s-1) var(--s-4);color:var(--text-secondary);}
.faq-answer > :last-child{ margin-bottom:0;}
@media (min-width:1440px){
.faq-list{ max-width:none;grid-template-columns:repeat(2, minmax(0, 1fr));}
.faq-list > .faq-item:nth-child(2){ border-top:1px solid var(--border);}
}
/* final CTA band + footer */
.cta-band{
padding:var(--s-8) var(--card-pad);border-radius:var(--r-lg);background:var(--panel);
border:1px solid var(--border);box-shadow:var(--shadow-1);text-align:center;
}
.cta-band h2,.cta-band p{ margin-inline:auto;}
.cta-band .cta-row{ justify-content:center;margin-bottom:0;}
.site-footer{
padding-block:var(--s-7);background:var(--panel);border-top:1px solid var(--border);
color:var(--muted);font-size:var(--fs-small);
}
.footer-inner{ width:100%;max-width:calc(1200px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);}
.site-footer p{ margin:0 0 var(--s-2);max-width:none;}
.footer-nav{ display:flex;flex-wrap:wrap;gap:0 var(--s-2);margin-bottom:var(--s-4);}
.footer-nav a{
display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-2);color:var(--text-secondary);
}
.footer-nav a:hover{ color:var(--accent-hover);}
/* forms + account pages */
.form-card,.auth-card{ width:100%;max-width:440px;margin:var(--s-7) auto;}
form{ margin:0 0 var(--s-5);}
label{ display:block;margin:var(--s-4) 0 var(--s-2);color:var(--text);font-weight:600;font-size:.9375rem;}
label:first-of-type{ margin-top:0;}
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea{
display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--field-border);
border-radius:var(--r-sm);background:var(--input-bg);color:var(--text);font:inherit;line-height:1.4;
}
input::placeholder, textarea::placeholder{ color:var(--muted);opacity:1;}
input:focus-visible, select:focus-visible, textarea:focus-visible{ border-color:var(--accent);}
input[aria-invalid="true"]{ border-color:var(--danger);}
input[type="checkbox"], input[type="radio"]{ width:20px;height:20px;accent-color:var(--accent);}
form button[type="submit"]{ margin-top:var(--s-5);}
form.inline button[type="submit"]{ margin-top:0;}
.field-hint{ margin:var(--s-1) 0 0;color:var(--muted);font-size:var(--fs-small);}
.error,.notice,.success{
margin:var(--s-4) 0;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);border-left:4px solid;
max-width:68ch;
}
.error{ background:var(--danger-bg);color:var(--danger);border-color:var(--danger);}
.notice{ background:var(--notice-bg);color:var(--text);border-color:var(--accent);}
.success{ background:var(--notice-bg);color:var(--text);border-color:var(--success);}
.error::before{ content:"! ";font-weight:750;}
main > .error, main > .notice{ margin-inline:auto;width:calc(100% - 2 * var(--gutter));max-width:1200px;}
.pill{
display:inline-block;padding:1px 10px;border-radius:var(--r-pill);border:1px solid var(--field-border);
font-size:var(--fs-small);font-weight:600;color:var(--text-secondary);background:var(--panel);
}
.pill.on{ border-color:var(--success);color:var(--success);}
.pill.off{ color:var(--muted);}
.table-wrap{ width:100%;overflow-x:auto;margin:0 0 var(--s-5);}
table{ width:100%;max-width:100%;border-collapse:collapse;font-size:.9375rem;}
th, td{ padding:var(--s-3);border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
th{ color:var(--text);font-weight:650;}
td{ color:var(--text-secondary);}
.check-list{ padding-left:1.25em;}
.check-list li{ margin-bottom:var(--s-2);}
.legal{ max-width:76ch;margin-inline:auto;}
.legal h2{ font-size:var(--fs-h3);margin-top:var(--s-6);}
.qr img{ width:160px;height:160px;border-radius:var(--r-sm);background:#FFFFFF;padding:8px;}
.balance{ font-size:var(--fs-h3);font-weight:700;color:var(--text);}
main > .container:first-child, main > .narrow{ padding-block:var(--s-7);}
.narrow{ width:100%;max-width:calc(760px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);}
/* motion */
@media (prefers-reduced-motion:no-preference){
html{ scroll-behavior:smooth;}
}
@media (prefers-reduced-motion:reduce){
:root{ --dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;}
*, *::before, *::after{
animation-duration:0ms !important;animation-iteration-count:1 !important;
transition-duration:0ms !important;scroll-behavior:auto !important;
}
.clip:hover,.clip.is-preview:not(.is-open){ box-shadow:none;}
.clip.is-preview:not(.is-open) .clip-play{ opacity:1;}
}
/* print */
@media print{
:root, :root[data-theme="dark"], :root:not([data-theme="light"]){
color-scheme:light;--bg:#FFFFFF;--panel:#FFFFFF;--panel-hover:#FFFFFF;--input-bg:#FFFFFF;
--text:#000000;--text-secondary:#222222;--muted:#444444;--accent:#000000;--accent-hover:#000000;
--btn-text:#000000;--border:#999999;--field-border:#666666;--notice-bg:#FFFFFF;--shadow-1:none;
}
@page{ margin:16mm;}
body{ font-size:11pt;line-height:1.45;}
.site-header,.skip,.menu,.theme-toggle,.nav,.hero-cluster,.showcase-grid,
.showcase-hint,.clip-bar, video,.cta-row,.nav-cta, form.inline{ display:none !important;}
.site-section,.site-hero{ padding-block:12pt;}
.card,.step-card,.plan-card,.run-tile,.start-steps > li,.cta-band,.credits-strip{
break-inside:avoid;box-shadow:none;border:1px solid #999999;
}
h2, h3{ break-after:avoid;}
a{ color:#000000;}
main a[href^="http"]::after, main a[href^="mailto:"]::after{ content:" (" attr(href) ")";font-size:9pt;}
details.faq-item::details-content{ content-visibility:visible;display:block;}
.faq-item > summary::after{ display:none;}
.cta{ border:1px solid #000000;background:none;color:#000000;}
}
/* Daniel 2026-10-04: a clip is never shown twice. With < 4 cleared clips the hero has ONE tile and the
   showcase grid holds the rest; .is-one keeps a single tile at a sensible width (no stretched video). */
.hero-cluster.is-one{ grid-template-columns:minmax(0, 1fr);max-width:320px;margin-inline:auto;}
.hero-cluster.is-one > :nth-child(1){ transform:none;}
.showcase-grid.is-one{ grid-template-columns:minmax(0, 1fr);max-width:320px;margin-inline:auto;}
@media (min-width:768px){ .hero-cluster.is-one,.showcase-grid.is-one{ max-width:340px;} }
@media (min-width:1024px){ .hero-cluster.is-one{ max-width:360px;} .showcase-grid.is-one{ grid-template-columns:minmax(0, 1fr);} }

/* Daniel 2026-10-04: empty showcase -> app captures instead of video tiles */
.hero-cluster.is-still{ max-width:640px;}
.hero-still img,.showcase-still img{ display:block;width:100%;height:auto;border-radius:var(--radius, 14px);border:1px solid var(--line, rgba(255,255,255,.08));}
.showcase-empty{ margin:0 0 var(--s-5, 24px);}
@media (min-width:768px){ .showcase-grid.is-few .showcase-still{ align-self:start;} }