/* ============================================================================
   PSL — shared inner-page components. Loads after sw.css; reuses its tokens
   (--ink, --bg, --bg2, --grn, --hair, --grad, etc.) and is fully theme-aware.
   ========================================================================== */

/* page hero */
.phero{position:relative;overflow:hidden;padding:72px 0 44px}
/* gap between a page hero and the first content section */
.phero + section.band{padding-top:40px}
.phero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 70% at 86% 0%,rgba(70,68,185,.08),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(25,230,196,.07),transparent 60%)}
html.dark .phero::before{background:radial-gradient(60% 70% at 86% 0%,rgba(70,68,185,.22),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(25,230,196,.12),transparent 60%)}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(31px,4.1vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.02;max-width:18ch;text-wrap:balance}
.phero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html.dark .phero h1 .g{background:var(--grad-bri);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phero .lede{margin-top:20px;font-size:17px;line-height:1.6;color:var(--soft);max-width:60ch}
.phero .lede b{color:var(--ink);font-weight:600}
.phero .cta{margin-top:28px;display:flex;gap:13px;flex-wrap:wrap;align-items:center}

/* generic prose lead block */
.prose{max-width:760px}
.prose p{font-size:17px;line-height:1.62;color:var(--ink2)}
.prose p + p{margin-top:16px}
.prose .em{color:var(--ink);font-weight:600}

/* three rings as plain questions */
.lead,.phero .lede,.prose p{text-wrap:balance}
.ringq{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.ringq .q{border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel);padding:26px;transition:transform .28s,box-shadow .28s,border-color .28s;position:relative}
.ringq .q::after{content:"\203A";position:absolute;top:20px;right:22px;font-size:22px;line-height:1;color:var(--faint);transition:transform .3s ease,color .3s ease}
.ringq .q:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--rc,var(--grn)) 55%,var(--hair))}
.ringq .q:hover::after,.ringq .q.on::after{color:var(--rc,var(--grn))}
.ringq .q.on::after{transform:rotate(90deg)}
.ringq-static .q{cursor:default}
.ringq-static .q::after{display:none}
.ringq-static .q:hover{transform:none;box-shadow:var(--sh-sm);border-color:var(--hair)}
.ringq .q .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ringq .q .nm{font-size:18px;font-weight:760;letter-spacing:-.01em}
.ringq .q .ask{font-size:15.5px;color:var(--ink2);line-height:1.5}
.ringq .q .above{margin-top:12px;display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grn-d);background:var(--tint);border-radius:999px;padding:4px 9px}

/* where we fit — comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.compare .col{border:1px solid var(--hair);border-radius:var(--r-lg);padding:30px;background:var(--panel)}
.compare .col.psl{border-color:transparent;background:linear-gradient(160deg,rgba(25,230,196,.10),rgba(70,68,185,.08));box-shadow:var(--sh)}
.compare .tag{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.compare .col.psl .tag{color:var(--grn-d)}
.compare h3{font-size:21px;font-weight:760;letter-spacing:-.018em;line-height:1.15}
.compare p{margin-top:12px;color:var(--ink2);font-size:15px;line-height:1.6}
.reframe{margin-top:40px;text-align:center;font-size:clamp(19px,2.3vw,27px);font-weight:700;letter-spacing:-.022em;line-height:1.34;max-width:none;margin-left:auto;margin-right:auto;text-wrap:nowrap}
.reframe br{display:block}
@media(max-width:560px){.reframe{font-size:18px;text-wrap:balance;max-width:26ch}}
.reframe .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html.dark .reframe .g{background:var(--grad-bri);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* engagement ladder */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
#ladderFlip{margin-bottom:30px}
.tier{position:relative;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel);padding:28px;display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s,border-color .28s}
.tier:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.tier.feature{border-color:transparent;box-shadow:0 0 0 1.5px var(--grn),var(--sh)}
.tier .step-no{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.tier h3{font-size:21px;font-weight:780;letter-spacing:-.02em;margin-top:8px}
.tier .price{font-family:var(--mono);font-size:12px;color:var(--grn-d);margin-top:6px}
.tier .wi{margin-top:14px;color:var(--soft);font-size:14.5px;line-height:1.55}
.tier .yg{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);font-size:14px;color:var(--ink2);line-height:1.55}
.tier .yg b{color:var(--ink);font-weight:650}
.ladder-rel{margin-top:24px;text-align:center;color:var(--soft);font-size:15px;max-width:74ch;margin-left:auto;margin-right:auto}

/* engagement ladder — 3D flip cards */
.tier-flip{perspective:1400px}
.tier-inner{position:relative;width:100%;min-height:360px;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,.1,.2,1);transition-delay:var(--fd,0ms)}
body.js .tier-flip .tier-inner{transform:rotateY(0)}
body.js .tier-flip.in .tier-inner{transform:rotateY(180deg)}
.tier-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel);padding:28px;display:flex;flex-direction:column}
.tier-front{align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,var(--panel),var(--bg2));overflow:hidden}
.tier-front .tf-num{font-size:130px;font-weight:800;letter-spacing:-.05em;line-height:.8;color:var(--hair);opacity:.85}
html.dark .tier-front .tf-num{color:rgba(255,255,255,.12)}
.tier-front .tf-lab{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grn-d);margin-top:14px}
html.dark .tier-front .tf-lab{color:var(--grn-bri)}
.tier-back{transform:rotateY(180deg)}
.tier-flip.feature .tier-back,.tier-flip.feature .tier-front{border-color:transparent;box-shadow:0 0 0 1.5px var(--grn),var(--sh)}
.tier-flip .tier-back .step-no{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.tier-flip .tier-back h3{font-size:21px;font-weight:780;letter-spacing:-.02em;margin-top:8px}
.tier-flip .tier-back .price{font-family:var(--mono);font-size:12px;color:var(--grn-d);margin-top:6px}
html.dark .tier-flip .tier-back .price{color:var(--grn-bri)}
.tier-flip .tier-back .wi{margin-top:14px;color:var(--soft);font-size:14.5px;line-height:1.55}
.tier-flip .tier-back .yg{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);font-size:14px;color:var(--ink2);line-height:1.55}
.tier-flip .tier-back .yg b{color:var(--ink);font-weight:650}
/* tier flip plays on all devices (brand-owner request) */

