/* Platypus Reviews homepage, v3 ("Attio" direction).
   Clean, monochrome-first, hairline borders, soft shadows, centered hero with an app window,
   two-tone section headings, big dark closing CTA.
   Colors come only from tokens.css; hairlines and shadows are mixed from those tokens. */

:root {
  --line: color-mix(in srgb, var(--ink) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 18%, transparent);
  --soft: color-mix(in srgb, var(--teal-100) 35%, var(--surface-raised));
  --shadow-soft: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-lift: 0 2px 4px color-mix(in srgb, var(--ink) 6%, transparent), 0 16px 40px color-mix(in srgb, var(--ink) 10%, transparent);
  --radius-btn: 10px;
  --heading-font: var(--font-body);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0; background: var(--surface-raised); color: var(--ink);
  font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--body-weight);
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
strong, .body-strong { font-weight: var(--body-strong-weight); }
[hidden] { display: none !important; }
a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--surface-raised); color: var(--ink); padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); }
.skip-link:focus { top: var(--space-4); }
.icon { width: 20px; height: 20px; flex: none; }

/* ---------- type ---------- */
h1, h2, h3, .display-xl { font-family: var(--heading-font); color: var(--ink); margin: 0 0 var(--space-4); }
.display-xl { font-size: clamp(42px, 6.4vw + 10px, 84px); line-height: 1; font-weight: 700; letter-spacing: -0.045em; }
h2 { font-size: clamp(28px, 2.2vw + 18px, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; }
h3 { font-size: var(--h3-size); line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.caption { font-size: var(--caption-size); line-height: var(--caption-line); font-weight: var(--caption-weight); color: var(--ink-muted); }
.label { font-family: var(--font-mono); font-size: var(--label-size); line-height: var(--label-line); font-weight: var(--label-weight); letter-spacing: var(--label-track); text-transform: uppercase; }
mark.ph { background: var(--paper); color: var(--ink); outline: 1.5px dashed var(--ink-muted); outline-offset: -1px; border-radius: var(--radius-sm); padding: 0 var(--space-1); font-style: normal; text-transform: none; letter-spacing: normal; }

/* two-tone heading: dark title runs on into a muted sentence (Attio signature) */
.two-tone { max-width: 820px; font-size: clamp(28px, 2.2vw + 18px, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; font-family: var(--heading-font); }
.two-tone h2 { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
.two-tone p { display: inline; margin: 0; color: var(--ink-muted); }
.two-tone mark.ph { font-size: 0.8em; vertical-align: 0.08em; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 640px) { .container { padding-inline: var(--space-8); } }
.section { padding-block: clamp(64px, 8vw, 120px); }
.section--soft { background: var(--soft); border-block: 1px solid var(--line); }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6) var(--space-12); margin-bottom: var(--space-12); }
.section__head--center { justify-content: center; text-align: center; }
.section__head--center .two-tone { margin-inline: auto; }
.more-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 500; white-space: nowrap; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.more-link .icon { width: 16px; height: 16px; transition: transform 140ms ease; }
.more-link:hover { border-color: var(--ink); }
.more-link:hover .icon { transform: translateX(3px); }
.grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.btn-row--center { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-btn); border: 1px solid transparent; font: 600 var(--body-size)/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 140ms ease, box-shadow 140ms ease, transform 80ms ease; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--caption-size); }
.btn--primary { background: var(--teal); color: var(--on-teal); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--on-teal) 18%, transparent); }
.btn--primary:hover { background: color-mix(in srgb, var(--teal) 88%, var(--ink)); }
.btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent); }
.btn--secondary:hover { background: var(--soft); }
.btn--inverse { background: var(--surface-raised); color: var(--ink); }
.btn--inverse:hover { background: var(--teal-100); }
.btn--ghost { background: transparent; color: var(--on-teal); border-color: var(--on-teal); }
.btn[aria-disabled="true"] { cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); font-size: var(--caption-size); font-weight: 500; text-decoration: none; background: var(--surface-raised); }
.chip:hover { border-color: var(--ink); text-decoration: none; }

/* ---------- StarRating (amber only here) ---------- */
.rating { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; text-decoration: none; color: var(--ink); }
.rating:hover { text-decoration: none; }
.rating:hover .score-badge { text-decoration: underline; }
.stars { display: inline-flex; gap: 2px; }
.star { width: 18px; height: 18px; }
.rating--sm .star { width: 14px; height: 14px; }
.star__fill { fill: var(--amber); }
.star__line { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-linejoin: round; }
.score-badge { font-family: var(--font-mono); font-weight: var(--score-weight); background: var(--amber); color: var(--on-amber); border-radius: var(--radius-pill); padding: 1px var(--space-2); white-space: nowrap; font-size: var(--caption-size); line-height: var(--caption-line); }
.score-badge--md { font-size: var(--body-size); padding: 2px var(--space-3); }
.score-badge mark.ph { background: var(--surface-raised); outline-color: var(--on-amber); }

