/* jotmatic.com — one stylesheet for every page.
   Colours, radii and shadows are the Jotmatic design-system tokens (design/brand/design-system/tokens.css in the app repo):
   light = Fern, dark = Midnight, picked by prefers-color-scheme. Shantell Sans 700 for display only; the system UI face for everything else.
   File names under /assets carry a version (.v1.) and are cached for a year: when you change this file, save it as site.v2.css
   and update the <link> in tools/build.py. */

@font-face{font-family:"Shantell Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/shantell-sans-bold.v1.woff2") format("woff2")}

:root{
  --paper:#FBF8F1;--surface:#FFFDF8;--surface-raised:#FFFFFF;--surface-sunken:#F3EEE3;
  --ink:#1C2621;--ink-secondary:#57584D;--ink-tertiary:#6C6859;
  --hairline:#E6DFCF;--border:#8A8270;
  --brand:#245E4E;--brand-pressed:#1A4A3D;--on-brand:#FBF8F1;--brand-tint:#E3EDE4;
  --record:#E5302A;--record-text:#B8251F;--record-ring:#245E4E;--record-tint:#FBE4DE;
  --focus:#2B7A64;--success:#2E7240;
  --logo-ink:#245E4E;
  --mode-note:#94590A;--mode-note-tint:#FAEEDA;
  --mode-meeting:#4552C4;--mode-meeting-tint:#E8EAFA;
  --mode-lecture:#1D63AD;--mode-lecture-tint:#E2EDF8;
  --mode-interview:#7F3AA3;--mode-interview-tint:#F1E6F6;
  --mode-lesson:#2A7545;--mode-lesson-tint:#E2EFE5;
  --shadow-card:0 1px 2px rgba(42,38,28,.05),0 4px 16px rgba(42,38,28,.06);
  --shadow-raised:0 2px 6px rgba(42,38,28,.08),0 18px 44px rgba(42,38,28,.14);
  --shadow-record:0 6px 20px rgba(229,48,42,.30),0 2px 6px rgba(229,48,42,.20);
  --device:#1C2621;
  --font-brand:"Shantell Sans",ui-rounded,system-ui,sans-serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
  --width-readable:680px;--width-page:1120px;
  --gutter:16px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0F1A2E;--surface:#16233A;--surface-raised:#1D2B45;--surface-sunken:#0A1322;
  --ink:#F3EEDF;--ink-secondary:#B3BACB;--ink-tertiary:#8E98AE;
  --hairline:#26354F;--border:#6A7B9C;
  --brand:#7FD1B0;--brand-pressed:#A0DEC4;--on-brand:#0F1A2E;--brand-tint:#1A3638;
  --record:#FF4A3F;--record-text:#FF6A60;--record-ring:#F3EEDF;--record-tint:#3A1D20;
  --focus:#8FE3C4;--success:#7ED39A;
  --logo-ink:#F3EEDF;
  --mode-note:#F2C14E;--mode-note-tint:#332D24;
  --mode-meeting:#A3ACFF;--mode-meeting-tint:#252C52;
  --mode-lecture:#82C0F8;--mode-lecture-tint:#1A3150;
  --mode-interview:#D3A2F2;--mode-interview-tint:#2E2A4F;
  --mode-lesson:#7FD89A;--mode-lesson-tint:#183832;
  --shadow-card:0 1px 2px rgba(3,8,18,.40),0 0 0 1px rgba(243,238,223,.04);
  --shadow-raised:0 2px 6px rgba(3,8,18,.50),0 18px 48px rgba(3,8,18,.60),0 0 0 1px rgba(243,238,223,.06);
  --shadow-record:0 0 0 6px rgba(255,74,63,.12),0 6px 28px rgba(255,74,63,.34);
  --device:#060C17;
}}
@media (prefers-contrast:more){:root{--hairline:var(--border);--ink-secondary:var(--ink)}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;font:17px/1.6 var(--font-ui);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;display:block}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--brand-pressed);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
strong{font-weight:650}
p{margin:0 0 1em}
h1,h2,h3{color:var(--ink);text-wrap:balance}
h1,h2,.display{font-family:var(--font-brand);font-weight:700;letter-spacing:.01em}
h3{font:650 18px/1.35 var(--font-ui);margin:0 0 6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--width-page) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
@media (min-width:600px){:root{--gutter:24px}}
@media (min-width:1000px){:root{--gutter:40px}}