/* what we do — re-baseline draw-in chart */
.replay-card{position:absolute;right:12px;bottom:12px;z-index:6;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--soft);background:color-mix(in srgb,var(--panel) 78%,transparent);border:1px solid var(--hair);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:.55;transition:opacity .2s,color .2s,border-color .2s,transform .2s}
.step-visual:hover .replay-card,.gfx-frame:hover .replay-card,.replay-card:focus-visible{opacity:1}
.om-embed.noshadow{box-shadow:none}
.replay-card:hover{color:var(--ink);border-color:color-mix(in srgb,var(--grn) 55%,var(--hair));transform:translateY(-1px)}
.replay-card svg{width:15px;height:15px}
.replay-card.spin svg{animation:replaySpin .7s cubic-bezier(.4,0,.2,1)}
@keyframes replaySpin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.replay-card.spin svg{animation:none}}
.wd-chart .draw{stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 1.4s cubic-bezier(.45,.05,.2,1)}
.step.rp-instant *,.step.rp-instant *::before,.step.rp-instant *::after{transition:none!important;animation:none!important}
.wd-chart .draw.d2{transition-duration:1.5s;transition-delay:.9s}
.step.in .wd-chart .draw{stroke-dashoffset:0}
.wd-chart .endpt{opacity:0;transition:opacity .4s ease 2.1s}
.step.in .wd-chart .endpt{opacity:1}
.wd-chart .endpulse{opacity:0;transform-box:fill-box;transform-origin:center}
.step.in .wd-chart .endpulse{animation:wdPulse 2s ease-out 2.2s infinite}
@keyframes wdPulse{0%{opacity:.5;transform:scale(.5)}100%{opacity:0;transform:scale(2.4)}}
/* draw-in chart animates on all devices (brand-owner request) */