/* ---------- announcement bar ---------- */
.announce { background: var(--ink); color: var(--surface-raised); font-size: var(--caption-size); }
.announce__inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: 40px; margin: 0; padding-block: var(--space-2); text-align: center; }
.announce a { color: var(--surface-raised); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-1); }
.announce a .icon { width: 14px; height: 14px; }
.announce :focus-visible { outline-color: var(--surface-raised); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface-raised) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; flex-wrap: wrap; padding-block: var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; margin-right: auto; }
.brand__name { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.logo-ph { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1.5px dashed var(--ink-muted); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink); }
.header__actions { display: flex; align-items: center; gap: var(--space-2); order: 2; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); cursor: pointer; }
.icon-btn:hover { background: var(--soft); }
.theme-toggle__light { display: none; }
:root[data-theme="dark"] .theme-toggle__dark { display: none; }
:root[data-theme="dark"] .theme-toggle__light { display: block; }
.header__cta { display: none; }
@media (min-width: 640px) { .header__cta { display: inline-flex; } }
.site-nav { display: none; width: 100%; order: 3; }
.site-nav.is-open { display: block; }
.nav__list { list-style: none; display: flex; flex-direction: column; gap: 2px; padding-block: var(--space-2); }
.nav__link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-3); color: var(--ink-muted); font: 500 15px/1 var(--font-body); text-decoration: none; background: none; border: 0; border-radius: var(--radius-btn); cursor: pointer; }
.nav__link:hover { color: var(--ink); background: var(--soft); text-decoration: none; }
.nav__menu-btn .icon { width: 16px; height: 16px; transition: transform 140ms ease; }
.nav__menu-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav__submenu { list-style: none; margin: var(--space-1) 0 var(--space-2); padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); }
.nav__submenu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-btn); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav__submenu a:hover { background: var(--soft); }
.nav__submenu-all { border-top: 1px solid var(--line); margin-top: var(--space-1); padding-top: var(--space-1); }
.nav__submenu-all a { color: var(--teal); }
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; width: auto; order: 1; margin-right: var(--space-4); }
  .nav__list { flex-direction: row; align-items: center; padding: 0; }
  .nav__item--menu { position: relative; }
  .nav__submenu { position: absolute; top: calc(100% + var(--space-2)); left: 0; min-width: 300px; margin: 0; z-index: 40; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; padding-top: clamp(56px, 9vw, 128px); padding-bottom: var(--space-12); overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--teal-100) 70%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--surface-raised), var(--surface-raised));
}
.hero::before { /* faint grid lines, like a case-file sheet */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 55% at 50% 20%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 20%, black, transparent 75%);
  opacity: 0.6;
}
.hero > .container { position: relative; }
.hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: var(--shadow-soft); margin-bottom: var(--space-8); }
.pill .label { color: var(--ink); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-100); }
.hero .display-xl { max-width: 12em; margin-bottom: var(--space-6); }
.hero__sub { max-width: 34em; margin-inline: auto; color: var(--ink-muted); font-size: clamp(18px, 0.6vw + 15px, 21px); line-height: 1.5; }

/* app window */
.window { margin-top: clamp(48px, 6vw, 80px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lift); overflow: hidden; }
.window__bar { display: flex; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--soft); }
.window__bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.window__body { display: grid; gap: var(--space-6); padding: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) { .window__body { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.search { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 14px; padding: 6px 6px 6px var(--space-4); box-shadow: var(--shadow-soft); }
.search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.search__icon { color: var(--ink-muted); }
.search__input { flex: 1 1 160px; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: 400 var(--body-lg-size)/1.3 var(--font-body); }
.search__input::placeholder { color: var(--ink-muted); opacity: 1; }
.search__input:focus-visible { outline: none; }
.search__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer; background: var(--teal); color: var(--on-teal); border: 0; border-radius: var(--radius-btn); }
.search__empty { flex-basis: 100%; margin: 0 0 var(--space-2); color: var(--ink); }
.quick-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.mascot-ph { display: grid; place-content: center; gap: var(--space-2); text-align: center; min-height: 240px; padding: var(--space-6); color: var(--ink); background: var(--surface); border: 1.5px dashed var(--ink-muted); border-radius: 14px; }

/* trust: 3 columns with hairline dividers */
.trust { margin-top: var(--space-12); border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); }
.trust__list { list-style: none; display: grid; }
@media (min-width: 900px) { .trust__list { grid-template-columns: repeat(3, 1fr); } }
.trust__list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-6); }
.trust__list li + li { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .trust__list li + li { border-top: 0; border-left: 1px solid var(--line); } }
.trust__icon { color: var(--teal); margin-top: 3px; }
.trust__link { margin: 0; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }

/* ---------- category tiles ---------- */
.tiles { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease; }
.tile:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); transform: translateY(-2px); }
.tile__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-btn); background: var(--teal-100); color: var(--teal); margin-bottom: var(--space-3); }
.tile__title { margin: 0; font-size: 19px; }
.tile__link { color: var(--ink); text-decoration: none; }
.tile__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.tile__link:focus-visible { outline: none; }
.tile:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile__line { margin: 0; color: var(--ink-muted); }
.tile__meta { display: flex; align-items: center; justify-content: space-between; margin: auto 0 0; padding-top: var(--space-4); }
.tile__arrow { display: inline-grid; place-items: center; color: var(--ink-muted); transition: transform 160ms ease, color 160ms ease; }
.tile:hover .tile__arrow { transform: translateX(3px); color: var(--ink); }

/* ---------- shared card ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent); }
.card > p { margin: 0; }
.card__title { margin: 0; font-size: 19px; }
.card__actions { margin-top: auto; padding-top: var(--space-3); }
.tag { color: var(--brown); margin: 0; }
.tool-logo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; border: 1.5px dashed var(--ink-muted); background: var(--surface); font-size: 10px; line-height: 1.15; text-align: center; color: var(--ink); }
.tool-logo mark.ph { outline: none; background: none; padding: 0; }
.tool-logo--lg { width: 112px; height: 112px; border-radius: 22px; font-size: var(--caption-size); background: var(--surface-raised); box-shadow: var(--shadow-soft); }
.tool-logo--sm { width: 40px; height: 40px; font-size: 9px; }

/* ---------- reviews ---------- */
.magazine { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) { .magazine { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; } .review-feature__media { flex: 1; } }
.review-feature { padding: 0; overflow: hidden; gap: 0; }
.review-feature__media { display: grid; place-items: center; min-height: 240px; background: radial-gradient(80% 80% at 50% 30%, var(--teal-100), var(--soft)); border-bottom: 1px solid var(--line); }
.review-feature__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-8) var(--space-8); }
.review-feature__body > p { margin: 0; }
.review-feature__body .body-lg { font-size: var(--body-lg-size); line-height: 1.5; }
.review-feature__title { font-size: clamp(26px, 1.4vw + 20px, 34px); line-height: 1.1; letter-spacing: -0.03em; margin: 0; }
.review-list { display: grid; gap: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.review-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-4) var(--space-6); }
.review-row + .review-row { border-top: 1px solid var(--line); }
.review-row:hover { background: var(--soft); }
.review-row__main > p { margin: 0; }
.review-row__title { margin: 2px 0; font-size: 18px; line-height: 1.3; }
.review-row__verdict { color: var(--ink-muted); font-size: 15px; line-height: 1.45; }
.review-row__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
@media (min-width: 640px) { .review-row { grid-template-columns: auto minmax(0, 1fr) auto; } .review-row__side { grid-column: auto; flex-direction: column; align-items: flex-end; } }

