/* ==========================================================================
   Roland Conner Advisory Group — global stylesheet
   Archetype A4. House component library, RCAG token skin.
   Palette sampled from the approved keystone and seal artwork.
   ========================================================================== */

:root{
  /* Brand */
  --brand:#620718; --brand-dark:#4A0512; --brand-light:#8E2233;
  --brand-soft:#F0E4E2; --brand-hair:rgba(98,7,24,.22);
  --accent:#1F3A5F; --accent-soft:#E6EAF0;

  /* Surfaces */
  --bg:#F6F1E6; --surface:#FCFAF4; --surface-alt:#EFE9DA; --raise:#E8E1CF;
  --ink:#17161C; --ink-mid:#3B3A42; --muted:#6E6C73;
  --border:rgba(23,22,28,.15); --border-soft:rgba(23,22,28,.085);
  --hair:rgba(23,22,28,.26);
  --ink-on-brand:#FCFAF4;

  /* Type */
  --font-display:'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometry */
  --r-card:14px; --r-pill:50px; --r-input:10px; --r-bar:8px;
  --shadow:0 1px 2px rgba(23,22,28,.035), 0 10px 34px -18px rgba(23,22,28,.22);
  --shadow-lift:0 2px 5px rgba(23,22,28,.05), 0 20px 52px -22px rgba(23,22,28,.3);
  --nav-h:64px; --wrap:1180px; --gut:22px;
}
@media (min-width:960px){ :root{ --nav-h:74px; --gut:40px } }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#E8A0AA; --brand-dark:#CE7E8A; --brand-light:#F2BEC5;
    --brand-soft:#2C1519; --brand-hair:rgba(232,160,170,.26);
    --accent:#9BB8DC; --accent-soft:#1A2432;
    --bg:#121116; --surface:#1A1920; --surface-alt:#1F1E26; --raise:#272630;
    --ink:#EDE9E0; --ink-mid:#C4C0B8; --muted:#94918B;
    --border:rgba(237,233,224,.17); --border-soft:rgba(237,233,224,.09);
    --hair:rgba(237,233,224,.28);
    --ink-on-brand:#1A0A0E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px -18px rgba(0,0,0,.8);
    --shadow-lift:0 2px 5px rgba(0,0,0,.45), 0 20px 52px -22px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --brand:#E8A0AA; --brand-dark:#CE7E8A; --brand-light:#F2BEC5;
  --brand-soft:#2C1519; --brand-hair:rgba(232,160,170,.26);
  --accent:#9BB8DC; --accent-soft:#1A2432;
  --bg:#121116; --surface:#1A1920; --surface-alt:#1F1E26; --raise:#272630;
  --ink:#EDE9E0; --ink-mid:#C4C0B8; --muted:#94918B;
  --border:rgba(237,233,224,.17); --border-soft:rgba(237,233,224,.09);
  --hair:rgba(237,233,224,.28);
  --ink-on-brand:#1A0A0E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px -18px rgba(0,0,0,.8);
  --shadow-lift:0 2px 5px rgba(0,0,0,.45), 0 20px 52px -22px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg{max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--font-display); margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.016em}
p{margin:0}
strong{font-weight:600; color:var(--ink)}
a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:3px}
::selection{background:var(--brand); color:var(--ink-on-brand)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:3px;
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--brand);color:var(--ink-on-brand);padding:12px 20px;border-radius:0 0 var(--r-input) 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}

/* ============================ Layout ============================ */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
section{padding:76px 0; position:relative}
@media (min-width:960px){ section{padding:112px 0} }
.band-alt{background:var(--surface-alt)}
.stack{display:flex; flex-direction:column; gap:17px}
.measure{max-width:66ch}
.measure-tight{max-width:24ch}
.measure-mid{max-width:40ch}

/* Hairline section rule with registration ticks — identity-manual motif */
.ruled{border-top:1px solid var(--border)}
.ruled::before,.ruled::after{
  content:''; position:absolute; top:-1px; width:1px; height:9px; background:var(--hair);
}
.ruled::before{left:var(--gut)}
.ruled::after{right:var(--gut)}

/* ============================ Type ============================ */
.eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--brand); display:flex; align-items:center;
  gap:11px; margin-bottom:20px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--brand); flex:none; opacity:.55}
.eyebrow.alt{color:var(--accent)} .eyebrow.alt::before{background:var(--accent)}
h1,.h1{font-size:clamp(38px,7vw,74px); line-height:1.02; letter-spacing:-.028em}
h2,.h2{font-size:clamp(27px,4.2vw,42px); line-height:1.12; letter-spacing:-.021em}
h3,.h3{font-size:clamp(19px,2.2vw,23px); line-height:1.26; letter-spacing:-.012em}
.lede{font-size:clamp(17.5px,2.05vw,20.5px); line-height:1.58; color:var(--ink-mid); font-weight:400}
.small{font-size:14.5px; color:var(--muted); line-height:1.62}
.label{font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.serif-body{font-family:var(--font-display); font-size:19px; line-height:1.62}

/* ============================ Buttons ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  font-family:var(--font-body); line-height:1.2; letter-spacing:.005em;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--brand); color:var(--ink-on-brand); border-color:var(--brand)}
.btn-solid:hover{background:var(--brand-dark); border-color:var(--brand-dark); box-shadow:var(--shadow)}
.btn-outline{background:transparent; color:var(--brand); border-color:var(--brand-hair)}
.btn-outline:hover{border-color:var(--brand); background:var(--brand-soft)}
.btn-accent{background:var(--accent); color:var(--surface); border-color:var(--accent)}
:root[data-theme="dark"] .btn-accent,:root:not([data-theme="light"]) .btn-accent{color:var(--ink-on-brand)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--ink-mid)}
.btn-sm{padding:9px 19px; font-size:14px}

/* ============================ Mark ============================ */
.mark-svg{display:block}
.mark-svg path{fill:var(--brand)}

/* ============================ Header ============================ */
/* The frosted layer lives on ::before, NOT on .site-header itself.
   backdrop-filter makes an element a containing block for its fixed-position
   descendants, and the mobile menu is a fixed child of the header — with the
   filter on the header, `inset:var(--nav-h) 0 0 0` resolved against the 64px
   header box instead of the viewport and the panel collapsed to a sliver. */
.site-header{
  position:sticky; top:0; z-index:900; background:transparent;
  border-bottom:1px solid var(--border-soft);
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  transition:opacity .3s;
}
.site-header .nav{position:relative; z-index:1}
@supports not (backdrop-filter:blur(1px)){ .site-header::before{background:var(--bg)} }
.nav{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); height:var(--nav-h); display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:none}
.brand .mark-svg{width:22px; height:22px}
.brand .mark{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.1em; color:var(--ink); line-height:1}
.brand .full{font-family:var(--font-mono); font-size:9px; font-weight:400; color:var(--muted); letter-spacing:.13em; text-transform:uppercase; display:none; padding-left:11px; margin-left:1px; border-left:1px solid var(--border)}
@media (min-width:1120px){ .brand .full{display:inline-block} }

.nav-toggle{margin-left:auto; width:42px; height:42px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:transparent; border:1px solid var(--border); border-radius:var(--r-input); cursor:pointer}
.nav-toggle span{display:block; width:16px; height:1.5px; background:var(--ink); transition:transform .22s, opacity .22s}
.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)}
@media (min-width:960px){ .nav-toggle{display:none} }

.nav-links{position:fixed; inset:var(--nav-h) 0 0 0; background:var(--bg); padding:24px var(--gut) calc(40px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:none; flex-direction:column; gap:0}
.nav-links.open{display:flex}
body.menu-open{position:fixed; left:0; right:0; width:100%; overflow:hidden}
.nav-links > a{padding:16px 2px; min-height:52px; display:flex; align-items:center; text-decoration:none; color:var(--ink); font-size:17px; font-weight:500; border-bottom:1px solid var(--border-soft)}
.nav-drop-toggle{width:100%; text-align:left; padding:16px 2px; min-height:52px; background:transparent; border:none; border-bottom:1px solid var(--border-soft); color:var(--ink); font-size:17px; font-weight:500; font-family:var(--font-body); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px}
.nav-drop-toggle .caret{font-size:10px; color:var(--muted); transition:transform .22s}
.nav-drop-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-drop-menu{display:none; padding:6px 0 12px 14px; flex-direction:column; gap:0}
.nav-drop-menu.open{display:flex}
.nav-drop-label{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:10px 0 6px}
.nav-drop-menu a{padding:12px 0; min-height:44px; display:flex; align-items:center; text-decoration:none; color:var(--ink-mid); font-size:15px}
.nav-drop-menu a:hover{color:var(--brand)}
.nav-links .btn{margin-top:22px}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px}
@media (max-width:959px){ .nav-cta{margin-left:auto; order:2} .nav-toggle{order:3; margin-left:0} }

@media (min-width:960px){
  .nav-links{position:static; inset:auto; background:none; padding:0; overflow:visible; display:flex; flex-direction:row; align-items:center; gap:2px; margin-left:14px}
  .nav-links > a{border-bottom:none; padding:9px 13px; font-size:14.5px; border-radius:var(--r-pill); font-weight:500}
  .nav-links > a:hover{background:var(--surface-alt)}
  .nav-drop{position:relative}
  .nav-drop-toggle{width:auto; border-bottom:none; padding:9px 13px; font-size:14.5px; border-radius:var(--r-pill)}
  .nav-drop-toggle:hover{background:var(--surface-alt)}
  .nav-drop-menu{position:absolute; top:calc(100% + 10px); left:0; min-width:310px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-lift); padding:16px 18px 18px; z-index:950}
  .nav-drop-menu a{padding:9px 8px; border-radius:8px}
  .nav-drop-menu a:hover{background:var(--surface-alt); color:var(--brand)}
  .nav-links .btn{margin-top:0; margin-left:10px}
}
.theme-toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--ink-mid); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none; transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--ink-mid); color:var(--ink)}

/* ============================ Hero ============================ */
.hero{padding:72px 0 0; overflow:hidden}
@media (min-width:960px){ .hero{padding:104px 0 0} }
.hero-inner{position:relative}
.hero .eyebrow{margin-bottom:26px}
.hero h1{max-width:13ch}
.hero .lede{max-width:52ch; margin-top:26px}
.hero-figure{
  position:absolute; right:-4%; top:-30px; width:min(30vw,300px); opacity:.055;
  pointer-events:none; z-index:0;
}
.hero-figure svg{width:100%; height:auto; display:block}
.hero-inner > *{position:relative; z-index:1}
@media (max-width:900px){ .hero-figure{display:none} }

/* Pathway split */
.paths{display:grid; grid-template-columns:1fr; gap:1px; margin-top:60px; background:var(--border); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
@media (min-width:820px){ .paths{grid-template-columns:1fr 1fr} }
.path{
  background:var(--bg); padding:34px 0 36px; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; position:relative; transition:background .25s;
}
@media (min-width:820px){ .path{padding:40px 34px 42px} .path:first-child{padding-left:0} .path:last-child{padding-right:0} }
.path::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.path.pro::after{background:var(--accent)}
.path:hover::after{transform:scaleX(1)}
.path:hover{background:var(--surface)}
.path .who{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--brand); margin-bottom:16px}
.path.pro .who{color:var(--accent)}
.path h2{font-size:clamp(22px,2.9vw,30px); margin-bottom:13px; letter-spacing:-.018em}
.path p{color:var(--ink-mid); font-size:16px; flex:1; max-width:44ch}
.path .go{margin-top:24px; font-weight:600; font-size:14.5px; color:var(--brand); display:inline-flex; align-items:center; gap:9px}
.path.pro .go{color:var(--accent)}
.path:hover .go .arr{transform:translateX(5px)}
.path .arr{transition:transform .3s cubic-bezier(.2,.7,.3,1); display:inline-block}

/* ============================ Cards & grids ============================ */
.grid{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:700px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .grid-3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--surface); padding:30px 28px 32px; transition:background .25s; display:flex; flex-direction:column}
a.card{text-decoration:none; color:inherit}
a.card:hover{background:var(--bg)}
.card h3{margin-bottom:11px}
.card p{color:var(--ink-mid); font-size:15.5px; flex:1; line-height:1.62}
.card .go{margin-top:20px; font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--brand)}

/* ============================ Stages ============================ */
.stages{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
/* the stage name and the plain-language question it answers, as one chip */
.stage{display:inline-flex; align-items:baseline; gap:10px; padding:11px 21px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); font-size:14.5px; color:var(--ink)}
.stage .st-n{font-weight:600}
.stage .st-q{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; color:var(--muted); font-weight:400}
.dark-band .stage .st-q{color:var(--d-soft)}
@media (max-width:620px){ .stage{flex-direction:column; align-items:flex-start; gap:3px; border-radius:14px; padding:10px 16px} .stage .dot{display:none} }
.r-q{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.01em; color:var(--ink-mid); font-weight:400; margin-left:12px; white-space:nowrap}
@media (max-width:620px){ .r-q{display:block; margin-left:0; margin-top:5px; white-space:normal} }
.dark-band .r-q{color:var(--d-soft)}
.dark-band .sec-head .sh-r,.dark-band .sec-head .sh-r a{color:var(--d-soft)}
.dark-band .sec-head{border-bottom-color:var(--d-line)}
.dark-band .rules{border-top-color:var(--d-line)}
.dark-band .rules .rule{border-bottom-color:var(--d-line)}
.dark-band .rules .rule .r-h{color:var(--d-ink)}
.dark-band .rules .rule .r-b{color:var(--d-mid)}
.stage .dot{width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none}
.stage-arrow{display:flex; align-items:center; color:var(--muted); font-size:12px; opacity:.7}

/* ============================ Rules list ============================ */
.rules{border-top:1px solid var(--border)}
.rules .rule{padding:26px 0; border-bottom:1px solid var(--border-soft); display:grid; grid-template-columns:1fr; gap:8px}
@media (min-width:860px){ .rules .rule{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:baseline} }
.rules .rule .r-h{font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:19px; line-height:1.34; letter-spacing:-.012em}
.rules .rule .r-b{color:var(--ink-mid); font-size:15.5px; line-height:1.64}

