/* ============================================================
   THE CREST GUILD — design system (onyx / parchment / gold)
   Flat heraldic aesthetic. Gold = 5% accent only (hover, badges,
   dividers, micro-detail). No heavy shadows, no color gradients.
   Tokens: assets/tokens.css
   ============================================================ */

@import url('tokens.css');

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--color-onyx);
  color:var(--text-on-onyx);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
a.text-link{
  color:var(--color-gold);
  text-decoration:underline;
  text-underline-offset:3px;
}
a.text-link:hover{ opacity:0.85; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }

.skip-link{
  position:absolute; left:16px; top:-48px; z-index:10000;
  background:var(--color-onyx); color:var(--color-parchment);
  border:0.5px solid var(--color-gold);
  padding:10px 14px; font-size:14px; font-weight:500;
  border-radius:var(--radius-md);
}
.skip-link:focus{ top:12px; outline:1px solid var(--color-gold); outline-offset:3px; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

h1,h2{
  font-family:var(--font-display);
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
  color:var(--text-on-onyx);
}
h3,h4{
  font-family:var(--font-body);
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
  color:var(--text-on-onyx);
}

/* no shadows, no gradients — flat fills and hairlines only */

.eyebrow{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-dim2);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:16px; height:0.5px;
  background:var(--color-gold);
  display:inline-block;
  opacity:0.7;
}

/* ---------- status badge (Expired / Pending / Active) ---------- */
.state{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body);
  font-size:11px; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase;
  padding:5px 10px 5px 8px;
  border:0.5px solid var(--border);
  border-radius:var(--radius-md);
  /* High-contrast label text — state hue only on the indicator dot (WCAG 1.4.1 / 1.4.3) */
  color:var(--text-on-onyx);
}
.state::before{
  content:'';
  width:6px; height:6px; border-radius:50%;
  flex:none;
  background:var(--neutral-500);
}
.state-expired::before{ background:var(--state-expired); }
.state-pending::before{ background:var(--state-pending); }
.state-active::before{ background:var(--state-active); }

