/* ============================================================
   LiteCone — homepage hero and compliance strip
   Lifted from the v2 design; the option-switcher dev tool that
   shipped alongside it has been stripped.
   ============================================================ */
/* ============================================================
   Hero option previews — shared styles
   ============================================================ */

/* ============================================================
   HERO SLIDER (homepage)
   ============================================================ */
.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-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:30;
  width:38px;height:38px;border-radius:50%;
  background:#fff;border:1px solid var(--hair-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -10px rgba(32,23,17,.3);
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--e);
}
.hs-arrow svg{width:14px;height:14px}
.hs-prev{left:14px}
.hs-next{right:14px}
.hs-arrow:hover{background:var(--or-fill);border-color:var(--or);color:#fff;transform:translateY(-50%) scale(1.08)}
@media (max-width:760px){
  .hs-arrow{width:32px;height:32px;top:auto;bottom:18px;transform:none}
  .hs-arrow:hover{transform:scale(1.08)}
  .hs-prev{left:auto;right:64px}
  .hs-next{right:16px}
}

/* dark-slide nav treatment */
.brand .lg-dark{display:none}
.nav.on-dark{background:rgba(20,11,5,.72);border-bottom-color:rgba(255,240,230,.1)}
.nav.on-dark .nav-links > a,.nav.on-dark .nd > a{color:rgba(255,240,230,.72)}
.nav.on-dark .nav-links > a:hover,.nav.on-dark .nd > a:hover{color:#fff}
.nav.on-dark .lg-light{display:none}
.nav.on-dark .lg-dark{display:block}
.nav.on-dark .burger span{background:#fff}

/* ============================================================
   PROBLEM — option 2: broken line vs one line
   ============================================================ */
.p2-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:48px}
.p2-head h2{font-size:clamp(30px,3.6vw,46px)}
.p2-band{border:1px solid var(--hair);border-radius:18px;padding:clamp(22px,3vw,34px);margin-bottom:16px;background:var(--white)}
.p2-band.solid{background:var(--pastel);border-color:var(--peach)}
.p2-tag{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:22px}
.p2-tag.or{color:var(--or-deep)}
.p2-chain{display:flex;align-items:center;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.p2-chain::-webkit-scrollbar{display:none}
.p2-tool{
  flex:none;background:var(--white);border:1px solid var(--hair-2);border-radius:10px;
  padding:11px 18px;font-family:var(--disp);font-weight:500;font-size:14.5px;white-space:nowrap;
  transition:transform .3s var(--e),box-shadow .3s var(--e);
}
.p2-tool:hover{transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(32,23,17,.3)}
.p2-gap{flex:1;min-width:44px;border-top:2px dashed var(--hair-2);position:relative;margin:0 12px}
.p2-gap::after{
  content:"waits";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;
}
.p2-gap i{
  position:absolute;top:-5px;left:50%;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:var(--faint);animation:stuck 2.2s ease-in-out infinite;
}
@keyframes stuck{0%,100%{opacity:.3}50%{opacity:1}}
.p2-flow{display:flex;align-items:center;gap:16px}
.p2-flow b{font-family:var(--disp);font-weight:600;font-size:14.5px;white-space:nowrap}
.p2-line{flex:1;height:2px;background:linear-gradient(90deg,var(--or-soft),var(--or));position:relative;border-radius:2px}
.p2-line i{
  position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:var(--or);box-shadow:0 0 0 3px #fff;animation:flow 3.2s linear infinite;
}
.p2-owner{
  flex:none;display:flex;align-items:center;gap:9px;background:var(--white);border-radius:100px;
  padding:7px 16px 7px 8px;box-shadow:0 10px 24px -10px rgba(158,58,16,.35);
}
.p2-owner img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--peach);transition:opacity .18s}
.p2-owner em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--or-deep);white-space:nowrap;min-width:38px;transition:opacity .18s}
.p2-foot{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:start;margin-top:44px}
@media (max-width:900px){
  .p2-head,.p2-foot{grid-template-columns:1fr;gap:20px}
  .p2-flow{flex-wrap:wrap;row-gap:14px}
}
@media (prefers-reduced-motion:reduce){.p2-gap i,.p2-line i{animation:none}}

/* ============================================================
   PROBLEM — option 3: collapse stack
   ============================================================ */
.p3-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,90px);align-items:center}
.p3-grid h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:22px}
.p3-grid .lede{margin-bottom:24px}
.p3-grid .aside{margin-bottom:30px}
.pile{position:relative;height:420px;max-width:470px;margin:0 auto}
.pcard{
  position:absolute;left:50%;top:50%;width:252px;margin:-40px 0 0 -126px;
  background:var(--white);border:1px solid var(--hair-2);border-radius:12px;padding:16px 18px;
  font-family:var(--disp);font-weight:500;font-size:15.5px;
  box-shadow:0 16px 34px -18px rgba(32,23,17,.3);
  animation:pile 7.5s var(--e) infinite;
}
.pcard span{
  display:block;font-family:var(--body);font-size:10.5px;font-weight:800;
  letter-spacing:.07em;color:var(--faint);text-transform:uppercase;margin-top:5px;
}
.pc1{--tx:-105px;--ty:-150px;--rot:-6deg;--i:0}
.pc2{--tx:100px;--ty:-112px;--rot:5deg;--i:1}
.pc3{--tx:-118px;--ty:32px;--rot:5deg;--i:2}
.pc4{--tx:108px;--ty:74px;--rot:-5deg;--i:3}
.pc5{--tx:-6px;--ty:-42px;--rot:2deg;--i:4}
@keyframes pile{
  0%,30%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot))}
  46%,84%{transform:translate(0,calc(var(--i) * 4px)) rotate(0deg)}
  100%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot))}
}
.pcard.own{
  z-index:6;background:var(--pastel);border-color:var(--peach);color:var(--or-burnt);
  animation:ownpulse 7.5s var(--e) infinite;
}
.pcard.own span{color:var(--or-deep)}
@keyframes ownpulse{
  0%,34%{opacity:0;transform:translate(0,0) scale(.92)}
  48%,84%{opacity:1;transform:translate(0,-6px) scale(1.05)}
  96%,100%{opacity:0;transform:translate(0,0) scale(.92)}
}
@media (max-width:900px){
  .p3-grid{grid-template-columns:1fr;gap:36px}
  .pile{height:340px;max-width:360px}
  .pcard{width:216px;margin-left:-108px;font-size:14px}
  .pc1{--tx:-62px;--ty:-120px}.pc2{--tx:58px;--ty:-90px}
  .pc3{--tx:-70px;--ty:26px}.pc4{--tx:62px;--ty:60px}.pc5{--tx:-4px;--ty:-34px}
}
@media (prefers-reduced-motion:reduce){
  .pcard{animation:none;transform:translate(0,calc(var(--i,0) * 4px))}
  .pcard.own{animation:none;opacity:1;transform:translate(0,-6px)}
}

/* ============================================================
   ATTRIBUTE RIBBON — 3 variants
   ============================================================ */
