/* The subpages in the Aegean look (21 Oct 2026, docs/briefs/subpages-aegean-2026-10-21.md):
   /phone/, /es/, /resellers/, /demo/ (its frame), /terms,
   /privacy and the 404.

   The first part is the homepage's own shared rules, copied unchanged from
   public/assets/aegean/aegean.css (tokens, type, pills, header, footer,
   section rhythm, the call story, the cards, pricing, the FAQ, the
   accordion, Mercury's rows, the Lister card, motion, reduced motion and
   the touch targets), so a subpage looks exactly like the homepage. The
   homepage keeps its own file (other sessions are working on it), so the
   two are kept equal by test/subpages-aegean.test.js, which fails if a
   copied rule here drifts from aegean.css. The second part, after the
   banner, is new and used only by the subpages.

   Behaviour: public/assets/aegean/site.js (the scroll-moved page colour from
   blend.js, the header, the menu, the accordions, the call story, the Motion
   button, the email panel; email links go through the homepage's
   public/assets/js/mail-open.js). The smoke on the primary pills and the gold
   call button: public/assets/js/smoke.js, with the homepage's own rules
   copied below. Without JavaScript every page is a
   plain, readable document: each section paints its own colour. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@property --bg { syntax: "<color>"; inherits: true; initial-value: #F4EEE3; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #14201F; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #4F5A57; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #DCD2BF; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #136B80; }
@property --chrome { syntax: "<color>"; inherits: true; initial-value: rgba(244, 238, 227, .86); }
@property --gold-ink { syntax: "<color>"; inherits: true; initial-value: #8A6420; }

:root {
  --sand: #F4EEE3;
  --shell: #FBF8F2;
  --lagoon: #136B80;
  --lagoon-hover: #0E5869;
  --shallows: #5EE3D6;
  --reef: #0A3346;
  --reef-fg: #EAF3F6;
  --night: #0A3346;
  --gold: #B8893A;
  --ink: #14201F;
  --missed: #C4462B;
  --booked: #2E8B57;
  --ink-muted: #4F5A57;
  --reef-muted: #A6C2CE;
  --booked-ink: #1F6B44;
  --missed-ink: #A93A22;
  --booked-wash: #E3F0E7;
  --missed-wash: #F7E4DE;
  --lagoon-wash: #DCEBF0;
  --hair: #E2D9C8;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--sans);
  --ease: cubic-bezier(0, 0, .2, 1);
  --ease-theme: cubic-bezier(0, 0, .6, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-live: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1240px;
  /* Round 5 (Viggo on his iPhone, full screen in the Claude app: the header
     sat under the status bar). The page has viewport-fit=cover, so the
     header and the hero pad themselves for the safe areas. --header-h is
     the bar itself; --header-total adds the status bar above it. */
  --safe-top: env(safe-area-inset-top, 0px);
  --gutter: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 68px;
  --header-total: calc(var(--header-h) + var(--safe-top));
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* round 6b (Viggo's iPhone, in the Claude app: a band of page under the
     pinned film once he scrolled): in an app's web view 100lvh can be
     shorter than the window, so the film's height is the larger of the two
     (film.js sets --ih to the window's own height) */
  --lvh: 100vh;
  --film-vh: max(var(--lvh), var(--ih, 0px));
  --r-tile: 22px;
  background: var(--sand);
}

@supports (height: 100lvh) { :root { --lvh: 100lvh; } }

.transition-theme {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--fg);
}
.theme-sand, html:not(.blend) main > [data-theme="sand"]  { --bg: #F4EEE3; --fg: #14201F; --muted: #4F5A57; --line: #DCD2BF; --accent: #136B80; --chrome: rgba(244, 238, 227, .86); --gold-ink: #8A6420; }
.theme-shell, html:not(.blend) main > [data-theme="shell"] { --bg: #FBF8F2; --fg: #14201F; --muted: #4F5A57; --line: #E2D9C8; --accent: #136B80; --chrome: rgba(251, 248, 242, .88); --gold-ink: #8A6420; }
.theme-reef, html:not(.blend) main > [data-theme="reef"]  { --bg: #0A3346; --fg: #EAF3F6; --muted: #A6C2CE; --line: rgba(226, 240, 246, .16); --accent: #5EE3D6; --chrome: rgba(10, 51, 70, .86); --gold-ink: #D8B46A; }
.theme-night, html:not(.blend) main > [data-theme="night"], html:not(.blend) .site-footer { --bg: #0A3346; --fg: #EAF3F6; --muted: #A6C2CE; --line: rgba(226, 240, 246, .14); --accent: #5EE3D6; --chrome: rgba(10, 51, 70, .86); --gold-ink: #D8B46A; }
html:not(.blend) main > [data-theme], html:not(.blend) .site-footer { background-color: var(--bg); color: var(--fg); }

.transition-theme { position: relative; isolation: isolate; }

html.blend .transition-theme { background-color: transparent; }
.page-colour { position: fixed; inset: -120px 0; z-index: -2; pointer-events: none; background-color: #F4EEE3; }
.page-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(75% 65% at 100% 0%, rgba(26, 127, 149, .36), rgba(26, 127, 149, 0) 72%); opacity: 0; will-change: opacity; }
html:not(.blend) main > [data-theme="night"], html:not(.blend) main > [data-theme="reef"] { background-image: radial-gradient(min(1100px, 95vw) min(760px, 80vh) at 100% 0%, rgba(26, 127, 149, .36), rgba(26, 127, 149, 0) 72%); background-repeat: no-repeat; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-total) + 16px); }
body { margin: 0; background: var(--sand); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
em { font-style: normal; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.num, .tabular { font-variant-numeric: tabular-nums; }
/* a phone number or a price never breaks across lines (round 2d) */
.num { white-space: nowrap; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; box-shadow: 0 0 0 4px transparent, 0 0 0 7px var(--fg); border-radius: 6px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--shell); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- Type: one family, Instrument Sans ---------- */
/* One family everywhere (Viggo, 23 Oct 2026: no serif, and the font never
   switches). Headlines and statements are Instrument Sans at its heaviest,
   600, set a little tighter; a word or two carries the accent in brass,
   upright. */
h1, h2, h3 { font-weight: 480; letter-spacing: -.02em; text-wrap: balance; }
h1, .statement, .big, .display { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; }
h1 { font-size: clamp(2.1rem, 1.7rem + 1.7vw, 3rem); line-height: 1.06; }
.statement { font-size: clamp(1.7rem, 1.4rem + 1.25vw, 2.45rem); line-height: 1.1; max-width: 22em; }
.statement.wide { max-width: 24em; }
.statement.center { margin-inline: auto; text-align: center; }
.big { font-size: clamp(2.15rem, 1.55rem + 2.6vw, 3.6rem); line-height: 1.06; }
h1 em, h2 em, h3 em, .statement em, .big em { font-style: normal; color: var(--gold-ink); }
h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.lede { color: var(--muted); max-width: 36em; text-wrap: pretty; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; }
.note, .small-print { font-size: .8125rem; color: var(--muted); }
/* the chip is outlined, not tinted (round 6): on the page colour mid-way
   between light and dark a gold tint under the text took it below 4.5:1 */
.soon { display: inline-flex; vertical-align: middle; margin-left: 6px; font: 500 .75rem/1.5 var(--sans); letter-spacing: 0; padding: 2px 9px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(184, 137, 58, .7); color: var(--fg); white-space: nowrap; font-style: normal; }

/* ---------- Pills ---------- */
.pill {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 500 1rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .16s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 760px) { .pill { height: 46px; } }
.pill:focus-visible { border-radius: 999px; }
.pill:active { transform: scale(.97); }
.pill .icon { width: 18px; height: 18px; position: relative; z-index: 2; pointer-events: none; }
.pill .label { position: relative; z-index: 2; pointer-events: none; }
.pill-primary { background: var(--lagoon); color: #fff; }
.pill-primary .label { text-shadow: 0 1px 2px rgba(4, 40, 38, .35); }
.pill-primary:hover, .pill-primary:active { background: var(--lagoon-hover); }
.pill-ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 50%, transparent); }
.pill-ghost:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); border-color: var(--fg); }
.pill-sm { height: 40px; padding: 0 18px; font-size: .9375rem; }
/* in the header the colours swap at once with the theme (round 3: a fade
   there left grey frames); hover still eases its background */
.site-header .pill { transition: background-color .3s var(--ease), transform .16s var(--ease-out); }

/* The smoke (public/assets/js/smoke.js): a canvas behind the label, screen
   blended; the glow is the fallback. Both sit in the smoke's own layer
   (round 4b): the pill's fill, inherited, clipped to the pill's shape. The
   pill's overflow alone is not enough: WebKit does not clip a composited
   child (the WebGL canvas) to a rounded overflow, so on the iPad the smoke
   showed as a rectangle round the pill. The clip-path clips it, and the
   screen blend lands on the layer's own fill, so the smoke looks the same
   on every pill, over the film or the page. */
.smoke-clip { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; isolation: isolate; background-color: inherit; -webkit-clip-path: inset(0 round 999px); clip-path: inset(0 round 999px); pointer-events: none; }
.smoke-canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
.smoke-glow { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); background: radial-gradient(140px 70px at var(--mx, 50%) var(--my, 50%), rgba(94, 227, 214, .5), transparent 70%); }
.pill.no-gl.is-lit .smoke-glow { opacity: 1; }

.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; text-decoration: none; padding: 4px 0; }
.text-link .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link:hover .icon { transform: translateX(2px); }

/* ---------- Header: follows the theme ---------- */
/* the header swaps colours at once with the section under it (round 3: a
   fade would leave grey frames) */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; box-sizing: border-box; height: var(--header-total); padding-top: var(--safe-top); color: var(--fg); transition: box-shadow .3s var(--ease); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; max-width: none; padding: 0 max(clamp(16px, 3vw, 36px), env(safe-area-inset-right, 0px)) 0 max(clamp(16px, 3vw, 36px), env(safe-area-inset-left, 0px)); }
.site-header.is-solid, html:not(.film) .site-header { background: var(--chrome); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 10%, transparent); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; flex: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: none; gap: 4px; margin-right: auto; }
.nav a { text-decoration: none; font-size: .9688rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: background-color .3s var(--ease); }
.nav a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-actions .btn-call { display: none; }
.menu-toggle { width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; display: grid; place-content: center; gap: 5px; cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 1.75px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.4px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: var(--header-total) 0 auto; z-index: 49; background: var(--shell); color: var(--ink); border-bottom: 1px solid var(--hair); box-shadow: 0 20px 40px rgba(20, 32, 31, .12); }
.mobile-menu .wrap { display: grid; padding-top: 8px; padding-bottom: 20px; }
.mobile-menu a { text-decoration: none; font-size: 1.125rem; font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu[hidden] { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
  .header-actions { margin-left: 0; }
  .header-actions .btn-call { display: inline-flex; }
}
@media (max-width: 359px) { .brand span { display: none; } }
/* small phones (375): the trial pill and the menu fit beside the name (round 2d) */
@media (max-width: 399px) { .site-header .wrap { gap: 8px; } .header-actions { gap: 4px; } .header-actions .pill-sm { padding: 0 12px; } }

/* ---------- Owner HQ: the dark tokens and the chips the call story shares.
   The dashboard itself is a recording now (round 2b, public/assets/aegean/
   demo/, made by scripts/record-ohq-demo.mjs from scripts/ohq-demo/). ---------- */
.call-story, .su, .screen-pin, .pd-frame {
  --o-bg: #0A3346; --o-card: #0F3F52; --o-card2: #144A5F;
  --o-line: rgba(226, 240, 246, .08); --o-line2: rgba(226, 240, 246, .14);
  --o-fg: #EAF3F6; --o-muted: #A6C2CE; --o-faint: #8FAAB6;
  --o-reef: #3DBFB2; --o-shallows: #5EE3D6; --o-gold: #D8B46A;
  --o-good: #6CD39A; --o-bad: #F08A72;
  --o-hi: inset 0 1px 0 rgba(255, 255, 255, .05);
  --o-ease: cubic-bezier(.23, 1, .32, 1);
}
.ohq-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: rgba(61, 191, 178, .14); color: var(--o-shallows, #5EE3D6); }
.ohq-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ohq-pill.good { background: rgba(108, 211, 154, .13); color: var(--o-good, #6CD39A); }
.ohq-pill.bad { background: rgba(240, 138, 114, .13); color: var(--o-bad, #F08A72); }
.ohq-pill.gold { background: rgba(216, 180, 106, .14); color: var(--o-gold, #D8B46A); }
.ohq-pill.faint { background: rgba(226, 240, 246, .07); color: var(--o-muted, #A6C2CE); }
.ohq-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-content: center; color: var(--o-shallows, #5EE3D6); background: linear-gradient(145deg, #175A70, #0C3A4F); box-shadow: inset 0 0 0 1px rgba(94, 227, 214, .22), 0 6px 16px rgba(0, 0, 0, .35); }
.ohq-mark .icon { width: 20px; height: 20px; stroke-width: 2; }
.ohq-mark.sm { width: 28px; height: 28px; border-radius: 9px; }
.ohq-mark.sm .icon { width: 15px; height: 15px; }

/* ---------- Blocks ---------- */
/* Space between sections: two paddings meet, so 112 to 160px of shared
   background between one section's content and the next (Mercury's rhythm). */
.block { padding: clamp(56px, 6vw, 80px) 0; }
.block > .wrap > .cards.two:first-child { margin-top: 0; }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head .eyebrow { margin-bottom: -4px; }
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- 04 Phone answering: the call story (dark tokens) ---------- */
.call-story { position: relative; width: 100%; min-width: 0; margin: 0; justify-self: stretch; background: linear-gradient(180deg, #0E3E54, #0A3346 70%); border: 1px solid rgba(226, 240, 246, .1); border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); padding: clamp(14px, 2vw, 22px); color: var(--o-fg); font-size: 14px; line-height: 1.45; }
@media (min-width: 1180px) { .call-story { max-width: 720px; } }
.cs-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .cs-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; } }
.cs-call, .cs-out { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cs-strip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--o-card); border: 1px solid var(--o-line); box-shadow: var(--o-hi); }
.cs-strip b { display: block; font-weight: 600; font-size: 14px; }
.cs-ring { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; background: rgba(216, 180, 106, .14); color: var(--o-gold); flex: none; }
.cs-ring .icon { width: 17px; height: 17px; }
.cs-status { display: block; font-size: 12.5px; color: var(--o-muted); }
.cs-status .s-ring { display: none; }
.cs-wave { display: flex; align-items: center; gap: 2px; height: 24px; margin-left: auto; flex: none; }
.cs-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--o-shallows); opacity: .85; transform: scaleY(.25); animation: cs-wave 1.1s ease-in-out infinite; animation-delay: calc(var(--bar) * -.09s); }
.cs-log { display: grid; gap: 7px; padding: 12px 14px; border-radius: 14px; background: rgba(15, 63, 82, .6); border: 1px solid var(--o-line); }
.cs-line { font-size: 13px; color: var(--o-fg); }
.cs-line span { display: inline-block; min-width: 46px; margin-right: 6px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--o-shallows); }
.cs-line.caller span { color: var(--o-gold); }
.cs-fields { display: grid; gap: 6px; }
.cs-fields > div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--o-card); border: 1px solid var(--o-line); }
.cs-fields dt { font-size: 12px; color: var(--o-muted); }
.cs-fields dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13.5px; }
.cs-fields dd .icon { width: 16px; height: 16px; color: var(--o-good); stroke-width: 2.2; flex: none; }
.cs-booked { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(108, 211, 154, .13); color: var(--o-good); font-weight: 650; box-shadow: inset 0 0 0 1px rgba(108, 211, 154, .3); }
.cs-booked .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.cs-link { position: relative; height: 22px; display: flex; justify-content: center; }
.cs-link::before { content: ""; width: 2px; height: 100%; background: linear-gradient(rgba(226, 240, 246, .14), var(--o-reef)); }
.cs-link i { position: absolute; top: 0; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--o-shallows); box-shadow: 0 0 10px rgba(94, 227, 214, .7); opacity: 0; }
.cs-cal { padding: 12px 14px; border-radius: 14px; background: var(--o-card); border: 1px solid var(--o-line); }
.cs-cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cs-cal-head b { font-size: 14px; font-weight: 600; }
.cs-cal-head span { font-size: 12px; color: var(--o-muted); }
.cs-cal-grid { display: grid; grid-template-columns: 42px 1fr; row-gap: 5px; align-items: center; font-size: 12px; }
.cs-cal-grid > span { color: var(--o-muted); }
.cs-cal-grid .slot { position: relative; height: 32px; border-radius: 9px; background: rgba(10, 51, 70, .55); overflow: hidden; }
.cs-cal-grid .slot i { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px; font-style: normal; border-radius: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-cal-grid .slot i.busy { background: rgba(226, 240, 246, .07); color: var(--o-muted); }
.cs-cal-grid .slot i.new { background: rgba(61, 191, 178, .2); color: var(--o-fg); box-shadow: inset 3px 0 0 var(--o-shallows); }
.cs-cal-grid .slot i.new b { font-weight: 650; margin-right: 4px; }
.cs-owner { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(61, 191, 178, .14), rgba(15, 63, 82, .9)); border: 1px solid rgba(94, 227, 214, .22); }
.cs-owner > div { min-width: 0; }
.cs-owner b { display: block; font-size: 13px; font-weight: 600; }
.cs-owner div span { display: block; font-size: 12px; color: #D2E2E9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-owner .ohq-pill { font-size: 12px; padding: 3px 9px; }
.cs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--o-muted); }
.cs-sample { font-weight: 600; color: var(--o-gold); }
.cs-controls { display: flex; gap: 8px; }
.cs-pause, .cs-replay { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--o-line2); background: rgba(226, 240, 246, .06); color: var(--o-fg); cursor: pointer; font-size: 13px; font-weight: 500; }
.cs-pause { flex: none; width: 34px; padding: 0; } /* flex: none (round 6d): on a phone it was squeezed to 27 px */
.cs-pause .icon, .cs-replay .icon { width: 14px; height: 14px; pointer-events: none; }
.cs-pause .icon { fill: currentColor; stroke: none; }
.cs-pause .i-play, .call-story.paused .cs-pause .i-pause { display: none; }
.call-story.paused .cs-pause .i-play { display: block; }
.cs-pause:hover, .cs-replay:hover { background: rgba(226, 240, 246, .12); }
html:not(.js) .cs-controls { display: none; }

/* The playthrough: aegean.js adds .cs-play, then s2 ... s6 as the call goes.
   Without it (no JavaScript, reduced motion) the whole call shows at once. */
.js .call-story.cs-play .cs-line, .js .call-story.cs-play .cs-fields > div, .js .call-story.cs-play .cs-booked,
.js .call-story.cs-play .cs-cal .slot i.new, .js .call-story.cs-play .cs-owner { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--o-ease), transform .5s var(--o-ease); }
.js .call-story.cs-play:not(.s2) .cs-wave i { animation: none; transform: scaleY(.18); opacity: .4; }
.js .call-story.cs-play:not(.s2) .cs-status .s-live { display: none; }
.js .call-story.cs-play:not(.s2) .cs-status .s-ring { display: inline; }
.js .call-story.cs-play:not(.s2) .cs-ring .icon { animation: cs-shake .7s var(--o-ease) infinite; }
.js .call-story.cs-play:not(.s2) .cs-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--o-gold); animation: cs-pulse 1.4s var(--o-ease) infinite; }
.js .call-story.s2 .cs-line.l1, .js .call-story.s2 .cs-line.l2 { opacity: 1; transform: none; }
.js .call-story.s2 .cs-line.l2 { transition-delay: .7s; }
/* round 3 (Cowork 12): while it rings the transcript box says what is
   happening, so the first frame is never an empty box */
