/* SEO Tools Tested: content pages, data components, the test rig and motion. Extends look G (site.css) with the same tokens.
 * Every color, face and size comes from tokens.css; the rig's own tokens are mapped onto G's palette in .rig-scope. */

/* ---------- page head ---------- */
.page { display: block; }
.pagehead { max-width: var(--page-max); margin: 0 auto; padding: var(--space-xl) var(--page-gutter) var(--space-lg); }
.pagehead h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: -0.01em; max-width: 22ch; margin: var(--space-sm) 0 var(--space-md); overflow-wrap: anywhere; min-width: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-rule); }
.crumbs a { color: var(--color-muted); }
.pagehead__by { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-sm); border-top: var(--rule-ink) solid var(--color-ink); max-width: 46rem; }
.pagehead__by img { width: 48px; height: 48px; border: var(--rule-ink) solid var(--color-ink); flex: none; }
.pagehead__by p { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); }
.pagehead__by .pending { font-size: var(--text-xs); }

/* ---------- reading column ---------- */
.prose { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter) var(--space-3xl); display: grid; grid-template-columns: minmax(0, 1fr); }
.prose > * { max-width: 46rem; min-width: 0; }
.prose > .table-fig, .prose > .costchart, .prose > .plates, .prose > .rig, .prose > .stages, .prose > figure { max-width: 64rem; }
.prose p, .prose li { font-size: var(--text-base); line-height: var(--leading-body); }
.prose > p:first-child { font-size: 1.1875rem; color: var(--color-ink); }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; margin: var(--space-2xl) 0 var(--space-sm); overflow-wrap: anywhere; }
.prose h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); line-height: var(--leading-snug); margin: var(--space-xl) 0 var(--space-xs); }
.prose p { margin: 0 0 var(--space-md); }
.prose ul, .prose ol { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
.prose li { margin-bottom: var(--space-2xs); }
.prose a { color: var(--color-green); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prose strong, .prose b { font-weight: 700; }

/* ---------- tables ---------- */
.table-fig { margin: var(--space-lg) 0 var(--space-xl); }
.table-scroll { overflow-x: auto; border: var(--rule-ink) solid var(--color-ink); box-shadow: var(--shadow-hard); background: var(--color-raised); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose caption { text-align: left; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-ink) solid var(--color-ink); background: var(--color-paper-2); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.prose thead th { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.prose tbody th { font-weight: 700; white-space: nowrap; }
.prose td.num { font-family: var(--font-mono); white-space: nowrap; }
.prose tr:last-child th, .prose tr:last-child td { border-bottom: 0; }
.compare td { width: 40%; }
.src, .table-fig figcaption { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral); margin-top: var(--space-xs); line-height: 1.5; }

/* ---------- buy box ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs) var(--space-lg); margin: var(--space-lg) 0 var(--space-xl); padding: var(--space-md) var(--space-lg); background: var(--color-mint-2); border: var(--rule-ink) solid var(--color-ink); box-shadow: var(--shadow-hard); }
.cta__line { margin: 0; display: grid; gap: var(--space-3xs); }
.cta__line b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.cta__line span { font-size: var(--text-sm); color: var(--color-muted); }
.cta__note { grid-column: 1 / -1; margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral); }
.btn-go { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-lg); background: var(--color-yellow); color: var(--color-ink); font-weight: 700; text-decoration: none; border: var(--rule-ink) solid var(--color-ink); box-shadow: var(--shadow-hard); white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn-go .i { width: 1rem; height: 1rem; }
@media (hover: hover) { .btn-go:hover { background: var(--color-yellow-2); transform: translate(-1px, -1px); box-shadow: var(--shadow-hard-lift); } }
.btn-go:active { transform: translate(3px, 3px); box-shadow: var(--shadow-none); }
@media (max-width: 34rem) { .cta { grid-template-columns: minmax(0, 1fr); } .btn-go { justify-self: start; } }

/* ---------- plates inside pages ---------- */
.plates--inline { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: var(--space-lg); margin: var(--space-lg) 0 var(--space-xl); }
.prose > .plate--inline { max-width: 26rem; margin: var(--space-lg) 0 var(--space-xl); }
.plate--inline .plate__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin: var(--space-xs) 0; }

/* ---------- cost chart ---------- */
.costchart { margin: var(--space-lg) 0 var(--space-xl); padding: var(--space-lg); background: var(--color-raised); border: var(--rule-ink) solid var(--color-ink); box-shadow: var(--shadow-hard); }
.costchart__t { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-md); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.bar { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 5.5rem; gap: var(--space-md); align-items: center; padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar:last-child { border-bottom: 0; padding-bottom: 0; }
.bar__who { display: grid; gap: 2px; min-width: 0; }
.bar__tool { font-weight: 700; }
.bar__meta { font-size: var(--text-xs); color: var(--color-muted); }
.bar__track { height: 1.125rem; border: var(--rule-ink) solid var(--color-ink); background: var(--color-paper-2); }
.bar__fill { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--color-mint); border-right: var(--rule-ink) solid var(--color-ink); transform-origin: left center; }
.bar--weekly .bar__fill { background: repeating-linear-gradient(45deg, var(--color-mint) 0 4px, var(--color-ink) 4px 6px); }
.bar--unpublished .bar__fill, .bar--unconfirmed .bar__fill { background: var(--color-raised); outline: var(--rule-ink) dashed var(--color-ink); outline-offset: -3px; }
.bar__val { font-family: var(--font-mono); font-weight: 700; text-align: right; }
.costchart__key { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); list-style: none; margin: var(--space-md) 0 var(--space-xs); padding: 0; font-size: var(--text-xs); }
.costchart__key li { display: inline-flex; align-items: center; gap: var(--space-xs); }
@media (max-width: 40rem) {
  .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .bar__track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- test pending, FAQ, sources ---------- */
.testpending { margin: var(--space-lg) 0 var(--space-xl); padding: var(--space-md) var(--space-lg); border: var(--rule-ink) dashed var(--color-ink); background: var(--color-raised); }
.testpending__t { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-weight: 700; margin: 0 0 var(--space-xs); }
.testpending p:last-child { margin: 0; }
.faq details { border: var(--rule-ink) solid var(--color-ink); background: var(--color-raised); margin-bottom: var(--space-sm); box-shadow: var(--shadow-hard-sm); }
.faq summary { cursor: pointer; padding: var(--space-sm) var(--space-md); font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--space-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq details > p { margin: 0; padding: var(--space-sm) var(--space-md) var(--space-md); }
.sources ol { font-size: var(--text-sm); }
.sources li { overflow-wrap: anywhere; }

/* ---------- rig (from look H) mapped to look G's palette ---------- */
.rig-scope {
  --color-orange: oklch(72% 0.15 75);        /* tracker lane: readable amber */
  --color-orange-ink: var(--color-ink);
  --color-orange-tint: oklch(94% 0.07 92);
  --color-blue: var(--color-green);          /* person lane */
  --color-blue-tint: var(--color-mint);
  --color-card: var(--color-raised);
  --color-ink-2: var(--color-muted);
  --color-ink-3: var(--color-neutral);
  --color-on-ink: var(--color-raised);
  --line: var(--rule-ink);
  --line-hair: var(--rule-hair);
  --radius-md: var(--radius);
  --radius-sm: 2px;
  --track-label: 0.04em;
  --weight-mono-strong: 700;
  --font-display: var(--font-body);
}

/* ---------- motion (all transform and opacity; reduced motion shows final frames) ---------- */
.js [data-measure] .bar__fill, .js [data-measure] .row__fill { transform: scaleX(0); transition: transform 700ms var(--ease-out); }
.js [data-measure].is-in .bar__fill, .js [data-measure].is-in .row__fill { transform: scaleX(1); }
.js [data-measure].is-in .bar:nth-child(2) .bar__fill { transition-delay: 60ms; }
.js [data-measure].is-in .bar:nth-child(3) .bar__fill { transition-delay: 120ms; }
.js [data-measure].is-in .bar:nth-child(4) .bar__fill { transition-delay: 180ms; }
.js [data-measure].is-in .bar:nth-child(5) .bar__fill { transition-delay: 240ms; }
.js [data-measure].is-in .bar:nth-child(6) .bar__fill { transition-delay: 300ms; }
.js [data-measure].is-in .bar:nth-child(7) .bar__fill { transition-delay: 360ms; }
.js [data-measure].is-in .bar:nth-child(8) .bar__fill { transition-delay: 420ms; }
.js [data-measure].is-in .bar:nth-child(9) .bar__fill { transition-delay: 480ms; }
.js .stages[data-draw] .stage { opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.js .stages[data-draw].is-in .stage { opacity: 1; transform: none; }
.js .stages[data-draw].is-in .stage:nth-child(2) { transition-delay: 140ms; }
.js .stages[data-draw].is-in .stage:nth-child(3) { transition-delay: 280ms; }
.js .stages[data-draw].is-in .stage:nth-child(4) { transition-delay: 420ms; }
.js .stages[data-draw].is-in .stage:nth-child(5) { transition-delay: 560ms; }
.js .stages[data-draw].is-in .stage:nth-child(6) { transition-delay: 700ms; }

/* the re-sort (home): live list replaces the still when motion is allowed */
.resort { position: relative; }
.resort__live { display: none; }
.resort.is-live .resort__live { display: block; }
.resort.is-live .slot__still { display: none; }
.resort__count { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; margin: 0 0 var(--space-2xs); font-variant-numeric: tabular-nums; }
.resort__count small { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); margin-left: var(--space-xs); }
.resort__track { position: relative; height: 2px; background: var(--color-ink); margin: var(--space-md) 0 var(--space-lg); }
.resort__knob { position: absolute; top: 50%; left: 0; width: 1.25rem; height: 1.25rem; margin: -0.625rem 0 0 -0.625rem; border-radius: 50%; background: var(--color-mint); border: var(--rule-ink) solid var(--color-ink); transition: left 900ms var(--ease-in-out); }
.resort__list { list-style: none; margin: 0; padding: 0; position: relative; }
.resort__row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) minmax(0, 7rem) 4.25rem; gap: var(--space-sm); align-items: center; height: 3.25rem; border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-raised); transition: transform 700ms var(--ease-in-out); will-change: transform; }
.resort__no { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; border: var(--rule-ink) solid var(--color-ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.resort__name { font-weight: 700; display: block; line-height: 1.2; }
.resort__plan { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.resort__plan s { color: var(--color-neutral); margin-right: var(--space-2xs); }
.resort__plan.is-flip b { background: var(--color-yellow); padding: 0 3px; }
.resort__bar { height: 0.875rem; border: var(--rule-ink) solid var(--color-ink); background: var(--color-paper-2); }
.resort__fill { display: block; height: 100%; width: 100%; background: var(--color-mint); transform-origin: left center; transform: scaleX(var(--v, 0.1)); transition: transform 700ms var(--ease-in-out); }
.resort__row--weekly .resort__fill { background: repeating-linear-gradient(45deg, var(--color-mint) 0 4px, var(--color-ink) 4px 6px); }
.resort__row--unpublished .resort__fill, .resort__row--unconfirmed .resort__fill { background: var(--color-raised); outline: 2px dashed var(--color-ink); outline-offset: -3px; }
.resort__price { font-family: var(--font-mono); font-weight: 700; text-align: right; }
.resort__pause { margin-top: var(--space-sm); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.25rem; padding: 0 var(--space-sm); border: var(--rule-ink) solid var(--color-ink); background: var(--color-raised); box-shadow: var(--shadow-hard-sm); font: 700 var(--text-xs) / 1 var(--font-mono); cursor: pointer; }
.resort__pause:active { transform: translate(2px, 2px); box-shadow: var(--shadow-none); }

/* rig animation: stages light up in order; the final frame is the static drawing */
.js .rig.is-armed .rg-card, .js .rig.is-armed .rg-chev, .js .rig.is-armed .rg-lit, .js .rig.is-armed .rg-link-miss { opacity: 0; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.js .rig.is-armed .rg-lane { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1100ms var(--ease-in-out); }
.js .rig.is-armed.s1 .rg-lane { stroke-dashoffset: 0; }
.js .rig.is-armed.s2 .rg-chev, .js .rig.is-armed.s2 .rg-card { opacity: 1; }
.js .rig.is-armed.s3 .rg-link-miss, .js .rig.is-armed.s3 .rg-lit { opacity: 1; }

/* sticky bar tightens on scroll (N10) */
.nav { transition: box-shadow var(--dur-short) var(--ease-out); }
.nav.is-scrolled { box-shadow: 0 2px 0 var(--color-ink); }

/* form honeypot, preview badge */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
body[data-preview] .alerts::before { content: "Local preview: sign-ups work once the site is live"; display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; background: var(--color-yellow); border: var(--rule-ink) solid var(--color-ink); padding: var(--space-3xs) var(--space-xs); margin-bottom: var(--space-sm); width: fit-content; max-width: 100%; white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .js [data-measure] .bar__fill, .js [data-measure] .row__fill { transform: none !important; transition: none !important; }
  .js .stages[data-draw] .stage { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .rig.is-armed .rg-card, .js .rig.is-armed .rg-chev, .js .rig.is-armed .rg-lit, .js .rig.is-armed .rg-link-miss { opacity: 1 !important; transition: none !important; }
  .js .rig.is-armed .rg-lane { stroke-dashoffset: 0 !important; transition: none !important; }
  .resort__row, .resort__fill, .resort__knob { transition: none !important; }
}

/* ---------- home: pricing guides, comparisons and picks ---------- */
.guides { max-width: var(--page-max); margin: 0 auto; padding: var(--space-3xl) var(--page-gutter) 0; }
.guides__head h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; margin: 0 0 var(--space-sm); max-width: 24ch; }
.guides__head p { max-width: 46rem; margin: 0 0 var(--space-xl); }
.guides__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-lg); }
.guides__col { background: var(--color-raised); border: var(--rule-ink) solid var(--color-ink); box-shadow: var(--shadow-hard); padding: var(--space-lg); }
.guides__col h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); line-height: var(--leading-snug); margin: 0 0 var(--space-xs); }
.guides__col p { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-md); }
.guides__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.guides__col li { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xs); }
.guides__col a { font-weight: 600; color: var(--color-ink); text-decoration-color: var(--color-green); text-underline-offset: 0.2em; }

