/* Loop site. The look settled on 6 October 2026 (prototypes/loop-aesthetic-2026-10-06, 1z2):
   a white page, Google Sans, thin two-tone headings, one spacing scale, and the Download for Mac
   button that becomes the floating nav. Colours follow the Mac app: graphite and grey, with Loop
   blue for the moments that matter. */
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/google-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@property --bg-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes bgRing { to { --bg-ang: 360deg; } }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --ground: #FFFFFF;
  --card: #FFFFFF;
  --well: #EEF0F4;
  --ink1: #0F1115;
  --ink-strong: #3A3E47;
  --ink2: #686D78;
  --ink3: #6D7179;   /* small grey text: 4.9:1 on white, 4.6:1 on the panels (WCAG AA, 2026-10-15) */
  --ink4: #A4A9B3;
  --ink: var(--ink1);
  --paper: var(--ground);
  --hairline: rgba(17, 22, 32, .08);
  --ring: rgba(17, 22, 32, .07);
  --blue: #4B7BE3;
  --blue-hover: #3F6FD8;
  --on-blue: #FFFFFF;
  /* Blue behind white text, a step deeper than --blue so the words pass AA (4.7:1) */
  --btn-blue: #3F6FD8; --btn-blue-hover: #3666D0;
  --accent-strong: #3B62B8;
  --accent: #4B7BE3;
  --accent-text: #426DC8;
  --solid: #0F1115;
  --solid-hover: #2A2D34;
  --on-solid: #FFFFFF;
  --quiet: rgba(17, 22, 32, .05);
  --quiet-hover: rgba(17, 22, 32, .08);
  --track: rgba(17, 22, 32, .055);
  --nav-glass: rgba(255, 255, 255, .84);
  --grain: #1B2130;
  --frame-a: #F4F6F9;
  --frame-b: #E7EBF1;
  --frame-glow: rgba(255, 255, 255, .9);
  --shadow-frame: 0 0 0 1px rgba(17, 22, 32, .05), 0 1px 2px rgba(17, 22, 32, .04), 0 12px 28px -6px rgba(17, 22, 32, .07), 0 44px 88px -28px rgba(17, 22, 32, .16);
  --shadow-card: 0 0 0 1px rgba(17, 22, 32, .055), 0 1px 2px rgba(17, 22, 32, .03), 0 10px 30px -12px rgba(17, 22, 32, .08);
  --shadow-lift: 0 0 0 1px rgba(17, 22, 32, .06), 0 2px 4px rgba(17, 22, 32, .04), 0 24px 56px -18px rgba(17, 22, 32, .16);
  --font-body: "Google Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  /* One spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --gutter: 32px;
  --wide: 1000px;
  --wrap: calc(var(--wide) + var(--gutter) * 2);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fast: 250ms;
  --quick: 150ms;
  /* transitions.dev tokens */
  --tabs-dur: 250ms; --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: var(--ink2); --tabs-text-active: var(--ink1);
  --tabs-bar-bg: rgba(17, 22, 32, .055); --tabs-pill-bg: #FFFFFF;
  --panel-open-dur: 400ms; --panel-close-dur: 350ms; --panel-translate-y: 12px; --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --acc-expand: 250ms; --acc-collapse: 250ms; --acc-chevron: 250ms; --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0B0C0F; --card: #14161B; --well: #1A1D23;
  --ink1: #F3F4F6; --ink-strong: #C9CCD3; --ink2: #9DA2AC; --ink3: #808590; --ink4: #4E535D;
  --hairline: rgba(255, 255, 255, .10); --ring: rgba(255, 255, 255, .08);
  --blue: #86A9F2; --blue-hover: #9AB8F5; --on-blue: #141317; --accent: #86A9F2; --accent-text: #86A9F2; --btn-blue: #86A9F2; --btn-blue-hover: #9AB8F5; --accent-strong: #86A9F2;
  --solid: #F3F4F6; --solid-hover: #FFFFFF; --on-solid: #0F1115;
  --quiet: rgba(255, 255, 255, .06); --quiet-hover: rgba(255, 255, 255, .1); --track: rgba(255, 255, 255, .07);
  --nav-glass: rgba(22, 24, 29, .82);
  --grain: #C9D2E4; --frame-a: #191C22; --frame-b: #111318; --frame-glow: rgba(134, 169, 242, .08);
  --shadow-frame: 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -20px rgba(0, 0, 0, .7), 0 60px 120px -40px rgba(0, 0, 0, .6);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 0 rgba(255, 255, 255, .035) inset, 0 16px 40px -18px rgba(0, 0, 0, .6);
  --shadow-lift: 0 0 0 1px rgba(255, 255, 255, .1), 0 1px 0 0 rgba(255, 255, 255, .05) inset, 0 30px 70px -24px rgba(0, 0, 0, .8);
  --tabs-bar-bg: rgba(255, 255, 255, .07); --tabs-pill-bg: #2A2D34;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0B0C0F; --card: #14161B; --well: #1A1D23;
    --ink1: #F3F4F6; --ink-strong: #C9CCD3; --ink2: #9DA2AC; --ink3: #808590; --ink4: #4E535D;
    --hairline: rgba(255, 255, 255, .10); --ring: rgba(255, 255, 255, .08);
    --blue: #86A9F2; --blue-hover: #9AB8F5; --on-blue: #141317; --accent: #86A9F2; --accent-text: #86A9F2; --btn-blue: #86A9F2; --btn-blue-hover: #9AB8F5; --accent-strong: #86A9F2;
    --solid: #F3F4F6; --solid-hover: #FFFFFF; --on-solid: #0F1115;
    --quiet: rgba(255, 255, 255, .06); --quiet-hover: rgba(255, 255, 255, .1); --track: rgba(255, 255, 255, .07);
    --nav-glass: rgba(22, 24, 29, .82);
    --grain: #C9D2E4; --frame-a: #191C22; --frame-b: #111318; --frame-glow: rgba(134, 169, 242, .08);
    --shadow-frame: 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -20px rgba(0, 0, 0, .7), 0 60px 120px -40px rgba(0, 0, 0, .6);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 0 rgba(255, 255, 255, .035) inset, 0 16px 40px -18px rgba(0, 0, 0, .6);
    --shadow-lift: 0 0 0 1px rgba(255, 255, 255, .1), 0 1px 0 0 rgba(255, 255, 255, .05) inset, 0 30px 70px -24px rgba(0, 0, 0, .8);
    --tabs-bar-bg: rgba(255, 255, 255, .07); --tabs-pill-bg: #2A2D34;
  }
}
@media (max-width: 720px) { :root { --gutter: 16px; --s10: 112px; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--ground); }
body { font-family: var(--font-body); color: var(--ink1); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
:where(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.soft { color: var(--ink4); }

/* ---------- Top of the page: only the brand, centred ---------- */
.brandbar { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: center; padding-top: 30px; }
/* 30px word; the icon's solid square is 2px taller than the L, 1px over at top and bottom (Theo, 2026-10-06). The PNG has a
   transparent margin and a soft shadow, so the image is drawn larger than the letter; measured on
   the icon's solid body, rows 25 to 231 of 256). */
.brand-c { display: inline-flex; align-items: center; gap: 10px; color: var(--ink1); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; }
.brand-c img { width: 29.2px; height: 29.2px; border-radius: 5px; transform: translateY(-1.05px); }

/* ---------- The floating nav (transitions.dev 20, plus to menu morph) ----------
   On the home page the Download for Mac button becomes this nav once it reaches the top. It keeps
   the button's 15px corners. On every other page it is simply there from the start. */
.pillnav {
  --morph-open-dur: 450ms; --morph-close-dur: 300ms;
  --morph-ease: cubic-bezier(0.34, 1.25, 0.64, 1); --morph-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph-fade-dur: 200ms; --morph-scale: 0.97; --morph-blur: 2px;
  --open-w: 440px; --closed-w: 220px; --closed-h: 56px;
  /* The open nav keeps its own height. The closed shape copies the Download for Mac button (nav.js), and
     when that button became 44px tall the open nav shrank with it, leaving 2px around Buy Loop. */
  --open-h: 56px;
}
.pillnav.has-ind { --open-w: var(--wide); }
.t-morph {
  position: fixed; left: 50%; top: 16px; z-index: 30; translate: -50% 0;
  width: var(--closed-w); height: var(--closed-h); border-radius: 15px; overflow: hidden;
  background: #4B7BE3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px rgba(43,84,178,.30), 0 2px 6px rgba(43,84,178,.20);
  transition-property: width, height, top, background-color, box-shadow;
  transition-duration: var(--morph-close-dur); transition-timing-function: var(--morph-close-ease);
}
.t-morph[hidden] { display: block; visibility: hidden; }
.t-morph[data-open="true"] {
  width: min(var(--open-w), calc(100vw - var(--gutter) * 2)); height: var(--open-h);
  background: var(--nav-glass);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 0 0 1px rgba(17, 22, 32, .06), 0 12px 32px -8px rgba(17, 22, 32, .18);
  transition-duration: var(--morph-open-dur);
  transition-timing-function: var(--morph-ease), var(--morph-close-ease), var(--morph-close-ease), var(--morph-close-ease), var(--morph-close-ease);
}
.t-morph[data-open="true"][data-list="open"] { height: calc(var(--open-h) + var(--list-h, 0px)); }
.pillnav.is-static { transition: none; }
.t-morph-plus {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 11px;
  color: #FFFFFF; font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: opacity var(--morph-fade-dur) var(--morph-close-ease), transform var(--morph-open-dur) var(--morph-close-ease), filter var(--morph-fade-dur) var(--morph-close-ease);
}
.t-morph-plus .apple-mark { width: 17px; height: auto; fill: currentColor; margin-top: -2px; }
.t-morph[data-open="true"] .t-morph-plus { opacity: 0; transform: scale(var(--morph-scale)); filter: blur(var(--morph-blur)); pointer-events: none; }
.t-morph-menu {
  position: absolute; inset: 0; opacity: 0; transform: scale(var(--morph-scale)); filter: blur(var(--morph-blur)); pointer-events: none;
  transition: opacity var(--morph-fade-dur) var(--morph-close-ease), transform var(--morph-open-dur) var(--morph-close-ease), filter var(--morph-fade-dur) var(--morph-close-ease);
}
.t-morph[data-open="true"] .t-morph-menu { opacity: 1; transform: none; filter: blur(0); pointer-events: auto; transition-delay: 90ms; }
.pillnav.is-static .t-morph-menu { transition: none; }
.pn-row { position: relative; height: var(--open-h); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 16px; }
.pn-brand { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--ink1); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
/* Same lockup rule as the top of the page: the icon's solid square about 12% taller than the L
   (image 0.973em, nudged up 0.035em). */
.pn-brand img { width: 16.8px; height: 16.8px; border-radius: 3px; transform: translateY(-0.75px); }
/* Download sits on a light grey strip that runs out from behind Buy Loop. */
.pn-actions { flex: none; display: flex; align-items: center; border-radius: 10px; background: var(--track); }
.tn-btn { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background-color .15s, transform .15s, box-shadow .15s; }
.tn-download, .tn-remind { color: var(--ink1); }
.tn-download { border-radius: 10px 0 0 10px; padding-right: 16px; }
.tn-download:hover, .tn-remind:hover { background: var(--quiet); }
.tn-remind { display: none; }
.tn-buy { color: #fff; background: linear-gradient(180deg, #6A92E8, #4B7BE3); box-shadow: 0 3px 10px rgba(43,84,178,.35), inset 0 1px 0 rgba(255,255,255,.22);
  --ring-base: rgba(255, 255, 255, .18); --ring-arc: rgba(255, 255, 255, .95); }
.tn-buy:hover { box-shadow: 0 6px 16px rgba(43,84,178,.45), inset 0 1px 0 rgba(255,255,255,.22); }
/* The travelling ring from Download for Mac carries on around Buy Loop. */
.tn-buy::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--bg-ang), var(--ring-base) 0deg, var(--ring-base) 232deg, var(--ring-arc) 286deg, var(--ring-base) 332deg, var(--ring-base) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 3px var(--ring-arc)); pointer-events: none; animation: bgRing 4.5s linear infinite; }
:root[data-theme="dark"] .t-morph { background: #86A9F2; }
:root[data-theme="dark"] .t-morph-plus { color: #141317; }
:root[data-theme="dark"] .t-morph[data-open="true"] { background: var(--nav-glass); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 32px -8px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-morph { background: #86A9F2; }
  :root:not([data-theme="light"]) .t-morph-plus { color: #141317; }
  :root:not([data-theme="light"]) .t-morph[data-open="true"] { background: var(--nav-glass); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 32px -8px rgba(0,0,0,.6); }
}

/* The section you are in, in its own box in the middle of the nav: numbered, pale blue, as wide
   as Download and Buy Loop together, filling as you read. Clicking it lists every section. */
.pn-mid { position: absolute; left: 50%; top: 0; height: var(--open-h); display: flex; align-items: center; translate: -50% 0; }
.ind { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: var(--acts-w, 202px); height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: rgba(75, 123, 227, .07); color: var(--ink1); font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; transition: background-color 150ms ease-out; }
.ind:hover, .pillnav[data-list="open"] .ind { background: rgba(75, 123, 227, .1); }
.ind-wash { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: rgba(75, 123, 227, .15); pointer-events: none; transition: width .16s linear; }
.pillnav[data-reset="true"] .ind-wash { transition: none; }
.pillnav[data-list="open"] .ind-wash { opacity: 0; }
.ind-num, .ind-name { position: relative; z-index: 1; white-space: nowrap; }
.ind-num { min-width: 1ch; text-align: right; font-size: 13px; color: var(--accent-text); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .ind { background: rgba(134, 169, 242, .09); }
:root[data-theme="dark"] .ind-wash { background: rgba(134, 169, 242, .18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ind { background: rgba(134, 169, 242, .09); }
  :root:not([data-theme="light"]) .ind-wash { background: rgba(134, 169, 242, .18); }
}
.pn-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 4px 8px 10px; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.pillnav[data-list="open"] .pn-list { opacity: 1; pointer-events: auto; transition-delay: 60ms; }
.pn-list a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 10px; color: var(--ink1); font-size: 14.5px; font-weight: 500; transition: background-color 150ms ease-out; }
.pn-list a:hover, .pn-list a[aria-current="true"] { background: var(--quiet); }
.pn-list em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink4); font-variant-numeric: tabular-nums; min-width: 16px; }
.pn-list a[aria-current="true"] em { color: var(--accent-text); }
/* transitions.dev 04, text states swap: the section name and number change in place. */
.t-text-swap { display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1;
  transition: transform 150ms ease-in-out, filter 150ms ease-in-out, opacity 150ms ease-in-out; will-change: transform, filter, opacity; }
.t-text-swap.is-exit { transform: translateY(-4px); filter: blur(2px); opacity: 0; }
.t-text-swap.is-enter-start { transform: translateY(4px); filter: blur(2px); opacity: 0; transition: none; }

/* The page fades into the background before it reaches the nav, so text never sits behind it. */
.top-fade { --nav-h: 56px; position: fixed; inset: 0 0 auto 0; z-index: 29; pointer-events: none;
  height: calc(16px + var(--nav-h) + 48px);
  background: linear-gradient(to bottom, var(--ground) calc(16px + var(--nav-h)), transparent);
  opacity: 0; transition: opacity 300ms var(--ease); }
.top-fade:has(+ .pillnav[data-open="true"]) { opacity: 1; }

@media (max-width: 880px) { .tn-download { display: none; } .tn-remind { display: inline-flex; border-radius: 10px 0 0 10px; } }
@media (max-width: 760px) { .pn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .pillnav { --closed-h: 48px; --open-h: 48px; }
  .top-fade { --nav-h: 48px; }
  .brandbar { padding-top: 22px; }
  .t-morph-plus { font-size: 15px; }
  .tn-btn { height: 36px; padding: 0 14px; font-size: 14px; }
  .has-ind .pn-brand span, .has-ind .tn-remind { display: none; }
  /* With the name hidden the icon stands alone, so it keeps its own size. */
  .has-ind .pn-brand img { width: 26px; height: 26px; border-radius: 6px; transform: none; }
  .has-ind .pn-actions { background: none; }
  .has-ind .pn-row { padding-left: 11px; }
  .pn-mid { position: static; translate: none; height: auto; flex: 1; justify-content: flex-end; min-width: 0; }
  .ind { width: auto; flex: 1; max-width: 170px; }
}
@media (max-width: 400px) { .tn-btn { padding: 0 11px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .t-morph, .t-morph-plus, .t-morph-menu, .t-text-swap, .ind-wash, .pn-list, .top-fade { transition: none !important; }
  .tn-buy::before { animation: none; }
}

/* ---------- Hero ---------- */
.top { position: relative; padding-top: 168px; overflow-x: clip; }
#bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
.hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--gutter); }
.tag { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 var(--s3) 0 5px; border-radius: 10px; background: var(--card);
  box-shadow: var(--shadow-card); font-size: 13.5px; color: var(--ink2); white-space: nowrap; transition: box-shadow var(--quick) ease-out, transform var(--quick) ease-out; }
.tag:hover { box-shadow: var(--shadow-lift); }
.tag:active { transform: scale(.96); }
.tag-new { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--accent-strong); font-weight: 500; font-size: 12.5px; }
.tag .arw { width: 14px; height: 14px; stroke: var(--ink4); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast) var(--ease), stroke var(--quick) ease-out; }
.tag:hover .arw { transform: translateX(2px); stroke: var(--ink3); }
.hero h1 { margin-top: var(--s6); font-size: clamp(46px, 7.4vw, 80px); font-weight: 400; line-height: 1.02; letter-spacing: -0.04em; color: var(--ink1); text-wrap: balance; }
/* Two lines, split at the comma: the black half, then the grey half */
.hero h1 .soft { display: block; }
/* The subtitle matches the Pay once line under the button (21.9px), which is set by the button's width. */
.sub { margin-top: var(--s5); max-width: 27em; font-size: 21.9px; line-height: 1.5; color: var(--ink2); text-wrap: balance; }
.cta { margin-top: var(--s6); }
.note { margin-top: var(--s3); font-size: 14px; color: var(--ink4); }
/* Under the Download for Mac button: the one-time price, in the headings' two-tone style, set to
   exactly the button's width: 21.9px fills the 227px button, which is the same on phones. */
