.optlabel{
  max-width:1180px;margin:0 auto 14px;padding:0 var(--gut);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.optlabel b{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink)}
.optlabel span{font-size:13px;color:var(--soft)}
.opt-sec{padding:56px 0 88px}

.hv-grid{
  display:grid;grid-template-columns:.85fr 1.3fr;gap:clamp(30px,5vw,60px);
  align-items:center;max-width:1240px;margin:0 auto;padding:0 var(--gut);
}
.hv-copy h1{font-size:clamp(30px,3.8vw,50px);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px}
.hv-copy .hero-sub{font-size:16px;margin-bottom:24px}

.hg-stage{position:relative;width:100%;aspect-ratio:1000/405}
.hg-stage svg{width:100%;height:100%;display:block}

/* ---------- centered-stack layout: headline on top, full-width band below ---------- */
.hv-stack{display:flex;flex-direction:column;align-items:center}
.hv-copy-center{
  max-width:1120px;margin:0 auto;text-align:center;
  padding:0 var(--gut) 32px;
}
.hv-copy-center h1{font-size:clamp(28px,4vw,50px)}
.hv-copy-center h1 br+span,.hv-copy-center h1 br{display:block}
.hv-copy-center .hero-sub{max-width:600px}
.hv-copy-center .hero-sub{margin-left:auto;margin-right:auto}
.hv-copy-center .hero-ctas{justify-content:center}

.hg-label{
  font-family:var(--body);font-style:italic;font-weight:600;font-size:13.5px;
  fill:#201711;letter-spacing:.01em;
}
.hg-label-fde{font-size:14px}