.skip{position:absolute;left:var(--gutter);top:12px;transform:translateY(-200%);z-index:10;background:var(--surface-raised);color:var(--brand);font-weight:650;padding:12px 16px;border-radius:var(--radius-md);box-shadow:var(--shadow-raised)}
.skip:not(:focus){box-shadow:none;clip-path:inset(50%)}
.skip:focus{transform:none}

/* Logo: the one-line lockup, inlined so it follows the theme. Record dot stays red in both themes. */
.lg-ink{fill:var(--logo-ink)}
.lg-ring{fill:none;stroke:var(--logo-ink)}
.lg-dot{fill:var(--record)}
@media (forced-colors:active){.lg-ink{fill:CanvasText}.lg-ring{stroke:CanvasText}.lg-dot{fill:CanvasText}}

/* ---------- Header and navigation ---------- */
.site-header{position:relative;z-index:5}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:inline-flex;align-items:center;min-height:48px;padding:6px 0;border-radius:var(--radius-sm);flex:0 0 auto}
.brand .logo{display:block;height:34px;width:auto}
.nav-desktop{display:none}
.nav-desktop ul,.menu ul{list-style:none;margin:0;padding:0}
.nav-desktop ul{display:flex;align-items:center;gap:4px}
.nav-desktop a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--radius-pill);font-size:15.5px;font-weight:550;color:var(--ink-secondary);text-decoration:none}
.nav-desktop a:hover{color:var(--ink);background:var(--surface-sunken)}
.nav-desktop a[aria-current="page"],.menu a[aria-current="page"]{color:var(--brand);font-weight:650}
.nav-desktop .nav-cta{margin-left:8px;background:var(--brand);color:var(--on-brand);padding:0 18px}
.nav-desktop .nav-cta:hover{background:var(--brand-pressed);color:var(--on-brand)}

/* Phone menu: a native <details>, so it works with no script and is announced as expanded/collapsed. */
.menu{position:relative}
.menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu .bars{display:block;width:16px;height:12px;position:relative}
.menu .bars::before,.menu .bars::after,.menu .bars span{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor}
.menu .bars::before{top:0}.menu .bars span{top:5px}.menu .bars::after{bottom:0}
.menu[open] .bars span{opacity:0}
.menu[open] .bars::before{top:5px;transform:rotate(45deg)}
.menu[open] .bars::after{bottom:5px;transform:rotate(-45deg)}
.menu .panel{position:absolute;right:0;top:calc(100% + 8px);width:min(280px,calc(100vw - 2*var(--gutter)));background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:8px}
.menu .panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--radius-md);color:var(--ink);text-decoration:none;font-weight:550}
.menu .panel a:hover{background:var(--surface-sunken)}
.menu .panel .nav-cta{margin-top:6px;justify-content:center;background:var(--brand);color:var(--on-brand)}
@media (min-width:820px){
  .brand .logo{height:40px}
  .menu{display:none}
  .nav-desktop{display:block}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 24px;border-radius:var(--radius-pill);font:650 17px/1.25 var(--font-ui);text-decoration:none;text-align:center;background:var(--brand);color:var(--on-brand);border:2px solid transparent}
