/* Bricolage Grotesque (display, numerals) + Hanken Grotesk (body) — variable woff2 from Google Fonts, self-hosted */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 700;font-display:swap;src:url("./BricolageGrotesque-normal-latin-ext-B82pxkPf.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 700;font-display:swap;src:url("./BricolageGrotesque-normal-latin-C23fTOVi.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:400;font-display:swap;src:url("./HankenGrotesk-italic-latin-ext-CMNHRspq.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:400;font-display:swap;src:url("./HankenGrotesk-italic-latin-CVACqyV4.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("./HankenGrotesk-normal-latin-ext-BzvT_elb.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("./HankenGrotesk-normal-latin-KjBMhMia.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Base palette — warm paper, warm ink, friendly blue accent */
:root{
--paper-0:#FFFBF5;--paper-50:#F8F2E8;--paper-100:#F1E9DC;--paper-200:#E6DCCC;--paper-300:#D3C8B7;
--ink-400:#9A8F80;--ink-500:#6F6557;--ink-600:#5C5348;--ink-700:#3F3830;--ink-800:#2A251F;--ink-900:#1D1914;
--night-0:#141210;--night-50:#1B1815;--night-100:#24201C;--night-200:#2F2A25;--night-300:#3D372F;
--blue-50:#EEF4FB;--blue-100:#D8E6F6;--blue-200:#B3CDEE;--blue-300:#86AEE3;--blue-400:#5B8FD6;--blue-500:#3E74C4;--blue-600:#2F5CA3;--blue-700:#254A85;--blue-800:#1C3966;--blue-900:#132746;
--peach-100:#FCE6D6;--peach-300:#F4B892;--peach-500:#E08A5A;--peach-700:#A9542B;
--sage-300:#B5BFA3;--sage-500:#7F8C6A;--sage-700:#56614A;
--moss-500:#5F7A4E;--moss-300:#9DB38B;
--brick-500:#B4513C;--brick-300:#DD8C78;
--slate-500:#6B6A86;--slate-300:#A9A8C2;

}

/* Semantic — light (default; explicit [data-theme="light"] wins over an inherited dark scope) */
:root,[data-theme="light"]{
--bg-app:var(--paper-50);
--surface-card:var(--paper-0);
--surface-sunken:var(--paper-100);
--surface-raised:#FFFFFF;
--surface-inverse:var(--ink-900);
--surface-bubble:var(--paper-100);/* coach messages in chat */
--border-subtle:var(--paper-200);
--border-strong:var(--paper-300);
--text-primary:var(--ink-900);
--text-secondary:var(--ink-600);
--text-tertiary:var(--ink-500);
--text-inverse:var(--paper-50);
--text-on-accent:var(--paper-0);
--accent:var(--blue-500);
--accent-hover:var(--blue-600);
--accent-pressed:var(--blue-700);
--accent-soft:var(--blue-50);
--accent-soft-strong:var(--blue-100);
--accent-text:var(--blue-600);
--recovery:var(--sage-500);
--recovery-soft:#ECEEE5;
--success:var(--moss-500);
--success-soft:#E8EEE1;
--success-text:#4F6943;/* 4.8:1+ on every light surface */
--danger:var(--brick-500);
--danger-soft:#F6E4DE;
--danger-text:#A04634;
--tint-blue:#E6EFFA;
--tint-peach:var(--peach-100);
--tint-sage:#E9EEDF;
--warm:var(--peach-500);
--warm-text:var(--peach-700);
--info:var(--slate-500);
--info-soft:#E4E9EE;
--info-text:#5B5A77;
--focus-ring:color-mix(in oklch, var(--blue-400) 45%, transparent);
--overlay:rgba(29,25,20,.36);
}

/* Semantic — dark */
[data-theme="dark"]{
--bg-app:var(--night-0);
--surface-card:var(--night-50);
--surface-sunken:#100E0C;
--surface-raised:var(--night-100);
--surface-inverse:var(--paper-50);
--surface-bubble:var(--night-100);/* sunken is darker than the page in dark mode */
--border-subtle:var(--night-200);
--border-strong:var(--night-300);
--text-primary:#F3EDE3;
--text-secondary:#B9AF9F;
--text-tertiary:#9C9182;/* 5:1+ on raised surfaces and tints */
--text-inverse:var(--ink-900);
--text-on-accent:var(--ink-900);
--accent:var(--blue-300);
--accent-hover:var(--blue-200);
--accent-pressed:var(--blue-400);
--accent-soft:#18202B;
--accent-soft-strong:#1F2B3B;
--accent-text:var(--blue-200);
--recovery:var(--sage-300);
--recovery-soft:#22251E;
--success:var(--moss-300);
--success-soft:#1F261B;
--success-text:var(--moss-300);
--danger:var(--brick-300);
--danger-soft:#2E1C17;
--danger-text:var(--brick-300);
--tint-blue:#1A2331;
--tint-peach:#2E2119;
--tint-sage:#1F251B;
--warm:var(--peach-300);
--warm-text:var(--peach-300);
--info:var(--slate-300);
--info-soft:#1C2127;
--info-text:var(--slate-300);
--focus-ring:color-mix(in oklch, var(--blue-300) 50%, transparent);
--overlay:rgba(0,0,0,.55);
}
:root{
--font-display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
--font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
--font-numeric:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;

--text-2xs:11px;--text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:22px;--text-xl:28px;--text-2xl:36px;--text-3xl:48px;--text-hero:64px;

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

--leading-tight:1.08;--leading-snug:1.25;--leading-normal:1.45;--leading-relaxed:1.6;
--tracking-tight:-0.015em;--tracking-display:-0.025em;--tracking-normal:0;--tracking-label:0.04em;

/* Semantic type roles */
--type-hero:700 var(--text-hero)/var(--leading-tight) var(--font-display);
--type-title:700 var(--text-2xl)/var(--leading-tight) var(--font-display);
--type-heading:700 var(--text-lg)/var(--leading-snug) var(--font-display);
--type-subheading:600 var(--text-md)/var(--leading-snug) var(--font-body);
--type-body:400 var(--text-base)/var(--leading-normal) var(--font-body);
--type-body-sm:400 var(--text-sm)/var(--leading-normal) var(--font-body);
--type-section:700 var(--text-md)/1.25 var(--font-display);
--type-label:500 var(--text-sm)/1.2 var(--font-body);
--type-caption:500 var(--text-xs)/1.35 var(--font-body);
}
:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--gutter-screen:20px;
--gap-stack:12px;
--gap-section:32px;
--hit-min:44px;

--radius-xs:8px;--radius-sm:12px;--radius-md:18px;--radius-lg:24px;--radius-xl:32px;--radius-pill:999px;
--radius-control:var(--radius-md);
--radius-card:var(--radius-lg);
--radius-sheet:var(--radius-xl);
}
:root,[data-theme="light"]{
--shadow-1:0 1px 2px rgba(60,42,20,.06);
--shadow-2:0 1px 2px rgba(60,42,20,.05),0 6px 18px -6px rgba(60,42,20,.12);
--shadow-3:0 2px 6px rgba(60,42,20,.06),0 18px 40px -12px rgba(60,42,20,.22);
}
:root{
--shadow-card:var(--shadow-1);
--shadow-sheet:var(--shadow-3);

--ease-out:cubic-bezier(.22,.8,.3,1);/* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1);/* @kind other */
--ease-spring:cubic-bezier(.34,1.4,.64,1);/* @kind other */
--dur-fast:120ms;/* @kind other */--dur-base:200ms;/* @kind other */--dur-slow:320ms;/* @kind other */--dur-calm:600ms;/* @kind other */

--press-scale:.97;/* @kind other */
--blur-bar:saturate(1.4) blur(16px);/* @kind other */
}
[data-theme="dark"]{
--shadow-1:0 0 0 1px rgba(255,240,220,.03);
--shadow-2:0 0 0 1px rgba(255,240,220,.04),0 8px 24px -8px rgba(0,0,0,.6);
--shadow-3:0 0 0 1px rgba(255,240,220,.05),0 24px 48px -12px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg-app);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:var(--tracking-tight);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--text-primary)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.num{font-family:var(--font-numeric);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight)}
/* ============ Site CSS — every class is prefixed s- ============ */
html[data-theme=dark]{color-scheme:dark}
html{scroll-padding-top:80px}
body{overflow-x:clip;min-height:100vh;background:var(--bg-app)}
[tabindex="-1"]:focus{outline:none}
button{font-family:inherit}
.s-boot{padding:72px 20px;text-align:center;font:var(--type-body);color:var(--text-tertiary)}
noscript{display:block;padding:24px 20px;text-align:center;font:var(--type-body);color:var(--text-secondary)}
.s-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.s-skip{position:fixed;left:12px;top:-80px;z-index:200;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--radius-pill);background:var(--surface-inverse);color:var(--text-inverse);font:600 var(--text-base)/1 var(--font-body);text-decoration:none;transition:top var(--dur-fast) var(--ease-out)}
.s-skip:focus{top:10px;color:var(--text-inverse)}