.pay { margin-top: var(--s4); font-size: 21.9px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink1); white-space: nowrap; }

/* The Download for Mac button, with the travelling ring (from the Muse site). */
.hero-lead-btn { position: relative; overflow: visible; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  height: 56px; padding: 0 32px; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  border-radius: 15px; cursor: pointer; border: none; line-height: 1; white-space: nowrap;
  transition: transform .5s var(--ease-spring), box-shadow .18s var(--ease-out); }
.hero-lead-btn.primary { background: var(--btn-blue); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px rgba(43,84,178,.30), 0 2px 6px rgba(43,84,178,.20);
  --ring-base: rgba(255,255,255,.18); --ring-arc: rgba(255,255,255,.95); }
:root[data-theme="dark"] .hero-lead-btn.primary { background: #86A9F2; color: #141317; --ring-base: rgba(0,0,0,.16); --ring-arc: rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-lead-btn.primary { background: #86A9F2; color: #141317; --ring-base: rgba(0,0,0,.16); --ring-arc: rgba(0,0,0,.6); } }
.hero-lead-btn .apple-mark { width: 17px; height: auto; fill: currentColor; margin-top: -2px; }
.hero-lead-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 34px rgba(43,84,178,.36), 0 3px 8px rgba(43,84,178,.24); }
.hero-lead-btn:active { transform: translateY(0) scale(.985); }
.hero-lead-btn.travel-ring::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--bg-ang), var(--ring-base) 0deg, var(--ring-base) 232deg, var(--ring-arc) 286deg, var(--ring-base) 332deg, var(--ring-base) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 3px var(--ring-arc)); pointer-events: none; z-index: 4; animation: bgRing 4.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hero-lead-btn.travel-ring::before { animation: none; } }

