/* ==========================================================================
   CopyRefresh — application styles
   Built strictly on the Ditto-derived system in /design.
   No shadows. No gradients. Flat ink on flat paper.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

body {
  background: var(--surface-canvas);
  color: var(--color-india-ink);
  font-family: var(--font-abc-social);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "ss07" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-marker-yellow); color: var(--color-india-ink); }

:focus-visible {
  outline: 2px solid var(--color-india-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Typography primitives ------------------------------------------------ */
.display, .h1, .h2, .h3, .h4 {
  font-weight: var(--font-weight-bold);
  color: var(--color-india-ink);
  text-wrap: balance;
}
.display {
  font-size: clamp(46px, 8.4vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: -0.04em;
}
.h1 {
  font-size: clamp(38px, 6.4vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
  letter-spacing: -0.04em;
}
.h2 {
  font-size: clamp(30px, 4.4vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: -0.023em;
}
.h3 {
  font-family: var(--font-abc-social-extended);
  font-size: clamp(25px, 3vw, var(--text-heading-sm));
  line-height: var(--leading-heading-sm);
  letter-spacing: -0.02em;
}
.h4 {
  font-size: clamp(21px, 2.2vw, var(--text-subheading));
  line-height: var(--leading-subheading);
  letter-spacing: -0.02em;
}
.lede {
  font-family: var(--font-abc-social-extended);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: var(--color-charcoal-warm);
}
.body { font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); }
.muted { color: var(--color-graphite-warm); }
.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite-warm);
}
.eyebrow {
  font-family: var(--font-abc-social-condensed);
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-graphite-warm);
  font-weight: var(--font-weight-black);
}
.mono-note {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite-warm);
  font-style: italic;
}
.stack > * + * { margin-top: var(--spacing-20); }
.stack-sm > * + * { margin-top: var(--spacing-8); }
.stack-lg > * + * { margin-top: var(--spacing-40); }

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}
.wrap--narrow { max-width: 820px; }
.section { padding-block: clamp(var(--spacing-60), 7vw, var(--spacing-100)); }
.section--tight { padding-block: clamp(var(--spacing-40), 5vw, var(--spacing-72)); }
.section-head { max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; }
.rule { height: 1px; background: var(--color-linen); border: 0; }

.grid { display: grid; gap: var(--spacing-20); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--spacing-60); align-items: center; }
}

/* --- The annotation highlighter ------------------------------------------
   The system's defining gesture: an irregular marker block behind running
   text, never a clean rectangle. Drawn as an inline background so it survives
   line wrapping — an absolutely-positioned block only ever covers the first
   line fragment, which is the classic way this effect breaks on mobile.     */
.marked { isolation: isolate; }