.btn:hover{background:var(--brand-pressed);color:var(--on-brand);text-decoration:none}
.btn-quiet{background:transparent;color:var(--brand);border-color:var(--hairline)}
.btn-quiet:hover{background:var(--brand-tint);color:var(--brand)}
/* App Store button: black with white text in light mode, white with black text in dark mode (Apple's badge colourways). */
.appstore{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:56px;padding:8px 22px 9px;border-radius:12px;background:#000;color:#fff;text-decoration:none;border:1px solid #A6A6A6;line-height:1.1}
.appstore small{font:500 12px/1.2 var(--font-ui);letter-spacing:.01em}
.appstore span{font:600 21px/1.15 var(--font-ui);letter-spacing:-.01em}
.appstore:hover{color:#fff;background:#1d1d1f;text-decoration:none}
@media (prefers-color-scheme:dark){.appstore{background:#fff;color:#000;border-color:#fff}.appstore:hover{background:#F2F2F2;color:#000}}

/* ---------- Home: hero ---------- */
.hero{padding:24px 0 56px;overflow:hidden}
.hero .wrap{display:grid;gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:14px;font-weight:650;letter-spacing:.02em;color:var(--brand);background:var(--brand-tint);padding:6px 14px 6px 10px;border-radius:var(--radius-pill)}
.eyebrow .rec{width:10px;height:10px;border-radius:50%;background:var(--record);box-shadow:0 0 0 2px var(--brand-tint),0 0 0 3.5px var(--record-ring)}
.hero h1{font-size:clamp(34px,10.5vw,66px);line-height:1.04;margin:0 0 28px}
.hero h1 .hl{color:var(--brand);position:relative;white-space:nowrap}
.hero h1 .hl svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.32em;overflow:visible}
.hero h1 .hl path{fill:none;stroke:var(--record);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lead{font-size:clamp(18px,2.4vw,21px);line-height:1.55;color:var(--ink-secondary);max-width:34em;margin:0 0 28px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 24px}
.cta-note{font-size:14px;color:var(--ink-tertiary);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips li{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;line-height:20px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
.chips svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:960px){
  .hero{padding:40px 0 88px}
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px}
}

/* ---------- Hero art: a Mac window with notes behind an iPhone recording. Sized in em; the em follows the container width. ---------- */
.art{container-type:inline-size;width:100%;max-width:620px;margin:0 auto}
.art-stage{position:relative;font-size:10px;font-size:calc(100cqi / 60);aspect-ratio:60/46;font-family:var(--font-ui);color:var(--ink);line-height:1.35}
.art-stage *{line-height:inherit}
.mac{position:absolute;right:0;top:0;width:47em;height:33em;border-radius:1.4em;background:var(--surface-raised);box-shadow:var(--shadow-raised);border:1px solid var(--hairline);overflow:hidden;display:grid;grid-template-rows:3em 1fr}
.mac-bar{display:flex;align-items:center;gap:.7em;padding:0 1.4em;background:var(--surface-sunken);border-bottom:1px solid var(--hairline)}
.mac-bar i{width:1.1em;height:1.1em;border-radius:50%;background:var(--hairline)}
.mac-bar i:nth-child(1){background:#FF5F57}.mac-bar i:nth-child(2){background:#FEBC2E}.mac-bar i:nth-child(3){background:#28C840}
.mac-bar b{margin-left:auto;margin-right:auto;font-size:1.2em;font-weight:600;color:var(--ink-secondary);transform:translateX(-2em)}
.mac-body{display:grid;grid-template-columns:13em 1fr;min-height:0}
.mac-side{background:var(--surface);border-right:1px solid var(--hairline);padding:1.2em .9em;display:flex;flex-direction:column;gap:.5em}
/* The sidebar sits behind the phone, so it is drawn as quiet placeholder rows rather than cut-off text. */
.sk{display:block;height:3.6em;border-radius:.8em;background:linear-gradient(var(--sk-bar),var(--sk-bar)) .9em 1em/68% .7em no-repeat,linear-gradient(var(--sk-bar),var(--sk-bar)) .9em 2.1em/42% .55em no-repeat;--sk-bar:var(--hairline)}
.sk.on{background-color:var(--brand-tint);--sk-bar:color-mix(in srgb,var(--brand) 35%,transparent)}
.sk-search{height:2.4em;margin-bottom:.4em;background:var(--surface-sunken)}
.mac-main{padding:1.8em 2.2em;overflow:hidden}
.tag{display:inline-flex;align-items:center;gap:.4em;font-size:1em;font-weight:650;padding:.25em .8em;border-radius:99em;background:var(--mode-meeting-tint);color:var(--mode-meeting)}
.mac-main h3{font-family:var(--font-brand);font-weight:700;font-size:2.3em;line-height:1.15;margin:.35em 0 .3em;letter-spacing:.01em}
.mac-main .meta-line{font-size:1.05em;color:var(--ink-tertiary);margin:0 0 1em}
.mac-main .sum{font-size:1.2em;color:var(--ink-secondary);margin:0 0 1.1em}
.mac-main h4{font-size:1.05em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tertiary);margin:0 0 .5em}
.todo{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:.45em}
.todo li{display:flex;gap:.7em;align-items:flex-start;font-size:1.2em}
.todo li::before{content:"";flex:none;width:1.05em;height:1.05em;margin-top:.15em;border-radius:.3em;border:.13em solid var(--border)}
.todo li.done::before{background:var(--brand);border-color:var(--brand)}
.todo li.done{color:var(--ink-tertiary);text-decoration:line-through}
.todo em{font-style:normal;color:var(--mode-meeting);font-weight:600}

.phone{position:absolute;left:0;bottom:0;width:21em;height:42em;border-radius:3.4em;background:var(--device);padding:.75em;box-shadow:var(--shadow-raised),0 30px 60px -20px rgba(0,0,0,.35)}
.screen{position:relative;height:100%;border-radius:2.7em;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;padding:3.4em 1.5em 1.6em}
.island{position:absolute;top:1em;left:50%;width:6.6em;height:1.9em;margin-left:-3.3em;border-radius:1em;background:#000}
.rec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9em}
.rec-pill{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1.1em;color:var(--record-text);background:var(--record-tint);padding:.3em .8em;border-radius:99em;font-variant-numeric:tabular-nums}
.rec-pill i{width:.75em;height:.75em;border-radius:50%;background:var(--record)}
.screen .tag{font-size:.95em}
.screen h3{font-family:var(--font-brand);font-size:1.75em;line-height:1.15;margin:0 0 .6em;font-weight:700}
.trace{display:block;width:100%;height:5.2em;margin:0 0 .8em}
.trace .line{fill:none;stroke:var(--logo-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.trace .ring{fill:none;stroke:var(--record-ring);stroke-width:2}
.trace .dot{fill:var(--record)}
.live{flex:1;display:flex;flex-direction:column;gap:.6em;font-size:1.08em;overflow:hidden;-webkit-mask-image:linear-gradient(to top,transparent,#000 22%);mask-image:linear-gradient(to top,transparent,#000 22%)}
.live p{margin:0;color:var(--ink-secondary)}
.live b{display:block;font-size:.85em;color:var(--ink-tertiary);font-weight:600}
.live p.now{color:var(--ink)}
.controls{display:flex;align-items:center;justify-content:space-between;padding-top:.8em}
.ctl{width:3.8em;height:3.8em;border-radius:50%;background:var(--surface-sunken);display:grid;place-items:center}
.ctl svg{width:1.6em;height:1.6em;fill:var(--ink)}
.stop{width:6em;height:6em;border-radius:50%;border:.28em solid var(--record-ring);display:grid;place-items:center;box-shadow:var(--shadow-record)}
.stop i{width:2.1em;height:2.1em;border-radius:.5em;background:var(--record)}

/* ---------- Sections ---------- */
.section{padding:72px 0}
.section-tight{padding:0 0 72px}
.section-head{max-width:760px;margin:0 0 40px}
.kicker{display:block;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin:0 0 10px}
.section h2,.section-tight h2{font-size:clamp(30px,5.4vw,46px);line-height:1.1;margin:0 0 16px}
.section-head p{font-size:clamp(17px,2vw,19px);color:var(--ink-secondary);margin:0}
.band{background:var(--surface-sunken)}
.band-brand{background:var(--brand);color:var(--on-brand)}
@media (min-width:960px){.section{padding:104px 0}}

/* How it works */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:step}
.steps li{position:relative;background:var(--surface);border-radius:var(--radius-xl);padding:28px 24px 24px;box-shadow:var(--shadow-card);counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font:700 20px/1 var(--font-brand);margin-bottom:16px}
.steps h3{font-family:var(--font-brand);font-weight:700;font-size:24px;letter-spacing:.01em}
.steps p{color:var(--ink-secondary);margin:0}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:20px}}

/* Modes */
.modes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin:0;padding:0;list-style:none}
.mode{border-radius:var(--radius-lg);padding:20px;background:var(--tint);border:1px solid transparent}
.mode h3{color:var(--tone);display:flex;align-items:center;gap:8px}
.mode h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tone);flex:none}
.mode p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.mode-meeting{--tone:var(--mode-meeting);--tint:var(--mode-meeting-tint)}
.mode-lecture{--tone:var(--mode-lecture);--tint:var(--mode-lecture-tint)}
.mode-interview{--tone:var(--mode-interview);--tint:var(--mode-interview-tint)}
.mode-note{--tone:var(--mode-note);--tint:var(--mode-note-tint)}
.mode-lesson{--tone:var(--mode-lesson);--tint:var(--mode-lesson-tint)}
@media (prefers-contrast:more){.mode{border-color:var(--tone)}}
.after-modes{margin:24px 0 0;color:var(--ink-secondary);max-width:var(--width-readable)}

/* Feature grid */
.features{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));list-style:none;margin:0;padding:0}
.feature{background:var(--surface);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-card)}
.feature .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--brand-tint);margin-bottom:16px}
.feature .ico svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature p{margin:0;color:var(--ink-secondary);font-size:16px;line-height:1.55}
.feature .pro{display:inline-block;margin-left:6px;vertical-align:2px;font:700 11px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:99px;background:var(--brand-tint);color:var(--brand)}