/* ---------- entrance animations ---------- */
@keyframes fade-up{
  0%{ opacity:0; transform:translateY(20px); filter:blur(4px); }
  100%{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes fade-in{
  0%{ opacity:0; }
  100%{ opacity:1; }
}
.opacity-0{ opacity:0; }
.animate-fade-up{ animation:fade-up 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-fade-in{ animation:fade-in 0.6s ease-out forwards; }

/* ---------- full-screen hero (v2, "movimento") ---------- */
.hero-v2{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end;
  background:var(--hero-bg, #0E1014);
  overflow:hidden;
  border-bottom:0.5px solid var(--border);
}
.hero-v2-bg{ position:absolute; inset:0; z-index:0; }
.ridge-layer{
  position:absolute; bottom:0; left:0;
  width:200%; height:42%;
  display:flex;
}
.ridge-layer svg{ width:50%; height:100%; flex:none; }
.ridge-back{ animation:drift 70s linear infinite; opacity:0.55; }
.ridge-mid{ animation:drift 46s linear infinite; opacity:0.8; }
.ridge-front{ animation:drift 28s linear infinite; }
@keyframes drift{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.hero-v2-overlay{
  position:absolute; inset:0; z-index:1;
  background:rgba(10,11,14,0.28);
  pointer-events:none;
}
.hero-v2-grid{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(92,134,168,0.05) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(92,134,168,0.05) 0.5px, transparent 0.5px);
  background-size:56px 56px;
}
.hero-v2-content{
  position:relative; z-index:2;
  width:100%; max-width:1180px;
  padding:128px 32px 72px;
  margin:0 auto;
}
.hero-v2 .eyebrow{ color:var(--summit-blue); }
.hero-v2 h1{
  font-size:clamp(2.6rem, 7vw, 5rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  font-weight:700;
  margin:14px 0 0;
}
.hero-v2 h1 .accent{ color:var(--summit-blue); }
.hero-v2 p.lede{
  font-size:clamp(1.05rem, 2vw, 1.4rem);
  font-weight:300;
  color:rgba(241,238,230,0.85);
  margin:14px 0 0;
  max-width:560px;
}
.hero-v2 p.desc{
  font-size:clamp(0.9rem, 1.3vw, 1.05rem);
  font-weight:300;
  color:var(--text-dim);
  margin:12px 0 0;
  max-width:560px;
}
.hero-v2-actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:28px; font-weight:600;
}
.btn-hero{
  padding:14px 30px; font-size:14px; font-weight:500;
  border-radius:var(--radius-md);
  cursor:pointer; border:0.5px solid transparent;
  font-family:var(--font-body);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.btn-hero:active{ transform:none; }
.btn-hero-primary{
  background:var(--color-onyx); color:var(--color-parchment);
  border-color:var(--neutral-500);
}
.btn-hero-primary:hover{ border-color:var(--color-gold); filter:none; }
.btn-hero-secondary{
  background:transparent; color:var(--text-on-onyx);
  border-color:var(--border);
}
.btn-hero-secondary:hover{ border-color:var(--color-gold); filter:none; }
.hero-v2-trust{
  font-size:12px; font-weight:300; color:rgba(241,238,230,0.4);
  margin-top:22px;
}
@media (max-width:560px){
  .hero-v2-content{ padding:110px 20px 56px; }
  .hero-v2 h1{ font-size:clamp(1.9rem, 9vw, 2.6rem); line-height:1.15; }
}
@media (prefers-reduced-motion: reduce){
  .ridge-back,.ridge-mid,.ridge-front{ animation:none; }
}


/* ---------- guild trail (interactive horizontal path) ---------- */
.trail{ padding:20px 0 0; }
.trail-track{
  position:relative;
  padding:0 10px;
  margin-bottom:8px;
}
.trail-line-bg, .trail-line-fg{
  position:absolute; left:10px; right:10px; top:23px;
  height:1px;
}
.trail-line-bg{ background:var(--border); }
.trail-line-fg{
  background:var(--summit-blue);
  width:0%;
  transition:width .5s cubic-bezier(0.16,1,0.3,1);
}
.trail-nodes{
  position:relative; z-index:2;
  display:flex; justify-content:space-between;
}
.trail-node{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:0; width:96px;
  font-family:var(--sans);
}
.trail-seal{
  width:46px; height:46px; border-radius:50%;
  border:0.5px solid var(--border);
  background:var(--canvas);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease;
}
.trail-seal svg{ width:20px; height:23px; }
.trail-seal .seal-shield{ stroke:var(--neutral-1); fill:none; transition:stroke .2s ease, fill .2s ease; }
.trail-seal .seal-mark{ stroke:var(--neutral-1); transition:stroke .2s ease; }

.trail-node.is-done .trail-seal{ border-color:var(--color-gold); background:var(--color-slate); }
.trail-node.is-done .seal-shield{ stroke:var(--color-gold); }
.trail-node.is-done .seal-mark{ stroke:var(--color-gold); }

.trail-node.is-current .trail-seal{
  border-color:var(--color-gold);
  background:var(--color-slate);
}
.trail-node.is-current .seal-shield{ stroke:var(--color-gold); fill:none; }
.trail-node.is-current .seal-mark{ stroke:var(--color-gold); }

.trail-node.is-locked .trail-seal{ opacity:0.55; }

.trail-node .label{
  font-size:12px; font-weight:500; color:var(--text-dim);
  text-align:center; line-height:1.3;
}
.trail-node.is-current .label, .trail-node.is-done .label{ color:var(--ivory); }
.trail-node .rank-tag{
  font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim2);
}
.trail-node[aria-selected="true"] .trail-seal{ box-shadow:none; outline:1px solid var(--color-gold); outline-offset:3px; }

.trail-detail{
  margin-top:44px;
  border:0.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px;
  background:var(--color-slate);
}
.trail-detail-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:16px;
}
.trail-detail h3{ font-size:22px; margin-top:6px; }
.trail-detail p.desc{ color:var(--text-dim); font-size:14.5px; max-width:560px; margin:0 0 20px; }
.trail-detail ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.trail-detail li{ font-size:13.5px; color:var(--text-dim); padding-left:18px; position:relative; }
.trail-detail li::before{ content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--summit-blue); }

@media (max-width:760px){
  .trail-track{ overflow-x:auto; padding-bottom:6px; }
  .trail-nodes{ min-width:560px; }
  .trail-line-bg, .trail-line-fg{ display:none; }
  .trail-detail ul{ grid-template-columns:1fr; }
}


/* ---------- opening intro (plays once on load) ---------- */
#introOverlay{
  position:fixed; inset:0; z-index:200;
  background:var(--color-onyx);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:22px;
}
#introOverlay .intro-mark{
  width:72px; height:84px;
  opacity:0;
  animation:intro-mark-in 0.5s ease forwards;
}
#introOverlay .intro-shield{
  fill:none; stroke:var(--text-on-onyx); stroke-width:1.25;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:220; stroke-dashoffset:220;
  animation:draw-shield 1.15s cubic-bezier(0.65,0,0.35,1) 0.15s forwards;
}
#introOverlay .intro-mono{
  fill:none; stroke:var(--color-gold); stroke-width:1.15;
  stroke-linecap:round;
  stroke-dasharray:48; stroke-dashoffset:48;
  animation:draw-shield 0.75s ease 0.85s forwards;
}
#introOverlay .intro-word{
  font-family:var(--font-display);
  font-size:15px; font-weight:500;
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--text-on-onyx);
  opacity:0;
  transform:translateY(6px);
  animation:intro-word-in 0.7s ease 1.35s forwards;
}
#introOverlay .intro-rule{
  width:72px; height:0.5px; background:var(--color-gold);
  opacity:0; transform:scaleX(0.4);
  animation:intro-rule-in 0.55s ease 1.7s forwards;
}
@keyframes draw-shield{ to{ stroke-dashoffset:0; } }
@keyframes intro-mark-in{ to{ opacity:1; } }
@keyframes intro-word-in{
  to{ opacity:1; transform:translateY(0); }
}
@keyframes intro-rule-in{
  to{ opacity:0.85; transform:scaleX(1); }
}
#introOverlay.is-leaving{
  animation:intro-out 0.75s cubic-bezier(0.4,0,0.2,1) forwards;
  animation-delay:2.35s;
  pointer-events:none;
}
@keyframes intro-out{
  to{ opacity:0; visibility:hidden; transform:scale(1.02); }
}
body.intro-lock{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  #introOverlay .intro-mark,
  #introOverlay .intro-shield,
  #introOverlay .intro-mono,
  #introOverlay .intro-word,
  #introOverlay .intro-rule,
  #introOverlay.is-leaving{ animation:none !important; opacity:1; transform:none; stroke-dashoffset:0; }
}