/* ---------- lists ---------- */
.rail { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.list-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-btn); background: var(--teal-100); color: var(--teal); }
.list-card__pick { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.list-card__pick p { margin: 0 0 var(--space-1); font-size: 15px; }
.list-card:hover, .guide-card:hover, .alt-card:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.list-card, .guide-card, .alt-card { transition: box-shadow 160ms ease, border-color 160ms ease; }

/* ---------- alternatives ---------- */
@media (min-width: 1024px) { [data-grid="alternatives"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alt-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.alt-card__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-btn); background: var(--paper); color: var(--ink); }
.alt-card__main { flex: 1 1 200px; }
.alt-card__main p { margin: var(--space-1) 0 0; color: var(--ink-muted); }

/* ---------- how we test ---------- */
.timeline { list-style: none; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.timeline li { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface-raised); }
.timeline li + li { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .timeline li + li { border-top: 0; border-left: 1px solid var(--line); } }
.timeline__num { font-family: var(--font-mono); font-size: var(--score-size); line-height: 1; font-weight: var(--score-weight); color: var(--teal); }
.timeline li p { color: var(--ink-muted); }
.timeline li p strong { color: var(--ink); display: block; margin-bottom: var(--space-1); }
.method { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 1024px) { .method { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.window--flat { margin: 0; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; }
.shot-ph__body { flex: 1; display: grid; gap: var(--space-2); place-content: center; text-align: center; min-height: 240px; padding: var(--space-6); background: repeating-linear-gradient(-45deg, var(--surface-raised) 0 12px, var(--soft) 12px 24px); }
.scale-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--shadow-soft); }
.scale { width: 100%; border-collapse: collapse; }
.scale th, .scale td { text-align: left; padding: var(--space-3) var(--space-6); vertical-align: middle; }
.scale thead th { background: var(--soft); color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.scale tbody tr + tr th, .scale tbody tr + tr td { border-top: 1px solid var(--line); }
.scale tbody th { white-space: nowrap; font-weight: 400; }
.scale td { color: var(--ink-muted); }

/* ---------- team ---------- */
.team { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.author-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); row-gap: var(--space-1); align-items: start; }
.author-card > *:not(.author__photo) { grid-column: 2; margin: 0; }
.author__photo { grid-row: 1 / span 5; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.author__photo--ph { display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.2; border: 1.5px dashed var(--ink-muted); background: var(--surface); }
.author__photo--ph mark.ph { outline: none; background: none; padding: 0; }
.author__tests .label { color: var(--ink-muted); margin-right: var(--space-1); }
.author-card .text-link { margin-top: var(--space-2); font-weight: 600; }
@media (max-width: 479px) { .author-card { grid-template-columns: 1fr; } .author-card > *:not(.author__photo) { grid-column: 1; } .author__photo { grid-row: auto; margin-bottom: var(--space-3); } }

/* ---------- guides ---------- */
.guide-card { padding: 0; overflow: hidden; gap: 0; }
.guide-card__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6); min-height: 140px; background: radial-gradient(90% 120% at 0% 0%, var(--teal-100), var(--soft) 70%); border-bottom: 1px solid var(--line); }
.guide-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-btn); background: var(--surface-raised); color: var(--teal); box-shadow: var(--shadow-soft); align-self: flex-start; }
.guide-card__num { font-family: var(--font-mono); font-weight: var(--score-weight); font-size: var(--score-size); line-height: 1; color: var(--ink-muted); align-self: flex-end; }
.guide-card .card__title { padding: var(--space-6) var(--space-6) 0; }
.guide-card .card__actions { padding: var(--space-4) var(--space-6) var(--space-6); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 1fr 1.6fr; } .faq-layout__head { position: sticky; top: 96px; align-self: start; } }
.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { margin: 0; font-size: 19px; line-height: 1.35; }
.faq__toggle { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); }
.faq__icon { width: 16px; height: 16px; transition: transform 160ms ease; }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__a { padding: 0 0 var(--space-6); max-width: 62ch; color: var(--ink-muted); }

/* ---------- dark closing CTA ---------- */
.cta-dark { position: relative; overflow: hidden; background: var(--ink); color: var(--surface-raised); padding-block: clamp(80px, 10vw, 140px); text-align: center; }
.cta-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--teal) 55%, transparent), transparent 70%); }
.cta-dark__inner { position: relative; }
.cta-dark h2 { color: var(--surface-raised); font-size: clamp(36px, 4.5vw + 12px, 72px); letter-spacing: -0.045em; line-height: 1; max-width: 12em; margin-inline: auto; margin-bottom: var(--space-6); }
.cta-dark .hero__sub { color: color-mix(in srgb, var(--surface-raised) 78%, var(--ink)); }
.cta-dark :focus-visible { outline-color: var(--surface-raised); }

/* ---------- newsletter ---------- */
.newsletter { padding-block: var(--space-12); border-bottom: 1px solid var(--line); }
.newsletter__form { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .newsletter__form { grid-template-columns: 1fr 1.2fr; } }
.newsletter__text h3 { margin: 0 0 var(--space-1); font-size: 24px; letter-spacing: -0.02em; }
.newsletter__text p { margin: 0; color: var(--ink-muted); }
.newsletter__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 var(--space-4); font: 400 var(--body-size)/1.4 var(--font-body); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); }
.input::placeholder { color: var(--ink-muted); opacity: 1; }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
.newsletter__msg { grid-column: 1 / -1; margin: 0; color: var(--ink); min-height: var(--caption-line); }
@media (min-width: 900px) { .newsletter__msg { grid-column: 2; } }