/* Privacy band */
.privacy-band{background:var(--brand);color:var(--on-brand)}
.privacy-band h2,.privacy-band h3{color:var(--on-brand)}
.privacy-band .kicker{color:var(--on-brand);opacity:.85}
.privacy-band .section-head p{color:var(--on-brand);opacity:.92}
.privacy-band a{color:var(--on-brand)}
.privacy-band :focus-visible{outline-color:var(--on-brand)}
.promises{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));list-style:none;margin:0 0 32px;padding:0}
.promises li{border-top:2px solid color-mix(in srgb,var(--on-brand) 35%,transparent);padding-top:16px}
.promises p{margin:0;opacity:.92;font-size:16px}
.privacy-band .btn{background:var(--on-brand);color:var(--brand)}
.privacy-band .btn:hover{background:var(--paper);color:var(--brand-pressed)}

/* Split sections: Mac, accessibility */
.split{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}.split.flip>:first-child{order:2}}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px;color:var(--ink-secondary)}
.ticks li strong{color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%23245E4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
@media (prefers-color-scheme:dark){.ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%237FD1B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}

/* Mac menu-bar panel illustration */
.panel-art{container-type:inline-size;max-width:440px;margin:0 auto;width:100%}
.panel-stage{font-size:10px;font-size:calc(100cqi / 40)}
.menubar{display:flex;align-items:center;justify-content:flex-end;gap:1.6em;height:2.8em;padding:0 1.4em;border-radius:1em 1em 0 0;background:var(--surface-raised);border:1px solid var(--hairline);border-bottom:0;font-size:1.2em;color:var(--ink-secondary)}
/* The menu-bar icon is a template image in the app (one ink, never coloured): drawn here in the menu-bar text colour. */
.menubar .mb-mark{display:inline-flex;align-items:center;justify-content:center;width:2.4em;height:1.9em;border-radius:.4em;background:var(--surface-sunken);color:var(--ink)}
.menubar .mb-mark svg{height:1.35em;width:auto;fill:currentColor}
.menubar .mb-ring{fill:none;stroke:currentColor}
.mpanel{background:var(--surface);border:1px solid var(--hairline);border-radius:0 0 1.6em 1.6em;padding:1.8em;box-shadow:var(--shadow-raised)}
.mp-top{display:flex;align-items:center;gap:1.4em;margin-bottom:1.6em}
.mp-rec{width:5.4em;height:5.4em;border-radius:50%;border:.26em solid var(--record-ring);display:grid;place-items:center;flex:none;box-shadow:var(--shadow-record)}
.mp-rec i{width:3.7em;height:3.7em;border-radius:50%;background:var(--record)}
.mp-top b{display:block;font-size:1.7em;font-family:var(--font-brand)}
.mp-top span{font-size:1.25em;color:var(--ink-secondary)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.3em;background:var(--surface-sunken);padding:.35em;border-radius:1em;margin-bottom:1.4em}
.seg span{text-align:center;padding:.7em .2em;border-radius:.7em;font-size:1.2em;font-weight:600;color:var(--ink-secondary)}
.seg span.on{background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-card)}
.meters{display:grid;gap:.7em}
.meter{display:grid;grid-template-columns:8em 1fr;align-items:center;gap:1em;font-size:1.15em;color:var(--ink-secondary)}
.meter i{display:block;height:.7em;border-radius:1em;background:linear-gradient(90deg,var(--brand) var(--lv),var(--surface-sunken) var(--lv))}
.m1{--lv:62%}.m2{--lv:38%}

