/* ==========================================================================
   BuyDinghy design system
   Rugged utility (Jeep) x editorial spec density (MotorTrend) x
   scannable scoring and comparison (TripAdvisor).
   ========================================================================== */

:root {
  /* Core palette */
  --ink:        #0A0E13;
  --ink-2:      #10161E;
  --ink-3:      #18202B;
  --ink-4:      #232E3C;
  --hull:       #F6F4EF;
  --hull-2:     #EAE5DA;
  --sand:       #C9BFA9;
  --fog:        #AAB4C0;
  --fog-2:      #8795A6;

  /* Signals */
  --signal:     #FF5A1F;   /* primary — orange */
  --signal-lo:  #C8410F;
  --deep:       #00C2A8;   /* secondary — teal */
  --deep-lo:    #00806F;
  --beacon:     #FFC53D;   /* gold */
  --flare:      #E63946;   /* red */
  --steel:      #7D94AB;
  --navy:       #2D5C8A;

  --line:       color-mix(in srgb, var(--hull) 14%, transparent);
  --line-hard:  color-mix(in srgb, var(--hull) 26%, transparent);

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: min(1280px, 100% - 2.5rem);
  --gut: clamp(1rem, 4vw, 2rem);
  --cut: 14px;             /* angled corner size */
  --r: 3px;
}

/* ------------------------------ reset ----------------------------------- */
*, *::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 { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--hull);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
button, input, select { font: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: -.01em; margin: 0 0 .5em; text-transform: uppercase; }
h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); }
h4 { font-size: 1.1rem; letter-spacing: .02em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .45em; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.shell { width: var(--shell); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--signal); color: #000; padding: .6rem 1rem; font-weight: 800; }

/* ------------------------------ texture --------------------------------- */
.topo {
  position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 38px, color-mix(in srgb, var(--hull) 7%, transparent) 38px 39px),
    repeating-linear-gradient(65deg, transparent 0 52px, color-mix(in srgb, var(--deep) 9%, transparent) 52px 53px);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size: 4px 4px;
}

/* ------------------------------ bits ------------------------------------ */
.kicker {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 .9rem; display: flex; align-items: center; gap: .6rem;
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--signal); flex: none; }
.kicker--deep { color: var(--deep); } .kicker--deep::before { background: var(--deep); }

.eyebrow { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); }

