/* ============================================================
   Omnexa · Roster identity, turned up · v4 (2026-07-03)
   Canonical: proposals/omnexa/brand/brand-kit-v2-tokens.md
   (owner Brand Kit v2.0). White/Cloud/Ink + department colors
   that belong to the agents. Core Blue = the only action color.
   Figtree = every voice; IBM Plex Mono only when the system speaks.
   ============================================================ */

/* Self-hosted fonts (latin) */
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:300 900;
  font-display:swap; src:url('/assets/fonts/figtree-latin.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:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/assets/fonts/plexmono-400-latin.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:'IBM Plex Mono'; font-style:normal; font-weight:500;
  font-display:swap; src:url('/assets/fonts/plexmono-500-latin.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;
}

:root{
  --ink:#1F2330; --blue:#2A5CFF; --white:#FFFFFF; --cloud:#F6F7F9;
  --duty:#1FA97C;
  --text:#1F2330; --muted:#5C6670; --line:#E4E8EC;
  --blue-press:#1F49D6;
  --c-finance:#FFC838; --c-sales:#00C275; --c-support:#00B8D9;
  --c-marketing:#FF7AB6; --c-hr:#9D7BFF; --c-operations:#FF9D3C;
  --font-sans:'Figtree', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --text-hero:clamp(2.6rem, 1rem + 5.4vw, 5.2rem);
  --text-h2:clamp(1.7rem, 1.15rem + 1.9vw, 2.5rem);
  --text-lead:clamp(1.02rem, .96rem + .35vw, 1.18rem);
  --space-section:clamp(4rem, 3rem + 4vw, 8rem);
  --maxw:1180px; --radius:16px; --radius-sm:10px;
  --dur:.5s; --ease:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(16,20,24,.05), 0 6px 18px rgba(16,20,24,.05);
  --shadow-lg:0 24px 56px -24px rgba(16,20,24,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans); font-weight:500; font-size:1.05rem; line-height:1.6;
  color:var(--text); background:var(--white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-sans); color:var(--ink); line-height:1.06;
  letter-spacing:-.02em; margin:0}
h1{font-size:var(--text-hero); font-weight:800}
h2{font-size:var(--text-h2); font-weight:700}
h3{font-size:1.2rem; font-weight:700}
p{margin:0}
a{color:var(--ink); text-decoration:none}
img,svg{display:block; max-width:100%}
ul{margin:0; padding:0}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px}
::selection{background:var(--blue); color:#fff}

#apply{scroll-margin-top:90px}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem, .5rem + 3vw, 3rem)}
.section{padding-block:var(--space-section)}
.section-head{max-width:640px; margin-bottom:clamp(2rem, 1.5rem + 2vw, 3.2rem)}
.section-lead{font-size:var(--text-lead); color:var(--muted); margin-top:1rem}
.lede{font-size:var(--text-lead); color:var(--muted)}

/* machine voice */
.eyebrow{font-family:var(--font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem}
.mono{font-family:var(--font-mono)}
.status{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--muted); display:inline-flex; align-items:center; gap:.45em; text-transform:uppercase}
.status .dot{width:.55em; height:.55em; border-radius:50%; background:var(--duty); flex:0 0 auto}
.tags{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted)}

/* the mark (inline svg uses currentColor for agent dots; core stays Core Blue) */
.mark{width:1.3em; height:1.3em; flex:0 0 auto}

/* buttons — Core Blue reserved for ONE primary action per view */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans);
  font-weight:700; font-size:.96rem; border-radius:999px; padding:.85rem 1.6rem;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform var(--dur) var(--ease), background .25s, border-color .25s, color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-press)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:#232A31}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:var(--cloud)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ghost.on-grad{border-color:rgba(255,255,255,.4); color:#fff}
.btn-ghost.on-grad:hover{border-color:#fff}
.arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* legacy chip → quiet mono tag */
.chip{display:inline-block; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; padding:.3rem .6rem}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; min-height:70px}
.wordmark{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-sans);
  font-weight:700; font-size:1.3rem; letter-spacing:-.02em; color:var(--ink)}
