/* ═══ RESET & ROOT ═══════════════════════════════════════════════════════════ */
*,*::before,*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --p: #4C1CBC;
  --s: #DC0B6D;
  --black: #0a0a0a;
  --white: #fff;
  --g1: #f5f4f1;
  --g2: #eceae6;
  --g3: #d5d2cc;
  --g5: #8c8984;
  --g7: #46443f;
  --ease: cubic-bezier(.4,0,.2,1);
  /* halyard-display (Adobe Fonts) is a single family with two weights —
     300 = Book, 500 = Medium — not separate family names per weight. */
  --font-body: "halyard-display", "Open Sans", sans-serif;
  --font-heading: "halyard-display", "Open Sans", sans-serif;

  /* Type scale — rem-based, ~10-15% larger than the legacy hardcoded px values */
  --fs-3xs: 0.6rem;     /* ~9.6px  — was 8px (tiny badges) */
  --fs-2xs: 0.7rem;     /* ~11.2px — was 9-10px (eyebrows, meta labels) */
  --fs-xs:  0.8rem;     /* ~12.8px — was 11px (small UI text) */
  --fs-sm:  0.85rem;    /* ~13.6px — was 12px (body/description text) */
  --fs-base:0.95rem;    /* ~15.2px — was 13px (paragraph text) */
  --fs-md:  1.05rem;    /* ~16.8px — was 14px (small headings/buttons) */
  --fs-lg:  1.3rem;     /* ~20.8px — was 18px (subheadings) */
  --fs-xl:  1.6rem;     /* ~25.6px — was 20px */
  --fs-2xl: 1.75rem;    /* ~28px   — was 25px (section headings) */
  --fs-arc: 2.3rem;     /* ~36.8px — was 32px (results score arc) */
  --fs-score: 3.1rem;   /* ~49.6px — was 44px (live score) */
  --fs-qnm: 3.5rem;     /* ~56px   — was 50px (question number glyph) */
  --fs-qnm-mobile: 2.2rem;
  --fs-display: clamp(1.6rem, 2.7vw, 2.45rem);   /* was clamp(23px,2.7vw,35px) */
  --fs-persona: clamp(1.4rem, 2.4vw, 1.95rem);   /* was clamp(20px,2.4vw,28px) */
  --fs-q: clamp(1.05rem, 2vw, 1.45rem);          /* was clamp(14px,1.8vw,20px) */
  --fs-bp-title: clamp(1.45rem, 3vw, 2.15rem);   /* was clamp(20px,3vw,30px) */
}
html, body {
  height: 100%;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.disp {
  font-family: var(--font-heading);
  font-weight: 500;
}

/* ═══ LOADER BAR ══════════════════════════════════════════════════════════════ */
.ldr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 999;
  background: linear-gradient(90deg, var(--p), var(--s));
}
.ldr.on {
  background: linear-gradient(90deg, transparent 0%, var(--p) 25%, var(--s) 60%, transparent 100%);
  background-size: 300% 100%;
  animation: lm 1.5s linear infinite;
}
@keyframes lm {
  0%   { background-position: 160% 0; }
  100% { background-position: -140% 0; }
}

/* ═══ HEADER ══════════════════════════════════════════════════════════════════ */
.hdr {
  position: fixed;
  top: 3px;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--white);
  border-bottom: 1px solid var(--g2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
}
.hdr a { display: flex; align-items: center; }
.hdr img { display: block; height: 25px; width: auto; }
.htg {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--black);
  letter-spacing: 0;
}
.hdr-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-sec {
  background: var(--g1);
  border: 1.5px solid var(--g3);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g7);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.nav-sec:hover { color: var(--p); border-color: var(--p); background: rgba(76,27,188,.08); }
.nav-sec svg { flex-shrink: 0; }

/* ═══ APP LAYOUT ══════════════════════════════════════════════════════════════ */
.app {
  position: fixed;
  top: 55px;
  bottom: 27px;
  left: 0;
  right: 0;
  display: flex;
  overflow: hidden;
}