/* the Test pending badge sits in the corner of a plate; inside text rows it flows inline */
.pagehead__by .pending, .testpending .pending { position: static; }

/* ---------- article + sticky rail ---------- */
.page__body { max-width: var(--page-max); margin: 0 auto; }
.page__body > .prose { padding-left: 0; padding-right: 0; margin: 0; }
.page__body { padding: 0 var(--page-gutter) var(--space-3xl); }
.rail { display: none; }
@media (min-width: 72rem) {
  .page__body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-2xl); align-items: start; }
  .rail { display: grid; gap: var(--space-lg); position: sticky; top: calc(var(--nav-offset) + var(--space-md)); }
}
.rail__buy { background: var(--color-raised); border: var(--rule-ink) solid var(--color-ink); box-shadow: var(--shadow-hard); padding: var(--space-md) var(--space-lg) var(--space-lg); display: grid; gap: var(--space-sm); }
.rail__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin: 0; }
.rail__spec { margin: 0; display: grid; gap: var(--space-xs); }
.rail__spec div { display: grid; gap: 2px; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xs); }
.rail__spec dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral); }
.rail__spec dd { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.rail__buy .btn-go { justify-content: center; }
.rail__more { font-size: var(--text-sm); font-weight: 600; color: var(--color-green); }
.rail__note { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral); }
.rail__toc { border-left: var(--rule-ink) solid var(--color-ink); padding-left: var(--space-md); }
.rail__t { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-xs); }
.rail__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.rail__toc a { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; line-height: 1.35; display: block; }
.rail__toc a:hover { color: var(--color-ink); text-decoration: underline; }
.prose h2[id], .prose h3[id] { scroll-margin-top: calc(var(--nav-offset) + var(--space-md)); }

/* Calculator inside an article. G gives .calc the named area "calc" for the home grid;
   inside the one-column article grid that name would open a second, implicit column. */
.prose > .calc { grid-area: auto; container: calc-col / inline-size; margin: var(--space-lg) 0 var(--space-xl); }
/* G switches rows to one line at a 48rem viewport, which assumes a full-width panel.
   In an article the panel can be narrower, so the panel's own width decides. */
@container calc-col (max-width: 37rem) {
  .calc__controls { grid-template-columns: minmax(0, 1fr); }
  .calc__results { --cols: 1.75rem minmax(0, 1fr) auto; }
  .row { grid-template-areas: "no who price" "no cad go" "no bar bar"; row-gap: var(--space-2xs); padding: var(--space-sm) 0; }
  .row--custom { grid-template-areas: "no who go" "no cad cad" "no bar bar"; }
  .row__no { align-self: start; }
  .axis__title { grid-column: 2 / -1; grid-row: 2; justify-self: start; padding-top: 0; }
  .axis__scale { grid-column: 2 / -1; margin-inline: var(--space-xs); }
}

/* Tables scroll sideways inside their own box on small screens; the box takes keyboard focus. */
.table-scroll:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }