/* Elixir public site. One committed world: ink ground, warm paper pages, mint as the single accent.
   Liebling for display, the system stack for everything read at length. */
/* Liebling as WOFF2 (the OTF stays as a fallback), preloaded from each page's head so it arrives with the
   page. "Liebling Fallback" is Arial resized to Liebling's measurements (the same calculation Next.js uses),
   so if the swap is seen at all no text moves. Story 4379. */
@font-face { font-family: "Liebling"; src: url("../fonts/LieblingPro-Regular.woff2") format("woff2"), url("../fonts/LieblingPro-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Liebling"; src: url("../fonts/LieblingPro-Medium.woff2") format("woff2"), url("../fonts/LieblingPro-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Liebling"; src: url("../fonts/LieblingPro-Bold.woff2") format("woff2"), url("../fonts/LieblingPro-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Liebling Fallback"; src: local("Arial"); font-weight: 400; size-adjust: 105.6%; ascent-override: 74.81%; descent-override: 19.89%; line-gap-override: 0%; }
@font-face { font-family: "Liebling Fallback"; src: local("Arial"); font-weight: 500; size-adjust: 109.35%; ascent-override: 72.24%; descent-override: 19.2%; line-gap-override: 0%; }
@font-face { font-family: "Liebling Fallback"; src: local("Arial"); font-weight: 700; size-adjust: 111.79%; ascent-override: 70.67%; descent-override: 18.78%; line-gap-override: 0%; }

:root {
  --ink: #0f0f0f;
  --ink-2: #171716;
  --ink-line: rgba(244, 242, 236, 0.13);
  --on-ink: #f4f2ec;
  --on-ink-mute: rgba(244, 242, 236, 0.66);
  --paper: #fbfaf7;
  --paper-2: #f2efe7;
  --line: #e4e0d6;
  --text: #161616;
  --mute: #5c574e;
  --mute-2: #767065;
  --mint: oklch(0.922 0.155 163);
  --mint-ink: #0d8a5f;
  --mint-wash: #e3f5ec;
  --rose: #e0648a;
  --rose-ink: #9e2d53;
  --rose-wash: #fbe6ed;
  --blue: oklch(0.75 0.13 235);
  --blue-ink: #2b6c9c;
  --blue-wash: #e6f0f8;
  --display: "Liebling", "Liebling Fallback", "Helvetica Neue", Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(22px, 6vw, 96px);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.55 var(--body); color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.synthetic { font-size: 12px; color: var(--mute-2); }
.on-ink .synthetic, .dissect .synthetic { color: var(--on-ink-mute); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px var(--gutter); color: var(--on-ink); border-bottom: 1px solid transparent; transition: padding .35s var(--out), background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
/* The header stays pinned. Clear over the hero at the very top; a solid ink band once the page moves, so it reads over light sections. */
.nav.is-scrolled { padding-top: 12px; padding-bottom: 12px; background: var(--ink); border-bottom-color: var(--ink-line); box-shadow: 0 16px 30px -24px rgba(0, 0, 0, 0.6); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--body); color: var(--on-ink-mute); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.nav-phone svg { flex: none; }
.nav-phone:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 4px; }
@media (hover: hover) { .nav-phone:hover { color: var(--on-ink); } }
/* With Log in beside Talk to sales there is no room for the full number until very wide screens: show the phone as an icon. */
@media (max-width: 1540px) {
  .nav-phone { width: 38px; height: 38px; justify-content: center; border: 1px solid var(--ink-line); border-radius: 50%; }
  .nav-phone span { display: none; }
}
@media (max-width: 600px) {
  .nav-actions { gap: 8px; }
  .nav .btn-sales.sm { padding: 0 14px; }
  .nav .btn-sales.sm .arr { display: none; }
  .btn-login { height: 38px; padding: 0 14px; }
}
/* Smallest phones: the call icon gives way so the logo keeps its size. */
@media (max-width: 374px) {
  .nav-phone { display: none; }
}
[id] { scroll-margin-top: 96px; }
/* Nothing may widen the page sideways: on phones that also widens the frame the pinned header sizes against.
   clip, not hidden, so the sticky pricing row keeps working. */
html, body { overflow-x: clip; }
.nav .brand { justify-self: start; }
.nav .brand img { height: 26px; width: auto; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }

.liquid { position: relative; display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(244, 242, 236, 0.06); border: 1px solid var(--ink-line); }
.liquid .goo { position: absolute; inset: 0; filter: url(#goo); pointer-events: none; }
.liquid .blob { position: absolute; top: 5px; bottom: 5px; left: 0; right: 100%; border-radius: 999px; background: var(--on-ink); opacity: 0; }
.liquid .drip { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--on-ink); opacity: 0; }
.liquid a, .liquid button { position: relative; z-index: 1; padding: 9px 18px; border: 0; border-radius: 999px; background: none; font: 500 15px/1.2 var(--body); color: var(--on-ink-mute); text-decoration: none; cursor: pointer; transition: color .25s ease .05s; white-space: nowrap; }
.liquid a.is-hot, .liquid button.is-hot { color: var(--ink); }
.liquid.on-paper { background: #fff; border-color: var(--line); }
.liquid.on-paper .blob, .liquid.on-paper .drip { background: var(--text); }
.liquid.on-paper a, .liquid.on-paper button { color: var(--mute); }
.liquid.on-paper .is-hot { color: var(--paper); }

/* ---------- Buttons ---------- */
.btn-sales { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; white-space: nowrap; align-items: center; gap: 10px; height: 50px; padding: 0 20px 0 24px; border: 0; border-radius: 999px; background: var(--mint); color: var(--ink); font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; transition: transform .5s cubic-bezier(.2, 1.4, .45, 1), box-shadow .5s var(--out); }
/* Hover: a lighter fill wells up from where the pointer enters and drains out where it leaves, the menu's liquid grammar. */
.btn-sales::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 260%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transform: translate(-50%, -50%) scale(0); transition: transform .7s cubic-bezier(.2, 1, .3, 1); pointer-events: none; }
.btn-sales .arr { transition: transform .5s cubic-bezier(.2, 1.4, .45, 1); }
.btn-sales.sm { height: 42px; padding: 0 16px 0 18px; font-size: 14px; }
.btn-sales.wide { width: 100%; justify-content: center; }
@media (hover: hover) {
  .btn-sales:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(108, 245, 196, 0.8); }
  .btn-sales:hover::before { transform: translate(-50%, -50%) scale(1); }
  .btn-sales:hover .arr { transform: translateX(5px); }
}
.btn-sales:active { transform: translateY(0) scale(.98); }
.btn-sales[disabled] { background: #d9d5cb; color: #6f6a60; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-sales[disabled]::before { display: none; }
/* Log in: the quiet partner to Talk to sales, an outlined pill at the same height. */
.btn-login { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid var(--ink-line); border-radius: 999px; color: var(--on-ink); font: 600 14px/1 var(--body); text-decoration: none; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease; }
@media (hover: hover) { .btn-login:hover { border-color: var(--on-ink-mute); background: rgba(244, 242, 236, 0.06); } }
.btn-login:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.btn-quiet { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 2px; color: var(--on-ink); text-decoration: none; font: 500 15px/1 var(--body); }
.btn-quiet .drop { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); transform: scale(.55); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-radius .5s var(--out); }
.btn-quiet span { padding-bottom: 5px; background: linear-gradient(var(--ink-line), var(--ink-line)) 0 100% / 100% 1px no-repeat, linear-gradient(var(--mint), var(--mint)) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--out); }
@media (hover: hover) {
  .btn-quiet:hover .drop { transform: scale(1); border-radius: 50% 50% 50% 0; }
  .btn-quiet:hover span { background-size: 100% 1px, 100% 1.5px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); min-height: min(100svh, 940px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 120px var(--gutter) 64px; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.hero canvas.is-dragging { cursor: grabbing; }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 30px; max-width: 640px; pointer-events: none; }
.hero-copy a, .hero-copy .engines { pointer-events: auto; }
.display { font: 700 clamp(3.2rem, 6.4vw, 6rem)/.92 var(--display); letter-spacing: -.038em; margin: 0; text-wrap: balance; }
.display em, .display-2 em { font-style: normal; color: var(--mint); }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.5; color: var(--on-ink-mute); max-width: 36ch; margin: 0; }
.actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.engines { display: grid; gap: 18px; padding-top: 22px; border-top: 1px solid var(--ink-line); max-width: 600px; }
.engines .group { display: grid; gap: 10px; }
.engines .label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-mute); }
.engines .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
.engine { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--on-ink); white-space: nowrap; }
.engine img { width: 17px; height: 17px; object-fit: contain; filter: brightness(0) invert(1); opacity: .88; }
@media (max-width: 600px) {
  .engines .row { gap: 22px; }
  .engine > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .engine img { width: 22px; height: 22px; }
}