/* ═══ FOOTER ══════════════════════════════════════════════════════════════════ */
.ftr {
  font-size: var(--fs-xs);
  color: var(--g7);
  text-align: center;
  padding: 10px 14px;
  border-top: 1px solid var(--g2);
  background: var(--white);
}
.ftr a { color: inherit; text-decoration: none; }
.ftr a:hover { color: var(--p); text-decoration: underline; }
.ftr-app {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  z-index: 90;
}
.ftr-app .ftr-inner { white-space: nowrap; }
.lp {
  flex: 0 0 46%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--g2);
  overflow: hidden;
}
.lpscr {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.rp {
  flex: 1;
  background: var(--g1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 18px 14px;
}
.rphd { flex-shrink: 0; margin-bottom: 10px; }
.rpey {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--black);
  margin-bottom: 4px;
}
.rpsr { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 3px; }
.rpsc {
  font-size: var(--fs-score);
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--p), var(--s));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rpsbl { font-size: var(--fs-sm); color: var(--black); padding-bottom: 8px; }
.rpst { font-size: var(--fs-sm); color: var(--black); line-height: 1.4; }
.rpbw {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#bld-svg { display: block; width: 100%; height: 100%; }

/* ═══ INSIGHT CARD (right panel) ═══════════════════════════════════════════ */
.rpins {
  flex-shrink: 0;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-left: 2px solid var(--p);
  background: rgba(76,27,188,.04);
}
.rpins[hidden] { display: none; }
.rpins-ey {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 5px;
}
.rpins-tx { font-size: var(--fs-sm); color: var(--black); line-height: 1.5; }
.rpins-pr { font-size: var(--fs-xs); color: var(--p); font-weight: 500; margin-top: 6px; }
.rpins-pr[hidden] { display: none; }

/* ═══ DIMENSION METERS (scorecard panel) ═══════════════════════════════════ */
#sc-rp .rpbw { align-items: stretch; }
.dimviz {
  --seg-radius: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.dim-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.dim-nm {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--black);
}
.dim-pc { font-size: var(--fs-md); font-weight: 500; letter-spacing: -.01em; }
.dim-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
  margin-bottom: 7px;
}
.dim-seg {
  flex: 1;
  height: 100%;
  border-radius: var(--seg-radius);
  background: var(--g2);
  transform-origin: bottom;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.dim-seg.on { background: var(--c); }
.dim-seg.pop { animation: segPop .5s var(--ease); }
.dim-ax {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-2xs);
  color: var(--black);
}

/* ═══ CONFIGURATOR RIGHT PANEL ════════════════════════════════════════════ */
#cfg-rp {
  background: var(--g1);
  padding: 18px 16px 10px;
}
/* The drawing runs edge to edge on white paper — the SVG's viewBox tracks this
   box in pixels so its own white rect fills exactly, and the matching
   background means no panel colour shows through at any size. */
#cfg-rp .rpbw {
  margin: 0 -16px -10px;
  background: #fff;
}
#bld-svg #bscene * { vector-effect: non-scaling-stroke; }
#cfg-rp .rpey   { color: var(--black); }
#cfg-rp .rpst   { color: var(--black); }
#cfg-rp .cfg-dot { background: var(--g3); }
#cfg-rp .cfg-dot.done { background: var(--p); }
#cfg-rp .cfg-dot.cur  { background: rgba(76,27,188,.4); }