.rib-label{
  max-width:var(--maxw);margin:64px auto 16px;padding:0 var(--gut);
  font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
}
.rib-label b{color:var(--or-deep)}

/* A — quiet editorial marquee */
.attr-a{
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:20px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.attr-a .t{display:flex;width:max-content;animation:mq 44s linear infinite}
.attr-a:hover .t{animation-play-state:paused}
.attr-a .s{display:flex;align-items:center}
.attr-a span{
  font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.01em;
  color:var(--ink);padding:0 28px;white-space:nowrap;
}
.attr-a i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--or)}

/* B — brand band (flat, slim) */
.attr-b{overflow:hidden}
.attr-b .band{
  background:#1A100A;
  overflow:hidden;
}
.attr-b .t{display:flex;width:max-content;animation:mq 34s linear infinite;padding:7px 0}
.attr-b:hover .t{animation-play-state:paused}
.attr-b .s{display:flex;align-items:center}
.attr-b span{
  font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.01em;line-height:1.4;
  color:#fff;padding:0 20px;white-space:nowrap;
}
.attr-b i{flex:none;width:5px;height:5px;background:var(--or);transform:rotate(45deg)}

/* C — static line, sequential spotlight */
.attr-c{padding:26px var(--gut);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.attr-c .row{max-width:980px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:10px}
.attr-c span{
  font-family:var(--disp);font-weight:500;font-size:18px;letter-spacing:-.01em;
  color:var(--faint);padding:2px 20px;white-space:nowrap;
  transition:color .5s var(--e),transform .5s var(--e);
}
.attr-c span + span{border-left:1px solid var(--hair)}
.attr-c span.on{color:var(--or-deep);transform:scale(1.1)}
@media (max-width:760px){
  .attr-a span{font-size:16px;padding:0 20px}
  .attr-c span{font-size:15px;padding:2px 14px}
}
@media (prefers-reduced-motion:reduce){
  .attr-a .t,.attr-b .t{animation:none}
}

/* ============================================================
   OPTION 1 — current hero, smaller capsules
   ============================================================ */
.hero-sm .hero-note{font-size:12.5px;padding:6px 13px;gap:7px}
.hero-sm .chip{padding:6px 14px 6px 7px;gap:9px}
.hero-sm .chip img{width:36px;height:36px}
.hero-sm .chip b{font-size:12.5px}
.hero-sm .chip em{font-size:11px}
.hero-sm .orb-1{width:64px;height:64px}
.hero-sm .orb-2{width:50px;height:50px}

/* ============================================================
   OPTION 2 — dark stage, conveyor-belt scan
   ============================================================ */
body.dark{background:#190E07}
body.dark .nav{background:rgba(20,11,5,.7);border-bottom-color:rgba(255,240,230,.1)}
body.dark .nav-links > a{color:rgba(255,240,230,.72)}
body.dark .nav-links > a:hover{color:#fff}

.hero2{
  position:relative;overflow:hidden;
  min-height:calc(100vh - 70px);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:clamp(56px,9vh,110px) var(--gut) 190px;
  background:#190E07;
}
/* the glow the belt runs through */
.hero2::before{
  content:"";position:absolute;left:50%;bottom:-42vh;transform:translateX(-50%);
  width:130vh;height:80vh;border-radius:50%;
  background:radial-gradient(closest-side,#FFB37E 0%,#F1591C 34%,rgba(206,69,17,.55) 58%,transparent 78%);
  filter:blur(28px);pointer-events:none;
}
.hero2::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 118%,rgba(241,89,28,.35),transparent 65%);
}
.hero2-copy{position:relative;z-index:2;max-width:860px}
.hero2 .hero-note{
  background:rgba(255,255,255,.06);border-color:rgba(255,240,230,.16);
  color:rgba(255,240,230,.8);
}
.hero2 h1{
  font-size:clamp(42px,6.4vw,82px);color:#fff;
  font-weight:600;line-height:1.04;letter-spacing:-.03em;margin-bottom:22px;
  animation:rise .8s var(--e) .08s both;
}
.hero2 h1 .hl-or{color:#FF9A5C}
.hero2 .hero-tag{color:#fff;animation-delay:.16s}
.hero2 .hero-sub{color:rgba(255,235,222,.66);animation-delay:.24s}
.hero2 .btn-or{box-shadow:0 14px 40px -8px rgba(241,89,28,.7)}
.btn-ghost-dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,240,230,.2)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}

/* spotlight cone over the scan zone */
.spot{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  width:360px;height:44vh;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,transparent 0%,rgba(255,190,140,.06) 35%,rgba(255,170,110,.2) 100%);
  clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
}
/* conveyor belt */
.belt{position:absolute;left:0;right:0;bottom:44px;z-index:3;overflow:hidden;padding:26px 0 8px}
.belt-track{display:flex;gap:16px;width:max-content;animation:mq 38s linear infinite}
.belt:hover .belt-track{animation-play-state:paused}
.bcard{
  position:relative;display:flex;align-items:center;gap:11px;flex:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,240,230,.13);
  border-radius:14px;padding:10px 18px 10px 10px;overflow:hidden;
  transition:background .4s var(--e),transform .4s var(--e),box-shadow .4s var(--e),border-color .4s;
}
.bcard img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--peach);transition:filter .4s}
.bcard b{display:block;font-size:13px;letter-spacing:.03em;color:rgba(255,240,230,.85);transition:color .4s}
.bcard em{display:block;font-style:normal;font-size:11.5px;color:rgba(255,235,222,.45);transition:color .4s;white-space:nowrap}
.bcard:not(.lit) img{filter:saturate(.55) brightness(.85)}
.bcard.lit{
  background:var(--white);border-color:#fff;
  transform:translateY(-16px) scale(1.07);
  box-shadow:0 0 0 2px var(--or),0 26px 70px -10px rgba(241,89,28,.65);
}
.bcard.lit b{color:var(--ink)}
.bcard.lit em{color:var(--soft)}
.bcard.lit::after{
  content:"";position:absolute;top:0;bottom:0;width:34px;left:-40px;
  background:linear-gradient(90deg,transparent,rgba(241,89,28,.35),transparent);
  animation:scanline 1.1s linear infinite;
}
@keyframes scanline{to{left:calc(100% + 6px)}}
/* belt rail line */
.belt::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,240,230,.25),transparent);
}

/* ============================================================
   OPTION 3 — split hero, orbit reader
   ============================================================ */
.hero3{padding:clamp(44px,7vh,90px) 0 clamp(56px,8vh,96px)}
.hero3-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,80px);align-items:center}
.hero3-copy{text-align:left}
.hero3-copy .hero-note{margin-bottom:28px}
.hero3-copy h1{
  font-size:clamp(40px,4.8vw,66px);font-weight:600;line-height:1.04;
  letter-spacing:-.03em;margin-bottom:20px;animation:rise .8s var(--e) .08s both;
}
.hero3-copy .hero-tag{margin-bottom:12px}
.hero3-copy .hero-sub{margin:0 0 32px;max-width:50ch}
.hero3-copy .hero-ctas{justify-content:flex-start}
.hero3-copy .hero-crew{justify-content:flex-start;margin-top:44px}