/* ---------- footer ---------- */
.site-footer { padding-block: var(--space-16) var(--space-8); }
.footer__top { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1fr 2.4fr; } }
.footer__brand { font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; max-width: 14em; }
.footer__cols { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__h { margin: 0 0 var(--space-3); font-size: var(--label-size); color: var(--ink-muted); }
.site-footer ul { list-style: none; display: grid; gap: var(--space-2); }
.site-footer a { color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer__bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); }

/* ---------- small phones ---------- */
@media (max-width: 479px) {
  .brand__name { font-size: 17px; }
  .two-tone { font-size: 26px; }
}

/* =================================================================
   Floating hero icons (family.co-style), see js/floating-hero.js
   ================================================================= */
.hero__stage { position: relative; }
.float-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__inner { position: relative; z-index: 1; pointer-events: none; }
.hero__inner > * { pointer-events: auto; }
.hero__stage:not(.hero__stage--band) .hero__inner { max-width: 780px; padding-block: var(--space-6); }
.hero__stage:not(.hero__stage--band) .display-xl { font-size: clamp(48px, 4.6vw + 12px, 80px); }
.hero__stage--band .hero__inner { padding-top: 150px; }

.fi { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; will-change: transform; }
.fi--blob { pointer-events: none; }
.fi.is-dragging { cursor: grabbing; z-index: 50 !important; }
.fi.is-returning { transition: transform 650ms cubic-bezier(.34, 1.56, .64, 1); }
.fi__float { width: 100%; height: 100%; animation: fi-bob var(--bob, 4s) ease-in-out var(--bob-delay, 0s) infinite alternate; }
.fi__pop { width: 100%; height: 100%; transform: rotate(var(--r, 0deg)); animation: fi-pop 700ms cubic-bezier(.34, 1.56, .64, 1) var(--delay, 0ms) both; }
.fi:hover .fi__pop { animation: fi-wiggle 500ms ease-in-out; }
.fi.is-dragging .fi__pop { transform: rotate(var(--r, 0deg)) scale(1.12); transition: transform 150ms ease; animation: none; }

@keyframes fi-pop { 0% { transform: rotate(var(--r, 0deg)) scale(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(var(--r, 0deg)) scale(1); opacity: 1; } }
@keyframes fi-bob { from { transform: translateY(-5px) rotate(-1.5deg); } to { transform: translateY(6px) rotate(1.5deg); } }
@keyframes fi-wiggle {
  0%, 100% { transform: rotate(var(--r, 0deg)) scale(1); }
  25% { transform: rotate(calc(var(--r, 0deg) - 10deg)) scale(1.08); }
  50% { transform: rotate(calc(var(--r, 0deg) + 8deg)) scale(1.1); }
  75% { transform: rotate(calc(var(--r, 0deg) - 4deg)) scale(1.04); }
}

/* app-icon tiles */
.fi-tile { container-type: size; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 26%; box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent), 0 12px 28px color-mix(in srgb, var(--ink) 14%, transparent); outline: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); outline-offset: -1px; }
.fi-tile--circle { border-radius: 50%; }
.fi-tile svg { width: 54%; height: 54%; }
.fi-tile--token { background: var(--surface-raised); color: var(--teal); }
.fi-letter { font-family: var(--font-body); font-weight: 800; line-height: 1; font-size: 56cqw; letter-spacing: -0.04em; }
.fi-letter--in { font-size: 50cqw; }
.fi-letter--f { font-size: 66cqw; transform: translate(6%, 6%); }
.fi-letter--g { font-size: 60cqw; }
.fi-letter--n { font-family: Georgia, "Times New Roman", serif; font-size: 62cqw; }
.fi-letter--c { font-style: italic; font-size: 60cqw; }

/* decorations (tokens only) */
.fi--deco svg { width: 100%; height: 100%; display: block; }
.fi-blob { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--teal-100), color-mix(in srgb, var(--teal-100) 30%, transparent) 70%); opacity: 0.8; }
.fi-dot { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--teal); }
.fi-dot--brown { background: var(--brown); }
.fi-check { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--teal); color: var(--on-teal); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 14%, transparent); }
.fi-check svg { width: 55%; height: 55%; }

/* reduced motion: icons stay put */
@media (prefers-reduced-motion: reduce) {
  .fi__float, .fi__pop, .fi:hover .fi__pop { animation: none !important; }
  .fi { cursor: default; }
}

/* =================================================================
   Section headings: H2 title on its own line (big, bold),
   intro sentence below (smaller, normal weight, H3-like)
   ================================================================= */