.cfg-step-dots { display: flex; gap: 6px; margin-bottom: 4px; }
.cfg-dot {
  width: 22px;
  height: 3px;
  background: rgba(255,255,255,.12);
  transition: background .3s;
}
.cfg-dot.done { background: #6B4FBF; }
.cfg-dot.cur  { background: rgba(107,79,191,.5); }

/* ═══ SCREENS ══════════════════════════════════════════════════════════════════ */
.scr { display: none; flex: 1; flex-direction: column; min-height: 0; }
.scr.on { display: flex; }

/* ═══ INTRO WRAPPER ═══════════════════════════════════════════════════════════ */
.iw {
  padding: 40px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p);
  margin-bottom: 20px;
}
.ebrow::before,
.ebrow::after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: var(--p);
}
.iw h1 {
  font-size: var(--fs-display);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.isub {
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.7;
  color: var(--g7);
  margin-bottom: 28px;
}
.mpls { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 28px; }
.mp {
  padding: 6px 11px;
  border: 1px solid var(--g2);
  font-size: var(--fs-sm);
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 5px;
}
.mpd { width: 5px; height: 5px; background: var(--p); flex-shrink: 0; }
.wl { border-top: 1px solid var(--g2); margin-bottom: 28px; }
.wi {
  padding: 12px 0;
  border-bottom: 1px solid var(--g2);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.win { font-size: var(--fs-xs); color: var(--black); min-width: 16px; padding-top: 2px; }
.wit { font-size: var(--fs-sm); line-height: 1.5; color: var(--g7); }
.wit strong { font-weight: 500; color: var(--black); display: block; margin-bottom: 1px; }

/* ═══ BUTTONS ══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  border: 1.5px solid var(--p);
  background: transparent;
  color: var(--p);
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btng {
  background: var(--p);
  color: var(--white);
  border-color: transparent;
}
.btng:hover { background: var(--black); border-color: var(--black); }
.btnlg { padding: 13px 32px; font-size: var(--fs-md); }
.btn[disabled] { opacity: .3; pointer-events: none; }
.bbk { margin-bottom: 8px; align-self: flex-start; }

/* ═══ QUESTION CHROME ══════════════════════════════════════════════════════════ */
.qtop {
  padding: 12px 24px;
  border-bottom: 1px solid var(--g2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.slbl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--p);
}
.ssq { width: 5px; height: 5px; background: var(--p); }
.qct { font-size: var(--fs-sm); color: var(--black); }
.qbd {
  padding: 28px 24px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.qnm {
  font-size: var(--fs-qnm);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--g2);
  margin-bottom: 10px;
}
.qtx {
  font-size: var(--fs-q);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.qhn { font-size: var(--fs-sm); color: var(--black); margin-bottom: 20px; }
.size-unit-toggle { display: inline-flex; border: 1.5px solid var(--g2); margin-bottom: 16px; width: fit-content; }
.size-unit-opt {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  color: var(--black);
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s;
}
.size-unit-opt.sel { background: var(--p); color: var(--white); }
.qnv {
  padding: 12px 24px;
  border-top: 1px solid var(--g2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sds { display: flex; gap: 5px; }
.sd { width: 22px; height: 3px; background: var(--g2); transition: background .3s; }
.sd.done { background: var(--p); }
.sd.cur  { background: var(--p); opacity: .4; }
.nr { display: flex; align-items: center; gap: 12px; }

/* ═══ TILE GRID ════════════════════════════════════════════════════════════════ */
.tls { display: grid; gap: 7px; width: 100%; }
.tls.c2 { grid-template-columns: repeat(2, 1fr); }
.tls.c4 { grid-template-columns: repeat(2, 1fr); }
.tls.c1 { grid-template-columns: 1fr; }
.tile {
  padding: 14px 15px;
  border: 1.5px solid var(--g2);
  cursor: pointer;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color .12s, background .12s, color .12s;
  user-select: none;
}
.tile:hover { border-color: var(--p); background: rgba(76,27,188,.04); }
.tile.sel { border-color: transparent; color: white; background: linear-gradient(135deg, var(--p), var(--s)); }
.trb {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--g3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile.sel .trb { border-color: rgba(255,255,255,.4); }
.trd { width: 5px; height: 5px; background: white; opacity: 0; transition: opacity .12s; }
.tile.sel .trd { opacity: 1; }
.tlb { font-size: var(--fs-sm); line-height: 1.35; }
.tile.sel .tlb { font-weight: 500; }
.tlb-t { display: block; font-size: var(--fs-base); font-weight: 500; margin-bottom: 3px; }
.tlb-d { display: block; font-size: var(--fs-base); font-weight: 300; color: var(--black); }
.tile.sel .tlb-d { color: rgba(255,255,255,.75); }

/* ═══ SCALE (1-5 numbered squares) ═════════════════════════════════════════════ */
.slw { width: 100%; }
.sle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-sm);
  color: var(--black);
  margin-top: 10px;
}
.slpp { display: flex; gap: 7px; }
.spp {
  flex: 1;
  max-width: 78px;
  height: 46px;
  border: 1.5px solid var(--g2);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 500;
  transition: border-color .12s, background .12s, color .12s;
  cursor: pointer;
  user-select: none;
  color: var(--g7);
}
.spp:hover { border-color: var(--p); background: rgba(76,27,188,.04); }
.spp.on { border-color: transparent; color: white; background: linear-gradient(135deg, var(--p), var(--s)); }

/* ═══ GATE FORM ════════════════════════════════════════════════════════════════ */
.gsc {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px;
}
.gh { font-size: var(--fs-2xl); font-weight: 400; letter-spacing: -.02em; margin-bottom: 6px; }
.gsb { font-size: var(--fs-sm); color: var(--g7); line-height: 1.65; margin-bottom: 20px; }
.frw { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.fg { margin-bottom: 10px; }
.flb {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 6px;
}
.fin {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--g2);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--black);
  background: var(--white);
  outline: none;
  transition: border-color .15s;
}
.fin:focus { border-color: var(--p); }
.gnt { font-size: var(--fs-sm); color: var(--black); margin-top: 10px; line-height: 1.5; }

/* ═══ RESULTS SCREEN ═══════════════════════════════════════════════════════════ */
.resscr { overflow-y: auto; }
.rhs {
  background: var(--black);
  color: var(--white);
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rey {
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 20px;
}
.aw { position: relative; display: inline-block; margin-bottom: 16px; }
.aw svg { display: block; width: 130px; height: 130px; }
.at {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.an { font-size: var(--fs-arc); line-height: 1; }
.al {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
  margin-top: 2px;
}
.sbg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border: 1px solid rgba(255,255,255,.15);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: 12px;
}
.spip { width: 6px; height: 6px; }
.sds2 { font-size: var(--fs-base); color: rgba(255,255,255,.55); max-width: 380px; line-height: 1.65; }
.rb { max-width: 660px; margin: 0 auto; padding: 30px 24px 0; width: 100%; }
.rst {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 14px;
}

/* ═══ AI BLOCK ═════════════════════════════════════════════════════════════════ */
.aiblock { margin-bottom: 30px; padding: 22px; border: 1.5px solid var(--g2); }
.aiload { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.aidots { display: flex; gap: 5px; }
.aidots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p), var(--s));
  animation: db 1.2s ease infinite;
}
.aidots span:nth-child(2) { animation-delay: .15s; }
.aidots span:nth-child(3) { animation-delay: .3s; }
@keyframes db {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%            { transform: scale(1); opacity: 1; }
}
.ailoadt { font-size: var(--fs-base); color: var(--black); }
.aisummary { font-size: var(--fs-base); line-height: 1.7; color: var(--g7); font-style: italic; margin-bottom: 18px; }
.aihelplbl {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--p);
  margin-bottom: 5px;
}
.aihelptext { font-size: var(--fs-base); line-height: 1.65; color: var(--g7); }

/* ═══ DIMENSION LIST ═══════════════════════════════════════════════════════════ */
.dl { border: 1px solid var(--g2); margin-bottom: 30px; }
.dr {
  padding: 14px 18px;
  border-bottom: 1px solid var(--g2);
  display: grid;
  grid-template-columns: 1fr minmax(58px, auto);
  gap: 12px;
  align-items: center;
}
.dr:last-child { border-bottom: none; }
.dnm { font-size: var(--fs-xs); font-weight: 500; margin-bottom: 7px; }
.dtr { height: 3px; background: var(--g2); }
.dfl {
  height: 100%;
  background: linear-gradient(90deg, var(--p), var(--s));
  transition: width 1.4s var(--ease);
}
.dpc { font-size: var(--fs-xl); font-weight: 400; text-align: right; }
.dst { font-size: var(--fs-xs); color: var(--black); text-transform: uppercase; letter-spacing: .05em; text-align: right; white-space: nowrap; }

/* ═══ RECOMMENDATIONS ══════════════════════════════════════════════════════════ */
.rcl { display: flex; flex-direction: column; gap: 8px; margin-bottom: 30px; }
.rc { padding: 17px; border: 1.5px solid var(--g2); display: flex; gap: 14px; align-items: flex-start; }
.rcn { font-size: var(--fs-2xl); font-weight: 400; color: var(--g2); line-height: 1; flex-shrink: 0; min-width: 30px; }
.rct { font-size: var(--fs-sm); font-weight: 500; margin-bottom: 3px; }
.rcd { font-size: var(--fs-sm); color: var(--g7); line-height: 1.6; }

/* ═══ CTA BLOCK ════════════════════════════════════════════════════════════════ */
.ctab { background: var(--g1); border: 1px solid var(--g2); padding: 26px; text-align: center; margin-bottom: 0; }
.ctah { font-size: var(--fs-lg); font-weight: 400; letter-spacing: -.02em; margin-bottom: 6px; }
.ctas {
  font-size: var(--fs-sm);
  color: var(--g7);
  margin-bottom: 18px;
  line-height: 1.6;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.ctabtns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ═══ NEXT-STEP CTA STRIP (above the fold, right after score reveal) ═══════════ */
.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--black);
  padding: 18px 22px;
  margin-bottom: 26px;
}
.cta-strip-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ff6fb0;
  margin-bottom: 4px;
}
.cta-strip-title { font-size: var(--fs-md); font-weight: 500; color: var(--white); letter-spacing: -.01em; }
.cta-strip .btn { flex-shrink: 0; }
/* On the black strip, the usual hover-to-black would make the button vanish — go white instead. */
.cta-strip .btn.btng:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* ═══ SHARE ICON BUTTONS ═══════════════════════════════════════════════════════ */
.share-icon-btn {
  width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--g2); color: var(--g7); flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.share-icon-btn:hover { border-color: var(--p); color: var(--p); background: rgba(76,27,188,.05); }