.hl {
  font-weight: var(--font-weight-bold);
  color: var(--color-india-ink);
  padding: 0.08em 0.2em 0.12em;
  margin-inline: -0.1em;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.9,4.2 C22,1.1 58,3.4 99.1,1.2 L99.5,25.8 C71,29.3 33,26.9 0.5,29 Z' fill='%23ffdd33'/%3E%3C/svg%3E");
}
/* Shape variants — the block is never quite the same twice */
.hl--b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.4,2.6 C30,5.2 66,0.9 99.4,3.1 L99,27.4 C64,25.1 28,29.6 0.8,26.8 Z' fill='%23ffdd33'/%3E%3C/svg%3E"); }
.hl--c { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M1.2,5.6 C18,0.6 74,2.2 98.8,0.8 L99.6,24.4 C78,29.8 26,27.2 0.4,29.4 Z' fill='%23ffdd33'/%3E%3C/svg%3E"); }

.hl--yellow  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.9,4.2 C22,1.1 58,3.4 99.1,1.2 L99.5,25.8 C71,29.3 33,26.9 0.5,29 Z' fill='%23ffdd33'/%3E%3C/svg%3E"); }
.hl--orange  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.4,2.6 C30,5.2 66,0.9 99.4,3.1 L99,27.4 C64,25.1 28,29.6 0.8,26.8 Z' fill='%23ff6137'/%3E%3C/svg%3E"); }
.hl--purple  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M1.2,5.6 C18,0.6 74,2.2 98.8,0.8 L99.6,24.4 C78,29.8 26,27.2 0.4,29.4 Z' fill='%23b26dc2'/%3E%3C/svg%3E"); }
.hl--blue    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.4,2.6 C30,5.2 66,0.9 99.4,3.1 L99,27.4 C64,25.1 28,29.6 0.8,26.8 Z' fill='%230097e6'/%3E%3C/svg%3E"); }
.hl--pink    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.9,4.2 C22,1.1 58,3.4 99.1,1.2 L99.5,25.8 C71,29.3 33,26.9 0.5,29 Z' fill='%23f5c4cc'/%3E%3C/svg%3E"); }
.hl--mustard { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M1.2,5.6 C18,0.6 74,2.2 98.8,0.8 L99.6,24.4 C78,29.8 26,27.2 0.4,29.4 Z' fill='%23bbb809'/%3E%3C/svg%3E"); }
/* The two dark inks carry white type — black on #3e6b15 is only 3.6:1 */
.hl--green   { color: var(--color-bone-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.9,4.2 C22,1.1 58,3.4 99.1,1.2 L99.5,25.8 C71,29.3 33,26.9 0.5,29 Z' fill='%233e6b15'/%3E%3C/svg%3E"); }
.hl--gold    { color: var(--color-bone-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.4,2.6 C30,5.2 66,0.9 99.4,3.1 L99,27.4 C64,25.1 28,29.6 0.8,26.8 Z' fill='%23aa7e2e'/%3E%3C/svg%3E"); }

/* Marker sweep-in, once, on reveal */
.js .hl--sweep { background-size: 0% 100%; transition: background-size 520ms cubic-bezier(.2,.8,.3,1); }
.js .hl--sweep.is-inked { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  .js .hl--sweep { background-size: 100% 100%; transition: none; }
}

/* Strike-through for "the old way" copy */
.struck { position: relative; color: var(--color-graphite-warm); }
.struck::after {
  content: "";
  position: absolute;
  left: -0.08em; right: -0.08em; top: 52%;
  height: 2px;
  background: var(--color-edit-orange);
  transform: rotate(-1.1deg);
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.16px;
  border-radius: var(--radius-buttons);
  padding: 11px 22px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn--primary {
  background: var(--color-india-ink);
  color: var(--color-parchment);
  border: 1px solid var(--color-india-ink);
}
.btn--primary:hover { background: var(--color-charcoal-warm); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost {
  color: var(--color-india-ink);
  font-weight: var(--font-weight-regular);
  padding-inline: 12px;
}
.btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.btn--outline {
  border: 1px solid var(--color-india-ink);
  color: var(--color-india-ink);
  background: transparent;
}
.btn--outline:hover { background: var(--color-india-ink); color: var(--color-parchment); }
.btn--sm { padding: 7px 15px; font-size: var(--text-caption); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn-row--center { justify-content: center; }

/* --- Tags, stickers, pills ------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-abc-social-condensed);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px 3px;
  border-radius: var(--radius-tags);
  background: var(--color-highlight-green);
  color: var(--color-bone-white);
  white-space: nowrap;
}
.tag--yellow  { background: var(--color-marker-yellow); color: var(--color-india-ink); }
.tag--orange  { background: var(--color-edit-orange); color: var(--color-india-ink); }
.tag--purple  { background: var(--color-markup-purple); color: var(--color-india-ink); }
.tag--blue    { background: var(--color-comment-blue); color: var(--color-india-ink); }
.tag--pink    { background: var(--color-sticky-pink); color: var(--color-india-ink); }
.tag--mustard { background: var(--color-mustard); color: var(--color-india-ink); }
.tag--gold    { background: var(--color-olive-gold); color: var(--color-bone-white); }
.tag--quiet   { background: var(--color-smoke); color: var(--color-charcoal-warm); }
.tag--outline { background: transparent; color: var(--color-graphite-warm); border: 1px solid var(--color-linen); }

.sticker {
  display: inline-block;
  font-family: var(--font-abc-social-condensed);
  font-size: 14px;
  font-weight: var(--font-weight-black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-bone-white);
  background: var(--color-comment-blue);
  border-radius: var(--radius-tags);
  padding: 3px 12px 2px;
  transform: rotate(-3deg);
}
.sticker--purple { background: var(--color-markup-purple); transform: rotate(2.5deg); }
.sticker--green { background: var(--color-highlight-green); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-tags);
  border: 1px solid var(--color-linen);
  background: var(--color-bone-white);
  padding: 7px 16px;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-charcoal-warm);
}
.chip--active, .chip[aria-selected="true"] {
  border-color: var(--color-india-ink);
  background: var(--color-india-ink);
  color: var(--color-parchment);
  font-weight: var(--font-weight-bold);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--color-bone-white);
  border: 1px solid var(--color-linen);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
}
.card--flat { background: transparent; border-color: var(--color-linen); }
.card--ink { border-color: var(--color-india-ink); }
.card--gold { border-left: 6px solid var(--color-olive-gold); }
.card--pad-lg { padding: var(--spacing-28) var(--spacing-28) var(--spacing-24); }
.card__num {
  font-family: var(--font-abc-social-condensed);
  font-size: 35px;
  line-height: 1;
  color: var(--color-linen);
  font-weight: var(--font-weight-black);
}

/* --- Inputs --------------------------------------------------------------- */
.field { display: block; }
.field__label {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  color: var(--color-charcoal-warm);
  margin-bottom: 8px;
}
.field__hint { margin-top: 6px; }
.input, .textarea, .select {
  width: 100%;
  background: var(--color-bone-white);
  border: 1px solid var(--color-linen);
  border-radius: var(--radius-inputs);
  padding: 13px 20px;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-charcoal-warm);
  transition: border-color 120ms ease;
}
.textarea { border-radius: var(--radius-inputs); padding: 18px 22px; min-height: 190px; resize: vertical; font-family: var(--font-abc-social); }
.select { appearance: none; padding-right: 44px; background-image: none; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute; right: 20px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--color-charcoal-warm);
  border-bottom: 1.5px solid var(--color-charcoal-warm);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-india-ink);
  border-width: 1.5px;
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--color-graphite-warm); opacity: .75; }
.field-error { color: var(--color-edit-orange); font-size: var(--text-caption); margin-top: 6px; display: none; }
.field.is-invalid .field-error { display: block; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--color-edit-orange); }

/* --- Announcement banner -------------------------------------------------- */
.banner {
  background: var(--color-markup-purple);
  color: var(--color-bone-white);
  font-size: 14px;
  letter-spacing: -0.1px;
}
.banner__inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px var(--spacing-24);
  text-align: center;
  flex-wrap: wrap;
}
.banner a { font-weight: var(--font-weight-bold); text-underline-offset: 3px; }
.banner__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-bone-white); font-size: 18px; line-height: 1; padding: 6px;
}
.banner__wrap { position: relative; }

/* --- Nav ------------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 50; background: var(--surface-canvas); border-bottom: 1px solid transparent; }
.nav.is-stuck { border-bottom-color: var(--color-linen); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  min-height: 68px;
  padding-block: 10px;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 21px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.045em;
  text-decoration: none;
  white-space: nowrap;
}
.logo__mark { position: relative; isolation: isolate; }
.logo__mark::before {
  content: ""; position: absolute; z-index: -1;
  inset: -0.1em -0.16em -0.06em -0.14em;
  background: var(--color-marker-yellow);
  clip-path: polygon(0.5% 10%, 99% 2%, 100% 86%, 1% 96%);
  transform: rotate(-1.2deg);
}
.nav__links { display: none; gap: 22px; margin-left: auto; align-items: center; }
.nav__link {
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  text-decoration: none;
  border-radius: var(--radius-nav);
  padding: 6px 2px;
}
.nav__link:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav__link.is-active { font-weight: var(--font-weight-bold); }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center;
  margin-left: auto; padding: 9px 11px;
  border: 1px solid var(--color-linen); border-radius: var(--radius-nav);
}
.nav__apply-short { display: inline; }
.nav__apply-long { display: none; }
@media (min-width: 420px) {
  .nav__apply-short { display: none; }
  .nav__apply-long { display: inline; }
}
.nav__toggle span { display: block; width: 20px; height: 1.5px; background: var(--color-india-ink); }
.nav__toggle span + span { margin-top: 5px; }
.nav__mobile { display: none; padding: 8px 0 20px; border-top: 1px solid var(--color-linen); }
.nav__mobile.is-open { display: block; }
.nav__mobile a { display: block; padding: 11px 2px; text-decoration: none; font-size: var(--text-body); }
@media (min-width: 940px) {
  .nav__links { display: flex; }
  .nav__cta { margin-left: 0; }
  .nav__toggle { display: none; }
  .nav__mobile, .nav__mobile.is-open { display: none; }
}
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--color-india-ink); color: var(--color-parchment);
  padding: 10px 18px; border-radius: var(--radius-buttons);
}
.skip-link:focus { left: 16px; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-top: clamp(var(--spacing-40), 6vw, var(--spacing-80)); padding-bottom: var(--spacing-40); }
.hero__inner { max-width: 980px; margin-inline: auto; text-align: center; }
.hero .display { margin-top: var(--spacing-20); }
.hero .lede { max-width: 660px; margin-inline: auto; margin-top: var(--spacing-24); }
.hero .btn-row { margin-top: var(--spacing-28); }
.hero__meta { margin-top: var(--spacing-16); }

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 40px;
  padding-block: var(--spacing-28);
  border-top: 1px solid var(--color-linen);
  border-bottom: 1px solid var(--color-linen);
}
.stat-strip__item { display: flex; align-items: baseline; gap: 9px; color: var(--color-graphite-warm); font-size: var(--text-body-sm); }
.stat-strip__item b { color: var(--color-india-ink); font-size: var(--text-subheading); letter-spacing: -0.02em; }

/* --- Product mock (the marked-up editor) ---------------------------------- */
.mock {
  background: var(--color-bone-white);
  border: 1px solid var(--color-linen);
  border-radius: var(--radius-cards);
  overflow: hidden;
}
.mock__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-linen);
  background: var(--color-parchment);
}
.mock__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--color-graphite-warm); }
.mock__title { font-size: var(--text-caption); color: var(--color-graphite-warm); letter-spacing: var(--tracking-caption); }
.mock__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .mock__body { grid-template-columns: 190px minmax(0,1fr) 250px; } }
.mock__rail { border-right: 1px solid var(--color-linen); padding: var(--spacing-20); display: none; }
@media (min-width: 900px) { .mock__rail { display: block; } }
.mock__side { border-left: 1px solid var(--color-linen); padding: var(--spacing-20); background: var(--color-parchment); }
@media (max-width: 899px) { .mock__side { border-left: 0; border-top: 1px solid var(--color-linen); } }
.mock__main { padding: var(--spacing-28) var(--spacing-24); }