/* ---------- Claims (paper pages) ---------- */
.pages { background: var(--paper); padding: 24px var(--gutter) 40px; }
.claim { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(48px, 7vw, 112px); padding: 104px 0; border-bottom: 1px solid var(--line); }
.claim:last-child { border-bottom: 0; }
.claim .say { position: sticky; top: 64px; align-self: start; }
.kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 18px; }
.claim h2 { font: 700 clamp(2.4rem, 4.2vw, 3.9rem)/1 var(--display); letter-spacing: -.03em; margin: 0 0 20px; text-wrap: balance; }
.claim h2 em { font-style: normal; color: var(--mint-ink); }
.claim .say p { color: var(--mute); font-size: 18px; margin: 0; max-width: 36ch; }

.proof { width: 100%; border-collapse: collapse; font-size: 15px; }
.proof th { text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-2); padding: 0 12px 10px; border-bottom: 2px solid var(--text); }
.proof th.us { color: var(--mint-ink); }
.proof td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.proof td:first-child { font-weight: 600; width: 50%; }
.proof td.us { background: #eef7f2; color: var(--mint-ink); font-weight: 600; }

.evidence { border-top: 2px solid var(--text); }
.evidence .line { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.evidence .line small { font-size: 12px; color: var(--mute-2); }
.evidence blockquote { margin: 0; font: 500 20px/1.45 var(--display); }
.evidence blockquote mark { background: var(--mint-wash); color: inherit; box-shadow: inset 0 -2px 0 var(--mint-ink); padding: 0 2px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: #ece8df; color: var(--text); }
.tag.pos { background: var(--mint-wash); color: var(--mint-ink); }
.tag.src { background: var(--blue-wash); color: var(--blue-ink); }
.tag.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); }

.book { border-top: 2px solid var(--text); padding-top: 26px; display: grid; gap: 12px; }
.node { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.node b { font-weight: 600; }
.node small { display: block; font-size: 13px; color: var(--mute); margin-top: 1px; }
.node .end { margin-left: auto; font-size: 12px; color: var(--mute-2); }
.node i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ws { margin-left: 28px; padding: 14px 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.ws-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 12px; }
.ws-head b { font-weight: 600; }
.ws-head span { font-size: 12px; color: var(--mute-2); }
.projects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.proj.ai { background: #f1faf5; }
.proj.ai i { background: var(--mint-ink); }
.proj.search { background: #f0f5fa; }
.proj.search i { background: var(--blue-ink); }
.merge { display: block; width: 100%; height: 40px; }
.merge path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.merge .p-ai { stroke: var(--mint-ink); }
.merge .p-search { stroke: var(--blue-ink); }
.view { width: 72%; margin: 0 auto; }
.view i { background: linear-gradient(90deg, var(--mint-ink) 50%, var(--blue-ink) 50%); }
.soon { font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: #ece8df; color: var(--mute); margin-left: auto; white-space: nowrap; }
.ws-more { margin-left: 28px; }

/* ---------- The dissected answer ---------- */
.dissect { background: var(--ink); color: var(--on-ink); padding: 128px var(--gutter) 120px; }
.dissect-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(40px, 6vw, 96px); align-items: end; margin-bottom: 72px; }
.display-2 { font: 700 clamp(2.6rem, 4.8vw, 4.6rem)/.97 var(--display); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.dissect-intro { display: grid; gap: 24px; justify-items: start; }
.dissect-intro p { margin: 0; color: var(--on-ink-mute); font-size: 17px; line-height: 1.55; max-width: 40ch; }

.plate { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: clamp(56px, 7vw, 112px); align-items: center; }
.leaders { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.answer { position: relative; background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 14px; padding: 26px 30px 24px; }
.answer .q { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--ink-line); }
.answer .q span { color: var(--on-ink); font-size: 16px; }
.answer .q small { color: var(--on-ink-mute); font-size: 13px; }
.answer p { margin: 0; font-size: 18px; line-height: 1.8; color: rgba(244, 242, 236, 0.8); }
.answer .rival { box-shadow: inset 0 -1px 0 rgba(244, 242, 236, 0.4); color: var(--on-ink); }
.answer .mk { color: var(--on-ink); padding: 1px 2px; border-radius: 2px; }
.answer .mk-a { box-shadow: inset 0 -2px 0 var(--mint); font-weight: 600; }
.answer .mk-b { background: rgba(224, 100, 138, 0.15); box-shadow: inset 0 -2px 0 var(--rose); }
.answer .callout { margin-top: 44px; line-height: 1.5; }
.answer .sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink-line); font-size: 14px; line-height: 1.6; }
.answer .mk-c { box-shadow: inset 0 -2px 0 var(--blue); color: var(--on-ink-mute); }
.answer .synthetic { display: block; margin-top: 14px; }

.key { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.key.is-aligned { display: block; position: relative; }
.key.is-aligned li { position: absolute; left: 0; right: 0; }
.key li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start; }
.letter { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--body); color: var(--ink); }
.key h3 { margin: 5px 0 6px; font: 600 16px/1.2 var(--body); }
.key p { margin: 0; font-size: 15px; color: var(--on-ink-mute); line-height: 1.5; max-width: 34ch; }
.key .a .letter { background: var(--mint); }
.key .a h3 { color: var(--mint); }
.key .b .letter { background: var(--rose); }
.key .b h3 { color: var(--rose); }
.key .c .letter { background: var(--blue); }
.key .c h3 { color: var(--blue); }
/* Point at one highlight, in the answer or in the key, and the other two fade in both places. */
/* The key items carry the entrance animation, so the fade sits on their children where the animation cannot override it. */
.plate .mk, .key li > * { transition: opacity .3s ease; }
.key li { cursor: default; border-radius: 12px; outline-offset: 6px; }
.plate[data-focus="a"] .mk:not(.mk-a), .plate[data-focus="a"] .key li:not(.a) > *,
.plate[data-focus="b"] .mk:not(.mk-b), .plate[data-focus="b"] .key li:not(.b) > *,
.plate[data-focus="c"] .mk:not(.mk-c), .plate[data-focus="c"] .key li:not(.c) > * { opacity: .25; }

/* ---------- Every figure ---------- */
.trace { background: var(--paper); padding: 128px var(--gutter) 120px; }
.section-title { font: 700 clamp(2.4rem, 4.4vw, 4rem)/1 var(--display); letter-spacing: -.03em; margin: 0 0 56px; max-width: 16ch; text-wrap: balance; }
.trace ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
.trace li { border-top: 2px solid var(--text); padding-top: 22px; }
.trace li b { display: block; font: 700 1.6rem/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 12px; }
.trace li p { margin: 0; color: var(--mute); font-size: 17px; max-width: 34ch; }

/* ---------- The results page, measured (dark, so it reads as its own section) ---------- */
.serp-scene { background: var(--ink); color: var(--on-ink); }
.serp-sticky { padding: 72px var(--gutter) 80px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.serp-copy .section-title { color: var(--on-ink); margin-bottom: 24px; }
.serp-copy .section-title em { font-style: normal; color: var(--mint); }
.serp-copy p { color: var(--on-ink-mute); font-size: 18px; max-width: 40ch; margin: 0 0 16px; }
.serp-copy .synthetic { display: block; color: var(--on-ink-mute); margin-top: 22px; }
.readout { margin-top: 30px; display: flex; gap: 44px; }
.readout b { display: block; font: 700 3.2rem/1 var(--display); color: var(--mint); letter-spacing: -.02em; }
.readout span { font-size: 14px; color: var(--on-ink-mute); }
.phone { justify-self: center; width: 460px; max-width: 100%; border: 1px solid rgba(244, 242, 236, 0.22); border-radius: 50px; padding: 26px 20px 32px; background: #fff; position: relative; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); }
.phone .bar { height: 38px; margin: -4px 8px 18px; border-radius: 999px; background: var(--paper-2); display: flex; align-items: center; padding: 0 18px; font-size: 14px; color: var(--mute); }
/* The results page in the app's SERP barcode colours: one hue per block type (light-theme values from the app),
   your own listing in mint, the fold in the barcode's fold amber. */
.phone { --serp-ai: oklch(0.525 0.09 210); --serp-ads: oklch(0.545 0.13 60); --serp-organic: oklch(0.535 0.02 250); --serp-fold: oklch(0.54 0.11 75); --serp-fold-on-ink: oklch(0.79 0.16 75); }
.blk { --c: var(--serp-organic); border-radius: 12px; margin-bottom: 11px; padding: 13px 16px; font-size: 14px; color: var(--mute); background: color-mix(in oklch, var(--c) 12%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--c) 34%, #fff); }
.blk b { display: block; color: var(--c); font-size: 14px; margin-bottom: 3px; }
.blk.aio { --c: var(--serp-ai); height: 244px; }
.blk.ad { --c: var(--serp-ads); height: 66px; }
.blk.org { height: 84px; }
.blk.you { --c: var(--mint-ink); background: var(--mint-wash); box-shadow: inset 0 0 0 2px var(--mint-ink); }
.fold { position: absolute; left: -30px; right: -30px; top: 636px; border-top: 1.5px dashed var(--serp-fold); }
.fold span { position: absolute; left: -10px; top: -9px; transform: translateX(-100%); font-size: 12px; color: var(--serp-fold-on-ink); white-space: nowrap; }

/* ---------- Upward reveal ---------- */
@keyframes reveal-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.reveal-wait { opacity: 0; transform: translateY(16px); }
.reveal-wait.in { animation: reveal-up .7s var(--out) forwards; }
.reveal-wait.in.d1 { animation-delay: .08s; }
.reveal-wait.in.d2 { animation-delay: .16s; }

/* ---------- Canon: lines drop in one after another once their group is reached ---------- */
/* The onboarding preview's entrance (previewDropIn): rise from below with a slight overshoot. */
@keyframes dropIn {
  0% { opacity: 0; transform: translateY(32px) scale(.985); }
  70% { opacity: 1; transform: translateY(-3px) scale(1); }
  100% { opacity: 1; transform: none; }
}
.canon-ready [data-canon]:not(.go) [data-line] { opacity: 0; }
.canon-ready [data-canon].go [data-line] { animation: dropIn 560ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * var(--step, 90ms)); }

/* ---------- Enquiry ---------- */
.enquire { background: var(--paper); padding: 120px var(--gutter) 128px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); border-top: 1px solid var(--line); }
.enquire h2 { font: 700 clamp(2.4rem, 4.2vw, 3.9rem)/1 var(--display); letter-spacing: -.03em; margin: 0 0 22px; text-wrap: balance; }
.enquire .enq-copy p { color: var(--mute); font-size: 18px; max-width: 34ch; margin: 0; }
.enq { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-content: start; }
.enq label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.enq .wide { grid-column: 1 / -1; }
.enq input:not([type="checkbox"]), .enq textarea, .enq select { font: 16px/1.4 var(--body); color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.enq input:focus, .enq textarea:focus { outline: none; border-color: var(--mint-ink); box-shadow: 0 0 0 3px var(--mint-wash); }
.enq textarea { resize: vertical; min-height: 96px; }
.enq .consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--mute); font-size: 14px; line-height: 1.5; }
.enq .consent input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--mint-ink); flex: none; }
.enq .consent a { color: var(--text); }
.enq button { justify-self: start; margin-top: 6px; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: var(--on-ink); padding: 80px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot .brand img { height: 24px; width: auto; }
.foot .brand p { color: var(--on-ink-mute); margin: 14px 0 0; font-size: 15px; }
.foot h4 { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-mute); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.foot ul a { color: var(--on-ink); text-decoration: none; }
@media (hover: hover) { .foot ul a:hover { color: var(--mint); } }
.foot li span { color: var(--on-ink-mute); }
.foot .copy { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--ink-line); padding-top: 22px; margin: 20px 0 0; font-size: 13px; color: var(--on-ink-mute); }

