/* ds-restyle.css — BAI Design System restyle layer. Loads last. Visual only: no text or asset changes.
   Source of truth: colors_and_type.css (DS). */
/* ── Layout: fluid, proportional to the DS (1312 content + 64 gutters at 1440) ── */
:root{--font:var(--font-body);--mono:var(--font-body);--ls-display:-0.03em;--ls-heading:var(--ls-tight);
--content-max:2480px;--wrap-pad:max(20px,4.4445vw);--gutter:max(20px,4.4445vw,calc(50vw - var(--content-max) / 2 + 4.4445vw));
--section-y:var(--padding-section-medium);--section-y-tight:var(--padding-section-small);--ds-section-gap:var(--padding-section-medium);--sub-gap:var(--padding-section-large);
--card-radius:var(--radius-xl)}
@media (max-width:768px){:root{--section-y:var(--padding-section-small);--ds-section-gap:var(--padding-section-small);--sub-gap:var(--padding-section-small)}}
.wrap{padding-inline:var(--wrap-pad)}
/* ── Type: Post Grotesk only; tabular figures for data ── */
body{font-family:var(--font-body);font-size:var(--text-body-m);line-height:var(--text-body-lh)}
code,pre,kbd,samp,.mono,[class*="hex"],[class*="spec"] dd,.px{font-family:var(--font-body);font-variant-numeric:tabular-nums}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--fw-medium);line-height:1;letter-spacing:var(--ls-tight)}
strong,b{font-weight:var(--fw-medium)}
/* display: cover = Display 1, chapter openers = Display 2 (fluid at the same ratio as the column) */
.cover-head{font-size:clamp(72px,10vw,216px);line-height:var(--text-display-1-lh)!important;letter-spacing:var(--ls-display)!important}
.chapter-hero h2{font-size:clamp(64px,7.7778vw,168px);line-height:var(--text-display-2-lh)!important;letter-spacing:var(--ls-display)!important;font-weight:var(--fw-medium)}
#introduction .chapter-hero h2{font-size:clamp(56px,6.1111vw,132px);line-height:var(--text-display-3-lh)!important}
button,input,select,textarea{font-family:var(--font-body)}
.dt-tag.bad{color:var(--color-magenta-dark)}
/* heading-like classes that used ad-hoc tracking */
:is(.sub-head h2,
.section-head h2,
.sub-title h3,
.sub-title h4,
.tov-card .title,
.arch-name,
.dt-head,
.sb-story,
.ch-lead,
.mv-statement,
.cn-title,
.pr-panel h3,
.ia-title,
.ia-sub,
.alt-meta .alt-name,
.value-card .vc-name,
.layer-block .lb-label h3,
.combo .big,
.story-layer .num .big,
.expression-card h4,
.swatch .name,
.vk-name,
.ac-t,
.card h4,
.photo-principle .pp-statement,
.contents li a,
.contents li span){letter-spacing:var(--ls-tight);font-weight:var(--fw-medium)}
/* ── Surfaces: flat. The spotlight (cover, chapter openers) and specimen glows stay. ── */
#introduction{background:none}
.color-story{background:var(--color-white)}
.nav-fab,.nav-fab:hover{background:color-mix(in oklch,var(--color-neutral-darkest) 85%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:none;border-color:transparent;border-radius:var(--radius-m)}
.sidenav{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:none;background:color-mix(in oklch,var(--color-neutral-darkest) 85%,transparent)!important}
.corner-label{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-neutral-darkest);color:var(--color-white);border-radius:var(--radius-xs)}
/* ── Cards: DS light card. Content padding from the DS scale. ── */
.callout{padding:var(--content-padding-regular)}
#type .tg-frame{padding:var(--content-padding-medium)}
#type .oa-callout{padding:var(--content-padding-large)}
#type .oa-case{padding:var(--content-padding-medium)}
/* full-width panels: radius 30 */
.type-hero,#type .tg-frame,#type .oa-callout,.mo-hero,.deck-motion.dm-show>.dm-clip,.dm-clip:has(video[src*="logo-spotlight"]){border-radius:var(--radius-xxl)}
/* ── Icons: Material Symbols Outlined, weight 300 ── */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}
#logo .dont .preview{container-type:inline-size}
#logo .donts:not(.dos)>.dont:nth-child(-n+6) .preview{padding:0!important}
#logo .donts:not(.dos)>.dont:nth-child(-n+3) .preview>img{width:72cqw;height:auto;max-width:none;max-height:none}
#logo .donts:not(.dos)>.dont:nth-child(4) .preview>span{width:72cqw!important}
#logo .donts:not(.dos)>.dont:nth-child(5) .preview{gap:0!important;justify-content:center!important}
#logo .donts:not(.dos)>.dont:nth-child(5) .preview>*{flex:none!important;width:auto!important}
#logo .donts:not(.dos)>.dont:nth-child(5) .preview>img{margin-right:4cqw}
#logo .donts:not(.dos)>.dont:nth-child(5) .preview img[src*="symbol"]{height:14cqw!important}
#logo .donts:not(.dos)>.dont:nth-child(5) .preview span[style*="Georgia"]{font-size:8.5cqw!important}
#logo .donts:not(.dos)>.dont:nth-child(6) .preview>span{font-size:5.6cqw!important;max-width:64cqw!important}
#logo .donts:not(.dos)>.dont:nth-child(6) .preview>span img{height:.78em!important}
.dont .label{text-transform:none;letter-spacing:0;font-size:var(--text-body-s);line-height:1.5;font-weight:var(--fw-book)}
.dont .label .x,.icon.no,.icon.yes{font-size:20px;line-height:1;vertical-align:-4px}
.cn-arrow.material-symbols-outlined{font-size:24px}
/* ── DS button on existing links ── */
.dl-pill{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--fw-medium);border-radius:var(--radius-s);background:var(--color-blue-accent);border-color:var(--color-blue-accent);color:var(--color-neutral-darkest);text-decoration:none;transition:background .2s ease}
.dl-pill:hover{background:var(--color-blue-light);border-color:var(--color-blue-light)}
.dl-pill:active{transform:scale(.98)}

