/* Table Scribe website ("Light Moss").
   Mobile-first: the base rules are the phone layout; the min-width media queries at the end add tablet and desktop.
   Fonts are self-hosted (Geist, Geist Mono and Newsreader, all SIL OFL): the site makes no third-party requests. */

@font-face { font-family: 'Geist'; src: url('fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-Variable-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ink: #1D201E;
  --app-ink: #262B27;
  --muted: #6A706B;
  --faint: #8A908B;
  --ui-gray: #646B66;
  --green: #1A763F;
  --green-ink: #0D6332;
  --mint: #A5E3B4;
  --mint-bg: #E2F6E6;
  --paper: #F3F5F1;
  --line: #E3E6E1;
  --forest: #19482C;
  --forest-deep: #133621;
  --forest-text: #D3E3D7;
  --forest-muted: #A9C2B1;
  --red: #D73431;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --gutter: 16px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--green-ink); }
a:hover { color: var(--ink); }
img, svg { display: inline-block; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.section--forest :focus-visible, .closer :focus-visible, .site-footer :focus-visible { outline-color: var(--mint); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: #FFFFFF; font-size: 16px; text-decoration: none; }
.skip:focus { top: 12px; color: #FFFFFF; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.grow { flex-grow: 1; }
.wrap { max-width: 1100px; margin: 0 auto; }

/* Entity kinds: people, places, items, factions, and the DM's voice */
.k-person { --k: #2A61B1; --kbg: #2A61B11A; --khl: #2A61B11F; }
.k-place { --k: #A8471B; --kbg: #A8471B1A; --khl: #A8471B1F; }
.k-item { --k: #976B03; --kbg: #976B031A; --khl: #976B031F; }
.k-faction { --k: #8D2D7D; --kbg: #8D2D7D1A; --khl: #8D2D7D1F; }
.k-dm { --k: #5B6460; --kbg: #5B64601A; --khl: #5B64601F; }
.c-person { color: #2A61B1; }
.c-place { color: #A8471B; }
.c-item { color: #976B03; }
.c-faction { color: #8D2D7D; }
.c-green { color: var(--green); }
.c-gray { color: var(--ui-gray); }
.c-faint { color: var(--faint); }
.c-red { color: var(--red); }
.i { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ent { color: var(--k); font-weight: 600; text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--k); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--kbg); color: var(--k); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.btn--primary { height: 46px; padding: 0 24px; background: var(--green); color: #FFFFFF; font-size: 17px; }
.btn--primary:hover, .btn--nav:hover { background: #146535; color: #FFFFFF; }
.btn--light { height: 46px; padding: 0 24px; background: #FFFFFF; color: var(--green-ink); font-size: 17px; }
.btn--light:hover { background: #E9F4EC; color: var(--green-ink); }
.btn--nav { height: 44px; padding: 0 20px; background: var(--green); color: #FFFFFF; font-size: 16px; }
.link-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; color: var(--green-ink); text-decoration: none; white-space: nowrap; }
.link-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-more--mint { color: var(--mint); }
.link-more--mint:hover { color: #FFFFFF; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; margin-top: 30px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; padding: 0 var(--gutter); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); border-bottom: 1px solid var(--line); }
.site-header__in { min-height: 60px; display: flex; align-items: center; gap: 8px 26px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__mark { flex-shrink: 0; color: var(--green); }
.brand__name { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.site-nav { display: none; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.site-nav a { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }

/* Product menu (shown with the nav, from 768 up): every section of the page, and the deal. */
.site-header__in { position: relative; }
.pmenu { display: flex; }
.pmenu__button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.pmenu__button:hover, .pmenu.is-open .pmenu__button { color: var(--ink); }
.pmenu__chev { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.pmenu.is-open .pmenu__chev { transform: rotate(180deg); }
.pmenu__panel { position: absolute; top: 100%; right: 0; z-index: 20; width: min(620px, calc(100vw - 2 * var(--gutter))); margin-top: 8px; padding: 10px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 24px 60px rgba(17, 30, 21, .16), 0 4px 12px rgba(17, 30, 21, .06), 0 0 0 1px rgba(17, 30, 21, .07); text-align: left; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.pmenu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.pmenu.is-open .pmenu__panel, html:not(.js) .pmenu:hover .pmenu__panel, html:not(.js) .pmenu:focus-within .pmenu__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pmenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.site-nav .pmenu__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.site-nav .pmenu__item:hover, .site-nav .pmenu__item:focus-visible { background: var(--paper); color: var(--ink); }
.pmenu__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--mint-bg); color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
.pmenu__icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pmenu__text { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.pmenu__title { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.pmenu__desc { font-size: 13px; line-height: 1.35; color: var(--muted); }

/* ---------- Hero ---------- */
.hero { background: #FFFFFF; padding: 52px var(--gutter) 64px; overflow: hidden; }
.hero__in { text-align: center; }
.hero__title { margin: 12px 0 0; font-size: clamp(38px, 11.6vw, 52px); font-weight: 600; letter-spacing: -.045em; line-height: .98; color: var(--ink); }
.hero__accent { color: var(--green); }
.hero__live { margin: 0; }
.hero__line { display: block; text-wrap: balance; }
/* The game in the hero's line: D&D, then the others in turn (script.js), in green, underlined. Without script, or with
   Reduce Motion, it just says D&D. */
.game-turn { position: relative; display: inline-block; vertical-align: top; height: 1.4em; transition: width .4s ease; }
.game-turn.is-live { overflow: hidden; }
.game-turn__word { display: inline-block; white-space: nowrap; color: var(--green); font-weight: 500; text-decoration: underline;
  text-decoration-color: rgba(26, 118, 63, .5); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: transform .4s ease, opacity .4s ease; }
.game-turn.is-live .game-turn__word { position: absolute; left: 0; top: 0; }
.game-turn__word.is-below { transform: translateY(.7em); opacity: 0; }
.game-turn__word.is-above { transform: translateY(-.7em); opacity: 0; }
.hero__live + .hero__title { margin-top: 20px; }
.hero__sub { margin: 22px auto 0; max-width: 640px; font-size: 19px; line-height: 1.4; color: var(--muted); text-wrap: balance; }
.price-note { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--faint); text-wrap: balance; }
.price-note strong { font-weight: 600; color: var(--ink); }
.hero__caption { margin: 20px 0 0; font-size: 16px; line-height: 1.45; color: var(--faint); text-wrap: balance; }

/* The Mac in the hero. Phone: a re-laid-out window with a collapsed sidebar; tablet and up: the full 1160px laptop, scaled. */
.hero-shot { margin: 44px -6px 0; text-align: left; }
.laptop { position: relative; }
.laptop__lid { padding: 7px; border-radius: 18px 18px 7px 7px; background: #1F2120; }
.laptop__screen { height: 440px; display: flex; padding: 10px 10px 0; border-radius: 12px 12px 3px 3px; overflow: hidden; background: #EEF0EA; }
.laptop__base { height: 10px; margin: 0 -8px; border-radius: 0 0 12px 12px; background: #C9CCC8; box-shadow: inset 0 2px 0 #DEE0DD; }
.laptop__notch { width: 70px; height: 4px; margin: -10px auto 0; border-radius: 0 0 6px 6px; background: #B7BAB6; }

/* App window (shared by the hero laptop and the Mac in the sharing scene) */
.app { position: relative; flex-grow: 1; display: flex; padding: 8px; background: #FFFFFF; border-radius: 22px; overflow: hidden; color: var(--app-ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .08); }
.app-side { width: 240px; flex-shrink: 0; padding: 14px 10px 10px; background: #FFFFFF; border: 1px solid rgba(0, 0, 0, .07); border-radius: 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, .05); display: flex; flex-direction: column; gap: 1px; }
.app-side__top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 6px; color: var(--ui-gray); }
.app-side__top .i { margin: 5px; }
.lights { display: flex; gap: 8px; }
.lights span { width: 12px; height: 12px; border-radius: 6px; background: #D5DAD4; }
.side-ask { display: flex; align-items: center; gap: 7px; height: 30px; margin: 14px 2px 0; padding: 0 5px 0 9px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E6E1; font-size: 13px; color: var(--faint); }
.side-ask__label { flex-grow: 1; }
.side-ask__key { padding: 1px 5px; border-radius: 5px; box-shadow: 0 0 0 1px #DCE1DA; font-size: 10.5px; line-height: 1.5; color: var(--muted); }
.app-side__title { padding: 18px 8px 16px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 13.5px; color: var(--app-ink); }
.side-item.is-current { background: #E4F5E8; font-weight: 500; }
.side-item--bottom { margin-top: auto; }
.laptop .app { padding: 5px; border-radius: 14px; }
.laptop .app-side { width: 40px; padding: 8px 3px; border-radius: 10px; align-items: center; gap: 2px; }
.laptop .app-side__top, .laptop .app-side__title, .laptop .side-item__label, .laptop .side-ask__label, .laptop .side-ask__key { display: none; }
.laptop .side-ask { height: auto; margin: 0 0 4px; padding: 7px; background: none; box-shadow: none; }
.laptop .side-item { padding: 7px; }

.app-main--writing { position: relative; flex-grow: 1; min-width: 0; overflow: hidden; }
.writing { position: absolute; top: 0; left: 14px; right: 12px; bottom: 128px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.writing__doc { max-width: 860px; padding-bottom: 22px; }
.doc-title { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.doc-title--empty { margin-bottom: 34px; color: #AEB4AE; }
.doc { max-width: 660px; font-size: 16px; line-height: 1.7; }
.doc p { margin: 10px 0 0; }
.doc__h { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.doc__h--next { margin-top: 26px; }
.laptop .doc-title { font-size: 22px; }
.laptop .doc { font-size: 13.5px; line-height: 1.6; }
.laptop .doc p { margin-top: 7px; }
.laptop .doc__h { font-size: 15px; }
.laptop .doc__h--next { margin-top: 18px; }
.w0 { animation: w0 16s linear infinite; }
.w1 { animation: w1 16s linear infinite; }
.w2 { animation: w2 16s linear infinite; }
.w3 { animation: w3 16s linear infinite; }
.w4 { animation: w4 16s linear infinite; }
.w5 { animation: w5 16s linear infinite; }
.w6 { animation: w6 16s linear infinite; }
.w7 { animation: w7 16s linear infinite; }


/* The step dock, floating over the recap as it's written (as in the app): the steps, the session's waveform in its
   voices' colors up to where the writing has got (the stretch being written covered in green), a line, the time left. */
.dock { position: absolute; z-index: 3; left: 6px; right: 6px; bottom: 8px; padding: 9px 10px 7px; border-radius: 12px; background: rgba(255, 255, 255, .97); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 26px rgba(20, 30, 22, .14); }
.track { display: flex; align-items: center; white-space: nowrap; }
.track__s { display: inline-flex; align-items: center; gap: 5px; height: 20px; font-size: 11.5px; color: #AEB4AE; flex-shrink: 0; }
.track__s.is-done { color: var(--app-ink); font-weight: 500; }
.track__s.is-on { color: #145C32; font-weight: 600; }
.track__sep { width: 6px; height: 1px; margin: 0 5px; background: #E3E6E1; flex-shrink: 0; }
.track__spin { width: 11px; height: 11px; margin: 0 .5px; border-radius: 50%; border: 2px solid #E3E8E1; border-top-color: var(--green); flex-shrink: 0; animation: spin .9s linear infinite; }
.dock .track__s.is-done .track__t { display: none; }
.dock__wave { position: relative; height: 30px; margin-top: 9px; }
.dw { position: absolute; inset: 0; display: flex; align-items: center; gap: 1px; }
.dw i { flex: 1 1 0; min-width: 0; height: var(--h); border-radius: 1px; background: var(--k); opacity: .42; }
.dw i.n { background: #CDD2CC; opacity: 1; }
.dw i:nth-child(2n) { display: none; }
.dock__cover { position: absolute; left: 77%; width: 15%; top: -5px; bottom: -5px; border-radius: 6px; background: rgba(26, 118, 63, .12); box-shadow: inset 0 0 0 1px rgba(26, 118, 63, .22); }
.dock__line { position: relative; height: 18px; margin-top: 9px; font-size: 11.5px; line-height: 18px; color: var(--ui-gray); }
.dock__line span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__l1 { animation: dl1 16s ease-in-out infinite; }
.dock__l2 { opacity: 0; animation: dl2 16s ease-in-out infinite; }
.dock__foot { display: flex; justify-content: space-between; align-items: center; height: 18px; margin-top: 2px; font-size: 11px; color: #838A84; }
.dock__cancel { color: var(--ui-gray); text-decoration: underline; text-decoration-color: rgba(110, 110, 110, .5); text-underline-offset: 2px; }

/* ---------- Feature sections ---------- */
.section { background: #FFFFFF; padding: 88px var(--gutter) 96px; overflow: hidden; }
.section--paper { background: var(--paper); }
.section--forest { background: var(--forest); }
.intro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 64px; }
.intro__head { flex: 1 1 480px; min-width: 0; }
.eyebrow { margin: 0; font-size: 18px; font-weight: 600; color: var(--green-ink); }
.display { margin: 10px 0 0; font-size: clamp(36px, 10.4vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; color: var(--ink); }
.lede { flex: 1 1 360px; min-width: 0; margin: 0; max-width: 440px; font-size: 18px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.lede strong { font-weight: 600; color: var(--ink); }
.section--forest .eyebrow { color: var(--mint); }
.section--forest .display { color: #FFFFFF; }
.section--forest .lede { color: var(--forest-text); }
.section--forest .lede strong { color: #FFFFFF; }
.eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* Live badges: the live sample campaign, in the hero and beside the campaign wiki's eyebrow. Their edge glows, slowly. */
.live-badge { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 13px; border-radius: 999px; background: var(--mint-bg);
  box-shadow: inset 0 0 0 1px #C4E6CD; color: var(--green-ink); font-size: 14.5px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease; animation: live-glow 2.6s ease-in-out infinite; }
.live-badge:hover { background: #D5F0DB; color: var(--green-ink); }
.live-badge svg { flex-shrink: 0; transition: transform .2s ease; }
.live-badge:hover svg { transform: translateX(2px); }
.live-badge__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.live-badge--well { gap: 10px; height: 32px; padding: 0 12px 0 4px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 14px;
  animation-name: live-glow-soft; }
.live-badge--well:hover { background: var(--paper); color: var(--ink); }
.live-badge--well svg { color: var(--faint); }
.live-badge__well { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 8px; border-radius: 999px; background: var(--mint-bg);
  color: var(--green-ink); font-size: 12.5px; font-weight: 600; }
.live-badge__well .live-badge__dot { width: 7px; height: 7px; }
@keyframes live-glow { 0%, 100% { box-shadow: inset 0 0 0 1px #C4E6CD, 0 0 0 0 rgba(26, 118, 63, 0); } 50% { box-shadow: inset 0 0 0 1px #A9D8B6, 0 0 0 5px rgba(26, 118, 63, .12); } }
@keyframes live-glow-soft { 0%, 100% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 rgba(26, 118, 63, 0); } 50% { box-shadow: inset 0 0 0 1px #C4E6CD, 0 0 0 4px rgba(26, 118, 63, .07); } }
@media (prefers-reduced-motion: reduce) { .live-badge { animation: none; } }
.panel { margin-top: 40px; border-radius: 24px; padding: 22px 18px; }
.panel--paper { background: var(--paper); }
.panel--white { background: #FFFFFF; }
.panel--ring { box-shadow: 0 0 0 1px rgba(26, 70, 40, .09), 0 20px 50px rgba(26, 70, 40, .07); }
.panel__note { margin: 18px 0 0; font-size: 16px; line-height: 1.45; color: var(--faint); }

/* Pricing */
.price { margin-top: 48px; text-align: center; }
.price__figures { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center; }
.price__now { font-size: clamp(88px, 15vw, 200px); font-weight: 600; letter-spacing: -.05em; line-height: .9; color: var(--green); }
.price__once { font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; color: var(--green-ink); }
.price__terms { margin: 10px auto 0; max-width: 620px; font-size: 17px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.price__refund-row { margin-top: 26px; }
.refund { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 10px 18px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); font-size: 17px; line-height: 1.35; color: var(--ink); text-align: left; }
.refund b { font-weight: 600; }

/* Pricing: the price card */
.btn--big { height: 56px; padding: 0 34px; font-size: 19px; }
.btn--block { display: flex; width: 100%; }
.buy-c { margin: 30px auto 0; max-width: 560px; padding: 26px 22px 24px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgba(17, 30, 21, .06); text-align: left; }
.buy-c__lead { margin: 0; font-size: 15px; font-weight: 600; color: var(--green-ink); }
.buy-c__list { margin: 14px 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.buy-c__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.35; color: var(--ink); }
.buy-c__list .i { flex-shrink: 0; margin-top: 1px; }
.buy-c__addon { margin: -6px 0 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.buy-c__refund { margin: 14px 0 0; text-align: center; font-size: 15px; color: var(--ink); }
.buy-c__refund b { font-weight: 600; }
.buy-c__terms { margin: 6px 0 0; text-align: center; font-size: 14px; line-height: 1.45; color: var(--faint); text-wrap: balance; }

/* Privacy: this Mac, and nothing past it */
.flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px 56px; }
.flow__mac { flex: 3 1 576px; min-width: 0; position: relative; border-radius: 22px; border: 2px solid var(--green); padding: 30px 8px 22px; }
.flow__tag { position: absolute; top: -13px; left: 18px; padding: 0 10px; background: var(--paper); font-size: 14px; font-weight: 600; color: var(--green-ink); }
.flow__steps { display: flex; align-items: center; }
.flow__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }   /* above the lines, so the dots pass behind */
.flow__node { width: 44px; height: 44px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--line); display: inline-flex; align-items: center; justify-content: center; }
.flow__node svg { width: 20px; height: 20px; }
.flow__label { font-size: 12px; font-weight: 500; color: var(--ink); }
.flow__line { position: relative; flex: 1 1 40px; min-width: 6px; height: 2px; margin-top: -20px; background: var(--line); }
.flow__dot { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 4px; background: var(--green); animation: travel 2.4s linear 0s infinite both; }
.flow__dot:nth-child(2) { animation-delay: .8s; }
.flow__dot:nth-child(3) { animation-delay: 1.6s; }
.flow__line--2 .flow__dot:nth-child(1) { animation-delay: .4s; }
.flow__line--2 .flow__dot:nth-child(2) { animation-delay: 1.2s; }
.flow__line--2 .flow__dot:nth-child(3) { animation-delay: 2s; }
.flow__escape { position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 5px; background: var(--red); animation: escape-down 4s ease-in-out infinite; }
.flow__cloud { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cloud { position: relative; display: inline-flex; }
.cloud svg { width: 72px; height: 72px; }
.cloud__x { position: absolute; right: 0; bottom: 7px; width: 26px; height: 26px; border-radius: 13px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: var(--faint); }
.flow__label--muted { font-size: 15px; font-weight: 400; color: var(--muted); }

/* Record */
.rec { max-width: 996px; margin: 40px auto 0; border-radius: 22px; background: #FFFFFF; padding: 22px 16px 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .1), 0 0 0 1px var(--line); }
.rec__head { display: flex; align-items: center; gap: 14px; }
.rec__title { flex-grow: 1; font-size: 24px; font-weight: 600; letter-spacing: -.015em; color: #AEB4AE; }
.rec__go { flex-shrink: 0; height: 30px; padding: 0 13px; border-radius: 8px; background: var(--green); color: #FFFFFF; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; animation: rgo 12s ease-in-out infinite; }
.turn { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 13px 14px; border-radius: 12px; background: #F3F8F4; box-shadow: inset 0 0 0 1px rgba(26, 118, 63, .16); }
.turn__icon { margin-top: 2px; color: #145C32; }
.turn__text { flex-grow: 1; min-width: 0; display: grid; }
.turn__a, .turn__b { grid-area: 1 / 1; }
.turn__a { animation: turna 12s ease-in-out infinite; }
.turn__b { opacity: 0; animation: turnb 12s ease-in-out infinite; }
.turn b { display: block; font-size: 14.5px; font-weight: 600; color: #145C32; }
.turn__text span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ui-gray); }
.rec__bar { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 8px 8px 12px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 28px rgba(20, 30, 22, .12); }
.rec__bar .track__s:not(.is-on) .track__t { display: none; }
.rec__mark { position: relative; width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rec__mic-i { animation: rmic 12s ease-in-out infinite; }
.rec__dot { position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 4px; background: var(--red); box-shadow: 0 0 0 1.5px rgba(215, 52, 49, .18); opacity: 0; animation: rdot 12s ease-in-out infinite; }
.rec__panels { display: flex; gap: 12px; margin-top: 20px; }
.rec__box { position: relative; flex: 0 0 calc(50% - 6px); min-width: 0; height: 132px; border: 1px solid #DCE1DA; border-radius: 16px; background: #FFFFFF; overflow: hidden; animation: rgrow 12s ease-in-out infinite; }
.rec__idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; animation: idle 12s ease-in-out infinite; }
.rec__bigdot { width: 46px; height: 46px; border-radius: 23px; border: 3px solid #FFEBE7; background: var(--red); box-shadow: 0 0 0 1px #DCE1DA; }
.rec__idle-label { font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.rec__live { position: absolute; inset: 0; padding: 16px 16px; display: flex; flex-direction: column; justify-content: space-between; animation: live 12s ease-in-out infinite; }
.rec__live-row { display: flex; align-items: center; gap: 10px; }
.rec__pulse { width: 10px; height: 10px; border-radius: 5px; background: var(--red); flex-shrink: 0; animation: pulse 1.6s infinite; }
.rec__time { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--ink); }
.rec__state { font-size: 13px; color: var(--faint); white-space: nowrap; }
.rec__mic { display: none; }
.rec__pause { width: 32px; height: 32px; border-radius: 16px; border: 1px solid #DCE1DA; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rec__stop { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; background: var(--red); box-shadow: 0 0 0 5px #FFE7E4; flex-shrink: 0; }
.rec__stop span { width: 13px; height: 13px; border-radius: 5px; background: #FFFFFF; }
.rec__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; overflow: hidden; }
.rec__wave i { width: 3px; height: var(--h); border-radius: 1.5px; background: var(--green); flex-shrink: 0; animation: lvl var(--d) ease-in-out var(--o) infinite alternate; }
.rec__dropwrap { flex: 0 0 calc(50% - 6px); min-width: 0; overflow: hidden; animation: dshrink 12s ease-in-out infinite; }
.rec__drop { height: 132px; border: 1.5px dashed #C9CFC8; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; overflow: hidden; text-align: center; }
.rec__drop-title { width: 136px; flex-shrink: 0; font-size: 15px; line-height: 1.3; font-weight: 500; color: #5B605C; }
.rec__drop-sub { width: 136px; flex-shrink: 0; font-size: 13px; line-height: 1.3; color: var(--faint); }
.rec__listhead { margin-top: 22px; padding: 0 4px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
.rec__files { overflow: hidden; }
.file { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.file__name { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file__from { font-size: 12.5px; color: var(--faint); }
.file__len { font-size: 14px; color: var(--muted); white-space: nowrap; }
.rec__newslot { min-height: 61px; }
.rec__new { overflow: hidden; animation: newrow 12s ease-out infinite; }

/* Accuracy: voices told apart */
.voices__head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.voices__src { display: inline-flex; align-items: center; gap: 8px; }
.voices__len { font-family: var(--mono); font-size: 14px; }
.voices__wave { position: relative; height: 110px; margin-top: 22px; overflow: hidden; }
.vw { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }
.vw i { width: 4px; height: var(--h); border-radius: 2px; flex-shrink: 0; background: #CDD2CC; }
.vw--scan { animation: scan 9s ease-in-out infinite; }
.vw--scan i { background: var(--k); }
.lanes { list-style: none; margin: 22px 0 0; padding: 0; }
.lane { display: grid; grid-template-columns: 128px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); animation: lane 9s ease-out 0s infinite both; }
.lane--1 { animation-delay: .15s; }
.lane--2 { animation-delay: .3s; }
.lane--3 { animation-delay: .45s; }
.lane__bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.lane__bar span { display: block; height: 8px; width: var(--w); background: var(--k); }
.lane__pct { font-family: var(--mono); font-size: 14px; color: var(--muted); text-align: right; }

/* Names: found before the recap is written */


/* World */
.world { display: flex; flex-wrap: wrap; gap: 32px 44px; align-items: flex-start; }
.world__list { flex: 1 1 300px; min-width: 0; }
.wstatus { position: relative; display: inline-flex; height: 36px; min-width: 228px; }
.wstatus__busy, .wstatus__done { position: absolute; inset: 0; display: inline-flex; align-items: center; gap: 9px; padding: 0 15px; border-radius: 18px; font-size: 14.5px; white-space: nowrap; }
.wstatus__busy { background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); color: var(--muted); animation: wr1 10s infinite; }
.wstatus__done { background: var(--mint-bg); color: var(--green-ink); animation: wr2 10s infinite; }
.spin { flex-shrink: 0; animation: spin .9s linear infinite; }
.world__from { margin-top: 18px; font-size: 13px; color: var(--faint); }
.world__recap { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.world__rows { margin-top: 12px; }
.wrow { display: grid; grid-template-columns: 20px 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.wrow__tick { display: inline-flex; }
.wt0 { animation: wt0 10s ease-out infinite; }
.wt1 { animation: wt1 10s ease-out infinite; }
.wt2 { animation: wt2 10s ease-out infinite; }
.wt3 { animation: wt3 10s ease-out infinite; }
.wt4 { animation: wt4 10s ease-out infinite; }
.wt5 { animation: wt5 10s ease-out infinite; }
.wrow__name { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow__what { font-size: 13px; color: var(--faint); white-space: nowrap; }
.wrow__what--new { color: var(--green-ink); }
.entity { flex: 1.6 1 520px; min-width: 0; border-radius: 18px; background: #FFFFFF; padding: 20px 16px 8px; box-shadow: 0 0 0 1px var(--line); }
.entity__head { display: flex; align-items: center; gap: 14px; }
.entity__pic { display: block; width: 72px; height: 72px; flex-shrink: 0; border-radius: 14px; box-shadow: 0 6px 18px rgba(20, 30, 22, .18); }
.wrow__kind { display: block; }
.entity__id { min-width: 0; }
.entity__name { font-size: 24px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.entity__desc { font-size: 14px; line-height: 1.4; color: var(--muted); }
.entity__label { margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--faint); }
.tl { position: relative; margin-top: 12px; padding-left: 28px; }
.tl__rail { position: absolute; left: 7px; top: 8px; bottom: 18px; width: 2px; background: var(--line); }
.tl__item { position: relative; padding: 4px 0 14px; }
.tl__dot { position: absolute; left: -27px; top: 6px; width: 13px; height: 13px; border-radius: 7px; background: #FFFFFF; border: 2.5px solid #C5CCC4; }
.tl__dot--new { background: var(--green); border: 0; animation: wdot 10s ease-out infinite; }
.tl__head { display: flex; align-items: baseline; gap: 10px; }
.tl__date { font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--faint); white-space: nowrap; }
.tl__date--new { color: var(--green-ink); }
.tl__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.tl__badge { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--green-ink); }
.tl__line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-items: baseline; padding: 8px 0 4px; }
.tl__text { font-size: 16px; line-height: 1.5; color: var(--ink); }
.tl__src { font-size: 13px; color: var(--faint); white-space: nowrap; }
.tl__grow { overflow: hidden; animation: wreveal 10s ease-in-out infinite; }
.tl__glow { margin: 0 -12px; padding: 0 12px; border-radius: 12px; animation: wglow 10s ease-out infinite; }

/* Sharing. Phone and tablet: the iPhone with the PDF arriving. Desktop: the whole scene, Mac to iPhone to page. */
.share { margin-top: 40px; border-radius: 24px; background: var(--paper); padding: 32px 16px; }
.stage { display: flex; justify-content: center; }
.stage__mac, .stage__doc { display: none; }
.macwin { position: relative; width: 685px; height: 534px; border-radius: 16px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .12); }
.macwin__canvas { position: absolute; left: 0; top: 0; width: 1280px; height: 1000px; transform: scale(.72) translate(-296px, -28px); transform-origin: 0 0; }
.macwin__screen { width: 1280px; height: 1000px; padding: 28px 32px 36px; background: #EEF0EA; display: flex; }
.macwin__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF); }
.app-main--share { flex-grow: 1; min-width: 0; overflow: hidden; padding: 56px 56px 0 48px; }
.share-doc { max-width: 860px; }
.share-doc__status { display: flex; align-items: center; gap: 8px; height: 20px; font-size: 13px; color: var(--ui-gray); }
.share-doc__titlerow { margin-top: 6px; display: flex; align-items: center; gap: 14px; }
.share-doc__titlerow .doc-title { flex-grow: 1; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; background: #EFF2EC; font-size: 13px; font-weight: 500; flex-shrink: 0; animation: s8btn 22s linear infinite; }
.share-doc .doc { margin-top: 6px; }
.menu { position: absolute; z-index: 6; top: 168px; right: 96px; width: 270px; padding: 5px; border-radius: 10px; background: rgba(250, 250, 249, .97); box-shadow: 0 16px 44px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08); transform-origin: 100% 0; animation: s8menu 22s ease-out infinite; }
.menu__item { display: flex; align-items: center; gap: 9px; height: 26px; padding: 0 9px; border-radius: 5px; font-size: 13.5px; color: #1F2420; }
.menu__item .i { color: #4A504C; }
.menu__item--on { background: var(--green); color: #FFFFFF; }
.menu__item--on .i { color: #FFFFFF; }
.menu__sep { height: 1px; margin: 5px 9px; background: rgba(0, 0, 0, .1); }
.menu__group { padding: 3px 9px 4px; font-size: 12px; color: var(--faint); }
.menu__hoverable { position: relative; }
.menu__hover { position: absolute; inset: 0; animation: s8hov 22s linear infinite; }
.toast-wrap { position: absolute; z-index: 7; left: 572px; top: 678px; width: 400px; display: flex; justify-content: center; }
.toast { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 20px; background: var(--app-ink); color: #FFFFFF; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: s8toast 22s ease-out infinite; }
.cursor { position: absolute; z-index: 9; left: 0; top: 0; transform-origin: 0 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); animation: s8cur 22s ease-in-out infinite; }

.iphone { width: 262px; height: 534px; padding: 9px; border-radius: 46px; background: var(--ink); box-shadow: inset 0 0 0 1.5px #3B403C, 0 30px 70px rgba(0, 0, 0, .16); }
.iphone__screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #FFFFFF; display: flex; flex-direction: column; }
.ios-status { height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 0 28px; font-size: 13px; font-weight: 600; color: #000000; }
.ios-status__icons { display: inline-flex; align-items: center; gap: 6px; }
.ios-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; }
.ios-bars span { width: 3px; height: 4px; border-radius: 1px; background: #000000; }
.ios-bars span:nth-child(2) { height: 6px; }
.ios-bars span:nth-child(3) { height: 8px; }
.ios-bars span:nth-child(4) { height: 10px; }
.ios-batt { width: 21px; height: 10px; padding: 1.5px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); display: inline-flex; }
.ios-batt span { width: 75%; border-radius: 1.5px; background: #000000; }
.ios-head { position: relative; flex-shrink: 0; padding: 2px 12px 7px; background: #F7F7F8; border-bottom: 1px solid #E3E3E7; text-align: center; }
.ios-back { position: absolute; left: 10px; top: 9px; display: inline-flex; }
.ios-avatars { display: flex; justify-content: center; }
.ios-avatars span { width: 26px; height: 26px; margin-left: -8px; border-radius: 13px; background: linear-gradient(#A8ADB4, #858A92); box-shadow: 0 0 0 2px #F7F7F8; color: #FFFFFF; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ios-avatars span:first-child { margin-left: 0; }
.ios-group { margin-top: 3px; font-size: 10.5px; color: #000000; }
.ios-thread { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 10px 6px; overflow: hidden; }
.ios-thread__in { flex-shrink: 0; display: flex; flex-direction: column; }
.ios-time { margin: 10px 0 2px; text-align: center; font-size: 10px; color: #8E8E93; }
.ios-from { margin: 7px 0 2px 12px; font-size: 10px; color: #8E8E93; }
.ios-bubble { align-self: flex-start; max-width: calc(76% + 22px); margin-top: 3px; padding: 7px 11px; border-radius: 17px; background: #E9E9EB; color: #000000; font-size: 13px; line-height: 1.3; }
.ios-typing { display: flex; flex-direction: column; overflow: hidden; animation: s8typ 22s ease-out infinite; }
.ios-typing__bubble { align-self: flex-start; display: inline-flex; gap: 4px; margin-top: 8px; padding: 11px 13px; border-radius: 17px; background: #E9E9EB; }
.ios-typing__bubble span { width: 7px; height: 7px; border-radius: 4px; background: #8E8E93; animation: s7dot 1.2s ease-in-out 0s infinite; }
.ios-typing__bubble span:nth-child(2) { animation-delay: .2s; }
.ios-typing__bubble span:nth-child(3) { animation-delay: .4s; }
.ios-from--pdf { margin: 7px 0 0 12px; }
.lx-in { display: flex; flex-direction: column; overflow: hidden; max-height: 0; opacity: 0; }
.lx-file { position: relative; align-self: flex-start; display: flex; align-items: center; gap: 9px; width: 196px; margin-top: 3px; padding: 9px 11px 9px 9px; border-radius: 16px; background: #E9E9EB; overflow: hidden; }
.lx-file__icon { position: relative; flex-shrink: 0; width: 34px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.lx-file__icon--pdf b { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); padding: 0 3px; border-radius: 2px; background: #E5484D; color: #FFFFFF; font-size: 7px; font-weight: 700; letter-spacing: .02em; }
.lx-file__icon--pdf svg { width: 26px; height: 32px; }
.lx-file__icon--aud { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(160deg, #F2A23A, #E5484D); }
.lx-file__txt { min-width: 0; }
.lx-file__txt b { display: block; font-size: 11.5px; font-weight: 600; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-file__txt span { font-size: 10px; color: #8E8E93; }
.lx-press { position: absolute; inset: 0; background: rgba(0,0,0,.1); opacity: 0; }
.lx-tap { position: absolute; z-index: 3; left: 26px; top: 29px; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(60,60,67,.3); box-shadow: 0 0 0 2px rgba(255,255,255,.9); opacity: 0; pointer-events: none; }
.lx-ql { position: absolute; z-index: 5; left: 0; right: 0; top: 34px; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 0 18px; border-radius: 14px 14px 0 0; background: #FFFFFF; box-shadow: 0 -8px 30px rgba(0,0,0,.18); transform: translateY(102%); }
.lx-ql__top { align-self: stretch; display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; height: 40px; font-size: 11px; color: #000000; }
.lx-ql__done { position: relative; font-size: 13px; font-weight: 600; color: #0B84FE; }
.lx-ql__done .lx-tap { left: 18px; top: 9px; }
.lx-ql__name { text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-ql__art { margin-top: 46px; width: 128px; height: 128px; border-radius: 22px; background: linear-gradient(160deg, #F2A23A, #E5484D); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(229,72,77,.3); }
.lx-ql__title { margin-top: 22px; font-size: 14px; font-weight: 600; color: #000000; text-align: center; }
.lx-ql__sub { margin-top: 3px; font-size: 11px; color: #8E8E93; }
.lx-ql__bar { position: relative; align-self: stretch; height: 4px; margin-top: 36px; border-radius: 2px; background: #E5E5EA; overflow: hidden; }
.lx-ql__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #1D201E; }
.lx-ql__times { align-self: stretch; display: flex; justify-content: space-between; margin-top: 5px; font-size: 9.5px; color: #8E8E93; font-variant-numeric: tabular-nums; }
.lx-ql__ctl { display: flex; align-items: center; gap: 34px; margin-top: 18px; font-size: 18px; color: #1D201E; }
.lx-in--pdf { animation: s8pdf 22s ease-out infinite; }
.lx-in--aud { animation: s8aud 22s ease-out infinite; }
.lx-file--pdf .lx-press { animation: s8ppress 22s ease-out infinite; }
.lx-file--pdf .lx-tap { animation: s8ptap 22s ease-out infinite; }
.lx-file--aud .lx-press { animation: s8apress 22s ease-out infinite; }
.lx-file--aud .lx-tap { animation: s8atap 22s ease-out infinite; }
.lx-ql { animation: s8ql 22s ease-in-out infinite; }
.lx-ql__bar span { animation: s8bar 22s linear infinite; }
.lx-tap--done { animation: s8done 22s ease-out infinite; }
.ios-compose { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px 24px; }
.ios-plus { width: 26px; height: 26px; border-radius: 13px; background: #EDEDF0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ios-field { flex-grow: 1; height: 28px; padding: 0 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px #DADADF; display: flex; align-items: center; font-size: 12px; color: #B0B0B6; }
.iphone__island { position: absolute; left: 50%; top: 10px; width: 74px; height: 22px; margin-left: -37px; border-radius: 11px; background: #000000; }
.iphone__home { position: absolute; left: 50%; bottom: 7px; width: 88px; height: 4px; margin-left: -44px; border-radius: 2px; background: #000000; }

/* The recap as a one-page PDF (Letter, 816×1056), shown scaled */
.pdf-mini { width: 138.7px; height: 179.5px; flex-shrink: 0; border-radius: 2px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.pdf-sheet { width: 505.9px; height: 654.7px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 22px 56px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .05); }
.pdf-scale { width: 816px; height: 1056px; transform-origin: 0 0; }
.pdf-scale--mini { transform: scale(.17); }
.pdf-scale--sheet { transform: scale(.62); }
.pdf { position: relative; width: 816px; height: 1056px; padding: 84px 92px 72px; background: #FFFFFF; color: var(--app-ink); font-family: var(--sans); overflow: hidden; }
.pdf__brand { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .06em; color: var(--ui-gray); }
.pdf__brand svg { flex-shrink: 0; color: var(--green); }
.pdf__title { margin: 22px 0 0; font-family: var(--serif); font-size: 44px; font-weight: 500; letter-spacing: -.01em; line-height: 1.05; }
.pdf__rule { height: 1px; margin: 26px 0 0; background: #E6EAE3; }
.pdf__h { margin: 24px 0 0; font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; color: var(--app-ink); }
.pdf__p { margin: 9px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.62; color: #2A2F2B; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; }
.pdf__p b { font-weight: 600; }
.pdf__foot { position: absolute; left: 92px; right: 92px; bottom: 44px; display: flex; justify-content: space-between; font-size: 10.5px; color: #838A84; }

/* ---------- Closing call to action and footer ---------- */
.closer { background: var(--forest); padding: 96px var(--gutter) 104px; text-align: center; }
.closer__in { max-width: 900px; margin: 0 auto; }
.closer__mark { color: #FFFFFF; }
.closer__title { margin-top: 24px; color: #FFFFFF; }
.cta-row--closer { margin-top: 32px; }
.price-note--dark { margin-top: 16px; color: var(--forest-muted); }
.price-note--dark strong { color: #FFFFFF; }
.price-note--tight { margin-top: 6px; }
.site-footer { background: var(--forest-deep); padding: 12px var(--gutter); border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; min-height: 44px; font-size: 15px; color: var(--forest-muted); }

/* ---------- Animations (from the design) ---------- */
@keyframes w0{0%,6%{opacity:0}8%,94%{opacity:1}100%{opacity:0}}
@keyframes w1{0%,15%{opacity:0}17%,94%{opacity:1}100%{opacity:0}}
@keyframes w2{0%,24%{opacity:0}26%,94%{opacity:1}100%{opacity:0}}
@keyframes w3{0%,33%{opacity:0}35%,94%{opacity:1}100%{opacity:0}}
@keyframes w4{0%,42%{opacity:0}44%,94%{opacity:1}100%{opacity:0}}
@keyframes w5{0%,51%{opacity:0}53%,94%{opacity:1}100%{opacity:0}}
@keyframes w6{0%,60%{opacity:0}62%,94%{opacity:1}100%{opacity:0}}
@keyframes w7{0%,69%{opacity:0}71%,94%{opacity:1}100%{opacity:0}}
@keyframes stripes{to{background-position:8.49px 0}}
@keyframes dl1{0%,44%{opacity:1}48%,96%{opacity:0}100%{opacity:1}}
@keyframes dl2{0%,46%{opacity:0}50%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes turna{0%,25%{opacity:1}29%,71%{opacity:0}75%,100%{opacity:1}}
@keyframes turnb{0%,27%{opacity:0}31%,69%{opacity:1}73%,100%{opacity:0}}
@keyframes rmic{0%,27%{opacity:1}29%,71%{opacity:0}73%,100%{opacity:1}}
@keyframes rdot{0%,27%{opacity:0}29%,71%{opacity:1}73%,100%{opacity:0}}
@keyframes rgo{0%,27%{background:#1A763F}29%,71%{background:#D3D9D2}73%,100%{background:#1A763F}}
@keyframes travel{0%{left:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes escape{0%,10%{transform:translateX(0);opacity:0}20%{opacity:1}45%{transform:translateX(56px);opacity:1}55%{transform:translateX(30px);opacity:.4}65%,100%{transform:translateX(0);opacity:0}}
@keyframes escape-down{0%,10%{transform:translateY(0);opacity:0}20%{opacity:1}45%{transform:translateY(22px);opacity:1}55%{transform:translateY(12px);opacity:.4}65%,100%{transform:translateY(0);opacity:0}}
@keyframes rgrow{0%,22%{flex-basis:calc(50% - 6px)}30%,70%{flex-basis:100%}78%,100%{flex-basis:calc(50% - 6px)}}
@keyframes idle{0%,22%{opacity:1}25%,75%{opacity:0}78%,100%{opacity:1}}
@keyframes live{0%,26%{opacity:0}31%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes lvl{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
@keyframes dshrink{0%,22%{flex-basis:calc(50% - 6px);opacity:1;margin-left:0}30%,70%{flex-basis:0%;opacity:0;margin-left:-12px}78%,100%{flex-basis:calc(50% - 6px);opacity:1;margin-left:0}}
@keyframes newrow{0%,74%{opacity:0;max-height:0}80%,100%{opacity:1;max-height:90px}}
@keyframes scan{0%,6%{clip-path:inset(0 100% 0 0)}64%,94%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes lane{0%,60%{opacity:0;transform:translateY(8px)}68%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wr1{0%,44%{opacity:1}48%,96%{opacity:0}100%{opacity:1}}
@keyframes wr2{0%,44%{opacity:0}48%,96%{opacity:1}100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wt0{0%,6%{opacity:0;transform:scale(.6)}9%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wt1{0%,12%{opacity:0;transform:scale(.6)}15%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wt2{0%,18%{opacity:0;transform:scale(.6)}21%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wt3{0%,24%{opacity:0;transform:scale(.6)}27%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wt4{0%,30%{opacity:0;transform:scale(.6)}33%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wt5{0%,36%{opacity:0;transform:scale(.6)}39%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wgrow{0%,44%{max-height:0;opacity:0}52%,95%{max-height:320px;opacity:1}100%{max-height:0;opacity:0}}
@keyframes wreveal{0%,44%{opacity:0;transform:translateY(10px)}52%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wglow{0%,48%{background:#E2F6E6}80%,100%{background:transparent}}
@keyframes wdot{0%,46%{transform:scale(0)}52%{transform:scale(1.5)}58%,95%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes s8mac { 0.000% { opacity: 1; transform: none } 29.318% { opacity: 1; transform: none } 32.045% { opacity: 0; transform: scale(.97) } 92.727% { opacity: 0; transform: scale(.97) } 96.818% { opacity: 1; transform: none } 100.000% { opacity: 1; transform: none } }
@keyframes s8btn { 0.000% { background: #EFF2EC } 8.545% { background: #EFF2EC } 8.864% { background: #DCE3D8 } 19.091% { background: #DCE3D8 } 20.455% { background: #EFF2EC } 100.000% { background: #EFF2EC } }
@keyframes s8menu { 0.000% { opacity: 0; transform: scale(.96) } 9.227% { opacity: 0; transform: scale(.96) } 10.591% { opacity: 1; transform: none } 18.773% { opacity: 1; transform: none } 20.136% { opacity: 0; transform: scale(.98) } 100.000% { opacity: 0; transform: scale(.98) } }
@keyframes s8hov { 0.000% { opacity: 0 } 15.682% { opacity: 0 } 16.364% { opacity: 1 } 17.727% { opacity: 1 } 18.091% { opacity: 0 } 18.409% { opacity: 1 } 19.091% { opacity: 1 } 20.136% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes s8toast { 0.000% { opacity: 0; transform: translateY(10px) } 19.773% { opacity: 0; transform: translateY(10px) } 21.136% { opacity: 1; transform: none } 27.955% { opacity: 1; transform: none } 29.318% { opacity: 0; transform: none } 100.000% { opacity: 0; transform: none } }
@keyframes s8typ { 0.000% { max-height: 0; opacity: 0 } 20.455% { max-height: 0; opacity: 0 } 21.500% { max-height: 44px; opacity: 1 } 23.864% { max-height: 44px; opacity: 1 } 25.227% { max-height: 0; opacity: 0 } 100.000% { max-height: 0; opacity: 0 } }
@keyframes s8cur { 0.000% { transform: translate(960px, 610px) scale(1.00) } 2.727% { transform: translate(960px, 610px) scale(1.00) } 8.182% { transform: translate(1140px, 133px) scale(1.00) } 8.864% { transform: translate(1140px, 133px) scale(0.85) } 9.545% { transform: translate(1140px, 133px) scale(1.00) } 10.227% { transform: translate(1140px, 133px) scale(1.00) } 16.364% { transform: translate(1028px, 349px) scale(1.00) } 18.091% { transform: translate(1028px, 349px) scale(0.85) } 18.773% { transform: translate(1028px, 349px) scale(1.00) } 19.773% { transform: translate(1028px, 349px) scale(1.00) } 25.909% { transform: translate(960px, 610px) scale(1.00) } 100.000% { transform: translate(960px, 610px) scale(1.00) } }
@keyframes s8phone { 0.000% { opacity: 1; transform: none } 30.682% { opacity: 1; transform: none } 36.136% { opacity: 1; transform: translateX(-656px) } 90.000% { opacity: 1; transform: translateX(-656px) } 92.727% { opacity: 0; transform: translateX(-656px) } 93.182% { opacity: 0; transform: none } 96.818% { opacity: 1; transform: none } 100.000% { opacity: 1; transform: none } }
@keyframes s8pdf { 0.000% { max-height: 0; opacity: 0; transform: translateY(12px) } 24.318% { max-height: 0; opacity: 0; transform: translateY(12px) } 25.909% { max-height: 120px; opacity: 1; transform: none } 92.727% { max-height: 120px; opacity: 1; transform: none } 93.182% { max-height: 0; opacity: 0 } 100.000% { max-height: 0; opacity: 0 } }
@keyframes s8aud { 0.000% { max-height: 0; opacity: 0; transform: translateY(12px) } 26.591% { max-height: 0; opacity: 0; transform: translateY(12px) } 28.182% { max-height: 120px; opacity: 1; transform: none } 92.727% { max-height: 120px; opacity: 1; transform: none } 93.182% { max-height: 0; opacity: 0 } 100.000% { max-height: 0; opacity: 0 } }
@keyframes s8apress { 0.000% { opacity: 0 } 38.864% { opacity: 0 } 39.091% { opacity: 1 } 40.455% { opacity: 1 } 41.818% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes s8atap { 0.000% { opacity: 0; transform: scale(.6) } 38.636% { opacity: 0; transform: scale(.6) } 39.091% { opacity: 1; transform: scale(1) } 40.682% { opacity: 0; transform: scale(1.35) } 100.000% { opacity: 0; transform: scale(1.35) } }
@keyframes s8ql { 0.000% { transform: translateY(102%) } 40.000% { transform: translateY(102%) } 41.818% { transform: none } 51.364% { transform: none } 53.182% { transform: translateY(102%) } 100.000% { transform: translateY(102%) } }
@keyframes s8bar { 0.000% { width: 0 } 41.818% { width: 0 } 51.364% { width: 9% } 53.182% { width: 9% } 53.636% { width: 0 } 100.000% { width: 0 } }
@keyframes s8done { 0.000% { opacity: 0; transform: scale(.6) } 50.227% { opacity: 0; transform: scale(.6) } 50.682% { opacity: 1; transform: scale(1) } 52.273% { opacity: 0; transform: scale(1.35) } 100.000% { opacity: 0; transform: scale(1.35) } }
@keyframes s8ppress { 0.000% { opacity: 0 } 55.682% { opacity: 0 } 55.909% { opacity: 1 } 57.273% { opacity: 1 } 58.636% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes s8ptap { 0.000% { opacity: 0; transform: scale(.6) } 55.455% { opacity: 0; transform: scale(.6) } 55.909% { opacity: 1; transform: scale(1) } 57.500% { opacity: 0; transform: scale(1.35) } 100.000% { opacity: 0; transform: scale(1.35) } }
@keyframes s8doc { 0.000% { opacity: 0; transform: translateX(50px) rotate(2.5deg) } 57.955% { opacity: 0; transform: translateX(50px) rotate(2.5deg) } 62.045% { opacity: 1; transform: rotate(2.5deg) } 90.000% { opacity: 1; transform: rotate(2.5deg) } 92.727% { opacity: 0; transform: rotate(2.5deg) } 93.636% { opacity: 0; transform: translateX(50px) rotate(2.5deg) } 100.000% { opacity: 0; transform: translateX(50px) rotate(2.5deg) } }
@keyframes s7dot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}

/* Before it writes: it reads (the Catalog dock), then asks (the new names, one kind changed, Write). 14s a loop. */
.nm { position: relative; height: 560px; padding: 34px 40px; border-radius: 28px; background: #FFFFFF; overflow: hidden; box-shadow: 0 0 0 1px rgba(26,70,40,.09), 0 20px 50px rgba(26,70,40,.07); }
.nm-layer { position: absolute; left: 40px; right: 40px; top: 34px; bottom: 24px; }
.nm-tl { display: grid; grid-template-columns: 64px 132px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #E3E6E1; opacity: 0; }
.nm-t { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #8A908B; }
.nm-pill { justify-self: start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: color-mix(in srgb, var(--k) 10%, transparent); color: var(--k); font-size: 13px; font-weight: 600; white-space: nowrap; }
.nm-text { font-size: 18px; line-height: 1.5; color: #1D201E; }
.nm-hl { border-radius: 6px; padding: 0 3px; margin: 0 -3px; font-weight: 600; color: var(--k); background: color-mix(in srgb, var(--k) 12%, transparent); }
.nm .nm-dock, .nm .nm-dock2, .nm .nm-bar { position: absolute; left: 0; right: 0; bottom: 0; }
.nm-dock2 { opacity: 0; }
.nm-moss { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #F3F8F4; box-shadow: inset 0 0 0 1px rgba(26,118,63,.16); }
.nm-moss svg { margin-top: 2px; }
.nm-moss b { display: block; font-size: 14.5px; font-weight: 600; color: #145C32; }
.nm-moss span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: #646B66; }
.nm-moss u { display: inline-block; margin-top: 6px; font-size: 13px; color: #646B66; text-underline-offset: 2px; }
.nm-head { display: flex; justify-content: space-between; margin-top: 16px; padding: 0 64px 8px 36px; border-bottom: 1px solid #E3E6E1; font-size: 12.5px; color: #838A84; }
.nm-head span:last-child { width: 170px; }
.nm-row { position: relative; display: flex; align-items: center; gap: 10px; height: 41px; border-bottom: 1px solid #E3E6E1; }
.nm-tri { width: 26px; text-align: center; font-size: 10px; color: #AEB4AE; }
.nm-name { font-size: 16.5px; font-weight: 600; white-space: nowrap; }
.nm-heard { font-size: 13px; color: #838A84; white-space: nowrap; }
.nm-grow { flex-grow: 1; }
.nm-pop { position: absolute; right: 36px; top: 7px; width: 170px; height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-radius: 7px; background: #FFFFFF; box-shadow: 0 0 0 1px #DCE1DA; font-size: 13px; color: #262B27; white-space: nowrap; overflow: hidden; }
.nm-pop > span:nth-of-type(1) { flex-grow: 1; }
.nm-chev { font-size: 11px; color: #8A908B; }
.nm-pop-b, .nm-pop-d { opacity: 0; }
.nm-x { position: absolute; right: 8px; font-size: 14px; color: #AEB4AE; }
.nm-menuwrap { position: absolute; z-index: 5; right: 36px; width: 170px; }
.nm-1 .nm-menuwrap { top: 207px; }
.nm-menu { position: relative; padding: 5px; border-radius: 10px; background: rgba(250,250,249,.98); box-shadow: 0 16px 44px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.08); opacity: 0; }
.nm-mi { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 5px; font-size: 13px; color: #262B27; }
.nm-mi span:first-of-type { flex-grow: 1; }
.nm-msep { height: 1px; margin: 4px 6px; background: rgba(0,0,0,.1); }
.nm-cur { position: absolute; z-index: 9; left: 0; top: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); opacity: 0; }
@media (max-width: 767.98px) {
  .nm { height: 600px; padding: 20px 14px; border-radius: 22px; }
  .nm-layer { left: 14px; right: 14px; top: 20px; bottom: 14px; }
  .nm-tl { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 9px 0; }
  .nm-text { grid-column: 1 / -1; font-size: 14.5px; }
  .nm-pill { height: 22px; font-size: 11.5px; }
  .nm-tri { display: none; }
  .nm-name { font-size: 14.5px; }
  .nm-menuwrap, .nm-cur { display: none; }
  .nm-moss u { display: none; }
}

.nm { margin-top: 40px; }
@media (min-width: 768px) { .nm { margin-top: 72px; } }

@media (max-width: 767.98px) {
  .nm-head span:last-child { display: none; }
  .nm-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "name x" "heard x" "pop x"; align-items: center; height: auto;
    min-height: 41px; padding: 8px 0; gap: 3px 8px; }
  .nm-name { grid-area: name; }
  .nm-heard { grid-area: heard; font-size: 11.5px; }
  .nm-pop { grid-area: pop; position: static; justify-self: start; width: 150px; height: 26px; margin-top: 3px; font-size: 12px; }
  .nm-grow { display: none; }
  .nm-x { grid-area: x; position: static; text-align: center; }
}
@keyframes n1l0 { 0.000% { opacity: 0; transform: translateY(6px) } 2.857% { opacity: 0; transform: translateY(6px) } 5.000% { opacity: 1; transform: none } 100.000% { opacity: 1; transform: none } }
.nm-1 .nl0 { animation: n1l0 14s ease-out infinite; }
@keyframes n1l1 { 0.000% { opacity: 0; transform: translateY(6px) } 11.429% { opacity: 0; transform: translateY(6px) } 13.571% { opacity: 1; transform: none } 100.000% { opacity: 1; transform: none } }
.nm-1 .nl1 { animation: n1l1 14s ease-out infinite; }
@keyframes n1l2 { 0.000% { opacity: 0; transform: translateY(6px) } 20.000% { opacity: 0; transform: translateY(6px) } 22.143% { opacity: 1; transform: none } 100.000% { opacity: 1; transform: none } }
.nm-1 .nl2 { animation: n1l2 14s ease-out infinite; }
@keyframes n1l3 { 0.000% { opacity: 0; transform: translateY(6px) } 28.571% { opacity: 0; transform: translateY(6px) } 30.714% { opacity: 1; transform: none } 100.000% { opacity: 1; transform: none } }
.nm-1 .nl3 { animation: n1l3 14s ease-out infinite; }
@keyframes n1a { 0.000% { opacity: 1 } 45.000% { opacity: 1 } 47.143% { opacity: 0 } 100.000% { opacity: 0 } }
.nm-1 .nm-a { animation: n1a 14s ease-in-out infinite; }
@keyframes n1b { 0.000% { opacity: 0 } 45.000% { opacity: 0 } 47.143% { opacity: 1 } 97.143% { opacity: 1 } 99.286% { opacity: 0 } 100.000% { opacity: 0 } }
.nm-1 .nm-b { animation: n1b 14s ease-in-out infinite; }
@keyframes n1cov { 0.000% { left: 0% } 44.286% { left: 58% } 100.000% { left: 58% } }
.nm-1 .nm-dock .sb-cover { animation: n1cov 14s linear infinite; }
@keyframes n1pa { 0.000% { opacity: 1 } 68.571% { opacity: 1 } 69.286% { opacity: 0 } 100.000% { opacity: 0 } }
.nm-1 .nm-pop-a { animation: n1pa 14s ease-in-out infinite; }
@keyframes n1pb { 0.000% { opacity: 0 } 67.857% { opacity: 0 } 68.571% { opacity: 1 } 100.000% { opacity: 1 } }
.nm-1 .nm-pop-b { animation: n1pb 14s ease-in-out infinite; }
@keyframes n1nc { 0.000% { color: #2A61B1 } 68.214% { color: #2A61B1 } 69.286% { color: #8D2D7D } 100.000% { color: #8D2D7D } }
.nm-1 .nm-r-choir .nm-name { animation: n1nc 14s linear infinite; }
@keyframes n1m { 0.000% { opacity: 0 } 59.500% { opacity: 0 } 60.357% { opacity: 1 } 68.571% { opacity: 1 } 69.429% { opacity: 0 } 100.000% { opacity: 0 } }
.nm-1 .nm-menu { animation: n1m 14s ease-in-out infinite; }
@keyframes n1mf { 0.000% { background: transparent } 64.643% { background: transparent } 65.357% { background: #E2F6E6 } 100.000% { background: #E2F6E6 } }
.nm-1 .nm-mi--faction { animation: n1mf 14s linear infinite; }
@keyframes n1bar { 0.000% { opacity: 1 } 78.571% { opacity: 1 } 80.000% { opacity: 0 } 100.000% { opacity: 0 } }
.nm-1 .nm-bar { animation: n1bar 14s ease-in-out infinite; }
@keyframes n1d2 { 0.000% { opacity: 0 } 78.214% { opacity: 0 } 80.000% { opacity: 1 } 100.000% { opacity: 1 } }
.nm-1 .nm-dock2 { animation: n1d2 14s ease-in-out infinite; }
@keyframes n1cur { 0.000% { left: calc(100% - 288px); top: 470px; transform: scale(1) } 51.429% { left: calc(100% - 288px); top: 470px; transform: scale(1) } 58.571% { left: calc(100% - 165px); top: 231px; transform: scale(1) } 59.286% { left: calc(100% - 165px); top: 231px; transform: scale(0.82) } 60.357% { left: calc(100% - 165px); top: 231px; transform: scale(1) } 64.286% { left: calc(100% - 190px); top: 285px; transform: scale(1) } 67.143% { left: calc(100% - 190px); top: 285px; transform: scale(1) } 67.857% { left: calc(100% - 190px); top: 285px; transform: scale(0.82) } 68.929% { left: calc(100% - 190px); top: 285px; transform: scale(1) } 75.714% { left: calc(100% - 82px); top: 511px; transform: scale(1) } 76.786% { left: calc(100% - 82px); top: 511px; transform: scale(0.82) } 77.857% { left: calc(100% - 82px); top: 511px; transform: scale(1) } 88.571% { left: calc(100% - 288px); top: 470px; transform: scale(1) } 100.000% { left: calc(100% - 288px); top: 470px; transform: scale(1) } }
@keyframes n1cv { 0.000% { opacity: 0 } 47.857% { opacity: 0 } 50.000% { opacity: 1 } 92.857% { opacity: 1 } 95.000% { opacity: 0 } 100.000% { opacity: 0 } }
.nm-1 .nm-cur { animation: n1cur 14s ease-in-out infinite, n1cv 14s linear infinite; }

/* The recap: written paragraph by paragraph with the step dock, then an @ edit, then the scene’s picture, then a rewrite with the bubble menu. 32s a loop. */
.sb-track { display: flex; align-items: center; white-space: nowrap; }
.sb-s { display: inline-flex; align-items: center; gap: 5px; height: 24px; font-size: 12.5px; color: #AEB4AE; flex-shrink: 0; }
.sb-s.is-done { color: #262B27; font-weight: 500; }
.sb-s.is-on { color: #145C32; font-weight: 600; }
.sb-sep { width: 14px; height: 1px; margin: 0 8px; background: #E3E6E1; flex-shrink: 0; }
.sb-spin { width: 11px; height: 11px; margin: 0 .5px; border-radius: 50%; border: 2px solid #E3E8E1; border-top-color: #1A763F; flex-shrink: 0; animation: sb-spin .9s linear infinite; }
.sb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 14px 34px rgba(20,30,22,.14); }
.sb-grow { flex-grow: 1; }
.sb-btn { flex-shrink: 0; height: 30px; padding: 0 13px; border-radius: 8px; background: #1A763F; color: #FFFFFF; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; }
.sb-dock { padding: 14px 18px 12px; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 14px 34px rgba(20,30,22,.14); }
.sb-wave { position: relative; height: 52px; margin-top: 16px; }
.sb-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.sb-bars i { flex: 1 1 0; min-width: 0; border-radius: 1.5px; }
.sb-cover { position: absolute; top: -6px; bottom: -6px; left: 0; width: 14%; border-radius: 7px; background: rgba(26,118,63,.12); box-shadow: inset 0 0 0 1px rgba(26,118,63,.22); }
.sb-lines { position: relative; height: 20px; margin-top: 14px; font-size: 13px; line-height: 20px; color: #646B66; }
.sb-line { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-foot { display: flex; justify-content: space-between; align-items: center; height: 22px; margin-top: 4px; font-size: 12px; color: #838A84; }
.sb-cancel { font-size: 13px; color: #646B66; text-decoration: underline; text-decoration-color: rgba(110,110,110,.5); text-underline-offset: 2px; }
.rc { position: relative; height: 600px; padding: 36px 40px; border-radius: 28px; background: #FFFFFF; overflow: hidden; box-shadow: 0 0 0 1px rgba(26,70,40,.09), 0 20px 50px rgba(26,70,40,.07); }
.rc .rc-dock { position: absolute; left: 40px; right: 40px; bottom: 22px; }
.rc-doc { max-width: 640px; }
.rc-title { font-size: 26px; font-weight: 600; letter-spacing: -.015em; color: #AEB4AE; }
.rc-h { margin-top: 14px; font-size: 17px; font-weight: 600; color: #262B27; }
.rc-p { position: relative; margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: #262B27; }
.rc-center { max-width: 680px; margin: 0 auto; }
.rc-typed { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; color: #0D6332; }
.rc-linked { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.rc-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -.2em; background: #1A763F; opacity: 0; }
.rc-mention { position: absolute; z-index: 4; right: 0; top: 100%; width: 270px; margin-top: 6px; padding: 5px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 16px 40px rgba(0,0,0,.14), 0 0 0 1px #E3E6E1; opacity: 0; }
.rc-mo { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 14px; }
.rc-mo b { font-weight: 500; color: #1D201E; }
.rc-mo em { margin-left: auto; font-style: normal; font-size: 12px; color: #8A908B; }
.rc-mo.is-on { background: #E2F6E6; }
.rc-mo.is-on b { font-weight: 600; }
.rc-w { opacity: 0; }
@media (max-width: 767.98px) {
  .sb-s:not(.is-on) .sb-t { display: none; }
  .sb-sep { width: 6px; margin: 0 4px; }
  .sb-s { height: 20px; font-size: 11.5px; }
  .sb-bar { padding: 8px 8px 8px 12px; gap: 8px; border-radius: 14px; }
  .sb-dock { padding: 10px 12px 8px; border-radius: 14px; }
  .sb-wave { height: 30px; margin-top: 10px; }
  .sb-bars { gap: 1px; }
  .sb-bars i:nth-child(2n) { display: none; }
  .sb-lines { height: 18px; margin-top: 9px; font-size: 11.5px; line-height: 18px; }
  .sb-foot { height: 18px; font-size: 11px; }
  .sb-cancel { font-size: 11.5px; }
  .rc { height: 640px; padding: 20px 14px; border-radius: 22px; }
  .rc .rc-dock { left: 12px; right: 12px; bottom: 12px; }
  .rc-title { font-size: 20px; }
  .rc-h { font-size: 15px; margin-top: 8px; }
  .rc-p { font-size: 13.5px; line-height: 1.55; }
  .rc-mention { width: 220px; }
  .rc-2 .rc-p, .rc-3 .rc-p { font-size: 14px; }
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

.rc-doc { position: relative; }
.rc-title { color: #262B27; }
.rc { margin-top: 40px; }
.rc-caret { margin-right: -2px; }
.rb-hrow { position: relative; margin-top: 8px; padding-right: 40px; }
.rb-hrow .rc-h { margin-top: 0; }
.rb-gut { position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 8px; opacity: 0; animation: rb-gut 32s linear infinite; }
.rb-gut > span { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.rb-gut__off { color: #AEB4AE; }
.rb-gut__on { color: var(--green); background: #E4F5E8; opacity: 0; animation: rb-gon 32s linear infinite; }
.rb-menu { position: absolute; z-index: 4; right: 0; top: calc(50% + 18px); width: 190px; padding: 5px; border-radius: 10px; background: rgba(250, 250, 249, .98);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08); opacity: 0; transform-origin: 100% 0; animation: rb-menu 32s ease-out infinite; }
.rb-mi { display: flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 5px; font-size: 13.5px; color: #1F2420; }
.rb-mi--hot { animation: rb-hot 32s linear infinite; }
.rb-banner { position: relative; height: 0; overflow: hidden; opacity: 0; animation: rb-banner-p 32s ease-in-out infinite; }
.rb-band { position: relative; height: 120px; margin-top: 6px; border-radius: 12px; overflow: hidden; background: #E3E6E1; }
.rb-img { position: absolute; left: 0; top: -29.8%; display: block; width: 100%; height: 170px; object-fit: cover;
  animation: rb-img 32s ease-in-out infinite; }
.rb-pills { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; opacity: 0; animation: rb-pills 32s ease-out infinite; }
.rb-pills span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; background: rgba(255, 255, 255, .94);
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--app-ink); }
.rb-cur { display: none; position: absolute; z-index: 9; left: 92%; top: 540px; margin: -3px 0 0 -4px; transform-origin: 4px 3px; opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); animation: rb-cur 32s ease-in-out infinite; }
@media (min-width: 768px) {
  .rb-hrow { margin-top: 14px; padding-right: 0; }
  .rb-gut { right: auto; left: -38px; }
  .rb-menu { right: auto; left: -38px; transform-origin: 0 0; }
  .rb-banner { animation-name: rb-banner; }
  .rb-band { height: 190px; }
  .rb-img { height: 270px; }
  .rb-cur { display: block; }
}
@media (min-width: 768px) { .rc { margin-top: 72px; } }
@keyframes bk0_0 { 0.000% { opacity: 0 } 3.125% { opacity: 0 } 3.906% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw0_0 { animation: bk0_0 32s linear infinite; }
@keyframes bk0_1 { 0.000% { opacity: 0 } 4.583% { opacity: 0 } 5.365% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw0_1 { animation: bk0_1 32s linear infinite; }
@keyframes bk0_2 { 0.000% { opacity: 0 } 6.042% { opacity: 0 } 6.823% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw0_2 { animation: bk0_2 32s linear infinite; }
@keyframes bk0_3 { 0.000% { opacity: 0 } 7.500% { opacity: 0 } 8.281% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw0_3 { animation: bk0_3 32s linear infinite; }
@keyframes bk0_4 { 0.000% { opacity: 0 } 8.958% { opacity: 0 } 9.739% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw0_4 { animation: bk0_4 32s linear infinite; }
@keyframes bk0_5 { 0.000% { opacity: 0 } 10.417% { opacity: 0 } 11.198% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw0_5 { animation: bk0_5 32s linear infinite; }
@keyframes bk1_0 { 0.000% { opacity: 0 } 13.750% { opacity: 0 } 14.531% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw1_0 { animation: bk1_0 32s linear infinite; }
@keyframes bk1_1 { 0.000% { opacity: 0 } 15.375% { opacity: 0 } 16.157% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw1_1 { animation: bk1_1 32s linear infinite; }
@keyframes bk1_2 { 0.000% { opacity: 0 } 17.000% { opacity: 0 } 17.781% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw1_2 { animation: bk1_2 32s linear infinite; }
@keyframes bk1_3 { 0.000% { opacity: 0 } 18.625% { opacity: 0 } 19.406% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw1_3 { animation: bk1_3 32s linear infinite; }
@keyframes bk1_4 { 0.000% { opacity: 0 } 20.250% { opacity: 0 } 21.032% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw1_4 { animation: bk1_4 32s linear infinite; }
@keyframes bk2_0 { 0.000% { opacity: 0 } 23.750% { opacity: 0 } 24.531% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw2_0 { animation: bk2_0 32s linear infinite; }
@keyframes bk2_1 { 0.000% { opacity: 0 } 25.375% { opacity: 0 } 26.156% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw2_1 { animation: bk2_1 32s linear infinite; }
@keyframes bk2_2 { 0.000% { opacity: 0 } 27.000% { opacity: 0 } 27.782% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw2_2 { animation: bk2_2 32s linear infinite; }
@keyframes bk2_3 { 0.000% { opacity: 0 } 28.625% { opacity: 0 } 29.406% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw2_3 { animation: bk2_3 32s linear infinite; }
@keyframes bk2_4 { 0.000% { opacity: 0 } 30.250% { opacity: 0 } 31.031% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bw2_4 { animation: bk2_4 32s linear infinite; }
@keyframes bked { 0.000% { opacity: 0 } 35.625% { opacity: 0 } 35.938% { opacity: 1 } 73.438% { opacity: 1 } 99.000% { opacity: 1 } 99.800% { opacity: 0 } 100.000% { opacity: 0 } }
.bedit { animation: bked 32s linear infinite; }
@keyframes rty { 0.000% { max-width: 0 } 36.562% { max-width: 0 } 39.688% { max-width: 4ch } 43.750% { max-width: 4ch } 44.062% { max-width: 0 } 99.000% { max-width: 0 } 100.000% { max-width: 0 } }
.rc-typed { animation: rty 32s steps(4, end) infinite; }
@keyframes rli { 0.000% { max-width: 0; opacity: 0 } 43.750% { max-width: 0; opacity: 0 } 44.687% { max-width: 9em; opacity: 1 } 99.000% { max-width: 9em; opacity: 1 } 100.000% { max-width: 9em; opacity: 1 } }
.rc-linked { animation: rli 32s ease-out infinite; }
@keyframes rme { 0.000% { opacity: 0 } 39.219% { opacity: 0 } 39.688% { opacity: 1 } 43.750% { opacity: 1 } 44.218% { opacity: 0 } 99.000% { opacity: 0 } 100.000% { opacity: 0 } }
.rc-mention { animation: rme 32s ease-in-out infinite; }
@keyframes rca { 0.000% { opacity: 0 } 35.469% { opacity: 0 } 35.625% { opacity: 1 } 44.062% { opacity: 1 } 44.218% { opacity: 0 } 99.000% { opacity: 0 } 100.000% { opacity: 0 } }
.rc-caret { animation: rca 32s ease-in-out infinite; }
@keyframes rdk { 0.000% { opacity: 1 } 33.750% { opacity: 1 } 35.000% { opacity: 0 } 99.000% { opacity: 0 } 100.000% { opacity: 0 } }
.rc .rc-dock { animation: rdk 32s ease-in-out infinite; }
@keyframes rcv { 0.000% { left: 30% } 11.875% { left: 30% } 13.750% { left: 46% } 21.875% { left: 46% } 23.750% { left: 62% } 99.000% { left: 62% } 100.000% { left: 62% } }
.rc-dock .sb-cover { animation: rcv 32s ease-in-out infinite; }
@keyframes rl0 { 0.000% { opacity: 1 } 16.875% { opacity: 1 } 18.125% { opacity: 0 } 99.000% { opacity: 0 } 100.000% { opacity: 0 } }
.rc-dock .sb-line0 { animation: rl0 32s ease-in-out infinite; }
@keyframes rl1 { 0.000% { opacity: 0 } 16.875% { opacity: 0 } 18.125% { opacity: 1 } 99.000% { opacity: 1 } 100.000% { opacity: 1 } }
.rc-dock .sb-line1 { animation: rl1 32s ease-in-out infinite; }
@keyframes rb-cur { /* bubble */ 0.000% { left: 92%; top: 540px; transform: scale(1); opacity: 0 } 45.000% { left: 92%; top: 540px; transform: scale(1); opacity: 0 } 45.938% { left: 92%; top: 540px; transform: scale(1); opacity: 1 } 48.437% { left: -24px; top: 59px; transform: scale(1); opacity: 1 } 48.750% { left: -24px; top: 59px; transform: scale(0.82); opacity: 1 } 49.219% { left: -24px; top: 59px; transform: scale(1); opacity: 1 } 51.562% { left: 30px; top: 147px; transform: scale(1); opacity: 1 } 51.938% { left: 30px; top: 147px; transform: scale(0.82); opacity: 1 } 52.406% { left: 30px; top: 147px; transform: scale(1); opacity: 1 } 55.000% { left: 30px; top: 147px; transform: scale(1); opacity: 1 } 58.125% { left: 320px; top: 150px; transform: scale(1); opacity: 1 } 60.313% { left: 320px; top: 150px; transform: scale(1); opacity: 1 } 60.625% { left: 320px; top: 150px; transform: scale(0.9); opacity: 1 } 65.625% { left: 320px; top: 192px; transform: scale(0.9); opacity: 1 } 65.938% { left: 320px; top: 192px; transform: scale(1); opacity: 1 } 67.500% { left: 320px; top: 192px; transform: scale(1); opacity: 1 } 70.625% { left: 92%; top: 540px; transform: scale(1); opacity: 1 } 73.438% { left: 92%; top: 540px; transform: scale(1); opacity: 1 } 75.400% { left: 109px; top: 462px; transform: scale(1); opacity: 0 } 76.200% { left: 133px; top: 406px; transform: scale(1); opacity: 1 } 77.200% { left: 133px; top: 406px; transform: scale(1); opacity: 1 } 77.500% { left: 133px; top: 406px; transform: scale(0.82); opacity: 1 } 79.500% { left: 284px; top: 406px; transform: scale(0.82); opacity: 1 } 79.800% { left: 284px; top: 406px; transform: scale(1); opacity: 1 } 81.200% { left: 294px; top: 422px; transform: scale(1); opacity: 1 } 82.200% { left: 437px; top: 287px; transform: scale(1); opacity: 1 } 82.600% { left: 437px; top: 287px; transform: scale(0.82); opacity: 1 } 83.000% { left: 437px; top: 287px; transform: scale(1); opacity: 1 } 86.800% { left: 446px; top: 338px; transform: scale(1); opacity: 1 } 87.600% { left: 446px; top: 338px; transform: scale(1); opacity: 1 } 88.000% { left: 446px; top: 338px; transform: scale(0.82); opacity: 1 } 88.500% { left: 446px; top: 338px; transform: scale(1); opacity: 1 } 92.600% { left: 486px; top: 428px; transform: scale(1); opacity: 1 } 94.000% { left: 486px; top: 428px; transform: scale(1); opacity: 0 } 100% { left: 92%; top: 540px; transform: scale(1); opacity: 0 } }
@keyframes rb-gut { 0.000% { opacity: 0 } 44.687% { opacity: 0 } 45.625% { opacity: 1 } 52.500% { opacity: 1 } 53.125% { opacity: 0 } 99.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes rb-gon { 0.000% { opacity: 0 } 47.968% { opacity: 0 } 48.437% { opacity: 1 } 52.500% { opacity: 1 } 52.813% { opacity: 0 } 99.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes rb-menu { 0.000% { opacity: 0; transform: scale(.96) } 48.750% { opacity: 0; transform: scale(.96) } 49.375% { opacity: 1; transform: none } 52.500% { opacity: 1; transform: none } 53.125% { opacity: 0; transform: none } 99.000% { opacity: 0; transform: none } 100.000% { opacity: 0; transform: none } }
@keyframes rb-hot { 0.000% { background: transparent; color: #1F2420 } 51.094% { background: transparent; color: #1F2420 } 51.407% { background: #1A763F; color: #FFFFFF } 52.656% { background: #1A763F; color: #FFFFFF } 52.969% { background: transparent; color: #1F2420 } 99.000% { background: transparent; color: #1F2420 } 100.000% { background: transparent; color: #1F2420 } }
@keyframes rb-banner-p { 0.000% { height: 0; opacity: 0 } 52.750% { height: 0; opacity: 0 } 52.813% { height: 0; opacity: 1 } 55.000% { height: 126px; opacity: 1 } 73.438% { height: 126px; opacity: 1 } 99.000% { height: 126px; opacity: 1 } 99.800% { height: 126px; opacity: 0 } 100.000% { height: 0; opacity: 0 } }
@keyframes rb-banner { 0.000% { height: 0; opacity: 0 } 52.750% { height: 0; opacity: 0 } 52.813% { height: 0; opacity: 1 } 55.000% { height: 196px; opacity: 1 } 73.438% { height: 196px; opacity: 1 } 99.000% { height: 196px; opacity: 1 } 99.800% { height: 196px; opacity: 0 } 100.000% { height: 0; opacity: 0 } }
@keyframes rb-pills { 0.000% { opacity: 0 } 57.500% { opacity: 0 } 58.125% { opacity: 1 } 67.813% { opacity: 1 } 68.750% { opacity: 0 } 99.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes rb-img { 0.000% { top: -29.8% } 60.625% { top: -29.8% } 65.625% { top: -7.8% } 99.000% { top: -7.8% } 99.800% { top: -7.8% } 100.000% { top: -29.8% } }

/* Maps: drawing a route, pinning the abbey, then a pin that opens the town’s own map. Plays on its own, 20s a loop. */
.mp { margin-top: 40px; }
@media (min-width: 768px) { .mp { margin-top: 72px; } }
.mp { background: #FFFFFF; border-radius: 28px; padding: 30px 34px 34px; box-shadow: 0 0 0 1px rgba(26,70,40,.09), 0 20px 50px rgba(26,70,40,.07); }
.mp-crumb, .mp-title { position: relative; }
.mp-crumb { height: 18px; font-size: 13.5px; color: #1A763F; }
.mp-title { height: 40px; margin-top: 4px; font-size: 30px; font-weight: 600; letter-spacing: -.015em; color: #262B27; }
.mp-crumb span, .mp-title span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.mp-c1, .mp-t1 { animation: mp-a 20s ease-in-out infinite; }
.mp-c2, .mp-t2 { opacity: 0; animation: mp-b 20s ease-in-out infinite; }
.mp-frame { position: relative; margin-top: 18px; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #EDE3C6; container-type: inline-size; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.mp-layer { position: absolute; inset: 0; transform-origin: 60% 47%; }
.mp-layer img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp-coast { animation: mp-coast 20s ease-in-out infinite; }
.mp-town { opacity: 0; animation: mp-town 20s ease-in-out infinite; }
.mp-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-label { position: absolute; transform: translate(-50%, -50%); font-weight: 700; white-space: nowrap; line-height: 1; text-shadow: 0 0 3px #FFFFFF, 0 0 3px #FFFFFF, 0 0 6px rgba(255,255,255,.9); }
.mp-pin { position: absolute; display: flex; align-items: center; gap: .5cqw; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -50%); }
.mp-pin--l { transform: translate(calc(-100% + clamp(15px, 2.5cqw, 26px) / 2), -50%); }
.mp-pin__dot { width: clamp(15px, 2.5cqw, 26px); height: clamp(15px, 2.5cqw, 26px); border-radius: 50%; border: 2px solid #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
.mp-pin__dot svg { width: 56%; height: 56%; }
.mp-pin--map .mp-pin__dot { border-radius: 26%; background: #262B27; }
.mp-pin__label { padding: .2cqw .6cqw; border-radius: 4px; background: rgba(255,255,255,.94); font-size: clamp(7.5px, 1.15cqw, 12.5px); font-weight: 600; color: #262B27; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mp-pin--hot .mp-pin__dot { animation: mp-hot 20s ease-out infinite; }
.mp-tp0 { animation: mp-tp0 20s ease-out infinite; }
.mp-tp1 { animation: mp-tp1 20s ease-out infinite; }
.mp-tp2 { animation: mp-tp2 20s ease-out infinite; }
.mp-tp3 { animation: mp-tp3 20s ease-out infinite; }
.mp-card { position: absolute; z-index: 5; width: clamp(170px, 30cqw, 300px); padding: clamp(9px, 1.4cqw, 14px) clamp(10px, 1.6cqw, 16px); border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 34px rgba(20,30,22,.22), 0 0 0 1px rgba(0,0,0,.05); opacity: 0; }
.mp-card--a { animation: mp-ca 20s ease-out infinite; }
.mp-card--b { width: clamp(150px, 22cqw, 230px); animation: mp-cb 20s ease-out infinite; }
.mp-card--c { animation: mp-cc 20s ease-out infinite; }
.mp-card__row { display: flex; gap: 10px; align-items: center; }
.mp-card__thumb { width: clamp(40px, 6cqw, 64px); height: clamp(28px, 4cqw, 44px); border-radius: 6px; flex-shrink: 0; background-size: cover; background-position: 40% 45%; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.mp-card__name { font-size: clamp(12px, 1.55cqw, 15.5px); font-weight: 600; color: #262B27; }
.mp-card__kind { margin-top: 1px; font-size: clamp(10px, 1.2cqw, 12px); color: #838A84; }
.mp-card__text { margin-top: 5px; font-size: clamp(10.5px, 1.3cqw, 13px); line-height: 1.4; color: #646B66; }
.mp-card__link { margin-top: 6px; font-size: clamp(10.5px, 1.3cqw, 13px); font-weight: 500; color: #1A763F; }
.mp-cur { position: absolute; z-index: 9; width: 22px; height: 30px; margin: -3px 0 0 -4px; transform-origin: 4px 3px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); animation: mp-cur 20s ease-in-out infinite; }
.mp-tap { display: none; position: absolute; z-index: 9; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(60,60,67,.3); box-shadow: 0 0 0 2px rgba(255,255,255,.9); opacity: 0; animation: mp-tap 20s ease-out infinite; }
.mp-zoom { position: absolute; right: 1.6cqw; bottom: 1.6cqw; display: flex; gap: 1.2cqw; padding: .6cqw 1.4cqw; border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: 0 1px 4px rgba(0,0,0,.14); font-size: clamp(9px, 1.3cqw, 14px); color: #262B27; }
.mp-np0, .mp-np1 { opacity: 0; }
.mp-np0 { animation: mp-np0 20s linear infinite; }
.mp-np1 { animation: mp-np1 20s linear infinite; }
.mp-draft .mp-nr { opacity: 0; animation: mp-nr 20s linear infinite; }
.mp-s1, .mp-s2, .mp-s3, .mp-d0, .mp-d1, .mp-d2, .mp-d3 { opacity: 0; }
.mp-s1 { animation: mp-s1 20s linear infinite; }
.mp-s2 { animation: mp-s2 20s linear infinite; }
.mp-s3 { animation: mp-s3 20s linear infinite; }
.mp-d0 { animation: mp-d0 20s linear infinite; }
.mp-d1 { animation: mp-d1 20s linear infinite; }
.mp-d2 { animation: mp-d2 20s linear infinite; }
.mp-d3 { animation: mp-d3 20s linear infinite; }
.mp-tools { position: absolute; z-index: 6; left: 50%; top: 1.8cqw; transform: translateX(-50%); display: flex; align-items: center; gap: .5cqw; padding: .5cqw; border-radius: 1.4cqw; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05); }
.mp-tool { position: relative; width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw; display: inline-flex; align-items: center; justify-content: center; }
.mp-tool svg { width: 52%; height: 52%; }
.mp-tool__on { position: absolute; inset: 0; border-radius: .9cqw; background: #E2F6E6; display: inline-flex; align-items: center; justify-content: center; opacity: 0; }
.mp-on-sel { animation: mp-on-sel 20s linear infinite; }
.mp-on-route { animation: mp-on-route 20s linear infinite; }
.mp-on-pin { animation: mp-on-pin 20s linear infinite; }
.mp-tools__div { width: 1px; height: 2.4cqw; margin: 0 .3cqw; background: #E3E6E1; }
.mp-pick { position: absolute; z-index: 7; right: calc(48% + 2.4cqw); bottom: 5%; width: clamp(160px, 31.5cqw, 290px); padding: 6px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 16px 40px rgba(20,30,22,.24), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; animation: mp-pick 20s ease-out infinite; }
.mp-pick__q { position: relative; display: flex; align-items: center; gap: 7px; height: clamp(24px, 3.4cqw, 32px); padding: 0 8px; border-radius: 7px; background: #F3F5F1; font-size: clamp(10px, 1.4cqw, 13px); color: #262B27; }
.mp-pick__ph { position: absolute; left: 27px; right: 8px; color: #8A908B; white-space: nowrap; overflow: hidden; animation: mp-ph 20s linear infinite; }
.mp-pick__t { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; animation: mp-type 20s steps(3, end) infinite; }
.mp-pick__caret { width: 1.5px; height: 1.2em; background: #262B27; }
.mp-pick__lists { display: grid; margin-top: 4px; }
.mp-pick__l1, .mp-pick__l2 { grid-area: 1 / 1; }
.mp-pick__l1 { animation: mp-l1 20s linear infinite; }
.mp-pick__l2 { opacity: 0; animation: mp-l2 20s linear infinite; }
.mp-pick__h { padding: 6px 8px 3px; font-size: clamp(8.5px, 1.1cqw, 11px); font-weight: 600; letter-spacing: .04em; color: #838A84; }
.mp-pick__row { display: flex; align-items: center; gap: 8px; height: clamp(22px, 3.2cqw, 30px); padding: 0 8px; border-radius: 6px; font-size: clamp(10.5px, 1.4cqw, 13px); color: #262B27; }
.mp-pick__row span { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-pick__row em { font-style: normal; font-size: clamp(9px, 1.15cqw, 11.5px); color: #838A84; }
.mp-pick__row.is-on { background: #1A763F; color: #FFFFFF; }
.mp-pick__row.is-on em { color: rgba(255,255,255,.8); }
@media (max-width: 767.98px) {
  .mp { padding: 18px 14px 16px; border-radius: 22px; }
  .mp-crumb { font-size: 12px; }
  .mp-title { height: 30px; font-size: 22px; }
  .mp-frame { margin-top: 12px; border-radius: 12px; }
  .mp-cur { display: none; }
  .mp-tap { display: block; }
  .mp-card__text { display: none; }
  .mp-pick__row em { display: none; }
}
@keyframes mp-cur { 0.000% { left: 86%; top: 88%; transform: scale(1) } 1.750% { left: 86%; top: 88%; transform: scale(1) } 5.000% { left: 53.7%; top: 6.15%; transform: scale(1) } 5.250% { left: 53.7%; top: 6.15%; transform: scale(0.8) } 5.750% { left: 53.7%; top: 6.15%; transform: scale(1) } 8.000% { left: 59.5%; top: 50.5%; transform: scale(1) } 8.250% { left: 59.5%; top: 50.5%; transform: scale(0.8) } 8.750% { left: 59.5%; top: 50.5%; transform: scale(1) } 11.000% { left: 57%; top: 62%; transform: scale(1) } 11.250% { left: 57%; top: 62%; transform: scale(0.8) } 11.750% { left: 57%; top: 62%; transform: scale(1) } 14.000% { left: 55%; top: 73%; transform: scale(1) } 14.250% { left: 55%; top: 73%; transform: scale(0.8) } 14.750% { left: 55%; top: 73%; transform: scale(1) } 17.000% { left: 52.6%; top: 81.6%; transform: scale(1) } 17.250% { left: 52.6%; top: 81.6%; transform: scale(0.8) } 17.600% { left: 52.6%; top: 81.6%; transform: scale(1) } 17.850% { left: 52.6%; top: 81.6%; transform: scale(0.8) } 18.250% { left: 52.6%; top: 81.6%; transform: scale(1) } 21.000% { left: 45.5%; top: 6.15%; transform: scale(1) } 21.250% { left: 45.5%; top: 6.15%; transform: scale(0.8) } 21.750% { left: 45.5%; top: 6.15%; transform: scale(1) } 24.000% { left: 52%; top: 85%; transform: scale(1) } 24.250% { left: 52%; top: 85%; transform: scale(0.8) } 24.750% { left: 52%; top: 85%; transform: scale(1) } 29.500% { left: 52%; top: 85%; transform: scale(1) } 31.000% { left: 30%; top: 80.7%; transform: scale(1) } 31.250% { left: 30%; top: 80.7%; transform: scale(0.8) } 31.750% { left: 30%; top: 80.7%; transform: scale(1) } 34.500% { left: 30%; top: 80.7%; transform: scale(1) } 43.000% { left: 42%; top: 25%; transform: scale(1) } 53.500% { left: 42%; top: 25%; transform: scale(1) } 59.500% { left: 60%; top: 47%; transform: scale(1) } 61.500% { left: 60%; top: 47%; transform: scale(1) } 62.000% { left: 60%; top: 47%; transform: scale(0.8) } 62.750% { left: 60%; top: 47%; transform: scale(1) } 68.000% { left: 60%; top: 47%; transform: scale(1) } 74.500% { left: 37.75%; top: 47.25%; transform: scale(1) } 84.000% { left: 37.75%; top: 47.25%; transform: scale(1) } 92.000% { left: 86%; top: 88%; transform: scale(1) } 100.000% { left: 86%; top: 88%; transform: scale(1) } }
@keyframes mp-tap { 0.000% { left: 53.7%; top: 6.15%; opacity: 0 } 4.950% { left: 53.7%; top: 6.15%; opacity: 0; transform: scale(.6) } 5.250% { left: 53.7%; top: 6.15%; opacity: 1; transform: scale(1) } 6.750% { left: 53.7%; top: 6.15%; opacity: 0; transform: scale(1.35) } 7.950% { left: 59.5%; top: 50.5%; opacity: 0; transform: scale(.6) } 8.250% { left: 59.5%; top: 50.5%; opacity: 1; transform: scale(1) } 9.750% { left: 59.5%; top: 50.5%; opacity: 0; transform: scale(1.35) } 10.950% { left: 57%; top: 62%; opacity: 0; transform: scale(.6) } 11.250% { left: 57%; top: 62%; opacity: 1; transform: scale(1) } 12.750% { left: 57%; top: 62%; opacity: 0; transform: scale(1.35) } 13.950% { left: 55%; top: 73%; opacity: 0; transform: scale(.6) } 14.250% { left: 55%; top: 73%; opacity: 1; transform: scale(1) } 15.750% { left: 55%; top: 73%; opacity: 0; transform: scale(1.35) } 16.950% { left: 52.6%; top: 81.6%; opacity: 0; transform: scale(.6) } 17.250% { left: 52.6%; top: 81.6%; opacity: 1; transform: scale(1) } 18.750% { left: 52.6%; top: 81.6%; opacity: 0; transform: scale(1.35) } 20.950% { left: 45.5%; top: 6.15%; opacity: 0; transform: scale(.6) } 21.250% { left: 45.5%; top: 6.15%; opacity: 1; transform: scale(1) } 22.750% { left: 45.5%; top: 6.15%; opacity: 0; transform: scale(1.35) } 23.950% { left: 52%; top: 85%; opacity: 0; transform: scale(.6) } 24.250% { left: 52%; top: 85%; opacity: 1; transform: scale(1) } 25.750% { left: 52%; top: 85%; opacity: 0; transform: scale(1.35) } 30.950% { left: 28%; top: 80.7%; opacity: 0; transform: scale(.6) } 31.250% { left: 28%; top: 80.7%; opacity: 1; transform: scale(1) } 32.750% { left: 28%; top: 80.7%; opacity: 0; transform: scale(1.35) } 43.700% { left: 42%; top: 25%; opacity: 0; transform: scale(.6) } 44.000% { left: 42%; top: 25%; opacity: 1; transform: scale(1) } 45.500% { left: 42%; top: 25%; opacity: 0; transform: scale(1.35) } 61.700% { left: 60%; top: 47%; opacity: 0; transform: scale(.6) } 62.000% { left: 60%; top: 47%; opacity: 1; transform: scale(1) } 63.500% { left: 60%; top: 47%; opacity: 0; transform: scale(1.35) } 75.200% { left: 37.75%; top: 47.25%; opacity: 0; transform: scale(.6) } 75.500% { left: 37.75%; top: 47.25%; opacity: 1; transform: scale(1) } 77.000% { left: 37.75%; top: 47.25%; opacity: 0; transform: scale(1.35) } 100.000% { left: 37.75%; top: 47.25%; opacity: 0 } }
@keyframes mp-a { 0.000% { opacity: 1 } 65.500% { opacity: 1 } 68.000% { opacity: 0 } 95.000% { opacity: 0 } 97.500% { opacity: 1 } 100.000% { opacity: 1 } }
@keyframes mp-b { 0.000% { opacity: 0 } 65.500% { opacity: 0 } 68.000% { opacity: 1 } 94.500% { opacity: 1 } 97.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-coast { 0.000% { transform: scale(1); opacity: 1 } 63.250% { transform: scale(1); opacity: 1 } 66.000% { opacity: 1 } 70.000% { transform: scale(3.4); opacity: 0 } 91.500% { transform: scale(1); opacity: 0 } 96.500% { transform: scale(1); opacity: 1 } 100.000% { transform: scale(1); opacity: 1 } }
@keyframes mp-town { 0.000% { transform: scale(.08); opacity: 0 } 63.750% { transform: scale(.08); opacity: 0 } 65.250% { opacity: 1 } 69.250% { transform: scale(1); opacity: 1 } 93.000% { transform: scale(1); opacity: 1 } 97.000% { transform: scale(1); opacity: 0 } 100.000% { transform: scale(1); opacity: 0 } }
@keyframes mp-hot { 0.000% { box-shadow: 0 1px 4px rgba(0,0,0,.28) } 61.500% { box-shadow: 0 1px 4px rgba(0,0,0,.28) } 62.250% { box-shadow: 0 0 0 7px rgba(26,118,63,.35) } 64.500% { box-shadow: 0 1px 4px rgba(0,0,0,.28) } 100.000% { box-shadow: 0 1px 4px rgba(0,0,0,.28) } }
@keyframes mp-tp0 { 0.000% { opacity: 0; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -30%) } 70.000% { opacity: 0; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -30%) } 71.500% { opacity: 1; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -50%) } 100.000% { opacity: 1; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -50%) } }
@keyframes mp-tp1 { 0.000% { opacity: 0; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -30%) } 71.000% { opacity: 0; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -30%) } 72.500% { opacity: 1; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -50%) } 100.000% { opacity: 1; transform: translate(calc(clamp(15px, 2.5cqw, 26px) / -2), -50%) } }
@keyframes mp-tp2 { 0.000% { opacity: 0; transform: translate(calc(-100% + clamp(15px, 2.5cqw, 26px) / 2), -30%) } 72.000% { opacity: 0; transform: translate(calc(-100% + clamp(15px, 2.5cqw, 26px) / 2), -30%) } 73.500% { opacity: 1; transform: translate(calc(-100% + clamp(15px, 2.5cqw, 26px) / 2), -50%) } 100.000% { opacity: 1; transform: translate(calc(-100% + clamp(15px, 2.5cqw, 26px) / 2), -50%) } }
@keyframes mp-tp3 { 0.000% { opacity: 0 } 72.400% { opacity: 0 } 73.000% { opacity: 1 } 100.000% { opacity: 1 } }
@keyframes mp-ca { 0.000% { opacity: 0 } 43.000% { opacity: 0 } 44.000% { opacity: 1 } 53.500% { opacity: 1 } 54.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-cb { 0.000% { opacity: 0 } 58.750% { opacity: 0 } 59.750% { opacity: 1 } 63.000% { opacity: 1 } 64.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-cc { 0.000% { opacity: 0 } 74.500% { opacity: 0 } 75.500% { opacity: 1 } 84.000% { opacity: 1 } 85.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-on-sel { 0.000% { opacity: 1 } 5.250% { opacity: 1 } 5.650% { opacity: 0 } 17.700% { opacity: 0 } 18.100% { opacity: 1 } 21.250% { opacity: 1 } 21.650% { opacity: 0 } 23.850% { opacity: 0 } 24.250% { opacity: 1 } 100.000% { opacity: 1 } }
@keyframes mp-on-route { 0.000% { opacity: 0 } 4.850% { opacity: 0 } 5.250% { opacity: 1 } 18.100% { opacity: 1 } 18.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-on-pin { 0.000% { opacity: 0 } 20.850% { opacity: 0 } 21.250% { opacity: 1 } 24.250% { opacity: 1 } 24.650% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-d0 { 0.000% { opacity: 0 } 8.000% { opacity: 0 } 8.250% { opacity: 1 } 18.250% { opacity: 1 } 18.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-d1 { 0.000% { opacity: 0 } 11.000% { opacity: 0 } 11.250% { opacity: 1 } 18.250% { opacity: 1 } 18.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-d2 { 0.000% { opacity: 0 } 14.000% { opacity: 0 } 14.250% { opacity: 1 } 18.250% { opacity: 1 } 18.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-d3 { 0.000% { opacity: 0 } 17.000% { opacity: 0 } 17.250% { opacity: 1 } 18.250% { opacity: 1 } 18.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-s1 { 0.000% { opacity: 0 } 11.000% { opacity: 0 } 11.250% { opacity: 1 } 18.250% { opacity: 1 } 18.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-s2 { 0.000% { opacity: 0 } 14.000% { opacity: 0 } 14.250% { opacity: 1 } 18.250% { opacity: 1 } 18.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-s3 { 0.000% { opacity: 0 } 17.000% { opacity: 0 } 17.250% { opacity: 1 } 18.250% { opacity: 1 } 18.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-nr { 0.000% { opacity: 0 } 17.250% { opacity: 0 } 18.250% { opacity: 1 } 80.000% { opacity: 1 } 81.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-np0 { 0.000% { opacity: 0 } 24.100% { opacity: 0 } 24.500% { opacity: 1 } 31.500% { opacity: 1 } 31.900% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-np1 { 0.000% { opacity: 0 } 31.000% { opacity: 0 } 31.500% { opacity: 1 } 80.000% { opacity: 1 } 80.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-pick { 0.000% { opacity: 0 } 24.150% { opacity: 0 } 24.750% { opacity: 1 } 32.250% { opacity: 1 } 32.850% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-ph { 0.000% { opacity: 1 } 25.500% { opacity: 1 } 25.600% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-l1 { 0.000% { opacity: 1 } 28.600% { opacity: 1 } 28.850% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-l2 { 0.000% { opacity: 0 } 28.500% { opacity: 0 } 28.750% { opacity: 1 } 33.000% { opacity: 1 } 33.250% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes mp-type { 0.000% { max-width: 0 } 25.500% { max-width: 0 } 28.500% { max-width: 3.2ch } 32.500% { max-width: 3.2ch } 33.000% { max-width: 0 } 100.000% { max-width: 0 } }

/* Ask: ⌘K on a recap, a question, the answer with its sources. 12s a loop. */
.ak-win { margin-top: 40px; }
@media (min-width: 768px) { .ak-win { margin-top: 72px; } }
.ak-win { position: relative; height: 600px; display: flex; padding: 8px; border-radius: 22px; background: #FFFFFF; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.08); color: #262B27; }
.ak-side { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; padding: 14px 10px 10px; border-radius: 16px; background: #F6F6F3; border: 1px solid rgba(0,0,0,.06); }
.ak-lights { display: flex; gap: 8px; padding: 0 6px; }
.ak-lights span { width: 12px; height: 12px; border-radius: 6px; background: #D5DAD4; }
.ak-askfield { display: flex; align-items: center; gap: 7px; height: 30px; margin: 16px 2px 0; padding: 0 5px 0 9px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E6E1; font-size: 13px; color: #8A908B; animation: ak-field 12s ease-out infinite; }
.ak-askfield__t { flex-grow: 1; }
.ak-kbd { padding: 1px 5px; border-radius: 5px; box-shadow: 0 0 0 1px #DCE1DA; font-size: 10.5px; color: #6A706B; }
.ak-camp { padding: 18px 8px 14px; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.ak-nav { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; font-size: 13.5px; }
.ak-nav.is-on { background: #E4F5E8; font-weight: 500; }
.ak-nav--bottom { margin-top: auto; }
.ak-main { flex-grow: 1; min-width: 0; overflow: hidden; padding: 46px 48px 0 52px; }
.ak-doc { max-width: 620px; }
.ak-titlerow { display: flex; align-items: center; gap: 8px; }
.ak-title { flex-grow: 1; font-size: 30px; font-weight: 600; letter-spacing: -.015em; }
.ak-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: #EFF2EC; font-size: 12.5px; font-weight: 500; }
.ak-meta { margin-top: 6px; padding-bottom: 14px; border-bottom: 1px solid #E6EAE3; font-size: 12.5px; color: #646B66; }
.ak-h { margin-top: 22px; font-size: 18px; font-weight: 600; }
.ak-doc p { margin: 10px 0 0; font-size: 16px; line-height: 1.7; }
.ak-dim { position: absolute; inset: 0; z-index: 4; background: rgba(28,33,30,.2); opacity: 0; animation: ak-dim 12s ease-out infinite; }
.ak-panel { position: absolute; z-index: 5; left: 50%; top: 58px; width: 620px; margin-left: -310px; border-radius: 16px; background: #FFFFFF; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.08); opacity: 0; transform-origin: 50% 0; animation: ak-panel 12s ease-out infinite; }
.ak-in { display: flex; align-items: center; gap: 11px; height: 56px; padding: 0 16px 0 18px; font-size: 17px; color: #262B27; }
.ak-qwrap { flex-grow: 1; min-width: 0; display: flex; align-items: center; }
.ak-q { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; animation: ak-type 12s steps(27, end) infinite; }
.ak-caret { display: inline-block; width: 1.5px; height: 20px; margin-left: 1px; background: #262B27; animation: ak-blink 1s steps(1) infinite; }
.ak-esc { padding: 1px 6px; border-radius: 5px; box-shadow: 0 0 0 1px #DCE1DA; font-size: 11px; color: #6A706B; }
.ak-body { position: relative; max-height: 0; overflow: hidden; border-top: 1px solid #E6EAE3; animation: ak-body 12s ease-in-out infinite; }
.ak-work { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; font-size: 14px; color: #646B66; animation: ak-work 12s ease-out infinite; }
.ak-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #E3E8E1; border-top-color: #1A763F; animation: ak-spin .9s linear infinite; }
.ak-ans { opacity: 0; animation: ak-ans 12s ease-out infinite; }
.ak-a { margin: 0; padding: 16px 18px 0; font-size: 15.5px; line-height: 1.6; color: #262B27; }
.ak-from { margin: 14px 18px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: #838A84; }
.ak-src { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; margin: 0 18px; padding: 9px 0; border-top: 1px solid #EDF0EA; opacity: 0; }
.ak-src--1 { animation: ak-s1 12s ease-out infinite; }
.ak-src--2 { animation: ak-s2 12s ease-out infinite; }
.ak-src__i { width: 24px; height: 24px; border-radius: 12px; background: #F0F2EE; display: inline-flex; align-items: center; justify-content: center; }
.ak-src__t { font-size: 13px; color: #838A84; }
.ak-src__t b { font-weight: 600; color: #262B27; }
.ak-src__q { margin-top: 2px; font-size: 13px; line-height: 1.45; color: #646B66; }
.ak-foot { display: flex; gap: 18px; margin-top: 12px; padding: 10px 18px; background: #F7F8F5; border-top: 1px solid #EDF0EA; font-size: 12px; color: #838A84; }
.ak-keys { position: absolute; z-index: 8; left: 50%; bottom: 26px; display: flex; gap: 8px; padding: 10px; border-radius: 18px; transform: translateX(-50%); background: rgba(24,27,25,.84); box-shadow: 0 16px 40px rgba(0,0,0,.3); opacity: 0; }
.ak-keys--k { animation: ak-k 12s ease-out infinite; }
.ak-keys--r { animation: ak-r 12s ease-out infinite; }
.ak-key { min-width: 52px; height: 52px; padding: 0 12px; border-radius: 11px; background: rgba(255,255,255,.14); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); color: #FFFFFF; font-size: 24px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.ak-key--wide { min-width: 76px; }
@media (max-width: 767.98px) {
  .ak-win { height: 560px; padding: 0; border-radius: 18px; }
  .ak-side { display: none; }
  .ak-main { padding: 22px 16px 0; }
  .ak-title { font-size: 21px; }
  .ak-btn { display: none; }
  .ak-h { font-size: 15px; margin-top: 16px; }
  .ak-doc p { font-size: 14px; }
  .ak-panel { left: 8px; right: 8px; top: 16px; width: auto; margin-left: 0; border-radius: 14px; }
  .ak-in { height: 48px; padding: 0 12px; font-size: 14.5px; gap: 8px; }
  .ak-a { padding: 12px 12px 0; font-size: 13.5px; line-height: 1.55; }
  .ak-from { margin: 10px 12px 2px; }
  .ak-src { margin: 0 12px; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
  .ak-src__q { font-size: 12px; }
  .ak-foot { display: none; }
  .ak-keys { bottom: 18px; padding: 8px; border-radius: 15px; }
  .ak-key { min-width: 42px; height: 42px; font-size: 20px; }
  .ak-key--wide { min-width: 60px; }
}
@keyframes ak-field { 0%,9% { box-shadow: 0 0 0 1px #E3E6E1 } 10%,14% { box-shadow: 0 0 0 2px #1A763F } 18%,100% { box-shadow: 0 0 0 1px #E3E6E1 } }
@keyframes ak-k { 0%,8% { opacity: 0; transform: translateX(-50%) translateY(8px) } 9.5%,21% { opacity: 1; transform: translateX(-50%) } 24%,100% { opacity: 0; transform: translateX(-50%) } }
@keyframes ak-r { 0%,36% { opacity: 0; transform: translateX(-50%) translateY(8px) } 37.5%,45% { opacity: 1; transform: translateX(-50%) } 48%,100% { opacity: 0; transform: translateX(-50%) } }
@keyframes ak-dim { 0%,10% { opacity: 0 } 12.5%,92% { opacity: 1 } 96%,100% { opacity: 0 } }
@keyframes ak-panel { 0%,10.5% { opacity: 0; transform: scale(.97) translateY(-6px) } 12.5%,92% { opacity: 1; transform: none } 96%,100% { opacity: 0; transform: scale(.98) } }
@keyframes ak-type { 0%,14% { max-width: 0 } 35%,94% { max-width: 27ch } 96%,100% { max-width: 0 } }
@keyframes ak-blink { 0% { opacity: 1 } 50% { opacity: 0 } }
@keyframes ak-body { 0%,38% { max-height: 0 } 40.5%,52% { max-height: 54px } 58%,93% { max-height: 420px } 97%,100% { max-height: 0 } }
@keyframes ak-work { 0%,38% { opacity: 0 } 40.5%,52% { opacity: 1 } 54%,100% { opacity: 0 } }
@keyframes ak-ans { 0%,53% { opacity: 0 } 56%,93% { opacity: 1 } 97%,100% { opacity: 0 } }
@keyframes ak-s1 { 0%,58% { opacity: 0; transform: translateY(4px) } 61%,93% { opacity: 1; transform: none } 97%,100% { opacity: 0 } }
@keyframes ak-s2 { 0%,61% { opacity: 0; transform: translateY(4px) } 64%,93% { opacity: 1; transform: none } 97%,100% { opacity: 0 } }
@keyframes ak-spin { to { transform: rotate(360deg) } }

/* The campaign wiki: a laptop and an iPhone, each going through the sample's wiki in its own order. 16s a loop. */
.wk { position: relative; height: 560px; margin-top: 40px; }
.wk-laptop { position: absolute; left: 30px; top: 0; width: 780px; }
.wk-lid { padding: 12px; border-radius: 22px 22px 8px 8px; background: #1F2120; }
.wk-screen { border-radius: 10px 10px 3px 3px; overflow: hidden; background: #FFFFFF; }
.wk-bar { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 12px; background: #F2F3F0; border-bottom: 1px solid var(--line); }
.wk-dots { display: flex; gap: 6px; }
.wk-dots span { width: 9px; height: 9px; border-radius: 5px; background: #D5DAD4; }
.wk-url { display: inline-flex; align-items: center; gap: 6px; height: 20px; margin: 0 auto; padding: 0 14px; border-radius: 6px; background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--line); font-size: 11px; color: var(--ui-gray); transform: translateX(-30px); }
.wk-view { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; }
.wk-s { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.wk-base { height: 14px; margin: 0 -34px; border-radius: 0 0 16px 16px; background: #C9CCC8; box-shadow: inset 0 3px 0 #DEE0DD; }
.wk-phone { position: absolute; right: 40px; top: 70px; width: 236px; padding: 9px; border-radius: 42px; background: #1D201E;
  box-shadow: inset 0 0 0 1.5px #3B403C, 0 30px 70px rgba(0, 0, 0, .2); }
.wk-pscreen { position: relative; aspect-ratio: 390 / 844; border-radius: 33px; overflow: hidden; background: #FFFFFF; }
.wk-island { position: absolute; left: 50%; top: 9px; width: 68px; height: 20px; margin-left: -34px; border-radius: 10px; background: #000000; }
.wk-pscreen .wk-s { top: 30px; height: auto; }
.wk-s0 { animation: wk0 16s ease-in-out infinite; }
.wk-s1 { animation: wk1 16s ease-in-out infinite; }
.wk-s2 { animation: wk2 16s ease-in-out infinite; }
.wk-s3 { animation: wk3 16s ease-in-out infinite; }
.wk-pscreen .wk-s { animation-delay: -2s; }
/* An optional add-on, said the same way here and in the Pricing card */
.addon { text-align: center; font-size: 15.5px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.addon b { margin-right: 2px; font-weight: 600; color: var(--green-ink); }
.addon .i { display: inline-block; margin-right: 7px; vertical-align: -2px; }
.wk + .addon { margin: 26px 0 0; }
@media (max-width: 767.98px) {
  .wk { height: auto; aspect-ratio: 358 / 300; }
  .wk-laptop { left: 0; width: 84%; }
  .wk-lid { padding: 6px; border-radius: 12px 12px 5px 5px; }
  .wk-bar { height: 16px; gap: 6px; padding: 0 6px; }
  .wk-dots span { width: 5px; height: 5px; }
  .wk-url { height: 11px; padding: 0 6px; font-size: 6px; gap: 3px; border-radius: 3px; }
  .wk-url svg { display: none; }
  .wk-base { height: 7px; margin: 0 -14px; }
  .wk-phone { right: 0; top: 21.3%; width: 31.3%; padding: 5px; border-radius: 22px; }
  .wk-pscreen { border-radius: 18px; }
  .wk-island { top: 5px; width: 32px; height: 9px; margin-left: -16px; }
  .wk-pscreen .wk-s { top: 15px; }
  .wk + .addon { margin-top: 22px; }
}
@media (min-width: 768px) { .wk { margin-top: 72px; } .wk + .addon { margin-top: 34px; font-size: 16px; } }
@media (min-width: 768px) and (max-width: 949.98px) { .wk { zoom: .72; } }
@media (min-width: 950px) and (max-width: 1023.98px) { .wk { zoom: .85; } }
@keyframes wk0 { 0%,22% { opacity: 1 } 25%,97% { opacity: 0 } 100% { opacity: 1 } }
@keyframes wk1 { 0%,22% { opacity: 0 } 25%,47% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes wk2 { 0%,47% { opacity: 0 } 50%,72% { opacity: 1 } 75%,100% { opacity: 0 } }
@keyframes wk3 { 0%,72% { opacity: 0 } 75%,97% { opacity: 1 } 100% { opacity: 0 } }

/* Offscreen scenes are paused by script.js */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* Reduced motion: no animation; every scene shows a settled frame */
@media (prefers-reduced-motion: reduce) {
  .pmenu__panel, .pmenu__chev, .faq__icon { transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .flow__dot { display: none; }
  .flow__dot:first-child { display: block; left: calc(50% - 5px); }
  .flow__escape { display: none; }
  .rec__live { opacity: 0; }
  .dock__l2, .turn__b, .rec__dot { opacity: 0; }
  .dock__l1, .turn__a, .rec__mic-i { opacity: 1; }
  .rec__new { max-height: 0; }
  .nm-a, .nm-cur, .nm-menuwrap, .nm-dock2 { display: none; }
  .nm-b { opacity: 1; }
  .nm-r-choir .nm-pop-a { opacity: 0; }
  .nm-r-choir .nm-pop-b { opacity: 1; }
  .nm-r-choir .nm-name { color: #8D2D7D; }
  .ios-typing { display: none; }
  .rc-w { opacity: 1; }
  .rc-linked { max-width: none; }
  .rc-typed, .rc-caret, .rc-mention, .rc .rc-dock, .rb-gut, .rb-menu, .rb-pills, .rb-cur { display: none; }
  .rb-banner { height: 126px; opacity: 1; }
  .rb-img { top: -7.8%; }
  @media (min-width: 768px) { .rb-banner { height: 196px; } }
  .wstatus__busy, .toast, .cursor { opacity: 0; }
  .lx-in { max-height: none; opacity: 1; }
  .wk-s0 { opacity: 1; }
  .mp-cur, .mp-tap { display: none; }
  .mp-np1, .mp-draft .mp-nr, .mp-tool__on.mp-on-sel { opacity: 1; }
  .ak-dim, .ak-panel, .ak-ans, .ak-src { opacity: 1; }
  .ak-q { max-width: none; }
  .ak-caret { display: none; }
  .ak-body { max-height: none; }
  .ak-work { opacity: 0; }
}

/* FAQ: questions that open in place */
/* Any game: a card for each game it knows, and one for the rest. */
.games { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; }
.game { padding: 20px 22px; border-radius: 20px; background: var(--paper); }
.game__name { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.game__who { margin: 6px 0 0; font-size: 14px; color: var(--green-ink); }
.game__who b { font-weight: 600; }
.game__text { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
@media (min-width: 640px) { .games { grid-template-columns: 1fr 1fr; gap: 16px; } .game--any { grid-column: 1 / -1; } }
@media (min-width: 768px) { .games { margin-top: 72px; } }
@media (min-width: 1024px) { .games { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.section--paper .faq__item { border-color: #DCE0DA; }

.faq { margin-top: 40px; display: grid; gap: 28px; }
.faq__group + .faq__group { margin-top: 28px; }
.faq__label { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--green-ink); }
.faq__icon { flex-shrink: 0; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; transition: transform .18s ease; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p { margin: -4px 0 0; padding: 0 36px 18px 0; font-size: 17px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* The film, over the page */
.film { width: min(1120px, calc(100vw - 2 * var(--gutter))); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.film::backdrop { background: rgba(14, 22, 17, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film__frame { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0E1611; box-shadow: 0 30px 90px rgba(0, 0, 0, .45); }
.film__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0E1611; }
.film form { position: absolute; top: -52px; right: 0; margin: 0; }
.film__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .14); color: #FFFFFF; cursor: pointer; }
.film__close:hover { background: rgba(255, 255, 255, .24); }
.film__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.film[open] { animation: filmin .2s ease-out; }
@keyframes filmin { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Sharing on phones and tablets (below 1024) ----------
   The scene plays in one frame: the recap in a small Mac window, Share, Messages; the iPhone takes over as the PDF
   arrives; a tap opens the page. Same 15s clock as the desktop scene, retimed so each step has the frame to itself. */
@media (max-width: 1023.98px) {
  .stage { position: relative; display: block; width: 329px; height: 590px; margin: 0 auto; }
  .stage__mac { display: block; position: absolute; left: 0; top: 52px; width: 329px; animation: m8mac 22s ease-in-out infinite; }
  .macwin { width: 329px; height: 470px; border-radius: 14px; }
  .macwin__canvas { position: absolute; inset: 0; width: auto; height: auto; transform: none; }
  .macwin__screen { width: 100%; height: 100%; padding: 8px 8px 0; }
  .macwin .app { padding: 5px; border-radius: 12px; }
  .macwin .app-side { width: 38px; padding: 8px 3px; border-radius: 9px; align-items: center; gap: 2px; }
  .macwin .app-side__top, .macwin .app-side__title, .macwin .side-item__label, .macwin .side-ask__label, .macwin .side-ask__key { display: none; }
  .macwin .side-ask { height: auto; margin: 0 0 4px; padding: 7px; background: none; box-shadow: none; }
  .macwin .side-item { padding: 7px; }
  .app-main--share { padding: 18px 12px 0 14px; }
  .share-doc__status { height: 16px; gap: 5px; font-size: 11px; }
  .share-doc__titlerow { gap: 10px; }
  .macwin .doc-title { font-size: 18px; }
  .share-btn { height: 26px; padding: 0 9px; gap: 5px; font-size: 12px; }
  .macwin .doc { font-size: 13px; line-height: 1.6; }
  .macwin .doc p { margin-top: 7px; }
  .macwin .doc__h { font-size: 14.5px; }
  .macwin .doc__h--next { margin-top: 16px; }
  .menu { top: 86px; right: 17px; width: 212px; padding: 4px; border-radius: 9px; }
  .menu__item { height: 24px; padding: 0 8px; gap: 8px; font-size: 12.5px; }
  .menu__group { padding: 3px 8px; font-size: 11px; }
  .menu__sep { margin: 4px 8px; }
  .toast-wrap { left: 0; right: 0; top: auto; bottom: 26px; width: auto; }
  .toast { height: 34px; padding: 0 14px; gap: 7px; font-size: 12.5px; animation-name: m8toast; }
  .cursor { animation-name: m8cur; }
  .stage__phone { position: absolute; left: 33px; top: 28px; z-index: 3; opacity: 0; animation: m8phone 22s ease-in-out infinite; }
  .ios-typing { animation-name: m8typ; }
  .lx-in--pdf { animation-name: m8pdf; }
  .lx-in--aud { animation-name: m8aud; }
  .lx-file--pdf .lx-press { animation-name: m8ppress; }
  .lx-file--pdf .lx-tap { animation-name: m8ptap; }
  .lx-file--aud .lx-press { animation-name: m8apress; }
  .lx-file--aud .lx-tap { animation-name: m8atap; }
  .lx-ql { animation-name: m8ql; }
  .lx-ql__bar span { animation-name: m8bar; }
  .lx-tap--done { animation-name: m8done; }
  .stage__doc { display: block; position: absolute; left: 10px; top: 92px; z-index: 4; opacity: 0; animation: m8doc 22s ease-in-out infinite; }
  .stage__doc .pdf-sheet { width: 310.1px; height: 401.3px; }
  .stage__doc .pdf-scale--sheet { transform: scale(.38); }
  @media (prefers-reduced-motion: reduce) {
    .stage__mac, .stage__doc { display: none; }
    .stage__phone { opacity: 1; }
  }
}
@media (max-width: 767.98px) {
  .flow__dot:nth-child(n+2) { display: none; }
  .flow__dot { top: -2px; width: 6px; height: 6px; border-radius: 3px; }
}
@media (max-width: 392px) { .stage { zoom: .94; } }
@media (max-width: 374px) { .stage { zoom: .89; } }
@media (max-width: 359px) { .stage { zoom: .77; } }
@keyframes m8mac { 0.000% { opacity: 1; transform: none } 24.545% { opacity: 1; transform: none } 27.273% { opacity: 0; transform: translateX(-24px) scale(.97) } 93.636% { opacity: 0; transform: translateX(-24px) scale(.97) } 97.273% { opacity: 1; transform: none } 100.000% { opacity: 1; transform: none } }
@keyframes m8toast { 0.000% { opacity: 0; transform: translateY(10px) } 19.773% { opacity: 0; transform: translateY(10px) } 21.136% { opacity: 1; transform: none } 23.864% { opacity: 1; transform: none } 25.227% { opacity: 0; transform: none } 100.000% { opacity: 0; transform: none } }
@keyframes m8cur { 0.000% { transform: translate(150px, 380px) scale(0.80) } 2.727% { transform: translate(150px, 380px) scale(0.80) } 8.182% { transform: translate(264px, 71px) scale(0.80) } 8.864% { transform: translate(264px, 71px) scale(0.68) } 9.545% { transform: translate(264px, 71px) scale(0.80) } 10.227% { transform: translate(264px, 71px) scale(0.80) } 16.364% { transform: translate(196px, 231px) scale(0.80) } 18.091% { transform: translate(196px, 231px) scale(0.68) } 18.773% { transform: translate(196px, 231px) scale(0.80) } 19.773% { transform: translate(196px, 231px) scale(0.80) } 24.545% { transform: translate(150px, 380px) scale(0.80) } 100.000% { transform: translate(150px, 380px) scale(0.80) } }
@keyframes m8phone { 0.000% { opacity: 0; transform: translateX(36px) } 25.227% { opacity: 0; transform: translateX(36px) } 27.955% { opacity: 1; transform: none } 55.909% { opacity: 1; transform: none } 58.636% { opacity: 0; transform: scale(.96) } 100.000% { opacity: 0; transform: scale(.96) } }
@keyframes m8typ { 0.000% { max-height: 0; opacity: 0 } 28.636% { max-height: 0; opacity: 0 } 29.682% { max-height: 44px; opacity: 1 } 32.045% { max-height: 44px; opacity: 1 } 33.409% { max-height: 0; opacity: 0 } 100.000% { max-height: 0; opacity: 0 } }
@keyframes m8pdf { 0.000% { max-height: 0; opacity: 0; transform: translateY(12px) } 32.273% { max-height: 0; opacity: 0; transform: translateY(12px) } 33.864% { max-height: 120px; opacity: 1; transform: none } 92.727% { max-height: 120px; opacity: 1; transform: none } 93.182% { max-height: 0; opacity: 0 } 100.000% { max-height: 0; opacity: 0 } }
@keyframes m8aud { 0.000% { max-height: 0; opacity: 0; transform: translateY(12px) } 34.545% { max-height: 0; opacity: 0; transform: translateY(12px) } 36.136% { max-height: 120px; opacity: 1; transform: none } 92.727% { max-height: 120px; opacity: 1; transform: none } 93.182% { max-height: 0; opacity: 0 } 100.000% { max-height: 0; opacity: 0 } }
@keyframes m8apress { 0.000% { opacity: 0 } 38.409% { opacity: 0 } 38.636% { opacity: 1 } 40.000% { opacity: 1 } 41.364% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes m8atap { 0.000% { opacity: 0; transform: scale(.6) } 38.182% { opacity: 0; transform: scale(.6) } 38.636% { opacity: 1; transform: scale(1) } 40.227% { opacity: 0; transform: scale(1.35) } 100.000% { opacity: 0; transform: scale(1.35) } }
@keyframes m8ql { 0.000% { transform: translateY(102%) } 39.545% { transform: translateY(102%) } 41.364% { transform: none } 49.545% { transform: none } 51.364% { transform: translateY(102%) } 100.000% { transform: translateY(102%) } }
@keyframes m8bar { 0.000% { width: 0 } 41.364% { width: 0 } 49.545% { width: 9% } 51.364% { width: 9% } 51.818% { width: 0 } 100.000% { width: 0 } }
@keyframes m8done { 0.000% { opacity: 0; transform: scale(.6) } 48.409% { opacity: 0; transform: scale(.6) } 48.864% { opacity: 1; transform: scale(1) } 50.455% { opacity: 0; transform: scale(1.35) } 100.000% { opacity: 0; transform: scale(1.35) } }
@keyframes m8ppress { 0.000% { opacity: 0 } 53.409% { opacity: 0 } 53.636% { opacity: 1 } 55.000% { opacity: 1 } 56.364% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes m8ptap { 0.000% { opacity: 0; transform: scale(.6) } 53.182% { opacity: 0; transform: scale(.6) } 53.636% { opacity: 1; transform: scale(1) } 55.227% { opacity: 0; transform: scale(1.35) } 100.000% { opacity: 0; transform: scale(1.35) } }
@keyframes m8doc { 0.000% { opacity: 0; transform: translateY(40px) rotate(2.5deg) } 55.455% { opacity: 0; transform: translateY(40px) rotate(2.5deg) } 59.091% { opacity: 1; transform: rotate(2.5deg) } 90.000% { opacity: 1; transform: rotate(2.5deg) } 92.727% { opacity: 0; transform: rotate(2.5deg) } 93.636% { opacity: 0; transform: translateY(40px) rotate(2.5deg) } 100.000% { opacity: 0; transform: translateY(40px) rotate(2.5deg) } }

/* ---------- Tablet (768 and up) ---------- */
@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .site-header__in { min-height: 52px; flex-wrap: wrap; }
  .site-nav { display: flex; }
  .btn--nav { height: 28px; padding: 0 13px; font-size: 12.5px; }

  .hero { padding: 96px var(--gutter) 100px; }
  .hero__title { font-size: clamp(52px, 8.6vw, 112px); }
  .hero__sub { margin-top: 26px; font-size: clamp(19px, 2vw, 24px); }
  .cta-row { gap: 14px 28px; margin-top: 34px; }
  .price-note { margin-top: 14px; font-size: 15px; }
  .hero__caption { margin-top: 22px; font-size: 14px; }
  .price-note { line-height: 1.4; }
  .hero__caption, .panel__note, .entity__desc, .price-note--tight { line-height: normal; }
  .hero__sub, .price-note, .hero__caption, .price__terms { text-wrap: wrap; }

  /* the full laptop, 1160px wide, zoomed to fit */
  .hero-shot { margin: 72px -70px 0; display: flex; justify-content: center; overflow: hidden; padding: 0 40px 8px; }
  .laptop { width: 1160px; flex-shrink: 0; zoom: .58; }
  .laptop__lid { padding: 16px; border-radius: 30px 30px 10px 10px; }
  .laptop__screen { height: 660px; padding: 22px 26px 0; border-radius: 16px 16px 4px 4px; }
  .laptop__base { height: 16px; margin: 0 -40px; border-radius: 0 0 18px 18px; box-shadow: inset 0 3px 0 #DEE0DD; }
  .laptop__notch { width: 140px; height: 6px; margin-top: -16px; border-radius: 0 0 8px 8px; }
  .laptop .app { padding: 8px; border-radius: 22px; }
  .laptop .app-side { width: 240px; padding: 14px 10px 10px; border-radius: 16px; align-items: stretch; gap: 1px; }
  .laptop .app-side__top { display: flex; }
  .laptop .app-side__title { display: block; }
  .laptop .side-ask { height: 30px; margin: 14px 2px 0; padding: 0 5px 0 9px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E6E1; }
  .laptop .side-ask__label, .laptop .side-ask__key { display: inline; }
  .laptop .side-item__label { display: inline; }
  .laptop .side-item { padding: 7px 8px; }
  .writing { left: 48px; right: 56px; bottom: 214px; }
  .writing__doc { padding-bottom: 26px; }
  .laptop .doc-title { font-size: 30px; }
  .laptop .doc { font-size: 16px; line-height: 1.7; }
  .laptop .doc p { margin-top: 10px; }
  .laptop .doc__h { font-size: 18px; }
  .laptop .doc__h--next { margin-top: 26px; }

  .dock { left: 48px; right: 56px; bottom: 16px; padding: 14px 18px 12px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 12px 34px rgba(20, 30, 22, .14); }
  .track__s { height: 24px; font-size: 12.5px; }
  .track__sep { width: 14px; margin: 0 8px; }
  .dock .track__s.is-done .track__t { display: inline; }
  .dock__wave { height: 58px; margin-top: 18px; }
  .dw { gap: 2px; }
  .dw i { border-radius: 1.5px; }
  .dw i:nth-child(2n) { display: block; }
  .dock__cover { top: -6px; bottom: -6px; border-radius: 7px; }
  .dock__line { height: 20px; margin-top: 16px; font-size: 13px; line-height: 20px; }
  .dock__foot { height: 22px; margin-top: 6px; font-size: 12px; }
  .dock__cancel { font-size: 13px; }

  .section { padding: 120px var(--gutter) 130px; }
  .intro { gap: 24px 64px; }
  .eyebrow { font-size: 19px; }
  .display { font-size: clamp(44px, 6.6vw, 84px); }
  .lede { font-size: 20px; }
  .panel { margin-top: 72px; border-radius: 32px; padding: clamp(28px, 5vw, 64px); }
  .panel__note { font-size: 15px; }

  .price { margin-top: 72px; }
  .price__figures { gap: 18px; }
  .price__terms { font-size: 19px; }
  .price__refund-row { margin-top: 30px; }
  .refund { padding: 10px 22px; }
  .faq { margin-top: 64px; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
  .buy-c { margin-top: 40px; max-width: 720px; padding: 34px 40px 30px; }
  .buy-c__list { grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-bottom: 28px; }
  .buy-c__addon { margin: -8px 0 28px; padding-top: 18px; font-size: 16px; }

  .flow__mac { border-radius: 26px; padding: 34px 26px 30px; }
  .flow__tag { left: 24px; }
  .flow__mac { padding-left: 22px; padding-right: 22px; }
  .flow__step { gap: 10px; }
  .flow__dot { top: -4px; width: 10px; height: 10px; border-radius: 5px; }
  .flow__node { width: 68px; height: 68px; border-radius: 20px; }
  .flow__node svg { width: 30px; height: 30px; }
  .flow__label { font-size: 15px; }
  .flow__line { min-width: 18px; margin-top: -26px; }
  .cloud svg { width: 88px; height: 88px; }
  .cloud__x { right: 2px; bottom: 10px; }

  .rec { margin-top: 72px; border-radius: 28px; padding: 44px 48px 40px; }
  .rec__title { font-size: 30px; }
  .turn { margin-top: 20px; padding: 14px 16px; }
  .rec__panels { margin-top: 22px; }
  .rec__bar { margin-top: 26px; padding: 10px 12px 10px 18px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 34px rgba(20, 30, 22, .13); }
  .rec__bar .track__s:not(.is-on) .track__t { display: inline; }
  .rec__box { height: 150px; }
  .rec__live { padding: 18px 22px; }
  .rec__live-row { gap: 12px; }
  .rec__time { font-size: 26px; }
  .rec__mic { display: inline; }
  .rec__pause { width: 34px; height: 34px; border-radius: 17px; }
  .rec__stop { width: 44px; height: 44px; border-radius: 22px; box-shadow: 0 0 0 6px #FFE7E4; }
  .rec__drop { height: 150px; white-space: nowrap; }
  .rec__drop-title, .rec__drop-sub { width: auto; line-height: normal; }
  .rec__listhead { margin-top: 26px; }
  .file { grid-template-columns: 26px minmax(0, 1fr) 90px; gap: 12px; }
  .file__name { font-size: 16px; }
  .file__len { font-size: 15px; }

  .voices__wave { margin-top: 26px; }
  .lanes { margin-top: 26px; }
  .lane { grid-template-columns: 160px minmax(0, 1fr) 48px; gap: 16px; }



  .world { gap: 36px 44px; }
  .world__recap { font-size: 24px; }
  .world__rows { margin-top: 14px; }
  .entity { min-height: 540px; border-radius: 22px; padding: 26px 30px 16px; }
  .entity__name { font-size: 26px; }
  .entity__head { gap: 20px; }
  .entity__pic { width: 104px; height: 104px; border-radius: 20px; }
  .entity__label { margin-top: 22px; }
  .tl { padding-left: 32px; }
  .tl__dot { left: -31px; }
  .tl__line { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; }
  .tl__grow { animation-name: wgrow; }
  .tl__glow { margin: 0 -14px; padding: 0 14px; }

  .share { margin-top: 72px; border-radius: 32px; padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 40px); }

  .closer { padding: 150px var(--gutter) 160px; }
  .closer__title { margin-top: 28px; }
  .cta-row--closer { margin-top: 38px; }
  .price-note--dark { margin-top: 18px; }
  .price-note--tight { margin-top: 8px; }
  .site-footer { padding: 28px var(--gutter); }
  .site-footer__in { gap: 10px 24px; font-size: 12.5px; }
  .site-footer__in { min-height: 0; }
}

@media (min-width: 768px) and (max-width: 1023.98px) { .stage { zoom: 1.3; } }

/* ---------- Desktop (1024 and up) ---------- */
@media (min-width: 1024px) {
  .laptop { zoom: .78; }
  .section { padding: 140px var(--gutter) 150px; }
  .entity { min-height: 548px; }
  .flow__escape { left: auto; right: -8px; bottom: auto; top: 50%; margin: -5px 0 0; animation-name: escape; }

  /* the whole sharing scene: the Mac sends it, the iPhone receives it, the page opens */
  .stage { position: relative; display: block; width: 988px; height: 680px; margin: 0 auto; zoom: .9; }
  .stage__mac { display: block; position: absolute; left: 0; top: 73px; animation: s8mac 22s ease-in-out infinite; }
  .stage__phone { position: absolute; left: 726px; top: 73px; z-index: 3; zoom: 1; animation: s8phone 22s ease-in-out infinite; }
  .stage__doc { display: block; position: absolute; left: 412px; top: 13px; z-index: 2; opacity: 0; animation: s8doc 22s ease-in-out infinite; }
}
@media (min-width: 1152px) {
  .laptop { zoom: .9; }
  .stage { zoom: 1; }
}
@media (min-width: 1280px) {
  .laptop { zoom: 1; }
  .entity { min-height: 500px; }
}

/* Privacy: the campaign wiki under the flow, off until it's switched on. 12s a loop. Below 1024 the flow stacks with the
   cloud at the right, so the line from the Mac has the left to itself. */
.pw { position: relative; margin-top: 34px; }
.pw-card { position: relative; padding: 16px 16px 14px; border-radius: 16px; border: 2px dashed #C9CEC8; background: #FFFFFF; animation: pw-card 12s ease-in-out infinite; }
.pw-body { filter: grayscale(1); opacity: .5; animation: pw-body 12s ease-in-out infinite; }
.pw-h { display: flex; align-items: center; gap: 10px; padding-right: 56px; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.pw-sub { display: grid; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--green-ink); }
.pw-sub > span { grid-area: 1 / 1; }
.pw-sub__on { opacity: 0; animation: pw-subon 12s ease-in-out infinite; }
.pw-sub__off { animation: pw-suboff 12s ease-in-out infinite; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pw-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--mint-bg); font-size: 12px; font-weight: 500;
  color: var(--green-ink); }
.pw-switch { position: absolute; right: 16px; top: 16px; width: 40px; height: 24px; border-radius: 12px; background: #D3D9D2; animation: pw-sw 12s ease-in-out infinite; }
.pw-switch span { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  animation: pw-knob 12s ease-in-out infinite; }
.pw-drop { position: absolute; width: 0; margin-left: -1px; border-left: 2px dashed #C9CEC8; animation: pw-drop 12s ease-in-out infinite; }
.pw .pw-drop { display: none; left: 34%; bottom: 100%; height: 56px; }
.pw-drop--stacked { left: 22%; top: 100%; height: calc(26px + 92px + 34px + 2px); }
.pw-drop i { position: absolute; left: -6px; top: 0; width: 10px; height: 10px; border-radius: 5px; background: #1A763F; opacity: 0; animation: pw-dot 12s linear infinite; }
.pw-drop i:nth-child(2) { animation-name: pw-dot2; }
.pw-drop i:nth-child(3) { animation-name: pw-dot3; }
.pw-cur { display: none; position: absolute; z-index: 9; left: calc(100% - 140px); top: 170px; margin: -3px 0 0 -4px; transform-origin: 4px 3px; opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); animation: pw-cur 12s ease-in-out infinite; }
.pw-tap { position: absolute; z-index: 9; right: 16px; top: 16px; width: 40px; height: 40px; margin-top: -8px; border-radius: 50%; background: rgba(60, 60, 67, .3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); opacity: 0; pointer-events: none; animation: pw-tap 12s ease-out infinite; }
@media (max-width: 1023.98px) {
  .flow { row-gap: 26px; }
  .flow__cloud { flex: 0 0 58%; height: 92px; margin-left: 42%; justify-content: center; gap: 8px; }
  .cloud svg { width: 56px; height: 56px; }
  .cloud__x { right: 0; bottom: 4px; width: 22px; height: 22px; }
  .flow__label--muted { font-size: 13.5px; }
  .flow__escape { left: 71%; }
}
@media (min-width: 768px) {
  .pw-card { padding: 20px 22px 18px; border-radius: 20px; }
  .pw-h { font-size: 19px; padding-right: 60px; }
  .pw-sub { font-size: 14px; }
  .pw-chip { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13.5px; }
  .pw-switch { right: 22px; top: 21px; }
  .pw-tap { right: 22px; top: 21px; }
}
@media (min-width: 1024px) {
  .pw { margin-top: 56px; }
  .pw .pw-drop { display: block; }
  .pw-drop--stacked, .pw-tap { display: none; }
  .pw-cur { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-cur, .pw-tap { display: none !important; }
}
@keyframes pw-card { 0.000% { border-color: #C9CEC8; background: #FFFFFF; box-shadow: none } 25.833% { border-color: #C9CEC8; background: #FFFFFF; box-shadow: none } 27.917% { border-color: #1A763F; background: #EEF8F1; box-shadow: 0 0 0 5px rgba(26, 118, 63, .07) } 87.500% { border-color: #1A763F; background: #EEF8F1; box-shadow: 0 0 0 5px rgba(26, 118, 63, .07) } 89.583% { border-color: #C9CEC8; background: #FFFFFF; box-shadow: none } 100.000% { border-color: #C9CEC8; background: #FFFFFF; box-shadow: none } }
@keyframes pw-body { 0.000% { filter: grayscale(1); opacity: .5 } 25.833% { filter: grayscale(1); opacity: .5 } 27.917% { filter: none; opacity: 1 } 87.500% { filter: none; opacity: 1 } 89.583% { filter: grayscale(1); opacity: .5 } 100.000% { filter: grayscale(1); opacity: .5 } }
@keyframes pw-subon { 0.000% { opacity: 0 } 25.833% { opacity: 0 } 27.917% { opacity: 1 } 87.500% { opacity: 1 } 89.583% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes pw-suboff { 0.000% { opacity: 1 } 25.833% { opacity: 1 } 27.917% { opacity: 0 } 87.500% { opacity: 0 } 89.583% { opacity: 1 } 100.000% { opacity: 1 } }
@keyframes pw-sw { 0.000% { background: #D3D9D2 } 25.833% { background: #D3D9D2 } 27.500% { background: #1A763F } 87.500% { background: #1A763F } 89.167% { background: #D3D9D2 } 100.000% { background: #D3D9D2 } }
@keyframes pw-knob { 0.000% { transform: none } 25.833% { transform: none } 27.500% { transform: translateX(16px) } 87.500% { transform: translateX(16px) } 89.167% { transform: none } 100.000% { transform: none } }
@keyframes pw-drop { 0.000% { border-left-color: #C9CEC8 } 25.833% { border-left-color: #C9CEC8 } 27.917% { border-left-color: #7DBB8E } 87.500% { border-left-color: #7DBB8E } 89.583% { border-left-color: #C9CEC8 } 100.000% { border-left-color: #C9CEC8 } }
@keyframes pw-dot { 0.000% { top: 0; opacity: 0 } 28.333% { top: 0; opacity: 0 } 29.167% { top: 0; opacity: 1 } 40.000% { top: calc(100% - 10px); opacity: 1 } 40.833% { top: calc(100% - 10px); opacity: 0 } 43.333% { top: 0; opacity: 0 } 44.167% { top: 0; opacity: 1 } 55.000% { top: calc(100% - 10px); opacity: 1 } 55.833% { top: calc(100% - 10px); opacity: 0 } 58.333% { top: 0; opacity: 0 } 59.167% { top: 0; opacity: 1 } 70.000% { top: calc(100% - 10px); opacity: 1 } 70.833% { top: calc(100% - 10px); opacity: 0 } 73.333% { top: 0; opacity: 0 } 74.167% { top: 0; opacity: 1 } 85.000% { top: calc(100% - 10px); opacity: 1 } 85.833% { top: calc(100% - 10px); opacity: 0 } 100.000% { top: 0; opacity: 0 } }
@keyframes pw-dot2 { 0.000% { top: 0; opacity: 0 } 33.333% { top: 0; opacity: 0 } 34.167% { top: 0; opacity: 1 } 45.000% { top: calc(100% - 10px); opacity: 1 } 45.833% { top: calc(100% - 10px); opacity: 0 } 48.333% { top: 0; opacity: 0 } 49.167% { top: 0; opacity: 1 } 60.000% { top: calc(100% - 10px); opacity: 1 } 60.833% { top: calc(100% - 10px); opacity: 0 } 63.333% { top: 0; opacity: 0 } 64.167% { top: 0; opacity: 1 } 75.000% { top: calc(100% - 10px); opacity: 1 } 75.833% { top: calc(100% - 10px); opacity: 0 } 100.000% { top: 0; opacity: 0 } }
@keyframes pw-dot3 { 0.000% { top: 0; opacity: 0 } 38.333% { top: 0; opacity: 0 } 39.167% { top: 0; opacity: 1 } 50.000% { top: calc(100% - 10px); opacity: 1 } 50.833% { top: calc(100% - 10px); opacity: 0 } 53.333% { top: 0; opacity: 0 } 54.167% { top: 0; opacity: 1 } 65.000% { top: calc(100% - 10px); opacity: 1 } 65.833% { top: calc(100% - 10px); opacity: 0 } 68.333% { top: 0; opacity: 0 } 69.167% { top: 0; opacity: 1 } 80.000% { top: calc(100% - 10px); opacity: 1 } 80.833% { top: calc(100% - 10px); opacity: 0 } 100.000% { top: 0; opacity: 0 } }
@keyframes pw-cur { 0.000% { left: calc(100% - 140px); top: 170px; transform: none; opacity: 0 } 11.667% { left: calc(100% - 140px); top: 170px; transform: none; opacity: 0 } 14.167% { left: calc(100% - 140px); top: 170px; transform: none; opacity: 1 } 23.333% { left: calc(100% - 42px); top: 33px; transform: none; opacity: 1 } 25.417% { left: calc(100% - 42px); top: 33px; transform: scale(.82); opacity: 1 } 26.667% { left: calc(100% - 42px); top: 33px; transform: none; opacity: 1 } 36.667% { left: calc(100% - 140px); top: 150px; transform: none; opacity: 1 } 77.500% { left: calc(100% - 140px); top: 150px; transform: none; opacity: 1 } 85.000% { left: calc(100% - 42px); top: 33px; transform: none; opacity: 1 } 87.083% { left: calc(100% - 42px); top: 33px; transform: scale(.82); opacity: 1 } 88.333% { left: calc(100% - 42px); top: 33px; transform: none; opacity: 1 } 95.000% { left: calc(100% - 140px); top: 170px; transform: none; opacity: 1 } 97.500% { left: calc(100% - 140px); top: 170px; transform: none; opacity: 0 } 100.000% { left: calc(100% - 140px); top: 170px; transform: none; opacity: 0 } }
@keyframes pw-tap { 0.000% { opacity: 0; transform: scale(.6) } 25.000% { opacity: 0; transform: scale(.6) } 25.833% { opacity: 1; transform: none } 28.750% { opacity: 0; transform: scale(1.35) } 86.667% { opacity: 0; transform: scale(.6) } 87.500% { opacity: 1; transform: none } 90.417% { opacity: 0; transform: scale(1.35) } 100.000% { opacity: 0; transform: scale(1.35) } }

/* The recap on phones, like the desktop: room on the left for the picture button, and the pointer going to it */
@media (max-width: 767.98px) {
  .rc { padding-left: 46px; }
  .rb-hrow { padding-right: 0; }
  .rb-gut { right: auto; left: -38px; }
  .rb-menu { right: auto; left: -38px; transform-origin: 0 0; }
  .rb-cur { display: block; animation-name: rb-cur-p; }
}
@keyframes rb-cur-p { 0.000% { left: 88%; top: 530px; transform: scale(1); opacity: 0 } 45.000% { left: 88%; top: 530px; transform: scale(1); opacity: 0 } 45.938% { left: 88%; top: 530px; transform: scale(1); opacity: 1 } 48.437% { left: -24px; top: 44px; transform: scale(1); opacity: 1 } 48.750% { left: -24px; top: 44px; transform: scale(0.82); opacity: 1 } 49.219% { left: -24px; top: 44px; transform: scale(1); opacity: 1 } 51.562% { left: 30px; top: 132px; transform: scale(1); opacity: 1 } 51.938% { left: 30px; top: 132px; transform: scale(0.82); opacity: 1 } 52.406% { left: 30px; top: 132px; transform: scale(1); opacity: 1 } 55.000% { left: 30px; top: 132px; transform: scale(1); opacity: 1 } 58.125% { left: 50%; top: 100px; transform: scale(1); opacity: 1 } 60.313% { left: 50%; top: 100px; transform: scale(1); opacity: 1 } 60.625% { left: 50%; top: 100px; transform: scale(0.9); opacity: 1 } 65.625% { left: 50%; top: 126px; transform: scale(0.9); opacity: 1 } 65.938% { left: 50%; top: 126px; transform: scale(1); opacity: 1 } 67.500% { left: 50%; top: 126px; transform: scale(1); opacity: 1 } 70.625% { left: 88%; top: 530px; transform: scale(1); opacity: 1 } 73.438% { left: 88%; top: 530px; transform: scale(1); opacity: 1 } 99.000% { left: 88%; top: 530px; transform: scale(1); opacity: 1 } 99.800% { left: 88%; top: 530px; transform: scale(1); opacity: 0 } 100.000% { left: 88%; top: 530px; transform: scale(1); opacity: 0 } }

/* Record, round 3: the Mac records first (Record, a few seconds sped up, Stop, and it's in the list); then the laptop
   moves over and the iPhone app records too, and sends its recording across with one scan. Script steps through it
   (data-timeline), adding an at-STEP class for each step reached; what changes is here. */
#record .intro__head { flex-basis: 100%; }
#record .lede { max-width: 560px; }
.rxs { --kp: .44; --kl: .82; margin-top: 56px; }
.rxs__devices { position: relative; height: 524px; }
.rxs__phone { position: absolute; z-index: 2; left: calc((100% - 914px * var(--kl) - 417px * var(--kp)) / 2); bottom: 0; width: calc(417px * var(--kp)); height: calc(876px * var(--kp));
  opacity: 0; transform: translateX(-36px); transition: opacity .6s ease .35s, transform .9s cubic-bezier(.2, .8, .2, 1) .35s; }
.rxs__phone > .iph { zoom: var(--kp); }
.rxs.at-scoot .rxs__phone { opacity: 1; transform: none; }
.rxs__laptop { position: absolute; right: calc((100% - 914px * var(--kl)) / 2); bottom: 0; width: calc(914px * var(--kl)); transition: right 1s cubic-bezier(.45, .05, .2, 1); }
.rxs.at-scoot .rxs__laptop { right: 0; }
.rxs__laptop > .laptop { width: 900px; zoom: var(--kl); }
.rxs__cap { position: relative; height: 24px; margin: 26px 0 0; text-align: center; font-size: 16px; color: var(--muted); }
.rxs__cap span { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.rxs:not(.at-saved) .cap-mac, .rxs.at-saved:not(.at-scoot) .cap-saved, .rxs.at-scoot:not(.at-pdetail) .cap-phone, .rxs.at-pdetail:not(.at-picture) .cap-tap,
.rxs.at-picture:not(.at-send) .cap-scan, .rxs.at-send:not(.at-sent) .cap-send, .rxs.at-sent .cap-done { opacity: 1; }
.rxs__devices, .rxs__cap { transition: opacity .6s ease; }
.rxs.at-out .rxs__devices, .rxs.at-out .rxs__cap { opacity: 0; }
.rxs.is-reset, .rxs.is-reset * { transition: none !important; }
@keyframes rx-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.72); } }
@keyframes rx-touch { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes rx-press { 0%, 100% { transform: scale(1); } 40% { transform: scale(.82); } }
@keyframes rx-press2 { 0%, 100% { transform: scale(1); } 40% { transform: scale(.82); } }

/* The iPhone, at its own size (zoomed with the stage). */
.iph { width: 417px; height: 876px; padding: 12px; border-radius: 68px; background: #1C1E1D; box-shadow: inset 0 0 0 2px #3A3D3B, 0 30px 60px rgba(20, 30, 22, .22); }
.iph__screen { position: relative; width: 393px; height: 852px; border-radius: 56px; overflow: hidden; background: #FFFFFF; color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.iph__screen::before { content: ''; position: absolute; left: 50%; top: 11px; z-index: 5; width: 124px; height: 36px; margin-left: -62px; border-radius: 18px; background: #000000; }
.ps-status { position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 50px;
  font-size: 17px; font-weight: 600; color: #000000; transition: color .3s ease; }
.ps-status__r { display: inline-flex; align-items: center; gap: 6px; }
.ps-status__r i { display: inline-block; width: 3px; height: 4px; margin-right: -4px; border-radius: 1px; background: currentColor; }
.ps-status__r i:nth-child(2) { height: 6px; } .ps-status__r i:nth-child(3) { height: 8px; } .ps-status__r i:nth-child(4) { height: 10px; margin-right: 0; }
.ps-batt { position: relative; width: 25px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px currentColor; opacity: .9; }
.ps-batt b { position: absolute; inset: 2px 4px 2px 2px; border-radius: 2px; background: currentColor; }
.rxs.at-open:not(.at-out) .ps-status { color: #FFFFFF; }
.ps { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.ps-touch { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(0, 0, 0, .18); opacity: 0; transform: scale(.6); }
.ps-tab { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; border-top: .5px solid rgba(60, 60, 67, .22); display: flex; justify-content: center; padding-top: 10px; }
.ps-tab span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: #1A763F; }

/* Record: the mark, the name, the red button. */
.ps-ready { opacity: 1; }
.rxs.at-prec .ps-ready { opacity: 0; }
.ps-mark { position: absolute; left: 50%; top: 186px; margin-left: -30px; }
.ps-ready__name { position: absolute; left: 0; right: 0; top: 260px; text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -.4px; }
.ps-recbtn { position: absolute; left: 140px; top: 388px; width: 112px; height: 112px; border-radius: 50%; box-shadow: inset 0 0 0 5px #E2E5E0; display: flex; align-items: center; justify-content: center; }
.ps-recbtn i { width: 88px; height: 88px; border-radius: 50%; background: #D73431; transition: filter .15s ease; }
.ps-ready__t { position: absolute; left: 0; right: 0; top: 518px; text-align: center; font-size: 17px; font-weight: 500; }
.ps-ready__s { position: absolute; left: 0; right: 0; top: 545px; text-align: center; font-size: 14px; color: #8A8A8E; }
.rxs.at-ptap .ps-recbtn i { filter: brightness(.85); }
.rxs.at-ptap .ps-touch--rec { animation: rx-touch .8s ease-out both; }

/* Recording: the whole phone, the time racing (sped up), the level in red, Pause and Stop. */
.rxs.at-prec .ps-live { opacity: 1; }
.rxs.at-pdetail .ps-live { opacity: 0; }
.ps-live { display: flex; flex-direction: column; align-items: center; padding-top: 236px; }
.ps-live__state { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: #D73431; }
.ps-live__state i { width: 11px; height: 11px; border-radius: 50%; background: #D73431; animation: rx-breathe 1.6s ease-in-out infinite; }
.ps-live__time { margin-top: 6px; font-family: ui-monospace, 'SF Mono', 'Geist Mono', monospace; font-size: 48px; font-weight: 500; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.ps-live__bars { display: flex; align-items: center; gap: 3px; width: 345px; height: 64px; margin-top: 28px; }
.ps-live__bars i { flex: 1 1 0; height: var(--h); border-radius: 3px; background: #D73431; animation: lvl var(--d) ease-in-out var(--o) infinite alternate; }
.ps-live__note { margin: 28px 0 0; padding: 0 36px; text-align: center; font-size: 14px; line-height: 1.35; color: #8A8A8E; }
.ps-live__btns { position: absolute; left: 0; right: 0; bottom: 74px; display: flex; justify-content: center; gap: 56px; }
.ps-round { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: #8A8A8E; }
.ps-round__b { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: filter .15s ease; }
.ps-round__b--pause { background: #F1F3EF; }
.ps-round__b--stop { box-shadow: inset 0 0 0 4px #E2E5E0; }
.ps-round__b--stop i { width: 28px; height: 28px; border-radius: 6px; background: #D73431; }
.rxs.at-pstop .ps-round__b--stop { filter: brightness(.88); }
.rxs.at-pstop .ps-touch--stop { animation: rx-touch .8s ease-out both; }

/* The recording just made: Delete, the day, play, Send to Mac, Share. */
.rxs.at-pdetail .ps-detail { opacity: 1; }
.rxs.at-open .ps-detail { opacity: 0; }
.ps-detail { display: flex; flex-direction: column; align-items: center; }
.ps-delete { display: inline-flex; align-items: center; gap: 6px; margin-top: 66px; font-size: 13px; font-weight: 500; color: #8A8A8E; }
.ps-title { margin-top: 82px; text-align: center; }
.ps-title b { display: block; font-size: 34px; font-weight: 700; letter-spacing: -.5px; }
.ps-title span { display: block; margin-top: 3px; font-size: 15px; color: #8A8A8E; }
.ps-ring { position: relative; width: 150px; height: 150px; margin-top: 70px; border-radius: 50%; box-shadow: inset 0 0 0 6px #E2E5E0; }
.ps-ring::before { content: ''; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 3px; background: #1A763F; }
.ps-ring__play { position: absolute; inset: 20px; border-radius: 50%; background: #1A763F; display: flex; align-items: center; justify-content: center; padding-left: 5px; }
.ps-time { margin-top: 14px; font-family: ui-monospace, 'SF Mono', 'Geist Mono', monospace; font-size: 14px; color: #8A8A8E; }
.ps-send { display: flex; align-items: center; justify-content: center; gap: 10px; align-self: stretch; height: 52px; margin: 72px 24px 0; border-radius: 26px; background: #1A763F;
  color: #FFFFFF; font-size: 17px; font-weight: 600; transition: filter .15s ease, transform .15s ease; }
.ps-share { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-size: 15px; font-weight: 500; color: #1A763F; }
.rxs.at-tap .ps-send { filter: brightness(.82); transform: scale(.985); }
.rxs.at-tap .ps-touch--send { animation: rx-touch .8s ease-out both; }

/* The camera, finding the code; then the card going across. */
.ps-scan, .ps-send-screen { background: #000000; }
.rxs.at-open .ps-scan { opacity: 1; }
.rxs.at-send .ps-scan { opacity: 0; }
.rxs.at-send .ps-send-screen { opacity: 1; }
.ps-feed { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 45%, #3B3F3C 0%, #1D201E 55%, #0E0F0E 100%); }
.ps-photo { position: absolute; left: -40px; right: -40px; top: 230px; height: 380px; background: linear-gradient(180deg, #2E3330, #DCE0DA 30%, #E9ECE7 70%, #3A3E3B);
  filter: blur(.4px) saturate(.9); transform: rotate(-4deg) scale(1.15); opacity: 0; transition: opacity .7s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.rxs.at-picture .ps-photo { opacity: 1; transform: rotate(-2.5deg) scale(1); }
.ps-photo__card { position: absolute; left: 50%; top: 50%; width: 200px; height: 205px; margin: -103px 0 0 -100px; border-radius: 16px; background: #FFFFFF;
  box-shadow: 0 0 0 1px #DCE1DA; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #1D201E;
  font-family: 'Geist', system-ui, sans-serif; }
.ps-photo__card b { font-size: 15px; font-weight: 500; }
.ps-photo__card span { font-size: 12.5px; color: #8A908B; }
.ps-photo__qr { color: #1D201E; }
.ps-frame { position: absolute; left: 50%; top: 426px; width: 230px; height: 230px; margin: -115px 0 0 -115px; }
.ps-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #FFFFFF; transition: border-color .2s ease; }
.ps-frame i:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; border-radius: 6px 0 0 0; }
.ps-frame i:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; border-radius: 0 6px 0 0; }
.ps-frame i:nth-child(3) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 6px 0; }
.ps-frame i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 6px; }
.rxs.at-found .ps-frame i { border-color: #34C759; }
.ps-x { position: absolute; left: 16px; top: 62px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.ps-hint { position: absolute; left: 30px; right: 30px; top: 114px; text-align: center; color: #FFFFFF; }
.ps-hint b { display: block; font-size: 17px; font-weight: 500; }
.ps-hint span { display: block; margin-top: 6px; padding: 0 10px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .7); }
.ps-card { position: absolute; left: 12px; right: 12px; bottom: 46px; padding: 18px; border-radius: 20px; background: #FFFFFF; transform: translateY(30px); opacity: 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.rxs.at-send .ps-card { transform: none; opacity: 1; }
.ps-card__k { display: block; font-size: 13px; color: #8A8A8E; }
.ps-card__t { display: block; margin-top: 2px; font-size: 19px; font-weight: 600; }
.ps-card__s { margin-top: 2px; font-size: 14px; }
.ps-card__going { margin-top: 14px; }
.ps-prog { display: block; height: 4px; margin-bottom: 6px; border-radius: 2px; background: #E5E5EA; overflow: hidden; }
.ps-prog i, .rxm-line i { display: block; width: 0; height: 100%; border-radius: 2px; background: #1A763F; }
.rxs.at-send .ps-prog i, .rxs.at-send .rxm-line i { width: 100%; transition: width 3.2s cubic-bezier(.45, 0, .55, 1); }
.ps-card__done { display: none; }
.rxs.at-sent .ps-card__going { display: none; }
.rxs.at-sent .ps-card__done { display: block; }
.ps-sent { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 15px; font-weight: 500; color: #1A763F; }
.ps-done { display: flex; align-items: center; justify-content: center; height: 46px; margin-top: 14px; border-radius: 23px; background: #1A763F; color: #FFFFFF; font-size: 17px; font-weight: 500; }

/* The Mac: the recap's Record step, at the app's own size (zoomed with the stage). */
.rxs .laptop__screen { height: 590px; }
.rxs .app { padding: 5px; border-radius: 14px; }
.rxs .app-side { width: 40px; padding: 8px 3px; border-radius: 10px; align-items: center; gap: 2px; }
.rxs .side-ask { width: 30px; height: 30px; margin: 0 0 4px; padding: 0; justify-content: center; background: none; box-shadow: none; }
.rxs .side-item { padding: 7px; }
.rxm { position: relative; flex-grow: 1; min-width: 0; padding: 26px 34px 0; overflow: hidden;
  --x0: 560px; --y0: 430px; --x1: 147px; --y1: 228px; --x2: 694px; --y2: 223px; --x3: 560px; --y3: 470px; --row: 54px; }  /* the pointer's stops, measured (rxmeasure.py) */
.rxm-head { display: flex; align-items: baseline; gap: 14px; }
.rxm-title { font-size: 24px; font-weight: 600; letter-spacing: -.015em; color: var(--app-ink); }
.rxm-date { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.rxm-turns { display: grid; }
.rxm-turns > div { grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease; }
.rxm-turns b { display: block; font-size: 14.5px; font-weight: 600; color: #145C32; }
.rxs:not(.at-rec) .turn--empty, .rxs.at-rec:not(.at-stop) .turn--rec, .rxs.at-stop:not(.at-send) .turn--more, .rxs.at-send:not(.at-sent) .turn--get, .rxs.at-sent .turn--more { opacity: 1; }
.rxm-cards { position: relative; height: 136px; margin-top: 18px; container-type: inline-size; }
.rxm-three { position: absolute; inset: 0; display: flex; overflow: hidden; transition: opacity .4s ease; }
.rxm-card { min-width: 0; height: 136px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; overflow: hidden; }
.rxm-three > .rxm-card { flex: 0 0 calc((100% - 24px) / 3); transition: flex-basis .6s cubic-bezier(.4, 0, .2, 1), margin .6s cubic-bezier(.4, 0, .2, 1), opacity .4s ease; }
.rxm-three > .rxm-card + .rxm-card { margin-left: 12px; }
.rxs.at-rec:not(.at-stop) .rxm-rec { flex-basis: 100%; }
.rxs.at-rec:not(.at-stop) .rxm-drop, .rxs.at-rec:not(.at-stop) .rxm-phone { flex-basis: 0; margin-left: 0; opacity: 0; }
.rxm-rec, .rxm-phone, .rxm-getting { background: #FFFFFF; box-shadow: inset 0 0 0 1px #DCE1DA; }
.rxm-rec { position: relative; }
.rxm-drop { border: 1.5px dashed #C9CFC8; }
.rxm-card__t { font-size: 14.5px; font-weight: 500; color: var(--app-ink); white-space: nowrap; }
.rxm-card__t--soft { color: #5B605C; padding: 0 10px; white-space: normal; }
.rxm-drop .rxm-card__s { white-space: normal; }
.rxm-card__s { font-size: 12.5px; color: var(--faint); padding: 0 8px; white-space: nowrap; }
.rxm-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; transition: opacity .3s ease; }
.rxm-bigrec { width: 46px; height: 46px; border-radius: 50%; background: #D73431; box-shadow: inset 0 0 0 3px #FFEBE7, 0 0 0 1px #DCE1DA; transition: filter .15s ease; }
.rxs.at-click:not(.at-rec) .rxm-bigrec { filter: brightness(.82); }
.rxm-two { display: grid; }
.rxm-two > span { grid-area: 1 / 1; transition: opacity .3s ease; }
.rxm-two > span + span, .rxs.at-saved .rxm-two > span:first-child { opacity: 0; }
.rxs.at-saved .rxm-two > span + span { opacity: 1; }
.rxm-mic { display: inline-flex; align-items: center; gap: 5px; }
.rxm-live { position: absolute; left: 0; top: 0; bottom: 0; width: 100cqw; padding: 14px 16px 16px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; opacity: 0; transition: opacity .3s ease; }
.rxs.at-rec:not(.at-stop) .rxm-idle { opacity: 0; }
.rxs.at-rec:not(.at-stop) .rxm-live { opacity: 1; transition-delay: .25s; }
.rxm-live__row { display: flex; align-items: center; gap: 10px; }
.rxm-live__dot { width: 9px; height: 9px; border-radius: 50%; background: #D73431; flex-shrink: 0; animation: rx-breathe 1.6s ease-in-out infinite; }
.rxm-live__t b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1.2; color: var(--app-ink); font-variant-numeric: tabular-nums; }
.rxm-live__t span { display: block; margin-top: 1px; font-size: 12px; color: var(--faint); }
.rxm-pause { width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px #DCE1DA; display: inline-flex; align-items: center; justify-content: center; color: var(--app-ink); flex-shrink: 0; }
.rxm-stop { width: 44px; height: 44px; border-radius: 50%; background: #D73431; box-shadow: inset 0 0 0 3px #FFEBE7, 0 0 0 1px #DCE1DA; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: filter .15s ease; }
.rxm-stop i { width: 13px; height: 13px; border-radius: 3px; background: #FFFFFF; }
.rxs.at-stop:not(.at-saved) .rxm-stop { filter: brightness(.82); }
.rxm-level { display: flex; align-items: center; gap: 2px; height: 38px; overflow: hidden; }
.rxm-level i { flex: 0 0 3px; height: var(--h); border-radius: 1.5px; background: var(--green); animation: lvl var(--d) ease-in-out var(--o) infinite alternate; }
.rxm-phone { gap: 6px; transition: box-shadow .4s ease; }
.rxm-qr { color: var(--app-ink); margin-bottom: 2px; }
.rxs.at-open .rxm-phone { animation: rx-ring 1.6s ease-in-out 2; }
@keyframes rx-ring { 0%, 100% { box-shadow: inset 0 0 0 1px #DCE1DA, 0 0 0 0 rgba(26, 118, 63, 0); } 50% { box-shadow: inset 0 0 0 1.5px #1A763F, 0 0 0 6px rgba(26, 118, 63, .14); } }
.rxm-getting { position: absolute; inset: 0; padding: 18px 18px 20px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; text-align: left; opacity: 0; transition: opacity .4s ease; }
.rxs.at-send:not(.at-sent) .rxm-getting { opacity: 1; }
.rxs.at-send:not(.at-sent) .rxm-three { opacity: 0; }
.rxm-getting__row { display: flex; align-items: center; gap: 12px; text-align: left; }
.rxm-getting__ic { width: 34px; height: 34px; border-radius: 9px; background: #E2F6E6; color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rxm-getting__t { flex-grow: 1; min-width: 0; }
.rxm-getting__t b { display: block; font-size: 15px; font-weight: 500; color: var(--app-ink); }
.rxm-getting__t span { font-size: 12.5px; color: var(--faint); }
.rxm-getting__x { font-size: 13px; color: var(--muted); }
.rxm-line { display: block; height: 4px; border-radius: 2px; background: #E3E8E1; overflow: hidden; }
.rxm .rec__listhead { margin-top: 20px; }
.rxm .file { padding: 8px 4px; }
.rxm-new { height: 0; overflow: hidden; opacity: 0; transition: height .5s ease, opacity .5s ease .1s; }
.rxs.at-saved .rxm-new--mac, .rxs.at-sent .rxm-new--phone { height: var(--row, 52px); opacity: 1; }
.rxm-bar { position: absolute; left: 34px; right: 34px; bottom: 20px; margin: 0; }
.rxm-go { height: 30px; padding: 0 13px; border-radius: 8px; background: #E3E8E1; color: #FFFFFF; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; transition: background-color .4s ease; }
.rxs.at-saved .rxm-go { background: var(--green); }
.rxm-cur { position: absolute; z-index: 9; left: var(--x0); top: var(--y0); margin: -3px 0 0 -4px; transform-origin: 4px 3px; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  transition: left .85s cubic-bezier(.45, .05, .25, 1), top .85s cubic-bezier(.45, .05, .25, 1), opacity .3s ease; }
.rxs.at-aim .rxm-cur { opacity: 1; left: var(--x1); top: var(--y1); }
.rxs.at-click .rxm-cur { animation: rx-press .3s ease-out; }
.rxs.at-tostop .rxm-cur { left: var(--x2); top: var(--y2); }
.rxs.at-stop .rxm-cur { animation: rx-press2 .3s ease-out; }
.rxs.at-saved .rxm-cur { left: var(--x3); top: var(--y3); }
.rxs.at-scoot .rxm-cur { opacity: 0; }

@media (max-width: 1023.98px) { .rxs { --kp: .36; --kl: .66; } .rxs__devices { height: 424px; } }
@media (max-width: 767.98px) {
  .rxs { --kp: .25; --kl: .385; margin-top: 36px; }
  .rxs__devices { height: 456px; }
  .rxs__laptop, .rxs.at-scoot .rxs__laptop { top: 0; bottom: auto; right: calc((100% - 914px * var(--kl)) / 2); }
  .rxs__phone { left: calc(50% - 417px * var(--kp) / 2); transform: translateY(24px); }
  .rxs__cap { height: 44px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .rxs * { animation: none !important; transition: none !important; } }

/* Review, Oct 15: section subheads (accuracy's two panels), the free first recap under the pricing button, the footer. */
.subhead { margin: 64px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.subhead + .panel, .subhead + .nm { margin-top: 18px; }
#accuracy .nm { margin-top: 18px; }
.buy-c__try { margin: 12px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.buy-c__try a { color: var(--green-ink); }
.site-footer { padding: 56px var(--gutter) 28px; }
.site-footer__grid { display: grid; gap: 36px; }
.site-footer__name { display: inline-flex; align-items: center; gap: 9px; color: #FFFFFF; font-size: 18px; font-weight: 600; text-decoration: none; }
.site-footer__brand p { margin: 10px 0 0; max-width: 300px; font-size: 15px; line-height: 1.5; color: var(--forest-muted); }
.site-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 24px; }
.site-footer__nav h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.site-footer__nav a { display: block; padding: 5px 0; font-size: 15px; color: var(--forest-text); text-decoration: none; }
.site-footer__nav a:hover { color: #FFFFFF; }
.site-footer__base { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: var(--forest-muted); }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1.6fr; } }

/* The bubble menu's beat: select, Edit, ask, Rewriting…, rewritten (75%–100% of the recap's 32s loop). */
.rc-sel { position: relative; }
.rc-old, .rc-new { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.rc-old { max-width: 260px; background: linear-gradient(#CFE3FA, #CFE3FA) no-repeat 0 0 / 0% 100%; border-radius: 2px; animation: rbs-old 32s linear infinite; }
.rc-new { max-width: 0; border-radius: 3px; animation: rbs-new 32s ease-out infinite; }
.rc-bub { position: absolute; z-index: 6; left: -6px; bottom: calc(100% + 4px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; opacity: 0; pointer-events: none;
  font-family: var(--sans); line-height: 1.2; white-space: nowrap; animation: rbs-bub 32s ease-out infinite; }
.rc-bub__bar { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 11px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 12px rgba(20,31,23,.14); }
.bb { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 28px; height: 28px; border-radius: 7px; color: #262B27; font-size: 12.5px; font-weight: 500; }
.bb--l { padding: 0 8px; }
.bb--h { align-items: baseline; padding-top: 3px; font-size: 14px; font-weight: 600; }
.bb--h small { font-size: 9px; font-weight: 700; margin-left: .5px; }
.bb--on { color: var(--green); background: #E4F5E8; }
.bb--off { color: #C3C8C2; }
.bb--edit { animation: rbs-edit 32s linear infinite; }
.bb-dv { width: 1px; height: 18px; margin: 0 3px; background: #E3E6E1; }
.rc-bub__card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 340px; padding: 10px 10px 10px; border-radius: 11px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 14px rgba(20,31,23,.16); opacity: 0; animation: rbs-card 32s ease-out infinite; }
.rc-ask { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--green); animation: rbs-field 32s linear infinite; }
.rc-ask__text { position: relative; flex-grow: 1; min-width: 0; height: 18px; font-size: 13.5px; line-height: 18px; color: #262B27; }
.rc-ask__ph { position: absolute; left: 0; top: 0; color: #B4B9B3; animation: rbs-ph 32s linear infinite; }
.rc-ask__typed { display: inline-block; max-width: 0; overflow: hidden; vertical-align: top; animation: rbs-typed 32s linear infinite; }
.rc-ask__go { width: 24px; height: 24px; border-radius: 12px; background: #C9CFC8; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  animation: rbs-go 32s linear infinite; }
.rc-bub__note { font-size: 11.5px; color: #8A908B; animation: rbs-field 32s linear infinite; }
.rc-bub__busy { position: absolute; left: 10px; right: 10px; top: 10px; height: 30px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #646B66; opacity: 0;
  animation: rbs-busy 32s linear infinite; }
.rc-bub__busy u { margin-left: auto; font-size: 12.5px; text-decoration-color: rgba(110,110,110,.5); text-underline-offset: 2px; }
.rc-bub__spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #E3E8E1; border-top-color: var(--green); animation: sb-spin .9s linear infinite; }
@keyframes rbs-old { 0%, 77.5% { max-width: 260px; background-size: 0% 100% } 79.5%, 91.9% { max-width: 260px; background-size: 100% 100% } 92%, 99.9% { max-width: 0; background-size: 100% 100% } 100% { max-width: 260px; background-size: 0% 100% } }
@keyframes rbs-new { 0%, 92% { max-width: 0; background-color: rgba(26,118,63,0) } 93.5% { max-width: 460px; background-color: #E2F6E6 } 97.5% { max-width: 460px; background-color: rgba(226,246,230,0) } 99.9% { max-width: 460px } 100% { max-width: 0 } }
@keyframes rbs-bub { 0%, 80% { opacity: 0; transform: translateY(4px) } 80.7%, 91.8% { opacity: 1; transform: none } 92.4%, 100% { opacity: 0; transform: none } }
@keyframes rbs-edit { 0%, 82.5% { color: #262B27; background: transparent } 82.6%, 100% { color: var(--green); background: #E4F5E8 } }
@keyframes rbs-card { 0%, 82.6% { opacity: 0; transform: translateY(-4px) } 83.2%, 100% { opacity: 1; transform: none } }
@keyframes rbs-ph { 0%, 83.4% { opacity: 1 } 83.5%, 100% { opacity: 0 } }
@keyframes rbs-typed { 0%, 83.4% { max-width: 0; animation-timing-function: steps(21, end) } 87.2%, 99.9% { max-width: 170px } 100% { max-width: 0 } }
@keyframes rbs-go { 0%, 83.6% { background: #C9CFC8 } 83.7%, 100% { background: var(--green) } }
@keyframes rbs-field { 0%, 88.4% { opacity: 1 } 88.5%, 99.9% { opacity: 0 } 100% { opacity: 1 } }
@keyframes rbs-busy { 0%, 88.4% { opacity: 0 } 88.5%, 91.9% { opacity: 1 } 92%, 100% { opacity: 0 } }
@media (max-width: 767.98px) { .rc-bub { zoom: .8; left: -40px; } .rc-old { max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { .rc-bub { display: none; } }

/* The hero, round 2: the whole story, steps on a 45s timeline (data-timeline, at-STEP classes), the Mac's scenes borrowed
   from the sections below and restarted by script as each comes up. Everything is drawn at the laptop's own size (1160
   wide) inside .hx__devices, which is zoomed to fit. */
.hx .hero-shot { display: flex; justify-content: center; margin: 40px -6px 0; padding: 0 0 8px; overflow: hidden; }
.hx__devices { position: relative; flex-shrink: 0; width: 1160px; height: 716px; zoom: var(--hz, .29); }
@media (min-width: 400px) { .hx__devices { --hz: .33; } }
@media (min-width: 520px) { .hx__devices { --hz: .42; } }
@media (min-width: 640px) { .hx__devices { --hz: .52; } }
@media (min-width: 768px) { .hx .hero-shot { margin: 72px -70px 0; padding: 0 40px 8px; } .hx__devices { --hz: .58; } }
@media (min-width: 1024px) { .hx__devices { --hz: .78; } }
@media (min-width: 1152px) { .hx__devices { --hz: .9; } }
@media (min-width: 1280px) { .hx__devices { --hz: 1; } }
.hx .laptop { width: 1160px; zoom: 1; }
.hx .laptop__lid { padding: 16px; border-radius: 30px 30px 10px 10px; }
.hx .laptop__screen { height: 660px; padding: 22px 26px 0; border-radius: 16px 16px 4px 4px; }
.hx .laptop__base { height: 16px; margin: 0 -40px; border-radius: 0 0 18px 18px; box-shadow: inset 0 3px 0 #DEE0DD; }
.hx .laptop__notch { width: 140px; height: 6px; margin-top: -16px; border-radius: 0 0 8px 8px; }
.hx .app { padding: 8px; border-radius: 22px; }
.hx .app-side { width: 40px; padding: 8px 3px; border-radius: 10px; align-items: center; gap: 2px; }
.hx .side-ask { width: 30px; height: 30px; margin: 0 0 4px; padding: 0; justify-content: center; background: none; box-shadow: none; }
.hx .side-item { padding: 7px; transition: background-color .4s ease; }
.hx:not(.at-world) .hx-si-r, .hx.at-world:not(.at-publish) .hx-si-c, .hx.at-publish .hx-si-g { background: #E4F5E8; }

/* Where the two are. Alone in the middle, the phone records; it slides left as the Mac comes in, smaller, on the right.
   The Mac alone, full size, for its four scenes; then smaller again as the phone comes back with the wiki. */
.hx__laptop { position: absolute; left: 0; bottom: 0; width: 1160px; opacity: 0; transform: translateX(80px) scale(.78); transform-origin: 100% 100%;
  transition: opacity .7s ease, transform 1s cubic-bezier(.45, .05, .2, 1); }
.hx.at-slide .hx__laptop { opacity: 1; transform: scale(.78); }
.hx.at-identify .hx__laptop { transform: none; }
.hx.at-read .hx__laptop { transform: scale(.78); }
.hx__phone { position: absolute; z-index: 2; left: 463px; bottom: 113px; width: 234px; height: 491px; transition: left 1s cubic-bezier(.45, .05, .2, 1), bottom 1s cubic-bezier(.45, .05, .2, 1), opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.hx__phone > .iph { zoom: .56; }
.hx.at-slide .hx__phone { left: 14px; bottom: 0; }
.hx.at-identify .hx__phone { opacity: 0; transform: translateX(-70px); }
.hx.at-read .hx__phone { opacity: 1; transform: none; }
.hx__devices, .hx__cap { transition: opacity .6s ease; }
.hx.at-out .hx__devices, .hx.at-out .hx__cap { opacity: 0; }
.hx.is-reset, .hx.is-reset * { transition: none !important; }
.hx__cap { position: relative; height: 22px; }
.hx__cap span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity .5s ease; }
.hx:not(.at-slide) .c1, .hx.at-slide:not(.at-identify) .c2, .hx.at-identify:not(.at-catalog) .c3, .hx.at-catalog:not(.at-write) .c4,
.hx.at-write:not(.at-world) .c5, .hx.at-world:not(.at-publish) .c6, .hx.at-publish:not(.at-read) .c7, .hx.at-read .c8 { opacity: 1; }
@media (max-width: 767.98px) { .hx__cap { height: 42px; } }

/* The phone: recording (sped up), Stop, the recording, Send to Mac; the camera on the code and the card going across;
   later, the players' wiki. */
.hx:not(.at-detail) .ps-live { opacity: 1; }
.hx.at-stop .ps-round__b--stop { filter: brightness(.88); }
.hx.at-stop .ps-touch--stop { animation: rx-touch .8s ease-out both; }
.hx.at-detail:not(.at-send) .ps-detail { opacity: 1; }
.hx.at-tap .ps-send { filter: brightness(.82); transform: scale(.985); }
.hx.at-tap .ps-touch--send { animation: rx-touch .8s ease-out both; }
.hx.at-send .ps-scan, .hx.at-send .ps-send-screen { opacity: 1; }
.hx .ps-send-screen { background: transparent; }
.hx .ps-send-screen .ps-x { display: none; }
.hx.at-send .ps-photo { opacity: 1; transform: rotate(-2.5deg) scale(1); }
.hx.at-send .ps-frame i { border-color: #34C759; }
.hx.at-send:not(.at-read) .ps-status { color: #FFFFFF; }
.hx.at-send .ps-card { transform: none; opacity: 1; }
.hx.at-send .ps-prog i, .hx.at-send .rxm-line i { width: 100%; transition: width 3.4s cubic-bezier(.45, 0, .55, 1); }
.hx.at-sent .ps-card__going { display: none; }
.hx.at-sent .ps-card__done { display: block; }
.hx.at-identify .ps-scan, .hx.at-identify .ps-send-screen { opacity: 0; }
.hx.at-identify .ps-wiki { opacity: 1; }

.ps-wiki { background: #FFFFFF; color: #262B27; }
.hx.at-identify .ps-status { background: rgba(255, 255, 255, .96); }
.wq-scroll { position: absolute; left: 0; right: 0; top: 54px; padding: 8px 18px 0; transition: transform 2.6s cubic-bezier(.45, .05, .35, 1); }
.hx.at-scroll .wq-scroll { transform: translateY(-190px); }
.wq-back { display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 6px -2px; font-size: 13.5px; color: #1A763F; }
.wq-h1 { margin: 2px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }
.wq-tools { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.wq-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; background: #EFF2EC; font-size: 13px; font-weight: 500; }
.wq-sub { margin-left: 4px; font-size: 13px; color: #838A84; white-space: nowrap; }
.wq-rule { height: 1px; margin-top: 16px; background: #E6EAE3; }
.wq-h2 { margin: 30px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; }
.wq-banner { aspect-ratio: 640 / 250; margin: 4px 0 16px; border-radius: 12px; overflow: hidden; background: #EFF2EC; }
.wq-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wq-scroll p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: #2A2F2B; }
.wq-e { font-weight: 600; color: var(--k); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wq-c { --k: #2A61B1; } .wq-l { --k: #A8471B; } .wq-i { --k: #976B03; } .wq-f { --k: #8D2D7D; }
.wq-player { position: absolute; left: 10px; right: 10px; bottom: 44px; height: 54px; border-radius: 14px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 6px 18px rgba(0, 0, 0, .14); display: flex; align-items: center; gap: 10px; padding: 0 12px;
  transform: translateY(130px); transition: transform .5s cubic-bezier(.2, .8, .2, 1) .25s; }
.hx.at-listen .wq-player { transform: none; }
.hx.at-listen .ps-touch--listen { animation: rx-touch .8s ease-out both; }
.wq-pp { width: 32px; height: 32px; border-radius: 16px; background: #1A763F; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wq-what { flex: 1; min-width: 0; }
.wq-what b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.wq-bar { position: relative; display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: #EFF2EC; }
.wq-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #1A763F; }
.hx.at-listen .wq-bar i { width: 20.6%; transition: width 3.6s linear; }
.wq-time { font-size: 12px; color: #646B66; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wq-speed { font-size: 12.5px; font-weight: 600; color: #646B66; }
.wq-x { display: inline-flex; color: #838A84; }

/* The Mac's scenes, one at a time. */
.hx-main { position: relative; flex-grow: 1; min-width: 0; overflow: hidden; }
.hx-sc { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.hx:not(.at-identify) .sc-rec, .hx.at-identify:not(.at-catalog) .sc-id, .hx.at-catalog:not(.at-write) .sc-cat, .hx.at-write:not(.at-world) .sc-write,
.hx.at-world:not(.at-publish) .sc-world, .hx.at-publish .sc-set { opacity: 1; }

/* The recap's Record step: the code, then the recording coming in from the phone. */
.hx .rxm { height: 100%; padding: 34px 48px 0; }
.hx .rxm-bar { left: 48px; right: 48px; bottom: 24px; }
.hx:not(.at-send) .turn--empty, .hx.at-send:not(.at-sent) .turn--get, .hx.at-sent .turn--more { opacity: 1; }
.hx.at-slide:not(.at-send) .rxm-phone { animation: rx-ring 1.4s ease-in-out .5s 1; }
.hx.at-send:not(.at-sent) .rxm-getting { opacity: 1; }
.hx.at-send:not(.at-sent) .rxm-three { opacity: 0; }
.hx.at-sent .rxm-new--phone { height: var(--row, 54px); opacity: 1; }
.hx.at-sent .rxm-go { background: var(--green); }
.hx.at-sent .rxm-two > span:first-child { opacity: 0; }
.hx.at-sent .rxm-two > span + span { opacity: 1; }

/* Who's talking: the Accuracy section's voices, on the recap's page, with the step dock. */
.hx-page { position: absolute; inset: 0; padding: 34px 48px 0; }
.hx .voices { margin: 20px 0 0; padding: 24px 28px 18px; border-radius: 16px; }
.hx .voices .lane { padding: 9px 0; }
.hx .voices .lanes { margin-top: 16px; }
.hx-dock { position: absolute; left: 48px; right: 48px; bottom: 22px; }
/* Every name, before it writes; the recap; the world: the sections' own pictures, filling the page. */
.hx .nm, .hx .rc { height: 100%; margin: 0; border-radius: 0; box-shadow: none; }
/* The names: only the transcript lighting up as it catalogs (Oct 16); the check that follows stays in its own section. */
.hx .nm-a { animation: none !important; opacity: 1 !important; }
.hx .nm-b, .hx .nm-bar, .hx .nm-dock2, .hx .nm-cur { display: none !important; }
.hx .rc { padding-top: 40px; }
.hx-world { height: 100%; margin: 0; padding: 52px 64px; background: #FFFFFF; border-radius: 0; }

/* Settings: the campaign wiki, switched on. */
.hx-set { position: absolute; inset: 0; overflow: hidden; }
.hx-set__col { width: 680px; margin: 0 auto; padding-top: 48px; color: var(--app-ink); }
.hx-set__k { font-size: 13px; color: #646B66; }
.hx-set__name { margin-top: 6px; font-size: 30px; font-weight: 600; letter-spacing: -.4px; }
.hx-set__n { margin-top: 6px; font-size: 14px; color: #838A84; }
.hx-colors { display: flex; align-items: center; margin-top: 22px; font-size: 14px; color: #646B66; }
.hx-colors > span:first-child { width: 136px; }
.hx-sw7 { display: flex; gap: 8px; }
.hx-sw7 i { width: 22px; height: 22px; border-radius: 50%; padding: 3px; background: var(--c); background-clip: content-box; }
.hx-sw7 i.is-on { box-shadow: inset 0 0 0 2px var(--c); }
.hx-sec { margin-top: 32px; }
.hx-sec > b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.2px; }
.hx-sec > p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: #646B66; }
.hx-rows { margin-top: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px #E3E6E1; overflow: hidden; }
.hx-row { display: flex; align-items: center; gap: 16px; min-height: 50px; padding: 8px 16px; border-bottom: 1px solid #EFEFEF; }
.hx-row:last-child { border-bottom: 0; }
.hx-row > div { flex: 1; min-width: 0; }
.hx-row > div span { display: block; font-size: 14px; }
.hx-row > div small { display: block; margin-top: 1px; font-size: 12.5px; color: #838A84; }
.hx-row--link { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s ease, padding .45s ease, opacity .35s ease .1s; }
.hx.at-flip .hx-row--link { max-height: 60px; min-height: 50px; padding-top: 8px; padding-bottom: 8px; border-bottom-width: 1px; opacity: 1; }
.hx-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: 11px; background: #E3E3E3; transition: background-color .25s ease; }
.hx-switch i { position: absolute; left: 1px; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .06); transition: transform .25s ease; }
.hx.at-flip .hx-switch { background: #1A763F; }
.hx.at-flip .hx-switch i { transform: translateX(16px); }
.hx-link { max-width: 260px; height: 26px; padding: 0 9px; border-radius: 7px; background: #EFF2EC; font-size: 12.5px; line-height: 26px; color: #646B66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-btn { height: 26px; padding: 0 11px; border-radius: 7px; background: #FFFFFF; box-shadow: 0 0 0 1px #DCE1DA, 0 1px 1px rgba(0, 0, 0, .04); font-size: 13px; line-height: 26px; white-space: nowrap; }
.hx-pop { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 9px 0 11px; border-radius: 7px; background: #FFFFFF; box-shadow: 0 0 0 1px #DCE1DA, 0 1px 1px rgba(0, 0, 0, .04); font-size: 13px; color: var(--app-ink); }
.hx-cur { position: absolute; z-index: 9; left: 700px; top: 590px; margin: -3px 0 0 -4px; transform-origin: 4px 3px; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  transition: left .85s cubic-bezier(.45, .05, .25, 1), top .85s cubic-bezier(.45, .05, .25, 1), opacity .3s ease; }
.hx.at-aimsw .hx-cur { opacity: 1; left: 818px; top: 457px; }  /* the switch, measured */
.hx.at-read .hx-cur { opacity: 0; }
.hx.at-flip .hx-cur { animation: rx-press .3s ease-out; }

@media (prefers-reduced-motion: reduce) { .hx * { animation: none !important; transition: none !important; } }

/* The legal pages (Privacy, Terms, Refunds): one readable column under a slim header, and the site's footer. Anything
   still to be decided is a highlighted [placeholder]. */
.legal-head { padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: #FFFFFF; }
.legal-head .wrap { min-height: 60px; display: flex; align-items: center; }
.legal { max-width: 680px; margin: 0 auto; padding: 64px var(--gutter) 96px; }
.legal h1 { margin-top: 10px; }
.legal__date { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.legal__lead { margin: 28px 0 0; font-size: 19px; line-height: 1.6; color: var(--ink); }
.legal__body h2 { margin: 44px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.legal__body p, .legal__body li { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.legal__body p { margin: 12px 0 0; }
.legal__body ul { margin: 12px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.legal__body li b { color: var(--app-ink); font-weight: 600; }
.legal a { color: var(--green-ink); text-decoration-color: rgba(26, 118, 63, .4); text-underline-offset: 2px; }
.ph { padding: 0 4px; border-radius: 4px; background: #FFEDE5; color: #A8471B; font-weight: 500; }
@media (min-width: 768px) { .legal { padding-top: 96px; } }