/* site.css */
/* 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(5, 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); }
/* The five areas of the page as a row of words in the middle of the nav, the one you are in
   highlighted (Theo, 2026-10-16, option 5 of prototypes/loop-nav-menu-2026-10-16). Shown only
   while the row fits beside the name and the buttons (nav.js sets .areas-fit); narrower, the
   section box comes back and opens the same five as a list. */
.pn-areas { display: none; align-items: center; gap: 2px; }
.pn-areas a { display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
  color: var(--ink2); white-space: nowrap; transition: background-color 150ms ease-out, color 150ms ease-out; }
.pn-areas a:hover { color: var(--ink1); }
.pn-areas a[aria-current="true"] { color: var(--ink1); background: var(--quiet); }
.pillnav.areas-fit .pn-areas { display: flex; }
.pillnav.areas-fit .ind { display: none; }
/* 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: 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; }
  /* On a phone the nav is the simple one: the name on the left, Share Link and Buy Loop on the right.
     The section box and its list stay for wider screens. */
  .has-ind .pn-mid, .has-ind .pn-list { display: none; }
  .has-ind .pn-brand { position: relative; }
  .has-ind .pn-brand::after { content: ''; position: absolute; inset: -9px -8px; } /* hit area, 44px tall */
}
@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; }
.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: 44px; 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)}
/* Hit areas at least 44px tall without moving anything: an invisible stretch around the link. */
.footer-legal a, .rent-how a { position: relative; }
.footer-legal a::after, .rent-how a::after { content: ''; position: absolute; inset: -14px -8px; }
.rent-how a::after { inset: -22px -8px; }
.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}
/* Dark: a black button with white text (Theo, 2026-10-20); a faint rim keeps it visible on the near-black page. */
:root[data-theme="dark"] .footer-x{background:#000;color:#FFF;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .footer-x{background:#000;color:#FFF;box-shadow:0 0 0 1px rgba(255,255,255,.14)} }
@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)}
@media (max-width:720px){.code pre{white-space:pre-wrap;overflow-wrap:anywhere}} /* on a phone the setup wraps instead of running off the edge */
.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); }
/* View All Comparisons sits at the end of the caption's line (Theo, 2026-10-20); it steps aside while a row's longer caption shows. */
#versus .vs-all { margin-left: .35em; white-space: nowrap; }
#versus .vs-caption.is-row .vs-all { display: none; }
#versus .vs-caption:not(.is-row) { max-width: none; }
#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; } }
/* Renting is left off phones too (Theo, 2026-10-19). */
@media (max-width: 620px) { #compare { 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); }
}

/* The open nav is the same 900px as the content under it. */
@media (min-width: 900px) {
  .pillnav.has-ind { --open-w: 900px; }
}

/* ---------- 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; } }

/* hero-tl.css */
/* Hero caption under the demo (prototypes/loop-hero-caption-2026-10-14, option 4d, Theo 2026-10-14) and the
   one-at-a-time notification tray. */
/* One notification at a time (Theo, 2026-10-14). Every notification in the tray shares one grid cell, so a new
   one lands exactly where the old one was. Arriving keeps the site's own notification entrance (the Use Cases
   tray's slide in from the right, 500ms); leaving is transitions.dev's toast close (22): fade, 16px drop,
   0.97 scale and a 2px blur over 250ms on the smooth-out curve. */
.hero-ntf { display: grid; align-items: end; }
.hero-ntf .ntf { grid-area: 1 / 1; }
.hero-ntf .ntf.is-out {
  opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(2px);
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 250ms cubic-bezier(0.22, 1, 0.36, 1), filter 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { .hero-ntf .ntf, .hero-ntf .ntf.is-out { transition: none !important; } }

/* The caption now lives inside the demo's own wrap, so it shares the demo box's left and right edges. */
#heroTl { --gap: 14px; margin-top: var(--gap); padding: 0; text-align: left; }
#heroTl .bar { margin: 0; max-width: none; }
@media (max-width: 620px) { #heroTl { --gap: 12px; } }

/* 4b: the caption in one soft container exactly the demo box's width, no outline. Inside: five chips (step and
   whose step it is) with a pill sliding to the current one (transitions.dev tabs sliding: 250ms, smooth-out),
   the step's progress as a thin line inside the pill, and the line under the chips. */
#heroTl { margin-top: 20px; padding: 0; text-align: left; }
#heroTl .cap4b { border-radius: 18px; background: var(--quiet); padding: 6px; }
#heroTl .bar.tl-chips { position: relative; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
#heroTl .bar.tl-chips span { height: auto; border-radius: 0; background: none; overflow: visible; }
/* The site's own bar rules colour every span in .bar, and its dark-mode ones outrank the line above, so the
   chips' backgrounds are set at a higher weight here. */
#heroTl#heroTl .bar.tl-chips span { background: none; }
#heroTl#heroTl .bar.tl-chips .pill { background: var(--card); }
#heroTl#heroTl .bar.tl-chips .prog { background: rgba(75, 123, 227, .14); }
:root[data-theme="dark"] #heroTl#heroTl .bar.tl-chips .pill { background: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] #heroTl#heroTl .bar.tl-chips .prog { background: rgba(134, 169, 242, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #heroTl#heroTl .bar.tl-chips .pill { background: rgba(255, 255, 255, .09); }
  :root:not([data-theme="light"]) #heroTl#heroTl .bar.tl-chips .prog { background: rgba(134, 169, 242, .18); } }
#heroTl .bar.tl-chips .pill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 13px; background: var(--card);
  box-shadow: 0 1px 2px rgba(17, 22, 32, .06), 0 6px 18px -10px rgba(17, 22, 32, .22);
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), width 250ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
#heroTl .bar.tl-chips .tl-chip { position: relative; z-index: 1; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#heroTl .tl-chip b { font-size: 13px; line-height: 1.25; font-weight: 500; color: var(--ink2); transition: color 250ms ease-in-out; }
#heroTl .tl-chip small { font-size: 12px; line-height: 1.25; font-weight: 400; color: var(--ink3); }
#heroTl .tl-chip.on b { color: var(--ink1); }
#heroTl .bar.tl-chips .prog { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 999px;
  background: rgba(75, 123, 227, .14); opacity: 0; transition: opacity 250ms ease-in-out; }
#heroTl .tl-chip.on .prog { opacity: 1; }
#heroTl .bar.tl-chips i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
#heroTl .cap4b .big { margin: 0; padding: 14px 16px 12px; min-height: 0; text-align: center; white-space: nowrap;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; font-weight: 400; letter-spacing: -0.005em; color: var(--ink-strong); }
:root[data-theme="dark"] #heroTl .bar.tl-chips .pill { background: rgba(255, 255, 255, .09); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #heroTl .bar.tl-chips .pill { background: rgba(255, 255, 255, .09); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6); } }
@media (max-width: 620px) {
  #heroTl { margin-top: 14px; }
  #heroTl .cap4b { border-radius: 15px; padding: 4px; }
  #heroTl .bar.tl-chips { gap: 2px; }
  #heroTl .bar.tl-chips .tl-chip { height: 46px; }
  #heroTl .bar.tl-chips .pill { border-radius: 11px; }
  #heroTl .tl-chip b { font-size: 12px; } #heroTl .tl-chip small { font-size: 11px; }
  #heroTl .bar.tl-chips .prog { left: 10px; right: 10px; bottom: 5px; }
  #heroTl .cap4b .big { padding: 12px 10px 10px; font-size: 15px; white-space: normal; text-wrap: balance; min-height: calc(2em * 1.4 + 22px); }
}

/* 4d (Theo, 2026-10-14): a lighter grey behind the steps only; the line sits below with no background. */
#heroTl .cap4b { background: none; padding: 0; border-radius: 0; }
#heroTl#heroTl .bar.tl-chips { background: color-mix(in srgb, var(--quiet) 50%, transparent); padding: 6px; border-radius: 18px; }
#heroTl .cap4b .big { padding: 0; margin-top: 22px; }
@media (max-width: 620px) { #heroTl .cap4b .big { padding: 0; margin-top: 16px; min-height: calc(2em * 1.4); } }
@media (prefers-reduced-motion: reduce) { #heroTl .bar.tl-chips .pill, #heroTl .tl-chip b, #heroTl .bar.tl-chips .prog { transition: none; } }

/* Step names only, no You / Sam under them, so the bar is shorter (Theo, 2026-10-14). */
#heroTl .bar.tl-chips .tl-chip { height: 32px; }
#heroTl#heroTl .bar.tl-chips { padding: 4px; border-radius: 14px; }
#heroTl .bar.tl-chips .pill { border-radius: 10px; }
#heroTl .tl-chip b { font-size: 12px; }
#heroTl .bar.tl-chips .prog { bottom: 4px; }
@media (max-width: 620px) { #heroTl .bar.tl-chips .tl-chip { height: 32px; } }

/* Six steps: Loop comes before Drop (prototypes/loop-hero-appwindow-2026-10-14, round 2). At 320 each chip is about 45px wide,
   so the progress line keeps a smaller inset there. */
@media (max-width: 380px) { #heroTl .bar.tl-chips .prog { left: 8px; right: 8px; } }

/* Every notification is one shape, like a macOS banner: the tray's full width (356px, the Mac's banner width) and
   one height, whatever it says; the words sit centred in it (Theo, 2026-10-15). */
.hero-ntf .ntf { width: 100%; height: 66px; box-sizing: border-box; align-content: center; }
.hero-ntf .ntf span { white-space: nowrap; }
@media (max-width: 620px) { .hero-ntf .ntf { height: 52px; } }
.hero-ntf { grid-template-columns: 100%; }   /* one full-width track, so every banner is the tray's width */

/* usecases.css */
/* Use Cases, option 1: pain, then the fix. One still card at the content width. Left, the moment that hurts
   for the chosen person, in large two-tone type; right, on a soft Loop-blue wash, what Loop gives them, one short
   line each with a small app-style icon. The heading's drop-down and the bar under the card pick the person; the
   new person's lines rise in with a short stagger (transitions.dev 18, texts reveal) and the old ones fade in
   place. Nothing moves on its own. Every rule is scoped to #use-cases. */

/* ---------- Tokens ---------- */
#use-cases {
  --duration-stagger: 40ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out;
  /* transitions.dev 18, texts reveal */
  --stagger-dur: 500ms; --stagger-distance: 12px; --stagger-stagger: 40ms; --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1); --stagger-out: 200ms;
  /* The card: 8px inside its edge sits the fix panel, so 24 outside is 16 inside */
  --card-r: 24px; --card-pad: 8px; --panel-r: 16px;
  --wash: rgba(75, 123, 227, .055);
  --ico-fg: #4B7BE3;
}
:root[data-theme="dark"] #use-cases { --wash: rgba(134, 169, 242, .07); --ico-fg: #86A9F2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #use-cases { --wash: rgba(134, 169, 242, .07); --ico-fg: #86A9F2; } }

#use-cases .head { position: relative; z-index: 3; }

/* ---------- The card ---------- */
#use-cases .uc1 { margin-top: var(--head-gap, 40px); }
#use-cases .uc1-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--card-pad); border-radius: var(--card-r);
  background: var(--card); box-shadow: var(--shadow-card); }
#use-cases .uc1-pain { padding: 32px 40px 36px 32px; }
#use-cases .uc1-fix { padding: 32px 32px 36px; border-radius: var(--panel-r); background: var(--wash); }
#use-cases .uc1-k { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink3); }
#use-cases .uc1-fix .uc1-k { color: var(--accent-text); }

/* Every person's lines share one grid cell, so the card is always the tallest person's height and never jumps. */
#use-cases .uc1-stack { display: grid; margin-top: 20px; }
#use-cases .uc1-set { grid-area: 1 / 1; min-width: 0; }
#use-cases .uc1-set[aria-hidden="true"] { pointer-events: none; }

/* The pain: the site's two-tone heading voice, the moment in ink, the sting in the soft grey */
#use-cases .uc1-pain h3 { font-size: clamp(27px, 2.7vw, 36px); font-weight: 400; line-height: 1.14; letter-spacing: -0.03em; color: var(--ink1); text-wrap: balance; }
#use-cases .uc1-pain h3 .soft { display: block; color: var(--ink4); } /* one sentence per line */
#use-cases .uc1-pain p { margin-top: 16px; max-width: 25em; font-size: 17px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }

/* The fix: one line each, an icon drawn the way the app draws a setting's symbol */
#use-cases .uc1-fix ul { list-style: none; padding: 0; display: grid; gap: 18px; }
#use-cases .uc1-fix li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 34px;
  font-size: 16.5px; line-height: 1.4; letter-spacing: -0.005em; color: var(--ink1); text-wrap: balance; }
#use-cases .ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card);
  box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(17, 22, 32, .04); color: var(--ico-fg); }
#use-cases .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Motion: transitions.dev 18, texts reveal. The incoming person's lines rise with a 40ms stagger
   (pain, its line, then each fix); the outgoing ones fade in place, with no reverse rise. ---------- */
.js #use-cases .ln { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur));
  transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
  transition-delay: calc(var(--n, 0) * var(--stagger-stagger)); }
.js #use-cases .uc1-set.is-shown .ln { opacity: 1; transform: none; filter: blur(0); }
.js #use-cases .uc1-set.is-hiding .ln { opacity: 0; transform: none; filter: blur(0); transition: opacity var(--stagger-out) ease; transition-delay: 0ms; }
.js #use-cases .uc1-set.is-reset .ln { transition: none; }
/* Without scripts, only the first person shows. */
html:not(.js) #use-cases .uc1-set:not(:first-child) { visibility: hidden; }

/* ---------- The bar under the card: today's group switch and people, without the progress fill ---------- */
#use-cases .picker { margin-top: var(--s4); }
#use-cases .p2:active { scale: .96; }
#use-cases .p2 { transition: background-color 200ms var(--ease), scale 150ms var(--ease); }

/* ---------- Phones: the fix panel sits under the pain ---------- */
@media (max-width: 860px) {
  #use-cases .uc1-card { grid-template-columns: minmax(0, 1fr); }
  #use-cases .uc1-pain { padding: 24px 20px 28px; }
  #use-cases .uc1-fix { padding: 22px 18px 24px; }
  #use-cases .uc1-stack { margin-top: 14px; }
  #use-cases .uc1-pain h3 { font-size: 25px; }
  #use-cases .uc1-pain p { margin-top: 12px; font-size: 16px; }
  #use-cases .uc1-fix ul { gap: 12px; }
  #use-cases .uc1-fix li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; font-size: 15.5px; }
  #use-cases .ico { width: 32px; height: 32px; border-radius: 9px; }
  #use-cases .ico svg { width: 17px; height: 17px; }
}

/* Phones: the picker sits under the title, so the choice comes before the card it changes (Theo, 2026-10-19). */
@media (max-width: 760px) {
  #use-cases .wrap { display: flex; flex-direction: column; }
  #use-cases .picker { order: 1; margin-top: var(--head-gap, 36px); }
  #use-cases .uc1 { order: 2; margin-top: var(--s4); }
  /* Every With Loop line stays on one line (Theo, 2026-10-19): a little less side padding, and on the narrowest
     phones the type follows the width so the longest line (about 18.2 times the type size) always fits. */
  #use-cases .uc1-fix { padding-left: 14px; padding-right: 14px; }
  #use-cases .uc1-fix li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
  #use-cases .uc1-fix .ico { width: 30px; height: 30px; }
  #use-cases .uc1-fix li > span:last-child { white-space: nowrap; font-size: min(15.5px, calc((100vw - 108px) / 18.6)); }
  /* One picker, not two (Theo, 2026-10-19): the group switch and the people share a single card, the
     group as a sliding segmented control across the top, the four people in a grid beneath it. */
  #use-cases .picker { gap: 0; padding: 6px; border-radius: 16px; 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, #use-cases .who2 { background: none; box-shadow: none; border-radius: 0; }
  #use-cases .seg2 { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; border-radius: 11px; background: var(--quiet); }
  #use-cases .seg2-pill { display: block; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px;
    background: var(--card); box-shadow: 0 1px 2px rgba(17,22,32,.08), 0 0 0 .5px rgba(17,22,32,.06); transition: translate 260ms var(--ease); }
  #use-cases .seg2:has([data-g="creative"][aria-selected="true"]) .seg2-pill { translate: 100% 0; }
  #use-cases .seg2-b { position: relative; z-index: 1; height: 36px; justify-content: center; font-size: 14px; }
  #use-cases .who2 { padding: 6px 0 0; }
  :root[data-theme="dark"] #use-cases .seg2-pill { background: rgba(255, 255, 255, .12); box-shadow: none; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #use-cases .seg2-pill { background: rgba(255, 255, 255, .12); box-shadow: none; }
}

/* The smallest phones: the subtitle stays on one line (Theo, 2026-10-14) */
@media (max-width: 360px) {
  #use-cases .uc1-pain { padding: 22px 16px 26px; }
  #use-cases .uc1-pain h3 { font-size: 23px; }
  #use-cases .uc1-pain p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .js #use-cases .ln, .js #use-cases .uc1-set.is-hiding .ln { transition: none !important; transform: none; filter: none; }
  #use-cases .p2 { transition: none; }
  #use-cases .seg2-pill { transition: none; }
  #use-cases .p2:active { scale: 1; }
}

/* share.css */
/* Loop site: the Share section, round 2 option 1. Option 5's bento (one wide tile, two stacked beside it) with
   option 3's link card and setting switches. Share: a file dropped on the drop shelf (ShelfView.swift) becomes the
   link card. Control: Email, Password, Expiry and Watermark, drawn as the app draws a setting; each one switched on
   adds its badge to the link card in Share, so the two tiles work as one. Requests: the menu bar panel's Requests
   card (MenuBarView.swift), files arriving. Still at rest; plays once, in turn, when it comes into view. Every rule
   is scoped to #share; motion values are transitions.dev tokens. */
/* ---------- Context: the end of Use Cases above, the start of Formats below ---------- */





/* ---------- Tokens ---------- */
#share {
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms;
  --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out; --ease-linear: linear;
  --ease-icon: cubic-bezier(0.2, 0, 0, 1); --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  /* transitions.dev 27, toggle */
  --toggle-dur: 350ms; --toggle-travel: 12px; --toggle-ov1: 1px; --toggle-ov2: 0px; --toggle-track: 200ms;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  /* transitions.dev 09, icon swap */
  --icon-swap-dur: 250ms; --icon-swap-blur: 2px; --icon-swap-start-scale: 0.25; --icon-swap-ease: ease-in-out;
  /* transitions.dev 03, notification badge */
  --badge-pop-dur: 500ms; --badge-pop-close-dur: 180ms; --badge-fade-dur: 400ms; --badge-fade-close-dur: 180ms;
  --badge-blur: 2px; --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1); --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --distance-micro: 4px; --distance-base: 8px; --distance-medium: 12px;
  --blur-small: 2px; --blur-medium: 3px; --blur-large: 8px;

  /* Layout: one grid, two rows of equal height */
  --gap: 40px; --row: 180px;
  /* One point of the app's settings card and panel card */
  --u: .95px;
  /* The link card's width, and the scale of the proposal's cover in it and on the dragged file */
  --lc-w: 440px; --cz: 1px; --fz: .74px;
  /* The shelf's scale against the app's points */
  --sh: .82;

  /* The app's panel and card colours, light (PanelKit.swift, PersonCard.swift) */
  --k-ground: #F3F3F6; --k-card: #FFFFFF; --k-card-edge: rgba(0, 0, 0, .05); --k-field: #F3F3F6;
  --k-t1: #23262D; --k-t2: #6C727C; --k-t3: #9AA0AA; --k-glyph: #5C636E;
  --k-accent: #426DC8; --k-accent-fill: 106, 146, 232; --k-wash: rgba(106, 146, 232, .16);
  --k-badge: rgba(15, 20, 30, .055); --k-track: rgba(15, 20, 30, .14); --k-hover: #F8F8FA; --k-primary: #4B7BE3;
  --k-pop: 0 0 0 .6px rgba(0, 0, 0, .20), 0 2px 5px rgba(0, 0, 0, .06), 0 14px 30px rgba(20, 24, 40, .14);
  --k-lift: 0 0 0 .6px rgba(0, 0, 0, .07), 0 1.5px 5px rgba(0, 0, 0, .06), 0 12px 26px -12px rgba(20, 24, 40, .20);
  --k-btn: #FFFFFF; --k-btn-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 1px 1.5px rgba(0, 0, 0, .08);
  /* The drop shelf, light (ShelfInk) */
  --s-ground: #F4F4F1; --s-edge: rgba(17, 16, 20, .10); --s-rim: rgba(255, 255, 255, .70);
  --s-wash: rgba(233, 238, 251, .95); --s-lit: #4B7BE3; --s-lit-top: #6A92E8; --s-on: #FFFFFF; --s-on2: rgba(255, 255, 255, .86);
  --s-accent: #426DC8; --s-text: #111014; --s-text2: #6C6B73;
  --s-near: rgba(58, 98, 196, .28); --s-far: rgba(58, 98, 196, .38);
  --s-shadow: 0 0 0 .5px rgba(17, 16, 20, .10), 0 2px 4px rgba(17, 22, 32, .05), 0 18px 40px -12px rgba(17, 22, 32, .24);
  /* The file */
  --pg-dim: none;
  --f-sel: #4B7BE3; --f-on-sel: #FFFFFF;
}
:root[data-theme="dark"] #share {
  --k-ground: #1E1E20; --k-card: #2C2C2E; --k-card-edge: rgba(255, 255, 255, .06); --k-field: #232325;
  --k-t1: #ECEEF3; --k-t2: #9AA0AD; --k-t3: #6B7280; --k-glyph: #B7BECB;
  --k-accent: #86A9F2; --k-accent-fill: 134, 169, 242; --k-wash: rgba(134, 169, 242, .16);
  --k-badge: rgba(255, 255, 255, .075); --k-track: rgba(255, 255, 255, .16); --k-hover: #323235; --k-primary: #4B7BE3;
  --k-pop: 0 0 0 .6px rgba(255, 255, 255, .24), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 34px rgba(0, 0, 0, .45);
  --k-lift: 0 0 0 .6px rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .30), 0 14px 30px -12px rgba(0, 0, 0, .55);
  --k-btn: #4A4A4F; --k-btn-shadow: 0 0 0 .5px rgba(255, 255, 255, .10), 0 1px 1.5px rgba(0, 0, 0, .30);
  --s-ground: #1E1D22; --s-edge: rgba(255, 255, 255, .09); --s-rim: rgba(255, 255, 255, .14);
  --s-wash: rgba(45, 52, 71, .95); --s-lit: #86A9F2; --s-lit-top: #93B3F4; --s-on: #141317; --s-on2: rgba(20, 19, 23, .86);
  --s-accent: #86A9F2; --s-text: #F4F3F0; --s-text2: #9B9AA1;
  --s-near: rgba(0, 0, 0, .35); --s-far: rgba(134, 169, 242, .30);
  --s-shadow: 0 0 0 .5px rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .35), 0 22px 44px -14px rgba(0, 0, 0, .7);
  --pg-dim: brightness(.9);
  --f-sel: #4B7BE3; --f-on-sel: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #share {
    --k-ground: #1E1E20; --k-card: #2C2C2E; --k-card-edge: rgba(255, 255, 255, .06); --k-field: #232325;
    --k-t1: #ECEEF3; --k-t2: #9AA0AD; --k-t3: #6B7280; --k-glyph: #B7BECB;
    --k-accent: #86A9F2; --k-accent-fill: 134, 169, 242; --k-wash: rgba(134, 169, 242, .16);
    --k-badge: rgba(255, 255, 255, .075); --k-track: rgba(255, 255, 255, .16); --k-hover: #323235; --k-primary: #4B7BE3;
    --k-pop: 0 0 0 .6px rgba(255, 255, 255, .24), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 34px rgba(0, 0, 0, .45);
    --k-lift: 0 0 0 .6px rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .30), 0 14px 30px -12px rgba(0, 0, 0, .55);
    --k-btn: #4A4A4F; --k-btn-shadow: 0 0 0 .5px rgba(255, 255, 255, .10), 0 1px 1.5px rgba(0, 0, 0, .30);
    --s-ground: #1E1D22; --s-edge: rgba(255, 255, 255, .09); --s-rim: rgba(255, 255, 255, .14);
    --s-wash: rgba(45, 52, 71, .95); --s-lit: #86A9F2; --s-lit-top: #93B3F4; --s-on: #141317; --s-on2: rgba(20, 19, 23, .86);
    --s-accent: #86A9F2; --s-text: #F4F3F0; --s-text2: #9B9AA1;
    --s-near: rgba(0, 0, 0, .35); --s-far: rgba(134, 169, 242, .30);
    --s-shadow: 0 0 0 .5px rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .35), 0 22px 44px -14px rgba(0, 0, 0, .7);
    --pg-dim: brightness(.9);
    --f-sel: #4B7BE3; --f-on-sel: #FFFFFF;
  }
}

