/* World Line 2 Light: Use Cases */
/* World Line 2 Light: Use Cases light theme (Nov 10 2026). Scoped to main.tj-photo. */
/* ---- Use Cases light mock: homepage light palette ---- */
:root{--lt-ground:#f7f8fa;--lt-panel:#fcfdfe;--lt-ink:#0f1d33;--lt-body:#33405c;--lt-quiet:#40536d;--lt-rule:#dce3ec;--lt-blue:#195c9f;--lt-blue-h:#124a83}
/* the night-photo hero stays; everything after it rides on a light sheet, as on the homepage */
main.tj-photo > section:not(.tt){background:var(--lt-ground)!important;color:var(--lt-ink)!important;--line:var(--lt-rule);--quiet:var(--lt-quiet);--foreground:var(--lt-ink)}
main.tj-photo > section.nuc-band{box-shadow:0 -18px 60px -45px rgba(15,29,51,.35);border-top:1px solid #e3e9f1}
main.tj-photo > section:not(.tt) :where(h1,h2,h3,h4,p,li,span,a,small,strong,em,b,div,button,label,figcaption):not(:is(.nuc-card,.nuc-card *,.ig-center,.ig-center *,.fm-twin,.fm-twin *,.uc-closeCard,.uc-closeCard *)){color:var(--lt-ink)!important;border-color:var(--lt-rule)}
main.tj-photo > section:not(.tt) :is(p,.body-copy,.page-lead,small):not(:is(.nuc-card *,.ig-center *,.fm-twin *,.uc-closeCard *)){color:var(--lt-body)!important}
main.tj-photo > section:not(.tt) .eyebrow:not(:is(.ig-center *,.uc-closeCard *)){color:var(--lt-blue)!important}
main.tj-photo > section:not(.tt) .dot{background:var(--lt-blue)!important;box-shadow:none!important}
main.tj-photo > section:not(.tt) :is(.tt-track > span,.cs-teaserAccent,.cs-teaserAccent .tj-w,.ig-idx,.uc-closeAccent,.uc-closeAccent .tj-w):not(.uc-closeCard *){color:var(--lt-blue)!important}
main.tj-photo .ig-center :is(.tt-track > span,.cs-teaserAccent,.cs-teaserAccent .tj-w,.ig-idx,.uc-closeAccent,.uc-closeAccent .tj-w){color:#7fbeff!important}
/* thread lines: brand blue, no neon glow on light */
main.tj-photo [data-offshoot] path,main.tj-photo .tj-branches path{stroke:#2c7fd0!important;filter:none!important}
main.tj-photo > section:not(.tt) [data-offshoot] circle{fill:#2c7fd0!important}
main.tj-photo .tc-rule-line{background:linear-gradient(90deg,var(--lt-rule),transparent)!important}
/* photo cards stay dark: contained imagery on the light ground */
main.tj-photo .nuc-card{box-shadow:0 24px 50px -30px rgba(15,29,51,.45)!important}
main.tj-photo .nuc-arrow{background:var(--lt-panel)!important;border-color:#c2c9d4!important;color:var(--lt-ink)!important}
main.tj-photo .nuc-dot{background:#c2c9d4!important}
main.tj-photo .nuc-dot:is([aria-current=true],[aria-selected=true],.is-active,[data-active]){background:var(--lt-blue)!important}
/* case study game */
main.tj-photo .cs-btn{background:var(--lt-blue)!important;border-color:var(--lt-blue)!important;color:#fff!important}
/* industry grid: light cells, navy centre stays */
main.tj-photo .ig{background:var(--lt-rule)!important;border-color:var(--lt-rule)!important}
main.tj-photo #by-industry[data-inview] .ig,main.tj-photo #by-industry .ig{box-shadow:0 0 0 1px #c9d6e6,0 30px 60px -44px rgba(15,29,51,.35)!important}
main.tj-photo .ig-cell{background:var(--lt-panel)!important}
main.tj-photo .ig-cell :is(span,small,p){color:var(--lt-quiet)!important}
main.tj-photo .ig-cell [class*=no],main.tj-photo .ig-cell > span:first-child{color:var(--lt-blue)!important}
main.tj-photo .ig-tag{background:#e8f1fb!important;color:var(--lt-blue)!important;border:1px solid #b4cee8!important}
main.tj-photo .ig-center :is(h2,h3){color:#fff!important}
/* compounding: light chips and start card, the "it becomes" card stays navy */
main.tj-photo .fm-chip{background:var(--lt-panel)!important;border-color:var(--lt-rule)!important}
main.tj-photo .fm-chip:is([aria-pressed=true],[aria-selected=true],[aria-checked=true],.is-on,.is-active){background:#eef5fc!important;border-color:var(--lt-blue)!important}
main.tj-photo .fm-chip svg{color:var(--lt-quiet)!important}
main.tj-photo .fm-chip:is([aria-pressed=true],[aria-selected=true],[aria-checked=true]) svg{color:var(--lt-blue)!important}
main.tj-photo .fm-hold{background:var(--lt-panel)!important;border-color:var(--lt-rule)!important;box-shadow:none!important}
main.tj-photo .fm-move{background:#e8f1fb!important;border:1px solid #b4cee8!important;color:var(--lt-blue)!important}
main.tj-photo .fm-twin{box-shadow:0 26px 50px -34px rgba(15,29,51,.5)!important}
main.tj-photo .fm-twin *{color:#fff!important}main.tj-photo .fm-twin :is(small,p){color:#c9d6e6!important}
/* close: one contained navy plate */
main.tj-photo .uc-closeCard{background:#0f1d33!important;backdrop-filter:none!important;box-shadow:0 30px 60px -40px rgba(15,29,51,.5)!important;border-color:transparent!important}
/* footer: site blue-black */
body:has(main.tj-photo) .site-footer{background:radial-gradient(58% 95% at 68% 40%,#0c1220,#070a12 62%,#04060b)!important}
/* header: transparent white over the night hero, light frosted bar over the light sheet */
html:has(main.tj-photo) .site-header{background:transparent!important;border-bottom-color:transparent!important;transition:background .25s}
html:has(main.tj-photo) .site-header{background:rgba(247,248,250,.88)!important;backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(15,29,51,.08)!important}
html:has(main.tj-photo) .site-header :is(.brand,.desktop-nav a,.nav-top){color:var(--lt-ink)!important}
html:has(main.tj-photo) .site-header .brand img{filter:brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(1800%) hue-rotate(190deg)}
html:has(main.tj-photo) .site-header .brand span{color:var(--lt-blue)!important}
html:has(main.tj-photo) .site-header .nav-cta{background:var(--lt-ink)!important;color:#fff!important}
/* over the night hero once scrolled: dark frosted bar so hero copy never runs under the links */
/* the light sheet slides over the photo with a rounded leading edge */
main.tj-photo > section.nuc-band{border-radius:28px 28px 0 0;border-top:0!important}
/* ---- rich pass: surface rhythm, atmosphere, one soft depth ---- */
/* 1. the sheet picks up the hero's blue as it begins, with a faint blueprint grid fading out */
main.tj-photo > section.nuc-band{background:linear-gradient(180deg,#e7eef8 0,#eff3f9 260px,#f7f8fa 640px)!important;position:relative;isolation:isolate}
main.tj-photo > section.nuc-band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(rgba(25,92,159,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(25,92,159,.07) 1px,transparent 1px);background-size:56px 56px;
 -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 0%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 30% 0%,#000 0%,transparent 75%)}
/* 2. alternate paper sheets and ground, the homepage's own rhythm */
main.tj-photo > section:nth-child(3),main.tj-photo > section:nth-child(5){background:linear-gradient(115deg,#fdfeff 0%,#f6f9fc 55%,#eef3f9 100%)!important;border-top:1px solid #e3e9f1;box-shadow:0 -20px 60px -46px rgba(15,29,51,.22)}
main.tj-photo > section:nth-child(4){background:radial-gradient(ellipse 60% 55% at 78% 30%,#e3ecf8 0%,transparent 70%),radial-gradient(ellipse 45% 40% at 12% 85%,#ebf1f9 0%,transparent 70%),#f7f8fa!important}
/* 3. one soft depth: the industry grid floats as a plate */
main.tj-photo #by-industry .ig,main.tj-photo #by-industry[data-inview] .ig{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #d5dfeb,0 2px 4px rgba(15,29,51,.04),0 32px 64px -36px rgba(15,29,51,.32)!important}
main.tj-photo .ig-cell{background:linear-gradient(180deg,#ffffff,#f9fbfd)!important;transition:background .2s}
main.tj-photo .ig-center{background:radial-gradient(90% 90% at 50% 40%,#1c3a63 0%,#0f1d33 72%)!important}
/* compounding cards get the same depth language */
main.tj-photo .fm-chip{border-radius:8px!important;box-shadow:0 1px 2px rgba(15,29,51,.05)!important}
main.tj-photo .fm-hold{border-radius:12px!important;box-shadow:0 1px 2px rgba(15,29,51,.05),0 24px 48px -36px rgba(15,29,51,.25)!important}
main.tj-photo .fm-twin{border-radius:12px!important}
/* 4. the thread keeps its signature: brand blue with a soft light glow */
main.tj-photo [data-offshoot] path,main.tj-photo .tj-branches path{stroke:#2c7fd0!important;filter:drop-shadow(0 0 5px rgba(44,127,208,.35))!important}
/* 5. the close carries the city into the light page: dusk plate in a contained frame */
main.tj-photo .uc-closeCard{border-radius:20px!important;overflow:hidden;
 background:linear-gradient(90deg,rgba(9,16,31,.94) 0%,rgba(9,16,31,.78) 42%,rgba(9,16,31,.18) 100%),url(/assets/world/plates/10-dawn.webp) 60% 38%/cover no-repeat!important;
 box-shadow:0 2px 4px rgba(15,29,51,.06),0 40px 80px -48px rgba(15,29,51,.55)!important}
/* ---- round 3 (Brina, Nov 10): Horizon close, light "It becomes", ranking callout card ---- */
/* close: the homepage's light Horizon in a contained frame, navy copy on the sky */
main.tj-photo .uc-closeCard{
 background:linear-gradient(90deg,rgba(247,248,250,.9) 0%,rgba(247,248,250,.62) 38%,rgba(247,248,250,0) 66%),url(/lt-assets/horizon-4k.jpg) 50% 40%/cover no-repeat!important;
 box-shadow:0 0 0 1px #dce3ec,0 2px 4px rgba(15,29,51,.04),0 36px 72px -48px rgba(15,29,51,.35)!important}
main.tj-photo .uc-closeCard :is(h2,h2 *,p,span){color:var(--lt-ink)!important}
main.tj-photo .uc-closeCard p{color:var(--lt-body)!important}
main.tj-photo .uc-closeCard :is(.tt-track > span,.cs-teaserAccent,.cs-teaserAccent .tj-w,.ig-idx,.uc-closeAccent,.uc-closeAccent .tj-w){color:var(--lt-blue)!important}
main.tj-photo .uc-closeCard .cta{background:var(--lt-blue)!important;color:#fff!important;border-color:var(--lt-blue)!important}
main.tj-photo .uc-closeCard .cta *{color:#fff!important}
/* "It becomes": the result reads through blue, not a dark block */
main.tj-photo .fm-twin{background:linear-gradient(140deg,#f3f8fe 0%,#e4eefa 100%)!important;border:1px solid #a9c6e6!important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 24px 48px -36px rgba(25,92,159,.35)!important}
main.tj-photo .fm-twin *{color:var(--lt-ink)!important}
main.tj-photo .fm-twin :is(small,p){color:var(--lt-body)!important}
main.tj-photo .fm-twin > :first-child{color:var(--lt-blue)!important}
/* case study: A/B becomes one callout card, larger rows */
main.tj-photo > section:nth-child(3){background:radial-gradient(ellipse 55% 50% at 80% 70%,#e6eef9 0%,transparent 70%),#f7f8fa!important;box-shadow:none!important}
main.tj-photo .cs-page.cs-teaser{background:linear-gradient(160deg,#ffffff 0%,#f6f9fd 100%);border:1px solid #d5dfeb;border-radius:18px;
 padding:0 56px 36px!important;margin-top:56px;box-shadow:0 2px 4px rgba(15,29,51,.04),0 36px 72px -48px rgba(15,29,51,.3)}
main.tj-photo .cs-rankStage,main.tj-photo .cs-teaserChoose{margin-inline:auto}
main.tj-photo .cs-teaser .cs-rankStage{margin-top:44px!important}
main.tj-photo .cs-rankLabel{font-family:Manrope,Inter,sans-serif!important;font-size:30px!important;font-weight:500!important;letter-spacing:-.02em;color:var(--lt-ink)!important}
main.tj-photo .cs-rankList li{font-size:21px!important;letter-spacing:-.01em;padding-block:18px!important}
main.tj-photo .cs-rankList li *{font-size:inherit}
main.tj-photo .cs-rankList li > :first-child{font-size:14px!important;color:var(--lt-blue)!important;font-weight:600;font-variant-numeric:tabular-nums}
main.tj-photo .cs-teaserChoose{border-top:1px solid #e3e9f1;padding-top:24px;margin-top:12px}
main.tj-photo .cs-teaserNote{font-size:15px!important;color:var(--lt-body)!important}
main.tj-photo .cs-btn{font-size:15px!important;padding-inline:22px!important;border-radius:6px!important}
/* hero: the homepage's light Horizon behind the opening (?hero=night keeps the current night photo) */
html:has(main.tj-photo) .tj-backdrop{background:#eaf1f9 url(/lt-assets/horizon-4k.jpg) 50% 0/max(100%,240vh) auto no-repeat!important}
html:has(main.tj-photo) .tj-backdrop i{display:none!important}
html:has(main.tj-photo) .tj-backdrop b{background:linear-gradient(90deg,rgba(247,248,250,.6) 0%,rgba(247,248,250,.28) 38%,rgba(247,248,250,0) 62%)!important;background-color:transparent!important}
html:has(main.tj-photo) .tj-backdrop canvas{filter:brightness(0) saturate(100%) invert(32%) sepia(88%) saturate(1100%) hue-rotate(192deg);opacity:.55}
html:has(main.tj-photo) main.tj-photo .tt :where(h1,h2,h3,p,li,span,a,small,strong,button,div){color:var(--lt-ink)!important}
html:has(main.tj-photo) main.tj-photo .tt p{color:var(--lt-body)!important}
html:has(main.tj-photo) main.tj-photo .tt :is(.tt-track > span,.cs-teaserAccent,.cs-teaserAccent .tj-w,.ig-idx,.uc-closeAccent,.uc-closeAccent .tj-w){color:var(--lt-blue)!important}
html:has(main.tj-photo) main.tj-photo .tt .eyebrow{color:var(--lt-blue)!important}
html:has(main.tj-photo) main.tj-photo .tt .dot{background:var(--lt-blue)!important;box-shadow:none!important}
html:has(main.tj-photo) main.tj-photo .tt .cta{background:var(--lt-blue)!important;color:#fff!important;border-color:var(--lt-blue)!important}
html:has(main.tj-photo) main.tj-photo .tt .cta *{color:#fff!important}
html:has(main.tj-photo) main.tj-photo .tt :is([class*=tab],[role=tablist]){border-color:rgba(15,29,51,.16)!important}
html:has(main.tj-photo) .site-header{background:transparent!important;box-shadow:none!important}
html.header-stuck:has(main.tj-photo) .site-header{background:rgba(247,248,250,.82)!important;backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(15,29,51,.08)!important}
html:has(main.tj-photo) .site-header :is(.brand,.desktop-nav a,.nav-top){color:var(--lt-ink)!important}
html:has(main.tj-photo) .site-header .brand img{filter:brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(1800%) hue-rotate(190deg)}
html:has(main.tj-photo) .site-header .brand span{color:var(--lt-blue)!important}
html:has(main.tj-photo) .site-header .nav-cta{background:var(--lt-ink)!important;color:#fff!important}
main.tj-photo .uc-closeCard :is(h2,h2 *,p){text-shadow:none!important}
main.tj-photo .uc-closeCard .uc-closeContact,main.tj-photo .uc-closeCard .uc-closeContact *{color:var(--lt-blue)!important;border-color:rgba(25,92,159,.4)!important}
html:has(main.tj-photo) main.tj-photo .tt :is(h1,h1 *,p){text-shadow:none!important}
html:has(main.tj-photo) main.tj-photo .tt .tt-tab{color:var(--lt-quiet)!important}
html:has(main.tj-photo) main.tj-photo .tt .tt-tab[aria-current=true]{color:var(--lt-blue)!important}
/* the thread enters the ranking card and lands on A and B */
main.tj-photo > section:nth-child(3) [data-offshoot]{z-index:2!important}
/* ---- phone pass (Nov 10) ---- */
/* menu button reads on the light header */
html:has(main.tj-photo) .site-header .menu-toggle{color:var(--lt-ink)!important}
/* phone picker: light, like the desktop chips */
main.tj-photo .fm-pickSelect{background:#eef5fc!important;color:var(--lt-ink)!important;border-color:var(--lt-blue)!important}
main.tj-photo .fm-pickSelect option{color:var(--lt-ink)!important;background:#fff!important}
main.tj-photo .fm-pickWrap > svg:first-child{color:var(--lt-blue)!important}
main.tj-photo .fm-pickChevron{color:var(--lt-blue)!important}
@media (max-width:800px){
 /* ranking card: room for the two columns, words stay on one or two lines */
 main.tj-photo .cs-page.cs-teaser{padding:0 16px 24px!important;margin-top:36px;border-radius:14px}
 main.tj-photo .cs-teaser .cs-rankStage{margin-top:32px!important}
 main.tj-photo .cs-rankLabel{font-size:24px!important}
 main.tj-photo .cs-rankList li{font-size:17px!important;padding-block:14px!important}
 main.tj-photo .cs-rankList li > :first-child{font-size:12px!important}
 /* close: copy on the sky, the city as a band under the buttons */
 main.tj-photo .uc-closeCard{padding-bottom:190px!important;
  background:linear-gradient(180deg,rgba(247,248,250,.7) 0%,rgba(247,248,250,.35) 55%,rgba(247,248,250,0) 72%),url(/lt-assets/horizon-4k.jpg) 50% 100%/auto 520px no-repeat,#e9f0f8!important}
}

/* World Line 2 Light: Use Cases round 2 (Brina, Nov 10 2026). Loads after lt-use-cases.css. Scoped to main.tj-photo. */
/* hero: the tree-root (delta) animation goes */
html:has(main.tj-photo) .tj-backdrop canvas.tj-delta{display:none!important}

/* the spine thread: it sat under the page (z1 below main's z2), which only showed through on the see-through dark sections.
   On light it rides above the sheets in brand blue. No preview track: the line only exists where it has reached. */
html:has(main.tj-photo) .tj-spine{z-index:3!important;background:transparent!important}
html:has(main.tj-photo) .tj-spine:before{background:#2c7fd0!important;box-shadow:0 0 6px rgba(44,127,208,.35)!important}
html:has(main.tj-photo) .tj-spine:after{background:#fff!important;box-shadow:0 0 0 2px #2c7fd0,0 0 0 6px rgba(44,127,208,.18)!important}

/* type: the site scale (World Line 2 Digital Twins), same weight as every other page heading */
main.tj-photo .tt-heading{font-weight:500!important}
main.tj-photo > section:not(.tt) h2:not(.ig-title){font-size:clamp(36px,2.2vw + 18px,49px)!important;line-height:1.06!important;letter-spacing:-.055em!important;font-weight:500!important;text-wrap:balance}
@media (max-width:800px){
 main.tj-photo > section:not(.tt) h2:not(.ig-title){font-size:clamp(30px,8.4vw,40px)!important}
}
/* label to heading: 24px everywhere, as on Digital Twins */
main.tj-photo > section:not(.tt) .eyebrow + h2,main.tj-photo > section:not(.tt) .eyebrow + .split > h2:first-child{margin-top:24px!important}
main.tj-photo > section:not(.tt) .eyebrow{margin-bottom:0!important}
/* the industry grid's centre title joins the same scale */
main.tj-photo .ig-title{font-size:clamp(36px,2.2vw + 18px,49px)!important;line-height:1.06!important;letter-spacing:-.055em!important}
/* the thread ends where the footer begins, as on the dark page */
body:has(main.tj-photo) .site-footer{position:relative;z-index:4}
/* round 6: each branch is scrubbed by lt-use-cases-r2.js, drawn as far as the dot has passed its junction, both directions.
   Hidden until the script draws it, and no timed transition, so it never runs ahead of or detaches from the spine. */
main.tj-photo [data-offshoot] path{stroke-dashoffset:1px!important;transition:none!important}
main.tj-photo [data-offshoot] circle{opacity:0!important;transition:opacity .25s ease!important}
/* the spine's fill and dot follow the scroll-drawn tip from lt-use-cases-r2.js, not page progress */
html:has(main.tj-photo) .tj-spine:before{transform:scaleY(var(--lt-s,0))!important;transition:none!important}
html:has(main.tj-photo) .tj-spine:after{top:var(--lt-dot,0px)!important;opacity:var(--lt-dot-o,0);transition:opacity .2s ease!important}
/* A/B buttons: white words on the blue in every state, as on the case study page (Brina, Nov 10). */
main.tj-photo > section .cs-actions .cs-btn,main.tj-photo > section .cs-actions .cs-btn *{color:#fff!important}
/* polish pass (Brina approved, Nov 10): from the slop audit */
/* buttons share the site's 3px corner */
main.tj-photo .cs-btn{border-radius:3px!important}
/* lit industry cells: a quiet blue wash with an inner edge, not a half-visible bright hairline */
main.tj-photo .ig-cell:is([data-lit],:hover){background:linear-gradient(180deg,#f7fbff,#edf4fc)!important;box-shadow:inset 0 0 0 1px rgba(25,92,159,.24)!important}
/* sections split with lines, not tints: the industry and compounding sections sit on the page ground */
main.tj-photo > section.proof{background:#f7f8fa!important;box-shadow:none!important;border-top-color:transparent!important}
/* starting-point icons (Brina, Nov 10): one icon per option instead of the same document icon six times.
   CSS only: the original icon's strokes hide and its box shows the matching outline through a mask, in the chip's own colour. */
main.tj-photo .fm-chip svg > *,main.tj-photo .fm-pickWrap > svg:first-child > *{display:none}
main.tj-photo .fm-chip svg,main.tj-photo .fm-pickWrap > svg:first-child{background:currentColor;-webkit-mask:var(--fm-ico) center/contain no-repeat;mask:var(--fm-ico) center/contain no-repeat}
/* A finished segmentation: pie chart */
main.tj-photo .fm-chip:nth-child(1),main.tj-photo .fm-pickWrap:has(.fm-pickSelect option:nth-child(1):checked){--fm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9h-9z'/%3E%3Cpath d='M15 2.6v6.4h6.4A6.6 6.6 0 0 0 15 2.6z'/%3E%3C/svg%3E")}
/* A brand tracker: trend line */
main.tj-photo .fm-chip:nth-child(2),main.tj-photo .fm-pickWrap:has(.fm-pickSelect option:nth-child(2):checked){--fm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5v17h17'/%3E%3Cpath d='M7.5 15l3.5-3.8 3 2.8 5-6'/%3E%3C/svg%3E")}
/* Concepts and claims: lightbulb */
main.tj-photo .fm-chip:nth-child(3),main.tj-photo .fm-pickWrap:has(.fm-pickSelect option:nth-child(3):checked){--fm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18.5h5M10.5 21.5h3'/%3E%3Cpath d='M12 2.8a6.2 6.2 0 0 0-3.6 11.2c.7.5 1.1 1.3 1.1 2.2v.3h5v-.3c0-.9.4-1.7 1.1-2.2A6.2 6.2 0 0 0 12 2.8z'/%3E%3C/svg%3E")}
/* A long list of ideas: list */
main.tj-photo .fm-chip:nth-child(4),main.tj-photo .fm-pickWrap:has(.fm-pickSelect option:nth-child(4):checked){--fm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1.1'/%3E%3Ccircle cx='4.5' cy='12' r='1.1'/%3E%3Ccircle cx='4.5' cy='18' r='1.1'/%3E%3C/svg%3E")}
/* An existing persona: person */
main.tj-photo .fm-chip:nth-child(5),main.tj-photo .fm-pickWrap:has(.fm-pickSelect option:nth-child(5):checked){--fm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c1.1-3.9 4.1-6 7.5-6s6.4 2.1 7.5 6'/%3E%3C/svg%3E")}
/* A hard-to-reach segment: target */
main.tj-photo .fm-chip:nth-child(6),main.tj-photo .fm-pickWrap:has(.fm-pickSelect option:nth-child(6):checked){--fm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Ccircle cx='12' cy='12' r='.9'/%3E%3C/svg%3E")}

/* World Line 2 Light: Fortune 500 telecom case study */
/* World Line 2 Light: telecom case study light theme (Nov 10 2026). Scoped to main.cs-page.csx. */
/* ---- palette: the page's own tokens, re-pointed at the approved light values ---- */
main.cs-page.csx{--navy-deep:#f7f8fa;--ink-d:#0f1d33;--body-d:#33405c;--label-d:#40536d;--line-d:#dce3ec;--light:#f7f8fa;--ink-l:#0f1d33;--body-l:#33405c;--label-l:#40536d;--line-l:#dce3ec;--acc-deep:#195c9f;--cs-line:#dce3ec;--line:#dce3ec;--quiet:#40536d;
 background:#f7f8fa!important;color:#0f1d33!important}
main.cs-page.csx .cs-accent{color:#195c9f!important}
main.cs-page.csx .cs-eyebrow{color:#195c9f!important}
main.cs-page.csx .cs-eyebrow:before{background:#195c9f!important;box-shadow:none!important}
main.cs-page.csx .cs-title,main.cs-page.csx h1,main.cs-page.csx h2,main.cs-page.csx h3{color:#0f1d33!important}
main.cs-page.csx :is(.cs-body,.cs-flow dd,.cs-compoundCard p,.cs-opsDetail,.cs-teaserNote){color:#33405c!important}
main.cs-page.csx :is(.cs-note,.cs-calLegend,.cs-scale span,.cs-dotVal,.cs-calHuman,.cs-metric dd){color:#40536d!important}

/* ---- hero: the same avenue by day (the Horizon plate), navy copy on the sky ---- */
main.cs-page.csx .csx-hero{background:#eaf1f9!important}
main.cs-page.csx .csx-sky{background:#eaf1f9 url(/lt-assets/horizon-4k.jpg) 50% 3svh/max(100%,240vh) auto no-repeat!important}
main.cs-page.csx .csx-city{display:none!important}
main.cs-page.csx .csx-shade{background:linear-gradient(90deg,rgba(247,248,250,.6) 0%,rgba(247,248,250,.28) 38%,rgba(247,248,250,0) 62%)!important}
main.cs-page.csx .csx-hero :is(h1,h1 *,p,span,a,li,dt,dd){text-shadow:none!important}
main.cs-page.csx .csx-hero :is(.crumbs,.crumbs *){color:#40536d!important}
main.cs-page.csx .csx-hero .crumbs [aria-current],main.cs-page.csx .csx-hero .crumbs li:last-child{color:#0f1d33!important}
main.cs-page.csx .csx-heroEyebrow{color:#40536d!important}
main.cs-page.csx .csx-lead{color:#33405c!important;text-shadow:none!important}
main.cs-page.csx .csx-hero h1{text-shadow:none!important}
main.cs-page.csx .csx-heroStrip{border-top-color:rgba(15,29,51,.16)!important}
main.cs-page.csx .csx-heroStrip>div+div{border-left-color:rgba(15,29,51,.14)!important}
main.cs-page.csx .csx-heroStrip :is(dt,.cs-gap){color:#0f1d33!important}
main.cs-page.csx .csx-heroStrip .cs-gapArrow{color:#40536d!important}
main.cs-page.csx .csx-heroStrip .cs-gapAfter{color:#195c9f!important}
main.cs-page.csx .csx-heroStrip dd{color:#33405c!important}
/* round 3 (Brina): original spacing, but the column ends where the skyline begins,
   so the stats sit just above the city and the headline centres between crumbs and stats.
   Tower tops sit at 3svh + 0.349 x the photo width (photo is max(100vw,240vh) wide, tallest tower at 62% of its height). */
@media (min-width:801px){
 main.cs-page.csx .csx-heroInner{min-height:0!important;height:calc(3svh + max(100vw,240vh) * .349 - 18px)!important}
 main.cs-page.csx .csx-heroStrip{margin-top:0!important;padding:18px 0 0!important}
}
/* short laptop screens: a slightly smaller headline and a wider intro (three lines) keep equal gaps above and below the headline */
@media (min-width:801px) and (max-height:760px){
 main.cs-page.csx .csx-hero h1{font-size:clamp(44px,4.8vw,68px)!important}
 main.cs-page.csx .csx-lead{max-width:64ch!important;margin-top:22px!important}
}
main.cs-page.csx .csx-heroStrip>div{gap:16px!important}
main.cs-page.csx .csx-heroStrip dt{font-size:32px!important;letter-spacing:-.03em}
main.cs-page.csx .csx-heroStrip dd{font-size:15px!important;line-height:1.45!important;max-width:24ch!important}

/* ---- first act: the light sheet rises over the photo ---- */
main.cs-page.csx .csx-dark{background:
 radial-gradient(900px 760px at 0 34%,rgba(25,92,159,.07) 0%,rgba(25,92,159,0) 70%),
 radial-gradient(820px 640px at 100% 56%,rgba(66,164,255,.08) 0%,rgba(66,164,255,0) 70%),
 linear-gradient(180deg,#e7eef8 0,#eff3f9 260px,#f7f8fa 640px)!important;
 border-radius:28px 28px 0 0;box-shadow:0 -1px 0 rgba(15,29,51,.06),0 -18px 50px -44px rgba(15,29,51,.22)}
main.cs-page.csx .cs-flow{border-color:#dce3ec!important}
main.cs-page.csx .cs-flowRow{border-color:#dce3ec!important}
main.cs-page.csx .cs-flow dt{color:#0f1d33!important}
main.cs-page.csx .cs-flow [class*=Num],main.cs-page.csx .cs-flow small{color:#40536d!important}
/* the scroll rail and its dots: brand blue, no neon glow */
main.cs-page.csx .csx-rule .tc-rule-line,main.cs-page.csx .csx-rule.is-dark .tc-rule-line{background:linear-gradient(90deg,rgba(15,29,51,.12) 0%,rgba(15,29,51,.28) 55%,#2c7fd0 100%)!important}
main.cs-page.csx .csx-rule .tc-rule-head i,main.cs-page.csx .csx-rule.is-dark .tc-rule-head i{background:#2c7fd0!important;box-shadow:0 0 0 4px #f7f8fa!important}

/* ---- the A/B wager: one callout card, as on Use Cases ---- */
main.cs-page.csx .cs-page.cs-teaser{background:linear-gradient(160deg,#ffffff 0%,#f6f9fd 100%);border:1px solid #d5dfeb;border-radius:18px;
 padding:0 56px 36px!important;box-shadow:0 2px 4px rgba(15,29,51,.04),0 36px 72px -48px rgba(15,29,51,.3)}
main.cs-page.csx .cs-teaser > div:first-child{padding-top:48px}
main.cs-page.csx .cs-teaser .cs-rankStage{margin-top:44px!important}
main.cs-page.csx .cs-rankLabel{font-family:Manrope,Inter,sans-serif!important;font-size:30px!important;font-weight:500!important;letter-spacing:-.02em;color:#0f1d33!important}
main.cs-page.csx .cs-rankItem{border-color:#dce3ec!important}
main.cs-page.csx :is(.cs-rankItem,.cs-rankText){color:#0f1d33!important}
main.cs-page.csx .cs-rankList li{font-size:21px!important;letter-spacing:-.01em;padding-block:18px!important}
main.cs-page.csx .cs-rankList li *{font-size:inherit}
main.cs-page.csx .cs-rankList li > .cs-num{font-size:14px!important;color:#195c9f!important;font-weight:600;font-variant-numeric:tabular-nums}
main.cs-page.csx .cs-teaserChoose{border-top:1px solid #e3e9f1;padding-top:24px;margin-top:12px}
main.cs-page.csx .cs-teaserNote{font-size:15px!important}
main.cs-page.csx .cs-lines :is(path,line){stroke:#2c7fd0!important;filter:drop-shadow(0 0 5px rgba(44,127,208,.35))!important}
main.cs-page.csx .cs-lines circle{fill:#2c7fd0!important}
/* every button on the page: blue fill, white label */
main.cs-page.csx .cs-btn,main.cs-page.csx .cs-btn.is-dark{background:#195c9f!important;border-color:#195c9f!important;color:#fff!important;font-size:15px!important;border-radius:3px!important}
main.cs-page.csx .cs-btn:hover:not(:disabled){background:#124a83!important;border-color:#124a83!important}
main.cs-page.csx .cs-actions .cs-btn.is-picked{box-shadow:0 0 0 2px #fff,0 0 0 4px #195c9f!important}
main.cs-page.csx .cs-actions .cs-btn.is-correct{background:#2fcb7e!important;border-color:#2fcb7e!important;color:#0f1d33!important}

/* ---- second act: same ground, the calibration chart sits on a raised panel ---- */
main.cs-page.csx .csx-light{background:#f7f8fa!important;color:#0f1d33!important}
main.cs-page.csx .csx-calibration{background:radial-gradient(ellipse 55% 45% at 85% 20%,#e6eef9 0%,transparent 70%)!important}
main.cs-page.csx .cs-metricGrid{border-color:#dce3ec!important}
main.cs-page.csx .cs-metric dt{color:#0f1d33!important}
main.cs-page.csx .cs-metric.is-after dt{color:#195c9f!important}
main.cs-page.csx .cs-instrument{background:linear-gradient(180deg,#ffffff 0%,#f6f9fd 100%);border:1px solid #d5dfeb!important;border-radius:14px;padding:4px 28px 12px}
main.cs-page.csx .cs-instHead{border-color:#dce3ec!important}
main.cs-page.csx .cs-grid i{background:rgba(15,29,51,.07)!important}
main.cs-page.csx .cs-calRow{border-color:#e3e9f1!important}
main.cs-page.csx .cs-calMsg{color:#0f1d33!important}
main.cs-page.csx .cs-band{background:rgba(25,92,159,.14)!important;box-shadow:0 0 0 1px rgba(25,92,159,.28)!important}
main.cs-page.csx .cs-gapSeg{background:#b9c3d0}
main.cs-page.csx .cs-humanMark{box-shadow:0 0 0 1px #0f1d33!important}
/* yellow = the human benchmark: kept, with a navy edge so it holds on light */
main.cs-page.csx .cs-flowRow:first-child:before{border-color:#0f1d33!important;box-shadow:0 0 0 3px #f7f8fa!important}
main.cs-page.csx .cs-dot{background:#8e9aab}

/* "What calibration created": the result reads through blue, not a dark block */
main.cs-page.csx .csx-plate{background:linear-gradient(140deg,#f3f8fe 0%,#e4eefa 100%)!important;border:1px solid #a9c6e6!important;border-radius:14px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)!important}
main.cs-page.csx .csx-light .csx-plate :is(.cs-title,h2){color:#0f1d33!important}
main.cs-page.csx .csx-plate .cs-statusList{border-color:rgba(25,92,159,.22)!important}
main.cs-page.csx .csx-plate .cs-statusRow{border-color:rgba(25,92,159,.22)!important;color:#33405c!important}
main.cs-page.csx .csx-plate .cs-statusRow dd{color:#0f1d33!important}
main.cs-page.csx .csx-plate .cs-statusRow :is(i,[class*=Dot],[class*=dot]){background:#195c9f!important;box-shadow:none!important}

/* compounding */
main.cs-page.csx .cs-compoundList,main.cs-page.csx .cs-compoundCard{border-color:#dce3ec!important}
main.cs-page.csx .cs-compoundList{border-top-color:#0f1d33!important}
main.cs-page.csx .cs-plateLabel{fill:#0f1d33!important}
main.cs-page.csx :is(.cs-strataReturn,.cs-strataArrow){stroke:#195c9f!important}

/* outcomes */
main.cs-page.csx .cs-opsBig{color:#195c9f!important}
main.cs-page.csx :is(.cs-opsRow,.cs-opsLedger,.cs-opsHead){border-color:#dce3ec!important}

/* close: the light Horizon in a contained frame, navy copy on the sky */
main.cs-page.csx .csx-final{background:#f7f8fa!important}
main.cs-page.csx .csx-closeCard{background:linear-gradient(90deg,rgba(247,248,250,.92) 0%,rgba(247,248,250,.66) 40%,rgba(247,248,250,0) 70%),url(/lt-assets/horizon-4k.jpg) 50% 41%/cover no-repeat!important;padding-bottom:200px!important;
 box-shadow:0 0 0 1px #dce3ec,0 2px 4px rgba(15,29,51,.04),0 36px 72px -48px rgba(15,29,51,.35)!important}
main.cs-page.csx .csx-closeCard:before{display:none!important}
main.cs-page.csx .csx-light .csx-closeCard h2{color:#0f1d33!important;text-shadow:none!important}
main.cs-page.csx .csx-light .csx-closeCard .cs-accent{color:#195c9f!important}
main.cs-page.csx .csx-light .csx-closeCard .cs-eyebrow{color:#195c9f!important}
main.cs-page.csx .csx-closeCard :is(p,.cs-body){color:#33405c!important;text-shadow:none!important}
main.cs-page.csx .cs-finalTags{border-color:rgba(15,29,51,.14)!important}
main.cs-page.csx .cs-finalTags li{color:#0f1d33!important;border-color:rgba(15,29,51,.16)!important}
main.cs-page.csx .csx-closeCard .cta{background:#195c9f!important;color:#fff!important;border-color:#195c9f!important}
main.cs-page.csx .csx-closeCard .cta :is(*,svg,path){color:#fff!important;stroke:#fff!important}

/* ---- section dock: light frosted pill ---- */
main.cs-page.csx :is(.csx-dock,.csx-dockDot){background:rgba(255,255,255,.86)!important;border-color:#dce3ec!important;box-shadow:0 18px 40px -24px rgba(15,29,51,.35)!important}
main.cs-page.csx .csx-dockList a{color:#40536d!important}
main.cs-page.csx .csx-dockList a:hover{color:#0f1d33!important}
main.cs-page.csx .csx-dockList a[aria-current=true]{color:#0f1d33!important;background:#e8f1fb!important}
main.cs-page.csx .csx-dockNum{color:#40536d!important}
main.cs-page.csx .csx-dockList a[aria-current=true] .csx-dockNum{color:#195c9f!important}
main.cs-page.csx .csx-dockClose{color:#40536d!important}
main.cs-page.csx .csx-dockClose:before{background:#dce3ec!important}
main.cs-page.csx .csx-dockClose:hover{color:#0f1d33!important;background:#eef3f9!important}
main.cs-page.csx .csx-dockDot{color:#195c9f!important}

/* ---- header: blends with the page, light frosted bar once scrolled ---- */
html:has(main.cs-page.csx) .site-header{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;transition:background .25s}
html.header-stuck:has(main.cs-page.csx) .site-header{background:rgba(247,248,250,.82)!important;backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(15,29,51,.08)!important}
html:has(main.cs-page.csx) .site-header :is(.brand,.desktop-nav a,.nav-top){color:#0f1d33!important}
html:has(main.cs-page.csx) .site-header .brand img{filter:brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(1800%) hue-rotate(190deg)}
html:has(main.cs-page.csx) .site-header .brand span{color:#195c9f!important}
html:has(main.cs-page.csx) .site-header .nav-cta{background:#0f1d33!important;color:#fff!important}
html:has(main.cs-page.csx) .site-header .nav-cta *{color:#fff!important}
html:has(main.cs-page.csx) .site-header .menu-toggle{color:#0f1d33!important}

/* ---- footer: site blue-black ---- */
body:has(main.cs-page.csx) .site-footer{background:radial-gradient(58% 95% at 68% 40%,#0c1220,#070a12 62%,#04060b)!important}

/* ---- type scale (Brina, Nov 10): section headings and intros on the World Line 2 Digital Twins scale ---- */
/* every section heading one size, as .dta-h2: 36-49px, line 1.06, tracking -.055em */
main.cs-page.csx :is(.cs-title,.csx-closeCard h2),
main.cs-page.csx .csx-calibration .cs-title,
main.cs-page.csx .csx-light .csx-plate .cs-title,
main.cs-page.csx .csx-light .csx-closeCard h2{font-size:clamp(36px,2.2vw + 18px,49px)!important;line-height:1.06!important;letter-spacing:-.055em!important;text-wrap:balance}
main.cs-page.csx .csx-calibration .cs-title{max-width:15em!important}
/* the intro under each heading, as .dta-lead: 18-20px, line 1.55 */
main.cs-page.csx .cs-section .cs-body,main.cs-page.csx .cs-bandBody,main.cs-page.csx .csx-closeCard .csx-closeMain > p{font-size:clamp(18px,1.35vw,20px)!important;line-height:1.55!important;letter-spacing:-.012em}

/* ---- polish pass (Brina approved, Nov 10): from the slop audit ---- */
/* buttons share the site's 3px corner */
main.cs-page.csx .cs-btn{border-radius:3px!important}
/* calibration chart: one rule along the top, the panel edge */
main.cs-page.csx .cs-instHead{border-top:0!important}
/* outcome bars before the reveal: pale empty gauges, not a grey loading skeleton */
main.cs-page.csx .cs-ops:not([data-open=true]) .cs-opsBlock{background:#e6ecf4!important}

/* ---- phone pass (Nov 10), the Use Cases phone fixes ---- */
@media (max-width:800px){
 main.cs-page.csx :is(.cs-title,.csx-closeCard h2),main.cs-page.csx .csx-calibration .cs-title,main.cs-page.csx .csx-light .csx-plate .cs-title,main.cs-page.csx .csx-light .csx-closeCard h2{font-size:clamp(30px,8.4vw,40px)!important}
 main.cs-page.csx .cs-section .cs-body,main.cs-page.csx .cs-bandBody,main.cs-page.csx .csx-closeCard .csx-closeMain > p{font-size:19px!important}
 /* hero: the stats sit on a firmer veil where the skyline starts */
 main.cs-page.csx .csx-shade{background:linear-gradient(rgba(247,248,250,0) 58%,rgba(247,248,250,.82) 74%,rgba(247,248,250,.9) 100%)!important}
 main.cs-page.csx .csx-sky{background-position:50% 0!important}
 main.cs-page.csx .csx-heroStrip dt{font-size:26px!important}
 main.cs-page.csx .csx-heroStrip dd{font-size:14px!important}
 /* ranking card: room for the two columns, words stay on one or two lines */
 main.cs-page.csx .cs-page.cs-teaser{padding:0 16px 24px!important;border-radius:14px}
 main.cs-page.csx .cs-teaser > div:first-child{padding-top:32px}
 main.cs-page.csx .cs-teaser .cs-rankStage{margin-top:32px!important}
 main.cs-page.csx .cs-rankLabel{font-size:24px!important}
 main.cs-page.csx .cs-rankList li{font-size:17px!important;padding-block:14px!important}
 main.cs-page.csx .cs-rankList li > .cs-num{font-size:12px!important}
 /* calibration chart panel: tighter inset */
 main.cs-page.csx .cs-instrument{padding:4px 14px 10px}
 /* close: copy on the sky, the city as a band under the button */
 main.cs-page.csx .csx-closeCard{padding-bottom:190px!important;
  background:linear-gradient(180deg,rgba(247,248,250,.7) 0%,rgba(247,248,250,.35) 55%,rgba(247,248,250,0) 72%),url(/lt-assets/horizon-4k.jpg) 50% 100%/auto 520px no-repeat,#e9f0f8!important}
}

/* World Line 2 Light: About, Our Story, Meet the Team, Media, Careers */
/* World Line 2 Light: About and its four pages (Our Story, Team, Media, Careers), light theme mock (Nov 10 2026).
   Copy unchanged. Scoped per page so it can be appended to a shared stylesheet (html/body rules use descendant hooks, since :has cannot nest):
     About    main.about-page          Our Story  main.ose
     Team     main.nai-night:has(.team-grid)
     Careers  main.nai-night:has(.page-close-actions)
     Media    main.lp:has(.md-band)
   Approved Use Cases palette: ground #f7f8fa, headings #0f1d33, body #33405c, quiet #40536d, accent text and buttons #195c9f,
   rules #dce3ec, bright #42a4ff only for fills and rules. Header matches the page. Footer keeps its live dark colour.
   Richer surfaces: hero bands pick up a cool blue with a fading blueprint grid, links and closes sit on one white sheet with one soft depth,
   Our Story drawings become drafting plates (navy line on white), photographs stay in rounded dark frames. */

/* ---------- shared tokens on every About page ---------- */
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)){
 --lt-ground:#f7f8fa;--lt-navy:#0f1d33;--lt-body:#33405c;--lt-quiet:#40536d;--lt-faint:#5b6b82;--lt-rule:#dce3ec;--lt-blue:#195c9f;--lt-fill:#42a4ff;
 --lt-sheet:linear-gradient(160deg,#ffffff 0%,#fbfcfe 55%,#f3f6fa 100%);
 --lt-depth:0 0 0 1px #dce3ec,0 2px 4px rgba(15,29,51,.04),0 32px 64px -40px rgba(15,29,51,.30);
 --lt-horizon:url(/lt-assets/horizon-4k.jpg);--lt-sky:linear-gradient(180deg,#d4e4f6 0%,#e1ecf8 52%,#eaf1f9 100%);
 --background:var(--lt-ground);--foreground:var(--lt-navy);--quiet:var(--lt-quiet);--line:var(--lt-rule);--border:var(--lt-rule);
 --orange:var(--lt-blue);--blue:var(--lt-blue);--muted-foreground:var(--lt-quiet);--ink:var(--lt-navy);--paper:#ffffff;
 --nai-ground:var(--lt-ground);
 --nai-blueblack:radial-gradient(ellipse 60% 90% at 72% 20%,#e3ecf8 0%,#ebf1f9 38%,#f2f5fa 70%,#f7f8fa 100%);
 background:var(--lt-ground)!important;color:var(--lt-navy)}
body:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)){background:#f7f8fa!important}

/* ---------- header: blends with the page, light frosted bar once scrolled ---------- */
html:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;transition:background-color .25s}
html.header-stuck:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header{background:rgba(247,248,250,.84)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(15,29,51,.08)!important}
html:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header :is(.brand,.desktop-nav a,.nav-top){color:#0f1d33!important}
html:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header .brand img{filter:brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(1800%) hue-rotate(190deg)}
html:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header .brand span{color:#195c9f!important}
html:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header .nav-cta{background:#0f1d33!important;color:#fff!important}
html:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header .nav-cta *{color:#fff!important}
html:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header .menu-toggle{color:#0f1d33!important}

/* ---------- banner: two versions to compare, set by <html data-ltb> (mock switch, bottom right). No photography and no tint: the Horizon is kept for the closing boxes.
   line (default, apple-design pass): the page ground and the type do the work. One crafted detail closes every banner the same way: a hairline rule
   with the blue World Line drawn along it once on load (faint start, never empty), ending in the page's own mark.
   plate: the same line on a contained navy panel. Our Story keeps the line band in both.
   The line per page: About branches into its four pages, Team carries one point per person (13), Media splits into Press, Blog and Interviews,
   Careers ends in an open seat, Our Story ends in the commit point. */
main.about-page{--ltb-line:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1304 120' fill='none'%3E%3Cstyle%3E.d{stroke-dasharray:1;stroke-dashoffset:1;animation:d 1.5s cubic-bezier(.22,1,.36,1) .35s forwards}.t{opacity:.18;animation:o .5s ease-out 1.45s forwards}@keyframes d{to{stroke-dashoffset:0}}@keyframes o{to{opacity:1}}@media (prefers-reduced-motion:reduce){.d{animation:none;stroke-dashoffset:0}.t{animation:none;opacity:1}}%3C/style%3E%3Cpath d='M0 96.5H1304' stroke='%23dce3ec'/%3E%3Cpath d='M0 96H600C690 96 700 24 790 24H1286' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cpath d='M0 96H600C690 96 700 48 790 48H1286' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cpath d='M0 96H600C690 96 700 72 790 72H1286' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cpath d='M0 96H1286' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cg class='t' fill='%23195c9f'%3E%3Ccircle cx='1289' cy='24' r='4'/%3E%3Ccircle cx='1289' cy='48' r='4'/%3E%3Ccircle cx='1289' cy='72' r='4'/%3E%3Ccircle cx='1289' cy='96' r='4'/%3E%3C/g%3E%3C/svg%3E")}
main.nai-night:has(.team-grid){--ltb-line:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1304 120' fill='none'%3E%3Cstyle%3E.d{stroke-dasharray:1;stroke-dashoffset:1;animation:d 1.5s cubic-bezier(.22,1,.36,1) .35s forwards}.t{opacity:.18;animation:o .5s ease-out 1.45s forwards}@keyframes d{to{stroke-dashoffset:0}}@keyframes o{to{opacity:1}}@media (prefers-reduced-motion:reduce){.d{animation:none;stroke-dashoffset:0}.t{animation:none;opacity:1}}%3C/style%3E%3Cpath d='M0 96.5H1304' stroke='%23dce3ec'/%3E%3Cpath d='M0 96H1289' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cg class='t' fill='%23195c9f'%3E%3Ccircle cx='560.0' cy='96' r='4'/%3E%3Ccircle cx='620.8' cy='96' r='4'/%3E%3Ccircle cx='681.5' cy='96' r='4'/%3E%3Ccircle cx='742.2' cy='96' r='4'/%3E%3Ccircle cx='803.0' cy='96' r='4'/%3E%3Ccircle cx='863.8' cy='96' r='4'/%3E%3Ccircle cx='924.5' cy='96' r='4'/%3E%3Ccircle cx='985.2' cy='96' r='4'/%3E%3Ccircle cx='1046.0' cy='96' r='4'/%3E%3Ccircle cx='1106.8' cy='96' r='4'/%3E%3Ccircle cx='1167.5' cy='96' r='4'/%3E%3Ccircle cx='1228.2' cy='96' r='4'/%3E%3Ccircle cx='1289.0' cy='96' r='4'/%3E%3C/g%3E%3C/svg%3E")}
main.nai-night:has(.page-close-actions){--ltb-line:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1304 120' fill='none'%3E%3Cstyle%3E.d{stroke-dasharray:1;stroke-dashoffset:1;animation:d 1.5s cubic-bezier(.22,1,.36,1) .35s forwards}.t{opacity:.18;animation:o .5s ease-out 1.45s forwards}@keyframes d{to{stroke-dashoffset:0}}@keyframes o{to{opacity:1}}@media (prefers-reduced-motion:reduce){.d{animation:none;stroke-dashoffset:0}.t{animation:none;opacity:1}}%3C/style%3E%3Cpath d='M0 96.5H1304' stroke='%23dce3ec'/%3E%3Cpath d='M0 96H1264' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Ccircle class='t' cx='1280' cy='96' r='12' fill='%23f7f8fa' stroke='%23195c9f' stroke-width='1.5'/%3E%3C/svg%3E")}
main.lp:has(.md-band){--ltb-line:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1304 120' fill='none'%3E%3Cstyle%3E.d{stroke-dasharray:1;stroke-dashoffset:1;animation:d 1.5s cubic-bezier(.22,1,.36,1) .35s forwards}.t{opacity:.18;animation:o .5s ease-out 1.45s forwards}@keyframes d{to{stroke-dashoffset:0}}@keyframes o{to{opacity:1}}@media (prefers-reduced-motion:reduce){.d{animation:none;stroke-dashoffset:0}.t{animation:none;opacity:1}}%3C/style%3E%3Cpath d='M0 96.5H1304' stroke='%23dce3ec'/%3E%3Cpath d='M0 96H760C850 96 860 48 950 48H1286' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cpath d='M0 96H760C850 96 860 72 950 72H1286' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cpath d='M0 96H1286' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cg class='t' fill='%23195c9f'%3E%3Ccircle cx='1289' cy='48' r='4'/%3E%3Ccircle cx='1289' cy='72' r='4'/%3E%3Ccircle cx='1289' cy='96' r='4'/%3E%3C/g%3E%3C/svg%3E")}
main.ose{--ltb-line:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1304 120' fill='none'%3E%3Cstyle%3E.d{stroke-dasharray:1;stroke-dashoffset:1;animation:d 1.5s cubic-bezier(.22,1,.36,1) .35s forwards}.t{opacity:.18;animation:o .5s ease-out 1.45s forwards}@keyframes d{to{stroke-dashoffset:0}}@keyframes o{to{opacity:1}}@media (prefers-reduced-motion:reduce){.d{animation:none;stroke-dashoffset:0}.t{animation:none;opacity:1}}%3C/style%3E%3Cpath d='M0 96.5H1304' stroke='%23dce3ec'/%3E%3Cpath d='M0 96H1276' stroke='%2342a4ff' stroke-width='1.5' stroke-linecap='round' fill='none' pathLength='1' class='d'/%3E%3Cg class='t'%3E%3Ccircle cx='1284' cy='96' r='12' stroke='%2342a4ff' stroke-opacity='.45' stroke-width='1.5'/%3E%3Ccircle cx='1284' cy='96' r='4.5' fill='%23195c9f'/%3E%3C/g%3E%3C/svg%3E")}
:is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{position:relative;isolation:isolate;padding-top:clamp(132px,11vw,156px)}
html:not([data-ltb=plate]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:var(--lt-ground)!important;border-bottom:0!important;padding-bottom:clamp(128px,11vw,156px)!important;margin-bottom:clamp(24px,3vw,48px)}
html:not([data-ltb=plate]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell,html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{position:relative}
html:not([data-ltb=plate]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{content:'';position:absolute;left:var(--lt-pad,0);right:0;bottom:calc(-1*clamp(108px,10vw,132px));aspect-ratio:1304/120;height:auto;pointer-events:none;background:var(--ltb-line) 0 50%/100% 100% no-repeat}
/* plate */
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:transparent!important;padding-top:clamp(112px,9vw,128px)!important;padding-bottom:clamp(40px,4vw,64px)!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{background:radial-gradient(80% 120% at 85% 0%,#1c3560 0%,#12223d 45%,#0f1d33 100%);border-radius:20px;padding:clamp(40px,4.4vw,72px) clamp(28px,4.4vw,72px) clamp(112px,10vw,140px);
 box-shadow:0 2px 4px rgba(15,29,51,.06),0 40px 80px -48px rgba(15,29,51,.55)}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{content:'';position:absolute;left:clamp(28px,4.4vw,72px);right:clamp(28px,4.4vw,72px);bottom:clamp(20px,2.4vw,36px);aspect-ratio:1304/120;height:auto;pointer-events:none;background:var(--ltb-line) 0 50%/100% 100% no-repeat;filter:brightness(1.25)}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band :is(h1,.lt-team-lead+*){color:#f3f5f8}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1 span{color:#7cc0ff}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band :is(.page-lead,.lt-team-lead){color:#c2cbd8}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .eyebrow{color:#a9b6c8}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .cta{background:#f3f5f8!important;color:#0f1d33!important;border-color:#f3f5f8!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .cta *{color:#0f1d33!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .text-link{color:#f3f5f8!important;border-bottom-color:rgba(243,245,248,.45)}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .text-link svg{color:#7cc0ff}
@media (max-width:760px){
 :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after,main.ose .ose-open-grid::after{aspect-ratio:auto!important;height:56px!important;background-size:auto 100%!important;background-position:100% 50%!important}
}
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) h1{color:var(--lt-navy)}
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) h1 span{color:var(--lt-blue)}
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .eyebrow{color:var(--lt-quiet)}
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .eyebrow .dot{background:var(--lt-fill)}
:is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-lead{color:var(--lt-body)}

/* ---------- buttons and text links ---------- */
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .cta{background:var(--lt-blue)!important;color:#fff!important;border-color:var(--lt-blue)!important;transition:background-color .2s}
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .cta *{color:#fff!important}
@media (hover:hover) and (pointer:fine){:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .cta:hover{background:#134a82!important;border-color:#134a82!important}}
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions)) .text-link{color:var(--lt-navy)!important}
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions)) .text-link svg{color:var(--lt-blue)}
:is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(a,button):focus-visible{outline-color:var(--lt-blue)}

/* =====================================================================
   ABOUT  /about
   ===================================================================== */
/* the four links sit on one white sheet, rules inside stay hairlines */
main.about-page .section-pad{padding-top:clamp(8px,2vw,24px)}
main.about-page .about-index{background:var(--lt-sheet);border-radius:20px;box-shadow:var(--lt-depth);padding:clamp(12px,1.6vw,24px) clamp(24px,3vw,48px);position:relative;overflow:hidden}
main.about-page .about-index a{color:var(--lt-navy);border-color:var(--lt-rule)!important;transition:background-color .25s}
main.about-page .about-index h2{color:var(--lt-navy)}
main.about-page .about-index p{color:var(--lt-body)}
main.about-page .about-index .idx-no{color:var(--lt-blue);font-weight:600}
main.about-page .about-index svg{color:var(--lt-blue)}
@media (hover:hover) and (pointer:fine){main.about-page .about-index a:hover h2{color:var(--lt-blue)}}
/* close: the light Horizon card, copy on the sky, the city as a band under the button (Use Cases and telecom close) */
main.about-page .about-close .page-close-inner{border-radius:20px;overflow:hidden;padding:clamp(32px,4vw,64px) clamp(24px,4vw,64px) clamp(170px,16vw,230px);
 background:linear-gradient(90deg,rgba(247,248,250,.9) 0%,rgba(247,248,250,.55) 34%,rgba(247,248,250,0) 62%),linear-gradient(180deg,rgba(247,248,250,.7) 0%,rgba(247,248,250,0) 55%),var(--lt-horizon) 50% calc(100% + clamp(60px,9vw,140px))/max(100%,760px) auto no-repeat,#c5dffa;
 box-shadow:0 0 0 1px #dce3ec,0 2px 4px rgba(15,29,51,.04),0 36px 72px -48px rgba(15,29,51,.35)}
main.about-page .about-close :is(h2,h2 *){color:var(--lt-navy)}
main.about-page .about-close .body-copy{color:var(--lt-body)}

/* =====================================================================
   TEAM  /about/team
   ===================================================================== */
main.nai-night:has(.team-grid) .team-frame{background:#e9eef5;border-color:transparent;border-radius:14px;box-shadow:0 0 0 1px #dce3ec}
main.nai-night:has(.team-grid) .team-frame::after{background:linear-gradient(#0000 55%,rgba(15,29,51,.18) 100%)}
main.nai-night:has(.team-grid) .team-name{color:var(--lt-navy)}
main.nai-night:has(.team-grid) .team-name::after{background:var(--lt-fill)}
main.nai-night:has(.team-grid) .team-role{color:var(--lt-quiet)}
main.nai-night:has(.team-grid) .team-link{color:var(--lt-blue);font-weight:600}
main.nai-night:has(.team-grid) .team-actions{border-top-color:var(--lt-rule)}

/* =====================================================================
   CAREERS  /about/careers
   ===================================================================== */
/* the next steps move up under the lead (lt-about.js copies them into the hero), the empty close goes */
main:has(.lt-car-acts)>section.page-close{display:none}
main .page-hero .lt-car-acts{margin-top:clamp(36px,4vw,52px);display:grid;justify-items:start;gap:24px}
main .page-hero .lt-car-acts .page-close-actions{display:flex;flex-wrap:wrap;gap:16px}
main .page-hero .lt-car-acts .text-link{color:var(--lt-navy)!important;border-bottom-color:rgba(15,29,51,.35)}
/* Team: the two-sentence lead (draft copy, lt-about.js) */
main .page-hero .lt-team-lead{max-width:52ch}

/* =====================================================================
   MEDIA  /about/media
   ===================================================================== */
/* the folder band joins the ground: a hairline instead of the grey tint */
main.lp:has(.md-band) .md-band{--md-ground:#f7f8fa;--md-line:#dce3ec;--md-link:#195c9f;--md-meta:#40536d;--md-body:#33405c;background:#f7f8fa!important;border-top:1px solid #dce3ec}
main.lp:has(.md-band) .md-shelf .gf-shadow{background:rgba(15,29,51,.20)}
main.lp:has(.md-band) .md-filter button[aria-pressed=true]{border-bottom-color:var(--lt-fill)}
main.lp:has(.md-band) .md-band .md-actions .cta{background:var(--lt-blue)!important}

/* =====================================================================
   OUR STORY  /about/our-story
   ===================================================================== */
main.ose{--ose-text:var(--lt-body);--ose-navy:#0f1d33;--ose-navy-line:#1f3a63}
/* opening band */
main.ose .ose-open-grid{padding-bottom:clamp(64px,6vw,88px)}
main.ose .ose-open-grid::before{background:var(--lt-ground)!important}
main.ose .ose-open-grid::after{content:'';position:absolute;left:0;right:0;bottom:calc(-1*clamp(56px,6vw,96px) + 10px);aspect-ratio:1304/120;height:auto;pointer-events:none;background:var(--ltb-line) 0 50%/100% 100% no-repeat}
main.ose .ose-standfirst>p:first-child{color:var(--lt-body)}
main.ose .ose-sf-q{color:var(--lt-navy)}
main.ose .ose-byline{color:var(--lt-quiet)}
main.ose .ose-byline span:first-child{color:var(--lt-navy)}
/* drawings: drafting plates, navy line on white paper with a faint grid */
main.ose :is(.plate-frame,.ose-sch-frame){background:#fff linear-gradient(rgba(25,92,159,.05) 1px,transparent 1px) 0 0/24px 24px,#fff linear-gradient(90deg,rgba(25,92,159,.05) 1px,transparent 1px) 0 0/24px 24px;
 background-color:#fff;border-color:transparent;border-radius:14px;box-shadow:0 0 0 1px #dce3ec,0 18px 40px -34px rgba(15,29,51,.35)}
main.ose :is(.plate,.ose-sch) .sch{color:var(--lt-navy)}
main.ose .ose-sch .sch text{stroke:#fff}
main.ose .plate figcaption{color:var(--lt-body)}
main.ose .plate .plate-no{color:var(--lt-blue)}
main.ose .ose-sch figcaption,main.ose :is(.ose-fig,.ose-ph) figcaption{color:var(--lt-quiet)}
/* photographs and film stay dark, in rounded frames */
main.ose .ose-ph-frame{border-color:transparent;border-radius:14px;box-shadow:0 0 0 1px rgba(15,29,51,.08)}
/* the travelling waveform (Fig. 04) */
main.ose .still-frame{color:var(--lt-navy)}
main.ose .sf-window{background:rgba(255,255,255,.55)!important;border-color:rgba(15,29,51,.42)!important}
/* left rail */
main.ose .ose-rail a{color:#7b889c}
main.ose .ose-rail li[data-on=true] a{color:var(--lt-quiet)}
main.ose .ose-rail a[aria-current]{color:var(--lt-navy);font-weight:600}
main.ose .ose-rail ol::after{background:var(--lt-fill)}
@media (hover:hover) and (pointer:fine){main.ose .ose-rail a:hover{color:var(--lt-navy)}}
/* copy: full strength */
main.ose .ose-kicker{color:var(--lt-quiet)}
main.ose .ose-kicker span{color:var(--lt-blue);font-weight:600}
main.ose .ose-pull{border-top-color:rgba(15,29,51,.25)}
main.ose .ose-pull p::before,main.ose .ose-pull::after{color:var(--lt-fill)}
main.ose .ose-box{border-top-color:rgba(15,29,51,.25)}
main.ose .ose-box li::before{background:var(--lt-fill)}
main.ose .ose-again [data-again]{color:color-mix(in oklab,var(--lt-navy) calc(var(--p,1) * 100%),#b8c2d0)}
main.ose .ose-stat-n span{color:var(--lt-blue)}
main.ose .ose-stat figcaption span{color:var(--lt-quiet)}
/* the breakthrough spread stays a navy plate: its own light-on-dark tokens */
main.ose .ose-spread{--foreground:#f3f5f8;--quiet:#a9b2c0;--orange:#42a4ff;--line:#1f3a63;--ose-text:#c2c9d4;
 background:radial-gradient(90% 70% at 70% 0%,#16294a 0%,#0f1d33 60%)!important;border-color:transparent!important;border-radius:20px;box-shadow:0 2px 4px rgba(15,29,51,.06),0 40px 80px -48px rgba(15,29,51,.55)}
main.ose .ose-spread .ose-ph-frame{border-radius:12px;box-shadow:0 0 0 1px #1f3a63}
main.ose .ose-spread .ose-kicker span{color:#42a4ff}
/* the closing chapter's three steps, graded blue that reads on light */
main.ose .ose-box-steps li:first-child{color:#3a75b5}
main.ose .ose-box-steps li:nth-child(2){color:var(--lt-blue)}
main.ose .ose-box-steps li:nth-child(3){color:#0f3d73}
main.ose .ose-rewrite-h .is-old{color:var(--lt-quiet)}
/* finale on the light sheet */
main.ose .ose-finale{border-top:0}
main.ose .ose-finale>.shell{border-radius:20px;overflow:hidden;padding:clamp(36px,4.4vw,72px) clamp(24px,4.4vw,72px) clamp(180px,18vw,260px);
 background:linear-gradient(90deg,rgba(247,248,250,.9) 0%,rgba(247,248,250,.55) 34%,rgba(247,248,250,0) 62%),linear-gradient(180deg,rgba(247,248,250,.7) 0%,rgba(247,248,250,0) 55%),var(--lt-horizon) 50% calc(100% + clamp(60px,9vw,140px))/max(100%,760px) auto no-repeat,#c5dffa;
 box-shadow:0 0 0 1px #dce3ec,0 2px 4px rgba(15,29,51,.04),0 36px 72px -48px rgba(15,29,51,.35)}
main.ose .ose-finale .ose-cta p{color:var(--lt-body)}
main.ose .ose-cta .text-link{color:var(--lt-navy)!important}

/* ---------- Our Story: the left rail collapses to its blue line (toggle added by lt-about.js) ---------- */
main.ose .ose-rail{position:sticky}
main.ose .ose-rail :is(.ose-rail-head,ol a){transition:opacity .3s cubic-bezier(.22,1,.36,1)}
html[data-lt-rail=closed] main.ose .ose-rail :is(.ose-rail-head,ol a){opacity:0;pointer-events:none}
.lt-rail-btn{position:absolute;top:calc(clamp(72px,9vw,140px) - 5px);left:112px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;padding:0;cursor:pointer;
 background:#fff;color:#195c9f;border:0;box-shadow:0 0 0 1px #dce3ec,0 2px 6px -2px rgba(15,29,51,.18);transition:left .35s cubic-bezier(.22,1,.36,1),transform .2s}
.lt-rail-btn svg{width:14px;height:14px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
html[data-lt-rail=closed] .lt-rail-btn{left:-12px}
html[data-lt-rail=closed] .lt-rail-btn svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.lt-rail-btn:hover{box-shadow:0 0 0 1px #195c9f,0 2px 6px -2px rgba(15,29,51,.18)}}
.lt-rail-btn:focus-visible{outline:2px solid #195c9f;outline-offset:2px}

/* ---------- Our Story Fig. 06: the twin shows at once, no dark frame, no slow mask reveal ---------- */
main.ose .ose-side-fig .ose-ph-frame{background:#e9eef5}
main.ose .ose-side-fig [data-mask] .ose-mask-inner{clip-path:none!important;transition:none!important}
main.ose .ose-side-fig [data-mask] .ose-mask-inner>*{transform:none!important;transition:none!important}

/* ---------- phone ---------- */
@media (max-width:760px){
 main.about-page .about-close .page-close-inner,main.ose .ose-finale>.shell{padding-bottom:170px;background-size:100% 100%,100% 100%,auto 360px,auto;background-position:0 0,0 0,50% 100%,0 0}
}

/* ---------- mock-only banner switch ---------- */
#ltb-switch{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;gap:2px;padding:4px;background:rgba(255,255,255,.94);border:1px solid #dce3ec;border-radius:999px;font:500 13px/1 Inter,system-ui,sans-serif}
#ltb-switch a{padding:8px 14px;border-radius:999px;text-decoration:none;color:#0f1d33}
#ltb-switch a[aria-current]{background:#0f1d33;color:#fff}

/* ---------- banner composition (clean and plate): an editorial two-column banner on wide screens ----------
   Headline left, the lead set against its last line on the right, so the banner reads as one composed block instead of a heading
   above loose copy. Careers' next steps run full width under both. Same grid on all four index-style pages. */
@media (min-width:1100px){
 :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(48px,6vw,112px);align-items:end}
 :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{grid-column:1/-1}
 :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>h1{grid-column:1;grid-row:2;margin:clamp(40px,3.6vw,52px) 0 0}
 :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>:is(.page-lead,.lt-team-lead){grid-column:2;grid-row:2;align-self:end;margin:0 0 .55em;max-width:34ch;font-size:clamp(18px,1.35vw,21px);line-height:1.5;letter-spacing:-.01em}
 :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.eyebrow{grid-row:1}
 main .page-hero.nai-band>.shell>.lt-car-acts{grid-row:3;grid-auto-flow:column;justify-content:start;align-items:center;gap:28px}
}

/* =====================================================================
   ROUND 2 FINAL: the navy plate is the banner on all five pages (independent premium review, Nov 10).
   Flat navy with a 3% shift and a 1px inner edge, no glow, no outer shadow (the closing box keeps the page's one shadow).
   Same padding and minimum height everywhere, text column set against the headline's last line,
   one motif on every page: a 1px World Line ending in a 6px point, one plate-padding above the bottom edge, brightening once on load.
   ===================================================================== */
html[data-ltb=plate]{--lt-plate:linear-gradient(180deg,#122340 0%,#0f1d33 100%);--lt-plate-edge:inset 0 0 0 1px rgba(255,255,255,.06);--lt-plate-pad:clamp(28px,4.5vw,64px)}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{
 background:var(--lt-plate)!important;box-shadow:var(--lt-plate-edge)!important;border-radius:20px;min-height:min(440px,calc(100svh - 150px));
 padding:var(--lt-plate-pad) var(--lt-plate-pad) calc(var(--lt-plate-pad) * 2 + 6px)!important;box-sizing:border-box}
/* the motif: CSS only, so the point stays round at any width and the line ends at its centre */
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after,
html[data-ltb=plate] main.ose .ose-open-grid::after{content:'';position:absolute;left:var(--lt-plate-pad);right:var(--lt-plate-pad);bottom:var(--lt-plate-pad);height:6px;aspect-ratio:auto!important;filter:none;pointer-events:none;
 background:radial-gradient(circle at calc(100% - 3px) 50%,#42a4ff 2.6px,transparent 3.2px),linear-gradient(#42a4ff,#42a4ff) 0 50%/calc(100% - 3px) 1px no-repeat!important;
 opacity:.2;animation:lt-line 1.3s cubic-bezier(.25,1,.5,1) .3s forwards}
@keyframes lt-line{to{opacity:.9}}
@media (prefers-reduced-motion:reduce){html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after,html[data-ltb=plate] main.ose .ose-open-grid::after{animation:none;opacity:.9}}
/* type inside the plate: headline capped and tracked a touch looser so word gaps stay open */
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1,
html[data-ltb=plate] main.ose .ose-open-grid h1{font-size:clamp(44px,5.4vw,84px)!important;letter-spacing:-.045em!important;line-height:1.0!important;color:#f3f5f8!important}
html[data-ltb=plate] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) h1 span{color:#7cc0ff!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .eyebrow,
html[data-ltb=plate] main.ose .ose-open>.eyebrow{color:#a9b6c8!important}
/* Team has no eyebrow on the live page: the headline takes the eyebrow's row so the plate keeps the same height and rhythm */
@media (min-width:1100px){
 html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{align-content:end}
 html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.eyebrow{align-self:start}
 /* Careers: lead and next steps share the right column, so the plate fits the screen */
 html[data-ltb=plate] main.nai-night:has(.page-close-actions) .page-hero.nai-band>.shell>h1{grid-row:2/4}
 html[data-ltb=plate] main.nai-night:has(.page-close-actions) .page-hero.nai-band>.shell>.page-lead{grid-row:2;align-self:end;margin-bottom:28px}
 html[data-ltb=plate] main .page-hero.nai-band>.shell>.lt-car-acts{grid-column:2;grid-row:3;grid-auto-flow:row;align-self:end;margin:0 0 .4em;gap:20px}
}
/* Careers buttons: one clear first step, the second outlined */
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:first-child{background:#f3f5f8!important;color:#0f1d33!important;border-color:#f3f5f8!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:first-child *{color:#0f1d33!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child){background:transparent!important;color:#f3f5f8!important;border:1px solid rgba(243,245,248,.32)!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child) *{color:#f3f5f8!important}
@media (hover:hover) and (pointer:fine){html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child):hover{background:rgba(243,245,248,.08)!important}}
/* Team: less dead space between the plate and the portraits */
html[data-ltb=plate] main.nai-night:has(.team-grid) .team-section{padding-top:clamp(24px,3vw,40px)}
/* Our Story: the same plate around its opening; standfirst set against the headline like the other pages */
html[data-ltb=plate] main.ose .ose-open>.eyebrow,html[data-ltb=plate] main.ose .ose-open-grid{padding-inline:var(--lt-plate-pad)}
html[data-ltb=plate] main.ose .ose-open-grid{padding-bottom:calc(var(--lt-plate-pad) * 2 + 6px);margin-bottom:clamp(40px,4vw,64px)}
html[data-ltb=plate] main.ose .ose-open-grid::before{left:0!important;right:0!important;width:auto!important;top:calc(-1*(var(--lt-plate-pad) + 55px))!important;bottom:0!important;
 background:var(--lt-plate)!important;box-shadow:var(--lt-plate-edge);border-radius:20px}
html[data-ltb=plate] main.ose .ose-open>.eyebrow{position:relative;z-index:0}
html[data-ltb=plate] main.ose .ose-standfirst>p:first-child{color:#c2cbd8}
html[data-ltb=plate] main.ose .ose-sf-q{color:#f3f5f8}
html[data-ltb=plate] main.ose .ose-byline{color:#a9b6c8;border-top-color:rgba(243,245,248,.14)}
html[data-ltb=plate] main.ose .ose-byline span:first-child{color:#f3f5f8}
@media (min-width:1100px){
}
/* the current section in the nav */
html:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header .desktop-nav a.nav-top[href^="/about"]::after{transform:scaleX(1);background:#195c9f}

/* closing boxes, refined: no white wash over the skyline, a sized button, less empty sky */
main.about-page .about-close .page-close-inner,main.ose .ose-finale>.shell{
 background:linear-gradient(180deg,rgba(247,248,250,.72) 0%,rgba(247,248,250,.28) 42%,rgba(247,248,250,0) 60%),var(--lt-horizon) 50% calc(100% + clamp(30px,5vw,80px))/max(100%,760px) auto no-repeat,#c5dffa!important}
main.about-page .about-close .page-close-inner{padding-bottom:clamp(150px,13vw,190px)!important}
main.about-page .about-close .page-close-inner>.cta{width:auto!important;min-width:0!important;justify-self:end;align-self:end;padding-inline:32px!important}
@media (max-width:760px){main.about-page .about-close .page-close-inner,main.ose .ose-finale>.shell{background-size:100% 100%,auto 360px,auto!important;background-position:0 0,50% 100%,0 0!important}}
/* phone: a little more air between the last line of content and the motif */
@media (max-width:760px){
 html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{padding-bottom:calc(var(--lt-plate-pad) * 2 + 26px)!important}
 html[data-ltb=plate] main.ose .ose-open-grid{padding-bottom:calc(var(--lt-plate-pad) * 2 + 26px)}
}

/* =====================================================================
   ROUND 2, LIGHT SHEET (Brina: the theme is light). The banner keeps the plate's frame, proportions, composition and motif,
   as a white sheet on the #f7f8fa ground: a hairline ring and one soft depth, navy type, #195c9f accent. The navy version is in round1-backup.
   ===================================================================== */
html[data-ltb=plate]{--lt-plate:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);--lt-plate-edge:0 0 0 1px #dce3ec,0 2px 4px rgba(15,29,51,.04),0 28px 56px -40px rgba(15,29,51,.22)}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1,
html[data-ltb=plate] main.ose .ose-open-grid h1{color:#0f1d33!important}
html[data-ltb=plate] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) h1 span{color:#195c9f!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .eyebrow,
html[data-ltb=plate] main.ose .ose-open>.eyebrow{color:#40536d!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band :is(.page-lead,.lt-team-lead){color:#33405c}
html[data-ltb=plate] main.ose .ose-standfirst>p:first-child{color:#33405c}
html[data-ltb=plate] main.ose .ose-sf-q{color:#0f1d33}
html[data-ltb=plate] main.ose .ose-byline{color:#40536d;border-top-color:#dce3ec}
html[data-ltb=plate] main.ose .ose-byline span:first-child{color:#0f1d33}
/* Careers: first step filled, second outlined, LinkedIn as a navy text link */
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:first-child{background:#195c9f!important;color:#fff!important;border-color:#195c9f!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:first-child *{color:#fff!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child){background:transparent!important;color:#0f1d33!important;border:1px solid rgba(15,29,51,.28)!important}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child) *{color:#0f1d33!important}
@media (hover:hover) and (pointer:fine){html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child):hover{background:rgba(15,29,51,.04)!important}}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .text-link{color:#0f1d33!important;border-bottom-color:rgba(15,29,51,.35)}
html[data-ltb=plate] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .text-link svg{color:#195c9f}

/* ---------- light sheet with depth (Brina: never plain white, one step above it) ----------
   A drafting surface: minor 24px and major 96px grid in the brand blue at low strength, fading out from the top-right corner,
   over a cool diagonal falloff. Light-catching top edge, hairline ring, one soft shadow. Matches Our Story's drafting plates. */
html[data-ltb=plate]{
 --lt-plate:radial-gradient(130% 150% at 100% 0%,rgba(250,252,254,0) 0%,rgba(250,252,254,.5) 42%,#fafcfe 78%),
  linear-gradient(rgba(25,92,159,.10) 1px,transparent 1px) -1px -1px/96px 96px,
  linear-gradient(90deg,rgba(25,92,159,.10) 1px,transparent 1px) -1px -1px/96px 96px,
  linear-gradient(rgba(25,92,159,.05) 1px,transparent 1px) -1px -1px/24px 24px,
  linear-gradient(90deg,rgba(25,92,159,.05) 1px,transparent 1px) -1px -1px/24px 24px,
  linear-gradient(155deg,#ffffff 0%,#f6f9fc 55%,#edf2f8 100%);
 --lt-plate-edge:inset 0 1px 0 #ffffff,0 0 0 1px #d9e1eb,0 2px 4px rgba(15,29,51,.04),0 30px 60px -42px rgba(15,29,51,.28)}

/* =====================================================================
   ROUND 3: full-width banners, no card, no grid, no blue tint, no photo (Brina, Nov 10). Two versions on the mock switch:
   studio: depth from light alone, a soft neutral highlight from the top left falling off into cool grey, a quiet lower edge.
   raised: the banner is a deeper neutral plane and the page beneath rises over it as a full-width sheet with a soft top edge.
   Both keep the headline and lead composition and one 1px line ending in a 6px point. The grid-sheet version is in round1-backup.
   ===================================================================== */
html:is([data-ltb=studio],[data-ltb=raised]){--ltb-studio:radial-gradient(85% 150% at 12% -15%,#ffffff 0%,#f7f8fa 36%,#eceff3 72%,#e6eaef 100%);
 --ltb-plane:radial-gradient(70% 120% at 10% -20%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#e7ebf0 0%,#e2e7ed 100%)}
/* the motif, same on every page */
html:is([data-ltb=studio],[data-ltb=raised]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after,
html:is([data-ltb=studio],[data-ltb=raised]) main.ose .ose-open-grid::after{content:'';position:absolute;left:0;right:0;bottom:calc(-1*clamp(60px,5.5vw,80px));height:6px;aspect-ratio:auto!important;pointer-events:none;
 background:radial-gradient(circle at calc(100% - 3px) 50%,#42a4ff 2.6px,transparent 3.2px),linear-gradient(#42a4ff,#42a4ff) 0 50%/calc(100% - 3px) 1px no-repeat!important;opacity:.2;animation:lt-line 1.3s cubic-bezier(.25,1,.5,1) .3s forwards}
@media (prefers-reduced-motion:reduce){html:is([data-ltb=studio],[data-ltb=raised]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after,html:is([data-ltb=studio],[data-ltb=raised]) main.ose .ose-open-grid::after{animation:none;opacity:.9}}
html:is([data-ltb=studio],[data-ltb=raised]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{padding-bottom:clamp(120px,10.5vw,148px)!important;margin-bottom:0!important}
/* studio */
html[data-ltb=studio] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:var(--ltb-studio)!important;box-shadow:inset 0 -1px 0 rgba(15,29,51,.07)}
html[data-ltb=studio] main.ose .ose-open-grid::before{background:var(--ltb-studio)!important;box-shadow:inset 0 -1px 0 rgba(15,29,51,.07)}
html[data-ltb=studio] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*{margin-top:clamp(32px,3.4vw,56px)}
html[data-ltb=studio] main.lp:has(.md-band) .md-band{border-top:0}
/* raised */
html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:var(--ltb-plane)!important;padding-bottom:clamp(152px,13vw,184px)!important}
html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*{position:relative;z-index:1;margin-top:-40px!important;padding-top:calc(clamp(40px,4vw,64px) + 40px)!important;background:#f7f8fa!important;border-top:0!important;border-radius:28px 28px 0 0;
 box-shadow:inset 0 1px 0 #ffffff,0 -1px 0 rgba(15,29,51,.05),0 -28px 56px -40px rgba(15,29,51,.28)}
html[data-ltb=raised] main.lp:has(.md-band) .md-band{--md-ground:#f7f8fa}
/* Careers has nothing after its banner, so the footer is the plane it meets */
html[data-ltb=raised] main.nai-night:has(.page-close-actions) .page-hero.nai-band{padding-bottom:clamp(120px,10.5vw,148px)!important}
/* Our Story raised: the opening (eyebrow, headline, drawings) sits on the plane, the story itself rises over it */
html[data-ltb=raised] main.ose .ose-open-grid::before{background:transparent!important}
html[data-ltb=raised] main.ose .ose-open{position:relative;padding-bottom:clamp(88px,8vw,120px)}
html[data-ltb=raised] main.ose .ose-open::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;background:var(--ltb-plane);pointer-events:none}
html[data-ltb=raised] main.ose .ose-grid{position:relative;border-top:0!important;margin-top:-40px}
html[data-ltb=raised] main.ose .ose-grid::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;background:#f7f8fa;border-radius:28px 28px 0 0;pointer-events:none;
 box-shadow:inset 0 1px 0 #ffffff,0 -1px 0 rgba(15,29,51,.05),0 -28px 56px -40px rgba(15,29,51,.28)}
@media (max-width:760px){
 html:is([data-ltb=studio],[data-ltb=raised]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after,html:is([data-ltb=studio],[data-ltb=raised]) main.ose .ose-open-grid::after{bottom:-44px}
 html:is([data-ltb=studio],[data-ltb=raised]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{padding-bottom:92px!important}
 html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band{padding-bottom:124px!important}
 html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*,html[data-ltb=raised] main.ose .ose-grid::before{border-radius:20px 20px 0 0}
}
/* round 3: Careers right column and button order, Our Story side-by-side opening, in both full-width versions */
@media (min-width:1100px){
 html:is([data-ltb=studio],[data-ltb=raised]) main.nai-night:has(.page-close-actions) .page-hero.nai-band>.shell>h1{grid-row:2/4}
 html:is([data-ltb=studio],[data-ltb=raised]) main.nai-night:has(.page-close-actions) .page-hero.nai-band>.shell>.page-lead{grid-row:2;align-self:end;margin-bottom:28px}
 html:is([data-ltb=studio],[data-ltb=raised]) main .page-hero.nai-band>.shell>.lt-car-acts{grid-column:2;grid-row:3;grid-auto-flow:row;align-self:end;margin:0 0 .4em;gap:20px}
}
html:is([data-ltb=studio],[data-ltb=raised]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child){background:transparent!important;color:#0f1d33!important;border:1px solid rgba(15,29,51,.28)!important}
html:is([data-ltb=studio],[data-ltb=raised]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child) *{color:#0f1d33!important}
@media (hover:hover) and (pointer:fine){html:is([data-ltb=studio],[data-ltb=raised]) :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child):hover{background:rgba(15,29,51,.05)!important}}

/* ---------- round 3 final: Raised page only (independent premium review). One template on all five pages ---------- */
html[data-ltb=raised]{--ltb-plane:radial-gradient(120% 100% at 10% 0%,#fcfdfe 0%,#eef1f5 48%,#e2e6ec 100%);
 --ltb-edge:inset 0 1px 0 #ffffff,0 -1px 0 rgba(15,29,51,.06),0 -18px 40px -24px rgba(15,29,51,.12);--ln:clamp(60px,5.5vw,80px)}
html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*{border-radius:24px 24px 0 0!important;box-shadow:var(--ltb-edge)!important}
html[data-ltb=raised] main.ose .ose-grid::before{border-radius:24px 24px 0 0!important;box-shadow:var(--ltb-edge)!important}
/* line 72px under the headline block, sheet top 64px under the line */
html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after,
html[data-ltb=raised] main.ose .ose-open-grid::after{bottom:calc(-1*var(--ln))!important}
html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{padding-bottom:calc(var(--ln) + 64px + 40px)!important}
@media (min-width:1100px){
 /* same banner height on every page, content set to the bottom, headline and right column share a baseline */
 html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{min-height:300px;align-content:end}
 html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>h1{align-self:end}
 html[data-ltb=raised] main.ose .ose-open>.eyebrow{margin-top:-16px}
}
/* Careers: a short sheet rises after the banner, like every other page */
html[data-ltb=raised] main:has(.lt-car-acts)::after{content:'';display:block;position:relative;z-index:1;height:clamp(96px,9vw,140px);margin-top:-40px;background:#f7f8fa;border-radius:24px 24px 0 0;box-shadow:var(--ltb-edge)}
/* Our Story: the plane ends under the line, the sheet rises 64px below it and carries the drawings and the story */
html[data-ltb=raised] main.ose .ose-open::before{display:none}
html[data-ltb=raised] main.ose .ose-open{padding-bottom:0}
html[data-ltb=raised] main.ose .ose-open-grid{margin-bottom:0}
html[data-ltb=raised] main.ose .ose-open-grid::before{background:var(--ltb-plane)!important;left:calc(50% - 50vw)!important;right:auto!important;width:100vw!important;top:-320px!important;bottom:calc(-1*(var(--ln) + 64px + 40px))!important;border-radius:0!important;box-shadow:none!important}
html[data-ltb=raised] main.ose .ose-open>.plates{position:relative;margin-top:calc(var(--ln) + 64px + 56px)}
html[data-ltb=raised] main.ose .ose-open>.plates::before{content:'';position:absolute;top:-56px;bottom:-200px;left:calc(50% - 50vw);width:100vw;z-index:-1;pointer-events:none;background:#f7f8fa;border-radius:24px 24px 0 0;box-shadow:var(--ltb-edge)}
html[data-ltb=raised] main.ose .ose-grid{margin-top:0}
html[data-ltb=raised] main.ose .ose-grid::before{display:none}
@media (max-width:760px){html[data-ltb=raised]{--ln:44px}
 html[data-ltb=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*,html[data-ltb=raised] main:has(.lt-car-acts)::after,html[data-ltb=raised] main.ose .ose-open>.plates::before{border-radius:20px 20px 0 0!important}}

/* =====================================================================
   ROUND 4: banners in the World Line 2 language (Brina, Nov 10: "take inspiration from World Line 2").
   The landing page's own blueprint drawing (captured from its live render, background exactly #f7f8fa, so it sits on the ground with no box),
   copy left and drawing right as in its HumanOS sections, caps eyebrow over a short blue rule, headline second line in blue.
   No card, no grid, no tint, no photo, no line motif. Our Story keeps its own drafting plates as its drawing.
   ===================================================================== */
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:#f7f8fa!important;box-shadow:none!important;border:0!important;padding-top:clamp(128px,10vw,148px)!important;padding-bottom:clamp(56px,5vw,80px)!important;margin-bottom:0!important}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{display:block!important;position:relative;min-height:clamp(340px,30vw,440px)}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{max-width:min(46%,600px);margin-left:0}
/* the drawing */
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{content:'';position:absolute;right:-1%;left:auto;top:50%;bottom:auto;transform:translateY(-50%);width:min(54%,720px);height:auto;aspect-ratio:1600/1050!important;
 background:url(/lt-assets/about-blueprint.jpg) center/contain no-repeat!important;opacity:1!important;animation:lt-bp .9s cubic-bezier(.25,1,.5,1) .1s both;pointer-events:none;filter:none}
@keyframes lt-bp{from{opacity:.2;transform:translateY(calc(-50% + 14px))}to{opacity:1;transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){html[data-ltb=blueprint] .page-hero.nai-band>.shell::after{animation:none!important}}
/* type, as on World Line 2 */
html[data-ltb=blueprint] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) .eyebrow{display:block;font-size:12px;letter-spacing:.14em;color:#40536d!important;margin:0}
html[data-ltb=blueprint] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) .eyebrow .dot{display:none}
html[data-ltb=blueprint] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) .eyebrow::after{content:'';display:block;width:24px;height:1.5px;background:#42a4ff;margin-top:14px}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1{font-size:clamp(44px,4.6vw,72px)!important;line-height:1.02!important;letter-spacing:-.045em!important;margin:28px 0 0!important;color:#0f1d33}
html[data-ltb=blueprint] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band h1,.ose-open h1) :is(span,.lt-l2){color:#195c9f}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band :is(.page-lead,.lt-team-lead){margin:28px 0 0!important;max-width:44ch!important;font-size:clamp(17px,1.25vw,19px)!important;line-height:1.55!important;color:#33405c}
html[data-ltb=blueprint] main .page-hero.nai-band .lt-car-acts{margin-top:32px!important;display:grid!important;grid-auto-flow:row;justify-items:start;gap:20px}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child){background:transparent!important;color:#0f1d33!important;border:1px solid rgba(15,29,51,.28)!important}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band .lt-car-acts .page-close-actions .cta:not(:first-child) *{color:#0f1d33!important}
/* the page below joins with a hairline, as World Line 2 splits sections */
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*{border-top:1px solid #e3e8ef!important;margin-top:0!important}
html[data-ltb=blueprint] main.about-page .page-hero.nai-band+.section-pad{padding-top:clamp(40px,4vw,64px)!important}
/* Our Story: same eyebrow and type, ground with no band, its plates are the drawing */
html[data-ltb=blueprint] main.ose .ose-open-grid::before{background:#f7f8fa!important;box-shadow:none!important}
html[data-ltb=blueprint] main.ose .ose-open-grid::after{display:none!important}
html[data-ltb=blueprint] main.ose .ose-open-grid{padding-bottom:clamp(40px,4vw,56px)}
html[data-ltb=blueprint] main.ose .ose-open h1{font-size:clamp(44px,4.6vw,72px)!important;line-height:1.02!important;letter-spacing:-.045em!important}
html[data-ltb=blueprint] main.ose .ose-open>.eyebrow{margin-bottom:28px}
@media (min-width:1100px){
}
/* phone: the drawing sits under the copy, full width */
@media (max-width:899px){
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{min-height:0}
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{max-width:none}
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{position:relative;display:block;top:auto;right:auto;width:112%;margin:20px -6% 0;transform:none;animation:none}
}
/* second headline line in blue on the two pages whose headline breaks in two (CSS only, markup untouched) */
html[data-ltb=blueprint] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1{color:#195c9f!important}
html[data-ltb=blueprint] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1::first-line{color:#0f1d33}
@media (max-width:899px){
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{height:auto!important;aspect-ratio:1600/1050!important;background-size:contain!important;background-position:center!important;opacity:1!important;bottom:auto!important}
}
@media (max-width:899px){html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{width:100%!important;margin:20px 0 0!important}}

/* ---------- round 4, intentional pairing (Brina: no repeated image). Each drawing comes from the page's own copy ----------
   About   "the same proving ground the physical world has trusted": the real city turning into its blueprint twin (World Line 2, mid-transition).
   Team    "they build digital twins": the twin being built, a scanning plane drawn over the model (World Line 2, HumanOS).
   Media and Our Story carry their own imagery right below (press folders, drafting plates); Careers has nothing to show.
   Those three use the editorial composition instead: headline left, lead (and next steps) set against it on the right. */
html[data-ltb=blueprint] main.about-page .page-hero.nai-band>.shell::after{background-image:url(/lt-assets/about-twin.jpg)!important;aspect-ratio:1712/1118!important}
html[data-ltb=blueprint] main.nai-night:has(.team-grid) .page-hero.nai-band>.shell::after{background-image:url(/lt-assets/team-build.jpg)!important;aspect-ratio:1652/1095!important}
html[data-ltb=blueprint] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{display:none!important}
html[data-ltb=blueprint] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{min-height:0!important}
@media (min-width:1100px){
 html[data-ltb=blueprint] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(48px,6vw,112px);align-items:end}
 html[data-ltb=blueprint] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{max-width:none!important;grid-column:1/-1}
 html[data-ltb=blueprint] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>h1{grid-column:1;grid-row:2/4}
 html[data-ltb=blueprint] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.page-lead{grid-column:2;grid-row:2;align-self:end;margin:0 0 .5em!important}
 html[data-ltb=blueprint] main.lp:has(.md-band) .page-hero.nai-band>.shell>.page-lead{grid-row:2/4}
 html[data-ltb=blueprint] main.nai-night:has(.page-close-actions) .page-hero.nai-band>.shell>.page-lead{margin-bottom:28px!important}
 html[data-ltb=blueprint] main .page-hero.nai-band>.shell>.lt-car-acts{grid-column:2;grid-row:3;align-self:end;margin:0 0 .3em!important}
}
/* specificity fixes: the :is() prefixes above weigh as their heaviest member, so restate with the same weight */
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid)):not(:has(.team-grid)) .page-hero.nai-band>.shell::after{background-image:url(/lt-assets/about-twin.jpg)!important;aspect-ratio:1712/1118!important}
@media (min-width:1100px){
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.lt-car-acts{grid-column:2!important;grid-row:3!important;align-self:end;margin:0 0 .3em!important;max-width:none!important}
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>h1:is(main.nai-night:has(.page-close-actions) h1,main.lp:has(.md-band) h1){grid-column:1!important;grid-row:2/4!important}
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.page-lead:is(main.nai-night:has(.page-close-actions) .page-lead,main.lp:has(.md-band) .page-lead){grid-column:2!important}
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.page-lead:is(main.nai-night:has(.page-close-actions) .page-lead){grid-row:2!important;margin-bottom:28px!important}
 html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.page-lead:is(main.lp:has(.md-band) .page-lead){grid-row:2/4!important}
}

/* =====================================================================
   ROUND 5 (Brina, Nov 10): no drawings in the banners, Careers back to one column with its steps under the lead,
   Media gets the same banner as the rest, World Line 2 type kept (caps eyebrow over a blue rule, second line in blue).
   Two banner surfaces to choose between, set by <html data-lts>:
   band   = the round 1 light band she said came closest: soft light from the top right fading into the page, a faint fading grid.
   raised = a deeper neutral plane, the page beneath rising over it as a full-width sheet with a soft top edge.
   ===================================================================== */
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{display:none!important}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{display:block!important;min-height:0!important}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{max-width:760px!important}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>:is(.page-lead,.lt-team-lead){max-width:52ch!important;margin:28px 0 0!important}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.lt-car-acts{display:grid!important;justify-items:start;gap:24px;margin:36px 0 0!important}
html[data-ltb=blueprint] main .page-hero.nai-band .lt-car-acts .page-close-actions{display:flex;flex-wrap:wrap;gap:16px}
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*{border-top:0!important}
/* band */
html[data-ltb=blueprint][data-lts=band] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:radial-gradient(ellipse 60% 90% at 72% 20%,#e3ecf8 0%,#ebf1f9 38%,#f2f5fa 70%,#f7f8fa 100%)!important;padding-bottom:clamp(88px,8vw,120px)!important}
html[data-ltb=blueprint][data-lts=band] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(rgba(25,92,159,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(25,92,159,.07) 1px,transparent 1px);background-size:56px 56px;
 -webkit-mask-image:radial-gradient(ellipse 70% 75% at 70% 10%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 70% 75% at 70% 10%,#000 0%,transparent 72%)}
html[data-ltb=blueprint][data-lts=band] main.ose .ose-open-grid::before{background:linear-gradient(to bottom,transparent calc(100% - var(--band-fade,170px)),#f7f8fa 100%),radial-gradient(ellipse 60% 90% at 72% 20%,#e3ecf8 0%,#ebf1f9 38%,#f2f5fa 70%,#f7f8fa 100%)!important}
html[data-ltb=blueprint][data-lts=band] main.ose .ose-open-grid::after{display:block!important;content:'';position:absolute;top:-320px;bottom:calc(-1*clamp(56px,6vw,96px));left:calc(50% - 50vw);width:100vw;right:auto;height:auto;z-index:-1;pointer-events:none;opacity:1;animation:none;
 background:linear-gradient(rgba(25,92,159,.07) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(25,92,159,.07) 1px,transparent 1px) 0 0/56px 56px!important;
 -webkit-mask-image:radial-gradient(ellipse 70% 75% at 70% 10%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 70% 75% at 70% 10%,#000 0%,transparent 72%)}
/* raised */
html[data-ltb=blueprint][data-lts=raised]{--lt-plane2:radial-gradient(120% 100% at 10% 0%,#fcfdfe 0%,#eef1f5 48%,#e2e6ec 100%);--lt-edge2:inset 0 1px 0 #ffffff,0 -1px 0 rgba(15,29,51,.06),0 -18px 40px -24px rgba(15,29,51,.12)}
html[data-ltb=blueprint][data-lts=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:var(--lt-plane2)!important;padding-bottom:clamp(120px,10vw,148px)!important}
html[data-ltb=blueprint][data-lts=raised] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*{position:relative;z-index:1;margin-top:-40px!important;padding-top:calc(clamp(40px,4vw,64px) + 40px)!important;background:#f7f8fa!important;border-radius:24px 24px 0 0;box-shadow:var(--lt-edge2)}
html[data-ltb=blueprint][data-lts=raised] main.lp:has(.md-band) .md-band{--md-ground:#f7f8fa}
html[data-ltb=blueprint][data-lts=raised] main:has(.lt-car-acts)::after{content:'';display:block;position:relative;z-index:1;height:clamp(96px,9vw,140px);margin-top:-40px;background:#f7f8fa;border-radius:24px 24px 0 0;box-shadow:var(--lt-edge2)}
html[data-ltb=blueprint][data-lts=raised] main.ose .ose-open-grid::before{background:var(--lt-plane2)!important;bottom:calc(-1*(clamp(56px,6vw,96px) + 64px))!important}
html[data-ltb=blueprint][data-lts=raised] main.ose .ose-open>.plates{position:relative;margin-top:calc(clamp(56px,6vw,96px) + 24px)}
html[data-ltb=blueprint][data-lts=raised] main.ose .ose-open>.plates::before{content:'';position:absolute;top:-48px;bottom:-200px;left:calc(50% - 50vw);width:100vw;z-index:-1;pointer-events:none;background:#f7f8fa;border-radius:24px 24px 0 0;box-shadow:var(--lt-edge2)}
/* Our Story Fig. 06: the light version of the twin (Brina's own image). The dark corridor film stays inside the navy panel. */
main.ose .ose-side-fig img{content:url(/lt-assets/fig06-bust-light.jpg)}
main.ose .ose-side-fig .ose-ph-frame{background:#dfe3e8}
/* surface switch (mock only) */
#lts-switch{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;gap:2px;padding:4px;background:rgba(255,255,255,.94);border:1px solid #dce3ec;border-radius:999px;font:500 13px/1 Inter,system-ui,sans-serif}
#lts-switch a{padding:8px 14px;border-radius:999px;text-decoration:none;color:#0f1d33}
#lts-switch a[aria-current]{background:#0f1d33;color:#fff}
/* dither surface (round 5, third option): the canvas from lt-about.js fills the banner behind the copy */
html[data-ltb=blueprint][data-lts=dither] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:#f7f8fa!important;padding-bottom:clamp(88px,8vw,120px)!important;position:relative;isolation:isolate}
html[data-ltb=blueprint][data-lts=dither] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>canvas.lt-dither{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
html[data-ltb=blueprint][data-lts=dither] main.ose .ose-open-grid::before{background:#f7f8fa!important}
html[data-ltb=blueprint][data-lts=dither] main.ose .ose-open-grid{isolation:auto}
html[data-ltb=blueprint][data-lts=dither] main.ose .ose-open-grid>canvas.lt-dither{position:absolute;top:-320px;bottom:calc(-1*clamp(56px,6vw,96px));left:calc(50% - 50vw);width:100vw;height:calc(100% + 320px + clamp(56px,6vw,96px));z-index:-1;pointer-events:none;display:block;grid-column:1/-1}

/* Our Story opening keeps its live order and width: headline, standfirst, byline in one column (Brina: it should not have moved) */
/* perspective grid surface (round 5, fourth option): canvas from lt-about.js, quieter behind the copy on the left */
html[data-ltb=blueprint][data-lts=grid] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:#f7f8fa!important;padding-bottom:clamp(96px,9vw,128px)!important;position:relative;isolation:isolate}
html[data-ltb=blueprint][data-lts=grid] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>canvas.lt-grid3d{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;
 -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.6) 35%,#000 62%),linear-gradient(180deg,#000 75%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.6) 35%,#000 62%),linear-gradient(180deg,#000 75%,transparent 100%);mask-composite:intersect}
html[data-ltb=blueprint][data-lts=grid] main.ose .ose-open-grid::before{background:#f7f8fa!important}
html[data-ltb=blueprint][data-lts=grid] main.ose .ose-open-grid>canvas.lt-grid3d{position:absolute;top:-320px;bottom:calc(-1*clamp(56px,6vw,96px));left:calc(50% - 50vw);width:100vw;height:calc(100% + 320px + clamp(56px,6vw,96px));z-index:-1;pointer-events:none;display:block;
 -webkit-mask-image:linear-gradient(180deg,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,#000 75%,transparent 100%)}
/* Team (Brina): the headline sits on the same line as every other page's headline (Team has no eyebrow, so it takes the eyebrow's space),
   and the portraits start closer to the banner */
html[data-ltb=blueprint] main.nai-night:has(.team-grid) .page-hero.nai-band h1{margin-top:calc(12px * 1.5 + 14px + 1.5px + 28px)!important}
html[data-ltb=blueprint] main.nai-night:has(.team-grid) .page-hero.nai-band{padding-bottom:clamp(48px,4.5vw,64px)!important}
html[data-ltb=blueprint][data-lts=raised] main.nai-night:has(.team-grid) .page-hero.nai-band{padding-bottom:clamp(88px,7vw,104px)!important}
html[data-ltb=blueprint] main.nai-night:has(.team-grid) .team-section{padding-top:clamp(32px,3vw,48px)!important}
html[data-ltb=blueprint][data-lts=raised] main.nai-night:has(.team-grid) .page-hero.nai-band+.team-section{padding-top:calc(clamp(32px,3vw,48px) + 40px)!important}
html[data-ltb=blueprint] main.nai-night:has(.team-grid) .page-hero.nai-band{padding-bottom:40px!important}
html[data-ltb=blueprint] main.nai-night:has(.team-grid) .team-section{padding-top:16px!important}
html[data-ltb=blueprint][data-lts=raised] main.nai-night:has(.team-grid) .page-hero.nai-band{padding-bottom:80px!important}
html[data-ltb=blueprint][data-lts=raised] main.nai-night:has(.team-grid) .page-hero.nai-band+.team-section{padding-top:56px!important}
html[data-ltb=blueprint][data-lts=band] :is(main.nai-night:has(.team-grid),main.nai-night:has(.team-grid)) .page-hero.nai-band{padding-bottom:40px!important}

/* ---------- round 6 option: Photo panel (Brina: premium like the other light pages). The light band, plus her own light photography
   in a rounded panel beside the copy, as on the approved Digital Twins light hero. Each image comes from the page's copy:
   About "the same proving ground the physical world has trusted" = the aircraft in its test room (fig05-aircraft, Our Story magazine set);
   Team "we build digital twins" = the team working over the blueprint city (fig05-city). Media and Careers wait for her call on imagery. */
html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid)) .page-hero.nai-band>.shell{min-height:clamp(320px,27vw,380px)!important}
html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid)) .page-hero.nai-band>.shell>*{max-width:min(44%,560px)!important}
html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.about-page,main.nai-night:has(.team-grid)) .page-hero.nai-band>.shell::after{
 display:block!important;content:'';position:absolute;left:auto;right:0;top:50%;bottom:auto;transform:translateY(-50%);width:min(51%,680px);height:auto;aspect-ratio:16/9!important;
 border-radius:20px;background:#e9eef4 var(--ltp-img) center/cover no-repeat!important;opacity:1!important;filter:none;pointer-events:none;
 box-shadow:0 0 0 1px rgba(15,29,51,.06),0 2px 4px rgba(15,29,51,.04),0 32px 64px -40px rgba(15,29,51,.34);animation:lt-bp .9s cubic-bezier(.25,1,.5,1) .1s both}
html[data-ltp] main.about-page{--ltp-img:url(/lt-assets/fig05-aircraft.jpg)}
html[data-ltp] main.nai-night:has(.team-grid){--ltp-img:url(/lt-assets/fig05-city.jpg)}
@media (max-width:899px){
 html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid)) .page-hero.nai-band>.shell{min-height:0!important}
 html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid)) .page-hero.nai-band>.shell>*{max-width:none!important}
 html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.about-page,main.nai-night:has(.team-grid)) .page-hero.nai-band>.shell::after{position:relative;top:auto;right:auto;transform:none;width:100%!important;margin:28px 0 0!important;border-radius:16px;animation:none}
}

/* ---------- round 7 (Brina: "Yes, build it"): Photo panel is the system ----------
   1. no grid on the band (photography carries the depth)  2. one restrained reveal on load  3. a photograph on About, Team, Media and Careers */
html[data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band::before{display:none!important}
html[data-ltp] main.ose .ose-open-grid::after{display:none!important}
/* the reveal: the photo rises out of a mask once, the headline brightens from faint (never empty). Transform and opacity only, ease-out. */
@keyframes ltp-rise{from{clip-path:inset(100% 0 0 0 round 20px);opacity:.2}to{clip-path:inset(0 0 0 0 round 20px);opacity:1}}
@keyframes ltp-bright{from{opacity:.2}to{opacity:1}}
html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{animation:ltp-rise 1s cubic-bezier(.22,1,.36,1) .15s both!important}
html[data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1,html[data-ltp] main.ose .ose-open h1{animation:ltp-bright .9s cubic-bezier(.22,1,.36,1) .05s both}
@media (prefers-reduced-motion:reduce){html[data-ltp] .page-hero.nai-band>.shell::after,html[data-ltp] .page-hero.nai-band h1,html[data-ltp] main.ose .ose-open h1{animation:none!important}}
/* Media and Careers get their panel too (images generated Nov 10 in the same white-room series) */
html[data-ltb=blueprint][data-ltp] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{min-height:clamp(320px,27vw,380px)!important}
html[data-ltb=blueprint][data-ltp] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{max-width:min(44%,560px)!important}
html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{
 display:block!important;content:'';position:absolute;left:auto;right:0;top:50%;bottom:auto;transform:translateY(-50%);width:min(51%,680px);height:auto;aspect-ratio:16/9!important;
 border-radius:20px;background:#e9eef4 var(--ltp-img) center/cover no-repeat!important;opacity:1;filter:none;pointer-events:none;
 box-shadow:0 0 0 1px rgba(15,29,51,.06),0 2px 4px rgba(15,29,51,.04),0 32px 64px -40px rgba(15,29,51,.34)}
html[data-ltp] main.lp:has(.md-band){--ltp-img:url(/lt-assets/media-studio.jpg)}
html[data-ltp] main.nai-night:has(.page-close-actions){--ltp-img:url(/lt-assets/careers-desk.jpg)}
@media (max-width:899px){
 html[data-ltb=blueprint][data-ltp] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{min-height:0!important}
 html[data-ltb=blueprint][data-ltp] :is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{max-width:none!important}
 html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{position:relative;top:auto;right:auto;transform:none;width:100%!important;margin:28px 0 0!important;border-radius:16px}
 @keyframes ltp-rise{from{clip-path:inset(100% 0 0 0 round 16px);opacity:.2}to{clip-path:inset(0 0 0 0 round 16px);opacity:1}}
}
/* Our Story in the photo system: the wind-tunnel car ("Every high-stakes field proves before it commits") beside the copy.
   Headline, standfirst and byline stay stacked on the left in their live order. The grid lines are off. */
html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid::after{display:block!important;content:'';position:absolute;left:auto!important;right:0!important;top:50%!important;bottom:auto!important;width:min(46%,620px)!important;height:auto!important;aspect-ratio:16/9;
 transform:translateY(-50%);border-radius:20px;background:#e9eef4 url(/lt-assets/fig05-car.jpg) center/cover no-repeat!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:1;z-index:1;
 box-shadow:0 0 0 1px rgba(15,29,51,.06),0 2px 4px rgba(15,29,51,.04),0 32px 64px -40px rgba(15,29,51,.34);animation:ltp-rise 1s cubic-bezier(.22,1,.36,1) .15s both}
@media (min-width:900px){html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid>*{max-width:min(48%,620px)}}
@media (max-width:899px){html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid::after{position:relative!important;top:auto!important;transform:none;width:100%!important;display:block!important;margin-top:28px;border-radius:16px;grid-column:1/-1}}
html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid{min-height:clamp(320px,27vw,380px)}
/* Team: a little more air between the photo panel and the portraits */
html[data-ltb=blueprint][data-lts=band][data-ltp] :is(main.nai-night:has(.team-grid),main.nai-night:has(.team-grid)) .page-hero.nai-band{padding-bottom:72px!important}
html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid::after{aspect-ratio:16/9!important}
@media (min-width:900px){html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid::after{top:6px!important;transform:none!important}}

/* ---------- round 7 review fixes: one hero grid on all five pages ---------- */
/* one panel: same size, same place, top meets the eyebrow (Team: where the eyebrow would sit) */
@media (min-width:900px){
 html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell::after{top:0!important;transform:none!important;width:min(43%,580px)!important}
 html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{min-height:calc(min(43vw - 48px,580px) * 9 / 16)!important}
 html[data-ltb=blueprint][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{max-width:min(48%,620px)!important}
 /* Our Story: same eyebrow line, same headline line, same panel */
 html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open>.eyebrow{margin-top:-30px!important}
 html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid::after{width:min(43%,580px)!important;top:calc(-1 * (12px * 1.5 + 14px + 2px + 28px))!important}
}
/* one eyebrow rule */
html[data-ltb=blueprint] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) .eyebrow::after{height:2px!important;width:24px!important;background:#42a4ff!important;margin-top:14px!important}
html[data-ltb=blueprint] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) .eyebrow{line-height:1.5!important}
/* Team headline second part in blue */
html[data-ltp] main.nai-night:has(.team-grid) .page-hero h1 .lt-l2{color:#195c9f}
/* Careers: two buttons of one size and one border */
html[data-ltb=blueprint] main .page-hero.nai-band .lt-car-acts .page-close-actions .cta{min-width:196px;justify-content:space-between;box-sizing:border-box;border-width:1px!important;border-style:solid!important}
/* phone: one gap under the photo on every page */
@media (max-width:899px){
 html[data-ltb=blueprint][data-lts=band][data-ltp] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{padding-bottom:48px!important}
 html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid{padding-bottom:16px}
 html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open>.eyebrow{margin-top:-8px!important}
}
/* review fixes, round 2: stop the Team headline margin collapsing through its container; Our Story up 6px; Careers buttons equal */
html[data-ltb=blueprint] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{display:flow-root!important}
html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open>.eyebrow{margin-bottom:22px!important}
html[data-ltb=blueprint] main .page-hero.nai-band .lt-car-acts .page-close-actions .cta{width:210px}
@media (min-width:900px){html[data-ltb=blueprint][data-lts=band][data-ltp] main.ose .ose-open-grid{top:-6px}}

/* =====================================================================
   ROUND 8: Steel, the Trust Center sibling (Brina: photo panel = random photos, light band = slop).
   Matches the live, approved Trust Center topic pages ("A Steel", Oct 19): steel ground #dde2e9, Trust Center breadcrumb and dot eyebrow,
   the site's own 90px two-tone headline, white surfaces on the steel. No photo, no gradient, no grid. The Media folder band was already this steel.
   ===================================================================== */
html[data-lts=steel] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)){background:#dde2e9!important;--lt-ground:#dde2e9}
body:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)):is(html[data-lts=steel] body){background:#dde2e9!important}
html.header-stuck[data-lts=steel]:has(:is(main.about-page,main.ose,main.nai-night .team-grid,main.nai-night .page-close-actions,main.lp .md-band)) .site-header{background:rgba(221,226,233,.86)!important}
/* hero: no band, no grid, no photo, the site's own spacing */
html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:transparent!important;padding-top:172px!important;padding-bottom:clamp(56px,4vw,64px)!important}
html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band::before{display:none!important}
html[data-ltb=blueprint][data-lts=steel] main.ose .ose-open-grid::before{background:transparent!important}
html[data-ltb=blueprint][data-lts=steel] main.ose .ose-open-grid::after{display:none!important}
/* Trust Center type */
html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) .eyebrow{display:flex!important;align-items:center;gap:10px;font-size:13px!important;letter-spacing:.09em!important;color:#44526a!important;margin:0!important}
html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) .eyebrow .dot{display:inline-block!important;background:#42a4ff}
html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.ose,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) :is(.page-hero.nai-band,.ose-open) .eyebrow::after{display:none!important}
html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1,
html[data-ltb=blueprint][data-lts=steel] main.ose .ose-open h1{font-size:clamp(48px,6.4vw,90.6px)!important;letter-spacing:-.072em!important;line-height:1.04!important;margin:28px 0 0!important}
html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>*{max-width:900px!important}
html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>:is(.page-lead,.lt-team-lead){max-width:52ch!important;font-size:20px!important;line-height:1.55!important;color:#44526a!important;margin-top:28px!important}
html[data-lts=steel] main.nai-night:has(.team-grid) .page-hero h1 .lt-l2{color:#195c9f}
html[data-ltb=blueprint][data-lts=steel] main.nai-night:has(.team-grid) .page-hero.nai-band h1{margin-top:calc(13px * 1.5 + 28px)!important}
/* breadcrumb, as on Trust Center topic pages */
.lt-crumbs{margin:0 0 24px}
.lt-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;font:500 12px/1.5 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#44526a}
.lt-crumbs li+li::before{content:'/';margin:0 12px;color:#8592a6}
.lt-crumbs a{color:#44526a;text-decoration:none}
.lt-crumbs a:hover{color:#0f1d33}
.lt-crumbs [aria-current]{color:#0f1d33}
html[data-lts=steel] main.ose .ose-open>.lt-crumbs{margin-bottom:24px}
/* white surfaces on the steel */
html[data-lts=steel] main.lp:has(.md-band) .md-band{--md-ground:#dde2e9;background:#dde2e9!important;border-top:1px solid rgba(15,29,51,.10)!important}
html[data-lts=steel] main.about-page .about-index{background:#fff!important;box-shadow:0 0 0 1px rgba(15,29,51,.08),0 2px 4px rgba(15,29,51,.04),0 28px 56px -40px rgba(15,29,51,.28)!important}
html[data-lts=steel] main.nai-night:has(.team-grid) .team-frame{box-shadow:0 0 0 1px rgba(15,29,51,.10)}
html[data-lts=steel] :is(main.about-page,main.nai-night:has(.team-grid),main.lp:has(.md-band)) .page-hero.nai-band+*{border-top:0!important}
html[data-lts=steel] main.ose .ose-rail-toggle,html[data-lts=steel] .lt-rail-btn{background:#fff}
@media (max-width:899px){html[data-ltb=blueprint][data-lts=steel] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{padding-top:132px!important}}
/* Steel: every sub-page headline on one line (eyebrow 214px, headline 262px at 1416x658) */
html[data-ltb=blueprint][data-lts=steel] main.ose .ose-open h1{margin-top:0!important}
html[data-ltb=blueprint][data-lts=steel] main.ose .ose-open>.eyebrow{margin-bottom:16px!important}
html[data-ltb=blueprint][data-lts=steel] main.nai-night:has(.team-grid) .page-hero.nai-band h1{margin-top:72px!important}
html[data-ltb=blueprint][data-lts=steel] main.ose .ose-open-grid{top:-6px}

/* =====================================================================
   ROUND 9: the confirmed brief (Nov 10). Linear careers page, made light, in the Use Cases scheme. Restrained.
   impeccable brand register + spatial-design + typography + motion-design; apple-design motion timing.
   One banner pattern on every page: eyebrow, a moderate two-tone headline, the lead, nothing else in the banner.
   Each page's own content follows straight under as its "band". About alone gets one wide image band (Horizon, crop A)
   and so its close drops the Horizon for a hairline close. Our Story keeps its five opening pieces in order.
   ===================================================================== */
html[data-ltb=blueprint][data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{background:#f7f8fa!important;padding-top:clamp(128px,10vw,152px)!important;padding-bottom:clamp(48px,4.5vw,64px)!important}
html[data-ltb=blueprint][data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band::before{display:none!important}
/* headline: moderate, never shouting (typography.md: hierarchy from weight and colour, not raw size) */
html[data-ltb=blueprint][data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band h1,
html[data-ltb=blueprint][data-lts=linear] main.ose .ose-open h1{font-size:clamp(40px,4.3vw,61px)!important;letter-spacing:-.045em!important;line-height:1.05!important}
html[data-ltb=blueprint][data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>:is(.page-lead,.lt-team-lead){font-size:clamp(17px,1.3vw,19px)!important;color:#33405c!important;margin-top:24px!important;max-width:54ch!important}
/* About: one wide image band under the banner (Horizon crop A, her pick) */
html[data-ltb=blueprint][data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.about-page) .page-hero.nai-band>.shell::after{
 display:block!important;content:'';position:relative!important;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%!important;height:auto!important;aspect-ratio:1304/500!important;margin-top:clamp(40px,4.5vw,64px);
 border-radius:20px;background:#dfeaf7 url(/lt-assets/about-horizon-band.jpg) center/cover no-repeat!important;opacity:1!important;filter:none;box-shadow:0 0 0 1px rgba(15,29,51,.06)!important;animation:lt9-rise 1.1s cubic-bezier(.22,1,.36,1) .25s both}
@media (max-width:760px){html[data-ltb=blueprint][data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.about-page) .page-hero.nai-band>.shell::after{aspect-ratio:16/10!important;border-radius:16px;background-position:50% 88%!important}}
/* About: the four links as Linear's numbered hairline rows, not a card */
html[data-lts=linear] main.about-page .section-pad{padding-top:clamp(24px,3vw,40px)!important}
html[data-lts=linear] main.about-page .about-index{display:block!important;background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;border-top:1px solid #dce3ec;overflow:visible}
html[data-lts=linear] main.about-page .about-index a{display:grid!important;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 24px;align-items:baseline;column-gap:24px;padding:28px 0!important;border:0!important;border-bottom:1px solid #dce3ec!important;position:relative}
html[data-lts=linear] main.about-page .about-index h2{font-size:clamp(24px,2vw,30px)!important;letter-spacing:-.035em;margin:0!important;line-height:1.15}
html[data-lts=linear] main.about-page .about-index p{margin:0!important;max-width:none;font-size:17px;color:#33405c}
html[data-lts=linear] main.about-page .about-index svg{position:static!important;width:18px;height:18px;align-self:center;transition:transform .25s cubic-bezier(.22,1,.36,1)}
html[data-lts=linear] main.about-page .about-index .idx-no{font-size:13px;letter-spacing:.06em}
@media (hover:hover) and (pointer:fine){html[data-lts=linear] main.about-page .about-index a:hover svg{transform:translate(3px,-3px)}}
@media (max-width:760px){html[data-lts=linear] main.about-page .about-index a{grid-template-columns:40px minmax(0,1fr) 20px;row-gap:6px}
 html[data-lts=linear] main.about-page .about-index p{grid-column:2;grid-row:2}
 html[data-lts=linear] main.about-page .about-index svg{grid-column:3;grid-row:1}}
/* About close: Linear-style, no image, no card. Hairline above, headline left, the button right at its own size */
html[data-lts=linear] main.about-page .about-close .page-close-inner{background:none!important;box-shadow:none!important;border-radius:0!important;padding:clamp(48px,5vw,72px) 0 clamp(72px,7vw,104px)!important;border-top:1px solid #dce3ec;overflow:visible}
html[data-lts=linear] main.about-page .about-close .page-close-inner>.cta{width:auto!important;min-width:0!important;padding-inline:32px!important;justify-self:end;align-self:end}
/* load motion: one orchestrated page-load (motion-design.md, apple-design: ease out, transform and opacity only, faint never empty) */
@keyframes lt9-rise{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:none}}
html[data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>:is(.eyebrow,h1,.page-lead,.lt-team-lead,.lt-car-acts),
html[data-lts=linear] main.ose .ose-open :is(.eyebrow,h1,.ose-standfirst){animation:lt9-rise .8s cubic-bezier(.22,1,.36,1) both}
html[data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>h1,html[data-lts=linear] main.ose .ose-open h1{animation-delay:.06s}
html[data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>:is(.page-lead,.lt-team-lead),html[data-lts=linear] main.ose .ose-open .ose-standfirst{animation-delay:.16s}
html[data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.lt-car-acts{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){html[data-lts=linear] :is(.page-hero.nai-band>.shell>*,.page-hero.nai-band>.shell::after,main.ose .ose-open *){animation:none!important}}
html[data-lts=linear] main.nai-night:has(.team-grid) .page-hero h1 .lt-l2{color:#195c9f}
/* Our Story on the same lines as the other four (eyebrow 142, headline 204 at 1416x658) */
html[data-ltb=blueprint][data-lts=linear] main.ose .ose-open>.eyebrow{margin-top:-30px!important;margin-bottom:22px!important}
html[data-ltb=blueprint][data-lts=linear] main.ose .ose-open-grid{top:-6px}

/* ---------- round 9 critique fixes (impeccable critique, Nov 10) ---------- */
html[data-lts=linear]{--band-gap:clamp(48px,6vw,80px)}
/* one gap from the lead to the page's own content, on every page */
html[data-ltb=blueprint][data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{padding-bottom:var(--band-gap)!important}
html[data-ltb=blueprint][data-lts=linear] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.about-page) .page-hero.nai-band>.shell::after{margin-top:var(--band-gap)!important}
html[data-lts=linear] main.about-page .section-pad{padding-top:0!important}
html[data-ltb=blueprint][data-lts=linear] :is(main.nai-night:has(.team-grid),main.nai-night:has(.team-grid)) .page-hero.nai-band{padding-bottom:var(--band-gap)!important}
html[data-lts=linear] main.nai-night:has(.team-grid) .team-section{padding-top:0!important}
html[data-lts=linear] main.lp:has(.md-band) .md-band{padding-top:0!important}
html[data-lts=linear] main.lp:has(.md-band) .md-shelf{margin-top:0!important;padding-top:0!important}
/* About close: even padding, the button under its lead, the shared line-height, one divider */
html[data-lts=linear] main.about-page .about-close .page-close-inner{display:block!important;border-top:0!important;padding:clamp(72px,9vw,120px) 0!important}
html[data-lts=linear] main.about-page .about-close .page-close-inner>.cta{display:inline-flex!important;margin-top:32px}
html[data-lts=linear] main.about-page .about-close .body-copy{line-height:1.6!important}
/* Our Story: the closing box gets a hairline edge instead of a shadow; no orphaned word in its headline */
html[data-lts=linear] main.ose .ose-finale>.shell{box-shadow:0 0 0 1px rgba(15,29,51,.08)!important}
html[data-lts=linear] main.ose .ose-finale h2{text-wrap:balance}
@media (max-width:760px){html[data-ltb=blueprint][data-lts=linear] main.ose .ose-open-grid{padding-bottom:16px!important}}
html[data-ltb=blueprint][data-lts=linear] main.about-page .page-hero.nai-band+.section-pad{padding-top:0!important}

/* =====================================================================
   ROUND 10: Background Paths from 21st.dev (Kokonut UI, MIT), in the new scheme. No image in any banner.
   <html data-ltpath="full">: the ribbon flows across the whole banner, quieter behind the copy.
   <html data-ltpath="right">: the ribbon sweeps through the right half only, the copy sits on clean ground.
   ===================================================================== */
html[data-ltpath] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.about-page) .page-hero.nai-band>.shell::after{display:none!important}
html[data-ltpath] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{position:relative;isolation:isolate;min-height:clamp(420px,44vw,560px);display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}

html[data-ltpath] main.ose .ose-open-grid{isolation:isolate}
.lt-paths{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease-out}
.lt-paths canvas{width:100%;height:100%;display:block}
html[data-ltpath=full] .lt-paths{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent),radial-gradient(ellipse 34% 40% at 24% 52%,rgba(0,0,0,.18),#000);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent),radial-gradient(ellipse 34% 40% at 24% 52%,rgba(0,0,0,.18),#000);mask-composite:intersect}
html[data-ltpath=right] .lt-paths{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent),linear-gradient(90deg,transparent 34%,rgba(0,0,0,.5) 48%,#000 64%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent),linear-gradient(90deg,transparent 34%,rgba(0,0,0,.5) 48%,#000 64%);mask-composite:intersect}
html[data-ltpath] main.ose .ose-open-grid>.lt-paths{top:-320px;bottom:calc(-1*clamp(56px,6vw,96px));left:calc(50% - 50vw);right:auto;width:100vw}
@media (max-width:760px){html[data-ltpath] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{min-height:0}
 html[data-ltpath=right] .lt-paths{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent),linear-gradient(90deg,transparent 10%,#000 60%);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent),linear-gradient(90deg,transparent 10%,#000 60%)}}
/* round 10 fixes: no Horizon band on About; keep the page's own side margins */
html[data-ltb=blueprint][data-lts=linear][data-ltpath] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):is(main.about-page) .page-hero.nai-band>.shell::after{display:none!important}
html[data-ltpath] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band{display:block!important}
html[data-ltpath] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{width:min(1440px,100% - 112px)!important;margin-inline:auto!important}
@media (width<=1100px){html[data-ltpath] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{width:calc(100% - 64px)!important}}
@media (width<=800px){html[data-ltpath] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell{width:calc(100% - 40px)!important}}
/* the ribbon starts below the nav on desktop; on phone it stays in the top-right corner, clear of the copy */
html[data-ltpath=right] .lt-paths{-webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 26%,#000 84%,transparent),linear-gradient(90deg,transparent 34%,rgba(0,0,0,.5) 48%,#000 64%);mask-image:linear-gradient(to bottom,transparent 12%,#000 26%,#000 84%,transparent),linear-gradient(90deg,transparent 34%,rgba(0,0,0,.5) 48%,#000 64%)}
html[data-ltpath=full] .lt-paths{-webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 26%,#000 82%,transparent),radial-gradient(ellipse 34% 40% at 24% 52%,rgba(0,0,0,.18),#000);mask-image:linear-gradient(to bottom,transparent 12%,#000 26%,#000 82%,transparent),radial-gradient(ellipse 34% 40% at 24% 52%,rgba(0,0,0,.18),#000)}
@media (max-width:760px){
 html[data-ltpath] .lt-paths{-webkit-mask-image:linear-gradient(to bottom,transparent 6%,#000 12%,#000 22%,transparent 38%),linear-gradient(90deg,transparent 30%,#000 80%)!important;mask-image:linear-gradient(to bottom,transparent 6%,#000 12%,#000 22%,transparent 38%),linear-gradient(90deg,transparent 30%,#000 80%)!important}
}

/* =====================================================================
   ROUND 11: the converging line. Still drawing, drawn in once. <html data-ltpath="line">.
   ===================================================================== */
.lt-converge{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
@keyframes lt-cv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lt-cv-pop{from{opacity:0}to{opacity:1}}
.lt-converge .lt-cv-in{stroke-dasharray:1;stroke-dashoffset:1;animation:lt-cv-draw 1s cubic-bezier(.22,1,.36,1) .15s forwards}
.lt-converge .lt-cv-out{stroke-dasharray:1;stroke-dashoffset:1;animation:lt-cv-draw .7s cubic-bezier(.22,1,.36,1) .95s forwards}
.lt-converge .lt-cv-node{opacity:0;animation:lt-cv-pop .4s ease-out .9s forwards}
.lt-converge .lt-cv-end{opacity:0;animation:lt-cv-pop .3s ease-out 1.55s forwards}
.lt-converge.lt-cv-still *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
@media (prefers-reduced-motion:reduce){.lt-converge .lt-cv-in,.lt-converge .lt-cv-out{animation:none;stroke-dashoffset:0}.lt-converge .lt-cv-node{animation:none;opacity:1}}
html[data-ltpath=line] main.ose .ose-open-grid>.lt-converge{top:-120px;bottom:auto;left:calc(50% - 50vw);width:100vw;height:calc(100% + 120px + clamp(56px,6vw,96px))}
html[data-ltpath=line] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.lt-converge{top:72px;height:calc(100% - 72px)}
@media (max-width:760px){
}

/* =====================================================================
   ROUND 12: two 21st.dev banners. <html data-ltpath="lattice|rim">.
   lattice = Lattice Hero (bevelui), canvas 2D light port. rim = Horizon Glow Hero (ruixen.ui), light, no streaks.
   ===================================================================== */
.lt-lattice{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 58%);mask-image:linear-gradient(90deg,transparent 40%,#000 58%)}
html[data-ltpath=lattice] main.ose .ose-open-grid>.lt-lattice{top:-120px;bottom:calc(-1*clamp(56px,6vw,96px));left:calc(50% - 50vw);width:100vw;height:auto}
html[data-ltpath=lattice] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.lt-lattice{top:72px;height:calc(100% - 72px)}

.lt-rim{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;container-type:inline-size;--orb:max(150cqw,62rem);--cap:clamp(56px,8cqw,112px);--cx:62%;
 -webkit-mask-image:linear-gradient(to top,transparent 0,#000 56px);mask-image:linear-gradient(to top,transparent 0,#000 56px)}
.lt-rim-orb,.lt-rim-halo{position:absolute;left:calc(var(--cx) - var(--orb)/2);top:calc(100% - var(--cap));width:var(--orb);height:var(--orb);border-radius:50%}
.lt-rim-halo{left:calc(var(--cx) - var(--orb)*.575);top:calc(100% - var(--cap) - var(--orb)*.075);width:calc(var(--orb)*1.15);height:calc(var(--orb)*1.15);
 background:radial-gradient(circle closest-side,transparent 85%,rgba(66,164,255,.06) 87.5%,rgba(66,164,255,.025) 90%,transparent 94%);opacity:0;animation:lt-rim-fade 1.6s ease-out .2s forwards}
.lt-rim-glow{position:absolute;inset:0;clip-path:inset(-64px 100% -64px -64px);animation:lt-rim-wipe 1.8s cubic-bezier(.22,1,.36,1) .25s forwards}
.lt-rim-glow .lt-rim-orb{
 background:conic-gradient(from 0deg,#195c9f 0deg,#42a4ff 34deg,#9cc8f2 70deg,#dce3ec 110deg,#dce3ec 250deg,#9cc8f2 290deg,#42a4ff 326deg,#195c9f 360deg)}
.lt-rim-c1{filter:blur(10px);opacity:.38;transform:scale(1.004)}
.lt-rim-c2{filter:blur(1px);transform:scale(1.0016)}
.lt-rim-disk{background:#fff}
.lt-rim-edge{box-shadow:inset 0 1px 0 rgba(25,92,159,.25)}
@keyframes lt-rim-wipe{to{clip-path:inset(-64px -64px -64px -64px)}}
@keyframes lt-rim-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lt-rim-glow{animation:none;clip-path:none}.lt-rim-halo{animation:none;opacity:1}}
html[data-ltpath=rim] main.ose .ose-open-grid>.lt-rim{top:-120px;bottom:calc(-1*clamp(56px,6vw,96px));left:calc(50% - 50vw);width:100vw}
html[data-ltpath=rim] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.lt-rim{top:72px}
@media (max-width:760px){
 .lt-lattice{-webkit-mask-image:none;mask-image:none}
 html[data-ltpath=lattice] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.lt-lattice{top:56px;height:320px}
 html[data-ltpath=lattice] main.ose .ose-open-grid>.lt-lattice{top:-90px;bottom:auto;height:320px}
 .lt-rim{--orb:260cqw;--cap:56px;--cx:70%}
}

/* =====================================================================
   ROUND 13 (Brina, Nov 10): the light band is the banner on all five pages. Default surface = band, no photo panel.
   Carries the alignment the photo round set: Our Story eyebrow and headline on the same lines as the other pages, Team second line in blue.
   ===================================================================== */
html[data-ltb=blueprint][data-lts=band]:not([data-ltp]) main.ose .ose-open>.eyebrow{margin-bottom:22px!important}
@media (min-width:900px){
 html[data-ltb=blueprint][data-lts=band]:not([data-ltp]) main.ose .ose-open>.eyebrow{margin-top:-30px!important}
 html[data-ltb=blueprint][data-lts=band]:not([data-ltp]) main.ose .ose-open-grid{top:-6px}
}
@media (max-width:899px){html[data-ltb=blueprint][data-lts=band]:not([data-ltp]) main.ose .ose-open>.eyebrow{margin-top:-8px!important}}
html[data-lts=band] main.nai-night:has(.team-grid) .page-hero h1 .lt-l2{color:#195c9f}
/* Round 13 fixes (Brina): Media, the filter bar ("Press 24 / Blog 6 / Interviews 5") flashed above the eyebrow while the page
   loaded: it renders in place until the page script puts the shelf in folder mode, then fades out. Keep it hidden until then. */
main.lp:has(.md-band) .md:not([data-mode]) .md-filter-bar{opacity:0!important;visibility:hidden!important;transition:none!important}
/* Careers: more room between the lead, the two buttons, the LinkedIn link and the footer. */
html[data-ltb=blueprint][data-lts=band] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)) .page-hero.nai-band>.shell>.lt-car-acts{margin:clamp(44px,4.4vw,60px) 0 0!important;gap:clamp(28px,2.6vw,36px)!important}
html[data-ltb=blueprint][data-lts=band] main .page-hero.nai-band .lt-car-acts .page-close-actions{gap:20px}
html[data-ltb=blueprint][data-lts=band] :is(main.about-page,main.nai-night:has(.team-grid),main.nai-night:has(.page-close-actions),main.lp:has(.md-band)):has(.lt-car-acts) .page-hero.nai-band{padding-bottom:clamp(120px,12vw,176px)!important}

/* World Line 2 Light: header menus on the light pages (last, so it follows each page file) */
/* Header menus on the light pages (Brina, Nov 11: "the dropdowns for all of the things in the menu at the navigation bar,
   they're all black"). The light pages turn the header light and its links navy, but the dropdown panels kept the site's
   near-black #141510, so the menus read navy on black. The phone sheet stayed black too. Both now follow the homepage's own
   light menus (World Line 2 landing, its .hs-wrap rules): near-white panel, faint navy border, one soft navy shadow, slate
   links that turn navy on hover, and the #f7f8fa phone sheet with navy links and thin rules.
   Scope: the pages whose header these light stylesheets make light. Use Cases (main.tj-photo), the telecom case study
   (main.cs-page.csx), the About pages (html[data-ltb], set by the boot script on /about routes). */
:is(html:has(main.tj-photo), html:has(main.cs-page.csx), html[data-ltb]) .site-header .nav-group:is(:hover, :focus-within) .nav-menu {
  background: rgba(251, 252, 253, .97) !important;
  border-color: rgba(15, 29, 51, .08) !important;
  box-shadow: 0 18px 40px -16px rgba(15, 29, 51, .16) !important;
}
:is(html:has(main.tj-photo), html:has(main.cs-page.csx), html[data-ltb]) .site-header .nav-menu a { color: #40536d !important; }
:is(html:has(main.tj-photo), html:has(main.cs-page.csx), html[data-ltb]) .site-header .nav-menu a:is(:hover, :focus-visible) { color: #0f1d33 !important; }

/* phone sheet */
:is(html:has(main.tj-photo), html:has(main.cs-page.csx), html[data-ltb]) .site-header .mobile-menu {
  background: #f7f8fa !important;
  border-top-color: rgba(15, 29, 51, .10) !important;
  color: #0f1d33 !important;
}
:is(html:has(main.tj-photo), html:has(main.cs-page.csx), html[data-ltb]) .site-header .mobile-menu a { color: #0f1d33 !important; border-bottom-color: rgba(15, 29, 51, .10) !important; }
:is(html:has(main.tj-photo), html:has(main.cs-page.csx), html[data-ltb]) .site-header .mobile-menu .mobile-group { border-bottom-color: rgba(15, 29, 51, .10) !important; }
:is(html:has(main.tj-photo), html:has(main.cs-page.csx), html[data-ltb]) .site-header .mobile-menu .mobile-group ul a { color: #40536d !important; }

/* Use Cases and telecom give the header a frosted blur, and a blurred element becomes the box a fixed child is sized
   against, so the full-screen phone sheet was cut to a 36px strip under the header. The site already turns the blur off
   while the menu is open on Platform; same here. */
:is(html:has(main.tj-photo), html:has(main.cs-page.csx), html[data-ltb]) .site-header:has(.menu-toggle[aria-expanded=true]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* World Line 2 Light: reveal footer on the pages the boot script marks (Nov 11) */
/* Reveal footer (Brina, 11 November, from the 21st.dev "Sticky Footer"; she approved it on Decision Studio and asked for it
   on: Decision Studio, Use Cases, Digital Twins, the telecom case study, Trust Center and its four topics, About and its four pages).
   The footer stays pinned to the bottom of the screen behind the page; the page's last section slides up off it. The
   boot script in build.py sets html[data-wl2l-rv] on those routes only. Laptop and up: on a phone the footer is taller
   than the screen, so the reveal would uncover its bottom half first. */
html[data-wl2l-rv] body > .site-footer{position:sticky;bottom:0;z-index:0}
html[data-wl2l-rv] body > main{position:relative;z-index:1;box-shadow:0 22px 34px -22px rgba(15,29,51,.22)}
/* Use Cases: <main> is see-through over a fixed sky photo that sits outside it. The page's own rule lifts the footer to
   z-index 4, so the doubled selectors put it back under. The photo goes above the footer and below <main>; reveal-uc.js
   hides the photo once the solid closing sections fill the screen, so only the footer is behind the last section. */
html[data-wl2l-rv="uc"][data-wl2l-rv] body > .site-footer.site-footer{position:sticky;bottom:0;z-index:0}
html[data-wl2l-rv="uc"][data-wl2l-rv] body > main{z-index:2}
html[data-wl2l-rv="uc"][data-wl2l-rv] body > .tj-backdrop{z-index:1}
/* Digital Twins: the film page lifts the footer to z-index 3 with doubled selectors, so these need one more class.
   <main> takes the page colour so the footer stays hidden behind it; the film is inside <main> and paints above that. */
html[data-wl2l-rv="dt"][data-wl2l-rv] body > .site-footer.site-footer.site-footer{position:sticky;bottom:0;z-index:0}
html[data-wl2l-rv="dt"][data-wl2l-rv] body > main{background-color:#f7f8fa}
/* The film's copy panels are fixed to the screen and its closing panel (Book a call, Ask the team) stays on after the
   film ends. With the page now above the footer, that panel painted over the footer (Brina's screenshot, Nov 11).
   Trim everything the film draws to the film's own block, so it can never reach the FAQ or the footer. */
html[data-wl2l-rv="dt"][data-wl2l-rv] #dtf{clip-path:inset(0)}
@media (max-width:800px){
  html[data-wl2l-rv] body > .site-footer{position:relative}
  html[data-wl2l-rv] body > main{box-shadow:none}
  html[data-wl2l-rv="uc"][data-wl2l-rv] body > .site-footer.site-footer{position:relative;z-index:4}
  html[data-wl2l-rv="dt"][data-wl2l-rv] body > .site-footer.site-footer.site-footer{position:relative;z-index:3}
}
/* The footer itself as on Decision Studio, the version Brina approved (Nov 11): light paper, slate text, a hairline top
   rule and the navy mark, on every reveal page (phones included, so a page has one footer look) */
/* doubled selectors outrank the pages' own footer rules (the case study paints a dark gradient with !important) */
html[data-wl2l-rv][data-wl2l-rv] body .site-footer.site-footer{background:#f2f4f7!important;color:#33405c!important;border-top:1px solid #dce3ec}
html[data-wl2l-rv][data-wl2l-rv] body .site-footer.site-footer :is(a,h2,h3,p,li,span){color:#33405c!important}
html[data-wl2l-rv][data-wl2l-rv] body .site-footer.site-footer .brand img{filter:brightness(0) saturate(100%) invert(9%) sepia(37%) saturate(2700%) hue-rotate(198deg) brightness(92%) contrast(98%)}
html[data-wl2l-rv][data-wl2l-rv] body .site-footer.site-footer :is(.footer-top,.footer-bottom,.footer-legal){border-color:#dce3ec!important}

/* World Line 2 Light: Trust Center and its four topic pages (Nov 11) */
/* Trust Center light mock (Nov 11 2026): the Trust Center and its four topic pages on the World Line 2 Light scheme.
   Layered over the live Steel theme (main.tcn.tc-steel), copy and order unchanged. Palette is the approved Use Cases / About one:
   ground #f7f8fa, headings #0f1d33, body #33405c, quiet #40536d, blue text and buttons #195c9f, rules #dce3ec,
   bright #42a4ff for fills and dots only, navy #0f1d33 stays for the figures' solid blocks, yellow stays as the human benchmark key.
   Structure follows the light pages: About's banner (cool blue glow + fading blueprint grid), content on white sheets with one soft
   depth, every close on the Horizon card. */

/* ---------- tokens: Steel's variables re-pointed at the light palette ---------- */
html main.tcn.tc-steel{
 --n-ground:#f7f8fa;--n-surface:#ffffff;--n-raised:#f3f5f8;--n-lift:#0f1d33;--n-line:#dce3ec;--n-line-2:#c9d3df;
 --n-text:#0f1d33;--n-soft:#33405c;--n-muted:#40536d;--n-blue:#195c9f;
 --lt-sheet:linear-gradient(160deg,#ffffff 0%,#fbfcfe 55%,#f3f6fa 100%);
 --lt-depth:0 0 0 1px #dce3ec,0 2px 4px rgba(15,29,51,.04),0 32px 64px -40px rgba(15,29,51,.30);
 --lt-depth-sm:0 0 0 1px #dce3ec,0 1px 2px rgba(15,29,51,.04),0 18px 36px -28px rgba(15,29,51,.22);
 --lt-horizon:url(/lt-assets/horizon-4k.jpg);
 --s-sh-sm:0 0 0 1px #dce3ec;--s-sh-md:var(--lt-depth-sm);--s-sh-lg:var(--lt-depth);
 --background:#f7f8fa;--foreground:#0f1d33;--line:#dce3ec;--border:#dce3ec;
 background:#f7f8fa!important;color:#0f1d33}
body:has(main.tcn.tc-steel){background:#f7f8fa!important}

/* ---------- banner: the About band on all five pages ---------- */
html main.tcn.tc-steel :is(.tc-hero,.topic-hero),
html main.tcn.tc-steel[data-hero=dark] .tc-hero{position:relative;isolation:isolate;border-bottom:0;
 background:radial-gradient(ellipse 60% 90% at 72% 20%,#e3ecf8 0%,#ebf1f9 38%,#f2f5fa 70%,#f7f8fa 100%)!important}
html main.tcn.tc-steel :is(.tc-hero,.topic-hero)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(rgba(25,92,159,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(25,92,159,.07) 1px,transparent 1px);background-size:56px 56px;
 -webkit-mask-image:radial-gradient(ellipse 70% 75% at 70% 10%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 70% 75% at 70% 10%,#000 0%,transparent 72%)}
/* the header sits over the band, so the band starts under it */
html main.tcn.tc-steel :is(.tc-hero,.topic-hero){margin-top:calc(-1*var(--lt-hdr,97px));border-top:var(--lt-hdr,97px) solid transparent!important}
html main.tcn.tc-steel :is(.tc-hero,.topic-hero) h1,
html main.tcn.tc-steel[data-hero=dark] .tc-hero h1{color:#0f1d33}
html main.tcn.tc-steel :is(.tc-hero,.topic-hero) h1 span,
html main.tcn.tc-steel[data-hero=dark] .tc-hero h1 span{color:#195c9f}
html main.tcn.tc-steel :is(.tc-hero,.topic-hero) .eyebrow,
html main.tcn.tc-steel[data-hero=dark] .tc-hero .eyebrow{color:#40536d}
html main.tcn.tc-steel :is(.tc-hero,.topic-hero) .dot,
html main.tcn.tc-steel[data-hero=dark] .tc-hero .dot{background:#42a4ff}
html main.tcn.tc-steel :is(.tc-hero,.topic-hero) .page-lead,
html main.tcn.tc-steel[data-hero=dark] .tc-hero .page-lead{color:#33405c}
html main.tcn.tc-steel .crumbs,html main.tcn.tc-steel .crumbs a{color:#40536d}
html main.tcn.tc-steel .crumbs [aria-current]{color:#0f1d33}
html main.tcn.tc-steel[data-hero=dark] .tc-hero .tc-hero-sec{color:#0f1d33;border-color:#0f1d33;background:rgba(255,255,255,.55)}
html main.tcn.tc-steel[data-hero=dark] .tc-hero .tc-hero-sec svg:first-child{color:#195c9f}
html main.tcn.tc-steel[data-hero=dark] .tc-hero .tc-hero-sec:hover{background:#0f1d33;color:#fff;border-color:#0f1d33}
html main.tcn.tc-steel[data-hero=dark] .tc-hero .tc-hero-sec:hover svg:first-child{color:#7cc0ff}
html main.tcn.tc-steel[data-hero=dark] .tc-index-band{padding-top:0}

/* ---------- Trust Center: the four topics on one white sheet (About's index) ---------- */
html main.tcn.tc-steel .tc-index{background:var(--lt-sheet);border-radius:20px;box-shadow:var(--lt-depth);padding:clamp(8px,1vw,16px) clamp(24px,3vw,48px);position:relative}
html main.tcn.tc-steel .tc-index a{border-color:#dce3ec!important}
html main.tcn.tc-steel .tc-index a:first-child{border-top-color:transparent!important}
html main.tcn.tc-steel .tc-index a:last-child{border-bottom-color:transparent!important}
html main.tcn.tc-steel .tc-index h2{color:#0f1d33}
html main.tcn.tc-steel .tc-index p{color:#33405c}
html main.tcn.tc-steel .tc-index svg{color:#195c9f}
@media (hover:hover) and (pointer:fine){html main.tcn.tc-steel .tc-index a:hover{background:transparent}html main.tcn.tc-steel .tc-index a:hover h2{color:#195c9f}}
html main.tcn.tc-steel .tc-claims-band .tc-claims{color:#40536d;padding-top:clamp(28px,2.8vw,40px)}
html main.tcn.tc-steel .tc-claims-band .tc-claims svg{color:#195c9f}

/* ---------- buttons: approved light-page blue ---------- */
html main.tcn.tc-steel .cta,html main.tcn.tc-steel :is(.page-close,.tc-close) .cta{background:#195c9f;color:#fff}
html main.tcn.tc-steel .cta *{color:#fff}
html main.tcn.tc-steel .cta:hover,html main.tcn.tc-steel :is(.page-close,.tc-close) .cta:hover{background:#134a82}

/* ---------- closes: the Horizon card from About, Use Cases and the case study ---------- */
html main.tcn.tc-steel :is(.tc-close,.page-close)>.shell,
html main.tcn.tc-steel .tc-close>.shell{border-radius:20px!important;overflow:hidden!important;
 padding:clamp(32px,4vw,64px) clamp(24px,4vw,64px) clamp(170px,16vw,230px)!important;
 background:linear-gradient(90deg,rgba(247,248,250,.9) 0%,rgba(247,248,250,.55) 34%,rgba(247,248,250,0) 62%),linear-gradient(180deg,rgba(247,248,250,.7) 0%,rgba(247,248,250,0) 55%),var(--lt-horizon) 50% calc(100% + clamp(60px,9vw,140px))/max(100%,760px) auto no-repeat,#c5dffa!important;
 box-shadow:0 0 0 1px #dce3ec,0 2px 4px rgba(15,29,51,.04),0 36px 72px -48px rgba(15,29,51,.35)!important}
html main.tcn.tc-steel .tc-close{margin-top:clamp(72px,8vw,128px)}
html main.tcn.tc-steel .tc-close-inner{grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:clamp(24px,4vw,64px)!important}
html main.tcn.tc-steel .tc-close .cta{justify-self:end;min-width:0}
html main.tcn.tc-steel :is(.tc-close,.page-close) h2{color:#0f1d33}
html main.tcn.tc-steel :is(.tc-close,.page-close) .body-copy{color:#33405c}
html main.tcn.tc-steel :is(.tc-close,.page-close) .text-link{color:#0f1d33}
/* topic closes keep their text, links and button order; the card holds them */
html main.tcn.tc-steel .page-close{margin-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,5.6vw,88px)}
html main.tcn.tc-steel .page-close h2{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em;line-height:1.15;max-width:26ch}
html main.tcn.tc-steel .page-close .body-copy{max-width:60ch}
@media (max-width:760px){html main.tcn.tc-steel .tc-close-inner{grid-template-columns:1fr!important;align-items:start!important}html main.tcn.tc-steel .tc-close .cta{justify-self:start}}

/* ---------- topic pages: glance strip, route and figures on white sheets ---------- */
html main.tcn.tc-steel .tcg-panel{background:var(--lt-sheet);box-shadow:var(--lt-depth);border-radius:20px;border-color:transparent;overflow:hidden}
html main.tcn.tc-steel .tcg-list>li{border-color:#dce3ec}
html main.tcn.tc-steel .tcg-list a:hover{background:#f3f6fa}
html main.tcn.tc-steel .tcg-go{color:#195c9f}
html main.tcn.tc-steel .tcj-fig{background:#fff;box-shadow:var(--lt-depth-sm);border-radius:16px;border-color:transparent}
html main.tcn.tc-steel :is(.tcj-docs li,.tcj-flow li>span:nth-child(2),.tcj-groups li,.tcj-split>div,.tcj-lane,.tcj-chain li,.tcj-modes-grid .tcj-mode,.tcj-call li,.tcj-nest-2){background:#f3f6fa;border-color:#dce3ec;color:#0f1d33}
html main.tcn.tc-steel .tcj-mark span{background:#f7f8fa;border-color:#c9d3df;color:#40536d}
html main.tcn.tc-steel .tcj-nav a,html main.tcn.tc-steel .tcj-nav-toggle{color:#40536d}
html main.tcn.tc-steel :is(.tcj-rows,.tcj-defs,.tcj-checks,.tcj-rail)>*{border-color:#dce3ec}
html main.tcn.tc-steel .tcj-cap,html main.tcn.tc-steel .tcj-after{color:#33405c}
html main.tcn.tc-steel .tcj-links a{color:#40536d;border-color:#c9d3df}
html main.tcn.tc-steel .tcj-links a:hover{color:#195c9f;border-color:#195c9f}
html main.tcn.tc-steel .tcj-range{background:rgba(25,92,159,.07)}
html main.tcn.tc-steel .tc-rule-line{background:linear-gradient(90deg,rgba(15,29,51,.08) 0%,#dce3ec 55%,#42a4ff 100%)}
html main.tcn.tc-steel .tc-rule-head i{background:#42a4ff;box-shadow:0 0 0 4px #f7f8fa}

/* ---------- FAQ ---------- */
html main.tcn.tc-steel .tc-faq-intro{color:#0f1d33}
html main.tcn.tc-steel .tc-faq .tc-faq-item{border-color:#dce3ec!important}
html main.tcn.tc-steel .tc-faq-band .tc-faq-item:last-child{border-bottom-color:#dce3ec!important}
html main.tcn.tc-steel .tc-faq .tc-faq-item:hover{--tc-faq-hl:rgba(255,255,255,.8)}
html main.tcn.tc-steel .tc-faq-answer{color:#33405c}
html main.tcn.tc-steel .tcs-box input{background:#fff;border-color:#dce3ec;box-shadow:0 1px 2px rgba(15,29,51,.04)}
html main.tcn.tc-steel .tcs-box input:focus-visible{border-color:#195c9f;box-shadow:0 0 0 3px rgba(25,92,159,.18)}

/* header: About light rules, re-keyed */
html:has(main.tcn) .site-header{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;transition:background-color .25s}
html.header-stuck:has(main.tcn) .site-header{background:rgba(247,248,250,.84)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(15,29,51,.08)!important}
html:has(main.tcn) .site-header :is(.brand,.desktop-nav a,.nav-top){color:#0f1d33!important}
html:has(main.tcn) .site-header .brand img{filter:brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(1800%) hue-rotate(190deg)}
html:has(main.tcn) .site-header .brand span{color:#195c9f!important}
html:has(main.tcn) .site-header .nav-cta{background:#0f1d33!important;color:#fff!important}
html:has(main.tcn) .site-header .nav-cta *{color:#fff!important}
html:has(main.tcn) .site-header .menu-toggle{color:#0f1d33!important}
html:has(main.tcn) .site-header .desktop-nav a.nav-top[href^="/trust-center"]::after{transform:scaleX(1);background:#195c9f}
/* menus: the light pages' menus, re-keyed */
/* Header menus on the light pages (Brina, Nov 11: "the dropdowns for all of the things in the menu at the navigation bar,
   they're all black"). The light pages turn the header light and its links navy, but the dropdown panels kept the site's
   near-black #141510, so the menus read navy on black. The phone sheet stayed black too. Both now follow the homepage's own
   light menus (World Line 2 landing, its .hs-wrap rules): near-white panel, faint navy border, one soft navy shadow, slate
   links that turn navy on hover, and the #f7f8fa phone sheet with navy links and thin rules.
   Scope: the pages whose header these light stylesheets make light. Use Cases (main.tj-photo), the telecom case study
   (main.cs-page.csx), the About pages (html[data-ltb], set by the boot script on /about routes). */
html:has(main.tcn) .site-header .nav-group:is(:hover, :focus-within) .nav-menu {
  background: rgba(251, 252, 253, .97) !important;
  border-color: rgba(15, 29, 51, .08) !important;
  box-shadow: 0 18px 40px -16px rgba(15, 29, 51, .16) !important;
}
html:has(main.tcn) .site-header .nav-menu a { color: #40536d !important; }
html:has(main.tcn) .site-header .nav-menu a:is(:hover, :focus-visible) { color: #0f1d33 !important; }

/* phone sheet */
html:has(main.tcn) .site-header .mobile-menu {
  background: #f7f8fa !important;
  border-top-color: rgba(15, 29, 51, .10) !important;
  color: #0f1d33 !important;
}
html:has(main.tcn) .site-header .mobile-menu a { color: #0f1d33 !important; border-bottom-color: rgba(15, 29, 51, .10) !important; }
html:has(main.tcn) .site-header .mobile-menu .mobile-group { border-bottom-color: rgba(15, 29, 51, .10) !important; }
html:has(main.tcn) .site-header .mobile-menu .mobile-group ul a { color: #40536d !important; }

/* Use Cases and telecom give the header a frosted blur, and a blurred element becomes the box a fixed child is sized
   against, so the full-screen phone sheet was cut to a 36px strip under the header. The site already turns the blur off
   while the menu is open on Platform; same here. */
html:has(main.tcn) .site-header:has(.menu-toggle[aria-expanded=true]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* World Line 2 Light: Digital Twins film page (Nov 11) */

/* ---- World Line 2 Light: the Digital Twins page (Nov 11 2026). html[data-dtf] is set on /digital-twins by the boot script. ---- */
#dtf{position:relative;margin:0;color:var(--navy);font:400 17px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html[data-dtf] #dtf .film{top:var(--hdr,0px)}
#dtf[data-mode="wide"] .inner{top:calc(var(--it,var(--ct,96px)) + var(--hdr,0px))}
html[data-dtf]{overflow-anchor:none;background:#f7f8fa}
html[data-dtf] body{background:#f7f8fa;overflow-x:clip}
/* the site's own page stays in the HTML (search engines and AI crawlers read it); it is hidden once the film is on screen.
   Until then the space stays light and empty, so the FAQ never jumps to the top while the film loads */
html[data-dtf] body > main > .dta{visibility:hidden}
html[data-dtf-on] body > main > .dta{display:none}
/* the instant the reader leaves /digital-twins (the boot script clears data-dtf), the film is gone from view */
html:not([data-dtf]) #dtf{display:none!important}
/* the FAQ and the footer scroll up over the film's fixed layers */
/* the FAQ in Mist, one step deeper than the page, so it reads as its own section (her pick, Nov 11) */
html[data-dtf] body > main > section.tg{position:relative;z-index:3;background:#eef1f5;border-top:0}
/* site rules that reach the film's elements by class or tag name, measured element by element against the standalone film */
html[data-dtf] #dtf section.hero{background:none;overflow:visible}
html[data-dtf] #dtf *::before,html[data-dtf] #dtf *::after{content:none}
html[data-dtf] #dtf h1{max-width:none}
html[data-dtf] #dtf h1 span{display:inline;max-width:none}
html[data-dtf] #dtf i.dot{box-shadow:none}
html[data-dtf] #dtf img,html[data-dtf] #dtf video{max-width:none}
html[data-dtf] #dtf li{box-shadow:none}
html[data-dtf] #dtf .bcm{display:block}
html[data-dtf] #dtf .cue{margin-bottom:17px}
html[data-dtf] #dtf,html[data-dtf] #dtf *{text-align:start}
html[data-dtf][data-dtf] body > .site-footer.site-footer{position:relative;z-index:3;background:#f2f4f7!important;color:#33405c!important;border-top:1px solid #dce3ec}

/* the film, scoped to #dtf */
#dtf{--ground:#f7f8fa;--navy:#0f1d33;--body:#33405c;--quiet:#40536d;--rule:#dce3ec;--blue:#195c9f;--fill:#42a4ff;--pale:#9ec2e6;--per:75vh}
#dtf,#dtf *{box-sizing:border-box}
#dtf .film{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 52% 62% at 67% 42%,#ffffff 0%,#fcfcfd 34%,rgba(247,248,250,0) 72%),linear-gradient(to bottom,#f7f8fa 0%,#f6f7f9 74%,#edf0f4 82%,#e6eaf0 100%)}
#dtf .film .gnd{position:absolute;left:0;top:0;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(15,29,51,.17),rgba(15,29,51,0));opacity:0}
#dtf .film canvas{position:absolute;inset:0;width:100%;height:100%}
#dtf .film img{position:absolute;display:block;opacity:0}
#dtf .film #lb{position:absolute;inset:0;overflow:hidden}
#dtf .film #ov{mix-blend-mode:multiply}
#dtf .film img{left:0;top:0;transform-origin:0 0;will-change:transform,opacity}
#dtf .film .twf.mir{transform:scaleX(-1)}
#dtf .film .twf{position:absolute;left:0;top:0;opacity:0;background:#195c9f;mix-blend-mode:multiply;mask-image:url(/lt-assets/dt/bust.webp),linear-gradient(to top,#000 calc(var(--lv,0%) - var(--fe,.3%)),transparent calc(var(--lv,0%) + var(--fe,.3%)));mask-size:100% 100%,100% 100%;mask-repeat:no-repeat;mask-composite:intersect}
#dtf .film #lb .l{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;will-change:transform,opacity}
#dtf .copy{position:relative;z-index:1}
#dtf section{position:relative;min-height:calc(var(--n,1) * var(--per))}
#dtf .hero{min-height:220vh}
#dtf .inner{position:fixed;left:var(--cl,56px);top:var(--it,var(--ct,96px));width:var(--cw,40%);padding:0;max-width:none;transform:translate3d(0,var(--dy,0px),0);opacity:0;visibility:hidden;will-change:opacity,transform}
#dtf .hero .inner{top:18vh;width:auto;max-width:none;left:var(--cl,56px);transform:translate3d(0,var(--dy,0px),0)}
#dtf .eyebrow{margin:0 0 16px;display:flex;gap:14px;font:400 13px/1.2 Manrope,Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet)}
#dtf .eyebrow b{color:var(--blue);font-weight:400;letter-spacing:.04em}
#dtf h1{margin:0;font:500 clamp(42px,6.4vw,95px)/1.04 Manrope,Inter,sans-serif;letter-spacing:-.072em}
#dtf h1 span{color:var(--blue)}
#dtf h2{margin:0;font:500 clamp(32px,2.2vw + 18px,49px)/1.06 Manrope,Inter,sans-serif;letter-spacing:-.055em;max-width:12em;text-wrap:balance}
#dtf .hero .lead{margin:56px 0 0;max-width:680px;font:400 22px/1.5 Manrope,Inter,sans-serif;letter-spacing:-.01em;text-wrap:pretty}
#dtf .hero .sub{margin:20px 0 0;max-width:680px;font:400 22px/1.5 Manrope,Inter,sans-serif;letter-spacing:-.01em;color:var(--navy);text-wrap:pretty}
#dtf .cue{margin-top:32px;display:inline-flex;gap:8px;align-items:center;color:var(--quiet);font:400 17px/1.4 Manrope,Inter,sans-serif}
#dtf .beats{display:grid;align-items:start;margin-top:32px}
#dtf .beat{grid-area:1/1;opacity:0;visibility:hidden;transform:translate3d(0,var(--by,0px),0)}
#dtf .beat p{margin:0;font-size:19px;line-height:1.55;max-width:29em;text-wrap:pretty;color:var(--body)}
#dtf .beat p + p{margin-top:16px}
#dtf[data-mode="wide"] .beat .rk + p{margin-top:0}
#dtf .beat .close{font:500 25px/1.3 Manrope,Inter,sans-serif;letter-spacing:-.03em;max-width:760px;color:var(--navy);text-wrap:balance}
#dtf .beat .close .nw{white-space:nowrap}
#dtf .beat p.more{margin-top:8px;font-size:15px;line-height:1.4}
#dtf .tl{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--blue);font:500 15px/1.4 Inter,sans-serif;text-decoration:underline;text-decoration-color:rgba(25,92,159,.35);text-underline-offset:4px;text-decoration-thickness:1px}
#dtf .tl:hover{text-decoration-color:var(--blue)}
#dtf .tl:focus-visible,#dtf .bcm-menu a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
#dtf .bcm{position:relative;margin-top:32px}
#dtf .beat p.ask{margin-top:20px;max-width:none;font-size:15px;line-height:1.5;color:var(--quiet);text-wrap:balance}
#dtf .cta{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:64px;padding:0 25px;background:var(--blue);color:#fff;font:600 17px/1 Manrope,Inter,sans-serif;border-radius:3px;cursor:pointer}
#dtf .cta:hover{background:#124a83}
#dtf .cta .chev{margin-left:16px;transition:transform .2s ease}
#dtf .cta[aria-expanded="true"] .chev{transform:rotate(180deg)}
#dtf .cta:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#dtf .bcm-menu{position:absolute;left:0;top:calc(100% + 8px);min-width:300px;background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:0 8px 24px rgba(15,29,51,.08);padding:6px;z-index:5}
#dtf .bcm-menu ul{list-style:none;margin:0;padding:0}
#dtf .bcm-menu a{display:block;padding:10px 12px;border-radius:4px;text-decoration:none;color:var(--navy)}
#dtf .bcm-menu a:hover{background:#eef3f9}
#dtf .bcm-menu .bt{display:block;font:600 15px/1.3 Inter,sans-serif}
#dtf .bcm-menu .bd{display:block;margin-top:2px;font:400 15px/1.4 Inter,sans-serif;color:var(--quiet)}
#dtf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#dtf .beat p + p.close{margin-top:24px}
#dtf .beat .close:first-child::before{margin-top:0}
#dtf .beat .lines span{display:block}
#dtf .beat .rk{display:none}
#dtf .rows{list-style:none;margin:32px 0 0;padding:0;max-width:none;border-top:1px solid var(--rule)}
#dtf .rows li{--on:0;display:grid;grid-template-columns:11rem 1fr;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule)}
#dtf .rows .k{font:600 12px/1.5 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:8px;color:color-mix(in srgb,var(--navy) calc(var(--on) * 100%),var(--quiet))}
#dtf .rows .t{font:400 15px/1.4 Inter,sans-serif;color:color-mix(in srgb,var(--navy) calc(var(--on) * 100%),var(--quiet))}
#dtf .rows li.on .t{font-weight:600}
#dtf .rows.narrow li{grid-template-columns:3rem 1fr}
#dtf .rows .dot{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-1px)}
#dtf .rows .d1{background:#195c9f}
#dtf .rows .d2{background:#42a4ff}
#dtf .rows .d3{background:#9ec2e6}
#dtf .rows .d1,#dtf .rows .d2,#dtf .rows .d3{opacity:calc(.35 + .65 * var(--lit,var(--on)))}
#dtf .rows .dm{background:color-mix(in srgb,#195c9f calc(var(--on) * 100%),#dce3ec)}
#dtf .rows li:has(> button){display:block;padding:0}
#dtf .rows button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:11rem 1fr;gap:16px;align-items:baseline;width:100%;padding:12px 0;cursor:pointer}
#dtf .rows button:hover .t{color:var(--navy)}
#dtf .rows button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
#dtf .end{height:24vh}
#dtf[data-mode="stack"]{--per:78svh}
#dtf[data-mode="stack"] .film{bottom:auto;height:max(44svh,272px);background:radial-gradient(ellipse 70% 70% at 50% 42%,#ffffff 0%,#fcfcfd 38%,rgba(247,248,250,0) 75%),linear-gradient(to bottom,#f7f8fa 0%,#f6f7f9 62%,#edf0f4 76%,#eef1f4 88%,#f7f8fa 100%);z-index:2;box-shadow:0 1px 0 rgba(15,29,51,.06)}
#dtf[data-mode="stack"] .inner{position:absolute;inset:0;width:auto;max-width:none;padding:0 20px;opacity:1;visibility:visible;transform:none;will-change:auto}
#dtf[data-mode="stack"] .sh{position:sticky;top:calc(var(--hdr,0px) + max(44svh,272px));z-index:1;background:var(--ground);padding:20px 0 14px}
#dtf[data-mode="stack"] .sh::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;background:linear-gradient(var(--ground),rgba(247,248,250,0));pointer-events:none}
#dtf[data-mode="stack"] .beats{display:grid;align-items:start;position:sticky;top:calc(var(--hdr,0px) + max(44svh,272px) + var(--shh,120px));margin:0;padding-top:14px}
#dtf[data-mode="stack"] .beat{grid-area:1/1;position:relative;opacity:0;visibility:visible;transform:none}
#dtf[data-mode="stack"] .hero .inner{position:absolute;left:0;right:0;bottom:auto;top:calc(var(--hdr,0px) + max(44svh,272px) + 22px);padding:0 20px;transform:none}
#dtf[data-mode="stack"] .hero .lead{font-size:20px;margin-top:32px}
#dtf[data-mode="stack"] .hero .sub{font-size:20px;margin-top:16px}
#dtf[data-mode="stack"] .cue{margin-top:16px;font-size:17px}
#dtf[data-mode="stack"] .eyebrow{margin-bottom:8px}
#dtf[data-mode="stack"] .beat p + p{margin-top:12px}
#dtf[data-mode="stack"] .beat p + p.close{margin-top:16px}
#dtf[data-mode="stack"] .beat .close{font-size:22px}
#dtf[data-mode="stack"] .beat .close .nw{white-space:normal}
#dtf[data-mode="stack"] .beat .close:first-child::before{margin-top:0}
#dtf[data-mode="stack"] .bcm{margin-top:24px}
#dtf[data-mode="stack"] .cta{min-height:62px;font-size:16px}
#dtf[data-mode="stack"] .beat a,#dtf[data-mode="stack"] .beat button{scroll-margin-top:calc(var(--hdr,0px) + max(44svh,272px) + 150px)}
#dtf[data-mode="stack"] .beat p{font-size:16px;line-height:1.5}
#dtf[data-mode="stack"] .beat .rk{display:block;margin:0 0 8px;font:600 12px/1.4 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
#dtf[data-mode="stack"] .beat .rk b{display:block;margin-top:2px;font:600 16px/1.35 Inter,sans-serif;letter-spacing:0;text-transform:none;color:var(--navy)}
#dtf[data-mode="stack"] .rows{display:none}
#dtf[data-mode="stack"] .end{height:0}
#dtf[data-mode="stack"] .beat p.ask{font-size:15px}
#dtf[data-mode="stack"] .beat p.more{font-size:15px;line-height:1.4}
#dtf[data-mode="stack"] .bcm-menu{min-width:0;width:min(320px,100%);padding:4px}
#dtf[data-mode="stack"] .bcm-menu a{padding:8px 10px}
#dtf[data-mode="stack"] .bcm-menu .bd{font-size:12px;margin-top:1px}
@media (max-width:600px){#dtf[data-mode="stack"] h1{font-size:49px}}
@media (min-width:601px){#dtf[data-mode="stack"] .inner,#dtf[data-mode="stack"] .hero .inner{padding:0 max(20px,calc((100vw - 720px) / 2))}}
@media (prefers-reduced-motion:reduce){#dtf .inner,#dtf .beat{transition:opacity .2s ease}}
#dtf .film video{position:absolute;left:0;top:0;transform-origin:0 0;mix-blend-mode:multiply;filter:brightness(1.012);opacity:0;pointer-events:none}

/* Digital Twins: light header (About rules) */
html[data-dtf] .site-header{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;transition:background-color .25s}
html.header-stuck[data-dtf] .site-header{background:rgba(247,248,250,.84)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(15,29,51,.08)!important}
html[data-dtf] .site-header :is(.brand,.desktop-nav a,.nav-top){color:#0f1d33!important}
html[data-dtf] .site-header .brand img{filter:brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(1800%) hue-rotate(190deg)}
html[data-dtf] .site-header .brand span{color:#195c9f!important}
html[data-dtf] .site-header .nav-cta{background:#0f1d33!important;color:#fff!important}
html[data-dtf] .site-header .nav-cta *{color:#fff!important}
html[data-dtf] .site-header .menu-toggle{color:#0f1d33!important}
html[data-dtf] .site-header .desktop-nav a.nav-top[href^="/digital-twins"]::after{transform:scaleX(1);background:#195c9f}
/* Digital Twins: light menus */
/* Header menus on the light pages (Brina, Nov 11: "the dropdowns for all of the things in the menu at the navigation bar,
   they're all black"). The light pages turn the header light and its links navy, but the dropdown panels kept the site's
   near-black #141510, so the menus read navy on black. The phone sheet stayed black too. Both now follow the homepage's own
   light menus (World Line 2 landing, its .hs-wrap rules): near-white panel, faint navy border, one soft navy shadow, slate
   links that turn navy on hover, and the #f7f8fa phone sheet with navy links and thin rules.
   Scope: the pages whose header these light stylesheets make light. Use Cases (main.tj-photo), the telecom case study
   (main.cs-page.csx), the About pages (html[data-ltb], set by the boot script on /about routes). */
html[data-dtf] .site-header .nav-group:is(:hover, :focus-within) .nav-menu {
  background: rgba(251, 252, 253, .97) !important;
  border-color: rgba(15, 29, 51, .08) !important;
  box-shadow: 0 18px 40px -16px rgba(15, 29, 51, .16) !important;
}
html[data-dtf] .site-header .nav-menu a { color: #40536d !important; }
html[data-dtf] .site-header .nav-menu a:is(:hover, :focus-visible) { color: #0f1d33 !important; }

/* phone sheet */
html[data-dtf] .site-header .mobile-menu {
  background: #f7f8fa !important;
  border-top-color: rgba(15, 29, 51, .10) !important;
  color: #0f1d33 !important;
}
html[data-dtf] .site-header .mobile-menu a { color: #0f1d33 !important; border-bottom-color: rgba(15, 29, 51, .10) !important; }
html[data-dtf] .site-header .mobile-menu .mobile-group { border-bottom-color: rgba(15, 29, 51, .10) !important; }
html[data-dtf] .site-header .mobile-menu .mobile-group ul a { color: #40536d !important; }

/* Use Cases and telecom give the header a frosted blur, and a blurred element becomes the box a fixed child is sized
   against, so the full-screen phone sheet was cut to a 36px strip under the header. The site already turns the blur off
   while the menu is open on Platform; same here. */
html[data-dtf] .site-header:has(.menu-toggle[aria-expanded=true]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Digital Twins: footer look */
html[data-dtf][data-dtf] body .site-footer.site-footer{background:#f2f4f7!important;color:#33405c!important;border-top:1px solid #dce3ec}
html[data-dtf][data-dtf] body .site-footer.site-footer :is(a,h2,h3,p,li,span){color:#33405c!important}
html[data-dtf][data-dtf] body .site-footer.site-footer .brand img{filter:brightness(0) saturate(100%) invert(9%) sepia(37%) saturate(2700%) hue-rotate(198deg) brightness(92%) contrast(98%)}
html[data-dtf][data-dtf] body .site-footer.site-footer :is(.footer-top,.footer-bottom,.footer-legal){border-color:#dce3ec!important}
/* World Line 2 Light: Platform, version N (Nov 11) */
/* World Line 2 Light: Platform, version N (frozen 2026-11-12 by make.mjs) */
/* ---- Platform light test (Nov 10), scoped by html[data-pl] from the preview server ---- */
html[data-pl]{--pl-ground:#f7f8fa;--pl-ink:#0f1d33;--pl-body:#33405c;--pl-quiet:#40536d;--pl-blue:#195c9f;--pl-rule:#dce3ec}
html[data-pl] body,html[data-pl] main.plm.rd{background:var(--pl-ground)!important}
/* the stage: no night grade, no dark veil; a soft pearl wash keeps copy calm over the city */
html[data-pl] .rd-stage{background:#eef2f7!important}
html[data-pl] .rd-plates,html[data-pl] .rd-stage video,html[data-pl] .rd-stage img,html[data-pl] .rd-stage canvas:not(.rd-cubes){filter:none!important}
html[data-pl] .rd-veil{background:var(--pl-ground)!important;opacity:.16!important}
html[data-pl] .rd-shade{background:linear-gradient(90deg,rgba(247,248,250,.88) 0%,rgba(247,248,250,.55) 38%,rgba(247,248,250,.12) 62%,rgba(247,248,250,0) 80%)!important}
html[data-pl] .rd-splitfade{background:linear-gradient(rgba(247,248,250,0) 0,rgba(247,248,250,.94) 48px,var(--pl-ground) 70px)!important}
html[data-pl] .rd-a2shade{background:linear-gradient(rgba(247,248,250,.96) 45px,rgba(247,248,250,.6) 125px,rgba(247,248,250,0) 260px)!important}
html[data-pl] .rd-a2cover{background:var(--pl-ground)!important}
html[data-pl] .nai-band,html[data-pl] .page-hero{background:var(--pl-ground)!important;border-color:var(--pl-rule)!important}
/* type: navy on light, no dark halos */
html[data-pl] main.plm :where(h1,h2,h3,h4,p,li,span,a,small,strong,em,b,div,button,label,figcaption){color:var(--pl-ink)!important;text-shadow:none!important;border-color:var(--pl-rule)}
html[data-pl] main.plm :is(p,li,small,.plm-hero-body,.rd-obj,.rd-line){color:var(--pl-body)!important}
html[data-pl] main.plm [data-pl-accent]{color:var(--pl-blue)!important}
html[data-pl] main.plm .dot{background:var(--pl-blue)!important;box-shadow:none!important}
html[data-pl] main.plm :is(.cta,.btn,a.button){background:var(--pl-blue)!important;color:#fff!important;border-color:var(--pl-blue)!important}
html[data-pl] main.plm :is(.cta,.btn) *{color:#fff!important}
/* header: light, same as Use Cases light */
html[data-pl][data-pl] body .site-header.site-header{background:rgba(247,248,250,.86)!important;background-image:none!important;backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(15,29,51,.08)!important;border-color:transparent!important}
html[data-pl] .site-header :is(.brand,.desktop-nav a,.nav-top){color:var(--pl-ink)!important}
html[data-pl] .site-header .brand img{filter:brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(1800%) hue-rotate(190deg)}
html[data-pl] .site-header .brand span{color:var(--pl-blue)!important}
html[data-pl] .site-header .nav-cta{background:var(--pl-ink)!important;color:#fff!important}
html[data-pl] .site-header .menu-toggle{color:var(--pl-ink)!important}
/* soft pearl pools behind copy, in place of the dark night pools */
html[data-pl] :is(.rd-label,.rd-copy)::before{background:radial-gradient(closest-side,rgba(247,248,250,.92),rgba(247,248,250,.7) 55%,rgba(247,248,250,0))!important}
/* the cube ring keeps its own colour: a solid dark object with the brand-blue lit arc */
/* ?pl=bp (Nov 10): the reading wash lifts while the blueprint is at full strength, and returns with the quiet fade (pl-bp.js sets --bp-wash) */
html[data-pl="bp"] .rd-shade{background:linear-gradient(90deg,rgba(247,248,250,calc(.88*var(--bp-wash,1))) 0%,rgba(247,248,250,calc(.55*var(--bp-wash,1))) 38%,rgba(247,248,250,calc(.12*var(--bp-wash,1))) 62%,rgba(247,248,250,0) 80%)!important}
/* ?pl=bp (Nov 10, round 4): the blocks wait for the blueprint (pl-bp.js sets --bp-cubes) */
/* reading without a box: the photo goes pale behind the paragraph and the closing line (pl-bp.js sets --bp-read) */
html[data-pl="bp"] .rd-veil{opacity:var(--bp-veil,.16)!important}
/* copy that reads: a soft white wash behind every block, no box (Brina, Nov 10) */
html[data-pl="bp"] .rd-copy:not(.rd-copy-bridge):not(.rd-copy-close)::before{inset:-26% -24%!important;background:radial-gradient(closest-side,rgba(247,248,250,.96) 0%,rgba(247,248,250,.93) 45%,rgba(247,248,250,.62) 72%,rgba(247,248,250,0) 100%)!important}
html[data-pl="bp"] .rd-label::before{background:radial-gradient(closest-side,rgba(247,248,250,.95),rgba(247,248,250,.8) 55%,rgba(247,248,250,0))!important}
/* less at once: the second part of each step, the globe and the twins copy arrives a beat later (pl-bp.js sets --bp-p2) */
html[data-pl="bp"] .rd-copy-step :is(.plm-body,.plm-takeaway,.plm-more),
html[data-pl="bp"] .rd-copy-world .plm-world-close,
html[data-pl="bp"] .rd-copy-twins :is(.plm-body,.rd-outline){opacity:var(--bp-p2,1);translate:0 calc((1 - var(--bp-p2,1)) * 10px)}
/* a little more air between the groups, in proportion to the page's own fitting */
html[data-pl="bp"] .rd[data-live] .rd-copy-step .plm-body{line-height:1.6}
/* the HumanOS paragraph and the closing line: no band, no box (Brina, Nov 10: the faded band "looks really bad"). They read on
   the even pale wash pl-bp.js lays over the whole photo before the words arrive. */
html[data-pl="bp"] :is(.rd-copy-bridge,.rd-copy-close)::before{display:none!important}
/* the HumanOS paragraph (Brina, Nov 10: "a professional marketer or formatting expert"). Her and Frank's two sizes stay: the
   opening words large, the rest of the sentence at one size. The rest is broken by sense on wide screens, one phrase a line
   (pl-bp.js adds the breaks; the words are unchanged), so it scans as a statement instead of three 70-character lines that
   split "first-party / data" and "transforms / it". Narrow screens wrap as before. */
/* main.plm in the selector: the page-wide body rule (main.plm :is(p,.plm-hero-body,...)) otherwise outranks these and turned
   the opening words slate. The rest, verbs included, is one colour, as on World Line 2 (two sizes, one colour). */
html[data-pl="bp"] main.plm .rd-copy-bridge .rd-br-lead{color:#0f1d33!important}
html[data-pl="bp"] main.plm .rd-copy-bridge :is(.rd-br-rest,.rd-br-v){color:#26334d!important}
html[data-pl="bp"] main.plm .rd-copy-bridge .rd-br-rest{line-height:1.42!important}
/* the globe's ground (Brina, Nov 10: "the globe looks a little wonky"): the blueprint's island circle showed inside the halo,
   off the globe's centre, so the globe read as lopsided. World Line 2 sits the globe on its dark disc; here a solid pale disc
   fills the halo between its two rings (r 110 and 128 of the 460 box). pl-bp.js shows it in the globe beat and clears it
   before the twins image arrives. */
html[data-pl="bp"] .rd-halo-ring::before{content:'';position:absolute;left:109px;top:109px;width:242px;height:242px;border-radius:50%;background:#f2f6fb;opacity:var(--bp-disc,0);pointer-events:none}
/* the header stays solid on this page: the opening's headline slides up under it as the window opens, and through the
   light header's 86 percent glass it showed as ghost text across the nav (Brina, Nov 10: the buggy first scroll) */
html[data-pl="bp"][data-pl] body .site-header.site-header{background:rgba(247,248,250,.98)!important}
html[data-pl="bp"] .rd-copy-bridge .rd-br-rest br[data-bp]{display:inline}
@media (max-width:900px){html[data-pl="bp"] .rd-copy-bridge .rd-br-rest br[data-bp]{display:none}}
/* start-up (Brina's Nov 10 recording): until the scene is live the page lays its copy out as a plain column (the no-JS
   fallback), which flashed between load and the first frame. On this mock the main area waits, blank on the light ground,
   until road-scene.tsx marks it live. Reduced motion (data-state="static") still shows the plain page. */
html[data-pl="bp"] main.plm.rd:not([data-live]):not([data-state="static"]){visibility:hidden!important}
/* the hero's four lines (Brina, 9 Nov: "never half seen" before the first scroll brings them in). The page hides them only
   once it also sets data-a2try, a moment after it goes live, so they showed and then faded out on load. Hidden from the
   start here, with no transition, until the first scroll sets data-beats="on" and the page's own reveal plays. */
html[data-pl="bp"] main.plm.rd:not([data-beats="on"]) .rd-copy-hero .plm-beats li{opacity:0!important;transition:none!important}
/* one ground (Brina, Nov 10, "the scroll at the beginning is still glitching"; design doctor: "two grounds"): the hero band was
   the stage's #eef2f7 and the cover that slides off the opening window was #f7f8fa, so the opening read as a grey slab, a
   photo strip and a white slab. The stage takes the page's ground, so the window opens in one surface. */
html[data-pl="bp"] .rd-stage{background:#f7f8fa!important}
/* the four lines on the first scroll (Brina, Nov 10: "the 4 bullets at the beginning dont fade in"). A 0.35 s quint ease-out
   put each line at 38 percent in its first frame and 90 percent within 0.1 s, which reads as a pop. Now a 0.8 s power3
   ease-out (the motion skill's reveal range), 0.1 s apart, rising 8 px, so each line visibly fades in. */
html[data-pl="bp"] main.plm.rd[data-beats="on"] .rd-copy-hero .plm-beats li{transition:opacity .8s cubic-bezier(.215,.61,.355,1),translate .8s cubic-bezier(.215,.61,.355,1)!important}
html[data-pl="bp"] main.plm.rd[data-beats="on"] .rd-copy-hero .plm-beats li:nth-child(2){transition-delay:.1s!important}
html[data-pl="bp"] main.plm.rd[data-beats="on"] .rd-copy-hero .plm-beats li:nth-child(3){transition-delay:.2s!important}
html[data-pl="bp"] main.plm.rd[data-beats="on"] .rd-copy-hero .plm-beats li:nth-child(4){transition-delay:.3s!important}
/* the blocks wait for the blueprint (Brina, Nov 11): until pl-bp.js's fade starts (loop 0.07), the cube canvas stays at
   the page's own 0.002 floor. Opacity, not visibility: a hidden WebGL canvas built a GPU backlog and froze the page for
   1.2 s when it came back. */
html[data-pl="bp"] main.plm canvas.rd-cubes[data-bp-off] { opacity: 0.002 !important; }

/* Steps E, "Fixes" (Nov 10). Version D with the merged design audit applied (Platform-Design-Audit-Merged-2026-11-10.md,
   items 1 to 18 under "Applied in version E"). D's approved cuts stand exactly as they were.
   Every word left is the page's own, in its order. A cut hides a whole block, a whole list item or (pl-steps-e.js) a whole
   sentence. The Explore links carry the rest.
   One rhythm in every panel: s1 inside a group (label, headline and lead, or statement and button), s2 between groups, at
   least twice s1. Three text roles in every panel: lead (Inter 18, dark ink), body (Inter 16, muted ink), list (Inter 16,
   dark ink). Lists run in one column on the steps, so every item starts on the same edge and none wraps.
   Scope: html[data-pl="bp"][data-steps="n"]. This file loads only with ?steps=e, so the rules that reach past the step
   panels (hero, ring labels, rail, header, footer) change E alone. The light layer's rules are !important, so these are too. */

html[data-pl="bp"][data-steps="n"] main.plm{
  --sd-ink:#0f1d33;--sd-ink2:#1d2b45;--sd-body:#45536c;--sd-label:#4b5c75;--sd-blue:#195c9f;
  --sd-line:rgba(15,29,51,.36);--sd-line-hover:#0f1d33;--sd-btn-ground:rgba(247,248,250,.7);
  /* 6: s2 opens up (28 to 44 px) so the gap between groups reads wider than a text line */
  --sd-s1:clamp(10px,1.6vh,16px);--sd-s2:clamp(28px,4.4vh,44px);
  --sd-sans:InterVar,Inter,system-ui,sans-serif;--sd-head:Manrope,Arial,Helvetica,sans-serif;
  /* 16: the header's container edge (globals.css .shell), so the hero and the twins share the logo's line */
  --sd-edge:max(56px,calc((100vw - 1440px) / 2));
}
@media (min-width:1700px){html[data-pl="bp"][data-steps="n"] main.plm{--sd-edge:max(72px,calc((100vw - 1510px) / 2))}}
@media (max-width:1100px){html[data-pl="bp"][data-steps="n"] main.plm{--sd-edge:32px}}

/* ---- the cuts (Brina's approval, Nov 10), unchanged from D ----
   Approved: Validate (02) and Simulate (03) as drafted, and the twins cut.
   Not approved, so restored: every Transform (01) cut, the globe's cuts, and every Activate (04) cut (its HumanOS
   paragraph and the lead's "Turn what you learn into a decision..." sentence). */
html[data-pl="bp"][data-steps="n"] main.plm :is([data-beat="step1"],[data-beat="step2"]) .plm-body,
html[data-pl="bp"][data-steps="n"] main.plm [data-beat="step1"] .plm-list li:nth-child(4),
html[data-pl="bp"][data-steps="n"] main.plm [data-beat="step2"] .plm-list li:is(:nth-child(4),:nth-child(5),:nth-child(7)),
html[data-pl="bp"][data-steps="n"] main.plm span[data-bp-cut]{display:none!important}
/* The phone split pages each panel by its children's boxes and text (road-scene.tsx pageParts). A child with display:none
   reads there as a box at 0,0 with all its words, which threw a part off screen. In the split a cut block keeps a hidden
   box of no height, standing where the next block starts (the same s2 above it), so the parts land where they should. */
html[data-pl="bp"][data-steps="n"] main.plm[data-split] :is([data-beat="step1"],[data-beat="step2"]) .plm-body{
  display:block!important;position:absolute!important;visibility:hidden!important;height:0!important;overflow:hidden!important;
  padding:0!important;margin:var(--sd-s2) 0 0!important;pointer-events:none}

/* ---- 14: phone text at full size. The live page reads its panels, the loop's caption and the ring labels at 85 percent
   under 601 px. The panels and the caption go to full size. The ring labels keep 85 percent: at full size they widen,
   the page's loop framing (journey.ts loopFrame) shrinks and lifts the ring to fit them across 390 px, and "01 Transform"
   rose to 57 px, under the 82 px header (it sits at 98 px at 85 percent) ---- */
@media (max-width:600px){
  html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] :is(.rd-copy,.rd-loopcap) > *{zoom:1!important}
}

/* ---- the panel: Inter for everything that is not a heading ---- */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step{font:400 16px/1.55 var(--sd-sans)!important;text-wrap:pretty}

/* one measure for every block: the text column stops at 592 px, clear of the ring (as A) */
@media (min-width:901px){
  html[data-pl="bp"][data-steps="n"] main.plm[data-live] .rd-copy-step{padding-right:max(0px,min(48px,calc(var(--rd-aside-edge,100vw) - max(240px,17vw) - 592px)))!important}
  html[data-pl="bp"][data-steps="n"] main.plm[data-live][data-rail] .rd-copy-step{padding-right:max(0px,min(48px,calc(var(--rd-aside-edge,100vw) - 104px - 592px)))!important}
}

/* ---- 7: one label style, Inter 500, sentence case (the hero's label joins the panels') ---- */
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step,.rd-copy-world,.rd-copy-twins,.rd-copy-hero) .eyebrow{
  font:500 13px/1.3 var(--sd-sans)!important;letter-spacing:.01em!important;text-transform:none!important;
  color:var(--sd-label)!important;gap:10px!important;margin:0!important}
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step,.rd-copy-world,.rd-copy-twins,.rd-copy-hero) .eyebrow .dot{
  width:6px!important;height:6px!important;background:var(--sd-blue)!important;box-shadow:none!important}
/* the scroll cue: 12 px, fully up (it read at 10 px and 72 percent) */
html[data-pl="bp"][data-steps="n"] main.plm .rd-cue{font:500 12px/1.2 var(--sd-sans)!important;letter-spacing:.08em!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-cue[data-on]{opacity:1!important}

/* ---- 1: headline tracking. Word spaces come back ---- */
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-hero h1,.rd-copy-close h2),
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-bridge .rd-br-lead{letter-spacing:-.03em!important}
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step,.rd-copy-world,.rd-copy-twins) .section-title{letter-spacing:-.025em!important}

/* ---- head: label, headline at the page's size, lead (s1 apart) ---- */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .section-title{
  margin-top:var(--sd-s1)!important;line-height:1.08!important;color:var(--sd-ink)!important;font-family:var(--sd-head)!important}
/* 6: the globe and the twins take the same label-to-headline gap as the steps */
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-world,.rd-copy-twins) .eyebrow + .section-title{margin-top:var(--sd-s1)!important}
/* 2: one heading size for step and twins panels. The step headline's own size (road.css), so the two match at every
   viewport. The globe keeps its larger chapter size. */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-twins .section-title{
  font-size:clamp(28px,min(2.9vw,4.6vh),46px)!important;line-height:1.08!important;font-family:var(--sd-head)!important;color:var(--sd-ink)!important;
  text-wrap:pretty}
/* wraps as the step headlines do ("pretty"). At 46 px the 520 px twins column takes it to three lines, ending "HumanOS." */

/* ---- 3 and 4: three text roles, one measure ----
   lead: Inter 400 18/1.5, dark ink (17 px on phones). body: Inter 400 16/1.55, muted ink. Both stop at 35em. */
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step .plm-lead,.rd-copy-world .plm-world-intro,.rd-copy-twins .plm-lead){
  font:400 18px/1.5 var(--sd-sans)!important;color:var(--sd-ink2)!important;max-width:35em!important;letter-spacing:0!important}
@media (max-width:900px){
  html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step .plm-lead,.rd-copy-world .plm-world-intro,.rd-copy-twins .plm-lead){font-size:17px!important}
}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-lead{margin-top:var(--sd-s1)!important}
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step .plm-body,.rd-copy-world .plm-world-close,.rd-copy-twins .plm-body){
  font:400 16px/1.55 var(--sd-sans)!important;color:var(--sd-body)!important;max-width:35em!important;letter-spacing:0!important}

/* ---- the list: one column, no rules, a small blue mark. List role: Inter 400 16/1.45, dark ink ---- */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-list{
  margin:var(--sd-s2) 0 0!important;padding:0!important;border:0!important;grid-template-columns:minmax(0,1fr)!important;
  row-gap:calc(var(--sd-s1) * .6)!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-list li{
  grid-column:auto!important;padding:0 0 0 18px!important;border:0!important;font:400 16px/1.45 var(--sd-sans)!important;color:var(--sd-ink2)!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-list li::before{
  top:calc(.725em - 2.5px)!important;width:5px!important;height:5px!important;background:var(--sd-blue)!important;box-shadow:none!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-list li b{font-weight:600!important;color:var(--sd-ink)!important}

/* 6, the fit (hard constraint): at 1416x658 every step reads at full size. With s2 at 4.4vh Transform ran 16 px past its
   room (478 of 462 px) and the page scaled it to 0.967. So on screens 700 px high or less, s2 sits at its 26 px floor
   (still wider than a body line) and the list's rows close to 3 px (single-line items, so the rows stay distinct).
   Transform then measures 460 px. Taller screens keep the values above. */
@media (min-width:901px) and (max-height:700px){
  html[data-pl="bp"][data-steps="n"] main.plm{--sd-s2:26px}
  html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-list{row-gap:3px!important}
}
/* 14, phones: the copy now reads at full size, so each part is taller. The phone split shows one part at a time, and
   s2 sits at its 28 px floor there (4.4vh made it 37 px on a 844 px phone), so the parts fit the room under the ring */
@media (max-width:900px){html[data-pl="bp"][data-steps="n"] main.plm{--sd-s2:28px}}

/* ---- the HumanOS paragraph, where Brina kept it (Transform, Activate): its own group, one s2 below the list or lead ---- */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-body{margin:var(--sd-s2) 0 0!important;padding:0!important;border:0!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-body p{margin:0!important;color:inherit!important;font:inherit!important}

/* ---- close: the statement, then its button ----
   5: the statement's size follows the width (19 to 22 px), not the height, so phones no longer get the largest */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-takeaway{
  margin:var(--sd-s2) 0 0!important;padding:0!important;border:0!important;max-width:none!important;
  font:500 clamp(19px,0.35vw + 15px,22px)/1.35 var(--sd-head)!important;letter-spacing:-.01em!important;color:var(--sd-ink)!important;text-wrap:balance}
/* the statement breaks by sense (pl-steps-e.js adds the breaks, each tagged with where it applies) */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-takeaway br[data-sd]{display:none}
@media (min-width:901px){html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-takeaway br[data-sd~="wide"]{display:inline}}
@media (min-width:901px) and (min-height:701px){html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-takeaway br[data-sd~="tall"]{display:inline}}
@media (max-width:900px){html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-takeaway br[data-sd~="phone"]{display:inline}}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-takeaway :is(span,.rd-w){color:var(--sd-ink)!important}

/* ---- 17: one secondary button. A's outline button (3 px corners, a 1 px ink line, the up-right arrow nudging on hover),
   40 px tall everywhere, 16 px under its statement ---- */
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step a.plm-more,.rd-copy-twins a.rd-outline){
  display:inline-flex!important;align-items:center;gap:12px!important;box-sizing:border-box;min-height:40px;
  padding:9px 16px!important;border:1px solid var(--sd-line)!important;border-radius:3px!important;
  background:var(--sd-btn-ground)!important;color:var(--sd-ink)!important;
  font:600 15px/1.3 var(--sd-head)!important;letter-spacing:-.005em!important;text-decoration:none;white-space:nowrap;
  transition:border-color .24s cubic-bezier(.22,1,.36,1),transform .14s cubic-bezier(.22,1,.36,1)}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step a.plm-more{margin-top:16px!important}
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step a.plm-more,.rd-copy-twins a.rd-outline):active{transform:scale(.97)}
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step a.plm-more,.rd-copy-twins a.rd-outline) svg{
  width:15px!important;height:15px!important;flex:none;color:var(--sd-blue)!important;transition:transform .2s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){
  html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step a.plm-more,.rd-copy-twins a.rd-outline):hover{border-color:var(--sd-line-hover)!important}
  html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step a.plm-more,.rd-copy-twins a.rd-outline):hover svg{transform:translate(2px,-2px)}
}
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step a.plm-more,.rd-copy-twins a.rd-outline):focus-visible{outline:2px solid var(--sd-blue);outline-offset:3px}

/* ---- the globe: its copy stays whole (Brina did not approve its cuts). The headline keeps its size ---- */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world .plm-world-intro{margin-top:var(--sd-s1)!important}
/* 13: the seven "Your" lines read down, then across: four in the first column, three in the second */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world .rd-yours{
  grid-auto-flow:column!important;grid-template-rows:repeat(4,auto)!important;grid-template-columns:repeat(2,max-content)!important;
  column-gap:48px!important;margin:var(--sd-s2) 0 0!important;row-gap:calc(var(--sd-s1) * .6)!important}
@media (max-width:900px){
  html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world .rd-yours{grid-auto-flow:row!important;grid-template-rows:none!important;grid-template-columns:minmax(0,1fr)!important}
}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world .rd-yours li{font:400 16px/1.45 var(--sd-sans)!important;color:var(--sd-ink2)!important;letter-spacing:0!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world .rd-yours li span{color:inherit!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world .rd-yours li::before{width:5px;height:5px;top:calc(.725em - 2.5px);background:var(--sd-blue)!important;box-shadow:none!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world .plm-world-close{margin-top:var(--sd-s2)!important}

/* ---- the twins: label, headline and lead, the loop line (its own group), the button ---- */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-twins .plm-lead{margin-top:var(--sd-s1)!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-twins .plm-body{margin-top:var(--sd-s2)!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-twins a.rd-outline{margin-top:var(--sd-s2)!important}

/* ---- 8: the hero's four lines: closer to the subline, in the body style, brand-blue marks with no glow ---- */
html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-hero .plm-beats{margin-top:32px!important}
html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-hero .plm-beats li{
  font:400 16px/1.5 var(--sd-sans)!important;color:var(--sd-ink2)!important;letter-spacing:0!important}
html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-hero .plm-beats li::before{
  width:5px!important;height:5px!important;background:var(--sd-blue)!important;box-shadow:none!important;
  top:calc(clamp(8px,1.4vh,14px) + .75em - 2.5px)!important}
/* phones: one column, so no line wraps and no word hangs alone. The rows' own padding goes, the 8 px gap spaces them */
@media (max-width:560px){
  html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-hero .plm-beats{grid-template-columns:1fr!important;row-gap:8px!important}
  html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-hero .plm-beats li{padding-block:0!important}
  html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-hero .plm-beats li::before{top:calc(.75em - 2.5px)!important}
}

/* ---- 16: shared edges on wide screens. The hero starts on the logo's edge, the twins end on the header's right edge ---- */
@media (min-width:901px){
  html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-hero{left:var(--sd-edge)!important}
  html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-twins{right:var(--sd-edge)!important}
}

/* ---- 10: the ring's labels fit a short laptop screen (with the 72 px header below). The 3D ring is unchanged ---- */
html[data-pl="bp"][data-steps="n"] main.plm .rd-label .rd-line{text-wrap:balance}
@media (min-width:901px) and (max-height:760px){
  html[data-pl="bp"][data-steps="n"] main.plm .rd-label{gap:4px!important}
  /* the number and caption lines sit on a 1.2 line box (the font's own "normal" is 1.37), so the stack is as tall as its
     type: with it, "01 Transform" clears the header by 8 px */
  html[data-pl="bp"][data-steps="n"] main.plm .rd-label .rd-name{font-size:22px!important;line-height:1.05!important}
  html[data-pl="bp"][data-steps="n"] main.plm .rd-label :is(.rd-n,.rd-obj){font-size:12px!important;line-height:1.2!important}
  html[data-pl="bp"][data-steps="n"] main.plm .rd-label .rd-line{font:400 14px/1.45 var(--sd-sans)!important;max-width:21em!important;margin-top:0!important}
}

/* ---- 11: REPEAT in brand blue (it read at 2.5:1). The dashed arc stays the light accent ---- */
html[data-pl="bp"][data-steps="n"] main.plm text.rd-repeat{fill:var(--sd-blue)!important}

/* ---- 9: the step rail. No glow. Upcoming outlined, the live step brand blue, done steps navy, the progress line blue.
   pl-steps-e.js fades it (and the step labels docked beside it) out over the first tenth of the globe ---- */
html[data-pl="bp"][data-steps="n"] main.plm .rd-rail i{
  background:transparent!important;border:1px solid var(--sd-line)!important;box-shadow:none!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-rail i::after{color:var(--sd-label)!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-rail i[data-on]{background:var(--sd-blue)!important;border-color:var(--sd-blue)!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-rail i[data-done]{background:var(--sd-ink)!important;border-color:var(--sd-ink)!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-rail i:is([data-on],[data-done])::after{color:#fff!important}
html[data-pl="bp"][data-steps="n"] main.plm .rd-rail .rd-rail-fill{background:var(--sd-blue)!important}
@media (hover:hover) and (pointer:fine){
  html[data-pl="bp"][data-steps="n"] main.plm .rd-rail[data-hit] i:not([data-on]):not([data-done]):hover{border-color:var(--sd-blue)!important}
}
/* the rail sits in the stage, under the step panels, so the panel's reading wash (pl-platform.css, 24 percent of the
   panel's width past each side) laid a pale film over the dots and turned the live blue to a washed 5f8fc0. With the
   numbered rail the wash stops 48 px left of the copy, short of the dots. The copy keeps the wash behind it. */
@media (min-width:901px){
  html[data-pl="bp"][data-steps="n"] main.plm[data-rail] :is(.rd-copy-step,.rd-copy-world)::before{left:-48px!important}
}
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-rail,.rd-label){filter:opacity(var(--sd-rail,1))}
html[data-pl="bp"][data-steps="n"] main.plm .rd-rail[data-sd-off] i,
html[data-pl="bp"][data-steps="n"] main.plm .rd-label[data-sd-off]{pointer-events:none!important;cursor:default!important}

/* ---- 12: a solid header, so the hero headline no longer ghosts through it. 10: 72 px tall on short screens ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body .site-header.site-header{
  background:#f7f8fa!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (min-width:901px) and (max-height:760px){
  html[data-pl="bp"][data-steps="n"][data-pl] body .site-header.site-header{height:72px!important}
}

/* ---- 18: a navy footer ---- */
/* (navy footer rule left out: the site keeps its light footer) */

/* Steps F, "Principles" (Nov 11). E plus Brina's eight design-principles fixes ("Build all eight"). server.mjs serves E's
   rules re-scoped to F, then this file. Copy unchanged everywhere. Timing fixes 2 and 6 are in pl-bp.js and server.mjs;
   panel anchoring (7) is in pl-steps-f.js. */

/* 1. First screen: reverted (Brina, Nov 11: "I thought we were doing it so it opens on just the copy, and then the four
   bullet points appear, and then you scroll down, and then you go into the scene"). The window stays closed at rest, as on
   World Line 2. The thin line under the copy is World Line 2's window seam (.rd-a2line), which fades as the window opens. */

/* 3. Headline tiers (unity, Vignelli): one size per role. Page: the close matches the hero. Chapter: the twins headline
   matches the globe's. Steps keep theirs. */
html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-close h2 { font-size: clamp(40px, min(5.6vw, 8.6vh), 84px) !important; }
html[data-pl="bp"][data-steps="n"] main.plm.rd[data-live] .rd-copy-twins .section-title { font-size: clamp(30px, min(3.9vw, 7vh), 64px) !important; }

/* 4. Near-duplicate styles merged (repetition, Vignelli). */
/* supporting lines: the close's summary line takes the hero subline's size and colour */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-close .plm-close-loop,
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-close .plm-close-loop * { font-size: clamp(19px, 2.5vh, 22px) !important; font-weight: 400 !important; color: var(--pl-body) !important; }
/* one button text style: the step buttons match the close's links */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step a.plm-more,
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-twins a.rd-outline { font-size: 16px !important; letter-spacing: normal !important; }
/* one small label: the ring's step numbers and the scroll cue take the eyebrow style */
html[data-pl="bp"][data-steps="n"] main.plm .rd-overlay .rd-label .rd-n,
html[data-pl="bp"][data-steps="n"] main.plm .rd-stage .rd-cue span { font-family: InterVar, Inter, system-ui, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .01em !important; text-transform: none !important; color: #4b5c75 !important; }
/* one capitals caption: the ring's captions and REPEAT */
html[data-pl="bp"][data-steps="n"] main.plm .rd-overlay .rd-label .rd-obj { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .16em !important; }
html[data-pl="bp"][data-steps="n"] main.plm .rd-overlay .rd-ring svg text { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .16em !important; fill: #195c9f !important; }

/* 5. Transform's list in plain weight, like the other three steps' lists (similarity) */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-list li b { font-weight: inherit !important; }

/* 7. Panels on one top line (continuity, Müller-Brockmann): pl-steps-f.js sets --f-anchor to the tallest panel's top */
html[data-pl="bp"][data-steps="n"][data-f-anchor] main.plm :is(.rd-copy-step, .rd-copy-world) { top: var(--f-anchor) !important; }

/* 8. Footer line contrast: 2.5:1 on navy, now about 8:1 */
/* (navy footer rule left out: the site keeps its light footer) */

/* Nov 11, restore (Brina: "we should restore some of what was lost for the Validate and Simulate descriptions"). Back in
   F: Validate's thresholds item and its HumanOS paragraph, and Simulate's first HumanOS paragraph ("keeps the intelligence
   in place"). Still cut: Simulate's lead sentence, its three list items, its second paragraph, and the twins line.
   Same specificity as E's cut rules plus .rd, and later in the file, so these win. On phones the split's hidden-box rule
   is undone for the same blocks so they page like the kept paragraphs. */
html[data-pl="bp"][data-steps="n"] main.plm.rd [data-beat="step1"] .plm-body,
html[data-pl="bp"][data-steps="n"] main.plm.rd [data-beat="step2"] .plm-list + .plm-body { display: block !important; }
html[data-pl="bp"][data-steps="n"] main.plm.rd [data-beat="step1"] .plm-list li:nth-child(4) { display: list-item !important; }
html[data-pl="bp"][data-steps="n"] main.plm.rd[data-split] :is([data-beat="step1"] .plm-body, [data-beat="step2"] .plm-list + .plm-body) {
  position: static !important; visibility: visible !important; height: auto !important; overflow: visible !important; pointer-events: auto; }

/* Nov 11, later: the ring's descriptions arrive one at a time (pl-bp.js sets --bp-desc on each label). A multiplier on top
   of the page's own fade (its --line), so its fade-out before the step rail still works. Ring only, not the rail. */
html[data-pl="bp"][data-steps="n"] main.plm .rd-label:not([data-tracker]) .rd-line { filter: opacity(var(--bp-desc, 1)); translate: 0 calc((1 - var(--bp-desc, 1)) * 6px); }

/* Nov 11, links: the globe section's Security, Privacy & Compliance link (added by pl-steps-f.js) wears the step buttons'
   style, read from Transform's computed button, one s2 below the paragraph */
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world a[data-f-sec] {
  display: inline-flex !important; align-items: center !important; gap: 12px !important; padding: 9px 16px !important;
  border: 1px solid rgba(15, 29, 51, .36) !important; border-radius: 3px !important; background: rgba(247, 248, 250, .7) !important;
  color: #0f1d33 !important; font: 600 16px/1.3 Manrope, Arial, Helvetica, sans-serif !important; letter-spacing: normal !important;
  text-decoration: none !important; margin-top: var(--sd-s2) !important; width: auto !important; }
html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world a[data-f-sec]:hover { border-color: #0f1d33 !important; }

/* Steps I, "Progression in time" (Nov 11). F plus this layer. server.mjs serves E and F re-scoped to I, then this file.
   Copy unchanged everywhere: every word as F renders it, in its order.

   1. Static grouping (design-principles, proximity; design doctor: "equal 26 px gaps read as one stack").
      F spaced lead, list, HumanOS paragraph and statement all one s2 apart, so five groups read as one column. Here the
      HumanOS paragraph sits closer to the list it explains (0.7 s2) and the statement steps further away (1.3 s2), so each
      step reads as three groups: the head (label, headline, lead), what it does (list and paragraph), the close
      (statement and button). The total height is F's, so the fit is F's. The globe's button sits 16 px under its paragraph,
      as the step buttons sit under their statements (repetition).
   2. The build (cinematic-scroll-storytelling: scrubbed, linear in scroll, small offset, no blur, no bounce).
      pl-steps-i.js gives each block a start (--i-a) and a length (--i-d) once, and writes one number per panel, --i-q, the
      scroll progress through its beat, only when it changes. Each block reads its own value from those three: 18 percent
      until its turn, then brightening to full over its length, rising 6 px as it arrives and still once read. Reversible:
      it is a function of scroll position, so scrolling up runs it backwards.
      The rules apply only while pl-steps-i.js sets data-i-on: not with reduced motion, not on the phone split (the page
      already pages a panel in parts there), so in both every block is at full strength. */

@media (min-width: 901px) {
  html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-list + .plm-body { margin-top: calc(var(--sd-s2) * .7) !important; }
  html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-step .plm-takeaway { margin-top: calc(var(--sd-s2) * 1.3) !important; }
  html[data-pl="bp"][data-steps="n"] main.plm .rd-copy-world a[data-f-sec] { margin-top: 16px !important; }
}

@media (prefers-reduced-motion: no-preference) {
  /* a block: faint (0.18) until its turn, then up to full over its length */
  html[data-pl="bp"][data-steps="n"][data-i-on] main.plm.rd[data-live]:not([data-split]) :is(.rd-copy-step, .rd-copy-world) [data-i-b] {
    --i-x: clamp(0, (var(--i-q, 1) - var(--i-a, 0)) / var(--i-d, .06), 1);
    opacity: calc(.18 + .82 * var(--i-x)) !important;
    translate: 0 calc((1 - var(--i-x)) * (1 - var(--i-x)) * 6px) !important;
  }
  /* the statement lights word by word, as on the page, but in its turn (after the paragraph). The block itself stays up,
     its words carry the build; F's second-part fade (--bp-p2) is replaced on every block here */
  html[data-pl="bp"][data-steps="n"][data-i-on] main.plm.rd[data-live]:not([data-split]) .rd-copy-step .plm-takeaway {
    opacity: 1 !important; translate: none !important;
  }
  html[data-pl="bp"][data-steps="n"][data-i-on] main.plm.rd[data-live]:not([data-split]) .rd-copy-step .plm-takeaway .rd-w[data-i-b] {
    translate: none !important;
  }
}

/* 3. Reduced motion and the static page: every block at full strength. In F the second part (paragraph, statement,
   button) stayed at --bp-p2 0 there, so it never showed; this undoes that fade for the step panels and the globe. */
html[data-pl="bp"][data-steps="n"] main.plm[data-state="static"] :is(.rd-copy-step :is(.plm-body, .plm-takeaway, .plm-takeaway .rd-w, a.plm-more), .rd-copy-world :is(.plm-world-close, a.plm-more)) {
  opacity: 1 !important; translate: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-copy-step :is(.plm-body, .plm-takeaway, .plm-takeaway .rd-w, a.plm-more), .rd-copy-world :is(.plm-world-close, a.plm-more)) {
    opacity: 1 !important; translate: none !important;
  }
}

/* Steps J, "One system" (Nov 11). I plus this layer. server.mjs serves E, F and I re-scoped to J, then this file.
   Brina: "each section has so many different fonts, colors, and sizes ... it feels like a montage". The page used three
   headline sizes for one role, five lead styles, two body inks and three button shapes. J sets one style per role, taken
   from the approved light pages on World Line 2 Light (/use-cases, the telecom case study, /about, /about/our-story,
   /about/media), with Manrope for headings and Inter for body and labels.
   Copy unchanged everywhere. No opacity is set here, so I's scroll build still draws every block.

   Roles (1416x658 values in brackets):
   display        Manrope 500, the hero's own clamp (56.6), lh 1.04, -0.045em, navy; accent words brand blue
   section title  Manrope 500, clamp(30px, min(3.2vw, 4.9vh), 52px) (32.2), lh 1.04, -0.04em, navy
   statement      Manrope 500, clamp(19px, 0.35vw + 15px, 22px) (20), lh 1.35, -0.01em, navy
   lead           Inter 400 18/1.5, body ink #33405c (17 px under 901 px)
   body           Inter 400 16/1.55, body ink #33405c
   list           Inter 400 16/1.45, navy, 5 px brand-blue mark
   label          Inter 500 13/1.3, uppercase, 0.12em, brand blue
   caption        Inter 400 14/1.45, muted ink #40536d
   Inks: navy #0f1d33 (headings, lists), #33405c (lead, body), #40536d (captions), #195c9f (the one accent).
   Rhythm: s1 inside a group (label to title, title to lead), s2 between groups. The display title takes s2 to its lead. */

html[data-pl="bp"][data-steps="n"] main.plm {
  --j-ink: #0f1d33; --j-body: #33405c; --j-muted: #40536d; --j-blue: #195c9f;
  --j-head: Manrope, Arial, Helvetica, sans-serif; --j-sans: InterVar, Inter, system-ui, sans-serif;
  --j-display: clamp(40px, min(5.6vw, 8.6vh), 84px);
  --j-title: clamp(30px, min(3.2vw, 4.9vh), 52px);
  --j-statement: clamp(19px, 0.35vw + 15px, 22px);
  --j-lead: 18px;
}
@media (max-width: 900px) {
  html[data-pl="bp"][data-steps="n"] main.plm { --j-lead: 17px; }
}

/* ---- display: the hero headline and the HumanOS paragraph's opening words (her and Frank's larger tier) ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-hero h1, .rd-copy-hero h1 span, .rd-copy-bridge .rd-br-lead) {
  font-family: var(--j-head) !important; font-size: var(--j-display) !important; font-weight: 500 !important;
  line-height: 1.04 !important; letter-spacing: -0.045em !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-hero h1, .rd-copy-bridge .rd-br-lead) { color: var(--j-ink) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-hero h1 span, .rd-copy-close h2 span) { color: var(--j-blue) !important; }

/* ---- section title: every step, the globe, the twins and the close ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step .section-title, .rd-copy-world .section-title, .rd-copy-twins .section-title, .rd-copy-close h2, .rd-copy-close h2 span) {
  font-family: var(--j-head) !important; font-size: var(--j-title) !important; font-weight: 500 !important;
  line-height: 1.04 !important; letter-spacing: -0.04em !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step .section-title, .rd-copy-world .section-title, .rd-copy-twins .section-title, .rd-copy-close h2) { color: var(--j-ink) !important; }

/* ---- statement: each step's closing line, the ring's step names, and the HumanOS paragraph's second tier (its own
   size kept, her and Frank's call; one ink and one weight with the other statements) ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step .plm-takeaway, .rd-copy-step .plm-takeaway :is(span, .rd-w), .rd-label .rd-name) {
  font-family: var(--j-head) !important; font-size: var(--j-statement) !important; font-weight: 500 !important;
  line-height: 1.35 !important; letter-spacing: -0.01em !important; color: var(--j-ink) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-bridge :is(.rd-br-rest, .rd-br-v, data) {
  font-family: var(--j-head) !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: var(--j-ink) !important; }

/* ---- lead: the hero's subline, each step's lead, the globe's intro, the twins' lead, the close's summary lines ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-hero .rd-sub, .rd-copy-step .plm-lead, .rd-copy-step .plm-lead span, .rd-copy-world .plm-world-intro, .rd-copy-twins .plm-lead, .rd-copy-close .plm-close-loop, .rd-copy-close .plm-close-loop span) {
  font-family: var(--j-sans) !important; font-size: var(--j-lead) !important; font-weight: 400 !important;
  line-height: 1.5 !important; letter-spacing: 0 !important; color: var(--j-body) !important; }

/* ---- body: every paragraph, and the ring's intro line ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step .plm-body, .rd-copy-step .plm-body :is(p, data), .rd-copy-world .plm-world-close, .rd-copy-twins .plm-body, .rd-copy-twins .plm-body span, .rd-copy-meet > span) {
  font-family: var(--j-sans) !important; font-size: 16px !important; font-weight: 400 !important;
  line-height: 1.55 !important; letter-spacing: 0 !important; color: var(--j-body) !important; }

/* ---- list: the hero's four lines, the step lists, the globe's "Your" lines ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-hero .plm-beats li, .rd-copy-step .plm-list li, .rd-copy-step .plm-list li b, .rd-copy-world .rd-yours li, .rd-copy-world .rd-yours li span) {
  font-family: var(--j-sans) !important; font-size: 16px !important; font-weight: 400 !important;
  line-height: 1.45 !important; letter-spacing: 0 !important; color: var(--j-ink) !important; }

/* ---- label: every eyebrow, the ring's numbers and captions, REPEAT and the scroll cue. Uppercase and tracked, in
   brand blue, as the section labels on /use-cases and the telecom study; Inter in place of their Manrope ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-hero, .rd-copy-step, .rd-copy-world, .rd-copy-twins) .eyebrow,
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-label :is(.rd-n, .rd-obj),
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-cue,
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-cue span {
  font-family: var(--j-sans) !important; font-size: 13px !important; font-weight: 500 !important;
  line-height: 1.3 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--j-blue) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-ring svg text {
  font-family: var(--j-sans) !important; font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important; fill: var(--j-blue) !important; }

/* ---- caption: the ring's descriptions ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-label .rd-line {
  font-family: var(--j-sans) !important; font-size: 14px !important; font-weight: 400 !important;
  line-height: 1.45 !important; letter-spacing: 0 !important; color: var(--j-muted) !important; }

/* ---- rhythm ---- */
/* label to title s1, everywhere */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-hero, .rd-copy-step, .rd-copy-world, .rd-copy-twins) .eyebrow + :is(h1, h2) { margin-top: var(--sd-s1) !important; }
/* section title to lead s1; the display title to its lead s2 */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-loop { margin-top: var(--sd-s1) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-hero .rd-sub { margin-top: var(--sd-s2) !important; }
/* groups s2: the hero's list, the close's buttons */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-hero .plm-beats { margin-top: var(--sd-s2) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-actions { margin-top: var(--sd-s2) !important; }
/* a button 16 px under the text it belongs to (I's grouping), the twins' as the globe's */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-twins a.rd-outline { margin-top: 16px !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-meet a.plm-more { margin-top: 12px !important; }

/* ---- one secondary button, with blue: the step buttons, the globe's Security link, the twins button, the ring's
   "See HumanOS in action" and the close's two links. The 3 px outline box, a blue-tinted line, the brand-blue arrow,
   the line turning full blue on hover. Manrope 600 16, as the reference pages' secondary links ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step a.plm-more, .rd-copy-world a.plm-more, .rd-copy-twins a.rd-outline, .rd-copy-meet a.plm-more, .rd-copy-close .plm-close-actions a.plm-more) {
  display: inline-flex !important; align-items: center !important; gap: 12px !important; box-sizing: border-box !important;
  min-height: 40px !important; width: auto !important; padding: 9px 16px !important;
  border: 1px solid rgba(25, 92, 159, .45) !important; border-radius: 3px !important;
  background: rgba(247, 248, 250, .7) !important; box-shadow: none !important;
  color: var(--j-ink) !important; font: 600 16px/1.3 var(--j-head) !important; letter-spacing: 0 !important;
  text-decoration: none !important; white-space: nowrap !important;
  transition: border-color .24s cubic-bezier(.22, 1, .36, 1), transform .14s cubic-bezier(.22, 1, .36, 1) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step a.plm-more, .rd-copy-world a.plm-more, .rd-copy-twins a.rd-outline, .rd-copy-meet a.plm-more, .rd-copy-close .plm-close-actions a.plm-more) svg {
  width: 15px !important; height: 15px !important; flex: none !important; color: var(--j-blue) !important; stroke: currentColor;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1) !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step a.plm-more, .rd-copy-world a.plm-more, .rd-copy-twins a.rd-outline, .rd-copy-meet a.plm-more, .rd-copy-close .plm-close-actions a.plm-more):hover { border-color: var(--j-blue) !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step a.plm-more, .rd-copy-world a.plm-more, .rd-copy-twins a.rd-outline, .rd-copy-meet a.plm-more, .rd-copy-close .plm-close-actions a.plm-more):hover svg { transform: translate(2px, -2px); }
}
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-step a.plm-more, .rd-copy-world a.plm-more, .rd-copy-twins a.rd-outline, .rd-copy-meet a.plm-more, .rd-copy-close .plm-close-actions a.plm-more):focus-visible { outline: 2px solid var(--j-blue) !important; outline-offset: 3px !important; }

/* ---- the primary button: the close's "Start a pilot", navy as the header's button ---- */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-actions a.cta {
  background: var(--j-ink) !important; border-color: var(--j-ink) !important; color: #fff !important; box-shadow: none !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-actions a.cta :is(span, svg) { color: #fff !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-actions a.cta:hover { background: #1d2b45 !important; border-color: #1d2b45 !important; }
}

/* the ring's label stack keeps I's height, so "01 Transform" clears the 72 px header on short screens as before: the
   number and caption sit on a 1.15 line box (one line each, so the box is not visible type) */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-label :is(.rd-n, .rd-obj) { line-height: 1.15 !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-label.rd-label .rd-name.rd-name { line-height: 1.05 !important; }

/* the close's row: the primary at the header button's height (48 px), the two secondaries at 40 px, centred on one line,
   16 px apart */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-actions { align-items: center !important; column-gap: 16px !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-actions a.cta {
  min-height: 48px !important; padding: 12px 20px !important; gap: 12px !important; border-radius: 3px !important;
  font: 600 16px/1.5 var(--j-head) !important; letter-spacing: 0 !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-actions a.cta svg { width: 15px !important; height: 15px !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd .rd-copy-close .plm-close-actions a.plm-more { margin-top: 0 !important; }

/* Held decision (F, fix 3): the close is the page's finale and matches the hero, so its headline takes the display size,
   not the section title size */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd :is(.rd-copy-close.plm-close-card h2, .rd-copy-close.plm-close-card h2 span) {
  font-size: var(--j-display) !important; line-height: 1.04 !important; letter-spacing: -.045em !important; }

/* Steps K, "One voice at a time" (Nov 11). J plus this layer. server.mjs serves E, F, I and J re-scoped to K, then this
   file. Brina on J: "I feel like we keep doing small fixes ... this is kind of visually overwhelming. The formatting in
   which this is presented needs to be improved." Copy unchanged: every word of every panel stays, in its order.

   Skill behind each decision in brackets.
   1. The rail goes quiet [impeccable critique: two competing text columns; Rams: remove what the eyebrow already says].
      On wide screens (no data-rail, about 1600 px and up) the four docked rail entries carried 12 text items (number, name,
      caption) beside the panel. While a step is open they fade out with the panel's arrival, and the rail becomes what
      the smaller screens already show: four numbered dots on a progress line. Hidden: the rail labels' "01".."04",
      "Transform".."Activate" and "THE INTELLIGENCE".."THE RESULT". They show on the ring, while the labels dock, when
      the reader scrolls back up, and on hover or keyboard focus of a rail entry. The panel's eyebrow names the step.
   2. Three groups, ruled [design-doctor prompt 3: equal gaps read as one stack; minimalist-ui: hairline separators, no
      boxes]. Claim (eyebrow, headline, lead), proof (list and HumanOS paragraph), close (statement and button). Inside a
      group: s1. Between groups: one gap G with a hairline at its middle. The hairline arrives with its group's first
      line (pl-steps-k.js copies that line's build timing).
   3. One voice per group [design-doctor prompt 1: the navy list outweighed the lead; impeccable quieter]. The proof reads
      as one quiet unit: list and paragraph both Inter 16 in J's body ink #33405c. Navy is left to the two voices that
      lead, the headline and the statement. List marks hang outside the text edge in J's muted ink, so every line in the
      panel starts on one edge and the eyebrow is the only blue label in the panel [Müller-Brockmann, one edge].
   Phones (900 px and below) are J unchanged: the split pages each panel in parts by its children. Nothing here sets
   display on a panel block. */

html[data-pl="bp"][data-steps="n"] main.plm {
  --k-ink: #0f1d33; --k-body: #33405c; --k-muted: #40536d; --k-blue: #195c9f;
  --k-rule: rgba(15, 29, 51, .16);
  /* the group gap G, fixed (the page's --gap-k is not used: closing gaps moves F's shared top line, which shrinks the
     room again). With the labelled rail (wide screens) G is 6.4vh, 60 px at 1013 high. With the compact numbered rail
     (shorter screens, 1416x658, 1280x720) it is 5.6vh, 37 px at 658 high, so every step fits at full size there. The
     larger wide value also sends 1280x720 to the compact rail, as in J */
  --k-g: clamp(36px, 6.4vh, 60px);
}
html[data-pl="bp"][data-steps="n"] main.plm[data-rail] { --k-g: clamp(28px, 4.7vh, 60px); }   /* Nov 11: 32px/5.6vh before the label and subheader gaps opened; on short screens the group gap gives back what they took, so every step still fits */

/* ---------- 2 + 3: the panel (desktop only) ---------- */
@media (min-width: 901px) {
  /* claim: eyebrow, headline, lead one s1 apart */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step > .section-title,
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step > .plm-lead { margin-top: var(--sd-s1) !important; }

  /* proof opens: the list, or the paragraph where a step has no list (Activate) */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step > :is(.plm-list, .plm-body:not(.plm-list ~ .plm-body):not(.plm-body ~ .plm-body)),
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step > .plm-takeaway {
    position: relative !important;
    margin-top: calc(var(--k-g) * .5) !important; padding-top: calc(var(--k-g) * .5) !important; border-top: 0 !important; }
  /* the hairline: the column's width (pl-steps-k.js writes --k-col, the eyebrow's width), at 18 percent until its group
     arrives, as I's blocks */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step > :is(.plm-list, .plm-body:not(.plm-list ~ .plm-body):not(.plm-body ~ .plm-body), .plm-takeaway)::before {
    content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important;
    width: var(--k-col, 100%) !important; height: 1px !important; background: var(--k-rule) !important; pointer-events: none; }

  /* proof is one unit: the paragraph one s1 under the list */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step > .plm-list + .plm-body { margin-top: var(--sd-s1) !important; }
  /* close: the button one s1 under the statement */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step > a.plm-more { margin-top: var(--sd-s1) !important; }

  /* 3: the proof in one quiet ink; marks hang outside the edge in the muted ink */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step .plm-list li,
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step .plm-list li b { color: var(--k-body) !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step .plm-list li { padding-left: 0 !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.rd.rd .rd-copy-step.rd-copy-step .plm-list li::before {
    left: -17px !important; width: 5px !important; height: 5px !important; background: var(--k-muted) !important; opacity: .7; }
}

/* the hairlines build with their group (I's formula, on the copied timing) */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html[data-pl="bp"][data-steps="n"][data-i-on] main.plm.rd[data-live]:not([data-split]) .rd-copy-step > [data-k-r]::before {
    opacity: calc(.18 + .82 * clamp(0, (var(--i-q, 1) - var(--k-a, 0)) / var(--k-d, .06), 1)) !important;
  }
}

/* ---------- 1: the quiet rail (wide screens, where the labels dock beside the dots) ---------- */
@media (min-width: 901px) {
  /* the rail entries' words, while a step is open (--k-rn, from pl-steps-k.js: 1 on the ring and while docking, 0 once
     the first panel has arrived) */
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-overlay .rd-label[data-tracker] :is(.rd-n, .rd-name, .rd-obj) {
    opacity: var(--k-rn, 1) !important; transition: opacity .24s cubic-bezier(.22, 1, .36, 1); }
  /* on hover or keyboard focus, of the entry or its dot, that entry's words come back */
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-overlay .rd-label[data-tracker]:is(:hover, :focus-visible) :is(.rd-n, .rd-name, .rd-obj),
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]):has(.rd-rail i:nth-of-type(1):hover) .rd-overlay .rd-label[data-tracker][data-i="0"] :is(.rd-n, .rd-name, .rd-obj),
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]):has(.rd-rail i:nth-of-type(2):hover) .rd-overlay .rd-label[data-tracker][data-i="1"] :is(.rd-n, .rd-name, .rd-obj),
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]):has(.rd-rail i:nth-of-type(3):hover) .rd-overlay .rd-label[data-tracker][data-i="2"] :is(.rd-n, .rd-name, .rd-obj),
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]):has(.rd-rail i:nth-of-type(4):hover) .rd-overlay .rd-label[data-tracker][data-i="3"] :is(.rd-n, .rd-name, .rd-obj) {
    opacity: 1 !important; }

  /* the dots take the numbered rail of smaller screens: 22 px, the step number inside, on the same centres */
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i {
    width: 22px !important; height: 22px !important; margin: -4px 0 0 -4px !important; box-sizing: border-box !important;
    display: grid !important; place-items: center !important; background-color: #f5f6f8 !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i::after {
    display: block !important; font: 500 12px/1 Manrope, Arial, Helvetica, sans-serif !important; letter-spacing: 0 !important;
    color: var(--k-muted) !important; opacity: calc(1 - var(--k-rn, 1)) !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i:nth-of-type(1)::after { content: "1" !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i:nth-of-type(2)::after { content: "2" !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i:nth-of-type(3)::after { content: "3" !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i:nth-of-type(4)::after { content: "4" !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i[data-on] { background-color: var(--k-blue) !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i[data-done] { background-color: var(--k-ink) !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail i:is([data-on], [data-done])::after { color: #fff !important; }
  /* the track, visible, and the blue progress line on it, from the first dot's centre */
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail::before { background: var(--k-rule) !important; top: 29px !important; height: calc(var(--row, 96px) * 3) !important; }
  html[data-pl="bp"][data-steps="n"] main.plm:not([data-rail]) .rd-rail .rd-rail-fill {
    display: block !important; position: absolute !important; left: 6px !important; top: 29px !important;
    width: 2px !important; height: var(--fill, 0px) !important; background: var(--k-blue) !important; }
}

/* Nov 11, Brina: "the distance between the eyebrow and the header ... really close together ... the distance between the
   header and the subheader is just really close for this whole page." Matched to the approved light pages, measured at
   1728x1013 on World Line 2 Light: section label to title 24 px (page title 28), title to its subheader 24 to 28 px.
   Platform had 16 and 16 to 22. The gaps scale with the screen height so the step panels still fit on short screens. */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.rd {
  --k-eb: clamp(16px, 2.4vh, 24px); --k-eb-page: clamp(18px, 2.8vh, 28px); --k-sub: clamp(16px, 2.2vh, 22px); }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.rd :is(.rd-copy-step, .rd-copy-world, .rd-copy-twins) .eyebrow + .section-title { margin-top: var(--k-eb) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.rd .rd-copy-hero .eyebrow + h1 { margin-top: var(--k-eb-page) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.rd :is(.rd-copy-step .section-title + .plm-lead, .rd-copy-world .section-title + .plm-world-intro, .rd-copy-twins .section-title + .plm-lead, .rd-copy-close h2 + .plm-close-loop) { margin-top: var(--k-sub) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.rd :is(.rd-copy-twins .section-title + .plm-lead, .rd-copy-close h2 + .plm-close-loop) { margin-top: clamp(16px, 2.8vh, 28px) !important; }   /* these two measure 6 px tighter at the same margin */

/* Nov 11, line breaks: phrases the browser must not split (pl-steps-k.js). Colour and type inherited. Section headlines
   balance their lines (the hero keeps its own two lines). */
html[data-pl="bp"][data-steps="n"] main.plm data[data-k-nw] { white-space: nowrap !important; color: inherit !important; font: inherit !important; }
html[data-pl="bp"][data-steps="n"] main.plm :is(.section-title, .rd-copy-close h2) { text-wrap: balance !important; }

/* Nov 11, phone headline lines: at 40 px a phone split the hero "Turn what / you know into / what you do next." and the
   HumanOS line "HumanOS / connects / the intelligence". The display tier (hero, HumanOS opening words, close) sets at
   7.8vw on phones (30 px at 390 wide, 28 px at 360), so the hero keeps its two lines and the HumanOS line reads "HumanOS connects /
   the intelligence". Still the largest type on the page. */
@media (max-width: 600px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.rd { --j-display: min(40px, 7.8vw) !important; }
}

/* ===== Nov 11, the site's own system (Brina: "the font sizes that are used on this page differ from what's used
   consistently on other pages ... the home page, the Our Story page, the About page, and the Trust Center ... the explore
   buttons are really close to the copy"). Measured on World Line 2 Light at 1728x1013 (scratchpad roles.mjs):
   - every text role is Manrope on Our Story, About and Trust Center (labels, leads, body, lists), not only headlines;
   - section titles Manrope 500 at -0.05em, line height 1.05; labels Manrope 13 px uppercase at 0.09em, brand blue 600 as
     on Our Story; leads Manrope 400 at 1.55 in #33405c; body Manrope 400 16 px at 1.65 (Trust Center); statements
     Manrope 500 at -0.02em (Our Story);
   - buttons sit about 40 px under their copy (Our Story 44, Trust Center 40); outline buttons 56 px tall, padding 15/20
     (Trust Center); the primary is filled brand blue #195c9f, 64 px (Our Story, About).
   The steps sit in a pinned frame that must fit the screen, so the spacing and button height scale down on short screens. */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd {
  --site-sans: Manrope, Arial, Helvetica, sans-serif; --site-body: InterVar, Inter, system-ui, sans-serif; --site-btn-gap: clamp(24px, 4vh, 40px); --site-btn-pad: clamp(10px, 1.5vh, 15px); }
/* labels */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-hero, .rd-copy-step, .rd-copy-world, .rd-copy-twins) .eyebrow,
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-label :is(.rd-n, .rd-obj) {
  font-family: var(--site-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .09em !important; text-transform: uppercase !important; }
/* titles and display */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-step .section-title, .rd-copy-world .section-title, .rd-copy-twins .section-title) { letter-spacing: -.05em !important; line-height: 1.05 !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-hero h1, .rd-copy-hero h1 span, .rd-copy-close.plm-close-card h2, .rd-copy-close.plm-close-card h2 span) { letter-spacing: -.05em !important; }
/* leads */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-hero .rd-sub, .rd-copy-step .plm-lead, .rd-copy-step .plm-lead span, .rd-copy-world .plm-world-intro, .rd-copy-twins .plm-lead, .rd-copy-close .plm-close-loop, .rd-copy-close .plm-close-loop span) {
  font-family: var(--site-body) !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0 !important; }
/* body */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-body, .rd-copy-step .plm-body :is(p, data), .rd-copy-world .plm-world-close, .rd-copy-twins .plm-body, .rd-copy-twins .plm-body span, .rd-copy-meet > span) {
  font-family: var(--site-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0 !important; }
/* lists */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-hero .plm-beats li, .rd-copy-step .plm-list li, .rd-copy-step .plm-list li b, .rd-copy-world .rd-yours li, .rd-copy-world .rd-yours li span) {
  font-family: var(--site-body) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
/* statements and the ring's step names */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-takeaway, .rd-copy-step .plm-takeaway :is(span, .rd-w), .rd-label .rd-name) { letter-spacing: -.02em !important; }
/* the ring's descriptions */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-label .rd-line { font-family: var(--site-body) !important; }
/* buttons: the site's distance from the copy, Trust Center's outline proportions, Manrope */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-step a.plm-more, .rd-copy-world a.plm-more, .rd-copy-twins a.rd-outline, .rd-copy-meet a.plm-more) {
  margin-top: var(--site-btn-gap) !important; padding: var(--site-btn-pad) 20px !important; height: auto !important; min-height: 0 !important; font-family: var(--site-sans) !important; font-weight: 600 !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-close .plm-close-actions { margin-top: var(--site-btn-gap) !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-close .plm-close-actions a.plm-more { padding: 15px 20px !important; height: auto !important; font-family: var(--site-sans) !important; font-weight: 600 !important; }
/* the primary: filled brand blue, as on Our Story and About */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-close .plm-close-actions a.cta {
  background: #195c9f !important; border-color: #195c9f !important; height: auto !important; padding: 19px 32px !important; font-family: var(--site-sans) !important; font-weight: 600 !important; font-size: 16px !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-close .plm-close-actions a.cta:hover { background: #154d86 !important; border-color: #154d86 !important; }
/* short screens (up to 760 px high) and phones: the pinned panels must fit, so body leading eases to 1.55 and the button
   gap to 20 px (phones 24 px); everything else keeps the site's values */
@media (min-width: 601px) and (max-height: 760px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd { --site-btn-gap: 20px; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-body, .rd-copy-step .plm-body :is(p, data), .rd-copy-world .plm-world-close, .rd-copy-twins .plm-body, .rd-copy-twins .plm-body span) { line-height: 1.55 !important; }
}
@media (max-width: 600px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd { --site-btn-gap: 24px; --site-btn-pad: 10px; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-body, .rd-copy-step .plm-body :is(p, data), .rd-copy-world .plm-world-close, .rd-copy-twins .plm-body, .rd-copy-twins .plm-body span) { line-height: 1.55 !important; }
}
@media (min-width: 601px) and (max-height: 760px) {
  html[data-pl="bp"][data-steps="n"] main.plm[data-rail] { --k-g: clamp(24px, 3.7vh, 60px); }   /* group gap, short screens */
}
@media (max-width: 600px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-lead, .rd-copy-step .plm-lead span) { font-size: 16px !important; line-height: 1.5 !important; }
}
/* the last two Inter labels (the scroll cue and the ring's REPEAT) and one list ink: navy, as Our Story's lists */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-cue, .rd-cue span, svg text.rd-repeat) { font-family: var(--site-body) !important; font-weight: 600 !important; letter-spacing: .09em !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd :is(.rd-copy-hero .plm-beats li, .rd-copy-step .plm-list li, .rd-copy-step .plm-list li b, .rd-copy-world .rd-yours li, .rd-copy-world .rd-yours li span) { color: #0f1d33 !important; }

/* Nov 11, later (Brina: "I thought we were doing Manrope headers and Inter body throughout the whole site"): the brand rule
   stands. Headlines, statements and buttons in Manrope; labels, leads, body, lists and the ring's descriptions in Inter.
   (Our Story, About and Trust Center set their body in Manrope; that drift is on those pages, not the rule.) */

/* Nov 11, later (Brina: "HumanOS connects the intelligence" is "really big ... I would prefer for it to still be on one
   line ... it's the first four words of that sentence"): the opening words take a size between the hero and the rest of
   the sentence, about 1.7 times the rest, and hold one line on every desktop width (they fit up to 58 px at 1416 wide and
   59 px at 1024). Phones keep two lines: one line there would be smaller than the sentence it opens. */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-bridge .rd-br-lead { font-size: clamp(30px, 2.6vw, 44px) !important; line-height: 1.15 !important; letter-spacing: -.035em !important; }
@media (min-width: 601px) { html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-bridge .rd-br-lead { white-space: nowrap !important; } }
@media (max-width: 600px) { html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-bridge .rd-br-lead { font-size: 26px !important; } }

/* Nov 11 (Brina: "every bullet point starts with 'your.' It's so repetitive ... You can just write the actual terms"):
   the globe's list drops the repeated "Your" and each term starts with a capital. The page renders "Your" as its own span,
   so only that span goes; the terms are the page's own words. */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-world .rd-yours li > span:first-child { display: none !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.rd .rd-copy-world .rd-yours li::first-letter { text-transform: uppercase !important; }

/* Version N (Nov 11): K plus the reading-line brief Brina approved ("Build it"). Copy unchanged.
   Diagnosis (design-principles, design-masters; scratchpad journey.mjs at 1728x1013): the reading position jumped section to
   section (hero 109 px, steps and globe 294, twins 1099, the ring's "Meet the system" line alone at 1415 in the bottom-right
   corner); 16 px reading type sat in a 600 px column on a 1728 px stage; each step showed up to five sizes at once.
   1. One reading line: every left-set reading block starts on the header logo's edge (109 px at 1728 wide). Phones and
      narrow windows keep the page's own placement. Where the step rail needs the room (the logo edge sits under 104 px),
      the line is 104 px. The HumanOS paragraph and the close stay centred, the page's two set moments. The twins copy stays
      on the right: the busts are drawn by the scene on the left, and moving them is a scene change, not a layout one.
   2. Type sized to the stage on wide screens, held by the screen height so the pinned steps still fit.
   3. One main read per step: headline, then the lead in navy at the larger reading size; the list and the HumanOS
      paragraph one step quieter (body size, slate ink); the statement at the lead's size closes the step.
   4. The ring's "Meet the system behind Native." line and its button move onto the reading line. */

html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd {
  --n-line: max(104px, calc((100vw - 1510px) / 2));
  /* Nov 11, later (Brina: "the font's still really small"): floors raised so no screen drops back to 16 px body or
     13 px labels; the ring's descriptions get their own size */
  --n-body: clamp(17px, min(1.1vw, 1.9vh), 19px);
  --n-lead: clamp(19px, min(1.27vw, 2.2vh), 22px);
  --n-label: 14px;
  --n-btn: 17px;
  --n-ring: clamp(17px, 1.1vw, 19px);
  --n-quiet: #40536d;
}

@media (min-width: 901px) {
  /* 1. the reading line */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-step, .rd-copy-world) {
    left: var(--n-line) !important; right: auto !important;
    width: min(720px, calc(var(--rd-aside-edge, 900px) - var(--n-line))) !important; max-width: none !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-copy-meet {
    left: var(--n-line) !important; right: auto !important; text-align: left !important; align-items: flex-start !important; }

  /* 2. sizes */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-body, .rd-copy-step .plm-body :is(p, data), .rd-copy-world .plm-world-close, .rd-copy-twins .plm-body, .rd-copy-twins .plm-body span, .rd-copy-meet > span,
      .rd-copy-hero .plm-beats li, .rd-copy-step .plm-list li, .rd-copy-step .plm-list li b, .rd-copy-world .rd-yours li, .rd-copy-world .rd-yours li span) { font-size: var(--n-body) !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-hero .rd-sub, .rd-copy-step .plm-lead, .rd-copy-step .plm-lead span, .rd-copy-world .plm-world-intro, .rd-copy-twins .plm-lead, .rd-copy-close .plm-close-loop, .rd-copy-close .plm-close-loop span) { font-size: var(--n-lead) !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-takeaway, .rd-copy-step .plm-takeaway :is(span, .rd-w)) { font-size: var(--n-lead) !important; line-height: 1.35 !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-hero, .rd-copy-step, .rd-copy-world, .rd-copy-twins) .eyebrow,
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label :is(.rd-n, .rd-obj) { font-size: var(--n-label) !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-step a.plm-more, .rd-copy-world a.plm-more, .rd-copy-twins a.rd-outline, .rd-copy-meet a.plm-more, .rd-copy-close .plm-close-actions a) { font-size: var(--n-btn) !important; }

  /* 3. one main read per step */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-lead, .rd-copy-step .plm-lead span, .rd-copy-world .plm-world-intro, .rd-copy-twins .plm-lead) { color: #0f1d33 !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-body, .rd-copy-step .plm-body :is(p, data), .rd-copy-world .plm-world-close, .rd-copy-twins .plm-body, .rd-copy-twins .plm-body span,
      .rd-copy-step .plm-list li, .rd-copy-step .plm-list li b, .rd-copy-world .rd-yours li, .rd-copy-world .rd-yours li span) { color: var(--n-quiet) !important; }
}
/* the ring's line and its button read as one unit: the button sits 16 px under the line, as in the steps' closing group */
@media (min-width: 901px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-copy-meet a.plm-more { margin-top: 16px !important; }
}
/* the globe's list hangs its bullets outside the reading line, as the steps' lists do, so every line of text starts on it */
@media (min-width: 901px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-copy-world .rd-yours { margin-left: -20px !important; }
}

/* copy pass: a list that became a sentence reads as a paragraph (no bullet, no indent); its switched-off items take no room */
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.plm-list, .plm-beats)[data-n-para] { display: block !important; padding: 0 !important; margin-left: 0 !important; list-style: none !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.plm-list, .plm-beats)[data-n-para] > li { padding-left: 0 !important; margin: 0 !important; display: block !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.plm-list, .plm-beats)[data-n-para] > li::before { display: none !important; content: none !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.plm-list, .plm-beats)[data-n-para] > li[data-n-off] { display: none !important; }
html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-copy-step :is(.plm-list)[data-n-para] > li { line-height: 1.6 !important; }
/* the rewritten statements' phrase groups (pl-steps-n.js) hold together; on phones the forced line break gives way */
html[data-pl="bp"][data-steps="n"] main.plm .plm-takeaway data[data-k-nw] { white-space: nowrap !important; color: inherit !important; }
@media (max-width: 600px) { html[data-pl="bp"][data-steps="n"] main.plm .plm-takeaway br[data-n-br] { display: none !important; } }
/* fit after the copy pass: Validate's statement is a line longer and Activate's HumanOS paragraph a sentence longer.
   Short screens: statements set a touch tighter. Phones: statements at 17 px and phrase groups free to wrap, body at 1.5 */
@media (min-width: 901px) and (max-height: 760px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-takeaway, .rd-copy-step .plm-takeaway :is(span, .rd-w)) { line-height: 1.26 !important; }
}
@media (max-width: 600px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-step .plm-takeaway, .rd-copy-step .plm-takeaway :is(span, .rd-w)) { font-size: 17px !important; line-height: 1.3 !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-copy-step :is(.plm-body, .plm-body :is(p, data)) { line-height: 1.5 !important; }
}
html[data-pl="bp"][data-steps="n"] main.plm ul[data-n-split] { display: none !important; }
@media (max-width: 600px) { html[data-pl="bp"][data-steps="n"] main.plm ul[data-n-split] { display: block !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } }

/* Nov 11: Validate keeps a closing line (Brina picked option 2 from ten, "data" for "research"); see pl-steps-n.js */

/* the opening's depth: the light pages' hero glow and blueprint grid (values copied from About's .page-hero) */
html[data-pl="bp"][data-steps="n"] main.plm .rd-stage > [data-n-hero] {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 72% 20%, #e3ecf8 0%, #ebf1f9 38%, #f2f5fa 70%, #f7f8fa 100%); }
html[data-pl="bp"][data-steps="n"] main.plm .rd-stage > [data-n-hero]::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(25, 92, 159, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 92, 159, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 75% at 70% 10%, #000 0%, transparent 72%); mask-image: radial-gradient(70% 75% at 70% 10%, #000 0%, transparent 72%); }
html[data-pl="bp"][data-steps="n"] main.plm .rd-stage > [data-n-hero] {
  -webkit-mask-image: linear-gradient(#000 calc(var(--n-seam, 100vh) - 170px), transparent var(--n-seam, 100vh));
  mask-image: linear-gradient(#000 calc(var(--n-seam, 100vh) - 170px), transparent var(--n-seam, 100vh)); }

/* Nov 11, later: the ring stop and the small labels at the site scale. The ring's step descriptions read at 17 to 19 px
   (were 16), numbers, captions, REPEAT and the scroll cue at 14 px (were 13). */
@media (min-width: 901px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label .rd-line,
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label .rd-line * { font-size: var(--n-ring) !important; line-height: 1.45 !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label :is(.rd-n, .rd-obj),
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-cue, .rd-cue span) { font-size: 14px !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd svg text.rd-repeat { font-size: 14px !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd :is(.rd-copy-meet > span) { font-size: var(--n-body) !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-copy-close .plm-close-actions :is(a, a *) { font-size: 17px !important; }
}
/* the ring's step names stay a clear step above their descriptions now the descriptions are larger */
@media (min-width: 901px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label:not([data-tracker]) .rd-name { font-size: clamp(22px, 1.4vw, 26px) !important; }
}
/* short screens: the larger ring labels ran 3 px into the header at 1416x658; tighter leading and tier spacing there keep
   the sizes and clear the header */
@media (min-width: 901px) and (max-height: 760px) {
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label .rd-line,
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label .rd-line * { line-height: 1.28 !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label:not([data-tracker]) :is(.rd-n, .rd-obj, .rd-name) { line-height: 1.12 !important; }
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-label:not([data-tracker]) .rd-line { margin-top: 4px !important; }
}
@media (min-width: 901px) and (max-height: 700px) {
  /* the top label (Transform) moves 14 px into the open space above the circle, clear of the header */
  html[data-pl="bp"][data-steps="n"][data-pl] body main.plm.plm.plm.plm.plm.rd .rd-overlay .rd-label[data-i="0"]:not([data-tracker]) { translate: 0 14px !important; }
}

/* Nov 11, font rule across the site (Manrope for headlines, display statements and buttons, Inter for anything read as a
   sentence or a label): the ring's caption list and the plain step list behind the ring still came through in Manrope */
html[data-pl="bp"][data-steps="n"] main.plm :is(.rd-loopcap p, .rd-plain-steps li, .rd-plain-steps li span) { font-family: InterVar, Inter, system-ui, sans-serif !important; }

/* Guide link in Transform's first line (Brina, 12 Nov 2026): a thin quiet underline in the text's own colour */
html[data-pl="bp"][data-steps="n"] main a.pl-guide{color:inherit!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent);pointer-events:auto}
html[data-pl="bp"][data-steps="n"] main a.pl-guide:hover,html[data-pl="bp"][data-steps="n"] main a.pl-guide:focus-visible{text-decoration-color:currentColor}

/* World Line 2 Light: light header menus on every light page (Nov 11) */
/* Header menus on the light pages (Brina, Nov 11: "the dropdowns for all of the things in the menu at the navigation bar,
   they're all black"). The light pages turn the header light and its links navy, but the dropdown panels kept the site's
   near-black #141510, so the menus read navy on black. The phone sheet stayed black too. Both now follow the homepage's own
   light menus (World Line 2 landing, its .hs-wrap rules): near-white panel, faint navy border, one soft navy shadow, slate
   links that turn navy on hover, and the #f7f8fa phone sheet with navy links and thin rules.
   Scope: the pages whose header these light stylesheets make light. Use Cases (main.tj-photo), the telecom case study
   (main.cs-page.csx), the About pages (html[data-ltb], set by the boot script on /about routes). */
html[data-wl2l-rv][data-wl2l-rv] .site-header .nav-group:is(:hover, :focus-within) .nav-menu {
  background: rgba(251, 252, 253, .97) !important;
  border-color: rgba(15, 29, 51, .08) !important;
  box-shadow: 0 18px 40px -16px rgba(15, 29, 51, .16) !important;
}
html[data-wl2l-rv][data-wl2l-rv] .site-header .nav-menu a { color: #40536d !important; }
html[data-wl2l-rv][data-wl2l-rv] .site-header .nav-menu a:is(:hover, :focus-visible) { color: #0f1d33 !important; }

/* phone sheet */
html[data-wl2l-rv][data-wl2l-rv] .site-header .mobile-menu {
  background: #f7f8fa !important;
  border-top-color: rgba(15, 29, 51, .10) !important;
  color: #0f1d33 !important;
}
html[data-wl2l-rv][data-wl2l-rv] .site-header .mobile-menu a { color: #0f1d33 !important; border-bottom-color: rgba(15, 29, 51, .10) !important; }
html[data-wl2l-rv][data-wl2l-rv] .site-header .mobile-menu .mobile-group { border-bottom-color: rgba(15, 29, 51, .10) !important; }
html[data-wl2l-rv][data-wl2l-rv] .site-header .mobile-menu .mobile-group ul a { color: #40536d !important; }

/* Use Cases and telecom give the header a frosted blur, and a blurred element becomes the box a fixed child is sized
   against, so the full-screen phone sheet was cut to a 36px strip under the header. The site already turns the blur off
   while the menu is open on Platform; same here. */
html[data-wl2l-rv][data-wl2l-rv] .site-header:has(.menu-toggle[aria-expanded=true]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* World Line 2 Light: Platform footer, light look without the reveal */
html[data-wl2l-rv="pl"][data-wl2l-rv] body > main{position:static;z-index:auto;box-shadow:none}
html[data-wl2l-rv="pl"][data-wl2l-rv] body > .site-footer.site-footer.site-footer{position:relative;z-index:5}
/* World Line 2 Light: type scale gate (Nov 11) */
html:not([data-ts-ready]) body > main{visibility:hidden}