@media(max-width:960px){
  .hv-grid{grid-template-columns:1fr;gap:32px;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .hg-stage animateMotion{display:none}
}

/* ---------- flow scene (2D recreation of the reference) ---------- */
.fl-label{font-family:var(--body);font-size:8.6px;font-weight:700;letter-spacing:.07em;fill:#201711;text-transform:uppercase}
.fl-float{transform-box:fill-box;transform-origin:center;animation:flFloat 6s ease-in-out infinite}
.fl-float.d2{animation-duration:7.5s;animation-delay:-2s}
.fl-float.d3{animation-duration:5.5s;animation-delay:-1s}
.fl-float.d4{animation-duration:8s;animation-delay:-3s}
@keyframes flFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.fl-float{animation:none}}

/* ---------- Vite-style option ---------- */
.hg-vite-tag{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.12em}
.hg-vite-core{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.06em;fill:#fff}
.hg-vite-badge{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.08em;fill:rgba(255,255,255,.85)}
.hg-stage-vite{position:relative;width:100%;aspect-ratio:1000/620;background:var(--band)}
.hg-stage-vite svg{width:100%;height:100%;display:block}
.opt-sec-dark{background:var(--band);padding:56px 0}
.opt-sec-dark .optlabel b{color:var(--card)}
.opt-sec-dark .optlabel span{color:rgba(255,255,255,.55)}
.opt-sec-dark .hv-copy-center h1{color:var(--card)}
.opt-sec-dark .hv-copy-center .hero-sub{color:rgba(255,255,255,.6)}

/* ---------- locked hero: nav + copy + illustration on one screen ---------- */
.hero-lock{
  --navh:68px;
  min-height:calc(100svh - var(--navh));
  display:flex;flex-direction:column;
  background:linear-gradient(100deg,var(--card)4EC 0%,var(--card) 45%,var(--bg-2) 100%);
  overflow:hidden;
}
/* The locked hero is the primary conversion surface: its copy and CTA must be
   visible from first paint, never gated on an entrance-animation timeline. */
.hero-lock .hero-sub,
.hero-lock .hero-ctas{animation:none;opacity:1;transform:none}

.hero-lock .hv-copy-center{
  flex:0 0 auto;
  padding-top:clamp(14px,3.4vh,44px);
  padding-bottom:clamp(10px,2.4vh,28px);
}
.hero-lock .hv-copy-center h1{
  font-size:clamp(24px,3.1vw,43px);margin-bottom:clamp(8px,1.6vh,16px);
  text-wrap:balance;
}
/* keep the second line whole so the headline stays two lines */
.hero-lock .hv-copy-center h1 .nb{white-space:nowrap}
.hero-lock .hv-copy-center .hero-sub{
  font-size:clamp(14px,1.15vw,16.5px);margin-bottom:clamp(12px,2.2vh,24px);
}
.hg-stage-lock{
  position:relative;flex:1 1 auto;min-height:0;width:100%;display:block;
}
.hg-stage-lock svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.fl-captxt{
  font-family:var(--body);font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;fill:#201711;
}
.fl-cap rect{filter:drop-shadow(0 3px 8px rgba(120,70,40,.10))}

@media(max-width:760px){
  .hero-lock{min-height:auto;padding-bottom:24px}
  .hg-stage-lock{flex:none;height:56vw;min-height:220px}
  /* the desktop two-line lock must not clip the headline on a phone */
  .hero-lock .hv-copy-center h1 .nb{white-space:normal}
}

/* ---------- metrics strip (after hero) ---------- */
.mstrip{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mstrip-in{
  max-width:1180px;margin:0 auto;padding:13px var(--gut);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:10px clamp(16px,2.6vw,36px);
}
.mstrip-i{display:flex;align-items:baseline;gap:9px;min-width:0}
.mstrip-i b{
  flex:none;font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.5vw,20px);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);
}
.mstrip-i span{font-size:14.9px;line-height:1.35;color:var(--soft);white-space:nowrap}
@media(max-width:900px){.mstrip-in{justify-content:flex-start;gap:8px 26px}}
@media(max-width:480px){.mstrip-i span{white-space:normal}}

/* ---------- static industries ribbon ---------- */
.ribbon{background:var(--band);height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ribbon-in{
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;
  padding:0 var(--gut);max-width:100%;
}
.ribbon-in span{
  font-family:var(--body);font-size:14.9px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap;
}
.ribbon-in i{
  display:inline-block;margin:0 clamp(12px,2.4vw,30px);
  color:rgba(255,255,255,.34);font-style:normal;font-size:14.9px;
}
@media(max-width:820px){
  .ribbon{height:auto;padding:14px 0}
  .ribbon-in{flex-wrap:wrap;justify-content:center;row-gap:6px}
  .ribbon-in span{font-size:13.2px;letter-spacing:.1em}
  .ribbon-in i{margin:0 12px}
}

/* ---------- "Complete the workflow" ---------- */
.wfsec{padding:clamp(64px,9vh,104px) 0}
.wf-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,80px);align-items:start}
.wf-left h2{font-size:clamp(28px,3.3vw,42px);line-height:1.16;letter-spacing:-.02em;color:var(--ink)}
.wf-follow{margin-top:22px;font-family:var(--disp);font-weight:600;
  font-size:clamp(17px,1.6vw,21px);color:var(--ink)}