/* ---------- Head ---------- */
#share .head h2 { font-size: clamp(30px, 3.4vw, 40px); }

/* ---------- The bento: a wide tile over two rows, two tiles stacked beside it ---------- */
#share .bento { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(2, var(--row));
  gap: var(--s4); margin-top: var(--gap); }
#share .t-ways { grid-column: 1; grid-row: 1 / span 2; }
#share .t-ctl { grid-column: 2; grid-row: 1; }
#share .t-req { grid-column: 2; grid-row: 2; }

#share .tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 24px 16px; border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow-card); outline: none; -webkit-tap-highlight-color: transparent; cursor: default;
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out); }
#share .tile:hover, #share .tile.is-playing { box-shadow: var(--shadow-lift); }
#share .tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* The tile playing: a soft ring in Loop blue, as the Capture section's chosen box has */
#share .tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px rgba(var(--k-accent-fill), .55); transition: opacity var(--duration-fast) var(--ease-smooth-out); }
#share .tile.is-playing::before { opacity: 1; }
/* A tile playing sits above its neighbours, so anything that travels past its edge is drawn on top. */
#share .tile.is-playing { z-index: 2; }
#share .tt { position: relative; z-index: 1; }
#share .tile-t { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink1); }
/* One line at every width (measured down to 320) */
#share .tile-p { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink2); white-space: nowrap; }
#share .vg { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 12px; }
#share .cv, #share .rv { display: flex; align-items: flex-end; }

/* The app's own type, as Capture's bar draws it */
#share .vg { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.2; }

/* ================= Share: the shelf on the tile's right edge ================= */
#share .wi { --shelf-w: calc(204px * var(--sh)); --shelf-h: calc(304px * var(--sh)); }

/* The file, centred in the room left of the shelf */
#share .wi-file { position: absolute; z-index: 3; left: calc((100% + 12px - var(--shelf-w)) / 2); top: 50%; display: flex; flex-direction: column; align-items: center; gap: 7px;
  transform: translate(-50%, -50%) translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, 1));
  transition: transform 720ms var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out); }
/* The proposal's cover, in Cobalt's colours: drawn once, sized by --cz (one point of the cover) */
#share .cv-pg { position: relative; display: block; flex: none; width: calc(76 * var(--cz)); height: calc(98 * var(--cz)); border-radius: calc(6 * var(--cz)); overflow: hidden;
  background: #E7ECF8; filter: var(--pg-dim); box-shadow: 0 0 0 1px rgba(13, 26, 58, .08), 0 2px 6px -2px rgba(13, 26, 58, .18); }
#share .cv-pg > * { position: absolute; left: calc(9 * var(--cz)); display: block; }
#share .cv-mark { top: calc(9 * var(--cz)); width: calc(13 * var(--cz)); height: calc(13 * var(--cz)); border-radius: 50%; }
#share .cv-t { height: calc(5 * var(--cz)); border-radius: calc(2 * var(--cz)); background: #0D1A3A; }
#share .cv-t.a { top: calc(34 * var(--cz)); width: calc(50 * var(--cz)); }
#share .cv-t.b { top: calc(42 * var(--cz)); width: calc(34 * var(--cz)); }
#share .cv-hl { top: calc(53 * var(--cz)); width: calc(16 * var(--cz)); height: calc(3 * var(--cz)); border-radius: calc(2 * var(--cz)); background: #2448C2; }
#share .cv-l { width: calc(56 * var(--cz)); height: calc(2.5 * var(--cz)); border-radius: calc(2 * var(--cz)); background: rgba(13, 26, 58, .16); }
#share .cv-l.l1 { top: calc(70 * var(--cz)); }
#share .cv-l.l2 { top: calc(76 * var(--cz)); }
#share .cv-l.l3 { top: calc(82 * var(--cz)); width: calc(38 * var(--cz)); }
/* On the dragged file, as Finder previews it */
#share .doc { display: block; --cz: var(--fz); filter: drop-shadow(0 6px 10px rgba(17, 22, 32, .10));
  transition: filter var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }
#share .fname { padding: 2px 6px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--k-t1); white-space: nowrap;
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), opacity var(--duration-fast) var(--ease-smooth-out); }
/* Picked up: Finder selects it, and the icon lifts */
#share .wi-file.is-held .fname { background: var(--f-sel); color: var(--f-on-sel); }
#share .wi-file.is-held .doc { transform: scale(1.04); filter: drop-shadow(0 2px 2px rgba(17, 22, 32, .10)) drop-shadow(0 14px 18px rgba(17, 22, 32, .16)); }
#share .wi-file.is-drag { opacity: .9; }
/* Over the shelf its name would sit on the shelf's own words, so the name steps out of the way */
#share .wi-file.is-drag .fname { opacity: 0; transition-delay: 120ms; }
/* Let go over Create Link: drawn into its icon */
#share .wi-file.is-in { opacity: 0; transition: transform var(--duration-fast) var(--ease-in-out), opacity 200ms var(--ease-in-out); }
#share .wi-file.is-gone { opacity: 0; visibility: hidden; transition: none; }
#share .wi-file.is-back { transition: opacity var(--duration-slow) var(--ease-smooth-out) 120ms, transform 0s; }

/* The shelf: lightly frosted ground, two targets */
#share .shelf { position: absolute; z-index: 2; right: -12px; top: 50%; display: flex; flex-direction: column; width: var(--shelf-w); height: var(--shelf-h);
  padding: calc(8px * var(--sh)); border-radius: calc(14px * var(--sh)); background: var(--s-ground);
  box-shadow: inset 0 1px 0 var(--s-rim), var(--s-shadow);
  transform: translateY(-50%); opacity: 1;
  transition: opacity 380ms var(--ease-smooth-out) 60ms, transform 380ms var(--ease-smooth-out) 60ms; }
#share .shelf.is-away { opacity: 0; transform: translateY(-50%) translateX(10px); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }

#share .tg { position: relative; display: grid; place-items: center; flex: none; overflow: hidden; border-radius: calc(10px * var(--sh)); background: var(--s-wash);
  transition: height var(--duration-fast) var(--ease-smooth-out), margin-top var(--duration-fast) var(--ease-smooth-out),
    transform var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out); }
#share .tg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(to bottom, var(--s-lit-top) 0%, var(--s-lit) 46%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: opacity var(--duration-quick) var(--ease-smooth-out); }
#share .tg-create { height: calc(288px * var(--sh)); }
#share .tg-custom { height: 0; margin-top: 0; }
#share .shelf[data-l="split"] .tg-create { height: calc(186px * var(--sh)); }
#share .shelf[data-l="split"] .tg-custom { height: calc(94px * var(--sh)); margin-top: calc(8px * var(--sh)); }

#share .tg .tl { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--s-text); white-space: nowrap;
  transition: color var(--duration-quick) var(--ease-smooth-out), opacity 200ms var(--ease-smooth-out), transform 200ms var(--ease-smooth-out); }
#share .tg .ic { width: calc(24px * var(--sh)); height: calc(24px * var(--sh)); margin-bottom: calc(9px * var(--sh)); overflow: visible;
  fill: none; stroke: var(--s-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
#share .tg-custom .ic { margin-bottom: calc(6px * var(--sh)); }
#share .tg .ic.sl circle { fill: var(--s-wash); transition: transform var(--duration-quick) var(--ease-smooth-out), fill var(--duration-quick) var(--ease-smooth-out); }
#share .tg b { font-size: calc(15px * var(--sh)); font-weight: 600; letter-spacing: calc(-.15px * var(--sh)); }
#share .tg i { margin-top: calc(2px * var(--sh)); font-size: calc(12px * var(--sh)); font-weight: 500; font-style: normal; color: var(--s-text2);
  transition: color var(--duration-quick) var(--ease-smooth-out); }
/* Customise Link rises in under Create Link once the file is over the shelf */
#share .tg-custom .tl { opacity: 0; transform: translateY(calc(8px * var(--sh))); }
#share .shelf[data-l="split"] .tg-custom .tl { opacity: 1; transform: none; transition-delay: 30ms; }

/* Lit: the file is over it */
#share .tg.is-lit { transform: translateY(-1px) scale(1.012); box-shadow: 0 1px 2px var(--s-near), 0 6px 14px var(--s-far); }
#share .tg.is-lit::before { opacity: 1; }
#share .tg.is-lit .tl { color: var(--s-on); }
#share .tg.is-lit .ic { stroke: var(--s-on); }
#share .tg.is-lit i { color: var(--s-on2); }
#share .tg.is-lit .ua { transform: translateY(-2px); }
#share .tg.is-recede { transform: scale(.985); opacity: .5; }
/* The upload arrow and the tick that replaces it */
#share .tg .ua { transition: transform var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick) cubic-bezier(.5, 0, .75, 0); }
#share .tg .tk { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 200ms var(--ease-smooth-out); }
#share .tg.is-press { transform: scale(.965); transition-duration: 90ms; }
#share .tg .ic.is-swell { transform: scale(1.1); }
#share .tg.is-landed .ua { transform: translateY(-7px); opacity: 0; }
#share .tg.is-landed .tk { stroke-dashoffset: 0; transition-delay: 60ms; }

/* The link: the file, its address, Copied, and a badge for each setting that is on. It is one of Loop's panels (the
   app's ground, a white card on it; outer radius = inner radius + padding) and keeps one size whatever is on. */
#share .lc { position: absolute; z-index: 2; left: 50%; top: 50%; width: var(--lc-w); max-width: 100%; padding: 8px; border-radius: 18px; background: var(--k-ground);
  box-shadow: var(--k-pop); color: var(--k-t1);
  opacity: 0; visibility: hidden; filter: blur(var(--blur-medium)); transform: translate(-50%, calc(-50% + var(--distance-base)));
  transition: opacity var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), visibility 0s linear var(--duration-quick); }
#share .lc.on { opacity: 1; visibility: visible; filter: blur(0); transform: translate(-50%, -50%);
  transition: opacity var(--duration-slow) var(--ease-smooth-out), filter var(--duration-slow) var(--ease-smooth-out), transform var(--duration-slow) var(--ease-smooth-out), visibility 0s; }
#share .lk { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "pg nm" "pg ad" "pg ft";
  column-gap: 16px; padding: 14px; border-radius: 10px; background: var(--k-card); box-shadow: inset 0 0 0 .5px var(--k-card-edge), 0 1.5px 5px rgba(0, 0, 0, .06); }
#share .lk > .cv-pg { grid-area: pg; }
#share .lk-nm { grid-area: nm; padding-top: 2px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; }
#share .lk-ad { grid-area: ad; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; }
#share .lk-ad .dom { color: var(--k-t3); font-weight: 500; }
#share .lk-ad .nm { color: var(--k-t2); font-weight: 500; }
#share .lk-ft { grid-area: ft; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; height: 28px; }

/* Badges: one for each setting that is on. Each sits in a slot whose width eases open to the badge's own width (--bw,
   measured) while the badge pops in (transitions.dev 03); the row moves, never the card. */
#share .bdgs { display: flex; align-items: center; height: 26px; min-width: 0; }
#share .bw { display: block; flex: none; width: 0; height: 26px; transition: width var(--duration-slow) var(--ease-smooth-out); }
#share .bw.on { width: var(--bw, 32px); }
#share .bb { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; min-width: 26px; border-radius: 7px;
  background: var(--k-wash); color: var(--k-accent); font-size: 12px; font-weight: 600; letter-spacing: -0.003em; white-space: nowrap;
  transform: scale(0); opacity: 0; filter: blur(var(--badge-blur));
  transition: transform var(--badge-pop-close-dur) var(--badge-close-ease), opacity var(--badge-fade-close-dur) var(--badge-close-ease), filter var(--badge-pop-close-dur) var(--badge-close-ease); }
#share .bb.wide { padding: 0 9px 0 7px; }
#share .bw.on .bb { transform: scale(1); opacity: 1; filter: blur(0);
  transition: transform var(--badge-pop-dur) var(--badge-pop-ease) 60ms, opacity var(--badge-fade-dur) var(--badge-pop-ease) 60ms, filter var(--badge-pop-dur) var(--badge-pop-ease) 60ms; }
#share .gl { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#share .bt { font-variant-numeric: tabular-nums; }
/* Copied: the link is on the clipboard; the tick draws as the card arrives (transitions.dev 10) */
#share .cpd { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 11px 0 9px; border-radius: 8px;
  background: var(--k-wash); color: var(--k-accent); font-size: 12.5px; font-weight: 600; letter-spacing: -0.003em; }
#share .ck { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#share .ck path { stroke-dasharray: 15; stroke-dashoffset: 15; }
#share .lc.on .ck path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-medium) var(--ease-smooth-out) 220ms; }

/* The pointer */
#share .ptr { position: absolute; z-index: 6; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none;
  fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35));
  opacity: 0; transform: translate(var(--px, 0px), var(--py, 0px));
  transition: opacity var(--duration-quick) var(--ease-out), transform 720ms var(--ease-smooth-out); }
#share .ptr.on { opacity: 1; }
#share .ptr.is-down { transform: translate(var(--px, 0px), var(--py, 0px)) scale(.92); }
#share .ptr.is-snap { transition: opacity var(--duration-quick) var(--ease-out), transform 0s; }
#share .ptr.is-slow { transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-very-slow) var(--ease-smooth-out); }

/* ================= The app's cards: Control and Requests ================= */
#share .sc { width: 100%; padding: calc(4 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--k-card); box-shadow: var(--k-lift); color: var(--k-t1); }
#share .row { display: flex; align-items: center; gap: calc(11 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u)); }
#share .rg { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: 0 calc(2 * var(--u)); fill: none; stroke: var(--k-glyph); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }
#share .rl { font-size: calc(13 * var(--u)); font-weight: 500; white-space: nowrap; }

/* ---- Control: the four settings, two by two, drawn as the app draws a setting (a symbol, its name, a switch) ---- */
#share .sw4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
#share .st { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 11px;
  border: 0; border-radius: 10px; background: var(--k-card); color: var(--k-t1); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.003em; text-align: left; cursor: pointer;
  box-shadow: var(--k-lift); -webkit-tap-highlight-color: transparent;
  transition: transform var(--duration-quick) var(--ease-out), background-color var(--duration-fast) var(--ease-smooth-out); }
#share .st:hover { background: var(--k-hover); }
#share .st:active { transform: scale(.97); }
#share .st:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#share .stl { white-space: nowrap; }
/* transitions.dev 09, icon swap: the outline symbol and the filled one share a cell */
#share .isw { position: relative; display: inline-grid; width: 16px; height: 16px; color: var(--k-glyph); transition: color var(--duration-fast) var(--ease-in-out); }
#share .st[aria-pressed="true"] .isw { color: var(--k-accent); }
#share .ii { grid-area: 1 / 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease); }
#share .ii.fill { fill: currentColor; stroke: none; }
#share .ii.fill .ln { fill: none; stroke: currentColor; stroke-width: 1.4; }
#share .isw[data-state="a"] .ii[data-icon="a"], #share .isw[data-state="b"] .ii[data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); }
#share .isw[data-state="a"] .ii[data-icon="b"], #share .isw[data-state="b"] .ii[data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }
/* transitions.dev 27, toggle: the thumb travels with a double bounce; the track's colour has its own clock */
#share .tgl { position: relative; display: block; width: 28px; height: 16px; border-radius: 8px; background: var(--k-track); transition: background-color var(--toggle-track) var(--toggle-ease); }
#share .tgl[data-on="true"] { background: var(--k-primary); }
#share .tgl-th { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .22); translate: 0 0; }
#share .tgl[data-on="true"] .tgl-th { translate: var(--toggle-travel) 0; }
#share .tgl.is-init[data-on="true"] .tgl-th { animation: sh-toggle-on var(--toggle-dur) var(--toggle-ease) both; }
#share .tgl.is-init[data-on="false"] .tgl-th { animation: sh-toggle-off var(--toggle-dur) var(--toggle-ease) both; }
@keyframes sh-toggle-on { 0% { translate: 0 0; } 55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; } 80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; } 100% { translate: var(--toggle-travel) 0; } }
@keyframes sh-toggle-off { 0% { translate: var(--toggle-travel) 0; } 55% { translate: calc(0px - var(--toggle-ov1)) 0; } 80% { translate: var(--toggle-ov2) 0; } 100% { translate: 0 0; } }

/* ---- Requests: files arriving ---- */
#share .rq-tx { display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-width: 0; }
#share .rt { font-size: calc(12.5 * var(--u)); font-weight: 500; white-space: nowrap; }
#share .det { display: grid; grid-template-columns: max-content; font-size: calc(10.5 * var(--u)); color: var(--k-t2); }
#share .det .d { grid-area: 1 / 1; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); visibility: hidden;
  transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), visibility 0s linear var(--duration-quick); }
#share .det .d.on { opacity: 1; transform: none; filter: blur(0); visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-in-out) 40ms, transform var(--duration-fast) var(--ease-in-out) 40ms, filter var(--duration-fast) var(--ease-in-out) 40ms, visibility 0s; }
#share .det .d.was { transform: translateY(calc(var(--distance-micro) * -1)); }
#share .det em { font-style: normal; font-weight: 600; color: var(--k-accent); }
#share .rq.live.is-busy .tray { stroke: var(--k-accent); }
#share .rq .tray.is-bob { transform: translateY(calc(1.5 * var(--u))) scale(1.08); transition-duration: var(--duration-micro); }

/* The kind of each file that came in (RequestCanvas.swift KindTile) */
#share .kinds { display: flex; gap: calc(4 * var(--u)); margin-left: auto; }
#share .kt { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u));
  background: var(--k-badge); color: var(--k-t2); font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: calc(.2 * var(--u));
  opacity: 0; transform: translateY(calc(-26 * var(--u))) scale(.92); filter: blur(var(--blur-medium)); }
#share .kt.pic { background: var(--k-wash); color: var(--k-accent); }
#share .kt.in { opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-slow) cubic-bezier(0.34, 1.36, 0.64, 1), filter var(--duration-fast) var(--ease-smooth-out); }
#share .kt.out { transition: opacity var(--duration-quick) var(--ease-in-out); opacity: 0; transform: none; filter: blur(0); }

#share .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Narrower: the wide tile across the top, the two below it ---------- */
@media (max-width: 960px) {
  #share .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  #share .t-ways { grid-column: 1 / span 2; grid-row: 1; min-height: 360px; }
  #share .t-ctl { grid-column: 1; grid-row: 2; }
  #share .t-req { grid-column: 2; grid-row: 2; }
  #share .tile { padding-left: 20px; padding-right: 20px; }
  #share .sw4 { gap: 6px; }
  #share .st { gap: 6px; padding: 0 8px 0 9px; }
}

/* ---------- Too narrow for two tiles side by side: one column, still the desktop card ---------- */
@media (max-width: 760px) {
  #share .bento { grid-template-columns: minmax(0, 1fr); }
  #share .t-ways, #share .t-ctl, #share .t-req { grid-column: 1; grid-row: auto; }
}

/* ---------- Phones: one column. The card puts its badges and Copied on their own line under the file. ---------- */
@media (max-width: 640px) {
  #share { --gap: 36px; --sh: .58; --u: .92px; --cz: .6px; --fz: .62px; }
  #share .bento { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  #share .t-ways, #share .t-ctl, #share .t-req { grid-column: 1; grid-row: auto; }
  #share .t-ways { min-height: 0; }
  #share .tile { padding: 16px 18px 16px; border-radius: 18px; }
  #share .wi { flex: none; height: 204px; }
  #share .shelf { right: -10px; }
  #share .lc { width: 100%; }
  #share .lk { grid-template-rows: auto auto auto; grid-template-areas: "pg nm" "pg ad" "ft ft"; padding: 12px; column-gap: 12px; }
  #share .lk-nm { font-size: 15px; padding-top: 4px; }
  /* The address on two even lines, its domain then its name */
  #share .lk-ad { display: flex; flex-direction: column; font-size: 12.5px; }
  #share .lk-ft { margin-top: 12px; }
  #share .bw.on { width: var(--bw, 30px); }
  #share .st { gap: 7px; padding: 0 9px 0 10px; }
}
/* The narrowest phones: the switches keep their name and switch (the symbol steps aside), and the Expiry badge shows
   its calendar alone, so the badges and Copied share one line */
@media (max-width: 360px) {
  #share .tile { padding-left: 16px; padding-right: 16px; }
  #share .tile-p { font-size: 14px; }
  #share .lc { padding: 6px; border-radius: 16px; }
  #share .st { grid-template-columns: minmax(0, 1fr) auto; padding: 0 9px 0 12px; font-size: 12.5px; }
  #share .st .isw { display: none; }
  #share .bb.wide { padding: 0; width: 26px; }
  #share .bb.wide .bt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #share .lk-ft { gap: 8px; }
  #share .cpd { gap: 5px; padding: 0 9px 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  #share .tile, #share .tile::before, #share .wi-file, #share .doc, #share .fname, #share .shelf, #share .tg, #share .tg::before, #share .tg .tl, #share .tg .ic, #share .tg .ua, #share .tg .tk,
  #share .tg i, #share .lc, #share .ck path, #share .ptr, #share .rg, #share .bw, #share .bb, #share .st, #share .isw, #share .ii, #share .tgl,
  #share .det .d, #share .kt { transition: none !important; }
  #share .tgl-th { animation: none !important; }
}

/* ================= Requests, round 2 ================= */
/* States that share one cell and swap in place (transitions.dev 04, text states swap) */
#share .qs { grid-area: 1 / 1; opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); visibility: hidden;
  transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), visibility 0s linear var(--duration-quick); }
#share .qs.on { opacity: 1; transform: none; filter: blur(0); visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-in-out) 40ms, transform var(--duration-fast) var(--ease-in-out) 40ms, filter var(--duration-fast) var(--ease-in-out) 40ms, visibility 0s; }
#share .qs.was { transform: translateY(calc(var(--distance-micro) * -1)); }
#share .xk { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#share .xk path { stroke-dasharray: 15; stroke-dashoffset: 15; transition: stroke-dashoffset var(--duration-quick) var(--ease-out); }
#share .is-ticked .xk path, #share .is-ticked.xk path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-medium) var(--ease-smooth-out) 120ms; }

