/* Self-hosted Epunda Slab 400 and Plus Jakarta Sans 800 (Google Fonts, OFL). Do not load fonts.googleapis.com. */
@font-face{font-family:'Epunda Slab';font-style:normal;font-weight:400;font-display:swap;src:url(/relaunch/fonts/EpundaSlab-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Epunda Slab';font-style:normal;font-weight:400;font-display:swap;src:url(/relaunch/fonts/EpundaSlab-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/relaunch/fonts/PlusJakartaSans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/relaunch/fonts/PlusJakartaSans-latin.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}

/* Rubil homepage v3, October 4, 2026. Direction: apple.com/accessibility and otter.ai, as Bernard asked.
   Layout: a white page with grey bands between sections is avoided; sections alternate white and one light grey,
   and every idea sits on its own rounded tile with a soft tint and a real Rubil screen.
   Type: Inter for everything the site says and Rubil types; Epunda Slab for what a person says out loud;
   Atkinson from the reading settings.
   Single light look on purpose; every colour is set explicitly. */
:root{
  --bg:#FFFFFF;--bg2:#F5F5F7;--ink:#1D1D1F;--ink2:#6E6E73;--line:#D2D2D7;
  --act:#1A5CFF;--act-hi:#0F47D6;--act-ink:#FFFFFF;
  --t-butter:#FFF4C7;--t-peach:#FFE9DF;--t-sky:#E4F1FF;--t-mint:#E1F5EC;--t-lilac:#EEEAFF;--t-grey:#F5F5F7;
  --night:#16181D;--night-2:#23262D;--on-night:#F5F5F7;--on-night-2:#A1A1A6;
  --f-ui:"Inter Rubil","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-display:var(--f-ui);
  --f-said:"Epunda Slab",ui-serif,Georgia,serif;
  --f-read:"Atkinson Rubil","Atkinson Hyperlegible",sans-serif;
  --font:var(--f-ui);--font-d:var(--f-display);
  --wrap:68rem;--gutter:clamp(1rem,4vw,2.5rem);--r-tile:1.75rem;
  --ease:cubic-bezier(.2,.6,.2,1);
  /* The real app's own colours, for the rebuilt Rubil screens only (projects/rubil-mac src/tokens.css) */
  --banana-cream:#FFE54C;--safety-gold:#FFD700;--carbon:#0A0A0A;--white:#FFFFFF;
  --wash:color-mix(in srgb,#FFE54C 34%,#fff);--wash-edge:color-mix(in srgb,#FFE54C 62%,#fff);
  --link:color-mix(in srgb,#227C9D 85%,#181710);--muted:#525252;--surface:#FAFAFA;--mint-leaf:#00C49A;--molten-orange:#F24405;
  --cerulean:#227C9D;--ground:color-mix(in srgb,#FFE54C 22%,#fff);
  --shadow:0 0 0 1px rgba(10,10,10,.08),0 1px 2px rgba(10,10,10,.05);
  --shadow-frame:0 0 0 1px rgba(10,10,10,.08),0 18px 36px -12px rgba(10,10,10,.14);
  /* Rubil Glow (design system, October 5, 2026): colour is light, chosen by meaning */
  --ink-body:#3A3A3C;
  --glow-lilac:#E6DEFF;--glow-sun:#FFF5BB;--glow-sky:#DFE8FF;--glow-warm:#FCE1D2;--glow-cool:#C6DDE6;--glow-fresh:#C2F1E7;
  --tile-warm-base:#FFFBF7;--tile-cool-base:#F8FAFF;--tile-fresh-base:#F8FCF8;--panel-base:#F7F7F9;
  --glass-fill:rgba(255,255,255,.62);
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.6),0 12px 28px -18px rgba(20,20,40,.25);
  --shadow-act:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -10px rgba(26,92,255,.7);
  color-scheme:light;
}
@font-face{font-family:"Inter Rubil";src:url(/relaunch/fonts/ab041ad0b2.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Atkinson Rubil";src:url(/relaunch/fonts/a6af8828e8.woff2) format("woff2");font-weight:200 800;font-display:swap}
@media (prefers-contrast:more){:root{--ink2:#3A3A3C;--line:#86868B}}
html[data-size="125"]{font-size:125%}
html[data-size="150"]{font-size:150%}
html[data-font="atkinson"]{--font:var(--f-read);--font-d:var(--f-read)}
html[data-spacing="wider"] body{letter-spacing:.045em;word-spacing:.14em}
html.rm *,html.rm *::before,html.rm *::after{transition:none!important;animation:none!important}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
html:not(.rm){scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.125rem;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--font-d);text-wrap:balance;font-weight:600}
p,li{text-wrap:pretty}
a{color:var(--act);text-underline-offset:.2em}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:3px solid var(--act);outline-offset:3px;border-radius:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:.75rem;top:-5rem;z-index:100;background:var(--ink);color:#fff;padding:.625rem 1rem;border-radius:.625rem}
.skip:focus{top:.75rem}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.ic{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sel{user-select:all;font-weight:600}

.draft b{color:#fff}

/* Nav: slim and quiet, like Apple's local nav. No button: the hero holds the one action. */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav .wrap{min-height:3.5rem;display:flex;align-items:center;gap:.25rem 1.5rem;flex-wrap:wrap;position:relative}
.wm{display:flex;align-items:center;gap:.5rem;font-family:"Plus Jakarta Sans",var(--font-d);font-weight:800;font-size:1.3125rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none;margin-right:auto;min-height:2.75rem}
.wm img{width:1.625rem;height:1.625rem}
/* The lockup (2026-10-09): emblem 1.15x the wordmark cap, gap 0.4 cap, both on
   the baseline. The anchor is 2.75rem tall for the tap target, so the pair is
   centred in it and the emblem is lifted onto the baseline with a bottom margin
   (a centred flex item moves up by half its margin): wordmark 1.0625rem is a
   1.049rem cap plus .0136rem overshoot; emblem 1.2rem. Bottom-aligning the
   anchor's content put the logo 14px under the links (Bernard, 2026-10-09). */
.wm{align-items:center;gap:.42rem}
.wm .wm-emblem{width:auto;height:1.2rem;margin-bottom:.166rem}
.wm .wm-img{width:auto;height:1.0625rem}
.nav-links{display:flex;gap:1.5rem;font-size:.9375rem}
.nav-links a{color:var(--ink);text-decoration:none;opacity:.85;min-height:2.75rem;display:inline-flex;align-items:center}
.nav-links a:hover{opacity:1;text-decoration:underline}
.aa{display:inline-flex;align-items:center;gap:.375rem;min-height:2.75rem;padding:0 .875rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.9375rem;cursor:pointer}
.aa b{font-weight:700}
.aa[aria-expanded="true"]{border-color:var(--ink)}
.pop{position:absolute;right:var(--gutter);top:calc(100% + .5rem);width:min(23rem,calc(100vw - 2rem));background:#fff;border-radius:1.25rem;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 48px -16px rgba(0,0,0,.25);padding:1rem;z-index:60;display:grid;gap:.75rem}
.pop p{font-size:.875rem;color:var(--ink2)}
.pop .app{font-size:1.25rem}
@media (max-width:52rem){.nav-links{display:none}}

/* Buttons: one blue pill for the one action. Secondary actions are links with a chevron. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3.25rem;padding:0 1.625rem;border-radius:999px;border:0;background:var(--act);color:var(--act-ink);
  font:600 1.0625rem/1.2 var(--font);text-decoration:none;cursor:pointer;transition:background-color 140ms var(--ease)}
.btn:hover{background:var(--act-hi);color:#fff}
.btn.white{background:#fff;color:var(--act)}
.btn.white:hover{background:#EEF3FF}
.more{display:inline-flex;align-items:center;gap:.125rem;min-height:2.75rem;font-size:1.0625rem;text-decoration:none}
.more:hover{text-decoration:underline}
.more .ic{width:1.125rem;height:1.125rem}
.btn-soft{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.125rem;border-radius:999px;border:0;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);font-weight:600;font-size:1rem;cursor:pointer}

/* Sections */
.sec{padding-block:clamp(4rem,9vw,7rem)}
.sec.grey{background:var(--bg2)}
.h2{font-size:clamp(2rem,3.2vw + 1rem,3.25rem);line-height:1.08;letter-spacing:-.015em}
.statement{font-size:clamp(2.25rem,4vw + 1rem,4rem);line-height:1.05;letter-spacing:-.02em;text-align:center;max-width:52rem;margin-inline:auto}
.head{display:grid;gap:.875rem;max-width:44rem}
.lede{font-size:clamp(1.1875rem,.6vw + 1rem,1.375rem);line-height:1.45;color:var(--ink2);max-width:36rem}
.lbl{display:block;font-size:.9375rem;font-weight:600;color:var(--ink2)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:2rem clamp(2rem,5vw,4.5rem);align-items:start}
.cols .lede{margin-top:1rem}

/* Hero: Otter's arrangement. Words left, the product right on a softly tinted panel. */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.h1 .lead{display:block;font-size:clamp(3rem,5vw + 1rem,5.25rem);line-height:1;letter-spacing:-.025em;font-weight:700}
.h1 .for{display:block;margin-top:1.25rem;font-size:clamp(1.375rem,1vw + 1rem,1.75rem);line-height:1.3;font-weight:500;letter-spacing:-.01em;color:var(--ink2);max-width:25ch}
html[data-spacing="wider"] .h1 .lead,html[data-spacing="wider"] .h2,html[data-spacing="wider"] .statement{letter-spacing:0}
.sub{margin-top:1.5rem;font-size:1.25rem;max-width:30ch}
.cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem}
.support{margin-top:1rem;font-size:1rem;color:var(--ink2)}
.mail{display:none}
.mail label{font-weight:600;font-size:1rem}
.mail-row{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.625rem}
.mail input{flex:1 1 12rem;min-width:0;min-height:3.25rem;border-radius:999px;border:1px solid var(--line);padding:0 1.25rem;font-size:1.0625rem;background:#fff}
.mail .ok{margin-top:.5rem;font-weight:600}
@media (max-width:40rem){.hero .btn.desk,.hero .bb.desk{display:none}.mail{display:block;margin-top:2rem}.cta-row{margin-top:1rem}}
.stage-hero{position:relative;display:grid;gap:1.125rem;padding:clamp(1.25rem,3vw,2.25rem);border-radius:2rem;min-width:0;
  background:radial-gradient(120% 80% at 0% 0%,#FFF2C4 0,rgba(255,242,196,0) 55%),radial-gradient(90% 70% at 100% 20%,#E3EBFF 0,rgba(227,235,255,0) 60%),radial-gradient(80% 70% at 50% 100%,#FFE6DA 0,rgba(255,230,218,0) 65%),#F7F7F9}
.said-box{display:grid;gap:.25rem}
.said{font-family:var(--f-said);font-size:clamp(1.125rem,.6vw + 1rem,1.3125rem);line-height:1.5;color:var(--ink2)}
.said .w{transition:opacity 220ms var(--ease)}
.said .f.is-cut,.said .x{text-decoration:line-through;text-decoration-thickness:.08em;opacity:.55}
.said .x.kept{background:none;padding:0;opacity:1;text-decoration:none}
.said .x:not(.gone):not(.kept){text-decoration:none;opacity:1;background:#FFE58A;border-radius:.25rem;padding:0 .15em}
.win{border-radius:1.25rem;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 48px -24px rgba(0,0,0,.28);overflow:hidden}
.win-bar{display:flex;gap:.375rem;padding:.75rem 1rem;border-bottom:1px solid #EDEDF0}
.win-bar i{width:.625rem;height:.625rem;border-radius:50%;background:#D9D9DE}
.win-row{padding:.625rem 1.25rem;font-size:1rem;color:var(--ink2);border-bottom:1px solid #EDEDF0}
.win-row b{color:var(--ink);font-weight:500}
.win-body{padding:1rem 1.25rem .25rem;display:grid;gap:.375rem;min-height:7.5rem;align-content:start}
.win-body p{font-size:clamp(1.1875rem,.6vw + 1rem,1.375rem);line-height:1.45;font-weight:600;color:var(--ink)}
#typed{transition:opacity 420ms var(--ease)}
.caret{display:inline-block;width:2px;height:1.15em;background:var(--ink);vertical-align:-.18em;margin-left:1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.win-foot{display:flex;justify-content:center;min-height:4.25rem;align-items:center;padding:.5rem 1rem 1rem}
.play{display:flex;align-items:center;gap:.875rem;border:0;background:none;padding:.375rem;margin:-.375rem;border-radius:1rem;text-align:left;cursor:pointer;min-height:2.75rem;max-width:100%}
.play-ic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:#fff;flex:none;transition:transform 80ms}
.play:active .play-ic{transform:scale(.94)}
.play-ic .ic{width:1.125rem;height:1.125rem;margin-left:.125rem}
.play-txt{display:grid;gap:.125rem;min-width:0}
.play-txt b{font-size:1.0625rem;font-weight:600}
.play-txt span{font-size:.9375rem;color:var(--ink2)}

/* Tiles: Apple's rounded feature tiles, Otter's bento. One idea, one line, one real screen. */
.bento{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.bento.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{border-radius:var(--r-tile);padding:clamp(1.5rem,2.6vw,2.25rem);display:grid;gap:1.5rem;align-content:space-between;min-width:0;position:relative;overflow:hidden}
.span2{grid-column:span 2}.span3{grid-column:span 3}
.t-butter{background:var(--t-butter)}.t-peach{background:var(--t-peach)}.t-sky{background:var(--t-sky)}.t-mint{background:var(--t-mint)}.t-lilac{background:var(--t-lilac)}.t-grey{background:var(--t-grey)}.t-white{background:#fff}
.sec.grey .t-grey{background:#fff}
.tile-text{display:grid;gap:.5rem;align-content:start}
.tile h3{font-size:clamp(1.5rem,1vw + 1.1rem,1.875rem);line-height:1.15;letter-spacing:-.01em}
.tile-text p{font-size:1.0625rem;color:#3A3A3C;max-width:30rem}
.tile-text .note{font-size:.9375rem;color:var(--ink2)}
.tile-vis{display:grid;gap:1rem;min-width:0;container-type:inline-size}
.tile-vis.center{justify-items:center;align-content:end}
.tile-vis > *{max-width:100%;min-width:0}
.tile-vis .app:has(.ap-pill){font-size:min(18px,5.2cqi)}
.tile-vis > .app:has(.ap-win){width:100%;display:flex;justify-content:center}
.clean{background:#fff;border-radius:1rem;padding:1rem 1.25rem;display:grid;gap:.25rem;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.clean p{font-size:clamp(1.1875rem,.6vw + 1rem,1.375rem);line-height:1.45;font-weight:600;transition:opacity 220ms var(--ease)}
.tile .said-box .said{font-size:clamp(1.125rem,.5vw + 1rem,1.25rem)}
.ic.big{width:5rem;height:5rem;stroke-width:1.5;color:#5B4BC4}
.mini-field{width:100%;max-width:22rem;background:#fff;border-radius:.875rem;box-shadow:0 0 0 1px rgba(0,0,0,.08);padding:.75rem 1rem;font-size:1.0625rem;line-height:1.45;min-height:5.25rem}
.mini-field small{display:block;font-size:.8125rem;color:var(--ink2);margin-bottom:.125rem}
.take{width:100%;max-width:24rem;display:grid;gap:.375rem}
.take-track{display:flex;align-items:center;gap:2px;height:2.5rem;width:100%}
.take-track i{flex:1 1 0;min-width:2px;border-radius:2px;background:var(--ink)}
.take-track i.q{background:#B9B9BF;height:2px!important;border-radius:0}
.take-marks{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.wide{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:60rem){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.span3{grid-column:span 2}}
@media (max-width:40rem){.bento,.bento.two{grid-template-columns:minmax(0,1fr)}.span2,.span3{grid-column:auto}.wide{grid-template-columns:minmax(0,1fr)}}
.sw-row{display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem;font-weight:600;font-size:1rem;cursor:pointer;position:relative}
.sw-row input{position:absolute;opacity:0;width:3.25rem;height:2rem;margin:0;cursor:pointer}
.sw{width:3.25rem;height:2rem;border-radius:999px;background:#D1D1D6;position:relative;flex:none;transition:background-color 140ms var(--ease)}
.sw::after{content:"";position:absolute;left:.1875rem;top:.1875rem;width:1.625rem;height:1.625rem;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform 140ms var(--ease)}
.sw-row input:checked + .sw{background:#34C759}
.sw-row input:checked + .sw::after{transform:translateX(1.25rem)}
.sw-row input:focus-visible + .sw{outline:3px solid var(--act);outline-offset:3px}
.sw-row input:disabled + .sw{opacity:.5}

/* v5: accessibility-first structure */
.hero.c{text-align:center;padding-block:clamp(3.5rem,8vw,6.5rem) clamp(1rem,3vw,2rem)}
.hero.c .wrap{display:grid;justify-items:center}
.hero.c .h1 .lead{font-size:clamp(3.25rem,6vw + 1rem,6.5rem)}
.hero.c .h1 .for{margin-inline:auto;max-width:30ch}
.hero.c .cta-row{justify-content:center}
.hero.c .mail{text-align:left;width:min(100%,30rem)}
.eyebrow{font-size:1.0625rem;font-weight:600;color:var(--act);margin-bottom:1rem}
.head.center{margin-inline:auto;text-align:center;justify-items:center}
/* ── Rubil Glow. Glows by meaning; glass only on what holds product. On any glow, secondary text is --ink-body:
   --ink2 drops to 3.6 to 4.3:1 there. ── */
/* Gradients sparingly (Bernard, October 5, 2026): the hero's product panel is the page's one gradient.
   Tiles take their glow colour as a solid fill. */
.tile.g-warm,.tile.g-cool,.tile.g-fresh,.tile.g-sun{box-shadow:none}
.g-warm{background:var(--glow-warm)}
.g-cool{background:var(--glow-cool)}
.g-fresh{background:var(--glow-fresh)}
.g-sun{background:var(--glow-sun)}
.sit2 .sit2-vis{background:var(--glass-fill);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--shadow-glass)}
@media (prefers-reduced-transparency:reduce){.sit2 .sit2-vis{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
.stage-hero .lbl,.stage-hero .said,.tile[class*="g-"] .lbl,.tile[class*="g-"] .said,.tile[class*="g-"] .tile-text p,.tile[class*="g-"] .small{color:var(--ink-body)}
.tile[class*="g-"] a{color:var(--act-hi)}
.btn{box-shadow:var(--shadow-act)}
.btn:hover{box-shadow:var(--shadow-act)}
.btn.white,.btn.white:hover{box-shadow:none}

/* Each fold reads in one screen (Bernard, October 5, 2026): vertical rhythm follows the window's height,
   so a fold fits below the nav from 1280 x 720 up. Phones stack and scroll. */
.sec{padding-block:clamp(2.5rem,8vh,7rem)}
#for.sec{padding-block:clamp(1.5rem,4.5vh,4rem)}
#for .statement{font-size:clamp(1.875rem,min(3.4vw,5.4vh),3.5rem)}
#for .b-grid{margin-top:clamp(1rem,3vh,2.5rem);gap:clamp(.75rem,1.4vw,1.25rem)}
.sit2{padding:clamp(1rem,2.4vh,2rem) clamp(1.25rem,2vw,2rem);gap:clamp(.5rem,1.4vh,1.125rem)}
.sit2 .say{font-size:clamp(1.1875rem,min(1.9vw,3.1vh),1.75rem)}
.sit2 .who{font-size:.9375rem;margin-top:.375rem}
.sit2-vis{min-height:clamp(5rem,12vh,8.5rem);padding:.625rem}
.sit2 .helps{font-size:1rem}
.vis-key{gap:.625rem}
#for .b-grid.rec-grid{align-items:stretch}
#for .foot{margin-top:clamp(.75rem,2vh,1.75rem)}


:root{--glow-sun:#FFF5BB;--glow-warm:#FCE1D2;--glow-cool:#C6DDE6;--glow-fresh:#C2F1E7;--ink-body:#3A3A3C}
/* Apple-style card row. Solid fills by meaning (Rubil Glow). The section fits one screen: card height follows vh. */
.fc-sec{padding-block:clamp(2rem,6vh,5rem);overflow:hidden}
.fc-headrow .h2{font-size:clamp(2rem,min(3.4vw,6vh),3.25rem)}
.fc-rail{margin-top:clamp(1.25rem,3.5vh,2.5rem)}
.fc-rail.scroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));scroll-padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)))}
.fc-rail.scroll::-webkit-scrollbar{display:none}
html:not(.rm) .fc-rail.scroll{scroll-behavior:smooth}
.fc-rail.fixed{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.fc-row{display:flex;gap:1.25rem;list-style:none;padding:0;margin:0}
.fc-rail.scroll .fc-row{width:max-content}
.fc-rail.fixed .fc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.fc{position:relative;flex:none;width:clamp(17rem,26vw,23.5rem);height:clamp(28rem,64vh,37rem);border-radius:1.75rem;padding:clamp(1.25rem,3.4vh,2rem) clamp(1.25rem,2vw,2rem) 0;
  display:flex;flex-direction:column;overflow:hidden;scroll-snap-align:start}
.fc-rail.fixed .fc{width:auto}
.fill-warm{background:var(--glow-warm)}.fill-cool{background:var(--glow-cool)}.fill-fresh{background:var(--glow-fresh)}.fill-sun{background:var(--glow-sun)}.fill-alt{background:#F5F5F7}.fill-sky{background:var(--glow-sky)}
.fc-label{font-size:1.0625rem;font-weight:600;color:var(--ink-body)}
.fc-head{margin-top:.5rem;font-size:clamp(1.375rem,min(1.9vw,3.4vh),1.75rem);line-height:1.2;letter-spacing:-.015em;font-weight:600}
.fc-head.said-head,.dlg-t.said-head{font-family:var(--f-said);font-weight:400;letter-spacing:-.01em}
.fc-vis{flex:1;display:grid;place-items:center;padding:1rem 0 4.5rem;min-height:0;container-type:inline-size}
.fc-vis > div{width:100%;display:grid;justify-items:center;gap:1rem}
.fc-vis .app{font-size:min(1.25rem,5.2cqi)}
.fc-vis .app:has(.ap-pill){font-size:min(19px,4.6cqi)}
.v-key .kc{transform:scale(1.35);margin-bottom:1.25rem}
.v-words{gap:.75rem!important;justify-items:stretch!important}
.v-words .said{font-size:1.125rem;color:var(--ink-body)}.v-words .lbl{color:var(--ink-body)}
.v-words .clean p{font-size:1.125rem}
.v-keys{display:flex!important;flex-wrap:wrap;justify-content:center;gap:.75rem!important}
.v-keys .kcap{height:4rem;min-width:4.75rem}.v-keys .kcap.w{min-width:9.5rem}
.v-read .app,.v-find .app{width:100%}
.v-find{align-self:end;margin-bottom:-4.5rem}
.v-find .ap-win{max-width:none}
.v-lost .mini-field{max-width:none}
.take{max-width:none}
.kc{display:inline-grid;grid-template-rows:auto 1fr auto;width:5.5rem;height:5.5rem;padding:.5rem .625rem;border-radius:1rem;background:#fff;color:var(--ink);text-align:left;
  box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 #D2D2D7,0 14px 24px -12px rgba(0,0,0,.3)}
.kc-side{font-size:.6875rem;color:var(--ink2);text-align:right}.kc-sym{font-size:1.75rem;line-height:1;align-self:center}.kc-nm{font-size:.8125rem}
/* The whole card opens its panel; the + marks it, as on apple.com/accessibility */
.fc-open{position:absolute;inset:0;border:0;background:none;border-radius:inherit;cursor:pointer;z-index:2}
.fc-open:focus-visible{outline:3px solid var(--act);outline-offset:3px}
.fc-plus{position:absolute;right:1.25rem;bottom:1.25rem;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;z-index:1;
  transition:transform 140ms var(--ease)}
.fc-plus svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (hover:hover) and (pointer:fine){.fc:hover .fc-plus{transform:scale(1.06)}}
.fc-ctl{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.25rem}
.arw{width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:#E8E8ED;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.arw svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.arw:disabled{opacity:.4;cursor:default}
.arw:focus-visible{outline:3px solid var(--act);outline-offset:3px}
/* The panel: a centred sheet over a dimmed, blurred page. Opens with a 220 ms fade and 8 px rise; Reduce Motion: no motion. */
.fc-dlg{border:0;padding:0;border-radius:1.75rem;width:min(46rem,calc(100vw - 2rem));max-height:calc(100dvh - 3rem);background:#fff;color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.35)}
.fc-dlg::backdrop{background:rgba(29,29,31,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (prefers-reduced-transparency:reduce){.fc-dlg::backdrop{background:rgba(29,29,31,.7);backdrop-filter:none}}
html:not(.rm) .fc-dlg[open]{animation:dlg-in 220ms var(--ease) both}
@keyframes dlg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dlg-in{position:relative;padding:clamp(1.5rem,5vw,3.5rem)}
.dlg-x{position:absolute;top:1rem;right:1rem;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer}
.dlg-x svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.dlg-x:focus-visible{outline:3px solid var(--act);outline-offset:3px}
.dlg-t{margin-top:.5rem;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.02em;font-weight:600;max-width:30ch;padding-right:2.5rem}
.dlg-in > p:not(.fc-label){margin-top:1.125rem;font-size:1.1875rem;line-height:1.55;color:var(--ink-body);max-width:60ch}
.dlg-h{margin-top:2rem;font-size:1.0625rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.75rem 0 0}
.chip{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 1rem;border-radius:999px;font-family:var(--f-said);font-size:1.0625rem;color:var(--ink)}
.c-warm{background:var(--glow-warm)}.c-cool{background:var(--glow-cool)}.c-fresh{background:var(--glow-fresh)}

/* A3: the card is text only, so it can be shorter and the line bigger. The panel carries the product. */
.fc.tc{height:clamp(17rem,40vh,24rem)}
.tc .fc-label{margin-top:1rem;font-size:.9375rem;font-weight:500;line-height:1.4;max-width:24ch}
.tc-head{margin-top:0;font-size:clamp(2rem,min(2.9vw,5vh),2.75rem);line-height:1.08}
.tdlg{width:min(62rem,calc(100vw - 2rem))}
.tdlg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.tdlg-vis{display:grid;grid-template-rows:auto 1fr;gap:1rem;padding:clamp(1.5rem,4vw,2.75rem);min-height:24rem}
.tdlg-said{font-family:var(--f-said);font-size:1.25rem;line-height:1.3;color:var(--ink-body);max-width:22ch}
.tdlg-vis .fc-vis{padding:0}
.tdlg .dlg-in{align-self:center}
@media (max-width:44rem){.tdlg-grid{grid-template-columns:minmax(0,1fr)}.tdlg-vis{min-height:0}.tdlg .dlg-in{order:-1}}

.live-set{width:100%;display:grid;gap:1rem}
.live-set .app{font-size:1.125rem}
.fc-vis.live{place-items:stretch}
/* ── Dictation features, as a Z. Text on one side, a film on the other, alternating. One fold each. ── */
.zf{padding-block:clamp(2.5rem,8vh,6rem)}
.zf-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.zf-right{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.zf-right .zf-text{order:2}
@media (max-width:52rem){.zf-grid{grid-template-columns:minmax(0,1fr)}.zf-right .zf-text{order:0}}
.zf-label{font-weight:600;color:var(--ink2);font-size:1.0625rem}
.zf .h2{margin-top:.5rem;font-size:clamp(2rem,min(3.4vw,6vh),3.25rem)}
.zf-text > p:not(.zf-label){margin-top:1.125rem;font-size:clamp(1.125rem,.5vw + 1rem,1.25rem);line-height:1.5;color:var(--ink-body);max-width:32rem}
.zf-text .zf-stat{display:grid;gap:.25rem;margin-top:1.75rem}
.zf-stat b{font-size:clamp(2.75rem,min(4.4vw,7vh),4rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.zf-stat span{font-size:.9375rem;color:var(--ink-body)}
.zf-text > p.zf-src:not(.zf-label){margin-top:.875rem;font-size:.9375rem;color:var(--ink-body)}
.zf-text > p.zf-note:not(.zf-label){margin-top:.875rem;font-size:.9375rem;color:var(--ink-body)}
.zf-stat a{color:var(--act)}
/* Same frame as the hero panel: 2rem corners, no drop shadow. The hairline stays because the films' cream and white
   edges otherwise vanish into the grey (#F5F5F7) and white section grounds. */
.zf-film{position:relative;margin:0;border-radius:2rem;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06);background:#F7F7F9;aspect-ratio:16/9}
.zf-film video{display:block;width:100%;height:100%;object-fit:cover}
.zf-btn{position:absolute;right:.875rem;bottom:.875rem;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1rem 0 .75rem;border:0;border-radius:999px;
  background:rgba(29,29,31,.78);color:#fff;font:600 .9375rem var(--font);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.zf-btn:focus-visible{outline:3px solid var(--act);outline-offset:3px}
.zf-ic{width:.875rem;height:.875rem;display:inline-block;background:#fff;clip-path:polygon(15% 0,100% 50%,15% 100%)}
.zf-btn[data-state="pause"] .zf-ic{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.zf-btn[data-state="replay"] .zf-ic{clip-path:none;border-radius:50%;background:none;box-shadow:inset 0 0 0 2px #fff}

/* ── Store buttons: the platform's mark, then the words ── */
.bmark{width:1.25rem;height:1.25rem;flex:none}
.btn .bmark{margin-top:-.15rem}
.btn-sm .bmark{width:1rem;height:1rem}
.bb{display:inline-flex;align-items:center;gap:.625rem;min-height:3rem;padding:0 1.25rem;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;text-decoration:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12),0 6px 16px -10px rgba(0,0,0,.25);transition:box-shadow 140ms var(--ease)}
.bb:hover{box-shadow:0 0 0 1.5px var(--ink),0 6px 16px -10px rgba(0,0,0,.25);color:var(--ink)}
.bb:focus-visible{outline:3px solid var(--act);outline-offset:3px}
.cws{display:block;height:2.125rem;width:auto;margin-top:.625rem}
/* ── One account, every device. Squeezed to one fold: one-line heading, short tiles, the action at the bottom. ── */
#devices{padding-block:clamp(2rem,6vh,4.5rem)}
.dv-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 3rem;align-items:end}
.dv-head .h2{font-size:clamp(2rem,min(3.4vw,6vh),3.25rem)}
@media (max-width:52rem){.dv-head{grid-template-columns:minmax(0,1fr)}}
.dvs{list-style:none;margin:clamp(1.25rem,3.5vh,2.25rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:52rem){.dvs{grid-template-columns:minmax(0,1fr)}}
.dv{background:#fff;border-radius:var(--r-tile);padding:clamp(1.125rem,2.6vh,1.75rem);display:grid;gap:1rem;align-content:space-between}
.dv-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
.dv-ic{width:2.75rem;height:2.75rem;border-radius:.875rem;background:var(--glow-sun);display:grid;place-items:center}
.dv-ic svg{width:1.5rem;height:1.5rem;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dv h3{font-size:1.375rem;letter-spacing:-.015em}
.dv p{color:var(--ink-body);font-size:1rem;margin-top:.25rem}
.dv-act{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.dv-foot{margin-top:1.25rem;color:var(--ink2)}
/* ── Testimonials: the video large, two quote cards beside it, each in a solid glow with a big slab quote mark ── */
#review{padding-block:clamp(2rem,6vh,4.5rem)}
.rv-head .h2{font-size:clamp(2rem,min(3.4vw,6vh),3.25rem)}
.rv-grid{margin-top:clamp(1.25rem,3.5vh,2.25rem);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.25rem;align-items:stretch}
@media (max-width:52rem){.rv-grid{grid-template-columns:minmax(0,1fr)}}
.rv-grid .rqs{display:contents}
.rv-grid .rq.q-fresh{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.5rem;padding-block:1.25rem}
.q-fresh .rq-mark{height:auto;line-height:1;align-self:start}
@media (max-width:52rem){.rq.q-fresh{grid-template-columns:minmax(0,1fr)}}
.rv-vid{align-content:center}
.rv-vid{margin:0;background:#fff;border-radius:var(--r-tile);padding:.75rem;display:grid;gap:.75rem;align-content:start}
.rv-link{position:relative;display:block;border-radius:1.25rem;overflow:hidden}
.rv-link img{display:block;width:100%;height:auto}
.rv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4.5rem;height:4.5rem;border-radius:50%;background:var(--banana-cream);display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);transition:transform 140ms var(--ease)}
.rv-play .ic{width:1.5rem;height:1.5rem;margin-left:.2rem;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.rv-link:hover .rv-play{transform:translate(-50%,-50%) scale(1.06)}}
.rv-len{position:absolute;right:.875rem;bottom:.875rem;background:rgba(29,29,31,.78);color:#fff;font-size:.8125rem;font-weight:600;border-radius:.5rem;padding:.25rem .5rem}
.rv-vid figcaption{padding:0 .5rem .5rem;font-size:.9375rem;color:var(--ink-body)}
.rv-vid figcaption b{color:var(--ink)}
.rqs{display:grid;gap:1.25rem}
.rq{margin:0;border-radius:var(--r-tile);padding:clamp(1.25rem,2.8vh,1.75rem);display:grid;align-content:space-between;gap:1rem;position:relative}
.q-sun{background:var(--glow-sun)}.q-fresh{background:var(--glow-fresh)}
.rq-mark{font-family:var(--f-said);font-size:4rem;line-height:.6;height:1.75rem;color:var(--ink)}
.rq blockquote{margin:0;font-size:clamp(1.0625rem,.5vw + .95rem,1.25rem);line-height:1.45;color:var(--ink);font-weight:500}
.rq figcaption{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;color:var(--ink-body)}
.rq figcaption > span:last-child{display:grid}
.rq figcaption b{color:var(--ink)}
.rq-av{width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.8125rem;font-weight:700;color:var(--ink);flex:none}
/* ── FAQ: each answer opens smoothly (rows 0fr to 1fr, 420 ms), then its text rises 8 px into place (220 ms).
   The + turns into an x. Hover lifts the row. Reduce Motion: it opens at once. ── */
.fa-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:52rem){.fa-grid{grid-template-columns:minmax(0,1fr)}}
.fa-side{position:sticky;top:6rem}
@media (max-width:52rem){.fa-side{position:static}}
.fa-side .lede{margin-top:1rem}
.fas{list-style:none;margin:0;padding:.375rem;background:#fff;border-radius:var(--r-tile);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 60px -40px rgba(0,0,0,.25)}
.fa{border-radius:1.25rem;transition:background-color 220ms var(--ease)}
.fa + .fa{box-shadow:inset 0 1px 0 #EDEDF0}
.fa h3{margin:0;font-size:inherit}
.fa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem;padding:1rem 1.25rem;border:0;background:none;text-align:left;cursor:pointer;
  font:600 1.125rem/1.35 var(--font);letter-spacing:-.01em;color:var(--ink);border-radius:1.25rem;transition:padding 220ms var(--ease)}
.fa-q:focus-visible{outline:3px solid var(--act);outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.fa:hover{background:#F7F7F9}.fa:hover .fa-q{padding-left:1.5rem}}
.fa-pm{position:relative;flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--glow-sun);transition:transform 220ms var(--ease),background-color 220ms var(--ease)}
.fa-pm::before,.fa-pm::after{content:"";position:absolute;left:50%;top:50%;width:.75rem;height:2px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
.fa-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.fa-q[aria-expanded="true"] .fa-pm{transform:rotate(45deg);background:var(--ink)}
.fa-q[aria-expanded="true"] .fa-pm::before,.fa-q[aria-expanded="true"] .fa-pm::after{background:#fff}
.fa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 420ms var(--ease)}
.fa-a.open{grid-template-rows:1fr}
.fa-in{overflow:hidden}
.fa-in p{padding:0 3.5rem 1.25rem 1.25rem;font-size:1.0625rem;line-height:1.55;color:var(--ink-body);opacity:0;transform:translateY(8px);transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
.fa-a.open .fa-in p{opacity:1;transform:none;transition-delay:140ms}
.fa.on{background:#F7F7F9}
/* ── The close: the last ask. Rubil's own colour, the real pill in its three states, the question, every download,
   and the founder's note under a hairline. ── */
.close2{padding-block:clamp(2rem,6vh,4rem)}
.cl-box{background:var(--glow-sun);border-radius:2.5rem;padding:clamp(2.25rem,6vh,4.5rem) clamp(1.25rem,4vw,3rem);display:grid;justify-items:center;text-align:center}
.cl-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:clamp(1.25rem,3.5vh,2.25rem)}
.cl-p{flex:none}
.cl-p .app:has(.ap-pill){font-size:16px}
.cl-p .ap-pill{min-width:0;box-shadow:0 0 0 1px rgba(10,10,10,.08),0 12px 24px -14px rgba(10,10,10,.3)}
.close2 .statement{font-size:clamp(2.5rem,min(6vw,9vh),5rem);max-width:none}
.cl-lede{margin-top:1rem;font-size:clamp(1.125rem,.6vw + 1rem,1.375rem);color:var(--ink-body);max-width:36rem}
.cl-cta{margin-top:clamp(1.5rem,4vh,2.25rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.875rem}
.cl-why{margin:clamp(1.75rem,5vh,3rem) 0 0;padding-top:clamp(1.5rem,4vh,2.25rem);border-top:1px solid rgba(29,29,31,.14);max-width:40rem;display:grid;justify-items:center;gap:1rem}
.cl-why blockquote{margin:0;font-family:var(--f-said);font-size:clamp(1.125rem,.6vw + 1rem,1.375rem);line-height:1.45;color:var(--ink)}
.cl-why figcaption{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;color:var(--ink-body);text-align:left}
.cl-why b{color:var(--ink)}
.cl-av{width:2.75rem;height:2.75rem;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;font-size:.875rem;color:var(--ink);flex:none}
@media (max-width:40rem){.cl-pills .cl-p1,.cl-pills .cl-p2{display:none}}
/* ── Pricing, squeezed to one fold ── */
#price{padding-block:clamp(2rem,6vh,4.5rem)}
#price .blue{padding:clamp(1.75rem,5vh,3.5rem) clamp(1.25rem,4vw,3rem)}
#price .h2{font-size:clamp(2rem,min(3.4vw,6vh),3.25rem)}
#price .blue-lede{margin-top:.5rem}
#price .plans{margin-top:clamp(1.25rem,3.5vh,2.25rem)}
#price .plan{padding:clamp(1.125rem,2.8vh,1.75rem);gap:.5rem}
#price .plan ul{margin-block:.25rem}
#price .amt{line-height:1}


/* ══ Cohesion pass, October 5, 2026. One header pattern, one heading size, one card language. ══ */
.kick{font-weight:600;color:var(--ink2);font-size:1.0625rem;margin:0 0 .5rem}
.kick.on-dark{color:var(--on-night-2)}
.kick.on-blue{color:rgba(255,255,255,.78)}
main .h2{font-size:clamp(2rem,min(3.4vw,6vh),3.25rem);line-height:1.08;letter-spacing:-.02em}
.zf-label{display:none}
.fc-headrow .kick{margin-bottom:.5rem}
/* Devices, the fifth fold of the Z */
.dz-btns{display:grid;grid-template-columns:max-content;gap:.625rem;margin-top:1.5rem}
.dz-btns .bb{min-height:2.75rem;padding:0 1rem;font-size:.9375rem;white-space:nowrap;width:100%}
.dz-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.25rem!important;font-size:1rem!important;color:var(--ink2)!important}
.dz-foot .cws{margin:0;height:1.875rem}
/* Devices, as a table (the live site's pattern, in this system's type and colour). Full width, one fold. */
#devices{padding-block:clamp(2rem,6vh,4.5rem)}
.dt-lede{margin-top:.75rem;max-width:44rem}
.dt-card{margin-top:clamp(1.25rem,3.5vh,2.25rem);background:#fff;border-radius:var(--r-tile);overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 30px 60px -40px rgba(0,0,0,.25)}
.dt{width:100%;border-collapse:collapse}
.dt thead th{padding:clamp(.75rem,2vh,1.125rem) clamp(1rem,2.4vw,2rem);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:left;border-bottom:1px solid #EDEDF0}
.dt td,.dt tbody th{padding:clamp(.75rem,2.2vh,1.25rem) clamp(1rem,2.4vw,2rem);border-bottom:1px solid #EDEDF0;text-align:left;vertical-align:middle;font-weight:400}
.dt .dt-act{text-align:right}
.dt-dev{display:inline-flex;align-items:center;gap:1rem;font-size:1.25rem;font-weight:600;color:var(--ink)}
.dt-ic{width:2.75rem;height:2.75rem;border-radius:.875rem;background:var(--glow-sun);display:grid;place-items:center;flex:none}
.dt-ic .bmark{width:1.375rem;height:1.375rem}
.dt-form{color:var(--ink-body);font-size:1.0625rem}
.dt-ok{display:inline-flex;align-items:center;min-height:1.875rem;padding:0 .75rem;border-radius:999px;background:var(--glow-fresh);color:#0B5E4A;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.dt-btn{min-height:2.75rem;padding:0 1.125rem;font-size:.9375rem}
.dt-bb{min-height:2.75rem;padding:0 1.125rem;font-size:.9375rem;white-space:nowrap}
.dt-crx{display:inline-flex;align-items:center;gap:1rem}
.dt-crx .cws{margin:0;height:2rem}
.dt-phones{padding:clamp(.875rem,2.2vh,1.25rem) clamp(1rem,2.4vw,2rem);color:var(--ink-body);border-bottom:1px solid #EDEDF0}
.dt-phones a{color:var(--ink);font-weight:600}
.dt-sub{padding:clamp(.75rem,2vh,1rem) clamp(1rem,2.4vw,2rem);background:color-mix(in srgb,var(--glow-sun) 55%,#fff);color:var(--ink-body)}
@media (max-width:48rem){
  .dt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dt tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1rem;padding:1rem;border-bottom:1px solid #EDEDF0}
  .dt td,.dt tbody th{padding:0;border:0}
  .dt .dt-act{grid-column:1/-1;text-align:left}
  .dt-crx .cws{display:none}
}
/* Reviews, option A (October 5, 2026): two equal grey tiles on white */
.ts.sec{padding-block:clamp(2rem,6vh,4.5rem)}
.ts figure{margin:0}
.ts blockquote{margin:0;color:var(--ink)}
.tv{position:relative;display:block;border-radius:1.125rem;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 40px -22px rgba(10,10,10,.4)}
.tv img{display:block;width:100%;height:auto}
.tv:hover .rv-play{transform:translate(-50%,-50%) scale(1.06)}
.tw{display:flex;align-items:center;gap:.75rem;font-size:1rem;color:var(--ink-body)}
.tw > span:last-child{display:grid;line-height:1.3}
.tw b{color:var(--ink);font-weight:600}
.tw-av{width:2.75rem;height:2.75rem;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;font-size:.9375rem;color:var(--ink);flex:none}
.tt{background:var(--bg2);border-radius:var(--r-tile);padding:clamp(1.25rem,3vh,2rem);display:flex;flex-direction:column;gap:clamp(1rem,2.4vh,1.5rem)}
.tt .tw{margin-top:auto}
.ta{margin-top:clamp(1.25rem,3.5vh,2.25rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media (max-width:52rem){.ta{grid-template-columns:minmax(0,1fr)}}
.ta blockquote{font-size:1.1875rem;line-height:1.4}
.ta blockquote.big{font-size:clamp(1.5rem,min(2.5vw,4.4vh),2.25rem);line-height:1.28;letter-spacing:-.02em}
/* The close, option C (October 5, 2026): type only, centred on white */
.cc.sec{text-align:center;padding-block:clamp(3rem,11vh,7rem)}
.cc .statement{font-size:clamp(2.75rem,min(7vw,11vh),6rem);max-width:none}
.cc .cl-lede{margin-inline:auto;text-wrap:balance}
.cc [hidden]{display:none}
@media (max-width:40rem){.cc .cl-cta > a{width:100%;justify-content:center}}
/* Grounds (Bernard, October 5, 2026): no section shares a ground with the one before it. Privacy sat as a dark box on
   white straight after the white devices fold, so it is now a full-width dark band. */
#privacy.sec{background:var(--night);padding-block:clamp(2.5rem,8vh,5.5rem)}
#privacy .night{background:none;border-radius:0;padding:0}
/* Colour from pricing down (Bernard, October 5, 2026: "it gets blander and blander... inject some more colors").
   The top of the page carries colour as solid tile fills, so the lower half does the same, with the same tokens:
   the Pro tile is sky, the review tiles are peach and mint like the card row, an open question is sun,
   and the close sits on a full-width sun band (yellow; Bernard, October 5, 2026, after trying sky). Secondary text on every fill is --ink-body. */
/* The Pro tile takes the hero panel's own light (Bernard, October 5, 2026): the same three glows, on white here because
   the hero's grey base would vanish into this section's grey ground. */
.pb.pb-pro{background:radial-gradient(120% 80% at 0% 0%,#FFF2C4 0,rgba(255,242,196,0) 55%),radial-gradient(90% 70% at 100% 20%,#E3EBFF 0,rgba(227,235,255,0) 60%),radial-gradient(80% 70% at 50% 100%,#FFE6DA 0,rgba(255,230,218,0) 65%),#fff}
.pb.pb-pro .pr-seg{background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tt.tt-warm{background:var(--glow-warm)}
.tt.tt-lilac{background:var(--glow-lilac)}
.fa.on{background:color-mix(in srgb,var(--glow-sun) 45%,#fff)}
.cc.sec{background:var(--glow-sun)}
/* Custom needs: the founder's invitation, after the FAQ */
.reach.sec{padding-block:clamp(2.5rem,8vh,5.5rem)}
.reach-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
@media (max-width:56rem){.reach-grid{grid-template-columns:minmax(0,1fr)}}
.reach-p{margin-top:1.125rem;font-size:clamp(1.125rem,.5vw + 1rem,1.25rem);line-height:1.5;color:var(--ink-body);max-width:36rem}
.reach-note{margin-top:.875rem;font-size:1rem;color:var(--ink-body)}
.reach-card{background:var(--bg2);border-radius:var(--r-tile);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1rem}
.reach-who{display:flex;align-items:center;gap:.75rem}
.reach-who > span:last-child{display:grid;line-height:1.3}
.reach-who span span{color:var(--ink-body);font-size:.9375rem}
.reach-av{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--glow-sun);display:grid;place-items:center;font-weight:700;font-size:.9375rem;flex:none}
.reach-mail{font-size:clamp(1.375rem,2.4vw,1.875rem);font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
.reach-act{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem}
.reach-act .more{font-weight:600}
/* The nav condenses (Bernard, October 5, 2026: "the navigation bar becomes smaller as it scrolls but becomes fixed at
   the top... minimized to about half of the size"). Rebuilt from the September homepage (homepage-texture-2026-09-23,
   hero-v2: "full width, condenses to a floating glass pill after 80px"). At rest it is the full-width bar. After 80 px
   of scroll the bar's ground goes clear and its contents draw into a glass pill, 800 px wide, floating under the top
   edge. Glass is allowed here because the nav is a control. With Reduce Motion it switches with no animation. */
.nav{transition:background-color 240ms ease,border-color 240ms ease,padding-top 420ms var(--ease)}
.nav .wrap{transition:max-width 420ms var(--ease),min-height 420ms var(--ease),border-radius 420ms var(--ease),padding 420ms var(--ease),background-color 240ms ease,box-shadow 240ms ease}
.nav.is-condensed{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;padding-top:.625rem}
.nav.is-condensed .wrap{pointer-events:auto;max-width:50rem;min-height:3.25rem;border-radius:999px;padding-inline:1.125rem .375rem;flex-wrap:nowrap;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05),0 12px 32px -14px rgba(10,10,10,.22)}
.nav.is-condensed .wm{font-size:1.1875rem;flex-shrink:0}
/* Condensed: same ratios on a 1rem wordmark (.987rem cap). The old
   `.wm img{width:1.5rem;height:1.5rem}` squashed the emblem to 24x18. */
.nav.is-condensed .wm{gap:.395rem}
.nav.is-condensed .wm .wm-emblem{width:auto;height:1.135rem;margin-bottom:.16rem}
.nav.is-condensed .wm .wm-img{width:auto;height:1rem}
.nav.is-condensed .nav-links{gap:1.25rem;white-space:nowrap}
@media (max-width:52rem){.nav.is-condensed .wrap{max-width:calc(100% - 1.5rem)}}
html.rm .nav,html.rm .nav .wrap{transition:none}
@media (prefers-reduced-motion:reduce){.nav,.nav .wrap{transition:none}}
/* One product on three surfaces (Bernard, October 5, 2026): every download button shows the visitor's own desktop
   app. Mac is the default; a Windows visitor gets the Windows button in the nav, the hero, pricing and the close. */
[data-os][hidden]{display:none!important}
/* Pricing, option B (October 5, 2026): two white tiles on grey, the price large, a switch on Pro */
.pr.sec{padding-block:clamp(2rem,6vh,4.5rem)}
.pr-two{margin-top:clamp(1.25rem,3.5vh,2.25rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media (max-width:52rem){.pr-two{grid-template-columns:minmax(0,1fr)}}
.pb{background:#fff;border-radius:var(--r-tile);padding:clamp(1.25rem,3.2vh,2rem) clamp(1.25rem,2.4vw,2.25rem);display:flex;flex-direction:column;align-items:flex-start}
.pb h2,.pb h3{font-size:1.25rem;min-height:3.25rem;display:flex;align-items:center}
.pb-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.pr-amt{display:flex;align-items:baseline;gap:.5rem;margin-top:.25rem}
.pr-amt b{font-size:clamp(2.75rem,min(4.6vw,8vh),4.25rem);font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.pr-amt span{font-size:1.125rem;color:var(--ink-body)}
.pb-line{margin-top:.5rem;font-size:1.1875rem}
.pr-list{display:grid;gap:.375rem;margin-top:clamp(.75rem,2vh,1.25rem);color:var(--ink-body)}
.pr-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.625rem}
.pr-list .ic{margin-top:.2rem}
.pr-act{margin-top:auto;width:100%;padding-top:clamp(1rem,3vh,1.75rem);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pr-act .btn,.pr-act .bb{min-height:3rem;padding:0 1.125rem;font-size:.9375rem;white-space:nowrap;gap:.5rem}
.pr-act [hidden]{display:none}
@media (max-width:40rem){.pr-act > .btn,.pr-act > .bb{width:100%;justify-content:center}}
.pr-seg{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:999px;background:var(--bg2)}
.pr-seg label{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1rem;border-radius:999px;font-size:.9375rem;font-weight:600;color:var(--ink-body);cursor:pointer}
.pr-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pr-seg label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 2px 6px -2px rgba(0,0,0,.2)}
.pr-seg label:has(input:focus-visible){outline:3px solid var(--act);outline-offset:2px}
.pr-trial{margin-top:1.25rem;background:color-mix(in srgb,var(--glow-sun) 55%,#fff);border-radius:var(--r-tile);padding:clamp(.875rem,2.2vh,1.125rem) clamp(1.25rem,2.4vw,2.25rem);color:var(--ink-body);font-size:1.0625rem}
.pr-trial b{color:var(--ink);font-weight:600}
/* Reviews, a bento: the video card large, Shadya's card beside it; label above, the quote set large */
.rb-grid{margin-top:clamp(1.25rem,3.5vh,2.25rem);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1.25rem;align-items:stretch}
@media (max-width:52rem){.rb-grid{grid-template-columns:minmax(0,1fr)}}
.rb{margin:0;border-radius:var(--r-tile);padding:clamp(1.25rem,2.8vh,2rem);display:flex;flex-direction:column;justify-content:flex-end;gap:1.25rem;overflow:hidden}
.rb-big{background:var(--glow-sun)}
.rb-side{background:#F5F5F7;justify-content:space-between}
.rb-mark{font-family:var(--f-said);font-size:7rem;line-height:.8;height:4rem;color:var(--banana-cream)}
.rb-media{position:relative;display:block;border-radius:1.125rem;overflow:hidden;box-shadow:0 18px 40px -22px rgba(10,10,10,.4)}
.rb-media img{display:block;width:100%;height:auto}
.rb-who{display:block;font-size:1rem;color:var(--ink-body);margin-bottom:.5rem}
.rb blockquote{margin:0;font-size:clamp(1.25rem,min(1.7vw,3vh),1.625rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
/* The founder's note: a soft band, centred */
.founder2{background:var(--glow-sky);padding-block:clamp(2.5rem,9vh,6rem);text-align:center}
.founder2 figure{margin:0 auto;max-width:56rem}
.founder2 blockquote{margin:0;font-size:clamp(1.625rem,min(2.8vw,5vh),2.625rem);line-height:1.25;letter-spacing:-.02em;font-weight:400;color:var(--ink)}
.founder2 blockquote b{font-weight:700}
.founder2 figcaption{margin-top:1.5rem;display:grid;gap:.25rem;font-size:1.0625rem}
.founder2 figcaption span{color:var(--ink-body)}
.f2-link{margin-top:1.25rem;color:var(--act-hi);font-weight:600}

.demo-sec{padding-top:clamp(2rem,4vw,3rem)}
/* Fold 2 (option B): each tile is the visitor's line, one real Rubil screen, and one sentence. */
.b-grid{align-items:stretch}
.sit2{display:flex;flex-direction:column;gap:1.25rem}
.sit2 .say{font-family:var(--f-said);font-weight:400;font-size:clamp(1.5rem,1.2vw + 1.1rem,2rem);line-height:1.18;letter-spacing:-.01em;margin-top:.375rem}
.sit2 .who{margin-top:.5rem;font-size:1rem;color:#3A3A3C}
.sit2-vis{flex:1;display:grid;align-items:center;justify-items:center;min-height:10rem;background:rgba(255,255,255,.55);border-radius:1.125rem;padding:1rem;container-type:inline-size}
.sit2 .helps{font-size:1.0625rem;font-weight:500}
.vis-key{display:grid;justify-items:center;gap:1rem;width:100%}
.vis-key .m-pill{width:100%;container-type:inline-size;display:flex;justify-content:center}
.vis-key .m-pill .app:has(.ap-pill){font-size:min(18px,4.3cqi)}
.kc{display:inline-grid;grid-template-rows:auto 1fr auto;width:5.5rem;height:5.5rem;padding:.5rem .625rem;border-radius:1rem;background:#fff;color:var(--ink);text-align:left;
  box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 #D2D2D7,0 14px 24px -12px rgba(0,0,0,.3)}
.kc-side{font-size:.6875rem;color:var(--ink2);text-align:right}.kc-sym{font-size:1.75rem;line-height:1;align-self:center}.kc-nm{font-size:.8125rem}
.vis-size{display:grid;width:100%;align-items:center}
.vis-size > div{grid-area:1/1}
.vis-size .sz-a .app{font-size:.8125rem!important}.vis-size .sz-b .app{font-size:1.21875rem!important}  /* 100% and 150% of the same row; beats the v2 container rule */
.sz-a{opacity:0}
.ap-select.fake{display:inline-flex;align-items:center}
.vis-take{width:100%}
/* The moments. Armed only when motion is allowed and they have not played this session; the still is the end frame.
   One change at a time, nothing loops: opacity, and a 4 px key press, at 80, 140 and 220 ms. */
@keyframes kc-down{from{transform:none}to{transform:translateY(4px)}}
@keyframes kc-up{from{transform:translateY(4px)}to{transform:none}}
.b-grid.armed [data-m="pill"],.b-grid.armed .vis-take [data-s],.b-grid.armed [data-m="big"]{opacity:0}
.b-grid.armed [data-m="small"]{opacity:1}
.b-grid .kc.press{animation:kc-down 80ms var(--ease) both}
.b-grid .kc.rel{animation:kc-up 140ms var(--ease) both}
.b-grid .on{opacity:1!important;animation:hx-fade 140ms var(--ease) both}
.b-grid .sz-on{opacity:1!important;animation:hx-fade 220ms var(--ease) both}
.b-grid .sz-off{opacity:0!important;animation:hx-out 220ms var(--ease) both}
/* Hero demo (option A2). Opacity, and rises of 8 px or less, at 140, 220 and 420 ms. One change at a time, nothing loops.
   Every end frame is the Reduce Motion still. */
.hero-demo .hx-vis{display:grid;gap:1.125rem;min-width:0}
.hero-demo .caret{animation:none}
.said .h{opacity:0!important}
.pslot{container-type:inline-size;display:flex;justify-content:center;width:100%;min-height:3.25rem;align-items:center}
.pslot .app:has(.ap-pill){font-size:min(18px,4.3cqi)}
.demo-ctl{min-height:2.75rem;display:flex;align-items:center}
.demo-stop{border:0;background:none;color:var(--act);text-decoration:underline;text-underline-offset:.2em;font-size:.9375rem;min-height:2.75rem;padding:0 .25rem;cursor:pointer}
button.more{border:0;background:none;color:var(--act);padding:0;cursor:pointer}
@keyframes hx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hx-fade{from{opacity:0}to{opacity:1}}
@keyframes hx-out{from{opacity:1}to{opacity:0}}
@keyframes hx-strike{from{opacity:1}to{opacity:.55}}
.hero-demo .enter{display:inline-block;animation:hx-in 420ms var(--ease) both}
.hero-demo .w-in,.hero-demo .fade-in{animation:hx-fade 140ms var(--ease) both}
.hero-demo .leave{animation:hx-out 220ms var(--ease) both}
.hero-demo .said .x.gone.se{animation:hx-strike 220ms var(--ease) both}
.wide-demo{margin:clamp(2rem,4vw,3rem) auto 0;max-width:48rem}
.sit .say{font-family:var(--f-said);font-weight:400;font-size:clamp(1.5rem,1.2vw + 1.1rem,2rem);line-height:1.18;letter-spacing:-.01em}
.sit .who{font-size:1rem;color:#3A3A3C}
.sit .does1{margin-top:auto;padding-top:.75rem;border-top:1px solid rgba(0,0,0,.08);font-size:1.0625rem}
.sit{display:flex;flex-direction:column}
.card-list{background:#fff;border-radius:var(--r-tile);padding:.25rem clamp(1rem,2.6vw,2rem);border-top:0}
.card-list .row:last-child{border-bottom:0}
.foot.left{text-align:left}
/* v4 copy pass additions */
.btn-sm{min-height:2.5rem;padding:0 1.125rem;font-size:.9375rem}
@media (max-width:40rem){.nav .btn-sm{display:none}}
.h3{font-size:clamp(1.75rem,1.4vw + 1.2rem,2.25rem);line-height:1.1;letter-spacing:-.015em}
.h4{font-size:1.375rem;line-height:1.2}
.lede.center{text-align:center;margin:1.25rem auto 0}
.small{font-size:.9375rem;color:var(--ink2)}
.small.sp{margin-top:1.25rem}
.sit{align-content:start;gap:.75rem;min-height:14rem}
.sit h3{font-size:clamp(1.5rem,1.2vw + 1.1rem,2rem)}
.sit p{font-size:1.0625rem;color:#3A3A3C}
.sw-row.big{font-size:1.125rem}
.kcaps{display:flex;flex-wrap:wrap;gap:.625rem}
.kcap{display:inline-grid;place-items:end start;min-width:4rem;height:3.25rem;padding:.375rem .625rem;border-radius:.625rem;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 3px 0 rgba(0,0,0,.12);font-size:.8125rem;color:var(--ink2)}
.kcap.w{min-width:7.5rem;box-shadow:0 0 0 2px var(--ink),0 3px 0 var(--ink);color:var(--ink);font-weight:600}
.checks{margin-top:1rem;display:grid;gap:.75rem}
.checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;font-size:1.0625rem}
.checks .ic{color:var(--act);margin-top:.15rem}
.pv{margin-top:clamp(1.75rem,4vw,2.75rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width:64rem){.pv{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:36rem){.pv{grid-template-columns:minmax(0,1fr)}}
.pv > div{background:var(--night-2);border-radius:1.25rem;padding:1.375rem;display:grid;gap:.5rem;align-content:start}
.pv h3{font-size:1.25rem;color:#fff}
.pv p{color:var(--on-night-2);font-size:1rem}
.blue-lede{text-align:center;margin-top:1rem;font-size:1.1875rem;opacity:.94}
.mac-card{margin-top:2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.75rem 2rem;align-items:start;box-shadow:0 0 0 1px var(--line)}
.req{display:grid;gap:.375rem;padding-left:1.25rem;list-style:disc;color:#3A3A3C}
/* Situations */
.rec-grid{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1.25rem;align-items:start}
details.tile{display:block;padding:0}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.rec summary{display:grid;gap:.75rem;padding:clamp(1.5rem,2.6vw,2.25rem);padding-bottom:5rem;min-height:19rem;align-content:start;border-radius:var(--r-tile)}
.rec .say{font-family:var(--f-said);font-weight:400;font-size:clamp(1.625rem,1.4vw + 1.1rem,2.125rem);line-height:1.18;letter-spacing:-.01em}
.rec .who{font-size:1rem;color:#3A3A3C}
.plus{position:absolute;right:1.25rem;bottom:1.25rem;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform 220ms var(--ease)}
.plus .ic{width:1.125rem;height:1.125rem;stroke-width:2.5}
details[open] > summary .plus{transform:rotate(45deg)}
.rec[open] summary{padding-bottom:1rem;min-height:0}
.rec[open] summary .plus{position:absolute;top:1.25rem;bottom:auto}
.does{display:grid;gap:.75rem;padding:0 clamp(1.5rem,2.6vw,2.25rem) clamp(1.5rem,2.6vw,2.25rem)}
.does li{background:rgba(255,255,255,.7);border-radius:1rem;padding:.875rem 1rem;font-size:1.0625rem;line-height:1.4}
@keyframes arrive{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
html:not(.rm) .rec[open] .does li{animation:arrive 140ms var(--ease) both}
html:not(.rm) .rec[open] .does li:nth-child(2){animation-delay:220ms}
html:not(.rm) .rec[open] .does li:nth-child(3){animation-delay:440ms}
.foot{margin-top:2rem;text-align:center;font-size:1.0625rem;color:var(--ink2)}

/* Comfort */
.page-calm{margin-top:.5rem}
.spec-take{font-size:1.375rem;line-height:1.45;font-weight:600}
.spec-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.spec-status{font-size:.9375rem;color:var(--ink2)}
.spec-letters{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;font-size:2rem;font-weight:500;line-height:1.2;background:rgba(255,255,255,.7);border-radius:1rem;padding:.875rem 1.125rem}
.read .app,.bento.two .app{font-size:1.375rem}
.pair{margin-top:2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1rem 3rem;color:#3A3A3C;font-size:1.0625rem}
.pair b{color:var(--ink)}
.ap-select{min-height:2.75rem}
.ap-search input{border:0;background:transparent;width:100%;min-width:0;height:100%;font:inherit;color:inherit;outline:0;padding:0}
.ap-search:focus-within{outline:3px solid var(--act);outline-offset:2px}

/* Built-in dictation */
.test{align-content:start;gap:.75rem}
.test-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.test h3{font-size:1.375rem}
.test p{color:#3A3A3C}

/* Status marks: shape and words, never colour alone */
.st{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;padding:.375rem .75rem .375rem .5rem;border-radius:999px;white-space:nowrap;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.st i{width:.875rem;height:.875rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);flex:none}
.st-built{background:var(--ink);color:#fff;box-shadow:none}
.st-built i{background:#fff;box-shadow:none}
.st-next i{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.updated{font-size:1rem;color:var(--ink2)}
.legend{margin-top:1.5rem}
.legend summary{display:inline-flex;align-items:center;gap:.25rem;min-height:2.75rem;color:var(--act);font-size:1.0625rem}
.legend summary .ic{transition:transform 220ms}
.legend[open] summary .ic{transform:rotate(90deg)}
.legend dl{display:grid;gap:.75rem;margin-top:.5rem}
.legend dl div{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.legend dd{color:#3A3A3C}
.ledger{margin-top:1.5rem;border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line)}
.row summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem 1rem;align-items:center;padding-block:1.25rem;min-height:4.5rem;position:relative}
.r-what{display:grid;gap:.125rem;min-width:0}
.r-what b{font-size:1.1875rem;font-weight:600}
.r-sub{font-size:.9375rem;color:var(--ink2)}
.plus.sm{position:static;width:2rem;height:2rem;background:var(--bg2);color:var(--ink)}
.plus.sm .ic{width:.875rem;height:.875rem}
.r-body{padding:0 0 1.5rem;display:grid;gap:.625rem;max-width:44rem;color:#3A3A3C;font-size:1.0625rem}
.r-body b{color:var(--ink)}
@media (max-width:36rem){.row summary{grid-template-columns:minmax(0,1fr) auto}.row summary .st{grid-column:1;grid-row:2;justify-self:start}.row summary .plus.sm{grid-column:2;grid-row:1 / span 2}}
.talk{margin-top:2.5rem;display:grid;gap:.5rem}
.talk h3{font-size:1.5rem}
.talk p{color:#3A3A3C}

/* Voice: one dark tile, like Otter's dark cards */
.night{background:var(--night);color:var(--on-night);border-radius:2rem;padding:clamp(1.75rem,5vw,4rem)}
.night .h2{color:#fff}
.night :focus-visible{outline-color:#fff}
.loop{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1fr) 3rem minmax(0,1fr);grid-template-rows:auto 3.5rem auto;counter-reset:p}
.loop .mac{grid-column:1;grid-row:1 / 4;border-radius:2rem;box-shadow:inset 0 0 0 1.5px #FFD54A;margin:-.75rem;display:grid;place-items:center;color:#FFD54A}
.loop .mac .ic{width:2rem;height:2rem;stroke-width:1.6}
.pstop{counter-increment:p;background:var(--night-2);border-radius:1.25rem;padding:1.25rem;display:grid;gap:.5rem;align-content:start;position:relative;z-index:1}
.s1{grid-column:1;grid-row:1}.s2{grid-column:3;grid-row:1}.s3{grid-column:3;grid-row:3}.s4{grid-column:1;grid-row:3}
.pstop .top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.pstop .top::before{content:counter(p);display:inline-grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--on-night-2);font-size:.875rem;font-weight:700}
.where{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;padding:.25rem .625rem;border-radius:999px;white-space:nowrap}
.where .ic{width:.875rem;height:.875rem}
.where.on{background:#FFD54A;color:var(--night)}
.where.off{box-shadow:inset 0 0 0 1.5px var(--on-night-2)}
.pstop h3{font-size:1.25rem;color:#fff}
.pstop p{font-size:1rem;color:var(--on-night-2)}
.arw{display:grid;place-items:center;color:var(--on-night-2)}
.a12{grid-column:2;grid-row:1}.a23{grid-column:3;grid-row:2}.a34{grid-column:2;grid-row:3}
@media (max-width:48rem){.loop{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:.75rem}.loop .mac,.arw{display:none}.s1,.s2,.s3,.s4{grid-column:1;grid-row:auto}.s1,.s4{box-shadow:inset 0 0 0 1.5px #FFD54A}}
.know{margin-top:2.25rem;display:grid;gap:.625rem;max-width:46rem;color:var(--on-night-2)}
.know li{padding-left:1.25rem;position:relative}
.know li::before{content:"";position:absolute;left:0;top:.6em;width:.375rem;height:.375rem;border-radius:50%;background:var(--on-night-2)}
.night-link{margin-top:1.5rem}
.night-link a{color:#fff}

/* Setup */
.steps{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr));gap:1rem;counter-reset:s}
.step{align-content:start;gap:.75rem;padding:1.5rem;min-height:12rem}
.step-ic{width:2rem;height:2rem;stroke-width:1.7;color:var(--act)}
.step-n{font-size:.9375rem;font-weight:600;color:var(--ink2)}
.step-t{font-size:1.125rem;line-height:1.35;font-weight:600}

/* Founder: Apple's quote treatment */
.quote{max-width:48rem;margin-inline:auto;text-align:center;display:grid;gap:1.25rem;justify-items:center}
.quote blockquote{font-family:var(--font-d);font-size:clamp(1.625rem,1.8vw + 1.1rem,2.5rem);line-height:1.25;letter-spacing:-.015em;font-weight:600}
.quote figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;color:var(--ink2)}
.quote figcaption b{color:var(--ink)}
.photo{width:3rem;height:3rem;border-radius:50%;background:var(--t-butter);display:grid;place-items:center;font-weight:700;font-size:.9375rem;color:var(--ink)}

/* Price: Otter's saturated block */
.blue{background:var(--act);color:#fff;border-radius:2rem;padding:clamp(1.75rem,5vw,4rem)}
.blue .h2{color:#fff;text-align:center}
.blue .s{display:inline-block}
.plans{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.25rem;max-width:56rem;margin-inline:auto}
.plan{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);border-radius:1.5rem;padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:.75rem;align-content:start}
.plan-name{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;font-weight:600;min-height:2.75rem}
.amt{font-family:var(--font-d);font-size:clamp(3rem,2vw + 2.25rem,4rem);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.amt small{font-size:1.0625rem;font-weight:500;letter-spacing:0;margin-left:.375rem;opacity:.85}
.plan-sub{opacity:.94}
.plan ul{display:grid;gap:.5rem;margin-block:.25rem .5rem}
.plan li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.625rem}
.plan li .ic{margin-top:.15rem}
.plan .btn{justify-self:start}
.seg{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:999px;background:rgba(255,255,255,.14)}
.seg label{position:relative;display:inline-flex;align-items:center;min-height:2.5rem;padding:0 .875rem;border-radius:999px;font-size:.9375rem;font-weight:600;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:#fff;color:var(--act)}
.seg label:has(input:focus-visible){outline:3px solid #fff;outline-offset:2px}

/* Close */
.close{text-align:center}
.close .wrap{display:grid;gap:1.25rem;justify-items:center}
.close p{color:var(--ink2);font-size:1.1875rem}

/* Footer */
footer{background:var(--bg2);padding-block:3rem 2.5rem;font-size:.875rem;color:var(--ink2)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:2rem}
.fgrid h3{font-size:.875rem;font-weight:600;color:var(--ink);margin-bottom:.625rem}
.fgrid ul{display:grid;gap:.25rem}
.fgrid a{color:var(--ink2);text-decoration:none;min-height:2rem;display:inline-flex;align-items:center}
.fgrid a:hover{text-decoration:underline;color:var(--ink)}
.fline{color:var(--ink);font-weight:600;font-size:1rem;margin-top:.5rem}
.legal{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}

.motion-chip{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:.625rem;background:var(--ink);color:#fff;border-radius:999px;padding:.375rem .375rem .375rem .875rem;font-size:.8125rem}
.motion-chip button{min-height:2.25rem;border:0;border-radius:999px;padding:0 .875rem;background:#fff;color:var(--ink);font-weight:600;font-size:.8125rem;cursor:pointer}
/* ── Rebuilt Rubil for Mac screens ──
   Source: projects/rubil-mac main bde5ba0 (read only): src/pill.html, src/widget.html, src/tokens.css.
   App px become em, and .app sets the scale: the screens show at 125% of app size, so an 11px
   label reads at about 14px, and they still grow with this page's text size.
   One app colour is outside the site palette and lives only here: pastel yellow #FFE9A3,
   the app's primary button (src/tokens.css --pastel-yellow). The tile cream is derived. */
.app{
  --app-pastel:#FFE9A3;
  --app-cream:color-mix(in srgb, var(--banana-cream) 33%, var(--white));
  --app-alert-text:color-mix(in srgb, var(--molten-orange) 75%, var(--ink));
  --app-ok-text:color-mix(in srgb, var(--mint-leaf) 55%, var(--ink));
  --app-hair:rgba(10,10,10,.05);
  --app-12:rgba(10,10,10,.12);
  --app-ink-70:color-mix(in srgb, var(--ink) 70%, transparent);
  font-size:1.25rem;font-family:var(--font);color:var(--ink);line-height:1.4;letter-spacing:normal;text-align:left
}
html[data-spacing="wider"] .app{letter-spacing:.045em}
.app svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* The pill (src/pill.html .state.*) */
.ap-pill{display:inline-flex;align-items:center;gap:.75em;height:2.75em;min-width:min(16.75em,100%);max-width:100%;padding:0 .5625em 0 1.125em;
  background:var(--wash);border:1px solid var(--wash-edge);border-radius:999px;box-shadow:0 4px 12px -4px rgba(10,10,10,.10);color:var(--carbon)}
.ap-pill.msg{height:auto;min-height:2.75em;min-width:0;padding:.5em .625em .5em .75em;gap:.5em}
.ap-wave{display:flex;align-items:center;gap:2px;height:1em;margin-right:auto;flex:none}
.ap-wave i{display:block;width:2px;border-radius:999px;background:var(--ink);height:3px}
.ap-time{font-size:.8125em;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-time span{color:var(--muted)}
.ap-ctrls{display:flex;align-items:center;gap:4px;margin-left:.5em}
.ap-ctrl{width:1.625em;height:1.625em;border-radius:999px;display:grid;place-items:center;color:var(--muted);flex:none}
.ap-ctrl svg{width:.875em;height:.875em;stroke-width:2.5}
.ap-ctrl svg.fill{fill:currentColor;stroke:none}
.ap-ctrl.stop{width:1.75em;height:1.75em;background:var(--carbon)}
.ap-ctrl.stop i{width:.5625em;height:.5625em;border-radius:2px;background:var(--safety-gold)}
.ap-dot{width:7px;height:7px;border-radius:999px;background:var(--safety-gold);flex:none}
.ap-track{flex:1;height:2px;border-radius:999px;background:color-mix(in srgb, var(--ink) 14%, transparent);min-width:5em;overflow:hidden}
.ap-track i{display:block;height:100%;background:var(--ink);border-radius:999px}
.ap-label{font-size:.6875em;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.ap-circle{width:1.75em;height:1.75em;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--white)}
.ap-circle svg{width:.8125em;height:.8125em;stroke-width:3}
.ap-circle.ok{background:var(--mint-leaf)}
.ap-circle.no{background:var(--molten-orange)}
.ap-done{font-size:.8125em;font-weight:500;color:var(--app-ok-text);white-space:nowrap}
.ap-unsent{font-size:.8125em;font-weight:500;color:var(--app-alert-text);white-space:nowrap}
/* Retry is the one pill control a visitor presses. The app draws a 12px link; the page keeps
   that look and widens the hit area to 44px without changing the pill's height. */
.ap-textbtn{border:0;background:transparent;color:var(--link);font:600 .75em var(--font);text-decoration:underline;text-underline-offset:2px;
  padding:0 .5em;min-height:2.75rem;margin-block:-.75rem;cursor:pointer;white-space:nowrap;letter-spacing:inherit}
.ap-iconbtn{color:var(--ink);font-size:.875em;line-height:1;padding:2px 4px}

/* A widget screen, cropped (src/widget.html .result-view, .a2-sheet, History) */
.ap-win{width:100%;max-width:23.75em;background:var(--ground);border-radius:.875em;box-shadow:var(--shadow-frame);overflow:hidden}
.ap-head{display:flex;align-items:center;gap:.5em;min-height:3em;padding:.5em 1em 1em}
.ap-back{width:1.875em;height:1.875em;margin-left:-.375em;display:grid;place-items:center;flex:none}
.ap-back svg{width:1em;height:1em;stroke-width:2.5}
.ap-tile{width:1.875em;height:1.875em;border-radius:.5625em;display:grid;place-items:center;flex:none;background:var(--app-cream);box-shadow:inset 0 0 0 1px rgba(255,215,0,.45)}
.ap-tile svg{width:1em;height:1em;stroke-width:1.8}
.ap-titles{flex:1;min-width:0;display:grid;gap:1px}
.ap-title{font-size:1.0625em;line-height:1.3;font-weight:800;letter-spacing:-.02em;color:var(--carbon)}
.ap-why{font-size:.6875em;color:var(--muted);letter-spacing:-.02em}
.ap-meta{font-size:.625em;font-weight:700;color:var(--muted);white-space:nowrap}
.ap-sheet{margin:0 1em;padding:1em;background:var(--white);border-radius:1.125em 1.125em 0 0;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr);gap:1em;align-content:start}
.ap-body{font-size:1em;line-height:1.55;min-height:6.5em}
.ap-actions{display:flex;gap:.5em}
.ap-btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:2.5em;padding:0 1em;border:1px solid var(--app-12);
  border-radius:.75em;background:var(--white);font:600 .875em var(--font);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;cursor:pointer}
.ap-btn svg{width:1em;height:1em;stroke-width:2}
.ap-btn.pri{background:var(--app-pastel);border-color:transparent;font-weight:700;box-shadow:inset 0 0 0 1px rgba(24,23,16,.55),0 1px 2px rgba(10,10,10,.10),0 4px 10px -5px rgba(10,10,10,.22)}
.ap-sec-head{display:flex;align-items:center;justify-content:space-between}
.ap-sec-label{font-size:.6875em;font-weight:700;color:var(--muted);letter-spacing:.02em}
.ap-clear{font-size:.6875em;color:var(--muted);font-weight:500}
.ap-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5em}
.ap-search,.ap-filter{height:2em;border:1px solid var(--app-hair);border-radius:.5em;background:var(--surface);font:.8125em var(--font);color:var(--carbon);min-width:0;display:flex;align-items:center}
.ap-search{padding:0 .625em}
.ap-filter{padding:0 .5em;gap:.375em}
.ap-filter svg{width:.875em;height:.875em;stroke-width:2}
.ap-count{font-size:.6875em;color:var(--muted)}
.ap-day{font-size:.6875em;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.ap-list{display:grid;grid-template-columns:minmax(0,1fr)}
.ap-row{display:flex;align-items:center;gap:.75em;min-height:2.875em;box-shadow:inset 0 -1px 0 var(--app-hair)}
.ap-row-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875em;line-height:1.43;color:var(--app-ink-70)}
.ap-row-date{flex:none;font-size:.6875em;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums}
.ap-detail{padding:.625em 0 .75em;box-shadow:inset 0 -1px 0 var(--app-hair);display:grid;grid-template-columns:minmax(0,1fr);gap:.5em}
.ap-when{font-size:.6875em;color:var(--muted);font-variant-numeric:tabular-nums}
.ap-full{font-size:.8125em;line-height:1.46}
.ap-raw-toggle{justify-self:start;padding:2px 0;font:600 .75em var(--font);color:var(--link);text-decoration:underline}
.ap-raw{padding:.5em .625em;border-radius:.5em;background:var(--surface);display:grid;gap:4px}
.ap-raw-label{font-size:.6875em;font-weight:600;color:var(--muted)}
.ap-raw-text{font-size:.8125em;line-height:1.46}
.ap-acts{display:flex;flex-wrap:wrap;gap:6px}
.ap-sbtn{display:inline-flex;align-items:center;height:2em;padding:0 .875em;border-radius:.5em;border:1px solid var(--app-hair);background:var(--white);font:600 .8125em var(--font);color:var(--ink)}
.ap-sbtn.danger{color:var(--app-alert-text)}
/* Settings rows (src/widget.html .settings-item) */
.ap-set{background:var(--white);border-radius:.875em;box-shadow:var(--shadow);padding:.25em 1.125em}
.ap-item{display:flex;align-items:center;justify-content:space-between;gap:1.125em;min-height:2.875em;padding:.75em 0;border-top:1px solid var(--app-hair)}
.ap-item:first-child{border-top:0}
.ap-item-left{display:grid;gap:1px;min-width:0}
.ap-item-label{font-size:.75em;font-weight:600;letter-spacing:-.02em;color:var(--carbon)}
.ap-item-sub{font-size:.6875em;color:var(--muted)}
.ap-select{font:500 .75em var(--font);color:var(--carbon);background:var(--surface);border:1px solid rgba(10,10,10,.30);border-radius:.5em;padding:.3125em 1.5em .3125em .5em;min-height:2.75rem;flex:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - .75em) 50%,calc(100% - .5em) 50%;background-size:.25em .25em;background-repeat:no-repeat}
.ap-select:focus-visible{outline:3px solid var(--cerulean);outline-offset:2px}

/* ── Fit: the pill keeps its size, as in the app ("The pill keeps its size", src/widget.html).
   Widget screens grow with the page's text size and reflow inside narrow containers. ── */
.win-foot,.stage-frame,.read2 > div{container-type:inline-size}
.app:has(.ap-pill){font-size:min(18px,4.3cqi)}
@container (max-width:30rem){.app:has(.ap-win),.app:has(.ap-set){font-size:1rem}}
.ap-head,.ap-sec-head,.ap-actions,.ap-item,.ap-acts{flex-wrap:wrap}
.ap-btn{flex:1 1 auto}
.ap-titles{flex:1 1 7em}
.ap-title{overflow-wrap:anywhere}
.ap-tools{display:flex;flex-wrap:wrap}
.ap-search{flex:1 1 8em}
.ap-row{flex-wrap:wrap;row-gap:0;padding-block:.375em}
.ap-row-text{flex:1 1 8em}
.ap-row-date{max-width:100%;overflow-wrap:anywhere}
.ap-item-left{flex:1 1 10em}
.rec2 summary > div{min-width:0}
.rec2 .said-big{overflow-wrap:break-word}

/* Legacy guard: the site layout puts Tailwind classes on <body> (font-sans, text-ink, bg-white), which outrank the plain body rule above. These two-part selectors win while this stylesheet is on the page. */
body.font-sans{font-family:var(--font)}
body.text-ink{color:var(--ink)}
body.bg-white{background:var(--bg)}

/* Hero buttons: Mac and Chrome side by side, Watch it work on its own line */
.hero .cta-row{gap:.75rem}
.hero .cta-row .more{flex-basis:100%;margin-top:.25rem}

/* Nav links stay on one line now that the nav has Contact us (October 7, 2026). */
.nav-links a{white-space:nowrap}

/* ── Hero: one take (2026-10-12). One key, speech at speaking pace, the clean text lands at the cursor.
   Loops while on screen with the films' Pause button; Reduce Motion shows the finished frame. ── */
.hero-take{margin:0;min-width:0}
.hero-take .ht-vis{display:grid;gap:1.125rem;min-width:0}
.hero-take .said-box{min-height:6.2rem;align-content:start}
.hero-take .ht-head{display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:baseline;padding-right:6.5rem}
.hero-take .lbl{font-size:.875rem;font-weight:600}
.ht-note{font-size:.875rem;color:var(--ink-body);opacity:0;transition:opacity 260ms var(--ease)}
.ht-note.on{opacity:1}
.hero-take .said{min-height:3em}
.hero-take .said .w{transition:opacity 260ms var(--ease)}
.hero-take .said .w.pre{opacity:0}
.hero-take .said .w.cut{text-decoration:line-through;text-decoration-thickness:.08em;opacity:.45}
.hero-take .win-row{display:flex;gap:.5rem}
.hero-take .win-row span{color:var(--ink2)}
.hero-take .win-body{min-height:6.25rem}
.hero-take .win-body p{font-weight:600;color:var(--ink)}
.ht-typed.pre{display:none}
.hero-take .win-foot{min-height:3.75rem;padding-bottom:.75rem}
.ht-pw{transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
.ht-pw.pre{opacity:0;transform:translateY(.375rem)}
.ht-pw .ap-wave i{transition:height 110ms linear}
.ht-btn{top:clamp(.75rem,2vw,1.25rem);bottom:auto;right:clamp(.75rem,2vw,1.25rem)}
html.rm .hero-take .caret{animation:none}
.ht-steps{list-style:none;margin:1rem 0 0;padding:0 .25rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.25rem}
.ht-steps li{display:flex;gap:.5rem;align-items:center;font-size:1rem;line-height:1.3;color:var(--ink2);white-space:nowrap;transition:color 220ms var(--ease)}
.ht-steps .n{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;font-size:.875rem;font-weight:600;background:var(--bg2);color:var(--ink2);transition:background 220ms var(--ease),color 220ms var(--ease)}
.ht-steps li.on{color:var(--ink)}
.ht-steps li.on .n{background:var(--ink);color:#fff}
.ht-steps .key{display:inline-block;width:3rem;height:1.625rem;border-radius:.375rem;background:#fff;box-shadow:0 0 0 1px var(--line),0 2px 0 var(--line);transition:transform 90ms var(--ease),box-shadow 90ms var(--ease)}
.ht-steps .key.down{transform:translateY(2px);box-shadow:0 0 0 1px var(--line),0 0 0 var(--line)}
.hero .lede{margin-top:1.25rem}
@media (max-width:30rem){.ht-steps{gap:.5rem;padding:0;flex-wrap:nowrap}.ht-steps li{font-size:.9375rem;gap:.375rem}.ht-steps .key{display:none}}

/* No Pause chip while a film or the hero plays (2026-10-12). Click the picture to pause; the button shows when the
   picture is not playing (Play) and on keyboard focus, so pausing stays possible without a pointer (WCAG 2.2.2). */
.zf-film,.hero-take .stage-hero{cursor:pointer}
.zf-btn[data-state="pause"]:not(:focus-visible){opacity:0;pointer-events:none}