/* type helpers */
.s-kicker{font:var(--type-label);color:var(--text-tertiary)}
.s-h2{font:var(--type-title);letter-spacing:var(--tracking-display)}
.s-h3{font:var(--type-heading);letter-spacing:var(--tracking-tight)}
.s-sect{font:var(--type-section);letter-spacing:var(--tracking-tight);margin:0}
.s-sub{font:var(--type-subheading);margin:0}
.s-body{font:var(--type-body);color:var(--text-secondary)}
.s-bodysm{font:var(--type-body-sm);color:var(--text-secondary)}
.s-cap{font:var(--type-caption);color:var(--text-tertiary)}
.s-label{font:var(--type-label);color:var(--text-tertiary)}
.s-row{display:flex;align-items:center}
.s-col{display:flex;flex-direction:column}
.s-textbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-primary);font:600 var(--text-sm)/1 var(--font-body);cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.s-textbtn:hover{background:var(--surface-sunken)}
@media (max-width:767px){.s-h2{font-size:28px}}

/* layout */
.s-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.s-wrap{padding:0 24px}}
@media (min-width:1024px){.s-wrap{padding:0 32px}}

/* top bar */
.s-top{position:sticky;top:0;z-index:30;background:var(--bg-app);border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--ease-out)}
.s-top.is-line{border-bottom-color:var(--border-subtle)}
.s-top-in{height:64px;display:flex;align-items:center;gap:8px}
.s-appicon{display:block;flex:none;border-radius:22.4%;box-shadow:0 0 0 1px color-mix(in oklch,var(--text-primary) 8%,transparent)}
.s-mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 22px/1 var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-primary);text-decoration:none;flex:none}
.s-mark:hover{color:var(--text-primary)}
.s-fill{flex:1;min-width:0}
.s-navlinks{display:none;gap:2px;margin-right:8px}
.s-navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--radius-pill);font:var(--type-label);color:var(--text-secondary);text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.s-navlink:hover{background:var(--surface-sunken);color:var(--text-primary)}
.s-only-wide{display:none!important}
@media (min-width:768px){.s-navlinks{display:flex}.s-only-wide{display:inline-flex!important}.s-only-narrow{display:none!important}}

