/* ============================================================
   Claybase, editorial light, phone first.
   Written mobile first: the base rules are the 390 px page, and the
   editorial desktop treatment is added from 760 px and 1060 px up.
   Fonts self hosted. No external requests, no tracking, no cookies.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens: light is the bare :root ---------- */
:root {
  color-scheme: light;

  --sand: #f4efe9;
  --slate: #1f2a37;
  --clay: #b4573a;

  --bg: #f4efe9;
  --bg-deep: #ece5dc;
  --surface: #fbf8f5;
  --plate: #ffffff;
  --ink: #1f2a37;
  --muted: #5a6573;          /* 5.18 on sand */
  --clay-ink: #9c4c32;       /* 5.26 on sand, 5.68 on surface */
  --clay-fill: #b4573a;      /* white on it = 4.81 */
  --on-clay: #ffffff;
  --mark: #b4573a;           /* the mark is clay on light grounds only */
  --rule: #e2d9ce;
  --rule-strong: #cfc3b4;
  --bar: #f4efe9;            /* the thumb bar: sand in light */
  --bar-line: #d9cec1;
  --shell: #1f2a37;          /* the bezel around a genuine phone capture */
  --shell-edge: #33404f;
  --shadow: 0 1px 2px rgba(31, 42, 55, .05), 0 18px 44px -26px rgba(31, 42, 55, .30);
  --shadow-lift: 0 2px 4px rgba(31, 42, 55, .06), 0 34px 70px -34px rgba(31, 42, 55, .42);
  --bar-shadow: 0 -1px 0 rgba(31, 42, 55, .06), 0 -14px 30px -22px rgba(31, 42, 55, .5);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(18px, 4.6vw, 56px);
  --band: clamp(52px, 9.5vw, 148px);
  --max: 1280px;
  --measure: 62ch;
  --barh: 72px;              /* height reserved for the fixed thumb bar */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #151d26;
    --bg-deep: #101821;
    --surface: #1f2a37;
    --plate: #1b2530;
    --ink: #f4efe9;
    --muted: #9ba7b4;        /* 6.94 on bg */
    --clay-ink: #e0906e;     /* 6.79 on bg, 5.80 on surface */
    --mark: #f4efe9;         /* never clay on a dark surface */
    --rule: #2c3847;
    --rule-strong: #3b4857;
    --bar: #1f2a37;          /* the thumb bar: slate in dark */
    --bar-line: #33404f;
    --shell: #0a1017;
    --shell-edge: #46545f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -26px rgba(0, 0, 0, .8);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 34px 70px -34px rgba(0, 0, 0, .9);
    --bar-shadow: 0 -1px 0 rgba(0, 0, 0, .5), 0 -14px 30px -22px rgba(0, 0, 0, .9);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151d26;
  --bg-deep: #101821;
  --surface: #1f2a37;
  --plate: #1b2530;
  --ink: #f4efe9;
  --muted: #9ba7b4;
  --clay-ink: #e0906e;
  --mark: #f4efe9;
  --rule: #2c3847;
  --rule-strong: #3b4857;
  --bar: #1f2a37;
  --bar-line: #33404f;
  --shell: #0a1017;
  --shell-edge: #46545f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -26px rgba(0, 0, 0, .8);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 34px 70px -34px rgba(0, 0, 0, .9);
  --bar-shadow: 0 -1px 0 rgba(0, 0, 0, .5), 0 -14px 30px -22px rgba(0, 0, 0, .9);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--barh) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 760px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--clay-ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(180, 87, 58, .22); }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 90;
  background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: 999px; font-size: 1rem; font-weight: 500;
  text-decoration: none; transition: top .18s ease;
}
.skip:focus { top: 12px; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -.022em;
  line-height: 1.02;
  font-size: clamp(2.45rem, 10.2vw, 5.1rem);
  text-wrap: balance;
}
h2.head {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -.018em;
  line-height: 1.1;
  font-size: clamp(1.75rem, 6.6vw, 3.15rem);
  text-wrap: balance;
}
.lead { font-size: 1.0625rem; line-height: 1.55; color: var(--muted); max-width: 34em; }
.body { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: var(--measure); }
.body strong { color: var(--ink); font-weight: 500; }
.eyebrow {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.num {
  font-family: var(--serif); font-weight: 400; font-size: .8125rem;
  letter-spacing: .04em; color: var(--clay-ink); font-variant-numeric: tabular-nums;
}
@media (min-width: 760px) {
  body { font-size: 16px; line-height: 1.65; }
  .display { font-size: clamp(2.9rem, 6.1vw, 5.1rem); line-height: .99; }
  h2.head { font-size: clamp(1.95rem, 3.9vw, 3.15rem); line-height: 1.06; }
  .lead { font-size: clamp(1.075rem, 1.45vw, 1.3rem); }
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.top[data-stuck="true"] { border-bottom-color: var(--rule); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.brand img { width: 112px; height: auto; }
/* at the very top of the page the hero carries the wordmark, so the header
   holds it back. Without JavaScript it simply stays visible. */
.brand { transition: opacity .22s ease; }
.top[data-hero="true"] .brand { opacity: 0; pointer-events: none; }
.brand .on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .on-light { display: none; }
  :root:not([data-theme="light"]) .brand .on-dark { display: block; }
}
:root[data-theme="dark"] .brand .on-light { display: none; }
:root[data-theme="dark"] .brand .on-dark { display: block; }
.top__acts { display: none; }
@media (min-width: 760px) {
  .top__in { min-height: 68px; }
  .brand img { width: 132px; }
  .top__acts { display: flex; align-items: center; gap: 8px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 500; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; }
.btn:active { transform: translateY(1px); }
@media (hover: hover) {
  .btn--solid:hover { background: color-mix(in srgb, var(--ink) 86%, var(--clay)); }
  .btn--ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
}
@media (min-width: 760px) { .btn { min-height: 44px; font-size: .9375rem; padding: 0 20px; } }

/* ---------- the thumb bar: two actions, phones only ---------- */
.thumb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bar);
  border-top: 1px solid var(--bar-line);
  box-shadow: var(--bar-shadow);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
}
.thumb__in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; max-width: 520px; margin-inline: auto; }
.thumb .btn { min-height: 48px; font-size: 1rem; padding: 0 12px; }
@media (min-width: 760px) { .thumb { display: none; } }