.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.6; color: var(--hull-2); max-width: 62ch; }
.muted { color: var(--fog); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Angular "cut corner" surface — the core shape language of the site. */
.cut {
  --cutsz: var(--cut);
  clip-path: polygon(0 0, calc(100% - var(--cutsz)) 0, 100% var(--cutsz), 100% 100%, var(--cutsz) 100%, 0 calc(100% - var(--cutsz)));
}
.cut-tr { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }

/* ------------------------------ buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  font-size: 1.05rem; min-height: 48px; padding: .75rem 1.5rem; border: 2px solid transparent; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--signal); color: #120800; }
.btn--primary:hover { background: #ff7440; }
.btn--ghost { border-color: var(--line-hard); color: var(--hull); background: transparent; }
.btn--ghost:hover { border-color: var(--signal); color: var(--signal); }
.btn--dark { background: var(--ink); color: var(--hull); }

/* ------------------------------ header ---------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.poweredbar { background: var(--signal); color: #111; }
.poweredbar__in { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.research-links { border-top: 1px solid var(--line); background: var(--ink-3); }
.research-links__in { min-height: 64px; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; }
.research-links__in strong { color: var(--deep); font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-right: auto; }
.research-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--hull-2); text-decoration: none; font-weight: 600; }
.research-links a:hover { color: var(--signal); }
.powered-corner { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 154px; display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; background: rgba(246,244,239,.96); color: #062d59; border: 1px solid rgba(10,14,19,.15); box-shadow: 0 8px 28px rgba(0,0,0,.28); pointer-events: none; }
.powered-corner img { width: 42px; height: 42px; object-fit: contain; }
.powered-corner span { font-size: .64rem; line-height: 1.2; }
.powered-corner strong { font-size: .72rem; }
.contact-form { display: grid; gap: 1.1rem; max-width: 760px; }
.contact-form label { display: grid; gap: .4rem; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 48px; border: 1px solid var(--line-hard); background: var(--ink-2); color: var(--hull); padding: .75rem; border-radius: 0; }
.contact-form textarea { min-height: 180px; resize: vertical; }
.resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.resource-card { border: 1px solid var(--line); background: var(--ink-2); padding: 1.25rem; }
.resource-card a { color: var(--signal); font-weight: 700; }
.masthead__in { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; text-transform: uppercase; color: var(--hull); }
.logo mark { background: var(--signal); color: #120800; padding: 0 .28rem; }
.logo svg { flex: none; }
.mainnav { display: flex; gap: .25rem; margin-left: auto; align-items: center; }
.mainnav a {
  text-decoration: none; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: 1.02rem; padding: .45rem .7rem; color: var(--hull-2); border-bottom: 2px solid transparent;
}
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--signal); border-bottom-color: var(--signal); }
.navtoggle { display: none; min-width: 48px; min-height: 44px; background: none; border: 1px solid var(--line-hard); color: var(--hull); padding: .45rem .7rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; margin-left: auto; }

@media (max-width: 900px) {
  .navtoggle { display: block; }
  .mainnav {
    position: fixed; inset: 98px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2); border-bottom: 2px solid var(--signal); padding: .5rem var(--gut) 1.2rem; margin: 0;
  }
  .mainnav[hidden] { display: none; }
  .mainnav a { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1.25rem; }
}

/* ------------------------------ hero ------------------------------------ */
.hero { position: relative; overflow: hidden; background: linear-gradient(170deg, var(--ink-3) 0%, var(--ink) 62%); border-bottom: 1px solid var(--line); }
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 120%;
  background: radial-gradient(50% 50% at 22% 18%, color-mix(in srgb, var(--signal) 26%, transparent), transparent 70%),
              radial-gradient(45% 45% at 84% 8%, color-mix(in srgb, var(--deep) 22%, transparent), transparent 72%);
  pointer-events: none;
}
.hero__in { position: relative; padding: clamp(2.75rem, 6vw, 4.75rem) 0 clamp(2.25rem, 4vw, 3.5rem); }
.hero h1 { max-width: 16ch; }
.hero h1 .out {
  -webkit-text-stroke: 2px var(--signal); color: transparent; display: block;
}
/* Safari and Firefox render text-stroke slightly thinner; a faint shadow keeps
   the outline legible on the dark ground in both. */
@supports not (-webkit-text-stroke: 1px red) {
  .hero h1 .out { color: var(--signal); }
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.hero__grid > * { min-width: 0; }
.hero__art { position: relative; }
.hero__art svg { width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.hero__art .shot { margin-right: calc((100vw - var(--shell)) / -2); }
.hero__art .shot, .hero__art picture, .hero__art .shot img { width: 100%; min-width: 0; }
.hero__art .shot img { aspect-ratio: 3 / 2; border: 1px solid var(--line-hard); }
.hero__art .shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, transparent 24%), linear-gradient(0deg, rgba(10,14,19,.45), transparent 36%);
}
.hero__art figcaption { position: absolute; z-index: 2; right: 1rem; bottom: .75rem; padding: 0; color: #fff; text-shadow: 0 1px 3px #000; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: none; margin-inline: calc(var(--gut) * -1); }
  .hero__art .shot { margin: 0; }
  .hero__art .shot::after { background: linear-gradient(0deg, var(--ink-3), transparent 46%); }
}