/* Workflow stage rail */
.stages { list-style: none; padding: 0; }
.stages li {
  display: flex; align-items: center; gap: 12px;
  min-height: 34px;
  font-size: var(--text-body-sm);
  color: var(--color-graphite-warm);
}
.stages .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--color-graphite-warm); margin-inline: 8px; flex: none; }
.stages .square { width: 24px; height: 24px; border-radius: 0; background: var(--color-olive-gold); flex: none; }
.stages li.is-active { color: var(--color-india-ink); font-weight: var(--font-weight-bold); }

/* Metadata rows in the mock sidebar */
.meta-row { display: flex; justify-content: space-between; gap: 12px; padding-block: 9px; font-size: 14px; border-bottom: 1px solid var(--color-linen); }
.meta-row:last-child { border-bottom: 0; }
.meta-row dt { color: var(--color-graphite-warm); }
.meta-row dd { margin: 0; text-align: right; font-weight: var(--font-weight-bold); }

.manuscript { font-size: var(--text-body); line-height: 1.75; letter-spacing: -0.2px; isolation: isolate; }
.manuscript p + p { margin-top: 1em; }
.manuscript--sm { font-size: var(--text-body-sm); line-height: 1.7; }

/* --- Scanner -------------------------------------------------------------- */
.scanner { display: grid; gap: var(--spacing-20); }
@media (min-width: 1000px) { .scanner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.scanner__pane { display: flex; flex-direction: column; gap: var(--spacing-16); }

.score {
  display: flex; align-items: center; gap: var(--spacing-20);
  padding: var(--spacing-20) var(--spacing-24);
  border: 1px solid var(--color-india-ink);
  border-radius: var(--radius-cards);
  background: var(--color-bone-white);
}
.score__num {
  font-family: var(--font-abc-social-extended);
  font-size: 64px; line-height: .9; font-weight: var(--font-weight-bold);
  letter-spacing: -0.05em;
  min-width: 92px;
}
.score__meter { height: 8px; background: var(--color-smoke); border-radius: 9999px; overflow: hidden; margin-top: 10px; }
.score__fill { height: 100%; background: var(--color-india-ink); width: 0; transition: width 600ms cubic-bezier(.2,.8,.3,1); }

.readout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--color-linen); border: 1px solid var(--color-linen); border-radius: var(--radius-cards); overflow: hidden; }
@media (min-width: 560px) { .readout { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.readout__cell { background: var(--color-bone-white); padding: 14px 16px; }
.readout__val { font-size: var(--text-subheading); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; line-height: 1.1; }
.readout__key { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-graphite-warm); margin-top: 4px; }

.findings { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.findings li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-body-sm); line-height: 1.45; }
.findings .tag { flex: none; margin-top: 2px; }
.findings b { font-weight: var(--font-weight-bold); }