/* ---- Requests: the drop area of the page the person you ask sees (pages/assets/request.js, viewer.css .rq-drop),
   on its own. It spans the tile's content width and is exactly the height of the Control tile's switches, so the two
   right-hand tiles line up. Files fall in, each uploads in its row, and the page says All Done. ---- */
#share .ra-pg { position: relative; width: 100%; color: var(--k-t1); }
/* The well: the page's own drop area, a dashed edge inside a soft sunken square */
#share .ra-well { position: relative; display: grid; height: calc(2 * 38px + 8px); border-radius: 12px; background: var(--k-ground);
  box-shadow: inset 0 1.5px 4px rgba(32, 30, 26, .05), inset 0 0 0 1px rgba(0, 0, 0, .04);
  transition: background-color var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); }
#share .ra-well::after { content: ""; position: absolute; inset: 6px; border-radius: 8px; border: 1.25px dashed rgba(var(--k-accent-fill), 0); pointer-events: none;
  transition: border-color var(--duration-medium) var(--ease-smooth-out); }
#share .ra-well.is-drop::after { border-color: rgba(var(--k-accent-fill), .32); }
#share .ra-well.is-over { background: var(--k-wash); transform: scale(1.01); }
#share .ra-well.is-over::after { border-color: var(--k-accent); }
#share .ra-drop, #share .ra-done { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; }
#share .ra-glyph { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--k-wash); color: var(--k-accent); }
#share .ra-glyph svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#share .ra-dw { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
#share .ra-dw b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
#share .ra-dw i { font-style: normal; font-size: 11.5px; color: var(--k-t3); }
#share .ra-done .ra-dw i { color: var(--k-t2); }
/* Each file on its way: a soft wash fills the row from the left, then the size and a tick take the percentage's place.
   Three rows share the well's height evenly, inside the same 6px edge as the dashed line. */
#share .ra-ups { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 6px; }
#share .ra-up { position: relative; display: flex; align-items: center; gap: 8px; min-height: 0; padding: 0 10px 0 6px; border-radius: 6px; overflow: hidden; isolation: isolate; font-size: 11.5px; }
#share .ra-fill { position: absolute; inset: 0; z-index: -1; background: rgba(var(--k-accent-fill), .16); transform-origin: left center; transform: scaleX(var(--p, 0));
  transition: transform 160ms linear, opacity var(--duration-very-slow) var(--ease-smooth-out) 200ms; }
#share .ra-up.done .ra-fill { opacity: 0; }
/* The square at the start of a row: a picture mark or a document mark, as the page draws a file it has no preview of */
#share .ra-k { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--k-badge); color: var(--k-t2); }
#share .ra-k svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#share .ra-k.pic { background: var(--k-wash); color: var(--k-accent); }
#share .ra-n { flex: 1 1 auto; min-width: 0; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; }
#share .ra-st { display: grid; justify-items: end; align-items: center; flex: none; }
#share .ra-st > * { grid-area: 1 / 1; }
#share .ra-pct { color: var(--k-t3); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out); }
#share .ra-up.done .ra-pct { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); filter: blur(var(--blur-small)); }
#share .ra-fin { display: inline-flex; align-items: center; gap: 6px; color: var(--k-t3); font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small));
  transition: opacity var(--duration-fast) var(--ease-in-out) 100ms, transform var(--duration-fast) var(--ease-in-out) 100ms, filter var(--duration-fast) var(--ease-in-out) 100ms; }
#share .ra-up.done .ra-fin { opacity: 1; transform: none; filter: blur(0); }
#share .ra-ok { width: 11px; height: 11px; fill: none; stroke: var(--k-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: scale(.4); opacity: 0;
  transition: transform var(--duration-very-slow) var(--ease-bounce) 160ms, opacity var(--duration-fast) var(--ease-out) 160ms; }
#share .ra-up.done .ra-ok { transform: none; opacity: 1; }
/* All Done: a disc blooms and the tick draws */
#share .ra-seal { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--k-wash); color: var(--k-accent);
  transform: scale(.6); transition: transform var(--duration-very-slow) var(--ease-bounce); }
#share .ra-done.on .ra-seal { transform: none; }
#share .ra-seal .xk { width: 16px; height: 16px; }
/* Three files on their way in, from above the middle of the well */
#share .ra-drag { position: absolute; z-index: 3; left: 50%; top: -34px; width: 40px; height: 34px; margin-left: -20px; pointer-events: none; opacity: 0;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--ds, 1));
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform 560ms var(--ease-smooth-out); }
#share .ra-drag.on { opacity: 1; }
#share .ra-drag.in { --dy: 52px; --ds: .7; opacity: 0; transition: opacity var(--duration-fast) var(--ease-in-out) 300ms, transform 560ms var(--ease-smooth-out); }
#share .ra-f { position: absolute; left: 9px; top: 2px; width: 22px; height: 28px; border-radius: 4px; background: var(--k-card);
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .14), 0 4px 10px -3px rgba(20, 24, 40, .25); }
#share .ra-f:nth-child(1) { transform: rotate(-9deg) translateX(-5px); background: #E7ECF8; }
#share .ra-f:nth-child(2) { transform: rotate(6deg) translateX(5px); }
#share .ra-f:nth-child(3) { background: linear-gradient(to bottom, #A9C2EE 0 58%, #7E9B86 58%); }

/* Where the switches sit 6px apart, the well matches their block */
@media (max-width: 960px) { #share .ra-well { height: calc(2 * 38px + 6px); } }
/* The narrowest phones: the switches above lose their symbol, so the rows lose a little air to match */
@media (max-width: 360px) {
  #share .ra-up { gap: 6px; padding: 0 8px 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
  #share .ra-well, #share .ra-well::after, #share .ra-fill, #share .ra-pct, #share .ra-fin, #share .ra-ok, #share .ra-seal, #share .ra-drag, #share .qs, #share .xk path { transition: none !important; }
}

/* capture.css */
/* Loop site: the Capture section, panel version (prototype, 2026-10-14).
   Left: Loop's menu bar panel (app/Sources/Views/MenuBarView.swift, PanelKit.swift) hanging from a slim slice of the
   Mac's menu bar, the Loop mark lit. Right: the Screenshots and Recordings boxes, with Loop's bar under them
   (app/Sources/Views/RecordingPill.swift). The pointer presses Capture in the panel, picks Area or Record, and the bar
   comes alive and runs today's take; the link then lands at the top of the panel's Links with "Link Copied".
   Every rule is scoped to #capture; motion values are transitions.dev tokens. */

/* ---------- Tokens ---------- */
#capture {
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms;
  --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out; --ease-linear: linear;
  --distance-micro: 4px; --distance-base: 8px; --distance-medium: 12px;
  --blur-small: 2px; --blur-medium: 3px; --blur-large: 8px;
  --check-draw: 350ms;

  /* One unit = one point of the app's bar. */
  --u: 1.15px;
  --h: calc(32 * var(--u));
  --stage-w: 1000px;
  /* The panel's scale: one unit = one point of the app's panel */
  --pz: 1;

  /* The bar's CardInk, light (PersonCard.swift) */
  --k-ground: #F3F3F6; --k-card: #FFFFFF; --k-card-edge: rgba(0, 0, 0, .05);
  --k-t1: #23262D; --k-t2: #6C727C; --k-t3: #9AA0AA; --k-glyph: #5C636E;
  --k-accent: #426DC8; --k-accent-fill: 106, 146, 232; --k-primary: #4B7BE3; --k-wash: rgba(106, 146, 232, .16);
  --k-badge: rgba(15, 20, 30, .055); --k-chip: rgba(255, 255, 255, .62); --k-chip-shadow: rgba(0, 0, 0, .06);
  --k-hover: #FFFFFF; --k-down: #E9EBF0;
  --k-pop: 0 0 0 .6px rgba(0, 0, 0, .20), 0 2px 5px rgba(0, 0, 0, .06), 0 14px 30px rgba(20, 24, 40, .14);
  --k-rim: #FFFFFF;
  --room-a: #E4E9F1; --room-b: #CBD4E1;

  /* The panel's PanelInk, light (PanelKit.swift) */
  --p-t1: #23262D; --p-t2: #6C727C; --p-t3: #9AA0AA; --p-accent: #426DC8; --p-glyph: #5C636E;
  --p-hover: rgba(15, 20, 30, .035); --p-card: #FFFFFF; --p-card-edge: rgba(0, 0, 0, .05); --p-card-shadow: rgba(0, 0, 0, .06);
  --p-ground: #F3F3F6; --p-ground-edge: rgba(0, 0, 0, .06); --p-badge: rgba(15, 20, 30, .055); --p-accent-badge: rgba(66, 109, 200, .16);
  --p-win: 0 0 0 .5px rgba(0, 0, 0, .10), 0 2px 6px rgba(20, 24, 40, .06), 0 22px 48px -12px rgba(20, 24, 40, .22);
  /* The menu bar slice */
  --mb-bg: #ECEEF3; --mb-ink: rgba(17, 16, 20, .86); --mb-lit: rgba(17, 16, 20, .11);
  --mb-shadow: 0 0 0 .5px rgba(17, 22, 32, .07), 0 1px 3px rgba(17, 22, 32, .05);
}
:root[data-theme="dark"] #capture {
  --k-ground: #1E1E20; --k-card: #2C2C2E; --k-card-edge: rgba(255, 255, 255, .06);
  --k-t1: #ECEEF3; --k-t2: #9AA0AD; --k-t3: #6B7280; --k-glyph: #B7BECB;
  --k-accent: #86A9F2; --k-accent-fill: 134, 169, 242; --k-primary: #4B7BE3; --k-wash: rgba(134, 169, 242, .16);
  --k-badge: rgba(255, 255, 255, .075); --k-chip: rgba(255, 255, 255, .05); --k-chip-shadow: rgba(0, 0, 0, .25); --k-hover: rgba(255, 255, 255, .10); --k-down: rgba(255, 255, 255, .16);
  --k-pop: 0 0 0 .6px rgba(255, 255, 255, .24), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 34px rgba(0, 0, 0, .45);
  --room-a: #2E3542; --room-b: #1D222B;
  --p-t1: #ECEEF3; --p-t2: #9AA0AD; --p-t3: #6B7280; --p-accent: #86A9F2; --p-glyph: #B7BECB;
  --p-hover: rgba(255, 255, 255, .045); --p-card: #2C2C2E; --p-card-edge: rgba(255, 255, 255, .06); --p-card-shadow: rgba(0, 0, 0, .22);
  --p-ground: #1E1E20; --p-ground-edge: rgba(255, 255, 255, .08); --p-badge: rgba(255, 255, 255, .075); --p-accent-badge: rgba(134, 169, 242, .16);
  --p-win: 0 0 0 .5px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .35), 0 24px 54px -12px rgba(0, 0, 0, .6);
  --mb-bg: rgba(40, 40, 46, .72); --mb-ink: rgba(245, 245, 247, .88); --mb-lit: rgba(255, 255, 255, .16);
  --mb-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #capture {
    --k-ground: #1E1E20; --k-card: #2C2C2E; --k-card-edge: rgba(255, 255, 255, .06);
    --k-t1: #ECEEF3; --k-t2: #9AA0AD; --k-t3: #6B7280; --k-glyph: #B7BECB;
    --k-accent: #86A9F2; --k-accent-fill: 134, 169, 242; --k-primary: #4B7BE3; --k-wash: rgba(134, 169, 242, .16);
    --k-badge: rgba(255, 255, 255, .075); --k-chip: rgba(255, 255, 255, .05); --k-chip-shadow: rgba(0, 0, 0, .25); --k-hover: rgba(255, 255, 255, .10); --k-down: rgba(255, 255, 255, .16);
    --k-pop: 0 0 0 .6px rgba(255, 255, 255, .24), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 34px rgba(0, 0, 0, .45);
    --room-a: #2E3542; --room-b: #1D222B;
    --p-t1: #ECEEF3; --p-t2: #9AA0AD; --p-t3: #6B7280; --p-accent: #86A9F2; --p-glyph: #B7BECB;
    --p-hover: rgba(255, 255, 255, .045); --p-card: #2C2C2E; --p-card-edge: rgba(255, 255, 255, .06); --p-card-shadow: rgba(0, 0, 0, .22);
    --p-ground: #1E1E20; --p-ground-edge: rgba(255, 255, 255, .08); --p-badge: rgba(255, 255, 255, .075); --p-accent-badge: rgba(134, 169, 242, .16);
    --p-win: 0 0 0 .5px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .35), 0 24px 54px -12px rgba(0, 0, 0, .6);
    --mb-bg: rgba(40, 40, 46, .72); --mb-ink: rgba(245, 245, 247, .88); --mb-lit: rgba(255, 255, 255, .16);
    --mb-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .3);
  }
}

/* ---------- Head ---------- */
#capture .head h2 { font-size: clamp(30px, 3.4vw, 40px); }

/* ---------- The stage ----------
   Phones and narrow windows: the panel's block, then the two boxes, then the bar's block. Desktop (below): even
   blocks, the panel on the left and the three on the right. The panel keeps one size throughout, so nothing moves. */
#capture { --gap: 36px; }
#capture .cap { position: relative; max-width: var(--stage-w); margin: var(--gap) auto 0; display: flex; flex-direction: column; gap: 28px; }
/* The two boxes are Share's tiles: the same corner, white and shadow. The panel stands on its own. */
#capture .kind { border-radius: 20px; background: var(--card); box-shadow: var(--shadow-card); }
#capture .mac { position: relative; }
#capture .side { display: flex; flex-direction: column; min-width: 0; }

/* ---------- The menu bar slice and the panel, drawn in the app's own points ---------- */
#capture .mac-in { zoom: var(--pz); width: 320px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body);
  -webkit-font-smoothing: antialiased; line-height: 1.2; color: var(--p-t1); }
/* The menu bar: a slice across the top of the block, the Loop mark in the middle, fading out the same way both sides */
#capture .mb { zoom: var(--pz); position: relative; display: flex; align-items: center; justify-content: center; height: 24px;
  background: var(--mb-bg); color: var(--mb-ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body);
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 34%, #000 66%, transparent 96%); mask-image: linear-gradient(to right, transparent 4%, #000 34%, #000 66%, transparent 96%); }
#capture .mb-it { display: grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 5px; transition: background-color var(--duration-fast) var(--ease-smooth-out); }
#capture .mb-it svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* While its panel is open, the Mac draws a soft highlight behind the status item */
#capture .mac:not(.is-away) .mb-loop { background: var(--mb-lit); }

/* The mark (StatusIcon.swift): a circle with an arrow; when a link is made the arrow folds into a tick, holds, and
   unfolds back. Here the two cross over (transitions.dev 09, icon swap). */
#capture .mk .mk-a, #capture .mk .mk-t { transform-origin: 9px 9px; transition: opacity var(--duration-fast) cubic-bezier(0.2, 0, 0, 1), transform var(--duration-fast) cubic-bezier(0.2, 0, 0, 1), filter var(--duration-fast) cubic-bezier(0.2, 0, 0, 1); }
#capture .mk .mk-t { opacity: 0; transform: scale(.5); filter: blur(1px); }
#capture .mac.is-done .mb .mk-a { opacity: 0; transform: scale(.5); filter: blur(1px); }
#capture .mac.is-done .mb .mk-t { opacity: 1; transform: none; filter: blur(0); }

/* As in the app, the panel grows when Capture opens into its row of four and when Link Copied arrives, and settles
   back after (its parts ease open and shut, so its height follows: transitions.dev 01, card resize). */
#capture .pnl { position: relative; margin-top: 8px; padding: 10px; border-radius: 14px; background: var(--p-ground); box-shadow: var(--p-win);
  transition: opacity var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out), filter var(--duration-medium) var(--ease-smooth-out); }
/* While the bar is busy, the panel steps back (in the app it closes; here it stays in view so the link can land in it) */
#capture .mac.is-away .pnl { opacity: .4; filter: saturate(.8); }

#capture .p-title { display: flex; align-items: center; gap: 7px; padding: 2px 6px 0; }
#capture .p-title .mk { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--p-t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#capture .p-title b { font-size: 13px; font-weight: 700; }
#capture .p-title .host { margin-left: auto; font-size: 11px; color: var(--p-t3); white-space: nowrap; }

/* StackCard: white, a half-point edge and a soft shadow; no hairlines between rows on the site */
#capture .sc { padding: 4px; border-radius: 12px; background: var(--p-card); box-shadow: inset 0 0 0 .5px var(--p-card-edge), 0 1.5px 10px var(--p-card-shadow); }
#capture .p-blk { margin-top: 12px; }
#capture .sh { display: flex; align-items: center; gap: 8px; padding: 7px 8px; }
#capture .sh-w { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#capture .sh-t { font-size: 13px; font-weight: 600; color: var(--p-t1); }
#capture .sh-v { font-size: 11px; color: var(--p-t2); white-space: nowrap; }
#capture .chev { width: 18px; height: 18px; display: grid; place-items: center; color: var(--p-t3); flex: none; }
#capture .chev svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#capture .sh + .rows, #capture .sh + .rw { margin-top: 2.5px; }

/* A row: 46 points, the glyph in an 18-point column, the title over one line of detail */
#capture .rows { display: flex; flex-direction: column; }
#capture .rw { display: grid; grid-template-rows: 1fr; opacity: 1; transform: none;
  transition: grid-template-rows var(--duration-medium) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-medium) var(--ease-smooth-out); }
#capture .rw > .rw-in { overflow: hidden; min-height: 0; }
#capture .rw.is-in, #capture .rw.is-out { grid-template-rows: 0fr; opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); }
#capture .rw.is-out { transition: grid-template-rows var(--duration-medium) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-out), transform var(--duration-medium) var(--ease-smooth-out); }
#capture .row { display: flex; align-items: center; gap: 11px; height: 46px; padding: 0 8px; border-radius: 8px; transition: background-color var(--duration-fast) var(--ease-smooth-out); }
#capture .row.is-new { background: var(--p-hover); }
#capture .ri { width: 18px; display: grid; place-items: center; flex: none; color: var(--p-glyph); }
#capture .ri svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
#capture .ri svg .f { fill: currentColor; stroke: none; }
#capture .rt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#capture .rt b { font-size: 12.5px; font-weight: 500; color: var(--p-t1); white-space: nowrap; }
#capture .rt small { font-size: 10.5px; color: var(--p-t2); white-space: nowrap; }
#capture .rt small em { font-style: normal; font-weight: 600; color: var(--p-accent); }

/* The upload card at the top: Link Copied and the link's name (uploadCard in MenuBarView.swift).
   It grows in from nothing and the cards below make room (transitions.dev 01, card resize). */
#capture .p-up { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-medium) var(--ease-smooth-out); }
#capture .p-up > div { overflow: hidden; min-height: 0; }
#capture .p-up .sc { margin-top: 12px; opacity: 0; transform: translateY(-6px); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-medium) var(--ease-smooth-out); }
#capture .mac.has-up .p-up { grid-template-rows: 1fr; }
#capture .mac.has-up .p-up .sc { opacity: 1; transform: none; transition-delay: 60ms; }
#capture .up { display: flex; align-items: center; gap: 11px; padding: 8px; }
#capture .up .ri { color: var(--p-accent); }
#capture .up .ri svg { width: 15px; height: 15px; }
#capture .up .ri .tk { fill: none; stroke: var(--p-card); stroke-width: 1.6; stroke-dasharray: 10; stroke-dashoffset: 10; }
#capture .mac.has-up .up .ri .tk { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw) var(--ease-smooth-out) 220ms; }
#capture .up b { font-weight: 600; }

/* The foot: Capture on a row of its own, then Open and Settings */
#capture .chev.shut svg { transform: rotate(-90deg); }
#capture .p-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
#capture .ctrl { position: relative; border-radius: 10px; background: var(--p-card); box-shadow: inset 0 0 0 .5px var(--p-card-edge), 0 1.5px 10px var(--p-card-shadow);
  transition: transform var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }
#capture .ctrl.is-hover { box-shadow: inset 0 0 0 1px rgba(127, 130, 140, .32), 0 1.5px 10px var(--p-card-shadow); }
#capture .ctrl.is-press { transform: scale(.97); transition-duration: var(--duration-micro); }
#capture .w { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 600; color: var(--p-t1); white-space: nowrap; }
#capture .kh { display: inline-flex; align-items: baseline; gap: 1.5px; color: var(--p-t3); font-weight: 500; }
#capture .kh i { font-style: normal; font-size: 9.5px; font-weight: 600; }
#capture .kh span { font-size: 10.5px; }
#capture .fbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#capture .fb { display: grid; place-items: center; height: 32px; }

/* CaptureStrip: a click turns the button, in place, into a row of four; it grows to fit the row */
#capture .cstrip { height: 32px; transition: height var(--duration-slow) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }
#capture .cstrip.is-open { height: 64px; transition: height var(--duration-slow) cubic-bezier(0.34, 1.36, 0.64, 1), transform var(--duration-quick) var(--ease-out); }
#capture .cs-btn { position: absolute; inset: 0; display: grid; place-items: center;
  transition: opacity var(--duration-fast) var(--ease-smooth-out) 80ms, transform var(--duration-fast) var(--ease-smooth-out) 80ms; }
#capture .cstrip.is-open .cs-btn { opacity: 0; transform: scale(.94); transition: opacity 120ms var(--ease-smooth-out), transform 120ms var(--ease-smooth-out); }
#capture .cs-btn .stop { display: none; color: var(--p-accent); }
#capture .mac.is-rec .cs-btn .go { display: none; }
#capture .mac.is-rec .cs-btn .stop { display: inline; }
#capture .tiles { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; padding: 4px 6px; pointer-events: none; }
#capture .tile { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 5px; border-radius: 6px;
  opacity: 0; transform: translateY(7px);
  transition: opacity 100ms var(--ease-smooth-out), transform 100ms var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out); }
#capture .cstrip.is-open .tile { opacity: 1; transform: none;
  transition: opacity var(--duration-medium) var(--ease-smooth-out) calc(50ms + var(--i) * 35ms), transform var(--duration-medium) cubic-bezier(0.34, 1.3, 0.64, 1) calc(50ms + var(--i) * 35ms), background-color var(--duration-quick) var(--ease-smooth-out); }
#capture .tile .tb { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--p-badge); color: var(--p-glyph);
  transition: transform var(--duration-quick) var(--ease-out); }
#capture .tile .tb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
#capture .tile .tb svg .f { fill: currentColor; stroke: none; }
#capture .tile b { font-size: 10.5px; font-weight: 600; color: var(--p-t1); }
#capture .tile.rec .tb { background: var(--p-accent-badge); color: var(--p-accent); }
#capture .tile.rec b { color: var(--p-accent); }
#capture .tile.is-hover { background: var(--p-hover); }
#capture .tile.is-hover .tb { transform: scale(1.06); }
#capture .tile.is-press { transform: scale(.95) !important; transition-duration: var(--duration-micro) !important; }

/* ---------- Loop's bar ----------
   One size for every state of both takes, set by the script to fit the widest state (--bar-w). While Loop is not
   capturing it rests quietly; it comes alive when a capture starts. */
