/* ==========================================================================
   AmourBond - AIMOUR review landing page
   Editorial dark-plum theme. Flat fills only, no gradients.
   ========================================================================== */

/* ---------- self-hosted fonts ----------
   Fonts are served from this origin instead of fonts.googleapis.com. The
   Google Fonts stylesheet was a render-blocking request to a third-party
   host, which meant a DNS lookup, TLS handshake and round trip before any
   text could paint. Self-hosting removes that entirely.

   These are latin-subset variable WOFF2 files: one file covers all three
   Inter weights (400/500/600) and one covers both JetBrains Mono weights,
   because variable fonts carry the whole weight axis in a single file.
   font-display: swap keeps text visible during load. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #140a11;
  --ink-2: #1d1019;
  --ink-3: #271722;
  --paper: #f6efe8;
  --paper-dim: #cbbcc4;
  --muted: #9d8b96;
  --rose: #e2496f;
  --rose-soft: #f0839d;
  --amber: #e5ad4a;
  --sage: #79a98b;
  --line: rgba(246, 239, 232, 0.13);
  --line-strong: rgba(246, 239, 232, 0.3);
  --shell: 1180px;
  --r: 4px;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  /* faint paper grain, pure CSS, no gradient */
  background-image: radial-gradient(rgba(246, 239, 232, 0.022) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* Long words and unbroken strings must never push the layout wider than the
   screen. Headings are the usual offender because they are set very large. */
h1,
h2,
h3,
h4,
p,
li,
summary,
blockquote,
dd,
dt,
td,
th,
a,
span {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--rose-soft);
}

/* ---------- layout ---------- */

.shell {
  width: 100%;
  max-width: min(var(--shell), 100%);
  margin-inline: auto;
  padding-inline: 16px;
}

/* Nothing inside a section may be wider than the section itself. */
.band,
.band > .shell {
  max-width: 100%;
  min-width: 0;
}

/* Grid and flex children default to min-width:auto, which lets a wide child
   (a long word, an image, a table) blow out the whole row. Reset it. */
.grid > *,
.hero__grid > *,
.alt > *,
.faq-grid > *,
.stats > *,
.trustrow > * {
  min-width: 0;
}

/* Mobile-first section rhythm. Kept tight because two adjacent bands stack
   their padding, so 64px each would leave a 128px gap on a phone. */
.band {
  padding-block: 38px;
  position: relative;
  border-top: 1px solid var(--line);
}

.band--tint {
  background-color: var(--ink-2);
}



/* ---------- type ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* Type scales with the viewport but is capped so a long word in a heading
   cannot be wider than the screen it is rendered on. */
h1 {
  font-size: clamp(1.85rem, 6.4vw, 3.6rem);
}

h2 {
  font-size: clamp(1.45rem, 4.4vw, 2.4rem);
}

h3 {
  font-size: clamp(1.06rem, 2.6vw, 1.38rem);
}

h4 {
  font-size: 1.02rem;
}

p {
  margin: 0 0 14px;
}

.lede {
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
  color: var(--paper-dim);
  max-width: 62ch;
}

.answer {
  font-size: 1.04rem;
  color: var(--paper);
  font-weight: 500;
  max-width: 66ch;
}

.tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose-soft);
  display: block;
  margin-bottom: 12px;
}

.tag--amber {
  color: var(--amber);
}

.note {
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

strong {
  color: #fff;
  font-weight: 600;
}

/* ---------- header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: rgba(20, 10, 17, 0.94);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-decoration: none;
  flex-shrink: 0;
}

.wordmark svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.wordmark b {
  color: var(--rose);
  font-weight: 600;
}

.chip-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.69rem;
  color: var(--paper-dim);
  white-space: nowrap;
  /* The chip yields space first: it may shrink, the CTA may not. */
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.chip-rating .stars {
  font-size: 0.78rem;
}

/* Header CTA. It must stay on one line: the header is tight on a phone and a
   wrapped label pushes the button to two rows and breaks the bar height. */
.topbar .btn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  padding: 10px 14px;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 999px;
  min-height: 38px;
}

.topbar.is-past-hero .btn {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Phone header: the rating chip is the flexible element, so it sheds its
   label text before the wordmark or the CTA ever get squeezed. */
@media (max-width: 479px) {
  .topbar__in {
    gap: 8px;
  }
  .wordmark {
    font-size: 1rem;
  }
  .wordmark svg {
    width: 22px;
    height: 22px;
  }
  .chip-rating {
    padding: 4px 8px;
    font-size: 0.64rem;
    gap: 5px;
    min-width: 0;
  }
  .chip-rating .stars {
    font-size: 0.7rem;
  }
  .topbar .btn {
    padding: 9px 13px;
    font-size: 0.76rem;
  }
}

/* Very narrow phones: drop the star glyphs so the numeric rating and the CTA
   both stay fully legible instead of the row overflowing. */
@media (max-width: 379px) {
  .chip-rating .stars {
    display: none;
  }
  .chip-rating {
    padding: 4px 7px;
  }
  .topbar .btn {
    padding: 9px 11px;
    font-size: 0.73rem;
  }
}

/* Smallest phones still in use (320px): the chip shows a single star glyph and
   the bare score, which fits without truncating the "/ 5" suffix. */
@media (max-width: 339px) {
  .chip-rating .chip-suffix {
    display: none;
  }
}

/* ---------- stars ---------- */

.stars {
  color: var(--amber);
  letter-spacing: 0.09em;
  font-family: var(--mono);
  white-space: nowrap;
}

.stars--lg {
  font-size: 1.35rem;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  background-color: var(--rose);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  border: 0;
  border-radius: var(--r);
  transition: transform 0.18s ease, background-color 0.18s ease;
  text-align: center;
  line-height: 1.2;
}

.btn:hover {
  background-color: #c93b60;
  transform: translateY(-2px);
}

.btn--ghost {
  background-color: transparent;
  color: var(--paper);
  border: 1px solid var(--line-strong);
}

.btn--ghost:hover {
  background-color: var(--ink-3);
  border-color: var(--rose);
}

.btn--wide {
  width: 100%;
}

.btn__sub {
  font-family: var(--mono);
  font-size: 0.63rem;
  opacity: 0.82;
  letter-spacing: 0.06em;
  font-weight: 400;
}

.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin-block: 18px;
}

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

.hero {
  padding-block: 28px 34px;
  border-top: 0;
}

.hero__grid {
  display: grid;
  gap: 22px;
}

.hero h1 .accent {
  color: var(--rose);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(229, 173, 74, 0.35);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.trustrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 24px;
}

.trustrow div {
  flex: 1 1 33.333%;
  min-width: 112px;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
}

.trustrow div:last-child {
  border-right: 0;
}

.trustrow dt {
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.trustrow dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--paper);
}

/* hero art */
.hero__art {
  position: relative;
}

.frame {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  background-color: var(--ink-3);
  display: block;
  text-decoration: none;
}

.frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.frame:hover img {
  transform: scale(1.035);
}

.badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background-color: rgba(20, 10, 17, 0.9);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--paper);
  backdrop-filter: blur(5px);
  z-index: 2;
}

.badge--tl {
  top: 14px;
  left: 14px;
}

.badge--br {
  bottom: 14px;
  right: 14px;
}

.badge--bl {
  bottom: 14px;
  left: 14px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--sage);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}

.dot--amber {
  background-color: var(--amber);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

/* ---------- marquee (top ticker + review strip) ---------- */

.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-color: var(--ink-2);
  overflow: hidden;
  padding-block: 11px;
}

.ticker__track {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: slide 38s linear infinite;
}

.ticker__item {
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--paper-dim);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticker__item i {
  color: var(--rose);
  font-style: normal;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.rail {
  overflow: hidden;
  position: relative;
  padding-block: 6px;
}

.rail__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: slide 56s linear infinite;
}

.rail:hover .rail__track,
.rail:focus-within .rail__track {
  animation-play-state: paused;
}

.rcard {
  width: 310px;
  flex-shrink: 0;
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.rcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rcard__score {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.rcard blockquote {
  margin: 0;
  font-size: 0.89rem;
  color: var(--paper-dim);
  line-height: 1.62;
}

.rcard__who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--ink-3);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--rose-soft);
  flex-shrink: 0;
}

.rcard__name {
  font-weight: 600;
  font-size: 0.84rem;
}

.rcard__meta {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--muted);
}

/* ---------- generic grids ---------- */

.grid {
  display: grid;
  gap: 16px;
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}



.card {
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}

.card--edge {
  border-left: 2px solid var(--rose);
}

.card--edge-amber {
  border-left: 2px solid var(--amber);
}

.card--edge-sage {
  border-left: 2px solid var(--sage);
}

.card p:last-child {
  margin-bottom: 0;
}

.card__k {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}

.card__body {
  color: var(--paper-dim);
  font-size: 0.92rem;
}

/* ---------- alternating feature rows ---------- */

.alt {
  display: grid;
  gap: 18px;
  align-items: center;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}

.alt:first-of-type {
  border-top: 0;
}

.alt__media {
  position: relative;
}

/* Stacked layout: keep the media a banner rather than a full portrait, so the
   image never towers over the short block of copy beneath it. */
.alt__media .frame img {
  aspect-ratio: 4 / 3;
  max-height: 360px;
  object-position: center 20%;
}

.speclist {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.speclist li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 0.91rem;
  color: var(--paper-dim);
}