/* hero */
.s-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "card" "notice";gap:40px;max-width:640px;margin:0 auto;padding:32px 0 0}
.s-hero-intro{grid-area:intro;display:flex;flex-direction:column;gap:20px}
.s-hero-card{grid-area:card}
.s-hero-notice{grid-area:notice}
.s-hero h1{font:700 clamp(40px,6vw,64px)/1.08 var(--font-display);letter-spacing:var(--tracking-display);text-wrap:balance}
.s-lede{font:400 var(--text-md)/1.5 var(--font-body);color:var(--text-secondary);max-width:32em}
.s-ctas{display:flex;flex-wrap:wrap;gap:12px}
.s-capline{display:flex;align-items:center;gap:8px;font:var(--type-caption);color:var(--text-tertiary)}
.s-phone-preview-link{align-self:flex-start;font:600 var(--text-sm)/1.4 var(--font-body);color:var(--accent-text);text-underline-offset:4px}
.s-phone-preview-link:hover{color:var(--accent-hover)}
.s-notice{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.s-notice ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.s-notice li{display:flex;align-items:flex-start;gap:8px;font:var(--type-body-sm);color:var(--text-secondary)}
.s-notice li svg{margin-top:2px}
@media (max-width:767px){.s-ctas>*{width:100%}}
@media (min-width:1024px){
  .s-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"intro card" "notice card";grid-template-rows:auto auto;column-gap:64px;row-gap:36px;align-content:center;max-width:none;min-height:min(760px,calc(100vh - 64px));padding:32px 0}
  .s-hero-intro{align-self:end}
  .s-hero-card{align-self:center}
  .s-hero-notice{align-self:start}
}
.s-qcard{display:flex;flex-direction:column;gap:18px}
.s-bar{display:flex;gap:6px;flex:1;min-width:0}
.s-bar>span{height:4px;flex:1;border-radius:var(--radius-pill);background:var(--border-subtle);transition:background var(--dur-base) var(--ease-out)}
.s-bar>span.on{background:var(--accent)}
.s-answers{display:flex;flex-direction:column;gap:8px}
.s-answer{display:flex;align-items:center;gap:14px;min-height:64px;width:100%;padding:12px 16px 12px 12px;border:0;border-radius:var(--radius-md);background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text-primary);text-align:left;text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.s-answer:hover{background:var(--surface-sunken)}
.s-answer:active{transform:scale(.985)}
.s-answer .s-arrow{color:var(--text-tertiary);transition:transform var(--dur-fast) var(--ease-out)}
.s-answer:hover .s-arrow{transform:translateX(2px)}
.s-disc44{width:44px;height:44px;flex:none;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-text);display:flex;align-items:center;justify-content:center}
.s-alabel{font:600 var(--text-base)/1.3 var(--font-body)}
.s-adesc{font:var(--type-body-sm);color:var(--text-tertiary)}