/* Each box carries its own copy of the bar under its words */
#capture .screen { position: relative; margin-top: 16px; -webkit-tap-highlight-color: transparent; }
#capture .rig { position: relative; max-width: 100%; }
#capture .bar { position: relative; z-index: 2; display: flex; align-items: center; gap: calc(8 * var(--u));
  width: var(--bar-w, auto); max-width: 100%; padding: calc(8 * var(--u));
  border-radius: calc(12 * var(--u)); background: var(--k-ground);
  box-shadow: inset 0 0 0 calc(1.25 * var(--u)) rgba(var(--k-accent-fill), .35), var(--k-pop);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body); -webkit-font-smoothing: antialiased;
  line-height: 1; white-space: nowrap; color: var(--k-t1);
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-medium) var(--ease-smooth-out), filter var(--duration-medium) var(--ease-smooth-out); }
#capture .kind[data-state="rec"] .bar, #capture .kind.is-picking .bar { box-shadow: inset 0 0 0 calc(1.25 * var(--u)) rgba(var(--k-accent-fill), .9), var(--k-pop); }

#capture .card { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; flex: 1 1 0; min-width: 0; height: var(--h); overflow: hidden;
  padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--k-card);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--k-card-edge); }
#capture .tl { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: calc(8 * var(--u)); width: max-content;
  font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: -0.003em; color: var(--k-t1);
  opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out), filter var(--duration-fast) var(--ease-in-out), visibility 0s linear var(--duration-fast); }
#capture .tl.on { opacity: 1; transform: none; filter: blur(0); visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-in-out) 60ms, transform var(--duration-fast) var(--ease-in-out) 60ms, filter var(--duration-fast) var(--ease-in-out) 60ms, visibility 0s; }
#capture .tl.was { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); filter: blur(var(--blur-small));
  transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), visibility 0s linear var(--duration-quick); }
#capture .bdg { display: grid; place-items: center; flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: calc(6 * var(--u)); background: var(--k-badge); color: var(--k-glyph); }
#capture .bdg.lit { background: var(--k-wash); color: var(--k-accent); }
#capture .bdg .g { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#capture .g-rec .fill { fill: currentColor; stroke: none; }
#capture .t-rec.on .g-rec .fill { animation: cap-breathe 2600ms var(--ease-in-out) infinite; }
/* Held still at rest: no breathing, no ticking */
#capture .kind[data-state="still"] .t-rec .g-rec .fill { animation: none; }
@keyframes cap-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#capture .g-done path { stroke-width: 1.9; stroke-dasharray: 15; stroke-dashoffset: 15; }
#capture .t-link.on .g-done path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw) var(--ease-smooth-out) 140ms; }
#capture .tx { display: inline; }
#capture .tx .ln { display: inline; }
#capture .rec-w { color: var(--k-accent); }
#capture .clk { display: inline-flex; font-weight: 500; font-variant-numeric: tabular-nums; }
#capture .clk .d { display: inline-block; }
#capture .clk .d.pop { animation: cap-digit var(--duration-medium) var(--ease-smooth-out) both; }
@keyframes cap-digit { 0% { transform: translateY(var(--distance-micro)); opacity: 0; filter: blur(var(--blur-small)); } 100% { transform: none; opacity: 1; filter: blur(0); } }
#capture .meter { display: inline-flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(14 * var(--u)); }
#capture .meter i { display: block; width: calc(2 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--k-accent); opacity: .75;
  transition: height var(--duration-micro) var(--ease-linear); }
#capture .t-link { font-size: calc(13 * var(--u)); }
#capture .t-link .dom { font-weight: 500; color: var(--k-t3); }
#capture .t-link .name { font-weight: 600; color: var(--k-t1); }

#capture .ctl { position: relative; flex: none; width: var(--ctl-w, auto); height: var(--h); transition: width var(--duration-slow) var(--ease-smooth-out); }
#capture .cl { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: calc(8 * var(--u)); width: max-content;
  opacity: 0; transform: scale(.97); filter: blur(var(--blur-small)); visibility: hidden;
  transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out), filter var(--duration-quick) var(--ease-out), visibility 0s linear var(--duration-quick); }
#capture .cl.on { opacity: 1; transform: none; filter: blur(0); visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-smooth-out) 80ms, transform var(--duration-fast) var(--ease-smooth-out) 80ms, filter var(--duration-fast) var(--ease-smooth-out) 80ms, visibility 0s; }
#capture .btn, #capture .sw { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; height: var(--h);
  border-radius: calc(7 * var(--u)); transition: transform var(--duration-quick) var(--ease-out), background-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out); }
#capture .btn { gap: calc(6 * var(--u)); padding: 0 calc(11 * var(--u)); background: var(--k-chip); color: var(--k-t1);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--k-card-edge), 0 calc(.5 * var(--u)) calc(1.5 * var(--u)) var(--k-chip-shadow);
  font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: -0.003em; }
#capture .btn .sym { width: calc(11 * var(--u)); height: calc(11 * var(--u)); fill: currentColor; flex: none; }
#capture .btn.primary { background: var(--k-primary); color: #fff; box-shadow: none; }
#capture .btn.primary .sym { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
#capture .btn.copied { background: var(--k-wash); color: var(--k-accent); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--k-accent-fill), .5); }
#capture .btn.is-hover { background: var(--k-hover); }
#capture .btn.is-hover.is-press { background: var(--k-down); }
#capture .sw { width: calc(34 * var(--u)); background: var(--k-chip); color: var(--k-t3); box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--k-card-edge); }
#capture .sw.is-on { background: var(--k-wash); color: var(--k-accent); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(var(--k-accent-fill), .5); }
#capture .sw .g { position: absolute; width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: currentColor;
  transition: opacity var(--duration-fast) cubic-bezier(0.2, 0, 0, 1), transform var(--duration-fast) cubic-bezier(0.2, 0, 0, 1), filter var(--duration-fast) cubic-bezier(0.2, 0, 0, 1); }
#capture .sw .g .cut { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#capture .sw .g-on { opacity: 0; transform: scale(.25); filter: blur(4px); }
#capture .sw.is-on .g-on { opacity: 1; transform: none; filter: blur(0); }
#capture .sw.is-on .g-off { opacity: 0; transform: scale(.25); filter: blur(4px); }
#capture .bar .is-press { transform: scale(.96); transition-duration: var(--duration-micro); }

/* The pointer: one for the whole stage, from the panel to the bar */
#capture .ptr { position: absolute; z-index: 6; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none;
  fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35));
  opacity: 0; transform: translate(var(--px, 0px), var(--py, 0px));
  transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-very-slow) var(--ease-smooth-out); }
#capture .ptr.on { opacity: 1; }
#capture .ptr.is-down { transform: translate(var(--px, 0px), var(--py, 0px)) scale(.92); transition-duration: var(--duration-micro), var(--duration-micro); }

/* The camera bubble, beside the bar */
/* The camera bubble, on the bar's top right corner, where the box has room */
#capture .bubble { position: absolute; z-index: 3; right: -10px; bottom: calc(100% - 16px); width: 46px; height: 46px; border-radius: 50%;
  background: var(--k-rim); padding: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 12px 28px -8px rgba(20, 24, 40, .30);
  opacity: 0; transform: scale(.6); filter: blur(var(--blur-medium)); transform-origin: 70% 100%; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out); }
#capture .kind.has-cam[data-state="rec"] .bubble { opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-smooth-out); }
#capture .bubble svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
#capture .bubble .room-a { stop-color: var(--room-a); }
#capture .bubble .room-b { stop-color: var(--room-b); }
#capture .bubble .me { transform-origin: 50px 100px; }
#capture .kind.has-cam[data-state="rec"] .bubble .me { animation: cap-sway 3200ms var(--ease-in-out) infinite; }
@keyframes cap-sway { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-1.6deg) translateY(.6px); } }

/* ---------- The two boxes: a title and one line each, an icon tile beside the words ---------- */
#capture .side { gap: 16px; }
#capture .kind { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 22px 24px;
  border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-out); }
#capture .kind::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px rgba(var(--k-accent-fill), .55); transition: opacity var(--duration-fast) var(--ease-smooth-out); }
#capture .kind[aria-pressed="true"] { box-shadow: var(--shadow-lift); }
#capture .kind[aria-pressed="true"]::before { opacity: 1; }
#capture .kind:active { transform: scale(.99); }
#capture .kind:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#capture .kind-h { display: flex; align-items: center; gap: 16px; min-width: 0; }
#capture .kind-w { display: flex; flex-direction: column; min-width: 0; }
#capture .kind-t { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink1); }
#capture .kind-p { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink2); white-space: nowrap; }
#capture .kico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--card);
  box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(17, 22, 32, .05); color: var(--k-accent); }
#capture .kico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

#capture .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  #capture { --u: .86px; --h: calc(42 * var(--u)); }
  #capture .cap { gap: 28px; }
  /* The bar takes nearly the box's whole width on phones; the words keep their inset */
  #capture .kind { border-radius: 18px; padding: 18px 10px 10px; }
  #capture .kind-h { padding: 0 6px; }
  #capture .t-prompt .bdg { display: none; }
  #capture .side { gap: 12px; }
  #capture .screen { margin-top: 14px; }
  #capture .btn.cancel { display: none; }
  #capture .sw { width: calc(30 * var(--u)); }
  #capture .tx { display: flex; flex-direction: column; align-items: center; line-height: 1.3; text-align: center; }
  #capture .tx .ln { display: block; }
  #capture .bubble { right: -6px; width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  #capture { --u: .75px; --pz: .9; }
  #capture .t-prompt .bdg { display: none; }
  #capture .kico { display: none; }
}

/* ---------- Desktop: the panel on the left, the two boxes on the right ----------
   The two boxes split the right column equally, and the column is exactly as tall as the panel at rest (with its
   slice of menu bar), measured by the script (--blk-h). The panel's column holds that resting height, so when the
   panel grows (Capture's row of four, Link Copied) it hangs down past it as in the app, and nothing on the page moves. */
@media (min-width: 900px) {
  .home #capture { --stage-w: 900px; --pz: .88; --u: .92px; --h: 34px; }
  .home #capture .cap { --z: 1; zoom: 1; max-width: var(--stage-w); margin-top: var(--head-gap); display: grid; column-gap: 32px; row-gap: 16px;
    grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: repeat(2, calc((var(--blk-h, 420px) - 16px) / 2)); }
  .home #capture .mac { grid-column: 1; grid-row: 1 / span 2; align-self: start; height: var(--blk-h, auto); }
  .home #capture .side { display: contents; }
  .home #capture .kind { grid-column: 2; min-height: 0; padding: 0 28px; box-sizing: border-box; }
  .home #capture .kind[data-mode="shot"] { grid-row: 1; }
  .home #capture .kind[data-mode="rec"] { grid-row: 2; }
  .home #capture .kind-t { font-size: var(--t-lg, 17px); }
  .home #capture .kind-p { font-size: var(--t-md, 15px); }
  .home #capture .screen { margin: 18px 0 0; }
  .home #capture .bar { padding: 14px calc(8 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  #capture *, #capture *::before { transition: none !important; }
  #capture .clk .d.pop, #capture .g-rec .fill, #capture .bubble .me { animation: none !important; }
}

/* customise.css */
/* Customise, round 2 option 1: "same layout, perfected". Loop's Customise window on the left and
   the link page as Sam opens it on the right, sharing one top and one bottom line. Each piece of
   the brand (Logo, Colours, Typeface, Address, Note) applies in turn and the page changes in place;
   the same link's chat preview sits on the window's corner. Motion follows transitions.dev tokens. */

@font-face { font-family: "Reader Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Reader Jakarta"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-400800-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Reader Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format("woff2"); }

/* The page's brand colours, registered so they can fade from one to the next. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #f4f4f1; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #111014; }
@property --hl { syntax: '<color>'; inherits: true; initial-value: #426dc8; }

/* ---------- Context crops ---------- */




#customise .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Tokens ---------- */
#customise .cz {
  /* transitions.dev motion scale */
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms;
  --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-icon: cubic-bezier(0.2, 0, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --blur-small: 2px; --blur-medium: 3px; --distance-micro: 4px;
  --stream-gap: 60ms; --stream-fade: 350ms; --stream-blur: 1px;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Google Sans", Arial, sans-serif;

  /* One height for both windows, so they share a top and a bottom line. */
  --win-h: 580px; --bar-h: 52px;

  /* Loop's defaults, then Cobalt's (Background, Text, Buttons), for each mode. */
  --d-paper: #f4f4f1; --d-ink: #111014; --d-hl: #426dc8;
  --c-paper: #e7ecf8; --c-ink: #0d1a3a; --c-hl: #2448c2;

  /* The two windows' chrome follows the site. */
  --ed-field: #f3f4f7; --ed-field-ring: rgba(17, 22, 32, .07); --ed-ph: #a4a9b3;
  --ed-active: rgba(75, 123, 227, .065); --ed-active-ring: rgba(75, 123, 227, .16);
  --st-ring: rgba(17, 22, 32, .13); --st-fill: rgba(66, 109, 200, .14);
  --sel: rgba(75, 123, 227, .24);
  --win-bar: #f6f6f8; --win-pill: rgba(17, 22, 32, .055); --win-ink: #3a3e47; --win-soft: #a4a9b3;
  --lights: rgba(17, 22, 32, .14);
  /* The browser's glass capsules (macOS 26), floating on the page. */
  --cap-fill: rgba(255, 255, 255, .62); --cap-ring: inset 0 0 0 .5px rgba(255, 255, 255, .9), 0 0 0 .5px rgba(17, 22, 32, .10), 0 1px 3px rgba(17, 22, 32, .08);
  --cap-ink: rgba(42, 45, 52, .62); --cap-ink2: #2a2d34;
  --win-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(17, 22, 32, .05), 0 30px 70px -26px rgba(17, 22, 32, .30), 0 8px 20px -10px rgba(17, 22, 32, .10);
  --sw-ring: rgba(17, 22, 32, .1);
  --hit: rgba(75, 123, 227, .55); --hit-glow: rgba(75, 123, 227, .13);
  --chat: #e9e9ed; --chat-ink: #0f1115; --chat-2: #686d78; --chat-3: #8c919b;
  --chat-shadow: 0 0 0 .5px rgba(17, 22, 32, .1), 0 2px 6px -2px rgba(17, 22, 32, .1), 0 26px 50px -18px rgba(17, 22, 32, .35);
  /* The reader's own glass, for the page dock. */
  --glass-fill: radial-gradient(140% 120% at 30% 0%, #fff 0%, color-mix(in srgb, #fff 97%, #111014) 45%, color-mix(in srgb, #fff 92%, #6C7A99) 100%);
  --glass-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(20, 20, 30, .06), 0 6px 16px rgba(30, 28, 24, .14), 0 1px 2px rgba(30, 28, 24, .08);
  --glass-blur: none; --glass-ink: #6b6b72; --glass-ink-strong: #111014;

  position: relative;
  display: grid; grid-template-columns: 304px minmax(0, 1fr); column-gap: 32px; align-items: start;
  margin-top: var(--s8);
  text-align: left;
}
:root[data-theme="dark"] #customise .cz {
  --d-paper: #141317; --d-ink: #f4f3f0; --d-hl: #86a9f2;
  --c-paper: #0c1631; --c-ink: #edf1fb; --c-hl: #8ea7ff;
  --ed-field: #1c1f25; --ed-field-ring: rgba(255, 255, 255, .06); --ed-ph: #5d626c;
  --ed-active: rgba(134, 169, 242, .08); --ed-active-ring: rgba(134, 169, 242, .18);
  --st-ring: rgba(255, 255, 255, .16); --st-fill: rgba(134, 169, 242, .17);
  --sel: rgba(134, 169, 242, .3);
  --win-bar: #1f2025; --win-pill: rgba(255, 255, 255, .07); --win-ink: #c9ccd3; --win-soft: #6e737d;
  --lights: rgba(255, 255, 255, .16);
  --cap-fill: rgba(255, 255, 255, .08); --cap-ring: inset 0 .5px 0 rgba(255, 255, 255, .16), 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .3);
  --cap-ink: rgba(255, 255, 255, .55); --cap-ink2: rgba(255, 255, 255, .9);
  --win-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 30px 70px -26px rgba(0, 0, 0, .75);
  --sw-ring: rgba(255, 255, 255, .12);
  --hit: rgba(134, 169, 242, .6); --hit-glow: rgba(134, 169, 242, .15);
  --chat: #26282e; --chat-ink: #f3f4f6; --chat-2: #9da2ac; --chat-3: #7a7f89;
  --chat-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 26px 50px -18px rgba(0, 0, 0, .8);
  --glass-fill: linear-gradient(to bottom, rgba(255, 255, 255, .14), transparent 55%), rgba(24, 24, 30, .62);
  --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .2);
  --glass-blur: blur(18px) saturate(1.6); --glass-ink: rgba(255, 255, 255, .62); --glass-ink-strong: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #customise .cz {
    --d-paper: #141317; --d-ink: #f4f3f0; --d-hl: #86a9f2;
    --c-paper: #0c1631; --c-ink: #edf1fb; --c-hl: #8ea7ff;
    --ed-field: #1c1f25; --ed-field-ring: rgba(255, 255, 255, .06); --ed-ph: #5d626c;
    --ed-active: rgba(134, 169, 242, .08); --ed-active-ring: rgba(134, 169, 242, .18);
    --st-ring: rgba(255, 255, 255, .16); --st-fill: rgba(134, 169, 242, .17);
    --sel: rgba(134, 169, 242, .3);
    --win-bar: #1f2025; --win-pill: rgba(255, 255, 255, .07); --win-ink: #c9ccd3; --win-soft: #6e737d;
    --lights: rgba(255, 255, 255, .16);
  --cap-fill: rgba(255, 255, 255, .08); --cap-ring: inset 0 .5px 0 rgba(255, 255, 255, .16), 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .3);
  --cap-ink: rgba(255, 255, 255, .55); --cap-ink2: rgba(255, 255, 255, .9);
    --win-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 30px 70px -26px rgba(0, 0, 0, .75);
    --sw-ring: rgba(255, 255, 255, .12);
    --hit: rgba(134, 169, 242, .6); --hit-glow: rgba(134, 169, 242, .15);
    --chat: #26282e; --chat-ink: #f3f4f6; --chat-2: #9da2ac; --chat-3: #7a7f89;
    --chat-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 26px 50px -18px rgba(0, 0, 0, .8);
    --glass-fill: linear-gradient(to bottom, rgba(255, 255, 255, .14), transparent 55%), rgba(24, 24, 30, .62);
    --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .2);
    --glass-blur: blur(18px) saturate(1.6); --glass-ink: rgba(255, 255, 255, .62); --glass-ink-strong: #fff;
  }
}
#customise .cz { -webkit-font-smoothing: antialiased; }

/* ---------- Shared swaps (transitions.dev 04 text swap, 09 icon swap) ----------
   Both states sit in the same cell; the old one leaves up with a blur, then the new one rises in. */
#customise .swap { display: inline-grid; }
#customise .swap > * { grid-area: 1 / 1; white-space: nowrap;
  transition: opacity var(--duration-quick) ease-in-out, transform var(--duration-quick) ease-in-out, filter var(--duration-quick) ease-in-out;
  transition-delay: var(--duration-quick); }
#customise .swap > .b { opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); transition-delay: 0ms; }
#customise .cz[data-logo="on"] :is(.swap-name, #customise .swap-by) > .a, #customise .cz[data-type="on"] .swap-font > .a, #customise .cz[data-address="on"] :is(.swap-addr, #customise .swap-host) > .a { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); filter: blur(var(--blur-small)); transition-delay: 0ms; }
#customise .cz[data-logo="on"] :is(.swap-name, #customise .swap-by) > .b, #customise .cz[data-type="on"] .swap-font > .b, #customise .cz[data-address="on"] :is(.swap-addr, #customise .swap-host) > .b { opacity: 1; transform: none; filter: blur(0); transition-delay: var(--duration-quick); }

/* The text that takes the brand typeface leaves and returns around the change (JS adds .is-exit). */
#customise .ft { transition: opacity var(--duration-quick) ease-in-out, filter var(--duration-quick) ease-in-out, transform var(--duration-quick) ease-in-out; }
#customise .ft.is-exit { opacity: 0; filter: blur(var(--blur-small)); transform: translateY(calc(var(--distance-micro) * -1)); }
#customise .ft.is-enter-start { opacity: 0; filter: blur(var(--blur-small)); transform: translateY(var(--distance-micro)); transition: none; }

/* Where a piece lands, a soft ring for a moment, so cause and effect read together. */
#customise .hit { position: relative; }
#customise .hit::after { content: ''; position: absolute; inset: -6px; border-radius: var(--hit-r, 12px); pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 1.5px var(--hit), 0 0 0 7px var(--hit-glow); opacity: 0; transform: scale(.97);
  transition: opacity 700ms ease-out, transform 700ms var(--ease-smooth-out); }
#customise .hit.is-hit::after { opacity: 1; transform: none; transition-duration: var(--duration-fast); }

/* ---------- Two windows, one chrome ---------- */
#customise .cz-bar { position: relative; flex: none; height: var(--bar-h); display: flex; align-items: center; justify-content: center; padding: 0 16px; font-family: var(--ui); background: transparent; }
#customise .app-title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--win-ink); }

/* ---------- Loop's Customise window ---------- */
#customise .cz-edit { display: flex; flex-direction: column; gap: 14px; font-family: var(--ui); }
#customise .cz-app { height: var(--win-h); border-radius: 18px; background: var(--card); box-shadow: var(--win-shadow);
  display: flex; flex-direction: column; isolation: isolate; }
#customise .cz-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; gap: 2px; }
#customise .pc { box-sizing: border-box; position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 11px;
  padding: 0 14px; border-radius: 12px;
  transition: background-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out); }
#customise .pc:has(.is-open) { z-index: 5; }
/* Every control is real (Theo, 2026-10-20): buttons lose their browser look, keep a press and a focus ring. */
#customise .cz-rows button { appearance: none; border: 0; margin: 0; font-family: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: left; }
#customise .cz-rows button:focus-visible, #customise .cz-rows .tx:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#customise .cz-rows .fld .tx:focus-visible { outline: none; }
/* The piece that is applying: a soft tint and rim, the name in Loop blue. */
#customise .pc.is-active, #customise .pc.is-active:hover { background: var(--ed-active); box-shadow: inset 0 0 0 1px var(--ed-active-ring); }
#customise .pc-note { flex-grow: 1.35; }
#customise .pc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#customise .pc-l { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; line-height: 20px; color: var(--ink1); transition: color var(--duration-fast) ease; }
#customise .pc.is-active .pc-l { color: var(--accent-text); }

/* The status: an empty ring at rest; when a piece has landed the ring fills softly and a bold tick
   draws itself in (transitions.dev 25 checkbox check, with a 03-style pop on the fill). */
#customise .pc-st { position: relative; flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--st-ring);
  transition: background-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out); }