@media (max-width: 480px) {
  .cta-strip { text-align: center; justify-content: center; }
  .cta-strip-txt { width: 100%; }
}
@media (max-width: 560px) {
  /* Not enough header width for the logo, centered title, and the nav
     button all at once — the title is the least essential, drop it. */
  .hdr-center { display: none; }
}

/* ═══ CONFIGURATOR SPECIFIC ════════════════════════════════════════════════════ */
.prefill-note {
  font-size: var(--fs-2xs);
  color: var(--p);
  margin-bottom: 18px;
  padding: 8px 10px;
  background: rgba(76,27,188,.05);
  border-left: 2px solid var(--p);
  line-height: 1.5;
}
.auto-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.auto-track { flex: 1; height: 3px; background: rgba(76,27,188,.15); overflow: hidden; }
.auto-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--p), var(--s)); }
.auto-label { font-size: var(--fs-2xs); color: var(--p); opacity: .7; white-space: nowrap; flex-shrink: 0; }
.pri-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; width: 100%; margin-bottom: 12px; }
.pri-grid.c1 { grid-template-columns: 1fr; }
.pri-card {
  padding: 14px;
  border: 1.5px solid var(--g2);
  cursor: pointer;
  background: var(--white);
  transition: border-color .12s, background .12s, color .12s;
  user-select: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pri-card:hover { border-color: var(--p); background: rgba(76,27,188,.04); }
.pri-card.sel { border-color: transparent; color: white; background: linear-gradient(135deg, var(--p), var(--s)); }
.pri-card.disabled { opacity: .35; pointer-events: none; }
.pri-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.pri-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pri-label { font-size: var(--fs-sm); line-height: 1.3; }
.pri-card.sel .pri-label { font-weight: 500; }
.pri-counter { font-size: var(--fs-sm); color: var(--black); margin-bottom: 8px; }
.pri-counter span { color: var(--p); font-weight: 500; }

/* ═══ BLUEPRINT ════════════════════════════════════════════════════════════════ */
.bp-hero { background: var(--black); color: var(--white); padding: 44px 32px; text-align: center; }
.bp-tag {
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 16px;
}
.bp-title {
  font-size: var(--fs-bp-title);
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  line-height: 1.2;
}
.bp-summary { font-size: var(--fs-base); color: rgba(255,255,255,.6); max-width: 520px; margin: 0 auto; line-height: 1.7; font-style: italic; }
.bp-body { max-width: 680px; margin: 0 auto; padding: 30px 24px 0; width: 100%; }
.bp-stitle {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 14px;
}
.mod-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 30px; }
.mod-card { padding: 16px; border: 1.5px solid var(--g2); }
.mod-name { font-size: var(--fs-sm); font-weight: 500; margin-bottom: 4px; color: var(--p); }
.mod-rationale { font-size: var(--fs-sm); color: var(--black); line-height: 1.5; }
.out-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 30px; }
.out-item { padding: 14px 16px; border: 1.5px solid var(--g2); display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.out-pri { font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--p); min-width: 120px; padding-top: 2px; flex-shrink: 0; }
.out-text { font-size: var(--fs-sm); color: var(--g7); line-height: 1.5; }
.phase-list { display: flex; flex-direction: column; margin-bottom: 30px; border: 1px solid var(--g2); }
.phase-item { padding: 16px 18px; border-bottom: 1px solid var(--g2); display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.phase-item:last-child { border-bottom: none; }
.phase-num {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--white);
  background: linear-gradient(135deg, var(--p), var(--s));
  padding: 3px 8px;
  flex-shrink: 0;
  line-height: 1.4;
  margin-top: 2px;
  white-space: nowrap;
}
.phase-title { font-size: var(--fs-sm); font-weight: 500; margin-bottom: 3px; }
.phase-desc { font-size: var(--fs-sm); color: var(--g7); line-height: 1.55; }
.int-note {
  padding: 14px 16px;
  background: rgba(76,27,188,.04);
  border: 1px solid rgba(76,27,188,.12);
  font-size: var(--fs-sm);
  color: var(--g7);
  line-height: 1.55;
  margin-bottom: 30px;
}