.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend button { border-radius: var(--radius-tags); }
.legend .tag { cursor: pointer; }
.legend .tag[aria-pressed="false"] { opacity: .35; }

.locked {
  border: 1px dashed var(--color-graphite-warm);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  background: var(--color-parchment);
}
.is-hidden { display: none !important; }

/* Highlights produced by the scanner */
.mk {
  font-weight: var(--font-weight-bold);
  cursor: help;
  padding: 0.06em 0.16em 0.1em;
  margin-inline: -0.08em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: opacity 160ms ease;
}
.mk[data-cat="aitell"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.9,4.2 C22,1.1 58,3.4 99.1,1.2 L99.5,25.8 C71,29.3 33,26.9 0.5,29 Z' fill='%23ffdd33'/%3E%3C/svg%3E"); }
.mk[data-cat="cliche"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.4,2.6 C30,5.2 66,0.9 99.4,3.1 L99,27.4 C64,25.1 28,29.6 0.8,26.8 Z' fill='%23b26dc2'/%3E%3C/svg%3E"); }
.mk[data-cat="hedge"]  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M1.2,5.6 C18,0.6 74,2.2 98.8,0.8 L99.6,24.4 C78,29.8 26,27.2 0.4,29.4 Z' fill='%230097e6'/%3E%3C/svg%3E"); }
.mk[data-cat="filler"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.9,4.2 C22,1.1 58,3.4 99.1,1.2 L99.5,25.8 C71,29.3 33,26.9 0.5,29 Z' fill='%23f5c4cc'/%3E%3C/svg%3E"); }
.mk[data-cat="claim"]  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0.4,2.6 C30,5.2 66,0.9 99.4,3.1 L99,27.4 C64,25.1 28,29.6 0.8,26.8 Z' fill='%23ff6137'/%3E%3C/svg%3E"); }
.mk[data-cat="rhythm"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M1.2,5.6 C18,0.6 74,2.2 98.8,0.8 L99.6,24.4 C78,29.8 26,27.2 0.4,29.4 Z' fill='%23bbb809'/%3E%3C/svg%3E"); }
.mk.is-dim { opacity: .16; }

/* --- Comparison table ----------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--color-linen); border-radius: var(--radius-cards); background: var(--color-bone-white); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
table.cmp th, table.cmp td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--color-linen); vertical-align: top; font-size: var(--text-body-sm); line-height: 1.5; }
table.cmp thead th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-graphite-warm); font-weight: var(--font-weight-bold); background: var(--color-parchment); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td:first-child { font-weight: var(--font-weight-bold); white-space: nowrap; }

/* --- Lists ---------------------------------------------------------------- */
.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* Marker is absolutely placed rather than a flex item, so a bold lead-in
   inside the item stays part of the same paragraph instead of becoming its
   own column. */
.ticks li { position: relative; padding-left: 24px; font-size: var(--text-body-sm); line-height: 1.5; }
.ticks li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--color-highlight-green); font-weight: var(--font-weight-bold);
}
.ticks--no li::before { content: "×"; color: var(--color-edit-orange); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--color-linen); }
.faq details { border-bottom: 1px solid var(--color-linen); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 2vw, 21px); font-weight: var(--font-weight-bold); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; font-weight: var(--font-weight-regular); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 24px; max-width: 760px; color: var(--color-charcoal-warm); font-size: var(--text-body-sm); line-height: 1.6; }