#customise .pc-st svg { width: 16px; height: 16px; overflow: visible; fill: none; stroke: var(--accent-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#customise .pc-st path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset var(--duration-quick) ease-out; }
#customise .pc.is-active .pc-st { box-shadow: inset 0 0 0 1.5px var(--hit); }
#customise .cz[data-logo="on"] .pc[data-k="logo"]:not(.is-active) .pc-st, #customise .cz[data-colours="on"] .pc[data-k="colours"]:not(.is-active) .pc-st, #customise .cz[data-type="on"] .pc[data-k="type"]:not(.is-active) .pc-st, #customise .cz[data-address="on"] .pc[data-k="address"]:not(.is-active) .pc-st, #customise .cz[data-note="on"] .pc[data-k="note"]:not(.is-active) .pc-st { background: var(--st-fill); box-shadow: inset 0 0 0 0 transparent; animation: czStPop var(--duration-very-slow) var(--ease-bounce) both; }
#customise .cz[data-logo="on"] .pc[data-k="logo"]:not(.is-active) .pc-st path, #customise .cz[data-colours="on"] .pc[data-k="colours"]:not(.is-active) .pc-st path, #customise .cz[data-type="on"] .pc[data-k="type"]:not(.is-active) .pc-st path, #customise .cz[data-address="on"] .pc[data-k="address"]:not(.is-active) .pc-st path, #customise .cz[data-note="on"] .pc[data-k="note"]:not(.is-active) .pc-st path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-slow) var(--ease-smooth-out) var(--duration-micro); }
#customise .pc-st::after { content: ''; position: absolute; inset: -11px; }
#customise .pc-st:active { transform: scale(.9); }
@keyframes czStPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

#customise .pc-c { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
#customise .fld { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; height: 40px; padding: 0 12px; border-radius: 10px;
  background: var(--ed-field); box-shadow: inset 0 0 0 1px var(--ed-field-ring); font-size: 13.5px; color: var(--ink1); letter-spacing: -0.005em;
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out); }
/* A field being typed in takes focus: Loop blue rim, as on the Mac. */
#customise .fld.is-focus, #customise .fld:has(.tx:focus), #customise .fld-font[aria-expanded="true"] { background: var(--card); box-shadow: inset 0 0 0 1px var(--hit), 0 0 0 3px var(--hit-glow); }
#customise .fld:has(.tx[contenteditable]) { cursor: text; }
#customise .fld .tx { outline: none; caret-color: var(--blue); -webkit-user-select: text; user-select: text; }
#customise .fld .ph { color: var(--ed-ph); }
#customise .caret { display: inline-block; width: 1.5px; height: 16px; margin-right: -1.5px; border-radius: 1px; background: var(--blue); opacity: 0; flex: none; vertical-align: -3px; }
#customise .fld.is-focus .caret { opacity: 1; }
#customise .fld.is-focus.is-idle .caret { animation: czBlink 1.06s steps(1) infinite; }
#customise .fld.is-focus.is-selected .caret { opacity: 0; animation: none; }
@keyframes czBlink { 50% { opacity: 0; } }
/* The placeholder and the typed text share the slot: the caret follows whichever is showing. */
#customise .fld-name { gap: 0; }
#customise .fld-name .tx { flex: 1; min-width: 2px; white-space: nowrap; overflow: hidden; }
#customise .fld-name .caret { order: 1; }
#customise .fld .ph { position: absolute; left: 12px; pointer-events: none; }
#customise .fld:has(.tx:not(:empty)) .ph { display: none; }
#customise .fld-name.is-focus .tx:empty + .caret { margin-left: -2px; }

/* Logo well (transitions.dev 09 icon swap: scale .25 to 1, blur 4px to 0) */
#customise .well { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 10px; display: grid; place-items: center; transition: transform var(--duration-quick) ease-out;
  background: var(--ed-field); box-shadow: inset 0 0 0 1px var(--ed-field-ring); }
#customise .well > * { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-icon), transform var(--duration-fast) var(--ease-icon), filter var(--duration-fast) var(--ease-icon); }
#customise .well-ph { width: 19px; height: 19px; fill: none; stroke: var(--ed-ph); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#customise .well-img { width: 28px; height: 28px; opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"] .well-ph { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"] .well-img { opacity: 1; transform: none; filter: blur(0); }
#customise .well:active, #customise .sws:active { transform: scale(.96); }
/* A name of the visitor's own gets a monogram in the buttons colour instead of Cobalt's mark. */
#customise .mono { display: grid; place-items: center; border-radius: 22%; background: var(--mono-bg, #2448c2); color: #fff; font-weight: 600; line-height: 1;
  font-family: var(--font, "Reader Inter"), -apple-system, sans-serif; opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .well-mono { width: 28px; height: 28px; font-size: 14px; }
#customise .cz[data-logo="on"][data-mono="on"] .well-img, #customise .cz[data-logo="on"][data-mono="on"] .rp-mark .m-own { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"][data-mono="on"] .mono { opacity: 1; transform: none; filter: blur(0); }

/* Three colours as soft squares; each one takes Cobalt's in turn with a small press. */
#customise .sws { display: flex; gap: 8px; padding: 0; background: none; border-radius: 10px; transition: transform var(--duration-quick) ease-out; }
#customise .sw-c i { display: block; width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--sw-ring);
  transition: background-color var(--duration-very-slow) var(--ease-smooth-out);
  transition-delay: calc(var(--n) * 120ms); }
#customise .sw-c:nth-child(1) i { background: var(--d-paper); }
#customise .sw-c:nth-child(2) i { background: var(--d-ink); }
#customise .sw-c:nth-child(3) i { background: var(--d-hl); }
#customise .cz[data-colours="on"] .sw-c:nth-child(1) i { background: var(--c-paper); }
#customise .cz[data-colours="on"] .sw-c:nth-child(2) i { background: var(--c-ink); }
#customise .cz[data-colours="on"] .sw-c:nth-child(3) i { background: var(--c-hl); }
#customise .cz.is-pop .sw-c i { animation: czPop 520ms var(--ease-bounce) both; animation-delay: calc(var(--n) * 120ms); }
@keyframes czPop { 0% { transform: scale(1); } 40% { transform: scale(.9); } 100% { transform: scale(1); } }

/* Colour sets the visitor can pick (Theo, 2026-10-20); Cobalt's is the one the demo plays. */
#customise .cz[data-pal="forest"] { --c-paper: #e7f0ea; --c-ink: #0f2a1c; --c-hl: #2b7a4f; }
#customise .cz[data-pal="clay"] { --c-paper: #f6ece4; --c-ink: #3a1d10; --c-hl: #bf5529; }
#customise .cz[data-pal="plum"] { --c-paper: #f1eaf6; --c-ink: #2a1238; --c-hl: #7a3fb0; }
:root[data-theme="dark"] #customise .cz[data-pal="forest"] { --c-paper: #0d1f16; --c-ink: #e9f3ec; --c-hl: #6fc596; }
:root[data-theme="dark"] #customise .cz[data-pal="clay"] { --c-paper: #24140d; --c-ink: #f7ebe3; --c-hl: #f08a5d; }
:root[data-theme="dark"] #customise .cz[data-pal="plum"] { --c-paper: #1c1027; --c-ink: #f2e9f8; --c-hl: #b48ae0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #customise .cz[data-pal="forest"] { --c-paper: #0d1f16; --c-ink: #e9f3ec; --c-hl: #6fc596; }
  :root:not([data-theme="light"]) #customise .cz[data-pal="clay"] { --c-paper: #24140d; --c-ink: #f7ebe3; --c-hl: #f08a5d; }
  :root:not([data-theme="light"]) #customise .cz[data-pal="plum"] { --c-paper: #1c1027; --c-ink: #f2e9f8; --c-hl: #b48ae0; }
}
#customise .cz { --mono-bg: var(--d-hl); }
#customise .cz[data-colours="on"] { --mono-bg: var(--c-hl); }

/* The pickers: a card that grows from its control (transitions.dev 05 menu dropdown), drawn like the site's other menus. */
#customise .cz-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 6; min-width: 196px; padding: 6px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 1px; background: var(--card); box-shadow: var(--shadow-lift);
  --dropdown-open-dur: 250ms; --dropdown-close-dur: 150ms; --dropdown-pre-scale: 0.97; --dropdown-closing-scale: 0.99; --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top left; transform: scale(var(--dropdown-pre-scale)); opacity: 0; pointer-events: none; visibility: hidden;
  transition: transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease), visibility 0s linear var(--dropdown-open-dur);
  will-change: transform, opacity; }
#customise .cz-menu[data-origin="top-right"] { transform-origin: top right; }
#customise .cz-menu.is-open { transform: scale(1); opacity: 1; pointer-events: auto; visibility: visible; transition: transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease), visibility 0s; }
#customise .cz-menu.is-closing { transform: scale(var(--dropdown-closing-scale)); opacity: 0; pointer-events: none; visibility: visible;
  transition: transform var(--dropdown-close-dur) var(--dropdown-ease), opacity var(--dropdown-close-dur) var(--dropdown-ease); }
#customise .cz-menu-font { left: 0; right: 0; }
#customise .cz-menu .mi { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink1); white-space: nowrap; background: transparent; transition: background-color var(--duration-quick) ease-out; }
#customise .cz-menu .mi:hover, #customise .cz-menu .mi:focus-visible { background: var(--quiet); outline: none; }
#customise .cz-menu .mi[aria-selected="true"] { background: var(--quiet-hover); }
#customise .mi-sw { display: flex; gap: 3px; flex: none; }
#customise .mi-sw i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--sw-ring); }
#customise .mi-sw i:nth-child(1) { background: var(--p1); } #customise .mi-sw i:nth-child(2) { background: var(--p2); } #customise .mi-sw i:nth-child(3) { background: var(--p3); }
#customise .mi-sw[data-pal="loop"] { --p1: var(--d-paper); --p2: var(--d-ink); --p3: var(--d-hl); }
#customise .mi-sw[data-pal="cobalt"] { --p1: #e7ecf8; --p2: #0d1a3a; --p3: #2448c2; }
#customise .mi-sw[data-pal="forest"] { --p1: #e7f0ea; --p2: #0f2a1c; --p3: #2b7a4f; }
#customise .mi-sw[data-pal="clay"] { --p1: #f6ece4; --p2: #3a1d10; --p3: #bf5529; }
#customise .mi-sw[data-pal="plum"] { --p1: #f1eaf6; --p2: #2a1238; --p3: #7a3fb0; }
#customise .mi-f { font-size: 14.5px; }
#customise [data-font="inter"] { --pf: "Reader Inter"; }
#customise [data-font="system"] { --pf: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial; }
#customise [data-font="jakarta"] { --pf: "Reader Jakarta"; }
#customise [data-font="fraunces"] { --pf: "Reader Fraunces"; }
#customise .mi-f { font-family: var(--pf), sans-serif; }

/* Typeface */
#customise .fld-font { gap: 10px; width: 100%; }
#customise .aa { display: inline-grid; width: 26px; font-size: 17px; line-height: 1; color: var(--ink1); }
#customise .aa > * { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-icon), transform var(--duration-fast) var(--ease-icon), filter var(--duration-fast) var(--ease-icon); }
#customise .aa-a { font-family: "Reader Inter", var(--ui); font-weight: 500; }
#customise .aa-b { font-family: var(--pf, "Reader Fraunces"), Georgia, serif; font-weight: 500; opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-type="on"] .aa-a { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-type="on"] .aa-b { opacity: 1; transform: none; filter: blur(0); }
#customise .fld-font .swap { flex: 1; }
#customise .chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ink3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Address: click in, select all, type the new one. */
#customise .globe { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ink3); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#customise .tx-wrap { display: flex; align-items: center; min-width: 0; }
#customise .fld-addr .tx-wrap { flex: 1; }
#customise .fld-addr .tx { min-width: 2px; overflow: hidden; white-space: nowrap; border-radius: 3px; padding: 1px 0; transition: background-color var(--duration-quick) ease-out; }
#customise .fld-addr.is-selected .tx { background: var(--sel); }

/* Note: the words resolve one by one (transitions.dev 30 streaming text); the caret rides along. */
#customise .fld-note { align-items: flex-start; height: auto; min-height: 64px; padding: 11px 12px; line-height: 1.45; display: block; }
#customise .fld-note .tx { text-wrap: pretty; }
#customise .fld-note .tx { display: inline-block; min-width: 2px; min-height: 1.45em; vertical-align: top; max-width: 100%; overflow-wrap: anywhere; }
#customise .fld-note .ph { top: 11px; }
#customise .w { opacity: 0; filter: blur(var(--stream-blur)); transition: opacity var(--stream-fade) var(--ease-smooth-out), filter var(--stream-fade) var(--ease-smooth-out); }
#customise .w.in { opacity: 1; filter: blur(0); }


/* ---------- The browser window: the link page as Sam opens it ---------- */
#customise .cz-stage { position: relative; }
/* The page runs to the top edge, so the toolbar takes Cobalt's colour with it; the controls float on it in glass capsules. */
#customise .cz-win { position: relative; height: var(--win-h); border-radius: 18px; overflow: hidden; background: var(--d-paper); box-shadow: var(--win-shadow);
  display: flex; flex-direction: column; isolation: isolate; transition: background-color 700ms var(--ease-smooth-out); }
#customise .cz[data-colours="on"] .cz-win { background: var(--c-paper); }
/* A minimal Safari-style bar (Theo, 2026-10-20): only the address, in a glass capsule, so the page reads as a web link. */
#customise .cz-win .cz-bar { padding: 0 16px; }
#customise .addr { --hit-r: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; min-width: 0; height: 32px; padding: 0 13px 0 12px; border-radius: 16px;
  interpolate-size: allow-keywords; transition: width var(--duration-fast) var(--ease-smooth-out);
  background: var(--cap-fill); box-shadow: var(--cap-ring); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  font-size: 12.5px; color: var(--cap-ink2); letter-spacing: -0.003em; }
#customise .addr .lock { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--cap-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#customise .addr .swap { position: relative; justify-items: center; }
/* The capsule hugs the address on show: the one fading out steps out of the flow, centred over it. */
#customise .addr .swap-addr > .b, #customise .cz[data-address="on"] .addr .swap-addr > .a { position: absolute; left: 50%; translate: -50% 0; }
#customise .cz[data-address="on"] .addr .swap-addr > .b { position: static; translate: none; }
#customise .addr em { font-style: normal; color: var(--cap-ink); }

#customise .cz-page { --font: "Reader Inter";
  --paper: var(--d-paper); --ink: var(--d-ink); --hl: var(--d-hl);
  --sheet-h: 392px;
  position: relative; flex: 1; min-height: 0; overflow: hidden; background: transparent; color: var(--ink);
  font-family: var(--font), -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column;
  transition: --paper 700ms var(--ease-smooth-out), --ink 700ms var(--ease-smooth-out) 120ms, --hl 700ms var(--ease-smooth-out) 240ms; }
#customise .cz[data-colours="on"] .cz-page { --paper: var(--c-paper); --ink: var(--c-ink); --hl: var(--c-hl); }
#customise .cz[data-type="on"] .cz-page { --font: var(--pf, "Reader Fraunces"); }
#customise .rp-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 24px 0; }
#customise .rp-sender { --hit-r: 14px; display: flex; align-items: center; gap: 11px; min-width: 0; }
#customise .rp-mark { display: grid; flex: none; width: 34px; height: 34px; }
#customise .rp-mark .m-mono { grid-area: 1 / 1; width: 34px; height: 34px; font-size: 16px; transition: opacity var(--duration-fast) var(--ease-icon), transform var(--duration-fast) var(--ease-icon), filter var(--duration-fast) var(--ease-icon); }
#customise .rp-mark img { grid-area: 1 / 1; width: 34px; height: 34px; transition: opacity var(--duration-fast) var(--ease-icon), transform var(--duration-fast) var(--ease-icon), filter var(--duration-fast) var(--ease-icon); }
/* Loop's picture has a margin round its tile, so it is drawn a little larger, as on the real page. */
#customise .rp-mark .m-loop { width: 40px; height: 40px; margin: -3px; }
#customise .rp-mark .m-own { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"] .rp-mark .m-loop { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"] .rp-mark .m-own { opacity: 1; transform: none; filter: blur(0); }
#customise .rp-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#customise .rp-who b { font-weight: 600; font-size: 15px; letter-spacing: -0.012em; line-height: 1.15; }
#customise .rp-file { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: color-mix(in srgb, var(--ink) 52%, var(--paper)); }
#customise .rp-acts { display: flex; align-items: center; gap: 8px; flex: none; }
#customise .rp-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 70%, var(--paper)); }
#customise .rp-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The Sign button is always Loop blue, whatever the brand. */
#customise .rp-pill { --hit-r: 15px; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px 0 13px; border-radius: 10px; background: #4B7BE3; color: #FFFFFF;
  font-weight: 600; font-size: 14px; letter-spacing: -0.005em; box-shadow: 0 8px 18px -10px rgba(75, 123, 227, .8); }
#customise .rp-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The sender's note: room opens for it (transitions.dev 21, grid rows), then the words arrive. */
#customise .rp-note { --hit-r: 10px; position: relative; z-index: 2; display: grid; grid-template-rows: 0fr; margin: 0 24px; width: fit-content; max-width: min(400px, calc(100% - 48px));
  transition: grid-template-rows var(--duration-slow) var(--ease-smooth-out), margin-top var(--duration-slow) var(--ease-smooth-out); }
#customise .cz[data-note="on"] .rp-note { grid-template-rows: 1fr; margin-top: 14px; }
#customise .rp-note-in { min-height: 0; overflow: hidden; }
#customise .rp-note p { font-size: 14px; line-height: 1.45; letter-spacing: -0.005em; color: color-mix(in srgb, var(--ink) 78%, var(--paper)); text-wrap: balance; }

/* The pages, as the reader lays them out: the current one centred, the next one waiting beside it,
   stepped back. White whatever the brand. */
#customise .rp-deck { position: relative; flex: 1; min-height: 0; }
#customise .sheet { position: absolute; top: 22px; left: 50%; height: var(--sheet-h); aspect-ratio: 537 / 760; translate: -50% 0; border-radius: 4px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 .5px rgba(10, 14, 30, .08), 0 2px 5px rgba(10, 14, 30, .05), 0 22px 50px -18px rgba(10, 14, 30, .30); }
#customise .sheet img { display: block; width: 100%; height: 100%; }
#customise .sheet + .sheet { translate: calc(50% + 40px) 0; opacity: .55; transform: scale(.975); transform-origin: left center; }
:root[data-theme="dark"] #customise .sheet + .sheet { opacity: .4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #customise .sheet + .sheet { opacity: .4; } }

/* The page dock, the reader's glass: the pages and where you are. */
#customise .rp-dock { position: absolute; z-index: 2; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 7px; height: 50px; padding: 0 12px 0 13px; border-radius: 17px;
  background: var(--glass-fill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--glass-ink); }
#customise .th { display: block; height: 30px; aspect-ratio: 537 / 760; border-radius: 3px; overflow: hidden; background: #fff; opacity: .5;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .08); }
#customise .th img { display: block; width: 100%; height: 100%; }
#customise .th.on { opacity: 1; translate: 0 -2px; box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .1); }
#customise .count { margin-left: 5px; font-size: 12.5px; letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
#customise .count b { font-weight: 600; color: var(--glass-ink-strong); }

/* ---------- The same link in a chat, on the window's corner ---------- */
#customise .cz-chat { position: absolute; right: -24px; bottom: 0; width: 252px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 4; }
#customise .ch-label { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink3); padding-right: 4px; line-height: 16px; }
#customise .ch-bubble { width: 100%; border-radius: 18px; overflow: hidden; background: var(--chat); color: var(--chat-ink); font-family: var(--ui); box-shadow: var(--chat-shadow); }
#customise .ch-pic { --hit-r: 0; position: relative; display: grid; aspect-ratio: 1200 / 630; container-type: inline-size; background: #f5f6f8; }
#customise .ch-pic::after { inset: 0; box-shadow: inset 0 0 0 2px var(--hit), inset 0 0 0 7px var(--hit-glow); }
#customise .ch-pic > * { grid-area: 1 / 1; width: 100%; height: 100%; }
/* The old picture cross-blurs into the new one. */
#customise .pic-loop, #customise .pic-own { transition: opacity var(--duration-slow) ease-in-out, filter var(--duration-slow) ease-in-out; }
#customise .pic-own { opacity: 0; filter: blur(var(--blur-small)); }
#customise .cz[data-logo="on"] .pic-loop { opacity: 0; filter: blur(var(--blur-small)); }
#customise .cz[data-logo="on"] .pic-own { opacity: 1; filter: blur(0); }
/* The sender's card, as the tracker draws it at 1200 x 630 (/card): logo and name on the grey
   ripple, in the brand's typeface. Sizes are its own pixels as shares of the width. */
#customise .pic-own { position: relative; overflow: hidden; display: grid; place-items: center; background: #f5f6f8; }
#customise .lock-up { position: relative; display: flex; align-items: center; gap: 4.33cqw; white-space: nowrap; }
#customise .cm { position: relative; display: grid; place-items: center; width: 14.17cqw; height: 14.17cqw; }
#customise .cm img { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 1.33cqw 2.33cqw rgba(20, 30, 50, .14)); }
#customise .rings { position: absolute; left: 50%; top: 50%; width: 160cqw; height: 160cqw; translate: -50% -50%; pointer-events: none; overflow: visible; }
#customise .words { display: flex; flex-direction: column; font-family: var(--cfont, "Reader Inter"), Inter, sans-serif; }
#customise .cz[data-type="on"] .words { --cfont: "Reader Fraunces"; }
#customise .words .t1 { font-size: 4.5cqw; color: #7b8190; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; margin-bottom: .17cqw; }
#customise .words .t2 { font-size: 12.5cqw; color: #14161b; font-weight: 700; letter-spacing: -.035em; line-height: .98; }
#customise .ch-txt { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px 12px; font-size: 12.5px; line-height: 1.35; }
#customise .ch-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.008em; }
#customise .ch-txt > .swap { color: var(--chat-2); }
#customise .ch-addr { --hit-r: 7px; align-self: flex-start; color: var(--chat-3); }
#customise .ch-addr::after { inset: -3px -6px; }

