/* AdLinkt site styles. Loaded after adlinkt-tokens.css and adlinkt-website.css.
   Tokens only (var(--token)); the two breakpoints match web-bp-tablet (720) and web-bp-desktop (1024).
   Never edit the base files; everything site-specific lives here. */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card-list { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- site type scale
   Smaller than the base's web-hero (96px) and web-section-head (72px) so headings read at a glance.
   Same font, tracking and leading rules; sizes scale smoothly from 360 to 1440px. */
.t-hero { font-family: var(--font); font-size: clamp(36px, calc(2.6vw + 26px), 60px); line-height: 1.04; font-weight: 400; letter-spacing: -0.032em; }
.t-title { font-family: var(--font); font-size: clamp(32px, calc(1.5vw + 25px), 48px); line-height: 1.08; font-weight: 400; letter-spacing: -0.028em; }
.t-section { font-family: var(--font); font-size: clamp(26px, calc(1vw + 22px), 38px); line-height: 1.12; font-weight: 400; letter-spacing: -0.024em; }
.t-card { font-family: var(--font); font-size: clamp(18px, calc(0.25vw + 17px), 21px); line-height: 1.28; font-weight: 500; letter-spacing: -0.012em; }

/* ---------------------------------------------------------------- draft bar (local review only) */
.draft-bar { background: var(--group); color: var(--text-2); text-align: center; padding: 8px 16px; }
.draft-bar p { margin: 0; }
mark.ok {
  background: transparent; color: var(--warning);
  box-shadow: inset 0 0 0 1px var(--warning);
  border-radius: 6px; padding: 1px 6px; font-size: 0.85em; font-weight: 500;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------------------------------------------------------------- icons */
.icon { display: block; width: 22px; height: 22px; }
.icon-sm { display: inline-block; width: 16px; height: 16px; flex: none; }
.icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-tile);
  background: var(--icon-tile); color: var(--text);
  box-shadow: var(--raised-edge);
}

/* ---------------------------------------------------------------- header + phone menu */
.site-header { position: relative; }
.site-header-row { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.site-logo { display: block; flex: none; padding-block: 12px; }
.site-logo img { display: block; height: 24px; width: auto; }
.site-nav { display: none; }
.site-nav a, .site-menu-list a { color: var(--text-2); text-decoration: none; transition: color var(--dur-tint) ease; }
.site-nav a[aria-current="page"], .site-menu-list a[aria-current="page"] { color: var(--text); }
.site-header-cta { margin-left: auto; }
.site-header-cta .web-button-secondary { min-height: 44px; padding-inline: 18px; }
.site-menu > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); min-width: var(--target); padding: 0 14px;
  border-radius: var(--r-control); background: var(--control); box-shadow: var(--btn2-ring); color: var(--text);
  cursor: pointer; transition: transform var(--dur-press) var(--ease-out);
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:active { transform: scale(var(--scale-press)); }
.site-menu-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-float);
  margin: 0; list-style: none;
  padding: 8px max(clamp(var(--web-inset-min), 5vw, var(--web-inset-max)), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) 16px;
  background: var(--raised); box-shadow: var(--raised-edge), var(--shadow-float);
}
.site-menu-list a { display: flex; align-items: center; min-height: 52px; }
.site-menu-list li + li { border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .site-logo img { height: 28px; }
  .site-nav { display: flex; gap: 28px; margin-left: 16px; }
  .site-menu { display: none; }
}
@media (hover: hover) and (pointer: fine) { .site-nav a:hover, .site-menu-list a:hover { color: var(--text); } }

/* ---------------------------------------------------------------- page heads */
.page-band { background: var(--group); border-bottom: 1px solid var(--line); }
.page-head { display: grid; gap: var(--web-gap-wide); padding-block: 48px 56px; }
.page-head-copy { display: grid; gap: 16px; justify-items: start; align-content: start; }
.page-head-copy .t-title { max-width: 20em; }
@media (min-width: 1024px) {
  .page-head { padding-block: 64px 72px; }
  .page-head.has-aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--text-2); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--text); } }
.eyebrow, .meta-line { margin: 0; color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fine-print { margin: 0; color: var(--text-2); max-width: var(--web-lead-measure); }

.glance { display: grid; gap: 12px; align-content: start; }
.glance-label { margin: 0; color: var(--text-2); }
.glance-text { margin: 0; color: var(--text); line-height: 1.55; }
.glance-text strong { font-weight: 600; }

.prose-wrap { padding-block: 56px var(--web-section); }
.calc-wrap { padding-top: 48px; }

/* ---------------------------------------------------------------- home hero + product mockups */
.hero { display: grid; gap: 56px; padding-block: 56px 64px; align-items: center; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); padding-block: 80px 96px; gap: var(--web-gap-wide); }
}
.hero-art { display: flex; justify-content: center; }
.hero-stack { position: relative; width: min(100%, 400px); }

.mock {
  background: var(--raised); color: var(--text);
  box-shadow: var(--raised-edge), var(--shadow-float);
  border-radius: var(--r-surface);
  padding: 16px;
  font-family: var(--font-sans);
}
.mock-top { display: flex; align-items: center; gap: 8px; color: var(--text-2); margin-bottom: 12px; }
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: none; }
.mock-photo {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px;
  background: var(--raised-2);
  display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 12px;
}
.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Before: dim and grimy. After: bright and clean. Token fills only. */
.d-sky { fill: var(--group); } .d-roof { fill: var(--control); } .d-wall { fill: var(--raised-2); }
.d-win, .d-door { fill: var(--ground); } .d-garage { fill: var(--control); } .d-seam, .d-joint { stroke: var(--ground); stroke-width: 2; }
.d-lawn { fill: var(--raised); } .d-drive { fill: var(--line-raised); } .d-grime { fill: var(--ground); opacity: 0.55; }
.c-sky { fill: var(--raised-2); } .c-roof { fill: var(--text-2); } .c-wall { fill: var(--text); }
.c-win, .c-door { fill: var(--raised); } .c-garage { fill: var(--text-2); } .c-seam, .c-joint { stroke: var(--text-3); stroke-width: 2; }
.c-lawn { fill: var(--control-hover); } .c-drive { fill: var(--text-2); }
.scene-split { stroke: var(--text); stroke-width: 3; }
.mock-photo span { position: relative; z-index: 1; padding: 2px 8px; border-radius: 6px; background: var(--ground); color: var(--text); }
.mock-copy { margin: 12px 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.mock-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--group); }
.mock-cta-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.mock-pill { flex: none; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; background: var(--control); box-shadow: var(--btn2-ring); }
.mock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mock-actions span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.mock-approve { background: var(--text); color: var(--ground); }
.mock-change { background: var(--control); box-shadow: var(--btn2-ring); color: var(--text); }

.mock-lead {
  position: relative; width: 80%; box-sizing: border-box;
  margin: -12px -8px 0 auto;
  background: var(--raised-2);
}
@media (min-width: 1024px) { .mock-lead { margin-right: -40px; } }
.mock-name { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.mock-detail { margin: 4px 0 14px; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.mock-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mock-steps span { font-size: 12px; text-align: center; padding: 6px 0 0; border-top: 3px solid var(--line); color: var(--text-3); }
.mock-steps span.is-on { border-top-color: var(--text); color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .hero-stack .mock { animation: mock-in 640ms var(--ease-out) both; }
  .hero-stack .mock-lead { animation-delay: 160ms; }
}
@keyframes mock-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Booked chart mockup */
.mock-booked { display: grid; gap: 20px; }
.mock-booked-label { margin: 0; color: var(--text-2); }
.mock-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
@media (min-width: 720px) { .mock-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mock-figs dt { color: var(--text-2); margin-bottom: 4px; }
.mock-figs dd { margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; border-bottom: 1px solid var(--lc-grid); }
.mock-bars span { flex: 1; background: var(--lc-bar); border-radius: 3px 3px 0 0; min-height: 4px; }
.mock-bars span.is-lit { background: var(--text); }

/* Benchmark range bar */
.bench { display: grid; gap: 10px; margin-block: 8px 4px; }
.bench-track { position: relative; height: 12px; border-radius: 6px; background: var(--bench-track); }
.bench-band { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--bench-band); }
.bench-median { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--bench-median); }
.bench-scale { position: relative; height: 16px; color: var(--text-3); }
.bench-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.bench-scale span:first-child { transform: none; left: 0; }
.bench-scale span:last-child { transform: none; }
.bench-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--text-2); }
.bench-key-band, .bench-key-median { display: inline-block; width: 14px; height: 8px; border-radius: 4px; background: var(--bench-band); }
.bench-key-median { width: 3px; height: 14px; background: var(--bench-median); margin-left: 8px; }