/* ============================ Ledger ============================ */
.ledger{border-top:1px solid var(--border); max-width:640px}
.ledger .row{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--border-soft)}
.ledger .lbl{font-size:15px; color:var(--ink-mid)}
.ledger .lbl em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px}
.ledger .val{font-family:var(--font-mono); font-size:14.5px; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.ledger .row.tot{border-bottom:2px solid var(--brand)}
.ledger .row.tot .lbl{font-weight:600; color:var(--ink)}
.ledger .row.tot .val{color:var(--brand); font-weight:500}

/* ============================ Narrative ============================ */
.narrative{border-left:1px solid var(--brand-hair); padding-left:30px; display:flex; flex-direction:column; gap:20px; max-width:60ch}
.narrative p{font-family:var(--font-display); font-size:19.5px; line-height:1.6; color:var(--ink)}
.narrative p.aside{font-family:var(--font-body); font-size:15px; color:var(--muted)}
.pullquote{font-family:var(--font-display); font-size:clamp(24px,3.6vw,38px); line-height:1.26; font-weight:600; color:var(--brand); max-width:19ch; letter-spacing:-.022em}

/* ============================ Definition rows ============================ */
.defs{display:flex; flex-direction:column; border-top:1px solid var(--border)}
.defs .d{display:grid; grid-template-columns:1fr; gap:5px; padding:22px 0; border-bottom:1px solid var(--border-soft)}
@media (min-width:760px){ .defs .d{grid-template-columns:230px 1fr; gap:34px} }
.defs .d dt{font-weight:600; color:var(--ink); font-size:15.5px; font-family:var(--font-body)}
.defs .d dd{margin:0; color:var(--ink-mid); font-size:15.5px; line-height:1.64}

/* ============================ FAQ ============================ */
.faq{border-top:1px solid var(--border); max-width:78ch}
.faq-item{border-bottom:1px solid var(--border-soft)}
.faq-q{width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:23px 40px 23px 0; font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); position:relative; line-height:1.38; letter-spacing:-.012em}
.faq-q::after{content:''; position:absolute; right:8px; top:50%; width:11px; height:1.5px; background:var(--brand); transform:translateY(-50%)}
.faq-q::before{content:''; position:absolute; right:13px; top:50%; width:1.5px; height:11px; background:var(--brand); transform:translateY(-50%); transition:transform .25s}
.faq-q[aria-expanded="true"]::before{transform:translateY(-50%) scaleY(0)}
.faq-a{display:none; padding:0 0 24px; color:var(--ink-mid); font-size:16px; line-height:1.68; max-width:64ch}
.faq-a.open{display:block}

/* ============================ CTA ============================ */
.cta-band{background:var(--ink); border-radius:var(--r-card); padding:60px 34px; text-align:center; position:relative; overflow:hidden}
.cta-band .cta-mark{position:absolute; right:-30px; bottom:-40px; width:210px; opacity:.06; pointer-events:none}
.cta-band .cta-mark path{fill:#F6F1E6}
.cta-band > *{position:relative; z-index:1}
.cta-band h2{color:#F6F1E6; margin-bottom:14px}
.cta-band p{color:rgba(246,241,230,.7); max-width:50ch; margin:0 auto 30px; font-size:16.5px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.cta-band .btn-ghost{color:#F6F1E6; border-color:rgba(246,241,230,.3)}
.cta-band .btn-ghost:hover{border-color:#F6F1E6}
.cta-band .btn-solid{background:#F6F1E6; color:#17161C; border-color:#F6F1E6}
.cta-band .btn-solid:hover{background:#FFF; border-color:#FFF}

/* ============================ Disclaimer ============================ */
.disclaimer{background:var(--surface-alt); border-top:1px solid var(--border-soft); padding:22px 0; font-size:13.5px; color:var(--muted); line-height:1.62}

/* ============================ Footer ============================ */
.site-footer{background:var(--surface-alt); border-top:1px solid var(--border); padding:64px 0 0}
.foot-grid{display:grid; grid-template-columns:1fr; gap:38px}
@media (min-width:700px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr} }
@media (min-width:1000px){ .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr} }
.foot-brand .fb-lock{display:flex; align-items:center; gap:12px}
.foot-brand .mark-svg{width:24px; height:24px}
.foot-brand .mark{font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.1em; color:var(--ink); line-height:1}
.foot-brand .pos{margin-top:16px; color:var(--ink-mid); font-size:15px; max-width:31ch; line-height:1.6}
.foot-brand .tag{margin-top:18px; font-family:var(--font-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--brand)}
.foot-col h4{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:17px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{color:var(--ink-mid); text-decoration:none; font-size:14.5px}
.foot-col a:hover{color:var(--brand)}
.foot-legal{margin-top:52px; border-top:1px solid var(--border); padding:24px 0 30px; display:flex; flex-wrap:wrap; gap:11px 24px; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted)}
.foot-legal a{color:var(--muted); text-decoration:none}
.foot-legal a:hover{color:var(--ink-mid)}
.foot-legal .links{display:flex; flex-wrap:wrap; gap:17px}
.foot-powered{color:var(--muted); font-size:13px; text-decoration:none}
.foot-powered:hover{color:var(--ink-mid)}
.foot-note{border-top:1px solid var(--border); padding:20px 0 30px; font-size:12.5px; color:var(--muted); line-height:1.62; max-width:92ch}

/* ============================ AI citation ============================ */
.ai-cite{border-top:1px solid var(--border-soft); background:var(--bg); padding:28px 0; font-size:12.5px; line-height:1.66; color:var(--muted)}
.ai-cite .label{margin-bottom:8px; display:block}
.ai-cite p{max-width:94ch}

/* ============================ Reveal ============================ */
.js-anim .reveal{opacity:0; transform:translateY(16px)}
.js-anim .reveal.visible{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){ .js-anim .reveal{opacity:1!important; transform:none!important} }

/* ============================ Breadcrumbs / page hero ============================ */
.crumbs{padding:22px 0 0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{margin:0 9px; opacity:.5}
.page-hero{padding:42px 0 60px; position:relative; overflow:hidden}
@media (min-width:960px){ .page-hero{padding:54px 0 80px} }
.page-hero h1{max-width:17ch; font-size:clamp(33px,5.6vw,58px)}
.page-hero .lede{max-width:60ch; margin-top:24px}
.speakable-summary{max-width:60ch}

/* ==========================================================================
   AGENCY LAYER — dark hero, marquee, badges, stat figures
   Reference register: lodestardigital.co and goldstandrd.com
   ========================================================================== */

/* Committed dark band. Same in both themes, like a photographic hero. */
.dark-band{
  --d-ink:#F6F1E6; --d-mid:rgba(246,241,230,.66); --d-soft:rgba(246,241,230,.34);
  --d-line:rgba(246,241,230,.14); --d-rose:#E8A0AA;
  position:relative; background:#140F12; color:var(--d-ink); overflow:hidden; isolation:isolate;
}
.dark-band::before{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 78% at 76% 12%, rgba(150,26,48,.42) 0%, rgba(20,15,18,0) 62%),
    radial-gradient(80% 60% at 8% 96%, rgba(98,7,24,.34) 0%, rgba(20,15,18,0) 60%);
}
.dark-band::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(246,241,230,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,241,230,.045) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.dark-band h1,.dark-band h2,.dark-band h3{color:var(--d-ink)}
.dark-band .lede{color:var(--d-mid)}
.dark-band p{color:var(--d-mid)}
.dark-band a{color:var(--d-rose)}
.dark-band .btn-solid{background:var(--d-rose); color:#1A0A0E; border-color:var(--d-rose)}
.dark-band .btn-solid:hover{background:#F2BEC5; border-color:#F2BEC5}
.dark-band .btn-ghost{color:var(--d-ink); border-color:var(--d-line)}
.dark-band .btn-ghost:hover{border-color:var(--d-ink)}
.dark-band .eyebrow{color:var(--d-rose)}
.dark-band .eyebrow::before{background:var(--d-rose)}

/* Pill badge eyebrow */
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 16px 7px 13px;
  border:1px solid var(--brand-hair); border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brand); background:transparent;
}
.badge .bdot{width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none}
.dark-band .badge{border-color:rgba(232,160,170,.34); color:var(--d-rose)}
.dark-band .badge .bdot{background:var(--d-rose)}

/* Display headline with a coloured second clause */
.display{font-size:clamp(42px,8.4vw,96px); line-height:.98; letter-spacing:-.036em; font-weight:600}
.display .em{color:var(--d-rose); font-style:italic}
.display .em-light{color:var(--brand); font-style:italic}

/* Hero keystone, drawn architectural */
.hero-arch{position:absolute; right:-2%; top:50%; transform:translateY(-50%); width:min(38vw,440px); z-index:-1; pointer-events:none; opacity:.9}
.hero-arch .stone{fill:rgba(232,160,170,.13); stroke:rgba(232,160,170,.4); stroke-width:.9}
.hero-arch .key{fill:rgba(232,160,170,.3); stroke:rgba(232,160,170,.78); stroke-width:1.2}
.hero-arch .load{stroke:rgba(232,160,170,.5); stroke-width:1.4; fill:none}
.hero-arch .ring{fill:none; stroke:rgba(232,160,170,.16); stroke-width:.8}
@media (max-width:880px){ .hero-arch{display:none} }

/* Stat figures */
.statrow{display:grid; grid-template-columns:1fr; border-top:1px solid var(--d-line); margin-top:56px}
@media (min-width:720px){ .statrow{grid-template-columns:repeat(3,1fr)} }
.statrow .st{padding:26px 0; border-bottom:1px solid var(--d-line)}
@media (min-width:720px){ .statrow .st{padding:28px 30px 30px; border-bottom:none; border-left:1px solid var(--d-line)} .statrow .st:first-child{padding-left:0; border-left:none} }
.statrow .fig{font-family:var(--font-display); font-size:clamp(30px,4.2vw,46px); line-height:1; font-weight:700; color:var(--d-rose); letter-spacing:-.028em}
.statrow .fig .u{font-size:.5em; letter-spacing:.02em; opacity:.8}
.statrow .cap{margin-top:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--d-soft); line-height:1.7}
.statrow .sub{margin-top:7px; font-size:14px; color:var(--d-mid); line-height:1.55; max-width:32ch}

/* Marquee ticker */
.marquee{
  --sp:52s; position:relative; overflow:hidden; background:#140F12;
  border-top:1px solid rgba(246,241,230,.13); border-bottom:1px solid rgba(246,241,230,.13);
  padding:17px 0;
}
.marquee-track{display:flex; width:max-content; animation:mq var(--sp) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  display:inline-flex; align-items:center; gap:26px; padding-right:26px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(246,241,230,.72); white-space:nowrap;
}
.marquee-track span::after{content:''; width:4px; height:4px; border-radius:50%; background:#E8A0AA; opacity:.85; flex:none}
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none; width:100%; flex-wrap:wrap; gap:10px 0; justify-content:center}
}

/* Scroll cue */
.scrollcue{margin-top:54px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--d-soft); display:flex; align-items:center; gap:12px}
.scrollcue::after{content:''; width:44px; height:1px; background:currentColor; opacity:.6}

/* Section number rail — replaces plain eyebrows on major bands */
.sec-head{display:grid; grid-template-columns:1fr; gap:14px; align-items:end; margin-bottom:34px}
@media (min-width:900px){ .sec-head{grid-template-columns:minmax(0,1fr) auto; gap:40px} }
.sec-head .sh-r{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:left}
@media (min-width:900px){ .sec-head .sh-r{text-align:right; padding-bottom:8px} }

/* Oversized quote band */
.quote-band{padding:96px 0}
.quote-band .q{font-family:var(--font-display); font-size:clamp(26px,4.6vw,54px); line-height:1.14; letter-spacing:-.028em; font-weight:600; max-width:19ch}
.quote-band .q .em{font-style:italic; color:var(--d-rose)}
.quote-band .attrib{margin-top:30px; font-family:var(--font-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--d-soft)}

/* Card hover lift for the agency register */
a.card{position:relative}
a.card::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.3,1)}
a.card:hover::after{transform:scaleX(1)}