.cs-pre { color: var(--o-muted); }
.cs-pre span { color: var(--o-gold); }
.call-story:not(.cs-play) .cs-pre, .js .call-story.cs-play.s2 .cs-pre { display: none; }
.js .call-story.cs-play:not(.s2) .cs-pre { opacity: 1; transform: none; }
.js .call-story.s3 .cs-fields > div { opacity: 1; transform: none; }
.js .call-story.s3 .cs-fields > div:nth-child(2) { transition-delay: .35s; }
.js .call-story.s3 .cs-fields > div:nth-child(3) { transition-delay: .7s; }
.js .call-story.s4 .cs-line.l3, .js .call-story.s4 .cs-booked { opacity: 1; transform: none; }
.js .call-story.s4 .cs-booked { transition-delay: .5s; }
.js .call-story.s5 .cs-cal .slot i.new { opacity: 1; transform: none; transition-delay: .6s; }
.js .call-story.s5 .cs-link:first-of-type i { animation: cs-travel 1s var(--o-ease) 1 both; }
.js .call-story.s6 .cs-owner { opacity: 1; transform: none; transition-delay: .6s; }
.js .call-story.s6 .cs-link:last-of-type i { animation: cs-travel 1s var(--o-ease) 1 both; }
.js .call-story.s6 .cs-owner::after { content: ""; position: absolute; inset: -1px; border-radius: 14px; border: 1.5px solid var(--o-shallows); opacity: 0; animation: cs-glow 1.6s var(--o-ease) .9s 2; pointer-events: none; }
.call-story.paused *, .call-story.paused *::before, .call-story.paused *::after { animation-play-state: paused !important; }
@keyframes cs-wave { 0%, 100% { transform: scaleY(.25); } 45% { transform: scaleY(1); } 75% { transform: scaleY(.5); } }
@keyframes cs-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } }
@keyframes cs-pulse { 0% { transform: scale(.94); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes cs-travel { 0% { top: 0; opacity: 0; } 25% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes cs-glow { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.03); } }
@media (max-width: 420px) { .cs-wave { display: none; } }

/* ---------- 03 / 09 Product cards: our own UI on Aegean surfaces ---------- */
/* No film stills and no photos (Viggo, 19 Oct): every card shows the product
   itself, built in HTML on a sand, shell, reef or night surface. */
.cards { display: grid; gap: 32px; }
.cards.two { margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .cards.two { grid-template-columns: 1fr 1fr; gap: 24px; } }
.card { display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; }
.tile { position: relative; border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 4 / 3.1; isolation: isolate; }
@media (max-width: 600px) { .tile { aspect-ratio: 4 / 4.4; } }
.tile-surface.shell { background: radial-gradient(110% 90% at 88% 0%, rgba(94, 227, 214, .2), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(184, 137, 58, .16), transparent 58%), #FBF8F2; box-shadow: inset 0 0 0 1px var(--hair); }
.tile-surface.reef { background: radial-gradient(100% 80% at 100% 0%, rgba(26, 127, 149, .42), rgba(26, 127, 149, 0) 62%), radial-gradient(90% 70% at 0% 100%, rgba(216, 180, 106, .14), transparent 60%), #0A3346; }
.tile-surface.deep { background: radial-gradient(110% 70% at 100% 0%, rgba(61, 191, 178, .24), transparent 58%), radial-gradient(90% 70% at 0% 100%, rgba(216, 180, 106, .1), transparent 60%), linear-gradient(165deg, #0E4258, #0A3346 75%); }
.tile-surface.sand-deep { background: radial-gradient(110% 80% at 100% 0%, rgba(94, 227, 214, .18), transparent 55%), radial-gradient(100% 80% at 0% 100%, rgba(184, 137, 58, .2), transparent 60%), #EDE4D3; box-shadow: inset 0 0 0 1px var(--hair); }
.card-title { font-size: 1.125rem; font-weight: 500; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.card-title .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
a.card:hover .card-title .icon { transform: translateX(3px); }
a.card .tile { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
@media (any-hover: hover) { a.card:hover .tile { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); } }
.card-line { color: var(--muted); max-width: 34em; }

/* the 9 PM story, on the shell surface */
.story { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(86%, 430px); background: #fff; color: var(--ink); border-radius: 18px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 30px 60px -28px rgba(20, 32, 31, .4), 0 0 0 1px rgba(8, 36, 50, .06); font-size: 14px; }
.ring { display: flex; align-items: center; gap: 12px; }
.ring-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-content: center; background: var(--ink); color: var(--shell); flex: none; }
.ring-icon .icon { width: 16px; height: 16px; }
.ring b { display: block; font-weight: 600; font-size: 15px; }
.ring span { color: var(--ink-muted); font-size: 13px; }
.story-between { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 12px; }
.story-between::before, .story-between::after { content: ""; height: 1px; flex: 1; background: #D6CCB8; }
/* round 3 (Cowork 12): the rows still to come take no room, so the card is
   never an empty box under the incoming call; each grows in as it plays */
.js .story .story-step { max-height: 120px; transition: opacity .5s var(--ease), transform .5s var(--ease), max-height .5s var(--ease), margin .5s var(--ease); }
.js .story[data-state="idle"] .story-missed, .js .story[data-state="idle"] .story-between, .js .story[data-state="idle"] .story-booked,
.js .story[data-state="ringing"] .story-missed, .js .story[data-state="ringing"] .story-between, .js .story[data-state="ringing"] .story-booked,
.js .story[data-state="missed"] .story-between, .js .story[data-state="missed"] .story-booked,
.js .story[data-state="answered"] .story-booked { opacity: 0; transform: translateY(8px); max-height: 0; margin-top: -10px; overflow: hidden; }
.js .story[data-state="ringing"] .ring-icon { animation: ring 1s var(--ease) infinite; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }
.ui-band { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.ui-band .icon { width: 18px; height: 18px; flex: none; }
.ui-band.booked { background: var(--booked-wash); color: var(--booked-ink); }
.ui-band.missed { background: var(--missed-wash); color: var(--missed-ink); justify-content: flex-start; }
.replay, .scene-pause { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(251, 248, 242, .94); color: var(--ink); cursor: pointer; font-weight: 500; font-size: .875rem; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35), 0 0 0 1px rgba(8, 36, 50, .08); }
.scene-pause { width: 38px; padding: 0; justify-content: center; }
/* "Play again" shows once the story has played (round 3, Cowork 12): the
   attribute must win over the display above */
.replay[hidden], .cs-replay[hidden] { display: none; }
.replay .icon, .scene-pause .icon { width: 15px; height: 15px; pointer-events: none; }
.scene-pause .icon { fill: currentColor; stroke: none; }
.scene-pause .i-play { display: none; }
.paused .scene-pause .i-play { display: block; }
.paused .scene-pause .i-pause { display: none; }
html:not(.js) .scene-pause { display: none; }

/* the calendar card, on the reef surface: a booking lands, on a loop */
.float-cal { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(84%, 380px); background: #FBF8F2; color: var(--ink); border-radius: 18px; padding: 16px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); font-size: 13px; }
.fc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.fc-head b { font-size: 16px; font-weight: 600; }
.fc-head span { color: var(--ink-muted); font-size: 12px; }
.fc-grid { display: grid; grid-template-columns: 46px 1fr; row-gap: 6px; align-items: center; }
.fc-grid > span { color: var(--ink-muted); font-size: 12px; }
.fc-slot { height: 36px; border-radius: 9px; background: #EEE7DA; position: relative; overflow: hidden; }
.fc-slot i { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 12px; font-style: normal; border-radius: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-busy { background: #E1D7C4; color: #3F4A47; font-weight: 500; }
.fc-new { background: var(--booked-wash); color: var(--booked-ink); font-weight: 500; box-shadow: inset 3px 0 0 var(--booked); animation: land 6s var(--ease) infinite; }
.fc-new b { font-weight: 650; margin-right: 4px; }
.fc-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--booked-ink); font-weight: 500; }
.fc-foot .icon { width: 15px; height: 15px; stroke-width: 2.2; }
/* round 6c (Cowork's audit: mid-fade the booking read at 2.8 to 3.7:1): it
   slides into its slot from the top edge and out at the bottom, clipped by
   the slot, never faded, so its text is at full contrast in every frame */
@keyframes land { 0%, 10% { transform: translateY(-100%); } 20%, 86% { transform: none; } 95%, 100% { transform: translateY(100%); } }
.paused .fc-new, .offscreen .fc-new { animation-play-state: paused; }
html:not(.js) .fc-new { animation: none; }

/* ---------- 09 The two products, as products ---------- */
.tile.product-tile { aspect-ratio: auto; min-height: 560px; padding: clamp(20px, 3vw, 30px); display: grid; align-content: start; gap: 14px; }
.tile-label { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; color: #EAF3F6; margin-bottom: 6px; }
.lister-tile .tile-label { color: var(--ink); }
.tile-sample { position: absolute; right: 18px; top: 22px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(10, 51, 70, .62); color: #D8B46A; box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35); }
.lister-tile .tile-sample { color: #6B4D17; background: rgba(184, 137, 58, .18); box-shadow: inset 0 0 0 1px rgba(150, 112, 47, .35); }
.pc-summary { width: min(100%, 420px); background: #FBF8F2; color: var(--ink); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); font-size: 13.5px; }
.pc-k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-muted); }
.pc-k .icon { width: 15px; height: 15px; color: var(--lagoon); }
.pc-t { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13.5px; }
.kv dt { color: var(--ink-muted); }
.kv dd { font-weight: 500; }
.pc-widget { justify-self: end; width: min(92%, 340px); margin-top: -34px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(8, 36, 50, .06); position: relative; }
.widget-head { background: var(--reef); color: var(--reef-fg); display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.widget-head .mono { width: 28px; height: 28px; border-radius: 50%; background: var(--lagoon); display: grid; place-content: center; font-weight: 600; font-size: .8125rem; color: #fff; }
.widget-head b { display: block; font-weight: 600; font-size: 13.5px; }
.widget-head small { color: var(--reef-muted); font-size: 12px; }
.widget-body { background: var(--shell); padding: 12px; display: grid; gap: 7px; }
.msg { max-width: 86%; padding: 8px 11px; border-radius: 13px; font-size: 13px; line-height: 1.4; }
.msg.bot { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--hair); justify-self: start; border-bottom-left-radius: 4px; }
.msg.user { background: var(--lagoon); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.msg.booked-msg { display: flex; gap: 6px; align-items: flex-start; background: var(--booked-wash); color: var(--booked-ink); box-shadow: none; font-weight: 500; }
.msg.booked-msg .icon { width: 15px; height: 15px; margin-top: 2px; stroke-width: 2.2; }
/* Lister: photos in, a full draft out, waiting for your OK */
.lr-photos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lr-photos .ph { position: relative; width: 66px; height: 80px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #EFE9DC, #DED3BE); box-shadow: 0 10px 22px -12px rgba(20, 32, 31, .45), 0 0 0 1px rgba(8, 36, 50, .08); }
.lr-in { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--ink); background: #FBF8F2; padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 0 1px var(--hair); }
.lr-in .icon { width: 15px; height: 15px; color: var(--lagoon); }
.lr-draft { width: 100%; background: #fff; color: var(--ink); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: 0 30px 60px -28px rgba(20, 32, 31, .5), 0 0 0 1px rgba(8, 36, 50, .06); font-size: 13px; }
.lr-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #7A5A22; }
.lr-ready { font-size: 11px; letter-spacing: 0; text-transform: none; padding: 3px 9px; border-radius: 999px; background: #B8893A; color: #1E1608; }
.lr-title { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.18; letter-spacing: -.02em; }
.lr-price { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--lagoon-wash); }
.lr-price .lr-k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lagoon-hover); }
.lr-price strong { font-family: var(--display); font-weight: 600; font-size: 1.4rem; line-height: 1.1; letter-spacing: -.02em; }
.lr-price p { font-size: 12.5px; color: #304F5B; }
.lr-specs { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.lr-specs dt { color: var(--ink-muted); }
.lr-specs dd { font-weight: 500; }
.lr-desc { color: var(--ink-muted); }
.lr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lr-approve, .lr-change { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 13px; }
.lr-approve { background: #B07F2F; color: #1E1608; }
.lr-approve .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.lr-post { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.lr-post .soon { margin-left: 0; color: #14201F; background: rgba(184, 137, 58, .22); }
.lr-copy { margin: 0; font-size: 12px; color: #4F5A57; }
.lr-change { box-shadow: inset 0 0 0 1px rgba(8, 36, 50, .18); color: var(--ink); }

.trio { display: grid; gap: 28px; margin-top: clamp(80px, 10vw, 140px); }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.trio > div { padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.trio .icon { width: 22px; height: 22px; color: var(--accent); }
.trio p { color: var(--muted); font-size: 1rem; }
.trio .text-link { color: var(--accent); }

/* ---------- 08 Pricing and FAQ (shell) ---------- */
/* The live site's pricing look (Viggo, 19 Oct): a featured dark card with a
   Best value badge, big prices, check lists, a call per card, and a
   lift on hover; in the Aegean palette. */
.plans { display: grid; gap: 18px; }
.plan { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; background: #fff; color: var(--ink); border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 32, 31, .05), 0 12px 28px -18px rgba(20, 32, 31, .22); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.plan-name { font-weight: 600; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; }
.plan-tag.live { color: var(--lagoon-hover); background: var(--lagoon-wash); }
.plan-tag.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lagoon); box-shadow: 0 0 0 0 rgba(19, 107, 128, .45); animation: live-dot 2.2s ease-out infinite; }
.plan-tag.best { color: #E3C27E; background: rgba(216, 180, 106, .14); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .45); }
.plan-label { margin-top: -8px; font-size: .875rem; color: var(--reef-muted); }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price strong { font-family: var(--display); font-size: clamp(2.6rem, 2.3rem + 1.1vw, 3.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.plan-price span { color: var(--ink-muted); font-size: .9375rem; }
.plan-setup { font-size: .875rem; font-weight: 500; color: var(--lagoon-hover); }
.plan ul { display: grid; gap: 9px; padding-top: 16px; border-top: 1px dashed #D9CFBC; font-size: .9375rem; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: #2F3B39; }
.plan li .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--booked); stroke-width: 2.2; }
.plan .pill { width: 100%; margin-top: 4px; }
.plan .pill-ghost { color: var(--ink); border-color: rgba(20, 32, 31, .45); }
.plan .note { text-align: center; color: var(--ink-muted); }
.plan-featured { background: radial-gradient(120% 70% at 100% 0%, rgba(26, 127, 149, .2), rgba(26, 127, 149, 0) 58%), linear-gradient(170deg, #0E3E54, #0A3346 80%); color: #EAF3F6; border-color: rgba(226, 240, 246, .08); box-shadow: 0 30px 60px -26px rgba(10, 51, 70, .7), inset 0 1px 0 rgba(255, 255, 255, .06); }
.plan-featured .plan-price span, .plan-featured .note { color: #A6C2CE; }
.plan-featured .plan-setup { color: #5EE3D6; }
.plan-featured ul { border-top-color: rgba(226, 240, 246, .16); }
.plan-featured li { color: #DCE9EF; }
.plan-featured li .icon { color: #6CD39A; }
.plan-featured :focus-visible { box-shadow: 0 0 0 4px transparent, 0 0 0 7px #EAF3F6; }
@media (any-hover: hover) {
  .plan:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 32, 31, .06), 0 28px 50px -24px rgba(20, 32, 31, .35); }
}
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; padding-top: 12px; }
  .plan-featured { transform: translateY(-12px); }
}
@media (min-width: 900px) and (any-hover: hover) {
  .plan-featured:hover { transform: translateY(-16px); box-shadow: 0 40px 70px -26px rgba(10, 51, 70, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
}
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(19, 107, 128, .45); } 100% { box-shadow: 0 0 0 8px rgba(19, 107, 128, 0); } }
.risk { margin-top: 22px; display: grid; gap: 22px; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--hair); border-radius: 18px; color: var(--ink); box-shadow: 0 1px 2px rgba(20, 32, 31, .05); }
.risk .eyebrow { color: #7A5A22; margin-bottom: 10px; }
.risk-head h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.05rem); line-height: 1.12; letter-spacing: -.025em; }
.risk-head h3 em { color: #7A5A22; }
.risk-points { display: grid; gap: 18px; font-size: .9688rem; color: var(--ink-muted); }
.risk-points li { display: flex; gap: 12px; align-items: flex-start; }
.risk-points .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--lagoon); }
.risk-points b { color: var(--ink); font-weight: 600; }
@media (min-width: 800px) { .risk-points { grid-template-columns: 1fr 1fr; gap: 20px 32px; } }
@media (min-width: 1000px) { .risk { grid-template-columns: .8fr 2fr; gap: 40px; align-items: start; } }
.setup-offer { margin-top: 16px; padding: clamp(28px, 4vw, 48px); border-radius: 18px; background: radial-gradient(90% 80% at 100% 0%, rgba(94, 227, 214, .2), transparent 58%), var(--reef); color: var(--reef-fg); display: grid; gap: 14px; justify-items: start; border: 0; }
.setup-offer .eyebrow { color: #D8B46A; margin: 0; }
.setup-offer h3 { font-family: var(--display); font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.setup-offer h3 em { color: #D8B46A; }
.setup-offer p:not(.eyebrow) { color: var(--reef-muted); max-width: 46em; font-size: 1rem; }
.setup-offer .trial-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.setup-offer .pill-ghost { color: var(--reef-fg); border-color: rgba(226, 240, 246, .5); }
.setup-offer :focus-visible { box-shadow: 0 0 0 4px transparent, 0 0 0 7px var(--reef-fg); }
.pricing-fine { margin-top: 24px; font-size: .875rem; color: var(--muted); max-width: 60em; }

.faq { display: grid; gap: 32px; margin-top: clamp(96px, 12vw, 160px); }
@media (min-width: 960px) { .faq { grid-template-columns: 1fr 1.6fr; gap: 80px; } }
.faq .lede { margin-top: 14px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; font-size: 1.0625rem; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { width: 20px; height: 20px; color: var(--accent); transition: transform .3s var(--ease); }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 20px; color: var(--muted); max-width: 40em; font-size: 1rem; }

/* ---------- 09 Closing (night) ---------- */
.closing-head { display: grid; justify-items: center; gap: 22px; text-align: center; }
.closing-head p { color: var(--muted); max-width: 36em; }
/* The closing band's call button (round 6, Viggo: the live site's animated
   "Call our AI" button, in place of the big number). Ported from release
   (public/assets/redesign.css, .btn-brass.btn-call.pulse): a gold fill, two
   gold rings that keep rippling out from its edge 1.3 s apart, and the
   phone icon rings on hover. v3 tokens: our gold #B8893A and pill shape;
   ink on gold is 5.3:1, and on hover white on our gold ink #8A6420 is
   5.35:1 (the live hover is #96702F, 4.5:1). The rings are drawn outside the
   button, so it is not a .pill (a pill clips its smoke to its shape).
   Reduced motion and Motion off: no rings, no ring (the rules at the end). */
.call-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 0 30px 0 26px; border-radius: 999px; background: var(--gold); color: var(--ink); text-decoration: none; font: 600 clamp(1.0625rem, .95rem + .5vw, 1.3125rem)/1.2 var(--sans); white-space: nowrap; box-shadow: 0 10px 28px -8px rgba(184, 137, 58, .55); transition: background-color .25s, color .25s, transform .3s var(--ease-live), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.call-pill .icon { width: 1.15em; height: 1.15em; stroke-width: 2; }
.call-pill .num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.call-pill::before, .call-pill::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--gold); opacity: 0; pointer-events: none; animation: call-ring 2.6s var(--ease-live) infinite; }
.call-pill::after { animation-delay: 1.3s; }
@media (any-hover: hover) { .call-pill:hover { background: #8A6420; color: #fff; transform: translateY(-2px); } }
.call-pill:active { transform: scale(.97); }
.call-pill:focus-visible { border-radius: 999px; }
@media (max-width: 420px) { .call-pill { width: 100%; padding-inline: 18px; font-size: 1rem; gap: 10px; } }
@keyframes call-ring { 0% { transform: scale(.96); opacity: .7; } 100% { transform: scale(1.12); opacity: 0; } }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* The rings grow to 112% of the button. Under 420px the button is full width, so they reached past the
   screen and the page scrolled a few pixels sideways while they played (390 x 844, 21 Oct). The band clips
   them at its own edges instead; nothing else in it is meant to reach outside. */
.closing { overflow-x: clip; }
.big-cards { margin-top: clamp(72px, 9vw, 120px); }

/* ---------- 10 Footer (night) ---------- */
/* 96px at the bottom (21 Oct 2026): the chat bubble's corner (22px + 58px, plus the home indicator). At 1024 the
   Motion toggle sat under the bubble at the very end of the page; phones already had their own 104px below. */
.site-footer { padding: clamp(48px, 5vw, 64px) 0 calc(96px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 40px 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.6fr repeat(5, 1fr); } }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; }
@media (min-width: 1100px) { .footer-brand { grid-column: auto; } }
.footer-brand p { color: var(--muted); font-size: .9375rem; max-width: 22em; }
.footer-call { font-weight: 500; text-decoration: none; color: var(--accent); }
.footer-col h2 { font-size: .875rem; font-weight: 600; letter-spacing: 0; margin-bottom: 12px; }
.footer-col ul { display: grid; gap: 2px; }
.footer-col a { text-decoration: none; color: var(--muted); font-size: .9375rem; display: inline-block; padding: 5px 0; }
.footer-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.footer-base { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 1fr; font-size: .8125rem; color: var(--muted); }
@media (min-width: 900px) { .footer-base { grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; } }
.footer-base p { max-width: 70em; }
.motion-toggle { justify-self: start; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: .875rem; color: var(--fg); }
html:not(.js) .motion-toggle { display: none; }
@media (max-width: 760px) { .site-footer { padding-bottom: 104px; } }

.pill:active, .pill.is-pressed { transform: translateY(-1px) scale(.98); }
.pill.is-pressed { box-shadow: 0 0 0 4px rgba(94, 227, 214, .28); }
.tap-ripple { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 255, 255, .42); pointer-events: none; animation: tap-ripple .65s var(--ease) forwards; }
.pill-ghost .tap-ripple { background: rgba(19, 107, 128, .22); }
@keyframes tap-ripple { to { transform: scale(22); opacity: 0; } }
.plan.is-pressed { transform: translateY(-4px) scale(.995); box-shadow: 0 2px 4px rgba(20, 32, 31, .06), 0 28px 50px -24px rgba(20, 32, 31, .35); transition-duration: .15s; }
@media (min-width: 900px) { .plan-featured.is-pressed { transform: translateY(-16px) scale(.995); } }
a.card.is-pressed .tile { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.acc-btn.is-pressed, .chip.is-pressed, .text-link.is-pressed, .acc-play.is-pressed { transform: scale(.98); }
.clip-toggle.is-pressed, .cs-pause.is-pressed, .cs-replay.is-pressed { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .tap-ripple { display: none; } }
html.motion-off .tap-ripple { display: none; }

/* Round 2c: CSS loops (rings, pulses, live dots, waves) wait in any section
   that is off screen (aegean.js toggles .is-off), so nothing below the fold
   moves before the visitor gets there. */
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* ---------- Mercury's accordion (product section and the rows) ---------- */
.acc { border-top: 1px solid var(--line); }
.pd .acc { border-top: 0; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-h { margin: 0; font: inherit; }
.acc-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 14px 0; background: none; border: 0; color: var(--muted); font: 500 1.0625rem/1.35 var(--sans); letter-spacing: -.005em; text-align: left; cursor: pointer; transition: color .25s var(--ease); -webkit-tap-highlight-color: transparent; }
.acc-btn:hover, .acc-item.on .acc-btn { color: var(--fg); }
.acc-item.on .acc-btn { font-weight: 600; }
.acc-btn .soon { margin-left: auto; }
.acc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.acc-item.on .acc-dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
html:not(.js) .acc-dot { background: var(--accent); box-shadow: none; }
.acc-panel > div { display: grid; gap: 10px; justify-items: start; padding: 0 0 20px 20px; }
.acc-panel > div > p { color: var(--muted); max-width: 34em; font-size: 1rem; margin: 0; }
.acc-panel > div > .text-link { padding: 0; }
/* a narrow column (1180): the link wraps before the number, never inside it or before its icon (round 2d) */
.acc-panel > div > .text-link { flex-wrap: wrap; row-gap: 2px; }
.tel-end { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.acc-js .acc-item.on .acc-panel > div { animation: acc-in .45s var(--ease) both; }
/* Round 4c: the card in the open step (aegean.js inlineCard), under its
   paragraph. The step's text eases in; the card itself does not blink. */
.acc-js .acc-item.on .acc-panel > div.acc-holds { animation: none; }
.acc-js .acc-item.on .acc-panel > div.acc-holds > :not(.acc-card) { animation: acc-in .45s var(--ease) both; }
.acc-card { justify-self: stretch; width: 100%; margin: 6px 0 4px; }
.acc-card.pd-frame { padding: 0; }
.acc-card.mx-card { min-height: 0; }
.acc-inline .pd-ui { display: none; }
/* the steps change height as the card moves; the page never scrolls to follow them */
.acc-inline .acc { overflow-anchor: none; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } }
/* Round 2d: the accordion plays through (aegean.js autoplay). A thin bar
   under the open step fills over its time; Pause / Play sits under the list. */
.acc-h { position: relative; }
.acc-bar { display: none; pointer-events: none; } /* round 6d: a tap at the step's bottom edge reaches the step */
.acc-auto .acc-item.on .acc-bar { display: block; position: absolute; left: 20px; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; }
.acc-auto .acc-item.on .acc-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.acc-auto .acc-item.on .acc-panel > div { padding-top: 10px; }
.acc-play { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 13px 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: 500 .8125rem/1 var(--sans); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
.acc-play:hover { color: var(--fg); border-color: var(--fg); }
.acc-play:focus-visible { outline: 2px solid var(--gold, #B8893A); outline-offset: 3px; }
.acc-play .icon { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.acc-play .i-play, .acc-play.is-paused .i-pause { display: none; }
.acc-play.is-paused .i-play { display: block; }
.acc-play[hidden] { display: none; }
.acc-last { display: flex; align-items: center; gap: 10px; padding: 16px 0 4px; color: var(--fg); font-weight: 600; text-decoration: none; }
.acc-last .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.acc-last:hover .icon { transform: translateX(3px); }

/* ---------- Mercury rows: a big card and a headline with the accordion ---------- */
.mx-row { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 1024px) {
  .mx-row { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .mx-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .mx-row.flip > .mx-card { order: 2; }
}
.mx { padding: clamp(64px, 8vw, 112px) 0; }
/* the call needs the room: its card takes the wider column */
/* (the homepage's #phone column rule: see .mx-row.wide below) */
.mx-copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
.mx-copy .eyebrow { margin-bottom: -6px; }
.mx-lede { color: var(--muted); max-width: 32em; }
.mx-card { position: relative; isolation: isolate; border-radius: 28px; padding: clamp(18px, 3.4vw, 44px); min-height: clamp(440px, 46vw, 620px); display: grid; place-items: center; overflow: hidden; }
.mx-reef { background: radial-gradient(100% 80% at 100% 0%, rgba(26, 127, 149, .42), rgba(26, 127, 149, 0) 64%), radial-gradient(90% 70% at 0% 100%, rgba(216, 180, 106, .1), transparent 60%), #0A3346; }
.mx-shell { background: radial-gradient(110% 90% at 88% 0%, rgba(94, 227, 214, .2), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(184, 137, 58, .16), transparent 58%), #FBF8F2; box-shadow: inset 0 0 0 1px var(--hair); }
.mx-sand { background: radial-gradient(110% 80% at 100% 0%, rgba(94, 227, 214, .18), transparent 55%), radial-gradient(100% 80% at 0% 100%, rgba(184, 137, 58, .2), transparent 60%), #EDE4D3; box-shadow: inset 0 0 0 1px var(--hair); }
.mx-card .call-story { max-width: 640px; }
@media (max-width: 600px) { .mx-card { border-radius: 22px; padding: 14px; min-height: 0; } }

/* the live site's rings, behind the call (ring-out) */
.rings { position: absolute; left: 50%; top: 50%; width: min(78%, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(216, 180, 106, .38); opacity: 0; animation: ring-out 7s linear infinite; }
.rings i:nth-child(2) { animation-delay: 2.3s; } .rings i:nth-child(3) { animation-delay: 4.6s; }
.mx-card.offscreen .rings i { animation-play-state: paused; }
@keyframes ring-out { 0% { transform: scale(.55); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }

/* ---------- Lister: photos in, a draft out, priced from sold comps ---------- */
.lq { width: min(100%, 560px); background: #FBF8F2; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(10, 51, 70, .45), 0 0 0 1px rgba(20, 32, 31, .08); overflow: hidden; color: var(--ink); }
.lq-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #EEE6D8; }
.lq-top b { font-weight: 600; }
.lq-chip { margin-left: auto; font-size: .75rem; font-weight: 600; color: #6B4D17; background: rgba(184, 137, 58, .18); padding: 3px 10px; border-radius: 999px; }
.lq-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px; }
.lq-photos { display: grid; gap: 8px; align-content: start; }
.lq-photos .ph { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(160deg, #EFE9DC, #DED3BE); overflow: hidden; box-shadow: 0 8px 18px -10px rgba(20, 32, 31, .4); }
/* round 3 (Viggo 5): the item's real photos, not colour blocks */
.ph picture, .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lq-photos .ph { aspect-ratio: 4 / 5; }
.ph-3 img, .ph-tag img { object-position: 50% 35%; }
.lq-photos p { display: flex; gap: 4px; align-items: center; margin: 0; font-size: .75rem; color: #4F5A57; }
.lq-photos p .icon { width: 13px; height: 13px; }
.lq-draft { display: grid; gap: 8px; align-content: start; min-width: 0; }
.lq-cat { margin: 0; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #4F5A57; font-weight: 600; }
.lq-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.125rem; line-height: 1.22; letter-spacing: -.02em; }
.lq-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; font-size: .8125rem; }
.lq-specs dt { color: #4F5A57; font-size: .6875rem; }
.lq-specs dd { margin: 0; font-weight: 600; }
.lq-desc { margin: 0; font-size: .8125rem; color: #3E4846; }
.lq-price { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #EAF3F6; box-shadow: inset 0 0 0 1px #CFE3EA; }
.lq-range { margin: 0; }
.lq-range span { display: block; font-size: .6875rem; color: #3A5560; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.lq-range strong { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.lq-comps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: .75rem; }
.lq-comps li { display: flex; justify-content: space-between; gap: 8px; color: #3E4846; }
.lq-comps b { color: var(--ink); }
.lq-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.lq-approve { padding: 8px 18px; border-radius: 999px; background: #136B80; color: #fff; font-weight: 600; font-size: .875rem; }
.lq-ask { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(20, 32, 31, .28); font-size: .875rem; }
/* round 6c (Cowork's audit: at .42 the parts not in focus read at 1.9 to
   2.6:1): they stay readable, a little faded and with less colour */
.lq-photos, .lq-draft, .lq-price, .lq-actions, .lq-post { transition: opacity .4s var(--ease), filter .4s var(--ease), box-shadow .3s var(--ease); }
/* round 4: after Approve, posted to eBay (Coming soon), copy-ready elsewhere */
.lq-post { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid #EEE6D8; }
.lq-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.lq-status .soon { margin-left: 0; color: #14201F; background: rgba(184, 137, 58, .22); }
.lq-dot { width: 9px; height: 9px; border-radius: 50%; background: #9AA6A3; flex: none; }
.lq-s1, .lq-s2 { display: none; }
.lq[data-post="posting"] .lq-s0, .lq[data-post="live"] .lq-s0, .lq[data-post="live"] .lq-s1 { display: none; }
.lq[data-post="posting"] .lq-s1, .lq[data-post="live"] .lq-s2 { display: inline; }
.lq[data-post="posting"] .lq-dot { background: #136B80; animation: lq-ping 1s var(--ease) infinite; }
.lq[data-post="live"] .lq-dot { background: #1F7A4D; box-shadow: 0 0 0 3px rgba(31, 122, 77, .18); }
@keyframes lq-ping { 50% { opacity: .35; } }
.lq-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: .75rem; color: #4F5A57; }
.lq-copy b { font-weight: 600; color: var(--ink); padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(20, 32, 31, .22); background: #fff; }
.js .lq.lq-anim[data-post="live"] .lq-copy b { animation: lq-rise .5s var(--ease) both; }
.js .lq.lq-anim[data-post="live"] .lq-copy b:nth-of-type(2) { animation-delay: .12s; }
.js .lq.lq-anim[data-post="live"] .lq-copy b:nth-of-type(3) { animation-delay: .24s; }
.js .lq.lq-anim[data-post="live"] .lq-copy b:nth-of-type(4) { animation-delay: .36s; }
.js .lq[data-focus="photos"] :is(.lq-draft, .lq-price, .lq-actions),
.js .lq[data-focus="draft"] :is(.lq-photos, .lq-price, .lq-actions),
.js .lq[data-focus="price"] :is(.lq-photos, .lq-draft, .lq-actions),
.js .lq[data-focus="photos"] .lq-post, .js .lq[data-focus="draft"] .lq-post, .js .lq[data-focus="price"] .lq-post,
.js .lq[data-focus="approve"] :is(.lq-photos, .lq-draft, .lq-price, .lq-post),
.js .lq[data-focus="post"] :is(.lq-photos, .lq-draft, .lq-price) { opacity: .72; filter: saturate(.35); }
.js .lq[data-focus="price"] .lq-price { box-shadow: inset 0 0 0 1px #CFE3EA, 0 0 0 4px rgba(19, 107, 128, .2); }
.js .lq[data-focus="approve"] .lq-approve { animation: btn-pulse 2.2s var(--ease) infinite; }
@keyframes btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(19, 107, 128, .45); } 100% { box-shadow: 0 0 0 12px rgba(19, 107, 128, 0); } }
/* Round 2d: the draft builds itself as the accordion plays (aegean.js adds
   .lq-anim on each step): photos arrive, the draft writes itself, the sold
   prices fill in, Approve is pressed. */
@keyframes lq-rise { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lq-write { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes lq-press { 0%, 100% { transform: none; } 40% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(19, 107, 128, .22); } }
.js .lq.lq-anim[data-focus="photos"] .lq-photos .ph { animation: lq-rise .55s var(--ease) both; }
.js .lq.lq-anim[data-focus="photos"] .lq-photos .ph-2 { animation-delay: .35s; }
.js .lq.lq-anim[data-focus="photos"] .lq-photos .ph-3 { animation-delay: .7s; }
.js .lq.lq-anim[data-focus="draft"] :is(.lq-cat, .lq-title, .lq-specs, .lq-desc) { animation: lq-write .7s var(--ease) both; }
.js .lq.lq-anim[data-focus="draft"] .lq-title { animation-delay: .3s; }
.js .lq.lq-anim[data-focus="draft"] .lq-specs { animation-delay: .9s; }
.js .lq.lq-anim[data-focus="draft"] .lq-desc { animation-delay: 1.5s; }
.js .lq.lq-anim[data-focus="price"] .lq-comps li { animation: lq-rise .45s var(--ease) both; }
.js .lq.lq-anim[data-focus="price"] .lq-comps li:nth-child(2) { animation-delay: .35s; }
.js .lq.lq-anim[data-focus="price"] .lq-comps li:nth-child(3) { animation-delay: .7s; }
.js .lq.lq-anim[data-focus="price"] .lq-range { animation: lq-rise .5s var(--ease) 1.1s both; }
.js .lq .lq-approve.is-pressed { animation: lq-press .5s var(--ease) 1; }
@media (max-width: 480px) { .lq-body { grid-template-columns: 76px minmax(0, 1fr); } .lq-specs { grid-template-columns: 1fr; } }

/* ---------- How it works: the live site's steps, as a checklist ---------- */
/* Round 2c (Viggo: "a bit off, I think we can make that section look
   better"): one calm night card, no texture and no gold bars. A vertical
   timeline: each step a row on a hairline, its marker on a connector line;
   a done step's marker turns shallows and its tick draws in. Day labels are
   small muted chips; a thin track fills with the steps; "Your assistant is
   live" ends it as a pill. The ticks play when the card is in view. */
.mx-night { background: radial-gradient(90% 70% at 100% 0%, rgba(26, 127, 149, .45), rgba(26, 127, 149, 0) 62%), #0A3346; box-shadow: inset 0 0 0 1px rgba(226, 240, 246, .07); }
/* (the homepage's #how card rule is not used here) */
.su { width: 100%; max-width: 560px; justify-self: center; background: var(--o-card); border: 1px solid rgba(226, 240, 246, .09); border-radius: 20px; padding: clamp(18px, 2.6vw, 26px); color: var(--o-fg); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .6), var(--o-hi); font-size: 14px; -webkit-font-smoothing: antialiased; }
.su-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.su-top b { font-weight: 600; font-size: 15px; }
.su-chip { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--o-gold); background: rgba(216, 180, 106, .12); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .3); padding: 3px 10px; border-radius: 999px; }
.su-bar { height: 3px; border-radius: 3px; background: rgba(226, 240, 246, .1); margin-bottom: 6px; overflow: hidden; }
.su-bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); background: var(--o-shallows); transition: transform .9s var(--ease); }
.su[data-step="0"] .su-bar i { --p: 0; } .su[data-step="1"] .su-bar i { --p: .3333; } .su[data-step="2"] .su-bar i { --p: .6667; }
.su-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.su-steps li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--o-line); }
.su-steps li:first-child { border-top: 0; }
/* the connector, from this marker to the next, filling as the step is done */
.su-steps li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 46px; bottom: -10px; width: 2px; border-radius: 2px; background: rgba(226, 240, 246, .12); }
.su-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 46px; bottom: -10px; width: 2px; border-radius: 2px; background: var(--o-shallows); transform: scaleY(0); transform-origin: 50% 0; transition: transform .7s var(--ease) .2s; }
.su-mark { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-content: center; background: var(--o-card); box-shadow: inset 0 0 0 1.5px rgba(226, 240, 246, .26); color: #0A3346; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.su-mark .icon { width: 15px; height: 15px; stroke-width: 2.6; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .45s var(--ease) .15s; }
.su-steps b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; padding-top: 3px; }
.su-steps li > div > span { display: block; font-size: 12.5px; color: var(--o-muted); margin-top: 2px; }
.su-steps time { justify-self: end; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--o-muted); background: rgba(226, 240, 246, .06); box-shadow: inset 0 0 0 1px rgba(226, 240, 246, .08); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.su[data-step="1"] li[data-n="1"] .su-mark, .su[data-step="2"] li:is([data-n="1"], [data-n="2"]) .su-mark, .su[data-step="3"] li .su-mark { background: var(--o-shallows); box-shadow: none; }
.su[data-step="1"] li[data-n="1"] .su-mark .icon, .su[data-step="2"] li:is([data-n="1"], [data-n="2"]) .su-mark .icon, .su[data-step="3"] li .su-mark .icon { stroke-dashoffset: 0; }
.su[data-step="1"] li[data-n="1"]::after, .su[data-step="2"] li:is([data-n="1"], [data-n="2"])::after, .su[data-step="3"] li::after { transform: scaleY(1); }
.su-live { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 13px 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--o-good); background: rgba(108, 211, 154, .1); box-shadow: inset 0 0 0 1px rgba(108, 211, 154, .28); opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s; }
.su[data-step="3"] .su-live { opacity: 1; transform: none; }
.su-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--o-good); animation: live-dot-good 2.2s ease-out infinite; }
@media (max-width: 480px) { .su-steps li { grid-template-columns: 28px minmax(0, 1fr); } .su-steps time { grid-column: 2; justify-self: start; margin-top: 0; } .su-steps li:not(:last-child)::before, .su-steps li:not(:last-child)::after { top: 46px; } }
@keyframes live-dot-good { 0% { box-shadow: 0 0 0 0 rgba(108, 211, 154, .5); } 100% { box-shadow: 0 0 0 8px rgba(108, 211, 154, 0); } }

/* ---------- The live site's animations, ported (round 2) ---------- */
/* the hero headline rises line by line (redesign.js revealLines) */
.hero-copy h1 .hl { display: inline-block; overflow: hidden; padding: 0 .06em .1em; margin: 0 -.06em -.1em; vertical-align: top; }
.hero-copy h1 .hl > span { display: inline-block; }
.js:not(.motion-off) .hero-copy h1 .hl > span { animation: hl-in 1s cubic-bezier(.22, 1, .36, 1) both; }
.js:not(.motion-off) .hero-copy h1 .hl + .hl > span { animation-delay: .12s; }
@keyframes hl-in { from { transform: translateY(108%); opacity: .2; } }
/* buttons lift on hover; the call buttons ring and pulse */
@media (any-hover: hover) { .pill:hover { transform: translateY(-2px); } }
.btn-call:hover .icon { animation: ring-shake .7s var(--ease) 1; }
.pulse { animation: pulse-ring 2.6s var(--ease) infinite; }
/* round 3 (Viggo: nothing in the hero moves before the first scroll): the
   hero's call pill starts its pulse once the visitor has scrolled */
html.film:not(.has-scrolled) .hero .pulse { animation: none; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(184, 137, 58, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(184, 137, 58, 0); } }
@keyframes ring-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } }
/* the nav underline */
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: currentColor; opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
/* groups rise one after another, 90 ms apart (translate, so a card's own
   transform, like the featured plan's lift, is left alone) */
.js [data-reveal-group] > * { transition: opacity .7s var(--ease) calc(var(--i, 0) * 90ms), translate .8s var(--ease) calc(var(--i, 0) * 90ms), transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.js [data-reveal-group]:not(.in) > :not([data-reveal]) { opacity: 0; translate: 0 18px; }

/* ---------- Reduced motion and Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .transition-theme { transition: none; }
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; transform: none; translate: none; }
  .scene-pause { display: none; }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition-duration: 0s !important; }
html.motion-off [data-reveal], html.motion-off [data-reveal-group] > * { opacity: 1 !important; transform: none !important; translate: none !important; }
html.motion-off .scene-pause { display: none; }
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-solid, html:not(.film) .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Round 6d (Cowork, after Viggo's reference video on phone layouts): on a
   touch screen every link, button and chip can be hit across at least
   44 x 44 px. The small pills, the chips and the Motion button grow to 44;
   footer links get 44 px rows. Everything else keeps its look and gets a
   clear hit box round it (::after, 45 px each way, a pixel spare for
   rounding, and never
   smaller than the element), so the text and the line rhythm do not move.
   A mouse or trackpad (pointer: fine) keeps the desktop density: nothing
   here applies (test/aegean-in-view.test.js). Last in the file, so it
   wins over each element's own size. */
@media (pointer: coarse) {
  .pill-sm, .motion-toggle { height: 44px; }
  .chip { min-height: 44px; }
  .footer-col a { padding: 10px 0; min-width: 44px; }
  .brand, .text-link, .footer-call, .acc-play, .cs-pause, .cs-replay, .founder a { position: relative; }
  :is(.brand, .text-link, .footer-call, .acc-play, .cs-pause, .cs-replay, .founder a, .replay, .scene-pause, .clip-toggle)::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22.5px)); }
}


/* ======================================================================
   Subpages only (21 Oct 2026). Everything above is the homepage's own
   rules, copied unchanged from aegean.css; everything below is new.
   ====================================================================== */

/* the one place the copied rules are changed: a wider card column, by class
   rather than by the homepage's #phone */
@media (min-width: 1024px) { .mx-row.wide { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); } }

/* A subpage has no film, so the header is solid from the top (the copied
   html:not(.film) rule) and the nav marks the page it is on. */
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu a[aria-current="page"] { color: var(--lagoon-hover); }
.mobile-menu .num { font-weight: 600; }

/* ---------- The subpage hero ---------- */
.sub-hero { padding: calc(var(--header-total) + clamp(40px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px); }
.sub-hero-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1024px) { .sub-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }
.sub-hero-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.sub-hero-copy .eyebrow { margin-bottom: -4px; }
.sub-hero h1 .hl { display: inline-block; overflow: hidden; padding: 0 .06em .1em; margin: 0 -.06em -.1em; vertical-align: top; }
.sub-hero h1 .hl > span { display: inline-block; }
.js:not(.motion-off) .sub-hero h1 .hl > span { animation: hl-in 1s cubic-bezier(.22, 1, .36, 1) both; }
.js:not(.motion-off) .sub-hero h1 .hl + .hl > span { animation-delay: .12s; }
.sub-hero .lede { font-size: 1.0625rem; }
@media (min-width: 900px) { .sub-hero .lede { font-size: 1.1875rem; } }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.hero-note { display: flex; gap: 10px; align-items: flex-start; max-width: 36em; color: var(--muted); font-size: 1rem; }
.hero-note .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--accent); }
/* the facts under the actions: each one whole, never broken */
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.facts li { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: .9063rem; color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts b { font-weight: 600; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-live.on-page { color: var(--fg); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.tag-live.on-page::before { background: var(--accent); }
.sub-hero .mx-card { min-height: clamp(380px, 40vw, 560px); }
@media (max-width: 600px) { .sub-hero .mx-card { min-height: 0; } }
.sub-hero .tile { width: 100%; }

/* ---------- Hear it: the gold call button with its rings, and the steps ---------- */
.hear-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .hear-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hear-copy { display: grid; gap: 16px; }
.hear-card { display: grid; gap: 22px; justify-items: start; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: #fff; color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(20, 32, 31, .05), 0 24px 48px -30px rgba(20, 32, 31, .3); }
.hear-card .call-pill { margin: 6px 4px; }
.hear-steps { display: grid; gap: 14px; counter-reset: step; width: 100%; }
.hear-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink-muted); font-size: 1rem; }
.hear-steps li b { color: var(--ink); font-weight: 600; }
.hear-steps .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center; background: var(--reef); color: #EAF3F6; font-weight: 600; font-size: .875rem; }
.hear-card .note { color: var(--ink-muted); }

/* ---------- Two ways a call can go ---------- */
.ways { display: grid; gap: 18px; }
@media (min-width: 860px) { .ways { grid-template-columns: 1fr 1fr; gap: 22px; } }
.way { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: #fff; color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(20, 32, 31, .05), 0 20px 40px -30px rgba(20, 32, 31, .3); }
.way h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.way h3 .icon { width: 22px; height: 22px; }
.way p { color: var(--ink-muted); font-size: 1rem; }
.way .ui-band { justify-self: start; }
.way.bad h3 .icon { color: var(--missed-ink); }
.way.good h3 .icon { color: var(--booked-ink); }

/* ---------- On the call: the details card the accordion moves through ---------- */
.take { width: min(100%, 520px); display: grid; gap: 10px; padding: clamp(16px, 2.4vw, 24px); border-radius: 20px; background: var(--o-card, #0F3F52); color: #EAF3F6; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); border: 1px solid rgba(226, 240, 246, .09); font-size: 14px; }
.take-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.take-top b { font-size: 15px; font-weight: 600; }
.take-top .su-chip { margin-left: auto; }
.take-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: rgba(10, 51, 70, .55); border: 1px solid rgba(226, 240, 246, .08); transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.take-row dt { font-size: 12px; color: #A6C2CE; padding-top: 2px; }
.take-row dd { margin: 0; display: grid; gap: 3px; }
.take-row dd b { font-weight: 600; font-size: 14px; }
.take-row dd span { font-size: 12.5px; color: #C7DAE2; }
.take-row.on { background: rgba(61, 191, 178, .14); border-color: rgba(94, 227, 214, .45); box-shadow: 0 0 0 3px rgba(94, 227, 214, .12); }
.take-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: #A6C2CE; }
.take-foot .ohq-pill { margin-left: auto; }

/* ---------- Plain text sections ---------- */
.prose { display: grid; gap: 16px; max-width: 42em; color: var(--muted); font-size: 1.0625rem; }
.split { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.split .section-head { margin-bottom: 0; }
.privacy-note { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; background: #fff; color: var(--ink-muted); border: 1px solid var(--hair); font-size: 1rem; }
.privacy-note .icon { width: 22px; height: 22px; color: var(--lagoon); margin-top: 2px; }
.sync-tile { aspect-ratio: auto; min-height: 340px; }
.after-cards { display: grid; gap: 18px; }

/* ---------- Pricing on a subpage ---------- */
.plans.two { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
@media (min-width: 760px) { .plans.two { grid-template-columns: 1fr 1fr; } .plans.two .plan-featured { transform: none; } }
.plans.four { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .plans.four { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .plans.four { grid-template-columns: repeat(4, 1fr); align-items: stretch; padding-top: 0; } .plans.four .plan-featured { transform: translateY(-10px); } }
.plan-price strong, .plan-price span, .price-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan .plan-count { font-weight: 600; font-size: 1rem; }
.plan .plan-fit { color: var(--ink-muted); font-size: .9375rem; }
.plan-featured .plan-fit { color: #A6C2CE; }
.price-notes { display: grid; gap: 14px; margin-top: 26px; max-width: 52em; }
.price-notes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--muted); font-size: 1rem; }
.price-notes li .icon { width: 18px; height: 18px; margin-top: 4px; color: var(--accent); stroke-width: 2.2; }
.price-notes b { color: var(--fg); font-weight: 600; }
.wide-card { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 24px; border-radius: 18px; background: #fff; color: var(--ink); border: 1px solid var(--hair); }
.wide-card p { color: var(--ink-muted); }
.wide-card b { color: var(--ink); }
.wide-card .text-link { color: var(--lagoon-hover); }
.dental { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: 16px; background: #fff; color: var(--ink-muted); border: 1px solid var(--hair); font-size: .9688rem; max-width: 52em; }
.dental .icon { width: 20px; height: 20px; color: var(--lagoon); margin-top: 2px; }
.dental b { color: var(--ink); }
.pricing-call { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.pricing-call .note { max-width: 26em; }

/* ---------- Closing (night) on a subpage ---------- */
.closing-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }

/* ---------- One-message page: the 404 ---------- */
.solo { min-height: calc(100vh - 120px); display: grid; align-content: center; padding: calc(var(--header-total) + clamp(48px, 8vw, 120px)) 0 clamp(72px, 10vw, 140px); }
.solo .wrap { display: grid; gap: 20px; justify-items: start; max-width: calc(760px + 2 * var(--gutter)); }
.solo .lede { font-size: 1.125rem; }
.solo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.solo-links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 4px; }
.nf-code { font-family: var(--display); font-weight: 600; font-size: clamp(4.25rem, 2.6rem + 7.5vw, 7.5rem); line-height: .95; color: var(--gold-ink); letter-spacing: -.04em; }

/* ---------- Terms and Privacy: a readable document ---------- */
/* Sand page, ink text, comfortable lines (65 characters), a teal rule under
   each heading, and a table of contents that stays in view on a desktop. */
.doc { padding: calc(var(--header-total) + clamp(36px, 6vw, 80px)) 0 clamp(64px, 8vw, 112px); }
.doc-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .doc-grid { grid-template-columns: 240px minmax(0, 65ch); gap: 72px; justify-content: center; } }
.doc-head { display: grid; gap: 10px; margin-bottom: 18px; }
.doc-head h1 { font-size: clamp(2.4rem, 1.9rem + 2vw, 3.4rem); }
.doc-head .updated { color: var(--muted); font-size: .9375rem; }
.doc-body { max-width: 65ch; font-size: 1.0625rem; line-height: 1.75; color: var(--fg); }
.doc-body p, .doc-body ul { margin: 0 0 1.05em; }
.doc-body ul { padding-left: 1.2em; list-style: disc; }
.doc-body li { margin: .45em 0; }
.doc-body li::marker { color: var(--gold-ink); }
.doc-body h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.35rem + .9vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin: 1.9em 0 .7em; padding-bottom: 12px; position: relative; scroll-margin-top: calc(var(--header-total) + 20px); }
.doc-body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; border-radius: 2px; background: var(--lagoon); }
.doc-section { scroll-margin-top: calc(var(--header-total) + 20px); }
.toc { order: -1; }
.doc-body h3 { font-size: 1.125rem; font-weight: 600; margin: 1.4em 0 .5em; }
.doc-body a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc-body strong { font-weight: 600; }
.toc { align-self: start; }
.toc-inner { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: #FBF8F2; color: var(--ink); border: 1px solid var(--hair); }
.toc-title { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #7A5A22; margin-bottom: 6px; font-family: var(--sans); }
.toc ol { display: grid; gap: 2px; counter-reset: none; }
.toc a { display: block; padding: 6px 0; color: var(--ink-muted); text-decoration: none; font-size: .9375rem; line-height: 1.35; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1000px) { .toc { position: sticky; top: calc(var(--header-total) + 24px); max-height: calc(100vh - var(--header-total) - 48px); overflow: auto; } }
@media (max-width: 999px) { .toc-inner { padding: 14px 16px; } .toc ol { grid-template-columns: 1fr; } }
/* tables in a document become cards on a phone (none today; ready for one) */
.doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .9688rem; }
.doc-body th, .doc-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 599px) {
  .doc-body table, .doc-body thead, .doc-body tbody, .doc-body tr, .doc-body th, .doc-body td { display: block; }
  .doc-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc-body tr { padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: #FBF8F2; border: 1px solid var(--hair); }
  .doc-body td { border: 0; padding: 4px 0; }
  .doc-body td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; color: var(--muted); }
}

/* ---------- Resellers ---------- */
.lister-hero .tile.product-tile { min-height: 0; }
.steps-3 { display: grid; gap: 18px; counter-reset: step; }
@media (min-width: 860px) { .steps-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.step-card { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 18px; background: #fff; color: var(--ink); border: 1px solid var(--hair); }
.step-card .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-content: center; background: var(--reef); color: #EAF3F6; font-weight: 600; font-size: .9375rem; }
.step-card h3 { font-size: 1.1875rem; }
.step-card p { color: var(--ink-muted); font-size: 1rem; }
.callout { margin-top: 20px; display: flex; gap: 12px; align-items: flex-start; padding: 18px 22px; border-radius: 16px; background: #fff; color: var(--ink-muted); border: 1px solid var(--hair); font-size: 1rem; }
.callout .icon { width: 20px; height: 20px; color: var(--lagoon); margin-top: 3px; }
.callout b { color: var(--ink); }
.markets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.markets li { padding: 5px 12px; border-radius: 999px; background: #FBF8F2; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); font-size: .875rem; font-weight: 500; }
.markets li.soon-item { display: inline-flex; align-items: center; gap: 6px; }
.markets .soon { margin-left: 0; color: var(--ink); }
.vs { display: grid; gap: 18px; }
@media (min-width: 860px) { .vs { grid-template-columns: 1fr 1fr; gap: 22px; } }
.vs-card { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 3vw, 30px); border-radius: 20px; background: #fff; color: var(--ink); border: 1px solid var(--hair); }
.vs-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.vs-card ul { display: grid; gap: 8px; }
.vs-card li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--ink-muted); font-size: 1rem; }
.vs-card li .icon { width: 17px; height: 17px; margin-top: 4px; stroke-width: 2.2; }
.vs-card.bad li .icon { color: var(--missed-ink); }
.vs-card.good li .icon { color: var(--booked-ink); }
.vs-card .tag { justify-self: start; }
.tag-bad { color: var(--missed-ink); background: var(--missed-wash); }
.tag-good { color: var(--booked-ink); background: var(--booked-wash); }

/* ---------- /es/: #302's trial and Help me choose row (shown by the server while TRIAL_FORM is on) ---------- */
.offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* ---------- The smoke on the gold call button ---------- */
/* The homepage's smoke rules (copied above from aegean.css) cover .pill; the
   gold call button carries the same data-smoke, so its icon and label sit
   above the smoke layer as a pill's do, and its glow fallback lights the
   same way. Its rings are drawn outside the button, so the smoke's clip to
   the button's shape leaves them alone. */
.call-pill .icon, .call-pill .label { position: relative; z-index: 2; pointer-events: none; }
.call-pill.no-gl.is-lit .smoke-glow { opacity: 1; }

/* ---------- The email panel: the address, Copy, the mail app, the trial ---------- */
/* The fallback when no mail app opens after an email link's tap (site.js with
   public/assets/js/mail-open.js): no mail app set up, or the Claude preview. */
.mail-panel { position: fixed; z-index: 2147483600; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(calc(100vw - 2 * var(--gutter)), 420px); transform: translateX(-50%); display: grid; gap: 14px; padding: 22px; border-radius: 20px; background: #FBF8F2; color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 30px 80px -20px rgba(10, 51, 70, .55), 0 0 0 1px rgba(20, 32, 31, .06); }
.mail-panel[hidden] { display: none; }
.mail-panel h2 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; padding-right: 44px; }
.mail-panel .mail-lead { color: var(--ink-muted); font-size: .9688rem; line-height: 1.5; }
.mail-panel .mail-addr { font: 600 1.0625rem/1.4 var(--sans); padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--hair); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.mail-panel .mail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mail-panel .pill-ghost { color: var(--ink); border-color: rgba(20, 32, 31, .45); }
.mail-panel .mail-done { min-height: 1.4em; font-size: .875rem; color: var(--booked-ink); font-weight: 500; }
.mail-panel .text-link { color: var(--lagoon-hover); }
.mail-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-content: center; }
.mail-close:hover { background: rgba(20, 32, 31, .07); }
.mail-close .icon { width: 20px; height: 20px; }
.mail-scrim { position: fixed; inset: 0; z-index: 2147483500; background: rgba(10, 51, 70, .32); }
.mail-scrim[hidden] { display: none; }
@media (min-width: 700px) { .mail-panel { top: 50%; bottom: auto; transform: translate(-50%, -50%); } }

/* ---------- /resellers: Create your Lister account (App v1's sign-up, #305) ---------- */
/* Shown only when the server marks the page (lib/resellersSignup.js: App v1's
   SELF_SIGNUP and the Lister tab both on) and the script runs; otherwise the
   email button above. The fields, the 6-digit code boxes, the eye and the copy
   follow App v1's sign-in (internal/shared/signin): a light card, 52px fields
   with 16px text, the code in six boxes. */
.signup-off, .lister-signup { display: grid; justify-items: center; gap: 22px; width: 100%; }
.signup-off[hidden], .lister-signup[hidden], .ls-step[hidden] { display: none; }
.ls-card { width: min(100%, 480px); display: grid; text-align: left; padding: clamp(22px, 4vw, 32px); border-radius: 22px; background: #FBF8F2; color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 30px 70px -30px rgba(4, 20, 28, .6); }
.ls-step { display: grid; gap: 16px; }
.ls-h { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); line-height: 1.1; color: var(--ink); }
.ls-h:focus { outline: none; }
.ls-card p { max-width: none; }
.ls-card .ls-p, .ls-card .ls-small, .ls-card .ls-hint, .ls-card .ls-resend { color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }
.ls-card .ls-small { font-size: .875rem; }
.ls-small a { color: var(--lagoon-hover); }
.ls-card .ls-hint { font-size: .875rem; margin-top: 6px; }
.ls-field { display: grid; gap: 6px; min-width: 0; }
.ls-field label { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.ls-field input:not([type=checkbox]), .ls-field select { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid #B9AE9A; background: #fff; color: var(--ink); font: 400 16px/1.3 var(--sans); -webkit-appearance: none; appearance: none; }
.ls-field select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314201F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.ls-field input:not([type=checkbox]):focus-visible, .ls-field select:focus-visible, .ls-otp input:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; border-color: var(--lagoon); }
.ls-field [aria-invalid="true"] { border-color: var(--missed-ink); }
.ls-chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.ls-chips legend { padding: 0; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.ls-card .ls-chips .ls-hint { margin-top: 2px; }
.ls-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ls-chip { position: relative; display: inline-flex; }
.ls-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ls-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #B9AE9A; background: #fff; color: var(--ink); font-size: .9375rem; font-weight: 500; transition: background-color .2s, border-color .2s, color .2s; }
.ls-chip input:checked + span { background: var(--lagoon); border-color: var(--lagoon); color: #fff; }
.ls-chip input:checked + span::before { content: "\2713\00a0"; }
.ls-chip input:focus-visible + span { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.ls-chips[aria-invalid="true"] .ls-chip span { border-color: var(--missed-ink); }
.ls-pw { position: relative; }
.ls-pw input { padding-right: 56px; }
.ls-eye { position: absolute; top: 50%; right: 4px; width: 44px; height: 44px; transform: translateY(-50%); display: grid; place-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.ls-eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ls-eye[aria-pressed="true"] .slash { display: none; }
.ls-card .ls-err { padding: 10px 14px; border-radius: 12px; background: #FBEDE8; color: var(--missed-ink); font-size: .9375rem; font-weight: 500; }
.ls-go { justify-self: stretch; justify-content: center; }
.ls-back { justify-self: start; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--lagoon-hover); font: 600 .9375rem/1 var(--sans); cursor: pointer; }
.ls-back::before { content: "\2190\00a0"; }
.ls-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ls-otp input { min-width: 0; height: 56px; border-radius: 14px; border: 1px solid #B9AE9A; background: #fff; color: var(--ink); text-align: center; font: 600 22px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ls-otp input.filled { border-color: var(--lagoon); }
.ls-otp.shake { animation: ls-shake .4s var(--ease); }
@keyframes ls-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ls-card .ls-resend { min-height: 44px; display: flex; align-items: center; }
.ls-resend button { min-height: 44px; border: 0; background: none; padding: 0; color: var(--lagoon-hover); font: 600 .9375rem/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ls-card[aria-busy="true"] .ls-go { opacity: .7; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ls-otp.shake { animation: none; } }
html.motion-off .ls-otp.shake { animation: none; }

/* ---------- Round 3 (Viggo: "a full audit on the subpages") ---------- */
/* The number on "Hear it before you buy it": a large tabular text link, not a
   second gold button (two gold call buttons per page: the hero and the close). */
.hear-number { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--lagoon-hover); font: 600 clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem)/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-decoration: none; }
.hear-number .icon { width: .85em; height: .85em; stroke-width: 2; }
.hear-number:hover .num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* /phone/ and /es/ pricing: one card (the page sells phone answering), a
   line about Both, and three notes beside it as two balanced columns. */
.plan-col { display: grid; gap: 14px; align-content: start; }
.plans.one { grid-template-columns: minmax(0, 1fr); }
.plan .plan-actions { display: grid; gap: 4px; justify-items: center; margin-top: 6px; }
.plan .plan-actions .pill { width: 100%; justify-content: center; }
.plan-call { font-size: .9375rem; }
.plan-both { color: var(--muted); font-size: 1rem; text-align: center; }
@media (min-width: 900px) { .pricing-grid.single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(32px, 4vw, 64px); align-items: center; } .pricing-grid.single .price-notes { margin-top: 0; } }

/* Nights and weekends: a small hours card from the existing kit. */
.hours-card { display: grid; gap: 14px; padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: #fff; color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(20, 32, 31, .05), 0 24px 48px -30px rgba(4, 20, 28, .55); max-width: 460px; width: 100%; justify-self: center; }
.hc-head { display: flex; align-items: center; gap: 10px; }
.hc-head b { font-weight: 600; }
.hc-head span:last-child { margin-left: auto; color: var(--ink-muted); font-size: .875rem; white-space: nowrap; }
.hc-dot { width: 10px; height: 10px; border-radius: 50%; background: #B8893A; box-shadow: 0 0 0 4px rgba(184, 137, 58, .18); flex: none; }
.hc-rows { display: grid; gap: 10px; }
.hc-rows li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: #FBF8F2; border: 1px solid var(--hair); }
.hc-rows b { display: block; font-weight: 600; font-size: .9688rem; }
.hc-rows span:not(.hc-ic) { display: block; color: var(--ink-muted); font-size: .875rem; }
.hc-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-content: center; }
.hc-ic .icon { width: 18px; height: 18px; }
.hc-urgent .hc-ic { background: var(--missed-wash); color: var(--missed-ink); }
.hc-booked .hc-ic { background: var(--booked-wash); color: var(--booked-ink); }
.hc-foot { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: .8125rem; }
.hc-foot .icon { width: 15px; height: 15px; }
#hours .split { align-items: center; }

/* Terms and Privacy: the contents list marks the section you are reading. */
.toc a[aria-current="true"] { color: var(--lagoon-hover); font-weight: 600; text-decoration: none; box-shadow: inset 2px 0 0 var(--lagoon); padding-left: 12px; margin-left: -14px; }

/* Small phones: tighter spacing, the same content (round 3: the pages were
   long; Viggo's target is about 8,000 px for /phone/ at 390). */
@media (max-width: 600px) {
  main > .block:not(.closing) { padding: 36px 0; }
  main > .block.closing { padding: 48px 0; }
  .lede { font-size: 1rem; line-height: 1.55; }
  .statement { font-size: 1.875rem; }
  .section-head { margin-bottom: 22px; }
  .faq-list summary { padding: 15px 0; }
  .setup-offer { padding: 22px 20px; gap: 12px; }
  .cs-link { height: 12px; }
  .footer-grid { gap: 24px 20px; }
  .footer-col h2 { margin-bottom: 6px; }
  .footer-base { margin-top: 32px; padding-top: 18px; }
  .site-footer { padding-top: 36px; }
  .plan { padding: 22px 20px; gap: 12px; }
  .dental { font-size: .875rem; padding: 14px 16px; }
  .hear-card { gap: 16px; }
  .hear-steps { gap: 10px; }
  .way { padding: 20px; gap: 12px; }
  .setup-offer h3 { font-size: 1.875rem; }
  .take-row { padding-block: 10px; }
  .sub-hero .cs-cal-grid > span:nth-last-child(2), .sub-hero .cs-cal-grid > .slot:last-child { display: none; }
}

/* The hero's call story: the time stays on one line. */
.cs-strip b { white-space: nowrap; }
/* ...and the Owner HQ line gets the room it needs instead of an ellipsis */
.sub-hero .cs-owner div span { white-space: normal; overflow: visible; }

/* Phones and tablets: in a section with a visual beside its words, the
   eyebrow and heading come first, then the visual, then the rest. */
@media (max-width: 1023px) {
  .mx-row { row-gap: 0; }
  .mx-row > .mx-copy { display: contents; }
  .mx-row > .mx-copy > .eyebrow { order: 1; margin-bottom: 14px; }
  .mx-row > .mx-copy > h2 { order: 2; margin-bottom: clamp(24px, 4vw, 36px); }
  .mx-row > .mx-card { order: 3; margin-bottom: clamp(24px, 4vw, 36px); }
  .mx-row > .mx-copy > :not(.eyebrow):not(h2) { order: 4; }
}

/* Touch screens: the targets the audit found under 44px get 44px; mouse
   layouts stay as dense as they are. */
@media (pointer: coarse) {
  .hero-actions .text-link, .closing-alt .text-link, .solo-links a, .plan-call, .plan-both .text-link, .section-head .text-link, .acc-panel .text-link, .lede .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .cs-pause { width: 44px; height: 44px; }
  .cs-replay { min-height: 44px; }
  .site-header .brand, .site-footer .brand { min-height: 44px; }
  .wide-card .text-link, .demo-actions .text-link, .solo-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* /resellers/ (round 3): the mock frames on the palette's light surfaces
   with the homepage's one soft shadow, not a mint and sand gradient. */
.mx-plain { background: #FBF8F2; box-shadow: inset 0 0 0 1px #E4DCCD, 0 1px 2px rgba(20, 32, 31, .05), 0 12px 28px -18px rgba(20, 32, 31, .22); }
.lister-hero .lister-tile { background: #FBF8F2; box-shadow: inset 0 0 0 1px #E4DCCD, 0 1px 2px rgba(20, 32, 31, .05), 0 12px 28px -18px rgba(20, 32, 31, .22); }
.lister-hero .lister-tile::before, .lister-hero .lister-tile::after { display: none; }
/* the badge stays on one line; on a phone the breadcrumb keeps its last two levels */
.lr-cat .lr-path { min-width: 0; }
.lr-ready { white-space: nowrap; flex: none; }
@media (max-width: 480px) { .lr-root { display: none; } }
/* small labels at 4.5:1: muted ink, 11px or more */
.lr-specs dt, .lq-cat, .lq-specs dt { color: #56635F; font-size: max(11px, 1em); }
.lr-cat { color: #6B4D17; }

/* The Ready to post pack (#311's Lister: where each approved draft goes). */
.pack-mock { width: min(100%, 460px); display: grid; gap: 14px; padding: clamp(16px, 2.4vw, 22px); border-radius: 20px; background: #fff; color: var(--ink); border: 1px solid #E4DCCD; box-shadow: 0 1px 2px rgba(20, 32, 31, .05), 0 12px 28px -18px rgba(20, 32, 31, .22); text-align: left; }
.pk-top { display: flex; align-items: center; gap: 10px; }
.pk-top b { font-weight: 600; }
.pk-chip { margin-left: auto; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: #6B4D17; background: rgba(184, 137, 58, .16); box-shadow: inset 0 0 0 1px rgba(150, 112, 47, .3); white-space: nowrap; }
.pk-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #FBF8F2; border: 1px solid #E4DCCD; }
.pk-ph { width: 52px; height: 64px; border-radius: 10px; overflow: hidden; display: block; }
.pk-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-item b { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.pk-item span:not(.pk-ph):not(.pk-ok) { display: block; color: #56635F; font-size: .8125rem; margin-top: 2px; }
.pk-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: var(--booked-ink); background: var(--booked-wash); white-space: nowrap; }
.pk-ok .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.pk-rows { display: grid; gap: 8px; }
.pk-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 8px 8px 8px 14px; border-radius: 14px; border: 1px solid #E4DCCD; background: #fff; }
.pk-rows li div { min-width: 0; }
.pk-rows b { display: block; font-weight: 600; font-size: .9375rem; }
.pk-rows span:not(.pk-btn) { display: block; color: #56635F; font-size: .8125rem; }
.pk-btn { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(20, 32, 31, .3); font-weight: 600; font-size: .875rem; color: var(--ink); background: #fff; }
.pk-btn.pk-primary { background: #136B80; border-color: #136B80; color: #fff; }
.pk-foot { color: #56635F; font-size: .8125rem; }
#draft .mx-card { min-height: 0; }

/* ---------- Light cards on the page: fixed surfaces, fixed ink ---------- */
/* Cards keep their own surface and text colours (the page colour moves under
   them), so their text is at 4.5:1 whatever the scroll. */
.surface { background: #fff; color: var(--ink); }

/* ---------- Touch: 44 x 44 for the subpages' own targets too ---------- */
@media (pointer: coarse) {
  .call-why .text-link { position: relative; }
  .call-why .text-link::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22.5px)) -4px; }
  .toc a { padding: 12px 0; min-height: 44px; }
  .solo-links, .closing-alt { row-gap: 12px; }
  .facts li, .markets li { min-height: 32px; }
  .solo-links a, .closing-alt a, .hero-actions .text-link, .doc-body a, .mail-panel .text-link { position: relative; }
  :is(.solo-links a, .closing-alt a, .doc-body a, .mail-panel .text-link)::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22.5px)); }
}
.take-rows { display: grid; gap: 10px; margin: 0; }

/* the homepage's tag (its chat section's rule, not copied above) */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tag-live { color: #0F5A6C; background: rgba(19, 107, 128, .1); }
.tag-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #136B80; animation: live-dot 2.2s ease-out infinite; }

/* the hero's call story needs the wider column, as on the homepage */
@media (min-width: 1024px) { .sub-hero-grid.has-story { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); } }
@media (min-width: 1024px) and (max-width: 1239.98px) { .sub-hero-grid.has-story .cs-grid { grid-template-columns: minmax(0, 1fr); } .sub-hero-grid.has-story .cs-wave { display: none; } }
.sub-hero .mx-card.mx-reef { padding: clamp(14px, 2.2vw, 28px); }

/* pricing: the plans and the notes side by side on a wide screen */
.pricing-grid { display: grid; gap: 8px 48px; align-items: start; }
@media (min-width: 1180px) { .pricing-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .pricing-grid .price-notes { margin-top: 12px; } }
.pricing-grid + .setup-offer { margin-top: 32px; }

/* on a phone the gold button is full width, so its rings grow less across
   than up and down, and never past the screen's edge */
@media (max-width: 420px) {
  .call-pill::before, .call-pill::after { animation-name: call-ring-narrow; }
}
@keyframes call-ring-narrow { 0% { transform: scale(.98, .96); opacity: .7; } 100% { transform: scale(1.035, 1.14); opacity: 0; } }
.hear-grid > *, .sub-hero-grid > *, .split > *, .pricing-grid > * { min-width: 0; }
@media (max-width: 480px) { .hear-card { padding: 20px 16px; } }
/* the smallest phones: "Call our AI:" may wrap above the number, never the number itself */
@media (max-width: 380px) { .call-pill { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; } }
.cs-line .cs-say { font-style: normal; }
.cs-replay { white-space: nowrap; }

/* Round 4: Start free trial is the one action; under it, why to call
   (price card and closing), a text link to the line, never a gold pill */
.call-why { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.5; text-align: center; max-width: 36ch; text-wrap: balance; }
.call-why .text-link { display: inline; font-weight: 600; white-space: nowrap; }
.call-why .text-link .icon { display: inline-block; vertical-align: -0.15em; margin-left: 4px; }
.plan .plan-actions .call-why { margin-top: 10px; }
.closing-actions .call-why { flex-basis: 100%; margin: 6px auto 0; }
.closing-head .closing-actions { margin-top: 8px; }
.trial-panel h2:focus { outline: none; }
.trial-panel p:not(.mail-lead) { font-size: .9688rem; line-height: 1.5; }

/* Round 5 (Viggo on an iPhone: "the animations are too big"): at 390 x 844
   every animated card fits in about 60% of the screen. Shrink, don't cut.
   The call story keeps every step: on a phone its two halves, the call
   (ring, words, name, need, address) and the booking (booked, calendar,
   Owner HQ), share one fixed space; the story switches from the first to the
   second as the calendar step starts. Once it has played (or with reduced
   motion) Call and Booking switch between them. Subpages only. */
.cs-views { display: none; }
@media (max-width: 600px) {
  .sub-hero .cs-grid { grid-template-areas: "stage"; gap: 0; }
  .sub-hero .cs-call, .sub-hero .cs-out { grid-area: stage; transition: opacity .45s var(--o-ease), visibility 0s linear .45s; }
  .sub-hero .call-story .cs-out { opacity: 0; visibility: hidden; }
  .sub-hero .call-story.s5 .cs-out, .sub-hero .call-story:not(.cs-play) .cs-out { opacity: 1; visibility: visible; transition-delay: 0s; }
  .sub-hero .call-story.s5 .cs-call, .sub-hero .call-story:not(.cs-play) .cs-call { opacity: 0; visibility: hidden; transition-delay: 0s, .45s; }
  .sub-hero .call-story[data-view="call"]:not(.cs-play) .cs-call { opacity: 1; visibility: visible; transition-delay: 0s; }
  .sub-hero .call-story[data-view="call"]:not(.cs-play) .cs-out { opacity: 0; visibility: hidden; transition-delay: 0s, .45s; }
  .sub-hero .call-story:not(.cs-play) .cs-views { display: inline-flex; }
  .sub-hero .cs-out { align-content: center; }
  .sub-hero .cs-foot { flex-wrap: wrap; row-gap: 8px; margin-top: 12px; }
  .sub-hero .cs-strip { padding: 10px 12px; gap: 10px; }
  .sub-hero .cs-log { padding: 10px 12px; gap: 5px; }
  .sub-hero .cs-line { font-size: 13px; line-height: 1.4; }
  .sub-hero .cs-fields > div { padding: 7px 11px; grid-template-columns: 62px 1fr; }
  .sub-hero .cs-link { height: 14px; }
  .sub-hero .cs-cal { padding: 10px 12px; }
  .cs-views { gap: 0; border-radius: 999px; padding: 3px; background: rgba(226, 240, 246, .08); box-shadow: inset 0 0 0 1px rgba(226, 240, 246, .14); }
  .cs-view { min-height: 32px; padding: 0 12px; border-radius: 999px; font: 600 12.5px/1 var(--sans); color: #C7DAE2; }
  .cs-view[aria-pressed="true"] { background: rgba(94, 227, 214, .18); color: #EAF3F6; }
  /* On the call: tighter rows, values at most two lines */
  .take { gap: 8px; padding: 14px; }
  .take-row { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 9px 12px; }
  .take-row dd { gap: 2px; }
  .take-row dd b, .take-row dd span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .take-row dd span { font-size: 12.5px; line-height: 1.35; }
  /* Lister's draft: smaller photos and title, the specs in two pairs a row, the description two lines */
  .lister-tile .lr-photos .ph { width: 52px; height: 64px; }
  .lister-tile .lr-draft { padding: 13px 14px; gap: 8px; }
  .lister-tile .lr-title { font-size: 1.2rem; }
  .lister-tile .lr-price { padding: 8px 10px; gap: 2px; }
  .lister-tile .lr-price strong { font-size: 1.35rem; }
  .lister-tile .lr-specs { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 3px 10px; font-size: 12.5px; }
  .lister-tile .lr-specs dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lister-tile .lr-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
  /* the Ready to post pack: tighter rows */
  .pack-mock { gap: 10px; padding: 14px; }
  .pk-item { padding: 8px; gap: 10px; grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pk-ph { width: 44px; height: 54px; }
}
@media (max-width: 600px) and (pointer: coarse) {
  .cs-view { min-height: 44px; min-width: 46px; }
  .cs-views { gap: 2px; }
}
@media (max-width: 600px) {
  .pk-rows { gap: 6px; }
  .pk-rows li { min-height: 48px; padding: 6px 6px 6px 12px; }
}
@media (max-width: 600px) {
  /* the story's foot stays on one line */
  .sub-hero .cs-foot { flex-wrap: nowrap; gap: 8px; }
  .sub-hero .cs-sample { font-size: 11px; line-height: 1.25; min-width: 0; }
  .sub-hero .cs-controls { gap: 6px; flex: none; }
  .cs-view { padding: 0 10px; font-size: 12px; }
  /* Lister's draft: the price on one line under its label, less padding */
  .lister-tile { padding: 14px; }
  .lister-tile .tile-label { margin-bottom: 0; }
  .lister-tile .lr-photos .ph { width: 46px; height: 56px; }
  .lister-tile .lr-draft { gap: 6px; }
  .lister-tile .lr-title { font-size: 1.125rem; }
  .lister-tile .lr-price > div { display: flex; align-items: baseline; gap: 8px; }
  .lister-tile .lr-price strong { font-size: 1.25rem; }
  .lister-tile .lr-price p { font-size: 12px; }
  /* the pack: the item's name and price beside its photo, the tick alone */
  .pk-item .pk-ok { font-size: 0; gap: 0; padding: 6px; }
  .pk-item .pk-ok .icon { margin: 0; }
  .pk-item b { font-size: .875rem; }
  .pk-foot { font-size: .75rem; }
}
@media (max-width: 600px) {
  .lister-hero .tile.product-tile { padding: 14px; gap: 10px; }
  /* once the story has played, pause has nothing to pause; Play again keeps its words for screen readers */
  .sub-hero .call-story:not(.cs-play) .cs-pause { display: none; }
  .sub-hero .cs-replay { width: 44px; padding: 0; font-size: 0; gap: 0; }
  .pk-rows b { font-size: .875rem; line-height: 1.3; }
  .pk-rows span:not(.pk-btn) { font-size: .75rem; line-height: 1.3; }
}
.cs-view { appearance: none; -webkit-appearance: none; background: transparent; border: 0; box-shadow: none; cursor: pointer; }
.cs-view[aria-pressed="true"] { background: rgba(94, 227, 214, .18); }
.cs-view:focus-visible { outline: 2px solid var(--o-shallows, #5EE3D6); outline-offset: 2px; }
@media (max-width: 600px) {
  /* the first line ("Your line rings after hours") sits where the words will come, so the card keeps one height */
  .sub-hero .cs-log { position: relative; }
  .sub-hero .cs-log .cs-pre { position: absolute; left: 12px; right: 12px; top: 10px; }
  .sub-hero .cs-foot { min-height: 50px; }
}

/* Round 5 (Viggo: two Start free trial buttons on the first screen,
   "excessive"): a header action marked data-tuck steps aside while the same
   action is on screen in the page, and fades back in when none is
   (site.js). It keeps its space, so nothing in the header moves. */
.js .header-actions .pill[data-tuck] { transition: opacity .2s var(--o-ease, ease), visibility 0s linear .2s; }
.js .header-actions .pill[data-tuck]:not(.is-shown) { opacity: 0; visibility: hidden; pointer-events: none; }
.js .header-actions .pill[data-tuck].is-shown { transition-delay: 0s; }
html.motion-off .header-actions .pill[data-tuck] { transition: none; }
@media (prefers-reduced-motion: reduce) { .header-actions .pill[data-tuck] { transition: none; } }
/* the story's first line overlays the words to come at every width, so the card never changes height (no layout shift) */
.sub-hero .cs-log { position: relative; }
.sub-hero .cs-log .cs-pre { position: absolute; left: 14px; right: 14px; top: 12px; }
@media (max-width: 600px) { .sub-hero .cs-log .cs-pre { left: 12px; right: 12px; top: 10px; } }
@media (max-width: 600px) {
  /* the specs in full, one per line (nothing cut), with the space taken from the title, the photos and the copy line */
  .lister-tile .lr-specs { grid-template-columns: max-content minmax(0, 1fr); gap: 1px 10px; font-size: 12.5px; line-height: 1.35; }
  .lister-tile .lr-specs dd { overflow: visible; text-overflow: clip; white-space: normal; }
  .lister-hero .lister-tile .tile-label { font-size: 2rem; }
  .lister-tile .lr-photos .ph { width: 40px; height: 50px; }
  .lister-tile .lr-in { padding: 4px 10px; font-size: 12px; }
  .lister-tile .lr-copy { font-size: 11.5px; line-height: 1.35; }
  .lister-tile .lr-actions span { height: 32px; }
}

/* The call's waveform shows on phones too (homepage round 6, part 2: every
   animation plays on the phone, only sized down). */
@media (max-width: 420px) {
  .sub-hero .cs-wave { display: flex; gap: 1.5px; height: 20px; }
  .sub-hero .cs-wave i { width: 2.5px; }
  .sub-hero .cs-wave i:nth-child(n+10) { display: none; }
  .sub-hero .cs-strip { gap: 9px; }
  .sub-hero .cs-strip b { font-size: 13px; }
  .sub-hero .cs-ring { width: 34px; height: 34px; }
}
@media (max-width: 359px) { .sub-hero .cs-wave i:nth-child(n+9) { display: none; } }