/* ---------- Pricing ---------- */
.price-hero { background: var(--ink); color: var(--on-ink); padding: 168px var(--gutter) 64px; display: grid; gap: 28px; }
.price-hero .display { font-size: clamp(2.8rem, 5.2vw, 4.8rem); max-width: 16ch; }
.price-hero .lede { max-width: 48ch; }
.price-controls { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.pricing { background: var(--paper); padding: 56px var(--gutter) 104px; }
.family[hidden] { display: none; }
.custom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px 34px; border-radius: 18px; background: var(--ink); color: var(--on-ink); margin-bottom: 36px; }
.custom h2 { margin: 0 0 6px; font: 700 clamp(1.8rem, 2.8vw, 2.4rem)/1.05 var(--display); letter-spacing: -.025em; }
.custom p { margin: 0; color: var(--on-ink-mute); max-width: 60ch; }
.ladder-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.ladder-bar p { margin: 0; color: var(--mute); font-size: 15px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cards[hidden] { display: none; }
.card { display: flex; flex-direction: column; gap: 22px; padding: 28px 26px 26px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.card header { display: grid; gap: 6px; }
.card h3 { margin: 0; font: 700 1.7rem/1 var(--display); letter-spacing: -.02em; }
.card header p { margin: 0; color: var(--mute); font-size: 14.5px; min-height: 2.9em; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price b { font: 700 3rem/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price span { color: var(--mute); font-size: 14px; }
.hero-allow { padding: 14px 16px; border-radius: 12px; background: var(--paper-2); display: grid; gap: 4px; }
.hero-allow b { font-size: 17px; font-variant-numeric: tabular-nums; }
.hero-allow small { color: var(--mute); font-size: 13px; }
.incl { list-style: none; margin: 0; padding: 0; display: grid; font-size: 14.5px; }
.incl li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.incl li:last-child { border-bottom: 0; }
.incl li span { color: var(--mute); }
.incl li b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.card .btn-sales { margin-top: auto; justify-content: center; }
/* Story 4599: Buy leads; Talk to Sales stays beneath it as a quieter text link. */
.card-cta { margin-top: auto; display: grid; gap: 8px; }
.card-cta .btn-sales { margin-top: 0; }
.card-talk { justify-self: center; padding: 6px 4px; color: var(--mute); font: 500 14px/1 var(--body); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; }
@media (hover: hover) { .card-talk:hover { color: var(--ink); text-decoration-color: currentColor; } }
.card-talk:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
/* Add-ons beneath the cards (story 3664). */
.addons { margin-top: 56px; }
.addons-head h2 { margin: 0 0 6px; font: 700 clamp(1.5rem, 2.2vw, 1.9rem)/1.1 var(--display); letter-spacing: -.02em; }
.addons-head p { margin: 0 0 18px; color: var(--mute); max-width: 60ch; }
.addons h3 { margin: 22px 0 8px; font: 600 .82rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ao-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ao-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.ao-list li:first-child { border-top: 0; }
.ao-main p { margin: 2px 0 0; color: var(--mute); font-size: 13.5px; max-width: 60ch; }
.ao-name { font-weight: 600; }
.ao-unit { color: var(--mute); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ao-list b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 6.5em; }
.ao-list b span { display: block; font-weight: 400; color: var(--mute); font-size: 12px; }
.ao-list b.ao-label { font-weight: 500; color: var(--mute); font-size: 13px; line-height: 1.25; white-space: normal; max-width: 12em; }
@media (max-width: 640px) { .ao-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; } .ao-list b { text-align: left; } }

.definitions { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; border-top: 2px solid var(--text); padding-top: 26px; }
.definitions b { display: block; font: 700 1.15rem/1.2 var(--display); margin-bottom: 8px; }
.definitions p { margin: 0; color: var(--mute); font-size: 14.5px; }
.price-note { margin-top: 28px; font-size: 13px; color: var(--mute-2); }
.control-gap { flex: 1 1 0; }
.liquid.sm a, .liquid.sm button { padding: 7px 13px; font-size: 13px; }
.annual { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 10px; border-radius: 999px; border: 1px solid var(--ink-line); background: rgba(244, 242, 236, 0.06); color: var(--on-ink-mute); font: 500 14px/1 var(--body); cursor: pointer; transition: color .25s ease; }
.annual[aria-checked="true"] { color: var(--on-ink); }
.track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: rgba(244, 242, 236, 0.2); transition: background .3s ease; }
.knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-ink); transition: transform .5s cubic-bezier(.2, 1.4, .45, 1); }
.annual[aria-checked="true"] .track { background: var(--mint); }
.annual[aria-checked="true"] .knob { transform: translateX(16px); background: var(--ink); }
.card { position: relative; }
/* Most popular is a label only: quiet paper pill, never the ink and mint of a picked card. */
.badge { position: absolute; top: -11px; left: 24px; padding: 5px 10px; border-radius: 999px; background: var(--paper-2); color: var(--mute); border: 1px solid var(--line); font: 600 10.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.card-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clients { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--mute); white-space: nowrap; }
.price-wrap { display: grid; gap: 8px; }
.price-sub { margin: 0; font-size: 13px; color: var(--mute); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.premium { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; transition: border-color .3s ease, background .3s ease; }
.premium[data-on="true"] { border-color: var(--mint-ink); background: #f1faf5; }
.premium-switch { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: 600 14px/1 var(--body); color: var(--text); cursor: pointer; text-align: left; }
.premium-switch .track { background: #d9d5cb; }
.premium-switch .knob { background: #fff; }
.premium-switch[aria-checked="true"] .track { background: var(--mint-ink); }
.premium-switch[aria-checked="true"] .knob { transform: translateX(16px); }
.premium-delta { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--mint-ink); font-variant-numeric: tabular-nums; }
.premium-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 12.5px; color: var(--mute); }
.premium-list li { display: flex; gap: 8px; }
.premium-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--mint-ink); }
@media (max-width: 860px) { .control-gap { display: none; } }

/* ---------- Pricing controls: one row that stays with you down the plans ---------- */
.price-hero { padding-bottom: 20px; }
.price-bar { position: sticky; top: var(--nav-h, 0px); z-index: 25; background: var(--ink); color: var(--on-ink); padding: 14px var(--gutter) 18px; border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; }
.price-bar.is-stuck { border-bottom-color: var(--ink-line); box-shadow: 0 18px 32px -26px rgba(0, 0, 0, 0.7); }
@media (max-width: 860px) { .price-bar { position: static; } }
/* Tighter controls inside the bar, so the whole row, engines included, holds on one line at desktop widths. */
.price-bar .price-controls { gap: 12px 12px; }
.price-bar .liquid:not(.sm) a, .price-bar .liquid:not(.sm) button { padding: 8px 14px; font-size: 14px; }
.price-bar .liquid.sm a, .price-bar .liquid.sm button { padding: 7px 11px; }
.price-bar .annual { height: 38px; gap: 8px; padding: 0 13px 0 8px; font-size: 13px; }
.price-bar .engine-pick { gap: 5px; }
.price-bar .engine-pick .ep-label { margin-right: 3px; }
.price-bar .eng { width: 34px; height: 34px; border-radius: 9px; }
.price-bar .eng img { width: 16px; height: 16px; }

/* ---------- Engine picker: logo squares, an instant name label because two engines share Google's logo ---------- */
.engine-pick { display: inline-flex; align-items: center; gap: 6px; }
.engine-pick[hidden] { display: none; }
.engine-pick .ep-label { font-size: 13px; color: var(--on-ink-mute); margin-right: 6px; white-space: nowrap; }
.eng { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1px solid var(--ink-line); background: rgba(244, 242, 236, 0.04); cursor: pointer; opacity: .45; transition: opacity .2s ease, border-color .2s ease, background-color .2s ease; }
.eng img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); pointer-events: none; }
.eng[aria-pressed="true"] { opacity: 1; border-color: var(--mint); background: rgba(108, 245, 196, 0.1); }
.eng:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
/* Named like the app's tooltip: a small popover card above the square, shown the moment the pointer lands. */
.eng::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 5px 9px; border-radius: 8px; background: var(--paper); color: var(--text); border: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55); font: 500 12px/1.35 var(--body); white-space: nowrap; pointer-events: none; opacity: 0; z-index: 6; }
.eng:focus-visible::after { opacity: 1; }
@media (hover: hover) { .eng:hover { opacity: 1; } .eng:hover::after { opacity: 1; } }
.card-engines { display: grid; gap: 10px; }
.card-engines .ce-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--mute); }
.card-engines .ce-head b { font-weight: 600; color: var(--text); }
.card-engines .row { display: flex; gap: 8px; }
.card .eng { border-color: var(--line); background: #fff; opacity: .5; }
.card .eng img { filter: none; }
.card .eng[aria-pressed="true"] { opacity: 1; border-color: var(--mint-ink); background: var(--mint-wash); }
.card .eng:focus-visible { opacity: 1; }
@media (hover: hover) { .card .eng:hover { opacity: 1; } }
.engine-hint { margin: 0; min-height: 1.3em; font-size: 12.5px; color: var(--mute); }
.price-bar .engine-hint { position: absolute; left: var(--gutter); bottom: -4px; transform: translateY(100%); padding: 6px 10px; border-radius: 8px; background: var(--on-ink); color: var(--ink); min-height: 0; }
.price-bar .engine-hint:empty { display: none; }

/* ---------- Enquiry form states ---------- */
.enq { position: relative; }
.enq-selection { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--mint-wash); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mint-ink) 28%, transparent); }
.enq-selection[hidden], .enq-done[hidden] { display: none; }
.enq-selection b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--text); }
.enq-selection p { margin: 0; font-size: 14px; color: var(--mute); }
.enq-selection-remove { flex: none; padding: 2px 0; border: 0; background: none; font: 600 13px/1.2 var(--body); color: var(--mint-ink); text-decoration: underline; cursor: pointer; }
.enq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq-send { grid-column: 1 / -1; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 18px; flex-wrap: wrap; }
.enq-send button { margin-top: 0; }
.enq-status { margin: 0; font-size: 14px; color: var(--mute); }
.enq-status.is-error { color: var(--rose-ink); }
.enq.is-sending button[type="submit"] { opacity: .7; cursor: progress; }
.enq.is-sent > :not(.enq-done) { display: none; }
.enq-done { grid-column: 1 / -1; padding: 30px 32px; border-radius: 16px; background: #fff; border: 1px solid var(--line); outline: none; }
.enq-done h3 { margin: 0 0 10px; font: 700 clamp(1.7rem, 2.6vw, 2.2rem)/1.05 var(--display); letter-spacing: -.02em; }
.enq-done p { margin: 0; color: var(--mute); font-size: 16px; }

/* ---------- Sign in ---------- */
.signin { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); background: var(--paper); }
.signin-art { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); }
.signin-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.signin-art .brand { position: absolute; top: 28px; left: var(--gutter); z-index: 2; }
.signin-art .brand img { height: 26px; width: auto; }
.signin-art .line { position: absolute; left: var(--gutter); bottom: 44px; z-index: 2; margin: 0; font: 700 clamp(1.8rem, 2.6vw, 2.4rem)/1.05 var(--display); letter-spacing: -.025em; pointer-events: none; }
.signin-art .line em { font-style: normal; color: var(--mint); }
.signin-panel { display: grid; place-items: center; padding: 48px var(--gutter); }
.signin-box { width: min(400px, 100%); display: grid; gap: 22px; }
.signin-box h1 { margin: 0; font: 700 2.4rem/1 var(--display); letter-spacing: -.03em; }
.signin-box > p { margin: -10px 0 0; color: var(--mute); }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 50px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 15px/1 var(--body); color: var(--text); cursor: pointer; transition: border-color .2s ease, transform .35s var(--out); }
@media (hover: hover) { .btn-google:hover { border-color: #cfc9bc; transform: translateY(-1px); } }
.btn-google img { width: 18px; height: 18px; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; font-size: 13px; color: var(--mute-2); }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); }
.signin-form { display: grid; gap: 16px; }
.signin-form label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.signin-form .row { display: flex; justify-content: space-between; align-items: baseline; }
.signin-form .row a { font-weight: 400; font-size: 13px; color: var(--mute); }
.signin-form input { font: 16px/1.4 var(--body); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; background: #fff; color: var(--text); }
.signin-form input:focus { outline: none; border-color: var(--mint-ink); box-shadow: 0 0 0 3px var(--mint-wash); }
.form-note { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--mint-wash); color: var(--mint-ink); font-size: 14px; }