/* Stat strip — the "trail rated" spec bar. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.stats div { padding: 1.15rem var(--gut); border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; }
.stats b { display: block; font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1; color: var(--signal); }
.stats span { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); }

.trustbar { background: var(--ink); border-bottom: 1px solid var(--line); }
.trustbar__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.trustbar span { padding: .85rem 1rem; border-right: 1px solid var(--line); color: var(--fog); font-size: .74rem; }
.trustbar span:first-child { padding-left: 0; }
.trustbar span:last-child { border-right: 0; }
.trustbar b { display: block; color: var(--deep); font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }

/* ------------------------------ sections -------------------------------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; }
.section--alt { background: var(--ink-2); border-block: 1px solid var(--line); }
.section--light { background: var(--hull); color: var(--ink); }
.section--light h1, .section--light h2, .section--light h3 { color: var(--ink); }
.section--light .muted { color: var(--fog-2); }
.section--light .muted, .section--light .card p, .section--light .badge { color: #526171; }
.section--light .lede { color: #2A3440; }
.section__head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: end; justify-content: space-between; margin-bottom: 2.2rem; }
.section__head p { max-width: 58ch; margin: 0; }
.section__head h2 { margin: 0; }

/* ------------------------------ grids ----------------------------------- */
.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.section--quick { padding-block: clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.choicegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.choice {
  min-height: 142px; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem;
  padding: 1.15rem; color: var(--hull); text-decoration: none; background: var(--ink-3); border: 1px solid var(--line-hard);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.choice:hover { transform: translateY(-3px); border-color: var(--signal); background: var(--ink-4); }
.choice span { margin-bottom: auto; font-family: var(--mono); font-size: .7rem; color: var(--signal); }
.choice strong { font-family: var(--display); font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.choice small { color: var(--fog); font-size: .78rem; }

/* ------------------------------ cards ----------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  background: var(--ink-2); border: 1px solid var(--line); padding: 1.4rem; text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
  --cutsz: var(--cut);
  clip-path: polygon(0 0, calc(100% - var(--cutsz)) 0, 100% var(--cutsz), 100% 100%, var(--cutsz) 100%, 0 calc(100% - var(--cutsz)));
}
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--signal) 60%, transparent); background: var(--ink-3); }
.card__art { background: var(--ink-3); margin: -1.4rem -1.4rem .2rem; padding: 1.4rem 1.4rem .6rem; border-bottom: 1px solid var(--line); }
.card__art svg { width: 100%; height: auto; display: block; }
.card h3 { margin: 0; font-size: 1.45rem; }
.card p { margin: 0; font-size: .93rem; color: var(--fog); }
.card__foot { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fog-2); }
.card__foot .go { color: var(--signal); }
.card--flag { border-left: 3px solid var(--signal); }

.section--light .card { background: #fff; border-color: rgba(10,14,19,.12); color: var(--ink); }
.section--light .card:hover { background: #fff; border-color: var(--signal); }
.section--light .card p, .section--light .card__foot { color: #526171; }
.section--light .card__art { background: var(--hull-2); border-bottom-color: rgba(10,14,19,.1); }
.card__art > .brandlogo, .card__art > .wordmark { margin: .9rem auto 1.2rem; }

/* ------------------------------ badges ---------------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem .55rem; border: 1px solid var(--line-hard); color: var(--hull-2); background: color-mix(in srgb, var(--hull) 4%, transparent);
}
.badge--signal { border-color: var(--signal); color: var(--signal); }
.badge--deep   { border-color: var(--deep); color: var(--deep); }
.badge--gold   { border-color: var(--beacon); color: var(--beacon); }
.badge--flare  { border-color: var(--flare); color: #ff8a92; }
.badge--solid  { background: var(--signal); color: #120800; border-color: var(--signal); font-weight: 700; }
.section--light .badge { border-color: rgba(10,14,19,.2); color: #526171; background: transparent; }

/* "Trail rated" style capability stamp. */
.stamp {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; height: 92px; border: 2px solid var(--signal); border-radius: 50%;
  font-family: var(--display); text-transform: uppercase; line-height: .9; text-align: center; padding: .4rem;
  color: var(--signal); flex: none;
}
.stamp b { font-size: 1.55rem; font-weight: 800; }
.stamp span { font-family: var(--mono); font-size: .5rem; letter-spacing: .12em; margin-top: .2rem; color: var(--hull-2); }

/* ------------------------------ scores ---------------------------------- */
.scores { display: grid; gap: .85rem; }
.score { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; align-items: center; gap: .8rem; }
.score__label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
.score__track { height: 8px; background: var(--ink-4); position: relative; overflow: hidden; }
.score__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--signal-lo), var(--signal)); }
.score__fill--deep { background: linear-gradient(90deg, var(--deep-lo), var(--deep)); }
.score__fill--gold { background: linear-gradient(90deg, #B8860B, var(--beacon)); }
.score__val { font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-align: right; }
.section--light .score__track { background: rgba(10,14,19,.12); }
@media (max-width: 520px) { .score { grid-template-columns: 6.5rem 1fr 2.4rem; } }

/* Big single score block, MotorTrend style. */
.verdict {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center;
  background: var(--ink-3); border-left: 4px solid var(--signal); padding: 1.6rem;
}
.verdict__num { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 8vw, 5.2rem); line-height: .8; color: var(--signal); }
.verdict__num small { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; color: var(--fog); margin-top: .5rem; }
.verdict h3 { margin: 0 0 .4rem; }
.verdict p { margin: 0; color: var(--hull-2); }
@media (max-width: 560px) { .verdict { grid-template-columns: 1fr; gap: 1rem; } }

/* ------------------------------ tables ---------------------------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); background: var(--ink-2); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
thead th {
  text-align: left; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fog); padding: .85rem 1rem; background: var(--ink-3); border-bottom: 1px solid var(--line-hard); white-space: nowrap;
}
tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--hull) 3%, transparent); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table a { color: var(--hull); text-decoration-color: var(--signal); text-underline-offset: 3px; }
table a:hover { color: var(--signal); }
.section--light .tablewrap { background: #fff; border-color: rgba(10,14,19,.14); }
.section--light thead th { background: var(--hull-2); color: #526171; border-bottom-color: rgba(10,14,19,.18); }
.section--light tbody td { border-bottom-color: rgba(10,14,19,.1); }
.section--light table a { color: var(--ink); }

/* ------------------------------ filters --------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 1.6rem; }
.search {
  flex: 1 1 260px; display: flex; align-items: center; gap: .6rem;
  background: var(--ink-2); border: 1px solid var(--line-hard); padding: .6rem .9rem;
}
.search input { flex: 1; background: none; border: 0; color: var(--hull); font-family: var(--body); font-size: 1rem; min-width: 0; }
.search input::placeholder { color: var(--fog-2); }
.search input:focus { outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem;
  padding: .42rem .85rem; background: transparent; color: var(--hull-2); border: 1px solid var(--line-hard); cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--signal); color: var(--signal); }
.chip[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #120800; }
.section--light .search { background: #fff; border-color: rgba(10,14,19,.18); }
.section--light .search input { color: var(--ink); }
.section--light .chip { border-color: rgba(10,14,19,.2); color: #526171; }
.count { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); margin-left: auto; }
.compare-filter { max-width: 680px; margin-bottom: 1.5rem; }
.compare-filter .search { width: 100%; }
.compare-filter p { margin: .55rem 0 0; font-size: .85rem; }
.compare-select { width: 100%; min-height: 48px; padding: .7rem; background: var(--ink-3); color: var(--hull); border: 1px solid var(--line-hard); font-family: var(--body); font-size: .95rem; }

[hidden] { display: none !important; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--fog); font-family: var(--display); text-transform: uppercase; font-size: 1.4rem; }

/* ------------------------------ prose ----------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose > :first-child { margin-top: 0; }
.prose pre {
  background: var(--ink-2); border-left: 3px solid var(--deep); padding: 1.2rem 1.4rem; overflow-x: auto;
  font-family: var(--mono); font-size: .85rem; line-height: 1.7; color: var(--hull-2);
}
.prose blockquote { margin: 1.6rem 0; padding-left: 1.2rem; border-left: 3px solid var(--signal); font-size: 1.1rem; color: var(--hull-2); }
.callout { background: var(--ink-2); border: 1px solid var(--line); border-left: 4px solid var(--deep); padding: 1.2rem 1.4rem; margin: 1.8rem 0; }
.callout h4 { color: var(--deep); margin-bottom: .4rem; }
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------ layout aids ----------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.panel { display: block; background: var(--ink-2); border: 1px solid var(--line); padding: 1.4rem; }
.panel h4 { color: var(--signal); letter-spacing: .04em; }
.panel + .panel { margin-top: 1rem; }
.panel ul { padding-left: 1.1em; margin-bottom: 0; }
.panel li { font-size: .93rem; color: var(--hull-2); }
.sticky { position: sticky; top: 88px; }
.feature-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.editorial-shot { margin-bottom: 1.2rem; }
.editorial-shot .shot img { border: 1px solid var(--line); }

.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: var(--hull-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 9px; background: var(--deep); transform: rotate(45deg); }
.ticks--warn li::before { background: var(--beacon); }

/* ------------------------------ breadcrumbs ----------------------------- */
.crumbs { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog-2); padding: 1rem 0; }
.crumbs a { text-decoration: none; color: var(--fog); }
.crumbs a:hover { color: var(--signal); }
.crumbs span { margin: 0 .5rem; opacity: .5; }

/* ------------------------------ page head ------------------------------- */
.pagehead { position: relative; overflow: hidden; background: var(--ink-2); border-bottom: 1px solid var(--line); padding: 0 0 clamp(2rem, 4vw, 3.2rem); }
.pagehead::before {
  content: ""; position: absolute; inset: auto -20% -60% 40%; height: 160%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.pagehead__in { position: relative; }
.pagehead__grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr); gap: 2rem; align-items: center; }
@media (max-width: 820px) { .pagehead__grid { grid-template-columns: 1fr; } .pagehead__art { display: none; } }

/* ------------------------------ model rail ------------------------------ */
.rail { display: flex; gap: .5rem; flex-wrap: wrap; }
.rail a {
  text-decoration: none; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  border: 1px solid var(--line-hard); padding: .4rem .7rem; color: var(--hull-2);
}
.rail a:hover { border-color: var(--signal); color: var(--signal); }

/* ------------------------------ footer ---------------------------------- */
.footer { background: var(--ink-2); border-top: 3px solid var(--signal); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.footer h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; color: var(--fog); margin-bottom: .9rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .45rem; }
.footer a { text-decoration: none; color: var(--hull-2); font-size: .92rem; }
.footer a:hover { color: var(--signal); }
.footer__base { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; color: var(--fog-2); }