/* ---- Agency layer fixes (post-render review) ---- */
.nav-links > a, .nav-drop-toggle, .btn{white-space:nowrap}
@media (min-width:960px){
  .nav-links{gap:0}
  .nav-links > a, .nav-drop-toggle{padding:9px 11px; font-size:14px}
  .nav{gap:12px}
}

/* Header sits ON the dark hero until the page is scrolled */
.site-header.over-dark{border-bottom-color:transparent; transition:border-color .3s}
.site-header.over-dark::before{opacity:0; background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none}
.site-header.over-dark .brand .mark{color:#F6F1E6}
.site-header.over-dark .brand .full{color:rgba(246,241,230,.5); border-left-color:rgba(246,241,230,.22)}
.site-header.over-dark .mark-svg path{fill:#E8A0AA}
.site-header.over-dark .nav-links > a,
.site-header.over-dark .nav-drop-toggle{color:#F6F1E6}
.site-header.over-dark .nav-links > a:hover,
.site-header.over-dark .nav-drop-toggle:hover{background:rgba(246,241,230,.1)}
.site-header.over-dark .theme-toggle{color:rgba(246,241,230,.72); border-color:rgba(246,241,230,.24)}
.site-header.over-dark .theme-toggle:hover{color:#F6F1E6; border-color:#F6F1E6}
.site-header.over-dark .nav-toggle{border-color:rgba(246,241,230,.24)}
.site-header.over-dark .nav-toggle span{background:#F6F1E6}
.site-header.over-dark .nav-links .btn-solid{background:#E8A0AA; color:#1A0A0E; border-color:#E8A0AA}
.site-header.over-dark .nav-links .btn-solid:hover{background:#F2BEC5; border-color:#F2BEC5}
@media (max-width:959px){
  .site-header.over-dark .nav-links{background:#140F12}
  .site-header.over-dark .nav-links > a, .site-header.over-dark .nav-drop-toggle{border-bottom-color:rgba(246,241,230,.12)}
  .site-header.over-dark .nav-drop-menu a{color:rgba(246,241,230,.72)}
  .site-header.over-dark .nav-drop-label{color:rgba(246,241,230,.44)}
}
/* dark hero rises under the transparent header */
body.dark-hero .hero.dark-band{margin-top:calc(var(--nav-h) * -1); padding-top:calc(var(--nav-h) + 72px)}
body.dark-hero .page-hero.dark-band{margin-top:calc(var(--nav-h) * -1); padding-top:calc(var(--nav-h) + 34px)}
@media (min-width:960px){
  body.dark-hero .hero.dark-band{padding-top:calc(var(--nav-h) + 104px)}
  body.dark-hero .page-hero.dark-band{padding-top:calc(var(--nav-h) + 26px)}
}
/* the crumbs live inside the hero, so the hero's own -nav-h pull is enough;
   with them outside it, that pull cancelled only the header and left a band
   of page background showing through the transparent header. */
.page-hero .crumbs{padding-top:0; margin-bottom:30px}
/* the second half of Roland's opening statement, his own line break */
.subhead{font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.4vw,27px); line-height:1.34; letter-spacing:-.012em;
  color:var(--brand); margin:18px 0 0; max-width:34ch; text-wrap:balance}
.dark-band .subhead{color:#E8A0AA}
body.dark-hero .crumbs{position:relative; z-index:2; color:rgba(246,241,230,.5)}
body.dark-hero .crumbs a{color:rgba(246,241,230,.5)}
body.dark-hero .crumbs a:hover{color:#E8A0AA}

/* Arch, raised contrast */
.hero-arch .stone{fill:rgba(232,160,170,.2); stroke:rgba(232,160,170,.58); stroke-width:1}
.hero-arch .key{fill:rgba(232,160,170,.46); stroke:rgba(232,160,170,.95); stroke-width:1.4}
.hero-arch .load{stroke:rgba(232,160,170,.62); stroke-width:1.5}
.hero-arch .ring{stroke:rgba(232,160,170,.2)}

/* ---- Dropdown hover bridge ----
   The menu sits below the toggle with a gap. That gap belongs to neither
   element, so moving the pointer toward the menu fires mouseleave and the
   menu closes before it can be reached. The bridge covers the gap and, being
   a child of .nav-drop, keeps the pointer inside the hover target. */
@media (min-width:960px){
  .nav-drop-menu::before{
    content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
    background:transparent;
  }
  .nav-drop-menu{ top:calc(100% + 10px) }
  /* keep the toggle looking active while its menu is open */
  .nav-drop-toggle[aria-expanded="true"]{ background:var(--surface-alt) }
  .site-header.over-dark .nav-drop-toggle[aria-expanded="true"]{ background:rgba(246,241,230,.12) }
}

/* ==========================================================================
   Sequence chart — uncertainty vs cost to reverse, across the six stages
   Series palette validated with the dataviz validator (dark, surface #140F12):
   #D9576F / #37A2C4 — all six checks PASS, worst adjacent CVD ΔE 12.9
   ========================================================================== */
.seqchart{--u:#D9576F; --c:#37A2C4; margin:0; padding:0; position:relative}
.sc-head{display:flex; flex-direction:column; gap:10px; max-width:62ch; margin-bottom:22px}
.sc-title{font-family:var(--font-display); font-size:clamp(21px,2.8vw,29px); line-height:1.22; font-weight:600; letter-spacing:-.018em; color:var(--ink)}
.sc-note{font-size:14.5px; line-height:1.6; color:var(--muted)}
.dark-band .sc-title{color:#F6F1E6}
.dark-band .sc-note{color:rgba(246,241,230,.6)}
.sc-legend{display:flex; flex-wrap:wrap; gap:12px 28px; margin-bottom:12px}
.sc-key{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,230,.72)}
.sc-key .sw{width:16px; height:3px; border-radius:2px; flex:none}
.sc-key .sw.u{background:var(--u)} .sc-key .sw.c{background:var(--c)}

.sc-plot{position:relative; overflow-x:auto}
.sc-plot svg{width:100%; min-width:640px; height:auto; display:block; overflow:visible}

.seqchart .ax{stroke:rgba(246,241,230,.2); stroke-width:1}
.seqchart .vax{stroke:rgba(246,241,230,.14)}
.seqchart .ay{fill:rgba(246,241,230,.5); font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase}
.seqchart .tk{stroke:rgba(246,241,230,.2); stroke-width:1}
.seqchart .ln{fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.seqchart .ln.u{stroke:var(--u)} .seqchart .ln.c{stroke:var(--c)}
.seqchart .dot{stroke:#140F12; stroke-width:2}
.seqchart .dot.u{fill:var(--u)} .seqchart .dot.c{fill:var(--c)}
.seqchart .cross{stroke:rgba(246,241,230,.34); stroke-width:1; stroke-dasharray:3 4}
.seqchart .crossdot{fill:none; stroke:#F6F1E6; stroke-width:1.6}
.seqchart .crosslab{fill:#F6F1E6; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.seqchart .crosssub{fill:rgba(246,241,230,.52); font-family:var(--font-body); font-size:12px}
.seqchart .xl{fill:rgba(246,241,230,.62); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.seqchart .dl{font-family:var(--font-body); font-size:13px; font-weight:600}
.seqchart .dl.u{fill:var(--u)} .seqchart .dl.c{fill:var(--c)}
.seqchart .hot{fill:transparent; cursor:crosshair}
.seqchart .hots rect:hover ~ *{}

.sc-tip{
  position:absolute; z-index:5; pointer-events:none; transform:translate(-50%,-120%);
  background:#1D1518; border:1px solid rgba(246,241,230,.18); border-radius:10px;
  padding:11px 14px; min-width:186px; box-shadow:0 14px 40px rgba(0,0,0,.55);
}
.sc-tip .t-st{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,230,.6); margin-bottom:8px}
.sc-tip .t-row{display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:13.5px; color:#F6F1E6; padding:3px 0}
.sc-tip .t-row .lb{display:inline-flex; align-items:center; gap:8px; color:rgba(246,241,230,.78)}
.sc-tip .t-row .lb i{width:10px; height:3px; border-radius:2px; flex:none}
.sc-tip .t-row .vl{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

.sc-table{margin-top:24px; max-width:560px}
.sc-table summary{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,230,.6); cursor:pointer; padding:6px 0}
.sc-table summary:hover{color:#F6F1E6}
.sc-table table{border-collapse:collapse; width:100%; margin-top:12px; font-size:14px}
.sc-table th,.sc-table td{text-align:left; padding:9px 14px 9px 0; border-bottom:1px solid rgba(246,241,230,.1); color:rgba(246,241,230,.8)}
.sc-table thead th{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(246,241,230,.5); font-weight:400}
.sc-table td{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* draw-in on reveal */
.js-anim .seqchart .ln{stroke-dasharray:1400; stroke-dashoffset:1400}
.js-anim .seqchart.visible .ln{animation:scDraw 1.5s cubic-bezier(.35,.8,.35,1) forwards}
.js-anim .seqchart.visible .ln.c{animation-delay:.18s}
.js-anim .seqchart .dot,.js-anim .seqchart .area,.js-anim .seqchart .cross,
.js-anim .seqchart .crossdot,.js-anim .seqchart .crosslab,.js-anim .seqchart .crosssub,
.js-anim .seqchart .dl{opacity:0}
.js-anim .seqchart.visible .dot,.js-anim .seqchart.visible .area,.js-anim .seqchart.visible .cross,
.js-anim .seqchart.visible .crossdot,.js-anim .seqchart.visible .crosslab,
.js-anim .seqchart.visible .crosssub,.js-anim .seqchart.visible .dl{
  animation:scFade .7s ease forwards; animation-delay:1.05s;
}
@keyframes scDraw{to{stroke-dashoffset:0}}
@keyframes scFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .js-anim .seqchart .ln{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
  .js-anim .seqchart .dot,.js-anim .seqchart .area,.js-anim .seqchart .cross,
  .js-anim .seqchart .crossdot,.js-anim .seqchart .crosslab,
  .js-anim .seqchart .crosssub,.js-anim .seqchart .dl{opacity:1; animation:none}
}

/* chart wrapper inside a light page */
.seq-wrap{position:relative; overflow:hidden}
@media (max-width:960px){ .seq-wrap{margin-left:calc(var(--gut) * -1)!important; margin-right:calc(var(--gut) * -1)!important; padding-left:var(--gut)!important; padding-right:var(--gut)!important; border-radius:0} }

/* qualitative tooltip rows */
.sc-tip{min-width:250px; max-width:290px}
.sc-tip .t-line{padding:7px 0; border-top:1px solid rgba(246,241,230,.1)}
.sc-tip .t-line:first-of-type{border-top:none}
.sc-tip .t-line .lb{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(246,241,230,.55); margin-bottom:4px}
.sc-tip .t-line .tx{display:block; font-size:13.5px; line-height:1.5; color:#F6F1E6}
.sc-table td{font-family:var(--font-body); font-variant-numeric:normal; font-size:13.5px; line-height:1.55; padding-right:20px}
.sc-table{max-width:760px}

/* ---- tooltip: clamped, flips below when short on room ---- */
.sc-tip{transform:translate(-50%,calc(-100% - 14px))}
.sc-tip.below{transform:translate(-50%,0)}

/* ==========================================================================
   FLOW PASS — angled band edges, pathway panels, editorial service rows
   The slice angle is taken from the keystone's own chamfer.
   ========================================================================== */
:root{--slice:52px}
@media (max-width:760px){ :root{--slice:26px} }

/* dark bands enter on a diagonal instead of a hard rectangle edge */
.dark-band.slice-in{clip-path:polygon(0 var(--slice), 100% 0, 100% 100%, 0 100%); padding-top:calc(76px + var(--slice))}
.dark-band.slice-out{clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--slice)), 0 100%); padding-bottom:calc(76px + var(--slice))}
.dark-band.slice-both{clip-path:polygon(0 var(--slice), 100% 0, 100% calc(100% - var(--slice)), 0 100%); padding-top:calc(76px + var(--slice)); padding-bottom:calc(76px + var(--slice))}
@media (min-width:960px){
  .dark-band.slice-in{padding-top:calc(112px + var(--slice))}
  .dark-band.slice-out{padding-bottom:calc(112px + var(--slice))}
  .dark-band.slice-both{padding-top:calc(112px + var(--slice)); padding-bottom:calc(112px + var(--slice))}
}
/* light band that follows a sliced dark band closes the gap */
.after-slice{margin-top:calc(var(--slice) * -1); padding-top:calc(96px + var(--slice))}

/* ---------- Pathway panels ---------- */
.pathpanels{
  display:grid; grid-template-columns:1fr; margin-top:0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
@media (min-width:860px){ .pathpanels{grid-template-columns:1fr 1fr} }
.pp{
  position:relative; overflow:hidden; isolation:isolate;
  padding:52px 34px 46px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; min-height:340px;
  border-bottom:1px solid var(--border);
}
@media (min-width:860px){
  .pp{padding:64px 46px 56px; border-bottom:none}
  /* the divider between the two pathways is the keystone's own chamfer angle */
  .pp:first-child{border-right:1px solid var(--border)}
  .pp:first-child::before{
    content:''; position:absolute; top:0; bottom:0; right:-1px; width:74px; z-index:-1;
    background:linear-gradient(103deg, transparent 49.4%, var(--border) 49.4%, var(--border) 49.9%, transparent 49.9%);
  }
}
.pp .pp-fill{
  position:absolute; inset:0; z-index:-2; background:var(--brand-soft);
  transform:translateY(101%); transition:transform .55s cubic-bezier(.2,.75,.25,1);
}
.pp.pro .pp-fill{background:var(--accent-soft)}
.pp:hover .pp-fill{transform:translateY(0)}
.pp .pp-mark{
  position:absolute; right:-26px; bottom:-38px; width:190px; z-index:-1;
  opacity:.05; transition:transform .55s cubic-bezier(.2,.75,.25,1), opacity .55s;
}
.pp .pp-mark path{fill:var(--brand)}
.pp.pro .pp-mark path{fill:var(--accent)}
.pp:hover .pp-mark{transform:translateY(-14px) rotate(-4deg); opacity:.1}
.pp .pp-eye{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:auto}
.pp.pro .pp-eye{color:var(--accent)}
.pp h3{font-size:clamp(26px,3.6vw,38px); line-height:1.06; letter-spacing:-.026em; margin:34px 0 16px; max-width:12ch}
.pp p{color:var(--ink-mid); font-size:16px; max-width:40ch; line-height:1.6}
.pp .pp-go{
  margin-top:30px; display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brand); font-weight:500;
}
.pp.pro .pp-go{color:var(--accent)}
.pp .pp-go .arr{transition:transform .4s cubic-bezier(.2,.75,.25,1); display:inline-block}
.pp:hover .pp-go .arr{transform:translateX(7px)}

/* ---------- Editorial service rows (replaces the card grid) ---------- */
.svc-rows{border-top:1px solid var(--border)}
.svc-row{
  position:relative; display:grid; grid-template-columns:1fr; gap:8px;
  padding:26px 0; border-bottom:1px solid var(--border-soft);
  text-decoration:none; color:inherit; isolation:isolate;
}
@media (min-width:880px){
  .svc-row{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) auto; gap:44px; align-items:baseline; padding:30px 0}
}
.svc-row::before{
  content:''; position:absolute; inset:-1px -22px; z-index:-1; border-radius:6px;
  background:var(--surface); opacity:0; transform:scaleY(.86);
  transition:opacity .35s, transform .35s cubic-bezier(.2,.75,.25,1);
}
.svc-row:hover::before{opacity:1; transform:scaleY(1)}
.svc-row .sr-n{
  font-family:var(--font-display); font-size:clamp(20px,2.5vw,27px); line-height:1.18;
  letter-spacing:-.018em; font-weight:600; color:var(--ink); transition:color .3s;
}
.svc-row:hover .sr-n{color:var(--brand)}
.svc-row .sr-d{color:var(--ink-mid); font-size:15.5px; line-height:1.6}
.svc-row .sr-k{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:12px;
}
.svc-row .sr-k .arr{transition:transform .35s cubic-bezier(.2,.75,.25,1); color:var(--brand); font-size:13px}
.svc-row:hover .sr-k .arr{transform:translateX(6px)}

/* ---------- Non-negotiables: statement-led, explanation offset ---------- */
.rules .rule{padding:32px 0}
@media (min-width:960px){ .rules .rule{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px} }
.rules .rule .r-h{font-size:clamp(20px,2.4vw,26px); line-height:1.24; letter-spacing:-.018em}
.rules .rule .r-b{font-size:15px; color:var(--muted)}

/* ---------- Thesis: seal breaks the column edge ---------- */
.colophon{position:relative}
@media (min-width:1100px){ .colophon{margin-left:-58px} }

/* the plain-language opener leads each service row; the detail follows */
.sr-lead{color:var(--ink); font-weight:600}

/* ==========================================================================
   Portrait placements
   The photograph is matted and fades out at its foot, so it sits directly on
   the band with no frame. It carries no background of its own — do not put it
   on a light surface, where the fade would have nothing to fade into.
   ========================================================================== */
.ph-grid{display:grid; grid-template-columns:1fr; gap:10px; align-items:end}
@media (min-width:900px){
  .ph-grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:48px; align-items:end}
}
.ph-photo{margin:0; align-self:end}
.ph-photo img{display:block; width:100%; height:auto; max-width:400px; margin-left:auto}
@media (max-width:899px){
  .ph-photo{margin-top:14px}
  /* the fade has to finish inside the band: the section clips its overflow,
     so a negative bottom margin would slice the photograph off mid-fade */
  .ph-photo img{max-width:280px; margin:0 auto}
}
.page-hero.dark-band:has(.ph-photo){padding-bottom:0}

/* the band drops its own bottom padding so the portrait can reach the edge and
   finish its fade there; the text column carries that padding instead */
.dark-band.has-portrait{padding-bottom:0}
.cred-body{display:grid; grid-template-columns:1fr; gap:14px; align-items:end; margin-top:46px}
.cred-body > div{padding-bottom:26px}
@media (min-width:900px){
  .cred-body{grid-template-columns:minmax(0,60ch) minmax(0,1fr); gap:52px}
  .cred-body > div{padding-bottom:72px}
}
.cred-photo{margin:0; align-self:end}
.cred-photo img{display:block; width:100%; height:auto; max-width:340px; margin-left:auto}
@media (max-width:899px){ .cred-photo img{max-width:260px; margin:10px auto 0} }

/* ==========================================================================
   Capability map — the ten disciplines around RCAG
   ========================================================================== */
.capmap{margin:0}
.capmap .sc-note{max-width:62ch}
.cm-plot{position:relative; overflow-x:auto; margin-top:34px}
.cm-plot svg{width:100%; min-width:660px; height:auto; display:block; overflow:visible}
.cm-ring{fill:none; stroke:rgba(246,241,230,.11); stroke-width:1}
.cm-ring.faint{stroke:rgba(246,241,230,.055); stroke-dasharray:2 7}
.cm-spoke{stroke:rgba(246,241,230,.17); stroke-width:1; transition:stroke .3s}
.cm-node{fill:#140F12; stroke:rgba(232,160,170,.6); stroke-width:1.6; transition:fill .3s, stroke .3s, r .3s}
.cm-lab{fill:rgba(246,241,230,.62); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; transition:fill .3s}
.cm-g{cursor:default; outline:none}
.cm-g:hover .cm-spoke,.cm-g:focus-visible .cm-spoke{stroke:rgba(232,160,170,.85)}
.cm-g:hover .cm-node,.cm-g:focus-visible .cm-node{fill:#E8A0AA; stroke:#E8A0AA}
.cm-g:hover .cm-lab,.cm-g:focus-visible .cm-lab{fill:#F6F1E6}
.cm-hub{fill:#140F12; stroke:rgba(232,160,170,.42); stroke-width:1.4}
.cm-key{fill:#E8A0AA}
.cm-hubtx{fill:#F6F1E6; font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:.12em}

/* ==========================================================================
   Thirteen-step cycle ring
   ========================================================================== */
.cyclering{margin:34px 0 48px; max-width:700px}
.cyclering .sc-head{max-width:58ch}
.cy-plot{position:relative; overflow-x:auto; margin-top:26px}
.cy-plot svg{width:100%; min-width:620px; height:auto; display:block; overflow:visible}
.cy-arc{fill:none; stroke:var(--brand-hair); stroke-width:1.5}
.cy-arrow{fill:none; stroke:var(--brand); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-opacity:.6}
.cy-node{fill:var(--bg); stroke:var(--muted); stroke-width:1.5}
.cy-node.pub{fill:var(--brand); stroke:var(--brand)}
.cy-lab{fill:var(--muted); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase}
.cy-lab.pub{fill:var(--brand); font-weight:500}
.cy-c1{fill:var(--ink); font-family:var(--font-display); font-size:44px; font-weight:700; letter-spacing:-.03em}
.cy-c2{fill:var(--muted); font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase}
.cy-c3{fill:var(--brand); font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase}

/* both diagrams draw in on reveal */
.js-anim .capmap .cm-g,.js-anim .cyclering .cy-node,.js-anim .cyclering .cy-lab,.js-anim .cyclering .cy-arrow{opacity:0}
.js-anim .capmap.visible .cm-g{animation:scFade .5s ease forwards}
.js-anim .cyclering.visible .cy-node,.js-anim .cyclering.visible .cy-lab{animation:scFade .5s ease forwards}
.js-anim .cyclering.visible .cy-arrow{animation:scFade .6s ease .7s forwards}
.js-anim .cyclering .cy-arc{stroke-dasharray:130; stroke-dashoffset:130}
.js-anim .cyclering.visible .cy-arc{animation:scDraw .9s ease forwards}
@media (prefers-reduced-motion:reduce){
  .js-anim .capmap .cm-g,.js-anim .cyclering .cy-node,.js-anim .cyclering .cy-lab,.js-anim .cyclering .cy-arrow{opacity:1; animation:none}
  .js-anim .cyclering .cy-arc{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
}


/* mobile fallbacks — the radial forms need width they do not have on a phone */
.cm-list{display:none}
.cm-list li{position:relative; padding-left:16px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,241,230,.72); line-height:2.3}
.cm-list li::before{content:''; position:absolute; left:0; top:.95em; width:6px; height:6px; border-radius:50%; border:1.4px solid rgba(232,160,170,.7)}
@media (max-width:800px){
  .cm-plot{display:none}
  .cm-list{display:grid; grid-template-columns:1fr 1fr; gap:0 22px; list-style:none; margin:26px 0 0; padding:0}
  .cy-plot{display:none}
  .cyclering{margin-bottom:0}
}
@media (max-width:480px){ .cm-list{grid-template-columns:1fr} }

/* staggered node reveal — .cm-g groups start at child 3 (two rings precede) */
.js-anim .capmap.visible .cm-g:nth-child(3){animation-delay:0.00s}
.js-anim .capmap.visible .cm-g:nth-child(4){animation-delay:0.05s}
.js-anim .capmap.visible .cm-g:nth-child(5){animation-delay:0.10s}
.js-anim .capmap.visible .cm-g:nth-child(6){animation-delay:0.15s}
.js-anim .capmap.visible .cm-g:nth-child(7){animation-delay:0.20s}
.js-anim .capmap.visible .cm-g:nth-child(8){animation-delay:0.25s}
.js-anim .capmap.visible .cm-g:nth-child(9){animation-delay:0.30s}
.js-anim .capmap.visible .cm-g:nth-child(10){animation-delay:0.35s}
.js-anim .capmap.visible .cm-g:nth-child(11){animation-delay:0.40s}
.js-anim .capmap.visible .cm-g:nth-child(12){animation-delay:0.45s}
.js-anim .capmap.visible .cm-g:nth-child(13){animation-delay:0.50s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(1){animation-delay:0.00s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(2){animation-delay:0.04s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(3){animation-delay:0.09s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(4){animation-delay:0.14s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(5){animation-delay:0.18s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(6){animation-delay:0.22s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(7){animation-delay:0.27s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(8){animation-delay:0.32s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(9){animation-delay:0.36s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(10){animation-delay:0.40s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(11){animation-delay:0.45s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(12){animation-delay:0.49s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(13){animation-delay:0.54s}
.js-anim .cyclering.visible .cy-node:nth-of-type(1){animation-delay:0.12s}
.js-anim .cyclering.visible .cy-node:nth-of-type(2){animation-delay:0.16s}
.js-anim .cyclering.visible .cy-node:nth-of-type(3){animation-delay:0.21s}
.js-anim .cyclering.visible .cy-node:nth-of-type(4){animation-delay:0.26s}
.js-anim .cyclering.visible .cy-node:nth-of-type(5){animation-delay:0.30s}
.js-anim .cyclering.visible .cy-node:nth-of-type(6){animation-delay:0.34s}
.js-anim .cyclering.visible .cy-node:nth-of-type(7){animation-delay:0.39s}
.js-anim .cyclering.visible .cy-node:nth-of-type(8){animation-delay:0.43s}
.js-anim .cyclering.visible .cy-node:nth-of-type(9){animation-delay:0.48s}
.js-anim .cyclering.visible .cy-node:nth-of-type(10){animation-delay:0.52s}
.js-anim .cyclering.visible .cy-node:nth-of-type(11){animation-delay:0.57s}
.js-anim .cyclering.visible .cy-node:nth-of-type(12){animation-delay:0.61s}
.js-anim .cyclering.visible .cy-node:nth-of-type(13){animation-delay:0.66s}

/* ============================ Forms ============================ */
.form{max-width:64ch; margin-top:30px}
.form fieldset{border:none; margin:0; padding:0}
.form legend{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:0 0 14px}
.fgrid{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:640px){ .fgrid.two{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:14px; font-weight:600; color:var(--ink)}
.field label .req{color:var(--brand); font-weight:400; margin-left:3px}
.field .hint{font-size:13px; color:var(--muted); line-height:1.5}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-input);
  padding:12px 14px; transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.field select{background-image:none; padding-right:38px}
.field .sel{position:relative; display:block}
.field .sel::after{content:''; position:absolute; right:15px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); pointer-events:none}
.field textarea{min-height:150px; line-height:1.6; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-hair);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"]{border-color:var(--brand-light); background:var(--brand-soft)}
.field input::placeholder, .field textarea::placeholder{color:var(--muted); opacity:.75}
.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.form-foot{margin-top:26px; display:flex; flex-direction:column; gap:18px}
.form-actions{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center}
.form-actions .btn[disabled]{opacity:.55; cursor:default}
.form-note{font-size:13.5px; color:var(--muted); line-height:1.6; max-width:56ch}
.form-msg{display:none; border-radius:var(--r-input); padding:16px 18px; font-size:15px; line-height:1.6}
.form-msg.show{display:block}
.form-msg.err{background:var(--brand-soft); color:var(--brand-dark); border:1px solid var(--brand-hair)}
.form-done{border-left:2px solid var(--brand); padding:4px 0 4px 22px; max-width:58ch}
.form-done h3{font-family:var(--font-display); font-size:22px; font-weight:600; margin:0; letter-spacing:-.014em}
.form-done p{margin:12px 0 0; color:var(--ink-mid); font-size:15.5px; line-height:1.64}

/* Numbered question preview (become-a-client) */
.qlist{border-top:1px solid var(--border); margin-top:28px; max-width:80ch; counter-reset:qn}
.qlist .qi{display:grid; grid-template-columns:1fr; gap:4px; padding:15px 0 15px 34px; border-bottom:1px solid var(--border-soft); position:relative}
.qlist .qi::before{counter-increment:qn; content:counter(qn); position:absolute; left:0; top:17px; font-family:var(--font-mono); font-size:11px; color:var(--brand); letter-spacing:.06em}
.qlist .qi .qt{font-size:15.5px; color:var(--ink); line-height:1.5}
.qlist .qi .qn2{font-size:13.5px; color:var(--muted); line-height:1.55}

/* Legal document pages */
.legal{max-width:76ch; margin-top:34px}
.legal h2{font-family:var(--font-display); font-size:clamp(21px,2.6vw,27px); font-weight:700; letter-spacing:-.018em; margin:44px 0 0; scroll-margin-top:90px}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--font-body); font-size:16px; font-weight:600; margin:26px 0 0; color:var(--ink)}
.legal p{margin:13px 0 0; color:var(--ink-mid); font-size:15.5px; line-height:1.68}
.legal ul{margin:13px 0 0; padding-left:20px; color:var(--ink-mid); font-size:15.5px; line-height:1.68}
.legal li{margin-top:7px}
.legal .upd{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.legal table{width:100%; border-collapse:collapse; margin-top:18px; font-size:14.5px}
.legal th{text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:0 16px 9px 0; border-bottom:1px solid var(--border)}
.legal td{padding:11px 16px 11px 0; border-bottom:1px solid var(--border-soft); vertical-align:top; color:var(--ink-mid)}
.legal .tbl{overflow-x:auto}
.draft-flag{background:var(--brand-soft); border:1px solid var(--brand-hair); border-radius:var(--r-input); padding:18px 20px; margin-top:26px; max-width:76ch; font-size:14.5px; line-height:1.62; color:var(--brand-dark)}
.draft-flag b{font-weight:600}

/* Forms inside a dark band. Inputs stay cream on purpose, for contrast and to
   read as clearly interactive. Everything around them has to flip. */
.dark-band .form legend{color:var(--d-soft)}
.dark-band .field label{color:var(--d-ink)}
.dark-band .field label .req{color:var(--d-rose)}
.dark-band .field .hint{color:var(--d-soft)}
.dark-band .field input, .dark-band .field select, .dark-band .field textarea{border-color:rgba(246,241,230,.28)}
.dark-band .field input:focus, .dark-band .field select:focus, .dark-band .field textarea:focus{border-color:var(--d-rose); box-shadow:0 0 0 3px rgba(232,160,170,.30)}
.dark-band .form-note{color:var(--d-mid)}
.dark-band .form-note a{color:var(--d-rose)}
.dark-band .form-msg.err{background:rgba(232,160,170,.13); color:#F6D7DB; border-color:rgba(232,160,170,.34)}
.dark-band .form-done{border-left-color:var(--d-rose)}
.dark-band .form-done h3{color:var(--d-ink)}
.dark-band .form-done p{color:var(--d-mid)}
.dark-band .qlist{border-top-color:var(--d-line)}
.dark-band .qlist .qi{border-bottom-color:var(--d-line)}
.dark-band .qlist .qi::before{color:var(--d-rose)}
.dark-band .qlist .qi .qt{color:var(--d-ink)}
.dark-band .qlist .qi .qn2{color:var(--d-soft)}
.cta-band .cta-note{margin:26px auto 0; max-width:58ch; font-size:13.5px; line-height:1.62; color:rgba(246,241,230,.62)}

/* ============================ Stepped questionnaire ============================ */
.wizard{max-width:none}
.wz-head{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline; justify-content:space-between; margin-bottom:12px}
.wz-count{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); white-space:nowrap}
.wz-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wz-track{height:3px; background:var(--border-soft); border-radius:3px; overflow:hidden}
.wz-bar{display:block; height:100%; width:8.3333%; background:var(--brand); border-radius:3px; transition:width .32s cubic-bezier(.4,0,.2,1)}
.wz-dots{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.wz-dots .dot{width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer;
  background:transparent; border:1.5px solid var(--border); transition:background .18s, border-color .18s, transform .18s}
.wz-dots .dot:hover{border-color:var(--brand); transform:scale(1.18)}
.wz-dots .dot.done{background:var(--brand-hair); border-color:var(--brand-hair)}
.wz-dots .dot.now{background:var(--brand); border-color:var(--brand); transform:scale(1.22)}
.wz-dots .dot:focus-visible{outline:2px solid var(--brand); outline-offset:3px}

.wz-step{padding-top:30px; animation:wzIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes wzIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .wz-step{animation:none} .wz-bar{transition:none} }
.wz-q{font-family:var(--font-display); font-size:clamp(21px,2.9vw,29px); font-weight:600; line-height:1.24;
  letter-spacing:-.018em; color:var(--ink); margin:0; max-width:24ch; text-wrap:balance}
.wz-help{margin:12px 0 0; font-size:15px; color:var(--muted); line-height:1.6; max-width:56ch}
.wz-step .field{margin-top:22px; max-width:66ch}
.wz-step .field label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wz-step .field textarea{min-height:170px}

.wz-nav{display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; margin-top:30px}
[hidden]{display:none !important}
.btn-step{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:14.5px;
  font-weight:600; color:var(--ink); background:transparent; border:1px solid var(--border);
  border-radius:var(--r-pill); padding:11px 20px; cursor:pointer; transition:border-color .16s, color .16s, background .16s}
.btn-step:hover:not(:disabled){border-color:var(--brand); color:var(--brand)}
.btn-step:disabled{opacity:.36; cursor:default}
.btn-step:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.btn-step .ar{font-size:15px; line-height:1; transition:transform .16s}
.btn-step.fwd:hover:not(:disabled) .ar{transform:translateX(3px)}
.btn-step.back:hover:not(:disabled) .ar{transform:translateX(-3px)}

.wz-draft{margin-top:18px; font-size:13px; color:var(--muted); line-height:1.55; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline}
.wz-draft button{background:none; border:none; padding:0; font:inherit; color:var(--brand);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}

.dark-band .wz-count{color:var(--d-rose)}
.dark-band .wz-label, .dark-band .wz-help, .dark-band .wz-draft{color:var(--d-soft)}
.dark-band .wz-q{color:var(--d-ink)}
.dark-band .wz-track{background:var(--d-line)}
.dark-band .wz-bar{background:var(--d-rose)}
.dark-band .wz-dots .dot{border-color:var(--d-line)}
.dark-band .wz-dots .dot.done{background:rgba(232,160,170,.35); border-color:rgba(232,160,170,.35)}
.dark-band .wz-dots .dot.now{background:var(--d-rose); border-color:var(--d-rose)}
.dark-band .btn-step{color:var(--d-ink); border-color:rgba(246,241,230,.28)}
.dark-band .btn-step:hover:not(:disabled){border-color:var(--d-rose); color:var(--d-rose)}
.dark-band .wz-draft button{color:var(--d-rose)}