/* Picture frames: empty until the real app pictures are made. */
.frame { position: relative; padding: 8px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow-frame); }
.frame-in { aspect-ratio: 16 / 9; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ring);
  background: radial-gradient(120% 80% at 50% 0%, var(--frame-glow), transparent 60%), linear-gradient(180deg, var(--frame-a), var(--frame-b)); }
.hero-pic { position: relative; z-index: 1; margin-top: var(--s10); }
.hero-pic .frame-in { aspect-ratio: 16 / 10; }
/* A second, smaller frame tilted behind the main one. */
.pic-stage { position: relative; isolation: isolate; }
.frame.back { position: absolute; z-index: -1; width: 30%; right: -5%; top: -9%; padding: 6px; border-radius: 20px; transform: rotate(5deg); }
.hero-pic .frame.back .frame-in { aspect-ratio: 3 / 4; border-radius: 14px; background: linear-gradient(180deg, var(--frame-b), var(--frame-a)); }

/* Strip of three under the hero */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s8); padding: 0 var(--s5); }
.strip h3, .items h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink1); line-height: 1.4; }
.strip p, .items p { margin-top: var(--s1); font-size: 15.5px; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }

/* ---------- Sections ---------- */
.section { position: relative; z-index: 1; padding-top: var(--s10); }
.head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.label { font-size: 14px; font-weight: 500; color: var(--accent-text); }
.section h2, .closer h2 { margin-top: var(--s3); font-size: clamp(34px, 4.6vw, 52px); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em; color: var(--ink1); text-wrap: balance; }
.section-sub { margin-top: var(--s4); max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--ink2); text-wrap: balance; }
.feature-pic { margin-top: var(--s8); }
.items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s8); padding: 0 var(--s5); }
.items.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.items .num { display: block; margin-bottom: var(--s2); font-size: 13px; font-weight: 500; color: var(--accent-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.card { background: var(--card); border-radius: 24px; box-shadow: var(--shadow-card); }

/* ---------- Use cases: one large preview, a recording of the real reader page for each person,
   with the sender's notification arriving top right of the window. The heading is the picker
   ("Built for founders"), and the bar under the preview switches group and person. ---------- */
#use-cases .head h2 { position: relative; }
.pick3 { display: inline-block; }
.pick3-btn { appearance: none; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--accent-text); cursor: pointer; display: inline-flex; align-items: baseline; gap: .12em; padding: 0; }
.pick3-btn .chev { width: .5em; height: .5em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; align-self: center; transition: transform 250ms var(--ease); }
.pick3-btn[aria-expanded="true"] .chev { transform: scaleY(-1); }
.menu3 { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; z-index: 5; width: min(280px, calc(100vw - 32px)); padding: 8px; border-radius: 15px; background: var(--card); box-shadow: var(--shadow-lift);
  display: grid; gap: 2px; text-align: left; letter-spacing: normal; transform-origin: top center; animation: ucDrop 250ms var(--ease); }
.menu3[hidden] { display: none; }
@keyframes ucDrop { from { opacity: 0; transform: scale(.97); } }
.menu3 .m-l { padding: 8px 10px 4px; font-size: 12.5px; font-weight: 500; color: var(--ink3); line-height: 1.2; }
.menu3 .mi { appearance: none; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; text-align: left; height: 36px; padding: 0 10px; border-radius: 10px; color: var(--ink1); cursor: pointer; }
.menu3 .mi:hover, .menu3 .mi[aria-selected="true"] { background: var(--quiet); }
.menu3 .mi[aria-selected="true"] { color: var(--accent-text); }
/* transitions.dev 04: the word changes in place. */
.pick3 .t-swap { display: inline-block; transition: transform 150ms ease-in-out, filter 150ms ease-in-out, opacity 150ms ease-in-out; }
.pick3 .t-swap.is-exit { transform: translateY(-4px); filter: blur(2px); opacity: 0; }
.pick3 .t-swap.is-enter-start { transform: translateY(4px); filter: blur(2px); opacity: 0; transition: none; }

#use-cases .stage { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s5); }
#use-cases .scene { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
#use-cases .scene h3 { margin-top: calc(var(--s2) * -1); font-size: clamp(20px, 2.2vw, 24px); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink2); text-align: center; text-wrap: balance; }
#use-cases .screen { position: relative; width: 100%; margin-top: var(--s6); padding: 8px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow-frame); }
#use-cases .clip { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #F4F4F1; }
#use-cases .clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-theme="dark"] #use-cases .clip { background: #141317; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #use-cases .clip { background: #141317; } }

/* The bar under the preview: the group switch (icons, in Loop blue) and that group's people, each
   in an equal share of a white box; the one on show sits on pale blue that fills as it plays. It
   is lifted above the preview's soft shadow so both boxes stay clean white. */
#use-cases .picker { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s3); width: 100%; margin-top: var(--s4); }
#use-cases .seg2, #use-cases .who2 { display: flex; align-items: center; height: 44px; border-radius: 13px; background: var(--card); box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(17,22,32,.03), 0 8px 24px -14px rgba(17,22,32,.12); }
#use-cases .seg2 { gap: var(--s4); padding: 0 var(--s4); }
#use-cases .seg2-pill { display: none; }
#use-cases .seg2-b { appearance: none; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; height: 28px; padding: 0; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  color: var(--ink3); transition: color 250ms var(--ease); }
#use-cases .seg2-b[aria-selected="true"] { color: var(--accent-text); }
#use-cases .gi { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#use-cases .who2 { flex: 1; gap: 4px; padding: 0 5px; }
#use-cases .who2[hidden] { display: none; }
#use-cases .p2 { position: relative; flex: 1 1 0; height: 34px; padding: 0 8px; border: 0; border-radius: 9px; overflow: hidden; appearance: none; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink1);
  display: inline-flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: background-color 200ms var(--ease); }
#use-cases .p2 .lbl { position: relative; z-index: 1; }
#use-cases .p2 .fillbar { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(75, 123, 227, .14); }
#use-cases .p2:hover { background: var(--quiet); }
#use-cases .p2[aria-selected="true"] { background: rgba(75, 123, 227, .07); }
#use-cases .p2[aria-selected="true"]:hover { background: rgba(75, 123, 227, .1); }
#use-cases .p2[aria-selected="true"] .fillbar { width: calc(var(--t, 0) * 100%); }
:root[data-theme="dark"] #use-cases .p2[aria-selected="true"] { background: rgba(134, 169, 242, .09); }
:root[data-theme="dark"] #use-cases .p2 .fillbar { background: rgba(134, 169, 242, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #use-cases .p2[aria-selected="true"] { background: rgba(134, 169, 242, .09); } :root:not([data-theme="light"]) #use-cases .p2 .fillbar { background: rgba(134, 169, 242, .18); } }
@media (max-width: 760px) {
  #use-cases .picker { flex-direction: column; align-items: stretch; gap: var(--s2); }
  #use-cases .seg2, #use-cases .who2 { height: auto; width: 100%; justify-content: center; }
  #use-cases .seg2 { padding: var(--s2) var(--s4); }
  #use-cases .who2 { padding: 6px; flex-wrap: wrap; }
  #use-cases .p2 { flex: 1 1 calc(50% - 4px); }
}

/* The sender's notification, as Loop sends it on a Mac: what happened, then who and which file,
   then their words on a line of their own. It arrives top right of the window, just under the
   floating nav, only while this section is on screen. */
.uc-ntf { position: fixed; top: calc(16px + 56px + 14px); right: 18px; z-index: 60; width: 356px; display: grid; gap: 8px; pointer-events: none; transition: opacity 300ms ease-out; }
.uc-ntf.away { opacity: 0; }
.ntf { display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; align-items: start; padding: 11px 13px 12px 11px; border-radius: 17px;
  background: rgba(248, 248, 250, .96); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 10px 30px -8px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.06);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body); color: #1D1D1F; text-align: left;
  transform: translateX(28px); opacity: 0; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease-out; }