.data-panel { display: grid; gap: 12px; align-content: start; }
.data-panel p { margin: 0; }
.data-label, .data-note { color: var(--text-2); }
.data-figure { font-size: clamp(56px, 6vw, 80px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- home sections */
.lime-statement { padding-block: 8px; }
.lime-statement .t-section { max-width: 22em; }
.section-head { display: grid; gap: 12px; margin: 0 0 40px; justify-items: start; }
.section-head p { margin: 0; }
.section-head .t-section { max-width: 24em; }
.section-head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }

.feature { display: grid; gap: 12px; align-content: start; justify-items: start; }
.feature h3, .feature p { margin: 0; }
.feature p { color: var(--text-2); }

.steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: grid; gap: 10px; align-content: start; }
.step h3, .step p { margin: 0; }
.step p.type-web-body { color: var(--text-2); }
.step-n { margin: 0 0 12px; font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }

.split { display: grid; gap: var(--web-gap-wide); }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
.split-copy { display: grid; gap: 20px; justify-items: start; }
.split-copy p { margin: 0; }

.trade-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .trade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .trade-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trade-tile {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px;
  background: var(--raised); box-shadow: var(--raised-edge); color: var(--text); text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-tint) ease;
}
.trade-tile:active { transform: scale(var(--scale-press)); }
.trade-arrow { margin-left: auto; color: var(--text-3); transition: transform var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .trade-tile:hover { background: var(--raised-2); }
  .trade-tile:hover .trade-arrow { color: var(--text); transform: translateX(3px); }
}

/* ---------------------------------------------------------------- cards and hubs */
.hub-card {
  display: flex; flex-direction: column; gap: 14px; height: 100%; box-sizing: border-box;
  text-decoration: none; color: var(--text);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-tint) ease;
}
.hub-card:active { transform: scale(var(--scale-press)); }
.hub-card-top { display: flex; align-items: center; gap: 12px; }
.hub-card h2, .hub-card h3 { margin: 0; }
.hub-card p { margin: 0; color: var(--text-2); flex: 1; }
.card-tag, .card-more { color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .hub-card:hover { background: var(--raised-2); }
  .hub-card:hover .card-more { color: var(--text); }
}

/* ---------------------------------------------------------------- article blocks from the copy */
.web-prose .summary, .web-prose .note { background: var(--group); padding: 20px var(--pad); }
.web-prose .summary > :first-child, .web-prose .note > :first-child { margin-top: 0; }
.web-prose .summary > :last-child, .web-prose .note > :last-child { margin-bottom: 0; }
.web-prose .hint { padding: 16px 20px; box-shadow: inset 0 0 0 1px var(--line); }
.web-prose .hint > :first-child { margin-top: 0; }
.web-prose .hint > :last-child { margin-bottom: 0; }
.web-prose blockquote.sean { padding: 4px 0 4px 20px; border-left: 2px solid var(--text); color: var(--text); }
.web-prose blockquote.sean p { margin: 0; font-size: 1.15em; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.web-prose blockquote.sean cite { display: block; margin-top: 8px; font-style: normal; color: var(--text-2); font-family: var(--font-mono); font-size: 13px; }
.web-prose .grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .web-prose .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.web-prose .card {
  background: var(--raised); box-shadow: var(--raised-edge); padding: 20px;
  clip-path: polygon(0 0, calc(100% - var(--web-cut)) 0, 100% var(--web-cut), 100% 100%, 0 100%);
}
.web-prose .card > :first-child { margin-top: 0; }
.web-prose .card > :last-child { margin-bottom: 0; }
.web-prose .card > * + * { margin-top: 0.75em; }
.web-prose .card.sample { background: var(--raised-2); }
.web-prose .plain { padding-left: 1.25em; }
.web-prose table td { color: var(--text-2); }
.web-prose table.stat td:last-child, .web-prose table.cmp td:first-child, .web-prose table.stat td:first-child { color: var(--text); }
.web-prose .web-table { margin-block: 1.5em; -webkit-overflow-scrolling: touch; }
.web-prose table { min-width: 480px; }

/* ---------------------------------------------------------------- calculators */
.calc { display: grid; gap: var(--web-gap); }
@media (min-width: 1024px) { .calc { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } .calc-side { position: sticky; top: 24px; } }
.calc-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 720px) { .calc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc-field { display: grid; gap: 8px; align-content: start; }
.calc-field span { color: var(--text); }
.calc-field small { color: var(--text-2); font-size: 14px; line-height: 1.4; }
.calc-field input {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px;
  border: 0; border-radius: var(--r-control); background: var(--control); color: var(--text);
  box-shadow: var(--btn2-ring); font: 500 18px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
.calc-field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc-out { display: grid; margin: 0; background: var(--group); padding: 8px var(--pad) 16px; box-shadow: var(--raised-edge); }
.calc-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); }
.calc-out div:first-child { display: grid; gap: 4px; border-top: 0; padding-block: 16px 20px; }
.calc-out dt { color: var(--text-2); }
.calc-out dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); }
.calc-out dd.type-web-body { font-weight: 500; }
.calc-out .calc-headline { font-family: var(--font-sans); font-size: clamp(44px, 6vw, 64px); line-height: 1; font-weight: 400; letter-spacing: -0.035em; }
.calc-note { margin: 12px 0 0; color: var(--text-2); }

/* ---------------------------------------------------------------- FAQ */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } }
.faq { margin: 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding-block: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; color: var(--text-2); font: 300 26px/1 var(--font-sans);
  transition: transform var(--dur-press) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--text-2); max-width: 62ch; }

/* ---------------------------------------------------------------- sign-up band (lime field) */
.signup { display: grid; gap: 20px; justify-items: start; }
.signup p { margin: 0; max-width: var(--web-lead-measure); }
.signup .t-section { max-width: 20em; }
.signup .web-button-on-lime { background: var(--web-on-lime); color: var(--web-field-lime); box-shadow: none; }
.signup .web-button-on-lime:active { background: var(--web-on-lime); }
.signup .web-button-on-lime:focus-visible { outline-color: var(--web-on-lime); }

/* ---------------------------------------------------------------- footer */
.site-footer { padding-block: 56px 40px; color: var(--text-2); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--web-gap); }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer-cols h2 { margin: 0 0 12px; color: var(--text); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-cols a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-cols a:hover { color: var(--text); } }
.footer-base { display: grid; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-base img { display: block; height: 20px; width: auto; }
.footer-base p { margin: 0; max-width: var(--web-lead-measure); }

/* ================================================================ app-screen mockups
   A frame is a container. Its base font-size tracks the frame width (16px at 1200px wide),
   and every inner size is in em, so the screen scales like a screenshot. Night tokens only. */
.app { margin: 0; container-type: inline-size; }
.app-in {
  --u: clamp(7px, calc(100cqw * 16 / 1200), 16px);
  font-size: var(--u);
  display: grid; grid-template-columns: 13em minmax(0, 1fr);
  background: var(--ground); color: var(--text);
  border-radius: 1.25em; overflow: hidden;
  box-shadow: var(--raised-edge), 0 0 0 1px var(--line), var(--shadow-modal);
  font-family: var(--font-sans); line-height: 1.4; text-align: left;
  min-height: 40em;
}
.app-tall .app-in { min-height: 44em; }
.app i, .app em { font-style: normal; }
.app b { font-weight: 600; }
.ai { width: 1.25em; height: 1.25em; flex: none; }
.app img { display: block; }

/* sidebar */
.as { display: flex; flex-direction: column; gap: 0.25em; padding: 1.25em 0.75em; border-right: 1px solid var(--line); }
.as-brand { display: flex; align-items: center; gap: 0.5em; padding: 0 0.5em 1.25em; font-size: 1.0625em; }
.as-brand img { width: 1.25em; height: 1.25em; }
.as-item { display: flex; align-items: center; gap: 0.75em; min-height: 2.75em; padding: 0 0.75em; border-radius: 0.75em; color: var(--text-2); font-size: 0.9375em; font-weight: 500; }
.as-item.is-on { background: var(--group); color: var(--accent); }
.as-badge { margin-left: auto; min-width: 1.6em; height: 1.6em; border-radius: 0.8em; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 0.75em; font-weight: 600; }
.as-prep { display: grid; gap: 0.4em; margin-top: 1.25em; padding: 1em 0.75em; border-top: 1px solid var(--line); }
.as-prep-head { display: grid; gap: 0.1em; font-size: 0.875em; }
.as-prep-head small { color: var(--text-2); font-size: 0.85em; }
.as-meter { height: 0.375em; border-radius: 0.125em; background: var(--g-track); margin: 0.25em 0 0.5em; overflow: hidden; }
.as-meter span { display: block; height: 100%; background: var(--g-fill); }
.as-step { display: flex; align-items: center; gap: 0.6em; font-size: 0.8125em; color: var(--text-2); min-height: 2.2em; }
.as-step-mark { width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--unlit); flex: none; }
.as-step-mark .ai { width: 0.9em; height: 0.9em; }
.as-step.is-done { color: var(--text); }
.as-step.is-done .as-step-mark { background: var(--text); color: var(--ground); box-shadow: none; }
.as-step.is-now { color: var(--accent); font-weight: 500; }
.as-step.is-now .as-step-mark { box-shadow: inset 0 0 0 2px var(--accent); }