/* ---------- hero ---------- */
.hero { padding-top: 10px; padding-bottom: 26px; }
.hero__copy { display: grid; gap: 14px; justify-items: start; }
.hero__word { width: 168px; height: auto; }
.hero__word.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__word.on-light { display: none; }
  :root:not([data-theme="light"]) .hero__word.on-dark { display: block; }
}
:root[data-theme="dark"] .hero__word.on-light { display: none; }
:root[data-theme="dark"] .hero__word.on-dark { display: block; }
.hero .display { margin-top: 4px; }
.hero__line { font-size: 1.0625rem; line-height: 1.5; color: var(--muted); max-width: 30ch; }
.hero__cta { display: none; }
.hero__shot { margin-top: 22px; }

/* The hero screen is the same browser plate as every other screen on the page,
   at the full width of the column. The dashboard is a desktop screen, so a
   phone bezel around it flattered nothing and cost the type its legibility:
   at 236 px the admin's own 13 px type landed under 7 px. */
.shell { margin: 0; }
.shell__frame {
  width: 100%; margin-inline: auto;
  background: var(--plate); border: 1px solid var(--rule);
  border-radius: 14px; padding: 0;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.shell__view { overflow: hidden; background: var(--plate); }
.shell__view img { width: 100%; height: auto; }
.shell__bar { display: none; }
.shell figcaption {
  margin-top: 16px; font-size: 1rem; line-height: 1.5; color: var(--muted);
  text-align: center; max-width: 34ch; margin-inline: auto;
}

.hero__facts { display: none; }

/* from 760 the hero returns to the editorial two column setting and the
   phone shell becomes the annotated browser plate */
@media (min-width: 760px) {
  .hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 104px); }
  .hero__grid { display: grid; gap: clamp(36px, 4vw, 56px); align-items: center; }
  .hero__copy { max-width: 40rem; gap: 0; }
  .hero__word { display: none; }
  .hero .display { margin-top: 0; }
  .hero__line { margin-top: 22px; font-size: clamp(1.075rem, 1.45vw, 1.3rem); max-width: 34em; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .hero__facts {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule);
    font-size: .8125rem; color: var(--muted);
  }
  .hero__facts li { display: flex; align-items: center; gap: 8px; }
  .hero__facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rule-strong); flex: none; }
  .hero__shot { margin-top: 0; }
  .shell__frame { width: auto; margin-inline: 0; }
  .shell__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px; height: 34px;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--plate) 92%, var(--bg));
  }
  .shell figcaption { display: none; }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, .93fr) minmax(0, 1.12fr); gap: clamp(30px, 3.2vw, 50px); }
  .hero__shot { width: calc(100% + max(0px, (100vw - var(--max)) / 2) + var(--gutter)); }
  /* crop past the app sidebar so the dashboard itself reads, not a thumbnail of it */
  .hero .shell__view { aspect-ratio: 1280 / 690; overflow: hidden; }
  .hero .shell__view img { width: 130%; max-width: none; margin-left: -13%; }
}

