/* Vigil Studio — "First light". Light, neutral and calm: paper-white ground,
   ink type, hairline rules, and one dawn gradient used only as light (the
   hero horizon and the glows behind framed screens). Literal
   colours that aren't tokens are drawing data: the example homepages and
   the small illustrations belong to other (made-up) businesses. */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans.woff2") format("woff2");
  font-weight: 300 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  --bg: #F4F5F6;            /* cool paper white: the page */
  --surface: #FFFFFF;       /* cards, frames, the white bands */
  --well: #EEF0F2;          /* recessed: tracks, chips */
  --line: #E1E4E8;          /* hairline rules */
  --line-strong: #C9CED5;   /* quiet button edges, rules that need a little more */
  --field-edge: #858C95;    /* form field edges: 3.4:1 on white */
  --ink: #101316;
  --ink-soft: #464C54;      /* secondary text */
  --ink-faint: #5C636C;     /* captions, meta */

  --sun: #FFB020;           /* the dawn: light, never a fill for text */
  --ember: #FF6A2B;
  --haze: #FFF2E6;
  --accent-ink: #B4450F;    /* warm text that passes AA on white */

  --dot: #D9DDE2;           /* the 651-dot field */
  --err: #B42318;
  --err-wash: #FEF0EE;
  --ok: #146C43;
  --ok-wash: #E8F5EE;

  --font-display: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Mona Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
  --fs-h1: clamp(2.375rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.5vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-lede: clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);
  --fs-ui: 1rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-amount: clamp(2.75rem, 2rem + 3vw, 4rem);

  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-8: 96px;

  --max: 1200px;
  --pad: clamp(16px, 5vw, 48px);
  --section: clamp(88px, 10vw, 144px);
  --header: 68px;

  --shadow-sm: 0 1px 2px rgba(16, 19, 22, 0.05), 0 4px 12px -4px rgba(16, 19, 22, 0.08);
  --shadow-frame: 0 0 0 1px rgba(16, 19, 22, 0.07), 0 2px 4px rgba(16, 19, 22, 0.04), 0 32px 64px -32px rgba(16, 19, 22, 0.38);
  --shadow-warm: 0 0 0 1px rgba(16, 19, 22, 0.06), 0 48px 96px -40px rgba(16, 19, 22, 0.32), 0 22px 44px -24px rgba(16, 19, 22, 0.22);   /* the lift under a lit object; the warmth comes from the dawn behind it */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* exponential: fast, then a long settle */
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
  --p: 1;                                          /* hero scroll progress; 1 = at rest */
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header) + 16px);
  scrollbar-color: #C5CAD0 transparent;
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.58;
  font-weight: 400;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(16, 19, 22, 0.35); transition: text-decoration-color 160ms ease, color 160ms ease; }
a:hover { text-decoration-color: currentColor; }
p, h1, h2, h3, h4, figure, dl, dd { margin: 0; }
p, li, dd { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
strong, b { font-weight: 640; }
.nw { white-space: nowrap; }
.soft { color: var(--ink-soft); }

h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 620; color: var(--ink); text-wrap: balance; }
.h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.032em; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.015em; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: #FFE0B2; color: var(--ink); }
input, textarea { caret-color: var(--ember); }
input[type="checkbox"] { accent-color: var(--ink); }

.skip-link {
  position: absolute; left: var(--pad); top: -80px; z-index: 60;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px;
  font: 600 var(--fs-small)/1 var(--font-display); text-decoration: none;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: var(--section); position: relative; overflow-x: clip; }   /* clip, not hidden: sticky children still stick */
.section--horizon { overflow: clip; }
.section-head { display: grid; gap: var(--s-4); max-width: 46rem; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head .lede { max-width: 38ch; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: 600 var(--fs-ui)/1.1 var(--font-display); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 19, 22, 0.22), 0 10px 22px -12px rgba(16, 19, 22, 0.55);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out), background-color 200ms ease;
}
.btn:hover { transform: translateY(-1px); background: #1C2126; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(16, 19, 22, 0.18), 0 16px 30px -14px rgba(16, 19, 22, 0.55); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 120ms; }
.btn__icon { width: 18px; height: 18px; flex: none; transition: transform 420ms var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn--quiet { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgba(16, 19, 22, 0.05); }
.btn--quiet:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-faint), 0 12px 24px -14px rgba(16, 19, 22, 0.35); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: var(--fs-small); }
.btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* ----------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 245, 246, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, background-color 300ms ease;
}
.top[data-scrolled="true"] { border-bottom-color: var(--line); background: rgba(244, 245, 246, 0.92); }
.top__inner { height: var(--header); display: flex; align-items: center; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__name { font: 650 1.125rem/1 var(--font-display); letter-spacing: -0.02em; }
.nav { margin-left: auto; display: none; }
.nav__list { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav__list a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px;
  font: 520 var(--fs-small)/1 var(--font-display); color: var(--ink-soft); text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.nav__list a:hover { color: var(--ink); background: rgba(16, 19, 22, 0.05); }
.nav__list .nav__quiet { color: var(--ink-faint); }
.top__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px 0 14px;
  background: var(--surface); color: var(--ink); border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 600 var(--fs-small)/1 var(--font-display);
}
.menu-toggle__icon { position: relative; width: 16px; height: 10px; }
.menu-toggle__icon i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease-out), top 300ms var(--ease-out); }
.menu-toggle__icon i:first-child { top: 0; }
.menu-toggle__icon i:last-child { top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { top: 4px; transform: rotate(-45deg); }
.mobile-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100vh - var(--header)); height: calc(100dvh - var(--header)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-top: 1px solid var(--line);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s linear 360ms;
}
.mobile-nav[data-open="true"] { visibility: visible; opacity: 1; transform: none; transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); }
.mobile-nav ul { list-style: none; display: grid; padding-block: 8px 20px; }
.mobile-nav a {
  display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line);
  font: 600 1.125rem/1.2 var(--font-display); letter-spacing: -0.01em; text-decoration: none;
}
.mobile-nav .quiet a { font: 500 var(--fs-ui)/1.3 var(--font-body); color: var(--ink-soft); min-height: 48px; }
.mobile-nav li:last-child a { border-bottom: 0; }
html:not(.js) .menu-toggle { display: none; }
@media (max-width: 419px) { .top__cta { display: none; } }
@media (min-width: 1120px) {
  .nav { display: block; }
  .top__actions { margin-left: 8px; }
  .menu-toggle, .mobile-nav { display: none; }
}