.orbit-wrap{position:relative;animation:fadein 1s var(--e) .3s both}
.orbit{position:relative;aspect-ratio:1/1;max-width:540px;margin:0 auto}
.orbit::before{
  content:"";position:absolute;inset:6.5%;border-radius:50%;
  border:1.5px dashed var(--hair-2);
}
/* reader notch on the left of the ring, facing the copy */
.orbit-notch{
  position:absolute;top:50%;left:6.5%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--or);box-shadow:0 0 0 5px var(--peach);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px var(--peach)}50%{box-shadow:0 0 0 10px rgba(255,201,168,.4)}}
.sat{
  position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;border:2.5px solid #fff;background:var(--peach);
  box-shadow:0 8px 20px -8px rgba(32,23,17,.35);
  transition:box-shadow .4s var(--e);will-change:transform;
}
.sat img{width:100%;height:100%;border-radius:50%;object-fit:cover;transition:filter .4s}
.sat:not(.lit) img{filter:saturate(.65)}
.sat.lit{box-shadow:0 0 0 3px var(--or),0 14px 34px -8px rgba(241,89,28,.5)}
.core{
  position:absolute;inset:21%;border-radius:50%;background:var(--pastel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;gap:4px;
}
.core img{width:86px;height:86px;border-radius:50%;object-fit:cover;background:#fff;border:3px solid #fff;box-shadow:0 10px 26px -10px rgba(158,58,16,.4);margin-bottom:10px}
.core b{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:.01em}
.core em{font-style:normal;font-size:13.5px;color:var(--soft)}
.core .reading{
  margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--or-deep);background:var(--white);border-radius:100px;padding:6px 13px;
  display:inline-flex;align-items:center;gap:7px;
}
.core .reading::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--or);
  animation:pulse 1.6s ease-in-out infinite;
}
.core-inner{transition:opacity .3s var(--e),transform .3s var(--e);display:flex;flex-direction:column;align-items:center;gap:4px}
.core-inner.swap{opacity:0;transform:translateY(6px)}

/* ============================================================
   OPTION 4 — the decision floor
   ============================================================ */
.hero4{padding:clamp(48px,7vh,92px) 0 clamp(60px,8vh,90px)}
.hero4-top{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(36px,5vw,90px);align-items:end;margin-bottom:clamp(44px,6vh,72px);
}
.hero4-top h1{
  font-size:clamp(44px,5.6vw,84px);font-weight:600;line-height:1.02;
  letter-spacing:-.035em;animation:rise .8s var(--e) both;
}
.hero4-side{animation:rise .8s var(--e) .15s both}
.hero4-side .hero-tag{font-size:18px;margin-bottom:10px}
.hero4-side .hero-sub{font-size:15.5px;margin:0 0 26px;max-width:44ch}
.hero4-side .hero-ctas{justify-content:flex-start;gap:20px}

.floor{
  border:1px solid var(--hair);border-radius:22px;
  padding:clamp(24px,3.4vw,44px);position:relative;
  animation:rise .8s var(--e) .3s both;background:var(--white);
}
.floor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;gap:16px;flex-wrap:wrap}
.floor-live{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--or-deep);
}
.floor-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--or);animation:pulse 1.8s ease-in-out infinite}
.floor-cap{font-size:13px;color:var(--faint)}
.dline{display:flex;align-items:center;gap:0}
.station{flex:none;text-align:center;width:150px;position:relative}
.station .sav{
  width:64px;height:64px;border-radius:50%;margin:0 auto 12px;position:relative;
  background:var(--peach);border:3px solid #fff;box-shadow:0 10px 26px -10px rgba(158,58,16,.4);
}
.station .sav img{width:100%;height:100%;border-radius:50%;object-fit:cover;transition:opacity .45s var(--e)}
.station b{font-family:var(--disp);font-weight:600;font-size:15px;display:block;letter-spacing:0}
.station span{font-size:12.5px;color:var(--soft);display:block;margin-top:2px}
.station .who{font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--or-deep);display:block;margin-top:6px;min-height:15px}
.seg{flex:1;height:2px;background:var(--hair);position:relative;margin:0 6px 46px;min-width:60px}
.seg i{
  position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:var(--or);box-shadow:0 0 0 3px var(--peach);
  animation:flow 2.8s linear infinite;
}
.seg i:nth-child(2){animation-delay:.9s}
.seg i:nth-child(3){animation-delay:1.8s}
@keyframes flow{from{left:-2%;opacity:0}8%{opacity:1}92%{opacity:1}to{left:99%;opacity:0}}
.outcomes{flex:none;display:flex;flex-direction:column;gap:14px;margin-bottom:46px}
.oc{
  display:flex;align-items:center;gap:12px;border-radius:14px;padding:13px 18px;
  transition:transform .3s var(--e),box-shadow .3s var(--e);
}
.oc:hover{transform:translateX(4px)}
.oc-ok{background:var(--pastel)}
.oc-esc{background:var(--warm)}
.oc .num{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.01em;min-width:86px;font-variant-numeric:tabular-nums}
.oc-ok .num{color:var(--or-deep)}
.oc b{font-size:13.5px;display:block}
.oc span{font-size:12px;color:var(--soft);display:block}

/* responsive for option pages */
@media (max-width:1000px){
  .hero3-grid{grid-template-columns:1fr;gap:52px}
  .hero3-copy{text-align:center}
  .hero3-copy .hero-ctas,.hero3-copy .hero-crew{justify-content:center}
  .orbit{max-width:440px}
  .hero4-top{grid-template-columns:1fr;align-items:start}
  .dline{flex-direction:column;align-items:stretch;gap:18px}
  .seg{width:2px;height:44px;flex:none;margin:0 auto;min-width:0}
  .seg i{left:50%;top:0;margin:-4px 0 0 -4px;animation:flowv 2.4s linear infinite}
  @keyframes flowv{from{top:-2%;opacity:0}10%{opacity:1}90%{opacity:1}to{top:96%;opacity:0}}
  .station{width:auto}
  .outcomes{margin-bottom:0}
}
@media (max-width:760px){
  .hero2{padding-bottom:170px}
  .hero2 h1{font-size:clamp(38px,10.5vw,52px)}
  .spot{width:240px}
}
@media (prefers-reduced-motion:reduce){
  .belt-track,.bcard.lit::after,.seg i,.orbit-notch,.core .reading::before,.floor-live::before{animation:none}
}

/* ============================================================
   GAP — opt 2 (buried vs waiting) & opt 3 (dark type moment)
   ============================================================ */