.ntf.is-in { transform: none; opacity: 1; }
.ntf img { width: 32px; height: 32px; grid-row: span 3; margin-top: 1px; }
.ntf b { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.ntf time { font-size: 11.5px; color: rgba(29,29,31,.5); line-height: 1.5; }
.ntf span { grid-column: 2 / 4; font-size: 12.5px; line-height: 1.35; color: rgba(29,29,31,.86); }
:root[data-theme="dark"] .ntf { background: rgba(42, 42, 46, .95); color: #F5F5F7; box-shadow: 0 0 0 .5px rgba(255,255,255,.14), 0 12px 32px -8px rgba(0,0,0,.6); }
:root[data-theme="dark"] .ntf time { color: rgba(245,245,247,.5); }
:root[data-theme="dark"] .ntf span { color: rgba(245,245,247,.86); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ntf { background: rgba(42, 42, 46, .95); color: #F5F5F7; box-shadow: 0 0 0 .5px rgba(255,255,255,.14), 0 12px 32px -8px rgba(0,0,0,.6); }
  :root:not([data-theme="light"]) .ntf time { color: rgba(245,245,247,.5); }
  :root:not([data-theme="light"]) .ntf span { color: rgba(245,245,247,.86); }
}
@media (max-width: 620px) {
  .uc-ntf { top: calc(16px + 48px + 10px); right: 8px; left: 8px; width: auto; }
  .ntf { column-gap: 8px; padding: 8px 10px 9px 8px; border-radius: 13px; }
  .ntf img { width: 24px; height: 24px; } .ntf b { font-size: 12px; } .ntf span { font-size: 11.5px; } .ntf time { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .pick3 .t-swap, #use-cases .p2, .ntf { transition: none !important; } }

/* transitions.dev: tabs sliding */
.t-tabs { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 13px; background: var(--tabs-bar-bg); }
.t-tab { position: relative; appearance: none; border: 0; background: transparent; height: 34px; padding: 4px 16px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--tabs-text-muted); cursor: pointer; border-radius: 10px; z-index: 1; transition: color var(--tabs-dur) var(--tabs-ease); }
.t-tab:not([aria-selected="true"]):hover, .t-tab[aria-selected="true"] { color: var(--tabs-text-active); }
.t-tabs-pill { position: absolute; top: 3px; left: 0; height: 34px; width: 0; background: var(--tabs-pill-bg); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(20,19,23,.12); transform: translateX(0);
  transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease); will-change: transform, width; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .t-tabs-pill, .t-tab { transition: none !important; } }

/* transitions.dev: panel reveal (use case panels) */
.t-panel-slide { transform: translateY(var(--panel-translate-y)); opacity: 0; filter: blur(var(--panel-blur)); pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter; }
.t-panel-slide[data-open="true"] { transform: translateY(0); opacity: 1; filter: blur(0); pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease); }
@media (prefers-reduced-motion: reduce) { .t-panel-slide { transition: none !important; } }

/* AI */
.asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s8); }
.ask { background: var(--card); box-shadow: var(--shadow-card); border-radius: 16px; padding: 18px 20px; font-size: 15.5px; line-height: 1.5; color: var(--ink1); text-wrap: pretty; }
.fine { margin-top: var(--s5); text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink3); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s8); padding: 18px 0; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--s6); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-card); }
.plan.is-main { box-shadow: var(--shadow-lift); }
/* Two faint rings around the Team card, so it leads without getting louder. */
.plan.is-main::before, .plan.is-main::after { content: ""; position: absolute; pointer-events: none; }
.plan.is-main::before { inset: -9px; border-radius: 33px; box-shadow: inset 0 0 0 1px rgba(75, 123, 227, .20); }
.plan.is-main::after { inset: -18px; border-radius: 42px; box-shadow: inset 0 0 0 1px rgba(75, 123, 227, .08); }
:root[data-theme="dark"] .plan.is-main::before { box-shadow: inset 0 0 0 1px rgba(134, 169, 242, .24); }
:root[data-theme="dark"] .plan.is-main::after { box-shadow: inset 0 0 0 1px rgba(134, 169, 242, .10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan.is-main::before { box-shadow: inset 0 0 0 1px rgba(134, 169, 242, .24); }
  :root:not([data-theme="light"]) .plan.is-main::after { box-shadow: inset 0 0 0 1px rgba(134, 169, 242, .10); }
}
.plan-name { font-size: 18px; font-weight: 500; color: var(--ink1); letter-spacing: -0.01em; }
.plan-for { margin-top: 2px; font-size: 15px; color: var(--ink2); }
.price { margin-top: var(--s5); display: flex; align-items: baseline; gap: var(--s2); min-height: 56px; }
.amount { display: inline-block; font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: var(--ink1); font-variant-numeric: tabular-nums; }
.per { font-size: 15px; color: var(--ink2); }
.amount.swap { animation: pop 500ms cubic-bezier(.34, 1.36, .64, 1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s5); padding: 3px; border-radius: 13px; background: var(--well); }
.seg-pill { position: absolute; top: 3px; left: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 10px; background: var(--card);
  box-shadow: 0 0 0 1px var(--ring), 0 1px 3px rgba(17, 22, 32, .08); transition: transform var(--fast) var(--ease); }
.seg[data-pick="10"] .seg-pill { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; height: 32px; padding: 0 var(--s3); border: 0; background: transparent; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink2); white-space: nowrap; cursor: pointer; transition: color var(--fast) var(--ease); }
.seg button[aria-checked="true"], .seg button:hover { color: var(--ink1); }
.list { list-style: none; padding: 0; margin-top: var(--s5); display: grid; gap: var(--s3); flex: 1; align-content: start; }
.list li { display: flex; gap: var(--s3); align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink-strong); }
.tick { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 var(--s4); border-radius: 12px; font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--quick) ease-out, transform var(--quick) ease-out; }
.btn:active { transform: scale(.96); }
.btn-blue { background: var(--btn-blue); color: var(--on-blue); }
.btn-blue:hover { background: var(--btn-blue-hover); }
.btn-solid { background: var(--solid); color: var(--on-solid); }
.btn-solid:hover { background: var(--solid-hover); }
.btn-quiet { background: var(--quiet); color: var(--ink1); }
.btn-quiet:hover { background: var(--quiet-hover); }
.plan .btn { margin-top: var(--s6); width: 100%; }
/* The list takes any spare height, so every card's button sits on the same line */
.plan .list { flex-grow: 1; }
.custom-amount { font-size: 48px; }

/* FAQ */
.faq { max-width: 760px; margin: var(--s8) auto 0; display: flex; flex-direction: column; gap: 10px; }
.t-acc { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-card); }
.t-acc-head { appearance: none; border: 0; background: transparent; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink1); text-align: left; text-wrap: balance; cursor: pointer; }
.t-acc-chevron svg { width: 16px; height: 16px; fill: none; stroke: var(--ink3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-acc-panel-inner p { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.6; color: var(--ink2); }
/* FAQ: transitions.dev accordion */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; opacity: 0; filter: blur(2px); transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc-chevron { display: inline-flex; transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
@media (prefers-reduced-motion: reduce) { .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none !important; } }

/* Final call to action */
.closer { text-align: center; }
.closer .cta { margin-top: var(--s6); }
.closer .note { display: block; }

/* Entrance: the hero on load, each block as it arrives. Only with scripts, so nothing is ever hidden without them. */
.js .rise { opacity: 0; transform: translateY(12px); }
.js .is-in .rise, .js .rise.is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; }
  .js .is-in .rise, .js .rise.is-in { transition: none; }
  .tag, .tag .arw, .seg-pill, .seg button, .btn { transition: none !important; }
  .amount.swap { animation: none; }
}

/* ---------- Footer: lifted from the live Muse site (.site-footer), same structure as Docket ---------- */
.site-footer{position:relative;z-index:1;margin-top:0}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:72px 28px 40px}
.footer-main{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px 26px;padding-top:8px}
.footer-brandcol .topnav-brand{margin-bottom:16px}
.footer-brandcol p{color:var(--ink2);font-size:14.5px;line-height:1.55;max-width:26ch}
.footer-col h3{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.005em;
  color:var(--ink1);margin-bottom:14px}
.footer-col > a{display:block;color:var(--ink3);font-size:14.5px;padding:8px 0;transition:color .15s;text-decoration:none}
.footer-col > a:hover{color:var(--ink1)}
/* The legal line sits under Follow, so the footer ends where its links end (Theo, 2026-10-14) */
.footer-legal{margin-top:22px;color:var(--ink3);font-size:13px;line-height:1.6}
.footer-legal a{color:inherit;text-decoration:none;transition:color .15s}
.footer-legal a:hover{color:var(--ink1)}
.footer-x{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 15px;
  border-radius:10px;border:none;background:var(--ink1);color:var(--paper);
  font-size:13.5px;font-weight:600;text-decoration:none;
  transition:opacity .18s,transform .18s var(--ease-out)}
.footer-x:hover{opacity:.85;transform:translateY(-1px)}
.footer-x:active{transform:scale(.97)}
.footer-x svg{width:15px;height:15px;fill:currentColor;display:block}
@media (max-width:900px){ .footer-main{grid-template-columns:repeat(3,1fr);gap:32px 20px} .footer-brandcol{grid-column:1 / -1;margin-bottom:8px} }
@media (max-width:560px){
  .footer-main{grid-template-columns:repeat(2,1fr)}
  .footer-col > a{padding:9px 0}
  .foot-hide-mobile{display:none}
  .footer-col > a.footer-llms{display:none}
  .footer-brandcol{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:20px}
  .footer-brandcol .topnav-brand{margin-bottom:0}
  .footer-brandcol p{display:none}
  .footer-brandcol .footer-x{margin-top:0;margin-left:auto}
  .footer-legal{flex-basis:100%;margin-top:4px}
}
.site-footer { margin-top: var(--s10); }

/* Coming-soon pages (stand-ins until each page is built) */
.soon-page{position:relative;z-index:1;min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 16px 80px}
.soon-page h1{font-size:clamp(40px,6vw,72px);font-weight:400;letter-spacing:-0.04em;line-height:1.02;color:var(--ink1);text-wrap:balance}
.soon-page p{margin-top:16px;font-size:18px;color:var(--ink2)}
.soon-page a.back{margin-top:28px;font-size:15px;font-weight:600;color:var(--accent-text);text-decoration:none}