/* ---------- glass card (hero reinforcement) ---------- */
.hero-v2-inner{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:40px; width:100%;
}
.hero-v2-text{ flex:1 1 460px; max-width:640px; }
.hero-v2-side{ flex:0 1 340px; display:flex; flex-direction:column; gap:14px; }

.glass-card{
  border:0.5px solid rgba(241,238,230,0.14);
  background:rgba(43,53,64,0.42);
  backdrop-filter:blur(18px);
  border-radius:16px;
  padding:26px;
}

/* ---------- hero rank invite (quiz-first) ---------- */
.rank-invite .eyebrow{ margin-bottom:10px; }
.rank-invite-title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 2.4vw, 2rem);
  font-weight:600;
  line-height:1.15;
  margin:0 0 10px;
  color:var(--color-parchment);
}
.rank-invite-lede{
  margin:0 0 22px;
  font-size:14px;
  line-height:1.55;
  color:var(--text-dim);
}
.rank-poles{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.rank-pole{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.rank-pole-end{ text-align:right; align-items:flex-end; }
.rank-pole-name{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--color-parchment);
}
.rank-pole-end .rank-pole-name{ flex-direction:row-reverse; }
.rank-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--color-gold); flex:none;
}
.rank-dot.is-filled{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-gold) 22%, transparent);
}
.rank-pole-micro{
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-dim2); padding-left:16px;
}
.rank-pole-end .rank-pole-micro{ padding-left:0; padding-right:16px; }
.rank-track{
  width:48px; height:2px; position:relative;
  background:color-mix(in srgb, var(--color-gold) 20%, transparent);
  overflow:hidden; border-radius:1px;
}
.rank-track i{
  display:block; height:100%; width:100%;
  background:var(--color-gold);
  transform-origin:left center;
  animation:rank-track-draw 0.7s ease-out both;
}
@keyframes rank-track-draw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
@media (prefers-reduced-motion: reduce){
  .rank-track i{ animation:none; }
}
.rank-names{
  margin:0 0 22px;
  font-size:11px; line-height:1.6; color:var(--text-dim2);
}
.rank-invite-cta{
  display:flex;
  align-items:center;
  width:100%;
  justify-content:center;
  text-align:center;
}

/* ---------- trust marquee ---------- */
.marquee-card{ overflow:hidden; padding:18px 0; }
.marquee-card h6{
  margin:0 0 12px 26px; font-size:11.5px; font-weight:600;
  color:var(--text-dim2); text-transform:uppercase; letter-spacing:.08em;
}
.marquee-track{
  display:flex; gap:36px; white-space:nowrap;
  animation:marquee 26s linear infinite;
  -webkit-mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee-track span{
  font-size:12.5px; font-weight:500; color:var(--text-dim);
  opacity:0.7;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .ping-dot i.ping{ animation:none; }
}

@media (max-width:900px){
  .hero-v2-inner{ flex-direction:column; align-items:stretch; }
  .hero-v2-side{ max-width:none; }
}


/* ---------- ArmoFlow ecosystem strip (footer, all pages) ---------- */
.eco-strip{
  border-top:0.5px solid var(--border);
  background:var(--steel-dim);
  padding:22px 0;
}
.eco-strip .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.eco-strip-label{
  font-size:12px; color:var(--text-dim);
  display:flex; align-items:center; gap:8px;
}
.eco-strip-label b{ color:var(--ivory); font-weight:600; }
.eco-strip-links{ display:flex; gap:20px; flex-wrap:wrap; }
.eco-strip-links a{
  font-size:12.5px; font-weight:600; color:var(--summit-blue);
  display:inline-flex; align-items:center; gap:5px;
}
.eco-strip-links a:hover{ opacity:0.8; }
.eco-strip-links a::after{ content:'↗'; font-size:11px; }

/* ---------- ecosystem page: product cards ---------- */
.eco-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.eco-card{
  background:none; padding:0; border-top:1px solid var(--border); padding-top:24px;
  display:flex; flex-direction:column;
}
.eco-card.is-self{
  background:var(--steel-dim); border:0.5px solid var(--summit-blue);
  border-top:0.5px solid var(--summit-blue);
  border-radius:12px; padding:26px;
}
.eco-card .mark{
  width:44px; height:44px; border-radius:10px;
  border:0.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:16px; color:var(--summit-blue);
  margin-bottom:18px;
  overflow:hidden;
}
.eco-card .mark img{ width:30px; height:30px; object-fit:contain; }
.eco-card h3{ font-size:19px; }
.eco-card .role{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim2); margin-top:6px;
}
.eco-card p.desc{ font-size:13.5px; color:var(--text-dim); margin-top:14px; flex:1; }
.eco-card a.eco-link{
  margin-top:20px; font-size:12.5px; font-weight:600; color:var(--summit-blue);
  border-top:0.5px solid var(--border); padding-top:14px;
  display:inline-flex; align-items:center; gap:6px;
}
.eco-card a.eco-link::after{ content:'↗'; font-size:11px; }
.eco-badge-self{
  display:inline-block; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-gold); background:transparent;
  border:0.5px solid color-mix(in srgb, var(--color-gold) 55%, transparent);
  padding:4px 9px; border-radius:var(--radius-sm);
  margin-bottom:14px; align-self:flex-start;
}