.nav-links{display:flex; align-items:center; gap:1.6rem}
.nav-links .lnk{font-weight:500; font-size:.95rem; color:var(--text); position:relative}
.nav-links .lnk::after{content:""; position:absolute; inset-inline:0; bottom:-6px; height:2px;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease)}
.nav-links .lnk:hover::after, .nav-links .lnk.active::after{transform:scaleX(1)}
.nav-cta{padding:.6rem 1.25rem; font-size:.9rem}
.nav-toggle{display:none; background:none; border:0; padding:.6rem; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;
  transition:transform .3s var(--ease), opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero — white, warm, department dots (kit §06) ---------- */
.hero{background:var(--white); color:var(--ink); border-bottom:1px solid var(--line);
  padding-block:clamp(4rem, 3rem + 4.5vw, 8rem) clamp(3.5rem, 2.5rem + 3.5vw, 6rem)}
.hero h1{color:var(--ink); font-weight:900}
.hero h1 .blue, .cta-band h2 .blue{color:var(--blue)}
.hero .lede{color:var(--muted); max-width:540px; margin-top:1.4rem}
.hero .actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}
.dept-dots{display:flex; gap:.55rem; margin-top:2.4rem}
.dept-dots span{width:14px; height:14px; border-radius:50%}
.trust{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.6rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.trust .chip{border:0; padding:0; color:var(--muted); font-size:.72rem; letter-spacing:.1em}

.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items:center}
.hero-grid h1{max-width:none; font-size:clamp(2.6rem, 1rem + 4.6vw, 4.9rem)}
.hero-globe{position:relative; width:100%; aspect-ratio:1/1; max-height:560px; touch-action:pan-y}
.hero-globe canvas{position:absolute; inset:0; width:100%; height:100%}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-globe{aspect-ratio:auto; height:320px; max-width:420px; margin-inline:auto}
}

/* inner page hero — white, quiet */
.phero{background:var(--white); border-bottom:1px solid var(--line);
  padding-block:clamp(4rem, 3rem + 3.5vw, 6.5rem) clamp(2.6rem, 2rem + 2vw, 4rem)}
.phero h1{font-size:clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem)}
.phero .lede{max-width:620px; margin-top:1.2rem}

/* ---------- persona cards (index roster — staff cards) ---------- */
.roster-track{display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw, 300px);
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.4rem .2rem 1.4rem;
  scrollbar-width:none}
.roster-track::-webkit-scrollbar{display:none}
.roster-track > *{scroll-snap-align:start}
.roster-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.1rem}

.persona-card{position:relative; overflow:hidden; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); height:432px;
  padding:0; cursor:pointer; text-align:start;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color .25s}
.persona-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);
  border-color:#D5DBE1}
.pc-mascot{aspect-ratio:1/1; width:100%; overflow:hidden}
.pc-mascot img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur) var(--ease)}
.persona-card:hover .pc-mascot img{transform:scale(1.04)}
.pc-mascot.is-custom{display:flex; align-items:center; justify-content:center;
  background:var(--cloud)}
.pc-mascot.is-custom img{width:44%; height:auto}
.pc-bar{padding:.9rem 1.1rem; display:flex; align-items:center; justify-content:space-between;
  gap:.6rem}
.persona-card[data-dept="finance"] .pc-dept{color:#C79310}
.persona-card[data-dept="sales"] .pc-dept{color:#009459}
.persona-card[data-dept="support"] .pc-dept{color:#0090AB}
.persona-card[data-dept="marketing"] .pc-dept{color:#E14B90}
.persona-card[data-dept="hr"] .pc-dept{color:#7A55E8}
.persona-card[data-dept="operations"] .pc-dept{color:#E07A18}
.pc-plus{position:absolute; top:1rem; inset-inline-end:1rem; width:32px; height:32px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.75); background:rgba(31,35,48,.18);
  z-index:2;
  transition:transform var(--dur) var(--ease), border-color .25s}
.pc-plus::before, .pc-plus::after{content:""; position:absolute; top:50%; left:50%;
  background:#fff}
.pc-plus::before{width:13px; height:1.6px; transform:translate(-50%,-50%)}
.pc-plus::after{width:1.6px; height:13px; transform:translate(-50%,-50%)}
.persona-card.active .pc-plus, .persona-card:hover .pc-plus{transform:rotate(45deg);
  border-color:#fff}
.pc-portrait{width:64px; height:64px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  background:var(--cloud)}
.pc-portrait img{width:100%; height:100%; object-fit:cover}
.pc-name{font-family:var(--font-sans); font-weight:800; font-size:1.25rem; color:var(--ink);
  line-height:1.1}
.pc-dept{font-weight:700; font-size:.82rem; margin-top:.15rem}
.pc-panel{position:absolute; inset-inline:10px; bottom:10px; background:var(--cloud);
  box-shadow:0 -8px 24px rgba(31,35,48,.10);
  border-radius:var(--radius-sm); padding:1rem 1.1rem; text-align:start;
  transform:translateY(calc(100% + 12px));
  transition:transform var(--dur) var(--ease); will-change:transform}
.persona-card.active .pc-panel, .persona-card:hover .pc-panel,
.persona-card:focus-visible .pc-panel{transform:none}
.pc-panel ul{list-style:none; display:grid; gap:.4rem}
.pc-panel li{font-size:.87rem; line-height:1.45; padding-inline-start:1rem; position:relative;
  color:var(--text)}
.pc-panel li::before{content:""; position:absolute; inset-inline-start:0; top:.52em;
  width:.36em; height:.36em; border-radius:50%; background:var(--ink)}
.pc-panel .tags{margin-top:.7rem}
.pc-panel .week1{margin-top:.5rem; font-size:.9rem}
.pc-panel .week1 a{font-weight:600; color:var(--ink); text-decoration:underline;
  text-underline-offset:3px}

/* carousel controls */
.roster-nav{display:flex; gap:.6rem; justify-content:flex-end; margin-bottom:1rem}
.roster-nav button{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--white); color:var(--ink); font-size:1.05rem; cursor:pointer;
  transition:transform .3s var(--ease), border-color .25s}
.roster-nav button:hover{transform:translateY(-2px); border-color:var(--ink)}

/* ---------- roster detail cards (solutions) ---------- */
.roster-card{background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.roster-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.rc-head{display:flex; align-items:center; gap:.9rem; margin-bottom:1rem}
.rc-head .pc-portrait{width:64px; height:64px; margin:0}
.roster-card:hover .pc-portrait{background:var(--blue)}
.roster-card h3{font-size:1.12rem}
.roster-card .status{display:flex; margin-top:.2rem}
.roster-card ul{list-style:none; display:grid; gap:.42rem}
.roster-card li{font-size:.9rem; line-height:1.5; padding-inline-start:1rem; position:relative}
.roster-card li::before{content:""; position:absolute; inset-inline-start:0; top:.52em;
  width:.36em; height:.36em; border-radius:50%; background:var(--ink)}
.roster-card .week1{margin-top:.9rem; font-size:.86rem; color:var(--muted)}
.roster-card .week1 b{color:var(--ink); font-weight:600}
.roster-card .chips{margin-top:1rem}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem; counter-reset:step}
.steps.steps-3{grid-template-columns:repeat(3, 1fr)}
.step{background:var(--cloud); border-radius:var(--radius); padding:1.5rem;
  counter-increment:step}
.step::before{content:counter(step, decimal-leading-zero);
  font-family:var(--font-mono); font-weight:500; font-size:.72rem; letter-spacing:.12em;
  color:var(--muted)}
.step h3{margin:.55rem 0 .45rem; font-size:1.1rem}
.step p{font-size:.92rem; color:var(--muted)}

/* ---------- engagement tiers ---------- */
.tier-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem; align-items:stretch}
.tier{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.6rem; display:flex; flex-direction:column; gap:.55rem;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.tier:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.tier h3{font-size:1.12rem}
.tier .price{font-weight:700; font-size:1.55rem; color:var(--ink); letter-spacing:-.02em}
.tier .price span{font-family:var(--font-mono); font-size:.7rem; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tier p{font-size:.92rem; color:var(--muted)}
/* highlighted tier = inversion moment, not blue (blue stays scarce) */
.tier.hot{background:var(--ink); border-color:var(--ink)}
.tier.hot h3, .tier.hot .price{color:#fff}
.tier.hot .price span{color:#8A939C}
.tier.hot p{color:#C3CAD1}

/* ---------- compliance strip — the machine's voice ---------- */
.strip{background:var(--cloud); border-block:1px solid var(--line); padding-block:1.1rem}
.strip .container{display:flex; flex-wrap:wrap; gap:.5rem 2.4rem; align-items:center;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.strip b{color:var(--ink); font-weight:500}

/* ---------- CTA band — ink, with the view's one blue action ---------- */
.cta-band{background:var(--ink); border-radius:var(--radius);
  padding:clamp(2.5rem, 2rem + 3vw, 4.5rem); text-align:center; color:#fff}
.cta-band h2{color:#fff; max-width:20ch; margin-inline:auto}
.cta-band p{color:#C3CAD1; margin-top:.9rem}
.cta-band .actions{display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}

/* ---------- generic ---------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow-sm)}
.cards-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.cards-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 1rem + 3vw, 4rem)}
.tick{list-style:none; display:grid; gap:.55rem}
.tick li{padding-inline-start:1.6rem; position:relative}
.tick li::before{content:"✓"; position:absolute; inset-inline-start:0; color:var(--duty);
  font-weight:700}

/* ---------- FAQ ---------- */
.faq{max-width:760px; display:grid; gap:.7rem}
.faq details{background:var(--cloud); border-radius:var(--radius-sm); padding:1.05rem 1.25rem}
.faq summary{font-weight:600; font-size:1rem; color:var(--ink); cursor:pointer;
  list-style:none; position:relative; padding-inline-end:2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; inset-inline-end:0; top:50%;
  transform:translateY(-50%); font-weight:400; font-size:1.3rem; color:var(--muted);
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin-top:.7rem; font-size:.94rem; color:var(--muted)}

/* ---------- footer — ink ---------- */
.footer{background:var(--ink); color:#C3CAD1; margin-top:var(--space-section)}
.footer .container{padding-block:3.5rem 2rem}
.footer-top{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem}
.footer .wordmark{color:#fff; margin-bottom:.9rem}
.footer .blurb{font-size:.92rem; max-width:34ch; color:#8A939C}
.footer h3.f-head{font-family:var(--font-mono); font-weight:500; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:#8A939C; margin-bottom:.9rem}
.footer ul{list-style:none; display:grid; gap:.5rem}
.footer ul a{color:#C3CAD1; font-size:.92rem; transition:color .2s}
.footer ul a:hover{color:#fff}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  border-top:1px solid #232A31; margin-top:2.8rem; padding-top:1.4rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:#8A939C}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed; inset-inline-end:1.4rem; inset-block-end:1.4rem; z-index:60;
  width:54px; height:54px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  transition:transform .3s var(--ease), background .25s}
.wa-float:hover{transform:translateY(-3px); background:#232A31}
.wa-float svg{width:26px; height:26px}

/* ---------- reveal system (JS-gated) ---------- */
.js .reveal{opacity:0; transform:translateY(16px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.js .reveal[data-d="1"]{transition-delay:.08s}
.js .reveal[data-d="2"]{transition-delay:.16s}
.js .reveal[data-d="3"]{transition-delay:.24s}
.js .reveal[data-d="4"]{transition-delay:.32s}
.js .reveal.in{opacity:1; transform:none}

/* ---------- forms ---------- */
.form{display:grid; gap:1rem}
.field{display:grid; gap:.4rem}
.field label{font-family:var(--font-mono); font-weight:500; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:var(--font-sans); font-size:.96rem; color:var(--text); width:100%;
  padding:.85rem .95rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--white); transition:border-color .2s, box-shadow .2s}
.field textarea{resize:vertical; min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(42,92,255,.15)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .steps, .steps.steps-3{grid-template-columns:1fr 1fr}
  .tier-cards{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{position:fixed; inset:70px 0 auto 0; background:var(--white);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start;
    padding:1.4rem clamp(1.25rem, .5rem + 3vw, 3rem) 1.8rem; gap:1.1rem;
    transform:translateY(-115%); transition:transform .35s var(--ease)}
  .nav-links.open{transform:none}
  .nav-toggle{display:block}
  .steps, .steps.steps-3{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{transition:none; transform:none; opacity:1}
  .btn, .roster-card, .persona-card, .pc-panel, .pc-plus, .pc-portrait, .tier,
  .wa-float, .roster-nav button{transition:none}
  .roster-nav{display:none}
}