/* Shortlist AIO — site styles.
   One stylesheet for the home page and the two generated legal pages, so the
   site reads as one system. Every control here is a native element: the mobile
   menu and all five disclosures are <details>. The site carries exactly one
   script, menu.js, which only closes the mobile menu on selection, Escape and
   an outside tap — nothing on this page depends on it running.

   Art direction: white ground, one royal blue, Plus Jakarta Sans.
   Every text color below has been checked against its background at 4.5:1,
   and every data bar against its own track at 3:1. If you change a color,
   re-check it — the gray and the blue used for the two bar series are only
   1.03:1 apart in luminance, which is why they never touch or nest. */

:root {
  color-scheme: light;

  --white: #FFFFFF;
  --tint: #F4F6FD;        /* card and section fill */
  --wash: #E7EDFD;        /* bar tracks, chips */
  --rule: #E8ECF5;
  --rule-strong: #D5DCEB;
  --border-blue: #E1E8FA;

  --ink: #0B0D12;         /* 19.4:1 on white */
  --ink-mid: #46505F;     /*  8.2:1 on white — body copy */
  --ink-soft: #5D6675;    /*  5.8:1 on white — captions, and the "named" bar */

  --blue: #225AEA;        /*  5.7:1 on white */
  --blue-deep: #1448CB;   /*  7.5:1 on white — links on tinted ground */
  --blue-pale: #94B2FF;   /* dashed "not measured" outline only, never text */

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --gutter: clamp(20px, 5vw, 80px);
  --section-gap: clamp(64px, 8vw, 118px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-deep); }
a:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(2.35rem, 5.2vw, 3.875rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 600;
  max-width: 17ch;
}
h1 em { font-style: normal; color: var(--blue); }

h2 {
  font-size: clamp(1.95rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
}

h3 {
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.024em;
  font-weight: 600;
}

p { margin: 0; }

.eyebrow {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-mid);
}

.body { font-size: 1.06rem; line-height: 1.62; color: var(--ink-mid); }
.caption { font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }

.center { text-align: center; }
.stack-center { display: flex; flex-direction: column; align-items: center; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand__mark {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; background: var(--blue); flex-shrink: 0;
}
.brand__name { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }

.nav__links { display: flex; gap: 26px; font-size: 15px; font-weight: 500; }
.nav__links a { color: var(--ink-mid); text-decoration: none; }
.nav__links a:hover { color: var(--blue-deep); }
.nav__cta { margin-left: auto; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
}
.btn--primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--tint); color: var(--ink); }
.btn--onblue { background: var(--white); color: var(--blue-deep); border-color: var(--white); }
.btn--onblue:hover { background: var(--wash); color: var(--blue-deep); }
.btn--onblue-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.btn--onblue-ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.btn--sm { font-size: 15px; padding: 11px 20px; min-height: 44px; }
.btn--block { display: block; width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- pills and chips ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--tint); border: 1px solid var(--border-blue);
  border-radius: 999px; padding: 7px 16px 7px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--blue-deep);
}
.pill__mark {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px; background: var(--blue); flex-shrink: 0;
}

.chip {
  font-size: 13px; font-weight: 600; color: var(--blue-deep);
  background: var(--wash); border-radius: 999px; padding: 6px 13px;
}

/* ---------- hero ---------- */

.hero { padding-top: clamp(40px, 6vw, 74px); }
.hero h1 { margin-top: 30px; }
.hero .lede { margin-top: 22px; max-width: 58ch; }
.hero .actions { margin-top: 34px; justify-content: center; }
.hero .caption { margin-top: 16px; }

/* ---------- the measurement panel ---------- */

.panel {
  width: 100%;
  margin-top: clamp(32px, 4vw, 54px);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: clamp(10px, 1vw, 14px);
}
.panel__inner {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 32px);
}
.panel__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.panel__title { font-size: 17px; font-weight: 600; }
.panel__head .chip { margin-left: auto; }

