/* =========================================================================
   templates.css — content page templates (best-of, guide, review, versus, hub, gifts, trust)
   Loads after tokens.css, base.css and sections.css. It adds parts; it never restyles the homepage.
   NEW TOKENS (2): --measure, --tap. Everything else comes from tokens.css.
   ========================================================================= */
:root {
  --measure: 68ch;   /* long-form line length */
  --tap: 2.75rem;    /* 44px tap target floor */
}

/* The header is fixed and gets its pill surface from JS. Without JS it stays at the top of the page. */
html:not(.tjs) .site-header { position: absolute; }
html:has(.stickybar) { scroll-padding-bottom: 5.5rem; }

.tpl-wrap {
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- inline markers for unknowns (same dashed tag as the TEMP wordmark) ---------- */
.todo {
  display: inline-block;
  padding: 0 0.35em;
  border: 1.5px dashed currentColor;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.15em;
}

/* ---------- text-link action: every money link that is not the one filled button ---------- */
.go {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: var(--tap);
  font-weight: 650;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.go svg { inline-size: 0.95rem; flex: none; }

/* =========================================================================
   TOP BAND — pillar colour, breadcrumb, h1, answer, disclosure, quick pick
   ========================================================================= */
.tband {
  position: relative;
  padding-block: calc(var(--header-h) + var(--space-xs)) calc(var(--space-l) + clamp(1.5rem, 3vw, 3rem));
  background: var(--mood);
  color: var(--ink);
}
.tband__grid { display: grid; gap: var(--space-m); }
.tband__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  inline-size: 100%;
  block-size: clamp(1.5rem, 3vw, 3rem);
  fill: var(--paper);
  pointer-events: none;
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-caption);
  font-weight: 600;
}
.crumb li { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.crumb li + li::before { content: "/"; margin-inline: 0.5rem; }
.crumb a { display: inline-flex; align-items: center; min-block-size: var(--tap); text-underline-offset: 0.2em; }

.tpl-h1 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.answer {
  max-inline-size: 60ch;
  margin-block-start: var(--space-xs);
  font-size: var(--text-body);
  line-height: 1.5;
}
.tpl-disclosure {
  margin-block-start: var(--space-xs);
  font-size: var(--text-ui);
  font-weight: 550;
  line-height: 1.4;
}
.tpl-disclosure a { font-weight: 700; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }

/* quick pick: a paper plate with the dashed offset outline from the guide cards */
.qpick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-s) var(--space-m) var(--space-m);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow-sticker);
}
.qpick-plate { position: relative; }
.qpick-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--ink);
  border-radius: var(--radius-card);
  transform: translate(0.4rem, -0.4rem) rotate(1.2deg);
  pointer-events: none;
}
.qpick__label,
.prod__for {
  font-family: var(--font-marker);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mood-deep);
}
.qpick__name,
.prod__name {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.12;
}
.qpick__why { line-height: 1.4; }
.skip { font-size: var(--text-ui); line-height: 1.4; }
.skip a { font-weight: 650; text-underline-offset: 0.2em; }
/* links inside a sentence: inline padding grows the tap area to 44px and does not move the lines */
.tpl-disclosure a, .skip a, .prose a:not(.btn) { padding-block: calc((var(--tap) - 1.1em) / 2); }
.qpick .btn { margin-block-start: var(--space-2xs); }

@media (min-width: 60rem) {
  .tband__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-xl);
  }
  .answer { font-size: var(--text-lead); line-height: 1.4; }
  .tpl-disclosure { margin-block-start: var(--space-s); }
  .qpick-plate { rotate: 0.8deg; }
  .qpick { padding: var(--space-m) var(--space-l) var(--space-l); gap: var(--space-xs); }
  .qpick__name { font-size: var(--text-kicker); }
}

/* =========================================================================
   BODY — meta line, comparison table, table of contents, prose
   ========================================================================= */
.tbody {
  padding-block: var(--space-m) var(--space-2xl);
  background-image: var(--paws);
  background-size: clamp(18rem, 30vw, 26rem);
  background-position: 3rem 5rem;
}
.meta { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-s); font-size: var(--text-caption); color: var(--color-text-muted); }