/* ═══ ANIMATION ════════════════════════════════════════════════════════════════ */
@keyframes fuv {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim { animation: fuv .28s var(--ease) forwards; }

@keyframes segPop {
  0%   { transform: scaleY(1); filter: none; }
  35%  { transform: scaleY(1.14); filter: drop-shadow(0 0 4px rgba(220,11,109,.55)); }
  100% { transform: scaleY(1); filter: none; }
}

/* Overlay reveal for the configurator blueprint — new elements fade in with a
   stagger so each answer reads as one step rather than everything at once. */
@keyframes baseIn { from { opacity: 0; } to { opacity: 1; } }
#bld-svg .base-in { animation: baseIn .26s var(--ease); }
#bld-svg .ov-el   { animation: baseIn .3s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .anim { animation: none; }
  .dim-seg { transition: background .01s; }
  .dim-seg.pop { animation: none; }
  #bld-svg .ov-el, #bld-svg .base-in { animation: none; }
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  html, body { overflow: auto; height: auto; }
  .app { position: relative; top: auto; bottom: auto; height: auto; flex-direction: column; }
  .ftr-app { position: static; height: auto; padding: 10px 14px; overflow-x: visible; }
  .ftr-app .ftr-inner { white-space: normal; }
  .lp { flex: none; border-right: none; border-bottom: 1px solid var(--g2); }
  .lpscr { overflow-y: visible; }
  .rp { flex: none; height: clamp(220px, 48vh, 380px); }
  /* The scorecard panel is a stack of meters plus the insight card, so it
     grows with its content instead of being height-bound like the building. */
  #sc-rp { height: auto; padding-bottom: 22px; }
  .dimviz { gap: 13px; }
  .dim-bars { height: 26px; gap: 2px; }
  .qnm { font-size: var(--fs-qnm-mobile); }
  .tls.c2, .tls.c4, .pri-grid, .mod-grid { grid-template-columns: 1fr; }
  .iw, .gsc, .bp-hero { padding: 26px 18px; }
  .qbd { padding: 20px 16px 10px; }
  .qtop, .qnv { padding: 11px 16px; }
  .frw { grid-template-columns: 1fr; }
  .rb, .bp-body { padding: 24px 16px 0; }
  .rhs { padding: 30px 18px; }
  .out-pri { min-width: 0; }
  .phase-num { white-space: normal; }
}
@media (min-width: 1100px) {
  .tls.c4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 400px) {
  .qnv { flex-wrap: wrap; row-gap: 8px; }
  .sds { gap: 4px; }
  .sd { width: 16px; }
  .hdr { padding: 0 14px; }
  .hdr img { height: 26px; }
  .nav-sec { padding: 7px 12px; font-size: var(--fs-xs); }
  .auto-row { flex-wrap: wrap; row-gap: 4px; }
  .auto-label { white-space: normal; flex-basis: 100%; }
}

/* ═══ AI BADGE ══════════════════════════════════════════════════════════════ */
.ai-badge {
  display: inline-block;
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border: 1px solid rgba(76, 27, 188, 0.4);
  color: #9b7de8;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 8px;
  line-height: 1.3;
  font-family: var(--font-body);
  opacity: 0.85;
}
/* ═══ SELF-HOSTED FONTS ════════════════════════════════════════════════════════ */
/* Open Sans is served first-party rather than from fonts.googleapis.com. A font
   request to Google discloses the visitor's IP address before they have made any
   cookie choice, which would contradict the promise made on /legal/cookies that
   nothing optional runs until they choose. Do NOT reintroduce the Google Fonts
   <link> in any page head.

   halyard-display is still loaded from use.typekit.net because Adobe Fonts'
   terms require their web fonts to be served from Adobe's CDN — we cannot
   legally self-host it. That single remaining third-party request is disclosed
   explicitly in the Cookie Notice. If a self-hosting licence for Halyard Display
   is ever bought direct from Darden Studio, add the @font-face here, drop the
   Typekit <link> from both page heads, and delete the "before you choose"
   section from views/legal/cookies.html. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-italic-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-latin-ext-italic-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══ CONSENT ═════════════════════════════════════════════════════════════════ */
/* Markup for all of this is built in consent.js. Class names are shared with the
   HID megachurch build so the two can be diffed; only the visual language
   differs — square corners, 1.5px borders, --p/--s rather than navy/orange.

   The banner starts hidden HERE rather than in JS. styles.css is a
   render-blocking stylesheet in every head, so there is no frame in which an
   un-suppressed banner could paint. */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: var(--white); border-top: 3px solid var(--p);
  box-shadow: 0 -6px 28px rgba(10,10,10,.13);
  transform: translateY(100%); opacity: 0; visibility: hidden;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.consent-banner.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.consent-banner.is-suspended { display: none; }