/* ---------- Narrower windows ---------- */
@media (max-width: 1080px) {
  #customise .cz-chat { right: -16px; }
}
@media (max-width: 960px) {
  #customise .cz { grid-template-columns: 272px minmax(0, 1fr); column-gap: 24px; --win-h: 560px; }
  #customise .cz-page { --sheet-h: 360px; }
  #customise .cz-chat { width: 216px; right: -12px; }
  #customise .rp-icon { display: none; }
  #customise .rp-bar { padding: 8px 18px 0; }
  #customise .rp-note { margin-left: 18px; margin-right: 18px; }
  #customise .rp-dock { left: 18px; translate: none; }
}
/* Phones: Loop's Customise window first, then the page it changes, then the card (Theo, 2026-10-19). */
@media (max-width: 760px) {
  #customise .cz { grid-template-columns: minmax(0, 1fr); row-gap: 28px; --win-h: auto; --bar-h: 40px; }
  #customise .cz-stage { padding-bottom: 0; display: flex; flex-direction: column; align-items: flex-end; }
  #customise .cz-win { width: 100%; height: 470px; }
  #customise .cz-win .cz-bar { padding: 0 10px; }
  #customise .addr { height: 28px; padding: 0 11px 0 10px; font-size: 12px; }
  #customise .rp-bar { padding: 8px 16px 0; gap: 10px; }
  #customise .rp-pill { height: 32px; padding: 0 13px 0 11px; font-size: 13px; }
  #customise .rp-note { margin-left: 16px; margin-right: 16px; max-width: calc(100% - 32px); }
  #customise .rp-note p { font-size: 13px; }
  #customise .cz-page { --sheet-h: 300px; }
  #customise .sheet { top: 18px; }
  #customise .rp-dock { left: 50%; translate: -50% 0; bottom: 12px; height: 44px; gap: 6px; padding: 0 10px 0 11px; border-radius: 15px; }
  #customise .th { height: 26px; }
  #customise .cz-chat { position: relative; right: auto; bottom: auto; width: 232px; margin-top: 16px; }
  #customise .ch-txt { padding: 9px 12px 11px; font-size: 12px; }
  #customise .ch-title { font-size: 13px; }
  #customise .cz-app { height: auto; }
  #customise .cz-rows { padding: 6px; }
  /* The pieces become settings rows: name on the left, the control on the right. */
  #customise .pc { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
  #customise .pc-h { flex: none; gap: 10px; justify-content: flex-start; }
  #customise .pc-st { order: -1; }
  #customise .pc-c { flex: 0 1 auto; justify-content: flex-end; }
  #customise .fld-name { flex: 0 1 132px; }
  #customise .fld-font { flex: 0 0 auto; width: auto; gap: 8px; }
  #customise .fld-addr { flex: 0 1 auto; }
  #customise .sw-c i { width: 34px; height: 34px; border-radius: 9px; }
  #customise .well { width: 36px; height: 36px; border-radius: 9px; }
  #customise .well-img { width: 25px; height: 25px; }
  #customise .fld { height: 36px; }
  #customise .pc-note { flex-direction: column; align-items: stretch; }
  #customise .pc-c { position: relative; }
  #customise .cz-menu, #customise .cz-menu-font { left: auto; right: 0; transform-origin: top right; }
}
/* The narrowest phones: the address loses its globe so the whole address fits. */
@media (max-width: 339px) { #customise .fld-addr .globe { display: none; } }
/* Under 360px the longest typeface name needs the room its Aa sample takes. */
@media (max-width: 359px) { #customise .fld-font .aa { display: none; } }
@media (max-width: 380px) {
  #customise .fld-addr { font-size: 12.5px; padding: 0 10px; gap: 6px; }
  #customise .pc { padding: 12px 10px; }
  #customise .pc-l { font-size: 14.5px; }
}

/* ---------- Less motion: everything simply changes. ---------- */
@media (prefers-reduced-motion: reduce) {
  #customise .cz *, #customise .cz *::after, #customise .cz-page { transition: none !important; animation: none !important; }
  #customise .cz-menu { transition: none !important; }
}

/* track.css */
/* Loop's link page on the website (prototypes/loop-track-fit-2026-10-12/round7): Sam on the left in three cards,
   Opens, Read Depth and Pages on the right as three equal cards. One accent, Loop blue. Cards build in once. */
/* Same width as the hero box: the site's content column (--wrap less its gutters) */
.lx-holder { max-width: var(--wrap); margin: var(--s8, 48px) auto 0; padding: 0 var(--gutter); }
.lx {
  --ground: rgb(245,245,247); --card: #fff; --edge: rgba(20,20,26,.06); --shadow: rgba(20,20,26,.05);
  --t1: #18181B; --t2: #6B6B75; --t3: #8E8E96;
  --accent: #4B7BE3; --track: rgba(20,20,26,.07); --monoA: #A9A9B1; --monoB: #8C8C95;
  --sidebar: #fff; --selection: rgba(0,0,0,.05); --seg: rgba(0,0,0,.065); --segShadow: rgba(0,0,0,.08);
  --tip: #1B1B1F; --tipInk: #B7B7BE;
  --fig: 34px; --m: 15px; --s: 12.5px;
  position: relative; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; color: var(--t1);
  -webkit-font-smoothing: antialiased; text-align: left; letter-spacing: 0;
}
:root[data-theme="dark"] .lx {
  --ground: rgb(30,30,33); --card: rgb(43,43,47); --edge: rgba(255,255,255,.06); --shadow: rgba(0,0,0,.3);
  --t1: #F2F2F4; --t2: #A1A1AA; --t3: #85858D;
  --accent: #7EA2F0; --track: rgba(255,255,255,.09); --monoA: #6E6E77; --monoB: #55555D;
  --sidebar: rgb(38,38,42); --selection: rgba(255,255,255,.08); --seg: rgba(0,0,0,.28); --segShadow: rgba(0,0,0,.30);
  --tip: rgba(0,0,0,.88);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx {
  --ground: rgb(30,30,33); --card: rgb(43,43,47); --edge: rgba(255,255,255,.06); --shadow: rgba(0,0,0,.3);
  --t1: #F2F2F4; --t2: #A1A1AA; --t3: #85858D;
  --accent: #7EA2F0; --track: rgba(255,255,255,.09); --monoA: #6E6E77; --monoB: #55555D;
  --sidebar: rgb(38,38,42); --selection: rgba(255,255,255,.08); --seg: rgba(0,0,0,.28); --segShadow: rgba(0,0,0,.30);
  --tip: rgba(0,0,0,.88);
} }
.lx * { box-sizing: border-box; margin: 0; }
.lx button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lx svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* The window: the app's 1180 x 760, drawn at 0.9 zoom, scaled to fit */
.lx .fitbox { position: relative; width: 100%; aspect-ratio: 1100 / 748; }
.lx .win { position: absolute; left: 0; top: 0; width: 1180px; height: 760px; transform-origin: 0 0; border-radius: 12px; overflow: hidden; background: var(--ground);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 30px 70px -26px rgba(0,0,0,.35), 0 8px 20px -10px rgba(0,0,0,.15); display: flex; }
:root[data-theme="dark"] .lx .win { box-shadow: 0 0 0 .5px rgba(255,255,255,.12), 0 30px 70px -26px rgba(0,0,0,.7); }
.lx .lights { position: absolute; left: 21px; top: 19px; display: flex; gap: 8px; z-index: 3; }
/* Grey window buttons, the same as the hero and Customise windows */
.lx .lights i { width: 12px; height: 12px; border-radius: 50%; background: #DADADF; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
:root[data-theme="dark"] .lx .lights i { background: #4A4A50; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx .lights i { background: #4A4A50; box-shadow: none; } }

/* Sidebar: four links, nothing else */
.lx .side { width: 224px; flex: none; margin: 10px 0 10px 10px; border-radius: 12px; background: var(--sidebar); box-shadow: 0 0 0 .5px var(--edge); padding: 52px 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.lx .shead { font-size: 11px; font-weight: 600; color: var(--t3); padding: 0 10px 6px; }
.lx .srow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-size: var(--s); color: var(--t2); white-space: nowrap; cursor: default; }
.lx .srow svg.i { width: 18px; height: 12.5px; color: var(--t3); }
.lx .srow.on { background: var(--selection); color: var(--t1); font-weight: 600; }
.lx .srow.on svg.i { color: var(--accent); }

/* Main column */
.lx .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lx .band { display: flex; align-items: center; gap: 10px; padding: 34px 32px 26px; }
.lx .band .kind { width: 24px; height: 24px; display: grid; place-items: center; color: var(--accent); }
.lx .band .kind svg.i { width: 19px; height: 19px; stroke-width: 1.9; }
.lx .band .title { font-size: 18px; font-weight: 600; letter-spacing: -.2px; }
.lx .band .sp { flex: 1; }
.lx .seg { display: flex; padding: 2px; border-radius: 9px; background: var(--seg); }
.lx .seg button { width: 84px; height: 26px; border-radius: 7px; font-size: var(--s); font-weight: 500; color: var(--t2); transition: background 200ms cubic-bezier(.22,1,.36,1), color 150ms; }
.lx .seg button[aria-selected="true"] { background: var(--card); color: var(--t1); font-weight: 600; box-shadow: 0 0 0 .5px var(--edge), 0 1px 1.5px var(--segShadow); }
.lx .canvas { flex: 1; min-height: 0; overflow: hidden; padding: 0 32px 32px; display: flex; flex-direction: column; }

/* ===== Activity: Sam on the left, the board on the right ===== */
.lx .two { flex: 1; min-height: 0; display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 44px; }

/* The reader, sitting on the window itself; its top lines up with the board's first label */
@font-face { font-family: "Homemade Apple"; font-style: normal; font-weight: 400; font-display: block; src: url(../fonts/homemade-apple-latin.woff2) format("woff2"); }
.lx { --hand: #1F3E8C; --wash: rgba(75,123,227,.08); }
:root[data-theme="dark"] .lx { --hand: #C9D8FB; --wash: rgba(126,162,240,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx { --hand: #C9D8FB; --wash: rgba(126,162,240,.12); } }
.lx .reader { padding-top: 34px; display: flex; flex-direction: column; min-width: 0; }
.lx .who { display: flex; align-items: center; gap: 14px; }
.lx .mono { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--monoA), var(--monoB));
  color: #fff; font-size: var(--m); font-weight: 600; letter-spacing: .3px; }
.lx .who .id b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.lx .who .id span { display: block; font-size: var(--s); color: var(--t2); margin-top: 3px; }
.lx .facts { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--s); color: var(--t2); }
.lx .reader .h5 { margin-top: 34px; margin-bottom: 10px; font-size: var(--s); font-weight: 600; color: var(--t2); }

/* Signature: the name in his hand, then when, then the two actions */
.lx .sigcard { background: var(--card); border-radius: 14px; box-shadow: 0 0 0 1px var(--edge), 0 1px 2px var(--shadow); padding: 18px 18px 14px; }
.lx .hand { font-family: "Homemade Apple", cursive; font-size: 24px; line-height: 1.5; color: var(--hand); white-space: nowrap; padding-left: 8px; }
.lx .sigfoot { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.lx .sigwhen { display: flex; align-items: center; gap: 5px; font-size: var(--s); color: var(--t2); white-space: nowrap; }
.lx .sigwhen svg.i { width: 13px; height: 13px; stroke-width: 2.2; color: var(--accent); }
.lx .sigwhen b { font-weight: 600; color: var(--accent); }
.lx .sigbtns { display: flex; gap: 16px; }
.lx .lnk { font-size: var(--s); font-weight: 600; color: var(--accent); }
.lx .lnk:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Notes: the page it is on, then the words */
.lx .noterow { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.lx .thumb { width: 48px; aspect-ratio: 210 / 297; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--edge), 0 2px 6px var(--shadow); }
.lx .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx .nmeta { display: flex; justify-content: space-between; gap: 8px; font-size: var(--s); color: var(--t2); }
.lx .nmeta b { font-weight: 600; color: var(--t1); }
.lx .noterow q, .lx .tl q { display: block; margin-top: 6px; font-size: var(--m); line-height: 1.45; color: var(--t1); text-wrap: balance; quotes: "\201C" "\201D"; }

/* Variant 2: a timeline of what Sam did, newest last */
.lx .tl { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lx .tl li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.lx .tl .dot-i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--track); color: var(--t2); }
.lx .tl .dot-i svg.i { width: 13px; height: 13px; stroke-width: 1.9; }
.lx .tl li.key .dot-i { background: var(--wash); color: var(--accent); }
.lx .tlh { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--s); color: var(--t2); }
.lx .tlh b { font-weight: 600; color: var(--t1); }
.lx .tlh span { white-space: nowrap; }
.lx .tl q { margin-top: 2px; }
.lx .hand.sm { font-size: 20px; margin-top: 2px; }
.lx .tl .sigbtns { margin-top: 4px; }

/* A page shown large inside the window */
.lx .lbox { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(10,10,14,.42); opacity: 0; transition: opacity 200ms cubic-bezier(.22,1,.36,1); cursor: zoom-out; }
.lx .lbox.on { opacity: 1; }
.lx .lbox figure { display: flex; flex-direction: column; align-items: center; gap: 12px; transform: scale(.97); transition: transform 250ms cubic-bezier(.22,1,.36,1); }
.lx .lbox.on figure { transform: none; }
.lx .lbox img { height: 640px; aspect-ratio: 210 / 297; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.35); background: #fff; }
.lx .lbox figcaption { font-size: var(--s); font-weight: 600; color: #fff; }

/* The board: one surface, three sections separated by space only */
.lx .board { min-height: 0; background: var(--card); border-radius: 18px; box-shadow: 0 0 0 1px var(--edge), 0 1px 2px var(--shadow);
  padding: 34px 40px 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.lx .sec .h4 { font-size: var(--s); font-weight: 600; color: var(--t2); letter-spacing: 0; }
.lx .fig { margin-top: 4px; font-family: ui-rounded, -apple-system, sans-serif; font-size: var(--fig); font-weight: 600; line-height: 1.1; letter-spacing: -.4px; font-variant-numeric: tabular-nums; color: var(--t1); }
.lx .fig small { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: var(--m); font-weight: 600; color: var(--t2); letter-spacing: 0; }

/* Opens: takes the spare height */
.lx .s-opens { display: flex; flex-direction: column; }
.lx .opens { position: relative; height: 196px; display: flex; flex-direction: column; margin-top: 18px; cursor: crosshair; }
.lx .opens svg { flex: 1 1 0; min-height: 0; height: 0; width: 100%; display: block; overflow: visible; }
.lx .opens .dates { flex: none; position: relative; height: 26px; font-size: var(--s); color: var(--t3); }
.lx .opens .dates span { position: absolute; top: 10px; transform: translateX(-50%); white-space: nowrap; }
.lx .opens .dates span:first-child { transform: translateX(-6px); } .lx .opens .dates span:last-child { transform: translateX(calc(-100% + 6px)); color: var(--t2); }
.lx .tipbox { position: absolute; top: 0; pointer-events: none; background: var(--tip); color: #fff; border-radius: 10px; padding: 8px 11px; box-shadow: 0 6px 14px rgba(0,0,0,.2);
  font-size: var(--s); white-space: nowrap; opacity: 0; transform: translateY(2px); transition: opacity 120ms ease-out, transform 120ms ease-out; z-index: 5; }
.lx .tipbox.on { opacity: 1; transform: none; }
.lx .tipbox b { display: block; font-weight: 600; } .lx .tipbox span { display: block; color: var(--tipInk); margin-top: 2px; }

/* Read Depth: one bar, three segments */
.lx .segbar { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lx .segbar i { height: 10px; background: var(--track); transform-origin: left center; }
.lx .segbar i.on { background: var(--accent); }
.lx .segbar i:first-child { border-radius: 5px 2px 2px 5px; } .lx .segbar i:last-child { border-radius: 2px 5px 5px 2px; }

/* Pages: time on each page */
.lx .plist { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lx .prow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 16px; }
.lx .prow .pn { font-size: var(--s); color: var(--t2); white-space: nowrap; }
.lx .prow .tr { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.lx .prow .tr i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.lx .prow .tm { text-align: right; font-size: var(--m); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Settings: two columns of grouped rows, no separators ===== */
.lx .sets { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.lx .scol { display: flex; flex-direction: column; gap: 26px; }
.lx .grp .h5 { font-size: var(--s); font-weight: 600; color: var(--t2); padding-left: 4px; margin-bottom: 8px; }
.lx .scard { background: var(--card); border-radius: 14px; box-shadow: 0 0 0 1px var(--edge), 0 1px 2px var(--shadow); padding: 6px 0; }
.lx .setrow { display: flex; align-items: center; gap: 16px; padding: 12px 18px; }
.lx .setrow .lb { flex: 1; min-width: 0; }
.lx .setrow .lb b { display: block; font-size: 13.5px; font-weight: 500; }
.lx .setrow .lb small { display: block; font-size: 12px; color: var(--t2); margin-top: 2px; text-wrap: balance; }
.lx .tg { width: 34px; height: 20px; border-radius: 10px; background: rgba(120,120,128,.24); position: relative; flex: none; transition: background 200ms; }
.lx .tg::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform 250ms cubic-bezier(.22,1,.36,1); }
.lx .tg[aria-checked="true"] { background: var(--accent); }
.lx .tg[aria-checked="true"]::after { transform: translateX(14px); }
.lx .tg:focus-visible, .lx .mbtn:focus-visible, .lx .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lx .mbtn { height: 24px; padding: 0 12px; border-radius: 7px; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.06); font-size: 12px; flex: none; }
:root[data-theme="dark"] .lx .mbtn { background: rgba(255,255,255,.14); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx .mbtn { background: rgba(255,255,255,.14); box-shadow: none; } }

/* Phones: one column, no scaling */
.lx.phone .fitbox { aspect-ratio: auto; }
.lx.phone .win { position: relative; width: 100%; height: auto; transform: none !important; flex-direction: column; }
.lx.phone .side { display: none; }
.lx.phone .pbtn { height: 40px; } /* a thumb-sized target on phones */
.lx.phone .lights { left: 16px; top: 16px; }
.lx.phone .band { flex-wrap: wrap; padding: 44px 16px 16px; }
.lx.phone .canvas { overflow: visible; padding: 0 16px 16px; }
.lx.phone .two, .lx.phone .sets { grid-template-columns: 1fr; gap: 24px; }
.lx.phone .reader { padding-top: 0; }
.lx.phone .reader .h5 { margin-top: 22px; }
.lx.phone .board { padding: 24px 20px; gap: 32px; }
.lx.phone .opens { flex: none; height: 150px; }
.lx.phone .seg button { height: 36px; }

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

/* ===== Round 4: the left column as three cards, and a stat line on each section ===== */
.lx .two { gap: 28px; grid-template-columns: 268px minmax(0, 1fr); }
.lx .reader.r1 { padding-top: 0; gap: 12px; }
.lx .pcard { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px var(--edge), 0 1px 2px var(--shadow); padding: 18px 18px 16px; }
.lx .pcard.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lx .ph { display: flex; align-items: center; gap: 7px; color: var(--t2); margin-bottom: 12px; }
.lx .ph svg.i { width: 14px; height: 14px; }
.lx .reader .ph .h5 { margin: 0; font-size: var(--s); font-weight: 600; color: var(--t2); }
.lx .ph .cnt { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--wash); color: var(--accent); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; }
.lx .r1 .mono { width: 44px; height: 44px; font-size: 14px; }
.lx .kv { margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.lx .kv dt { font-size: 11.5px; color: var(--t3); }
.lx .kv dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--t1); white-space: nowrap; }
.lx .sigin .hand { font-size: 22px; padding-left: 4px; }
.lx .sigin .sigfoot { margin-top: 6px; flex-direction: row; align-items: center; justify-content: space-between; }
.lx .nlist { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 12px; }
.lx .r1 .noterow { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.lx .r1 .thumb { width: 34px; }
.lx .r1 .noterow q { font-size: 13px; line-height: 1.4; margin-top: 3px; }
.lx .r1 .nmeta span { font-size: 11.5px; color: var(--t3); }

.lx .sec .sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lx .side-stat { display: flex; align-items: baseline; gap: 6px; padding-bottom: 4px; white-space: nowrap; }
.lx .side-stat b { font-size: 17px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
.lx .side-stat span { font-size: var(--s); color: var(--t2); }
.lx .sline { margin-top: 4px; font-size: var(--s); color: var(--t2); }
.lx .seglabels { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); font-size: 11.5px; color: var(--t3); }
.lx .board { gap: 28px; }
.lx .opens { height: 168px; margin-top: 12px; }
.lx .ph .sigbtns { margin-left: auto; gap: 14px; }
.lx .sigin .sigfoot { margin-top: 4px; }
.lx .nlist { justify-content: flex-start; gap: 8px; }
.lx .r1 .noterow { background: var(--ground); border-radius: 12px; padding: 12px; grid-template-columns: 40px minmax(0, 1fr); flex: 1; align-content: center; }
.lx .r1 .thumb { width: 40px; }
.lx .sigin .hand { padding-left: 10px; }

/* ===== Round 5: three equal cards on the right, a photo, a cleaner signature, lighter note tiles ===== */
.lx .board { background: none; box-shadow: none; border-radius: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 12px; }
.lx .sec { min-height: 0; background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px var(--edge), 0 1px 2px var(--shadow); padding: 20px 24px 20px; display: flex; flex-direction: column; }
.lx .sec .h4 { display: flex; align-items: center; gap: 8px; }
.lx .sicon { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--wash); color: var(--accent); }
.lx .sicon svg.i { width: 13px; height: 13px; stroke-width: 1.9; }
.lx .fig { margin-top: 6px; font-size: 30px; }
.lx .sec .sh { align-items: center; }
.lx .s-opens .opens { flex: 1; height: auto; min-height: 0; margin-top: 8px; }
.lx .s-depth .segbar { margin-top: auto; }
.lx .s-pages .plist { margin-top: auto; gap: 8px; }
.lx .s-depth .sline, .lx .s-pages .sline { margin-top: 2px; }

.lx .face { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--edge); }

.lx .pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px; border-radius: 11px; background: var(--wash); color: var(--accent); font-size: 11.5px; font-weight: 600; }
.lx .pill svg.i { width: 11px; height: 11px; stroke-width: 2.4; }
.lx .sigpad { position: relative; border-radius: 12px; background: var(--wash); height: 76px; display: grid; place-items: center; }
.lx .sigpad .hand { font-size: 24px; padding: 0; line-height: 1; transform: translateY(2px); }
.lx .sigpage { position: absolute; right: 10px; bottom: 7px; font-size: 10.5px; font-weight: 600; color: var(--accent); opacity: .7; }
.lx .sigfoot { margin-top: 12px; flex-direction: row; align-items: center; justify-content: space-between; }
.lx .sigwhen { font-size: var(--s); color: var(--t2); }
.lx .sigbtns { gap: 6px; }
.lx .pbtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--track); color: var(--t1); font-size: 12px; font-weight: 600; transition: background 150ms ease-out; }
.lx .pbtn:hover { background: var(--wash); color: var(--accent); }
.lx .pbtn svg.i { width: 12px; height: 12px; stroke-width: 1.9; }

.lx .r1 .noterow { background: rgba(20,20,26,.028); }
:root[data-theme="dark"] .lx .r1 .noterow { background: rgba(255,255,255,.045); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx .r1 .noterow { background: rgba(255,255,255,.045); } }
.lx .sicon svg.i { display: block; }
.lx .sigpad { height: 84px; }
.lx .sigpad .sigwhen { position: absolute; left: 12px; bottom: 8px; font-size: 10.5px; color: var(--t2); }
.lx .sigpage { right: 12px; bottom: 8px; }
.lx .sigfoot { margin-top: 10px; }
.lx .sigfoot .sigbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.lx .pbtn { justify-content: center; height: 30px; }
.lx .s-depth .segbar { margin-top: auto; }
.lx .s-depth .seglabels { margin-bottom: auto; }

/* ===== Round 6 ===== */
.lx .kv { grid-template-columns: 1fr 1fr; margin-top: 18px; }
.lx .reader.r1 { gap: 14px; }
.lx .pcard { padding: 20px 20px 18px; }
.lx .sigpad { height: 104px; }
.lx .sigpad .hand { font-size: 27px; transform: translateY(-4px); }
.lx .sigfoot { margin-top: 12px; }
.lx .nlist { gap: 10px; }
.lx .r1 .noterow { padding: 14px; }

/* Read Depth: the pages themselves, each ticked once read, ending at the signature */
.lx .dpages { margin-top: auto; margin-bottom: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 10px; }
.lx .dp { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.lx .dthumb { position: relative; height: 92px; aspect-ratio: 210 / 297; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--edge), 0 4px 12px var(--shadow); }
.lx .dthumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.lx .dthumb .tick { position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--card); }
.lx .dthumb .tick svg.i { display: block; width: 12px; height: 12px; stroke-width: 2.6; }
.lx .dp.end .dthumb { background: var(--wash); box-shadow: none; display: grid; place-items: center; color: var(--accent); }
.lx .dp.end .dthumb svg.i { display: block; width: 26px; height: 26px; stroke-width: 1.8; }
.lx .dl { font-size: 11.5px; color: var(--t2); }
:root[data-theme="dark"] .lx .dthumb img { filter: brightness(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx .dthumb img { filter: brightness(.92); } }
.lx .sigpad { height: 94px; }
.lx .reader.r1 { gap: 12px; }
.lx .r1 .noterow { padding: 12px; }
.lx .r1 .nmeta { gap: 6px; white-space: nowrap; }
.lx .r1 .nmeta span { font-size: 11px; }
.lx .s-pages .plist { margin-top: auto; margin-bottom: auto; padding-top: 6px; }

/* ===== Round 7: cards build in on arrival (transitions.dev Texts reveal, per card) ===== */
.lx.rv .pcard, .lx.rv .sec {
  opacity: 0; transform: translateY(12px); filter: blur(3px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: transform, opacity, filter;
}
.lx.rv.is-shown .pcard, .lx.rv.is-shown .sec { opacity: 1; transform: none; filter: none; }
/* Phones: one card at a time, as each scrolls into view (track.js arriveByCard). */
.lx.rv .pcard.in, .lx.rv .sec.in { opacity: 1; transform: none; filter: none; transition-delay: 0ms; }
.lx.rv.is-shown .canvas.is-settings .scard { transition: none; }
@media (prefers-reduced-motion: reduce) { .lx.rv .pcard, .lx.rv .sec { opacity: 1; transform: none; filter: none; transition: none !important; } }

/* Phones: the right-hand cards stack, so tighten them to the narrow width */
.lx.phone .board { gap: 12px; }
.lx.phone .sec { padding: 18px; }
.lx.phone .sec .sh { flex-wrap: wrap; align-items: flex-end; row-gap: 4px; }
.lx.phone .s-opens .opens { flex: none; height: 150px; }
.lx.phone .opens .dates span:nth-child(even) { display: none; }
.lx.phone .dpages { gap: 6px; margin: 14px 0 0; }
.lx.phone .dthumb { height: 66px; }
.lx.phone .dp.end .dthumb svg.i { width: 20px; height: 20px; }
.lx.phone .s-pages .plist { margin: 14px 0 0; }
.lx.phone .dp { min-width: 0; }
.lx.phone .dthumb { height: auto; width: min(100%, 47px); }
.lx.phone .board { padding: 0; }
.lx.phone .prow { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; }
.lx.phone .board { grid-template-rows: none; }

/* ai.css */
/* Loop site: the AI section, a small chat over an AI composer (prototypes/loop-ai-band-2026-10-12/round10).
   Every rule is scoped to #ai; motion values are transitions.dev tokens, set on #ai. */
/* Motion tokens (transitions.dev) */
#ai {
    --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms;
    --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
    --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out; --ease-linear: linear;
    --distance-micro: 4px; --distance-base: 8px; --distance-medium: 12px;
    --blur-small: 2px; --blur-medium: 3px;
    --stream-gap: 60ms; --stream-fade: 350ms; --stream-blur: 1px;
    --shimmer-dur: 2000ms; --shimmer-band: 400%;
    --check-draw: 350ms;
    --learn-shift: 2px; --learn-spread: 8deg;

    /* The one big move: the space opens once, slowly, on an iOS sheet curve (outside the token scale on purpose). */
    --duration-open: 700ms;
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);

    /* The composer */
    --cp-radius: 26px;
    --cp-shadow: 0 0 0 1px rgba(17, 22, 32, .07), 0 1px 2px rgba(17, 22, 32, .04), 0 8px 24px -10px rgba(17, 22, 32, .10);
    --cp-shadow-on: 0 0 0 1px rgba(17, 22, 32, .10), 0 1px 2px rgba(17, 22, 32, .05), 0 14px 34px -12px rgba(17, 22, 32, .16);
    --bubble: #F1F3F6;
    --caret: var(--accent);
    --chip-h: 32px;
  }