/* sections */
.s-section{padding-top:64px;scroll-margin-top:72px}
@media (min-width:1024px){.s-section{padding-top:96px}}
.s-sechead{display:flex;flex-direction:column;gap:12px;max-width:640px;margin-bottom:40px}
.s-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.s-beat{margin:0;display:flex;flex-direction:column;gap:24px}
.s-beat figcaption{display:flex;flex-direction:column;gap:6px;max-width:320px;margin:0 auto;width:100%}
.s-beatlist{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-direction:column;gap:20px}
.s-beatlist li{display:flex;gap:14px;align-items:flex-start}
.s-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px 24px}
.s-features li{display:flex;flex-direction:column;gap:8px}
.s-features .s-disc44{margin-bottom:6px}
@media (min-width:768px){.s-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.s-features{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}}

/* mock phone */
.s-phone{position:relative;overflow:hidden;margin:0 auto;flex:none;background:var(--bg-app);box-shadow:0 0 0 1px var(--border-subtle),var(--shadow-3)}
.s-phone-in{width:390px;height:844px;transform-origin:0 0;display:flex;flex-direction:column;background:var(--bg-app);color:var(--text-primary);font:var(--type-body)}
.s-phone-status{height:50px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 34px;font:600 15px/1 var(--font-body)}
.s-phone-body{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.m-top{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;flex:none}
.m-top>.s-kicker{padding-right:8px}
.m-content{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 20px 120px}
.m-h1{font:var(--type-title);letter-spacing:var(--tracking-display);text-wrap:pretty}
.m-bottom{position:absolute;left:0;right:0;bottom:0;padding:20px 20px 34px;background:linear-gradient(to top,var(--bg-app) 70%,transparent)}
.m-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.m-sday{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0}
.m-sini{font:var(--type-caption);color:var(--text-tertiary)}
.m-sday.is-today .m-sini{color:var(--text-primary);font-weight:600}
.m-sdisc{position:relative;width:40px;height:40px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font:600 17px/1 var(--font-numeric);font-variant-numeric:tabular-nums;color:var(--text-tertiary)}
.m-sday.is-planned .m-sdisc{color:var(--accent-text)}
.m-sday.is-done .m-sdisc{background:var(--success-soft);color:var(--success-text)}
.m-sday.is-today .m-sdisc{background:var(--surface-inverse);color:var(--text-inverse)}
.m-scheck{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:var(--success);color:var(--surface-card);box-shadow:0 0 0 2px var(--bg-app)}
.m-sdot{width:5px;height:5px;border-radius:var(--radius-pill)}
.m-sday.is-planned .m-sdot{background:var(--accent)}
.m-steps-today{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface-sunken)}
.m-stepdisc{width:40px;height:40px;flex:none;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:var(--surface-card);color:var(--text-secondary)}
.m-num{font:600 18px/1 var(--font-numeric);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.m-srow{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0}
.m-srow+.m-srow{border-top:1px solid var(--border-subtle)}
.m-nav{position:absolute;left:20px;right:94px;bottom:24px;height:64px;border-radius:var(--radius-pill);padding:6px;display:flex;gap:4px;background:color-mix(in oklch,var(--surface-raised) 72%,transparent);backdrop-filter:var(--blur-bar);-webkit-backdrop-filter:var(--blur-bar);border:1px solid color-mix(in oklch,var(--border-subtle) 80%,transparent);box-shadow:var(--shadow-2)}
.m-chat{position:absolute;right:20px;bottom:24px;width:64px;height:64px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:var(--surface-inverse);color:var(--text-inverse);box-shadow:var(--shadow-2)}
.m-tab{flex:1;height:52px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-tertiary)}
.m-tab.is-on{flex:2;color:var(--text-primary);font:600 14px/1 var(--font-body);background:color-mix(in oklch,var(--text-primary) 7%,transparent)}
.m-compose{position:absolute;left:0;right:0;bottom:0;padding:8px 20px 30px;display:flex;flex-direction:column;gap:10px;background:var(--bg-app)}
.m-input{flex:1;min-width:0;height:52px;padding:0 18px;display:flex;align-items:center;border-radius:26px;border:1px solid var(--border-strong);background:var(--surface-card);font:var(--type-body);color:var(--text-tertiary)}
.s-stack8{display:flex;flex-direction:column;gap:8px}