/* ---------- Review-only header switch ---------- */
.review-chip { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); font: 600 12px/1 var(--body); color: var(--mute); }
.review-chip a { padding: 7px 11px; border-radius: 999px; text-decoration: none; color: var(--text); }
.review-chip a.on { background: var(--ink); color: var(--on-ink); }

/* ---------- Header stacks before the logo and copy run out of room ---------- */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; align-items: start; padding-top: var(--logo-space, 360px); }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .nav .liquid { display: none; }
  .hero { grid-template-columns: 1fr; align-items: start; padding-top: var(--logo-space, 320px); }
  .claim, .dissect-top, .plate, .serp-sticky, .enquire, .custom { grid-template-columns: minmax(0, 1fr); }
  .claim .say { position: static; }
  .trace ol, .cards, .definitions { grid-template-columns: 1fr; row-gap: 32px; }
  .enq { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot .brand { grid-column: 1 / -1; }
  .projects { grid-template-columns: 1fr; }
  .merge { display: none; }
  .view { width: 100%; margin-top: 12px; }
  .signin { grid-template-columns: 1fr; }
  .signin-art { min-height: 300px; }
  .serp-sticky { padding-top: 64px; padding-bottom: 72px; }
  .fold span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Very wide screens: hold the content to 1920px, backgrounds stay full bleed (Rob, 14 Sept) ---------- */
@media (min-width: 1920px) {
  :root { --gutter: calc((100vw - 1728px) / 2); }
}

/* The consent banner, as the legal pages draw it. Scoped by id because
   .consent is also the enquiry form's agreement line. Accept and Reject are
   the same button: rejecting must be exactly as easy as accepting. */
#consent { position: fixed; left: var(--gutter); right: var(--gutter); bottom: clamp(16px, 3vw, 28px); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; max-width: 64rem; margin: 0 auto; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 18px 50px rgba(0, 0, 0, .13); animation: consent-in .5s var(--out) both; }
#consent[hidden] { display: none; }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #consent { animation: none; } }
#consent p { flex: 1 1 22rem; margin: 0; font: 400 14px/1.55 var(--body); color: var(--mute); }
#consent p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent-acts { display: flex; gap: 10px; }
.consent-acts button { padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font: 500 13.5px/1 var(--body); color: var(--ink); cursor: pointer; transition: background .2s var(--out), border-color .2s var(--out); }
@media (hover: hover) { .consent-acts button:hover { background: var(--paper-2); border-color: var(--ink); } }
.consent-acts button:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }
.foot .copy .cookie-choices { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pricing cards: pickable, one at a time ---------- */
.cards .card { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.card.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 28px 56px -42px rgba(22, 22, 22, 0.5); }
@media (hover: hover) { .card:not(.is-selected):hover { border-color: var(--mute-2); } }
.card-name { padding-right: 36px; }
.card-pick { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: transparent; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.card-pick[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--mint); }
@media (hover: hover) { .card:not(.is-selected):hover .card-pick { border-color: var(--mute-2); } }
.card-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.card:has(.card-pick:focus-visible) { border-color: var(--ink); }
.premium { padding: 11px 14px; gap: 6px; }
.more-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 0 0; margin-top: -4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: 600 14px/1 var(--body); text-align: left; cursor: pointer; }
.more-toggle svg { flex: none; transition: transform .25s ease; }
.more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) { .more-toggle:hover { color: var(--mint-ink); } }
.more-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.card-more { display: grid; gap: 16px; }
.card-more[hidden] { display: none; }
.more-block h4 { margin: 0 0 8px; font: 600 12.5px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--mute-2); }
/* The enterprise band now sits under the plans, so the cards are the first thing below the controls. */
.cards + .custom { margin: 36px 0 0; }
.pricing { padding-top: 40px; }

/* ---------- Laptop heights: plans in view on arrival ---------- */
@media (min-width: 861px) and (max-height: 900px) {
  .price-hero { padding: 112px var(--gutter) 6px; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 56px; }
  .price-hero .display { font-size: clamp(2.2rem, 3.6vw, 3.1rem); max-width: none; white-space: nowrap; }
  .price-hero .lede { font-size: 1rem; max-width: 46ch; margin: 0 0 6px; }
  .price-bar { padding: 10px var(--gutter) 12px; }
  .pricing { padding-top: 24px; }
  .ladder-bar { margin-bottom: 16px; }
  .card { gap: 16px; padding: 24px 24px 22px; }
  .price-bar .price-controls { gap: 8px 8px; }
  .price-bar .liquid:not(.sm) a, .price-bar .liquid:not(.sm) button { padding: 8px 11px; font-size: 13.5px; }
  .price-bar .liquid.sm a, .price-bar .liquid.sm button { padding: 7px 9px; }
  .price-bar .annual { padding: 0 11px 0 7px; }
}