/* The professional homepage (/pro, src/lib/pro.ts). Quiet, like the app and the drawings designers
   already work with: Inter for text, Newsreader for headings only, warm greys, hairline borders,
   small corners. Motion is kept to the hero's before and after (a sweep once, then it waits to be
   dragged) and a short fade as sections arrive; neither plays with reduced motion. Colours are the app's own (src/app/globals.css), so
   the 2D plan, drawn with those variables, follows light and dark mode here as it does there. */
:root {
  --bg: #ffffff; --bg2: #f6f4f0; --card: #ffffff; --fg: #1a1916; --fg2: #5a534c; --fg3: #857d75;
  --line: #ece8e2; --line2: #dcd7cf;
  --btn: #2b2926; --btn-hover: #44403b; --btn-fg: #ffffff;
  --accent: #2b2926; --accent-soft: #f4f2ee; --lamp: #c98a45; --ok: #2e7d4f;
  --shadow: 0 1px 2px rgba(26, 25, 22, .05);
  --r: 8px; --r-sm: 6px;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Newsreader', Georgia, serif;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1c1a; --bg2: #232220; --card: #262522; --fg: #ecebe8; --fg2: #b4aea6; --fg3: #8b857d;
    --line: rgba(236, 235, 232, .09); --line2: rgba(236, 235, 232, .17);
    --btn: #ecebe8; --btn-hover: #ffffff; --btn-fg: #1d1c1a;
    --accent: #ecebe8; --accent-soft: #2a2825; --lamp: #dda463; --ok: #6cc293;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 16px; line-height: 1.6; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2 { margin: 0; font-family: var(--f-display); font-weight: 400; letter-spacing: -.012em; line-height: 1.12; text-wrap: balance; }
h3, h4 { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: -.005em; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.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; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 12px; background: var(--btn); color: var(--btn-fg); border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--fg3); letter-spacing: .01em; margin-bottom: 12px; }
.lede { font-size: 17px; color: var(--fg2); max-width: 62ch; }
.muted { color: var(--fg2); }
.fine { font-size: 13.5px; color: var(--fg3); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--btn); background: var(--btn); color: var(--btn-fg); font: inherit; font-weight: 500; font-size: 14.5px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.ghost { background: var(--card); color: var(--fg); border-color: var(--line2); box-shadow: var(--shadow); }
.btn.ghost:hover { background: var(--bg2); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn.lg { height: 46px; padding: 0 20px; font-size: 15.5px; }

/* Brand (the same mark and wordmark as the app: src/components/Mark.tsx) */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--fg); }
.brand svg { width: 26px; height: 26px; flex: none; }
.wordmark { display: inline-flex; white-space: nowrap; }
.pro-tag { margin-left: -2px; padding: 1px 6px 2px; border: 1px solid var(--line2); border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; color: var(--fg2); }
.wm-i { position: relative; }
.wm-i > span { color: transparent; }
.wm-i::before { content: '\131'; position: absolute; left: 0; }
.wm-i::after { content: ''; position: absolute; left: 50%; top: .29em; width: .19em; height: .19em; border-radius: .035em; transform: translateX(-50%); background: currentColor; opacity: .35; }
.wm-i[data-lit]::after { background: var(--lamp); opacity: 1; }

/* Header */
.hd { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.hd-in { display: flex; align-items: center; gap: 24px; height: 60px; }
.hd-nav { display: flex; gap: 22px; font-size: 14px; color: var(--fg2); }
.hd-nav a, .hd-alt, .hd-signin { text-decoration: none; }
.hd-nav a:hover, .hd-alt:hover, .hd-signin:hover { color: var(--fg); }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--fg2); }
.lang { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-sm); overflow: hidden; font-size: 12.5px; font-weight: 500; }
.lang a { padding: 3px 8px; text-decoration: none; color: var(--fg3); }
.lang a[aria-current] { background: var(--bg2); color: var(--fg); }
@media (max-width: 1060px) { .hd-alt { display: none; } }
@media (max-width: 900px) { .hd-nav { display: none; } }
@media (max-width: 480px) { .hd-signin { display: none; } .hd-in { gap: 12px; } .hd-right { gap: 10px; } }