:root[data-theme="dark"] #ai {
    --cp-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 0 0 rgba(255, 255, 255, .04) inset, 0 16px 40px -18px rgba(0, 0, 0, .7);
    --cp-shadow-on: 0 0 0 1px rgba(255, 255, 255, .13), 0 1px 0 0 rgba(255, 255, 255, .05) inset, 0 22px 50px -18px rgba(0, 0, 0, .8);
    --bubble: #1C1F26;
  }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #ai {
      --cp-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 0 0 rgba(255, 255, 255, .04) inset, 0 16px 40px -18px rgba(0, 0, 0, .7);
      --cp-shadow-on: 0 0 0 1px rgba(255, 255, 255, .13), 0 1px 0 0 rgba(255, 255, 255, .05) inset, 0 22px 50px -18px rgba(0, 0, 0, .8);
      --bubble: #1C1F26;
    }
}
/* ---------- Head ---------- */
#ai .head h2 { font-size: clamp(30px, 3.4vw, 40px); }
#ai .section-sub { margin-top: var(--s3); font-size: 17px; }
/* ---------- The stage: a tiny conversation over a composer ---------- */
#ai .chat { position: relative; width: 100%; max-width: 620px; margin: var(--s7) auto 0; }
/* The convo hugs the box: content is anchored to its bottom edge, so while the space opens the newest line rides down with the box. */
#ai .convo { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; }
/* Every scene shares one cell, bottom-aligned, so the space is always the height of the tallest exchange and never changes. */
#ai .stack { display: grid; padding: 0 6px 22px; }
#ai .scene { grid-area: 1 / 1; align-self: end; display: flex; flex-direction: column; visibility: hidden; opacity: 1; filter: blur(0);
    transition: opacity var(--duration-medium) var(--ease-smooth-out), filter var(--duration-medium) var(--ease-smooth-out); }
#ai .scene.is-live { visibility: visible; }
#ai .scene.is-out { opacity: 0; filter: blur(var(--blur-small)); }
#ai .msg { display: flex; justify-content: flex-end; }
#ai .sent { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 82%; }
#ai .bubble { padding: 9px 16px 10px; border-radius: 20px; background: var(--bubble);
    font-size: 15.5px; line-height: 1.45; letter-spacing: -0.005em; color: var(--ink1); text-wrap: balance; }
/* An attached file, as a small pill (in the box while typing, above the bubble once sent) */
#ai .file { display: inline-flex; align-items: center; gap: 7px; height: var(--chip-h); padding: 0 12px 0 9px; border-radius: 12px;
    background: var(--bubble); font-size: 13.5px; font-weight: 500; line-height: 1; letter-spacing: -0.005em; color: var(--ink1); white-space: nowrap; }
#ai .composer .file { background: var(--quiet); box-shadow: inset 0 0 0 1px var(--hairline); }
#ai .file svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#ai .tools { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding: 0; list-style: none; }
#ai .tool { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; color: var(--ink2); }
#ai .tk { position: relative; display: inline-grid; margin-left: -1px; width: 14px; height: 14px; flex: none; color: var(--ink3); }
#ai .tk svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
#ai .tk .spin { stroke-width: 1.6; opacity: 0; transform: scale(.25); filter: blur(var(--blur-small));
    transition: opacity var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out), filter var(--duration-fast) var(--ease-in-out); }
#ai .tk .spin circle { transform-origin: 7px 7px; animation: ai-spin 800ms var(--ease-linear) infinite; }
#ai .tk .chk { stroke-width: 1.8; }
#ai .tk .chk path { stroke-dasharray: 14; stroke-dashoffset: 0; }
#ai .tn { position: relative; display: inline-block; }
#ai .reply { margin-top: 18px; }
#ai .app { display: block; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--ink3); letter-spacing: 0; }
/* The reply sits in a bubble of the same shape as the ask, on the left, in the card colour */
#ai .ans { margin-top: 6px; max-width: 82%; padding: 9px 16px 10px; border-radius: 20px; background: var(--card); box-shadow: var(--cp-shadow);
    font-size: 15.5px; line-height: 1.45; letter-spacing: -0.005em; color: var(--ink1); text-wrap: balance; }
/* No app names: the label stays in the markup only as the reply's cue */
#ai .app { display: none; }
#ai .chat.is-anim .ans { opacity: 0; transform: translateY(var(--distance-micro)); }
#ai .chat.is-anim .app.on + .ans { opacity: 1; transform: none;
    transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }
/* Animated: no space until the first message is sent, then it opens once and stays open. */
#ai .chat.is-anim .convo { height: 0; overflow: hidden; transition: height var(--duration-open) var(--ease-ios); }
#ai .chat.is-anim .convo.is-open { overflow: visible; }
/* Composer */
#ai .composer { position: relative; z-index: 2; border-radius: var(--cp-radius); background: var(--card); box-shadow: var(--cp-shadow);
    transition: box-shadow var(--duration-fast) var(--ease-smooth-out); }
#ai .composer.is-focus { box-shadow: var(--cp-shadow-on); }
/* The box is one line tall at rest and grows only when it needs to (a file, a second line), downward,
     so its top edge never moves. interpolate-size lets the height glide where the browser supports it. */
#ai .field { interpolate-size: allow-keywords; height: auto; transition: height var(--duration-fast) var(--ease-smooth-out);
    position: relative; display: grid; padding: 17px 22px 2px; font-size: 16.5px; line-height: 1.5; letter-spacing: -0.008em; color: var(--ink1); }
#ai .field > * { grid-area: 1 / 1; }
#ai .ghost { display: none; }
#ai .ghost .gap { display: block; height: calc(var(--chip-h) + 10px); }
#ai .live { align-self: start; display: grid; grid-template-rows: auto auto; min-width: 0; }
/* Attachment slot: grows open inside the box (accordion), so only the text inside moves, never the box */
#ai .slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-fast) var(--ease-smooth-out); }
#ai .slot.is-open { grid-template-rows: 1fr; }
#ai .slot-in { min-height: 0; overflow: hidden; }
#ai .slot-in .file { margin-bottom: 10px; }
#ai .composer .file { opacity: 0; transform: scale(.96); filter: blur(var(--blur-small));
    transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) var(--ease-smooth-out); transform-origin: left center; }
#ai .composer .file.on { opacity: 1; transform: none; filter: blur(0); }
#ai .composer .file.is-leaving { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); filter: blur(0);
    transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out); }
#ai .row { display: grid; min-width: 0; }
#ai .row > * { grid-area: 1 / 1; }
#ai .line { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#ai .txt { transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out); }
#ai .txt.is-leaving { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); }
#ai .ph { color: var(--ink3); pointer-events: none; }
#ai .ph.is-hidden { visibility: hidden; }
#ai .caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; margin-right: -3px; border-radius: 1px; background: var(--caret);
    vertical-align: -0.2em; opacity: 0; }
#ai .chat.is-anim .caret { opacity: 1; animation: ai-blink 1060ms steps(1, end) infinite; }
#ai .chat.is-anim .caret.is-solid { animation: none; opacity: 1; }
#ai .txt:empty + .caret { transform: translateX(-3px); }
#ai .bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px 12px; }
#ai .plus { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink2);
    box-shadow: inset 0 0 0 1px var(--hairline); }
#ai .plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#ai .send { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--quiet); color: var(--ink4);
    transition: background-color var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
#ai .send[data-state="ready"], #ai .send[data-state="busy"] { background: var(--solid); color: var(--on-solid); }
#ai .send.is-press { transform: scale(.9); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-micro); }
#ai .send .t-icon { grid-area: 1 / 1; width: 18px; height: 18px;
    transition: opacity var(--duration-fast) var(--ease-in-out), filter var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out); }
#ai .send .arrow { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#ai .send .stop { fill: currentColor; opacity: 0; filter: blur(var(--blur-small)); transform: scale(.25); }
#ai .send[data-state="busy"] .arrow { opacity: 0; filter: blur(var(--blur-small)); transform: scale(.25); }
#ai .send[data-state="busy"] .stop { opacity: 1; filter: blur(0); transform: scale(1); }
/* Setup guide link (learn-more hover) */
#ai .ai-guide { display: flex; justify-content: center; margin-top: var(--s5); }
#ai .t-learn { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--ink2); text-decoration: none;
    transition: color var(--duration-quick) var(--ease-smooth-out); }
#ai .t-learn:hover, #ai .t-learn:focus-visible { color: var(--ink1); }
#ai .t-learn-chevron { display: inline-flex; transform: translateX(0); transition: transform var(--duration-medium) var(--ease-smooth-out); }
#ai .t-learn-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; overflow: visible; }
#ai .t-learn-arm { transform-box: view-box; transform-origin: 10px 8px; transition: transform var(--duration-medium) var(--ease-smooth-out); }
#ai .t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); }
#ai .t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
#ai .t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }
/* ---------- Animated states (only once the script runs; the default is a finished, still conversation) ---------- */
#ai .chat.is-anim .sent { opacity: 0; }
#ai .chat.is-anim .sent.on { opacity: 1; transform: none;
    transition: transform var(--duration-very-slow) var(--ease-smooth-out), opacity var(--duration-medium) var(--ease-smooth-out); }
/* Texts reveal for each tool line and the app label */
#ai .chat.is-anim .tool, #ai .chat.is-anim .app { opacity: 0; transform: translateY(var(--distance-medium)); filter: blur(var(--blur-medium)); }
#ai .chat.is-anim .tool.on, #ai .chat.is-anim .app.on { opacity: 1; transform: none; filter: blur(0);
    transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-smooth-out); }
/* A running tool shimmers and spins; a finished one draws its tick */
#ai .chat.is-anim .tool .chk path { stroke-dashoffset: 14; opacity: 0; }
#ai .chat.is-anim .tool.done .chk path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset var(--check-draw) var(--ease-smooth-out), opacity var(--duration-micro) var(--ease-out); }
#ai .chat.is-anim .tool.run .spin { opacity: 1; transform: scale(1); filter: blur(0); }
#ai .tool.run .tn { color: var(--ink4); }
#ai .tool.run .tn::before { content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--ink1) 50%, transparent 60%, transparent 100%);
    background-size: var(--shimmer-band) 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; animation: ai-shimmer var(--shimmer-dur) var(--ease-linear) infinite; }
/* Streaming answer */
#ai .w { white-space: nowrap; }
#ai .chat.is-anim .w { opacity: 0; filter: blur(var(--stream-blur)); }
#ai .chat.is-anim .w.in { opacity: 1; filter: blur(0); transition: opacity var(--stream-fade) var(--ease-smooth-out), filter var(--stream-fade) var(--ease-smooth-out); }
#ai .chat.is-paused *, #ai .chat.is-paused *::before { animation-play-state: paused !important; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ai-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
#ai .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 720px) {
  #ai .head h2 .soft { display: inline; }
  #ai .chat { margin-top: var(--s6); }
  #ai .stack { padding: 0 2px 18px; }
  #ai .sent { max-width: 88%; }
  #ai .bubble { font-size: 15px; padding: 8px 14px 9px; border-radius: 18px; }
  #ai .ans { font-size: 15px; padding: 8px 14px 9px; border-radius: 18px; max-width: 88%; }
  #ai .field { padding: 15px 18px 2px; font-size: 16px; }
  #ai .bar { padding: 6px 8px 8px 10px; }
  #ai { --cp-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #ai .scene, #ai .sent, #ai .bubble, #ai .tool, #ai .app, #ai .w, #ai .txt, #ai .send, #ai .send .t-icon, #ai .composer, #ai .composer .file, #ai .slot, #ai .tk .spin, #ai .tool .chk path, #ai .t-learn-chevron, #ai .t-learn-arm { transition: none !important; }
  #ai .tk .spin circle, #ai .caret, #ai .tool.run .tn::before { animation: none !important; }
}
/* Round 8: one step at a time. Every step shares one line; each new step takes the last one's place
     (transitions.dev text states swap), and the last step stays, ticked. */
#ai .tools { display: grid; }
#ai .tool { grid-area: 1 / 1; }
#ai .chat:not(.is-anim) .tool:not(:last-child) { visibility: hidden; }
#ai .chat.is-anim .tool.past { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); filter: blur(var(--blur-small));
    transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out); }
#ai .chat.is-anim .tool.on:not(.past) { transform: none; }
#ai .chat.is-anim .tool { transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); }
#ai .chat.is-anim .tool.on:not(.past) { transition: opacity var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out), filter var(--duration-fast) var(--ease-in-out); }
/* Round 7: quieter steps (variant 2) */
#ai .tools { gap: 3px; margin-top: 12px; }
#ai .tool { font-weight: 400; color: var(--ink3); font-size: 12px; line-height: 17px; gap: 7px; }
#ai .tk, #ai .tk svg { width: 12px; height: 12px; }
#ai .tk { color: var(--ink4); }
#ai .tool.run .tn { color: var(--ink4); }

/* review.css */
/* Review & Sign: the contract walk-through (Pen, Highlight, Arrow, Text, Sign), one scroll per tool.
   Built from prototypes/loop-review-sign-2026-10-09/round7. Every rule is scoped to #review-sign. */
@font-face { font-family: "Homemade Apple"; font-style: normal; font-weight: 400; font-display: block; src: url(../fonts/homemade-apple-latin.woff2) format("woff2"); }

#review-sign {
  /* The paper: white in light, a dark sheet in dark (see the dark rules below). */
  --paper-white: #FFFFFF;
  --paper-ink: #16181D;
  --paper-ink2: #5B606A;
  --paper-ink3: #8C919B;
  --sam: #7A50D6;             /* Sam's marker ink */
  --sign: #426DC8;            /* Loop blue, the signing colour */
  --sign-fill: #3F6FD8;     /* a step deeper than Loop blue so the white "Sign" passes AA */
  --hand: #1B2A55;            /* the handwriting */
  --move: cubic-bezier(0.22, 1, 0.36, 1);
  --swap-dur: 150ms;
  --swap-y: 6px;
  /* Glass, as the reader page draws it: a white pebble with a double rim in light. */
  --glass-fill: radial-gradient(140% 120% at 30% 0%, #FFFFFF 0%, color-mix(in srgb, #FFFFFF 97%, #111014) 45%, color-mix(in srgb, #FFFFFF 92%, #6C7A99) 100%);
  --glass-shadow: inset 0 0 0 1px #FFFFFF, 0 0 0 1px rgba(20, 20, 30, 0.06), 0 6px 16px rgba(30, 28, 24, 0.14), 0 1px 2px rgba(30, 28, 24, 0.08);
  --glass-blur: none;
  --glass-ink: color-mix(in srgb, #111014 72%, #FFFFFF);
  --tint-mix: #000000; --tint-amt: 12%;
}
/* Smoked glass with a light rim in dark. */
:root[data-theme="dark"] #review-sign {
  --glass-fill: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent 55%), rgba(24, 24, 30, 0.62);
  --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.2);
  --glass-blur: blur(18px) saturate(1.6);
  --glass-ink: rgba(255, 255, 255, 0.85);
  --tint-mix: #FFFFFF; --tint-amt: 42%;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #review-sign {
  --glass-fill: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent 55%), rgba(24, 24, 30, 0.62);
  --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.2);
  --glass-blur: blur(18px) saturate(1.6);
  --glass-ink: rgba(255, 255, 255, 0.85);
  --tint-mix: #FFFFFF; --tint-amt: 42%;
} }

/* ---------- The tour: as tall as the page it shows, so it sits as close to the heading and the list below
   as every other section's content (Theo, 2026-10-14). Holding the page (review.js) parks it just under
   the floating menu bar. ---------- */
#review-sign .tour { position: relative; margin-top: var(--head-gap, 40px); }
#review-sign .tour-pin { position: relative; display: grid; justify-items: center; overflow-x: clip; }
#review-sign .tour-in { position: relative; width: min(1200px, calc(100vw - var(--gutter) * 2)); height: var(--rig-h, 800px); }

/* The tool name beside the page. */
#review-sign .cap {
  position: absolute; left: 0; top: var(--cap-top, 50%); width: var(--cap-w, 280px); translate: 0 -50%;
  opacity: 0; filter: blur(4px); transform: translateX(-10px);
  transition: opacity 400ms var(--move), filter 400ms var(--move), transform 500ms var(--move);
}
#review-sign .cap.on { opacity: 1; filter: blur(0); transform: none; }
#review-sign .cap-bars { margin-top: var(--s5); max-width: 200px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#review-sign .cap-bars span { height: 3px; border-radius: 2px; background: rgba(75, 123, 227, .13); overflow: hidden; }
#review-sign .cap-bars i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
#review-sign .cap-bars span.on i { transform: none; }
:root[data-theme="dark"] #review-sign .cap-bars span { background: rgba(134, 169, 242, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #review-sign .cap-bars span { background: rgba(134, 169, 242, .16); } }
#review-sign .cap-name { font-size: clamp(44px, 4.4vw, 64px); font-weight: 400; line-height: 1.04; letter-spacing: -0.04em; color: var(--ink1); }
#review-sign .cap-line { margin-top: var(--s3); font-size: 19px; line-height: 1.45; color: var(--ink2); text-wrap: balance; }
#review-sign .swap {
  display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1;
  transition: transform var(--swap-dur) ease-in-out, filter var(--swap-dur) ease-in-out, opacity var(--swap-dur) ease-in-out;
}
#review-sign .swap.out { transform: translateY(calc(var(--swap-y) * var(--dir, -1))); filter: blur(2px); opacity: 0; }
#review-sign .swap.pre { transform: translateY(calc(var(--swap-y) * var(--dir, -1) * -1)); filter: blur(2px); opacity: 0; transition: none; }
#review-sign .cap-line .swap:not(.out):not(.pre) { transition-delay: 40ms; }

/* The rig: the reader's top bar, then the page. */
#review-sign .rig { position: absolute; top: 0; left: 0; width: var(--stage-w, 520px); height: var(--rig-h, 800px); isolation: isolate; }

#review-sign .bar { position: relative; z-index: 3; height: 44px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
#review-sign .sender { display: flex; align-items: center; gap: 10px; }
#review-sign .brandmark {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  font-size: 14px; font-weight: 600; color: #FFFFFF;
  background: radial-gradient(120% 120% at 25% 10%, color-mix(in srgb, #426DC8 78%, #fff) 0%, #426DC8 80%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -4px color-mix(in srgb, #426DC8 55%, transparent);
}
#review-sign .sender b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; color: var(--ink1); }
#review-sign .sender small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.2; color: var(--ink3); white-space: nowrap; }
#review-sign .rig.tight .sender small { display: none; }

#review-sign .glass { background: var(--glass-fill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
#review-sign .rail { position: absolute; left: 50%; top: 0; translate: -50% 0; display: flex; gap: 2px; padding: 4px; border-radius: 15px; }
#review-sign .rail .icon {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  color: var(--glass-ink); transition: color 250ms ease-out, transform 160ms ease-out;
}
#review-sign .rail .icon svg { width: 18px; height: 18px; pointer-events: none; }
#review-sign .rail .icon, #review-sign .signpill { border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#review-sign .rail .icon { background: transparent; }
#review-sign .signpill { padding: 0 14px 0 11px; font-size: 13px; font-weight: 600; }
#review-sign .rail .icon::after { content: ""; position: absolute; inset: 0; border-radius: 11px; background: currentColor; opacity: 0; transition: opacity 150ms ease-out; }
@media (hover: hover) { #review-sign .rail .icon:hover::after { opacity: .07; } #review-sign .signpill:hover { filter: brightness(1.06); } }
#review-sign .rail .icon:active { transform: scale(.94); }
#review-sign .signpill:active { transform: scale(.96); }
#review-sign .rail .icon:focus-visible, #review-sign .signpill:focus-visible { outline: 2px solid #426DC8; outline-offset: 2px; }
#review-sign .rail .icon.lit { color: var(--you-tag, var(--glass-ink)); }
#review-sign .rail .icon.tap { transform: scale(.94); }
/* The chosen tool: a soft fill of Sam's ink that slides between them. */
#review-sign .sel {
  position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 11px; pointer-events: none;
  background: color-mix(in srgb, var(--sam) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sam) 22%, transparent);
  opacity: 0; transform: translateX(var(--x, 0px)) scale(.92);
  transition: transform 250ms var(--move), opacity 150ms ease-out;
}
#review-sign .sel.on { opacity: 1; transform: translateX(var(--x, 0px)); }