.g2{text-align:left}
.g2 .g2-h{font-size:clamp(32px,4.4vw,58px);margin-bottom:44px;max-width:none;padding:0}
.g2-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:36px}
.g2-card{background:var(--warm);border-radius:20px;padding:clamp(26px,3.4vw,42px);position:relative;overflow:hidden;transition:transform .3s var(--e)}
.g2-card:hover{transform:translateY(-4px)}
.g2-card b{font-family:var(--disp);font-weight:600;font-size:20px;display:block;margin-top:22px}
.g2-card p{font-size:14.5px;color:var(--soft);margin-top:4px}
.g2-stack{display:flex;flex-direction:column-reverse;gap:7px;height:96px;justify-content:flex-start}
.g2-stack i{display:block;height:14px;border-radius:5px;background:var(--peach);width:62%;animation:pileup 5s var(--e) infinite}
.g2-stack i:nth-child(2){width:74%;animation-delay:.3s}
.g2-stack i:nth-child(3){width:56%;animation-delay:.6s}
.g2-stack i:nth-child(4){width:68%;animation-delay:.9s}
.g2-stack i:nth-child(5){width:48%;animation-delay:1.2s}
@keyframes pileup{0%{opacity:0;transform:translateY(8px)}18%,80%{opacity:1;transform:none}100%{opacity:0}}
.g2-card.wait{background:var(--pastel)}
.g2-clock{display:block;width:64px;height:64px;border-radius:50%;border:2px solid var(--or-soft);position:relative;margin-top:16px}
.g2-clock::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:22px;margin-left:-1px;background:var(--or);transform-origin:bottom center;transform:translateY(-100%) rotate(0);animation:tick 6s linear infinite}
.g2-clock::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--or-deep)}
@keyframes tick{to{transform:translateY(-100%) rotate(360deg)}}
.g2-lede{max-width:58ch}
@media (max-width:760px){.g2-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.g2-stack i,.g2-clock::before{animation:none}}

.g3{background:var(--choc)}
.g3 h2{color:#fff}
.g3 .dim{color:rgba(255,235,222,.4)}
.g3 .lede{color:rgba(255,240,230,.68)}
.g3 .ts{background:var(--choc);color:#fff}
.g3 .track-line i{border-top-color:rgba(255,240,230,.25)}
.g3 .token{box-shadow:0 0 0 4px rgba(241,89,28,.3)}
.g3 .track-legend{color:rgba(255,235,222,.45)}

/* ============================================================
   CO-DECISION — opt 2 (light cards) & opt 3 (dark flows)
   ============================================================ */
.c2{background:var(--white);color:var(--ink)}
.c2 h2{color:var(--ink);font-size:clamp(32px,4vw,50px);margin-bottom:20px;text-align:center}
.c2 .lede{margin:0 auto 46px;text-align:center}
.c2-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:0 auto 40px}
.c2-card{border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,3vw,36px);background:var(--warm)}
/* Google Sans tops out at 700; asking for 800 makes the browser fall
   back to Manrope for this one label, which broke the heading face. */
.c2-card h6{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:20px}
.c2-card li{padding:13px 0;border-top:1px solid var(--hair-2)}
.c2-card li b{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:3px}
.c2-card li span{font-size:15px;color:var(--soft)}
.c2-card.hi{background:var(--pastel);border-color:var(--peach);box-shadow:0 24px 50px -24px rgba(206,69,17,.35)}
.c2-card.hi h6{color:var(--or-deep)}
.c2-card.hi li b{color:var(--or-deep)}
.c2-card.hi li span{color:var(--ink);font-weight:600}
.c2 .code-punch{color:var(--ink)!important;text-align:center;margin:0 auto 30px}
.c2 .c2-cta{display:flex;justify-content:center}
@media (max-width:760px){.c2-grid{grid-template-columns:1fr}}

.c3 .code-copy3{max-width:760px;margin:0 auto 50px;text-align:center}
.c3 h2{font-size:clamp(32px,4vw,50px);color:#fff;margin-bottom:18px}
.c3 p.sub3{color:rgba(255,240,230,.72);font-size:16.5px;line-height:1.7}
.c3-row{border:1px solid rgba(255,240,230,.14);border-radius:18px;padding:clamp(22px,3vw,34px);margin:0 auto 16px;max-width:980px}
.c3-row .p2-tag{color:rgba(255,235,222,.45)}
.c3-row.win{background:rgba(241,89,28,.1);border-color:rgba(241,89,28,.4)}
.c3-row.win .p2-tag{color:var(--or-soft)}
.c3-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.c3-node{font-family:var(--disp);font-weight:500;font-size:14.5px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,240,230,.16);border-radius:10px;padding:10px 16px;white-space:nowrap}
.c3-node.stuck{color:rgba(255,235,222,.55);border-style:dashed}
.c3-node.or{background:var(--or-fill);border-color:var(--or);font-weight:600}
.c3-dash{flex:1;min-width:30px;border-top:2px dashed rgba(255,240,230,.22)}
.c3-solid{flex:1;min-width:30px;height:2px;background:linear-gradient(90deg,rgba(255,201,168,.5),var(--or));position:relative;border-radius:2px}
.c3-solid i{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--or-soft);animation:flow 3s linear infinite}
.c3 .code-punch{text-align:center;margin:34px auto}
.c3 .c2-cta{display:flex;justify-content:center}
@media (prefers-reduced-motion:reduce){.c3-solid i{animation:none}}

/* ============================================================
   WORKFORCE — opt 2 (mosaic grid) & opt 3 (list rows)
   ============================================================ */
.wgrid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.wgrid .wcard{width:auto}
.wlist{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrow{display:grid;grid-template-columns:56px auto 1fr auto;gap:20px;align-items:center;padding:15px 12px;border-top:1px solid var(--hair);border-radius:12px;transition:background .25s,transform .25s var(--e)}
.wrow:last-child{border-bottom:1px solid var(--hair)}
.wrow img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--peach)}
.wrow b{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:.02em}
.wrow .wr-role{font-size:14.5px;color:var(--soft)}
.wrow em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--or-deep);background:var(--pastel);border-radius:6px;padding:4px 10px;justify-self:start}
.wrow u{text-decoration:none;font-size:14px;font-weight:700;color:var(--or-deep);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s var(--e)}
.wrow:hover{background:var(--pastel)}
.wrow:hover u{opacity:1;transform:none}
@media (max-width:760px){
  .wrow{grid-template-columns:44px 1fr auto;gap:12px}
  .wrow .wr-role{grid-column:2/4;grid-row:2;margin-top:-6px}
  .wrow em{display:none}
}

/* ============================================================
   GOVERNANCE — opt 2 (pastel checklist) & opt 3 (dark columns)
   ============================================================ */
.gv2-panel{background:var(--pastel);border-radius:26px;padding:clamp(34px,5vw,64px)}
.gv2-panel h2{font-size:clamp(30px,3.6vw,44px);text-align:center;margin-bottom:14px}
.gv2-panel .lede{text-align:center;margin:0 auto 44px}
.gv2-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.gv2-item i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--or-fill);color:#fff;margin-bottom:14px}
.gv2-item i svg{width:14px;height:14px}
.gv2-item b{font-family:var(--disp);font-weight:600;font-size:16.5px;display:block;margin-bottom:6px}
.gv2-item p{font-size:13.5px;color:var(--soft);line-height:1.55}
@media (max-width:1000px){.gv2-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gv2-grid{grid-template-columns:1fr}}

.gv3{background:var(--choc);color:#fff;padding:clamp(70px,8vw,110px) 0}
.gv3 h2{color:#fff;font-size:clamp(30px,3.6vw,44px);margin-bottom:14px}
.gv3 .lede{color:rgba(255,240,230,.68);margin-bottom:44px}
.gv3-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.gv3-grid > div{padding:4px 22px;border-left:1px solid rgba(255,240,230,.14)}
.gv3-grid > div:first-child{border-left:0;padding-left:0}
.gv3-grid span{font-family:var(--disp);font-size:14px;color:var(--or-soft);display:block;margin-bottom:10px}
.gv3-grid b{font-family:var(--disp);font-weight:600;font-size:16.5px;color:#fff;display:block;margin-bottom:6px}
.gv3-grid p{font-size:13px;color:rgba(255,240,230,.6);line-height:1.55}
@media (max-width:1000px){.gv3-grid{grid-template-columns:1fr 1fr;gap:26px 0}.gv3-grid > div:nth-child(odd){border-left:0;padding-left:0}}

/* ============================================================
   INDUSTRIES — opt 2 (cards) & opt 3 (accordion)
   ============================================================ */
.ind2-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ind2-card{border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,3vw,38px);background:var(--white);transition:transform .3s var(--e),box-shadow .3s var(--e)}
.ind2-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -22px rgba(32,23,17,.25)}
.ind2-card.feat{background:var(--pastel);border-color:var(--peach)}
.ind2-card h3{font-size:21px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.ind2-card > p{font-size:14.5px;color:var(--soft);margin-bottom:18px;max-width:56ch}
.ind2-facts{display:flex;gap:34px;margin-bottom:18px}
.ind2-facts b{font-family:var(--disp);font-weight:600;font-size:22px;display:block}
.ind2-facts span{font-size:12.5px;color:var(--soft)}
.ind2-card .icrew{margin-bottom:18px}
.ind2-card .icrew a{border:1px solid var(--hair)}
@media (max-width:900px){.ind2-grid{grid-template-columns:1fr}}

.acc{border-top:1px solid var(--hair)}
.acc:last-child{border-bottom:1px solid var(--hair)}
.acc-head{width:100%;display:flex;align-items:center;gap:16px;text-align:left;padding:26px 4px;cursor:pointer}
.acc-head h3{font-size:clamp(20px,2.4vw,27px);flex:1;display:flex;align-items:center;gap:12px;transition:color .25s}
.acc-head:hover h3{color:var(--or-deep)}
.acc-head .plus{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--hair-2);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .4s var(--e)}
.acc-head .plus svg{width:14px;height:14px}
.acc.open .acc-head .plus{background:var(--or-fill);border-color:var(--or);color:#fff;transform:rotate(45deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.acc.open .acc-body{grid-template-rows:1fr}
.acc-body > div{overflow:hidden}
.acc-in{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;padding:0 4px 34px}
.acc-in > p{font-size:15.5px;color:var(--soft);max-width:58ch}
.acc-in .ifacts{margin:18px 0}
.acc-side .icrew{margin-bottom:16px}
.acc-side .icrew a{border:1px solid var(--hair)}
@media (max-width:860px){.acc-in{grid-template-columns:1fr;gap:10px}}

/* ============================================================
   PROOF — opt 2 (split card) & opt 3 (dark quote)
   ============================================================ */
.p8b-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.p8b-quote{background:var(--pastel);border-radius:24px;padding:clamp(30px,4vw,52px);position:relative}
.p8b-quote::before{content:"\201C";font-family:var(--disp);font-weight:700;font-size:96px;line-height:1;color:var(--or-soft);display:block;margin-bottom:2px}
.p8b-quote p{font-family:var(--disp);font-weight:400;font-size:clamp(18px,1.9vw,23px);line-height:1.5;letter-spacing:-.01em}
.p8b-quote em{font-style:normal;color:var(--or-deep);font-weight:600}
.p8b-quote figcaption{margin-top:22px;font-size:13.5px}
.p8b-quote figcaption b{display:block;font-size:14.5px}
.p8b-quote figcaption span{color:var(--soft)}
.p8b-stats{display:grid;grid-template-columns:1fr 1fr;gap:34px 30px}
.p8b-stats b{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;display:block}
.p8b-stats i{font-style:normal;font-size:13.5px;font-weight:700;display:block;margin:6px 0 4px}
.p8b-stats p{font-size:13px;color:var(--soft);line-height:1.55}
@media (max-width:900px){.p8b-grid{grid-template-columns:1fr}}

.p8c{background:var(--choc)}
.p8c .quote blockquote p{color:#fff}
.p8c .quote::before{color:rgba(241,89,28,.4)}
.p8c .quote em{color:var(--or-soft)}
.p8c .quote figcaption b{color:#fff}
.p8c .quote figcaption span{color:rgba(255,240,230,.55)}
.p8c .proof-stats > div{border-left-color:rgba(255,240,230,.14)}
.p8c .proof-stats b{color:var(--or-soft)}
.p8c .proof-stats i{color:#fff}
.p8c .proof-stats p{color:rgba(255,240,230,.6)}

/* ============================================================
   WHY NOW — opt 2 (centered columns) & opt 3 (compare cards)
   ============================================================ */
.wn2{background:var(--white)}
.wn2 h2{text-align:center;font-size:clamp(30px,3.4vw,44px);margin-bottom:16px}
.wn2 .lede{text-align:center;margin:0 auto 52px}
.wn2-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.wn2-grid > div{padding:6px 30px;border-left:1px solid var(--hair)}
.wn2-grid > div:first-child{border-left:0;padding-left:0}
.wn2-grid b{font-family:var(--disp);font-weight:600;font-size:18px;display:block;margin-bottom:8px}
.wn2-grid p{font-size:14.5px;color:var(--soft);line-height:1.6}
@media (max-width:860px){.wn2-grid{grid-template-columns:1fr;gap:26px}.wn2-grid > div{border-left:0;padding:0}}

.wn3 h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:14px}
.wn3 .lede{margin-bottom:44px}
.wn3-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wn3-card{border:1px solid var(--hair);border-radius:16px;padding:24px 22px;background:var(--warm)}
.wn3-card b{font-family:var(--disp);font-weight:600;font-size:17px;display:block;margin-bottom:8px}
.wn3-card p{font-size:13.5px;color:var(--soft);line-height:1.6}
.wn3-card.lc{background:linear-gradient(150deg,var(--or),var(--or-deep));border-color:var(--or);color:#fff;transition:transform .3s var(--e)}
.wn3-card.lc:hover{transform:translateY(-4px)}
.wn3-card.lc b{color:#fff}
.wn3-card.lc p{color:rgba(255,240,230,.85)}
.wn3-card.lc .arrow-link{color:#fff;font-size:14px;margin-top:14px}
.wn3-card.lc .arrow-link::after{color:#fff}
@media (max-width:1000px){.wn3-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wn3-grid{grid-template-columns:1fr}}

/* ============================================================
   LUMIQ — opt 2 (centered triad) & opt 3 (dark split)
   ============================================================ */
.lum2{text-align:center}
.lum2 .triad-hub{margin-bottom:26px}
.lum2 h2{font-size:clamp(30px,3.8vw,48px);margin-bottom:18px}
.lum2 .lede{margin:0 auto 46px}
.lum2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.lum2-grid .triad-row{margin-top:0;border:1px solid var(--hair);align-items:flex-start;padding:22px}
.lum2-grid .triad-row i{margin-top:7px}
.lum2 .arrow-link{margin-top:36px}
@media (max-width:860px){.lum2-grid{grid-template-columns:1fr}}

.lum3{background:var(--choc)}
.lum3 h2{color:#fff}
.lum3 .lede{color:rgba(255,240,230,.68)}
.lum3 .arrow-link{color:#fff}
.lum3 .triad{background:transparent;border:1px solid rgba(255,240,230,.14)}
.lum3 .triad-row{background:rgba(255,255,255,.06)}
.lum3 .triad-row b{color:#fff}
.lum3 .triad-row span{color:rgba(255,240,230,.6)}

/* ============================================================
   BIG CTA — opt 2 (editorial) & opt 3 (dark glow + crew)
   ============================================================ */
.cta2{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:clamp(70px,9vw,120px) 0}
.cta2-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,90px);align-items:center}
.cta2 h2{font-size:clamp(34px,4.4vw,60px)}
.cta2 h2 .hl-or{color:var(--or)}
.cta2 p{font-size:16.5px;color:var(--soft);margin-bottom:30px;max-width:44ch}
.cta2 .cta-row{justify-content:flex-start}
@media (max-width:860px){.cta2-grid{grid-template-columns:1fr;gap:30px}}

.cta3-panel{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  background:var(--choc);border-radius:28px;
  padding:clamp(60px,8vw,104px) clamp(24px,5vw,80px);
}
.cta3-panel::before{
  content:"";position:absolute;left:50%;bottom:-46vh;transform:translateX(-50%);
  width:120vh;height:70vh;border-radius:50%;
  background:radial-gradient(closest-side,#FFB37E 0%,var(--or) 36%,rgba(206,69,17,.5) 60%,transparent 78%);
  filter:blur(30px);pointer-events:none;opacity:.85;
}
.cta3-panel h2{position:relative;font-size:clamp(32px,4.6vw,58px);margin-bottom:18px;color:#fff}
.cta3-panel h2 .peach{color:var(--or-soft)}
.cta3-panel p{position:relative;font-size:16.5px;color:rgba(255,240,230,.8);max-width:52ch;margin:0 auto 36px}
.cta3-panel .cta-row{position:relative}
.cta3-crew{position:relative;display:flex;justify-content:center;margin-top:44px}
.cta3-crew img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--peach);border:2px solid rgba(255,255,255,.9);margin-left:-10px;transition:transform .3s var(--e)}
.cta3-crew img:first-child{margin-left:0}
.cta3-crew img:hover{transform:translateY(-5px)}

/* ============================================================
   FOOTER — opt 2 (light editorial) & opt 3 (giant wordmark)
   ============================================================ */
.f-light{background:var(--white);color:var(--ink);border-top:1px solid var(--hair)}
.f-light .f-mark h2{color:var(--ink)}
.f-light .f-mark p{color:var(--soft)}
.f-light .f-cols h6{color:var(--faint)}
.f-light .f-cols a{color:var(--soft)}
.f-light .f-cols a:hover{color:var(--ink)}
.f-light .f-legal{border-top-color:var(--hair)}
.f-light .f-legal a{color:var(--faint)}
.f-light .f-legal a:hover{color:var(--ink)}
.f-light .f-base{border-top-color:var(--hair);color:var(--faint)}
.f-light .f-top{color:var(--or-deep)}
.f-light .f-top:hover{color:var(--or)}

.fm3-head{margin-bottom:10px}
.fm3-word{
  position:relative;text-align:center;margin:44px 0 48px;
  font-family:var(--disp);font-weight:700;
  font-size:clamp(58px,11.5vw,168px);line-height:1;letter-spacing:-.04em;
  user-select:none;cursor:default;
}
.fm3-base{
  display:block;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,240,230,.1);
  paint-order:stroke;
}
.fm3-canvas{
  position:absolute;left:-70px;top:-70px;
  filter:url(#fluidGoo);
  pointer-events:none;
}

/* ============================================================
   CLIENT ROUND 1 — compliance chips, bigger tags, FSI prong
   ============================================================ */
.comp-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  padding:22px var(--gut);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.comp-label,.comp-chip{
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  border-radius:8px;padding:9px 16px;white-space:nowrap;
}
.comp-label{color:var(--or-deep);border:1px solid var(--or);background:var(--pastel)}
.comp-chip{color:var(--soft);border:1px solid var(--hair-2);background:var(--white);transition:border-color .25s,color .25s}
.comp-chip:hover{border-color:var(--or-soft);color:var(--ink)}

.p2-tag{
  font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:.04em;
  color:var(--ink);
}
.p2-band .p2-tag{margin-bottom:24px}

.triad-row.fsi{background:var(--pastel);border:1px solid var(--peach)}
.lum3 .triad-row.fsi{background:rgba(241,89,28,.14);border-color:rgba(241,89,28,.4)}
.lob{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.lob span{
  font-family:var(--disp);font-weight:500;font-size:14.5px;
  background:var(--white);border:1px solid var(--hair-2);border-radius:10px;padding:10px 16px;
  transition:transform .25s var(--e),box-shadow .25s var(--e);
}
.lob span:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(158,58,16,.3)}
.ind2-card .lob,.acc-side .lob{margin-bottom:18px}

/* ============================================================
   PROBLEM opt2 — merged band with flowing connector lines
   ============================================================ */
.p2-merged{position:relative}
.p2-merged .p2-tag,.p2-merged .p2-chain{position:relative;z-index:1}
.p2-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.p2-links path{
  fill:none;stroke:url(#p2grad);stroke-width:1.7;
  stroke-dasharray:1 8;stroke-linecap:round;
  animation:p2flow 1.4s linear infinite;
}
@keyframes p2flow{to{stroke-dashoffset:-9}}
.p2-solidpart{
  position:relative;z-index:1;margin-top:112px;
  background:var(--pastel);border:1px solid var(--peach);border-radius:14px;
  padding:clamp(20px,2.8vw,30px);
}
@media (max-width:900px){
  .p2-links{display:none}
  .p2-solidpart{margin-top:26px}
}
@media (prefers-reduced-motion:reduce){.p2-links path{animation:none}}


/* p2 solid part — box removed, two-line tag */
.p2-solidpart{background:transparent;border:0;border-radius:0;padding:0;margin-top:96px}
.p2-merged .p2-solidpart .p2-tag{margin-bottom:28px}
.p2-tag2 b{display:block;color:var(--ink);font-weight:600}
.p2-tag2 em{display:block;font-style:normal;color:var(--or-deep);font-weight:600;margin-top:4px}



/* ============================================================
   INDUSTRY LOB SEGMENT CONTROLLER (static for now)
   ============================================================ */
.lobseg{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:22px 0 30px;
}
.lobseg .segbtn{
  padding:10px 18px;border-radius:100px;
  font-size:13.5px;font-weight:700;line-height:1.4;white-space:nowrap;
  color:var(--soft);background:var(--white);border:1px solid var(--hair-2);
  cursor:default;
}
.lobseg .segbtn.on{
  background:var(--or-fill);border-color:var(--or);color:#fff;
  box-shadow:0 6px 16px -6px rgba(206,69,17,.45);
}

/* ============================================================
   LUMIQ — tri-prong incubator (option E, locked)
   ============================================================ */
.lumtp .tp-grid{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(40px,5vw,84px);align-items:center;
}
.tp-copy h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:20px}
.tp-copy .lede{margin-bottom:16px}
.tp-copy .arrow-link{margin-top:14px}
.tri-wrap{position:relative;width:100%;max-width:600px;margin:0 auto;aspect-ratio:600/560;user-select:none}
.tri-svg{position:absolute;inset:0;width:100%;height:100%}
.tri-fill{fill:var(--pastel);stroke:var(--pastel);stroke-width:56;stroke-linejoin:round}
.tri-arc{
  fill:none;stroke:var(--or-soft);stroke-width:1.8;
  stroke-dasharray:5 6;stroke-linecap:round;
  animation:tpCrawl 1.6s linear infinite;
}
@keyframes tpCrawl{to{stroke-dashoffset:-11}}
.tri-arrow{fill:var(--or)}
.tri-spark{fill:var(--or);filter:drop-shadow(0 0 6px rgba(241,89,28,.8))}
.tri-vertex{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:var(--or);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--peach);
  transform:translate(-50%,-50%);z-index:2;
}
.tri-orb{
  position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);z-index:3;
  width:104px;height:104px;border-radius:50%;
  background:linear-gradient(140deg,#F76B2E,var(--or) 45%,var(--or-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.01em;
  box-shadow:0 18px 44px -12px rgba(206,69,17,.5);
}
.tri-orb::before,.tri-orb::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(241,89,28,.4);
  animation:tpRipple 3s linear infinite;
}
.tri-orb::after{animation-delay:1.5s}
@keyframes tpRipple{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.tri-node{position:absolute;z-index:2;max-width:250px}
.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:13px;line-height:1.55;color:var(--soft);display:block}
.tri-node.em b{color:var(--or-deep)}
.n-top{left:50%;bottom:calc(100% - 12.5%);transform:translateX(-50%);text-align:center;padding-bottom:16px;width:260px}
.n-left{right:calc(100% - 17%);top:76%;text-align:right;padding-right:18px;width:230px}
.n-right{left:calc(100% - 20%);top:76%;text-align:left;padding-left:18px;width:230px}
@media (max-width:960px){
  .lumtp .tp-grid{grid-template-columns:1fr;gap:40px}
  .lumtp .tp-copy{text-align:center}
  .tri-wrap{max-width:480px}
  .tri-node b{font-size:14.5px}
  .tri-node span{font-size:12px}
  .n-left{width:180px}
  .n-right{width:180px}
}
@media (prefers-reduced-motion:reduce){
  .tri-arc,.tri-orb::before,.tri-orb::after{animation:none}
}

/* ============================================================
   SECURE AND COMPLIANT (above footer)
   ============================================================ */
.seccomp{padding:clamp(70px,8vw,110px) 0;border-top:1px solid var(--hair)}
.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,48px);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:860px){
  .sc-grid{grid-template-columns:1fr;gap:40px}
  .sc-copy{text-align:center}
  .sc-badges{gap:20px}
  .sc-badges img{max-height:104px}
}

/* ══════════════════════════════════════════════════════════════════════
   Narrow phones. The v2 build stopped adapting below 760px, so on a
   360px screen the code band's pills and the absolutely-positioned
   triangle labels pushed the page ~84px wider than the viewport.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:560px){
  /* the pills were nowrap, so one long label set the page width */
  .c3-node{white-space:normal;font-size:13px;padding:9px 13px}
  /* the triangle diagram stacks instead of being pinned around a shape */
  .tri-wrap{max-width:100%}
  .tri-node{position:static;max-width:100%;margin:0 0 16px}
  .tri-node b{font-size:14px}
}

/* fluid.js sizes this canvas from a device-pixel calculation that can land
   a few px wider than the viewport on small screens; clip it rather than
   let the whole page scroll sideways */
.fm3-canvas{max-width:100%}
footer.fm3{overflow:hidden}


/* ============================================================
   ROUND 2 — subtle hero points line, LITECONE case fix, mini logo
   ============================================================ */
.hero-points{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  row-gap:6px;margin-top:24px;
  animation:rise .8s var(--e) .4s both;
}
.hero-points span{
  font-size:12px;font-weight:600;letter-spacing:.01em;
  color:var(--faint);white-space:nowrap;
}
.hero-points span:not(:last-child)::after{
  content:"\2022";margin:0 10px;color:var(--or-soft);font-weight:700;
}
.hero3-copy .hero-points,.hero4-side .hero-points{justify-content:flex-start}
.hero2-copy .hero-points span{color:rgba(255,240,230,.45)}
.hero2-copy .hero-points span:not(:last-child)::after{color:rgba(241,89,28,.7)}
@media (max-width:760px){
  .hero-points{justify-content:center!important;margin-top:18px}
  .hero-points span{font-size:11.5px}
}

/* fix: "With LiteCone" must not inherit the uppercase transform from .p2-tag */
.p2-tag2{text-transform:none;letter-spacing:normal}
.p2-tag2 b{font-size:14.5px}
.p2-tag2 em{font-size:14.5px}

/* LiteCone mark centered above the rotating-worker avatar pill */
.p2-ownerwrap{position:relative;flex:none}
.p2-logo{
  position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translateX(-50%);
  height:14px;width:auto;opacity:.75;
}


/* ══════════════════════════════════════════════════════════════════════
   Dark theme, component level. The tokens live in home.css; these rules
   have to sit in this file because it loads second and would otherwise
   win them straight back — the logo swap below is exactly that case.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
  body{background:#0A0A0A}

  /* the logo pair flips with the theme, as it does site-wide */
  .brand .lg-light{display:none}
  .brand .lg-dark{display:block}

  /* shadows were tuned for ink on paper; on a dark ground they read as
     haze unless they go black */
  .ov-panel,.pcard,.wcard,.ind2-card,.bcard,.chip,.ts,.triad-row,.icrew a{
    box-shadow:0 18px 44px -16px rgba(0,0,0,.7)}
}

/* The triangle's side labels are pinned outside the diagram at a fixed
   230px. Below 1180px the container has no room left for them, so they
   hung past the right edge — v2 only narrowed them at 960px, leaving a
   band of laptop widths scrolling sideways. The container caps at
   1180px plus gutters, so the labels only clear the viewport past
   roughly 1340px — that is where this band ends. */
@media(max-width:1340px) and (min-width:961px){
  .tri-wrap{max-width:520px}
  .n-right{left:calc(100% - 26%);width:180px}
  .n-left{right:calc(100% - 23%);width:180px}
}

/* ══════════════════════════════════════════════════════════════════════
   Phones. Three faults reported from a real device, none of which a
   page-width check can see:

   1. .p2-chain is an overflow-x:auto strip with its scrollbar hidden, so
      the five tools were cut mid-word — "Underwriting" lost 81px,
      "Fraud detection" 622px — with nothing to say it scrolled. It reads
      as a broken layout. It is a five-step sequence, so it stacks.
   2. The connector curves are drawn to each tool's measured position and
      never redraw on scroll, so with the tools off-screen the SVG drew
      lines into nowhere. Stacked, the connectors have nothing to join.
   3. The page ran to 14.8 screens on a 390px phone.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* 1 — the chain stacks, so every step is visible and nothing is cut.
     Set at 900, not 760: on a tablet the five tools still ran off, with
     "Fraud detection" cut by 276px at 768. */
  .p2-chain{flex-direction:column;align-items:stretch;overflow-x:visible;gap:0}
  .p2-tool{width:100%;text-align:center}
  .p2-gap{display:flex;justify-content:center;padding:6px 0}
  .p2-gap i{transform:rotate(90deg)}
  .p2-gap::after{content:none}

  /* 2 — the curves join things that are no longer side by side */
  .p2-links{display:none}

  /* 3 — the band and its rhythm tighten up */
  .p2-band{padding:20px 16px;margin-bottom:22px}
  .p2-flow{flex-wrap:wrap;justify-content:center;gap:10px}
}


/* .seccomp is defined in this file, so the phone override has to live here
   too — the copy in home.css was losing to it on load order. */
@media(max-width:760px){
  .seccomp{padding:40px 0}
}

/* ══════════════════════════════════════════════════════════════════════
   Two more small-screen layouts that lost their meaning.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the assistant / co-decider comparison ──────────────────────────────
   A horizontal chain of nodes joined by dashes. Wrapped onto three lines
   the dashes pointed at nothing and the sequence stopped reading as one,
   which is how "the person is the queue" lost its point. Stacked, each
   step sits on its own line and the connector runs down between them. */
@media(max-width:760px){
  .c3-flow{flex-direction:column;align-items:stretch;gap:0}
  .c3-node{width:100%;text-align:center;white-space:normal}
  .c3-dash,.c3-solid{
    width:2px;height:22px;align-self:center;margin:7px 0;
    background-image:linear-gradient(180deg,currentColor 55%,transparent 0);
    background-size:2px 9px;background-repeat:repeat-y;
  }
  .c3-solid{background:linear-gradient(180deg,var(--or-soft),var(--or))}
  .c3-solid i{left:50%;margin-left:-4px;animation-name:none}
}

/* ── the LUMIQ triad ────────────────────────────────────────────────────
   The three labels are pinned around the triangle. They only clear it
   above about 900px: at 600px the left label sat 46px off the edge of
   the screen and the others ran over the artwork. Below that the labels
   stack under the drawing, where they can be read. */
@media(max-width:900px){
  .tri-wrap{max-width:420px}
  /* position:static alone was not enough — the pinned layout also carries a
     translateX(-50%) on the top label and a fixed 180px on the side ones,
     which left the top label 110px off the screen even once stacked */
  .tri-node,.tri-node.n-top,.tri-node.n-left,.tri-node.n-right{
    position:static;transform:none;width:100%;max-width:100%;
    left:auto;right:auto;top:auto;bottom:auto;
    margin:0 0 16px;padding:0;text-align:left}
  .tri-node b{font-size:15px}
  .tri-node span{font-size:13px}
  .tri-vertex{display:none}
  /* the drawing is absolutely positioned across the whole wrap, so once the
     labels flow normally they ran underneath it. It takes its own block
     above them and the wrap stops holding a fixed triangle ratio. */
  .tri-wrap{aspect-ratio:auto;display:flex;flex-direction:column;gap:22px}
  .tri-svg{position:relative;inset:auto;height:auto;aspect-ratio:600/460;order:-1}
}


/* Two leftovers from the pinned layouts, both of which have to be set in
   this file because it loads after home.css and was winning them back. */
@media(max-width:900px){
  /* the LUMIQ orb is absolute against the whole wrap, so once the labels
     flowed it landed on the first one. It sits on the drawing instead. */
  .tri-orb{position:static;order:-1;margin:-84px auto 0;left:auto;top:auto;transform:none}
}
@media(max-width:760px){
  /* the mark was pinned above the pill and covered the step above it. On a
     phone it is redundant anyway — the block is headed "With LiteCone" — and
     at 13px in low opacity it read as a rendering artefact. */
  .p2-logo{display:none}
  .p2-ownerwrap{display:flex;flex-direction:column;align-items:center;gap:0}
  /* .p2-line is flex:1 with a 2px height — fine across a row, but in a
     column it collapsed to 2x0 and the steps ran into each other */
  .p2-line{flex:none;width:2px;height:26px;
    background:linear-gradient(180deg,var(--or-soft),var(--or))}
  .p2-line i{left:50%;top:0;margin-left:-4.5px;margin-top:0}
}

/* Between the stacking breakpoint and a wide desktop the five tools sit in a
   row that does not quite fit — at 1024 "Fraud detection" was cut by 58px,
   again behind a hidden scrollbar. The row tightens instead of scrolling. */
@media(min-width:901px) and (max-width:1180px){
  .p2-tool{padding:9px 12px;font-size:13px}
  .p2-gap{min-width:20px;margin:0 6px}
}

/* ══════════════════════════════════════════════════════════════════════
   The LUMIQ triad on phones, second pass.

   The labels stack correctly, but a dashed arc still swept across them on
   a real device — a wide ellipse cutting through all three lines. The arcs
   are drawn in the SVG's own coordinate space, and once the element is
   given aspect-ratio with height:auto, Safari and Chrome do not agree on
   the box they paint into, so the arcs escaped it.

   The decoration goes on small screens: the triangle and the LUMIQ mark
   carry the idea, and the wrap clips anything that still tries to escape.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .tri-wrap{overflow:hidden}
  .tri-arc,.tri-spark,.tri-arrow{display:none}
  .tri-svg{aspect-ratio:600/400;overflow:hidden}
}

/* ── the Worker chips inside an industry panel ──────────────────────────
   .icrew is a wrapping flex row, so each chip sizes to its own label:
   "LEO / Life underwriting" took a full line while "RIO" and "AURA"
   paired up. Two even columns on a phone instead of a ragged mix. */
@media(max-width:760px){
  .icrew{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .icrew a{padding:8px 10px;min-width:0}
  .icrew img{width:30px;height:30px;flex:none}
  .icrew b{font-size:12px}
  .icrew em{font-size:11px;line-height:1.25}
}