/* Accessibility chips */
.a11y-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.a11y-list li{font-weight:600;font-size:15.5px;padding:10px 16px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-card)}

/* Pricing */
.plans{display:grid;gap:16px;align-items:stretch}
@media (min-width:820px){.plans{grid-template-columns:1fr 1fr;gap:24px}}
.plan{background:var(--surface);border-radius:var(--radius-xl);padding:32px 28px;box-shadow:var(--shadow-card);border:2px solid transparent;display:flex;flex-direction:column}
.plan.pro{border-color:var(--brand)}
.plan h3{font-family:var(--font-brand);font-weight:700;font-size:30px;margin:0 0 4px;letter-spacing:.01em}
.plan .price{font-size:18px;font-weight:650;color:var(--brand);margin:0 0 20px}
.plan .ticks{margin:0 0 24px}
.plan .fine{margin-top:auto;font-size:14px;color:var(--ink-tertiary)}
.plan .fine p{margin:0}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-of-type{border-top:1px solid var(--hairline)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;cursor:pointer;font-weight:650;font-size:18px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 12l5 5 5-5' fill='none' stroke='%23245E4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/28px no-repeat}
@media (prefers-color-scheme:dark){.faq summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 12l5 5 5-5' fill='none' stroke='%237FD1B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{color:var(--brand)}
.faq .answer{padding:0 0 20px;color:var(--ink-secondary);max-width:var(--width-readable)}
.faq .answer p:last-child{margin:0}

/* Closing call to action */
.closing{text-align:center}
.closing .app-icon{width:96px;height:96px;border-radius:22.37%;box-shadow:var(--shadow-raised);margin:0 auto 24px;display:block}
.closing h2{margin-bottom:12px}
.closing p{color:var(--ink-secondary);max-width:32em;margin:0 auto 28px}
.closing .cta-row{justify-content:center}

/* ---------- Documents: privacy, terms, support, accessibility, 404 ---------- */
.doc{padding:24px 0 72px}
.doc .wrap{max-width:calc(var(--width-readable) + 2*var(--gutter))}
.doc h1{font-size:clamp(36px,7vw,52px);line-height:1.1;margin:16px 0 12px}
.doc h2{font-size:clamp(23px,3.4vw,27px);line-height:1.25;margin:44px 0 10px}
.doc ul{padding-left:1.25em}
.doc li{margin:8px 0}
.doc .meta{font-size:14px;color:var(--ink-tertiary);margin:0 0 24px}
.doc .card{background:var(--brand-tint);border-radius:var(--radius-lg);padding:18px 20px;margin:24px 0;line-height:1.55}
.doc .note{background:var(--surface);border-radius:var(--radius-lg);padding:18px 20px;margin:12px 0;box-shadow:var(--shadow-card);color:var(--ink-secondary);line-height:1.55}
.doc .note strong{display:block;color:var(--ink);margin-bottom:4px}
.doc .note strong + br{display:none}
.table-scroll{overflow-x:auto;margin:16px 0 8px}
.labels{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:300px}
.labels th,.labels td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--hairline)}
.labels th{font-weight:650;color:var(--ink)}
.labels td{color:var(--ink-secondary)}
.labels td:nth-child(2),.labels td:nth-child(3){color:var(--ink)}
kbd{font:600 14px/1 var(--font-ui);padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);white-space:nowrap}
.notfound{text-align:center;padding:48px 0 96px}
.notfound .trace{max-width:320px;margin:0 auto 24px;height:auto}
.notfound p{color:var(--ink-secondary)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--hairline);background:var(--surface);padding:48px 0 40px;font-size:15px;color:var(--ink-secondary)}
.site-footer .wrap{display:grid;gap:32px}
.foot-brand .logo{height:60px;width:auto;display:block;margin-bottom:12px}
.foot-brand p{margin:0;max-width:26em}
.site-footer nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0 24px}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-weight:550}
.site-footer nav a:hover{color:var(--brand);text-decoration:underline}
.foot-small{font-size:14px;color:var(--ink-tertiary);display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.foot-small>span{display:inline-flex;align-items:center;min-height:44px;gap:.3em}
.foot-small a{color:var(--ink-secondary)}
.foot-small a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:820px){.site-footer .wrap{grid-template-columns:1.2fr 1fr}.foot-small{grid-column:1/-1}}

/* ---------- Motion: only for people who haven't asked for less ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .btn,.nav-desktop a,.menu .panel a,.faq summary::after,.appstore{transition:background-color .15s ease,color .15s ease,transform .2s ease}
  .btn:active,.appstore:active{transform:scale(.97)}
  .menu .bars::before,.menu .bars::after,.menu .bars span{transition:transform .2s ease,opacity .2s ease,top .2s ease,bottom .2s ease}
  .rec-pill i,.eyebrow .rec{animation:pulse 2s ease-in-out infinite}
  .trace .dot{animation:pulse 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .live p.now{animation:rise .6s ease-out both}
  .mp-rec i{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes pulse{50%{opacity:.55;transform:scale(.92)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}

@media print{.site-header nav,.menu,.skip,.site-footer nav{display:none}body{background:#fff;color:#000}}
.notfound .cta-row{justify-content:center}