/* top bar + content */
.ab { display: flex; flex-direction: column; min-width: 0; }
.at { display: flex; align-items: center; gap: 1em; padding: 1em 1.5em; }
.at > b { font-size: 1.0625em; }
.at-fresh { display: inline-flex; align-items: center; gap: 0.5em; color: var(--text-2); font-size: 0.9375em; }
.at-range { margin-left: auto; padding: 0.45em 0.9em; border-radius: 0.75em; background: var(--control); box-shadow: var(--btn2-ring); font-size: 0.875em; font-weight: 500; }
.ac { display: flex; flex-direction: column; gap: 1.5em; padding: 0.5em 1.5em 1.75em; }

.am { width: 2em; height: 2em; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--raised-2); box-shadow: inset 0 0 0 1px var(--monogram-edge); color: var(--text); font-size: 0.75em; font-weight: 500; }
.am-36 { width: 2.25em; height: 2.25em; font-size: 0.875em; }
.am-56 { width: 3.5em; height: 3.5em; font-size: 1.25em; }
.al { width: 0.5em; height: 0.5em; border-radius: 50%; flex: none; display: inline-block; }
.al-on { background: var(--text); box-shadow: inset 0 0 0 0.16em var(--text), inset 0 0 0 0.5em var(--text); }
.al-wait { background: var(--accent); }
.al-off { box-shadow: inset 0 0 0 1px var(--unlit); }

.a-grid { display: grid; gap: 1em; }
.a-home { grid-template-columns: 7fr 5fr; }
.a-card { background: var(--raised); box-shadow: var(--raised-edge); border-radius: 1.25em; padding: 1.5em; display: flex; flex-direction: column; gap: 0.75em; align-items: flex-start; }
.a-faces { display: flex; }
.a-faces .am + .am { margin-left: -0.3em; box-shadow: 0 0 0 0.15em var(--raised); }
.a-statement { font-size: 2.125em; line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; }
.a-status { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8125em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.a-wait { color: var(--accent); }
.a-won { color: var(--text); }
.a-row { display: flex; gap: 0.6em; flex-wrap: wrap; margin-top: 0.25em; }
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 2.75em; padding: 0 1.1em; border-radius: 0.75em; font-size: 0.9375em; font-weight: 500; white-space: nowrap; }
.a-btn-1 { background: var(--accent); color: var(--on-accent); }
.a-btn-2 { background: var(--control-raised); box-shadow: var(--btn2-ring); color: var(--text); }
.a-btn-done { background: transparent; box-shadow: var(--btn2-ring); color: var(--text-2); }
.a-label, .a-sec { color: var(--text-2); font-size: 0.8125em; }
.a-result { font-size: 2.75em; line-height: 1.08; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.a-roas b { color: var(--text); font-weight: 500; }
.a-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.a-keys-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-keys span { display: grid; gap: 0.3em; padding: 0.9em 0.75em 0.9em 0; }
.a-keys span + span { padding-left: 0.9em; border-left: 1px solid var(--line); }
.a-keys i { color: var(--text-2); font-size: 0.8125em; }
.a-keys b { font-size: 1.5em; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.a-chart { display: grid; gap: 0.6em; }
.a-chart-head { display: flex; justify-content: space-between; font-size: 0.8125em; color: var(--text-2); }
.a-chart-head em { font-family: var(--font-mono); color: var(--text); }
.a-bars { display: flex; align-items: flex-end; gap: 0.35em; height: 5.5em; border-top: 1px dashed var(--lc-grid); padding-top: 0.25em; }
.a-bars .ab-bar { flex: 1; background: var(--lc-bar); border-radius: 0.125em; min-height: 0.2em; }
.a-bars .ab-bar.is-zero { height: 0.2em; background: var(--lc-zero); }
.a-bars .ab-bar.is-today { background: var(--lc-lit); }
.a-bars .ab-bar.is-wait { background: var(--accent); }
.a-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6875em; color: var(--text-2); }
.a-axis b { color: var(--text); font-weight: 500; }

.a-page-head { display: grid; gap: 0.3em; }
.a-title { font-size: 2.125em; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.a-ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.a-ad { background: var(--raised); box-shadow: var(--raised-edge); border-radius: 1.25em; padding: 0.9em; display: grid; gap: 0.75em; }
.a-ad-head { display: flex; justify-content: space-between; font-size: 0.8125em; }
.a-ad-head i { color: var(--text-2); }
.a-ad img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.6em; }
.a-ad .a-btn { width: 100%; box-sizing: border-box; }
.a-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-top: 1em; border-top: 1px solid var(--line); }

.a-split { display: grid; grid-template-columns: 26em minmax(0, 1fr); gap: 1.5em; }
.a-list { display: grid; gap: 0.75em; align-content: start; padding-right: 1.5em; border-right: 1px solid var(--line); }
.a-search { min-height: 2.75em; display: flex; align-items: center; padding: 0 1em; border-radius: 0.75em; background: var(--group); box-shadow: var(--btn2-ring); color: var(--text-2); font-size: 0.9375em; }
.a-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.15em; border-radius: 0.75em; background: var(--seg-track); box-shadow: var(--segment-ring); font-size: 0.875em; text-align: center; }
.a-seg > * { padding: 0.5em 0; border-radius: 0.6em; color: var(--text-2); font-weight: 500; }
.a-seg b { background: var(--seg-thumb); box-shadow: var(--seg-thumb-edge); color: var(--text); }
.a-seg em { color: var(--accent); }
.a-group { display: grid; background: var(--group); border-radius: 1.25em; overflow: hidden; }
.a-li { display: flex; align-items: center; gap: 0.75em; padding: 0.8em 1em; }
.a-li + .a-li { box-shadow: inset 0 1px 0 var(--line); }
.a-li.is-open { background: var(--raised); }
.a-li-main { display: grid; min-width: 0; flex: 1; }
.a-li-main b { font-size: 0.9375em; }
.a-li-main i { color: var(--text-2); font-size: 0.8125em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-detail { display: grid; gap: 1.25em; align-content: start; }
.a-hero-lead { align-items: flex-start; }
.a-round { width: 2.75em; height: 2.75em; border-radius: 50%; display: grid; place-items: center; background: var(--control-raised); }
.a-journey { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.a-journey::before { content: ""; position: absolute; left: 0.375em; right: 25%; top: 0.375em; height: 1px; background: var(--line-raised); }
.a-step-j { display: grid; gap: 0.5em; position: relative; font-size: 0.8125em; color: var(--text-2); }
.a-step-j .al { width: 0.75em; height: 0.75em; background-color: var(--ground); }
.a-step-j .al-on { background: var(--text); }
.a-step-j .al-wait { background: var(--accent); }
.a-step-j.is-done { color: var(--text); }
.a-step-j.is-next { color: var(--accent); font-weight: 500; }
.a-facts { display: grid; }
.a-facts span { display: flex; justify-content: space-between; gap: 1em; padding: 0.7em 0; border-top: 1px solid var(--line); font-size: 0.9375em; }
.a-facts i { color: var(--text-2); }
.a-facts b { font-weight: 400; text-align: right; }

.a-sub { font-size: 1.25em; font-weight: 600; letter-spacing: -0.01em; }
.a-peers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; }
.a-peer { display: grid; gap: 0.6em; }
.a-peer-head { display: flex; justify-content: space-between; align-items: baseline; }
.a-peer-head i { color: var(--text-2); font-size: 0.9375em; }
.a-peer-head b { font-size: 1.5em; font-weight: 400; font-variant-numeric: tabular-nums; }
.a-bench { position: relative; height: 0.375em; border-radius: 0.125em; background: var(--bench-track); margin-top: 1.4em; }
.a-band { position: absolute; top: 0; bottom: 0; background: var(--bench-band); border-radius: 0.125em; }
.a-med { position: absolute; top: -0.2em; bottom: -0.2em; width: 2px; background: var(--bench-median); }
.a-you { position: absolute; top: -0.4em; bottom: -0.4em; width: 2px; background: var(--bench-you); }
.a-you em { position: absolute; bottom: 1.3em; left: 50%; transform: translateX(-50%); font-size: 0.6875em; font-weight: 500; }
.a-say { font-size: 0.875em; }

/* Narrow frames (phones): drop the sidebar so the content stays legible. */
@container (max-width: 640px) {
  .app-in { --u: clamp(8px, calc(100cqw * 16 / 560), 16px); grid-template-columns: minmax(0, 1fr); }
  .as { display: none; }
  .a-home, .a-split, .a-peers { grid-template-columns: minmax(0, 1fr); }
  .a-list { padding-right: 0; border-right: 0; }
  .a-detail { display: none; }
  .a-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-keys span:nth-child(4) { padding-left: 0; border-left: 0; }
  .a-keys span:nth-child(n+4) { border-top: 1px solid var(--line); }
  .a-ads { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; }
  .at-fresh { display: none; }
}

/* ================================================================ home page, turned up
   Display sizes (56 to 88) are allowed on landing compositions by the brand book. */
.t-display { font-family: var(--font); font-size: clamp(44px, calc(4.4vw + 22px), 88px); line-height: 0.98; font-weight: 400; letter-spacing: -0.04em; }
.t-slab { font-family: var(--font); font-size: clamp(36px, calc(4.2vw + 16px), 84px); line-height: 1; font-weight: 400; letter-spacing: -0.04em; }
.t-big { font-family: var(--font); font-size: clamp(32px, calc(2.4vw + 22px), 56px); line-height: 1.04; font-weight: 400; letter-spacing: -0.034em; }

/* hero */
.hero-x { padding-block: 48px 72px; overflow: hidden; }
.hero-x-grid { display: grid; gap: 48px; }
.hero-x-copy { display: grid; gap: 24px; }
.hero-x-title { display: grid; gap: 20px; }
.hero-x-title .t-display { max-width: 12em; }
.hero-x-pitch { display: grid; gap: 24px; justify-items: start; }
.hero-x-art { position: relative; }
@media (min-width: 1024px) {
  .hero-x { padding-block: 72px 120px; }
  .hero-x-copy { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 56px; }
  .hero-x-pitch { padding-bottom: 8px; }
  .hero-x-art { padding-left: 96px; }
}
.tl-card {
  margin: -40px 0 0 16px; position: relative; z-index: 2; width: min(92%, 340px);
  background: var(--raised); box-shadow: var(--raised-edge), var(--shadow-float);
  border-radius: var(--r-surface); padding: 20px 22px;
}
@media (min-width: 1024px) { .tl-card { position: absolute; left: 0; bottom: -64px; margin: 0; } }
.tl-head { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 15px; }
.tl-head i { font-style: normal; color: var(--text-2); font-size: 13px; }
.tl-card ol { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.tl-card ol::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line-raised); }
.tl-step { display: grid; grid-template-columns: 12px 64px minmax(0, 1fr); gap: 10px; align-items: start; position: relative; }
.tl-step .al { width: 11px; height: 11px; margin-top: 4px; }
.tl-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); padding-top: 2px; font-variant-numeric: tabular-nums; }
.tl-copy { display: grid; gap: 2px; }
.tl-copy b { font-size: 15px; font-weight: 500; line-height: 1.3; }
.tl-copy i { font-style: normal; font-size: 13px; color: var(--text-2-raised); line-height: 1.35; }
.tl-wait .tl-copy b, .tl-wait .tl-time { color: var(--accent); }