/* --- Forms / waitlist ----------------------------------------------------- */
.form-grid { display: grid; gap: var(--spacing-16); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .form-grid .span-2 { grid-column: 1 / -1; } }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-form .input { flex: 1 1 260px; }
.form-success {
  border: 1px solid var(--color-india-ink);
  border-radius: var(--radius-cards);
  background: var(--color-bone-white);
  padding: var(--spacing-28);
}
.checkline { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-body-sm); }
.checkline input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--color-india-ink); flex: none; }

/* --- Footer --------------------------------------------------------------- */
.footer { border-top: 1px solid var(--color-linen); padding-block: var(--spacing-60) var(--spacing-40); }
.footer__grid { display: grid; gap: var(--spacing-40); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer h5 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-graphite-warm); font-weight: var(--font-weight-bold); margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { text-decoration: none; font-size: var(--text-body-sm); }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__base { margin-top: var(--spacing-40); padding-top: var(--spacing-20); border-top: 1px solid var(--color-linen); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }

/* --- Reveal --------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2,.8,.3,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* --- Print ---------------------------------------------------------------- */
@media print { .nav, .banner, .footer { display: none; } body { background: #fff; } }

/* Sentence-level rhythm mark — a copy-editor's underline, not a fill, so it
   can sit under word-level highlighter blocks without hiding them. */
.rn {
  text-decoration: underline wavy var(--color-mustard);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: help;
  transition: opacity 160ms ease;
}
.rn.is-dim { text-decoration-color: transparent; }

/* A little more air under headings that carry a marker block */
.section-head .h2 + .lede, .section-head .h1 + .lede, .hero .display + .lede { margin-top: var(--spacing-24); }
.banner__inner { padding-right: 46px; }

/* Scroll affordance on the findings list */
.findings {
  padding-bottom: 6px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}