/* Sections */
.band { padding: 88px 0; border-top: 1px solid var(--line); }
.band.alt { background: var(--bg2); }
.band-head { display: grid; gap: 0; margin-bottom: 40px; max-width: 760px; }
.band-head.row { display: flex; align-items: end; justify-content: space-between; gap: 16px; max-width: none; }
.band h2 { font-size: clamp(30px, 4vw, 42px); }
.band-head .lede { margin-top: 16px; }
.band .small-h { font-family: var(--f-body); font-size: 14px; font-weight: 500; color: var(--fg3); letter-spacing: 0; }
@media (max-width: 760px) { .band { padding: 64px 0; } .band-head { margin-bottom: 28px; } }

/* Hero */
.hero { padding: 72px 0 80px; }
.hero-text { max-width: 820px; margin-bottom: 48px; }
.hero h1 { font-size: clamp(36px, 5.6vw, 62px); }
.hero .lede { margin-top: 22px; font-size: 18px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 14px; }
/* On a wide screen the before and after sits beside the text */
@media (min-width: 1080px) {
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
  .hero-text { margin-bottom: 0; }
  .hero h1 { font-size: clamp(40px, 4vw, 54px); }
}
@media (max-width: 480px) { .ctas .btn { width: 100%; } .hero { padding: 44px 0 56px; } }
/* The heading's lines are fixed (hero.title, split at |), so no browser leaves a short line or a gap;
   its size follows the column so the longest line fills about 98% of it (measured in Chrome; the
   rest is room for other browsers' type). Browsers without container units keep the sizes above and wrap. */
@supports (font-size: 1cqi) {
  .hero-text { container-type: inline-size; }
  .hero h1 > span { display: block; white-space: nowrap; }
  .hero h1 { font-size: min(62px, 8.7cqi); }
  .hero h1:lang(fr) { font-size: min(62px, 8.85cqi); }
}

/* The hero's before and after: the render underneath, the model over it, cut at a divider that is
   dragged either way (pro.js sets --p, 0–100, the model's share). Without the script it stays at 50. */
.ba { position: relative; }
.ba-frame {
  --p: 50; --x: calc(var(--p) * 1%);
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate;
  border-radius: 12px; background: var(--bg2);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -28px rgba(26, 25, 22, .38), 0 8px 18px -12px rgba(26, 25, 22, .18);
  cursor: ew-resize; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) { .ba-frame { box-shadow: 0 0 0 1px var(--line2), 0 24px 60px -24px rgba(0, 0, 0, .7), 0 8px 18px -12px rgba(0, 0, 0, .5); } }