.tpl-h2 {
  font-family: var(--font-display);
  font-size: var(--text-kicker);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.cmp { margin-block-start: var(--space-xl); }
.cmp table {
  inline-size: 100%;
  margin-block-start: var(--space-s);
  border-collapse: collapse;
  text-align: start;
}
.cmp th, .cmp td {
  padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
  text-align: start;
  vertical-align: middle;
}
.cmp thead th {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cmp tbody tr { border-block-start: 1.5px solid var(--color-line); }
.cmp tbody th {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.15;
}
.cmp tbody th a { display: inline-flex; align-items: center; min-block-size: var(--tap); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
.cmp td:last-child { padding-inline-end: 0; text-align: end; }

/* phones: each row becomes a card. The name and the action stay visible; the other cells get their column label. */
@media (max-width: 44rem) {
  .cmp thead {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp tbody tr {
    padding: var(--space-xs) var(--space-s);
    border: 0;
    border-radius: var(--radius-s);
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px var(--color-line);
  }
  .cmp tbody tr + tr { margin-block-start: var(--space-xs); }
  .cmp th, .cmp td { padding: 0; }
  .cmp td[data-label]::before { content: attr(data-label) ": "; font-weight: 650; }
  .cmp td:last-child { text-align: start; }
}

.article { display: grid; gap: var(--space-l); margin-block-start: var(--space-xl); }
.toc {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background: var(--color-bg-sunken);
}
.toc__head {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.toc a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-block: var(--space-2xs);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .toc a:hover, .related a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
}
@media (min-width: 64rem) {
  .article { grid-template-columns: minmax(0, 54rem) minmax(0, 16rem); justify-content: space-between; gap: var(--space-xl); align-items: start; }
  .article__body { grid-column: 1; grid-row: 1; }
  .toc { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: calc(var(--header-h) + 1rem); }
}

.prose { max-inline-size: var(--measure); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose > .tpl-h2 { margin-block-start: var(--space-xl); }
.prose > .tpl-h2:first-child { margin-block-start: 0; }
.prose ul { padding-inline-start: 1.25rem; list-style: disc; }
.prose li + li { margin-block-start: var(--space-3xs); }
.prose a:not(.btn) { font-weight: 600; text-underline-offset: 0.2em; }

/* =========================================================================
   PRODUCT BLOCK — tilted plate, best-for label, name, good points, skip line, the one button
   ========================================================================= */
.prods { margin-block-start: var(--space-xl); }
.prods__list { margin-block-start: var(--space-l); }
.prod {
  display: grid;
  gap: var(--space-m);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.prod + .prod { margin-block-start: var(--space-2xl); }
.plate { position: relative; max-inline-size: 22rem; }
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--mood-deep);
  border-radius: 1.5rem;
  transform: translate(0.55rem, -0.45rem) rotate(2.4deg);
  pointer-events: none;
}
.plate__img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--mood);
  transform: rotate(-1.4deg);
}
.prod:nth-child(even) .plate::before { transform: translate(-0.55rem, -0.45rem) rotate(-2.4deg); }
.prod:nth-child(even) .plate__img { transform: rotate(1.4deg); }
.plate__img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 32%);
}
.plate__note {
  position: absolute;
  inset-block-end: var(--space-xs);
  inset-inline-start: var(--space-xs);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prod__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); max-inline-size: var(--measure); }
.prod__name { font-size: var(--text-kicker); }
.prod__good { padding-inline-start: 1.25rem; list-style: disc; }
.prod__good li + li { margin-block-start: var(--space-3xs); }
.prod__body .btn { margin-block-start: var(--space-2xs); }
/* One filled button per screen: with JS, only the block that crosses the middle of the screen keeps the fill.
   The others rest as an outline of the same button. Without JS every block keeps the fill. */
.tjs .prod .btn--primary { transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.tjs .prod:not(.is-current) .btn--primary {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tjs .prod:not(.is-current) .btn__icon { background: var(--ink); color: var(--paper); }
@media (min-width: 48rem) {
  .prod { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .plate__img { aspect-ratio: 4 / 4.6; }
}

/* =========================================================================
   RELATED — 3 links, descriptive anchors
   ========================================================================= */
.related { margin-block-start: var(--space-2xl); }
.related ul { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-s); }
.related a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--tap);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.15;
  text-decoration: none;
}
.related .dot {
  flex: none;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 50%;
  background: var(--mood-deep);
  box-shadow: 0 0 0 2px var(--mood);
}

/* =========================================================================
   STICKY ACTION — phones only, best-of and review only.
   templates.js shows it only when the quick pick has left the screen and no other filled button is on screen.
   ========================================================================= */
.stickybar {
  position: fixed;
  inset-inline: var(--gutter);
  inset-block-end: max(var(--space-xs), env(safe-area-inset-bottom));
  z-index: calc(var(--z-header) - 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 0.375rem 0.375rem 0.375rem var(--space-s);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: var(--shadow-float), inset 0 0 0 1.5px var(--color-line);
  transition: transform 240ms var(--ease-out), opacity 200ms ease, visibility 0s;
}
.stickybar[inert] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(150%);
  transition: transform 200ms var(--ease-out), opacity 160ms ease, visibility 0s 200ms;
}
.stickybar__name {
  min-inline-size: 0;
  overflow: hidden;
  font-size: var(--text-caption);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stickybar .btn { flex: none; }
@media (min-width: 60rem) { .stickybar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .stickybar, .stickybar[inert] { transform: none; transition: opacity 160ms ease, visibility 0s; }
  .tjs .prod .btn--primary { transition: none; }
}

/* =========================================================================
   PARTS FOR THE OTHER TEMPLATES (guide, review, versus, hub, gifts, trust)
   ========================================================================= */
/* band variants: one column (no quick pick), quiet (gifts), neutral (trust) */
.tband--solo .tband__grid { grid-template-columns: minmax(0, 52rem); }
.tband--soft  { background: var(--mood-soft); }
.tband--paper { background: var(--color-bg-sunken); }
.tband .chips { margin-block-start: var(--space-s); }
.tband .chip { background: var(--paper); }

/* guide: step label above a step heading */
.prose ol { padding-inline-start: 1.25rem; list-style: decimal; }
.step__n {
  font-family: var(--font-marker);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mood-deep);
}
.prose > .step__n { margin-block-start: var(--space-xl); }
.prose > .step__n + .tpl-h2 { margin-block-start: var(--space-3xs); }