/* lime slab */
.slab { padding-block: clamp(64px, 9vw, 128px); }
.slab .t-slab { max-width: 15em; }

/* six questions */
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .q-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .q-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.q-card {
  display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 24px;
  background: var(--raised); box-shadow: var(--raised-edge);
  clip-path: polygon(0 0, calc(100% - var(--web-cut)) 0, 100% var(--web-cut), 100% 100%, 0 100%);
}
.q-n { margin: 0; color: var(--text-2); }
.q-q { margin: 0; font-size: clamp(24px, calc(0.8vw + 19px), 30px); line-height: 1.12; font-weight: 400; letter-spacing: -0.025em; text-wrap: balance; }
.q-a { display: flex; gap: 12px; align-items: flex-start; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-raised); }
.q-a p { margin: 0; color: var(--text-2-raised); }
.q-a b { color: var(--text); font-weight: 600; }
.q-icon { width: 22px; height: 22px; flex: none; color: var(--text); margin-top: 2px; }

/* progress rail */
.band-group { background: var(--group); }
.rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: rail; position: relative; margin-bottom: 56px; }
.rail-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding-bottom: 24px; position: relative; }
.rail-step::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--line-raised); }
.rail-step.is-last::before { display: none; }
.rail-dot { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--ground); font: 500 17px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.rail-step.is-last .rail-dot { background: var(--accent); color: var(--on-accent); }
.rail-step h3, .rail-step p { margin: 0; }
.rail-step p { color: var(--text-2); }
@media (min-width: 1024px) {
  .rail { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .rail-step { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-bottom: 0; }
  .rail-step::before { left: 56px; right: -24px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .rail-dot { grid-row: auto; }
}
.shot-wrap { display: grid; gap: 16px; }
.shot-cap { margin: 0; color: var(--text-2); max-width: 60em; }

/* leads split */
.split-x { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .split-x { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; }
}
.ticks { display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .q-icon { color: var(--text); }
.split-x { overflow: visible; }
section:has(> .split-x) { overflow: hidden; }

/* ROAS vs CPL */
.band-ink { background: var(--ground); border-top: 1px solid var(--line); }
.vs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 56px; }
@media (min-width: 720px) { .vs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs-card { display: grid; gap: 20px; padding: 28px; background: var(--group); box-shadow: inset 0 0 0 1px var(--line); align-content: start; }
.vs-win { background: var(--raised); box-shadow: var(--raised-edge); clip-path: polygon(0 0, calc(100% - var(--web-cut)) 0, 100% var(--web-cut), 100% 100%, 0 100%); }
.vs-tag { margin: 0; color: var(--text-2); }
.vs-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.vs-figs div { padding-top: 12px; }
.vs-figs dt { color: var(--text-2); font-size: 14px; }
.vs-figs dd { margin: 4px 0 0; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vs-roas { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.vs-roas span { font-size: clamp(64px, 9vw, 120px); line-height: 0.95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.vs-card:not(.vs-win) .vs-roas span { color: var(--warning); }
.vs-roas i { font-style: normal; color: var(--text-2); font-size: 17px; }
.vs-note { margin: 0; color: var(--text-2); }

/* photo band */
.photo-band { position: relative; background: var(--ground); }
.photo-band > img { display: block; width: 100%; height: clamp(320px, 52vw, 680px); object-fit: cover; }
.photo-band-copy { position: relative; margin-top: -96px; padding-bottom: var(--web-section); }
.photo-panel {
  display: grid; gap: 16px; max-width: 36em; padding: clamp(24px, 4vw, 48px);
  background: var(--ground); box-shadow: var(--raised-edge);
  clip-path: polygon(0 0, calc(100% - var(--web-cut)) 0, 100% var(--web-cut), 100% 100%, 0 100%);
}
.photo-panel h2, .photo-panel p { margin: 0; }
.photo-panel p { color: var(--text-2); }
@media (min-width: 1024px) { .photo-band-copy { margin-top: -220px; } }

/* social */
.soon { margin: 0; color: var(--text); padding: 3px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--text-3); }
.social { display: grid; gap: 32px; }
@media (min-width: 1024px) { .social { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }
.social-side { display: grid; gap: 32px; }

/* comparison */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-x { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cmp-x th, .cmp-x td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.4; }
.cmp-x thead th, .cmp-x thead td { padding-block: 22px; font-weight: 500; color: var(--text-2); }
.cmp-x tbody th { font-weight: 400; color: var(--text-2); width: 26%; }
.cmp-x td { color: var(--text-2); }
.cmp-x .is-us { background: var(--raised); color: var(--text); font-weight: 500; }
.cmp-x thead .is-us img { display: block; height: 24px; width: auto; }

/* mockup additions: leaderboard, messages */
.a-lb-you { display: flex; gap: 2em; padding: 1em 1.25em; border-radius: 1.25em; background: var(--raised); box-shadow: var(--raised-edge); }
.a-lb-you span { display: grid; gap: 0.2em; }
.a-lb-you i { color: var(--text-2); font-size: 0.8125em; }
.a-lb-you b { font-size: 1.25em; font-weight: 500; }
.a-lb { display: grid; }
.a-lb-row { display: grid; grid-template-columns: 2.5em minmax(0, 1fr) 5em 4em 6.5em 3em; align-items: center; gap: 0.75em; padding: 0.7em 0.5em; border-bottom: 1px solid var(--line); font-size: 0.9375em; }
.a-lb-head { color: var(--text-2); font-size: 0.8125em; padding-block: 0.5em; }
.a-lb-rank { font-variant-numeric: tabular-nums; color: var(--text-2); }
.a-lb-biz { display: flex; align-items: center; gap: 0.75em; min-width: 0; }
.a-lb-biz > span:last-child { display: grid; min-width: 0; }
.a-lb-biz b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-lb-biz b em { font-size: 0.75em; font-weight: 500; padding: 0.1em 0.5em; border-radius: 0.4em; background: var(--text); color: var(--ground); margin-left: 0.4em; }
.a-lb-biz i { color: var(--text-2); font-size: 0.8125em; }
.a-lb-roas { font-size: 1.125em; font-weight: 500; font-variant-numeric: tabular-nums; }
.a-lb-row > i { color: var(--text-2); font-variant-numeric: tabular-nums; }
.a-lb-row.is-you { background: var(--raised); border-radius: 0.75em; border-bottom-color: transparent; }
.a-round-sm { width: 2.25em; height: 2.25em; justify-self: end; }
.a-round-sm .ai { width: 1em; height: 1em; }

.app-phone { max-width: 400px; }
.app-in-phone { grid-template-columns: minmax(0, 1fr); --u: clamp(11px, calc(100cqw * 16 / 400), 16px); min-height: 0; }
.app-in-phone .ac { padding: 1.25em; gap: 1em; }
.a-chat-head { display: flex; align-items: center; gap: 0.75em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
.a-chat-head > span:last-child { display: grid; }
.a-chat-head i { color: var(--text-2); font-size: 0.8125em; }
.a-rule-note { font-size: 0.8125em; color: var(--text-2); padding: 0.6em 0.9em; border-radius: 0.75em; background: var(--group); }
.a-thread { display: grid; gap: 0.75em; }
.a-msg { display: flex; gap: 0.5em; align-items: flex-end; max-width: 88%; }
.a-msg > span:last-child { padding: 0.7em 0.9em; border-radius: 0.9em; font-size: 0.9375em; line-height: 1.4; }
.a-msg-them > span:last-child { background: var(--raised); box-shadow: var(--raised-edge); }
.a-msg-me { justify-self: end; }
.a-msg-me > span:last-child { background: var(--text); color: var(--ground); }
.a-composer { display: flex; align-items: center; justify-content: space-between; min-height: 3.25em; padding: 0 0.5em 0 1em; border-radius: 0.75em; background: var(--group); box-shadow: var(--btn2-ring); color: var(--text-2); font-size: 0.9375em; }
.a-send { width: 2.25em; height: 2.25em; border-radius: 50%; display: grid; place-items: center; background: var(--control); color: var(--text-3); }
.a-send .ai { width: 1em; height: 1em; }
@container (max-width: 640px) {
  .a-lb-row { grid-template-columns: 2em minmax(0, 1fr) 4.5em 3em; }
  .a-lb-row > :nth-child(5), .a-lb-row > :nth-child(6) { display: none; }
  .a-lb-you { flex-direction: column; gap: 0.75em; }
}

/* ================================================================ home v3: calmer, one idea per section */
.sect { padding-block: clamp(80px, 10vw, 152px); }
.section-head.center { justify-items: center; text-align: center; margin-inline: auto; margin-bottom: clamp(40px, 5vw, 72px); max-width: 52em; }
.section-head.center .web-lead { margin-inline: auto; }
.t-step { font-family: var(--font); font-size: clamp(28px, calc(1.6vw + 20px), 44px); line-height: 1.06; font-weight: 400; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }

/* hero */
.hero-v3 { padding-block: clamp(56px, 8vw, 112px) 0; overflow: hidden; }
.hero-v3-copy { display: grid; justify-items: center; text-align: center; gap: 28px; }
.hero-v3-copy .t-display { max-width: 13em; }
.hero-v3-copy .web-lead { margin-inline: auto; max-width: 34em; }
.hero-v3-copy .actions { justify-content: center; }
.hero-v3-art { margin-top: clamp(48px, 6vw, 88px); }
.hero-v3-art .app { max-width: 1120px; margin-inline: auto; }

/* proof strip (static, never loops) */
.proof { padding-block: 40px 56px; }
.proof .web-page { display: grid; gap: 20px; justify-items: center; }
.proof-label { margin: 0; color: var(--text-2); }
.proof-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; color: var(--text-2); }
.proof-list li { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; }
.proof-icon { width: 20px; height: 20px; color: var(--text-3); }

/* focused product cards */
.fc-stage {
  display: grid; place-items: center; gap: 20px;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px);
  background: var(--raised); box-shadow: var(--raised-edge);
  clip-path: polygon(0 0, calc(100% - var(--web-cut)) 0, 100% var(--web-cut), 100% 100%, 0 100%);
}
.band-group .fc-stage { background: var(--ground); }
.fc { margin: 0; width: min(100%, 400px); }
.fc-in {
  display: grid; gap: 16px; padding: 22px;
  background: var(--raised-2); color: var(--text);
  border-radius: var(--r-surface);
  box-shadow: inset 0 1px 0 var(--line-raised), var(--shadow-float);
  font-family: var(--font-sans); line-height: 1.4;
}
.band-group .fc-in { background: var(--raised); box-shadow: var(--raised-edge), var(--shadow-float); }
.fc i, .fc em { font-style: normal; }
.fc .ai { width: 18px; height: 18px; }
.fc-head { display: grid; gap: 4px; }
.fc-head b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.fc-sub { color: var(--text-2-raised); font-size: 15px; }
.fc-kicker { color: var(--text-2-raised); font-size: 13px; }
.fc-q { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.fc-body { color: var(--text-2-raised); font-size: 15px; line-height: 1.45; }
.fc-progress { height: 4px; border-radius: 2px; background: var(--g-track); overflow: hidden; }
.fc-progress span { display: block; height: 100%; background: var(--text); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-chip { padding: 9px 14px; border-radius: var(--r-control); background: var(--control-raised); box-shadow: var(--btn2-ring); font-size: 15px; font-weight: 500; color: var(--text-2-raised); }
.fc-chip.is-on { background: var(--text); color: var(--ground); box-shadow: none; }
.fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-control); font-size: 15px; font-weight: 500; white-space: nowrap; }
.fc-btn-1 { background: var(--accent); color: var(--on-accent); }
.fc-btn-2 { background: var(--control-raised); box-shadow: var(--btn2-ring); color: var(--text); }
.fc-wide { width: 100%; box-sizing: border-box; }
.fc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fc-row-end { display: flex; justify-content: flex-end; }
.fc-seg { display: grid; grid-template-columns: repeat(5, 1fr); padding: 3px; border-radius: var(--r-control); background: var(--seg-track); box-shadow: var(--segment-ring); }
.fc-seg span { text-align: center; padding: 10px 0; border-radius: var(--r-tile); color: var(--text-2-raised); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fc-seg .is-on { background: var(--seg-thumb); box-shadow: var(--seg-thumb-edge); color: var(--text); }
.fc-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-raised); }
.fc-facts span { display: grid; gap: 4px; padding-top: 12px; }
.fc-facts i { color: var(--text-2-raised); font-size: 13px; }
.fc-facts b { font-size: 22px; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fc-facts-col { grid-template-columns: 1fr; border-top: 0; }
.fc-facts-col span { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-raised); }
.fc-facts-col b { font-size: 15px; text-align: right; }
.fc-ad-head { display: flex; justify-content: space-between; font-size: 14px; }
.fc-ad-head i { color: var(--text-2-raised); }
.fc img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.fc-tls { display: grid; gap: 0; position: relative; }
.fc-tl { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-raised); }
.fc-tl .al { width: 10px; height: 10px; }
.fc-tl b { font-size: 15px; font-weight: 500; }
.fc-tl i { color: var(--text-2-raised); font-size: 13px; text-align: right; }
.fc-tl:last-child b { font-weight: 600; }
.fc-mail-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fc-mail-top i { margin-left: auto; color: var(--text-2-raised); font-size: 13px; }
.fc-mail-subj { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.fc-mail .fc-btn { justify-self: start; }
.fc-lead-top { display: flex; align-items: center; gap: 14px; }
.fc-lead-top > span:last-child { display: grid; gap: 4px; }
.fc-name { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.fc-wait { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 14px; font-weight: 500; }
.fc-journey { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.fc-journey::before { content: ""; position: absolute; left: 6px; right: 25%; top: 6px; height: 1px; background: var(--line-raised); }
.fc-j { display: grid; gap: 8px; position: relative; font-size: 12px; color: var(--text-2-raised); }
.fc-j .al { width: 12px; height: 12px; background-color: var(--raised-2); box-shadow: inset 0 0 0 1px var(--unlit); }
.fc-j .al-on { background: var(--text); box-shadow: none; }
.fc-j .al-wait { background: var(--accent); box-shadow: none; }
.fc-j.is-done { color: var(--text); }
.fc-j.is-next { color: var(--accent); font-weight: 500; }
.fc-list { display: grid; }
.fc-li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-raised); }
.fc-li > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.fc-li b { font-size: 15px; }
.fc-li i { color: var(--text-2-raised); font-size: 13px; }
.fc-st { font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--text-2-raised); }
.fc-st-wait { color: var(--accent); }
.fc-st-won { color: var(--text); }
.fc-big { font-size: clamp(48px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.fc-big-sm { font-size: 48px; }
.fc-big small { font-size: 17px; letter-spacing: 0; color: var(--text-2-raised); margin-left: 6px; }
.fc-note { display: flex; align-items: center; gap: 8px; color: var(--text-2-raised); font-size: 13px; padding-top: 12px; border-top: 1px solid var(--line-raised); }
.fc .am { font-size: 12px; width: 32px; height: 32px; }
.fc .am-56 { width: 56px; height: 56px; font-size: 20px; }
.fc-wide-card { width: min(100%, 460px); }
.fc-lb { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-raised); }
.fc-lb > span { display: grid; min-width: 0; }
.fc-lb b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-lb span i { color: var(--text-2-raised); font-size: 13px; }
.fc-rank { color: var(--text-2-raised); font-variant-numeric: tabular-nums; }
.fc-roas { font-size: 17px !important; font-variant-numeric: tabular-nums; }
.fc-lb em { font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 4px; background: var(--text); color: var(--ground); margin-left: 6px; }
.fc-lb.is-you { background: var(--raised); margin-inline: -10px; padding-inline: 10px; border-radius: var(--r-control); }
.fc-gap { text-align: center; color: var(--text-3); letter-spacing: 0.3em; padding: 2px 0; }
.fc-thread { display: grid; gap: 10px; }
.fc-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.4; background: var(--raised); box-shadow: var(--raised-edge); }
.fc-msg-me { justify-self: end; background: var(--text); color: var(--ground); box-shadow: none; }

/* zig-zag steps */
.zz { display: grid; gap: clamp(64px, 8vw, 120px); }
.zz-step { display: grid; gap: 32px; align-items: center; }
.zz-copy { display: grid; gap: 16px; align-content: center; }
.zz-copy .type-web-lead { margin: 0; color: var(--text-2); max-width: 30em; }
.zz-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--ground); font: 500 17px/1 var(--font-sans); }
.zz-step:last-child .zz-n { background: var(--accent); color: var(--on-accent); }
@media (min-width: 1024px) {
  .zz-step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; }
  .zz-flip .zz-copy { order: 2; }
}