/* ---------- ecosystem flow diagram ---------- */
.eco-flow{
  display:flex; align-items:center; justify-content:center; gap:18px;
  flex-wrap:wrap; margin:44px 0 8px; padding:28px;
  border:0.5px solid var(--border); border-radius:12px;
  background:var(--steel-dim);
}
.eco-flow-node{
  font-size:13.5px; font-weight:500; color:var(--ivory);
  border:0.5px solid var(--border); border-radius:var(--radius-md);
  padding:10px 18px;
}
.eco-flow-arrow{ color:var(--color-gold); font-size:18px; }
.eco-flow-caption{ text-align:center; font-size:12.5px; color:var(--text-dim); margin-top:14px; }

/* ---------- about page: mission/vision/values ---------- */
.mv-block{ padding:0; }
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
.mv-grid .mv-block{ border-top:1px solid var(--border); padding-top:24px; }
.mv-block h3{ font-size:20px; }
.mv-block .kicker{ font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim2); }
.mv-block p{ font-size:14.5px; color:var(--text-dim); margin-top:14px; line-height:1.65; }
.kw-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.kw-pill{
  font-size:12px; font-weight:500; color:var(--text-dim);
  border:0.5px solid var(--border); border-radius:var(--radius-md); padding:6px 13px;
}

.values-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.values-table th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim2); padding:0 16px 14px;
}
.values-table td{
  padding:22px 16px; border-top:1px solid var(--border);
  font-size:13.5px; color:var(--text-dim); vertical-align:top; line-height:1.6;
}
.values-table td.value-name{ color:var(--ivory); font-weight:600; font-size:15px; white-space:nowrap; }
@media (max-width:760px){
  .values-table thead{ display:none; }
  .values-table, .values-table tbody, .values-table tr, .values-table td{ display:block; width:100%; }
  .values-table tr{ padding:16px 0; border-bottom:0.5px solid var(--border); }
  .values-table td{ border:none; padding:4px 0; }
}

@media (max-width:900px){
  .eco-cards{ grid-template-columns:1fr; }
  .mv-grid{ grid-template-columns:1fr; }
}


/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* stagger children within a grid: nth-child delay increments */
.stagger .reveal:nth-child(1){ transition-delay:0s; }
.stagger .reveal:nth-child(2){ transition-delay:.08s; }
.stagger .reveal:nth-child(3){ transition-delay:.16s; }
.stagger .reveal:nth-child(4){ transition-delay:.24s; }
.stagger .reveal:nth-child(5){ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}

/* ---------- logo watermark (mix-blend-mode trick for the flat white-bg logo) ---------- */
.logo-watermark{
  width:100%; height:100%;
  mix-blend-mode:screen;
  opacity:0.9;
}

/* ---------- value cards (replaces dense table with scannable cards) ---------- */
.value-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.value-card{ border-top:1px solid var(--border); padding-top:20px; }
.value-card .vc-icon{
  width:36px; height:36px; border-radius:9px;
  border:0.5px solid var(--border); background:var(--steel-dim);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.value-card .vc-icon svg{ width:16px; height:16px; stroke:var(--summit-blue); fill:none; stroke-width:1.6; }
.value-card h4{ font-size:15.5px; color:var(--ivory); font-weight:600; }
.value-card p{ font-size:13px; color:var(--text-dim); margin-top:8px; line-height:1.55; }
@media (max-width:760px){ .value-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .value-cards{ grid-template-columns:1fr; } }

/* ---------- quiz ---------- */
.quiz-shell{ max-width:640px; margin:0 auto; }
.quiz-progress{ height:3px; background:var(--border); border-radius:99px; margin-bottom:44px; overflow:hidden; }
.quiz-progress i{ display:block; height:100%; width:0%; background:var(--summit-blue); transition:width .4s cubic-bezier(0.16,1,0.3,1); }
.quiz-step-label{ font-size:12px; color:var(--text-dim2); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.quiz-question h2{ font-size:clamp(22px,3vw,30px); line-height:1.2; margin-bottom:28px; }
.quiz-options{ display:flex; flex-direction:column; gap:10px; }
.quiz-option{
  text-align:left; width:100%; cursor:pointer;
  background:none; border:0.5px solid var(--border); border-radius:10px;
  padding:16px 18px; color:var(--ivory); font-family:var(--sans); font-size:14.5px;
  transition:border-color .15s ease, background .15s ease;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.quiz-option:hover{ border-color:var(--neutral-1); }
.quiz-option.is-selected{ border-color:var(--summit-blue); background:var(--steel-dim); }
.quiz-option .dot{
  width:16px; height:16px; border-radius:50%; border:0.5px solid var(--border);
  flex:none; position:relative;
}
.quiz-option.is-selected .dot{ border-color:var(--summit-blue); }
.quiz-option.is-selected .dot::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--summit-blue);
}
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; }
.quiz-back{ font-size:13px; color:var(--text-dim); background:none; border:none; cursor:pointer; }
.quiz-back:hover{ color:var(--ivory); }
.quiz-back[disabled]{ opacity:0; pointer-events:none; }
.quiz-next{
  font-family:var(--font-body); font-size:13.5px; font-weight:500;
  background:var(--color-onyx); color:var(--color-parchment);
  border:0.5px solid var(--neutral-500);
  padding:13px 26px; border-radius:var(--radius-md); cursor:pointer; opacity:0.35; pointer-events:none;
  transition:opacity .15s ease, border-color .15s ease;
}
.quiz-next.is-ready{ opacity:1; pointer-events:auto; }
.quiz-next:hover.is-ready{ border-color:var(--color-gold); opacity:1; }