.consent-banner:focus { outline: none; }
.consent-banner-inner {
  max-width: 1180px; margin: 0 auto; padding: 20px 28px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.consent-banner-copy { flex: 1; min-width: 280px; }
.consent-banner-copy h2 {
  font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 500;
  letter-spacing: -.01em; color: var(--black); margin-bottom: 6px;
}
.consent-banner-copy p { font-size: var(--fs-sm); line-height: 1.6; color: var(--g7); }
.consent-banner-copy a { color: var(--p); text-decoration: underline; }
.consent-banner-copy a:hover { color: var(--s); }
.consent-gpc-note {
  margin-top: 9px; font-size: var(--fs-xs); color: var(--p);
  background: var(--g1); border-left: 1.5px solid var(--p); padding: 8px 11px;
}
.consent-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Accept and Reject are deliberately identical in size, weight, padding and
   border. Only the fill differs. Making "reject" quieter than "accept" is the
   dark pattern regulators look for first. These do not reuse .btn/.btng because
   those carry a hover that swaps to black, which would make the two buttons
   behave differently under the cursor. */
.consent-btn {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  padding: 11px 20px; border: 1.5px solid var(--p); border-radius: 0;
  cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.consent-btn--accept { background: var(--p); color: var(--white); }
.consent-btn--accept:hover { background: var(--s); border-color: var(--s); }
.consent-btn--reject { background: transparent; color: var(--p); }
.consent-btn--reject:hover { background: var(--g1); border-color: var(--s); color: var(--s); }
.consent-btn--manage { background: transparent; color: var(--g7); border-color: var(--g3); }
.consent-btn--manage:hover { border-color: var(--g5); color: var(--black); }
.consent-btn:focus-visible { outline: 2px solid var(--s); outline-offset: 2px; }

.consent-prefs {
  display: none; position: fixed; inset: 0; z-index: 1200;
  background: rgba(10,10,10,.62);
  align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.consent-prefs.is-open { display: flex; }
.consent-prefs-box {
  background: var(--white); border: 1.5px solid var(--g3); border-radius: 0;
  padding: 28px 26px; max-width: 560px; width: 100%;
  max-height: calc(100vh - 40px); overflow-y: auto; margin: auto;
  box-shadow: 0 20px 60px rgba(10,10,10,.3);
}
.consent-prefs-head h2 {
  font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 500;
  letter-spacing: -.02em; color: var(--black); margin-bottom: 7px;
}
.consent-prefs-head p { font-size: var(--fs-sm); color: var(--g7); line-height: 1.6; margin-bottom: 20px; }
.consent-prefs-cat { border-top: 1px solid var(--g2); padding: 16px 0; }
.consent-prefs-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.consent-prefs-cat-desc { font-size: var(--fs-sm); color: var(--g7); line-height: 1.6; margin-top: 8px; }
.consent-prefs-cat-cookies { font-size: var(--fs-xs); color: var(--g5); margin-top: 6px; }
.consent-prefs-cat-cookies a { color: var(--p); text-decoration: underline; }
.consent-always-on {
  font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: .09em; color: var(--p);
  background: var(--g1); border: 1px solid var(--g2); padding: 4px 9px;
}
.consent-prefs-actions {
  display: flex; gap: 10px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--g2); flex-wrap: wrap;
}
.consent-prefs-actions .consent-btn { flex: 1; }

/* Built on a real checkbox so keyboard operation and screen-reader semantics
   come for free. The input is clipped rather than display:none, which would
   remove it from the tab order entirely. Square track and thumb to match the
   app's border-radius:0 language. */
.consent-toggle { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.consent-toggle.is-locked { cursor: default; }
.consent-toggle input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.consent-toggle-track {
  width: 40px; height: 22px; background: var(--white);
  border: 1.5px solid var(--g3); flex-shrink: 0; position: relative;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.consent-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  background: var(--g5); transition: transform .15s var(--ease), background .15s var(--ease);
}
.consent-toggle input:checked + .consent-toggle-track { background: var(--p); border-color: var(--p); }
.consent-toggle input:checked + .consent-toggle-track .consent-toggle-thumb {
  transform: translateX(19px); background: var(--white);
}
.consent-toggle input:disabled + .consent-toggle-track { background: var(--g3); border-color: var(--g3); }
.consent-toggle input:disabled + .consent-toggle-track .consent-toggle-thumb {
  transform: translateX(19px); background: var(--white);
}
.consent-toggle input:focus-visible + .consent-toggle-track { outline: 2px solid var(--s); outline-offset: 2px; }
.consent-toggle-text {
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500; color: var(--black);
}

.consent-placeholder {
  background: var(--g1); border: 1px dashed var(--g3); padding: 20px;
  text-align: center; font-size: var(--fs-sm); color: var(--g5);
}

/* The banner overlays the fixed footer (z-index 90) and would otherwise sit on
   top of the Continue button in .qnv. consent.js adds this class to <body>
   while the banner is open so the app column ends above it. Two breakpoints
   because the banner wraps to a second row before the layout goes to flow. */
body.consent-banner-open .app { bottom: 130px; }
@media (max-width: 1000px) {
  body.consent-banner-open .app { bottom: 210px; }
}

/* ═══ FORM CONSENT ════════════════════════════════════════════════════════════ */
/* Sits under the gate forms on both #s-gate and #cfg-gate. The checkbox is
   unticked and not required: it must never gate the results. Bundling the
   marketing opt-in with access to the report would make the consent invalid
   and the report conditional on it. */
.form-consent { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--g2); }
.form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--g3); border-radius: 0; background: var(--white);
  cursor: pointer; position: relative;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.form-check input[type="checkbox"]:hover { border-color: var(--p); }
.form-check input[type="checkbox"]:checked { background: var(--p); border-color: var(--p); }
.form-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 9px; border: solid var(--white);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.form-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--s); outline-offset: 2px; }
.form-check span { font-size: var(--fs-sm); line-height: 1.55; color: var(--black); }
.form-legal { font-size: var(--fs-xs); line-height: 1.6; color: var(--g7); margin-top: 11px; }
.form-legal a { color: var(--p); text-decoration: underline; }
.form-legal a:hover { color: var(--s); }