.section__title { max-width: 760px; }
.section__title h2 { display: block; margin: 0; font-size: clamp(32px, 2.6vw + 20px, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.section__sub { margin: var(--space-3) 0 0; font-size: clamp(18px, 0.5vw + 15px, 22px); line-height: 1.45; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-muted); max-width: 60ch; }
.section__head--center .section__title { margin-inline: auto; }
.section__head--center .section__sub { margin-inline: auto; }
.faq-layout__head h2 { font-size: clamp(32px, 2.6vw + 20px, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; }
.section__head { align-items: flex-end; }

/* =================================================================
   "How we test every tool": v2 design (teal band, numbered circles on a
   dashed line, outlined score table, sticker button), scoped to this section
   ================================================================= */
.how-v2 { background: var(--teal-100); border-block: 2px solid var(--outline); }
.how-v2 .timeline { list-style: none; display: grid; gap: var(--space-6); position: relative; border: 0; border-radius: 0; overflow: visible; }
@media (min-width: 900px) {
  .how-v2 .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .how-v2 .timeline::before { content: ""; position: absolute; top: 28px; left: 12%; right: 12%; border-top: 2px dashed var(--outline); }
}
.how-v2 .timeline li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: 0; background: none; }
.how-v2 .timeline li + li { border: 0; }
.how-v2 .timeline__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-raised); border: 2px solid var(--outline); box-shadow: var(--shadow-sticker-sm); font-family: var(--font-mono); font-size: var(--score-size); line-height: 1; font-weight: var(--score-weight); color: var(--ink); position: relative; }
.how-v2 .timeline li p { max-width: 26ch; color: var(--ink); }
.how-v2 .timeline li p strong { display: inline; margin: 0; }
.how-v2 .method { display: grid; gap: var(--space-6); margin-top: var(--space-12); }
@media (min-width: 1024px) { .how-v2 .method { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.how-v2 .shot-ph { margin: 0; display: grid; gap: var(--space-2); place-content: center; text-align: center; min-height: 260px; padding: var(--space-6); background: var(--surface-raised); border: 2px dashed var(--ink-muted); border-radius: var(--radius-md); }
.how-v2 .scale-wrap { overflow-x: auto; border: 2px solid var(--outline); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-sticker); }
.how-v2 .scale thead th { background: var(--paper); color: var(--ink); border-bottom: 0; }
.how-v2 .scale th, .how-v2 .scale td { padding: var(--space-3) var(--space-4); }
.how-v2 .scale td { color: var(--ink); }
.how-v2 .scale tbody tr + tr th, .how-v2 .scale tbody tr + tr td { border-top: 2px solid var(--hairline); }
.how-v2 .star__line { stroke: var(--outline); stroke-width: 1.75; }
.how-v2 .score-badge { border: 2px solid var(--outline); box-shadow: var(--shadow-sticker-sm); }
.how-v2 .btn-row--center { margin-top: var(--space-12); }
.how-v2 .btn--primary { border: 2px solid var(--outline); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); min-height: 48px; }
.how-v2 .btn--primary:active { transform: translate(2px, 2px); box-shadow: var(--shadow-sticker-sm); }
:root[data-theme="dark"] .how-v2 a:not(.btn):not(.rating) { color: var(--ink); }
.how-v2 .section__sub { color: var(--ink); }
/* "How we test": heading and intro exactly as in v2 (Bricolage title, regular dark intro) */
.how-v2 .section__head { margin-bottom: var(--space-8); }
.how-v2 .section__title h2 { font-family: var(--font-display); font-weight: var(--display-xl-weight); font-size: clamp(30px, 1.6vw + 22px, 40px); line-height: 1.15; letter-spacing: -0.01em; }
.how-v2 .section__sub { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-line); margin-top: var(--space-2); color: var(--ink); }

/* Brand-colored category icons (colors from js/brands.js) */
.tile__icon.is-brand { box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 18%, transparent); }
.tile__icon.is-brand .icon { width: 22px; height: 22px; }
.chip { gap: var(--space-2); padding-left: 6px; }
.chip__icon, .menu__icon { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--teal-100); color: var(--teal); }
.chip__icon .icon, .menu__icon .icon { width: 14px; height: 14px; }
.nav__submenu a { display: flex; align-items: center; gap: var(--space-3); }
.menu__icon { width: 26px; height: 26px; border-radius: 8px; }
.menu__icon .icon { width: 15px; height: 15px; }
/* Only two categories live: two wide columns */
@media (min-width: 640px) { .tiles:has(> .tile:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =================================================================
   "Pick a category": lively portal cards
   (brand glow colors come in as --brand / --brand-2 from js/brands.js)
   ================================================================= */
.section--categories { position: relative; overflow: hidden; }
.section--categories::before, .section--categories::after { /* slowly drifting brand-tinted blobs */
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(60px); opacity: 0.18; pointer-events: none; z-index: 0;
  animation: cat-drift 18s ease-in-out infinite alternate;
}
.section--categories::before { background: var(--blob-1, var(--teal-100)); top: 10%; left: -160px; }
.section--categories::after { background: var(--blob-2, var(--teal)); bottom: -120px; right: -160px; animation-delay: -9s; }
.section--categories > .container { position: relative; z-index: 1; }
@keyframes cat-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(80px, -40px) scale(1.15); } }

.tile--portal {
  --brand: var(--teal); --brand-2: var(--teal-100); --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg;
  padding: 0; gap: 0; overflow: hidden; isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  transform-style: preserve-3d;
}
.tile--portal:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 6%, transparent), 0 24px 48px color-mix(in srgb, var(--brand) 22%, transparent); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.tile--portal:active { transform: perspective(900px) translateY(0) scale(0.99); }
.tile__spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 200ms ease; background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%); }
.tile--portal:hover .tile__spot { opacity: 1; }

.tile__art {
  position: relative; z-index: 1; height: 200px; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 55%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--brand) 22%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
    color-mix(in srgb, var(--brand-2) 10%, var(--surface-raised));
  border-bottom: 1px solid var(--line);
}
.tile__orbit { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--brand) 40%, transparent); animation: cat-spin 22s linear infinite; }
@keyframes cat-spin { to { transform: rotate(360deg); } }
.tile__icon--lg { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 24px; margin: 0; transition: transform 400ms cubic-bezier(.34, 1.56, .64, 1); }
.tile__icon--lg.is-brand { box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 15%, transparent); }
.tile__icon--lg .icon { width: 42px; height: 42px; stroke-width: 2; }
.tile--portal:hover .tile__icon--lg { transform: scale(1.08) rotate(-6deg); }