/* ------------------------------ misc ------------------------------------ */
.disclosure { font-size: .82rem; color: var(--fog-2); border: 1px dashed var(--line-hard); padding: .9rem 1.1rem; }
.tint-amber  { --tint: var(--signal); }
.tint-orange { --tint: var(--signal); }
.tint-teal   { --tint: var(--deep); }
.tint-steel  { --tint: var(--steel); }
.tint-navy   { --tint: var(--navy); }
.tint-red    { --tint: var(--flare); }
.tint-gold   { --tint: var(--beacon); }
.card--tint { border-top: 3px solid var(--tint, var(--signal)); }
.card--tint h3 { color: var(--tint, var(--hull)); }

/* ==========================================================================
   Photography and brand marks
   Every photo reserves its space before it loads, and carries its credit.
   ========================================================================== */
.shot { margin: 0; position: relative; }
.shot picture { display: block; }
.shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: var(--ratio, 4 / 3); background: var(--ink-3);
}
.shot figcaption {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fog-2); padding: .5rem 0 0;
}
.section--light .shot img { background: var(--hull-2); }

.card__art .shot img { aspect-ratio: 3 / 2; }
.card__art .shot figcaption { display: none; }  /* credit shown on the destination page */
.pagehead__art .shot img { border: 1px solid var(--line); }