/* ------------------------------------------------------------------- hero */
.hero { position: relative; overflow: clip; padding-top: clamp(40px, 6vw, 80px); }
.hero__copy { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.hero__title { font-size: var(--fs-hero); line-height: 1.03; letter-spacing: -0.04em; font-weight: 640; max-width: 14ch; }
@media (min-width: 900px) { .hero__title { max-width: 24ch; } }
.hero__lede { margin-top: var(--s-4); max-width: 40ch; }
.hero__actions { margin-top: clamp(28px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__meta {
  margin-top: var(--s-4); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  font-size: var(--fs-small); color: var(--ink-faint);
}
.hero__meta a { color: var(--ink); font-weight: 600; text-decoration-color: rgba(16, 19, 22, 0.3); }
@media (max-width: 479px) {
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
}

.hero__stage {
  position: relative;
  margin-top: clamp(52px, 6vw, 80px);
  padding: 0 var(--pad) clamp(64px, 9vw, 128px);
  --dawn-w: clamp(660px, 150vw, 2300px);
  --dawn-lift: clamp(60px, 9vw, 128px);
}
.hero__figure { position: relative; z-index: 2; max-width: 1080px; margin-inline: auto; perspective: 2200px; }
.hero__device { position: relative; }
.hero__device--phone { display: none; width: min(258px, 68vw); margin-inline: auto; }
@media (max-width: 599px) {
  .hero__device--desktop { display: none; }
  .hero__device--phone { display: block; }
}
/* the reference's layering, made light: a blurred, slightly larger copy of the
   screen's own content glows behind it (JS fills it; without JS it's empty) */
.hero__ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  filter: blur(46px) saturate(1.35); opacity: 0.34;
  transform: translateY(7%) scale(1.04);
}
.hero__ambient > * { width: 100%; box-shadow: none !important; transform: none !important; }
.hero__browser, .hero__phone { position: relative; z-index: 1; }
.hero__phone { width: 100%; }
.hero__phone, .hero__browser {
  --tilt: 16deg;
  transform-origin: 50% 0%;
  transform: rotateX(calc((1 - var(--p)) * var(--tilt))) scale(calc(0.94 + var(--p) * 0.06));
  will-change: transform;
}
.hero__browser { box-shadow: var(--shadow-warm); border-radius: 18px; }
@media (max-width: 719px) { .hero__browser { --tilt: 10deg; border-radius: 12px; } .hero__phone { --tilt: 12deg; } }
.hero__caption { position: relative; z-index: 2; margin-top: 18px; text-align: center; font-size: var(--fs-small); color: var(--ink-soft); }

/* The dawn: a huge disc whose lit rim rises behind the frame. Gradients and
   shadows only, so it's cheap to draw; only its opacity and position move. */
.dawn {
  position: absolute; z-index: 0; left: 50%; top: calc(var(--dawn-lift) * -1);
  width: var(--dawn-w); aspect-ratio: 1;
  translate: -50% calc((1 - var(--p)) * 3%);
  pointer-events: none;
}
.dawn__sun, .dawn__rim, .dawn__haze { position: absolute; }
.dawn__sun {
  inset: 0; border-radius: 50%;
  background: linear-gradient(180deg, #FFE4C6 0%, #FFF1E3 4.5%, rgba(244, 245, 246, 0.6) 12%, rgba(244, 245, 246, 0) 24%);
}
/* the light around the rim: one radial ring, brightest on the rim itself (at 1/1.16 = 86.2%) */
.dawn__sun::before {
  content: ""; position: absolute; inset: -8%; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 176, 32, 0) 79%, rgba(255, 176, 32, 0.2) 84%, rgba(255, 150, 50, 0.6) 86.2%,
    rgba(255, 128, 52, 0.26) 88.5%, rgba(255, 176, 32, 0.1) 93%, rgba(255, 176, 32, 0) 100%);
  /* only the top of the circle is lit: the glow fades as the rim falls away */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 10%, rgba(0, 0, 0, 0) 34%);
  mask-image: linear-gradient(180deg, #000 0%, #000 10%, rgba(0, 0, 0, 0) 34%);
}
.dawn__rim {
  inset: -1px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: rgba(255, 252, 245, 0.98);
  filter: drop-shadow(0 -2px 6px rgba(255, 150, 60, 0.75));
}
.dawn__haze {
  left: 50%; top: -15%; width: 70%; height: 34%; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 176, 32, 0.22), rgba(255, 106, 43, 0.08) 58%, rgba(255, 106, 43, 0) 100%);
}