.legend { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-mid); }
.legend__swatch { display: block; width: 14px; height: 11px; border-radius: 6px; flex-shrink: 0; }
.legend__swatch--named { background: var(--ink-soft); }
.legend__swatch--cited { background: var(--blue); }

.bars { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }

/* One vendor: a label, two bars on separate tracks, two figures.
   Separate tracks are deliberate — see the note at the top of this file. */
.bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 190px) minmax(0, 1fr) 86px;
  align-items: center;
  gap: 7px 20px;
}
.bar-row__name { grid-row: span 2; font-size: 15.5px; font-weight: 500; }
.bar-row--you { padding-top: 18px; border-top: 1px solid var(--rule); }
.bar-row--you .bar-row__name { font-weight: 600; color: var(--blue); }

.track {
  display: block; height: 11px; border-radius: 6px;
  background: var(--wash); overflow: hidden;
}
.track--empty {
  background: var(--white);
  border: 1.5px dashed var(--blue-pale);
  overflow: visible;
}
.fill { display: block; height: 100%; border-radius: 6px; }
.fill--named { background: var(--ink-soft); }
.fill--cited { background: var(--blue); }

.figure { font-size: 13px; font-weight: 600; text-align: right; }
.figure--named { color: var(--ink-mid); }
.figure--cited { color: var(--blue); }

/* ---------- sections ---------- */

.section { margin-top: var(--section-gap); }
.section__head { display: flex; flex-direction: column; gap: 16px; }
.section__head--center { align-items: center; text-align: center; }
.section__head--center .lede { max-width: 56ch; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--lede { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; }

/* ---------- stat tiles ---------- */

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.stat { background: var(--tint); border-radius: var(--radius); padding: 20px; }
.stat__n { font-size: clamp(1.7rem, 2.4vw, 2.125rem); font-weight: 700; letter-spacing: -0.03em; color: var(--blue); line-height: 1.1; }
.stat__l { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-mid); }

/* ---------- the quoted answer ---------- */

.quote-card {
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: clamp(22px, 2.6vw, 34px);
}
.quote-card__src { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-mid); }
.quote-card__mark {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; background: var(--blue); flex-shrink: 0;
}
.quote-card blockquote {
  margin: 22px 0 0;
  font-size: clamp(1.2rem, 1.9vw, 1.625rem);
  line-height: 1.46;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--ink);
}
.quote-card__after {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid #DCE3F3;
  font-size: 0.94rem; line-height: 1.55; color: var(--ink-mid);
}

/* ---------- cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.card { background: var(--tint); border-radius: var(--radius-lg); padding: clamp(24px, 2.2vw, 32px) clamp(22px, 2vw, 30px) clamp(26px, 2.4vw, 34px); }
.card h3 { margin-top: 22px; }
.card p { margin-top: 12px; font-size: 1rem; line-height: 1.62; color: var(--ink-mid); }
.icon-chip {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; background: var(--blue);
}

/* ---------- disclosures ---------- */

.disclosures { display: flex; flex-direction: column; gap: 12px; }