/* ---------- Narrower screens ---------- */
@media (max-width: 960px) {
  .items, .items.three { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); }
  .plans { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .plan.is-main { margin: 18px 0; }
  .price { min-height: 0; }
  .asks { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) {
  .top { padding-top: 128px; }
  .strip { grid-template-columns: 1fr; gap: var(--s5); padding: 0 var(--s2); text-align: center; margin-top: var(--s7); }
  .items, .items.three { grid-template-columns: 1fr; gap: var(--s5); padding: 0 var(--s2); text-align: center; }
  .items .num { margin-bottom: var(--s1); }
  .hero-pic { margin-top: var(--s9); }
  .feature-pic, .plans, .items, .asks, .faq { margin-top: var(--s7); }
  .hero h1 .soft, .section h2 .soft, .closer h2 .soft { display: block; }
  .frame { padding: 6px; border-radius: 18px; }
  .frame-in { border-radius: 12px; }
  .frame.back { width: 32%; right: 3%; top: -8%; padding: 4px; border-radius: 14px; }
  .hero-pic .frame.back .frame-in { border-radius: 10px; }
  .plan { padding: var(--s5); border-radius: 20px; }
  .plan.is-main::before { inset: -7px; border-radius: 27px; }
  .plan.is-main::after { inset: -14px; border-radius: 34px; }
}

/* Legal pages: one calm reading column */
.legal{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:clamp(120px,14vh,160px) 24px 40px}
.legal-head{margin-bottom:48px}
.legal h1{font-size:clamp(32px,4.4vw,46px);font-weight:400;letter-spacing:-0.04em;line-height:1.05;color:var(--ink1);text-wrap:balance}
.legal-date{margin-top:14px;font-size:13px;color:var(--ink3)}
.legal section{margin-top:36px;scroll-margin-top:110px}
.legal h2{font-size:16px;font-weight:500;letter-spacing:-0.01em;color:var(--ink1);margin-bottom:10px}
.legal p,.legal li{font-size:14.5px;line-height:1.7;color:var(--ink2)}
.legal p + p{margin-top:12px}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:10px}
.legal ul + p{margin-top:14px}
.legal p + ul{margin-top:12px}
.legal b{color:var(--ink1);font-weight:600}
.legal a{color:var(--accent-text);text-decoration:none}