/* ── Labels and eyebrows: Book 400, 11–12px, uppercase, 0.12em ── */
.sidenav .label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.eyebrow{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.cover-top{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.cover-bottom{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.ring .ring-label .role{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.ring .ring-label .rank{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.ring-center .sub{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.story-layer .num{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.logo-stage .corner-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.clearspace .marker{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.minsize .cell .px{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.swatch .role{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.palette-col h5{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.palette-col .step .name{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.type-specimen .meta{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.type-row .tag{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.weight .name{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.icon-cell .name{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.archetype-stage .stage-eyebrow{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.archetype-art .frame-caption{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.expression-card .ex-tag{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.archetype-rules .rule .head{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.layer-block .lb-label .num{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.photo-frame .caption .role{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.cinematic-frame .cf-tag{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.cinematic-frame .cf-footer{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.product-mock .pm-chrome{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.product-mock .pm-pill{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.product-mock .pm-caption{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.role-slot .rs-num{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.role-slot .rs-bottom .role{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.app-card .badge{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.app-card .footer{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.footer h5{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.footer-bottom{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.alt-meta .alt-tag{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.alt-bottom .lbl{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}

.compass-row .cmp-label .num{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.value-card .vc-num{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.persona-card .ptag{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.persona-card .ptrait{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.gradient-legend{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.chapter-hero .ch-eyebrow{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.mv-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.st-eyebrow{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.cx-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.tp-eyebrow{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.ps-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.dd-tag{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.co-kicker{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.rail-title{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.fab-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.copy-hex-sm{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.sh-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.ct-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.v-name{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.vk-when{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.n-name{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.wr-ui .wr-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.cn-dir{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.tc-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.ts-meta{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.ts-glyphs.is-label{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.dt-facts span,.dt-facts b{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.dt-tag{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.sc-crumb{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.as-badge{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.st-headrow{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.vd-l{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:2.6px}
.vd-when{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.vd-t{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:2.3px}
.vd-ov-mix{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.gv-glabel{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.gv-tags{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.bd-kicker{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.bd-edited{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.bd-tabs-q{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.bd-pick-hex{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}










.spot-meta .role{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.ad-when{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.ad-head{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.lit-frame .cap .d{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.range-hero .rh-cap .tag{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.range-card .rc-corner{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.range-card .rc-meta .a{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.slide-cap .role{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.slide-fpo .rs-num{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
.slide-fpo .rs-bottom .role{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em;font-size:11px}
#color .a11y span{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
#color .pair-meta{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}
.ldm-eb{font-family:var(--font-body);font-weight:var(--fw-book);letter-spacing:.12em}

/* ── No 600 or 800: Medium 500 ── */
.tov-card .example .yes,
.cs-label-x,
.dont .label .x,
.co-text strong,
.story-c[data-active="brand"] .sc-crumb [data-layer="brand"],
.story-c[data-active="product"] .sc-crumb [data-layer="product"],
.story-c[data-active="content"] .sc-crumb [data-layer="content"],
strong,
b,
.bd-dd-opt.is-on,
.bd-tip strong,
.bd .bd-out .bd-count.is-over{font-weight:var(--fw-medium)}

/* ── Shadow: flat; resting cards xxsmall; floating UI large ── */
.nav-fab,
.nav-fab:hover,
.sidenav,
.ring.inner,
.rings-wrap::after,
.alt-meter .marker,
.co-prompts .copy-block .copy-btn,
.bd-samp-cv,
.copy-block .copy-btn,
#archetype .sage-pill{box-shadow:none}
.rule-card,.bd{box-shadow:var(--shadow-xxsmall)}
.copy-hex,
.ux-modal,
.vd-tip,
.bd-dd-list,
.bd-popout::after,
.bd-dd::after,
.top-fab,
.top-fab:hover{box-shadow:var(--shadow-large)}

/* ── Radius on the DS scale (30/18/12/8/6/4) ── */
.cs-box,
.ps-item,
.story-c .vk-item:focus-visible,
.csd-box,
.bd-frame svg{border-radius:var(--radius-xs)}
.nav-toggle,
.sidenav nav a,
.sidenav.collapsed nav a::after,
.res-bar,
.wr-ui,
html body .gv-pill,html body .dl-pill,html body .copy-block .copy-btn,html body .bd .bd-real .copy-block .copy-btn,
.bd-open,
.bd-select,
.bd-remix,
.bd-popout,
.bd-tab:focus-visible,
.bd-dest-b,
.bd-btn,
.bd-dd-btn,
.bd-dd-opt,
.bd-popout::after,
.bd-dd::after,
.bd .bd-real .copy-block .copy-btn,
.bd-samp-cv,
.bd-samp-sw,
.bd-pick-hex,.bd-pick-v,
.bd-samp-nat,
.bd-samp-nat::-webkit-color-swatch,
.bd-samp-nat::-moz-color-swatch,
.bd-samp-x,
.bd-frame .bd-frame-i,
.ldm-seg button,
.ldm-handle:focus-visible,
.ldm-nav span:last-child{border-radius:var(--radius-s)}
.dd,
.callout,
.wr-tofu,
.wr-spot,
.pr-img,
.bd-hint,
.bd .gv-chip.bd-frame,
.bd-dest,
.bd-dd-list,
.rp-thumb,
.bd .bd-real .rp-thumb,
.ldm-card i{border-radius:var(--radius-m)}
.product-mock .pm-body,
body:has(.chapter-rail.show) .nav-fab,
.aud-card img,
.aud-card .ac-frame,
.arch-refs img,
.ldm-vp{border-radius:var(--radius-m)}
.nav-fab,
.sidenav,
.palette-col .ramp,
.weight,
.icon-cell,
.alt-meter,
.ill-frame,
.top-fab,
body:has(.chapter-rail.show):has(.sidenav:not(.collapsed)) .nav-fab,
#logo .dont .preview,
.gv-card,
.am-tile,
.pr-split .pr-img,
.rule-card,
.rule-card .pr-img,
.dm-clip img,.dm-clip video,
.co-visual .co-grid,
.mr-media,
.co-pair-img img,
.co-pair-fpo,
.co-crop-laptop,
.mp-stage,
.bd-samp-box,
.bd .bd-real .copy-block pre,
.deck-motion.dm-show:not(.dm-row2):not(.dm-row3)>.dm-clip,
.dm-clip:has(video[src*="logo-spotlight"]),
.ad-card,
.copy-block,
#type .oa-case,
#color .usage-media,
#color .pair,
#color .wm-grid .logo-stage,
#color .mini-slide,
#color .sys-neutral .sys-item:first-child .sys-dot,
.ldm-card{border-radius:var(--radius-l)}
.df-photo,
.slide-fpo{border-radius:var(--radius-l)}
.minsize .cell,
.combo,
.cat-card,
.lit-frame,
.range-card .rc-frame{border-radius:var(--radius-xl)}
.tov-card,
.dont,
.photo-frame,
.cinematic-frame,
.product-mock,
.role-slot,
.value-card,
.ux-stage,
.ux-modal,
.tone-card,
.vd-tip,
.ux-shot,
.icons-grid,
.bd,
.pr-card,
.mo-hero,
#type .tg-frame{border-radius:var(--radius-xl)}
.swatch .role{border-radius:var(--radius-xl)}
.archetype-art,
.expression-card,
.altitude-card,
.color-story,
.persona-card,
.range-hero{border-radius:var(--radius-xl)}
.logo-stage,
.anatomy-panel,
.app-card{border-radius:var(--radius-xl)}
.type-specimen,
.archetype-stage{border-radius:var(--radius-xxl)}

/* ── Blue text: #007EAD on light, #00B9FF on dark ── */
.cover-title .h-display .punct,
.story-layer .num,
.story-layer .body em.accent,
.tov-card .num,
.cs-label-x,
.palette-col .step .star,
.layer-block .lb-label .num,
.layer-block .lb-label .quote em,
.compass-row .cmp-label .num,
.compass-row .cmp-statement em,
.value-card .vc-num,
.pr-num,
.mv-label,
.mv em,
.cx-label,
.vr-head .material-symbols-outlined,
.vr-num,
.vr-icon,
.tp-eyebrow span,
.tp-body em,
.dd.do .dd-tag,
.callout.do .co-icon,
.callout.do .co-kicker,
.rail-title,
.ch-index a:hover,
.vk-when,
#type .sub-title h3,
#type .type-row .tag,
#type code,
.dt-facts b,
.dt-tag.ok,
.gv-prompt,
.mp-emotion,
.mp-purpose,
.photo-principle .pp-statement em,
.range-card .rc-meta .a,
.slide-cap .role{color:var(--color-link)}
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .cover-title .h-display .punct,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .story-layer .num,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .story-layer .body em.accent,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .tov-card .num,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .cs-label-x,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .palette-col .step .star,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .layer-block .lb-label .num,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .layer-block .lb-label .quote em,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .compass-row .cmp-label .num,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .compass-row .cmp-statement em,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .value-card .vc-num,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .pr-num,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .mv-label,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .mv em,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .cx-label,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .vr-head .material-symbols-outlined,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .vr-num,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .vr-icon,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .tp-eyebrow span,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .tp-body em,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .dd.do .dd-tag,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .callout.do .co-icon,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .callout.do .co-kicker,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .rail-title,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .ch-index a:hover,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .vk-when,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) #type .sub-title h3,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) #type .type-row .tag,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) #type code,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .dt-facts b,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .dt-tag.ok,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .gv-prompt,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .mp-emotion,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .mp-purpose,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .photo-principle .pp-statement em,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .range-card .rc-meta .a,
:is(.chapter-hero,.cover,.footer,.bu-band,.sidenav,#practice,.ctx-dark,.th-c,.bd,.dark-panel,.icon-panel,[data-ground="dark"]) .slide-cap .role{color:var(--color-link-on-dark)}

/* ── Brand in use: fully Deepest Blue ── */
body.subpage:has(#practice){background:var(--color-neutral-darkest)}
#practice.section,#practice{background:var(--color-neutral-darkest)!important;color:var(--color-white)}
#practice :is(h2,h3,h4,.sub-title h3,.sh-label,.as-badge,figcaption,figcaption span){color:var(--color-white)}
#practice :is(.lede,.st-rule,p){color:var(--color-neutral-lighter)}
#practice .sub-title,#practice .section-head,#practice .wrap>*{border-color:var(--opacity-white-20)}
#practice .bu-frame{background:var(--color-neutral-darker)}
body.subpage:has(#practice) .chapter-nav{background:var(--color-neutral-darkest);border-top-color:var(--opacity-white-20)}
body.subpage:has(#practice) .chapter-nav .cn-cell+.cn-cell{border-left-color:var(--opacity-white-20)}
body.subpage:has(#practice) .chapter-nav :is(.cn-dir,.cn-num,.cn-arrow,.cn-title){color:var(--color-white)}
body.subpage:has(#practice) .chapter-nav .cn-cell:hover :is(.cn-dir,.cn-num,.cn-arrow,.cn-title),body.subpage:has(#practice) .chapter-nav .cn-cell:focus-visible :is(.cn-dir,.cn-num,.cn-arrow,.cn-title){color:var(--color-neutral-darkest)}

/* ── DS audit fixes ── */
.footer h5{font-family:var(--font-heading)!important;font-weight:var(--fw-medium)!important;font-size:var(--text-body-m)!important;letter-spacing:var(--ls-tight)!important;text-transform:none!important;line-height:1!important;color:var(--color-white)}
.footer-bottom,.footer-bottom span{color:var(--color-neutral-lighter)!important}
.vr-num{color:var(--color-neutral-darkest)}
.vd-when,.dt-tag{text-transform:none;letter-spacing:0;font-size:var(--text-body-s);line-height:1.5}
.logo-stage.dark,.bd,.ratio-fill{box-shadow:none!important}
.bd-var{border-radius:var(--radius-xs)}
#logo .logo-stage .corner-label,#logo .logo-stage.dark .corner-label{color:var(--color-white)!important}
.top-fab,.nav-fab{backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
.bd .bd-out .bd-count.is-over{font-weight:var(--fw-medium)}

/* ── No grey key lines: separation comes from color and contrast ── */
.sidenav,.nav-tool,.value-row,.tg-specs>div,.type-row,.th-labels,.cn-cell,.top-fab,.ill-rule,.bd-head,.bd-tabs,.example,.tc-row,.vd-item,
.anatomy-panel,.dont,.tov-card,.tone-card,.callout,.words-callout,.vd-tip,.dt-case,.oa-case,.type-hero,.tg-frame,.ldm-card,.vr-card,.ly-frame,.ly-card,.color-story,.pr-card,.ill-frame,.copy-block,.bd-dest,.wr-spot,.wr-ui,.wr-mini{border:0!important}
.logo-stage,.dont .preview,#logo .dont .preview,.sys-dot,.pair,.mini-slide,.ldm-vp,.minsize .cell{box-shadow:none!important;border:0!important}
#color .dont,#color .color-story,.ldm-card,.vr-card{background:var(--color-neutral-lightest)!important}

.ratio-seg::before{content:none!important;display:none!important}
#color .pair:first-child{background:var(--color-white)!important;box-shadow:inset 0 0 0 1px var(--color-neutral-lightest)!important}
/* Do cards: same card as the don'ts, with a correct example */
#logo .dos .preview{container-type:inline-size}
#logo .do-rules .dont:first-child .preview>img{width:60cqw;height:auto;max-width:none;max-height:none}
#logo .dos .dont .label{min-height:calc(2 * 1.5em + 4px)}
.dont.do .label .x{color:var(--color-green-ink)!important;background:none!important;border:0!important}
#logo .do-slide{position:relative;width:78%;aspect-ratio:16/9;background:var(--color-white);border-radius:var(--radius-s);border:1px solid var(--color-neutral-lighter)}
#logo .ds-margin{position:absolute;inset:9% 6%;border:1px dashed var(--color-neutral-light);display:grid;grid-template-columns:repeat(3,1fr)}
#logo .ds-margin span{border-right:1px dashed var(--color-neutral-light)}
#logo .do-slide img{position:absolute;left:9%;bottom:14%;width:14%!important;height:auto;max-width:none!important;max-height:none!important}
/* Logo page: examples sit straight on the grid, no cards (DS tokens only) */
#logo .donts{column-gap:var(--space-8)!important;row-gap:var(--space-16)!important}
#logo .donts .dont{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;gap:var(--space-4)!important}
#logo .donts .dont .preview{background-color:var(--color-white);box-shadow:none!important;border-radius:var(--radius-l);aspect-ratio:2/1!important;flex:none!important}
#logo .spec-grid{align-items:stretch}
#logo .donts .spec-wide .preview{aspect-ratio:auto!important;flex:1 1 auto!important;min-height:0}
#logo .donts .dont .label{padding:0!important;min-height:0!important;font-size:var(--text-body-s);color:var(--color-neutral-dark)}
#logo .donts:not(.dos)>.dont:nth-child(8) .preview{box-shadow:none!important}
#logo .donts:not(.dos)>.dont:nth-child(8) .preview img{width:84cqw!important}
/* Logo page: every sub-section is a 3-column card grid */
#logo .spec-wide{grid-column:span 2}
@media (max-width:760px){#logo .spec-wide{grid-column:auto}}
#logo .spec-wide .csd-mark{--x:min(44px,6.5cqw)!important}
#logo .spec-grid .dont:not(.spec-wide) .csd-mark{--x:min(40px,13cqw)!important}
#logo .spec-grid .preview{flex:1 1 auto!important;min-height:0}
#logo .spec-wide .preview{aspect-ratio:auto!important}
#logo .do-tile{display:grid;place-items:center;width:28cqw;aspect-ratio:1;background:var(--color-white);border-radius:var(--radius-l)}
#logo .do-tile img{width:42%!important;height:auto;max-width:none!important;max-height:none!important}
.chapter-hero:has(+.ch-intro-wrap){margin-bottom:0!important}
.ch-intro-wrap{padding-top:var(--padding-section-small)}
.ch-intro-wrap>*{margin-top:0!important;margin-bottom:0!important}
.ch-intro-wrap .lede{font-weight:var(--fw-book,400)}
.ch-intro-wrap+.wrap .ch-subnav{margin-top:var(--padding-section-medium)!important;padding-top:var(--padding-section-medium)!important;border-top:1px solid color-mix(in srgb,currentColor 15%,transparent)!important;padding-bottom:0!important;border-bottom:0!important}
.ch-intro-wrap+.wrap{margin-bottom:var(--padding-section-medium)}
.ch-intro-wrap+.wrap+.wrap>.ch-lead:first-child,.ch-intro-wrap+.wrap+.wrap>:first-child{margin-top:0!important}
/* Logo page: wordmark and symbol share the row 50/50 */
#logo .logo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8);row-gap:var(--space-16)}
#logo .lp-col{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:var(--space-6);align-content:start}
#color .color-block{margin-top:var(--sub-gap)!important;padding-top:var(--sub-gap)!important;border-top:1px solid color-mix(in oklch,currentColor 14%,transparent)!important}#color .wrap>.color-block:first-child{margin-top:0!important}#color .color-block .sub-title{border-top:none!important;padding-top:0!important}
#logo .spec-grid .preview :not(.csd-mark)>img[src*="symbol"]{height:16px!important;width:auto!important}
#logo .logo-pair .sub-title{margin:0!important;padding-top:var(--sub-gap)!important;border-top:1px solid color-mix(in oklch,currentColor 16%,transparent)!important}
#logo .lp-body{margin:0;max-width:70ch;font-size:var(--text-body-m);line-height:var(--text-body-lh);color:var(--color-neutral-dark);text-wrap:pretty}
#logo .lp-stage{aspect-ratio:4/3!important;border-radius:var(--radius-xl)!important;container-type:inline-size;display:grid;place-items:center;margin:0!important}
#logo .lp-wordmark{width:60cqw!important;height:auto!important;max-width:none!important;max-height:none!important}
#logo .lp-symbol{height:auto!important;width:20cqw!important;max-width:none!important;max-height:none!important}
@media (max-width:760px){#logo .logo-pair{grid-template-columns:minmax(0,1fr)}#logo .lp-col{grid-row:auto;grid-template-rows:none}}
/* Art direction: "Product in the light" keeps one crop at every width */
.pr-img.pr-crop-light{position:relative;aspect-ratio:1203/910!important;height:auto!important;overflow:hidden}
.pr-img.pr-crop-light img{position:absolute!important;left:-21.3%!important;top:-13%!important;width:159%!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:fill!important;transform:none!important}
/* Brand in use: a captionless mosaic gallery */
#brand-in-use .bu-grid,.bu-grid{row-gap:32px!important;column-gap:32px!important}
.bu-heroes,.bu-band-row{gap:32px!important}
.bu-item{margin:0!important;gap:0!important}
.bu-item figcaption,.bu-item .bu-cap{display:none!important}

#logo .do-profile{position:relative;display:flex;flex-direction:column;width:62cqw;aspect-ratio:4/3;background:var(--color-white);border:1px solid var(--color-neutral-lighter);border-radius:var(--radius-m);overflow:hidden;padding:0 0 6cqw}
#logo .dp-cover{height:16cqw;background:var(--color-neutral-lightest)}
#logo .dp-avatar{display:grid;place-items:center;width:15cqw;aspect-ratio:1;margin:-7.5cqw 0 0 5cqw;border-radius:50%;background:var(--color-white);box-shadow:0 0 0 1.2cqw var(--color-white),0 0 0 calc(1.2cqw + 1px) var(--color-neutral-lighter)}
#logo .dp-avatar img{width:42%!important;height:auto!important;max-width:none!important;max-height:none!important}
#logo .dp-bar{display:block;height:2.2cqw;border-radius:var(--radius-xs);background:var(--color-neutral-lightest)}
#logo .dp-name{width:40%;margin:3.5cqw 0 0 5cqw;background:var(--color-neutral-lighter)}
#logo .dp-handle{width:26%;margin:2cqw 0 0 5cqw}
#logo .dp-row{display:flex;gap:2.4cqw;margin:auto 5cqw 0}#logo .dp-row .dp-bar{flex:1}

/* clearspace: the mark box is exactly the b, so 1 x = b height on all 4 sides */
#logo .csd-mark{height:var(--x)}
#logo .dont .preview .csd-mark img[src*="logo"]{height:calc(var(--x) * 1.0219)!important;margin-top:calc(var(--x) * -0.0213)}
#logo .dont .preview .csd-mark img[src*="symbol"]{width:auto!important;height:calc(var(--x) * 1.0676)!important;margin-top:calc(var(--x) * -0.0482)}

/* Show an arc: sampled ground per the prompt builder (30deg analogous to the hero red, deep end, 80% ground + 2 lighter lights) */
#photography .pr-img.arc-grid{--arc-g:oklch(0.22 0.09 0);--arc-l:oklch(0.42 0.14 0);background:radial-gradient(60% 55% at 12% 8%,var(--arc-l),transparent 70%),radial-gradient(55% 50% at 92% 96%,var(--arc-l),transparent 70%),var(--arc-g);perspective:700px;perspective-origin:50% 100%;overflow:hidden}
#photography .arc-tilt{position:absolute;left:-24%;right:-24%;top:50%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:dense;gap:2.4%;transform:translateY(-58%) rotateX(24deg) scale(1.5);transform-origin:50% 100%}
#photography .arc-tilt>img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-xs);box-shadow:var(--shadow-large);max-width:none!important;position:static!important;transform:none!important;filter:blur(1.6px)}
#photography .arc-tilt>img:first-child{grid-area:2/3/3/4;position:relative!important;z-index:2;transform:scale(1.72)!important;filter:none;box-shadow:var(--shadow-xlarge)}

#photography .pr-img.persp-zoom{perspective:900px;overflow:hidden}
#photography .pr-img.persp-zoom>img{position:absolute!important;left:-56.9%!important;top:-20.3%!important;width:160%!important;height:auto!important;max-width:none!important;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-m);box-shadow:var(--shadow-xlarge);transform:rotateY(-22deg) rotateX(10deg) rotateZ(-2deg)!important;transform-origin:66.8% 52.1%}

#photography .arc-tilt>img[src*="arc-2-summary"]{grid-area:1/1}#photography .arc-tilt>img[src*="arc-6-impact"]{grid-area:1/2}#photography .arc-tilt>img[src*="arc-7-response"]{grid-area:1/3}#photography .arc-tilt>img[src*="arc-9-plan"]{grid-area:1/4}#photography .arc-tilt>img[src*="arc-3-timeline"]{grid-area:1/5}#photography .arc-tilt>img[src*="arc-5-takeaways"]{grid-area:2/1}#photography .arc-tilt>img[src*="arc-8-closing"]{grid-area:2/2}#photography .arc-tilt>img[src*="arc-4-status"]{grid-area:2/4}#photography .arc-tilt>img[src*="arc-10-stakeholders"]{grid-area:2/5}

#photography .pr-img.arc-grid::after,#photography .pr-img.persp-zoom::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,color-mix(in oklch,var(--color-neutral-darkest) 22%,transparent) 100%)}
#photography .pr-img.arc-grid::after{z-index:3;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,color-mix(in oklch,oklch(0.12 0.06 0) 30%,transparent) 100%)}

/* Section heads: 112 between the rule and the h2, matching sub-sections */
.sub-head{padding-top:var(--sub-gap)!important}

/* Color story: DS large content padding, full-width radius, taller */
#color .color-story{padding:var(--content-padding-large)!important;border-radius:var(--radius-xxl)!important;margin:0!important}
@media (max-width:768px){#color .color-story{padding:var(--content-padding-medium)!important;min-height:0}}

/* Close-ups: same vignette as the Simple and clear donut */
.usage-media.closeup{position:relative;overflow:hidden;border-radius:var(--radius-l)}.usage-media.closeup::after{display:none;content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,color-mix(in oklch,var(--color-neutral-darkest) 22%,transparent) 100%)}

#color .color-story{background:var(--color-neutral-darkest)!important;color:var(--color-white);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important;gap:var(--space-12)!important;padding:0 var(--content-padding-large) 0 0!important;min-height:clamp(500px,45.6vw,680px);overflow:hidden;align-items:center!important;box-shadow:none!important}
#color .cs-visual{margin:0;align-self:stretch;position:relative}

#color .color-story h3{color:var(--color-white)}#color .color-story .st-rule,#color .color-story .cs-body p{color:var(--color-neutral-lighter)!important}
@media (max-width:768px){#color .color-story{grid-template-columns:minmax(0,1fr)!important;padding:0 0 var(--content-padding-medium)!important;gap:var(--space-6)!important}#color .cs-visual{aspect-ratio:16/10}#color .cs-body{padding:0 var(--content-padding-medium)}}

#color .pair-meta{align-items:last baseline}#color .pair-meta>span:last-child{text-align:right}

/* Professional x AI: layered spotlights + dots, orbit and parallax driven by cs-orbit.js */
#color .cs-visual{overflow:hidden;background:var(--color-neutral-darkest);-webkit-mask-image:linear-gradient(to right,#000 65%,transparent);mask-image:linear-gradient(to right,#000 65%,transparent)}
#color .cs-layer{position:absolute;inset:-8% 0;will-change:transform}
#color .cs-pair-l,#color .cs-pair-r{position:absolute;inset:0;will-change:transform}
#color .cs-l-spot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#color .cs-dot{position:absolute;height:auto;display:block}
@media (max-width:768px){#color .cs-visual{-webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent);mask-image:linear-gradient(to bottom,#000 65%,transparent)}}

/* DS 1.2: floating chrome blurs the content behind it */
.rail-inner{background:color-mix(in oklch,var(--rail-bg,var(--color-neutral-darkest)) 85%,transparent)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* Chapter lead set after the chapter links (Foundation): an open statement band, 112 above, between and below */
.wrap:has(>.ch-subnav):has(+.ch-intro-after){margin-bottom:0!important}
.ch-intro-after{padding-top:var(--sub-gap)!important;margin-top:0!important;border-top:0!important}
.ch-intro-after+.wrap>.mv-pair:first-child{margin-top:var(--sub-gap)!important;margin-bottom:var(--sub-gap)!important}
.ch-intro-after+.wrap>.mv-pair:first-child+*{margin-top:0!important}
.wrap:has(+.ch-intro-after)>.ch-subnav{margin-bottom:0!important}

/* Purpose / Mission / Vision labels: the standard eyebrow, set above each statement */
.mv-label{display:block;margin:0 0 var(--space-6);font-size:11px;font-family:var(--font-body);font-weight:var(--fw-book);line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-dark)}
.ch-lead .mv-label{margin-bottom:var(--space-8)}

/* Brand in use: 4-up row */
.bu-grid .span-3{grid-column:span 3}
@media (max-width:900px){.bu-grid .span-3{grid-column:span 6}}

/* v1.3: labels and eyebrows are 11px */
:is(.eyebrow,.sh-label,.ct-label,.chapter-hero .ch-eyebrow,.v-name,.mv-label,.tp-eyebrow,.slide-cap .role,.slide-fpo .rs-num,.slide-fpo .rs-bottom .role){font-size:11px!important;letter-spacing:.12em!important}

/* Chapter intro: color-blocked band one step darker than the page, no rule below */
.ch-intro-wrap{position:relative;padding-top:var(--padding-section-medium);padding-bottom:var(--padding-section-medium);background:var(--color-neutral-lightest);box-shadow:0 0 0 100vmax var(--color-neutral-lightest);clip-path:inset(0 -100vmax)}
.ch-intro-wrap .lede,.ch-intro-wrap p{color:var(--color-neutral-darkest)}
.ch-intro-wrap+.wrap .ch-subnav{border-top:0!important;margin-top:0!important}
.ch-intro-wrap .lede{font-size:var(--text-body-xl)!important}

/* Brand gallery: motion clips interspersed in the mosaic */
.bu-frame.bu-motion video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bu-frame.bu-fit{background:var(--color-white)!important}.bu-frame.bu-fit video{object-fit:contain;padding:8%;box-sizing:border-box}
.bu-frame.bu-logo video{transform:scale(1.3);transform-origin:50% 55%}
@media (max-width:900px){.bu-grid .span-3:has(.bu-motion){grid-column:span 6}}

/* Chapter menus: every page uses the same 2-column list (1 on phones) */
.ch-subnav>ul,.ch-subnav ul.csn-cols,.ch-subnav ul.csn-nested{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:var(--space-12)!important;row-gap:var(--space-3)!important}
.ch-subnav ul.csn-nested:has(.csn-subs){row-gap:var(--space-6)!important}
@media (max-width:600px){.ch-subnav>ul,.ch-subnav ul.csn-cols,.ch-subnav ul.csn-nested{grid-template-columns:minmax(0,1fr)!important}}

/* Chapter menu band: white on every page, so the Gallery Grey intro reads as its own band (as on Color) */
.wrap:has(>.ch-subnav){position:relative;background:var(--color-white);box-shadow:0 0 0 100vmax var(--color-white);clip-path:inset(0 -100vmax);padding-top:var(--padding-section-medium)!important;padding-bottom:var(--padding-section-medium)!important;margin-bottom:0!important}
.wrap:has(>.ch-subnav)>.ch-subnav{margin-top:0!important;margin-bottom:0!important;padding-bottom:0!important;border-bottom:0!important}
.wrap:has(>.ch-subnav)+.wrap>:first-child,.wrap:has(>.ch-subnav)+.wrap+.wrap>:first-child{margin-top:var(--padding-section-medium)!important}
.wrap:has(>.ch-subnav)+.ch-intro-after{margin-top:0!important}
/* Parallax: the block above the menu moves slower, so the menu band and the page below rise over it */
.csn-back{position:relative;z-index:0;will-change:transform}
.csn-front{z-index:1}
.csn-front~*{position:relative;z-index:1}

/* Chapter intro set inside the title banner: 1 short paragraph, well below the title */
.chapter-hero .ch-hero-intro{position:relative;z-index:2;margin:var(--padding-section-medium) 0 0!important;padding:0!important;border:0!important;max-width:44ch}
.chapter-hero .ch-hero-intro .lede,.chapter-hero .ch-hero-intro p{margin:0!important;font-size:var(--text-body-xl)!important;line-height:var(--text-body-lh);font-weight:var(--fw-book);color:var(--color-white)!important;max-width:none!important;text-wrap:pretty}
.chapter-hero .ch-hero-intro em{font-style:normal;color:var(--color-white)}
.wrap.csn-empty{display:none}
.chapter-hero:has(.ch-hero-intro),.chapter-hero:has(+.csn-front){margin-bottom:0!important}
@media (max-width:767px){.chapter-hero .ch-hero-intro{margin-top:var(--padding-section-small)!important}}
.ch-subnav ul.csn-down{grid-auto-flow:column;grid-template-rows:repeat(var(--csn-rows),auto)}
@media (max-width:600px){.ch-subnav ul.csn-down{grid-auto-flow:row;grid-template-rows:none}}

/* Specimen headings are sample text, not page headings: keep their look as p */
p.ctx-h{margin:0;font-weight:var(--fw-medium);line-height:1;letter-spacing:var(--ls-tight)}
p.ldm-h{font-weight:var(--fw-medium)}
.rule-body .rule-n{display:none}
/* Principles: lead with icon and name, no numbers; desc column stays where it was */
.value-row{grid-template-columns:minmax(0,0.8fr) minmax(0,1.5fr)!important}
@media (max-width:900px){.value-row{grid-template-columns:minmax(0,1fr)!important}.vr-desc{grid-column:1!important}}
/* The Working Sage: the archetype name, styled text (not a sub-section heading) at H3 size */
p.arch-name{font-size:var(--text-h3-size);font-weight:var(--fw-medium);line-height:1;letter-spacing:var(--ls-tight)}
/* Purpose: a real h2 section like the rest of Foundation, statement below it */
.ch-lead-sec>.sub-head{margin:0 0 var(--padding-section-medium)!important;padding:0!important;border:0!important}
.ch-lead-sec>.ch-lead-text{margin:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit}
/* Brand gallery: the content after the banner is a solid sheet that rises over it */
.csn-front-plain{position:relative;z-index:1;background:var(--color-neutral-darker);box-shadow:0 0 0 100vmax var(--color-neutral-darker);clip-path:inset(0 -100vmax);padding-top:var(--padding-section-medium)}
.chapter-hero.csn-back{position:relative;z-index:0}
/* Chapter intro in the banner spans 5 of 12 grid columns (never narrower than 44ch) */
.chapter-hero .ch-hero-intro{max-width:min(100%,max(44ch,calc((100% - 11 * var(--gut,24px)) / 12 * 5 + 4 * var(--gut,24px))))!important;width:100%}
/* Banner with intro: 112 below the paragraph (1 step above the 80 between title and paragraph); 80 on tablet, 48 on phones */
.chapter-hero:has(.ch-hero-intro){padding-bottom:var(--padding-section-large)!important}
@media (max-width:991px){.chapter-hero:has(.ch-hero-intro){padding-bottom:var(--padding-section-medium)!important}}
@media (max-width:767px){.chapter-hero:has(.ch-hero-intro){padding-bottom:var(--padding-section-small)!important}}
/* Spots as directional spotlights: 3 layers of 1 oval shape (1.25:1) offset along the beam, smoothstep falloff. Drawn with the falloff pointing +x, rotated about the spot centre to face the other spot (--mang/--rang from script) */
.cover-mark{inset:auto;left:59.44%;top:-24.56%;width:65.12%;height:65.12%;transform-origin:50% 50%;will-change:transform;transform:translate(calc((var(--mx,80%) - 80%) * 2.1499),calc((var(--my,20%) - 20%) * 2.1499)) rotate(var(--mva,0deg)) scale(calc(1 + var(--mst,0)),calc(1 / (1 + var(--mst,0) * 0.5))) rotate(calc(var(--mang,135deg) - var(--mva,0deg))) scale(var(--msc,1)) scale(calc(var(--mnw,1) * 2.25),calc((1.25 - var(--mnw,1) * 0.25) * 2.7));background:radial-gradient(ellipse 45.61% 45.61% at 52.16% 50%,rgba(0,150,215,0.300) 0%,rgba(0,150,215,0.292) 10%,rgba(0,150,215,0.269) 20%,rgba(0,150,215,0.235) 30%,rgba(0,150,215,0.194) 40%,rgba(0,150,215,0.150) 50%,rgba(0,150,215,0.106) 60%,rgba(0,150,215,0.065) 70%,rgba(0,150,215,0.031) 80%,rgba(0,150,215,0.008) 90%,rgba(0,150,215,0.000) 100%);filter:none}
.cover-mark.alt{inset:auto;left:-24.56%;top:59.44%;width:65.12%;height:65.12%;transform-origin:50% 50%;will-change:transform;transform:translate(calc((var(--rx,20%) - 20%) * 2.1499),calc((var(--ry,80%) - 80%) * 2.1499)) rotate(var(--rva,0deg)) scale(calc(1 + var(--rst,0)),calc(1 / (1 + var(--rst,0) * 0.5))) rotate(calc(var(--rang,-45deg) - var(--rva,0deg))) scale(calc(var(--rsc,1) * 1.05)) scale(calc(var(--rnw,1) * 2.25),calc((1.25 - var(--rnw,1) * 0.25) * 2.7));background:radial-gradient(ellipse 45.61% 45.61% at 52.16% 50%,rgba(200,110,160,0.300) 0%,rgba(200,110,160,0.292) 10%,rgba(200,110,160,0.269) 20%,rgba(200,110,160,0.235) 30%,rgba(200,110,160,0.194) 40%,rgba(200,110,160,0.150) 50%,rgba(200,110,160,0.106) 60%,rgba(200,110,160,0.065) 70%,rgba(200,110,160,0.031) 80%,rgba(200,110,160,0.008) 90%,rgba(200,110,160,0.000) 100%);filter:none}
/* Hot core and mid ring as their own GPU layers: they move by transform, so the blurred glow never repaints */
.cover-mark::before,.cover-mark::after{content:"";position:absolute;inset:0;will-change:transform;pointer-events:none}
.cover-mark::before{background:radial-gradient(ellipse 38.72% 38.72% at 50.34% 50%,rgba(0,178,222,0.620) 0%,rgba(0,178,222,0.603) 10%,rgba(0,178,222,0.556) 20%,rgba(0,178,222,0.486) 30%,rgba(0,178,222,0.402) 40%,rgba(0,178,222,0.310) 50%,rgba(0,178,222,0.218) 60%,rgba(0,178,222,0.134) 70%,rgba(0,178,222,0.064) 80%,rgba(0,178,222,0.017) 90%,rgba(0,178,222,0.000) 100%);transform:translate(calc(var(--mcx,0%) * 0.8108),calc(var(--mcy,0%) * 0.8108))}
.cover-mark::after{background:radial-gradient(ellipse 25.81% 25.81% at 48.72% 50%,rgba(10,210,228,1.000) 0%,rgba(10,210,228,0.972) 10%,rgba(10,210,228,0.896) 20%,rgba(10,210,228,0.784) 30%,rgba(10,210,228,0.648) 40%,rgba(10,210,228,0.500) 50%,rgba(10,210,228,0.352) 60%,rgba(10,210,228,0.216) 70%,rgba(10,210,228,0.104) 80%,rgba(10,210,228,0.028) 90%,rgba(10,210,228,0.000) 100%);transform:translate(calc(var(--mcx,0%) * 1.3514),calc(var(--mcy,0%) * 1.3514))}
.cover-mark.alt::before,.cover-mark.alt::after{content:"";position:absolute;inset:0;will-change:transform;pointer-events:none}
.cover-mark.alt::before{background:radial-gradient(ellipse 38.72% 38.72% at 50.34% 50%,rgba(205,65,140,0.620) 0%,rgba(205,65,140,0.603) 10%,rgba(205,65,140,0.556) 20%,rgba(205,65,140,0.486) 30%,rgba(205,65,140,0.402) 40%,rgba(205,65,140,0.310) 50%,rgba(205,65,140,0.218) 60%,rgba(205,65,140,0.134) 70%,rgba(205,65,140,0.064) 80%,rgba(205,65,140,0.017) 90%,rgba(205,65,140,0.000) 100%);transform:translate(calc(var(--rcx,0%) * 0.8108),calc(var(--rcy,0%) * 0.8108))}
.cover-mark.alt::after{background:radial-gradient(ellipse 25.81% 25.81% at 48.72% 50%,rgba(225,48,165,1.000) 0%,rgba(225,48,165,0.972) 10%,rgba(225,48,165,0.896) 20%,rgba(225,48,165,0.784) 30%,rgba(225,48,165,0.648) 40%,rgba(225,48,165,0.500) 50%,rgba(225,48,165,0.352) 60%,rgba(225,48,165,0.216) 70%,rgba(225,48,165,0.104) 80%,rgba(225,48,165,0.028) 90%,rgba(225,48,165,0.000) 100%);transform:translate(calc(var(--rcx,0%) * 1.3514),calc(var(--rcy,0%) * 1.3514))}

/* Cover meta: DS eyebrow label, solid ink, Material arrow */
.cover-bottom .right{font-family:var(--font-family,inherit);font-weight:400;font-size:11px;line-height:1.4;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-neutral-lighter);display:flex;flex-direction:column;gap:var(--space-1,4px)}
.cover-bottom .scroll-cue{display:flex;align-items:center;gap:var(--space-1,4px);animation:none;opacity:1}
.cover-bottom .scroll-arrow{font-size:16px;opacity:1;animation:scrollArrowDrop 2.6s ease-in-out infinite}
@keyframes scrollArrowDrop{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
@media (prefers-reduced-motion: reduce){.cover-bottom .scroll-arrow{animation:none}}

/* Chapter banners share 1 height at each width (cover excluded); title keeps its top position, intro sits 112 above the bottom edge */
section:not(#introduction) .chapter-hero{min-height:clamp(560px,80svh,960px);display:flex;flex-direction:column;box-sizing:border-box}
section:not(#introduction) .chapter-hero>.wrap{flex:1 0 auto;display:flex;flex-direction:column}
section:not(#introduction) .chapter-hero .ch-hero-intro{margin-top:auto!important;padding-top:var(--padding-section-medium)!important}
@media (max-width:767px){section:not(#introduction) .chapter-hero{min-height:0}section:not(#introduction) .chapter-hero .ch-hero-intro{padding-top:var(--padding-section-small)!important}}

/* Chapter intro: Body XL in secondary ink on dark (#D8DADA, solid) */
.chapter-hero .ch-hero-intro .lede,.chapter-hero .ch-hero-intro p{color:var(--color-neutral-lighter)!important}

/* Cover date: out of the way, bottom right on the gutter */
.cover-bottom{justify-content:flex-end}
.cover-bottom .right{margin-left:auto;text-align:right;align-items:flex-end}


/* Chapter menu: same on every page. 80 above the links, 80 below, then 1 rule; content starts 80 below the rule. The first heading after it drops its own rule so there are never 2 in a row */
.wrap:has(>.ch-subnav){padding-top:var(--padding-section-medium)!important;padding-bottom:0!important;margin-bottom:0!important}
.wrap:has(>.ch-subnav)>.ch-subnav{padding-bottom:var(--padding-section-medium)!important;border-bottom:1px solid color-mix(in oklch,currentColor 14%,transparent)!important}
.wrap:has(>.ch-subnav)+.wrap>:first-child,.wrap:has(>.ch-subnav)+.wrap+.wrap>:first-child,.wrap:has(>.ch-subnav)+.ch-intro-after{margin-top:0!important}
.wrap:has(>.ch-subnav)+*{padding-top:var(--padding-section-medium)!important;margin-top:0!important}
.wrap:has(>.ch-subnav)+.wrap>.sub-head:first-child,.wrap:has(>.ch-subnav)+.wrap>:first-child>.sub-head:first-child,.wrap:has(>.ch-subnav)+.ch-intro-after>:first-child>.sub-head:first-child{border-top:0!important;padding-top:0!important;margin-top:0!important}
@media (max-width:767px){.wrap:has(>.ch-subnav){padding-top:var(--padding-section-small)!important}.wrap:has(>.ch-subnav)>.ch-subnav{padding-bottom:var(--padding-section-small)!important}.wrap:has(>.ch-subnav)+*{padding-top:var(--padding-section-small)!important}}

/* First block after the menu rule: no own rule or top padding, so content starts 80 below 1 rule */
.ch-lead-sec>.sub-head:empty{margin:0!important}
.wrap:has(>.ch-subnav)+.wrap>:first-child,.wrap:has(>.ch-subnav)+.ch-intro-after>:first-child{border-top:0!important;padding-top:0!important}
.wrap:has(>.ch-subnav)+.wrap>:first-child>:first-child{border-top:0!important;padding-top:0!important;margin-top:0!important}

/* ID-strength version of the first-block reset, so page-level #id rules can't add a second rule after the menu */
:is(#a,section,body) .wrap:has(>.ch-subnav)+.wrap>:first-child:is(#a,*),:is(#a,section,body) .wrap:has(>.ch-subnav)+.wrap>:first-child:is(#a,*)>:first-child:is(#a,*),:is(#a,section,body) .wrap:has(>.ch-subnav)+.ch-intro-after>:first-child:is(#a,*){border-top:0!important;padding-top:0!important;margin-top:0!important}

/* Foundation purpose statement: Display 3, fluid at the column ratio */
#compass .ch-lead-sec>.ch-lead-text{font-size:clamp(56px,6.1111vw,132px)!important;line-height:var(--text-display-3-lh)!important;letter-spacing:var(--ls-display)!important;font-weight:var(--fw-medium)}
@media (max-width:767px){#compass .ch-lead-sec>.ch-lead-text{font-size:clamp(36px,9vw,56px)!important}}

/* Foundation: the purpose statement gets the next step up, 112 above and below */
#compass .wrap:has(>.ch-subnav)+.wrap{padding-top:var(--padding-section-large)!important}
#compass .ch-lead-sec{margin-bottom:var(--padding-section-large)!important}
@media (max-width:991px){#compass .wrap:has(>.ch-subnav)+.wrap{padding-top:var(--padding-section-medium)!important}#compass .ch-lead-sec{margin-bottom:var(--padding-section-medium)!important}}

/* Mission / vision highlights match the purpose statement highlight */
#compass .mv-item em{color:var(--color-link)!important}

/* Audience cards: description runs the full card width */
.aud-card .ac-x{max-width:none}

/* Brand gallery: full-width lead hero at 16:9 */
.bu-heroes .hx-12{grid-column:1/-1;grid-row:span 1;height:auto}.bu-heroes .hx-12 .bu-frame{height:auto;aspect-ratio:16/9}
.bu-heroes{grid-auto-rows:auto}.bu-heroes .hx-5 .bu-frame,.bu-heroes .hx-7 .bu-frame{height:clamp(240px,30vw,440px)}
@media (max-width:900px){.bu-heroes .hx-5 .bu-frame,.bu-heroes .hx-7 .bu-frame{height:auto}}

/* Logo motion: the banner grain over the video, for texture */
.logo-motion::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("assets/grain.png") repeat;background-size:160px 160px;opacity:0.09;mix-blend-mode:overlay}

/* Logos: 1 rule above the Logo / symbol pair; the column headings drop their own */
#logo .logo-pair>.lp-col>.sub-title:first-child{border-top:0!important;padding-top:0!important}
#logo .logo-motion+.logo-pair{margin-top:0!important}

.bu-heroes .hx-6{grid-column:span 6}@media (max-width:900px){.bu-heroes .hx-6{grid-column:span 12}}

/* How we look: every thumbnail in all 3 tabs is 4:3 */
.pr-card .pr-img,.rule-card .pr-img{aspect-ratio:4/3!important;height:auto!important;overflow:hidden}
.pr-card .pr-img:not(.pr-crop-light)>img,.pr-card .pr-img>image-slot,.pr-card .pr-img>video,.rule-card .pr-img:not(.pr-crop-light)>img,.rule-card .pr-img>image-slot{width:100%!important;height:100%!important;object-fit:cover}

/* Principles: names on 4 of 12 columns, text on 6 after a 1-column gap; 32 between rows; names H6 at 1.0; icons weight 300 */
#values .value-row{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--gut,24px)!important;row-gap:0!important;padding:0!important;margin:0!important;align-items:baseline}
#values .value-row+.value-row{margin-top:var(--space-8,32px)!important}
#values .value-row>:first-child{grid-column:1/span 4!important}
#values .value-row>:not(:first-child){grid-column:6/span 6!important;max-width:70ch}
#values .value-row .vr-name{line-height:1!important}
#values .value-row .material-symbols-outlined{font-variation-settings:'wght' 300!important}
@media (max-width:767px){#values .value-row>:first-child,#values .value-row>:not(:first-child){grid-column:1/-1!important}#values .value-row>:not(:first-child){margin-top:var(--space-3,12px)}}

/* Storytelling: in system. Intro 32 below the heading, 70ch; diagram on cols 1-5, facets on cols 6-11 (same start as Principles); 32 between facets; names H6 at 1.0 */
#story .sub-head{margin-bottom:var(--space-8,32px)!important}
#story .section-head{margin:0 0 var(--padding-section-small)!important}
#story .section-head .lede{max-width:70ch;margin:0}
#story .venn-diagram{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--gut,24px)!important;row-gap:var(--space-8,32px)!important;align-items:start}
#story .venn-diagram>.vd-figure{grid-column:1/span 5!important;width:100%!important;max-width:none!important;margin:0!important}
#story .venn-diagram>:not(.vd-figure){grid-column:6/span 6!important;margin:0!important;display:grid;gap:var(--space-8,32px)}
#story .vd-name{line-height:1!important}
@media (max-width:767px){#story .venn-diagram>.vd-figure,#story .venn-diagram>:not(.vd-figure){grid-column:1/-1!important}}

.chapter-hero,.ch-spots,#top{position:relative;overflow:hidden;overflow:clip;isolation:isolate;contain:paint}

.usage-media.keyline{position:relative}.usage-media.keyline::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:var(--radius-l);box-shadow:inset 0 0 0 1px var(--color-neutral-lightest)}
img[data-keyline]{outline:1px solid var(--color-neutral-lightest);outline-offset:-1px}

/* Builder: calculator-style app panel */
html body .bd{background:var(--color-blue-darkest)!important;border-radius:var(--radius-xxl)!important;box-shadow:none!important;padding:var(--content-padding-large,48px)!important;margin-top:0!important}
html body .bd-head{border:0!important;padding:0 0 var(--space-6,24px)!important}
html body .bd-name{font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;font-weight:400!important;color:var(--color-link-on-dark)!important;line-height:1.4!important;margin:0!important}
html body .bd-body{gap:var(--space-12,48px)!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important}
html body .bd-form{background:var(--color-neutral-darkest)!important;border-radius:var(--radius-xl)!important;padding:var(--content-padding-large,48px)!important}
html body .bd-out{background:transparent!important;border:0!important;padding:0!important;align-content:start!important;grid-template-rows:none!important}
html body .bd-sub{display:none!important}html body .bd-head{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;column-gap:var(--space-12,48px)!important;align-items:end!important}html body .bd-head::after{content:"Your prompt"!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--color-link-on-dark)!important;line-height:1.4!important;grid-column:2!important;grid-row:1!important}html body .bd-actions{grid-column:1!important;justify-self:end!important;grid-row:1!important}html body .bd-title{grid-column:1!important;grid-row:1!important}
html body .bd .bd-out .copy-block,html body .bd .bd-out .copy-block pre,html body .bd .bd-out .copy-block *{background-color:transparent!important}html body .bd .bd-out .copy-block{background:color-mix(in oklch,var(--color-blue-darkest),var(--color-white) 7%)!important;border:0!important;border-radius:var(--radius-xl)!important;top:var(--space-6,24px)!important}html body .bd .bd-out .copy-block .copy-btn{background:var(--color-blue)!important;color:var(--color-neutral-darkest)!important}
html body .bd .bd-out .copy-block pre,html body .bd .bd-out .copy-block pre *{color:var(--color-white)!important}html body .bd .bd-out .copy-block pre{font-size:var(--text-body-m-size,16px)!important;line-height:1.5!important}
html body .bd-step,html body .bd-real{background:color-mix(in oklch,var(--color-blue-darkest),var(--color-white) 7%)!important;border-radius:var(--radius-xl)!important;padding:var(--content-padding-medium,32px)!important}
html body .bd-step .eyebrow{color:var(--color-white)!important;font-size:var(--text-body-m-size,16px)!important;letter-spacing:0!important;text-transform:none!important;font-weight:500!important}
html body .bd-real .bd-step{padding:0!important;background:none!important}
html body .bd .gv-chip.is-on{background:var(--color-blue)!important;border-color:var(--color-blue)!important;color:var(--color-neutral-darkest)!important}
html body.pb-solo .bd-popout{display:none!important}html body:not(.pb-solo) .bd{position:relative!important}html body:not(.pb-solo) .bd-head{padding-right:56px!important}
@media (max-width:900px){html body .bd{padding:var(--content-padding-regular,24px)!important}html body .bd-form{padding:var(--content-padding-regular,24px)!important}html body .bd-head{grid-template-columns:minmax(0,1fr)!important}html body .bd-head::after{display:none!important}}




html body .bd .bd-out,html body .bd .bd-out .bd-step-tx,html body .bd .bd-real{color:var(--color-white)!important}html body .bd .bd-out .bd-step-tx{color:var(--color-neutral-lighter)!important}

/* Builder dark: every light-UI leftover inside the output column */
html body .bd .bd-out .copy-block{position:static!important;top:auto!important}
html body .bd .bd-out{gap:var(--space-4,16px)!important}
html body .bd .bd-out :where(p,span,small,div,li,a,label):not(.copy-block):not(.copy-block *){color:var(--color-neutral-lighter)!important}
html body .bd .bd-out .eyebrow,html body .bd .bd-out strong,html body .bd .bd-out b{color:var(--color-white)!important}
html body .bd .bd-out [role="tablist"],html body .bd .bd-out [class*="seg"],html body .bd .bd-out [class*="toggle"]{background:var(--color-neutral-darkest)!important;border-color:transparent!important}
html body .bd .bd-out button:not(.copy-btn):not(.bd-btn){background:transparent!important;color:var(--color-neutral-lighter)!important;border-color:transparent!important}
html body .bd .bd-out button:not(.copy-btn):not(.bd-btn)[aria-pressed="true"],html body .bd .bd-out button:not(.copy-btn):not(.bd-btn)[aria-selected="true"],html body .bd .bd-out button:not(.copy-btn):not(.bd-btn).is-on{background:var(--color-blue)!important;color:var(--color-neutral-darkest)!important}
html body .bd .bd-out .copy-btn{background:var(--color-blue)!important;color:var(--color-neutral-darkest)!important;border:0!important}
html body .bd .bd-out .copy-btn *{color:var(--color-neutral-darkest)!important}
html body .bd .bd-out .bd-dest{background:var(--color-neutral-darkest)!important;border-color:transparent!important}
html body .bd .bd-out .bd-btn{border:1px solid var(--color-neutral-lighter)!important;color:var(--color-white)!important;background:transparent!important}
html body .bd .bd-out .bd-btn:last-child{background:var(--color-blue)!important;border-color:var(--color-blue)!important;color:var(--color-neutral-darkest)!important}
html body .bd .bd-out .bd-btn:last-child *{color:var(--color-neutral-darkest)!important}
html body .bd .bd-out .bd-btn:hover{border-color:var(--color-white)!important}html body .bd .bd-out .bd-btn:last-child:hover{background:var(--color-blue-light)!important}

#color .cs-visual[data-spots-idle]{position:relative;overflow:hidden;isolation:isolate}

/* Color misuses: DS light card, example full-bleed on top, rule below */
#color .donts{gap:var(--space-8)!important}
#color .donts .dont{padding:0!important;gap:0!important;border-radius:var(--radius-l)!important;overflow:hidden;background:var(--color-neutral-lightest)!important;justify-content:flex-start!important}
#color .donts .dont .preview{border-radius:0!important;flex:none!important;aspect-ratio:2/1!important}
#color .donts .dont .preview .mini-slide{border-radius:0!important;width:100%;height:100%}
#color .donts .dont .label{padding:var(--content-padding-regular)!important;margin:0!important;flex:none!important;min-height:0!important;color:var(--color-neutral-dark)}

/* Guide gutter: 32 at 1440, scales down to 16 on phones */
:root{--gut:clamp(16px,2.2223vw,32px);--gut-s:calc(var(--gut) * 0.5);--gut-m:var(--gut)}
#icons .io-split{gap:var(--gut)}

/* Color story composite over the spots: fixed-ratio stage so layers stay locked */
#color .cs-visual{container-type:size}#color .cs-comp{position:absolute;left:0;top:50%;transform:translateY(-50%) scale(1.15);transform-origin:40% 50%;width:min(100cqw,193.2cqh);aspect-ratio:1480/766;z-index:3;pointer-events:none}#color .cs-comp img{position:absolute;display:block;max-width:none!important;height:auto!important;border-radius:0!important;box-shadow:none!important;outline:0!important}#color .cs-l-photo{left:26.8%;top:16%;width:36%;border-radius:var(--radius-l)!important}#color .cs-l-panels{left:15.9%;top:9%;width:30.4%}#color .cs-l-spark{left:34.9%;top:22%;width:3%}#color .cs-l-cursor{left:28.3%;top:36%;width:1.7%}
@media (max-width:768px){#color .cs-comp{left:50%;transform:translate(-50%,-50%) scale(1.15);width:min(160cqw,193.2cqh)}}
#color .cs-spark-a{transform-origin:68% 30%;animation:cs-breathe 4.2s ease-in-out infinite}#color .cs-spark-b{transform-origin:26% 74%;animation:cs-breathe 4.2s ease-in-out -2.1s infinite}@keyframes cs-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){#color .cs-l-spark{animation:none}}

/* Guide-wide entry reveal, matches Typography */
.rv-on .rv{opacity:0;transform:translateY(48px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.rv-on .rv.is-in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none;transition:none}}@media print{.rv-on .rv{opacity:1!important;transform:none!important}}

/* Color story: looping slide picker */
#color .cs-slides{position:absolute;left:23.8%;top:0;width:14.5%;height:100%;-webkit-mask-image:linear-gradient(to bottom,transparent 7%,#000 21%,#000 40%,transparent 53%);mask-image:linear-gradient(to bottom,transparent 7%,#000 21%,#000 40%,transparent 53%)}#color .cs-track{position:absolute;inset:0}#color .cs-card{position:absolute;left:0;width:100%;height:16.9%;box-sizing:border-box;background:var(--color-white);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:6%;opacity:.4;transform:scale(.94);transition:opacity .5s ease,transform .5s ease,box-shadow .5s ease}#color .cs-card img{position:static!important;width:100%;height:100%;object-fit:contain}#color .cs-card.is-sel{opacity:1;transform:scale(1);box-shadow:var(--shadow-large)}#color .cs-l-cursor{transform-origin:15% 10%}#color .cs-l-cursor.is-click{animation:cs-click .45s ease}@keyframes cs-click{0%,100%{transform:scale(1)}40%{transform:scale(.82)}}
#color .cs-l-person{left:28.78%;top:16%;width:32.04%;z-index:2}#color .cs-slides{z-index:1}#color .cs-l-photo{z-index:0}

/* Color ramps: compact strips, quick to copy */
#c-system .sys-tiers{display:flex!important;flex-direction:column;gap:48px!important}#c-system .sys-ramp+.sys-ramp{margin-top:-16px}#c-system .sys-ramp>.eyebrow{margin-bottom:12px!important}#color #c-system .sys-ramp .sys-row{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;column-gap:0!important;row-gap:16px!important}@media (max-width:640px){#color #c-system .sys-ramp .sys-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}}#c-system .sys-ramp .sys-dot{height:56px!important;min-height:0!important;aspect-ratio:auto!important}#c-system .sys-ramp figcaption{margin-top:8px!important;gap:2px!important}#c-system .sys-ramp .sys-name{font-size:var(--text-body-s,14px)!important}#c-system .sys-ramp .sys-hex{font-size:11px!important}

/* Selected slide: subtle living glow */
#color .cs-card.is-sel{animation:cs-glow 6s ease-in-out infinite}@keyframes cs-glow{0%,100%{box-shadow:var(--shadow-large),-10px -6px 32px -6px color-mix(in oklch,var(--color-blue) 45%,transparent),12px 8px 34px -8px color-mix(in oklch,var(--color-magenta) 35%,transparent)}33%{box-shadow:var(--shadow-large),-4px -12px 36px -6px color-mix(in oklch,var(--color-blue) 40%,transparent),8px 12px 30px -8px color-mix(in oklch,var(--color-magenta) 40%,transparent)}66%{box-shadow:var(--shadow-large),-12px 2px 30px -6px color-mix(in oklch,var(--color-blue) 48%,transparent),14px -2px 36px -8px color-mix(in oklch,var(--color-magenta) 32%,transparent)}}@media (prefers-reduced-motion:reduce){#color .cs-card.is-sel{animation:none}}
#color .cs-slides{left:21.3%!important;width:19.5%!important}#color .cs-card{left:12.82%!important;width:74.36%!important}

/* Storytelling venn: smaller */
#story .venn-diagram>.vd-figure{max-width:520px!important;width:100%;justify-self:center}.venn-diagram .vd-figure svg{width:100%;height:auto}

#type .dt-tag{display:inline-flex!important;align-items:center;gap:6px}#type .dt-tag .material-symbols-outlined{font-size:20px;line-height:1}#type .dt-tag.ok .material-symbols-outlined{color:var(--color-green-ink)}#type .dt-tag.bad .material-symbols-outlined{color:var(--color-orange,#FF6347)}
/* Book specimen at real scale, set on a white page */
#type .th-book{padding:clamp(24px,5cqw,64px)!important;justify-content:center!important;align-items:center!important}#type .th-book .th-cols{background:var(--color-white);color:var(--color-neutral-darkest);border-radius:var(--radius-l);box-shadow:var(--shadow-xxsmall);padding:var(--content-padding-large);max-width:880px;gap:var(--space-8,32px)!important;box-sizing:border-box}#type .th-book .th-col{gap:var(--space-4,16px)!important}#type .th-book .th-eyebrow{font-size:11px!important;color:var(--color-link)!important}#type .th-book .th-paras{font-size:var(--text-body-l,18px)!important;gap:var(--space-4,16px)!important}#type .th-book .th-para{font-size:inherit!important;line-height:1.5;color:var(--color-neutral-darkest);max-width:70ch}#type .th-book .th-label{font-size:11px!important;color:var(--color-neutral-dark)!important}#type .th-book .th-labels{padding-top:var(--space-3,12px)!important;border-top:0!important;gap:8px 24px!important}@media (max-width:700px){#type .th-book .th-cols{grid-template-columns:minmax(0,1fr)!important;padding:var(--content-padding-medium)}}

/* Type scale: label left, sample right at a realistic measure */
#type .tg-frame .type-row{grid-template-columns:minmax(140px,2fr) minmax(0,7fr)!important;align-items:baseline;gap:8px var(--gut,32px)!important}#type .tg-frame .type-row .tag{grid-column:1;grid-row:1}#type .tg-frame .type-row .specs{grid-column:1!important;grid-row:2}#type .tg-frame .type-row .sample{grid-column:2!important;grid-row:1/span 2;max-width:12em;text-wrap:balance}#type .tg-frame .type-row .sample[style*="letter-spacing:0;"]{max-width:60ch;text-wrap:pretty}@media (max-width:700px){#type .tg-frame .type-row{grid-template-columns:minmax(0,1fr)!important}#type .tg-frame .type-row .sample{grid-column:1!important;grid-row:auto}}
#type .type-hero.th-light:has(.th-book){background:var(--color-neutral-lightest)!important}#type .type-hero.th-light:has(.th-book) .th-glow{display:none!important}
#type .type-hero:has(.th-book){aspect-ratio:auto!important;height:auto!important;min-height:0!important}#type .type-hero:has(.th-book) .th-book{padding:clamp(24px,4cqw,48px) clamp(24px,5cqw,64px) 0!important}#type .type-hero:has(.th-book) .th-meta{position:static!important;margin-top:clamp(24px,3cqw,40px)}
#type .tg-sec>.oa-callout{margin-top:0!important}
#practice.section{padding-bottom:var(--padding-section-large,112px)!important}
/* Gallery grids always end with a gutter below the last image */
.bu-grid,.bu-heroes,.bu-band-row{margin-bottom:32px!important}@media (max-width:760px){#brand-in-use .bu-grid,.bu-grid,.bu-heroes,.bu-band-row{row-gap:16px!important;column-gap:16px!important}.bu-grid,.bu-heroes,.bu-band-row{margin-bottom:16px!important}}
#practice .csn-front{padding-bottom:32px!important}#practice .csn-front>.bu-grid:last-child{margin-bottom:0!important}@media (max-width:760px){#practice .csn-front{padding-bottom:16px!important}}

/* Spot banners use the DS spotlight noise: dither at 0.075 (base) plus film grain at 0.055, matching the cover */
.ch-spots::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url("assets/grain.png") repeat;background-size:160px 160px;opacity:0.055;mix-blend-mode:overlay}

/* Guide gutter everywhere: every card and tile grid uses --gut (32 at 1440, 16 on phones), across and down.
   Mosaics keep their own tighter gutter (Brand platform .wrb, imagery .ad-mosaic), and specimens inside demos are content. */
.aud-cols,.arch-refs,.tov-grid,.logo-variants,#logo .donts,#color .usage-grid,.pr-pair,.rule-grid,.mp-grid{gap:var(--gut)!important}