/* ----------------------------------------------------------- the browser */
.browser { position: relative; background: var(--surface); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-frame); }
.browser__bar {
  height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: #F7F8F9; border-bottom: 1px solid var(--line);
}
.browser__dots { display: flex; gap: 7px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #DCE0E5; }
.browser__url {
  margin-inline: auto; translate: -28px 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 16px; border-radius: 999px;
  background: #ECEEF1; color: var(--ink-soft);
  font: 500 0.8125rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.browser__url svg { width: 12px; height: 12px; color: #6B737C; }
.hero__browser .browser__bar { height: 44px; }
@media (max-width: 719px) {
  .hero__browser .browser__bar { height: 28px; gap: 8px; padding: 0 10px; }
  .browser__dots { gap: 5px; }
  .browser__dots i { width: 7px; height: 7px; }
  .browser__url { padding: 3px 10px; font-size: 0.625rem; translate: -16px 0; }
  .browser__url svg { width: 9px; height: 9px; }
}

/* The example garage homepage, desktop size (drawing data: a made-up
   business's own colours and type). Sized from the frame's width so it
   scales like a screenshot. */
.browser__screen { container-type: inline-size; aspect-ratio: 16 / 9.4; overflow: hidden; background: #17191B; }
.site {
  height: 100%; display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.5cqi; line-height: 1.4; color: #F2F2EF; background: #17191B;
}
.site__nav { display: flex; align-items: center; justify-content: space-between; gap: 2em; padding: 1.15em 3em; border-bottom: 1px solid rgba(242, 242, 239, 0.1); }
.site__logo { display: flex; align-items: center; gap: 0.75em; font: 820 0.95em/1 var(--font-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.02em; }
.site__logo b { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.4em; background: #FF6B1A; color: #17191B; font-size: 0.72em; font-weight: 900; font-stretch: 90%; letter-spacing: 0; }
.site__links { display: flex; gap: 2.2em; font-size: 0.86em; font-weight: 500; color: #BEC0BC; }
.site__navbtn { background: #FF6B1A; color: #17191B; font-weight: 700; font-size: 0.86em; padding: 0.8em 1.35em; border-radius: 0.45em; }
.site__hero {
  flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 3.2em; align-items: center; padding: 2.6em 3em 2.8em;
  background: #17191B;
}
.site__open { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.8em; font-weight: 600; background: rgba(242, 242, 239, 0.08); border-radius: 999px; padding: 0.5em 1em; }
.site__open i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #3BC46B; }
.site__h { margin-top: 0.55em; font: 900 3.55em/0.94 var(--font-display); font-stretch: 118%; text-transform: uppercase; letter-spacing: -0.01em; }
.site__h span { display: block; color: #FF6B1A; }
.site__p { margin-top: 1em; font-size: 1.05em; color: #BEC0BC; max-width: 28em; }
.site__btns { margin-top: 1.7em; display: flex; gap: 0.8em; }
.site__btn { padding: 1em 1.55em; border-radius: 0.45em; font-weight: 700; font-size: 0.95em; }
.site__btn--a { background: #FF6B1A; color: #17191B; }
.site__btn--b { box-shadow: inset 0 0 0 0.14em #F2F2EF; }
.site__card { background: #F2F2EF; color: #17191B; border-radius: 0.85em; padding: 1.5em 1.7em 0.8em; }
.site__cardh { font: 820 1.1em/1 var(--font-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.5em; }
.site__rows span { display: flex; justify-content: space-between; gap: 1em; padding: 0.78em 0; border-bottom: 1px solid #D4D5D0; font-size: 0.92em; }
.site__rows span:last-child { border-bottom: 0; }
.site__strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #FF6B1A; color: #17191B; font-weight: 700; font-size: 0.9em; text-align: center; }
.site__strip span { padding: 1.1em 0.5em; }
.site__strip span + span { box-shadow: inset 1px 0 0 rgba(23, 25, 27, 0.25); }

/* ------------------------------------------------------- what I found */
.checks-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 72px); }
.checks-intro__sticky { display: grid; gap: var(--s-4); }
.checks-intro .lede { color: var(--ink); }
@media (min-width: 1000px) {
  .checks-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(56px, 7vw, 112px); align-items: start; }
  .checks-intro { align-self: stretch; }
  .checks-intro__sticky { position: sticky; top: calc(var(--header) + 40px); }
}

.dots { margin-top: var(--s-3); display: grid; gap: var(--s-4); }
.dots__grid { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: clamp(2px, 0.5vw, 4px); max-width: 460px; }
.dots__grid i { aspect-ratio: 1; border-radius: 50%; background: var(--dot); }
.dots__grid i.a { background: var(--ink); }
.dots__grid i.b { background: var(--ember); }
html:not(.js) .dots__grid { display: none; }
.dots__figure { font-size: var(--fs-lede); color: var(--ink-soft); }
.dots__figure strong { font: 640 1.15em/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.dots__key { list-style: none; display: grid; gap: 6px; font-size: var(--fs-small); color: var(--ink-soft); margin-top: 10px; }
.dots__key li { display: flex; align-items: center; gap: 10px; }
.dots__key strong { font: 650 1em/1 var(--font-display); color: var(--ink); }
.key { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); flex: none; }
.key--a { background: var(--ink); }
.key--b { background: var(--ember); }

.checks { list-style: none; display: grid; }
.check { display: grid; gap: 14px; padding-block: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
.check:first-child { border-top: 0; padding-top: 0; }
.check__q { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }
.check__count { font-size: 1.125rem; color: var(--ink); }
.check__count strong { font-family: var(--font-display); font-weight: 650; }
.check__why { color: var(--ink-soft); max-width: 62ch; }
.check__fig { margin-top: 8px; display: grid; gap: 10px; }
.check__fig figcaption { font-size: var(--fs-xs); color: var(--ink-faint); }

/* the small illustrations (drawing data) */
.demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.demo--search { display: grid; gap: 8px; max-width: 440px; padding: 14px; }
.demo__query { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--well); color: var(--ink-soft); font: 500 var(--fs-small)/1 system-ui, sans-serif; }
.demo__query svg { width: 15px; height: 15px; }
.demo__result { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 12px; border-radius: var(--r-md); }
.demo__result .demo__listing-name, .demo__result .demo__stars { grid-column: 1; }
.demo__result .demo__buttons { grid-row: 1 / span 2; grid-column: 2; margin-top: 0; }
.demo__result .demo__listing-name { font-size: 1rem; }
.demo__result--you { background: #FEF6F5; box-shadow: inset 0 0 0 1.5px var(--err); }
.demo__pill--site { background: var(--ink); color: #fff; }
.demo__listing-name { font: 620 1.1875rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.demo__stars { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-soft); }
.demo__star-row { display: flex; gap: 2px; color: #F2A20C; }
.demo__star-row svg { width: 14px; height: 14px; }
.demo__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.demo__pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: #E8F0FE; color: #174EA6; font: 600 var(--fs-xs)/1 system-ui, sans-serif; }
.demo__pill--missing { background: #fff; color: var(--err); box-shadow: inset 0 0 0 1.5px var(--err); }
.demo__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: var(--well); max-width: 440px; font: 500 var(--fs-small)/1 system-ui, sans-serif; }
.demo__warn { display: inline-flex; align-items: center; gap: 6px; color: var(--err); font-weight: 600; padding-right: 10px; border-right: 1px solid var(--line-strong); }
.demo__warn svg { width: 16px; height: 16px; }
.demo__url { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo__phones { display: flex; gap: 28px; justify-content: flex-start; }
.demo__phone { width: 72px; height: 136px; border-radius: 14px; background: #1C2126; padding: 5px; }
.demo__screen { height: 100%; border-radius: 10px; background: #fff; padding: 9px 7px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.demo__screen--tiny i { height: 2px; background: #C6CCD3; border-radius: 1px; }
.demo__screen--tiny i:nth-child(3n) { width: 70%; }
.demo__screen--good { gap: 7px; }
.demo__screen--good i { height: 6px; background: #C6CCD3; border-radius: 3px; }
.demo__screen--good i:first-child { height: 10px; width: 80%; background: var(--ink); }
.demo__screen--good b { height: 20px; border-radius: 5px; background: var(--ember); }
.demo__label { margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-soft); }
.demo__scale { position: relative; height: 34px; max-width: 440px; }
.demo__scale-track { position: absolute; left: 0; right: 0; top: 22px; height: 8px; border-radius: 99px; background: var(--well); overflow: hidden; }
.demo__scale-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--score) * 1%); border-radius: 99px; background: linear-gradient(90deg, #E5484D, #F08A24); }
.demo__scale-mark { position: absolute; left: calc(var(--score) * 1%); top: 0; translate: -50% 0; font: 650 var(--fs-xs)/1 var(--font-display); color: var(--err); }
.demo__scale-ticks { display: flex; justify-content: space-between; max-width: 440px; margin-top: 6px; font: 500 var(--fs-xs)/1.2 var(--font-display); color: var(--ink-faint); }
.demo__footer { font: 400 var(--fs-small)/1.4 system-ui, sans-serif; color: #6B737C; }
.demo__year { background: #FFE6B8; color: var(--ink); padding: 1px 4px; border-radius: 4px; font-weight: 600; }

/* ------------------------------------------------------- see it before */
.steps { list-style: none; position: relative; display: grid; gap: 36px; max-width: 1080px; margin-inline: auto; }
.steps::before, .steps::after { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: var(--line); }
.steps::after { background: linear-gradient(180deg, var(--sun), var(--ember)); transform-origin: 50% 0; }
.step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; row-gap: 8px; align-content: start; }
.step__n {
  grid-row: span 2; position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font: 640 var(--fs-ui)/1 var(--font-display);
  box-shadow: 0 0 0 6px var(--bg);
}
.step__t { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; padding-top: 6px; }
.step p { color: var(--ink-soft); grid-column: 2; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
  .steps::before, .steps::after { left: 20px; right: 20px; top: 19px; bottom: auto; width: auto; height: 2px; }
  .steps::after { background: linear-gradient(90deg, var(--sun), var(--ember)); transform-origin: 0 50%; }
  .step { grid-template-columns: 1fr; row-gap: 14px; }
  .step__n { grid-row: auto; }
  .step__t { padding-top: 10px; }
  .step p { grid-column: auto; }
}
.small-print { margin-top: clamp(40px, 5vw, 56px); text-align: center; color: var(--ink-soft); font-size: var(--fs-small); }

/* ------------------------------------------------------------------ about */
.about { display: grid; gap: clamp(48px, 6vw, 80px); }
@media (min-width: 960px) { .about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.about__text { display: grid; gap: var(--s-5); }
.prose { display: grid; gap: 14px; max-width: 60ch; }
.prose h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; margin-top: var(--s-4); }
.prose p { color: var(--ink-soft); }
.prose p:first-child { color: var(--ink); font-size: var(--fs-lede); line-height: 1.5; }
.disclosure {
  background: var(--surface); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 36px);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  display: grid; gap: 12px; scroll-margin-top: calc(var(--header) + 24px);
}
.disclosure__title { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; }
.disclosure__list { list-style: none; display: grid; gap: 14px; margin-top: 8px; font-size: var(--fs-small); }
.disclosure__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.disclosure__list svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--haze); color: var(--accent-ink); margin-top: 1px; }
.disclosure__out { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.disclosure:target { box-shadow: var(--shadow-sm), 0 0 0 2px var(--ink); }

/* -------------------------------------------------- built around your trade */
.trades { display: grid; gap: clamp(32px, 4vw, 48px); }
.trades > .section-head { margin-bottom: 0; }
.trade-tabs {
  justify-self: start; width: min(100%, 680px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px;
  background: var(--surface); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}
.trade-tab {
  min-height: 46px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 var(--fs-small)/1 var(--font-display); color: var(--ink-soft);
  transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}
.trade-tab span { font-weight: 450; color: var(--ink-faint); display: none; }
.trade-tab:hover { color: var(--ink); }
.trade-tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(16, 19, 22, 0.2), 0 6px 14px -6px rgba(16, 19, 22, 0.45); }
.trade-tab[aria-selected="true"] span { color: rgba(255, 255, 255, 0.72); }
@media (min-width: 720px) { .trade-tab span { display: inline; } }

.trade-panel[hidden] { display: none; }
html:not(.js) .trade-tabs, html:not(.js) .mark-dot { display: none; }
html:not(.js) .trade-panel[hidden] { display: grid; }
.trade-panel { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1000px; width: 100%; }
@media (min-width: 900px) { .trade-panel { grid-template-columns: auto minmax(0, 1fr); } }
.trade-panel__phone { position: relative; padding-inline: 40px; }
.trade-panel__glow {
  position: absolute; z-index: 0; inset: 2% -18% -2%; border-radius: 50%;
  background:
    radial-gradient(50% 44% at 42% 40%, color-mix(in srgb, var(--glow-a) 70%, transparent), transparent 74%),
    radial-gradient(42% 38% at 62% 68%, color-mix(in srgb, var(--glow-b) 50%, transparent), transparent 74%);
  filter: blur(40px); opacity: 0.8;
}
.trade-panel__legend { display: grid; gap: 4px; align-content: start; }
.trade-panel__name { font: 620 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-display); letter-spacing: -0.025em; }

.phone {
  position: relative; z-index: 1; width: min(300px, 70vw); margin-inline: auto;
  border-radius: 44px; background: #111417; padding: 10px;
  box-shadow: inset 0 0 0 1.5px #2A3036, 0 2px 4px rgba(16, 19, 22, 0.12), 0 48px 80px -40px rgba(16, 19, 22, 0.55);
}
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 76px; height: 20px; border-radius: 12px; background: #111417; translate: -50% 0; z-index: 7; }
/* The screen keeps a phone's proportions at every size, and the example
   inside scales with it, like a screenshot. */
.phone__screen { border-radius: 34px; background: #fff; aspect-ratio: 296 / 600; position: relative; container-type: inline-size; }
.phone__screen > .ex { overflow: hidden; border-radius: 34px; }
@media (max-width: 899px) {
  .phone { width: min(268px, 66vw); border-radius: 38px; padding: 9px; }
  .phone::before { top: 17px; width: 62px; height: 17px; }
  .phone__screen, .phone__screen > .ex { border-radius: 29px; }
  .part__d { display: none; }
  .parts { gap: 10px; }
}

.parts { list-style: none; display: grid; gap: 16px; margin-top: 20px; }
.part { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.part__n, .mark-dot {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: #fff; font: 650 var(--fs-xs)/1 var(--font-display);
}
.part__n { width: 28px; height: 28px; margin-top: 1px; }
.part__t { font: 600 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; padding-top: 3px; }
.part__d { color: var(--ink-soft); font-size: var(--fs-small); margin-top: 2px; }
.trade-note { color: var(--ink-faint); font-size: var(--fs-small); max-width: 60ch; }

/* Marker dots sit outside the phone's right edge with a short leader in:
   they point at a part, never cover it. JS keeps each level with its part. */
.mark-dot { position: absolute; z-index: 6; right: -36px; width: 24px; height: 24px; box-shadow: 0 0 0 3px var(--bg); }
.mark-dot::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1.5px; background: var(--ink); translate: 0 -50%; }
@media (max-width: 899px) { .mark-dot { right: -32px; } .mark-dot::before { width: 12px; } }

/* --------------------------------------- example homepages (drawing data:
   other businesses' worlds, so their own colours, radii and type; system
   fonts for their text). Sized in em from the screen's width, so each one
   scales like a screenshot of a real phone. */
.ex {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; font-size: clamp(12px, 5.4cqi, 16px);
  line-height: 1.4;
}
.ex > * { flex: none; }
.ex__status { height: 2.6em; }
.ex__nav { display: flex; align-items: center; justify-content: space-between; padding: 0.25em 1.125em 0.4em; min-height: 1.9em; }
.ex__mono { font-size: 0.75em; font-weight: 800; letter-spacing: 0.08em; }
.ex__menu { width: 1.375em; height: 0.875em; border-top: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; position: relative; }
.ex__menu::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1.25px); border-top: 2.5px solid currentColor; }
.ex__hero { padding: 0.875em 1.125em 1.25em; display: grid; gap: 0.625em; }
.ex__name { line-height: 0.95; }
.ex__h { line-height: 1.12; }
.ex__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3em; padding: 0 0.85em; border-radius: 6px; font-weight: 700; font-size: 0.875em; white-space: nowrap; }
.ex__row { display: flex; gap: 0.5em; flex-wrap: wrap; }
.ex__meta { font-size: 0.8125em; line-height: 1.45; }
.ex__list { display: grid; margin: 0 1.125em; }
.ex__list span { display: flex; justify-content: space-between; gap: 0.75em; padding: 0.7em 0; border-bottom: 1px solid; font-size: 0.875em; }
.ex__chips { display: flex; flex-wrap: wrap; gap: 0.375em; margin: 0.875em 1.125em 0; }
.ex__chips span { font-size: 0.75em; font-weight: 700; padding: 0.4em 0.85em; border-radius: 999px; }

.ex--garage { background: #F2F2EF; color: #17191B; }
.ex--garage .ex__status, .ex--garage .ex__nav, .ex--garage .ex__hero { background: #17191B; color: #F2F2EF; }
.ex--garage .ex__name { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: 1.875em; text-transform: uppercase; letter-spacing: -0.01em; }
.ex--garage .ex__h { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 1.125em; text-transform: uppercase; }
.ex--garage .ex__h em { font-style: normal; color: #FF6B1A; }
.ex--garage .ex__btn--a { background: #FF6B1A; color: #17191B; }
.ex--garage .ex__btn--b { border: 2px solid #F2F2EF; color: #F2F2EF; }
.ex--garage .ex__strip { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 0.75em; font-weight: 700; background: #FF6B1A; color: #17191B; }
.ex--garage .ex__strip span { padding: 0.75em 0.25em; }
.ex--garage .ex__strip span + span { border-left: 1px solid rgba(23, 25, 27, 0.3); }
.ex--garage .ex__list span { border-color: #D4D5D0; }
.ex--garage .ex__area { padding: 1em 1.3em 0.15em; font-size: 0.875em; font-weight: 600; color: #4B4F52; }

.ex--cafe { background: #F7EDE2; color: #3A1E14; }
.ex--cafe .ex__status, .ex--cafe .ex__nav { background: #C63D27; color: #FFF5EA; }
.ex--cafe .ex__hero { background: #C63D27; color: #FFF5EA; border-radius: 0 0 1.625em 1.625em; padding-bottom: 1.5em; }
.ex--cafe .ex__name { font-family: var(--font-display); font-weight: 880; font-stretch: 125%; font-size: 2em; text-transform: lowercase; letter-spacing: -0.03em; }
.ex--cafe .ex__h { font-family: var(--font-display); font-weight: 760; font-stretch: 112%; font-size: 1.125em; }
.ex--cafe .ex__open { display: inline-flex; align-items: center; gap: 0.5em; background: #FFF5EA; color: #3A1E14; border-radius: 999px; padding: 0.4em 0.9em; font-size: 0.8125em; font-weight: 700; justify-self: start; }
.ex--cafe .ex__open i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #2F8F4E; }
.ex--cafe .ex__btn--a { background: #3A1E14; color: #FFF5EA; border-radius: 999px; }
.ex--cafe .ex__btn--b { background: #FFF5EA; color: #3A1E14; border-radius: 999px; }
.ex--cafe .ex__menuhead { padding: 1em 1.125em 0.15em; font-family: var(--font-display); font-weight: 840; font-stretch: 110%; }
.ex--cafe .ex__list span { border-color: #E5D3C1; }

.ex--salon { background: #F6E9E6; color: #2E1730; }
.ex--salon .ex__status, .ex--salon .ex__nav, .ex--salon .ex__hero { background: #2E1730; color: #F6E9E6; }
.ex--salon .ex__hero { padding-bottom: 1.625em; }
.ex--salon .ex__name { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 2.375em; letter-spacing: -0.01em; }
.ex--salon .ex__h { font-family: Georgia, "Times New Roman", serif; font-size: 1.25em; }
.ex--salon .ex__h em { font-style: italic; color: #E9B7AE; }
.ex--salon .ex__btn--a { background: #E9B7AE; color: #2E1730; border-radius: 2px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125em; justify-self: start; }
.ex--salon .ex__prices { margin: 0.875em 1.125em 0; display: grid; }
.ex--salon .ex__prices span { display: flex; justify-content: space-between; gap: 0.75em; padding: 0.65em 0; border-bottom: 1px solid #E2C9C4; font-size: 0.875em; }
.ex--salon .ex__prices b { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }

.ex--plumber { background: #FFFFFF; color: #0E2238; }
.ex--plumber .ex__status, .ex--plumber .ex__nav { background: #0E3A66; color: #fff; }
.ex--plumber .ex__alert { background: #FFD43B; color: #0E2238; font-size: 0.8125em; font-weight: 700; padding: 0.6em 1.4em; }
.ex--plumber .ex__hero { padding-top: 1em; }
.ex--plumber .ex__name { font-family: var(--font-display); font-weight: 880; font-stretch: 96%; font-size: 1.875em; color: #0E3A66; }
.ex--plumber .ex__name i { display: block; font-style: normal; font-size: 0.5em; font-weight: 760; letter-spacing: 0.04em; text-transform: uppercase; color: #1D5D9B; margin-top: 0.3em; }
.ex--plumber .ex__h { font-family: var(--font-display); font-weight: 800; font-stretch: 92%; font-size: 1.125em; }
.ex--plumber .ex__btn--a { background: #0E3A66; color: #fff; }
.ex--plumber .ex__btn--b { border: 2px solid #0E3A66; color: #0E3A66; }
.ex--plumber .ex__ticks { display: grid; gap: 0.5em; margin: 0.15em 1.3em 0; font-size: 0.875em; }
.ex--plumber .ex__ticks span { display: flex; gap: 0.5em; align-items: center; }
.ex--plumber .ex__ticks span::before { content: ""; width: 0.9em; height: 0.9em; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%231A7F45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ex--plumber .ex__slot { margin: 1em 1.125em 0; padding: 0.7em 0.9em; border-radius: 6px; background: #E8F1FA; color: #0E3A66; font-size: 0.875em; }
.ex--plumber .ex__chips span { background: #E8F1FA; color: #0E3A66; }

/* ------------------------------------------------------------------ price */
.prices { display: grid; gap: var(--s-4); max-width: 1000px; }
@media (min-width: 820px) { .prices { grid-template-columns: 1fr 1fr; } }
.price {
  position: relative; display: grid; gap: 14px; align-content: start;
  background: var(--surface); border-radius: var(--r-xl); padding: clamp(26px, 3.6vw, 40px);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}
.price--free { box-shadow: var(--shadow-warm); }
.price-stage { position: relative; --dawn-w: clamp(720px, 118vw, 1900px); --dawn-lift: clamp(40px, 5vw, 72px); }
.price-stage .prices { position: relative; z-index: 1; }
.price__name { font: 600 1.125rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.price__amount { font: 640 var(--fs-amount)/1 var(--font-display); letter-spacing: -0.045em; }
.price__desc { color: var(--ink-soft); max-width: 42ch; }
.price__terms { display: grid; margin-top: 8px; font-size: var(--fs-small); }
.price__terms div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding-block: 12px; border-top: 1px solid var(--line); }
.price__terms dt { color: var(--ink-faint); }
@media (max-width: 479px) { .price__terms div { grid-template-columns: 1fr; gap: 2px; } }
.price__cta { justify-self: start; margin-top: 10px; }
.placeholder { outline: 1.5px dashed var(--err); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------------- work */
.work { display: grid; gap: clamp(56px, 7vw, 88px) clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .work { grid-template-columns: 1fr 1fr; } }
.job { display: grid; gap: var(--s-4); align-content: start; }
.job__frame { position: relative; }
/* the Pinterest trick, made light: a blurred copy of the screen glows behind it */
.job__glow {
  position: absolute; z-index: 0; left: 3%; top: 22%; width: 94%; height: 88%;
  object-fit: cover; border-radius: 30px; filter: blur(38px) saturate(1.5); opacity: 0.55;
  transition: opacity 600ms var(--ease-soft), transform 900ms var(--ease-out);
}
.job__browser { z-index: 1; transition: transform 700ms var(--ease-out), box-shadow 700ms var(--ease-out); }
.job__browser .browser__bar { height: 30px; padding: 0 12px; }
.job__browser .browser__dots i { width: 8px; height: 8px; }
.job__browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #1C2126; }
@media (max-width: 639px) { .job__browser img { aspect-ratio: 390 / 500; } }
@media (hover: hover) {
  .job:hover .job__browser { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(16, 19, 22, 0.08), 0 40px 72px -32px rgba(16, 19, 22, 0.45); }
  .job:hover .job__glow { opacity: 0.75; transform: translateY(3%); }
}
.job__body { display: grid; gap: 8px; }
.job__name { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.025em; }
.job__kind { color: var(--ink-soft); max-width: 52ch; }
.job__tag { font: 560 var(--fs-xs)/1.3 var(--font-display); color: var(--ink-faint); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; }
.job__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }

/* ------------------------------------------------------- the closing form */
.close { padding-bottom: clamp(88px, 11vw, 144px); }
.close__grid { position: relative; z-index: 1; display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 960px) { .close__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.close__text { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 960px) { .close__text { position: sticky; top: calc(var(--header) + 40px); } }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: 20px; }
.form--card { background: var(--surface); border-radius: var(--r-xl); padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow-warm); }
.field { display: grid; gap: 8px; }
.field label { font: 600 var(--fs-small)/1.3 var(--font-display); letter-spacing: -0.005em; }
.field .hint { font: 400 var(--fs-xs)/1.3 var(--font-body); color: var(--ink-faint); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  font: 400 var(--fs-body)/1.4 var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--field-edge); border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 220ms var(--ease-out);
}
.field textarea { min-height: 124px; resize: vertical; }
.field input::placeholder { color: #6B737C; }
.field input:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); background: #FFFBFA; }
.field__error { display: none; font-weight: 700; color: var(--err); font-size: var(--fs-small); }
.field[data-invalid="true"] .field__error { display: block; }
.form__row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__foot { display: grid; gap: 14px; justify-items: start; margin-top: 4px; }
.form__small { font-size: var(--fs-small); color: var(--ink-faint); }
.form__note { font-size: var(--fs-small); color: var(--ink-soft); }
.form__status { font-weight: 600; padding: 14px 16px; border-radius: 12px; display: none; width: 100%; }
.form__status[data-state] { display: block; }
.form__status[data-state="sending"] { background: var(--well); color: var(--ink-soft); }
.form__status[data-state="ok"] { background: var(--ok-wash); color: var(--ok); }
.form__status[data-state="error"] { background: var(--err-wash); color: var(--err); }
.form__status a { color: inherit; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check-row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--fs-small); }
.check-row input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
@media (max-width: 479px) { .btn--wide { width: 100%; white-space: normal; text-align: center; } }

/* ----------------------------------------------------------------- footer */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px) 28px; }
.footer__grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.3fr 0.8fr 1fr; gap: var(--s-6); } }
.footer__brand { display: grid; gap: 10px; align-content: start; }
.footer__trade { color: var(--ink-soft); max-width: 34ch; }
.footer__links { list-style: none; display: grid; gap: 2px; align-content: start; }
.footer__links a { display: inline-flex; align-items: center; min-height: 40px; font: 560 var(--fs-small)/1.2 var(--font-display); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.footer__small { display: grid; gap: 6px; align-content: start; font-size: var(--fs-small); color: var(--ink-soft); }
.footer__base { margin-top: var(--s-6); padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-faint); }

/* ------------------------------------------------- privacy, unsubscribe */
.page-head { padding-block: clamp(56px, 9vw, 112px) clamp(32px, 5vw, 56px); position: relative; overflow: clip; }
.page-head .wrap { display: grid; gap: var(--s-4); }
.page-head .lede { max-width: 46ch; }
.legal { padding-block: clamp(16px, 3vw, 32px) var(--section); }
.legal__lead { margin-bottom: clamp(40px, 6vw, 64px); max-width: 46rem; }
.legal__grid { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) { .legal__grid { grid-template-columns: 220px minmax(0, 1fr); } }
.toc__label { font: 600 var(--fs-xs)/1.3 var(--font-display); color: var(--ink-faint); margin-bottom: 8px; }
.toc ol { list-style: none; display: grid; }
.toc a { display: flex; min-height: 38px; align-items: center; text-decoration: none; color: var(--ink-soft); font: 520 var(--fs-small)/1.25 var(--font-display); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 960px) { .toc > div { position: sticky; top: calc(var(--header) + 32px); } }
.legal-body { max-width: 54ch; }   /* about 75 characters a line in this face */
.legal-body h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; margin-top: clamp(48px, 6vw, 72px); margin-bottom: 14px; scroll-margin-top: calc(var(--header) + 24px); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; margin-top: 28px; margin-bottom: 8px; }
.legal-body p { color: var(--ink-soft); }
.legal-body p + p, .legal-body p + ul, .legal-body ul + p { margin-top: 0.8em; }
.legal-body ul { padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-soft); }
.legal-body li::marker { color: var(--ink-faint); }
.legal-body strong { color: var(--ink); }
.legal-body dl { display: grid; margin: 14px 0 0; border-top: 1px solid var(--line-strong); }
.legal-body dl > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.legal-body dt { font-weight: 700; }
.legal-body dd { color: var(--ink-soft); }
@media (min-width: 720px) { .legal-body dl > div { grid-template-columns: 180px 1fr; gap: 18px; } }
.callout { border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 32px); background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.callout h2 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.025em; margin: 0; }
.callout--lead { box-shadow: var(--shadow-warm); }
.callout--lead ul { padding-left: 1.2em; display: grid; gap: 8px; margin-top: 14px; color: var(--ink-soft); }
.callout--plain { margin-block: 28px; }
.callout--plain p { margin-top: 10px; }
.todo { background: var(--err-wash); color: var(--err); padding: 0 4px; border-radius: 4px; font-weight: 700; }

.unsub { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 900px) { .unsub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.unsub .form { align-self: start; }

.notfound { min-height: 64vh; display: grid; align-content: center; justify-items: start; gap: var(--s-4); padding-block: var(--s-8); }
.page-head .dawn, .notfound-wrap .dawn { --dawn-w: clamp(700px, 140vw, 2200px); }

/* simple header on the inner pages */
.top--plain .top__actions { margin-left: auto; }

/* ----------------------------------------------------------------- motion
   One moment, then calm. The dawn rises behind the hero frame on load and
   the frame settles flat as you scroll. Everything else eases in once, each
   in its own way. Without JavaScript, or with reduced motion, it's all there
   at rest. */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-enter] { animation: enter 1100ms var(--ease-out) both; }
  .hero [data-enter="1"] { animation-delay: 120ms; }
  .hero [data-enter="2"] { animation-delay: 260ms; }
  .hero [data-enter="3"] { animation-delay: 380ms; }
  .hero [data-enter="4"] { animation-delay: 480ms; }
  .hero [data-enter="5"] { animation: rise 1500ms var(--ease-out) 420ms both; }
  .hero .dawn { animation: dawn 2200ms var(--ease-out) 160ms both; }
  .hero .dawn__rim { animation: rim 2600ms var(--ease-soft) 500ms both; }
  .page-head .dawn { animation: dawn 2200ms var(--ease-out) 100ms both; }

  /* the five checks: the illustration follows its words */
  html.js .check .check__fig { transition: opacity 900ms var(--ease-soft) calc(var(--rd, 0ms) + 220ms), transform 1200ms var(--ease-out) calc(var(--rd, 0ms) + 220ms); }
  html.js .check:not(.is-in) .check__fig { opacity: 0; transform: translateY(16px) scale(0.98); }

  /* the 651-dot field: the dots appear, then the 193 light up in order */
  html.js .dots__grid i { transition: opacity 500ms ease calc(var(--i) * 0.9ms), scale 700ms var(--ease-out) calc(var(--i) * 0.9ms), background-color 600ms ease; }
  html.js .dots:not(.is-in) .dots__grid i { opacity: 0; scale: 0.3; }
  html.js .dots__grid i.a, html.js .dots__grid i.b { transition-delay: calc(var(--i) * 0.9ms), calc(var(--i) * 0.9ms), calc(700ms + var(--i) * 4ms); }
  html.js .dots:not(.is-in) .dots__grid i.a, html.js .dots:not(.is-in) .dots__grid i.b { background-color: var(--dot); }

  /* the steps: the line draws through them, and each number arrives as it passes */
  html.js .steps::after { transition: scale 1600ms var(--ease-out) 200ms; }
  html.js .step__n { transition: scale 700ms var(--ease-out) var(--pd, 0ms), opacity 400ms ease var(--pd, 0ms); }
  html.js .step:nth-child(1) .step__n { --pd: 120ms; }
  html.js .step:nth-child(2) .step__n { --pd: 620ms; }
  html.js .step:nth-child(3) .step__n { --pd: 1120ms; }
  html.js .steps:not(.is-in) .step__n { scale: 0.4; opacity: 0; }
  html.js .steps:not(.is-in)::after { scale: 1 0; }
  @media (min-width: 900px) { html.js .steps:not(.is-in)::after { scale: 0 1; } }

  /* the work: each screen settles out of its own glow */
  html.js .job__frame { transition: opacity 900ms var(--ease-soft) var(--rd, 0ms), transform 1300ms var(--ease-out) var(--rd, 0ms); }
  html.js .job:not(.is-in) .job__frame { opacity: 0; transform: translateY(40px) scale(0.97); }
  html.js .job:not(.is-in) .job__glow { opacity: 0; transform: scale(0.8); }

  /* the closing dawn rises behind the form */

  /* switching trades: the new homepage comes up on the phone */
  .trade-panel.is-switching .ex { animation: screen-in 700ms var(--ease-out) both; }
  .trade-panel.is-switching .trade-panel__glow { animation: glow-in 1200ms var(--ease-out) both; }
  .trade-panel.is-switching .mark-dot { animation: fade-in 500ms ease 250ms both; }
}
@keyframes enter { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
@keyframes dawn { from { opacity: 0; transform: translateY(9%); } to { opacity: 1; transform: none; } }
@keyframes rim { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0.85; } }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes glow-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 0.8; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ print */
@media print {
  .top, .dawn, .trade-tabs, .mark-dot, .trade-panel__glow, .job__glow, .hero__ambient, .skip-link { display: none !important; }
  .trade-panel[hidden] { display: grid !important; }
  body, .footer { background: #fff !important; }
  .job__frame, .check__fig, .dots__grid i, .step__n { opacity: 1 !important; transform: none !important; scale: 1 !important; filter: none !important; }
  .form--card, .price, .disclosure, .callout { box-shadow: none !important; border: 1px solid #999; }
}