.wf-item{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:22px 0;border-top:1px solid var(--line)}
.wf-item:last-child{border-bottom:1px solid var(--line)}
.wf-item>span{font-family:var(--disp);font-weight:700;font-size:17.2px;color:var(--rose)}
.wf-item h4{font-size:17.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px}
.wf-item p{font-size:17.2px;line-height:1.6;color:var(--soft)}
@media(max-width:900px){.wf-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- workforce, by name ---------- */
.wfn{padding:clamp(64px,9vh,100px) 0 clamp(56px,8vh,88px);background:var(--card)}
.wfn-head{
  max-width:1180px;margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;
}
.wfn-head h2{font-size:clamp(28px,3.3vw,44px);line-height:1.12;letter-spacing:-.025em;color:var(--ink)}
.wfn-head .lede{margin-top:16px;max-width:56ch}
.wfn-side{display:flex;flex-direction:column;align-items:flex-end;gap:18px;padding-top:6px}
.wfn-see{
  display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.wfn-see svg{width:16px;height:16px;stroke:var(--violet);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--e)}
.wfn-see:hover svg{transform:translateX(4px)}
.wfn-nav{display:flex;gap:10px}
.wfn-nav button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;
}
.wfn-nav button:hover:not(:disabled){border-color:var(--violet);background:var(--violet-pastel)}
.wfn-nav button:disabled{opacity:.35;cursor:default}
.wfn-nav svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.wfn-rail{
  display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding:34px var(--gut) 10px;
  scroll-padding-inline:var(--gut);
  -ms-overflow-style:none;scrollbar-width:none;
}
.wfn-rail::-webkit-scrollbar{display:none}
.wfn-card{
  flex:0 0 248px;scroll-snap-align:start;border-radius:18px;padding:24px 22px 26px;
  display:flex;flex-direction:column;min-height:330px;
  transition:transform .28s var(--e),box-shadow .28s var(--e);
}
.wfn-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(120,70,40,.42)}
.wfn-card em{font-style:normal;font-size:13.2px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.wfn-ph{
  width:96px;height:96px;border-radius:50%;overflow:hidden;margin:26px 0 22px;
  background:var(--line);box-shadow:0 8px 20px -10px rgba(100,60,35,.35);
}
.wfn-ph img{width:100%;height:100%;object-fit:cover;display:block}
.wfn-card b{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.01em;color:var(--ink);line-height:1}
.wfn-card .rl{margin-top:9px;font-size:16.1px;line-height:1.45;color:var(--soft)}
.wfn-card u{
  margin-top:auto;padding-top:20px;text-decoration:none;font-weight:700;font-size:16.1px;
  display:inline-flex;align-items:center;gap:7px;
}
.wfn-card u:after{content:"→"}
.wfn-r{background:var(--rose-pastel)}   .wfn-r em,.wfn-r u{color:var(--rose-deep)}
.wfn-v{background:var(--violet-pastel)} .wfn-v em,.wfn-v u{color:var(--violet-deep)}
.wfn-s{background:var(--sky-pastel)}    .wfn-s em,.wfn-s u{color:var(--sky-deep)}
@media(max-width:820px){
  .wfn-head{grid-template-columns:1fr}
  .wfn-side{align-items:flex-start}
  .wfn-card{flex-basis:212px;min-height:306px}
}

/* ---------- option sliders ---------- */
.xslider{position:relative}
.hs-viewport{position:relative;overflow:hidden;transition:height .5s var(--e)}
.hs-slide{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;
  transition:opacity .45s var(--e),visibility .45s}
.hs-slide.on{position:relative;opacity:1;visibility:visible}
.hs-ui{
  max-width:var(--maxw);margin:20px auto 0;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
}
.hs-count{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--faint)}
.hs-arrow{
  width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--line-2);
  color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(100,60,35,.34);
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--e);
}
.hs-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hs-arrow:hover{background:var(--violet);border-color:var(--violet);color:var(--card);transform:scale(1.08)}