#review-sign .actions { display: flex; align-items: center; padding: 4px; border-radius: 15px; }
#review-sign .signpill {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 11px;
  background: var(--sign-fill); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 200ms var(--ease-spring);
}
#review-sign .signpill svg { width: 15px; height: 15px; }
#review-sign .signpill.tap { transform: scale(.96); }
#review-sign .signpill.done { background: color-mix(in srgb, #426DC8 12%, transparent); color: #426DC8; }
:root[data-theme="dark"] #review-sign .signpill.done { color: #86A9F2; background: color-mix(in srgb, #86A9F2 16%, transparent); }
#review-sign .signpill .w { display: inline-grid; }
#review-sign .signpill .w > span { grid-area: 1 / 1; transition: opacity 150ms ease-in-out, filter 150ms ease-in-out, transform 150ms ease-in-out; }
#review-sign .signpill .w .b { opacity: 0; filter: blur(2px); transform: translateY(4px); }
#review-sign .signpill.done .w .a { opacity: 0; filter: blur(2px); transform: translateY(-4px); }
#review-sign .signpill.done .w .b { opacity: 1; filter: blur(0); transform: none; }

/* The sheet: a window onto the contract, which the camera moves across. */
#review-sign .stage {
  position: relative; z-index: 2; width: 100%; height: var(--stage-h, 740px); border-radius: 14px; overflow: hidden;
  background: var(--paper-white); box-shadow: var(--shadow-frame); user-select: none; -webkit-user-select: none;
}
#review-sign .board { position: absolute; left: 0; top: 0; width: 508px; transform-origin: 0 0; }

/* ---------- The contract, as original version 3 draws it ---------- */
#review-sign .rs-page { position: relative; padding: 40px 44px 48px; color: var(--paper-ink); }
#review-sign .rs-top { display: flex; align-items: baseline; justify-content: space-between; }
#review-sign .rs-mark { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
#review-sign .rs-date { font-size: 12.5px; color: var(--paper-ink3); font-variant-numeric: tabular-nums; }
#review-sign .rs-title { margin-top: 30px; font-size: 27px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; }
#review-sign .rs-between { margin-top: 6px; font-size: 14px; color: var(--paper-ink2); }
#review-sign .rs-clauses { margin-top: 30px; display: grid; gap: 18px; }
#review-sign .rs-clause { display: grid; grid-template-columns: 108px minmax(0, 1fr); font-size: 13.5px; line-height: 1.6; }
#review-sign .rs-clause b { font-weight: 500; color: var(--paper-ink); }
#review-sign .rs-clause b span { display: inline-block; width: 18px; color: var(--paper-ink3); font-weight: 400; font-variant-numeric: tabular-nums; }
#review-sign .rs-clause p { color: var(--paper-ink2); }
#review-sign .rs-clause p span { white-space: nowrap; }
#review-sign .rs-signs { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#review-sign .rs-party { font-size: 12.5px; font-weight: 500; color: var(--paper-ink3); }

/* Sign Here spots, as the reader page draws them */
#review-sign .rs-spot {
  position: relative; margin-top: 10px; height: 74px; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(66, 109, 200, .07); border: 1.5px dashed rgba(66, 109, 200, .6);
  color: var(--sign); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color 300ms var(--move), border-color 300ms var(--move), opacity 300ms var(--move), transform 160ms ease-out;
}
#review-sign .rs-spot.wait { opacity: .5; }
#review-sign .rs-spot.press { transform: scale(.98); background-color: rgba(66, 109, 200, .14); }
#review-sign .rs-spot.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 9px; pointer-events: none; animation: rs-ring 700ms var(--move) 1 both; }
@keyframes rs-ring { from { box-shadow: inset 0 0 0 0 rgba(66, 109, 200, .0), 0 0 0 0 rgba(66, 109, 200, .38); } to { box-shadow: inset 0 0 0 0 rgba(66, 109, 200, 0), 0 0 0 14px rgba(66, 109, 200, 0); } }
#review-sign .rs-spot.done { border: 1px solid rgba(66, 109, 200, .28); background: #F2F5FB; opacity: 1; }
#review-sign .rs-sw { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity 150ms ease-in-out, translate 150ms ease-in-out, filter 150ms ease-in-out; }
#review-sign .rs-sw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#review-sign .rs-sw.b { opacity: 0; translate: 0 4px; filter: blur(2px); }
#review-sign .rs-spot.next .rs-sw.a { opacity: 0; translate: 0 -4px; filter: blur(2px); }
#review-sign .rs-spot.next .rs-sw.b { opacity: 1; translate: 0 0; filter: none; }
#review-sign .rs-spot.done .rs-sw, #review-sign .rs-spot.done.next .rs-sw.b { opacity: 0; filter: blur(2px); }
#review-sign .rs-signed { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
#review-sign .rs-hand { font-family: "Homemade Apple", cursive; font-size: 19px; line-height: 1.35; color: var(--hand); font-weight: 400; clip-path: inset(-20% calc(var(--w, 104) * 1%) -20% -4%); }
#review-sign .rs-when { margin-top: 4px; font-size: 10.5px; font-weight: 500; color: var(--sign); font-variant-numeric: tabular-nums; opacity: 0; translate: 0 3px; transition: opacity 250ms var(--move), translate 250ms var(--move); }
#review-sign .rs-when.on { opacity: 1; translate: 0 0; }

/* ---------- Sam's marks, all in his violet ---------- */
#review-sign .marks { position: absolute; inset: 0; pointer-events: none; }
#review-sign .marks svg.ink { position: absolute; left: 0; top: 0; overflow: visible; }
#review-sign .pen { fill: none; stroke: var(--sam); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#review-sign .rs-hl { position: absolute; background: var(--sam); opacity: .26; mix-blend-mode: multiply; border-radius: 2px; transform-origin: 0 50%; scale: 0 1; }
#review-sign .rs-text {
  position: absolute; padding: 3px 7px; border-radius: 6px; white-space: nowrap;
  background: color-mix(in srgb, var(--sam) 11%, #FFFFFF); color: var(--sam);
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sam) 40%, transparent);
  opacity: 0; scale: .96; transform-origin: 0 50%;
  transition: opacity 200ms var(--move), scale 200ms var(--move), box-shadow 300ms var(--move);
}
#review-sign .rs-text.on { opacity: 1; scale: 1; }
#review-sign .rs-text.set { box-shadow: inset 0 0 0 0 transparent; }
#review-sign .rs-text .caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; opacity: 0; }
#review-sign .rs-text.typing .caret { opacity: 1; }
/* Sam's name, once, on his first mark */
#review-sign .nm {
  position: absolute; padding: 2px 6px 3px; border-radius: 5px; white-space: nowrap;
  font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: #FFFFFF;
  background: var(--sam); box-shadow: 0 3px 8px -2px rgba(76, 44, 160, .35);
  opacity: 0; transform: translateY(3px) scale(.9); filter: blur(1px); transform-origin: 0 50%;
  transition: opacity 250ms ease-out, transform 400ms var(--ease-spring), filter 250ms ease-out;
}
#review-sign .nm.on { opacity: 1; transform: none; filter: blur(0); }

/* ---------- The name box, at true size over the page ---------- */
#review-sign .signbox {
  position: absolute; z-index: 6; width: 264px; box-sizing: border-box; padding: 14px; border-radius: 14px;
  background: #FFFFFF; color: #111014; box-shadow: 0 24px 60px rgba(32, 30, 26, 0.22), 0 4px 12px rgba(32, 30, 26, 0.10), 0 0 0 1px rgba(20, 20, 30, 0.06);
  opacity: 0; transform: translateY(4px) scale(.97); transform-origin: var(--o, 50% 100%); pointer-events: none;
  transition: opacity 180ms var(--ease), transform 250ms var(--move);
}
#review-sign .signbox.on { opacity: 1; transform: none; }
#review-sign .signbox label { display: block; font-size: 12px; font-weight: 600; color: #3A3A40; margin: 0 0 7px; }
#review-sign .signbox .field {
  display: flex; align-items: center; height: 36px; padding: 0 11px; border-radius: 9px;
  background: #F4F4F6; box-shadow: inset 0 0 0 2px #426DC8; font-size: 14px; color: #111014; white-space: nowrap;
}
#review-sign .signbox .field .ph-t { color: #8C8B92; }
#review-sign .signbox .field .caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; background: #111014; border-radius: 1px; animation: rs-blink 1s steps(1) infinite; }
@keyframes rs-blink { 50% { opacity: 0; } }
#review-sign .signbox .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
#review-sign .signbox .acts span { display: grid; place-items: center; height: 34px; border-radius: 9px; font-size: 13px; font-weight: 600; transition: opacity 150ms ease-out, transform 160ms ease-out, background 150ms ease-out; }
#review-sign .signbox .cancel { background: #F1F1EF; color: #111014; }
#review-sign .signbox .go { background: #426DC8; color: #FFFFFF; opacity: .45; }
#review-sign .signbox .go.ready { opacity: 1; }
#review-sign .signbox .go.tap { transform: scale(.96); background: #3A62B8; }
#review-sign .signbox .decline { display: block; margin-top: 10px; padding: 4px 0; text-align: center; font-size: 12px; font-weight: 500; color: #7A7980; }

/* ---------- The Signed Copy, which slides out from behind the page ---------- */
#review-sign .rs-copy {
  position: absolute; z-index: 1; right: -236px; bottom: 18px; width: 248px; padding: 16px 18px 18px; border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow-lift);
  translate: -250px 0; rotate: 0deg; opacity: 0;
}
#review-sign .rs-copy .k { font-size: 12.5px; font-weight: 500; color: var(--accent-text); }
#review-sign .rs-copy h4 { margin-top: 2px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink1); }
#review-sign .rs-copy .by { margin-top: 14px; font-size: 12px; font-weight: 500; color: var(--ink3); }
#review-sign .rs-copy ol { list-style: none; padding: 0; margin-top: 6px; display: grid; gap: 8px; }
#review-sign .rs-copy li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; opacity: 0; translate: 0 6px; }
#review-sign .rs-copy li em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 20px; }
#review-sign .rs-copy li b { display: block; font-size: 14px; font-weight: 500; color: var(--ink1); line-height: 20px; }
#review-sign .rs-copy li span { display: block; font-size: 12.5px; color: var(--ink2); line-height: 1.45; }

/* Reduced motion, or a still: the finished state, nothing pinned. */
#review-sign.still .tour { height: auto; }
#review-sign.still .tour-pin { position: relative; height: auto; padding: var(--s6) 0; }

@media (prefers-reduced-motion: reduce) {
  #review-sign .cap, #review-sign .swap, #review-sign .rail .icon, #review-sign .sel, #review-sign .signpill, #review-sign .signpill .w > span, #review-sign .rs-spot, #review-sign .rs-sw, #review-sign .rs-when, #review-sign .rs-text, #review-sign .nm, #review-sign .signbox { transition: none !important; }
  #review-sign .rs-spot.pulse::after, #review-sign .signbox .field .caret { animation: none !important; }
}

/* A dark sheet in dark mode (Theo, 2026-10-20: the white page was too bright). */
:root[data-theme="dark"] #review-sign { --paper-white: #16181D; --paper-ink: #ECEDF0; --paper-ink2: #A3A8B1; --paper-ink3: #747983;
  --sam: #A58BEF; --sign: #86A9F2; --hand: #C7D5F7; }
:root[data-theme="dark"] #review-sign .rs-hl { mix-blend-mode: screen; opacity: .34; }
:root[data-theme="dark"] #review-sign .rs-text { background: color-mix(in srgb, var(--sam) 16%, var(--paper-white)); }
:root[data-theme="dark"] #review-sign .rs-spot { background: rgba(134, 169, 242, .07); border-color: rgba(134, 169, 242, .5); }
:root[data-theme="dark"] #review-sign .rs-spot.press { background-color: rgba(134, 169, 242, .14); }
:root[data-theme="dark"] #review-sign .rs-spot.done { background: rgba(134, 169, 242, .08); border-color: rgba(134, 169, 242, .24); }
:root[data-theme="dark"] #review-sign .signbox { background: #1F2228; color: #ECEDF0; box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .1); }
:root[data-theme="dark"] #review-sign .signbox label { color: #C9CCD3; }
:root[data-theme="dark"] #review-sign .signbox .field { background: #2A2D34; color: #ECEDF0; }
:root[data-theme="dark"] #review-sign .signbox .field .caret { background: #ECEDF0; }
:root[data-theme="dark"] #review-sign .signbox .field .ph-t { color: #7E838D; }
:root[data-theme="dark"] #review-sign .signbox .cancel { background: #2A2D34; color: #ECEDF0; }
:root[data-theme="dark"] #review-sign .signbox .decline { color: #8C919B; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) #review-sign { --paper-white: #16181D; --paper-ink: #ECEDF0; --paper-ink2: #A3A8B1; --paper-ink3: #747983;
  --sam: #A58BEF; --sign: #86A9F2; --hand: #C7D5F7; }
:root:not([data-theme="light"]) #review-sign .rs-hl { mix-blend-mode: screen; opacity: .34; }
:root:not([data-theme="light"]) #review-sign .rs-text { background: color-mix(in srgb, var(--sam) 16%, var(--paper-white)); }
:root:not([data-theme="light"]) #review-sign .rs-spot { background: rgba(134, 169, 242, .07); border-color: rgba(134, 169, 242, .5); }
:root:not([data-theme="light"]) #review-sign .rs-spot.press { background-color: rgba(134, 169, 242, .14); }
:root:not([data-theme="light"]) #review-sign .rs-spot.done { background: rgba(134, 169, 242, .08); border-color: rgba(134, 169, 242, .24); }
:root:not([data-theme="light"]) #review-sign .signbox { background: #1F2228; color: #ECEDF0; box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .1); }
:root:not([data-theme="light"]) #review-sign .signbox label { color: #C9CCD3; }
:root:not([data-theme="light"]) #review-sign .signbox .field { background: #2A2D34; color: #ECEDF0; }
:root:not([data-theme="light"]) #review-sign .signbox .field .caret { background: #ECEDF0; }
:root:not([data-theme="light"]) #review-sign .signbox .field .ph-t { color: #7E838D; }
:root:not([data-theme="light"]) #review-sign .signbox .cancel { background: #2A2D34; color: #ECEDF0; }
:root:not([data-theme="light"]) #review-sign .signbox .decline { color: #8C919B; }
}

/* The same dark rules when the system is dark and the visitor has not picked light. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) #review-sign .cap-bars span { background: rgba(134, 169, 242, .16); }
:root:not([data-theme="light"]) #review-sign .signpill.done { color: #86A9F2; background: color-mix(in srgb, #86A9F2 16%, transparent); }
}

/* Phones (2026-10-19): the same tour, the page full width with the tool name under it, and Back and Next either
   side of the progress bars. The Signed Copy card needs the room beside the page, so it stays off. */
#review-sign.narrow .rs-copy, #review-sign.narrow .sender { display: none; }
#review-sign.narrow .tour-in { height: auto; padding-top: var(--rig-h, 800px); }
#review-sign.narrow .cap {
  position: relative; left: auto; top: auto; width: auto; translate: none; margin-top: var(--s4);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; column-gap: var(--s3); text-align: center;
  transform: translateY(8px);
}
#review-sign.narrow .cap.on { transform: none; }
/* One compact block, so the page, the tools and the tool name share one phone screen (Theo, 2026-10-19):
   Back and Next either side of the name, the progress under it. */
#review-sign.narrow .cap-name { grid-column: 2; grid-row: 1; font-size: 26px; }
#review-sign.narrow .cap-line { grid-column: 2; grid-row: 2; margin-top: 4px; font-size: 15px; min-height: calc(2 * 1.45em); } /* two lines kept, so nothing jumps */
#review-sign.narrow .cap-nav { display: contents; }
#review-sign.narrow #capPrev { grid-column: 1; grid-row: 1 / 3; }
#review-sign.narrow #capNext { grid-column: 3; grid-row: 1 / 3; }
#review-sign.narrow .cap-btn { width: 44px; height: 44px; }
#review-sign.narrow .cap-bars { grid-column: 1 / -1; grid-row: 3; width: 100%; max-width: 180px; justify-self: center; margin-top: var(--s3); }
/* The three clauses nothing is drawn on stay off phones, so the whole page fits the screen. */
#review-sign.narrow .rs-clause:nth-child(n+4) { display: none; }
#review-sign.narrow.still .cap { display: none; }

/* The six items sit closer to the page above them (Theo, 2026-10-14). */
#review-sign .items { margin-top: var(--s7); }

/* Back and Next under the tool name: quiet, neutral buttons; the tour plays itself until one is pressed (Theo, 2026-10-14). */
#review-sign .cap-nav { display: flex; gap: 8px; margin-top: var(--s5); }
#review-sign .cap-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: var(--card); color: var(--ink2); box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(17, 22, 32, .05);
  transition: color 150ms ease-out, opacity 150ms ease-out, transform 150ms ease-out; }
#review-sign .cap-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { #review-sign .cap-btn:hover:not(:disabled) { color: var(--ink1); } }
#review-sign .cap-btn:active:not(:disabled) { transform: scale(.94); }
#review-sign .cap-btn:disabled { opacity: .35; cursor: default; }
#review-sign .cap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #review-sign .cap-btn { transition: none; } }
#review-sign.still .cap-nav { display: none; }

/* No sender block: the tools and Sign sit side by side, centred over the page, as the reader page's top bar
   has them on one row (Theo, 2026-10-14); a little more room under the heading. */
#review-sign .bar { justify-content: center; gap: 10px; }
#review-sign .rail { position: relative; left: auto; translate: none; }
@media (min-width: 900px) { .home #review-sign .tour { margin-top: calc(64px / var(--z, 1)); } }

/* apps.css */
/* ---------- More apps: the Theodore HQ collection at the foot of the page (Theo, 2026-10-17) ----------
   Option 3 of prototypes/loop-more-apps-2026-10-17: the FAQ's row shape in two columns, and on hover each
   row takes its app's own colours (the tints the Muse site's collection cards use). The section sits between
   the closing call and the footer and uses the page's section gap above and below. */
#more .head { text-align: center; }
#more .apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; max-width: 760px; margin: var(--head-gap) auto 0; }
#more .app { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px;
  border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card);
  transition: box-shadow 250ms var(--ease), transform 250ms var(--ease); }
#more .app::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 70% 140% at 100% 0%, var(--t1), transparent 70%), radial-gradient(ellipse 60% 120% at 0% 100%, var(--t2), transparent 70%);
  opacity: 0; transition: opacity 250ms var(--ease); }
#more .app img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 4px rgba(17, 22, 32, .14)); }
#more .app .muse-icon { border-radius: 23%; } /* the Muse icon file is full-bleed, so it gets the Mac corner here */
#more .app-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
#more .app-name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink1); }
#more .app-line { font-size: 14px; color: var(--ink3); }
#more .app-go { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink4); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 250ms var(--ease), stroke 250ms var(--ease); }
@media (hover: hover) {
  #more .app:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
  #more .app:hover::before { opacity: 1; }
  #more .app:hover .app-go { transform: translateX(2px); stroke: var(--ink2); }
}
@media (min-width: 900px) { .home #more .app-name { font-size: var(--t-lg); } .home #more .app-line { font-size: var(--t-sm); } }
@media (max-width: 620px) { #more .apps { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { #more .app, #more .app::before, #more .app-go { transition: none; } #more .app:hover { transform: none; } }

/* Each app's colours */
#more .solace { --t1: rgba(255, 170, 120, .30); --t2: rgba(140, 100, 180, .18); }
#more .charm  { --t1: rgba(80, 210, 225, .30);  --t2: rgba(50, 150, 200, .14); }
#more .shiny  { --t1: rgba(0, 200, 160, .24);   --t2: rgba(240, 215, 160, .26); }
#more .atlas  { --t1: rgba(110, 160, 225, .30); --t2: rgba(60, 100, 170, .14); }
#more .echo   { --t1: rgba(95, 170, 140, .28);  --t2: rgba(143, 230, 190, .18); }
#more .muse   { --t1: rgba(150, 158, 182, .32); --t2: rgba(126, 114, 132, .16); }
#more .chorus { --t1: rgba(110, 147, 251, .28); --t2: rgba(58, 112, 248, .14); }
#more .docket { --t1: rgba(158, 181, 200, .32); --t2: rgba(68, 88, 107, .14); }
:root[data-theme="dark"] #more .solace { --t1: rgba(255, 170, 120, .24); --t2: rgba(140, 100, 180, .22); }
:root[data-theme="dark"] #more .charm  { --t1: rgba(80, 210, 225, .24);  --t2: rgba(50, 150, 200, .16); }
:root[data-theme="dark"] #more .shiny  { --t1: rgba(0, 212, 170, .24);   --t2: rgba(80, 210, 225, .12); }
:root[data-theme="dark"] #more .atlas  { --t1: rgba(140, 180, 235, .24); --t2: rgba(60, 100, 170, .22); }
:root[data-theme="dark"] #more .echo   { --t1: rgba(95, 170, 140, .28);  --t2: rgba(143, 230, 190, .14); }
:root[data-theme="dark"] #more .muse   { --t1: rgba(198, 206, 228, .20); --t2: rgba(126, 114, 132, .20); }
:root[data-theme="dark"] #more .chorus { --t1: rgba(110, 147, 251, .28); --t2: rgba(58, 112, 248, .18); }
:root[data-theme="dark"] #more .docket { --t1: rgba(158, 181, 200, .22); --t2: rgba(68, 88, 107, .22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #more .solace { --t1: rgba(255, 170, 120, .24); --t2: rgba(140, 100, 180, .22); }
  :root:not([data-theme="light"]) #more .charm  { --t1: rgba(80, 210, 225, .24);  --t2: rgba(50, 150, 200, .16); }
  :root:not([data-theme="light"]) #more .shiny  { --t1: rgba(0, 212, 170, .24);   --t2: rgba(80, 210, 225, .12); }
  :root:not([data-theme="light"]) #more .atlas  { --t1: rgba(140, 180, 235, .24); --t2: rgba(60, 100, 170, .22); }
  :root:not([data-theme="light"]) #more .echo   { --t1: rgba(95, 170, 140, .28);  --t2: rgba(143, 230, 190, .14); }
  :root:not([data-theme="light"]) #more .muse   { --t1: rgba(198, 206, 228, .20); --t2: rgba(126, 114, 132, .20); }
  :root:not([data-theme="light"]) #more .chorus { --t1: rgba(110, 147, 251, .28); --t2: rgba(58, 112, 248, .18); }
  :root:not([data-theme="light"]) #more .docket { --t1: rgba(158, 181, 200, .22); --t2: rgba(68, 88, 107, .22); }
}

/* The footer's own top padding (72px plus the columns' 8px) sat on top of the section gap, so the space under
   this section read 80px taller than the space above it. Take it off so both are the page's section gap. */
.home .site-footer { margin-top: calc(var(--section-gap) - 80px); }