/* leads duo, social duo */
.duo-stage { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .duo-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } }
.social-stage { padding-block: clamp(32px, 5vw, 72px); }
@media (min-width: 1024px) { .social-stage { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* money protected */
.safe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) { .safe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.safe-item { display: grid; gap: 14px; align-content: start; }
.safe-item h3, .safe-item p { margin: 0; }
.safe-item > p { color: var(--text-2); }
.safe-item .fc-stage { min-height: 0; }
@media (min-width: 1024px) { .safe { grid-auto-rows: auto; } .safe-item { grid-template-rows: 520px auto auto; } .safe-item .fc-stage { height: 100%; box-sizing: border-box; } }
.safe-item .fc { width: min(100%, 340px); }

/* price */
.price { display: grid; justify-items: center; text-align: center; gap: 20px; }
.price .web-lead { margin-inline: auto; max-width: 36em; }

/* scroll reveals: only when the head flag is set (scripts on, motion allowed) */
.rv .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.rv .reveal.in { opacity: 1; transform: none; }

/* monograms: the brand book's fills, so initials read as faces */
.am { background: var(--monogram); }
.a-card .am, .fc-in .am, .a-li.is-open .am { background: var(--monogram-raised); }
.a-faces .am { width: 2.25em; height: 2.25em; font-size: 0.8em; }

@media (min-width: 1024px) { .zz-step.zz-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

.band-group .fc-stage { box-shadow: inset 0 0 0 1px var(--line); }

.zz, .zz-step { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .zz-step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .zz-step.zz-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.fc-seg span { min-width: 0; }

.fc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-row > .fc-btn { flex: 1 1 auto; }
.fc-row-end > .fc-btn { flex: 0 0 auto; }
@media (max-width: 719px) {
  .fc-stage { padding: 20px 12px; }
  .fc-in { padding: 18px; }
}

/* ================================================================ more lime on the home page (Sean 11/04: ~15% lime)
   Lime fields carry web-on-lime words; product screens and cards sit on them as dark objects. */
.hero-lime { position: relative; }
.hero-lime::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: var(--web-field-lime); z-index: 0; }
.hero-lime > .web-page { position: relative; z-index: 1; }
@media (max-width: 1023px) { .hero-lime::after { height: 38%; } }

.slab-join { padding-bottom: clamp(32px, 4vw, 56px); }
.pain-lime { padding-top: 0; }
.pain-lime .eyebrow { color: var(--web-on-lime); opacity: 0.72; }
.pain-lime .t-big { color: var(--web-on-lime); }
.pain-lime .q-card { box-shadow: var(--raised-edge), var(--shadow-float); }

.rail-dot { background: var(--accent); color: var(--on-accent); }
.ticks .q-icon { color: var(--accent); }
.vs-win .vs-roas span { color: var(--accent); }
.soon { background: var(--accent); color: var(--on-accent); box-shadow: none; }

.leads-lime .eyebrow { color: var(--web-on-lime); opacity: 0.72; }
.leads-lime .t-big, .leads-lime .web-lead, .leads-lime .ticks .type-web-body { color: var(--web-on-lime); }
.leads-lime .ticks .q-icon { color: var(--web-on-lime); }
.leads-lime .app { box-shadow: var(--shadow-modal); }

.pain-lime .q-card { color: var(--text); }
.pain-lime .q-card .q-q { color: var(--text); }
.hero-lime::after { bottom: -2px; }
.slab-join { margin-top: -1px; position: relative; z-index: 1; }

/* ================================================================ hover: invert to lime (Sean 11/04)
   Mouse pointers only. Cards and grey buttons fill lime; their words and icons go dark. */
.trade-tile, .hub-card, .web-button-secondary { transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform var(--dur-press) var(--ease-out); }
.trade-tile .icon-tile, .hub-card .icon-tile { transition: background-color 160ms ease, color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .trade-tile:hover, .hub-card:hover { background: var(--accent); color: var(--on-accent); }
  .trade-tile:hover .trade-arrow { color: var(--on-accent); transform: translateX(3px); }
  .hub-card:hover p, .hub-card:hover .card-tag, .hub-card:hover .card-more { color: var(--on-accent); }
  .trade-tile:hover .icon-tile, .hub-card:hover .icon-tile { background: var(--on-accent); color: var(--accent); box-shadow: none; }
  .web-button-secondary:hover { background: var(--accent); color: var(--on-accent); box-shadow: none; }
}

/* six-trade ad strip */
.ad-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 720px) { .ad-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ad-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ad-tile { display: grid; gap: 10px; }
.ad-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-control); box-shadow: var(--raised-edge); }
.ad-tile span { color: var(--text-2); }
.ads-strip-sec .section-head-row { align-items: end; }
.ads-strip-sec .section-head-row .web-lead { max-width: 28em; }

/* ================================================================ "One brief in. A whole campaign out." */
.kit { overflow: hidden; }
.made-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font: 500 13px/1.3 var(--font-sans); white-space: nowrap; }
.made-tag-on { position: absolute; top: 10px; left: 10px; z-index: 1; }
.ad-tile { position: relative; }