/* --- families option B: split panel --- */
.famB{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card)}
.famB > div{padding:clamp(26px,3vw,40px)}
.famB > div + div{border-left:1px solid var(--line)}
.famB h3{font-size:clamp(21px,2vw,27px);margin:10px 0 12px}
.famB .tag{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.famB-sky .tag{color:var(--sky-deep)} .famB-rose .tag{color:var(--rose-deep)}
.famB p{font-size:15px;line-height:1.65;color:var(--soft)}
.famB ul{list-style:none;margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.famB li{font-size:13px;font-weight:600;padding:7px 13px;border-radius:100px}
.famB-sky li{background:var(--sky-pastel);color:var(--sky-deep)}
.famB-rose li{background:var(--rose-pastel);color:var(--rose-deep)}
@media(max-width:820px){.famB{grid-template-columns:1fr}.famB > div + div{border-left:0;border-top:1px solid var(--line)}}

/* --- families option C: stacked rows --- */
.famC-row{display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,4vw,52px);
  padding:clamp(26px,3.4vh,38px) 0;border-top:1px solid var(--line)}
.famC-row:last-child{border-bottom:1px solid var(--line)}
.famC-row .k{display:flex;flex-direction:column;gap:7px}
.famC-row .k em{font-style:normal;font-size:13.2px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.famC-row .k b{font-family:var(--disp);font-size:clamp(19px,1.9vw,24px);letter-spacing:-.01em;color:var(--ink)}
.famC-sky .k em{color:var(--sky-deep)} .famC-rose .k em{color:var(--rose-deep)}
.famC-row p{font-size:15.5px;line-height:1.65;color:var(--soft);max-width:60ch}
.famC-row dl{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px}
.famC-row dt{font-size:16.1px;font-weight:700;color:var(--ink)}
.famC-row dd{font-size:15.5px;line-height:1.5;color:var(--soft);margin-top:2px}
@media(max-width:820px){.famC-row{grid-template-columns:1fr;gap:14px}.famC-row dl{grid-template-columns:1fr}}

/* --- industries option B: card grid --- */
.indB{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.indB article{border:1px solid var(--line);border-radius:18px;padding:24px 22px;background:var(--card);
  transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .25s}
.indB article:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(120,70,40,.4);border-color:var(--violet-soft)}
.indB b{display:block;font-family:var(--disp);font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.indB em{display:block;font-style:normal;margin:6px 0 12px;font-size:12.5px;font-weight:600;color:var(--violet-deep)}
.indB p{font-size:14px;line-height:1.6;color:var(--soft)}
@media(max-width:1000px){.indB{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.indB{grid-template-columns:1fr}}

/* --- industries option C: numbered editorial --- */
.indC{margin-top:38px;border-top:1px solid var(--line)}
.indC-row{display:grid;grid-template-columns:56px 210px 1fr;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);transition:background .25s}
.indC-row:hover{background:var(--panel)}
.indC-row span{font-family:var(--disp);font-weight:700;font-size:16.1px;color:var(--violet)}
.indC-row b{font-family:var(--disp);font-size:clamp(18px,1.8vw,22px);letter-spacing:-.01em;color:var(--ink)}
.indC-row i{display:block;font-style:normal;font-size:14.4px;font-weight:600;color:var(--soft);margin-top:5px}
.indC-row p{font-size:17.2px;line-height:1.6;color:var(--soft)}
@media(max-width:820px){.indC-row{grid-template-columns:40px 1fr}.indC-row p{grid-column:2/-1}}

/* ---------- Built by LUMIQ — tri-prong ---------- */
.lumtp{padding:clamp(64px,9vh,104px) 0}
.lumtp .tp-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,84px);align-items:center}
.tp-brand{margin-bottom:20px}
.tp-brand img{display:block;height:24px;width:auto}
.tp-copy h2{font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:-.025em;margin-bottom:20px}
.tp-copy .lede{margin-bottom:16px}
.tri-wrap{position:relative;width:100%;max-width:640px;margin:0 auto;user-select:none}
.tri-stage{position:relative;width:100%;aspect-ratio:600/640}
.tri-svg{position:absolute;inset:0;width:100%;height:100%}
.tri-fill{fill:var(--violet-pastel);stroke:var(--violet-pastel);stroke-width:56;stroke-linejoin:round}
.tri-arc{fill:none;stroke:var(--violet-soft);stroke-width:1.8;stroke-dasharray:5 6;stroke-linecap:round;
  animation:tpCrawl 1.6s linear infinite}
@keyframes tpCrawl{to{stroke-dashoffset:-22}}
.tri-arrow{fill:var(--violet)}
.tri-spark{fill:var(--violet);filter:drop-shadow(0 0 6px rgba(206,69,17,.85))}
.tri-vertex{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--violet);
  border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--violet-pastel);transform:translate(-50%,-50%);z-index:2}
.tri-orb{position:absolute;left:50%;top:51.25%;transform:translate(-50%,-50%);z-index:3;
  width:104px;height:104px;border-radius:50%;
  background:linear-gradient(140deg,var(--rose),var(--violet) 55%,var(--sky));
  color:var(--card);display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:19px;
  box-shadow:0 18px 44px -12px rgba(158,58,16,.5)}