.speclist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--rose);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ---------- steps / HowTo ---------- */

.steps {
  list-style: none;
  counter-reset: s;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.steps li {
  counter-increment: s;
  position: relative;
  padding: 20px 20px 20px 62px;
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.steps li::before {
  content: "0" counter(s);
  position: absolute;
  left: 20px;
  top: 19px;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--rose);
}

.steps h3 {
  margin-bottom: 6px;
  font-size: 1.06rem;
}

.steps p {
  margin: 0;
  color: var(--paper-dim);
  font-size: 0.9rem;
}

/* ---------- gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gallery .frame img {
  aspect-ratio: 3 / 4;
}

.gtile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 12px 10px;
  background-color: rgba(20, 10, 17, 0.82);
  z-index: 2;
}

.gtile__name {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  color: #fff;
}

.gtile__role {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--rose-soft);
  letter-spacing: 0.04em;
}

/* ---------- table ----------
   Mobile-first: the table fits the screen instead of forcing a 660px minimum
   that pushed a third of the comparison off-screen on a phone. Padding and
   type shrink, headers wrap, and the first column stays readable. */

.tablewrap {
  border: 1px solid var(--line);
  border-radius: var(--r);
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  table-layout: fixed;
}

table th,
table td {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* First column carries the criteria label and needs the most room. */
table tbody th {
  width: 30%;
}

caption {
  caption-side: top;
  text-align: left;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background-color: var(--ink-2);
}

th,
td {
  padding: 9px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  background-color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: 500;
  white-space: normal;
}

tbody th {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--paper);
  white-space: normal;
}

tbody tr:nth-child(even) {
  background-color: rgba(246, 239, 232, 0.022);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.col-hero {
  color: var(--rose-soft) !important;
}

.yes {
  color: var(--sage);
}

.no {
  color: #d2687f;
}

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

.price {
  display: flex;
  flex-direction: column;
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
}

.price--pick {
  border-color: var(--rose);
}

.price__flag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 10px;
}

.price__amt {
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}

.price__amt span {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 400;
}

.price ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
  font-size: 0.88rem;
  color: var(--paper-dim);
}

.price ul li {
  padding: 7px 0 7px 20px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.price ul li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--rose);
  font-family: var(--mono);
}

.price ul li.minus::before {
  content: "-";
  color: var(--muted);
}

.price__for {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 16px;
}

.price .btn {
  margin-top: auto;
}

/* ---------- pros / cons ---------- */

.pclist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pclist li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 0.91rem;
  color: var(--paper-dim);
}

.pclist li:last-child {
  border-bottom: 0;
}

.pclist li::before {
  position: absolute;
  left: 0;
  top: 12px;
  font-family: var(--mono);
  font-size: 0.9rem;
}

.pclist--pro li::before {
  content: "\002B";
  color: var(--sage);
}

.pclist--con li::before {
  content: "\2212";
  color: #d2687f;
}

/* ---------- stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.stat {
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Two columns here, so the second cell in each row drops its right border. */
.stat:nth-child(2n) {
  border-right: 0;
}

/* Only the final row drops its bottom border, so every row above it keeps a
   divider and the block reads as a complete grid. */
.stat:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.stat__n {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 600;
  color: var(--rose);
  line-height: 1;
  margin-bottom: 7px;
}

.stat__l {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- fun fact / pro tip ---------- */

.aside {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  padding: 20px 22px;
  background-color: var(--ink-2);
  margin-block: 26px;
}

.aside__k {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aside--tip .aside__k {
  color: var(--sage);
}

.aside p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--paper-dim);
}

/* ---------- verdict scorecard ---------- */

.score {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.score__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background-color: var(--ink-2);
}

.score__row:last-child {
  border-bottom: 0;
}

.score__lbl {
  flex: 1 1 auto;
  font-size: 0.89rem;
  font-weight: 500;
}