/* Guide pages (MCP Server), modelled on Muse's /muse/mcp */
.guide{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:clamp(120px,14vh,160px) clamp(16px,4vw,40px) 0}
.guide-head{text-align:center;max-width:680px;margin:0 auto}
.guide-head h1{font-size:clamp(40px,6vw,68px);font-weight:400;letter-spacing:-0.045em;line-height:1.02;color:var(--ink1)}
.guide-sub{margin-top:16px;font-size:clamp(16px,1.6vw,18px);line-height:1.55;color:var(--ink2);text-wrap:balance}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.chip{font-size:13.5px;font-weight:500;color:var(--ink2);background:var(--card);box-shadow:var(--shadow-card);border-radius:10px;padding:7px 14px}
.g-section{margin-top:clamp(72px,9vw,112px)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.steps li{padding:22px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:13px;font-weight:500;
  color:var(--accent-text);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.steps h3{margin-top:14px;font-size:16px;font-weight:500;color:var(--ink1)}
.steps p{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.code{margin-top:14px;padding:20px 22px}
.code-label{font-size:13px;font-weight:600;color:var(--ink3)}
.code pre{margin-top:10px;overflow-x:auto;font:13.5px/1.6 ui-monospace,"SF Mono",Menlo,monospace;color:var(--ink1)}
.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.action-group{padding:24px}
.action-group h3{font-size:16px;font-weight:500;color:var(--ink1)}
.action-group ul{list-style:none;padding:0;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.action-group li{font-size:14.5px;line-height:1.5;color:var(--ink2);padding-left:18px;position:relative}
.action-group li::before{content:'';position:absolute;left:2px;top:6px;width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.group-note{margin-top:12px;font-size:13.5px;color:var(--ink3)}
.ask-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ask-card{padding:22px;display:flex;flex-direction:column}
.ask-app{font-size:12.5px;font-weight:500;color:var(--accent-text)}
.ask-q{margin-top:8px;font-size:16px;line-height:1.45;font-weight:500;color:var(--ink1);flex:1}
.ask-steps{list-style:none;padding:0;margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.ask-steps li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--tabs-bar-bg);border-radius:8px;padding:5px 9px}
.ask-steps li span{font-size:11px;color:var(--ink3)}
.items.control{grid-template-columns:repeat(3,1fr)}
.guide .closer{margin-top:clamp(40px,6vw,72px)}
@media (max-width:880px){ .steps{grid-template-columns:repeat(2,1fr)} .action-grid,.ask-grid{grid-template-columns:1fr} .items.control{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps,.items.control{grid-template-columns:1fr} }

.g-section h2{font-size:clamp(28px,3.6vw,40px);font-weight:400;letter-spacing:-0.035em;line-height:1.08;color:var(--ink1);text-wrap:balance}

/* Equal boxes: every action group and every ask card the same size; the question always two lines,
   the steps always one. */
.action-grid{grid-auto-rows:1fr}
.grid-note{margin-top:14px;text-align:center;font-size:14px;color:var(--ink3)}
.ask-grid{grid-auto-rows:1fr}
.ask-q{flex:none;min-height:calc(2 * 1.45em)}
.ask-steps{flex-wrap:nowrap;margin-top:auto;padding-top:16px}
.ask-steps li{white-space:nowrap}
.ask-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ask-q{text-wrap:balance}
.ask-steps{gap:5px}
.ask-steps li{padding:5px 8px;font-size:12px;gap:5px}
@media (max-width:1100px){ .ask-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .ask-grid{grid-template-columns:minmax(0,1fr)} }
.action-group ul{gap:12px}
.action-group li{white-space:nowrap}
.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:880px){ .action-grid{grid-template-columns:minmax(0,1fr)} }
/* The narrowest phones (under 360px) cannot hold these on one line, so they wrap rather than clip. */
@media (max-width:360px){ .action-group li{white-space:normal} .ask-steps{flex-wrap:wrap} .action-group{padding:20px} }
@media (max-width:1100px){ .items.control{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .items.control{grid-template-columns:minmax(0,1fr)} }

/* ---------- Renting chart: lifted from Docket's pricing page (#compare), Loop tokens ---------- */
/* ---------- Renting chart: lifted from Docket's pricing page (#compare), Loop tokens ---------- */
#compare .rent-head{max-width:720px}
#compare .lead{margin-top:14px;font-size:clamp(16px,1.6vw,18px);line-height:1.55;color:var(--ink2);text-wrap:pretty}
#compare .rent-tabs{margin-top:28px}
#compare .bars{margin-top:28px;display:grid;gap:10px}
#compare .b{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:16px;width:100%;border:0;background:none;font-family:inherit;text-align:left;padding:0 120px 0 0;cursor:pointer}
#compare .b:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
#compare .nm{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink3);transition:color .2s ease}
#compare .b:hover .nm,#compare .b.on .nm{color:var(--ink1)}
#compare .track{position:relative;height:44px}
#compare .fill{display:block;height:100%;border-radius:11px;background:var(--tabs-bar-bg);width:var(--w);transition:width 1.05s cubic-bezier(.22,.75,.3,1),background .2s ease}
#compare .b:hover .fill,#compare .b.on .fill{background:rgba(20,20,26,.11)}
:root[data-theme="dark"] #compare .b:hover .fill,:root[data-theme="dark"] #compare .b.on .fill{background:rgba(255,255,255,.13)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #compare .b:hover .fill,:root:not([data-theme="light"]) #compare .b.on .fill{background:rgba(255,255,255,.13)} }
#compare .val{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--w) + 14px);font-size:14px;font-weight:500;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums;
  transition:opacity .4s ease .55s,left 1.05s cubic-bezier(.22,.75,.3,1),color .2s ease}
#compare .b:hover .val,#compare .b.on .val{color:var(--ink1)}
#compare .b.us .nm,#compare .b.us .val{color:var(--ink1)}
#compare .b.us .fill,#compare .b.us:hover .fill,#compare .b.us.on .fill{background:var(--accent)}
#compare .cap{margin-top:26px;min-height:40px;font-size:14px;line-height:1.5;color:var(--ink3);transition:opacity .18s ease}
#compare .cap.fade{opacity:0}
#compare .cap b{color:var(--ink1);font-weight:500}
#compare .lead-link{color:inherit;text-decoration:none;transition:color .2s ease}
#compare .lead-link:hover{color:var(--ink1)}
@media (max-width:640px){ #compare .lead br{display:none} #compare .lead > span:not([hidden]){display:block;text-wrap:balance} }
#compare .bars[data-go="false"] .fill{width:0}
#compare .bars[data-go="false"] .val{opacity:0}
@media (max-width:640px){
  #compare .b{grid-template-columns:1fr;gap:6px;padding-right:0}
  #compare .track{height:38px;padding-right:110px}
  #compare .fill{min-width:14px}
  #compare .val{left:auto;right:0;transition:opacity .4s ease .55s,color .2s ease}
  #compare .cap{min-height:60px}
  #compare .cap:empty{min-height:0;margin-top:0}
}
@media (prefers-reduced-motion:reduce){ #compare .fill,#compare .val,#compare .cap{transition:none} }

/* ---------- Pieces other pages share ---------- */
/* The footer's brand */
.topnav-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--ink1); }
.topnav-brand img { width: 20.4px; height: 20.4px; border-radius: 4px; transform: translateY(-0.7px); }
.topnav-name { font-weight: 500; font-size: 21px; letter-spacing: -0.015em; color: var(--ink1); }
/* Guide page section heads */
.section-head { max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
/* Renting: the head and the Pro / Team switch sit centred like every other section */
#compare .rent-head { margin: 0 auto; }
#compare .rent-tabs { display: flex; width: fit-content; margin: var(--s7) auto 0; }
#compare .bars { margin-top: var(--s6); }

/* ---------- Compare: Loop against the tools people use today, lifted from Muse's table. Rows are
   separated by space and a hover fill, not lines; Loop's column is raised behind its marks. ---------- */
#versus .vs-wrap { margin-top: var(--s7); padding: 16px 0 8px; }
#versus .vs-table { position: relative; overflow: hidden; border-radius: 22px; padding: 10px clamp(12px, 1.6vw, 22px) 16px; background: linear-gradient(180deg, var(--card), var(--paper)); box-shadow: var(--shadow-lift); }
#versus .vs-grid { position: relative; z-index: 1; min-width: 880px; } /* seven columns: below this the table scrolls inside its box */
#versus .vs-row { position: relative; z-index: 1; display: flex; align-items: stretch; border-radius: 12px; transition: opacity .55s var(--ease-out), transform .7s var(--ease-spring), background .2s var(--ease-out); }
#versus .vs-row:not(.vs-row-head):hover { background: var(--quiet); }
#versus .vs-rh { flex: 2 2 0; min-width: 0; padding: 15px 14px 15px 8px; display: flex; align-items: center; gap: 13px; }
#versus .vs-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--quiet); color: var(--ink1); }
#versus .vs-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#versus .vs-lab { font-weight: 500; font-size: 14px; color: var(--ink1); white-space: nowrap; }
#versus .vs-c { flex: 1 1 0; min-width: 0; padding: 16px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
#versus .vs-row-head { align-items: flex-end; }
#versus .vs-row-head .vs-c { padding: 8px 6px 18px; }
#versus .vs-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--ink1); }
#versus .vs-brand img { width: 20px; height: 20px; }
#versus .vs-name { font-weight: 500; font-size: 13px; color: var(--ink2); line-height: 1.2; white-space: nowrap; }
#versus a.vs-name { text-decoration: none; transition: color .2s ease; }
#versus a.vs-name:hover { color: var(--ink1); }
#versus .vs-all { margin-top: var(--s3); text-align: center; font-size: 15px; }
#versus .vs-all a { color: var(--ink2); text-decoration: none; transition: color .2s ease; }
#versus .vs-all a:hover { color: var(--ink1); }
#versus .vs-desc { font-size: 11px; color: var(--ink4); white-space: nowrap; }
#versus .m { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
#versus .m svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#versus .m-on { width: 28px; height: 28px; background: var(--solid); color: var(--on-solid); box-shadow: 0 4px 11px rgba(15, 17, 21, .3), inset 0 1px 0 rgba(255, 255, 255, .2); }
#versus .m-on svg { width: 15px; height: 15px; }
#versus .m-y { width: 26px; height: 26px; background: var(--quiet-hover); color: var(--ink2); }
#versus .m-y svg { width: 14px; height: 14px; }
#versus .m-p { width: 26px; height: 26px; background: var(--quiet); color: var(--ink4); }
#versus .m-p svg { width: 13px; height: 13px; }
#versus .m-x { width: 26px; height: 26px; background: var(--quiet); color: var(--ink3); }
#versus .m-x svg { width: 12px; height: 12px; }
#versus .vs-price { font-weight: 500; font-size: 17px; line-height: 1; color: var(--ink2); white-space: nowrap; }
#versus .vs-c-loop .vs-price { font-size: 25px; color: var(--accent-text); }
#versus .vs-cadence { display: inline-flex; align-items: center; gap: 3px; margin-top: 8px; padding: 4px 6px 4px 5px; border-radius: 7px; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--ink3); background: var(--quiet); }
#versus .vs-cadence svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#versus .vs-cadence.once { color: var(--accent-text); background: rgba(75, 123, 227, .1); }
#versus .vs-caption { margin: var(--s5) auto 0; max-width: 62ch; min-height: 3em; text-align: center; font-size: 16px; line-height: 1.5; color: var(--ink2); transition: opacity .25s var(--ease-out); }
/* Loop's column, raised behind its marks: two units of label, then seven columns of one unit each. */
#versus .vs-hl { position: absolute; top: 6px; bottom: 6px; left: 22.222%; width: 11.111%; border-radius: 16px; z-index: 0; pointer-events: none; background: var(--card); box-shadow: var(--shadow-card); }
:root[data-theme="dark"] #versus .m-on { box-shadow: 0 4px 11px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }
:root[data-theme="dark"] #versus .vs-hl { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="dark"] #versus .vs-cadence.once { background: rgba(134, 169, 242, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #versus .m-on { box-shadow: 0 4px 11px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }
  :root:not([data-theme="light"]) #versus .vs-hl { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) #versus .vs-cadence.once { background: rgba(134, 169, 242, .12); }
}
/* Arrival: the rows unfold top to bottom, Loop's ticks land after their row. */
#versus .vs-armed .vs-hl { opacity: 0; transform: scaleY(.94); transform-origin: top center; }
#versus .vs-grid .vs-hl { transition: opacity .6s var(--ease-out), transform .85s var(--ease-spring); }
#versus .vs-in .vs-hl { opacity: 1; transform: none; transition-delay: 60ms; }
#versus .vs-armed .vs-row { opacity: 0; transform: translateY(15px); }
#versus .vs-in .vs-row { opacity: 1; transform: none; transition-delay: calc(var(--r, 0) * 70ms); }
#versus .vs-armed .vs-c-loop .m-on { opacity: 0; transform: scale(.4); }
#versus .vs-grid .vs-c-loop .m-on { transition: opacity .45s var(--ease-out), transform .6s var(--ease-spring); }
#versus .vs-in .vs-c-loop .m-on { opacity: 1; transform: scale(1); transition-delay: calc(var(--r, 0) * 70ms + 170ms); }
#versus .vs-grid .vs-c:not(.vs-c-loop) .m { transition: opacity .5s var(--ease-out); }
#versus .vs-armed .vs-c:not(.vs-c-loop) .m { opacity: 0; }
#versus .vs-in .vs-c:not(.vs-c-loop) .m { opacity: 1; transition-delay: calc(var(--r, 0) * 70ms + 300ms); }
@media (prefers-reduced-motion: reduce) { #versus .vs-grid .vs-row, #versus .vs-grid .vs-hl, #versus .vs-grid .vs-c .m { transition: none; opacity: 1; transform: none; } }
/* Narrower than the table: it scrolls sideways inside its own box. On phones, as on Muse's site,
   the section is left out. */
@media (max-width: 820px) { #versus .vs-table { overflow-x: auto; overflow-y: hidden; } }
@media (max-width: 620px) { #versus { display: none; } }
#versus .lead { max-width: 54ch; margin: 14px auto 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
#versus .vs-cadence { color: #C2564B; background: rgba(214, 98, 88, .13); }
#versus .vs-cadence.once { color: #2F8A5B; background: rgba(47, 138, 91, .12); }
:root[data-theme="dark"] #versus .vs-cadence { color: #EE8E84; background: rgba(240, 128, 116, .16); }
:root[data-theme="dark"] #versus .vs-cadence.once { color: #6DC89B; background: rgba(109, 200, 155, .14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #versus .vs-cadence { color: #EE8E84; background: rgba(240, 128, 116, .16); }
  :root:not([data-theme="light"]) #versus .vs-cadence.once { color: #6DC89B; background: rgba(109, 200, 155, .14); }
}
#versus .lead { text-wrap: balance; }

/* Under the hero demo: what is happening in it, one step at a time (Theo picked option 4, 2026-10-07).
   The step's name, one sentence, and five short bars that fill as the demo plays each step. */
#heroTl { margin-top: var(--s8); text-align: center; padding: 0 var(--s5); }
#heroTl .k { font-size: 14px; font-weight: 500; color: var(--accent-text); min-height: 1.4em; }
#heroTl .big { margin-top: var(--s2); font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink1); min-height: 1.3em; text-wrap: balance; }
#heroTl .tl-swap { display: inline-block; transition: opacity 150ms ease-in-out, filter 150ms ease-in-out, transform 150ms ease-in-out; }
#heroTl .tl-swap.out { opacity: 0; filter: blur(2px); transform: translateY(-4px); }
#heroTl .bar { margin: var(--s5) auto 0; max-width: 360px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#heroTl .bar span { height: 3px; border-radius: 2px; background: rgba(75, 123, 227, .13); overflow: hidden; }
#heroTl .bar i { display: block; height: 100%; width: 0; background: var(--accent); }
:root[data-theme="dark"] #heroTl .bar span { background: rgba(134, 169, 242, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #heroTl .bar span { background: rgba(134, 169, 242, .16); } }
@media (max-width: 760px) { #heroTl { margin-top: var(--s7); padding: 0 var(--s2); } #heroTl .bar { max-width: 240px; } }
@media (prefers-reduced-motion: reduce) { #heroTl .tl-swap { transition: none; } }
.pn-list a[hidden] { display: none; } /* a section this width does not show (Compare on phones) */

/* The hero demo's notifications: just above the demo, on its right edge (placed by hero.js) */
.hero-ntf { position: absolute; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; pointer-events: none; transition: opacity 300ms ease-out; }
.hero-ntf.away { opacity: 0; }

/* Formats: two full-width rows of formats drifting in opposite directions at one speed, no edge fade
   (Theo picked option 7 of prototypes/loop-formats-2026-10-07). Each row holds the list twice so it loops. */
#formats { --fp: #fff; --fp-shadow: 0 0 0 1px rgba(17,22,32,.05), 0 4px 14px -6px rgba(17,22,32,.12); --fk-bg: rgba(75, 123, 227, .10); --fk-ink: #426DC8; }
:root[data-theme="dark"] #formats { --fp: #16181D; --fp-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 10px 26px -10px rgba(0,0,0,.6); --fk-bg: rgba(134, 169, 242, .14); --fk-ink: #86A9F2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #formats { --fp: #16181D; --fp-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 10px 26px -10px rgba(0,0,0,.6); --fk-bg: rgba(134, 169, 242, .14); --fk-ink: #86A9F2; } }
#formats .frows { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s8); overflow: hidden; }
#formats .frow { overflow: hidden; padding: 8px 0 12px; }
#formats .ftrack { display: flex; width: max-content; animation: fdrift var(--fdur, 120s) linear infinite; will-change: transform; }
#formats .frow.rev .ftrack { animation-direction: reverse; }
#formats .frow:hover .ftrack { animation-play-state: paused; }
#formats .fset { display: flex; gap: 12px; padding-right: 12px; }
@keyframes fdrift { to { transform: translateX(-50%); } }
#formats .fpill { width: 188px; flex: none; display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px 0 12px; border-radius: 16px; background: var(--fp); box-shadow: var(--fp-shadow); font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink1); white-space: nowrap; }
#formats .fk { width: 30px; height: 30px; border-radius: 9px; background: var(--fk-bg); display: grid; place-items: center; flex: none; }
#formats .fk svg { width: 16px; height: 16px; fill: none; stroke: var(--fk-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { #formats .fpill { width: 160px; height: 48px; font-size: 14.5px; } #formats .frows { margin-top: var(--s7); } }
@media (prefers-reduced-motion: reduce) { #formats .ftrack { animation: none; } }
#formats .lead { max-width: 54ch; margin: 14px auto 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--ink2); text-wrap: balance; } /* as Compare's subtitle */

/* ---------- Pricing: the full comparison, folded under the cards (from Docket's pricing matrix) ----------
   Every row is in the markup so crawlers and AI answers can read what each plan includes. The app
   gates only teammates (LicenseManager.allowsTeams), so almost every row is ticked in all three;
   Team keeps one fill all the way down, the column the cards argue for. */
#pricing .allfeat { margin-top: var(--s6); }
#pricing .allbtn { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 auto; height: 44px; padding: 0 20px;
  border-radius: 12px; border: 0; background: var(--quiet); font: inherit; font-size: 15px; font-weight: 500; color: var(--ink1); cursor: pointer;
  transition: background var(--quick) var(--ease); }
#pricing .allbtn:hover { background: var(--quiet-hover); }
#pricing .allbtn svg { width: 15px; height: 15px; transition: transform var(--acc-chevron) var(--acc-ease); }
#pricing [data-open="true"] .allbtn svg { transform: rotate(180deg); }
/* 0fr to 1fr: the table opens to its real height, so nothing is measured and nothing clips when a label wraps. */
#pricing .matrix { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--panel-open-dur) var(--panel-ease), visibility 0s var(--panel-open-dur); }
#pricing .matrix .mi { overflow: hidden; visibility: hidden; min-height: 0; }
#pricing .matrix .mi > table:first-child { margin-top: var(--s6); }
#pricing [data-open="true"] .matrix { grid-template-rows: 1fr; transition-delay: 0s, 0s; }
#pricing [data-open="true"] .matrix .mi { visibility: visible; }
#pricing .matrix h4 { margin: var(--s6) 0 var(--s2); padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--accent-text); text-align: left; }
#pricing .matrix table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#pricing .matrix col { width: 16.6%; }
#pricing .matrix col.c1 { width: 50.2%; }
#pricing .matrix th, #pricing .matrix td { padding: 12px 16px; text-align: center; vertical-align: middle; }
#pricing .matrix th[scope="row"] { text-align: left; font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--ink-strong); text-wrap: pretty; }
#pricing .matrix table:not(.mhead) tbody tr:nth-child(odd) th,
#pricing .matrix table:not(.mhead) tbody tr:nth-child(odd) td { background: var(--quiet); }
#pricing .matrix .hi { background: rgba(75, 123, 227, .08) !important; }
#pricing .matrix tr th:first-child { border-radius: 10px 0 0 10px; }
#pricing .matrix tr td:last-child { border-radius: 0 10px 10px 0; }
#pricing .matrix .yes { width: 16px; height: 16px; fill: none; stroke: var(--accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
#pricing .matrix .no { color: var(--ink4); font-weight: 500; }
#pricing .matrix .txt { font-size: 14px; color: var(--ink2); }
#pricing .matrix .mhead th.grp { text-align: left; font-size: 14px; font-weight: 500; color: var(--accent-text); }
#pricing .matrix .mhead th { font-size: 15px; font-weight: 500; color: var(--ink1); padding: 0 16px 12px; }
#pricing .matrix .mhead th.hi { background: none !important; }
:root[data-theme="dark"] #pricing .matrix td.hi { background: rgba(134, 169, 242, .10) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #pricing .matrix td.hi { background: rgba(134, 169, 242, .10) !important; } }
@media (prefers-reduced-motion: reduce) { #pricing .matrix, #pricing .allbtn svg { transition: none; } }
@media (max-width: 700px) {
  #pricing .matrix col { width: 19%; } #pricing .matrix col.c1 { width: 43%; }
  #pricing .matrix th, #pricing .matrix td { padding: 11px 8px; }
  #pricing .matrix th[scope="row"] { font-size: 13.5px; }
  #pricing .matrix .mhead th { font-size: 14px; padding: 0 8px 12px; }
  #pricing .matrix h4 { padding: 0 8px; }
  #pricing .matrix .txt { font-size: 12px; }
}
/* Pricing cards: a small label above each list says what it adds (from Docket). */
#pricing .plan .inc { margin-top: var(--s5); font-size: 13px; font-weight: 500; color: var(--ink3); }
#pricing .plan .inc.plus { color: var(--accent-text); }
#pricing .plan .inc + .list { margin-top: var(--s3); }

/* ---------- One type scale and one rhythm for every homepage section, taken from Capture (Theo, 2026-10-14) ----------
   Section headings 30-40px, subtitles 17px 12px under the heading, and 40px (36px on phones) from the heading
   block to the section's content. Scoped to the homepage so the comparison and legal pages keep their own. */
.home { --head-gap: 40px; }
@media (max-width: 640px) { .home { --head-gap: 36px; } }
.home .section h2, .home .closer h2 { font-size: clamp(30px, 3.4vw, 40px); }
.home .section-sub, .home #compare .lead, .home #versus .lead, .home #formats .lead { margin-top: var(--s3); font-size: 17px; }
.home #use-cases .stage, .home #share .bento, .home #formats .frows, .home #customise .cz, .home #track .lx-holder,
.home #review-sign .tour, .home #ai .chat, .home #versus .vs-wrap, .home #compare .rent-tabs, .home #pricing .plans,
.home #faq .faq { margin-top: var(--head-gap); }
.home .section .head > h2:first-child, .home .closer .head > h2:first-child { margin-top: 0; } /* sections without a label start where a label would */
/* More air between sections, so the page reads calmer (Theo picked 208px over 144, 2026-10-14). */
.home { --section-gap: 208px; }
@media (max-width: 720px) { .home { --section-gap: 144px; } }
.home .section { padding-top: var(--section-gap); }
.home .site-footer { margin-top: var(--section-gap); }

/* ---------- Quieter (Theo, 2026-10-14): every section's contents at 82% and 304px between sections on
   desktop; phones keep full size. Subtitles and the six-item lists are gone from the page itself. ---------- */
@media (min-width: 900px) {
  .home { --section-gap: 304px; }
  /* Headings a size down; the pictures of the app at 82%; anything people read (the Use Cases card, Share and
     Capture's captions) at 90%, and the Compare table, Renting, Pricing and the FAQ at full size, so no reading
     text falls under 12px (Theo, 2026-10-14). Margins are divided by the zoom so every heading-to-content gap stays 40px. */
  .home .section h2, .home .closer h2, .home #capture .head h2, .home #ai .head h2, .home #share .head h2 { font-size: 34px; }
  .home #formats .frows, .home #customise .cz, .home #track .lx-holder, .home #review-sign .tour, .home #ai .chat { --z: .82; }
  .home #use-cases .uc1, .home #use-cases .picker, .home #share .bento { --z: .9; }
  .home #formats .frows, .home #customise .cz, .home #track .lx-holder, .home #review-sign .tour, .home #ai .chat,
  .home #use-cases .uc1, .home #share .bento { zoom: var(--z); margin-top: calc(var(--head-gap) / var(--z)); }
  .home #use-cases .picker { zoom: var(--z); }
  /* Blocks with a set width are widened by the zoom, so they still line up at the page's 1000px. */
  .home #track .lx-holder { max-width: calc(var(--wide) / var(--z) + var(--gutter) * 2); }
}
.rent-how { margin-top: var(--s5); text-align: center; font-size: 14px; }
.rent-how a { color: var(--ink3); text-decoration: none; transition: color .15s; }
.rent-how a:hover { color: var(--ink1); }

/* ---------- Hero on shorter screens (Theo, 2026-10-14, a MacBook Air): the words scale with the window's
   height as well as its width, and the gaps tighten, so the top of the demo shows above the fold. ---------- */
@media (min-width: 761px) {
  .top { padding-top: clamp(96px, 15vh, 168px); }
  .hero h1 { margin-top: clamp(16px, 3vh, var(--s6)); font-size: min(clamp(46px, 7.4vw, 80px), 8.2vh); }
  .sub { margin-top: clamp(12px, 2.2vh, var(--s5)); }
  .cta { margin-top: clamp(16px, 3vh, var(--s6)); }
  .hero-pic { margin-top: clamp(48px, 9vh, var(--s10)); }
}
/* ...and the hero's words, button and tag at 78% on desktop (Theo picked level 2, 2026-10-14). */
@media (min-width: 761px) {
  .hero { --h1: calc(min(clamp(46px, 7.4vw, 80px), 8.2vh) * .78); }
  .hero h1 { font-size: var(--h1); }
  /* The subtitle runs the heading's width (its type is .35 of the heading's), never under 15px. */
  .sub { font-size: max(15px, calc(var(--h1) * .35)); }
  .pay { font-size: 18.2px; }   /* the Pay once line fills the 190px button, as it did the 227px one */
  /* The button and its price line sit a little apart from the words above. */
  .cta { margin-top: clamp(28px, 5vh, 48px); }
  .hero-lead-btn { height: 44px; padding: 0 25px; gap: 9px; font-size: 14px; border-radius: 12px; }
  .hero-lead-btn .apple-mark { width: 13px; }
  .tag { height: 28px; gap: 8px; font-size: 12.5px; border-radius: 9px; }
  .tag-new { height: 20px; padding: 0 8px; font-size: 12px; border-radius: 5px; }
  .tag .arw { width: 12px; height: 12px; }
}

/* ---------- A calmer hero (Theo picked option 2 and kept the tag, 2026-10-14): one loud thing (the heading),
   one action (the button), everything else quiet. The top brand matches the nav's size, the button has no
   glow or travelling ring, the subtitle is a step lighter, and the Pay once line is gone (Pricing says it). ---------- */
.brand-c { font-size: 21px; gap: 7px; }
.brand-c img { width: 20.4px; height: 20.4px; border-radius: 4px; transform: translateY(-0.7px); }
.hero .sub { color: var(--ink3); }
.hero-lead-btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(43,84,178,.22); }
.hero-lead-btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(43,84,178,.22), 0 1px 3px rgba(43,84,178,.18); }

/* The hero demo and its step caption fit the window together below the menu bar on desktop, so a shorter
   screen (a MacBook Air) sees all of it at once: the demo is .68 as tall as it is wide, and the caption, its
   gap and some air take 202px (Theo, 2026-10-14). Never narrower than 640px. */
@media (min-width: 761px) {
  .hero-pic { --dw: min(1000px, max(640px, calc((100vh - 202px) / .68))); }
  .hero-pic #heroDemo, .hero-pic #heroTl { max-width: var(--dw); margin-left: auto; margin-right: auto; }
}
/* The demo keeps its shape (hero-demo.css .fit) from the first paint, before its script and styles load, so
   nothing below it jumps when it appears (a 0.18 layout shift on desktop before, 2026-10-15). */
.hero-pic #heroDemo { display: block; aspect-ratio: 1100 / 748; }

/* ---------- Two section sizes (Theo, 2026-10-14): on desktop each section's content is about 340px tall
   (Use Cases, Share, Capture, AI) or about 600px (Customise, Track, Review & Sign, Compare, Renting, Pricing),
   so the page keeps one rhythm. Formats stays a thin strip and the FAQ a list. ---------- */
@media (min-width: 900px) {
  .home { --tier-s: 340px; --tier-l: 600px; }
  /* Use Cases: the card grows so card and picker come to 340. */
  .home #use-cases .uc1-card { min-height: calc((var(--tier-s) - 54px) / var(--z)); }
  .home #use-cases .uc1-pain, .home #use-cases .uc1-fix { display: flex; flex-direction: column; justify-content: center; }
  .home #use-cases .uc1-pain .uc1-k, .home #use-cases .uc1-fix .uc1-k { flex: none; }
  /* Capture: the two boxes, then the bar, one height (76px), 16px apart (Theo, 2026-10-14). */
  /* Capture sizes itself in capture.css (the menu bar panel beside two boxes, 2026-10-15). */
  /* AI: the conversation grows upward inside a box that is always 340 tall, so nothing below moves. */
  .home #ai .wrap > .reveal:not(.head) { min-height: var(--tier-s); display: flex; flex-direction: column; justify-content: flex-end; }
  .home #ai .chat { --z: .9; }
  /* The larger sections, brought to about 600. */
  .home #customise .cz { --z: .94; }
  /* Track scales its window to fit its width, so it is brought to 600 by width: 900 wide is about 612 tall. */
  .home #track .lx-holder { max-width: calc(var(--wide) / var(--z) + var(--gutter) * 2); }
  .home #versus .vs-wrap { --z: .88; zoom: var(--z); margin-top: calc(var(--head-gap) / var(--z)); }
  .home #compare .bars { gap: 16px; }
  .home #pricing .plans { --z: .92; zoom: var(--z); margin-top: calc(var(--head-gap) / var(--z)); }
}

/* One content width for every section on desktop: 900px, the width Track sits at (Theo, 2026-10-14). */
@media (min-width: 900px) {
  .home .section { --wide: 900px; --wrap: calc(var(--wide) + var(--gutter) * 2); }
}

/* ---------- One type scale for the homepage (Theo, 2026-10-14) ----------
   Hero 51 (set by the window), then six sizes for everything people read on desktop:
   34 headings and big figures, 26 card headlines, 17 titles and leads, 15 body, 14 labels and buttons,
   12 small tags. Inside a section shown smaller (zoom, --z) the size is divided by the zoom so it lands
   at the scale on screen. The pictures of the app keep their own type. */
@media (min-width: 900px) {
  .home { --t-h2: 34px; --t-h3: 26px; --t-lg: 17px; --t-md: 15px; --t-sm: 14px; --t-xs: 12px; }
  /* Hero */
  .home .hero .tag { font-size: var(--t-xs); }
  .home .hero .sub { font-size: var(--t-lg); }
  /* Use Cases */
  .home #use-cases .uc1-pain h3 { font-size: calc(var(--t-h3) / var(--z, 1)); }
  .home #use-cases .uc1-pain p, .home #use-cases .uc1-fix li { font-size: calc(var(--t-md) / var(--z, 1)); }
  .home #use-cases .uc1-k { font-size: calc(var(--t-xs) / var(--z, 1)); }
  .home #use-cases .seg2-b, .home #use-cases .p2 { font-size: calc(var(--t-sm) / var(--z, 1)); }
  /* Share */
  .home #share .tile-t { font-size: calc(var(--t-lg) / var(--z, 1)); }
  .home #share .tile-p { font-size: calc(var(--t-md) / var(--z, 1)); }
  /* Capture */
  .home #capture .kind-t { font-size: var(--t-lg); }
  .home #capture .kind-p { font-size: var(--t-md); }
  /* Review & Sign: the tool's name and line beside the page */
  .home #review-sign .cap-name { font-size: calc(var(--t-h2) / var(--z, 1)); }
  .home #review-sign .cap-line { font-size: calc(var(--t-md) / var(--z, 1)); }
  /* Compare */
  .home #versus .vs-brand, .home #versus .vs-price, .home #versus .vs-c-loop .vs-price { font-size: calc(var(--t-lg) / var(--z, 1)); }
  .home #versus .vs-lab, .home #versus .vs-name { font-size: calc(var(--t-sm) / var(--z, 1)); }
  .home #versus .vs-desc, .home #versus .vs-cadence { font-size: calc(var(--t-xs) / var(--z, 1)); }
  /* At 12px the badges read in Title Case, not capitals, so Subscription fits its column. */
  .home #versus .vs-cadence { text-transform: none; letter-spacing: 0; font-weight: 500; padding: 4px 6px; }
  .home #versus .vs-cadence svg { display: none; }
  .home #versus .vs-caption, .home #versus .vs-all { font-size: calc(var(--t-sm) / var(--z, 1)); }
  /* Formats' file names, and the closing price line */
  .home #formats .fpill { font-size: calc(var(--t-sm) / var(--z, 1)); }
  .home .closer .pay { font-size: var(--t-lg); }
  /* Pricing */
  .home #pricing .amount { font-size: calc(var(--t-h2) / var(--z, 1)); }
  .home #pricing .plan-name { font-size: calc(var(--t-lg) / var(--z, 1)); }
  .home #pricing .plan-for, .home #pricing .per, .home #pricing .plan li, .home #pricing .btn, .home #pricing .seg button { font-size: calc(var(--t-sm) / var(--z, 1)); }
  .home #pricing .plan .inc { font-size: calc(var(--t-xs) / var(--z, 1)); }
  .home #pricing .allfeat button, .home #pricing .allfeat > * { font-size: var(--t-sm); }
  /* FAQ */
  .home #faq .t-acc-head { font-size: var(--t-lg); }
  .home #faq .t-acc-panel p, .home #faq .faq p { font-size: var(--t-md); }
  /* Footer */
  .home .footer-col > a, .home .footer-brandcol p, .home .footer-x { font-size: var(--t-sm); }
  .home .footer-col h3 { font-size: var(--t-md); }
  .home .footer-legal { font-size: var(--t-xs); }
}

/* ---------- Hero headline and the line under it as one block (Theo, 2026-10-15): the headline a step
   smaller, the line under it on one line, as wide as the headline's second line (Theo picked A). The line
   is 3.3 times as long as "with tracking & signing.", so its size is .3028 of the headline's and the
   two widths match at every window size (on short windows a 14px floor makes it a little wider). Phones keep their own sizes (the line wraps there). ---------- */
@media (min-width: 761px) {
  .hero { --h1: calc(min(clamp(46px, 7.4vw, 80px), 8.2vh) * .73); }
  .home .hero .sub { max-width: none; white-space: nowrap; font-size: max(14px, calc(var(--h1) * .3028)); }
}

/* The thank-you page after buying: on phones its two halves sit on two lines, so neither runs to the edge. */
@media (max-width: 480px) { .nf h1.thanks .num { display: block; } }