.tri-orb::before,.tri-orb::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(206,69,17,.4);animation:tpRipple 3s linear infinite}
.tri-orb::after{animation-delay:1.5s}
@keyframes tpRipple{from{transform:scale(1);opacity:.9}to{transform:scale(1.85);opacity:0}}
.tri-node{position:absolute;z-index:2;max-width:216px}
.tri-node b{font-family:var(--disp);font-weight:600;font-size:16.5px;letter-spacing:-.01em;display:block;margin-bottom:5px}
.tri-node span{font-size:14.9px;line-height:1.55;color:var(--soft);display:block}
.tri-node.n-top{left:50%;top:0;transform:translateX(-50%);text-align:center}
.tri-node.n-left{left:0;bottom:0;text-align:right}
.tri-node.n-right{right:0;bottom:0;text-align:left}
.tri-node.em b{color:var(--rose-deep)}
.tri-node.n-left b{color:var(--sky-deep)}
.tri-node.n-right b{color:var(--violet-deep)}
@media(max-width:900px){
  .lumtp .tp-grid{grid-template-columns:1fr;gap:40px}
  .lumtp .tp-copy{text-align:center}
  .tp-brand img{margin:0 auto}
  .tri-wrap{max-width:480px}
  /* .tri-node.n-* carry positioning at higher specificity — reset them by name */
  .tri-node,
  .tri-node.n-top,.tri-node.n-left,.tri-node.n-right{
    position:static;max-width:none;text-align:center!important;margin-top:14px;
    transform:none;left:auto;right:auto;bottom:auto;top:auto;
  }
  .tri-node b{font-size:16.7px}
}
@media(prefers-reduced-motion:reduce){.tri-arc,.tri-orb::before,.tri-orb::after{animation:none}}

/* FDE rail label sits on the dashed line: it covers all four steps */
.connect .chain-rail{
  position:relative;height:30px;padding:0;border:1px dashed var(--line-2);border-top:0;
  border-radius:0 0 14px 14px;margin-top:-2px;
}
.connect .chain-rail span{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  background:var(--card);padding:0 16px;white-space:nowrap;
  font-size:14.4px;font-weight:600;color:var(--soft);
}
@media(max-width:620px){
  .connect .chain-rail span{white-space:normal;text-align:center;width:min(320px,86vw);background:var(--card)}
}
@media(max-width:1120px){.nav-lc{display:none}}

/* closing CTA — emphasised phrase */
.cform h2 b{font-weight:800}

/* workforce rail starts on the headline's left edge, not the viewport edge */
.wfn-rail{
  padding-inline:max(var(--gut), calc(50% - var(--maxw)/2 + var(--gut)));
  scroll-padding-inline:max(var(--gut), calc(50% - var(--maxw)/2 + var(--gut)));
}

/* ---------- Secure and Compliant (above footer) ---------- */
.seccomp{padding:clamp(64px,8vw,104px) 0;border-top:1px solid var(--line)}
.sc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:center}
.sc-copy h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:18px}
.sc-copy .lede{margin-bottom:30px}
.sc-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;align-items:center;justify-items:center}
.sc-badges img{
  max-height:140px;width:auto;max-width:100%;
  filter:grayscale(1);opacity:.7;
  transition:filter .35s,opacity .35s,transform .35s var(--e);
}
.sc-badges img:hover{filter:none;opacity:1;transform:translateY(-4px)}
@media(max-width:900px){
  .sc-grid{grid-template-columns:1fr;gap:40px}
  .sc-copy{text-align:center}
  .sc-badges{gap:20px}
  .sc-badges img{max-height:104px}
}

/* ---- phones: show the workforce two to a row instead of a side-scrolling rail.
   The rail's arrows and snap behaviour stop making sense once everything is
   visible, so they go too. ---- */
@media (max-width:620px){
  .wfn-rail{display:grid;grid-template-columns:1fr 1fr;gap:12px;
    overflow:visible;scroll-snap-type:none;padding:22px var(--gut) 4px}
  .wfn-card{flex:initial;min-height:0;padding:16px 14px 18px;scroll-snap-align:none}
  .wfn-card b{font-size:20px}
  .wfn-card em{font-size:11.5px}
  .wfn-card p{font-size:13px}
  .wfn-nav{display:none}
}

/* ---- phones: the triad. The arcs and vertex labels only carry meaning when the
   labels sit at the points, which they cannot at this width. Drop the decorative
   arcs, shrink the diagram, and mark each prong so the three-part message still
   reads. ---- */
@media (max-width:900px){
  .tri-wrap{max-width:300px;padding:12px 0 20px}
  .tri-arc,.tri-arrow,.tri-spark{display:none}
  .lumtp .tp-grid{gap:26px}
  .tri-node,
  .tri-node.n-top,.tri-node.n-left,.tri-node.n-right{
    border-left:3px solid var(--rose);padding-left:14px;text-align:left!important}
  .tri-node b{margin-bottom:4px}
  .tri-node.n-top b{color:var(--rose)}
  .tri-node.n-left b{color:var(--rose)}
  .tri-node.n-right b{color:var(--rose)}
}