.quiz-result{ text-align:center; }
.quiz-result .result-seals{ display:flex; justify-content:center; gap:14px; margin:28px 0 36px; flex-wrap:wrap; }
.quiz-result .trail-seal{ width:52px; height:52px; }
.quiz-result h2{ font-size:clamp(24px,3.4vw,34px); }
.quiz-result .result-sub{ color:var(--text-dim); font-size:15px; max-width:480px; margin:14px auto 0; }
.quiz-result-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:36px 0; text-align:left; }
.quiz-result-cards .card{ border-top:1px solid var(--border); padding-top:18px; }
@media (max-width:560px){ .quiz-result-cards{ grid-template-columns:1fr; } }

/* ---------- level 3: giant editorial anchors (real hierarchy, not just size bumps) ---------- */
.big-statement{
  padding:100px 0;
  border-top:0.5px solid var(--border);
  border-bottom:0.5px solid var(--border);
  background:var(--steel-dim);
}
.big-statement .wrap{ max-width:900px; }
.big-statement p{
  font-size:clamp(26px, 4.2vw, 44px);
  font-weight:600; line-height:1.22; letter-spacing:-0.01em;
  color:var(--ivory);
}
.big-statement p .dim{ color:var(--text-dim2); }
.big-statement p .accent{ color:var(--summit-blue); }
.big-statement cite{
  display:block; margin-top:24px; font-style:normal;
  font-size:12.5px; color:var(--text-dim); font-weight:500;
}

/* numbered list where the numeral itself is the visual anchor,
   much bigger than the label next to it — creates depth instead
   of every row reading at the same weight */
.giant-list{ display:flex; flex-direction:column; }
.giant-row{
  display:flex; align-items:baseline; gap:28px;
  padding:28px 0; border-top:1px solid var(--border);
}
.giant-row:last-child{ border-bottom:1px solid var(--border); }
.giant-row .gi-num{
  font-size:clamp(32px,4.5vw,56px); font-weight:700; color:var(--border);
  line-height:1; flex:none; width:80px; font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
.giant-row:hover .gi-num{ color:var(--summit-blue); }
.giant-row .gi-body h4{ font-size:16.5px; color:var(--ivory); font-weight:600; }
.giant-row .gi-body p{ font-size:13.5px; color:var(--text-dim); margin-top:6px; max-width:520px; }
@media (max-width:600px){
  .giant-row{ gap:16px; }
  .giant-row .gi-num{ width:52px; font-size:clamp(24px,8vw,36px); }
}

/* featured-vs-siblings: an item that's genuinely bigger, not just
   color-bordered, so the eye has an obvious entry point */
.eco-cards.has-featured{ align-items:start; }
.eco-card.is-self{ transform:scale(1.04); position:relative; z-index:1; }
.eco-card.is-self h3{ font-size:23px; }

/* ---------- mobile nav ---------- */
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:8px;
}
.nav-toggle span{ width:20px; height:1.5px; background:var(--ivory); display:block; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:90;
  background:var(--canvas);
  display:flex; flex-direction:column;
  padding:100px 32px 40px;
  opacity:0; transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.mobile-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-nav a{
  font-family:var(--sans); font-size:22px; font-weight:600; color:var(--ivory);
  padding:16px 0; border-bottom:0.5px solid var(--border);
}
.mobile-nav a[aria-current="page"]{ color:var(--color-gold); }
.mobile-nav .mn-cta{
  margin-top:28px; text-align:center; font-size:14px; font-weight:500;
  background:var(--color-onyx); color:var(--color-parchment); padding:16px;
  border-radius:var(--radius-md);
  border:0.5px solid var(--neutral-500);
}
.mobile-nav .mn-cta:hover{ border-color:var(--color-gold); }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; }
}
@media (min-width:901px){
  .mobile-nav{ display:none; }
}

header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:rgba(15,17,21,0.72);
  backdrop-filter:blur(14px);
  border-bottom:0.5px solid var(--border);
}
.nav{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:20px 0;
}
.brand{ display:flex; align-items:center; gap:12px; justify-self:start; min-height:36px; }
.brand .badge{
  width:32px; height:32px; min-width:24px;
  border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
  overflow:visible; flex:none;
}
.brand .badge img{ width:100%; height:100%; object-fit:contain; }
.brand .brand-crest{
  width:28px; height:auto; flex:none;
  display:block;
}
.brand .brand-lockup{
  height:34px; width:auto; max-width:min(340px, 72vw);
  display:block;
}
.brand .brand-wordmark{
  height:14px; width:auto; max-width:min(210px, 42vw);
  display:block;
}
.brand .brand-name,
.brand span.brand-name{
  font-family:var(--font-display);
  font-size:15px; font-weight:500; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--text-on-onyx);
  line-height:1; white-space:nowrap;
}
.brand span{
  font-family:var(--font-display);
  font-size:15px; font-weight:500; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-on-onyx);
}

.navlinks{ display:flex; gap:30px; justify-self:center; }
.navlinks a{
  font-family:var(--font-body);
  font-size:13px; font-weight:500; color:var(--text-dim);
  transition:color .15s ease; position:relative; padding-bottom:2px;
}
.navlinks a:hover, .navlinks a[aria-current="page"]{ color:var(--ivory); }
.navlinks a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--color-gold);
}

