/* Answick, redesign 7C. Claude's 6C, reworked from Michael's notes on it (computer and phone).
   One rule per thing: no override layers. Sections top to bottom, then breakpoints, then reduced motion. */
@font-face { font-family: "Funnel Display"; src: url("media/fonts/funnel-display-latin.woff2?v=10222240") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("media/fonts/funnel-sans-latin.woff2?v=10222240") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --bg: #faf9f6;            /* 5C's cream */
  --card: #fff;
  --ink: #141414;
  --ink-2: #5f5f5c;
  --soft: #8a8984;
  --line: #e7e5df;
  --blue: #0a84ff;          /* iMessage blue */
  --blue-text: #0066d6;
  --pill: #0071e3;
  --bubble-out: #0a84ff;
  --in: #e9e9eb;
  --receipt: #8e8e93;
  --chip-bg: #f2f8ff;
  --chip-line: #b9d8ff;
  --ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --text: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --gut: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --slow: cubic-bezier(.2, .7, .2, 1);
  --rise: cubic-bezier(.2, .9, .25, 1);
  --spring: cubic-bezier(.32, .72, 0, 1);  /* iOS, no bounce */
  font: 400 18px/1.6 var(--text);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body[data-theme="dark"] { --bg: #000; --card: #1c1c1e; --ink: #f5f5f7; --ink-2: #a1a1a6; --soft: #86868b; --line: #2c2c2e; --blue-text: #2997ff; }
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 84px; background: #faf9f6; overflow-x: hidden; } /* never sideways, even where overflow: clip isn't supported */
html.dark { color-scheme: dark; }   /* the scrollbar goes dark with the page */
/* phones: while the chat is open the page underneath stays exactly where it is and can't scroll (never position: fixed) */
html.lock { overflow: hidden; overscroll-behavior: none; }
.panel-log { -webkit-overflow-scrolling: touch; }
.end-sign { margin-top: 18px; }
body { margin: 0; overflow-x: clip; color: var(--ink); -webkit-font-smoothing: antialiased; }
/* the page's turn to black (the video) and back to cream (before Pricing): a black layer under everything that
   page.js fades in and out. only its opacity changes, which the GPU does on its own, so the page never repaints */
.shade { position: fixed; z-index: -1; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; background: #000; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity; }
:where(h1, h2, h3, p, dt, dd, summary, li, label, output, small, b, a, span) { transition: color .6s var(--slow), border-color .6s var(--slow); }
/* phones: when the page turns dark and back, only the text that can be on screen then (the top bar, the steps and,
   on short phones, Pricing) fades its colour; everything else switches unseen, so the turn doesn't cost a stutter */
:where(.lite) :where(h1, h2, h3, p, dt, dd, summary, li, label, output, small, b, a, span):where(:not(.top *, .steps-sec *, .pricing *)) { transition: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
img, video, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fx { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 99; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(1120px + 2 * var(--gut)); margin: 0 auto; padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.narrow { max-width: calc(720px + 2 * var(--gut)); }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.4vw, 56px); }
.kicker { margin-bottom: 14px; font: 500 16px/1.2 var(--text); color: var(--ink-2); }
.soft { color: var(--soft); }
.note { margin-top: 28px; font-size: 16px; color: var(--ink-2); max-width: 36em; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top); background: rgba(250, 249, 246, 0); border-bottom: 1px solid transparent; -webkit-backdrop-filter: saturate(1) blur(0); backdrop-filter: saturate(1) blur(0); transition: background-color .4s var(--slow), border-color .4s var(--slow), -webkit-backdrop-filter .4s var(--slow), backdrop-filter .4s var(--slow); }
.top.solid { background: rgba(250, 249, 246, .78); border-bottom-color: rgba(20, 20, 20, .08); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); }
body[data-theme="dark"] .top.solid { background: rgba(0, 0, 0, .7); border-bottom-color: rgba(255, 255, 255, .1); }
.top-in { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.brand-bot { display: block; padding-top: 10px; margin-top: -10px; }
.brand-bot .bot { width: 40px; height: 36px; }
.brand-name { font: 600 26px/1 var(--display); letter-spacing: -.03em; }
.brand-by { font-size: 15.5px; color: var(--ink-2); }
.nav-list { display: flex; gap: 6px; }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 17px; white-space: nowrap; text-decoration: none; color: var(--ink-2); border-radius: 10px; }
.nav-list a:hover { color: var(--ink); }

/* ---------- hero: "answer" gets its underline sweep, then the period drops in ---------- */
.hero { padding: clamp(40px, 7vw, 100px) 0 clamp(16px, 3vw, 40px); }
.hero-in { display: grid; justify-items: center; text-align: center; }
.pre { font-size: 16px; color: var(--ink-2); animation: rise-in .9s var(--slow) .05s both; }
.hero h1 { margin-top: 18px; font-size: clamp(46px, 7.6vw, 104px); max-width: 12em; }
.l1 { display: block; animation: frost 1.15s var(--slow) .1s both; }
.l2 { display: block; color: var(--soft); }
.l2 .w { display: inline-block; padding: .06em .04em .22em; margin: -.06em -.04em -.22em; animation: word .85s var(--slow) both; animation-delay: calc(.75s + var(--i) * .32s); }
.dd { position: relative; display: inline-block; animation: dd-ink .5s ease 2.95s forwards; }
.dd::after { content: ""; position: absolute; left: .02em; right: .02em; bottom: .02em; height: max(3px, .055em); border-radius: 9px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; animation: sweep .75s cubic-bezier(.65, 0, .25, 1) 2.85s forwards; }
@keyframes frost { from { opacity: 0; filter: blur(20px); transform: scale(1.035); } 60% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes word { from { opacity: 0; filter: blur(10px); transform: translateY(.14em); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes sweep { to { transform: scaleX(1); } }
@keyframes dd-ink { to { color: var(--blue); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
.lede { margin-top: 26px; max-width: 30em; text-wrap: balance; font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); animation: rise-in 1s var(--slow) 1.9s both; }

/* ---------- the phone demo: an iPhone 16 Pro Max screen (440 x 956 pt), 5C's size ---------- */
.demo-stage { --w: clamp(320px, 27vw, 372px); --bz: 11px; --k: 1; position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: clamp(44px, 6vw, 72px); }
/* the phone, "Send all three at once" and the timer stay together under the top bar for a few wheel steps.
   page.js scales the phone (--k) so the whole of it and both lines below fit on the screen */
.demo-pin { position: sticky; top: var(--pin-top, 88px); z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.demo-hold { height: var(--hold, 0px); }
.phone-wrap { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.iphone { position: relative; padding: var(--bz); border-radius: calc(var(--w) * .125 + var(--bz)); background: #1d1d1f; box-shadow: inset 0 0 0 1.5px #48484a, 0 0 0 1px rgba(0, 0, 0, .08), 0 22px 34px -26px rgba(20, 20, 20, .5); scale: var(--k); transform-origin: 50% 0; margin-bottom: calc(var(--ph, 0px) * (var(--k) - 1)); animation: rise-in 1.1s var(--slow) .6s both; }
.hw { position: absolute; z-index: -1; width: 5px; border-radius: 2px; background: #2c2c2e; box-shadow: inset 0 0 0 .5px #4a4a4d; }
.hw-action, .hw-up, .hw-down { left: -3px; }
.hw-side { right: -3px; }
.hw-action { top: 17.5%; height: 4.6%; }
.hw-up { top: 25.5%; height: 8.4%; }
.hw-down { top: 35.6%; height: 8.4%; }
.hw-side { top: 27.5%; height: 13.2%; }
.screen { position: relative; display: flex; flex-direction: column; width: var(--w); aspect-ratio: 440 / 956; border-radius: calc(var(--w) * .125); background: #fff; color: #000; overflow: hidden; text-align: left; font-family: var(--ios); }
.sb { position: relative; display: flex; align-items: center; justify-content: space-between; flex: none; height: calc(var(--w) * 56 / 440); padding: calc(var(--w) * 2 / 440) calc(var(--w) * 28 / 440) 0 calc(var(--w) * 40 / 440); font: 600 calc(var(--w) * 17.5 / 440)/1 var(--ios); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sb-time { min-width: 3.1em; text-align: center; }
.island { position: absolute; left: 50%; top: calc(var(--w) * 11 / 440); width: calc(var(--w) * 126 / 440); height: calc(var(--w) * 37 / 440); margin-left: calc(var(--w) * -63 / 440); border-radius: 99px; background: #000; }
.sb-icons { display: flex; align-items: center; gap: calc(var(--w) * 6 / 440); }
.sb-icons svg { height: calc(var(--w) * 13 / 440); width: auto; fill: currentColor; overflow: visible; }
.sb-icons .sb-batt { height: calc(var(--w) * 14 / 440); }
.sb-batt .shell { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .4; }
.sb-batt .nub { opacity: .45; }
.ih { position: relative; flex: none; display: grid; justify-items: center; padding: 2px 12px 10px; background: rgba(249, 249, 249, .94); border-bottom: .5px solid #d8d8dc; }
.ih-back { position: absolute; left: 14px; top: 18px; color: #0a84ff; }
.ih-back svg { width: 12px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ih-mid { display: grid; justify-items: center; gap: 3px; }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(#a8adb5, #8a8f98); color: #fff; font: 600 15.5px/1 var(--ios); letter-spacing: -.02em; }
.ih-name { font: 500 13px/1.2 var(--ios); letter-spacing: -.01em; color: #000; }
.ih-sub { font: 11.5px/1.2 var(--ios); color: #6c6c70; }
/* the thread never captures a swipe or the wheel by itself: page.js scrolls it only when it has somewhere to go */
.ph-thread { flex: 1; min-height: 0; overflow: hidden; padding: 10px 10px 8px; }
.stamp { align-self: center; margin: 2px 0 10px; font: 500 16.5px/1.3 var(--ios); color: #6c6c70; letter-spacing: -.01em; }
.ph-foot { flex: none; }
/* the questions: one per line, right-aligned, light blue */
.ask { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 6px 10px; }
.chip { flex: none; max-width: 92%; min-height: 40px; padding: 8px 13px; border-radius: 20px; border: 1px solid var(--chip-line); background: var(--chip-bg); color: #0066d6; font: 15px/1.25 var(--ios); letter-spacing: -.01em; text-align: left; overflow-wrap: anywhere; touch-action: manipulation; transition: border-color .15s, background-color .15s; }
.chip:hover { border-color: #7fb8ff; }
.chip[disabled] { cursor: default; }
.ibar { display: flex; align-items: center; gap: 8px; width: calc(100% - 20px); margin: 2px 10px 0; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; }
.ibar-plus { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #e9e9eb; color: #3c3c43; }
.ibar-plus svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ibar-field { flex: 1; display: flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid #d1d1d6; border-radius: 19px; font: 15.5px/1 var(--ios); color: #6c6c70; }
.ibar:hover .ibar-field { border-color: #0a84ff; }
.compose { display: flex; align-items: center; gap: 8px; margin: 2px 10px 0; min-height: 44px; opacity: 0; translate: 0 16px; transition: opacity .26s ease, translate .38s var(--rise); }
.compose.show { opacity: 1; translate: 0 0; }
.compose-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #e9e9eb; color: #3c3c43; }
.compose-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .38s var(--rise); }
.compose.show .compose-x svg { transform: rotate(45deg); }
.compose input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border: 1px solid #d1d1d6; border-radius: 19px; background: #fff; color: #000; font: 16px/1 var(--ios); caret-color: #0a84ff; outline: none; }
.compose input:focus, .compose input:focus-visible { outline: none; border-color: #9a9aa1; }
.compose input::placeholder { color: #8e8e93; }
.screen.composing .ask { display: none; }
.home { flex: none; align-self: center; width: calc(var(--w) * 140 / 440); height: 5px; margin: 11px 0 9px; border-radius: 3px; background: #000; }
.send { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--blue); color: #fff; transition: opacity .2s; }
.send svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.busy .send { opacity: .45; }

/* "Try me": Grok's block. after the first try it fades out where it is. it never moves */
.tryme { position: absolute; z-index: 2; top: calc(34.1% - 108px); left: calc(50% + (var(--w) / 2 + var(--bz)) * var(--k) + 40px); display: grid; justify-items: start; gap: 4px; width: 15em; max-width: calc(50% - (var(--w) / 2 + var(--bz)) * var(--k) - 56px); text-align: left; animation: fade-in .8s var(--slow) 3.2s both; transition: opacity .45s ease; }
.tryme-t { font: 600 26px/1.1 var(--display); letter-spacing: -.02em; }
.tryme-s { max-width: 13em; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.tryme-arrow { width: 46px; height: 37px; margin: 12px 0 0 -18px; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.tryme-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .45s var(--ease) 3.6s forwards; }
.tryme-arrow .ta-head { animation-delay: 3.95s; animation-duration: .3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } }
.tryme.done { opacity: 0; pointer-events: none; }

.rush { position: relative; min-height: 40px; margin-top: 10px; padding: 0 12px; border: 0; background: none; color: var(--blue-text); font: 600 16.5px/1.2 var(--text); letter-spacing: -.005em; }
.rush:hover { text-decoration: underline; text-underline-offset: 4px; }
.rush[disabled] { opacity: .45; cursor: default; }
.timer { position: relative; min-height: 1.6em; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.timer b { font: 600 1.25em/1 var(--display); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- iMessage pieces ---------- */
.thread { display: flex; flex-direction: column; font: 15px/1.3 var(--ios); }
.msg { position: relative; isolation: isolate; max-width: 76%; width: fit-content; padding: 6px 11px 7px; border-radius: 18px; overflow-wrap: anywhere; letter-spacing: -.01em; }
.msg.in { align-self: flex-start; margin-left: 4px; background: var(--in); color: #000; }
.msg.out { align-self: flex-end; margin-right: 4px; background: var(--bubble-out); color: #fff; }
.msg + .msg { margin-top: 2px; }
.msg.in + .msg.out, .msg.out + .msg.in, .receipt + .msg, .sys + .msg, .msg + .sys { margin-top: 9px; }
.msg.tail { margin-bottom: 3px; }
/* Apple's round tail, on the last bubble of a run only: it squares the bottom corner, flares out and ends in a thin
   upturned tip just below the bubble */
.msg.tail::before { content: ""; position: absolute; z-index: -1; bottom: -5px; width: 20px; height: 20px; background: inherit;
  -webkit-clip-path: path("M20 0H9C9 6.2 8 11 3.6 16.4C2.8 17.4 3.3 18.6 4.6 18.5C9 18.1 12.8 16.6 15.6 14.2H20Z");
  clip-path: path("M20 0H9C9 6.2 8 11 3.6 16.4C2.8 17.4 3.3 18.6 4.6 18.5C9 18.1 12.8 16.6 15.6 14.2H20Z"); }
.msg.in.tail::before { left: -7px; }
.msg.out.tail::before { right: -7px; transform: scaleX(-1); }
.receipt { align-self: flex-start; margin: 3px 0 0 16px; font: 600 12px/1.25 system-ui, -apple-system, sans-serif; color: var(--receipt); letter-spacing: -.01em; }
.msg.out + .receipt { align-self: flex-end; margin: 3px 16px 0 0; }
.sys { align-self: center; text-align: center; font: 12px/1.3 var(--ios); color: #6c6c70; max-width: 30ch; }
.receipt + .sys { margin-top: 8px; }
.msg.typing { display: flex; gap: 4px; align-items: center; padding: 11px 12px; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: dots 1.1s ease-in-out infinite; }
.msg.typing i:nth-child(2) { animation-delay: .16s; }
.msg.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes dots { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
.msg.pop { animation: pop .34s var(--spring) both; transform-origin: 0 100%; }
@keyframes pop { from { opacity: 0; transform: scale(.86); } }
/* a sent bubble waits, invisible, while its flying copy lands on it; then its tail fades in */
.msg.landing { visibility: hidden; }
.msg.landed::before { animation: tail-in .13s ease-out both; }
@keyframes tail-in { from { opacity: 0; } }
.flyer { position: fixed; z-index: 120; left: 0; top: 0; margin: 0; pointer-events: none; overflow: hidden; transform-origin: 0 0; font: 15px/1.3 var(--ios); letter-spacing: -.01em; will-change: transform, width, height; }
.flyer > span { position: absolute; left: 0; top: 0; display: block; overflow-wrap: anywhere; }

/* ---------- stats ---------- */
.facts { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 120px); }
.facts-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.facts li { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 6px clamp(16px, 2.6vw, 36px); }
.facts li + li { border-left: 1px solid var(--line); }
.facts b { font: 500 clamp(36px, 4.2vw, 54px)/1.05 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.facts span { max-width: 22em; font-size: 17px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }

/* ---------- the math and how it works: one scene ---------- */
.story { position: relative; z-index: 2; }
.stage { position: relative; }
.story.live .stage { position: sticky; top: 0; height: var(--stage-h, 100vh); }
/* the card: white and opaque. it arrives blank and fills the screen; its parts fade in (.f1, .f2, .f3); later it curls
   into a ball. page.js draws the clip and the transform */
.card { position: relative; z-index: 2; display: grid; align-items: center; padding-block: clamp(64px, 9vw, 112px); background: #fff; color: #141414; }
.story.live .card { height: var(--stage-h, 100vh); padding-block: calc(var(--bar, 76px) + 14px) calc(var(--gap-l, 0px) + 20px); transform-origin: var(--ox, 50%) var(--oy, 50%); will-change: transform, clip-path; }
.math-in { position: relative; max-width: calc(1240px + 2 * var(--gut)); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; opacity: var(--mo, 1); transform: scale(var(--mk, 1)); transform-origin: 50% 50%; }
.f1 { opacity: var(--f1, 1); transform: translateY(calc((1 - var(--f1, 1)) * 14px)); }
.f2 { opacity: var(--f2, 1); transform: translateY(calc((1 - var(--f2, 1)) * 18px)); }
.f3 { opacity: var(--f3, 1); transform: translateY(calc((1 - var(--f3, 1)) * 22px)); }
.card.quiet .calc { pointer-events: none; }
.math-copy { position: relative; }
.card .kicker { position: absolute; bottom: 100%; left: 0; margin: 0 0 10px; font: 600 clamp(22px, 2vw, 28px)/1.15 var(--display); letter-spacing: -.02em; color: #0a84ff; }
.card h2 { font-size: clamp(34px, 3.7vw, 54px); line-height: 1.04; }
.card .soft { color: #8a8984; }
.card .sub { margin-top: 20px; font-size: clamp(17px, 1.5vw, 20px); max-width: 30em; color: #5f5f5c; }
.calc { display: grid; gap: 12px; }
.field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 16px; }
.field label { font-size: 16.5px; line-height: 1.35; font-weight: 500; color: #141414; }
.field output { font: 500 26px/1 var(--display); letter-spacing: -.02em; color: #141414; font-variant-numeric: tabular-nums; }
/* iOS-style slider. .slider takes the pointer: a tap anywhere jumps there, a touch drag glides and settles on a step,
   a vertical swipe still scrolls the page. no focus or tap ring unless you're using the keyboard */
.slider { --f: .5; position: relative; grid-column: 1 / -1; padding: 4px 0; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.slider input { --p: 50%; position: relative; z-index: 1; display: block; width: 100%; height: 34px; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; }
.slider input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #0a84ff var(--p), rgba(120, 120, 128, .2) var(--p)); }
.slider input::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(120, 120, 128, .2); }
.slider input::-moz-range-progress { height: 6px; border-radius: 6px; background: #0a84ff; }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 24px; margin-top: -9px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 2px 7px rgba(0, 0, 0, .15), 0 .5px 1px rgba(0, 0, 0, .1); transition: transform .2s var(--ease); }
.slider input::-moz-range-thumb { width: 38px; height: 24px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 2px 7px rgba(0, 0, 0, .15); transition: transform .2s var(--ease); }
.slider.drag input::-webkit-slider-thumb { transform: scale(1.22); }
.slider.drag input::-moz-range-thumb { transform: scale(1.22); }
.slider input:focus, .slider input:focus-visible { outline: none; }
.slider.kb input:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.ticks { position: absolute; inset: 0; pointer-events: none; }
.tick { position: absolute; top: calc(50% + 11px); width: 1px; height: 5px; margin-left: -.5px; border-radius: 1px; background: rgba(120, 120, 128, .38); }
.calc-result { margin-top: 4px; padding-top: 16px; border-top: 1px solid #e7e5df; }
.calc-k { font-size: 15.5px; color: #5f5f5c; }
/* the result is the biggest thing in the section. it comes in with the sliders, all at once */
.calc-v { margin-top: 4px; font: 600 clamp(66px, 8vw, 118px)/1 var(--display); letter-spacing: -.045em; color: #0a84ff; font-variant-numeric: tabular-nums; }
.calc-v small { font: 400 18px/1 var(--text); letter-spacing: 0; color: #5f5f5c; }
.calc-note { margin-top: 12px; font-size: 16px; color: #141414; }
.calc-fine { font-size: 13.5px; color: #5f5f5c; }
/* "How it works" sits in the middle the whole time, behind the card. the card lands as the dot on its i; then the
   title moves up and the video fades in under it. page.js places both (--ty, --ts, --vt, --vw, --vf) */
.how-block { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.how-title { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding-inline: 12px; text-align: center; white-space: nowrap; z-index: 2; color: #f5f5f7; font-size: clamp(50px, 9vw, 128px); line-height: 1.1; opacity: var(--hf, 1); transform: translateY(var(--ty, 0px)) scale(var(--ts, 1)); transform-origin: 50% 50%; }
/* the words are drawn (tools/how_title.py) so they look the same everywhere: the i without its dot, and the dot as a
   circle of its own, so the card can become it */
.how-title .ht { display: block; margin: 0 auto; height: 1.1em; width: auto; max-width: none; overflow: visible; fill: currentColor; }
.how-title .i-dot { opacity: var(--dot, 1); }
.player { position: absolute; z-index: 1; left: 50%; top: var(--vt, 0px); width: var(--vw, 340px); max-width: calc(100% - 32px); margin: 0; opacity: var(--vf, 1); transform: translate(-50%, calc((1 - var(--vf, 1)) * 26px)); }
.how-block.on .player { pointer-events: auto; }
.story:not(.live) .how-block { position: static; display: grid; justify-items: center; padding: clamp(72px, 10vw, 120px) max(var(--gut), env(safe-area-inset-left)) 0; pointer-events: auto; }
.story:not(.live) .how-title { position: static; transform: none; color: var(--ink); font-size: clamp(44px, 7vw, 96px); }
.story:not(.live) .player { position: static; width: min(400px, 100%); max-width: 100%; margin-top: 20px; opacity: 1; transform: none; }
.frame { position: relative; }
/* the video's edges soften into the black, but only the last few percent: its own words (STEP 2...) stay clear */
.frame video { width: 100%; height: auto; aspect-ratio: 9 / 16; background: transparent; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect; }
.p-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 0; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; transition: transform .25s var(--ease), opacity .25s; }
.p-play:hover { transform: scale(1.06); }
.p-play svg { width: 30px; height: 30px; fill: currentColor; }
.playing .p-play { opacity: 0; transform: scale(.9); pointer-events: none; }
.p-mute { position: absolute; right: 8%; bottom: 7%; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; display: grid; place-items: center; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); transition: opacity .2s; }
.p-mute:hover { opacity: .8; }
.p-mute svg { width: 28px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p-mute .i-spk { fill: currentColor; stroke: none; }
.p-mute .i-x, .muted .p-mute .i-wave { display: none; }
.muted .p-mute .i-x { display: inline; }

/* ---------- steps: they follow the scroll, both ways ---------- */
.steps-sec { position: relative; z-index: 1; padding: 6px 0 max(180px, 36vh); }
.steps { width: min(100%, 680px); margin: 0 auto; border-top: 1px solid var(--line); }
.steps li { --sv: 1; position: relative; display: grid; gap: 4px; padding: 24px 0 24px 76px; border-bottom: 1px solid var(--line); opacity: var(--sv); transform: translateY(calc((1 - var(--sv)) * 34px)); }
.steps .n { position: absolute; left: 0; top: 24px; font: 500 22px/1.2 var(--display); color: var(--soft); font-variant-numeric: tabular-nums; }
.steps b { font: 500 clamp(21px, 1.9vw, 25px)/1.25 var(--display); letter-spacing: -.02em; }
.steps li > span:last-child { font-size: 16.5px; color: var(--ink-2); }
/* step four has no number: the Do Not Disturb circle sits there and switches on the way iOS does it: it brightens
   as it's pressed, fills white, then the purple moon grows in as a thin crescent that fills out */
.focus { --pr: 0; --wd: 0; position: absolute; left: 0; top: 19px; display: block; transform: scale(calc(1 + var(--pr) * .08)); }
.fc-dot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(120, 120, 128, calc(.36 + var(--pr) * .2)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); }
.fc-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; opacity: var(--wd); }
.fc-dot svg { position: relative; width: 23px; height: 23px; overflow: visible; }
.fc-off { fill: #fff; opacity: calc(1 - var(--wd)); }
.fc-on { fill: #5e5ce6; opacity: 0; transform-origin: 9.4px 10.6px; }

/* ---------- pricing: "Pricing" rises out of the water ---------- */
.pricing { position: relative; }
.pricing.live { height: 300vh; height: 300svh; }
.pricing .pin { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.pricing.live .pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: var(--bar, 76px); } /* centred in the space under the top bar */
.pricing:not(.live) .pin { padding: clamp(72px, 10vw, 120px) 0 0; }
.price-wrap { max-width: calc(880px + 2 * var(--gut)); padding-top: 64px; }
.pricing:not(.live) .price-wrap, .pricing.live .price-wrap { padding-top: 0; }
/* short screens: the same block, a little tighter, so it still pins and centres */
@media (max-height: 800px) {
  .pricing .rule { margin-top: 18px; }
  .pricing .menu .line { padding: 13px 0; }
  .pricing .note { margin-top: 16px; font-size: 15px; line-height: 1.5; }
  .pricing .note-2 { margin-top: 8px; }
  .pricing .pill { margin-top: 16px; }
}
@media (max-width: 600px) and (max-height: 800px) {
  .pricing .menu .line { padding: 10px 0; }
  .pricing .note { margin-top: 12px; font-size: 14px; line-height: 1.45; }
  .pricing .note-2 { margin-top: 6px; }
  .pricing .pill { margin-top: 12px; }
}
.price-title { font-size: clamp(40px, 5vw, 64px); }
.water { display: inline-block; transform-origin: 50% 50%; }
/* Safari clips an SVG filter to the box it's on, so the word gets room to ripple and blur inside its own box */
[data-water] { padding: .3em .2em; margin: -.3em -.2em; }
.rule { display: block; height: 1px; margin-top: 28px; background: var(--ink); transform: scaleX(var(--r, 1)); transform-origin: 50% 50%; }
.line { transition: opacity .7s var(--slow), transform .7s var(--slow), filter .7s var(--slow), color .6s var(--slow), border-color .6s var(--slow); }
.js .pricing.live .line:not(.on) { opacity: 0; transform: translateY(22px); filter: blur(8px); }
.menu .line { display: flex; align-items: baseline; gap: 20px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.menu dt { flex: 1 1 auto; min-width: 0; font: 500 clamp(18px, 1.8vw, 22px)/1.3 var(--display); letter-spacing: -.01em; }
.menu .duo dt:first-child { flex: none; }
.menu .duo .plus { flex: 0 1 auto; margin-left: calc(.28em - 20px); }
.menu dd { flex: none; margin-left: auto; text-align: right; font: 500 clamp(26px, 2.8vw, 36px)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.menu dd small { font: 400 15px/1 var(--text); letter-spacing: 0; color: var(--ink-2); }
.menu .dd-text { flex: 0 1 auto; max-width: 14em; font: 400 16px/1.3 var(--text); letter-spacing: 0; color: var(--ink-2); white-space: normal; }
.menu .qty { margin-left: .45em; font: 400 15px/1.3 var(--text); letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.note-2 { margin-top: 12px; }
.note b { font-weight: 600; color: var(--ink); }
.pill { display: inline-flex; align-items: center; min-height: 44px; margin-top: 28px; padding: 0 24px; border-radius: 999px; background: var(--pill); color: #fff; font: 500 17px/1 var(--text); text-decoration: none; transition: background-color .2s; }
.pill:hover { background: #0077ed; }
.pill-line { margin-left: 10px; background: transparent; color: var(--blue-text); box-shadow: inset 0 0 0 1.5px currentColor; }
.pill-line:hover { background: rgba(10, 132, 255, .08); }

/* ---------- a breath, then the questions ---------- */
.bridge { padding: clamp(72px, 12vw, 160px) 0 clamp(56px, 8vw, 104px); text-align: center; }
.quote { font: 500 clamp(28px, 3.6vw, 46px)/1.15 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.quote .soft { display: block; }
.faq { padding: 0 0 clamp(24px, 4vw, 48px); }
.faq h2 { font-size: clamp(32px, 3.8vw, 48px); }
.faq-list { margin-top: 22px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; font: 500 clamp(18px, 1.6vw, 21px)/1.35 var(--display); letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.faq summary:focus { outline: none; }
.faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 26px/1 var(--display); color: var(--ink-2); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 34em; }
.rv { transition: opacity .8s var(--slow), transform .8s var(--slow), color .6s var(--slow), border-color .6s var(--slow); }
.js .rv:not(.in) { opacity: 0; transform: translateY(22px); }

/* ---------- "Want it for your business?" ---------- */
.end { text-align: center; }
.end.live .end-scene { height: 200vh; height: 200svh; }
.end-pin { display: grid; align-content: center; justify-items: center; }
.end.live .end-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.end:not(.live) .end-pin { padding: clamp(72px, 10vw, 120px) 0; }
.end-title { position: relative; font-size: clamp(34px, 4.4vw, 56px); }
.end-bot { display: inline-block; vertical-align: -.06em; margin-left: .22em; opacity: var(--bo, 1); transform: translateY(calc((1 - var(--bo, 1)) * .6em)); }
.end-bot .bot { width: .86em; height: .78em; }
.end-more { --ev: 1; margin-top: 12px; color: var(--ink-2); opacity: var(--ev); transform: translateY(calc((1 - var(--ev)) * 24px)); }
.end .mail { margin-top: 26px; font: 500 clamp(21px, 5.6vw, 48px)/1.2 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.end .mail a { color: var(--ink); }
.end .mail a:hover { color: var(--blue-text); }
/* the email keeps its blue underline that breaks around g and y */
.ul { text-decoration-line: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: .15em; -webkit-text-decoration-skip: ink; text-decoration-skip: ink; text-decoration-skip-ink: auto; }
/* "Get a free site review": a gray underline under the words only; then a gray arrow, drawn (a text arrow turns into
   an emoji on iPhone): thick, rounded, long tail. as an inline-block it never gets the underline */
.rev { display: inline-block; padding: 10px 0; color: var(--ink-2); text-decoration-line: underline; text-decoration-color: #b9b8b3; text-decoration-thickness: 1.5px; text-underline-offset: .22em; -webkit-text-decoration-skip: ink; text-decoration-skip: ink; text-decoration-skip-ink: auto; }
.rev .arr { display: inline-block; width: .74em; height: .74em; margin-left: .32em; vertical-align: -.02em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rev:hover { color: var(--ink); text-decoration-color: #8a8984; }

.foot { padding: 56px 0 160px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.foot-in { display: grid; gap: 4px; }
.foot-link, .see-terms { color: inherit; text-decoration-line: underline; text-decoration-color: #b9b8b3; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.foot-link:hover, .see-terms:hover { color: var(--ink); }
.see-terms { margin-left: .25em; white-space: nowrap; }

/* ---------- the chat: Claude's launcher; a sheet on a computer, full screen on a phone ---------- */
.chat { position: fixed; z-index: 50; right: var(--gut); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); font-family: var(--ios); pointer-events: none; }
/* the box around the launcher is never in the way: only the launcher and the chat themselves take a tap (on a phone
   the box spans the whole bottom of the screen, and it used to swallow taps on whatever was under it) */
.chat > * { pointer-events: auto; }
.launch { display: flex; align-items: center; gap: 14px; padding: 15px 28px 15px 17px; border: 0; border-radius: 30px 30px 30px 6px; background: #262420; color: #f4f1ea; box-shadow: 0 12px 32px rgba(20, 20, 20, .2); text-align: left; transition: background-color .2s, box-shadow .6s, transform .5s cubic-bezier(.2, 1.15, .3, 1), opacity .25s, padding .42s var(--spring), gap .42s var(--spring), visibility 0s; }
.launch:hover { background: #33302b; }
body[data-theme="dark"] .launch { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 32px rgba(0, 0, 0, .5); }
/* the words fold away when it tucks into the corner; the icon stays */
.launch-text { display: block; max-width: 13em; overflow: hidden; white-space: nowrap; transition: max-width .42s var(--spring), opacity .22s ease; }
.chat.tuck:not(.open) .launch { gap: 0; padding: 13px 14px 13px 13px; }
.chat.tuck:not(.open) .launch-text { max-width: 0; opacity: 0; }
.launch-text b { display: block; font: 600 18px/1.2 var(--ios); letter-spacing: -.01em; }
.launch-text small { display: block; font: 14px/1.3 var(--ios); color: #a8a49c; }
.chat.open .launch { visibility: hidden; }
.chat.hide:not(.open) .launch { transform: translateY(calc(100% + 32px)); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .25s, visibility 0s .35s; }
.panel { position: fixed; right: var(--gut); bottom: max(18px, env(safe-area-inset-bottom)); width: min(400px, calc(100vw - 2 * var(--gut))); height: min(640px, calc(100svh - 36px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: #fff; color: #000; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(20, 20, 20, .35), 0 0 0 1px rgba(20, 20, 20, .06); opacity: 0; translate: 0 18px; transition: opacity .26s ease, translate .38s var(--rise); }
.panel.show { opacity: 1; translate: 0 0; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 12px 12px 16px; border-bottom: 1px solid #efefef; }
.panel-head .bot.mini { flex: none; }
.panel-avatar { display: none; }
.panel-who { min-width: 0; margin-right: auto; }
.panel-who b { display: block; font: 600 16px/1.25 var(--ios); }
.panel-who small { display: block; font: 12px/1.3 var(--ios); color: #6c6c70; }
.panel-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f1f1f3; color: #000; display: grid; place-items: center; }
.panel-x:hover { background: #e6e6ea; }
.panel-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.panel-log { overflow-y: auto; overflow-x: hidden; padding: 16px 12px 12px; overscroll-behavior: contain; font-size: 16px; }
.panel-log .stamp { margin-top: 0; }
/* three stacked suggestions (two lines at most); after a tap they fold into one line you can swipe */
.panel-foot { display: contents; }
/* suggestions: always one line you can scroll sideways (finger, trackpad, wheel or drag), fading out at the edges */
.panel-try { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 2px 14px 10px; }
.panel-try .chip { max-width: 88%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.panel-try.row { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 14px; touch-action: pan-x; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); }
.panel-try.row.dragging { cursor: grabbing; }
.panel-try.row::-webkit-scrollbar { display: none; }
.panel-try.row .chip { display: block; flex: none; max-width: none; white-space: nowrap; }
.panel-form { display: flex; align-items: center; gap: 6px; padding: 8px 12px 12px; }
.panel-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid #d1d1d6; border-radius: 22px; background: #fff; color: #000; font: 17px var(--ios); caret-color: #0a84ff; outline: none; }
.panel-form input:focus, .panel-form input:focus-visible { outline: none; border-color: #9a9aa1; }
.panel-form input::placeholder { color: #8e8e93; }
.panel-form .send { width: 44px; height: 44px; }
.panel-form .send svg { width: 26px; height: 26px; }

/* ---------- breakpoints ---------- */
@media (max-width: 1000px) {
  .iphone { animation-delay: 2.03s; }
  .tryme { animation-delay: 2.8s; }
  .tryme-arrow path { animation-delay: 3.15s; }
  .tryme-arrow .ta-head { animation-delay: 3.5s; }
  .tryme { position: static; order: -1; justify-items: center; width: auto; max-width: none; margin-bottom: 14px; text-align: center; }
  .tryme-arrow { margin: 18px 0 8px; transform: rotate(-90deg); }
}
@media (max-width: 920px) {
  /* one column: the heading sits cleanly above the sliders */
  .math-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .card .kicker { position: static; margin: 0 0 12px; }
  .card h2 { font-size: clamp(32px, 8.4vw, 46px); overflow-wrap: break-word; }
  /* the visible track runs from the first tick to the last, so a thumb at a stop sits dead on its tick */
  .slider::before, .slider::after { content: ""; position: absolute; left: 19px; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; pointer-events: none; }
  .slider::before { right: 19px; background: rgba(120, 120, 128, .2); }
  .slider::after { width: calc((100% - 38px) * var(--f)); background: #0a84ff; }
  .slider input::-webkit-slider-runnable-track { background: transparent; }
  .slider input::-moz-range-track, .slider input::-moz-range-progress { background: transparent; }
}
@media (max-width: 700px) {
  /* two lines of words, and the price sits in the middle of them */
  .menu .duo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; align-items: center; }
  .menu .duo dt:first-child { grid-area: 1 / 1; }
  .menu .duo .plus { grid-area: 2 / 1; margin-left: 0; }
  .menu .duo dd { grid-area: 1 / 2 / 3 / 3; align-self: center; }
}
@media (max-width: 600px) {
  :root { font-size: 17px; }
  .brand-name { font-size: 23px; }
  .brand-by { display: none; }
  .nav-list a { padding: 0 9px; font-size: 15px; }
  .nav-list li:first-child { display: none; }
  .demo-stage { --w: min(calc(100vw - 68px), 356px); }
  .facts-in { grid-template-columns: minmax(0, 1fr); }
  .facts li { padding: 22px 8px; }
  .facts li + li { border-left: 0; border-top: 1px solid var(--line); }
  /* the math fits one phone screen: page.js scales it a touch further on short screens */
  .math-in { gap: 18px; }
  .card h2 { font-size: clamp(27px, 8.2vw, 42px); font-size: clamp(27px, min(8.2vw, 4.7svh), 42px); }
  .card .sub { margin-top: 12px; font-size: 15.5px; line-height: 1.45; }
  .calc { gap: 6px; }
  .field label { font-size: 15.5px; }
  .field output { font-size: 23px; }
  .calc-result { margin-top: 2px; padding-top: 10px; }
  .calc-k { font-size: 14.5px; }
  .calc-v { font-size: clamp(46px, 13vw, 58px); }
  .calc-note { margin-top: 6px; font-size: 15px; line-height: 1.4; }
  .calc-fine { font-size: 12.5px; }
  .steps li { padding-left: 62px; }
  .menu .line { gap: 14px; padding: 18px 0; }
  .receipt { font-size: 13px; }
  /* phones: the chat grows out of whatever opened it to full screen. swipe down from the top part, or X, to close */
  .chat { left: 12px; right: 12px; display: flex; justify-content: flex-end; }
  .panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-shadow: none; opacity: 1; translate: 0 0; transition: border-radius .3s var(--spring); }
  /* pulled down, it's a card with round corners like iOS, and the page shows behind it; full screen, it's square */
  .panel.pull { border-radius: 40px; }
  .panel-head { position: relative; display: grid; justify-items: center; padding: 10px 60px 10px; background: rgba(249, 249, 249, .94); border-bottom: .5px solid #d8d8dc; }
  .panel-head .bot.mini { position: absolute; left: 14px; top: 16px; }
  .panel-x { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; }
  .panel-who { display: grid; justify-items: center; gap: 3px; margin: 0; text-align: center; }
  .panel-avatar { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(#a8adb5, #8a8f98); color: #fff; font: 600 19px/1 var(--ios); letter-spacing: -.02em; }
  .panel-who b { font: 500 13.5px/1.2 var(--ios); }
  .panel-who small { font-size: 11.5px; }
  .panel-who .by { display: none; }
  .panel-log { padding: 12px 10px; font-size: 17px; }
  .panel-form { padding: 6px 10px 10px; }
  .panel-form input { background: #f5f9ff; border-color: #cfe3ff; }
  /* iOS Messages: the conversation runs on under the suggestions and the text field, seen through frosted glass */
  .panel { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
  .panel-head { grid-column: 1; }
  .panel-log { grid-column: 1; grid-row: 2 / 4; padding-bottom: calc(var(--foot, 130px) + 12px); }
  .panel-foot { grid-column: 1; grid-row: 3; align-self: end; min-width: 0; position: relative; z-index: 1; display: block; padding-bottom: env(safe-area-inset-bottom); margin-bottom: calc(-1 * env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 -.5px 0 rgba(0, 0, 0, .1); }
  .panel-try { padding-top: 8px; }
  .end-bot { display: block; width: fit-content; margin: 14px auto 0; }
  .end-bot .bot { width: 40px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(:not(.bot, .bot *)), :where(:not(.bot, .bot *))::before, :where(:not(.bot, .bot *))::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .msg.typing i { animation: none; opacity: .7; }
  .js .rv:not(.in) { opacity: 1; transform: none; }
}

/* no highlighting on the page; the email and anything you type in stay selectable */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a[href^="mailto:"], input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* odometer digits (number-spin.js), only while spinning; at rest it's plain text. the window reaches .35em past each side so wide glyphs are never cut sideways: each digit keeps its place in the line (an invisible copy sets width and baseline)
   and a strip of digits slides behind a window the height of the line */
.ns { white-space: pre; font-variant-numeric: tabular-nums; }
.ns-col { display: inline-block; position: relative; }
.ns-ghost { visibility: hidden; }
.ns-win { position: absolute; left: -.35em; right: -.35em; top: -.12em; bottom: -.12em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.ns-strip { position: absolute; left: .35em; top: .12em; white-space: pre; text-align: left; will-change: transform; }

/* the end heading blurs up to 16px while it fades in: room so Safari never clips the soft edge */
[data-water="b"] { padding: 1em 1.1em; margin: -1em -1.1em; }

/* ---------- phones and tablets: the same scenes, made of things the GPU moves on its own ---------- */
/* the water: the word drawn again in bands (page.js sways them) under a CSS blur, instead of an SVG filter. the bands
   only exist while the word is coming up; the rest of the time it's the plain word. a CSS blur isn't clipped to the
   box, so the end heading's bands skip its extra room (the heading itself keeps it, so nothing moves) */
.lite [data-water] { position: relative; }
.wb { display: none; position: absolute; inset: 0; padding: inherit; pointer-events: none; }
.lite [data-water="b"] .wb { inset: .7em .9em; padding: .3em .2em; }
.wb > span { position: absolute; inset: 0; padding: inherit; }
.lite [data-water].wet .wt { opacity: 0; }
.lite [data-water].wet .wb { display: block; }
/* while the math and the steps are near, the parts that fade and move have layers of their own, so a scroll frame
   moves layers instead of repainting the screen. away from them, the layers are given back */
.lite .story.near :is(.math-in, .f1, .f2, .f3, .how-title, .player) { will-change: transform, opacity; }
.lite .steps-sec.near .steps li { will-change: transform, opacity; }