.kit-brief { display: grid; gap: 14px; padding: 20px 24px; background: var(--raised); box-shadow: var(--raised-edge); border-radius: var(--r-surface); max-width: 880px; margin-inline: auto; }
.kit-step { margin: 0; color: var(--text-2); }
.kit-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
@media (min-width: 1024px) { .kit-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kit-chips li { display: grid; gap: 2px; }
.kit-chips i { font-style: normal; color: var(--text-2-raised); font-size: 13px; }
.kit-chips b { font-weight: 500; font-size: 17px; }

.kit-fanout { display: none; }
@media (min-width: 1024px) {
  .kit-fanout { display: grid; grid-template-columns: repeat(3, 1fr); height: 64px; position: relative; max-width: 100%; }
  .kit-fanout::before { content: ""; position: absolute; left: 50%; top: 0; height: 24px; width: 2px; background: var(--accent); }
  .kit-fanout::after { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 24px; height: 2px; background: var(--accent); }
  .kit-fanout span { position: relative; }
  .kit-fanout span::after { content: ""; position: absolute; left: 50%; top: 24px; bottom: 0; width: 2px; background: var(--accent); }
}
.kit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 40px; }
@media (min-width: 1024px) { .kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 0; } }
.kit-col { display: grid; gap: 20px; align-content: start; }
.kit-col-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kit-col-head h3 { margin: 0; }
.kit-note { margin: 0; color: var(--text-2); }