.nav-right{ justify-self:end; display:flex; align-items:center; gap:8px; }

.nav-cta{
  font-family:var(--font-body);
  font-size:12.5px; font-weight:500; letter-spacing:.02em;
  color:var(--color-parchment); background:var(--color-onyx);
  padding:9px 16px; border-radius:var(--radius-md);
  border:0.5px solid var(--neutral-500);
  transition:border-color .15s ease, color .15s ease;
}
.nav-cta:hover{ border-color:var(--color-gold); opacity:1; }

/* ---------- hero ---------- */
.hero{
  padding:100px 0 84px;
  border-bottom:0.5px solid var(--border);
}
.hero-inner{
  display:grid; grid-template-columns:1.3fr 0.7fr;
  gap:48px; align-items:center;
}
.hero h1{
  font-size:clamp(38px, 5vw, 60px);
  line-height:1.06;
  margin-top:16px;
}
.hero h1 .accent{ color:var(--summit-blue); }
.hero p.lede{
  margin:24px 0 0; max-width:480px;
  font-size:16.5px; color:var(--text-dim);
}
.hero-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  font-family:var(--font-body); font-size:13.5px; font-weight:500; letter-spacing:.01em;
  padding:14px 26px; border-radius:var(--radius-md);
  display:inline-block;
  border:0.5px solid transparent;
  transition:border-color .15s ease, background .15s ease, color .15s ease, opacity .15s ease;
}
.btn-primary{
  background:var(--color-onyx); color:var(--color-parchment);
  border-color:var(--neutral-500); font-weight:500;
}
.btn-primary:hover{ border-color:var(--color-gold); opacity:1; }
.btn-primary:active{ transform:none; }
.btn-outline{ border-color:var(--border); color:var(--ivory); background:transparent; }
.btn-outline:hover{ border-color:var(--color-gold); }

.hero-emblem{ width:100%; max-width:260px; margin:0 auto; opacity:0.94; }

/* ---------- section shell ---------- */
section{ padding:104px 0; }
section.tight{ padding:72px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(28px,3.4vw,42px);
  margin-top:16px; line-height:1.12;
}
.section-head p{ color:var(--text-dim); margin-top:14px; font-size:15.5px; line-height:1.5; }

.rule{ border:none; border-top:0.5px solid var(--border); margin:0; }

.divider-crest{
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin:0 auto; max-width:420px;
  color:var(--color-gold);
}
.divider-crest::before,
.divider-crest::after{
  content:'';
  flex:1; height:0.5px;
  background:var(--color-gold);
  opacity:0.55;
}
.divider-crest .diamond{
  width:7px; height:7px;
  border:0.5px solid var(--color-gold);
  transform:rotate(45deg);
  flex:none;
}

/* ---------- ranks / progression ---------- */
.ranks{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:0;
  border:0.5px solid var(--border); border-radius:10px; overflow:hidden;
}
.rank{
  padding:24px 18px;
  border-right:0.5px solid var(--border);
  background:var(--canvas);
}
.rank:last-child{ border-right:none; }
.rank .num{
  font-size:11px; font-weight:600; color:var(--text-dim2);
  letter-spacing:.08em; text-transform:uppercase;
}
.rank h4{ font-size:15px; margin-top:10px; color:var(--ivory); }
.rank p{ font-size:13px; color:var(--text-dim); margin:8px 0 0; line-height:1.5; }
.rank.current{ background:var(--steel-dim); }
.rank.current .num{ color:var(--summit-blue); }
.rank.current h4{ color:var(--summit-blue); }

/* ---------- guild cards (services) ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.card{
  background:none; padding:0; display:flex; flex-direction:column;
  border-top:1px solid var(--border); padding-top:22px;
}
.card .tag{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-muted); }
.card h3{ font-size:22px; margin-top:12px; color:var(--ivory); }
.card p.desc{ color:var(--text-dim); font-size:14px; margin-top:12px; flex:1; }
.card ul{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:8px; }
.card li{ font-size:13px; color:var(--text-dim); padding-left:16px; position:relative; }
.card li::before{ content:''; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; background:var(--summit-blue); }
.card a.card-cta, .glass-card a.card-cta{
  margin-top:24px; font-size:12.5px; font-weight:600; color:var(--summit-blue);
  display:inline-flex; align-items:center; gap:6px;
  border-top:0.5px solid var(--border); padding-top:16px;
}
.card a.card-cta::after, .glass-card a.card-cta::after{ content:'→'; }

/* ---------- strip ---------- */
.strip{
  border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border);
  padding:56px 0; background:var(--steel-dim);
}
.strip blockquote{
  font-size:clamp(20px,2.2vw,26px); max-width:720px; margin:0;
  color:var(--ivory); font-weight:500; line-height:1.4;
}
.strip cite{ display:block; margin-top:16px; font-style:normal; font-size:12px; color:var(--text-dim); }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; padding:96px 0; }
.cta-band h2{ font-size:clamp(28px,3.4vw,40px); max-width:600px; margin:16px auto 0; }
.cta-band p{ color:var(--text-dim); max-width:480px; margin:14px auto 0; font-size:15.5px; }
.cta-band .btn{ margin-top:32px; }
.cta-band.cta-band-form{ text-align:left; }
.cta-band.cta-band-form .cta-intro{ text-align:center; max-width:640px; margin:0 auto 36px; }
.cta-band.cta-band-form .cta-intro p{ margin-left:auto; margin-right:auto; }