.score__bar {
  width: 96px;
  height: 6px;
  background-color: var(--ink-3);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.score__bar i {
  display: block;
  height: 100%;
  background-color: var(--rose);
  width: 0;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.score__v {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--paper-dim);
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}

/* ---------- faq: one card per question, two columns on desktop ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.faq-card {
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--rose);
  border-radius: var(--r);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.faq-card:hover {
  border-color: var(--line-strong);
  border-left-color: var(--rose-soft);
}

.faq-card[open] {
  border-color: var(--line-strong);
}

.faq-card summary {
  cursor: pointer;
  padding: 18px 48px 18px 18px;
  position: relative;
  list-style: none;
  display: block;
}

.faq-card summary::-webkit-details-marker {
  display: none;
}

.faq-card summary:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: -2px;
}

.faq-card__q {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.34;
  color: var(--paper);
  display: block;
}

.faq-card summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--mono);
  color: var(--rose);
  font-size: 0.95rem;
  line-height: 1;
}

.faq-card[open] summary::after {
  content: "\2212";
  color: var(--paper);
  background-color: var(--rose);
  border-color: var(--rose);
}

.faq__a {
  padding: 0 18px 18px;
  color: var(--paper-dim);
  font-size: 0.92rem;
}

.faq__a p:last-child {
  margin-bottom: 0;
}

/* ---------- final cta ---------- */

.finale {
  text-align: center;
  padding-block: 68px;
}

.finale .btn {
  padding: 17px 34px;
  font-size: 1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-top: 22px;
}

.chips span {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ---------- legal pages (privacy, terms) ---------- */

.mono-inline {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--rose-soft);
  background-color: var(--ink-3);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Legal pages use running prose with h2 subheads, so those need breathing
   room above them. Scoped to .legal-prose so the rule cannot alter section
   heading spacing on the main review page. */
.legal-prose h2 {
  margin-top: 34px;
}

.legal-prose h2 + p {
  margin-top: 0;
}

.legal-prose p {
  color: var(--paper-dim);
}

.legal-prose .answer {
  color: var(--paper);
}

.legal-prose a {
  color: var(--rose-soft);
}

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

.foot {
  border-top: 1px solid var(--line);
  padding-block: 40px 52px;
  background-color: var(--ink-2);
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.legal-labels {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Muted monospace legal links. These are now real anchors so /privacy and
   /terms receive internal links and can be crawled and indexed. */
.legal-labels span,
.legal-labels a {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-decoration: none;
}

.legal-labels a:hover,
.legal-labels a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
}

.foot__bottom {
  padding-top: 20px;
  display: grid;
  gap: 12px;
}

/* ---------- motion ---------- */

.rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.62s ease-out, transform 0.62s ease-out;
  will-change: opacity, transform;
}

.rise.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ticker__track,
  .rail__track,
  .dot {
    animation: none;
  }
  .frame:hover img,
  .btn:hover {
    transform: none;
  }
  .score__bar i {
    transition: none;
  }
}

/* ---------- responsive ---------- */

/* Small tablets: ease the tight phone rhythm back out before the full
   desktop spacing kicks in at 720px. */
@media (min-width: 520px) {
  .band {
    padding-block: 54px;
  }
  .hero {
    padding-block: 36px 48px;
  }
  .hero__grid {
    gap: 30px;
  }
  .cta-stack {
    margin-block: 22px;
  }
}

@media (min-width: 720px) {
  .band {
    padding-block: 82px;
  }
  /* Wider screens get the roomier table: auto layout, bigger type, more
     padding, and nowrap headers. */
  table {
    table-layout: auto;
    font-size: 0.88rem;
  }
  table tbody th {
    width: auto;
  }
  th,
  td {
    padding: 13px 16px;
  }
  thead th {
    font-size: 0.67rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  tbody th {
    font-size: 0.88rem;
    white-space: nowrap;
  }
  .grid--2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Four columns: restore the right border on every cell, then clear it only
     at the end of each row of four. The bottom border stays on all but the
     last row so the two rows of stats are separated by a visible line. */
  .stat {
    border-bottom: 1px solid var(--line);
  }
  .stat:nth-child(2n) {
    border-right: 1px solid var(--line);
  }
  .stat:nth-child(4n) {
    border-right: 0;
  }
  .stat:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .stat:nth-last-child(-n + 4) {
    border-bottom: 0;
  }
  .cta-stack {
    flex-direction: row;
    align-items: center;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .faq-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .foot__bottom {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* Side-by-side feature rows start at 840px so tablets get the paired layout
   too. The text column drives the row height; the image fills to match it. */
@media (min-width: 840px) {
  .alt {
    grid-template-columns: 0.82fr 1.18fr;
    gap: 40px;
    padding-block: 42px;
    align-items: stretch;
  }
  .alt__media {
    display: flex;
  }
  /* The frame is the positioning context and the image fills it absolutely, so
     the row height comes from the text column alone. Without this the image's
     own intrinsic height pushes the row taller than the copy beside it. */
  .alt__media .frame {
    flex: 1 1 auto;
    position: relative;
    min-height: 100%;
  }
  .alt__media .frame img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center 20%;
  }
  .alt__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 290px;
    padding-block: 4px;
  }
  /* Flipped rows put the media second, so the wider text column moves first. */
  .alt--flip {
    grid-template-columns: 1.18fr 0.82fr;
  }
  .alt--flip .alt__media {
    order: 2;
  }
}

@media (min-width: 960px) {
  .hero {
    padding-block: 66px 78px;
  }
  .hero__grid {
    grid-template-columns: 1.06fr 0.94fr;
    gap: 52px;
  }
  .alt {
    gap: 46px;
    padding-block: 46px;
  }
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}