/* graphics: a fanned stack */
.kit-fan { position: relative; aspect-ratio: 1 / 1.08; max-width: 380px; width: 100%; margin-inline: auto; }
.kit-fan img { position: absolute; width: 72%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-control); box-shadow: var(--raised-edge), var(--shadow-float); transition: transform 400ms var(--ease-out); }
.kit-fan img:nth-child(1) { left: 0; top: 10%; transform: rotate(-8deg); }
.kit-fan img:nth-child(2) { right: 0; top: 4%; transform: rotate(7deg); }
.kit-fan img:nth-child(3) { left: 14%; top: 20%; transform: rotate(-1deg); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kit-fan:hover img:nth-child(1) { transform: rotate(-12deg) translateX(-10px); }
  .kit-fan:hover img:nth-child(2) { transform: rotate(11deg) translateX(10px); }
}

/* ad copy: a neutral feed post with numbered callouts */
.post { margin: 0 auto; width: 100%; max-width: 380px; background: var(--raised); box-shadow: var(--raised-edge), var(--shadow-float); border-radius: var(--r-surface); overflow: hidden; }
.post-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.post-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--monogram-raised); font: 500 13px/1 var(--font-sans); flex: none; }
.post-top > span:last-child { display: grid; }
.post-top b { font-size: 15px; font-weight: 600; }
.post-top i { font-style: normal; font-size: 13px; color: var(--text-2-raised); }
.post-text { margin: 0; padding: 0 16px 12px; font-size: 15px; line-height: 1.45; }
.post img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.post-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--raised-2); }
.post-link > span:first-child { display: grid; gap: 2px; min-width: 0; }
.post-link i { font-style: normal; font-size: 12px; color: var(--text-2-raised); }
.post-link b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.post-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; background: var(--control-raised); box-shadow: var(--btn2-ring); font-size: 14px; font-weight: 500; }
.pin { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 600 12px/1 var(--font-sans); margin-right: 6px; vertical-align: 2px; flex: none; }
.kit-legend { display: grid; gap: 10px; }
.kit-legend li { display: flex; align-items: flex-start; gap: 4px; }
.kit-legend .pin { margin-top: 2px; }
.kit-legend .type-web-body { color: var(--text-2); }

/* video: a phone plus a three-frame storyboard */
.phone { margin: 0 auto; width: min(100%, 236px); padding: 8px; border-radius: 34px; background: var(--raised-2); box-shadow: var(--raised-edge), var(--shadow-modal); }
.phone-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: var(--ground); }
.phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone-cap { position: absolute; left: 12px; right: 12px; top: 16%; padding: 8px 10px; border-radius: 8px; background: var(--ground); color: var(--text); font: 600 17px/1.2 var(--font-sans); text-align: center; text-wrap: balance; }
.phone-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.phone-play .icon { width: 22px; height: 22px; margin-left: 3px; }
.phone-bar { position: absolute; left: 12px; right: 12px; bottom: 44px; height: 3px; border-radius: 2px; background: var(--g-track); }
.phone-bar span { display: block; width: 20%; height: 100%; background: var(--accent); }
.phone-meta { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; justify-content: space-between; font-size: 12px; }
.phone-meta i { font-style: normal; color: var(--text-2); font-family: var(--font-mono); }
.storyboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.storyboard li { display: grid; gap: 6px; align-content: start; }
.storyboard img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; box-shadow: var(--raised-edge); }
.storyboard .type-web-label { color: var(--text-2); font-size: 12px; }
.kit-line { font-size: 14px; line-height: 1.35; color: var(--text); }

.ad-tile-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.made-tag-sm { padding: 2px 7px; font-size: 11px; }
.phone-meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 11px; }
.phone-meta { gap: 8px; }
.kit-fan img { width: 66%; }
.kit-fan img:nth-child(1) { left: 4%; top: 12%; }
.kit-fan img:nth-child(2) { right: 4%; top: 5%; }
.kit-fan img:nth-child(3) { left: 17%; top: 22%; }

/* trade kit (lime) used on trade and calculator pages */
.tkit .eyebrow { color: var(--web-on-lime); opacity: 0.72; }
.tkit .t-big, .tkit .web-lead, .tkit .kit-col-head h3 { color: var(--web-on-lime); }
.tkit .made-tag { background: var(--web-on-lime); color: var(--web-field-lime); }
.tkit .pin { background: var(--accent); color: var(--on-accent); }
.tkit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1024px) { .tkit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.tkit-col { display: grid; gap: 16px; align-content: start; }
.tkit-ad { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-surface); box-shadow: var(--shadow-float); margin-inline: auto; }
.tkit .post { color: var(--text); }
.tkit .phone { box-shadow: var(--shadow-modal); }

.tkit .phone-screen img { object-position: 82% 50%; }

.tkit .phone-screen img { object-position: 70% 55%; transform: scale(1.45); transform-origin: 66% 52%; }

/* ================================================================ long articles: chapters, contents menu, visual breaks */
.prose-wrap.has-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.toc { display: none; }
.toc-mobile { border-radius: var(--r-control); background: var(--group); box-shadow: var(--btn2-ring); }
.toc-mobile summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { content: "+"; color: var(--text-2); font: 300 24px/1 var(--font-sans); }
.toc-mobile[open] summary::after { content: "\2212"; }
.toc-mobile .toc-list { padding: 0 16px 12px; }
.toc-list { list-style: none; margin: 0; counter-reset: toc; display: grid; gap: 2px; }
.toc-list li { counter-increment: toc; }
.toc-list a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: var(--r-tile); color: var(--text-2); text-decoration: none; font-size: 15px; line-height: 1.35; transition: background-color var(--dur-tint) ease, color var(--dur-tint) ease; }
.toc-list a::before { content: counter(toc, decimal-leading-zero); font: 400 13px/1.6 var(--font-mono); color: var(--text-3); }
.toc-list a[aria-current] { background: var(--accent); color: var(--on-accent); }
.toc-list a[aria-current]::before { color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .toc-list a:hover { color: var(--text); background: var(--group); } .toc-list a[aria-current]:hover { background: var(--accent); color: var(--on-accent); } }
@media (min-width: 1024px) {
  .prose-wrap.has-toc { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; }
  .toc { display: block; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
  .toc-label { margin: 0 0 10px; color: var(--text-2); padding-left: 10px; }
  .toc-mobile { display: none; }
}

/* chapters */
.web-prose-long { counter-reset: chap; }
.web-prose-long > h2 { counter-increment: chap; margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.web-prose-long > h2::before { content: counter(chap, decimal-leading-zero); display: block; margin-bottom: 10px; font: 500 14px/1 var(--font-mono); color: var(--accent); }
.web-prose-long > h2:first-of-type { margin-top: 1.6em; }

/* pull quotes */
.web-prose blockquote.sean { margin-block: 2em; padding: 6px 0 6px 24px; border-left: 4px solid var(--accent); }
.web-prose blockquote.sean p { font-size: clamp(22px, 1.2vw + 16px, 30px); line-height: 1.25; font-weight: 400; letter-spacing: -0.02em; }

/* lists */
.web-prose ul.plain { list-style: none; padding-left: 0; }
.web-prose ul.plain > li { position: relative; padding-left: 34px; }
.web-prose ul.plain > li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.web-prose ul.plain > li::after {
  content: ""; position: absolute; left: 4px; top: calc(0.2em + 4px); width: 14px; height: 14px; background: var(--on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.web-prose ol.plain { list-style: none; padding-left: 0; counter-reset: stp; display: grid; gap: 14px; }
.web-prose ol.plain > li { counter-increment: stp; position: relative; padding: 16px 18px 16px 62px; background: var(--group); border-radius: var(--r-control); margin: 0; }
.web-prose ol.plain > li::before { content: counter(stp); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 600 15px/1 var(--font-sans); }
.web-prose ol.plain > li + li { margin-top: 0; }

/* tips and tables as cards */
.web-prose .hint { box-shadow: none; background: var(--group); border-left: 4px solid var(--accent); border-radius: 0 var(--r-control) var(--r-control) 0; padding: 18px 22px; }
.web-prose .web-table { background: var(--group); border-radius: var(--r-surface); padding: 6px 20px 10px; }
.web-prose .web-table th { color: var(--text); font-weight: 600; }
.web-prose .web-table tr:last-child td { border-bottom: 0; }

/* mid-article breaks */
.mini-ex, .mini-strip { margin-block: 2.6em !important; padding: 20px; background: var(--raised); box-shadow: var(--raised-edge); border-radius: var(--r-surface); border-top: 4px solid var(--accent); }
.mini-ex { display: grid; gap: 20px; }
@media (min-width: 720px) { .mini-ex { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.mini-ex img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-control); }
.mini-ex-copy { display: grid; gap: 12px; }
.mini-ex-copy p, .mini-strip p { margin: 0 !important; }
.mini-ex-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-ex-text { font-size: 16px !important; line-height: 1.5; color: var(--text); }
.mini-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--raised-2); border-radius: var(--r-control); }
.mini-ex-head b { font-size: 15px; }
.mini-ex-head span { flex: none; padding: 6px 10px; border-radius: 8px; background: var(--control-raised); box-shadow: var(--btn2-ring); font-size: 13px; font-weight: 500; }
.mini-ex-note { font-size: 14px !important; color: var(--text-2-raised); }
.mini-strip { display: grid; gap: 14px; }
.mini-strip ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-strip li { display: grid; gap: 6px; margin: 0 !important; padding: 0 !important; }
.mini-strip li::before { display: none; }
.mini-strip img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-tile); }
.mini-strip li span { font-size: 13px; color: var(--text-2-raised); }