/* note: a sunken box for a soft product note or an honest "we do not know yet" block */
.note {
  max-inline-size: var(--measure);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background: var(--color-bg-sunken);
}
.note > * + * { margin-block-start: var(--space-2xs); }
.note__head { font-weight: 700; }
.prose > .note { margin-block: var(--space-m); }

/* strip: the one money block on guide and hub (pillar colour plate + dashed outline) */
.strip { position: relative; max-inline-size: 54rem; margin-block-start: var(--space-2xl); }
.strip::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--mood-deep);
  border-radius: var(--radius-card);
  transform: translate(0.4rem, -0.4rem) rotate(0.8deg);
  pointer-events: none;
}
.strip__in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-m);
  border-radius: var(--radius-card);
  background: var(--mood);
  color: var(--ink);
}
.strip .qpick__label { color: var(--ink); }
.strip__name {
  font-family: var(--font-display);
  font-size: var(--text-kicker);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.1;
}
.strip p { max-inline-size: 60ch; }
.strip .tpl-disclosure { margin-block-start: 0; }
@media (min-width: 48rem) { .strip__in { padding: var(--space-l); } }

/* review: suits / skip columns */
.fit { display: grid; gap: var(--space-l); margin-block-start: var(--space-xl); }
.fit ul { margin-block-start: var(--space-s); padding-inline-start: 1.25rem; list-style: disc; }
.fit li + li { margin-block-start: var(--space-2xs); }
.fit p { margin-block-start: var(--space-s); }
.fit a:not(.btn) { font-weight: 650; text-underline-offset: 0.2em; padding-block: calc((var(--tap) - 1.1em) / 2); }
@media (min-width: 44rem) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); max-inline-size: 54rem; } }

/* versus: two buy actions side by side, at every width */
.duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.duel__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  border-radius: var(--radius-s);
  background: var(--paper);
  box-shadow: var(--shadow-sticker), inset 0 0 0 1.5px var(--color-line);
}
.duel__side .qpick__label { font-size: 1.25rem; }
.duel__name {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.1;
  overflow-wrap: break-word;
}
.duel__side p { font-size: var(--text-ui); line-height: 1.4; }
.duel .btn { inline-size: 100%; justify-content: center; margin-block-start: auto; padding-inline: var(--space-2xs); }
.duel--end { max-inline-size: 54rem; margin-block-start: var(--space-m); }
@media (min-width: 48rem) {
  .duel { gap: var(--space-m); }
  .duel__side { padding: var(--space-m); border-radius: var(--radius-card); gap: var(--space-xs); }
}

/* hub: guide cards in a grid (the homepage card, not in a rail), and link rows */
.hub-sec { margin-block-start: var(--space-2xl); scroll-margin-top: calc(var(--header-h) + 1rem); }
.hub-sec:first-of-type { margin-block-start: var(--space-xl); }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: var(--space-xl) var(--space-l);
  margin-block-start: var(--space-l);
}
.hub-grid .gcard { inline-size: auto; block-size: auto; user-select: auto; }
.rows { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-s); }
.rows a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--tap);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.15;
  text-decoration: none;
}
.rows .dot { flex: none; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--mood-deep); box-shadow: 0 0 0 2px var(--mood); }
@media (hover: hover) and (pointer: fine) {
  .rows a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
}

/* gifts: quiet. Straight plates, no dashed outline, a calm card grid. */
.plate--flat::before { display: none; }
.plate--flat .plate__img { transform: none; aspect-ratio: 4 / 3.4; }
.feature { display: grid; gap: var(--space-m); margin-block-start: var(--space-xl); }
.feature .plate { max-inline-size: 26rem; }
@media (min-width: 48rem) {
  .feature { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
}
.gifts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-xl) var(--space-l);
  margin-block-start: var(--space-l);
}
.gift { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.gift .plate { inline-size: 100%; max-inline-size: none; margin-block-end: var(--space-2xs); }
.gift__name { font-family: var(--font-display); font-size: var(--text-lead); font-weight: 700; font-stretch: 88%; line-height: 1.15; }
.gift .go { margin-block-start: auto; }

/* trust: switch between the three trust pages */
.switch { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-m); margin-block-start: var(--space-s); }
.switch a { display: inline-flex; align-items: center; min-block-size: var(--tap); font-weight: 650; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.switch a[aria-current="page"] { text-decoration: none; }
.switch a[aria-current="page"]::before {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-inline-end: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
}