.tile__bubble {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--surface-raised); color: var(--brand); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent);
  animation: cat-bob 3.6s ease-in-out infinite alternate; transition: translate 450ms cubic-bezier(.34, 1.56, .64, 1);
}
.tile__bubble .icon { width: 20px; height: 20px; }
.tile__bubble--1 { left: calc(50% - 128px); top: 36px; animation-delay: -0.4s; }
.tile__bubble--2 { left: calc(50% + 86px); top: 26px; animation-delay: -1.6s; border-radius: 50%; }
.tile__bubble--3 { left: calc(50% - 112px); bottom: 28px; animation-delay: -2.4s; }
.tile__bubble--4 { left: calc(50% + 74px); bottom: 34px; animation-delay: -0.9s; border-radius: 50%; }
.tile--portal:hover .tile__bubble--1 { translate: -16px -8px; }
.tile--portal:hover .tile__bubble--2 { translate: 16px -10px; }
.tile--portal:hover .tile__bubble--3 { translate: -18px 8px; }
.tile--portal:hover .tile__bubble--4 { translate: 16px 10px; }
@keyframes cat-bob { from { transform: translateY(-5px) rotate(-4deg); } to { transform: translateY(5px) rotate(4deg); } }

.tile__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); flex: 1; }
.tile--portal .tile__title { font-size: clamp(20px, 0.6vw + 16px, 24px); letter-spacing: -0.02em; }
.tile--portal .tile__meta { border-top: 1px solid var(--line); margin-top: var(--space-3); }
.tile--portal .tile__arrow { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); transition: transform 200ms ease, background-color 200ms ease, color 200ms ease; }
.tile--portal:hover .tile__arrow { transform: translateX(4px); background: var(--teal); color: var(--on-teal); border-color: var(--teal); }

/* scroll reveal (only when JS + motion are available) */
.anim .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease var(--reveal-delay, 0ms), transform 800ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms); }
.anim .reveal.is-in { opacity: 1; transform: none; }
.anim .tile--portal.reveal.is-in { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity 700ms ease var(--reveal-delay, 0ms), transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.anim .tile--portal.reveal.is-in:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .section--categories::before, .section--categories::after, .tile__orbit, .tile__bubble { animation: none !important; }
  .tile--portal, .tile--portal:hover { transform: none !important; }
}
.tile__icon--lg.is-brand .icon, .tile__icon--lg .icon { width: 44px; height: 44px; }

/* =================================================================
   "Our top lists": same lively portal treatment as the categories
   ================================================================= */
.section--lists { position: relative; overflow: hidden; }
.section--lists::before, .section--lists::after {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(60px); opacity: 0.16; pointer-events: none; z-index: 0;
  animation: cat-drift 20s ease-in-out infinite alternate;
}
.section--lists::before { background: var(--blob-2, var(--teal)); top: 0; right: -180px; }
.section--lists::after { background: var(--blob-1, var(--teal-100)); bottom: -160px; left: -160px; animation-delay: -10s; }
.section--lists > .container { position: relative; z-index: 1; }

.list-card.tile--portal { padding: 0; gap: 0; }
.list-card .tile__content { gap: var(--space-3); }
.list-card .card__actions { margin-top: auto; padding-top: var(--space-2); }
.list-card__mark { position: relative; z-index: 2; display: grid; place-items: center; }
.list-card .tile__icon--lg { width: 76px; height: 76px; border-radius: 22px; }
.list-card .tile__icon--lg.is-brand .icon, .list-card .tile__icon--lg .icon { width: 40px; height: 40px; }
.list-card__badge { position: absolute; right: -14px; bottom: -12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-raised); color: var(--brand); box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 18%, transparent); transition: transform 400ms cubic-bezier(.34, 1.56, .64, 1); }
.list-card__badge .icon { width: 18px; height: 18px; }
.tile--portal:hover .list-card__badge { transform: scale(1.15) rotate(12deg); }
.list-card .list-card__pick { background: color-mix(in srgb, var(--brand-2) 8%, var(--surface-raised)); border-color: color-mix(in srgb, var(--brand) 18%, var(--line)); }
.list-card .tile__art { height: 180px; }
@media (prefers-reduced-motion: reduce) { .section--lists::before, .section--lists::after { animation: none !important; } }
.list-card__badge { z-index: 3; right: -16px; bottom: -14px; }

/* =================================================================
   UNIFIED AESTHETIC (everything below the hero)
   One look for all sections: white page, drifting soft glows, big H2 + light intro,
   "portal" cards (tinted dotted art + floating bubbles + tilt/spotlight), hairlines, soft shadows.
   ================================================================= */

/* ---- sections: one background, optional drifting glows ---- */
.section { background: transparent; }
.section--glow { position: relative; overflow: hidden; }
.section--glow::before, .section--glow::after {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(64px); opacity: 0.14; pointer-events: none; z-index: 0;
  animation: cat-drift 20s ease-in-out infinite alternate;
}
.section--glow::before { background: var(--blob-1, var(--teal-100)); top: 6%; left: -170px; }
.section--glow::after { background: var(--blob-2, var(--teal)); bottom: -140px; right: -170px; animation-delay: -10s; }
.section--glow.glow--teal::before { background: var(--teal); opacity: 0.12; }
.section--glow.glow--teal::after { background: var(--teal-100); opacity: 0.5; }
.section--glow > .container { position: relative; z-index: 1; }