/* ================================================================ header revamp (Sean 11/04): sticky bar, mega menus, phone sheet */
.site-header { position: sticky; top: 0; z-index: var(--z-bar); background: var(--ground); transition: box-shadow 160ms ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header-row { min-height: 72px; gap: 20px; }
.site-header-cta { margin-left: auto; }
.site-header-cta .nav-cta { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* desktop bar */
.site-nav { display: none; }
.mm-bar { display: flex; align-items: stretch; height: 72px; }
.mm, .mm-plain { display: flex; align-items: center; }
.mm-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--text-2); font: 500 15px/1 var(--font-sans); cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-tint) ease, color var(--dur-tint) ease;
}
.mm-chev { transition: transform 200ms var(--ease-out); }
.mm.is-here > .mm-btn, .mm-plain.is-here > .mm-btn { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.mm.is-open > .mm-btn { background: var(--group); color: var(--text); }
.mm.is-open .mm-chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .mm-btn:hover { color: var(--text); } }

/* panels */
.mm-panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--raised); box-shadow: var(--raised-edge), 0 1px 0 var(--line), var(--shadow-float);
  padding: 28px 0 32px;
}
.mm.is-open > .mm-panel, html:not(.nav-js) .mm:focus-within > .mm-panel, html:not(.nav-js) .mm:hover > .mm-panel { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .mm.is-open > .mm-panel { animation: mm-in 180ms var(--ease-out); }
}
@keyframes mm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mm-panel-in { width: min(100% - 2 * clamp(var(--web-inset-min), 5vw, var(--web-inset-max)), var(--web-max)); margin-inline: auto; display: grid; gap: 20px; }
.mm-tile { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-tile); background: var(--tile-card); color: var(--text); transition: background-color var(--dur-tint) ease, color var(--dur-tint) ease; }
.mm-tile .icon { width: 20px; height: 20px; }
.site-nav .mm-item {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-control);
  color: var(--text); text-decoration: none; transition: background-color var(--dur-tint) ease, color var(--dur-tint) ease;
}
.mm-item > span { display: grid; gap: 2px; min-width: 0; }
.mm-item b { font-size: 16px; font-weight: 500; }
.mm-item i { font-style: normal; font-size: 14px; color: var(--text-2-raised); transition: color var(--dur-tint) ease; }
.site-nav .mm-item[aria-current] { background: var(--raised-2); }
@media (hover: hover) and (pointer: fine) {
  .site-nav .mm-item:hover { background: var(--accent); color: var(--on-accent); }
  .site-nav .mm-item:hover i { color: var(--on-accent); }
  .site-nav .mm-item:hover .mm-tile { background: var(--on-accent); color: var(--accent); }
}
.mm-product { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.mm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.site-nav .mm-feature { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: var(--r-surface); background: var(--raised-2); color: var(--text); text-decoration: none; border-top: 3px solid var(--accent); }
.mm-feature img { width: 112px; height: 112px; object-fit: cover; border-radius: var(--r-control); display: block; }
.mm-feature > span { display: grid; gap: 8px; justify-items: start; }
.mm-feature b { font-size: 17px; font-weight: 500; line-height: 1.25; }
.mm-feature i { font-style: normal; font-size: 14px; color: var(--text-2-raised); }
.mm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; }
.mm-item-sm b { font-size: 15px; }
.mm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
.mm-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.mm-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 600 15px/1.3 var(--font-sans); color: var(--text); }
.mm-head .mm-tile { width: 32px; height: 32px; }
.site-nav .mm-link { display: block; padding: 10px 12px; border-radius: var(--r-tile); color: var(--text-2-raised); text-decoration: none; font-size: 15px; transition: background-color var(--dur-tint) ease, color var(--dur-tint) ease; }
.site-nav .mm-link[aria-current] { color: var(--text); background: var(--raised-2); }
@media (hover: hover) and (pointer: fine) { .site-nav .mm-link:hover { background: var(--accent); color: var(--on-accent); } }
.site-nav .mm-all { grid-column: 1 / -1; justify-self: end; color: var(--text); text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; font-size: 15px; padding-top: 12px; border-top: 1px solid var(--line-raised); width: 100%; text-align: right; }
@media (hover: hover) and (pointer: fine) { .site-nav .mm-all:hover { text-decoration-color: var(--accent); } }

@media (min-width: 1024px) {
  .site-nav { display: block; margin-left: 12px; }
  .site-menu { display: none; }
}

/* phone: full-screen sheet */
.site-menu > summary { gap: 10px; padding: 0 12px; }
.site-menu-word { font: 500 15px/1 var(--font-sans); }
.burger { display: grid; gap: 5px; width: 18px; }
.burger span { display: block; height: 2px; border-radius: 1px; background: currentColor; transition: transform 220ms var(--ease-out); }
.site-menu[open] .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-menu[open] .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.site-menu[open] > summary { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.ms { position: fixed; left: 0; right: 0; top: 72px; bottom: 0; z-index: var(--z-sheet); background: var(--ground); display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.draft-bar ~ .site-header .ms { top: 72px; }
.ms-in { flex: 1; overflow-y: auto; padding: 8px max(clamp(var(--web-inset-min), 5vw, var(--web-inset-max)), env(safe-area-inset-left, 0px)) 24px; }
.ms-group { border-bottom: 1px solid var(--line); }
.ms-group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 64px; font: 500 22px/1.2 var(--font-sans); letter-spacing: -0.015em; color: var(--text); }
.ms-group > summary::-webkit-details-marker { display: none; }
.ms-group > summary::after { content: "+"; font: 300 26px/1 var(--font-sans); color: var(--text-2); transition: transform 200ms var(--ease-out); }
.ms-group[open] > summary::after { transform: rotate(45deg); color: var(--accent); }
.ms-group ul { display: grid; gap: 2px; padding-bottom: 16px; }
.ms-group ul.ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ms-group a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-radius: var(--r-control); color: var(--text); text-decoration: none; font-size: 16px; }
.ms-group a[aria-current] { background: var(--group); }
.ms-group a:active { background: var(--accent); color: var(--on-accent); }
.ms-group .mm-tile { width: 36px; height: 36px; background: var(--group); }
.ms-link { display: flex; align-items: center; min-height: 64px; font: 500 22px/1.2 var(--font-sans); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.ms-foot { padding: 16px max(clamp(var(--web-inset-min), 5vw, var(--web-inset-max)), env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--ground); }
.ms-cta { width: 100%; box-sizing: border-box; }
html.menu-open { overflow: hidden; }
@media (max-width: 420px) { .site-header-cta .nav-cta { padding: 0 12px; font-size: 14px; } .site-menu-word { display: none; } }

.mm-panel .mm-tile { background: var(--raised-2); }

/* one-page launch extras */
html { scroll-padding-top: 88px; }
.lp-cta { display: flex; align-items: center; gap: 16px; }
.lp-signin { color: var(--text-2); text-decoration: none; font: 500 15px/1 var(--font-sans); }
@media (hover: hover) and (pointer: fine) { .lp-signin:hover { color: var(--text); } }
@media (max-width: 1023px) { .lp-signin { display: none; } }
.lp-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lp-legal a { color: var(--text-2); text-decoration: none; font-size: 15px; display: inline-flex; min-height: 36px; align-items: center; }
@media (hover: hover) and (pointer: fine) { .lp-legal a:hover { color: var(--text); } }
.lp-footer .footer-base { margin-top: 0; padding-top: 0; border-top: 0; }