/* ---------- forms ---------- */
.crest-form{
  max-width:560px; margin:0 auto;
  display:grid; gap:18px;
  text-align:left;
}
.crest-form .field{ display:flex; flex-direction:column; gap:8px; }
.crest-form label{ font-size:13px; font-weight:600; color:var(--ivory); }
.crest-form .hint{ font-size:12px; color:var(--text-dim2); font-weight:400; }
.crest-form input,
.crest-form select,
.crest-form textarea{
  width:100%;
  background:var(--steel-dim);
  border:0.5px solid var(--border);
  color:var(--ivory);
  font:inherit;
  font-size:15px;
  padding:12px 14px;
  border-radius:0;
}
.crest-form textarea{ min-height:110px; resize:vertical; }
.crest-form input:focus-visible,
.crest-form select:focus-visible,
.crest-form textarea:focus-visible,
.crest-form button:focus-visible{
  outline:1px solid var(--summit-blue);
  outline-offset:3px;
}
.crest-form input[aria-invalid="true"],
.crest-form select[aria-invalid="true"],
.crest-form textarea[aria-invalid="true"]{
  border-color:var(--state-expired);
}
.hp-field{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.form-status{
  font-size:14px; padding:12px 14px;
  border:0.5px solid var(--border);
  color:var(--text-on-onyx);
}
.form-status.is-pending{
  color:var(--text-on-onyx);
  border-color:var(--state-pending);
}
.form-status.is-success{
  color:var(--text-on-onyx);
  border-color:var(--state-active);
}
.form-status.is-error{
  color:var(--text-on-onyx);
  border-color:var(--state-expired);
}
.criteria-box{
  max-width:640px; margin:0 auto 40px;
  border:0.5px solid var(--border);
  padding:24px 28px;
  text-align:left;
}
.criteria-box h3{ font-size:18px; margin:0 0 12px; }
.criteria-box ul{ margin:0; padding:0; list-style:none; }
.criteria-box li{
  position:relative; padding:8px 0 8px 18px;
  font-size:14px; color:var(--text-dim);
  border-top:0.5px solid var(--border);
}
.criteria-box li:first-child{ border-top:0; }
.criteria-box li::before{
  content:''; position:absolute; left:0; top:16px;
  width:6px; height:6px; border-radius:50%; background:var(--summit-blue);
}

/* ---------- service anchors / founders / proof ---------- */
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.service-card{
  border:0.5px solid var(--border);
  padding:28px 24px;
  background:var(--steel-dim);
  scroll-margin-top:96px;
}
.service-card .tag{
  font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate-muted);
}
.service-card h3{ font-size:20px; margin:10px 0 12px; }
.service-card p{ font-size:14px; color:var(--text-dim); margin:0 0 14px; }
.service-card ul{ margin:0; padding:0; list-style:none; }
.service-card li{
  font-size:13.5px; color:var(--text-dim); padding:6px 0 6px 16px; position:relative;
}
.service-card li::before{
  content:''; position:absolute; left:0; top:13px;
  width:6px; height:0.5px; background:var(--summit-blue);
}
.service-card .card-cta{
  margin-top:20px; font-size:12.5px; font-weight:600; color:var(--summit-blue);
  display:inline-flex; align-items:center; gap:6px;
  border-top:0.5px solid var(--border); padding-top:16px;
}
.service-card .card-cta::after{ content:'→'; }

.founder-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.founder-card{
  border:0.5px solid var(--border);
  padding:28px;
  background:var(--steel-dim);
  display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:start;
}
.founder-avatar{
  width:96px; height:96px; border-radius:50%;
  background:var(--canvas); border:0.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:700; color:var(--summit-blue);
  overflow:hidden;
}
.founder-avatar img{ width:100%; height:100%; object-fit:cover; }
.founder-card h3{ font-size:20px; margin:0 0 4px; }
.founder-role{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--summit-blue); margin:0 0 12px; }
.founder-card p{ font-size:14px; color:var(--text-dim); margin:0 0 12px; }
.founder-card .text-link{ font-size:13.5px; font-weight:600; }

.outcome-grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center;
  border:0.5px solid var(--border); padding:28px; background:var(--steel-dim);
}
.outcome-col h4{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim2); margin:0 0 10px; }
.outcome-col p{ margin:0; font-size:15px; color:var(--text-dim); }
.outcome-arrow{ color:var(--summit-blue); font-size:24px; font-weight:700; }

.proof-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.proof-card{
  border:0.5px solid var(--border); padding:28px; background:var(--steel-dim);
}
.proof-card blockquote{
  margin:0; font-size:17px; line-height:1.45; font-weight:500; color:var(--ivory);
}
.proof-card cite{
  display:block; margin-top:16px; font-style:normal;
  font-size:12.5px; color:var(--text-dim);
}

@media (max-width:900px){
  .service-grid, .founder-grid, .proof-grid{ grid-template-columns:1fr; }
  .founder-card{ grid-template-columns:72px 1fr; }
  .founder-avatar{ width:72px; height:72px; font-size:22px; }
  .outcome-grid{ grid-template-columns:1fr; }
  .outcome-arrow{ transform:rotate(90deg); justify-self:center; }
}