@media (max-width: 640px) { .ba-frame { aspect-ratio: 4 / 3; border-radius: 10px; } }
@media (min-width: 1080px) { .ba-frame { aspect-ratio: 5 / 4; } }
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.is-dragging .ba-frame { cursor: grabbing; }
/* the labels ride on their own picture, so the divider wipes them, and fade as it comes near */
.ba-tag {
  position: absolute; top: 14px; z-index: 1; padding: 5px 11px 6px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em; line-height: 1.2; white-space: nowrap;
  color: #fff; background: rgba(26, 25, 22, .42); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.ba-tag-in { left: 14px; opacity: clamp(0, calc((var(--p) - 14) / 16), 1); color: #1a1916; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(26, 25, 22, .08); }
.ba-tag-out { right: 14px; opacity: clamp(0, calc((86 - var(--p)) / 16), 1); }
/* the divider: a hairline of light with a warm glow while it moves */
.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 2; width: 2px; margin-left: -1px; pointer-events: none;
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 .5px rgba(26, 25, 22, .12), 0 0 14px rgba(255, 214, 160, .35);
  transition: box-shadow .5s ease;
}
.is-moving .ba-line { box-shadow: 0 0 0 .5px rgba(26, 25, 22, .12), 0 0 18px 2px rgba(255, 206, 140, .75), 0 0 46px 6px rgba(221, 164, 99, .35); }
.ba-handle {
  position: absolute; top: 50%; left: var(--x); z-index: 3; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: grid; place-items: center; border-radius: 50%; color: #1a1916; cursor: grab; touch-action: pan-y pinch-zoom;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 18px rgba(26, 25, 22, .28), 0 1px 3px rgba(26, 25, 22, .2);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.ba-handle:hover, .is-dragging .ba-handle { transform: scale(1.08); }
.is-dragging .ba-handle { cursor: grabbing; }
.ba-handle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(26, 25, 22, .55), 0 6px 18px rgba(26, 25, 22, .28); }
.ba-handle svg { width: 22px; height: 22px; }
/* until someone touches it: a soft ring breathes out of the handle, and a small "drag" note waits below */
.ba-handle::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); opacity: 0; pointer-events: none; }
.ba-hint {
  position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translate(-50%, 6px); padding: 6px 12px 7px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: #fff; pointer-events: none;
  background: rgba(26, 25, 22, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ba.is-ready .ba-hint { opacity: 1; transform: translate(-50%, 0); }
.ba.is-touched .ba-hint { opacity: 0; transform: translate(-50%, 6px); }
@media (prefers-reduced-motion: no-preference) {
  .ba.is-idle .ba-handle::after { animation: ba-ring 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
}
@media (prefers-reduced-motion: reduce) { .ba-hint, .ba-handle, .ba-line { transition: none; } }
@keyframes ba-ring {
  0% { opacity: .9; box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); }
  70%, 100% { opacity: 0; box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}
.ba figcaption { margin-top: 14px; font-size: 14px; color: var(--fg2); }

/* Before and after, side by side */
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair-cell { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--bg2); }
.pair-cell img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 3px 9px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: #1a1916; font-size: 12.5px; font-weight: 500; }
.pair figcaption { margin-top: 12px; font-size: 14px; color: var(--fg2); }
.ask-l { color: var(--fg3); margin-right: 4px; }
.pairs { display: grid; gap: 48px; }
@media (max-width: 640px) { .pair-row { grid-template-columns: 1fr; } }

/* What goes in: the tools by name in the heading's serif, the formats that aren't software in grey italic */
.inputs { padding: 72px 0; text-align: center; }
.inputs h2 { max-width: 760px; margin: 0 auto; }
.marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; max-width: 860px; margin: 22px auto 20px; font-family: var(--f-display); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.4; color: var(--fg); }
.marks .other { color: var(--fg2); font-style: italic; }
@media (max-width: 560px) { .inputs { padding: 56px 0; } .marks { gap: 4px 20px; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line2); counter-reset: s; }
.steps li { padding: 20px 24px 0 0; display: grid; gap: 10px; align-content: start; }
.steps .n { font-size: 13px; font-weight: 500; color: var(--fg3); font-variant-numeric: tabular-nums; }
.steps p { color: var(--fg2); font-size: 15px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 28px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .steps li { padding-right: 0; } }

/* Text beside a picture */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.split.rev > :first-child { order: 2; }
.split h2 { margin-bottom: 18px; }
.split .lede { margin-bottom: 22px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .split.rev > :first-child { order: 0; } }
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 26px; color: var(--fg2); font-size: 15.5px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 1.6px solid var(--fg); border-bottom: 1.6px solid var(--fg); transform: rotate(-45deg); }
.shot img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); aspect-ratio: 3 / 2; object-fit: cover; }
figcaption { font-size: 13.5px; color: var(--fg3); margin-top: 10px; }
.defs { display: grid; gap: 22px; }
.defs dt, .grid4 dt { font-weight: 600; margin-bottom: 4px; }
.defs dd, .grid4 dd { color: var(--fg2); font-size: 15px; }

/* The 2D plan sheet */
.sheet-in { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.sheet-in svg { width: 100%; height: auto; }

.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px) { .grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grid4 { grid-template-columns: 1fr; gap: 22px; } }

/* What clients say (src/lib/testimonials.ts): the average beside the heading, then a grid of cards;
   on a phone the cards are a row that scrolls sideways, edge to edge. Stars are SVG, the lit layer
   cut to the value (--lit). */
.tm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; max-width: none; }
.tm-sum { display: grid; gap: 4px; justify-items: start; }
.tm-score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.tm-avg { font-family: var(--f-display); font-size: 44px; line-height: 1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.tm-of { font-size: 15px; color: var(--fg2); }
.tm-note { font-size: 13px; color: var(--fg3); }
.tm-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tm-list:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: var(--r); }
.tm-card { min-width: 0; }
.tm-card figure { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.tm-card blockquote { margin: 0; flex: 1; font-family: var(--f-display); font-size: 20px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.tm-card figcaption { display: grid; gap: 1px; font-size: 14px; color: var(--fg2); }
.tm-card figcaption b { color: var(--fg); font-weight: 600; }
.tm-card.is-sample figure { border-style: dashed; border-color: var(--line2); }
.tm-stars { --star: #a86b26; position: relative; display: inline-block; flex: none; width: 92px; height: 17px; }
.tm-score .tm-stars { width: 108px; height: 20px; }
.tm-stars svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-st-off { fill: var(--line2); }
.tm-st-on { fill: var(--star); clip-path: inset(0 calc(100% - var(--lit, 100%)) 0 0); }
@media (prefers-color-scheme: dark) { .tm-stars { --star: var(--lamp); } }
@media (forced-colors: active) { .tm-st-on { fill: CanvasText; } .tm-st-off { fill: GrayText; } }
.tm-sample { margin: 0 0 28px; padding: 10px 14px; border: 1px dashed var(--lamp); border-radius: var(--r-sm); background: color-mix(in srgb, var(--lamp) 12%, transparent); font-size: 14px; font-weight: 500; }
.sample-note { margin: -24px 0 20px; font-size: 13px; color: var(--lamp); }
@media (max-width: 960px) { .tm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tm-avg { font-size: 38px; }
  .tm-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut)); padding: 0 var(--gut-r) 6px var(--gut); scroll-padding-inline: var(--gut) var(--gut-r); }
  .tm-list::-webkit-scrollbar { display: none; }
  .tm-card { scroll-snap-align: start; }
  .tm-card figure { padding: 20px; }
  .tm-card blockquote { font-size: 18.5px; }
}

/* Trusted by */
.logos { padding: 48px 0; }
.band .lg-title { font-family: var(--f-body); font-size: 14px; font-weight: 500; color: var(--fg3); margin-bottom: 20px; }
.logos .sample-note { margin: -8px 0 16px; }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.lg-row img { height: 32px; width: auto; filter: grayscale(1); opacity: .75; }
@media (prefers-color-scheme: dark) { .lg-row img { filter: grayscale(1) invert(1); } }
.lg-sample { width: 120px; height: 32px; border: 1px dashed var(--line2); border-radius: 4px; }

/* Plans */
.toggles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg); }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 4px; font: inherit; font-size: 14px; font-weight: 500; color: var(--fg2); cursor: pointer; }
.seg button[aria-pressed='true'] { background: var(--card); color: var(--fg); box-shadow: var(--shadow), 0 0 0 1px var(--line2); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 56px; }
@media (max-width: 1060px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.plan.feat { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg), var(--shadow); }
.plan h3 { font-size: 17px; }
.plan .muted { font-size: 14px; }
.badge { position: absolute; top: -11px; left: 20px; padding: 2px 9px; border-radius: 999px; background: var(--btn); color: var(--btn-fg); font-size: 12px; font-weight: 500; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.amt { font-family: var(--f-display); font-size: 36px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.per, .billed { font-size: 13.5px; color: var(--fg3); }
.billed { flex-basis: 100%; }
.plan .ticks li { font-size: 14px; }
.plan .btn { width: 100%; }
/* The pricing table (src/lib/plan-table.ts): one framed table, a column per plan, rows that read
   across (subgrid), a tinted band of what each plan includes, and the featured plan lifted out of the
   frame with a banner. Below desktop width the columns become cards. */
.ptable { --accent: var(--lamp); --tint: color-mix(in srgb, var(--lamp) 10%, var(--card)); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); margin: 46px 0 56px; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; }
.t-col { position: relative; display: grid; grid-row: span var(--rows); grid-template-rows: subgrid; border-left: 1px solid var(--line); }
.t-col:first-child { border-left: 0; }
.t-col > * { min-width: 0; }
.t-head { display: grid; align-content: start; gap: 4px; padding: 22px 20px 0; }
.t-head h3 { font-size: 17px; font-weight: 700; }
.t-head p { color: var(--fg2); font-size: 14px; line-height: 1.45; }
.t-price { display: grid; gap: 6px; padding-top: 14px; }
.t-per [hidden] { display: none; }
.t-amts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.t-amt { font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-amt.t-word { font-size: 28px; }
/* yearly: the monthly price struck through (the slash draws in), and the discount at the top right */
.t-was { position: relative; align-self: center; color: var(--fg3); font-size: 21px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.t-was::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 2px; background: var(--accent); transform: rotate(-12deg) scaleX(0); transform-origin: left center; animation: t-slash .45s .1s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes t-slash { to { transform: rotate(-12deg) scaleX(1); } }
.t-off { position: absolute; top: 18px; right: 16px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #1b1a17; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; animation: t-pop .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes t-pop { from { opacity: 0; transform: scale(.85); } }
.t-col:has(.t-off) .t-head h3 { padding-right: 62px; }
@media (prefers-reduced-motion: reduce) { .t-was::after { animation: none; transform: rotate(-12deg); } .t-off { animation: none; } }
.ptable:not([data-bill="y"]) .t-was, .ptable:not([data-bill="y"]) .t-off { display: none; }
.ptable:not([data-bill="y"]) .t-col .t-head h3 { padding-right: 0; }
.t-per { color: var(--fg2); font-size: 13.5px; line-height: 1.4; }
.t-cta { display: flex; align-items: center; justify-content: center; min-height: 46px; margin: 18px 20px 6px; padding: 0 12px; border: 1.5px solid var(--fg); border-radius: 6px; color: var(--fg); font-size: 13.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; text-align: center; text-decoration: none; transition: background .2s, color .2s; }
.t-cta:hover { background: var(--fg); color: var(--bg); }
.t-col.feat .t-cta { background: var(--btn); border-color: var(--btn); color: var(--btn-fg); }
.t-col.feat .t-cta:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.t-list { display: contents; }
.t-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 20px; font-size: 14px; line-height: 1.4; }
.t-list li > span:not(.t-info) { flex: 1; }
.t-top:first-child { padding-top: 16px; }
.t-list li.t-credit { flex-direction: column; gap: 3px; padding-top: 16px; padding-bottom: 10px; }
.t-cr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 0; }
.t-cr b { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-cr span { color: var(--fg2); font-size: 14px; font-weight: 500; }
.t-out { margin: 0; color: var(--fg); font-size: 13.5px; line-height: 1.4; }
.t-more { align-self: flex-start; margin: 4px 0 0; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--fg); font-size: 12px; font-weight: 650; line-height: 1.35; }
.t-ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--fg); }
.t-band { background: var(--tint); }
.t-band-h { padding-top: 16px !important; font-weight: 600; }
.t-spark { color: var(--accent); }
.t-band.no, .t-band.no .t-ic { color: var(--fg3); }
.t-end { padding: 8px 0 !important; }
.t-col:first-child .t-end { border-bottom-left-radius: 11px; }
.t-col:last-child .t-end { border-bottom-right-radius: 11px; }
.t-info { position: relative; flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 2px; border: 1px solid var(--fg3); border-radius: 50%; color: var(--fg3); font-size: 10px; font-weight: 700; cursor: help; }
.t-info::after { content: attr(data-tip); position: absolute; z-index: 5; right: -6px; bottom: calc(100% + 8px); width: 240px; padding: 10px 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.t-info:hover::after, .t-info:focus-visible::after { opacity: 1; transform: none; }
.t-col.feat { z-index: 1; margin: 0 -1px -14px; border: 2px solid var(--accent); border-radius: 0 0 12px 12px; background: var(--card); box-shadow: 0 18px 40px -24px rgba(26, 25, 22, .35); }
.t-col.feat .t-end { padding-bottom: 22px !important; border-radius: 0 0 10px 10px; }
.t-head .t-flag { position: absolute; left: -2px; right: -2px; bottom: calc(100% + 2px); display: grid; place-items: center; height: 32px; margin: 0; border-radius: 12px 12px 0 0; background: var(--accent); color: #1a1916; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 1100px) {
  .ptable { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 14px; background: none; border: 0; }
  .ptable .t-col { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .ptable .t-col.feat { border: 2px solid var(--accent); border-radius: 0 0 12px 12px; }
  .ptable .t-list { display: block; margin-top: auto; }
  .ptable .t-end { border-radius: 0 0 11px 11px; }
  .ptable .t-col.feat .t-end { padding-bottom: 8px !important; }
}
@media (max-width: 640px) {
  .ptable { grid-template-columns: minmax(0, 1fr); }
  .t-info::after { right: -4px; width: min(240px, 70vw); }
}
.cmp-title { font-family: var(--f-display); font-weight: 400; font-size: 26px; margin-bottom: 18px; }
.foot { margin-top: 18px; }
.more { margin-top: 10px; font-size: 14.5px; }
.more a { text-underline-offset: 3px; text-decoration-color: var(--line2); }
.more a:hover { text-decoration-color: currentColor; }

/* The comparison chart (src/components/CompareChart.tsx), as the app styles it */
.cmp { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); font-size: 14.5px; }
.cmp-row { display: grid; grid-template-columns: minmax(170px, 1.7fr) repeat(var(--cols), minmax(0, 1fr)); align-items: start; border-top: 1px solid var(--line); }
.cmp-row > * { padding: 11px 12px; min-width: 0; }
.cmp-row > [role='cell'] { text-align: center; color: var(--fg2); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cmp-head { border-top: 0; }
.cmp-head > [role='columnheader'] { text-align: center; font-size: 13px; font-weight: 600; color: var(--fg); overflow-wrap: break-word; }
.cmp-label summary { cursor: pointer; list-style: none; font-weight: 500; color: var(--fg); }
.cmp-label summary::-webkit-details-marker { display: none; }
.cmp-label summary::after { content: '+'; margin-left: 6px; color: var(--fg3); font-weight: 400; }
.cmp-label details[open] summary::after { content: '−'; }
.cmp-label p { margin-top: 4px; font-size: 13px; color: var(--fg2); line-height: 1.45; }
.cmp-yes { color: var(--ok); vertical-align: -3px; display: inline-block; }
.cmp-no { color: var(--fg3); }
@media (max-width: 640px) {
  .cmp { font-size: 13.5px; }
  .cmp-row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .cmp-row > * { padding: 8px 4px; }
  .cmp-row > .cmp-label { grid-column: 1 / -1; padding: 10px 12px 0; }
  .cmp-head > .cmp-corner { display: none; }
  .cmp-head > [role='columnheader'] { font-size: 12px; padding: 10px 2px; }
}

/* Questions */
.faq-wrap { align-items: start; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }
.faq details { border-top: 1px solid var(--line2); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line2); }
.faq summary { cursor: pointer; list-style: none; font-weight: 500; font-size: 16.5px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--fg3); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin-top: 10px; color: var(--fg2); font-size: 15.5px; max-width: 64ch; }

/* Last call */
.end { text-align: center; }
.end .wrap { display: grid; justify-items: center; }
.end .lede { margin-top: 14px; }
.end .ctas { justify-content: center; }

/* Footer */
.ft { border-top: 1px solid var(--line); padding: 56px 0 32px; background: var(--bg2); font-size: 14px; color: var(--fg2); }
.ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .ft-grid { grid-template-columns: 1fr; } }
.ft-brand p { margin-top: 12px; max-width: 34ch; }
.ft h4 { font-size: 13px; color: var(--fg); margin-bottom: 10px; }
.ft ul { display: grid; gap: 6px; }
.ft ul a, .ft-alt a { text-decoration: none; }
.ft ul a:hover, .ft-alt a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.ft-alt { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.ft-legal { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12.5px; color: var(--fg3); }

/* A short fade as sections arrive; none with reduced motion, or without the script */
@media (prefers-reduced-motion: no-preference) {
  .js .band:not(.inputs) > .wrap { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
  .js .band.seen > .wrap { opacity: 1; transform: none; }
}