/* ---- the shared portal mark ---- */
.portal__mark { position: relative; z-index: 2; display: grid; place-items: center; transition: transform 400ms cubic-bezier(.34, 1.56, .64, 1); }
.tile--portal:hover .portal__mark { transform: scale(1.06) rotate(-4deg); }
.tile--portal:hover .portal__mark .tile__icon--lg { transform: none; }
.tile__art--tall { height: 240px; }
.tile__art--short { height: 140px; }
.tile__art--short .tile__orbit { width: 112px; height: 112px; }
.tile__art--short .tile__bubble--1 { top: 22px; }
.tile__art--short .tile__bubble--2 { top: auto; bottom: 18px; }
.tile__art--author { height: 180px; }
.portal__swap, .portal__book { background: var(--surface-raised); color: var(--brand); box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 30%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 12%, transparent); }
.portal__swap .icon, .portal__book .icon { width: 38px; height: 38px; }
.tile__art--short .tile__icon--lg { width: 64px; height: 64px; border-radius: 18px; }
.tile__art--short .tile__icon--lg .icon { width: 30px; height: 30px; }
.portal__badge-brand { padding: 0; overflow: hidden; }
.badge__icon { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.badge__icon .icon { width: 16px; height: 16px; }
.guide-card__badge { font-family: var(--font-mono); font-weight: var(--score-weight); font-size: 13px; color: var(--brand); }

/* ---- every portal card: same content spacing ---- */
.tile--portal .tile__content { gap: var(--space-2); padding: var(--space-6); }
.tile--portal .card__title { font-size: clamp(19px, 0.5vw + 16px, 22px); letter-spacing: -0.02em; line-height: 1.25; }
.tile--portal .card__actions { margin-top: auto; padding-top: var(--space-4); }

/* ---- reviews: featured portal + rows in one hairline card ---- */
.review-feature.tile--portal { padding: 0; }
.review-feature .tile__content { gap: var(--space-3); padding: var(--space-6) var(--space-8) var(--space-8); }
.review-feature .tile__content > p { margin: 0; }
.review-list { border-radius: 20px; box-shadow: var(--shadow-soft); }
.review-row { position: relative; isolation: isolate; grid-template-columns: auto auto minmax(0, 1fr); }
@media (min-width: 640px) { .review-row { grid-template-columns: auto auto minmax(0, 1fr) auto; } }
.review-row > *:not(.tile__spot) { position: relative; z-index: 1; }
.review-row .tile__spot { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand, var(--teal)) 10%, transparent), transparent 70%); }
.review-row:hover { background: transparent; }
.review-row:hover .tile__spot { opacity: 1; }
.review-row__brand { align-self: start; margin-top: 2px; }
.row__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--teal-100); color: var(--teal); }
.row__icon .icon { width: 16px; height: 16px; }
.review-row__side { grid-column: 1 / -1; }
@media (min-width: 640px) { .review-row__side { grid-column: auto; } }