/* ---------- footer ---------- */
footer{ border-top:0.5px solid var(--border); padding:48px 0 36px; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.foot-brand{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.foot-brand img{ width:36px; height:36px; object-fit:contain; flex:none; }
.foot-brand h5{ margin:0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ivory); }
.foot-grid h5{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim2); margin:0 0 14px; }
.foot-grid a, .foot-grid p{ display:block; font-size:13.5px; color:var(--text-dim); margin-bottom:9px; }
.foot-grid a:hover{ color:var(--ivory); }
.foot-bottom{
  margin-top:40px; padding-top:20px; border-top:0.5px solid var(--border);
  display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-dim2);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-emblem{ max-width:170px; order:-1; margin:0 0 8px; }
  .ranks{ grid-template-columns:repeat(2,1fr); }
  .rank{ border-bottom:0.5px solid var(--border); }
  .cards{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; row-gap:28px; }
  .navlinks{ display:none; }
}
@media (max-width:560px){
  .ranks{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-bottom{ flex-direction:column; gap:8px; }
  .brand .brand-wordmark{ height:12px; max-width:150px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:1px solid var(--summit-blue); outline-offset:3px;
}
.quiz-option:focus-visible{
  outline:1px solid var(--summit-blue); outline-offset:3px;
}
.quiz-progress{
  position:relative;
}
.quiz-progress[role="progressbar"]{
  /* visual bar already styled; role for AT */
}


/* ---------- SEO progressive-enhancement static blocks ---------- */
.rank-static{
  display:grid; gap:20px; margin-bottom:28px;
}
.rank-static article{
  border:0.5px solid var(--border);
  padding:24px 28px;
  background:var(--steel-dim);
}
.rank-static article h3{ font-size:22px; margin:8px 0 12px; }
.rank-static article > p{ color:var(--text-dim); font-size:14.5px; margin:0 0 12px; }
.rank-static article ul{ margin:0; padding:0; list-style:none; }
.rank-static article li{
  font-size:13.5px; color:var(--text-dim); padding:6px 0 6px 16px; position:relative;
}
.rank-static article li::before{
  content:''; position:absolute; left:0; top:13px;
  width:6px; height:0.5px; background:var(--summit-blue);
}

.quiz-static{
  border:0.5px solid var(--border);
  padding:28px;
  background:var(--steel-dim);
  margin-bottom:24px;
}
.quiz-static article{ margin-bottom:28px; }
.quiz-static article:last-child{ margin-bottom:0; }
.quiz-static h3{ font-size:18px; margin:0 0 12px; }
.quiz-static ul{ margin:0; padding:0; list-style:none; }
.quiz-static li{
  font-size:14px; color:var(--text-dim); padding:8px 0 8px 16px;
  border-top:0.5px solid var(--border); position:relative;
}
.quiz-static li:first-child{ border-top:0; }
.quiz-static li::before{
  content:''; position:absolute; left:0; top:16px;
  width:6px; height:6px; border-radius:50%; background:var(--summit-blue);
}

/* Consent banner */
.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:10001;
  max-width:560px; margin:0 auto;
  background:var(--steel-dim); border:0.5px solid var(--border);
  padding:20px 22px; color:var(--ivory);
}
.consent-banner p{ margin:0 0 14px; font-size:13.5px; color:var(--text-dim); line-height:1.55; }
.consent-banner .consent-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.consent-banner[hidden]{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  .consent-banner{ transition:none; }
}

.btn-hero-secondary{ opacity:1; }
.btn-hero-primary{ font-weight:500; }

.badge-gold{
  display:inline-flex; align-items:center;
  font-family:var(--font-body);
  font-size:10.5px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--color-gold);
  border:0.5px solid color-mix(in srgb, var(--color-gold) 55%, transparent);
  border-radius:var(--radius-sm);
  padding:4px 8px;
}

.trail-detail h3,
.card h3,
.rank h4{
  font-family:var(--font-display);
  font-weight:500;
}

.legal{
  max-width:720px;
  padding-bottom:40px;
}
.legal h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  margin:36px 0 12px;
  color:var(--ivory);
}
.legal h2:first-child{ margin-top:0; }
.legal h3{
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  margin:24px 0 10px;
  color:var(--ivory);
}
.legal p, .legal li{
  color:var(--text-dim);
  font-size:15px;
  line-height:1.5;
  margin:0 0 12px;
}
.legal ul{ margin:0 0 16px; padding-left:1.2em; }
.legal li{ margin-bottom:8px; }
.legal strong{ color:var(--ivory); font-weight:500; }
.legal-table-wrap{
  overflow-x:auto;
  margin:16px 0 24px;
  border:0.5px solid var(--border);
  border-radius:var(--radius-md);
}
.legal-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.legal-table th,
.legal-table td{
  text-align:left;
  vertical-align:top;
  padding:12px 14px;
  border-bottom:0.5px solid var(--border);
  color:var(--text-dim);
  line-height:1.45;
}
.legal-table th{
  color:var(--text-on-onyx);
  font-weight:500;
  background:var(--color-slate);
}
.legal-table tr:last-child td{ border-bottom:none; }
.foot-legal-links{
  display:flex; flex-wrap:wrap; gap:14px;
  font-size:12.5px;
}
.foot-legal-links a{ color:var(--text-dim2); }
.foot-legal-links a:hover{ color:var(--text-on-onyx); }