.disclosure {
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding-inline: clamp(18px, 1.8vw, 26px);
}
.disclosure > summary {
  display: flex; align-items: center; gap: 18px;
  padding-block: 20px;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1rem, 1.3vw, 1.156rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
  min-height: 44px;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::marker { content: ""; }
.disclosure__chev { margin-left: auto; flex-shrink: 0; transition: transform 160ms ease; }
.disclosure[open] .disclosure__chev { transform: rotate(180deg); }
.disclosure__body { padding-bottom: 20px; }
.disclosure__body p { font-size: 1rem; line-height: 1.62; color: var(--ink-mid); max-width: 62ch; }
.disclosure__body p + p { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .disclosure__chev, .menu > summary, .menu__bar { transition: none; }
}

/* ---------- pricing ---------- */

/* align-items: stretch (the default) so the three cards match height and their
   buttons sit on one line; the button is pushed down with margin-top: auto. */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.tier {
  background: var(--white);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.2vw, 32px) clamp(22px, 2vw, 30px) clamp(26px, 2.4vw, 34px);
  display: flex; flex-direction: column;
}
.tier--feature { background: var(--tint); border: 1.5px solid var(--blue); }
.tier__name { font-size: 17px; font-weight: 600; }
.tier--feature .tier__name { color: var(--blue-deep); }
.tier__price { margin-top: 16px; font-size: clamp(2rem, 3vw, 2.625rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.tier__price span { font-size: 15px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.tier p { margin-top: 16px; font-size: 1rem; line-height: 1.62; color: var(--ink-mid); }
.tier p:last-of-type { margin-bottom: 26px; }
.tier .btn { margin-top: auto; }
.terms { margin-top: 18px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- closing call to action ---------- */

.cta {
  margin-top: var(--section-gap);
  background: var(--blue);
  border-radius: var(--radius-xl);
  padding: clamp(34px, 4.4vw, 62px) clamp(24px, 4.4vw, 64px);
  display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap;
}
.cta h2 { color: var(--white); max-width: 20ch; }
.cta p { margin-top: 18px; font-size: clamp(1.05rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--white); max-width: 52ch; }
.cta__actions { margin-left: auto; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.cta__actions .btn { white-space: nowrap; }

/* ---------- footer ---------- */

.footer { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); padding-block: 44px 56px; }
.footer__top { display: flex; align-items: flex-start; gap: clamp(28px, 5vw, 60px); flex-wrap: wrap; }
.footer__blurb { max-width: 34ch; margin-top: 14px; font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
.footer__links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 0.91rem; font-weight: 500; }
.footer__links a { color: var(--ink-mid); text-decoration: none; }
.footer__links a:hover { color: var(--blue-deep); }

.fineprint { margin-top: 32px; border-top: 1px solid var(--rule); padding-top: 6px; }
.fineprint > summary {
  display: flex; align-items: center; gap: 14px;
  padding-block: 16px; list-style: none; cursor: pointer;
  font-size: 0.875rem; font-weight: 600; color: var(--ink-mid); min-height: 44px;
}
.fineprint > summary::-webkit-details-marker { display: none; }
.fineprint > summary::marker { content: ""; }
.fineprint[open] .disclosure__chev { transform: rotate(180deg); }
.fineprint__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 8px; }
.fineprint__cols p { font-size: 0.8125rem; line-height: 1.62; color: var(--ink-soft); }
.fineprint__cols strong { color: var(--ink-mid); }

/* ---------- mobile menu (no JavaScript) ----------

   The button was previously a bare 44x44 box with no background, so a tap got
   the browser's own -webkit-tap-highlight-color: a hard-edged translucent
   rectangle five times the size of the 21x9 icon inside it. That was the "gray
   square that flashes".

   Killing the highlight is only half a fix — removing it and putting nothing
   back leaves the control feeling dead. So the button now has three states you
   can actually see, and the weakest transition between them is the resting
   border going from 1.38:1 to the blue at 5.65:1:
     rest    outlined, ink-mid bars
     press   wash fill, blue border
     open    solid blue, white bars crossed into an X
   `cursor: pointer` is load-bearing, not decoration: iOS Safari will not fire
   :active on an element unless it is declared in the normal state. */

.menu { display: none; margin-left: auto; position: relative; }

.menu > summary {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  /* rgba, not the `transparent`
                                                     keyword — old Android
                                                     WebView mishandles it */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }

.menu > summary:active { background: var(--wash); border-color: var(--blue); }

/* Drop the ring a touch leaves behind, keep the one a keyboard needs. Written
   as :focus:not(:focus-visible) rather than a bare :focus { outline: none },
   so that on a browser too old to know :focus-visible the whole rule is
   dropped and the UA ring survives. It fails toward visible, never away. */
.menu > summary:focus:not(:focus-visible) { outline: none; }
.menu > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.menu[open] > summary { background: var(--blue); border-color: var(--blue); }

.menu__bar {
  display: block; width: 18px; height: 2px; border-radius: 1px;
  background: var(--ink-mid);
  transition: transform 160ms ease, background-color 120ms ease;
}
/* bars are 2px tall with a 5px gap, so each center sits 3.5px off the middle */
.menu[open] .menu__bar { background: var(--white); }
.menu[open] .menu__bar:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu[open] .menu__bar:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }

.menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 20;
  display: flex; flex-direction: column; gap: 2px;
  width: max-content; min-width: 216px; max-width: calc(100vw - 40px);
  padding: 8px;
  background: var(--white); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); box-shadow: 0 16px 38px rgba(11, 13, 18, 0.16);
}
.menu__panel a {
  display: flex; align-items: center; min-height: 44px;
  padding: 11px 14px; border-radius: 8px;
  font-size: 15.5px; font-weight: 500; color: var(--ink-mid); text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__panel a:active { background: var(--wash); color: var(--blue-deep); }
/* gated, or the hover state sticks to whatever was tapped last on a phone */
@media (hover: hover) and (pointer: fine) {
  .menu__panel a:hover { background: var(--tint); color: var(--blue-deep); }
}
/* Qualified with the parent, because `.menu__panel a` above is (0,1,1) and a
   bare `.menu__cta` is (0,1,0) — it loses, and the CTA renders --ink-mid text
   on the blue fill at 2.1:1. */
.menu__panel a.menu__cta {
  margin-top: 6px; justify-content: center;
  background: var(--blue); color: var(--white); font-weight: 600;
}
.menu__panel a.menu__cta:active { background: var(--blue-deep); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .menu__panel a.menu__cta:hover { background: var(--blue-deep); color: var(--white); }
}

/* ---------- generated legal pages ---------- */

.doc { padding-block: clamp(36px, 5vw, 62px) 0; }
.doc h1 { max-width: none; font-size: clamp(2.1rem, 4vw, 2.75rem); }
.doc h2 { margin-top: 44px; font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.doc h3 { margin-top: 38px; font-size: 1.25rem; }
.doc h4 { margin: 28px 0 0; font-size: 1.05rem; font-weight: 600; }
.doc p, .doc li { font-size: 1.03rem; line-height: 1.68; color: var(--ink-mid); }
.doc p { margin-top: 16px; }
.doc ul, .doc ol { margin-top: 16px; padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc strong { color: var(--ink); }
.doc blockquote {
  margin: 20px 0 0; padding: 18px 22px;
  background: var(--tint); border: 1px solid var(--rule); border-radius: var(--radius);
}
.doc blockquote p { margin-top: 0; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.doc thead th { background: var(--tint); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.doc__scroll { overflow-x: auto; }

/* ---------- breakpoints ---------- */

@media (max-width: 1040px) {
  .split, .split--lede { grid-template-columns: minmax(0, 1fr); }
  .cards, .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fineprint__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__actions { margin-left: 0; width: 100%; }
  .cta__actions .btn { width: 100%; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { gap: 12px; }
  .nav__links, .nav__cta { display: none; }
  .menu { display: block; }
  /* The legal pages carry three short links and no menu button, so hiding
     .nav__links there left them with no navigation at all on a phone. They
     keep their links instead. */
  .nav--doc .nav__links { display: flex; gap: 18px; font-size: 14px; }
  .cards, .tiers, .stats { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 10px; }
  .hero .actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero .actions .btn { width: 100%; }
  .panel__head .chip { margin-left: 0; }
  .bar-row { grid-template-columns: minmax(84px, 108px) minmax(0, 1fr) 58px; gap: 6px 10px; }
  .bar-row__name { font-size: 13.5px; }
  .figure { font-size: 12px; }
  .fineprint__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .footer__top { flex-direction: column; gap: 22px; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 14px 12px; }
  .stat__l { font-size: 12px; }
}