/* Brand logo.
   Supplied logos arrive in every possible treatment — white-on-transparent,
   black-on-transparent, and JPEGs with a baked-in white box. Rather than
   hand-tuning each one, every logo sits on the same light plate. Mixed
   sources then read as a deliberate system instead of an accident, and a
   dark-inked logo stays legible on the dark ground. */
.brandlogo {
  display: block; width: auto; object-fit: contain;
  padding: 6px 10px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
/* The plate is chosen per logo from its measured ink — see scripts/analyze-logos.mjs. */
.brandlogo--on-light { background: var(--hull); }
.brandlogo--on-dark  { background: var(--ink-4); }
.brandlogo--sm { height: 26px; max-width: 116px; padding: 4px 7px; }
.brandlogo--md { height: 40px; max-width: 190px; }
.brandlogo--lg { height: 60px; max-width: 270px; padding: 8px 12px; }
/* On light sections the plate would be invisible, so give it a hairline. */
.section--light .brandlogo--on-light { box-shadow: inset 0 0 0 1px rgba(10, 14, 19, .1); }

.wordmark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 2px solid var(--signal); color: var(--signal);
  font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: .02em;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.wordmark--sm { width: 30px; height: 20px; font-size: .72rem; }
.wordmark--md { width: 46px; height: 34px; font-size: 1.05rem; }
.wordmark--lg { width: 68px; height: 52px; font-size: 1.6rem; }

.card__brandline { display: flex; align-items: center; gap: .55rem; }
.card__brandline .eyebrow { margin: 0; }
.titlerow > .brandlogo, .titlerow > .wordmark { margin-bottom: 1rem; }
.titlerow h1 { margin: 0; }

@media (max-width: 760px) {
  :root { --shell: min(100% - 2rem, 1280px); }
  body { font-size: 16px; line-height: 1.58; }
  h1 { font-size: clamp(2.35rem, 11.5vw, 3.4rem); }
  h2 { font-size: clamp(1.9rem, 9vw, 2.65rem); }
  .masthead__in { height: 62px; }
  .mainnav { inset-block-start: 92px; max-height: calc(100dvh - 92px); overflow-y: auto; }
  .poweredbar__in { min-height: 30px; font-size: .57rem; }
  .poweredbar__in span { display: none; }
  .resource-grid { grid-template-columns: 1fr; }
  .research-links__in { padding-block: .75rem; }
  .research-links__in strong { flex-basis: 100%; }
  .powered-corner { right: .55rem; bottom: .55rem; width: 130px; }
  .powered-corner img { width: 34px; height: 34px; }
  .hero__in { padding-top: 1rem; }
  .hero__grid { gap: 1.25rem; }
  .hero__art .shot img { aspect-ratio: 2 / 1; object-position: 62% center; }
  .lede { overflow-wrap: anywhere; }
  .hero__cta { display: grid; }
  .hero__cta .btn { justify-content: center; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .trustbar__in { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .trustbar__in::-webkit-scrollbar { display: none; }
  .trustbar span { flex: 0 0 70%; scroll-snap-align: start; }
  .choicegrid { grid-template-columns: repeat(2, 1fr); }
  .choice { min-height: 126px; }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split .editorial-shot { grid-row: 1; }
  .chips { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { min-height: 44px; flex: none; }
  .rail { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail a { min-height: 44px; display: inline-flex; align-items: center; flex: none; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .logo { font-size: 1.28rem; }
  .choicegrid { grid-template-columns: 1fr; }
  .choice { min-height: 112px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
}