/* ---------- jump chips, straight under the hero ---------- */
.jump { padding-bottom: 8px; }
.jump__t {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.jump ul { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  font-size: 1rem; font-weight: 500; text-decoration: none; color: var(--ink);
  background: var(--surface);
}
@media (hover: hover) { .jump a:hover { border-color: var(--clay-fill); color: var(--clay-ink); } }
@media (min-width: 760px) { .jump { display: none; } }

/* ---------- page grid with a sticky index on wide screens ---------- */
.page { display: grid; grid-template-columns: minmax(0, 1fr); }
.rail { display: none; }
@media (min-width: 1060px) {
  .page { grid-template-columns: 178px minmax(0, 1fr); gap: clamp(40px, 4vw, 72px); align-items: start; }
  .rail { display: block; position: sticky; top: 108px; padding-top: calc(var(--band) + 4px); }
  .rail__t {
    font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-bottom: 14px;
  }
  .rail ol { border-left: 1px solid var(--rule); }
  .rail a {
    display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: baseline;
    padding: 7px 0 7px 14px; margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: .8125rem; line-height: 1.3; color: var(--muted);
    text-decoration: none; transition: color .2s ease, border-color .2s ease;
  }
  .rail a span:first-child { font-variant-numeric: tabular-nums; font-size: .6875rem; opacity: .7; }
  .rail a:hover { color: var(--ink); }
  .rail a[aria-current="true"] { color: var(--clay-ink); border-left-color: var(--clay-fill); }
  .rail a[aria-current="true"] span:first-child { opacity: 1; }
}

/* ---------- bands ---------- */
.band { padding-block: var(--band); border-top: 1px solid var(--rule); }
.band:first-child { border-top: 0; padding-top: clamp(30px, 6vw, 148px); }
.band__head { display: grid; gap: 12px; margin-bottom: 22px; }
.band__kicker { display: flex; align-items: center; gap: 12px; }
.band__kicker::after { content: ""; height: 1px; flex: 1; background: var(--rule); max-width: 120px; }
.band__intro { display: grid; gap: 12px; }
@media (min-width: 760px) { .band__head { gap: 18px; margin-bottom: clamp(34px, 4vw, 56px); } }
@media (min-width: 820px) {
  .band__intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
}

/* ---------- plate: a real screen, cropped for the phone ---------- */
.plate { margin: 0; }
.plate__frame {
  position: relative;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.plate__bar { display: none; }
.plate__view { position: relative; }
.plate__view img { width: 100%; height: auto; }
.plate figcaption { margin-top: 14px; font-size: 1rem; line-height: 1.5; color: var(--muted); max-width: 56ch; }
@media (min-width: 760px) {
  .plate__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px; height: 34px;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--plate) 92%, var(--bg));
  }
  .plate__dots { display: flex; gap: 5px; flex: none; }
  .plate__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
  .plate__tag {
    font-size: .6875rem; letter-spacing: .06em; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .plate figcaption { font-size: .8125rem; line-height: 1.55; }
}

/* a genuine phone capture, shown in a phone shell at every width */
.plate--phone { max-width: 288px; margin-inline: auto; }
.plate--phone .plate__frame { border-radius: 30px; padding: 8px; background: var(--shell); border-color: var(--shell-edge); }
.plate--phone .plate__view { border-radius: 23px; overflow: hidden; }
.plate--phone figcaption { text-align: center; max-width: 34ch; margin-inline: auto; }
@media (min-width: 700px) { .plate--phone { max-width: 300px; } }

/* ---------- callouts ---------- */
/* On phones both kinds read as a short list under the screen. From 760 the
   annotated set lifts off the screen and becomes clay pills over the UI. */
.notes, .callouts { display: grid; gap: 10px; }
.notes {
  padding: 14px 16px;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--plate) 92%, var(--bg));
}
.callouts { margin-top: 16px; }
.note, .callout {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 1rem; line-height: 1.4; color: var(--ink);
}
.note b, .callout b { font-weight: 500; display: block; }
.callout span { display: block; color: var(--muted); font-weight: 400; font-size: 1rem; margin-top: 3px; line-height: 1.5; }
.note::before, .callout::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay-fill); flex: none; transform: translateY(-1px);
}
.callouts--split { gap: 16px; }

@media (min-width: 760px) {
  .notes {
    position: absolute; inset: 34px 0 0 0;
    display: block; padding: 0; margin: 0;
    border-top: 0; background: none; pointer-events: none;
  }
  .note {
    position: absolute; left: var(--x); top: var(--y);
    display: flex; align-items: center; gap: 0;
    font-size: .75rem; line-height: 1;
  }
  .note::before {
    width: 9px; height: 9px; margin: 0; transform: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--clay-fill) 22%, transparent);
  }
  .note::after { content: ""; width: var(--len, 34px); height: 1px; background: var(--clay-fill); flex: none; }
  .note b {
    background: var(--clay-fill); color: var(--on-clay);
    padding: 7px 12px; border-radius: 999px; white-space: nowrap;
    letter-spacing: -.005em;
    box-shadow: 0 6px 18px -8px rgba(31, 42, 55, .55);
  }
  .note--left { flex-direction: row-reverse; transform: translate(-100%, -50%); }
  .note--right { transform: translateY(-50%); }
  .is-seen .note { animation: pill .55s cubic-bezier(.22,.61,.36,1) both; }
  .is-seen .note:nth-child(2) { animation-delay: .12s; }
  .is-seen .note:nth-child(3) { animation-delay: .24s; }
  .callout { font-size: .9375rem; }
  .callout span { font-size: .875rem; line-height: 1.45; }
  .callouts--split { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 34px; margin-top: 28px; }
}
@keyframes pill { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-seen .note { animation: none; } }

/* the caption under an annotated plate says what the callouts do not, so it
   stays on a phone too: it is the only line explaining, for instance, why the
   quotes screen is pink when the rest of the page is clay */

/* Where each callout pins itself on its screen, above 760 px. These were
   inline style attributes; they live here so the deployed Content-Security-
   Policy can keep style-src 'self' with no inline allowance at all. */
.n-ai-1 { --x: 47.6%; --y: 32.5%; --len: 26px }
.n-ai-2 { --x: 48.8%; --y: 55%;   --len: 26px }
.n-ai-3 { --x: 76.8%; --y: 84%;   --len: 26px }
.n-leads-1 { --x: 59.6%; --y: 25%; --len: 30px }
.n-leads-2 { --x: 77%;   --y: 38%; --len: 26px }
.n-leads-3 { --x: 66.2%; --y: 51%; --len: 30px }
.n-quotes-1 { --x: 51%; --y: 41%;   --len: 30px }
.n-quotes-2 { --x: 55%; --y: 79.3%; --len: 26px }
.n-quotes-3 { --x: 82%; --y: 28%;   --len: 30px }
.n-jobs-1 { --x: 24%; --y: 60.5%; --len: 26px }
.n-jobs-2 { --x: 41%; --y: 51.8%; --len: 26px }
.n-jobs-3 { --x: 81%; --y: 57%;   --len: 30px }
.n-money-1 { --x: 39%; --y: 14.4%; --len: 26px }
.n-money-2 { --x: 61%; --y: 20.4%; --len: 26px }
.n-money-3 { --x: 84%; --y: 77%;   --len: 30px }
.n-phone-1 { --x: 66%;   --y: 47%;   --len: 30px }
.n-phone-2 { --x: 70%;   --y: 68%;   --len: 26px }
.n-phone-3 { --x: 92.5%; --y: 33.5%; --len: 26px }
.n-inbox-1 { --x: 8%;    --y: 40.5%; --len: 26px }
.n-inbox-2 { --x: 24.6%; --y: 37%;   --len: 26px }
.n-inbox-3 { --x: 72%;   --y: 42.6%; --len: 30px }
.n-ws-1 { --x: 45%;   --y: 48.5%; --len: 30px }
.n-ws-2 { --x: 41.5%; --y: 90.5%; --len: 26px }
.n-ws-3 { --x: 85%;   --y: 23.5%; --len: 26px }

/* ---------- small grids ---------- */
.mt { margin-top: clamp(22px, 3vw, 42px); }
.grid { display: grid; gap: clamp(20px, 2.4vw, 30px); margin-top: clamp(22px, 3vw, 42px); }
.grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pair { display: grid; gap: clamp(18px, 3vw, 40px); align-items: start; }
@media (min-width: 900px) { .pair { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

/* ---------- the AI band ---------- */
.ai { position: relative; }
.ai .band__kicker::after { background: var(--clay-fill); opacity: .5; }
.ai__rule {
  position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--clay-fill) 12%, var(--clay-fill) 88%, transparent);
  opacity: .5; display: none;
}
@media (min-width: 1060px) { .ai__rule { display: block; } }

.demo {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.demo__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--rule);
  font-size: 1rem; line-height: 1.5; color: var(--muted);
}
.demo__tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--clay-fill); color: var(--on-clay);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.demo__body { display: grid; gap: 0; }
@media (min-width: 880px) { .demo__body { grid-template-columns: minmax(260px, .78fr) minmax(0, 1fr); } }

.enq { padding: 18px 14px; border-bottom: 1px solid var(--rule); background: var(--bg); }
@media (min-width: 880px) { .enq { padding: 22px; border-bottom: 0; border-right: 1px solid var(--rule); } }
.enq__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.enq__src { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.enq__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay-fill); flex: none; }
.enq__card {
  background: var(--plate); border: 1px solid var(--rule); border-radius: 10px;
  padding: 14px; font-size: 1rem; line-height: 1.55; min-height: 132px;
}
@media (min-width: 880px) { .enq__card { min-height: 178px; font-size: .875rem; line-height: 1.6; } }
.enq__line { color: var(--muted); }
.caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 1px;
  background: var(--clay-fill); vertical-align: -2px; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

.panel__h {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px;
  background: var(--clay-fill); color: var(--on-clay);
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.panel__h svg { width: 14px; height: 14px; }
.panel__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cell { padding: 14px 16px; border-top: 1px solid var(--rule); }
@media (min-width: 560px) { .cell { min-height: 118px; } .cell:nth-child(odd) { border-right: 1px solid var(--rule); } }
.cell__k {
  display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--clay-ink); margin-bottom: 7px;
}
.cell__v { font-size: 1rem; line-height: 1.45; color: var(--ink); }
.cell__v em { font-style: normal; color: var(--muted); display: block; margin-top: 5px; font-size: 1rem; line-height: 1.5; }
@media (min-width: 760px) {
  .cell__k { font-size: .625rem; }
  .cell__flag { font-size: .875rem; }
  .demo__label { font-size: .875rem; }
}
@media (min-width: 880px) { .cell__v { font-size: .875rem; } .cell__v em { font-size: .8125rem; line-height: 1.45; } }
.cell__flag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--clay-fill) 14%, transparent);
  color: var(--clay-ink); font-weight: 600; font-size: 1rem;
}
.cell[data-state="idle"] .cell__v, .cell[data-state="load"] .cell__v { opacity: 0; }
.cell[data-state="idle"] .cell__k { opacity: .35; }
.cell[data-state="load"] .cell__k { opacity: .55; }
.cell__skel { display: none; }
.cell[data-state="load"] .cell__skel { display: grid; gap: 7px; }
.cell__skel i {
  display: block; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--rule), color-mix(in srgb, var(--rule) 45%, transparent), var(--rule));
  background-size: 220% 100%; animation: sweep 1.1s linear infinite;
}
.cell__skel i:nth-child(2) { width: 74%; }
.cell__skel i:nth-child(3) { width: 52%; }
@keyframes sweep { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .cell__skel i { animation: none; } }
.cell[data-state="done"] .cell__v { opacity: 1; transition: opacity .45s ease; }