/* closing band + footer */
.s-band{margin-top:64px;background:var(--tint-blue);border-radius:var(--radius-xl);padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.s-band .s-ctas{align-self:stretch;margin-top:10px}
@media (min-width:768px){.s-band{padding:48px;align-items:center;text-align:center}.s-band .s-ctas{justify-content:center}}
@media (min-width:1024px){.s-band{margin-top:96px}}
.s-footer{margin-top:64px;border-top:1px solid var(--border-subtle)}
.s-footer-in{padding-top:32px;padding-bottom:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.s-footer p{font:var(--type-caption);color:var(--text-tertiary)}
.s-footmark{font:600 15px/1 var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-primary)}

/* chat pieces, for the change mockup */
.s-bubble{max-width:85%;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--surface-bubble);color:var(--text-primary);font:var(--type-body);overflow-wrap:anywhere;align-self:flex-start;text-wrap:pretty}
.s-bubble.is-me{align-self:flex-end;border-radius:20px 20px 6px 20px;background:var(--accent);color:var(--text-on-accent)}
.s-fine{display:flex;align-items:center;gap:6px;font:var(--type-caption);color:var(--text-tertiary)}
.s-change{align-self:stretch;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.s-chead{padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px}
.s-crow{display:flex;gap:12px;padding:12px 18px;border-top:1px solid var(--border-subtle)}
.s-cday{width:44px;flex:none;display:flex;flex-direction:column;gap:3px;padding-top:2px}
.s-cday b{font:600 15px/1 var(--font-body)}
.s-ctitle{font:600 var(--text-base)/1.3 var(--font-body)}
.s-diff{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 15px/1.35 var(--font-body);font-variant-numeric:tabular-nums}
.s-diff s{color:var(--text-tertiary);text-decoration-thickness:1.5px}
.s-diff strong{font-weight:600;color:var(--text-primary)}
.s-cfoot{padding:12px 18px 14px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:12px}
.s-cfoot:empty{display:none}
.s-rdisc{width:32px;height:32px;flex:none;border-radius:var(--radius-pill);background:var(--accent-soft-strong);color:var(--accent-text);display:flex;align-items:center;justify-content:center}

@media (prefers-reduced-motion: reduce){
  :root{--dur-fast:1ms;--dur-base:1ms;--dur-slow:1ms;--dur-calm:1ms}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}