/* ---- alternatives: portal cards in a 3-col grid ---- */
.alt-card.tile--portal { flex-direction: column; align-items: stretch; gap: 0; padding: 0; flex-wrap: nowrap; }
.alt-card .tile__content p { color: var(--ink-muted); margin: 0; }
@media (min-width: 1024px) { [data-grid="alternatives"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- team: portal cards, photo as the mark ---- */
.team { gap: var(--space-4); }
@media (min-width: 1024px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.author-card.tile--portal { display: flex; flex-direction: column; padding: 0; gap: 0; }
.author-card > * { grid-column: auto !important; }
.author-card .author__photo { grid-row: auto; width: 104px; height: 104px; border-radius: 50%; margin: 0; border: 4px solid var(--surface-raised); box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 30%, transparent); }
.author-card .author__photo--ph { display: grid; place-items: center; text-align: center; font-size: 11px; background: var(--surface); outline: 1.5px dashed var(--ink-muted); outline-offset: -6px; }
.author-card .tile__content p { margin: 0; }
.author-card .text-link { font-weight: 600; }

/* ---- guides ---- */
.guide-card.tile--portal { padding: 0; gap: 0; }

/* ---- how we test: numbered circles kept, restyled to the shared look ---- */
.how .timeline { list-style: none; display: grid; gap: var(--space-6); position: relative; border: 0; border-radius: 0; overflow: visible; }
@media (min-width: 900px) {
  .how .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .how .timeline::before { content: ""; position: absolute; top: 32px; left: 12%; right: 12%; border-top: 2px dashed color-mix(in srgb, var(--teal) 45%, transparent); }
}
.how .timeline li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: 0; background: none; }
.how .timeline li + li { border: 0; }
.how .timeline__num { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--line); box-shadow: 0 10px 28px color-mix(in srgb, var(--teal) 25%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 10%, transparent); font-family: var(--font-mono); font-size: 28px; line-height: 1; font-weight: var(--score-weight); color: var(--teal); position: relative; transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.how .timeline li:hover .timeline__num { transform: translateY(-4px) scale(1.06); }
.how .timeline li p { max-width: 26ch; color: var(--ink-muted); }
.how .timeline li p strong { color: var(--ink); display: block; margin-bottom: var(--space-1); }
.how .method { display: grid; gap: var(--space-4); margin-top: var(--space-12); }
@media (min-width: 1024px) { .how .method { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.how .shot-ph { margin: 0; display: grid; gap: var(--space-2); place-content: center; text-align: center; min-height: 260px; padding: var(--space-6); border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--teal) 40%, var(--line-strong)); background: radial-gradient(color-mix(in srgb, var(--teal) 18%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px, color-mix(in srgb, var(--teal-100) 25%, var(--surface-raised)); }
.how .scale-wrap { border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
.how .scale thead th { background: color-mix(in srgb, var(--teal-100) 45%, var(--surface-raised)); color: var(--ink); }
.how .btn-row--center { margin-top: var(--space-12); }

/* ---- FAQ: questions as soft cards ---- */
.faq { border: 0; display: grid; gap: var(--space-3); }
.faq__item { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); transition: border-color 200ms ease, box-shadow 200ms ease; }
.faq__item:hover { border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); }
.faq__item[open] { box-shadow: 0 10px 30px color-mix(in srgb, var(--teal) 14%, transparent); border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); }
.faq__item summary { padding: var(--space-4) var(--space-6); }
.faq__a { padding: 0 var(--space-6) var(--space-6); }
.faq__toggle { background: var(--teal-100); border: 0; color: var(--teal); }

/* ---- closing CTA: big teal portal card ---- */
.section--closing { padding-bottom: var(--space-12); }
.cta-portal {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --brand: var(--on-teal);
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: var(--on-teal);
  border-radius: 28px; padding: clamp(56px, 7vw, 96px) var(--space-6);
  background:
    radial-gradient(60% 80% at 50% 110%, color-mix(in srgb, var(--teal-100) 35%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--on-teal) 16%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--teal);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--teal) 35%, transparent);
  transform: perspective(1200px) rotateX(calc(var(--rx) * 0.4)) rotateY(calc(var(--ry) * 0.4));
  transition: transform 260ms ease;
}
.cta-portal .tile__spot { background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--on-teal) 12%, transparent), transparent 70%); }
.cta-portal:hover .tile__spot { opacity: 1; }
.cta-portal__inner { position: relative; z-index: 2; }
.cta-portal h2 { color: var(--on-teal); font-size: clamp(34px, 3.6vw + 14px, 64px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; max-width: 12em; margin: 0 auto var(--space-4); }
.cta-portal .hero__sub { color: color-mix(in srgb, var(--on-teal) 88%, var(--teal)); }
.cta-portal :focus-visible { outline-color: var(--on-teal); }
.cta-portal__decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta-bubble { color: var(--teal); }
.cta-bubble--1 { left: 6%; top: 18%; }
.cta-bubble--2 { left: 14%; top: 64%; border-radius: 50%; animation-delay: -1.2s; }
.cta-bubble--3 { left: 4%; bottom: 10%; animation-delay: -2.1s; }
.cta-bubble--4 { right: 7%; top: 14%; border-radius: 50%; animation-delay: -0.6s; }
.cta-bubble--5 { right: 15%; top: 58%; animation-delay: -1.8s; }
.cta-bubble--6 { right: 4%; bottom: 12%; border-radius: 50%; animation-delay: -2.6s; }
.cta-bubble--7 { left: 24%; top: 8%; animation-delay: -3s; }
.cta-bubble--8 { right: 25%; bottom: 8%; border-radius: 50%; animation-delay: -0.3s; }
@media (max-width: 899px) { .cta-bubble--5, .cta-bubble--2, .cta-bubble--7, .cta-bubble--8 { display: none; } }

/* ---- newsletter: soft card ---- */
.newsletter { border: 0; padding-top: 0; }
.newsletter__form { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; padding: var(--space-6) var(--space-8); box-shadow: var(--shadow-soft); }

/* dark mode: links on tinted art never carry text; keep defaults */
@media (prefers-reduced-motion: reduce) {
  .section--glow::before, .section--glow::after, .cta-bubble { animation: none !important; }
  .cta-portal { transform: none !important; }
}
.guide-card__badge { color: var(--ink); }
.author-card.tile--portal { align-items: stretch; } .author-card .tile__art { width: 100%; }

/* =================================================================
   Plain white page: no section glows, no hero tint or grid
   ================================================================= */
body, .hero, .section, .section--soft, .newsletter, .site-footer { background: var(--surface-raised); }
.section--soft { border-block: 0; }
.hero::before,
.section--categories::before, .section--categories::after,
.section--lists::before, .section--lists::after,
.section--glow::before, .section--glow::after { content: none; display: none; }

/* Fresh from the lab: centered heading, logos only */
.section__head--stack { flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.section__head--stack .section__title, .section__head--stack .section__sub { margin-inline: auto; }
.review-row { grid-template-columns: auto minmax(0, 1fr); }
@media (min-width: 640px) { .review-row { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* All section headings centered (H2 + intro + "See all" link) */
.section__head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-4); }
.section__head .section__title, .section__head .section__sub { margin-inline: auto; }
.faq-layout { grid-template-columns: 1fr !important; justify-items: center; gap: var(--space-8); }
.faq-layout__head { position: static !important; text-align: center; }
.faq-layout .faq { width: 100%; max-width: 820px; }

/* =================================================================
   Background: scattered tiny icons (magnifier, stars, checks, ...)
   One tiled SVG used as a mask, filled with the ink color at low opacity,
   so it follows the theme (light/dark). Hero top stays clean.
   ================================================================= */
main { position: relative; isolation: isolate; }
main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ink); opacity: 0.075;
  -webkit-mask: url("../img/pattern-icons.svg") 0 0 / 420px 420px repeat;
          mask: url("../img/pattern-icons.svg") 0 0 / 420px 420px repeat;
}
/* sections let the pattern show through */
.hero, .section, .section--soft, .newsletter { background: transparent; }
/* keep the hero headline area calm: white at the top, fading into the pattern */
.hero { background: linear-gradient(to bottom, var(--surface-raised) 0%, var(--surface-raised) 45%, color-mix(in srgb, var(--surface-raised) 0%, transparent) 100%); }
/* the app window, trust strip, cards and table stay solid white */
.window, .trust, .card, .tile, .review-list, .faq__item, .scale-wrap, .newsletter__form { background-color: var(--surface-raised); }

/* =================================================================
   Background: soft grain texture (replaces the scattered icons)
   ================================================================= */
main::before {
  background: var(--ink); opacity: 0.09;
  -webkit-mask: url("../img/grain.svg") 0 0 / 240px 240px repeat;
          mask: url("../img/grain.svg") 0 0 / 240px 240px repeat;
}
.hero { background: transparent; }

/* ---------- footer: soft tinted background, logo, link groups in boxes ---------- */
.site-footer { background: color-mix(in srgb, var(--teal) 5%, var(--surface-raised)); border-top: 1px solid var(--line); }
.footer__intro { display: grid; gap: var(--space-4); align-content: start; }
.footer__logo { margin-right: 0; }
.footer__logo .brand__name { font-size: 20px; }
.footer__brand { font-weight: 500; font-size: 16px; color: var(--ink-muted); letter-spacing: 0; max-width: 18em; }
.footer__cols { gap: var(--space-4); }
.footer__box { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-5, 20px); box-shadow: var(--shadow-soft); }
.footer__box .footer__h { display: inline-block; margin-bottom: var(--space-4); padding: 4px 10px; border-radius: 999px; background: var(--teal-100); color: var(--teal); font-weight: 700; }
.footer__bottom { border-top-color: color-mix(in srgb, var(--teal) 15%, var(--line)); }
.site-footer a { line-height: 1.4; display: inline-block; }
.site-footer ul { gap: var(--space-3); }
:root[data-theme="dark"] .footer__box .footer__h { color: var(--ink); }