.panel__act {
  display: grid; gap: 6px;
  padding: 14px 16px; border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--clay-fill) 8%, transparent);
}
.panel__act .cell__k { margin: 0; }
.panel__act p { font-size: 1rem; color: var(--ink); margin: 0; transition: opacity .45s ease; }
.panel__act[data-state="idle"] p, .panel__act[data-state="idle"] .cell__k { opacity: 0; }
@media (min-width: 880px) {
  .panel__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .panel__act p { font-size: .875rem; }
}
.panel__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-top: 1px solid var(--rule);
  font-size: 1rem; color: var(--muted);
}
.replay {
  display: none; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: transparent;
  font-size: .9375rem; font-weight: 500; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
@media (hover: hover) { .replay:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); } }
.replay svg { width: 14px; height: 14px; }
@media (min-width: 760px) {
  .panel__foot { font-size: .75rem; }
  .replay { display: inline-flex; min-height: 34px; font-size: .75rem; padding: 0 14px; }
}

.rule-card {
  margin-top: clamp(22px, 3vw, 40px);
  border: 1px solid var(--clay-fill);
  border-radius: 14px;
  padding: clamp(18px, 3vw, 34px);
  background: color-mix(in srgb, var(--clay-fill) 6%, transparent);
  display: grid; gap: 10px;
}
.rule-card .eyebrow { color: var(--clay-ink); }
.rule-card p { margin: 0; font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; color: var(--ink); }
.rule-card p span { color: var(--muted); }

/* ---------- trust ---------- */
.trust { display: grid; gap: 0; }
.trust li { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--rule); }
@media (min-width: 760px) {
  .trust li { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(20px, 2.4vw, 28px) 0; }
}
.trust h3 { font-size: 1.0625rem; font-weight: 500; margin: 0; font-family: var(--serif); }
.trust p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 54ch; }
@media (min-width: 760px) { .trust p { font-size: .9375rem; line-height: 1.65; } }

/* ---------- close ---------- */
.close { border-top: 1px solid var(--rule); background: var(--bg-deep); }
.close__in { padding-block: clamp(48px, 9vw, 132px); display: grid; gap: 20px; justify-items: start; }
.close .display { max-width: 16ch; }
.close__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.close__note { font-size: 1rem; color: var(--muted); max-width: 46ch; }
@media (min-width: 760px) { .close__note { font-size: .875rem; } }

footer { border-top: 1px solid var(--rule); background: var(--bg-deep); }
.foot { display: grid; gap: 14px; padding-block: 30px; font-size: 1rem; color: var(--muted); }
@media (min-width: 760px) { .foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: 40px; font-size: .8125rem; } }
.foot__b { display: flex; align-items: flex-start; gap: 12px; }
.foot__b .mk { width: 20px; height: 20px; flex: none; color: var(--mark); margin-top: 2px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; border-bottom: 1px solid transparent;
}
@media (hover: hover) { .foot nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); } }
@media (min-width: 760px) { .foot nav a { min-height: 0; } }

/* ---------- inner pages: support, privacy, 404 ---------- */
.doc { padding-block: clamp(30px, 6vw, 84px) clamp(48px, 8vw, 110px); }
.doc h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.06;
  font-size: clamp(2.1rem, 8vw, 3.6rem); margin-top: 12px; text-wrap: balance;
}
.doc__lede { margin-top: 16px; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.prose { margin-top: clamp(28px, 4vw, 48px); max-width: 68ch; }
.prose h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.375rem; line-height: 1.2;
  letter-spacing: -.012em; margin-top: 2em; margin-bottom: .5em;
}
.prose h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.5em; margin-bottom: .35em; }
.prose p, .prose li { font-size: 1rem; line-height: 1.7; color: var(--muted); }
.prose p + p { margin-top: 1em; }
.prose ul { display: grid; gap: 10px; margin: 1em 0; }
.prose li { display: flex; gap: 10px; }
.prose li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); flex: none; margin-top: .62em; }
.prose a { color: var(--clay-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose .meta { font-size: 1rem; color: var(--muted); }
.prose .contact { font-size: 1.125rem; }
.prose .contact a { font-weight: 500; }
.doc__actions { margin-top: clamp(32px, 4vw, 52px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.link-quiet {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 1rem;
}
@media (hover: hover) { .link-quiet:hover { color: var(--ink); } }

/* ---------- reveal ----------
   Nothing is hidden by default, so the page is whole without JavaScript and in
   any static capture. The class only adds an entrance animation. */
.rv.is-seen { animation: rise .62s cubic-bezier(.22,.61,.36,1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .rv.is-seen { animation: none; } }