/* ═══ LEGAL PAGES ═════════════════════════════════════════════════════════════ */
/* Served by renderLegal() in server.js from views/legal/*.html. These pages are
   ordinary scrolling documents, so they must escape the app shell's
   `html, body { overflow: hidden }` — hence the body class. */
html.legal-page, body.legal-page { overflow: auto; height: auto; }
body.legal-page .ftr { position: static; }
.legal-page-main { padding-top: 55px; }
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 44px 24px 80px; }
.legal-wrap h1 {
  font-family: var(--font-heading); font-size: var(--fs-display); font-weight: 500;
  color: var(--black); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px;
}
.legal-meta {
  font-size: var(--fs-xs); color: var(--g5); padding-bottom: 20px;
  border-bottom: 1px solid var(--g2); margin-bottom: 28px;
}
.legal-wrap h2 {
  font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 500;
  color: var(--black); letter-spacing: -.01em; margin: 34px 0 10px; scroll-margin-top: 70px;
}
.legal-wrap h3 {
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500;
  color: var(--p); margin: 22px 0 8px;
}
.legal-wrap p, .legal-wrap li { font-size: var(--fs-base); line-height: 1.7; color: var(--g7); }
.legal-wrap p { margin-bottom: 14px; }
.legal-wrap ul, .legal-wrap ol { margin: 0 0 16px 22px; }
.legal-wrap li { margin-bottom: 7px; }
.legal-wrap a { color: var(--p); text-decoration: underline; }
.legal-wrap a:hover { color: var(--s); }
.legal-wrap strong { color: var(--black); font-weight: 500; }
.legal-callout {
  background: var(--g1); border-left: 3px solid var(--p);
  padding: 16px 18px; margin: 0 0 20px;
}
.legal-callout p:last-child { margin-bottom: 0; }
.legal-toc {
  background: var(--white); border: 1.5px solid var(--g2);
  padding: 18px 20px; margin-bottom: 30px;
}
.legal-toc h2 {
  margin: 0 0 10px; font-size: var(--fs-2xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--p);
  font-family: var(--font-body);
}
.legal-toc ol { margin: 0 0 0 18px; }
.legal-toc li { margin-bottom: 4px; font-size: var(--fs-sm); }

/* Tables must scroll inside their own box; the page body must never scroll
   sideways on a phone. */
.legal-table-wrap { overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.legal-table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: var(--fs-sm); }
.legal-table th, .legal-table td {
  border: 1px solid var(--g2); padding: 9px 11px;
  text-align: left; vertical-align: top; line-height: 1.55;
}
.legal-table th {
  background: var(--g1); font-weight: 500; color: var(--black); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .06em;
}
.legal-table td { color: var(--g7); }

/* ═══ CONSENT + LEGAL RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 760px) {
  .consent-banner-inner { padding: 18px 16px; gap: 16px; }
  .consent-banner-actions { flex-direction: column; width: 100%; }
  .consent-banner-actions .consent-btn { width: 100%; }
  .consent-prefs-actions { flex-direction: column; }
  .consent-prefs-actions .consent-btn { width: 100%; flex: none; }
  .consent-prefs-box { padding: 22px 18px; }
  /* Layout is in normal flow at this width, so reserve room below the content
     rather than moving a fixed panel. */
  body.consent-banner-open { padding-bottom: 320px; }
  body.consent-banner-open .app { bottom: auto; }
  .legal-page-main { padding-top: 0; }
  .legal-wrap { padding: 30px 18px 60px; }
}

/* Footer legal links. consent.js appends "Cookie Settings" into .footer-links
   on every page, so the separator style has to work for an unknown link count. */
.footer-links { display: inline; }
.ftr-sep { margin: 0 5px; color: var(--g3); }