/* what we are / are not */
.isnot{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.isnot .box{border:1px solid var(--hair);border-radius:var(--r-lg);padding:30px;background:var(--panel);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.isnot .box.is{border-color:transparent;background:linear-gradient(165deg,rgba(70,68,185,.12),rgba(37,99,235,.05));box-shadow:inset 0 0 0 1px rgba(70,68,185,.24)}
.isnot .box.not{border-color:transparent;background:linear-gradient(165deg,rgba(127,127,140,.12),rgba(127,127,140,.04));box-shadow:inset 0 0 0 1px rgba(127,127,140,.2)}
html.dark .isnot .box.is{background:linear-gradient(165deg,rgba(91,89,242,.2),rgba(37,99,235,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(91,89,242,.34)}
html.dark .isnot .box.not{background:linear-gradient(165deg,rgba(160,165,185,.14),rgba(127,127,140,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(160,165,185,.22)}

/* good-fit / not-a-fit — brand-tinted, subtle, no green/red */
.fitset .box,html.dark .fitset .box{border:1px solid var(--hair);box-shadow:none}
.fitset .box.is,html.dark .fitset .box.is{border-color:transparent;background:linear-gradient(165deg,rgba(70,68,185,.12),rgba(37,99,235,.05));box-shadow:inset 0 0 0 1px rgba(70,68,185,.24)}
.fitset .box.not,html.dark .fitset .box.not{border-color:transparent;background:linear-gradient(165deg,rgba(127,127,140,.12),rgba(127,127,140,.04));box-shadow:inset 0 0 0 1px rgba(127,127,140,.2)}
html.dark .fitset .box.is{background:linear-gradient(165deg,rgba(91,89,242,.2),rgba(37,99,235,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(91,89,242,.34)}
html.dark .fitset .box.not{background:linear-gradient(165deg,rgba(160,165,185,.14),rgba(127,127,140,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(160,165,185,.22)}
.fitset .box.is h3,.fitset .box.not h3,.isnot.fitset .box.is h3,.isnot.fitset .box.not h3{color:var(--ink)}
.fitset .box.is .ic,.fitset .box.not .ic{box-shadow:none}
.fitset .box.is .ic{background:var(--indigo);color:#fff}
.fitset .box.not .ic{background:transparent;color:var(--faint)}
.fitset .box.not .ic svg{stroke-width:2.6}
.fitset h3 .fit-ic{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.fitset h3 .fit-ic svg{width:14px;height:14px}
.fitset h3 .fit-ic.ok{background:rgba(70,68,185,.14);color:var(--indigo)}
html.dark .fitset h3 .fit-ic.ok{color:#9b99ff}
.fitset h3 .fit-ic.no{background:var(--bg2);color:var(--faint)}
.isnot .box.is h3{color:var(--ink)}
.isnot .box.not h3{color:var(--ink)}
.isnot .box h3{font-size:17px;font-weight:760;display:flex;align-items:center;gap:9px;margin-bottom:16px}
.isnot ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.isnot li{display:flex;gap:11px;font-size:15px;color:var(--ink2);line-height:1.5}
.isnot .ic{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;box-shadow:none}
.isnot .is .ic{background:rgba(70,68,185,.14);color:var(--indigo)}
html.dark .isnot .is .ic{color:#9b99ff}
.isnot .not .ic{background:var(--bg2);color:var(--faint)}
.isnot .ic svg{width:13px;height:13px;stroke-width:3}

/* faq */
.faq{max-width:780px;margin:40px auto 0;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:20px 4px;font-size:16.5px;font-weight:650;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{position:relative;width:16px;height:16px;flex-shrink:0}
.faq summary .pl::before,.faq summary .pl::after{content:"";position:absolute;background:var(--grn-d);border-radius:2px;transition:transform .3s,opacity .3s}
.faq summary .pl::before{top:7px;left:0;width:16px;height:2px}
.faq summary .pl::after{top:0;left:7px;width:2px;height:16px}
.faq details[open] summary .pl::after{transform:scaleY(0);opacity:0}
.faq .a{padding:0 4px 20px;font-size:15px;line-height:1.62;color:var(--soft);max-width:64ch}

/* insights article cards */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.art{border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);display:flex;flex-direction:column;transition:transform .26s,box-shadow .26s}
.art:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.art .thumb{height:168px;position:relative;overflow:hidden;background:var(--bg2)}
.art .thumb.cover{background:#0A0E20}
.art .thumb.cover svg{display:block;width:100%;height:100%}
.art .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.art .thumb-hero{background:radial-gradient(80% 70% at 50% 38%,#f4f5f7,#d3d7de)}
.art .thumb-hero img{object-fit:cover;object-position:center 22%;filter:none}
html.dark .art .thumb-hero{background:radial-gradient(80% 70% at 50% 38%,#eef0f3,#c8ccd4)}
.art .thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,rgba(25,230,196,.16),rgba(70,68,185,.16))}
.art .badge{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;background:var(--bg);border:1px solid var(--hair);border-radius:999px;padding:4px 10px;color:var(--ink2)}
.art .ab{padding:22px;display:flex;flex-direction:column;flex:1}
.art .ring-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grn-d);margin-bottom:9px}
.art .meta{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.art .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.art h3{font-size:18px;font-weight:720;letter-spacing:-.012em;line-height:1.25}
.art p{margin-top:10px;color:var(--soft);font-size:14px;line-height:1.55}
.art .go{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:650;color:var(--ink);display:inline-flex;gap:7px}
.art .go .ar{transition:.25s}.art:hover .go .ar{transform:translateX(4px)}
/* insights: richer reveal + spacing */
.arts{gap:22px}
body.js .arts .art.rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
body.js .arts .art.rv.in{opacity:1;transform:none}
.art-more{display:flex;align-items:center;justify-content:center;text-align:center;border-style:dashed;background:transparent}
.art-more .ab{align-items:center;flex:none;padding:30px}
.art-more .more-mark{display:flex;gap:6px;margin-bottom:16px}
.art-more .more-mark span{width:9px;height:9px;border-radius:50%;background:var(--grn);opacity:.4;animation:moredot 1.4s ease-in-out infinite}
.art-more .more-mark span:nth-child(2){animation-delay:.2s}
.art-more .more-mark span:nth-child(3){animation-delay:.4s}
@keyframes moredot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.art-more h3{font-size:18px;font-weight:740;letter-spacing:-.012em}
.art-more p{margin-top:8px;color:var(--soft);font-size:14px;line-height:1.5;max-width:30ch}
.art-more .go{margin-top:14px;color:var(--grn-d);font-weight:650;font-size:13.5px;display:inline-flex;gap:7px}
@media (prefers-reduced-motion:reduce){.art-more .more-mark span{animation:none}}

/* method-agnostic + research-backed (merged two-column) */
.mrtwo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.mrcol{border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel);padding:30px}
.mrcol .mrhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mrcol .mrnum{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--grn-d);background:var(--tint);border-radius:8px;padding:5px 9px}
.mrcol .mrhead h3{font-size:19px;font-weight:760;letter-spacing:-.016em}
.mrcol p{color:var(--ink2);font-size:15px;line-height:1.6}
.mrchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.mrchips .chip{opacity:1;transform:none}
body.js .mrcol.in .mrchips .chip{animation:mrchip .5s cubic-bezier(.2,.7,.2,1) both}
body.js .mrchips .chip{opacity:0}
.mrcol.in .mrchips .chip:nth-child(1){animation-delay:.05s}
.mrcol.in .mrchips .chip:nth-child(2){animation-delay:.11s}
.mrcol.in .mrchips .chip:nth-child(3){animation-delay:.17s}
.mrcol.in .mrchips .chip:nth-child(4){animation-delay:.23s}
.mrcol.in .mrchips .chip:nth-child(5){animation-delay:.29s}
.mrcol.in .mrchips .chip:nth-child(6){animation-delay:.35s}
.mrcol.in .mrchips .chip:nth-child(7){animation-delay:.41s}
.mrcol.in .mrchips .chip:nth-child(8){animation-delay:.47s}
.mrcol.in .mrchips .chip:nth-child(9){animation-delay:.53s}
.mrcol.in .mrchips .chip:nth-child(10){animation-delay:.59s}
.mrcol.in .mrchips .chip:nth-child(11){animation-delay:.65s}
.mrcol.in .mrchips .chip:nth-child(12){animation-delay:.71s}
@keyframes mrchip{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:760px){.mrtwo{grid-template-columns:1fr}}
/* methodology chips get a distinct button-style treatment */
.mrchips.method .chip{background:var(--tint);border-color:color-mix(in srgb,var(--grn) 38%,var(--hair));color:var(--grn-d);font-weight:600;font-family:var(--mono);font-size:13px;letter-spacing:-.01em}
html.dark .mrchips.method .chip{color:var(--grn);background:color-mix(in srgb,var(--grn) 14%,transparent)}
/* research chips in blue, distinct from green methods */
.mrchips.research .chip{background:rgba(79,79,255,.1);border-color:color-mix(in srgb,#4F4FFF 38%,var(--hair));color:#3a38c4;font-weight:600;font-family:var(--mono);font-size:13px;letter-spacing:-.01em}
html.dark .mrchips.research .chip{color:#9b99ff;background:rgba(79,79,255,.16)}
.mrcol.b2 .mrnum{color:#3a38c4;background:rgba(79,79,255,.1)}
html.dark .mrcol.b2 .mrnum{color:#9b99ff;background:rgba(79,79,255,.18)}
@media (prefers-reduced-motion:reduce){body.js .mrchips .chip{opacity:1!important;animation:none!important}}
.who{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.who .chip{border:1px solid var(--hair);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:550;color:var(--ink2);background:var(--panel)}

/* simple media frame */
.media-frame{border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);background:#0E1430;margin-top:8px}
.media-frame video,.media-frame img{display:block;width:100%;height:auto}
.placeholder-note{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--faint);text-align:center}

/* build-it-on-claude placeholder block */
.tbd{border:1px dashed var(--hair);border-radius:var(--r-lg);background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(127,127,140,.05) 12px 24px);padding:30px;text-align:center;color:var(--soft)}
.tbd .t{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grn-d);margin-bottom:8px}
.tbd p{font-size:14px;max-width:48ch;margin:0 auto}

/* embedded interactive graphic (iframe) */
.om-embed{position:relative;border-radius:16px;box-shadow:var(--sh);overflow:hidden;background:var(--panel)}
.om-embed iframe{display:block;width:100%;aspect-ratio:540/300;border:0;background:transparent;overflow:hidden}
.gfx-frame{position:relative;border-radius:16px;box-shadow:var(--sh);overflow:hidden;background:var(--panel)}
.gfx-frame iframe{display:block;width:100%;border:0;background:transparent}
.gfx-frame.wherefit{background:transparent;box-shadow:none;border-radius:0}
.gfx-frame.wherefit iframe{aspect-ratio:1080/196;border-radius:16px;filter:drop-shadow(0 10px 24px rgba(20,30,55,.10))}
#wherefit-gfx iframe{aspect-ratio:1080/200}
.ins-embed{margin-top:44px}
.ins-embed iframe{display:block;width:100%;height:800px;border:0;background:transparent}
@media (max-width:820px){.ins-embed iframe{height:1480px}}

/* four-pill differentiation strip */
.fourpill{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.fourpill .fp{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--hair);border-radius:999px;padding:9px 17px 9px 13px;font-size:14px;font-weight:600;color:var(--ink2);background:var(--panel)}
.fourpill .fp .d{width:8px;height:8px;border-radius:50%;background:var(--grn-bri);flex-shrink:0}

/* about — origin timeline + story */
.origin{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;margin-top:8px}
.origin .ocopy p{font-size:16px;line-height:1.65;color:var(--ink2)}
.origin .ocopy p + p{margin-top:14px}
.origin .ocopy .em{color:var(--ink);font-weight:650}
.exp-tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.exp-h{width:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.exp-tag{font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--bg2);border:1px solid var(--hair);border-radius:999px;padding:6px 13px}
html.dark .exp-tag{background:rgba(255,255,255,.05)}
.tl{position:relative;padding-left:42px}
.tl-item{position:relative;padding:0 0 32px}
.tl-item:last-child{padding-bottom:0}
/* connecting line: starts BELOW the orb so it never shows through the glass */
.tl-item::after{content:"";position:absolute;left:-29.5px;top:24px;bottom:-3px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--c,#19E6C4) 0%,color-mix(in srgb,var(--c,#19E6C4) 10%,transparent) 100%);transform:scaleY(0);transform-origin:top}
.tl-item:last-child::after{display:none}
/* transparent glass sphere orb (real element so it can carry meridians) */
.tl-orb{position:absolute;left:-41px;top:0;width:26px;height:26px;border-radius:50%;z-index:2;perspective:170px}
/* rotating wireframe globe: 4 great-circle rings spinning in 3D at offset phases, so nothing is fixed */
.tl-orb::before,.tl-orb::after,.tl-mer,.tl-mer2{content:"";position:absolute;inset:0;border-radius:50%;border:1.4px solid var(--c,#19E6C4)}
/* spinning vertical meridians */
.tl-mer,.tl-mer2{animation:tlSpin 7s linear infinite}
.tl-mer2{animation-delay:-1.75s}
/* static horizontal latitudes (equator + tropic arcs) */
.tl-orb::before{transform:scaleY(.52)}
.tl-orb::after{transform:scaleY(.08)}
@keyframes tlSpin{to{transform:rotateY(360deg)}}
/* armed: ball slides in from the side first; text waits for the line draw */
.tl.tl-armed .tl-item{opacity:1}
.tl.tl-armed .tl-orb{opacity:0;transition:transform .85s cubic-bezier(.2,.8,.3,1),opacity .55s ease}
.tl.tl-armed .tl-item:nth-child(odd) .tl-orb{transform:translateX(-86px)}
.tl.tl-armed .tl-item:nth-child(even) .tl-orb{transform:translateX(86px)}
.tl.tl-armed .tl-item .yr,.tl.tl-armed .tl-item h4,.tl.tl-armed .tl-item p{opacity:0;transform:translateY(-14px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
.tl.tl-armed .tl-item::after{transition:transform .8s cubic-bezier(.4,0,.2,1)}
/* lit = the ball bounces in from the side (overshoots settling, faster each bounce) */
.tl.tl-armed .tl-item.lit .tl-orb{opacity:1;transform:none}
.tl.tl-armed .tl-item.lit:nth-child(odd) .tl-orb{animation:tlBallInL 1.45s both}
.tl.tl-armed .tl-item.lit:nth-child(even) .tl-orb{animation:tlBallInR 1.45s both}
@keyframes tlBallInL{0%{transform:translate(-132px,-46px);animation-timing-function:cubic-bezier(.46,0,1,.46)}28%{transform:translate(-52px,0);animation-timing-function:cubic-bezier(0,.54,.54,1)}45%{transform:translate(-22px,-28px);animation-timing-function:cubic-bezier(.46,0,1,.46)}60%{transform:translate(0,0);animation-timing-function:cubic-bezier(0,.54,.54,1)}72%{transform:translate(0,-13px);animation-timing-function:cubic-bezier(.46,0,1,.46)}82%{transform:translate(0,0);animation-timing-function:cubic-bezier(0,.54,.54,1)}89%{transform:translate(0,-5px);animation-timing-function:cubic-bezier(.46,0,1,.46)}95%{transform:translate(0,0);animation-timing-function:cubic-bezier(0,.54,.54,1)}98%{transform:translate(0,-2px);animation-timing-function:cubic-bezier(.46,0,1,.46)}100%{transform:translate(0,0)}}
@keyframes tlBallInR{0%{transform:translate(132px,-46px);animation-timing-function:cubic-bezier(.46,0,1,.46)}28%{transform:translate(52px,0);animation-timing-function:cubic-bezier(0,.54,.54,1)}45%{transform:translate(22px,-28px);animation-timing-function:cubic-bezier(.46,0,1,.46)}60%{transform:translate(0,0);animation-timing-function:cubic-bezier(0,.54,.54,1)}72%{transform:translate(0,-13px);animation-timing-function:cubic-bezier(.46,0,1,.46)}82%{transform:translate(0,0);animation-timing-function:cubic-bezier(0,.54,.54,1)}89%{transform:translate(0,-5px);animation-timing-function:cubic-bezier(.46,0,1,.46)}95%{transform:translate(0,0);animation-timing-function:cubic-bezier(0,.54,.54,1)}98%{transform:translate(0,-2px);animation-timing-function:cubic-bezier(.46,0,1,.46)}100%{transform:translate(0,0)}}
/* drawn = the line draws down; text appears a touch earlier (2nd bounce) via .txt */
.tl.tl-armed .tl-item.drawn::after{transform:scaleY(1)}
.tl.tl-armed .tl-item.txt .yr,.tl.tl-armed .tl-item.txt h4,.tl.tl-armed .tl-item.txt p{opacity:1;transform:none}
.tl.tl-armed .tl-item.txt h4{transition-delay:.08s}
.tl.tl-armed .tl-item.txt p{transition-delay:.16s}
/* mission node: bigger, bounces on landing, then pulses */
.tl-item.tl-goal{padding-top:4px}
.tl-item.tl-goal .tl-orb{width:28px;height:28px;left:-42px;background:radial-gradient(circle at 38% 32%,color-mix(in srgb,#F4A65B 52%,transparent) 0%,color-mix(in srgb,#F4A65B 36%,transparent) 68%,color-mix(in srgb,#E0822C 30%,transparent) 100%)}
/* mission node = basketball: transparent orange fill + dark seam lines */
.tl-item.tl-goal .tl-orb::before,.tl-item.tl-goal .tl-orb::after,.tl-item.tl-goal .tl-mer,.tl-item.tl-goal .tl-mer2{border-color:rgba(38,18,2,.5)}
/* dark mode: more solid orange basketball, original dark seam lines */
html.dark .tl-item.tl-goal .tl-orb{background:radial-gradient(circle at 38% 32%,#FFC287 0%,#F4A65B 60%,#D9822E 100%)}
html.dark .tl-item.tl-goal .tl-orb::before,html.dark .tl-item.tl-goal .tl-orb::after,html.dark .tl-item.tl-goal .tl-mer,html.dark .tl-item.tl-goal .tl-mer2{border-color:rgba(38,18,2,.5)}
/* mission ball uses the shared bounce-in (it is the last, odd, so from the left) */
.tl-item.tl-goal .yr{font-size:12px}
.tl-item.tl-goal h4{font-size:20px}
@keyframes tlGoalBounce{0%{transform:scale(.001)}40%{transform:scale(1.3)}55%{transform:scale(.86)}68%{transform:scale(1.14)}80%{transform:scale(.94)}90%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes tlGoalPulse{0%,100%{box-shadow:0 0 0 4px var(--bg),0 0 0 5px transparent}50%{box-shadow:0 0 0 4px var(--bg),0 0 0 10px color-mix(in srgb,var(--c) 24%,transparent)}}
/* About timeline animates on all devices (brand-owner request) */
.tl-item .yr{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c,var(--grn-d))}
.tl-item h4{font-size:17px;font-weight:720;letter-spacing:-.012em;margin-top:4px}
.tl-item p{font-size:14px;line-height:1.55;color:var(--soft);margin-top:6px;max-width:42ch}

/* about — stat band */
.abstats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.abstat{text-align:center;padding:8px}
.abstat .n{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:.9;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html.dark .abstat .n{background:var(--grad-bri);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.abstat .t{margin-top:10px;font-size:14.5px;color:var(--ink2);line-height:1.45}

/* about — roots / disciplines */
.roots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.root{border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel);padding:24px;transition:transform .26s,box-shadow .26s}
.root:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.root .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--grn-d);margin-bottom:14px}
html.dark .root .ic{color:var(--grn-bri)}
.root .ic svg{width:22px;height:22px}
.root h4{font-size:17px;font-weight:720;letter-spacing:-.012em}
.root p{font-size:14px;line-height:1.55;color:var(--soft);margin-top:8px}
@media(max-width:820px){.origin{grid-template-columns:1fr;gap:30px}.abstats,.roots{grid-template-columns:1fr}}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-top:8px}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:18px}}
.contact-card{border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel);padding:30px}
.contact-card h2{font-size:21px;font-weight:760;letter-spacing:-.018em}
.contact-card p.sub{margin-top:8px;color:var(--soft);font-size:14.5px;line-height:1.55}
.cform{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.cfield{display:flex;flex-direction:column;gap:6px}
.cfield label{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.cfield input,.cfield select,.cfield textarea{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--hair);border-radius:10px;padding:11px 13px;outline:none;transition:border-color .18s,box-shadow .18s;width:100%}
.cfield textarea{min-height:108px;resize:vertical}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{border-color:var(--grn);box-shadow:0 0 0 3px var(--tint)}
.cform .btn{margin-top:4px;justify-content:center}
.cform-note{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:center}
.cside{display:flex;flex-direction:column;gap:16px}
.cway{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel);padding:22px;text-decoration:none;color:inherit;transition:transform .26s,box-shadow .26s,border-color .26s}
.cway:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--grn) 45%,var(--hair))}
.cway .ic{width:42px;height:42px;border-radius:11px;background:var(--tint);color:var(--grn-d);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cway .ic svg{width:21px;height:21px}
.cway h3{font-size:16.5px;font-weight:720;letter-spacing:-.01em}
.cway p{margin-top:5px;color:var(--soft);font-size:13.5px;line-height:1.5}
.cway .go{margin-top:8px;font-size:13.5px;font-weight:650;color:var(--grn-d);display:inline-flex;gap:6px}
html.dark .cway .go,html.dark .cway .ic{color:var(--grn-bri)}
.cform-ok{display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 10px}
.cform-ok.show{display:flex}
.cform-ok .tick{width:48px;height:48px;border-radius:50%;background:var(--tint);color:var(--grn-d);display:flex;align-items:center;justify-content:center}
.cform-ok .tick svg{width:24px;height:24px}
.cform-ok h3{font-size:19px;font-weight:760}
.cform-ok p{color:var(--soft);font-size:14.5px;max-width:34ch}

/* interactive rings (How We Work §2) */
.ringq .q{cursor:pointer;outline:none}
.ringq .q::after{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--bg2);border:1px solid var(--hair);top:18px;right:18px;font-size:15px;color:var(--rc,var(--soft))}
.ringq .q.on::after,.ringq .q:hover::after{background:var(--rc,var(--grn));border-color:transparent;color:#fff}
.ringq .q.on::after{transform:rotate(90deg)}
.ringq .q.on{border-color:transparent;box-shadow:0 0 0 1.5px var(--rc,var(--grn)),var(--sh);transform:translateY(-4px)}
.ringq .q .tap{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--rc,var(--grn));opacity:.9;transition:opacity .25s}
.ringq .q.on .tap,.ringq .q:hover .tap{opacity:0;height:0;margin:0;overflow:hidden}
.ringq .q .tap .dot{width:6px;height:6px;border-radius:50%;background:var(--rc,var(--grn));animation:tapPulse 1.8s ease-in-out infinite}
@keyframes tapPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.ringq .q .meta{max-height:0;overflow:hidden;opacity:0;transition:max-height .36s ease,opacity .3s ease,margin-top .3s ease;margin-top:0}
.ringq .q.on .meta,.ringq .q:hover .meta{max-height:160px;opacity:1;margin-top:14px}
.ringq .q:hover .fill{width:var(--fillw,70%)}
.ringq .q .track{height:7px;border-radius:6px;background:var(--hair2);overflow:hidden}
.ringq .q .fill{height:100%;border-radius:6px;width:0;background:var(--rc,var(--grn));transition:width .9s cubic-bezier(.2,.7,.2,1)}
.ringq .q.on .fill{width:var(--fillw,70%)}
.ringq .q .shows{margin-top:10px;font-size:13px;color:var(--soft);line-height:1.5}
.ringq .q .shows b{color:var(--ink);font-weight:650}
.ringq .q[data-rc="identity"]{--rc:#8936FF}
.ringq .q[data-rc="execution"]{--rc:#19E6C4}
.ringq .q[data-rc="capacity"]{--rc:#4F4FFF}
.ring-hint{margin:22px auto 0;display:flex;width:max-content;max-width:100%;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;font-weight:500;color:var(--grn-d);background:var(--tint);border:1px solid color-mix(in srgb,var(--grn) 28%,transparent);border-radius:999px;padding:8px 16px;text-align:center}
.ring-hint svg{width:15px;height:15px;flex-shrink:0}
html.dark .ring-hint{color:var(--grn-bri)}

/* §2 rings — STATIC OPEN (no interactivity) */
#ringq .q{cursor:default!important;transform:none!important}
#ringq .q::after{display:none!important}
#ringq .q:hover{transform:none!important;box-shadow:var(--sh-sm)!important;border-color:color-mix(in srgb,var(--rc,var(--grn)) 45%,var(--hair))!important}
#ringq .q{box-shadow:var(--sh-sm);border-color:color-mix(in srgb,var(--rc,var(--grn)) 45%,var(--hair))}
#ringq .q .tap{display:none!important}
#ringq .q .meta{max-height:none!important;opacity:1!important;margin-top:14px!important;overflow:visible!important}
#ringq .q .fill{width:var(--fillw,70%)!important}

/* "What you get" static step cards — no interactivity, restyled to stand out */
.ringq-static{counter-reset:wyg}
.ringq-static .q{cursor:default!important;background:linear-gradient(165deg,rgba(25,230,196,.08),rgba(70,68,185,.05));border-color:transparent;box-shadow:inset 0 0 0 1px var(--hair);padding-top:30px}
html.dark .ringq-static .q{background:linear-gradient(165deg,rgba(25,230,196,.1),rgba(70,68,185,.08))}
.ringq-static .q::after{counter-increment:wyg;content:counter(wyg)!important;display:flex!important;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--grn)!important;border:0!important;color:#04231a!important;font-family:var(--sans);font-weight:800;font-size:14px;top:22px;right:22px;transform:none!important}
.ringq-static .q:hover{transform:none!important;box-shadow:inset 0 0 0 1px var(--hair)!important;border-color:transparent!important}
.ringq-static .q:hover::after{background:var(--grn)!important;color:#04231a!important}
.ringq-static .q .nm{color:var(--grn-d)}
html.dark .ringq-static .q .nm{color:var(--grn-bri)}
.ringq-static .q .meta,.ringq-static .q .tap{display:none!important}
/* dg-steps use the faded big-number bg instead of the counter circle */
.ringq.dg-steps .q{padding-top:26px}
.ringq.dg-steps .q::after{display:none!important;content:none!important}
.ringq.dg-steps .q .nm{color:var(--ink)}
html.dark .ringq.dg-steps .q .nm{color:var(--ink)}

/* inside vs outside diagram (placeholder, but functional) */
.io-diagram{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-top:36px;border:1px dashed var(--hair);border-radius:var(--r-lg);padding:26px;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(127,127,140,.04) 12px 24px)}
.io-side{text-align:center}
.io-ring{width:120px;height:120px;border-radius:50%;margin:0 auto 14px;position:relative;display:flex;align-items:center;justify-content:center}
.io-inside .io-ring{border:2px solid var(--hair);background:var(--panel)}
.io-inside .io-ring::before{content:"";position:absolute;inset:18px;border-radius:50%;border:1px dashed var(--faint)}
.io-inside .io-ring span{font-family:var(--mono);font-size:11px;color:var(--soft)}
.io-outside .io-ring{background:none}
.io-outside .io-ring .eye{width:120px;height:120px;border-radius:50%;border:2px solid var(--grn);position:relative}
.io-outside .io-ring .eye::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;border:2px solid var(--grn-bri);transform:translate(-50%,-50%)}
.io-side .lab{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.io-side .nm{font-size:15px;font-weight:700;color:var(--ink)}
.io-arrow{display:flex;align-items:center;justify-content:center;color:var(--grn);font-size:24px}
.io-note{grid-column:1 / -1;text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:6px}
@media (max-width:680px){.io-diagram{grid-template-columns:1fr}.io-arrow{transform:rotate(90deg)}}

/* diagnostic illustrative sample read */
.sampleread{max-width:520px;margin:34px auto 0;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel);overflow:hidden;box-shadow:var(--sh)}
.sampleread .sr-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--hair2);background:var(--bg2)}
.sampleread .sr-bar .d{width:8px;height:8px;border-radius:50%;background:var(--hair)}
.sampleread .sr-bar .t{margin-left:8px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.sampleread .sr-body{padding:22px}
.sr-m{margin-top:15px}.sr-m:first-child{margin-top:0}
.sr-m .sh{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px}
.sr-m .sh .nm{font-weight:600}.sr-m .sh .vv{font-family:var(--mono);font-size:11.5px;color:var(--soft)}
.sr-m .sh .vv.cstr{color:var(--red);font-weight:700}
.sr-m .tr{height:8px;border-radius:6px;background:var(--hair2);overflow:hidden}
.sr-m .fl{height:100%;border-radius:6px;width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.sampleread.in .fl{width:var(--w)}
.sr-cap{margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--faint);text-align:center}

/* diagnostic routing cards — EXACT original PSL design, themed background */
.dgband{--teal:#19E6C4;position:relative;font-family:var(--sans);background:transparent;padding:6px 0 0}
.dgband *{box-sizing:border-box}
.dgband .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dgband .solo{max-width:520px;margin:0 auto}
/* diagnostic hero: text left, clickable card right */
.diag-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
.diag-hero .dh-copy{max-width:520px}
.diag-hero .dgband{padding:0}
@media(max-width:980px){.diag-hero{grid-template-columns:1fr;gap:30px}.diag-hero .dgband{max-width:520px}}
.indiv-onramp{text-align:center;margin:14px auto 0;font-family:var(--mono);font-size:12.5px;color:var(--soft)}
.indiv-onramp a{color:#C8862E;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(200,134,46,.45);transition:text-decoration-color .2s,color .2s}
.indiv-onramp a:hover{color:#A66A1E;text-decoration-color:#C8862E}
html.dark .indiv-onramp a{color:#F4A65B;text-decoration-color:rgba(244,166,91,.5)}
html.dark .indiv-onramp a:hover{color:#FFC388}
.dgband .col{display:flex;flex-direction:column}
.dgband .card{position:relative;display:flex;flex-direction:column;flex:1;border-radius:22px;padding:24px;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.dgband .card.in{opacity:1;transform:none}
.dgband .card::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;opacity:0;transition:opacity .25s}
.dgband .card:hover::before{opacity:1}
.dgband .card::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;top:-85px;right:-65px;z-index:0;filter:blur(20px);opacity:.46}
.dgband .card>*{position:relative;z-index:1}
.dgband .card:active{transform:translateY(-2px) scale(.99)}
.dgband .indiv{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),linear-gradient(158deg,#3f73e0,#2b56ab 55%,#1f3f86);border:1.5px solid rgba(140,184,255,.55);box-shadow:0 28px 64px rgba(4,0,34,.45),inset 0 1px 0 rgba(255,255,255,.4),0 0 0 4px rgba(37,99,235,.1)}
.dgband .indiv::before{background:linear-gradient(180deg,rgba(59,130,246,.05),rgba(59,130,246,.2))}
.dgband .indiv::after{background:radial-gradient(circle,rgba(59,130,246,.6),transparent 70%)}
.dgband .indiv.in:hover{transform:translateY(-6px);border-color:#5B9BFF;box-shadow:0 44px 92px rgba(4,0,34,.66),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 5px rgba(37,99,235,.24),0 0 40px rgba(37,99,235,.4)}
.dgband .team{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),linear-gradient(158deg,#9462e6,#6f45b9 55%,#4f2f8e);border:1.5px solid rgba(198,156,255,.55);box-shadow:0 28px 64px rgba(4,0,34,.45),inset 0 1px 0 rgba(255,255,255,.4),0 0 0 4px rgba(137,54,255,.1)}
.dgband .team::before{background:linear-gradient(180deg,rgba(154,87,255,.05),rgba(154,87,255,.2))}
.dgband .team::after{background:radial-gradient(circle,rgba(154,87,255,.6),transparent 70%)}
.dgband .team.in:hover{transform:translateY(-6px);border-color:#A86EFF;box-shadow:0 44px 92px rgba(4,0,34,.66),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 5px rgba(137,54,255,.24),0 0 40px rgba(137,54,255,.42)}
.dgband .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px}
.dgband .pathhead{display:flex;align-items:center;gap:12px}
.dgband .pathicon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dgband .pathicon svg{width:22px;height:22px}
.dgband .indiv .pathicon{background:rgba(59,130,246,.2);border:1px solid rgba(80,150,255,.5);color:#8FB8FF}
.dgband .team .pathicon{background:rgba(154,87,255,.2);border:1px solid rgba(168,110,255,.5);color:#CBA4FF}
.dgband .pathlabel{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;line-height:1.2}
.dgband .indiv .pathlabel{color:#A6C8FF}.dgband .team .pathlabel{color:#D0B2FF}
.dgband .pathmeta{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.62);margin-top:3px}
.dgband .tr{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.dgband .samp{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 8px}
.dgband .samp-price{color:#BFF3E6;background:rgba(25,230,196,.16);border-color:rgba(25,230,196,.4);letter-spacing:.04em}
.dgband .ava{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.55)}
.dgband .clust{display:flex}
.dgband .clust .ava{margin-left:-11px;width:30px;height:30px}
.dgband .clust .ava:first-child{margin-left:0}
.dgband .clust .more{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.55);margin-left:-11px;background:rgba(13,0,66,.78);font-size:10px;font-weight:800;color:#fff}
.dgband .ttl{font-size:16.5px;font-weight:500;color:rgba(255,255,255,.95);margin:0 0 12px}
.dgband .res .n{font-size:42px;font-weight:800;line-height:.85;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.dgband .res .n small{font-size:14px;font-weight:600;color:rgba(255,255,255,.5)}
.dgband .conline{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.78);margin:6px 0 14px}
.dgband .conline b{color:#FF9D7A;font-weight:700}
.dgband .bench{margin:0 0 14px}
.dgband .bench-track{position:relative;height:6px;border-radius:5px;background:rgba(255,255,255,.13)}
.dgband .bench-band{position:absolute;top:0;bottom:0;border-radius:5px;background:rgba(63,227,200,.5);opacity:0;transition:opacity .5s ease .8s}
.dgband .bench-fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:5px;transition:width .9s cubic-bezier(.22,.61,.36,1) .3s}
.dgband .indiv .bench-fill{background:#3B82F6}.dgband .team .bench-fill{background:#8B5CF6}
.dgband .bench-mk{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#FF4D8D;border:2.5px solid #fff;transform:translate(-50%,-50%) scale(0);transition:left .9s cubic-bezier(.22,.61,.36,1) .3s,transform .35s ease .3s}
.dgband .card.in .bench-mk{transform:translate(-50%,-50%) scale(1)}
.dgband .bench-cap{font-size:10.5px;color:rgba(255,255,255,.58);margin:8px 0 0}
.dgband .bench-cap b{color:#fff;font-weight:700}
.dgband .dom{margin:0 0 4px}
.dgband .dom-bar{display:flex;gap:3px;height:10px;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,.61,.36,1) .5s}
.dgband .card.in .dom-bar{transform:scaleX(1)}
.dgband .dom-bar .s{border-radius:3px}
.dgband .dom-bar .id{background:#8936FF}.dgband .dom-bar .ex{background:#0FB388}.dgband .dom-bar .cap{background:#2563EB}
.dgband .dom-bar .con{background:#F0454B;box-shadow:0 0 0 1.5px rgba(255,138,107,.9);animation:dgBatt 1.7s ease-in-out infinite}
@keyframes dgBatt{0%,100%{opacity:1}50%{opacity:.36}}
.dgband .dom-lab{display:flex;justify-content:space-between;margin:7px 0 0;font-size:10px;font-weight:600;color:rgba(255,255,255,.6)}
.dgband .dom-lab .conlab{color:#FF9DB1;font-weight:700}
.dgband .flownote{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.66);margin:14px 0 0}
.dgband .flownote svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.dgband .indiv .flownote svg{color:#8FB8FF}.dgband .team .flownote svg{color:#CBA4FF}
.dgband .cue{display:flex;align-items:center;justify-content:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin:16px 0 0}
.dgband .indiv .cue{color:#9BC2FF}.dgband .team .cue{color:#C9A6FF}
.dgband .cue::before,.dgband .cue::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.18)}
.dgband .foot{display:flex;align-items:center;justify-content:center;gap:9px;margin:13px -24px -24px;padding:17px;border-top:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font-weight:700;font-size:15.5px;border-radius:0 0 21px 21px;transition:background .25s}
.dgband .indiv:hover .foot{background:rgba(59,130,246,.24)}.dgband .team:hover .foot{background:rgba(154,87,255,.24)}
.dgband .cur-icon{position:relative;display:inline-flex;width:21px;height:21px}
.dgband .cur-icon svg{width:20px;height:20px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));animation:dgCur 1.8s ease-in-out infinite;transform-origin:top left}
.dgband .card:hover .cur-icon svg{animation-duration:1.05s}
@keyframes dgCur{0%,50%,100%{transform:translate(0,0)}60%{transform:translate(-1px,3px) scale(.8)}70%{transform:translate(0,0)}}
.dgband .howlink{display:block;text-align:center;font-size:12.5px;font-weight:600;color:var(--soft);text-decoration:underline;text-underline-offset:3px;margin:16px auto 0;transition:color .2s}
.dgband .howlink:hover{color:var(--ink)}
@media(max-width:760px){.dgband .pair{grid-template-columns:1fr}}
/* diagnostic readout animates on all devices (brand-owner request) */

.ringq.dg-steps .q{position:relative;overflow:hidden}
.ringq.dg-steps .q-bgn{position:absolute;top:14px;right:22px;font-size:74px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--hair);opacity:.7;z-index:0;pointer-events:none}
.ringq.dg-steps .q .top,.ringq.dg-steps .q .ask{position:relative;z-index:1}

@media (max-width:980px){
  .ringq,.ladder,.arts{grid-template-columns:1fr}
  .compare,.isnot{grid-template-columns:1fr}
}

/* ===== mobile graphic + section polish ===== */
@media (max-width:600px){
  /* hide the four 'where we fit' pills on phones (per request) */
  .fourpill{display:none}
}
@media (max-width:560px){
  /* embedded animation graphics: full-bleed so landscape animations are as large as the screen allows */
  .gfx-frame{margin-left:-20px !important;margin-right:-20px !important;width:calc(100% + 40px) !important;max-width:none !important;border-radius:0;margin-top:18px}
  .gfx-frame.wherefit iframe{border-radius:0;filter:none}
}
@media (max-width:700px){
  /* roles chips: smaller so the four fit on two lines */
  .who{gap:7px}
  .who .chip{padding:6px 11px;font-size:12.5px}
  /* engagement-ladder: drop the 3D flip on phones so each card sizes to its own content (no wasted height) */
  .tier-flip{perspective:none}
  .tier-inner{min-height:0 !important;transform:none !important;transform-style:flat}
  .tier-front{display:none}
  .tier-face{position:relative;backface-visibility:visible;-webkit-backface-visibility:visible}
  .tier-back{transform:none}
  /* step graphics: taller frame on phones so the animation has room to read */
  .step .om-embed iframe{aspect-ratio:460/360 !important}
}

/* ============================================================================
   Mobile "calm" pass — inner pages (What We Do / How We Work / Insights / About)
   GetDX-inspired: reclaim the wasted hero space, loosen headlines, give each
   stacked module clear separation so the phone view reads one idea at a time.
   Loads after sw.css so it wins for page-specific classes.
   ========================================================================== */
@media (max-width:600px){
  /* page heroes: stop wasting the first screen on empty padding; looser head */
  .phero{padding:46px 0 34px}
  .phero h1{line-height:1.1;letter-spacing:-.028em}
  .phero .lede{font-size:16.5px;line-height:1.62;margin-top:16px}
  .phero + section.band{padding-top:34px}
  /* section heads breathe (multi-line H2s were cramped at line-height 1.04) */
  .h2{line-height:1.12}
  .lead{font-size:16px;line-height:1.6}
  .kick{margin-bottom:14px;font-size:11.5px}
  /* clearer separation between stacked cards — each becomes its own moment */
  .ringq,.ladder,.arts{gap:20px}
  .compare,.isnot,.roots{gap:18px}
  /* tidy band rhythm */
  .band.tight{padding:44px 0}
}