/* ========================================================================== BounceWatch V2 kit. Loaded after site.css; remove the link to undo it. Live reference: /kit 01 TYPOGRAPHY, values from V1 (public/ui-kit.html, section 03). Role tokens first, then the role classes the kit page uses, then every font rule of site.css mapped to a role. ========================================================================== */ :root{ --font-h:'Plus Jakarta Sans',Inter,system-ui,sans-serif; --font:Inter,system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --t-hero-dark:2.5rem; /* 01.1 mobile 40 · md 48 · xl 56 */ --t-hero:2.5rem; /* 01.2 */ --t-section:2rem; /* 01.3 mobile 32 · md 36 · xl 40 */ --t-sub:1.5rem; /* 01.4 mobile 24 · md 28 */ --t-big:2.25rem; /* 01.5 mobile 36 · md 44 */ --t-card:1.25rem; /* 01.6 20 at every width */ --t-row:1.125rem; /* 01.7 18 */ --t-lede:16px; /* 01.8 */ --t-prose:15px; /* 01.9 */ --t-note:14px; /* 01.10 */ --t-button:15px; /* 01.11 */ --t-eyebrow:12px; /* 01.12 */ --t-tag:12px; /* 01.13 smallest text on the site */ } @media (min-width:761px){:root{--t-hero-dark:3rem;--t-hero:3rem;--t-section:2.25rem;--t-sub:1.75rem;--t-big:2.75rem}} @media (min-width:1181px){:root{--t-hero-dark:3.5rem;--t-hero:3.5rem;--t-section:2.5rem}} body{font-family:var(--font);font-size:var(--t-lede);line-height:1.6} h1,h2,h3,h4{font-family:var(--font-h);font-weight:800} .h2 em{font-style:normal} .t-hero-dark{font-family:var(--font-h);font-size:var(--t-hero-dark);line-height:1.04;font-weight:800;letter-spacing:-.035em} .t-hero{font-family:var(--font-h);font-size:var(--t-hero);line-height:1.06;font-weight:800;letter-spacing:-.025em} .t-section{font-family:var(--font-h);font-size:var(--t-section);line-height:1.1;font-weight:800;letter-spacing:-.025em} .t-sub{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .t-big{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .t-card{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .t-row{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .t-lede{font-family:var(--font);font-size:var(--t-lede);line-height:1.7;font-weight:400;letter-spacing:0} .t-prose{font-family:var(--font);font-size:var(--t-prose);line-height:1.65;font-weight:400;letter-spacing:0} .t-note{font-family:var(--font);font-size:var(--t-note);line-height:1.5;font-weight:400;letter-spacing:0} .t-button{font-family:var(--font);font-size:var(--t-button);line-height:1.5;font-weight:600;letter-spacing:0} .t-eyebrow{font-family:var(--mono);font-size:var(--t-eyebrow);line-height:1.5;font-weight:500;letter-spacing:.2em;text-transform:uppercase} .t-tag{font-family:var(--mono);font-size:var(--t-tag);line-height:1.5;font-weight:400;letter-spacing:.12em;text-transform:uppercase} /* --- site.css font rules mapped to the roles --- */ .eyebrow{font-family:var(--mono);font-size:var(--t-eyebrow);line-height:1.5;font-weight:500;letter-spacing:.2em} .h2{font-family:var(--font-h);font-size:var(--t-section);line-height:1.1;font-weight:800;letter-spacing:-.025em} .lede{font-family:var(--font);font-size:var(--t-lede);line-height:1.7;letter-spacing:0} .btn{font-family:var(--font);font-size:var(--t-button);font-weight:600;letter-spacing:0} .dd>button{font-size:var(--t-prose);letter-spacing:0} .dd-panel b{font-size:var(--t-prose);letter-spacing:0} .dd-panel span{font-size:var(--t-note);letter-spacing:0} .dd-panel code{font-size:var(--t-eyebrow)} .nav .btn{font-family:var(--font);font-size:var(--t-button);font-weight:600;letter-spacing:0} .mpanel h4{font-size:var(--t-eyebrow);letter-spacing:.12em} .mpanel a{font-size:var(--t-prose);letter-spacing:0} .hero h1{font-family:var(--font-h);font-size:var(--t-hero-dark);line-height:1.04;font-weight:800;letter-spacing:-.035em} .hero .sub{font-family:var(--font);font-size:var(--t-lede);line-height:1.7;letter-spacing:0} .proofline{font-size:var(--t-note);letter-spacing:0} .askrow input{font-size:var(--t-lede);letter-spacing:0} .cbody{font-size:var(--t-prose);letter-spacing:0} .cstatus{font-size:var(--t-eyebrow)} .chip{font-size:var(--t-note);letter-spacing:0} .trace{font-size:var(--t-eyebrow)} .ans sup{font-size:var(--t-tag)} .srcs span{font-size:var(--t-eyebrow)} .stamp{font-size:var(--t-eyebrow)} .twin-of{font-size:var(--t-eyebrow)} .twin-of input{font-size:var(--t-eyebrow)} .ticker .wrap{font-size:var(--t-eyebrow)} .ticker .lbl{font-size:var(--t-eyebrow);letter-spacing:.12em} .pl{font-size:var(--t-note);letter-spacing:0} .pcol h4{font-size:var(--t-eyebrow);letter-spacing:.12em} .core .mid b{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .core .mid span{font-size:var(--t-eyebrow)} .core .tag{font-size:var(--t-eyebrow);letter-spacing:.12em} .stage-t small{font-size:var(--t-eyebrow);letter-spacing:.12em} .stage-t b{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .stage-t p{font-size:var(--t-prose);letter-spacing:0} .cstep .time{font-size:var(--t-eyebrow)} .cstep h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .cstep p{font-size:var(--t-lede);letter-spacing:0} .cstep .art{font-size:var(--t-note);letter-spacing:0} .cstep .art .pill{font-size:var(--t-eyebrow)} .stab{font-size:var(--t-prose);letter-spacing:0} .galaxy .gtag{font-size:var(--t-eyebrow)} .galaxy .gfoot{font-size:var(--t-eyebrow)} .scopy h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .sblock h4{font-size:var(--t-eyebrow);letter-spacing:.12em} .sigs{font-size:var(--t-prose);letter-spacing:0} .gets p{font-size:var(--t-prose);letter-spacing:0} .gets p b{font-size:var(--t-eyebrow)} .sproof{font-size:var(--t-note);letter-spacing:0} .ltab .n{font-size:var(--t-eyebrow);letter-spacing:.12em} .ltab .q{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .memo-top{font-size:var(--t-eyebrow)} .memo h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .memo .trace{font-size:var(--t-note);letter-spacing:0} .memo .points{font-size:var(--t-lede);letter-spacing:0} .memo .points sup{font-size:var(--t-tag)} .memo .decision small{font-size:var(--t-eyebrow);letter-spacing:.12em} .memo .decision b{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .lpromise{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .ltracks{font-size:var(--t-prose);letter-spacing:0} .vx-t{font-size:var(--t-eyebrow)} .vx-T{font-size:var(--t-note);letter-spacing:0} .vx-big{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .oc-lb{font-size:var(--t-eyebrow)} .rrow small{font-size:var(--t-eyebrow);letter-spacing:.12em} .rrow b{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .rrow span{font-size:var(--t-prose);letter-spacing:0} .ptab{font-size:var(--t-prose);letter-spacing:0} .pq{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .pstats b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .pstats span{font-size:var(--t-note);letter-spacing:0} .pfound{font-size:var(--t-lede);letter-spacing:0} .pfound .wk{font-size:var(--t-eyebrow)} .fp .fpl{font-size:var(--t-eyebrow)} .people .body{font-family:var(--font);font-size:var(--t-lede);line-height:1.7;letter-spacing:0} .signoff{font-size:var(--t-eyebrow)} .trust small{font-size:var(--t-eyebrow);letter-spacing:.12em} .trust b{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .trust p{font-size:var(--t-lede);letter-spacing:0} .steplbl{font-size:var(--t-eyebrow);letter-spacing:.12em} .opt h3{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .opt .pr{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .opt .pr small{font-size:var(--t-eyebrow)} .opt ul{font-size:var(--t-prose);letter-spacing:0} .agentpanel h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .agentpanel .pr{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .agentpanel .pr small{font-size:var(--t-prose);letter-spacing:0} .agentpanel ul{font-size:var(--t-prose);letter-spacing:0} .terms{font-size:var(--t-prose);letter-spacing:0} .proof b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .proof span{font-size:var(--t-prose);letter-spacing:0} .progs{font-size:var(--t-eyebrow)} .ftop p{font-size:var(--t-prose);letter-spacing:0} .ftop h4{font-size:var(--t-eyebrow);letter-spacing:.12em} .ftop a{font-size:var(--t-note);letter-spacing:0} .fbot{font-size:var(--t-note);letter-spacing:0} .legend{font-size:var(--t-note);letter-spacing:0} .map{font-size:var(--t-prose);letter-spacing:0} .map th{font-size:var(--t-eyebrow);letter-spacing:.12em} .map td:nth-child(2){font-size:var(--t-eyebrow)} .st{font-size:var(--t-eyebrow)} .hero h1{font-family:var(--font-h);font-size:var(--t-hero-dark);line-height:1.04;font-weight:800;letter-spacing:-.035em} .hmetrics b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .hmetrics span{font-size:var(--t-note);letter-spacing:0} .hmetrics small{font-size:var(--t-eyebrow);letter-spacing:.12em} .hnote{font-size:var(--t-note);letter-spacing:0} .proofband b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .proofband span{font-size:var(--t-note);letter-spacing:0} .vpoints{font-size:var(--t-prose);letter-spacing:0} .picker-l{font-size:var(--t-eyebrow);letter-spacing:.12em} .pchip{font-size:var(--t-note);letter-spacing:0} .vrow h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .vrow h3 small{font-size:var(--t-eyebrow)} .ba{font-size:var(--t-prose);letter-spacing:0} .ba span.k{font-size:var(--t-eyebrow);letter-spacing:.12em} .vproof b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .vproof span{font-size:var(--t-note);letter-spacing:0} .pcol .grp .pl{font-size:var(--t-note);letter-spacing:0} .dash-top{font-size:var(--t-note);letter-spacing:0} .dash-brand b{font-size:var(--t-note);letter-spacing:0} .dash-meta{font-size:var(--t-eyebrow)} .stamp-c{font-size:var(--t-tag);letter-spacing:.12em} .kpi small{font-size:var(--t-tag);letter-spacing:.12em} .kpi b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .kpi em{font-size:var(--t-note);letter-spacing:0} .kpi .ill{font-size:var(--t-tag)} .dash-side h5{font-size:var(--t-tag);letter-spacing:.12em} .dring div{font-size:var(--t-note);letter-spacing:0} .dring span{font-size:var(--t-eyebrow)} .dfeed{font-size:var(--t-note);letter-spacing:0} .dfeed b{font-size:var(--t-eyebrow)} .dash-dec small{font-size:var(--t-tag);letter-spacing:.12em} .dash-dec b{font-size:var(--t-lede);letter-spacing:0} .dash-note{font-size:var(--t-eyebrow)} .sun .hubt{font-size:var(--t-card);letter-spacing:0} .sun .hubs{font-size:var(--t-note);letter-spacing:0} .sun .hubk{font-size:var(--t-tag)} .sublens{font-size:var(--t-prose);letter-spacing:0} .hook-tag{font-size:var(--t-eyebrow);letter-spacing:.12em} .hook h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .hook-pr{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .hook-pr small{font-size:var(--t-prose);letter-spacing:0} .hook-g{font-size:var(--t-prose);letter-spacing:0} .hook-list{font-size:var(--t-prose);letter-spacing:0} .tier h4{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .tpr{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .tpr small{font-size:var(--t-prose);letter-spacing:0} .best{font-size:var(--t-note);letter-spacing:0} .tier ul{font-size:var(--t-prose);letter-spacing:0} .rec-b{font-size:var(--t-tag);letter-spacing:.12em} .anchor-t{font-size:var(--t-prose);letter-spacing:0} .anchor-t b{font-size:var(--t-eyebrow);letter-spacing:.12em} .anchor-v div{font-size:var(--t-note);letter-spacing:0} .anchor-v em{font-size:var(--t-eyebrow)} .addons{font-size:var(--t-prose);letter-spacing:0} .faq summary{font-size:var(--t-lede);letter-spacing:0} .ddb{font-size:var(--t-prose);letter-spacing:0} .dd-panel a code{font-size:var(--t-tag)} .mega-l b{font-size:var(--t-note);letter-spacing:0} .mega-l .tx span{font-size:var(--t-note);letter-spacing:0} .mega-r .mp-tag{font-size:var(--t-tag)} .mega-r h5{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .mega-r p{font-size:var(--t-note);letter-spacing:0} .mp-kpi small{font-size:var(--t-tag);letter-spacing:.12em} .mp-kpi b{font-size:var(--t-lede);letter-spacing:0} .mp-go{font-size:var(--t-note);letter-spacing:0} .mascot b{font-size:var(--t-eyebrow);letter-spacing:.12em} .mlive{font-size:var(--t-eyebrow)} .gbadge small{font-size:var(--t-tag)} .gbadge b{font-size:var(--t-prose);letter-spacing:0} .crumb{font-size:var(--t-note);letter-spacing:0} .rep-cover .rt{font-size:var(--t-tag)} .rep-body h4{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .rep-body p{font-size:var(--t-note);letter-spacing:0} .rep-body span{font-size:var(--t-eyebrow)} .nl h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .nlok{font-size:var(--t-note);letter-spacing:0} .lb-head b{font-size:var(--t-prose);letter-spacing:0} .lb-head span.mono{font-size:var(--t-eyebrow)} .lb-metrics small{font-size:var(--t-tag);letter-spacing:.12em} .lb-metrics b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .lb-metrics em{font-size:var(--t-eyebrow)} .lb-feed{font-size:var(--t-eyebrow)} .lb-th{font-size:var(--t-tag);letter-spacing:.12em} .pcol .grp .pl{font-size:var(--t-note);letter-spacing:0} .pcol.out .outh{font-size:var(--t-eyebrow);letter-spacing:.12em} .pcol.out .pl{font-size:var(--t-note);letter-spacing:0} .pcol.out .pl small{font-size:var(--t-tag)} .vt-row > div{font-size:var(--t-prose);letter-spacing:0} .vt-head > div{font-size:var(--t-eyebrow);letter-spacing:.12em} .vt-o{font-size:var(--t-card);letter-spacing:0} .vt-t .mk,.vt-a .mk{font-size:var(--t-eyebrow)} .vt-i b{font-size:var(--t-lede);letter-spacing:0} .vt-i span{font-size:var(--t-tag)} .vt-note{font-size:var(--t-note);letter-spacing:0} @media (max-width:980px){.vt-t::before,.vt-a::before,.vt-i::before{font-size:var(--t-tag);letter-spacing:.12em}} .sigs2 span{font-size:var(--t-note);letter-spacing:0} .sigs2 span i{font-size:var(--t-tag)} .gets2 div{font-size:var(--t-prose);letter-spacing:0} .gets2 b{font-size:var(--t-tag);letter-spacing:.12em} .sproof2{font-size:var(--t-note);letter-spacing:0} .whynow small{font-size:var(--t-eyebrow)} .whynow p{font-size:var(--t-card);letter-spacing:0} .dhead h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .dhead span{font-size:var(--t-eyebrow)} .qcard .qn{font-size:var(--t-eyebrow)} .qcard q{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .qcard .ab small{font-size:var(--t-tag);letter-spacing:.12em} .qcard .ab span{font-size:var(--t-note);letter-spacing:0} .tt-row > div{font-size:var(--t-prose);letter-spacing:0} .tt-row.th > div{font-size:var(--t-tag);letter-spacing:.12em} .chartcard .leg{font-size:var(--t-note);letter-spacing:0} .lvtag{font-size:var(--t-tag)} .rp-now{font-size:var(--t-note);letter-spacing:0} .rp-top{font-size:var(--t-eyebrow);letter-spacing:.12em} .rpanel .rrow b{font-size:var(--t-lede);letter-spacing:0} .rpanel .rrow span{font-size:var(--t-note);letter-spacing:0} .vt-tx{font-size:var(--t-prose);letter-spacing:0} .vt-tx::before{font-size:var(--t-tag)} .gd-l{font-size:var(--t-tag);letter-spacing:.12em} .gdock .pchip{font-size:var(--t-note);letter-spacing:0} .lf-head h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .lf-head p{font-size:var(--t-prose);letter-spacing:0} .lf-pill{font-size:var(--t-eyebrow);letter-spacing:.12em} .livefeed .lb-feed{font-size:var(--t-note);letter-spacing:0} .pcol .grp h4{font-size:var(--t-tag)} .pcol .grp .pl{font-size:var(--t-tag)} #value .head .h2{font-family:var(--font-h);font-size:var(--t-section);line-height:1.1;font-weight:800;letter-spacing:-.025em} #value .head .lede{font-family:var(--font);font-size:var(--t-lede);line-height:1.7;letter-spacing:0} #value .vt-row > div{font-size:var(--t-note);letter-spacing:0} #value .vt-head > div{font-size:var(--t-tag)} #value .vt-o{font-size:var(--t-lede);letter-spacing:0} #value .vt-i b{font-size:var(--t-prose);letter-spacing:0} #value .vt-i span{font-size:var(--t-tag)} #value .vt-t .mk,#value .vt-a .mk{font-size:var(--t-tag)} .ogrp h5{font-size:var(--t-tag);letter-spacing:.12em} .pcol.out .ogrp .pl{font-size:var(--t-note);letter-spacing:0} .pcol.out .ogrp .ot b{font-size:var(--t-note);letter-spacing:0} .pcol.out .ogrp .ot small{font-size:var(--t-tag)} .otm em{font-size:var(--t-tag)} .lc-head small{font-size:var(--t-tag)} .lcard .lpromise{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .lcard .sublens{font-size:var(--t-note);letter-spacing:0} .lcard .sublens i{font-size:var(--t-tag)} .lcard .sublens b{font-size:var(--t-note);letter-spacing:0} .lcard .sublens span{font-size:var(--t-note);letter-spacing:0} .ap-t small{font-size:var(--t-tag);letter-spacing:.12em} .ap-t b{font-size:var(--t-note);letter-spacing:0} .ap-t span{font-size:var(--t-tag)} .mascot .ag-pop b{font-size:var(--t-note);letter-spacing:0} .kpi2 small{font-size:var(--t-tag);letter-spacing:.12em} .kpi2 b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .kpi2 .kd{font-size:var(--t-eyebrow)} .kpi2 em{font-size:var(--t-note);letter-spacing:0} .wt-row{font-size:var(--t-note);letter-spacing:0} .wt-row.th{font-size:var(--t-tag);letter-spacing:.12em} .wt-row small{font-size:var(--t-tag)} .wt-row .wh{font-size:var(--t-eyebrow)} .tl .tt{font-size:var(--t-eyebrow)} .tl p{font-size:var(--t-note);letter-spacing:0} .tl small{font-size:var(--t-tag)} .tg2,.ip{font-size:var(--t-tag);letter-spacing:.12em} .srcbox h4{font-size:var(--t-tag);letter-spacing:.12em} .srcbox span{font-size:var(--t-note);letter-spacing:0} .mb-top{font-size:var(--t-tag)} .mbrief h4{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .mbrief li{font-size:var(--t-note);letter-spacing:0} .mbrief li::before{font-size:var(--t-eyebrow)} .mb-dec small{font-size:var(--t-tag)} .mb-dec p{font-size:var(--t-prose);letter-spacing:0} .mb-foot{font-size:var(--t-tag)} .d30 small{font-size:var(--t-tag);letter-spacing:.12em} .d30 b{font-size:var(--t-lede);letter-spacing:0} .d30 p{font-size:var(--t-note);letter-spacing:0} .scta small{font-size:var(--t-tag)} .scta h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .scta p{font-size:var(--t-note);letter-spacing:0} .tl .tt{font-size:var(--t-tag)} .vx-ot b{font-size:var(--t-prose);letter-spacing:0} .vx-ot small{font-size:var(--t-note);letter-spacing:0} .vx-h small{font-size:var(--t-tag)} .vx-h h3{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .vx-seg button{font-size:var(--t-note);letter-spacing:0} .vx-kpi small{font-size:var(--t-tag)} .vx-kpi b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .vx-kpi span{font-size:var(--t-eyebrow)} .vx-axis{font-size:var(--t-tag)} .vx-m b{font-size:var(--t-note);letter-spacing:0} .vx-m small{font-size:var(--t-tag)} .vx-c .mk{font-size:var(--t-tag)} .vx-c small{font-size:var(--t-tag)} .vx-c p{font-size:var(--t-note);letter-spacing:0} .vx-foot{font-size:var(--t-tag)} .vx-st i{font-size:var(--t-tag)} .vx-st b{font-size:var(--t-note);letter-spacing:0} .vx-st small{font-size:var(--t-tag)} .vx-rail::before{font-size:var(--t-tag)} .vx-kpi b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .dhead span{font-size:var(--t-tag);letter-spacing:.12em} .dash-kpis b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .mascot .ag-pop b{font-size:var(--t-note);letter-spacing:0} .mascot .ap-t span{font-size:var(--t-tag)} .nav .mpanel a{font-size:var(--t-prose);letter-spacing:0} .bk-steps li{font-size:var(--t-prose);letter-spacing:0} .bk-steps b{font-size:var(--t-eyebrow);letter-spacing:.12em} .bk-note{font-size:var(--t-note);letter-spacing:0} .bkform label{font-size:var(--t-note);letter-spacing:0} .bkform input,.bkform select,.bkform textarea{font-size:var(--t-prose);letter-spacing:0} .bk-msg{font-size:var(--t-note);letter-spacing:0} .bk-h{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .jn{font-size:var(--t-eyebrow)} .journey small{font-size:var(--t-tag);letter-spacing:.12em} .journey b{font-size:var(--t-lede);letter-spacing:0} .journey p{font-size:var(--t-note);letter-spacing:0} .tierhead h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .billtog button{font-size:var(--t-note);letter-spacing:0} .billtog button em{font-size:var(--t-tag)} .tier .scope{font-size:var(--t-eyebrow);letter-spacing:.12em;border-right:0} .tier .bill{font-size:var(--t-note);letter-spacing:0} .tier .tpr small.from{font-size:var(--t-note);letter-spacing:0} .incl span{font-size:var(--t-eyebrow)} .incl b{font-size:var(--t-lede);letter-spacing:0} .allinc span{font-size:var(--t-tag);letter-spacing:.12em} .allinc b{font-size:var(--t-note);letter-spacing:0} .cr-l h3,.est-in h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .cr-l p{font-size:var(--t-prose);letter-spacing:0} .cr-r b{font-size:var(--t-prose);letter-spacing:0} .cr-r small{font-size:var(--t-note);letter-spacing:0} .cr-r em{font-size:var(--t-card);letter-spacing:0} .cr-r em small{font-size:var(--t-note);letter-spacing:0} .est-in label span{font-size:var(--t-note);letter-spacing:0} .est-in label b{font-size:var(--t-note);letter-spacing:0} .est-out > small{font-size:var(--t-tag)} .eo-plan b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .eo-plan span{font-size:var(--t-note);letter-spacing:0} .eo-pr span{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .eo-pr small{font-size:var(--t-prose);letter-spacing:0} .eo-bars div{font-size:var(--t-note);letter-spacing:0} .eo-bars em{font-size:var(--t-eyebrow)} .eo-note{font-size:var(--t-note);letter-spacing:0} .eo-fine{font-size:var(--t-eyebrow)} .bn-l h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .bn-l p{font-size:var(--t-prose);letter-spacing:0} .bn-r span{font-size:var(--t-note);letter-spacing:0} .bn-r em{font-size:var(--t-lede);letter-spacing:0} .bn-r small{font-size:var(--t-note);letter-spacing:0} .bn-src{font-size:var(--t-eyebrow)} .trustrow b{font-size:var(--t-note);letter-spacing:0} .trustrow small{font-size:var(--t-note);letter-spacing:0} .case-nav small{font-size:var(--t-tag)} .case-nav b{font-size:var(--t-prose);letter-spacing:0} .case-nav span{font-size:var(--t-note);letter-spacing:0} .c-no{font-size:var(--t-eyebrow)} .c-tag{font-size:var(--t-eyebrow);letter-spacing:.12em} .c-anon{font-size:var(--t-note);letter-spacing:0} .c-q{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .c-meta dt{font-size:var(--t-tag);letter-spacing:.12em} .c-meta dd{font-size:var(--t-note);letter-spacing:0} .c-stats b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .c-stats span{font-size:var(--t-note);letter-spacing:0} .cv-chrome{font-size:var(--t-eyebrow)} .hs em{font-size:var(--t-note);letter-spacing:0} .cv-stamp{font-size:var(--t-tag);letter-spacing:.12em} .cv-cap small{font-size:var(--t-tag)} .cv-cap h4{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .cv-cap p{font-size:var(--t-note);letter-spacing:0} .cv-th{font-size:var(--t-note);letter-spacing:0} .cv-ctl button{font-size:var(--t-note);letter-spacing:0} .c-story small,.c-finds > small,.c-flow > small,.c-out small{font-size:var(--t-tag);letter-spacing:.12em} .c-story p{font-size:var(--t-lede);letter-spacing:0} .c-story li{font-size:var(--t-prose);letter-spacing:0} .cf b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .cf em{font-size:var(--t-tag);letter-spacing:.12em} .cf p{font-size:var(--t-note);letter-spacing:0} .c-flow b{font-size:var(--t-tag);letter-spacing:.12em} .c-flow strong{font-size:var(--t-lede);letter-spacing:0} .c-flow span{font-size:var(--t-note);letter-spacing:0} .c-out p{font-size:var(--t-lede);letter-spacing:0} .case-note{font-size:var(--t-note);letter-spacing:0} .ml-h{font-size:var(--t-tag);letter-spacing:.12em} #megaList a .tx b{font-size:var(--t-prose);letter-spacing:0} #megaList a .tx span{font-size:var(--t-note);letter-spacing:0} .ml-meta em{font-size:var(--t-note);letter-spacing:0} .ml-meta small{font-size:var(--t-tag);letter-spacing:.12em} .mega-r .mp-tag{font-size:var(--t-tag)} .mega-r h5{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .mp-live{font-size:var(--t-tag);letter-spacing:.12em} .mp-feed{font-size:var(--t-note);letter-spacing:0} .mp-ago{font-size:var(--t-tag)} .mp-kpi small{font-size:var(--t-tag)} .mp-kpi b{font-size:var(--t-lede);letter-spacing:0} .mp-rv i{font-size:var(--t-tag)} .mp-rv em{font-size:var(--t-note);letter-spacing:0} .mega-r .mp-go{font-size:var(--t-note);letter-spacing:0} .mega-f{font-size:var(--t-note);letter-spacing:0} .pb-l b{font-size:var(--t-lede);letter-spacing:0} .pb-l span{font-size:var(--t-note);letter-spacing:0} .pb-who li{font-size:var(--t-note);letter-spacing:0} .pc-badge{font-size:var(--t-tag);letter-spacing:.12em} .pc-tag{font-size:var(--t-tag)} .pc-body h3{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .pc-stats b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .pc-stats span{font-size:var(--t-note);letter-spacing:0} .pc-find{font-size:var(--t-note);letter-spacing:0} .pc-go{font-size:var(--t-note);letter-spacing:0} .ww-lead small{font-size:var(--t-tag);letter-spacing:.12em} .ww-lead b{font-size:var(--t-lede);letter-spacing:0} .ww-steps b{font-size:var(--t-note);letter-spacing:0} .ww-steps small{font-size:var(--t-note);letter-spacing:0} .mt-badge{font-size:var(--t-tag);letter-spacing:.12em} .mt-h b{font-size:var(--t-lede);letter-spacing:0} .mt-h small{font-size:var(--t-note);letter-spacing:0} .mt-col li{font-size:var(--t-note);letter-spacing:0} .mt-f{font-size:var(--t-eyebrow);letter-spacing:.12em} .sn-pts li{font-size:var(--t-note);letter-spacing:0} .snform label{font-size:var(--t-note);letter-spacing:0} .snform input,.snform select{font-size:var(--t-prose);letter-spacing:0} .sp-h b{font-size:var(--t-prose);letter-spacing:0} .sp-h em{font-size:var(--t-tag);letter-spacing:.12em} .sp-row b{font-size:var(--t-note);letter-spacing:0} .sp-row span{font-size:var(--t-eyebrow)} .sp-row em{font-size:var(--t-tag);letter-spacing:.12em} .sn-fine{font-size:var(--t-note);letter-spacing:0} .sn-msg{font-size:var(--t-note);letter-spacing:0} .sn-done b{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .sn-done p{font-size:var(--t-prose);letter-spacing:0} .sc-t b{font-size:var(--t-note);letter-spacing:0} .sc-t em{font-size:var(--t-note);letter-spacing:0} .sc-in .btn{font-family:var(--font);font-size:var(--t-button);font-weight:600;letter-spacing:0} .sc-x{font-size:var(--t-row);letter-spacing:0} @media (max-width:420px){.snap .h2{font-family:var(--font-h);font-size:var(--t-section);line-height:1.1;font-weight:800;letter-spacing:-.025em}} .cv-h span{font-size:var(--t-tag);letter-spacing:.12em} .cv-h b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .mt-cov.us .cv-h b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .cv-h em{font-size:var(--t-note);letter-spacing:0} .mt-cov small{font-size:var(--t-note);letter-spacing:0} .cs-track span{font-size:var(--t-tag)} .fp-a b{font-size:var(--t-prose);letter-spacing:0} .fp-a p{font-size:var(--t-note);letter-spacing:0} .fp-t li{font-size:var(--t-note);letter-spacing:0} .cta-note{font-size:var(--t-note);letter-spacing:0} @media (max-width:1180px){.nav-cta{font-family:var(--font);font-size:var(--t-button);font-weight:600;letter-spacing:0}} .cn-h small{font-size:var(--t-tag);letter-spacing:.12em} .cn-h b{font-size:var(--t-lede);letter-spacing:0} .cn-h span{font-size:var(--t-note);letter-spacing:0} .pr-k{font-size:var(--t-eyebrow);letter-spacing:.12em} .practice h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .pr-copy>p{font-size:var(--t-lede);letter-spacing:0} .pr-tot b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .pr-tot span{font-size:var(--t-note);letter-spacing:0} .pr-how b{font-size:var(--t-note);letter-spacing:0} .pr-how b::before{font-size:var(--t-tag)} .pr-how span{font-size:var(--t-note);letter-spacing:0} .pa-top b{font-size:var(--t-prose);letter-spacing:0} .pa-top small{font-size:var(--t-note);letter-spacing:0} .pa-tag{font-size:var(--t-tag);letter-spacing:.12em} .pa-scan{font-size:var(--t-note);letter-spacing:0} .pa-l1{font-size:var(--t-note);letter-spacing:0} .pa-l1 .c-blurname{font-size:var(--t-note);letter-spacing:0} .pa-l1 em{font-size:var(--t-tag)} .pa-tr{font-size:var(--t-note);letter-spacing:0} .pa-sv,.pa-dl{font-size:var(--t-note);letter-spacing:0} .pa-own{font-size:var(--t-eyebrow)} .pa-foot b{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .pa-foot span{font-size:var(--t-eyebrow)} .pa-note{font-size:var(--t-eyebrow)} .pc-list li{font-size:var(--t-note);letter-spacing:0} .pc-list small{font-size:var(--t-tag)} .pc-list b{font-size:var(--t-note);letter-spacing:0} .pg4 .pc-body h3{font-size:var(--t-lede);letter-spacing:0} .c-pager span{font-size:var(--t-tag);letter-spacing:.12em} .c-pager b{font-size:var(--t-prose);letter-spacing:0} .bk-facts b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .bk-facts span{font-size:var(--t-note);letter-spacing:0} .bk-h{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .bk-p{font-size:var(--t-lede);letter-spacing:0} .bd-top{font-size:var(--t-note);letter-spacing:0} .bd-logo{font-size:var(--t-note);letter-spacing:0} .bd-ex{font-size:var(--t-tag);letter-spacing:.12em} .bd-q small{font-size:var(--t-tag);letter-spacing:.12em} .bd-q b{font-size:var(--t-lede);letter-spacing:0} .bd-list em{font-size:var(--t-eyebrow)} .bd-list b{font-size:var(--t-note);letter-spacing:0} .bd-list span{font-size:var(--t-note);letter-spacing:0} .bd-list i{font-size:var(--t-eyebrow)} .bd-dec small{font-size:var(--t-tag);letter-spacing:.12em} .bd-dec p{font-size:var(--t-prose);letter-spacing:0} .bd-foot{font-size:var(--t-note);letter-spacing:0} .bk-tl b{font-size:var(--t-eyebrow);letter-spacing:.12em} .bk-tl strong{font-size:var(--t-prose);letter-spacing:0} .bk-tl span{font-size:var(--t-note);letter-spacing:0} .bk-yes li,.bk-no li{font-size:var(--t-prose);letter-spacing:0} .bk-guar b{font-size:var(--t-lede);letter-spacing:0} .bk-guar p{font-size:var(--t-prose);letter-spacing:0} .bk-faq summary{font-size:var(--t-prose);letter-spacing:0} .bk-faq summary::after{font-size:var(--t-card);letter-spacing:0} .bk-faq p{font-size:var(--t-prose);letter-spacing:0} .bk-proof small{font-size:var(--t-tag);letter-spacing:.12em} .bk-proof b{font-size:var(--t-lede);letter-spacing:0} .bk-proof span{font-size:var(--t-note);letter-spacing:0} .bf-h b{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .bf-h small{font-size:var(--t-note);letter-spacing:0} .bf-int legend{font-size:var(--t-note);letter-spacing:0} .bf-int span{font-size:var(--t-note);letter-spacing:0} .bf-int span small{font-size:var(--t-eyebrow)} .bf-priv{font-size:var(--t-note);letter-spacing:0} .bf-alt b{font-size:var(--t-note);letter-spacing:0} .bf-alt span{font-size:var(--t-note);letter-spacing:0} @media (max-width:640px){.kpi .ill,.vx-axis span,.cv-h span,.c-meta dt,.cv-stamp,.cv-n,.billtog em,.est-out small,.dash-top .stamp-c,.chips2 .pl,.pa-l1 em{font-size:var(--t-eyebrow)}} .closing h2.h2{font-family:var(--font-h);font-size:var(--t-section);line-height:1.1;font-weight:800;letter-spacing:-.025em} .closing .lede{font-family:var(--font);font-size:var(--t-lede);line-height:1.7;letter-spacing:0} @media (max-width:640px){.closing .trustrow b{font-size:var(--t-note);letter-spacing:0}} @media (max-width:640px){.closing .trustrow small{font-size:var(--t-note);letter-spacing:0}} .abm small{font-size:var(--t-eyebrow);letter-spacing:.12em} .abm b{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .abm p{font-size:var(--t-prose);letter-spacing:0} .ab-h{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .ab-copy>p{font-size:var(--t-lede);letter-spacing:0} .ab-facts b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .ab-facts span{font-size:var(--t-note);letter-spacing:0} .fd-av{font-size:var(--t-lede);letter-spacing:0} .fd b{font-size:var(--t-lede);letter-spacing:0} .fd small{font-size:var(--t-eyebrow);letter-spacing:.12em} .fd p{font-size:var(--t-note);letter-spacing:0} .fd a{font-size:var(--t-note);letter-spacing:0} .ab-entity{font-size:var(--t-note);letter-spacing:0} .trc b{font-size:var(--t-lede);letter-spacing:0} .trc p{font-size:var(--t-prose);letter-spacing:0} .tr-proc h3{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .tr-proc p{font-size:var(--t-prose);letter-spacing:0} .tr-priv h3{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .tr-priv dt{font-size:var(--t-eyebrow);letter-spacing:.12em} .tr-priv dd{font-size:var(--t-prose);letter-spacing:0} @media (max-width:420px){.gdock .pchip span{font-size:var(--t-note);letter-spacing:0}} @media (max-width:420px){.gdock .pchip span{font-size:var(--t-note);letter-spacing:0}} .qa-t{font-size:var(--t-eyebrow)} .tg-new{font-size:var(--t-tag);letter-spacing:.12em} .src-n{font-size:var(--t-tag)} .src-live{font-size:var(--t-eyebrow)} .mb-src{font-size:var(--t-tag)} .fnl-sum b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .fnl-sum span{font-size:var(--t-note);letter-spacing:0} .fnl-sum .fs0::after,.fnl-sum .fs1::after,.fnl-sum .fs2::after{font-size:var(--t-eyebrow)} .fnl .wk{font-size:var(--t-eyebrow)} .fp-wk{font-size:var(--t-eyebrow);letter-spacing:.12em} .fp-fun>div{font-size:var(--t-note);letter-spacing:0} .fp-fun em{font-size:var(--t-eyebrow)} .fp-top small{font-size:var(--t-tag);letter-spacing:.12em} .fp-tag{font-size:var(--t-tag);letter-spacing:.12em} .fp-txt{font-size:var(--t-prose);letter-spacing:0} .fp-route{font-size:var(--t-note);letter-spacing:0} .fp-cmp small{font-size:var(--t-tag);letter-spacing:.12em} .fp-cmp b{font-size:var(--t-note);letter-spacing:0} .pov li{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .pov li span{font-size:var(--t-eyebrow)} .ab-h{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .ab-lead-h p{font-size:var(--t-lede);letter-spacing:0} .op li+li::after{font-size:var(--t-eyebrow)} .op-n{font-size:var(--t-eyebrow)} .op b{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .op p{font-size:var(--t-prose);letter-spacing:0} .op small{font-size:var(--t-eyebrow);letter-spacing:.12em} .ab-num b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .ab-num span{font-size:var(--t-note);letter-spacing:0} .ld-mono{font-size:var(--t-row);letter-spacing:0} .ld-top b{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .ld-top small{font-size:var(--t-note);letter-spacing:0} .ld p{font-size:var(--t-prose);letter-spacing:0} .ld-tags li{font-size:var(--t-note);letter-spacing:0} .ld-foot{font-size:var(--t-note);letter-spacing:0} .ab-co dt{font-size:var(--t-eyebrow);letter-spacing:.12em} .ab-co dd{font-size:var(--t-prose);letter-spacing:0} .ab-cta b{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .ab-cta p{font-size:var(--t-prose);letter-spacing:0} .ab-l{font-size:var(--t-note);letter-spacing:0} .legal-prose{font-size:var(--t-lede);letter-spacing:0} .legal-prose h2{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .legal-prose h3{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .legal-prose table{font-size:var(--t-prose);letter-spacing:0} .legal-prose th{font-size:var(--t-eyebrow);letter-spacing:.12em} /* --- spots site.css sets with !important or relative units --- */ .dash-kpis b{font-size:var(--t-card)!important} .bkform label small{font-size:var(--t-note)} @media (max-width:420px){.gdock .pchip[aria-selected="true"] span{max-width:130px}} /* ========================================================================== 00 LOGO, from V1 (public/ui-kit.html, section 00). Files: public/assets-brand/ ========================================================================== */ .brand-logo{display:block;height:22px;width:auto} /* --- footer bottom links: no underline --- */ .fbot a{text-decoration:none} /* ========================================================================== 02 BUTTONS, TICKER, CLOSING, FOOTER, structure and sizes from V1 (parts/front-tw/desk/cta-dark, ticker, footer), copy from V2. Colours are V1's until the colour pass decides the final tokens. ========================================================================== */ :root{--brand:#345EEA;--brand-deep:#2447C8;--signal:#A3B6FF} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Action: one accent button. Second path: one ringed link. */ .btn-accent{padding-inline:28px;background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(13,21,38,.12);transition:background-color .2s} .btn-accent:hover{background:var(--brand-deep)} .btn-go{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--font);font-size:var(--t-button);font-weight:600;color:#fff} .btn-go__ring{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:999px;border:1px solid rgba(255,255,255,0.35);transition:background-color .25s,border-color .25s} .btn-go__ring svg{width:16px;height:16px;transform:rotate(-45deg);transition:transform .25s} .btn-go:hover .btn-go__ring{background:var(--brand);border-color:var(--brand)} .btn-go:hover .btn-go__ring svg{transform:rotate(0)} /* Ticker */ .mq{position:relative;overflow:hidden;width:100%;border-block:1px solid rgba(255,255,255,0.1)} .mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:8rem;pointer-events:none} .mq::before{left:0;background:linear-gradient(90deg,var(--deep),transparent)} .mq::after{right:0;background:linear-gradient(270deg,var(--deep),transparent)} .mq__track{display:flex;align-items:center;width:max-content;padding:1.1rem 0;animation:mq 50s linear infinite reverse} .mq:hover .mq__track{animation-play-state:paused} .mq__item{display:inline-flex;align-items:center;gap:.6rem;padding:0 2rem;white-space:nowrap;font-size:var(--t-prose);font-weight:500;color:rgba(255,255,255,0.9)} .mq__item svg{flex:none;width:14px;height:14px;color:var(--signal)} .mq__when{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.5)} .mq__sep{flex:none;width:1rem;height:1px;background:rgba(255,255,255,0.35)} @keyframes mq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.mq{overflow-x:auto}.mq__track{animation:none}} /* Closing */ .closing{padding-bottom:0} .closing .ctas{gap:.75rem 2rem;align-items:center;margin-top:22px} .closing-main{padding-bottom:56px} .closing .bigeyes{width:52px;margin-bottom:2px} .closing .closing-ticker{display:block;gap:0;justify-items:normal} @media (max-width:640px){.closing .ctas{align-items:center;max-width:none}} /* Footer: six equal columns */ footer{border-top:0} footer .wrap{padding-top:48px} .ftop{grid-template-columns:repeat(6,minmax(0,1fr))} .ftop>div:first-child{grid-column:auto} @media (max-width:1100px){.ftop{grid-template-columns:repeat(3,minmax(0,1fr))}.ftop>div:first-child{grid-column:auto}} @media (max-width:640px){.ftop{grid-template-columns:1fr 1fr}} /* Footer text: colours from V1's footer, sizes from the kit's roles */ .ftop h4{font-family:var(--mono);font-size:var(--t-eyebrow);line-height:1.5;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:16px} .ftop a{font-size:var(--t-note);color:rgba(255,255,255,0.68)} .ftop a:hover{color:#fff} .fbot{align-items:center;border-top-color:rgba(255,255,255,0.1)} .fbot>span:first-child{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.025em;color:rgba(255,255,255,0.6)} .fbot>span:last-child{font-size:var(--t-note);color:rgba(255,255,255,0.6)} .fbot a{transition:color .2s} .fbot a:hover{color:#fff} /* Footer legal links: plain row with even gaps, as in V1 */ .fbot>span:last-child{display:flex;flex-wrap:wrap;gap:4px 24px} /* Closing: a little more top space, V1's light from the top edge and faint colour wash (cta-dark) */ .closing{position:relative;overflow:clip;padding-top:clamp(44px,5vw,72px)} .closing::before{content:"";position:absolute;top:-14rem;left:50%;width:46rem;max-width:100%;height:28rem;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(52,94,234,.55),rgba(52,94,234,.18) 55%,transparent);filter:blur(30px);-webkit-mask-image:linear-gradient(transparent 50%,#000 72%);mask-image:linear-gradient(transparent 50%,#000 72%)} .closing::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background:radial-gradient(50% 70% at 0% 45%,rgba(52,94,234,.35),transparent 70%),radial-gradient(40% 60% at 100% 35%,rgba(163,182,255,.22),transparent 70%);-webkit-mask-image:linear-gradient(#000 55%,transparent 95%);mask-image:linear-gradient(#000 55%,transparent 95%)} .closing>.wrap{position:relative;z-index:1} /* ========================================================================== STATUS colours: ticks, crosses, up and down, form messages, live dots. Kept apart from the sector colours. ========================================================================== */ :root{--ok:#3AD07D;--ok-soft:rgba(58,208,125,.16);--alert:#F87171;--alert-soft:rgba(248,113,113,.14);--warn:#FCD34D;--info:#60A5FA} .day{--ok:#1F7A45;--ok-soft:#E3F6EA;--alert:#B23246;--alert-soft:#FDE8EB;--warn:#8A6500;--info:#345EEA} .day .memo,.night-card{--ok:#3AD07D;--ok-soft:rgba(58,208,125,.16);--alert:#F87171;--alert-soft:rgba(248,113,113,.14);--warn:#FCD34D;--info:#60A5FA} .live-dot,.mp-live i{background:var(--ok)} .day .cv-live{color:#3AD07D} .trace .ok,.kpi em,.lb-metrics em.up,.kpi2 .kd,.bk-msg.ok,.cv-live,.mp-live{color:var(--ok)} .kpi em.dn,.kpi2.dn .kd,.bk-msg.no,.sn-msg.no{color:var(--alert)} .bkform input.err{border-color:var(--alert)} .tier li::before{border-color:var(--ok)} .allinc b::before{background:var(--ok)} .bk-yes li::before{background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)} .bk-yes li::after{border-color:var(--ok)} .mt-col li.yes::before{background-color:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)} .mt-col li.no::before{background-color:var(--alert-soft);box-shadow:inset 0 0 0 1px var(--alert)} /* ========================================================================== 04 COLOUR. Blues, periwinkle, darks, whites and greys come from V1; mint, amber, rose, purple and sky from V2. site.css and site.js carry these same values. Canvas code in site.js needs plain hex, so it cannot use the vars. Before and after, and how to undo: docs/color-migration-2026-11-04/CHANGES.md ========================================================================== */ :root{ --c-primary:#345EEA;--c-secondary:#5B7CF0;--c-deep:#2447C8; --c-signal:#A3B6FF;--c-signal-soft:#DFE3FF; --c-black:#02050E;--c-ink:#061234;--c-navy:#0D193A;--c-panel:#111F48;--c-rule-dark:#1E2B52; --c-white:#FFFFFF;--c-paper:#F8F9FB;--c-light-gray:#F3F5F7;--c-rule:#E5E7EB; --c-body:#46566E;--c-gray:#5B6E8A; --c-mint-soft:#E6FFFA;--c-mint-light:#8FF5E3;--c-mint:#5EEAD4;--c-mint-mid:#14B8A6;--c-mint-deep:#0F766E; --c-amber-soft:#FEF3C7;--c-amber-light:#FFD58A;--c-amber:#E5B43B;--c-amber-deep:#A87A12;--c-orange:#F2A65A; --c-rose-soft:#FFE4E6;--c-rose:#F2738A;--c-rose-deep:#C8344F; --c-purple:#B38CFF;--c-purple-deep:#6D4FE0; --c-sky:#55D4FF;--c-sky-deep:#0EA5C6; } /* One fixed colour per sector. SECT in site.js holds the same five values. */ .sector-financial{--sector:var(--c-signal)} .sector-automotive{--sector:var(--c-amber)} .sector-energy{--sector:var(--c-mint)} .sector-retail{--sector:var(--c-rose)} .sector-pharma{--sector:var(--c-sky)} /* ========================================================================== 03 HEADING HIERARCHY Tags follow each page's outline; these rules keep every moved title on the type role it already had. Token values and role definitions stay in 01. - h2/h3/h4 rules below are the site.css + section 01 rules of the same block, copied in source order for the tag the block uses now. - .h-wrap: a heading around a title element keyed by b/strong/small/q/.eyebrow. It generates no box, so the title keeps its own role and layout. - *-lbl: small labels that were heading tags (diagram groups, dashboard and footer column labels). They keep the label look without being headings. ========================================================================== */ .h-wrap{display:contents;font:inherit;letter-spacing:inherit;text-wrap:inherit} .practice .h-wrap{font:inherit;letter-spacing:inherit;color:inherit} h3.lpromise{text-wrap:wrap} .p-lbl,.s-lbl,.sc-lbl,.f-lbl,.m-lbl{margin:0;text-wrap:balance;font-family:var(--font-h);font-weight:500;letter-spacing:-.035em} .o-lbl,.d-lbl,.mg-lbl{font-family:var(--font-h)} .mpanel .m-lbl{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:6px} .pcol .p-lbl{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.1em;text-transform:uppercase;color:var(--peri);font-weight:500;margin-bottom:4px} @media (max-width:980px){.pcol .p-lbl{grid-column:1/-1}} .sblock .s-lbl{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.1em;text-transform:uppercase;color:var(--hue);font-weight:500;margin-bottom:12px} .ftop .f-lbl{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:12px} .pcol .grp .p-lbl{display:flex;justify-content:space-between;gap:10px;margin-bottom:2px} .pcol .grp .p-lbl em{font-style:normal;color:var(--faint);letter-spacing:.02em;text-transform:none} .dash-side .d-lbl{margin:0;font-family:var(--mono);font-size:var(--t-tag);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500} .tier h3{font-size:20px;font-weight:700;letter-spacing:-.02em} .mega-r .mg-lbl{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff} .pcol .grp .p-lbl .ic{width:14px;height:14px;color:var(--gc);margin-right:6px;display:inline-block;vertical-align:-2px} .rep-body h2{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0} .pcol .grp .p-lbl{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:6px 10px 6px 8px;border-radius:9px;background:linear-gradient(90deg,color-mix(in srgb,var(--gc) 22%,transparent),transparent);box-shadow:inset 2px 0 0 var(--gc);color:#fff;justify-content:flex-start} .pcol .grp .p-lbl span{display:flex;align-items:center;gap:8px} .pcol .grp .p-lbl .ic{color:var(--gc);margin:0} .scopy .sblock .s-lbl{display:flex;align-items:center;gap:8px} .lf-head h2{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:14px 0 10px} .pcol .grp .p-lbl{font-size:var(--t-tag);padding:4px 9px 4px 7px;margin-bottom:2px;border-radius:7px} .pcol .grp .p-lbl .ic{width:12px;height:12px} .ogrp .o-lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:var(--t-tag);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#ffffff;padding:4px 9px 4px 7px;border-radius:7px;background:linear-gradient(90deg,color-mix(in srgb,var(--gc) 22%,transparent),transparent);box-shadow:inset 2px 0 0 var(--gc)} .ogrp .o-lbl span{display:flex;align-items:center;gap:7px} .ogrp .o-lbl .ic{width:12px;height:12px;color:var(--gc)} .ogrp .o-lbl em{font-style:normal;color:var(--faint);letter-spacing:.06em;text-transform:none} .ogrp .o-lbl{margin:0 0 2px} .srcbox .sc-lbl{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--t-tag);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--fg);margin:0 0 12px} .srcbox .sc-lbl .ic{width:15px;height:15px;color:var(--hue)} .mbrief h2{font-size:21px;letter-spacing:-.02em;font-weight:700;margin:14px 0 10px} .cv-cap h2{font-size:18px;font-weight:700;letter-spacing:-.015em;margin:6px 0 6px;color:#fff} .c-finds > .h-wrap > small,.c-flow > .h-wrap > small{display:block;font-family:var(--mono);font-size:var(--t-tag);letter-spacing:.1em;text-transform:uppercase;color:var(--peri);margin-bottom:10px} .mega-r .mg-lbl{font-size:18px;margin-top:2px} .pc-body h4{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.02em;font-weight:700;text-wrap:balance} .practice h2 em{font-style:normal;background:linear-gradient(90deg,#a3b6ff,#8ff5e3);-webkit-background-clip:text;background-clip:text;color:transparent} .pg4 .pc-body h4{font-size:16.5px} .sd-light .dhead h2{color:#0d193a} .sd-light .srcbox .sc-lbl{color:#0d193a} .sd-light .srcbox .sc-lbl .ic{color:var(--hd)} .sd-light .srcbox .sc-lbl{justify-content:flex-start} .fnl .dhead h2 em{font-style:normal;color:var(--hue)} .mpanel .m-lbl{font-size:var(--t-eyebrow);letter-spacing:.12em} .pcol .p-lbl{font-size:var(--t-eyebrow);letter-spacing:.12em} .sblock .s-lbl{font-size:var(--t-eyebrow);letter-spacing:.12em} .ftop .f-lbl{font-size:var(--t-eyebrow);letter-spacing:.12em} .dash-side .d-lbl{font-size:var(--t-tag);letter-spacing:.12em} .tier h3{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .mega-r .mg-lbl{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .rep-body h2{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .lf-head h2{font-family:var(--font-h);font-size:var(--t-sub);line-height:1.2;font-weight:800;letter-spacing:-.02em} .pcol .grp .p-lbl{font-size:var(--t-tag)} .ogrp .o-lbl{font-size:var(--t-tag);letter-spacing:.12em} .srcbox .sc-lbl{font-size:var(--t-tag);letter-spacing:.12em} .mbrief h2{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} .cv-cap h2{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .c-finds > .h-wrap > small,.c-flow > .h-wrap > small{font-size:var(--t-tag);letter-spacing:.12em} .mega-r .mg-lbl{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .pc-body h4{font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em} .pg4 .pc-body h4{font-size:var(--t-lede);letter-spacing:0} .ftop .f-lbl{font-family:var(--mono);font-size:var(--t-eyebrow);line-height:1.5;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:16px} /* ========================================================================== 05 HEADING COLOUR AND EYEBROW Every heading is one colour: white on dark surfaces, --c-ink on light ones. Accent parts inside a heading inherit the heading's colour. Numbers, labels and eyebrows keep theirs. Undo by removing this section. ========================================================================== */ .h2 em,.hero h1 .g,.bk-h em,.ab-h em,.fnl .dhead h2 em{color:inherit} .practice h2 em{color:inherit;background:none;-webkit-background-clip:border-box;background-clip:border-box} .ab-h,.op b,.sd-light .d30 b,.sd-light .dhead h2,.sd-light .qcard q,.pov li,.pov li b{color:var(--c-ink)} .pov li b{font-weight:inherit} /* Eyebrow: no leading line, and no trailing line on centred heads */ .eyebrow::before,.head.center .eyebrow::after{content:none} /* ========================================================================== 06 BACKGROUND Stars show in the home hero only; sub-page heads and every dark area are plain dark. All rules hang on html.stars-hero, which site.js sets. To bring the full-page starfield back, set STARS_HERO_ONLY to false in site.js: the class goes away and these rules with it. Nothing here needs deleting. ========================================================================== */ /* Canvas scrolls away with the hero; site.js sets its height. The canvas carries the hero's dark gradient too, so stars and gradient fade out together before the hero's bottom edge, on any hero height. */ .stars-hero #cosmos{position:absolute;background:linear-gradient(180deg,var(--c-ink),var(--c-black));-webkit-mask-image:linear-gradient(#000 55%,transparent 94%);mask-image:linear-gradient(#000 55%,transparent 94%)} /* Replaces the old full-page colour wash of site.css. Same colour as the closing block. */ .stars-hero body{background:var(--c-black)} /* Dark sections: black at both edges, so they meet the light sheets and the closing block without a seam. On a layer behind the content, so a shadow from the section above still shows over it. */ .stars-hero main>.sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--c-black),var(--c-ink) 50%,var(--c-black))} /* Closing: its colour wash starts from nothing at the top edge, so a dark section above meets it without a step */ .stars-hero .closing::after{-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 55%,transparent 95%);mask-image:linear-gradient(transparent,#000 22%,#000 55%,transparent 95%)} /* ========================================================================== 07 BUTTONS Base .btn plus one colour variant and an optional size. Reference: /kit#closing-kit. .btn-white white, on dark surfaces and dark cards .btn-blue blue action (alias: .btn-accent) .btn-dark ink, on light surfaces; its hairline keeps it visible on dark ones .btn-text text with a ringed arrow (alias: .btn-go); .btn-text--ink on light .btn-sm 32px / 12px V1 .btn-sm (default) 44px / 14px V1 .btn-accent, also .btn-md .btn-lg 50px / 15px V1 .btn-lg, var(--t-button) Family and weight come from the --t-button role at every size. Two-class selectors on purpose: they must beat site.css's .nav .btn, .sc-in .btn, .tr-proc .btn and .ab-cta .btn. Display is left to site.css, so its "hide this button on mobile" rules keep working. Undo: remove this section and restore the markup (see CHANGES.md). ========================================================================== */ .btn,.nav .btn,.sc-in .btn{height:44px;padding:0 24px;font-size:14px;line-height:20px} .btn{justify-content:center;gap:8px;border:0;border-radius:999px;font-family:var(--font);font-weight:600;letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s} .btn:hover{transform:none} .btn.btn-sm{height:32px;padding:0 16px;font-size:12px;line-height:16px;gap:6px} .btn.btn-md{height:44px;padding:0 24px;font-size:14px;line-height:20px} .btn.btn-lg{height:50px;padding:0 28px;font-size:var(--t-button);line-height:22px} /* White on dark */ .btn.btn-white{background:var(--c-white);color:var(--c-ink);box-shadow:none} .btn.btn-white:hover{background:var(--c-signal-soft);box-shadow:none} /* Blue */ .btn.btn-blue,.btn.btn-accent{background:var(--c-primary);color:var(--c-white);box-shadow:0 1px 2px rgba(13,21,38,.12)} .btn.btn-blue:hover,.btn.btn-accent:hover{background:var(--c-deep)} /* Dark */ .btn.btn-dark{background:var(--c-ink);color:var(--c-white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .btn.btn-dark:hover{background:var(--c-navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} /* Outline: second button next to a white one, on dark surfaces. */ .btn.btn-outline{background:transparent;color:var(--c-white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .btn.btn-outline:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)} /* Text: colour and ring as .btn-go in section 02; no box of its own */ .btn-text,.btn-go{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--font);font-size:var(--t-button);font-weight:600;letter-spacing:0;color:var(--c-white);cursor:pointer} .btn.btn-text{height:auto;padding:0;background:none;box-shadow:none;gap:.9rem;font-size:var(--t-button);line-height:1.5} .btn-text:hover .btn-go__ring{background:var(--brand);border-color:var(--brand)} .btn-text:hover .btn-go__ring svg{transform:rotate(0)} .btn-text.btn-text--ink,.btn-go.btn-text--ink{color:var(--c-ink)} .btn-text--ink .btn-go__ring{border-color:var(--c-rule)} .btn-text--ink:hover .btn-go__ring{color:var(--c-white)} .btn-text.btn-sm,.btn-go.btn-sm{gap:.6rem;font-size:14px} .btn-text.btn-sm .btn-go__ring,.btn-go.btn-sm .btn-go__ring{width:2rem;height:2rem} .btn-text.btn-sm .btn-go__ring svg,.btn-go.btn-sm .btn-go__ring svg{width:14px;height:14px} .btn.btn-text.btn-sm{height:auto;padding:0;gap:.6rem;line-height:1.5} .btn-text.btn-lg,.btn-go.btn-lg{font-size:17px;line-height:1.5} .btn.btn-text.btn-lg{height:auto;padding:0} /* States, every variant */ .btn:focus-visible,.btn-text:focus-visible,.btn-go:focus-visible{outline:2px solid var(--c-signal);outline-offset:2px} .btn.btn-dark:focus-visible,.btn-text--ink:focus-visible{outline-color:var(--c-primary)} .btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled,.btn-text[aria-disabled="true"],.btn-text.is-disabled,.btn-go[aria-disabled="true"],.btn-go.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none} /* The sticky bar's main button fills the bar on phones (was on .btn-light in site.css) */ @media (max-width:640px){.sc-in .btn-white{flex:1}} /* ========================================================================== 08 HEADER, aligned to V1 (parts/front-tw/navbar) Menu centred the way V1 does it: logo, menu and CTA spread with equal gaps. V1 values: 72px at 1024 and up, 64px below; links 14px / 500, 8px 12px, 4px apart. Link colour and active state stay V2's. Styling only, no markup. Undo: remove this section and --nav-h from legal.css (back to -69px). ========================================================================== */ :root{--nav-h:64px} @media (min-width:1101px){:root{--nav-h:72px}} .nav .wrap{position:relative;justify-content:space-between;height:var(--nav-h)} .menu{gap:4px;margin-left:0} .nav-right{margin-left:0} .ddb{padding:8px 12px;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap} .nav .wrap.mpanel{max-height:calc(100svh - var(--nav-h))} /* Menu from 1024px as in V1 (site.css switched to the mobile menu at 1080px) */ @media (min-width:1101px) and (max-width:1100px){ .menu{display:flex} .mtoggle{display:none} .nav .wrap.mpanel{display:none} } /* The Sectors mega menu is wider than the space right of its item, so it centres on the header instead of hanging off the item, and can't leave the screen. The top puts it the same 8px under the link row as the other dropdowns. */ .dd:has(> .dd-panel.mega){position:static} .dd-panel.mega{left:0;right:0;top:calc(50% + 26px);margin-inline:auto;min-width:0;width:min(980px,calc(100% - var(--gut) - var(--gutr)))} /* Insights is the last item: at narrow desktop widths its panel opens leftwards to stay on screen */ @media (max-width:1180px){.menu>.dd:last-child .dd-panel{left:auto;right:-8px}} /* ========================================================================== 10 BREADCRUMB Slim bar directly under the header, inside #pagehead so it shows and hides with the page head. Same background as .nav so it reads as the header's second row, one line, scrolls away with the page. On light surfaces use .crumb-bar--light. Long trails scroll sideways rather than wrap. Undo: remove this section and restore the #pagehead line in page.blade.php. ========================================================================== */ :root{--crumb-h:49px} .crumb-bar{position:relative;box-sizing:border-box;height:var(--crumb-h);background:rgba(6,18,52,.9);backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid rgba(255,255,255,.1)} .crumb-bar .wrap{display:block;height:100%} .crumb{display:flex;align-items:center;gap:12px;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;font-family:var(--font);font-size:var(--t-note);line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.68)} .crumb::-webkit-scrollbar{display:none} .crumb>*{flex:none} .crumb a{color:rgba(255,255,255,.68);transition:color .2s} .crumb a:hover{color:var(--c-white)} .crumb [aria-current="page"]{color:var(--c-white);font-weight:500} .crumb-bar--light,.day .crumb-bar{background:rgba(255,255,255,.9);border-bottom-color:var(--c-rule)} .crumb-bar--light .crumb,.day .crumb-bar .crumb,.crumb-bar--light .crumb a,.day .crumb-bar .crumb a{color:var(--c-gray)} .crumb-bar--light .crumb a:hover,.day .crumb-bar .crumb a:hover,.crumb-bar--light .crumb [aria-current="page"],.day .crumb-bar [aria-current="page"]{color:var(--c-ink)} /* ========================================================================== 06 SECTION HEAD WIDTHS. Title and paragraph read as one block, as in V1's desk heading (block max-w-3xl, lede max-w-2xl). Long titles wrap at their accent part; font sizes stay on the role tokens from 01. ========================================================================== */ :root{--head-title-w:48rem;--head-lede-w:42rem} .head,#value .head,#rhythm .head{max-width:var(--head-title-w)} .head .lede,#value .head .lede,.phero .lede{max-width:var(--head-lede-w);text-wrap:pretty} .head .h2{max-width:var(--head-title-w);text-wrap:balance} .scopy h2,.scopy h3{max-width:var(--head-lede-w);text-wrap:balance} @media (min-width:761px){.head .h2 em{display:inline-block}} /* ========================================================================== 09 HERO SUBTITLE. Home hero line above the title: eyebrow text and the live typewriter line, no container. Saved icon: docs/color-migration-2026-11-04/. ========================================================================== */ .hero .mascot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .hero .mascot::before,.hero .mascot::after{content:none} .hero .mascot>b,.hero .mascot .mlive{font-family:var(--mono);font-size:var(--t-eyebrow);line-height:1.5;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--peri)} .hero .mascot .mlive{display:inline-flex;align-items:center;min-width:0;padding:0;margin:0;border:0;box-shadow:none;background:none} .hero .mascot .mlive::before{content:none} .hero .ag-caret{width:1px;margin-left:-5px;box-shadow:none} @media (max-width:640px){.hero .mascot .mlive{flex:0 0 100%}} /* ========================================================================== 08 CARDS. One system: 3 sizes x 3 surfaces. Size decides radius, padding and shadow; surface decides colour and the line colour only. Rule, classification and how to undo: docs/color-migration-2026-11-04/CHANGES.md - Selectors stay at the specificity of the site.css rule they replace, so hover, .on, .rec, .hot, .hov, .run and .us rules there keep winning. - The 1px line is an outer ring (box-shadow), so it adds no layout and is not painted over by a child image or table row. Coloured accents sit in front. - Do not use !important here: it would flatten those states. ========================================================================== */ :root{ --card-r-l:20px;--card-r-m:14px;--card-r-s:10px; --card-p-l:32px;--card-p-m:24px;--card-p-s:16px; --card-line-white:0 0 0 1px var(--c-rule); --card-line-dark:0 0 0 1px rgba(255,255,255,.1); --card-shadow-white:0 30px 60px -30px rgba(13,21,38,.25); --card-shadow-dark:0 30px 60px -30px rgba(2,5,14,.6); --card-grad:linear-gradient(160deg,var(--c-panel),var(--c-ink)); } /* Phones only: the column is too narrow for the desktop padding of nested cards. */ @media (max-width:640px){:root{--card-p-l:20px;--card-p-m:18px;--card-p-s:14px}} /* Reusable classes for new markup */ .card{display:block;border-radius:var(--card-r-m);padding:var(--card-p-m);background:#fff;box-shadow:var(--card-line-white)} .card--l{border-radius:var(--card-r-l);padding:var(--card-p-l);box-shadow:var(--card-line-white),var(--card-shadow-white)} .card--m{border-radius:var(--card-r-m);padding:var(--card-p-m)} .card--s{border-radius:var(--card-r-s);padding:var(--card-p-s)} .card--white{background:#fff;color:var(--c-body)} .card--dark{background:var(--c-navy);color:#fff;box-shadow:var(--card-line-dark)} .card--grad{background:var(--card-grad);color:#fff;box-shadow:var(--card-line-dark)} .card--l.card--dark,.card--l.card--grad{box-shadow:var(--card-line-dark),var(--card-shadow-dark)} /* SIZE: radius ---------------------------------------------------------- */ .vx-card,.mt-col,.memo,.dash,.lcard,.rpanel,.hook,.tier,.snap,.est,.whynow,.scta,.chartcard,.mbrief,.ttable,.wtable,.lb-feed,.op,.cv-frame,.tr-proc,.tr-priv,.ab-co dl,.ab-cta,.nl,.bk-doc,.bkform,.practice{border-radius:var(--card-r-l)} .vx-o,.ww-steps li,.scopy .sblock,.sproof2,.snform,.kpi2,.sd-light .qcard,.qcard,.srcbox,.fnl-panel,.fnl-sum>div,.est-out,.bn-t,.cr-r,.allinc,.fp-a,.fp-t,.journey li,.trc,.cf,.c-out,.c-pager a,.case-nav a,.cv-cap,.lcard .lviz,.bk-guar,.bk-faq details,.bk-proof a,.bf-alt a,.bk-tl li,.pr-agent,.pcard,.rep,.c-stats,.ab-num,.bk-facts{border-radius:var(--card-r-m)} .vx-c,.vx-st,.mt-cov,.lcard .sublens,.rpanel .rrow,.mb-dec,.bd-dec,.bd-list li,.fp-top,.fp-cmp>div,.pa-c,.pr-how li,.pa-foot div,.sn-prev,.sigs2 span,.incl span,.cv-th,.pcol.out .ogrp .pl,.bf-int span{border-radius:var(--card-r-s)} /* SIZE: padding. Cards whose children hold the padding are left at 0: .dash, .lcard, .rpanel, .ttable, .wtable, .lb-feed, .op, .cv-frame, .pcard, .rep, .c-stats, .ab-num, .bk-facts, .sn-prev. ---------------------------------- */ .vx-card,.mt-col,.memo,.hook,.tier,.snap,.est,.whynow,.scta,.chartcard,.mbrief,.tr-proc,.tr-priv,.ab-co dl,.ab-cta,.nl,.bk-doc,.bkform,.practice{padding:var(--card-p-l)} .ww-steps li,.scopy .sblock,.sproof2,.snform,.qcard,.srcbox,.fnl-panel,.fnl-sum>div,.est-out,.bn-t,.cr-r,.allinc,.fp-a,.fp-t,.journey li,.trc,.cf,.c-out,.c-pager a,.cv-cap,.lcard .lviz,.bk-guar,.bk-proof a,.bf-alt a,.bk-tl li,.pr-agent{padding:var(--card-p-m)} .vx-c,.vx-st,.mt-cov,.lcard .sublens,.rpanel .rrow,.mb-dec,.bd-dec,.bd-list li,.fp-top,.fp-cmp>div,.pa-c,.pr-how li,.pa-foot div{padding:var(--card-p-s)} /* .case-nav a leaked its link padding, grid and top line into the case cards on Client stories. Now they match the same cards on the home page. */ .case-nav a.pcard{display:flex;gap:0;padding:0;border-top:0} /* Same tier, different shape: the sides follow the tier, height comes from the content (.vx-o, summary), and .spk needs its 46px band at the foot of .kpi2. */ .vx-o,.bk-faq details{padding:0 var(--card-p-m)} .kpi2{padding:var(--card-p-m) var(--card-p-m) 62px} /* SURFACE: white -------------------------------------------------------- */ .day .tier:not(.rec),.lcard,.est,.tr-priv,.ab-co dl,.bk-doc,.sd-light .ttable,.sd-light .mbrief,.op{background:#fff;box-shadow:var(--card-line-white),var(--card-shadow-white)} .vx-o,.sd-light .qcard,.sd-light .srcbox,.bn-t,.cr-r,.allinc,.fp-a,.fp-t,.journey li,.trc,.c-out,.c-pager a,.case-nav a,.pcard,.c-stats,.lcard .lviz,.lcard .sublens,.mb-dec,.bd-dec,.bd-list li,.incl span,.cv-th{background:#fff;box-shadow:var(--card-line-white)} /* SURFACE: dark --------------------------------------------------------- */ .lb-feed,.livefeed .lb-feed,.wtable,.chartcard,.cv-frame{background:var(--c-navy);box-shadow:var(--card-line-dark),var(--card-shadow-dark)} .scopy .sblock,.sproof2,.snform,.fnl-panel,.fnl-sum>div,.cv-cap,.bk-facts,.bk-guar,.bk-faq details,.bk-proof a,.bf-alt a,.bk-tl li,.pr-agent,.vx-c,.vx-st,.mt-cov,.fp-top,.fp-cmp>div,.pa-c,.pr-how li,.pa-foot div,.sn-prev,.sigs2 span,.tier.rec .incl span,.bf-int span{background:var(--c-navy);box-shadow:var(--card-line-dark)} .pr-agent,.pa-c,.pr-how li{border:0} /* SURFACE: gradient ----------------------------------------------------- */ .vx-card,.mt-col,.memo,.day .memo,.dash,.rpanel,.day .rpanel,.hook,.tier.rec,.snap,.ab-cta,.tr-proc,.nl,.bkform,.practice{background:var(--card-grad);box-shadow:var(--card-line-dark),var(--card-shadow-dark)} .ww-steps li,.kpi2,.est-out,.rep,.cf,.ab-num,.pcol.out .ogrp .pl{background:var(--card-grad);box-shadow:var(--card-line-dark)} /* Coloured pieces kept on top of the surface ---------------------------- */ /* Sector hue wash and pointer glow, over the one gradient */ .whynow{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--hue) 22%,transparent),transparent 60%),var(--card-grad);box-shadow:var(--card-line-dark),var(--card-shadow-dark)} .scta{background:radial-gradient(600px 200px at 0 0,color-mix(in srgb,var(--hue) 30%,transparent),transparent 70%),var(--card-grad);box-shadow:var(--card-line-dark),var(--card-shadow-dark)} .mt-col.us{background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%),rgba(94,234,212,.1),transparent 60%),var(--card-grad)} /* Left accent lines */ .mb-dec{box-shadow:inset 3px 0 0 var(--c-mint-deep),var(--card-line-white)} .bd-dec{box-shadow:inset 3px 0 0 var(--c-primary),var(--card-line-white)} .fp-top{box-shadow:inset 3px 0 0 var(--hue),var(--card-line-dark)} .sproof2{box-shadow:inset 2px 0 0 var(--hue),var(--card-line-dark)} /* 32px padding narrows the stage: keep the big figure on one line */ .vx-kpi b{white-space:nowrap} @media (min-width:641px){.vx-stage{grid-template-columns:190px minmax(0,1fr)}} /* Body of a report card is not a card of its own: no light ring on the dark surface */ .rep-body{box-shadow:none} /* States. No coloured shadows on the site: raised and selected read as a solid ring. --e-light-hi feeds .vx-o, .cv-th, .pcard, .cr-r, .tier, .c-pager hovers and selected states in site.css. ------------------------------------- */ :root{--e-light-hi:0 0 0 1.5px var(--c-primary)} .sd-light .qcard:hover{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--hue) 70%,#fff)} .sd-light .qcard.run,.sd-light .qcard.done{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--hue) 70%,#fff)} /* ========================================================================== 07 TAG TO ROLE. One rule: a tag always has the same kit size. h1 --t-hero-dark (case pages --t-hero, as the kit lists) · h2 --t-section · h3 --t-card, the card and step title, with its description on --t-lede. Row titles (FAQ, list rows, table titles) keep --t-row through their own class. .card-t/.h-role/.h-card: the same card title where no h2 stands above it, so it carries the role without a heading tag. Legal pages stay out. Table on /kit, section 01. ========================================================================== */ #view-home h2:not(.lgv *){font-family:var(--font-h);font-size:var(--t-section);line-height:1.1;font-weight:800;letter-spacing:-.025em} #view-home h3:not(.lgv *):not(.h-wrap),#view-home h3.h-wrap:not(.lgv *)>*,#view-home .h-card>*,#view-home .h-role,#view-home .card-t{font-family:var(--font-h);font-size:var(--t-card);line-height:1.25;font-weight:700;letter-spacing:-.02em} #view-home h3.mo-wrow__t:not(.lgv *){font-size:var(--t-row);line-height:1.3;letter-spacing:-.015em} #view-home .trc p,#view-home .rep-body p,#view-home .stage-t p,#view-home .op p,#view-home .trust p,#view-home .fp-a p,#view-home .bk-guar p,#view-home .d30 p,#view-home .lf-head p,#view-home .rrow div>span,#view-home .bk-tl li>span,#view-home .c-flow li>span,#view-home .pr-how li>span,#view-home .cr-r div>small,#view-home .bk-proof a>span{font-size:var(--t-lede);line-height:1.7;letter-spacing:0} /* Spacing the old tag rules gave these titles */ .lf-head .lf-t{margin:14px 0 10px} .rep-body .rep-t{margin:0} .pc-body .pc-t{margin:0;text-wrap:balance} .cv-cap .cv-t{margin:6px 0 6px;color:#fff} .mbrief h3{margin:14px 0 10px} /* ========================================================================== 08 FONT FAMILY BY ROLE. Three families: --font-h titles and big numbers, --font sentences, descriptions, data cells, values in text; --mono only for eyebrow and tag labels (t-eyebrow, t-tag sizes). Canvas text in site.js reads the same tokens. ========================================================================== */ #view-home .tlist>span,#view-home .trace,#view-home .vx-foot,#view-home .vx-kpi span,#view-home .mb-foot,#view-home .dhead span,#view-home .cf em{font-family:var(--font);font-size:var(--t-note);line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none} #view-home .lb-row:not(.lb-th)>span:not(:first-child),#view-home .cstep .art,#view-home .est-in label b{font-family:var(--font);letter-spacing:0} #view-home .vx-t{font-family:var(--font);letter-spacing:0} #view-home .cstep .art .pill,#view-home .tlist em.t{font-family:var(--mono);font-size:var(--t-eyebrow)} #view-home .pr-k{font-size:var(--t-eyebrow)} #view-home .pa-tag{font-size:var(--t-tag)} #view-home h2.h-wrap:not(.lgv *)>*{font-size:var(--t-section)} #view-home .lb-row>span:first-child{font-size:var(--t-tag)} #view-home .cr-r em{font-family:var(--font-h)} .fbot>span:first-child{font-family:var(--font);font-size:var(--t-note);letter-spacing:0} @media (max-width:640px){#view-home .lb-row .sg{white-space:normal;overflow:visible}} /* ========================================================================== 11 HOME HERO. Fills the first screen under a clear header: copy on the left, fixed glass card on the right, Europe globe behind (hero-globe.js, globe.gl), What we do as the footer ticker. Markup: sections/hero.blade.php. ========================================================================== */ .dh{--glass-dark:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),rgba(6,18,52,.62);--nav:73px;--dh-lift:clamp(72px,11vh,112px);box-sizing:border-box;margin:calc(-1 * var(--nav)) 0 0;position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:100svh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--c-ink),var(--c-black))} .dh-main{position:relative;flex:1;display:flex;align-items:flex-end;padding:calc(var(--nav) + 24px) 0 var(--dh-lift)} .dh-stars{position:absolute;inset:0;z-index:-3;width:100%;height:100%} .dh-globe{position:absolute;z-index:-2;top:0;bottom:0;left:30%;right:0;opacity:0;transition:opacity 1.2s ease;-webkit-mask-image:linear-gradient(90deg,transparent,#000 37%),linear-gradient(180deg,transparent 4%,#000 26%,#000 82%,transparent),radial-gradient(ellipse 36% 36% at 50% 44%,#000 35%,rgba(0,0,0,.28) 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 37%),linear-gradient(180deg,transparent 4%,#000 26%,#000 82%,transparent),radial-gradient(ellipse 36% 36% at 50% 44%,#000 35%,rgba(0,0,0,.28) 100%);mask-composite:intersect} .dh-globe.is-ready{opacity:1} .dh-globe .float-tooltip-kap{display:none} .dh .wrap{position:relative;width:100%;pointer-events:none} .dh .copy{pointer-events:auto;max-width:600px} .dh .copy{display:grid;gap:26px;align-content:start} .dh .mascot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px} .dh h1{margin:0} .dh .sub{margin:0} /* One glass pop-up, tied to the active pin: sector icons on top, the active signal under them. */ .dh-pop{position:absolute;right:max(16px,calc((100% - 1208px)/2));bottom:var(--dh-lift);z-index:3;width:336px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:var(--glass-dark);color:#fff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden} .dh-tabs{display:flex;align-items:center;gap:2px;padding:6px 8px 8px;border-bottom:1px solid rgba(255,255,255,.08)} .dh-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;min-width:36px;padding:0;border:0;border-radius:10px;background:none;cursor:pointer;font:500 var(--t-note)/1 var(--font);white-space:nowrap;color:rgba(255,255,255,.62)} .dh-tabs button{color:var(--sector)} .dh-tabs button:hover{background:rgba(255,255,255,.1)} .dh-label{margin:0;padding:12px 16px 0;font-family:var(--mono);font-size:var(--t-tag);letter-spacing:.12em;text-transform:uppercase;color:#fff} .dh-tabs button[aria-selected="true"]{flex:1;padding:0 10px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff} .dh-tabs button[aria-selected="true"] .ic{color:var(--sector)} .dh-tabs .ic{width:16px;height:16px;flex:none} .dh-tabs span{display:none} .dh-tabs button[aria-selected="true"] span{display:inline} .dh-body{padding:16px} .dh-eyebrow{margin:0;font-family:var(--mono);font-size:var(--t-eyebrow);line-height:1.5;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sector)} .dh-title{margin:8px 0 0;font-family:var(--font-h);font-size:var(--t-row);line-height:1.3;font-weight:700;letter-spacing:-.015em;color:#fff} .dh-meta{margin:6px 0 0;font-size:var(--t-note);color:rgba(255,255,255,.6)} .dh-act{margin:10px 0 0;font-size:var(--t-note);line-height:1.5;font-weight:500;color:var(--sector)} .dh-foot{display:flex;justify-content:flex-end;padding:0 10px 10px;margin-top:-6px} .dh-dots{display:flex;gap:2px;flex:none} .dh-dots button{width:18px;height:18px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center} .dh-dots i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28)} .dh-dots button[aria-current="true"] i{background:#fff} /* What we do: the footer ticker (.mq) with the label fixed on the left. */ .dh-bar{position:relative;z-index:4;flex:none;--deep:var(--c-black)} .dh-bar .mq::before{width:min(30rem,40%);background:linear-gradient(90deg,var(--c-black) 60%,transparent)} .dh-bar .mq::after{width:calc(max(16px,(100% - 1208px)/2) + 48px);background:linear-gradient(270deg,var(--c-black) calc(100% - 48px),transparent)} .dh-bar__lbl{position:absolute;left:max(16px,calc((100% - 1208px)/2));top:50%;z-index:2;transform:translateY(-50%);margin:0;font-family:var(--mono);font-size:var(--t-eyebrow);line-height:1.5;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)} .dh-bar .mq__track{animation-duration:130s} .dh-bar .mq__item,.dh-bar .mq__item b,.dh-bar .mq__item span{font-size:14px} .dh-bar .mq__item b{font-weight:600;color:#fff} .dh-bar .mq__item span{font-weight:400;color:rgba(255,255,255,.68)} /* Header: clear over the hero, takes its colour on scroll. */ .nav.dh-nav{background:transparent;box-shadow:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .25s ease,border-color .25s ease} .nav.dh-nav.is-solid{background:rgba(6,18,52,.9);border-color:rgba(255,255,255,.1);-webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px)} /* Pins: quiet until active. */ .dh-anchor{position:relative;width:0;height:0;pointer-events:none} .dh-anchor.is-off .dh-pin{visibility:hidden;pointer-events:none} .dh-pin{position:absolute;left:0;top:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto} .dh-halo{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:0;height:0;border-radius:50%;background:rgba(163,182,255,.06);box-shadow:inset 0 0 0 1px rgba(163,182,255,.7);} .dh-dot{position:absolute;left:0;top:0;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.7)} .dh-anchor.is-on .dh-halo{width:40px;height:40px} .dh-anchor.is-on .dh-dot{width:10px;height:10px;background:var(--pin,#fff)} @media (max-width:1100px){ .dh-main{flex-direction:column;align-items:stretch;padding:calc(var(--nav) + 16px) 0 16px} .dh .wrap{display:contents} .dh .copy{box-sizing:border-box;width:100%;padding-inline:16px;order:1} .dh-bar .mq::before{width:62%} .dh .copy{max-width:none} .dh-globe{position:relative;inset:auto;order:2;flex:none;width:100%;height:400px;margin-block:8px} .dh-pop{position:relative;order:3;right:auto;bottom:auto;width:auto;margin:0 16px} .dh-globe{-webkit-mask-image:none;mask-image:none} .dh-bar__in{display:block} .dh-bar .ww-lead{margin-bottom:12px} } @media (max-width:640px){.dh .mascot .mlive{flex:0 0 100%}} /* ========================================================================== 13 LIGHT SECTIONS. Full width, flat white: no radius, no pattern, no gap. ========================================================================== */ .day,body.sub-page .day:has(.sec.first){--bg:#fff;width:100%;margin-inline:0;border-radius:0;box-shadow:none;background:#fff;background-image:none} .day::before{display:none} .day + .day{margin-top:0} /* Home, first section: the title sits 110px under the top edge. */ .day:has(>#value){padding-top:0} .day .sec#value{padding-top:clamp(64px,7.6vw,110px)} /* Hero ticker: full-width line on top only. */ .dh-bar .mq{border-block:0;border-top:1px solid rgba(255,255,255,.1);padding-block:10px} /* ========================================================================== 12 BOOK. /book in the order of /contact: dark hero with the facts, a white band with two columns (6fr 5fr, 5rem, from 1024), then full-width bands with the kit's .head: days (as the steps band of /contact), recent work, and the FAQ (.faq, the /pricing component). Left blocks beside the form stack. Cards stay on the 08 CARDS sizes; here their surface is white on the light sheet. Markup: sections/book.blade.php. Undo: remove this section and restore the file from docs/color-migration-2026-11-04/before-book/. ========================================================================== */ main>.bk-facts{display:none} .bk-facts{margin:0} .bk-facts li{padding:var(--card-p-m)} /* The sheet: white, bands carry their own padding */ body.sub-page .day:has(>#book){background:var(--c-white);padding:0;overflow:clip} .day:has(>#book)::before{display:none} .day #book.sec{padding:0} .bk-band{padding-block:var(--sec-y);background:var(--c-white)} .bk-band--paper{background:var(--c-paper)} .bk-band.bk-band--next{padding-top:0} #book .bookgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;align-items:start} @media (min-width:1101px){ #book .bookgrid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:5rem} } /* Left column beside the form: heading, then blocks one under another */ #book .bk-copy{gap:2rem} #book .bk-blk{gap:.75rem} /* Readout example: flat, on the kit's large white card */ #book .bk-doc{margin-top:1.25rem;transform:none} /* Right column: the form holds its place in the flow, as tall as the left column */ #book .bk-side{position:static;order:0} @media (max-width:1100px){#book .bk-side{order:-1}} /* Light form: large white card. Fields come from 16 FORMS. The live dot stays still, it pulsed a coloured glow. */ #book .bkform{background:var(--c-white);box-shadow:var(--card-line-white),var(--card-shadow-white);color:var(--c-body)} #book .bf-h{border-bottom-color:var(--c-rule)} #book .bf-h b{color:var(--c-ink)} #book .bf-h small{color:var(--c-body)} #book .bf-priv{color:var(--c-gray)} #book .bf-int span{background:var(--c-white);box-shadow:var(--card-line-white);color:var(--c-ink)} #book .bf-int span small{color:var(--c-gray)} #book .bf-int input:checked+span{background:var(--c-white);box-shadow:var(--e-light-hi)} #book .bf-int input:focus-visible+span{outline-color:var(--c-primary)} /* The sent state dims inputs: the hidden radios stay hidden */ #book .bkform.sent .bf-int input{opacity:0} #book .live-dot{animation:none} /* Padding as in 14 VALUE and 15: small cards --card-p-s, large ones --card-p-m. Tokens stay global. */ #book :is(.bk-tl li,.bk-proof a,.bk-two>.card,.bk-guar,.bf-alt a){padding:var(--card-p-s)} #book :is(.bkform,.bk-doc){padding:var(--card-p-m)} /* Narrow form column: one field per row, so the sector name fits beside its arrow */ @media (max-width:1180px){#book .bk-row{grid-template-columns:minmax(0,1fr)}} /* Days, as the step cards of /contact. One column on phones, two on tablets, four from 1024. */ #book .bk-tl{margin:0;gap:1rem;grid-template-columns:minmax(0,1fr)} #book .bk-two{display:grid;margin-top:1rem;gap:1rem;grid-template-columns:minmax(0,1fr)} #book .bk-proof{gap:1rem;grid-template-columns:minmax(0,1fr)} @media (min-width:641px){ #book .bk-tl,#book .bk-two{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:761px){#book .bk-proof{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1101px){#book .bk-tl{grid-template-columns:repeat(4,minmax(0,1fr))}} #book .bk-tl li,#book .bk-proof a{display:block} #book .bk-tl b,#book .bk-proof small{display:block;font-family:var(--mono);font-size:var(--t-tag);line-height:1.5;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--c-primary)} #book .bk-tl h3,#book .bk-proof h3{margin:.75rem 0 0;color:var(--c-ink)} #book .bk-tl li>span,#book .bk-proof a>span{display:block;margin-top:.5rem;color:var(--c-body)} #book .bk-two>div{display:grid;gap:12px;align-content:start} /* FAQ: .faq as on /pricing. The .head above it holds the spacing; only the link needs a colour. */ #book .faq{margin-top:0} #book .faq p a{color:var(--c-primary)} /* Medium cards on the light sheet: white surface, 1px line */ #book :is(.bk-guar,.bk-proof a,.bk-tl li,.bf-alt a){background:var(--c-white);box-shadow:var(--card-line-white)} #book .bk-proof a:hover{background:var(--c-white);box-shadow:var(--e-light-hi);transform:none} #book .bf-alt a:hover{background:var(--c-white);box-shadow:var(--e-light-hi)} /* Text colours for the light sheet */ #book .bk-guar b,#book .bf-alt b{color:var(--c-ink)} #book .bk-guar p,#book .bk-yes li,#book .bk-no li{color:var(--c-body)} #book .bf-alt span{color:var(--c-primary)} #book .bk-no li::before{background:var(--c-gray)} #book .bg-ic{border-radius:var(--card-r-s);background:var(--c-mint-soft);color:var(--c-mint-deep)} /* ========================================================================== 14 VALUE. Centred head, quiet tabs (V1 kit 09.1 tones), light panel. The only colour is meaning: Today reads in alert, With your agent in ok. ========================================================================== */ :root{--c-paper:#F8F9FB;--c-soft:rgba(52,94,234,.08);--c-rule:#E5E7EB} #value .vx-track{padding-top:16px} #value .vx-marks{top:16px;z-index:2} #value .vx2{--st:var(--ok);--st-soft:var(--ok-soft);grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start} #value .vx2[data-mode="t"]{--st:var(--alert);--st-soft:var(--alert-soft)} /* Tabs: sized by content. Active takes the panel's grey, nothing else. */ #value .vx-list{grid-auto-rows:auto;align-content:start} #value .vx-o{min-height:0;padding:var(--card-p-s);border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule)} #value .vx-o:hover{background:#fff;box-shadow:inset 0 0 0 1px #CBD1DB} #value .vx-o.on,#value .vx-o.on:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule)} #value .vx-o.iconrow{display:grid} #value .vx-h .vi{width:48px;height:48px;border-radius:10px;color:var(--c-primary);background:var(--c-soft);box-shadow:none} #value .vx-h .vi .ic{width:22px;height:22px} #value .vx-pb{display:none} /* Panel */ #value .vx-card{padding:var(--card-p-m);gap:20px;background:var(--c-paper);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-rule)} #value .vx-card::before{display:none} #value .vx-top{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch} #value .vx-h{align-items:center;gap:16px} #value .vx-h small{display:block;line-height:16px} #value .vx-h h3{margin:4px 0 0;line-height:24px;color:var(--c-ink)} #value .vx-h small,#value .vx-kpi small,#value .vx-c small{font-family:var(--mono);font-size:var(--t-tag);letter-spacing:.12em;color:var(--c-gray)} #value .vx-c small{display:block;line-height:24px} #value .vx-seg{display:grid;width:100%;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule)} #value .vx-seg button{min-height:40px;font-size:var(--t-prose)} #value .vx-seg button{color:#46566E} #value .vx-seg button.on{color:var(--st);font-weight:600} #value .vx-thumb,#value .vx2[data-mode="t"] .vx-thumb{background:var(--st-soft)} /* Figure, timeline and steps: one white card. Stage is its top, steps its foot. */ #value .vx-stage{grid-template-columns:minmax(0,1fr);gap:24px;align-items:stretch;padding:var(--card-p-m);border-radius:14px 14px 0 0;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule)} #value .vx-kpi{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px} #value .vx-kpi small{flex:0 0 100%} #value .vx-kpi b,#value .vx2[data-mode="t"] .vx-kpi b{display:inline-block;margin:8px 0 0;font-size:var(--t-sub);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--st)} #value .vx-kpi span{color:#46566E} #value .vx-rail{background:var(--c-rule)} #value .vx-fill,#value .vx2[data-mode="t"] .vx-fill{z-index:1;background:var(--st)} #value .vx-m i,#value .vx2[data-mode="t"] .vx-m i{background:var(--st);box-shadow:0 0 0 2px #fff} #value .vx-axis{color:var(--c-gray)} #value .vx-rail::after{z-index:0;background:repeating-linear-gradient(90deg,#8792A6 0 6px,transparent 6px 10px)} #value .vx-rail::before{color:var(--c-gray)} /* Three steps: one strip. The number reads with the title, not under it. */ #value .vx-steps{gap:0;margin-top:-21px;padding:var(--card-p-s) var(--card-p-m);border-radius:0 0 14px 14px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule)} #value .vx-st{align-items:center;gap:12px;padding:0;border-radius:0;background:none;box-shadow:none} #value .vx-st i,#value .vx2[data-mode="t"] .vx-st i{flex:none;width:32px;height:32px;border-radius:10px;font-family:var(--font-h);font-size:var(--t-prose);font-weight:700;letter-spacing:0;color:var(--st);background:var(--st-soft)} #value .vx-st b{white-space:normal;overflow:visible;font-size:var(--t-prose);font-weight:600;line-height:1.3;color:var(--c-ink)} #value .vx-st small{display:block;margin-top:2px;font-family:var(--font);font-size:var(--t-note);letter-spacing:0;color:#46566E} #value .vx-ar{justify-items:start;color:#99A3B5} @media (min-width:1181px){#value .vx-st{gap:10px}#value .vx-steps{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr)}} /* Today and With your agent change slowly. */ #value .vx-thumb{transition:transform .8s cubic-bezier(.4,0,.2,1),background .8s} #value .vx-seg button,#value .vx-kpi b,#value .vx-st i,#value .vx-c{transition:color .7s,background .7s,box-shadow .7s} #value .vx-fill,#value .vx-m{transition-duration:1.2s} #value .vx-m i{transition:background .7s} /* Today against With your agent: both readable, the live one outlined. */ #value .vx-cmp{gap:12px} #value .vx-c,#value .vx2[data-mode="a"] .vx-c.a,#value .vx2[data-mode="t"] .vx-c.t{gap:12px;padding:var(--card-p-s);border-radius:14px;opacity:1;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule)} #value .vx2[data-mode="a"] .vx-c.a{box-shadow:inset 0 0 0 1px var(--ok)} #value .vx2[data-mode="t"] .vx-c.t{box-shadow:inset 0 0 0 1px var(--alert)} #value .vx-c .mk,#value .vx-c.t .mk,#value .vx-c.a .mk{width:24px;height:24px;box-shadow:none} #value .vx-c.t .mk{color:var(--alert);background:var(--alert-soft)} #value .vx-c.a .mk{color:var(--ok);background:var(--ok-soft)} #value .vx-c p{min-height:4.5em;margin-top:2px;font-size:var(--t-prose);line-height:1.5;color:var(--c-ink)} #value .vx-foot{padding-top:4px;border-top:0;color:var(--c-gray)} #value .vx-foot .live-dot{background:#99A3B5;box-shadow:none;animation:none} @media (max-width:980px){#value .vx2{grid-template-columns:minmax(0,1fr);gap:32px}} @media (max-width:640px){#value .vx-stage{grid-template-columns:minmax(0,1fr);gap:16px;padding:var(--card-p-s)}#value .vx-steps{gap:12px;padding:var(--card-p-s)}} /* ========================================================================== 15 SERVICE-AS-SOFTWARE. Three white cards on the grey surface (.day--paper) at container width: no colour, no tilt, plain marks. ========================================================================== */ #model .mtable{width:100%;max-width:none;gap:20px} #model .mt-col,#model .mt-col.us{gap:24px;padding:var(--card-p-m);opacity:1;overflow:visible;transform:none;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule)} #model .mt-col.us::before,#model .mt-col.us::after{display:none} #model .mt-col.us .mt-badge{top:0;right:24px;transform:translateY(-50%);color:#fff;background:var(--c-primary)} #model .mt-col ul{gap:16px;padding-top:24px;border-top:1px solid var(--c-rule)} #model .mt-col li,#model .mt-col.us li{gap:12px;line-height:1.45;color:var(--c-ink)} #model .mt-col li::before,#model .mt-col li.yes::before,#model .mt-col li.no::before,#model .mt-col li.mid::before{width:16px;height:16px;margin-top:2px;border-radius:0;background-color:transparent;background-size:16px;box-shadow:none} #model .mt-col li.yes::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23061234' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} #model .mt-col li.no::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23061234' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")} #model .mt-col li.mid::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23061234' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")} #model .mt-cov{order:-1} #model .mt-col.us .mt-f,#model .mt-f{color:var(--muted)} .day.day--paper{--bg:var(--c-paper);background:var(--c-paper)} #view-home #model .stat.is-brand .stat__meter{color:var(--c-primary)} #view-home #model .stat--box{background:var(--c-paper);box-shadow:none} #view-home #model .stat--box.is-brand{background:var(--c-soft);box-shadow:none} #view-home #model .stat__meter i{background:color-mix(in srgb,currentColor 10%,transparent)} #view-home #model .stat__meter i.on{background:currentColor} #model .iconrow__box{color:#8792A6;background:var(--c-paper)} #model .iconrow.is-brand .iconrow__box{color:#fff;background:var(--c-primary)} /* 14 VALUE, trial: white panel, grey inner cards. Remove this block to undo. */ #value .vx-card{background:#fff} #value .vx-seg,#value .vx-stage,#value .vx-steps,#value .vx-c,#value .vx2[data-mode="a"] .vx-c.a,#value .vx2[data-mode="t"] .vx-c.t{background:var(--c-paper)} #value .vx-h .vi{background:var(--c-soft)} /* ========================================================================== 16 FORMS. One field style, from V1 (public/ui-kit.html 08.3 Form fields: .dk-field, .dk-input, .dk-inline). Sizes are V1's literal values; 13px and 12px have no type token in V1 either. Classes for new markup: .f-field .f-label .f-hint .f-input .f-err, .f-inline with .f-inline__input, and .is-dark. Existing forms are listed in the selectors, so their markup and site.js hooks stay as they are. Not in V1, adapted here: select (input box + drawn arrow), dark input (box of .dk-input, tones of .dk-inline.is-dark), red border on .err. V1 has no radio, checkbox or range: the interest options and the estimator sliders stay V2's. Live reference: /kit #forms. Undo: docs/color-migration-2026-11-04/before-forms/. ========================================================================== */ :root{--f-err:#CF4558;--f-ph:var(--c-gray);--f-ring:color-mix(in srgb,var(--c-primary) 25%,transparent);--f-ring-inline:color-mix(in srgb,var(--c-primary) 20%,transparent);--f-dark-line:rgba(255,255,255,.18);--f-dark-bg:rgba(255,255,255,.06);--f-dark-ph:rgba(255,255,255,.45);--f-dark-focus:color-mix(in srgb,var(--c-signal) 70%,transparent);--f-dark-ring:color-mix(in srgb,var(--c-signal) 15%,transparent)} /* Label, hint, error */ .f-field,.lgv-field{display:block} .f-label,.lgv-field__label{display:block;margin-bottom:.375rem;font-size:var(--t-note);font-weight:600;line-height:1.5;color:var(--c-ink)} .f-hint,.lgv-ct-hint{font-weight:400;color:var(--c-gray)} .f-err,.lgv-field__err{display:block;margin-top:.25rem;font-size:var(--t-note);line-height:1.5;color:var(--f-err)} .bkform label{gap:.375rem;font-size:var(--t-note);font-weight:600;line-height:1.5;color:var(--c-ink)} .bkform label small{font-size:var(--t-note);font-weight:400;color:var(--c-gray)} .bf-int legend{margin-bottom:.375rem;font-size:var(--t-note);font-weight:600;line-height:1.5;color:var(--c-ink)} .bkform .bf-int label{font-weight:400} .snform label{gap:.375rem;font-size:var(--t-note);font-weight:600;line-height:1.5;color:var(--c-white)} /* Input, textarea, select */ .f-input,.lgv-ct-input,.bkform input:not([type=radio]),.bkform select,.bkform textarea,.snform input,.snform select{display:block;box-sizing:border-box;width:100%;padding:.625rem .875rem;border:1px solid var(--c-rule);border-radius:8px;background-color:var(--c-white);font-family:var(--font);font-size:var(--t-prose);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--c-ink);transition:border-color .15s,box-shadow .15s} .f-input::placeholder,.lgv-ct-input::placeholder,.bkform input::placeholder,.bkform textarea::placeholder{color:var(--f-ph)} textarea.f-input,.lgv-ct-input:is(textarea),.bkform textarea{resize:vertical} select.f-input,.bkform select,.snform select{appearance:none;padding-right:2.25rem;background-image:linear-gradient(45deg,transparent 50%,var(--c-gray) 50%),linear-gradient(135deg,var(--c-gray) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat} .bkform option{background:var(--c-white);color:var(--c-ink)} .f-input:focus,.lgv-ct-input:focus,.bkform input:not([type=radio]):focus,.bkform select:focus,.bkform textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 2px var(--f-ring)} /* Error: V2's .err hook on the field, in V1's error colour */ .f-input.is-err,.bkform input.err:not([type=radio]),.bkform input.err:not([type=radio]):focus{border-color:var(--f-err)} .bkform input.err:not([type=radio]):focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--f-err) 25%,transparent)} .bk-msg.no{color:var(--f-err)} /* On a dark card */ .f-input.is-dark,.snform input,.snform select{border-color:var(--f-dark-line);background-color:var(--f-dark-bg);color:var(--c-white)} .f-input.is-dark::placeholder,.snform input::placeholder{color:var(--f-dark-ph)} select.f-input.is-dark,.snform select{background-image:linear-gradient(45deg,transparent 50%,var(--f-dark-ph) 50%),linear-gradient(135deg,var(--f-dark-ph) 50%,transparent 50%)} .snform select option{background:var(--c-ink);color:var(--c-white)} .f-input.is-dark:focus,.snform input:focus,.snform select:focus{outline:none;border-color:var(--f-dark-focus);box-shadow:0 0 0 3px var(--f-dark-ring)} /* Inline: one pill, a borderless input and the kit button */ .f-inline,.lgv-inline{display:flex;align-items:center;padding:4px;border:1px solid var(--c-rule);border-radius:999px;background:var(--c-white);transition:border-color .15s,box-shadow .15s} .f-inline:focus-within,.lgv-inline:focus-within{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--f-ring-inline)} .f-inline__input,.lgv-inline__input,.nlf .f-inline__input{flex:1 1 auto;min-width:0;width:auto;height:auto;padding:.75rem 1.1rem;border:0;border-radius:0;background:transparent;font-family:var(--font);font-size:var(--t-prose);line-height:1.5;color:var(--c-ink)} .f-inline__input:focus,.lgv-inline__input:focus,.nlf .f-inline__input:focus{outline:none} .f-inline__input::placeholder,.lgv-inline__input::placeholder{color:var(--f-ph)} .f-inline>.btn,.lgv-inline>.btn{flex-shrink:0} .f-inline.is-dark{border-color:var(--f-dark-line);background:var(--f-dark-bg)} .f-inline.is-dark:focus-within{border-color:var(--f-dark-focus);box-shadow:0 0 0 3px var(--f-dark-ring)} .f-inline.is-dark .f-inline__input,.nlf .f-inline.is-dark .f-inline__input{color:var(--c-white)} .f-inline.is-dark .f-inline__input::placeholder{color:var(--f-dark-ph)} .nlf .f-inline{flex:1 1 100%;min-width:0} @media (max-width:479.98px){ .f-inline,.lgv-inline{flex-direction:column;align-items:stretch;gap:4px;border-radius:1.75rem} .f-inline>.btn,.lgv-inline>.btn{justify-content:center} } /* ========================================================================== 17 ICON ROW. One piece for icon + title + description: Value tabs and the Service-as-software card heads. Markup: .iconrow > .iconrow__box, .iconrow__t, .iconrow__d. States: .is-on (blue), .is-brand (solid blue), .iconrow--dark. /kit#icon-row ========================================================================== */ .iconrow,#view-home .iconrow{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;text-align:left} .iconrow__box,#view-home .iconrow__box{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border-radius:10px;color:#8792A6;background:var(--c-paper);box-shadow:none} .iconrow__box .ic,#view-home .iconrow__box .ic{width:22px;height:22px} .iconrow__t,#view-home .iconrow__t,#view-home h3.h-wrap.iconrow__t:not(.lgv *)>*{align-self:end;margin:0;font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--fg)} .iconrow__d,#view-home .iconrow__d{align-self:start;font-size:var(--t-lede);line-height:1.5;letter-spacing:0;color:var(--muted)} .vx-ot{display:contents} .iconrow.is-on .iconrow__box,.iconrow.on .iconrow__box,#view-home .iconrow.on .iconrow__box{color:var(--c-primary);background:var(--c-soft)} .iconrow--dark .iconrow__box,#view-home .iconrow--dark .iconrow__box{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .iconrow.is-brand .iconrow__box,#view-home .iconrow.is-brand .iconrow__box{color:#fff;background:var(--c-primary);box-shadow:none} /* ========================================================================== 18 SECTION RHYTHM. One value: --sec-y above and below each surface, and one --sec-y (not two) between sections on the same surface. Book's bands and the legal pages' bands carry their own padding, from the same --sec-y. ========================================================================== */ :root{--sec-y:clamp(64px,7.6vw,110px)} #view-home .day:not(:has(>.lgv)){padding-block:0} #view-home .sec:not(#book):not(:has(>.lgv)),#view-home .day .sec:not(#book):not(:has(>.lgv)){padding-block:var(--sec-y)} #view-home .sec:not([hidden]) + .sec:not(#book):not(:has(>.lgv)),#view-home .sec:not([hidden]) + .sec[hidden] + .sec:not(#book):not(:has(>.lgv)),#view-home .sec:not([hidden]) + .sec[hidden] + .sec[hidden] + .sec:not(#book):not(:has(>.lgv)){padding-top:0} #view-home .day .sec#value{padding-top:var(--sec-y)} #view-home .closing,.closing{padding-top:var(--sec-y)} /* Client stories: the first group label starts on the --sec-y line. */ .cn-h:first-child{padding-top:0} /* ========================================================================== 19 STAT. Small figure block, same reading order as the hero card: mono label, figure with its unit, meter, note. Markup: .stat > .stat__head(.stat__label, .stat__value, .stat__unit), .stat__meter, .stat__note. .is-brand tints the meter. /kit#stat ========================================================================== */ .stat,#view-home .stat,#view-home .stat.us{display:grid;gap:12px;border-radius:0;background:none;box-shadow:none} .stat__head,#view-home .stat__head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:8px} .stat__label,#view-home .stat__label{flex:0 0 100%;margin:0;font-family:var(--mono);font-size:var(--t-tag);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .stat__value,#view-home .stat__value,#view-home .stat.us .stat__value{font-family:var(--font-h);font-size:var(--t-card);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--fg)} .stat__unit,#view-home .stat__unit,#view-home .stat.us .stat__unit{font-family:var(--font);font-size:var(--t-note);line-height:1.4;letter-spacing:0;color:var(--muted)} .stat__meter,#view-home .stat__meter{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;height:4px;color:var(--fg)} .stat.is-brand .stat__meter,#view-home .stat.is-brand .stat__meter{color:var(--c-signal)} .stat__meter i,#view-home .stat__meter i{border-radius:2px;background:color-mix(in srgb,currentColor 16%,transparent)} .stat__meter i.on,#view-home .stat__meter i.on{background:currentColor} .stat__meter i::after,#view-home .stat__meter i.on::after{display:none} .stat__note,#view-home .stat__note{font-family:var(--font);font-size:var(--t-note);line-height:1.5;letter-spacing:0;color:var(--muted)} /* Boxed: on a surface of its own. */ .stat--box,#view-home .stat--box,#view-home .stat--box.us{padding:var(--card-p-s);border-radius:14px;background:color-mix(in srgb,var(--fg) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 12%,transparent)} /* Running list as a note: plain text, no chips. */ #view-home .stat .cv-stream{height:20px} #view-home .stat .cs-track{gap:16px;animation-duration:150s} #view-home .stat .cs-track span{gap:8px;padding:0;font-family:var(--font);font-size:var(--t-note);line-height:20px;letter-spacing:0;color:var(--muted);background:none;box-shadow:none} #view-home .stat .cs-track i{width:3px;height:3px;background:currentColor} /* ========================================================================== 20 SECTION TITLE. .head: eyebrow, H2, lede, then --head-gap to the content. Left by default, .head.center to centre. .head--side: for a title beside its content or inside a card column, no bottom gap. /kit#section-title ========================================================================== */ :root{--head-gap:clamp(36px,4.2vw,60px)} .head,#view-home .head,#view-home #value .head{margin-bottom:var(--head-gap)} .head.center .lede,#view-home .head.center .lede{margin-inline:auto} .head,#view-home .head{display:grid;gap:16px} /* site.css gives #value .head two columns; the kit title is one column everywhere. */ #view-home #value .head{grid-template-columns:minmax(0,1fr);column-gap:0;align-items:start} .head>:not(.lede),.head>.lede:not(.center *),#view-home .head>:not(.lede),#view-home .head>.lede:not(.center *),#view-home #value .head>.h2{margin:0} .head.head--side,#view-home .head.head--side,#view-home #value .head.head--side{margin-bottom:0;max-width:none} .head .h2,#view-home .head .h2{color:var(--fg)} .head .lede,#view-home .head .lede{font-family:var(--font);font-size:var(--t-lede);line-height:1.7;letter-spacing:0;color:var(--muted)} /* Light panels on /sectors (.sd-light) do not set --fg, so the title takes ink as section 05 says. */ #view-home .sd-light .head .h2{color:var(--c-ink)} /* No pulse on live dots, anywhere. */ .live-dot{animation:none;box-shadow:none} /* ========================================================================== 23 SIGNAL TO ACTION. Blue dots and rail, day label in brand colour, soft badges. ========================================================================== */ #view-home #action .cstep::before{background:#fff;border-color:var(--c-rule);box-shadow:none} #view-home #action .cstep.on::before{background:var(--c-primary);border-color:var(--c-primary);box-shadow:none} #view-home #action .rail .lit{stroke:var(--c-primary);filter:none} #view-home #action .cstep .time{font-family:var(--font);font-size:var(--t-prose);font-weight:600;line-height:1.5;letter-spacing:0;color:var(--c-primary)} #view-home #action .cstep .art{gap:8px;box-shadow:none;background:none;border:0;border-radius:0} #view-home #action .cstep .art .pill,#view-home #action .cstep.on .art .pill{padding:4px 10px;border:0;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;line-height:1.4;letter-spacing:0;color:var(--c-primary);background:var(--c-soft)} /* Step standard (as /about, kit 27 .kledger): each step has its own top rule and dot, then the day label (mono, brand), title --t-row, text --t-prose muted, badges last. The rule and dot of a step turn blue when it is reached (.on), in place of the old rail. */ #view-home #action .chain{padding-top:0;gap:24px 32px} #view-home #action .chain svg.rail{display:none} #view-home #action .cstep{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--c-rule);transition:border-color .5s} #view-home #action .cstep.on{border-top-color:var(--c-primary)} #view-home #action .cstep::before{display:block;top:-5px;left:0;width:9px;height:9px;border:0;border-radius:50%;background:var(--c-rule);box-shadow:none} #view-home #action .cstep.on::before{background:var(--c-primary)} #view-home #action .cstep .time{order:1;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary)} #view-home #action .cstep h3{order:2;margin:0;font-family:var(--font-h);font-size:var(--t-card);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} #view-home #action .cstep p{order:3;margin:0;font-size:var(--t-prose);line-height:1.6;color:var(--muted)} #view-home #action .cstep .art{order:4;min-height:0;margin-top:4px;font-family:var(--font);font-size:var(--t-note)} @media (max-width:980px){#view-home #action .chain{grid-template-columns:1fr 1fr;row-gap:32px}#view-home #action .cstep::before{display:block}} @media (max-width:640px){#view-home #action .chain{grid-template-columns:1fr}} /* ========================================================================== 21 PAGE HERO. One hero for every sub-page, home has its own (11). Change it here. Wrapper .phero.night-card (night-card gives the dark text tones), then .phero__in: .eyebrow, .phero__title (h1), .lede, .phero__meta, .phero__actions, .phero__slot. Every piece but the title is optional. Markup: shell/page-hero.blade.php. /kit#page-hero Action: kit 07 .btn-text (ringed arrow), right of the copy from 900px, below it on mobile. Bottom slot: a page's own block, moved in by site.js (PAGES.slot): /sectors tabs, /book facts. Undo: docs/color-migration-2026-11-04/CHANGES.md, "Page hero and section titles". ========================================================================== */ :root{ --hero-top:clamp(44px,5.5vw,80px); --hero-bottom:var(--hero-top); --hero-gap:16px; --hero-bg:radial-gradient(1100px 620px at 80% 12%,color-mix(in srgb,var(--c-primary) 20%,transparent),transparent 62%),linear-gradient(180deg,var(--c-ink),var(--c-black)); } .phero{position:relative;background:var(--hero-bg)} .phero__in{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--hero-gap);padding-block:var(--hero-top) var(--hero-bottom)} .phero__in>[hidden]{display:none} .phero__title{margin:0;max-width:var(--head-title-w);font-family:var(--font-h);font-size:var(--t-hero-dark);line-height:1.04;font-weight:800;letter-spacing:-.035em;text-wrap:balance;color:var(--fg)} .phero__accent{display:block} .phero .lede{margin:0} .phero__meta{margin:0;font-family:var(--font);font-size:var(--t-note);line-height:1.5;letter-spacing:0;color:var(--muted)} .phero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--hero-gap)} .phero__actions .btn{display:inline-flex;align-items:center} .phero__actions .btn .ic{width:16px;height:16px} .phero__slot{justify-self:stretch;min-width:0;margin-top:var(--hero-gap)} .phero__slot .stabs{margin-bottom:0} /* Action as in V1 07.4: text button with the ringed arrow (kit 07 .btn-text), on the right of the copy */ .phero__actions .btn-text .btn-go__ring .ic{width:16px;height:16px} @media (min-width:981px){ .phero__in{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,5vw,80px)} .phero__in>*{grid-column:1} .phero__in>.phero__actions{grid-column:2;grid-row:1/span 4;align-self:end;justify-self:end;margin:0} .phero__in>.phero__slot{grid-column:1/-1} } /* ========================================================================== 24 SOURCED ANSWERS. Same card language as Value: white cards on the grey surface, grey or soft inner blocks, no inner borders. ========================================================================== */ #view-home #answers .ltabs{gap:8px;margin-top:0} #view-home #answers .ltab,#view-home #answers .ltab:last-child{padding:var(--card-p-s);border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule);color:var(--c-ink)} #view-home #answers .ltab .n{padding:0;font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;text-transform:none;color:var(--c-ink)} #view-home #answers .ltab .q{font-family:var(--font);font-size:var(--t-lede);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--muted)} #view-home #answers .iconrow__box{color:#8792A6;background:var(--c-paper)} #view-home #answers .ltab[aria-selected="true"] .iconrow__box,#view-home #answers .memo .iconrow__box{color:var(--c-primary);background:var(--c-soft)} #view-home #answers .memo{--ok:#1F7A45;--fg:var(--c-ink);--muted:#46566e;--faint:var(--c-gray);--line:var(--c-rule);--line-2:var(--c-rule);--peri:var(--c-primary);--mint:var(--ok);--amber:var(--c-primary);--rose:var(--faint);display:flex;flex-direction:column;gap:20px;padding:var(--card-p-m);color:var(--fg);background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--c-rule)} #view-home #answers .memo::before,#view-home #answers .memo::after{display:none} #view-home #answers .memo .trace{font-size:var(--t-note);color:var(--muted)} #view-home #answers .memo .trace:empty,#view-home #answers .memo .points:empty{display:none} #view-home #answers .memo .points{font-family:var(--font);font-size:var(--t-lede);line-height:1.5;letter-spacing:0;color:var(--muted)} #view-home #answers .memo .decision{padding:var(--card-p-s);border:0;border-radius:14px;background:var(--c-paper)} #view-home #answers .memo .decision small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;color:var(--c-primary)} #view-home #answers .memo .decision b{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)} #view-home #answers .memo .foot{margin:auto calc(var(--card-p-m) * -1) calc(var(--card-p-m) * -1);padding:16px var(--card-p-m);gap:8px;border-top:1px solid var(--c-rule)} #view-home #answers .memo .srcs{gap:8px 16px;margin:0} #view-home #answers .memo .srcs span,#view-home #answers .memo .stamp{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;border-radius:0;font-family:var(--font);font-size:var(--t-note);letter-spacing:0;color:var(--muted)} #view-home #answers .memo .foot .ic{flex:none;width:14px;height:14px} @media (min-width:981px){#view-home #answers .memo{min-height:700px}} @media (min-width:1181px){#view-home #answers .memo{min-height:650px}} /* ========================================================================== 25 BADGE. One type style for every label on the site: only the colour varies. .badge is soft blue. Variants: --neutral --solid --ok --alert --warn --on-dark. /kit#badge ========================================================================== */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:0;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--c-primary);background:var(--c-soft)} .badge--neutral{color:var(--muted);background:color-mix(in srgb,var(--fg) 6%,transparent)} .badge--solid{color:#fff;background:var(--c-primary)} .badge--ok{color:var(--ok);background:var(--ok-soft)} .badge--alert{color:var(--alert);background:var(--alert-soft)} .badge--warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)} .badge--on-dark{color:#fff;background:rgba(255,255,255,.1)} .badge .ic{flex:none;width:14px;height:14px} /* ========================================================================== 26 TABLE TITLE. Head of every demo table or document card: icon row, badge on the right, a line, then the content. /kit#table-title ========================================================================== */ .tbl-title,#view-home .tbl-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin:0;padding:0 0 16px;border-bottom:1px solid var(--line);font-family:var(--font);letter-spacing:0} .tbl-title .iconrow,#view-home .tbl-title .iconrow{flex:1 1 240px;min-width:0} .tbl-title h3,#view-home .tbl-title h3,#view-home #answers .memo .tbl-title h3{margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--fg)} .tbl-title .iconrow__d,#view-home .tbl-title .iconrow__d{display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:var(--t-note);line-height:1.5;letter-spacing:0;color:var(--muted)} #view-home #sectors .dash-top.tbl-title{padding:var(--card-p-s) var(--card-p-m)} #view-home #sectors .tbl-title .iconrow__d{grid-column:2;margin:0;justify-content:flex-start;text-align:left} #view-home #sectors .tbl-title .iconrow__box{color:#fff;background:rgba(255,255,255,.1)} #view-home #sectors .tbl-title .iconrow__t{font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:#fff} /* ========================================================================== 27 V1 PARTS, in V2 values. Taken from the V1 kit (ui-kit.html) by number, with V2 tokens: fonts, colours, card radius 14 and padding from 08. Cards are white with a --c-rule line on white and grey surfaces alike. /kit#v1-parts ========================================================================== */ /* 09.1 Card tones: icon, number tag, title, text, foot tag */ .kcard,#view-home .kcard{position:relative;display:grid;gap:12px;align-content:start;min-height:0;padding:var(--card-p-m);border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule);color:var(--c-ink);transform:none;overflow:visible} #view-home .kcard::before,#view-home .kcard::after{display:none} .kcard--paper,#view-home .kcard--paper{background:var(--c-paper);box-shadow:none} .kcard--ink,#view-home .kcard--ink{background:var(--c-ink);box-shadow:none;color:#fff} .kcard--blue,#view-home .kcard--blue{background:var(--c-primary);box-shadow:none;color:#fff} .kcard__ic,#view-home .kcard__ic{display:grid;place-items:center;width:40px;height:40px;margin:0;border-radius:10px;color:var(--c-primary);background:var(--c-soft);box-shadow:none} .kcard__ic svg,#view-home .kcard__ic svg{width:20px;height:20px} .kcard__n,#view-home .kcard__n{position:absolute;top:var(--card-p-m);right:var(--card-p-m);margin:0;padding:0;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;color:var(--faint)} .kcard__t,#view-home .kcard__t,#view-home .kcard__t b{display:block;margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:inherit} .kcard__d,#view-home .kcard__d{margin:0;font-family:var(--font);font-size:var(--t-prose);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--muted)} .kcard__f,#view-home .kcard__f{margin-top:auto;padding-top:4px;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary)} .kcard--ink .kcard__d,.kcard--blue .kcard__d{color:rgba(255,255,255,.68)} /* 09.2 Fact cards: figure, label */ .kfacts,#view-home .kfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:0;padding:0;list-style:none;background:none;box-shadow:none;border-radius:0} .kfact,#view-home .kfact{display:grid;gap:8px;align-content:start;padding:var(--card-p-m);border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule);border:0} #view-home .kfact::before,#view-home .kfact::after{display:none} .kfact__v,#view-home .kfact__v{font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--c-ink)} .kfact__l,#view-home .kfact__l{font-family:var(--font);font-size:var(--t-note);line-height:1.5;letter-spacing:0;text-transform:none;color:var(--muted)} /* 11.4 / 11.5 Ledger: numbered steps on one line */ .kledger,#view-home .kledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 32px;margin:0;padding:0;list-style:none;border:0;background:none;box-shadow:none;counter-reset:none} .kledger>li,#view-home .kledger>li{position:relative;display:grid;grid-template-columns:none;gap:8px;align-content:start;align-items:start;min-height:0;margin:0;padding:24px 0 0;border:0;border-top:1px solid var(--c-rule);border-radius:0;background:none;box-shadow:none;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .kledger>li::before,#view-home .kledger>li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--c-primary)} #view-home .kledger>li::after{display:none} .kledger>li b,#view-home .kledger>li b{font-weight:inherit;color:inherit} .kledger__n,#view-home .kledger__n,#view-home .journey .kledger__n{display:block;width:auto;height:auto;padding:0;border-radius:0;background:none;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;color:var(--c-primary);place-items:initial} .kledger__k,#view-home .kledger__k{display:block;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .kledger__t,#view-home .kledger__t{display:block;margin:4px 0 0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .kledger__d,#view-home .kledger__d{margin:4px 0 0;font-family:var(--font);font-size:var(--t-prose);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--muted)} /* 10.4 Info split rows: mono key, value */ .krows,#view-home .krows{display:grid;margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0} .krows>div,#view-home .krows>div{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:24px;align-items:baseline;margin:0;padding:16px 0;border:0;border-top:1px solid var(--c-rule);background:none} .krows>div:last-child,#view-home .krows>div:last-child{border-bottom:1px solid var(--c-rule)} .krows dt,#view-home .krows dt{margin:0;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .krows dd,#view-home .krows dd{margin:0;font-family:var(--font);font-size:var(--t-prose);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--c-ink)} .krows dd a,#view-home .krows dd a{color:var(--c-primary)} @media (max-width:640px){.krows>div,#view-home .krows>div{grid-template-columns:1fr;gap:4px}} /* 10.5 Info split, schedule: key, title, text */ .krow,#view-home .krow{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--c-rule)} .krow:last-child,#view-home .krow:last-child{border-bottom:1px solid var(--c-rule)} .krow__k,#view-home .krow__k{display:flex;flex-direction:column;gap:12px;padding:0;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .krow__k .ti,#view-home .krow__k .ti{width:40px;height:40px;border-radius:10px;color:var(--c-primary);background:var(--c-soft);box-shadow:none} .krow__t,#view-home .krow__t,#view-home .krow__t b{display:block;margin:0 0 4px;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .krow__d,#view-home .krow__d{margin:0;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;letter-spacing:0;color:var(--muted)} @media (max-width:640px){.krow,#view-home .krow{grid-template-columns:1fr;gap:12px}} /* 08.4 FAQ list: one white card per question, + in a circle, open turns blue */ .faq,#view-home .faq{display:grid;gap:8px;margin-top:0;border:0} .faq details,#view-home .faq details{padding:0;border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-rule);transition:box-shadow .2s} .faq details[open],#view-home .faq details[open]{box-shadow:inset 0 0 0 1px var(--c-primary)} .faq summary,#view-home .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--card-p-m);font-family:var(--font);font-size:var(--t-lede);font-weight:600;line-height:1.5;letter-spacing:0;color:var(--c-ink);cursor:pointer;list-style:none} .faq summary::after,#view-home .faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-family:var(--font);font-size:var(--t-lede);font-weight:500;line-height:1;color:var(--c-primary);background:var(--c-soft);transition:transform .2s} .faq details[open] summary::after,#view-home .faq details[open] summary::after{content:"+";transform:rotate(45deg);color:#fff;background:var(--c-primary)} .faq details p,#view-home .faq details p{max-width:70ch;margin:0;padding:0 var(--card-p-m) 20px;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;letter-spacing:0;color:var(--muted)} /* Where the parts sit: layout only, the look comes from the parts above. */ #view-home .pov.kledger>li{display:block;padding-top:24px;font-size:var(--t-row)} #view-home .pov.kledger .kledger__n{margin-bottom:8px;padding:0} #view-home .op{gap:16px;overflow:visible;border-radius:0;background:none;box-shadow:none} #view-home .op .kcard{padding-right:calc(var(--card-p-m) + 24px)} #view-home .journey.kledger{margin:0 0 var(--head-gap)} #view-home .journey.kledger>li{display:grid} #view-home .journey.kledger>li>div{display:grid;gap:0} #view-home .cr-r.kcard{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:var(--card-p-s) var(--card-p-m)} #view-home .cr-r.kcard:hover{box-shadow:inset 0 0 0 1px var(--c-primary);transform:none} #view-home .cr-r .cr-ic{width:40px;height:40px;border-radius:10px;color:var(--c-primary);background:var(--c-soft);box-shadow:none} #view-home .cr-r b,#view-home .cr-r h3,#view-home .cr-r h3 b{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)} #view-home .cr-r small{margin-top:2px;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--muted)} #view-home .cr-r em{font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} #view-home .cr-r em small{display:inline;font-family:var(--font);font-size:var(--t-note);font-weight:400;color:var(--muted)} #view-home .ab-co dl.krows{padding:0;border-radius:0;background:none;box-shadow:none} #view-home .tr-priv .krows{margin-top:0} #view-home .kcard__f{border:0} #view-home .tr-priv .head{margin-bottom:var(--card-p-m)} /* Pricing: one block gap between parts, blue as the only accent (V1 01.3). */ :root{--block-gap:clamp(40px,5vw,72px)} #view-home #start .tierhead,#view-home #start .est,#view-home #start .bench,#view-home #start .credits,#view-home #start .fineprint,#view-home #start>.wrap>.faq{margin-top:var(--block-gap)} #view-home #start .tiers{margin-top:24px} #view-home #start .allinc{margin-top:16px;padding:var(--card-p-s) var(--card-p-m);border-radius:14px;box-shadow:inset 0 0 0 1px var(--c-rule)} #view-home #start .allinc b::before,#view-home .hook-list li::before{background:var(--c-primary)} #view-home .hook-list li::before{background:var(--c-signal)} #view-home .rec-b{color:#fff;background:var(--c-primary);font-family:var(--font);font-size:var(--t-note);font-weight:500;letter-spacing:0;text-transform:none;padding:4px 10px} #view-home .billtog em{color:var(--c-primary);background:var(--c-soft)} #view-home .eo-pr span{color:#fff} #view-home .eo-bars i{background:var(--c-signal)} #view-home .eo-bars .h i{background:rgba(255,255,255,.3)} #view-home .bn-r i::after{background:rgba(6,18,52,.24)} #view-home .bn-r.us i::after{background:var(--c-primary)} #view-home .hook::before{display:none} /* Pricing and book text roles: units and small labels are notes, not headings. */ #view-home .tpr small,#view-home .hook-pr small,#view-home .tpr .from{font-family:var(--font);font-size:var(--t-note);font-weight:400;letter-spacing:0;color:var(--muted)} #view-home .hook-pr small{color:rgba(255,255,255,.68)} #view-home .incl span{font-family:var(--font);font-size:var(--t-note);line-height:1.4;letter-spacing:0} #view-home .bn-src,#view-home .eo-fine{font-family:var(--font);font-size:var(--t-note);letter-spacing:0} #view-home .sn-pts li{color:rgba(255,255,255,.68)} #view-home #book .bk-doc,#view-home #book .bk-doc *{--fg:var(--c-ink)} #view-home #book .bk-doc b,#view-home #book .bk-doc h3,#view-home #book .bk-doc strong,#view-home #book .bk-doc .bd-q,#view-home #book .bk-doc [class*="-t"]{color:var(--c-ink)} #view-home #book .bk-doc .hi,#view-home #book .bk-doc .md,#view-home #book .bk-doc .bd-ex{display:inline-flex;align-items:center;padding:4px 10px;border:0;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;font-style:normal;line-height:1.4;letter-spacing:0;text-transform:none} #view-home #book .bk-doc .hi{color:var(--alert);background:var(--alert-soft)} #view-home #book .bk-doc .md,#view-home #book .bk-doc .bd-ex{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)} #view-home #book .bk-doc,#view-home #book .bd-logo,#view-home #book .bd-meta .c-blurname{color:var(--c-ink)} body:not(.sub-page) #view-home .pr-only.kledger{display:none} #view-home .eo-plan small,#view-home .eo-plan .eyebrow,#view-home .eo-plan>span:first-child{color:var(--c-signal)} #view-home .est-out small:first-child,#view-home .est-out>small{color:var(--c-signal)} /* ========================================================================== 28 SECTORS DEEP, colour pass only. The blocks are animated (rows slide in, brief items stagger, live feed), so the structure waits for the motion pass. Ink shades off the palette go to --c-ink, teal goes to primary, every severity or status label takes the 25 BADGE type style. ========================================================================== */ .sd-light .dhead h3,.sd-light .qcard q,.sd-light .tt-row .tm,.sd-light .tt-row .tg,.sd-light .srcbox h4,.sd-light .srcbox span,.sd-light .qcard .ab span,.sd-light .d30 b,.src-live b,.mbrief li,.sd-light .d30 li.cur .dn2,.sd-light .qcard .ab span.lit{color:var(--c-ink)} .mb-dec{box-shadow:inset 3px 0 0 var(--c-primary),0 0 0 1px var(--c-rule)} .mb-dec small,.mb-foot .ic{color:var(--c-primary)} .tl .tg2,.tl .ip,.tg-new{display:inline-flex;align-items:center;padding:4px 10px;border:0;border-radius:999px;box-shadow:none;font-family:var(--font);font-size:var(--t-note);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none} .tl .tg2{color:var(--c-signal);background:rgba(163,182,255,.12)} .tl .ip{color:rgba(255,255,255,.68);background:rgba(255,255,255,.1)} .tl li.i3 .ip{color:var(--alert);background:var(--alert-soft)} .tl li.i2 .ip{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)} .tg-new{color:#1F7A45;background:#E3F6EA} .tl li.i3{--c:var(--alert)}.tl li.i2{--c:var(--warn)}.tl li.i1{--c:var(--c-signal)} .tl li.i3::before{background:var(--alert)} .thr.t1 i:nth-child(-n+1){background:var(--c-signal)}.thr.t2 i:nth-child(-n+2){background:var(--warn)}.thr.t3 i{background:var(--alert)} /* ========================================================================== 29 CTA. Two levels, one hierarchy: - Closing band (#closing, end of every page): title --t-section. The largest CTA. - In-page CTA card (.ctacard; today .tr-proc .ab-cta .nl .scta .snap #readout): one step below, title --t-sub, lede --t-prose, padding --card-p-l, kit dark card line only. /kit#cta ========================================================================== */ #view-home :is(.ctacard,.tr-proc,.ab-cta,.nl,.scta,.snap,#readout){padding:var(--card-p-l);border-radius:var(--card-r-l);box-shadow:var(--card-line-dark),var(--card-shadow-dark)} #view-home :is(.ctacard,.tr-proc,.ab-cta,.nl,.scta,.snap,#readout) :is(h2,.h2){font-size:var(--t-sub);line-height:1.2;letter-spacing:-.02em;max-width:none} #view-home :is(.ctacard,.tr-proc,.ab-cta,.nl,.scta,.snap,#readout) .head{margin-bottom:0;gap:8px} #view-home :is(.ctacard,.tr-proc,.ab-cta,.nl,.scta,.snap,#readout) .lede{font-size:var(--t-prose);line-height:1.65;margin-top:4px} #view-home :is(.ctacard,.tr-proc,.ab-cta,.nl,.scta,.snap,#readout) .btn-lg{height:44px;padding:0 20px;font-size:var(--t-button)} /* ========================================================================== 30 SUB-PAGE LAYOUT. Fewer boxes, text and content side by side (as /contact). ========================================================================== */ /* FAQ block: kit title left, list right (6/6) */ .faqsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--head-gap) clamp(32px,5vw,72px);align-items:start;margin-top:var(--block-gap)} .faqsec>.head,#view-home .faqsec>.head{margin:0;position:sticky;top:96px} .faqsec .faq,#view-home .faqsec .faq{margin:0} #book .faqsec{margin-top:0} @media (max-width:980px){.faqsec{grid-template-columns:1fr}.faqsec>.head,#view-home .faqsec>.head{position:static}} /* Trust: the six principles as open columns, privacy notice title left / rows right */ #view-home #trust .tr-grid .trc.kcard{padding:20px 0 0;background:none;border-radius:0;box-shadow:inset 0 1px 0 var(--c-rule)} #view-home #trust .tr-grid{row-gap:var(--head-gap)} #view-home #trust .tr-priv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--head-gap) clamp(32px,5vw,72px);align-items:start;padding:0;background:none;box-shadow:none;border-radius:0;margin-top:var(--block-gap)} #view-home #trust .tr-priv>.head{margin:0} #view-home #trust .tr-proc{margin-top:var(--block-gap)} @media (max-width:980px){#view-home #trust .tr-priv{grid-template-columns:1fr}} /* About: numbers move into the hero (same piece as /book); operating model as open columns */ .phero__slot .ab-nums{margin:0} #view-home #about .op{gap:24px;background:none;box-shadow:none;border-radius:0;overflow:visible} #view-home #about .op li.kcard{padding:20px 0 0;background:none;border-radius:0;box-shadow:inset 0 1px 0 var(--c-rule)!important} /* Client stories: case cards two by two */ @media (min-width:981px){#view-home #cases .proofgrid.pg4{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Pricing: kit card line instead of stacked shadows; "On every plan" without a box, right under the three tiers; one gap under every title */ #view-home #start{--e-light:var(--card-line-white);--card-shadow-white:0 0 #0000} #view-home #start .allinc{padding:0;background:none;box-shadow:none;border:0;border-radius:0;margin-top:16px} #view-home #start .head:not(.head--side){margin-bottom:var(--head-gap)} #view-home #start .tierhead{margin-bottom:var(--head-gap)} #view-home #about .ab-op>.head{margin-bottom:0}#view-home #about .ab-op{row-gap:var(--head-gap)} /* Insights on a light surface: its report cards and the newsletter card stay dark cards */ .day #insGrid>*,.day .nl{--fg:#ffffff;--muted:rgba(255,255,255,0.68);--faint:rgba(255,255,255,0.5);--line:rgba(163,182,255,0.12);--line-2:rgba(163,182,255,0.24);--peri:#a3b6ff;color:var(--fg)} .day .nl :is(h2,.h2){color:#fff} .ctacard{padding:var(--card-p-l);border-radius:var(--card-r-l);box-shadow:var(--card-line-dark),var(--card-shadow-dark)} .ctacard :is(h2,.h2){font-size:var(--t-sub);line-height:1.2;letter-spacing:-.02em;color:#fff} .ctacard .head{margin-bottom:0;gap:8px}.ctacard .lede{font-size:var(--t-prose);line-height:1.65;color:rgba(255,255,255,.68)} /* Steps (11.4/11.5 .kledger), one standard on every page: rule + dot, number on its own line, then title. The old .pov rule placed the number absolutely and it ran into the title. */ #view-home .pov.kledger>li{padding:24px 0 0} #view-home .pov.kledger .kledger__n{position:static;display:block;margin:0 0 8px;padding:0;color:var(--faint)} /* ========================================================================== 31 CARD TYPES. Every card on the site is one of eight types. Same parts read the same everywhere; only the content differs. Built on 08 CARDS (radius, padding, line) and the 01 roles. /kit#card-types Shadow rule: cards inside a section carry the line only (--card-line-white or --card-line-dark), never a drop shadow. Out of this rule: pricing tiers, 29 CTA cards, the animated modules (hero, how, sectors, lenses, rhythm). Text roles, all types: title --font-h --t-row 700, ink (white on dark) emphasis --font-h --t-lede 700, ink: selector titles, link-box titles body --font --t-prose, --c-body (large detail cards: --t-lede) meta --font --t-note, --c-body / --c-gray label --mono --t-eyebrow 500 .12em, --c-gray (white tones on dark) index label size in --c-primary: only a step or day number that leads its title, and the active item figure --font-h 700/800 at --t-sub or --t-big; a price in a row --t-row Buttons: kit 07 only. Inside a card a .btn-lg renders at the default 44px. Icons: title icon 48px box, radius 10, 22px glyph (17 ICON ROW), soft blue box. Inline icon in a list, link or footer: 16px, no box. Types: select, detail, feature, info (+ open), link, row, form/doc, media. ========================================================================== */ :root{--ct-ic-box:48px;--ct-ic:22px;--ct-ic-r:var(--card-r-s);--ct-ic-inline:16px;--ct-gap:8px;--ct-gap-l:20px} /* Reusable classes for new markup ------------------------------------------ */ .ct{display:flex;flex-direction:column;gap:var(--ct-gap);min-width:0;border-radius:var(--card-r-m);padding:var(--card-p-m);background:#fff;box-shadow:var(--card-line-white);color:var(--c-ink)} .ct--dark{background:var(--c-navy);box-shadow:var(--card-line-dark);color:#fff} .ct--l{border-radius:var(--card-r-l)} .ct--select{padding:var(--card-p-s)} .ct.iconrow{display:grid;column-gap:16px;row-gap:2px} .ct--select .iconrow__d{font-size:var(--t-prose);color:var(--c-body)} .ct--open{padding:20px 0 0;border-radius:0;background:none;box-shadow:inset 0 1px 0 var(--c-rule)} .ct__ic{display:grid;place-items:center;flex:none;width:var(--ct-ic-box);height:var(--ct-ic-box);border-radius:var(--ct-ic-r);color:var(--c-primary);background:var(--c-soft)} .ct__ic .ic,.ct__ic svg{width:var(--ct-ic);height:var(--ct-ic)} .ct__l{margin:0;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} .ct__n{margin:0;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary)} .ct__t{margin:0;font-family:var(--font-h);font-size:var(--t-card);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:inherit} .ct__e{margin:0;font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:inherit} .ct__b{margin:0;font-family:var(--font);font-size:var(--t-prose);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--c-body)} .ct__m{margin:0;font-family:var(--font);font-size:var(--t-note);line-height:1.5;letter-spacing:0;color:var(--c-gray)} .ct--dark .ct__b{color:rgba(255,255,255,.68)}.ct--dark .ct__m,.ct--dark .ct__l{color:rgba(255,255,255,.5)} .ct .ic-in,.ct li>.ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline);flex:none} /* --- SELECT: tab or selector card (Value outcomes, Sourced answers teams) --- */ #view-home #value .vx-o,#view-home #value .vx-o:hover,#view-home #value .vx-o.on,#view-home #value .vx-o.on:hover, #view-home #answers .ltab,#view-home #answers .ltab:last-child,#view-home #answers .ltab:hover{padding:var(--card-p-s);border:0;border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white);transform:none} #view-home #value .vx-o .iconrow__t,#view-home #answers .ltab .iconrow__t{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;text-transform:none;color:var(--c-ink)} #view-home #value .vx-o .iconrow__d,#view-home #answers .ltab .iconrow__d{font-family:var(--font);font-size:var(--t-prose);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--c-body)} /* --- DETAIL: the panel a selector drives (Value, Sourced answers) --------- */ #view-home #value .vx-card,#view-home #answers .memo{border-radius:var(--card-r-l);padding:var(--card-p-m);background:#fff;box-shadow:var(--card-line-white)} /* Inner blocks: grey, no line. A coloured ring stays only as the live state. */ #view-home #value .vx-seg,#view-home #value .vx-stage,#view-home #value .vx-c,#view-home #answers .memo .decision{background:var(--c-paper);box-shadow:none} #view-home #value .vx-steps{background:var(--c-paper);box-shadow:inset 0 1px 0 var(--c-rule)} #view-home #value .vx2[data-mode="a"] .vx-c.a{box-shadow:inset 0 0 0 1px var(--ok)} #view-home #value .vx2[data-mode="t"] .vx-c.t{box-shadow:inset 0 0 0 1px var(--alert)} #view-home #value .vx-h small,#view-home #value .vx-kpi small,#view-home #value .vx-c small,#view-home #answers .memo .decision small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-gray)} #view-home #value .vx-h h3{font-family:var(--font-h);font-size:var(--t-card);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} #view-home #value .vx-c p{font-family:var(--font);font-size:var(--t-prose);line-height:1.5;color:var(--c-body)} #view-home #answers .memo .foot .ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline)} /* --- FEATURE: icon head, list, foot label (Service-as-software) ----------- */ #view-home #model .mt-col,#view-home #model .mt-col.us{border-radius:var(--card-r-l);padding:var(--card-p-m);background:#fff;box-shadow:var(--card-line-white)} #view-home #model .mt-h h3.iconrow__t,#view-home #model .mt-h h3.iconrow__t>*{font-family:var(--font-h);font-size:var(--t-card);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--c-ink)} #view-home #model .mt-h .iconrow__d{font-family:var(--font);font-size:var(--t-prose);line-height:1.5;letter-spacing:0;color:var(--c-body)} #view-home #model .mt-col li,#view-home #model .mt-col.us li{font-family:var(--font);font-size:var(--t-prose);line-height:1.5;letter-spacing:0;color:var(--c-body)} #view-home #model .mt-col .mt-f,#view-home #model .mt-col.us .mt-f{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-gray)} #view-home #model .mt-col.us .mt-badge{padding:4px 10px;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:#fff;background:var(--c-primary)} /* --- INFO: label or index, title, body; icon or list optional ------------- */ #view-home #book .bk-tl li,#view-home #book .bk-two>.card,#view-home #book .bk-guar,#view-home #start .fp-t,#view-home #start .bn-t, body .lgv .lgv-ct-steps li,body .lgv .lgv-ct-note{padding:var(--card-p-m);border:0;border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white)} #view-home #book .bk-tl b,body .lgv .lgv-ct-steps li>span{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary)} #view-home #book .bk-two .eyebrow{font-size:var(--t-eyebrow);letter-spacing:.12em;color:var(--c-gray)} #view-home #book .bk-tl h3,#view-home #book .bk-guar h3>b,body .lgv .lgv-ct-steps h3{font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} #view-home #book .bk-tl li>span,#view-home #book .bk-guar p,#view-home #book .bk-yes li,#view-home #book .bk-no li,#view-home #start .fp-t li,body .lgv .lgv-ct-steps p,body .lgv .lgv-ct-note p{font-family:var(--font);font-size:var(--t-prose);line-height:1.6;letter-spacing:0;color:var(--c-body)} body .lgv .lgv-ct-note strong{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)} #view-home #book .bk-guar .bg-ic,#view-home #about .op .kcard__ic,#view-home #trust .trc .kcard__ic{width:var(--ct-ic-box);height:var(--ct-ic-box);border-radius:var(--ct-ic-r);color:var(--c-primary);background:var(--c-soft);box-shadow:none} #view-home #book .bk-guar .bg-ic .ic,#view-home #about .op .kcard__ic svg,#view-home #trust .trc .kcard__ic svg{width:var(--ct-ic);height:var(--ct-ic)} /* Open info: About operating model and Trust principles, a top rule instead of a box */ #view-home #about .op .kcard__f{color:var(--c-gray)} #view-home #about .op .kcard__d,#view-home #trust .trc .kcard__d{font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} /* Benchmark rows inside the info card: label, figure, note; the source line is V1 08.6 */ #view-home #start .bn-r{grid-template-columns:minmax(0,1fr) auto} #view-home #start .bn-r span{font-family:var(--font);font-size:var(--t-prose);font-weight:500;line-height:1.5;color:var(--c-ink)} #view-home #start .bn-r em{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)} #view-home #start .bn-r small{font-family:var(--font);font-size:var(--t-note);line-height:1.5;color:var(--c-gray)} #view-home #start .bn-r.us span,#view-home #start .bn-r.us em{color:var(--c-primary)} #view-home #start .bn-src{margin-top:8px;font-family:var(--mono);font-size:var(--t-tag);line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} /* --- LINK: the whole card is the link (V1 09.3 link card, 08.5 link box) --- */ :root{ --ct-go:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061234' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); --ct-go-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); } /* Link card: label, title, body, ring arrow at the foot (Book, Recent work) */ #view-home #book .bk-proof a{display:flex;flex-direction:column;gap:var(--ct-gap);padding:var(--card-p-m);border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white);transform:none} #view-home #book .bk-proof a::after{content:"";display:block;flex:none;width:32px;height:32px;margin-top:auto;border-radius:50%;background:var(--ct-go) center/14px no-repeat;box-shadow:inset 0 0 0 1px var(--c-rule);transition:background-color .2s,box-shadow .2s} #view-home #book .bk-proof a:hover{box-shadow:var(--e-light-hi)} #view-home #book .bk-proof a:hover::after{background:var(--c-primary) var(--ct-go-on) center/14px no-repeat;box-shadow:none} #view-home #book .bk-proof small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-gray)} #view-home #book .bk-proof h3{margin:0} #view-home #book .bk-proof a>span{margin:0 0 12px;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} /* Link box, two lines: title, link line with its arrow (Book, beside the form) */ #view-home #book .bf-alt a{display:grid;gap:4px;padding:var(--card-p-s) var(--card-p-m);border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white)} #view-home #book .bf-alt b{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)} #view-home #book .bf-alt span{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:var(--t-prose);font-weight:600;line-height:1.5;color:var(--c-primary)} #view-home #book .bf-alt .ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline)} /* Link box, one line: case pages, previous / all / next */ body.case-page #view-home .c-pager a{padding:var(--card-p-s) var(--card-p-m);border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white)} body.case-page #view-home .c-pager a:hover{box-shadow:var(--e-light-hi);transform:none} body.case-page #view-home .c-pager span{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-gray)} body.case-page #view-home .c-pager b{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)} /* --- ROW: icon, title and body, then a figure or one action -------------- */ #view-home #start .cr-r.kcard{padding:var(--card-p-s) var(--card-p-m);border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white)} #view-home #start .cr-r.kcard:hover{box-shadow:var(--e-light-hi)} #view-home #start .fp-a,body.case-page #view-home .c-out{gap:16px;padding:var(--card-p-m);border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white)} #view-home #start .cr-r .cr-ic,#view-home #start .fp-a .fp-ic,body.case-page #view-home .c-out .co-ic{width:var(--ct-ic-box);height:var(--ct-ic-box);border-radius:var(--ct-ic-r);color:var(--c-primary);background:var(--c-soft);box-shadow:none} body.case-page #view-home .c-out .co-ic{color:var(--c-ink);background:color-mix(in srgb,var(--ch) 35%,#fff)} #view-home #start .cr-r .cr-ic .ic,#view-home #start .fp-a .fp-ic .ic,body.case-page #view-home .c-out .co-ic .ic{width:var(--ct-ic);height:var(--ct-ic)} #view-home #start .cr-r h3,#view-home #start .cr-r h3>b,#view-home #start .fp-a h3,#view-home #start .fp-a h3>b{margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} #view-home #start .cr-r div>small,#view-home #start .fp-a p,body.case-page #view-home .c-out p{font-family:var(--font);font-size:var(--t-prose);line-height:1.6;letter-spacing:0;color:var(--c-body)} #view-home #start .fp-a strong{color:var(--c-ink)} #view-home #start .cr-r em{font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} body.case-page #view-home .c-out small{font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em} /* One action per card: kit 07 default size */ #view-home :is(#start .fp-a,#start .est-out,.c-out) .btn.btn-lg{height:44px;padding:0 24px;font-size:14px;line-height:20px} /* --- FORM and DOCUMENT: large card, line only ------------------------------ */ #view-home #book .bkform,#view-home #book .bk-doc{border-radius:var(--card-r-l);padding:var(--card-p-m);background:#fff;box-shadow:var(--card-line-white)} #view-home #book .bf-h h3>b{font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} #view-home #book .bf-h small{font-family:var(--font);font-size:var(--t-note);line-height:1.5;color:var(--c-body)} /* Document rows: grey inner blocks without a line, as in the detail type; the decision keeps its blue edge */ #view-home #book .bk-doc .bd-list li{background:var(--c-paper);box-shadow:none} #view-home #book .bk-doc .bd-dec{background:var(--c-paper);box-shadow:inset 3px 0 0 var(--c-primary)} #view-home #book .bk-doc :is(.bd-q,.bd-dec) small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-gray)} body .lgv .lgv-sheet{border:0;border-radius:var(--card-r-l);background:#fff;box-shadow:var(--card-line-white)} body .lgv .lgv-sheet__head{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em} /* Snapshot: dark large card, the form on a dark inner card. No drop shadow. */ #view-home .snap{box-shadow:var(--card-line-dark)} #view-home .snap .snform{padding:var(--card-p-m);border-radius:var(--card-r-m);background:var(--c-navy);box-shadow:var(--card-line-dark)} #view-home .snap .sn-pts .ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline);color:var(--c-signal)} /* Estimator: large white card with its own title; the result on a dark inner card */ #view-home #start .est{border-radius:var(--card-r-l);padding:var(--card-p-l);background:#fff;box-shadow:var(--card-line-white)} #view-home #start .est-out{border-radius:var(--card-r-m);padding:var(--card-p-m);box-shadow:var(--card-line-dark)} #view-home #start .est-out>small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em} #view-home #start .eo-bars em{font-family:var(--font);font-size:var(--t-note);font-weight:600;letter-spacing:0} /* --- MEDIA: cover on top, then label, title, body, meta (Insights reports) - */ #view-home #insGrid .rep{border-radius:var(--card-r-m);box-shadow:var(--card-line-dark)} #view-home #insGrid .rep-body{gap:var(--ct-gap);padding:var(--card-p-m)} #view-home #insGrid .rep-cover .rt{font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em} #view-home #insGrid .rep-body p{font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--muted)} #view-home #insGrid .rep-body>span{font-family:var(--font);font-size:var(--t-note);letter-spacing:0;color:var(--faint)} /* --- FIGURE: big figure, label, body (case pages, what the signals showed: V1 09.6) */ body.case-page #view-home .cf{gap:var(--ct-gap);padding:var(--card-p-m);border-radius:var(--card-r-m);box-shadow:var(--card-line-dark)} body.case-page #view-home .cf p{margin-top:4px;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:rgba(255,255,255,.68)} /* ========================================================================== 32 MORE V1 PARTS, in V2 values (after 27). Numbers are the V1 kit's (bouncewatch-v1/public/ui-kit.html). Fonts, colours, radius and padding come from the V2 tokens; V1's photos are left out. /kit#v1-more Applied: 10.5 on Client stories People; 08.5 on Book links and case pages; 09.3 on Book Recent work; 09.6 on case findings; 08.6 source line under the pricing benchmark (see 31). The rest is stored for the next pages. ========================================================================== */ /* V1 08.5 Link boxes: plain, with an icon, or two lines two across */ .klinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin:0;padding:0;list-style:none} .klinks--two{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))} .klinks a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--card-p-m);border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white);color:var(--c-ink);transition:box-shadow .2s} .klinks a:hover{box-shadow:var(--e-light-hi)} .klinks a>span{display:flex;align-items:flex-start;gap:12px;min-width:0} .klinks b{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em} .klinks small{display:block;margin-top:2px;font-family:var(--font);font-size:var(--t-prose);line-height:1.5;color:var(--c-body)} .klinks .ic{flex:none;width:var(--ct-ic-inline);height:var(--ct-ic-inline);margin-top:4px;color:var(--c-primary)} .klinks a>.ic{margin-top:0;color:var(--c-ink)} /* V1 08.6 Takeaway + source line: under a table or a chart */ .ktake{margin:0;padding-top:24px;border-top:1px solid var(--c-rule);font-family:var(--font);font-size:var(--t-lede);line-height:1.7;color:var(--c-body)} .ktake strong{font-weight:700;color:var(--c-ink)} .ksrc{margin:20px 0 0;font-family:var(--mono);font-size:var(--t-tag);line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} /* V1 09.3 Link cards: two or three doors, the whole card is the link */ .kdoors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px} .kdoor{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:var(--card-p-l);border-radius:var(--card-r-m);background:var(--c-paper);color:var(--c-ink);transition:box-shadow .2s} .kdoor:hover{box-shadow:var(--e-light-hi)} .kdoor__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .kdoor__t{margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em} .kdoor__tag{flex:none;padding-top:4px;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} .kdoor__d{margin:0 0 20px;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} .kdoor--ink{background:var(--c-ink);color:#fff} .kdoor--ink .kdoor__tag{color:var(--c-signal)} .kdoor--ink .kdoor__d{color:rgba(255,255,255,.8)} .kdoor--white{background:#fff;box-shadow:var(--card-line-white)} /* V1 09.6 Two cards and three figures: icon, tag, title, line; figure cards */ .ktwo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px} .ktwo__c{display:grid;gap:24px;padding:var(--card-p-l);border-radius:var(--card-r-m);background:var(--c-paper)} .ktwo__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .ktwo__ic{display:grid;place-items:center;width:var(--ct-ic-box);height:var(--ct-ic-box);border-radius:var(--ct-ic-r);color:var(--c-primary);background:#fff} .ktwo__ic svg{width:var(--ct-ic);height:var(--ct-ic)} .ktwo__tag{padding-top:4px;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} .ktwo__t{margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .ktwo__d{margin:8px 0 0;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} .kfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-top:16px} .kfig{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:240px;padding:var(--card-p-l);border-radius:var(--card-r-m);background:var(--c-paper);color:var(--c-ink)} .kfig__v{margin:0;font-family:var(--font-h);font-size:var(--t-big);font-weight:800;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .kfig__l{margin:0;font-family:var(--font);font-size:var(--t-lede);font-weight:500;line-height:1.5} .kfig--blue{background:var(--c-primary);color:#fff} .kfig--ink{background:var(--c-ink);color:#fff} .kfig--ink .kfig__l{color:rgba(255,255,255,.8)} /* V1 10.1 Split block: claim left, paragraph and figures right (6/6, one gap) */ .ksplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--head-gap) clamp(32px,5vw,64px);align-items:start} .ksplit__lead{margin:16px 0 0;font-family:var(--font-h);font-size:var(--t-section);font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--c-ink)} .ksplit__text{margin:0;padding-top:28px;font-family:var(--font);font-size:var(--t-lede);line-height:1.7;color:var(--c-body)} .ksplit__rows{display:flex;flex-wrap:wrap;margin-top:40px} .ksplit__row{display:grid;gap:12px;min-width:160px;padding:4px 24px;box-shadow:inset 1px 0 0 var(--c-rule)} .ksplit__row:first-child{padding-left:0;box-shadow:none} .ksplit__row b{font-family:var(--font-h);font-size:var(--t-big);font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--c-ink)} .ksplit__row p{margin:0;max-width:22ch;font-family:var(--font);font-size:var(--t-note);line-height:1.5;color:var(--c-gray)} @media (max-width:980px){.ksplit{grid-template-columns:1fr}} /* V1 10.5 Info split, schedule: title and text left; rows right, index, title, text */ .kinfo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--head-gap) clamp(32px,5vw,64px);align-items:start} .kinfo__rows{margin:0;padding:0;list-style:none} .kinfo__row,#view-home .kinfo__row{display:grid;grid-template-columns:minmax(96px,176px) minmax(0,1fr);gap:24px;padding:var(--card-p-m) var(--card-p-s);border:0;border-bottom:1px solid var(--c-rule)} .kinfo__row:last-child,#view-home .kinfo__row:last-child{border-bottom:0} .kinfo__n{margin:0;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary)} .kinfo__t{margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .kinfo__d{margin:8px 0 0;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} @media (max-width:980px){.kinfo{grid-template-columns:1fr}} @media (max-width:640px){.kinfo__row,#view-home .kinfo__row{grid-template-columns:1fr;gap:8px;padding-inline:0}} /* Applied: Client stories, Analysts stay in the loop (#people). The row keeps .krow for its JS; the icon is not part of 10.5, the label is the row's lead. */ #view-home #people .krow{grid-template-columns:minmax(96px,176px) minmax(0,1fr);gap:24px;padding:var(--card-p-m) var(--card-p-s);border:0;border-bottom:1px solid var(--c-rule)} #view-home #people .krow:last-child{border-bottom:0} #view-home #people .krow__k{flex-direction:row;gap:0;color:var(--c-primary)} #view-home #people .krow__k .ti{display:none} #view-home #people .krow__t,#view-home #people .krow__t b{margin:0;font-size:var(--t-row)} #view-home #people .krow__d{margin-top:8px;font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} @media (max-width:640px){#view-home #people .krow{grid-template-columns:1fr;gap:8px;padding-inline:0}} /* V1 10.6 Rules split: head and text left, an open-one list right (photo left out) */ .krules{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--head-gap) clamp(32px,5vw,64px);align-items:start} .krules__list{display:grid} .krules__item{border-bottom:1px solid var(--c-rule)} .krules__item:last-child{border-bottom:0} .krules__item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;list-style:none} .krules__item summary::-webkit-details-marker{display:none} .krules__item summary::after{content:"+";flex:none;font-family:var(--font);font-size:22px;line-height:1;color:var(--c-primary);transition:transform .2s} .krules__item[open] summary::after{transform:rotate(45deg)} .krules__item h3{margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .krules__item p{max-width:60ch;margin:0;padding:0 0 24px;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} @media (max-width:980px){.krules{grid-template-columns:1fr}} /* V1 11.6 Ledger, paper: three steps on the grey surface, the last on ink */ .kledger--paper{gap:56px} .kledger--paper>li{border-top:0;padding-top:0} .kledger--paper>li::before{display:none} .kledger__list{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none;font-family:var(--font);font-size:var(--t-note);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--c-ink)} .kledger__list li{padding-bottom:8px;border-bottom:1px solid var(--c-rule)} .kledger--paper>li.is-final .kledger__body{padding:var(--card-p-m);border-radius:var(--card-r-m);background:var(--c-ink);color:#fff} .kledger--paper>li.is-final .kledger__t{color:#fff} .kledger--paper>li.is-final .kledger__k{color:var(--c-signal)} .kledger--paper>li.is-final .kledger__d{color:rgba(255,255,255,.68)} .kledger--paper>li.is-final .kledger__list{color:rgba(255,255,255,.88)} .kledger--paper>li.is-final .kledger__list li{border-color:rgba(255,255,255,.12)} /* V1 12.3 Quote card: person, quote, sector label (no photo: initials) */ .kquote{display:flex;flex-direction:column;gap:24px;padding:var(--card-p-l);border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white)} .kquote__who{display:flex;align-items:center;gap:16px} .kquote__av{display:grid;place-items:center;flex:none;width:var(--ct-ic-box);height:var(--ct-ic-box);border-radius:50%;font-family:var(--font-h);font-size:var(--t-prose);font-weight:700;color:var(--c-primary);background:var(--c-soft)} .kquote__n{display:block;font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;color:var(--c-ink)} .kquote__r{display:block;font-family:var(--font);font-size:var(--t-note);line-height:1.5;color:var(--c-gray)} .kquote__q{margin:0;font-family:var(--font);font-size:var(--t-lede);line-height:1.7;color:var(--c-body)} .kquote__f{margin-top:auto;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} /* V1 12.5 Proof rows: head, then numbered points (photo left out) */ .kproof{display:grid;gap:32px} .kproof__row{display:grid;gap:4px} .kproof__n{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-primary)} .kproof__t{margin:4px 0 0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .kproof__d{margin:4px 0 0;max-width:62ch;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} /* V1 13.9 Sheet table: grey head strip, rows of date or index, text, label; note */ .ksheet{overflow:hidden;border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white)} .ksheet__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:var(--card-p-s) var(--card-p-m);border-bottom:1px solid var(--c-rule);background:var(--c-paper);font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} .ksheet__rows{margin:0;padding:0 var(--card-p-m);list-style:none} .ksheet__row{display:grid;grid-template-columns:minmax(80px,120px) minmax(0,1fr) auto;gap:16px 24px;align-items:start;padding:20px 0;border-bottom:1px solid var(--c-rule)} .ksheet__k{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-primary)} .ksheet__t{display:block;font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;color:var(--c-ink)} .ksheet__d{margin:4px 0 0;font-family:var(--font);font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} .ksheet__note{margin:0;padding:20px var(--card-p-m);font-family:var(--font);font-size:var(--t-note);line-height:1.5;color:var(--c-body)} .ksheet__note b{color:var(--c-ink)} @media (max-width:640px){.ksheet__row{grid-template-columns:1fr}} /* V1 13.10 Compare table: our column on ink, marks instead of words */ .kcompare{overflow-x:auto;border-radius:var(--card-r-m);background:#fff;box-shadow:var(--card-line-white)} .kcompare table{width:100%;border-collapse:collapse} .kcompare th{padding:16px 12px;border-bottom:1px solid var(--c-rule);background:var(--c-paper);font-family:var(--mono);font-size:var(--t-tag);font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--c-gray)} .kcompare td{padding:14px 12px;border-bottom:1px solid var(--c-rule);font-family:var(--font);font-size:var(--t-prose);line-height:1.5;text-align:center;color:var(--c-ink)} .kcompare tr:last-child td{border-bottom:0} .kcompare th:first-child,.kcompare td:first-child{padding-left:var(--card-p-m);text-align:left;color:var(--c-body)} .kcompare .is-us{color:#fff;background:var(--c-ink);border-color:rgba(255,255,255,.12)} .kcompare th.is-us{color:#fff;background:var(--c-ink)} .kcompare .is-key{font-weight:600;color:var(--c-ink)} .kcompare .ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline)} .kcompare .no{color:var(--c-rule)} #view-home #readout .head :is(h2,h3),#view-home #readout .head h3>*{font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;line-height:1.2;letter-spacing:-.02em} /* ========================================================================== 33 HEADER MENU. Panels and mega menu in one plain language. - One type size with the header: item title 14px (the .ddb size, kit 08), sub-line --t-note. - Flat ink panel, kit dark card line and neutral shadow; no radial or linear gradients. - Icons without a box: muted by default, colour only on hover / active (sector colour in the Sectors list, --c-signal elsewhere). Glyph 20px. - Active / hover row: a soft wash only, no coloured outline or gradient. ========================================================================== */ .dd-panel{background:var(--c-ink);border:0;border-radius:var(--card-r-l);box-shadow:var(--card-line-dark),var(--card-shadow-dark)} .dd-panel::before{display:none} .dd-panel>a{grid-template-columns:20px minmax(0,1fr);gap:2px 14px;padding:10px 12px;border-radius:var(--card-r-s)} .dd-panel>a:hover,#megaList a:hover,.mega-l a.on,#megaList a.on{background:rgba(255,255,255,.05);box-shadow:none} .dd-panel a .it,.mega-l a .it,#megaList a .it{width:20px;height:20px;border-radius:0;background:none;box-shadow:none;color:rgba(255,255,255,.6);transition:color .2s} .dd-panel a .it .ic,#megaList a .it .ic{width:20px;height:20px} .dd-panel a:hover .it{color:var(--c-signal);background:none} .mega-l a:hover .it,.mega-l a.on .it,#megaList a:hover .it,#megaList a.on .it{color:var(--c);background:none} .dd-panel b,.dd-panel a .tx b,.mega-l b,#megaList a .tx b{font-family:var(--font);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0;color:#fff} .dd-panel span,.dd-panel a .tx span,.mega-l .tx span,#megaList a .tx span{font-size:var(--t-note);line-height:1.5;letter-spacing:0;color:rgba(255,255,255,.6)} #megaList a{grid-template-columns:20px minmax(0,1fr) auto 18px;border-radius:var(--card-r-s)} #megaList a::before{display:none} .ml-h,.ml-meta small,.mega-r .mp-tag,.mp-live,.mp-kpi small,.mp-ago{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em} .ml-h,.ml-meta small,.mp-kpi small,.mp-ago{color:rgba(255,255,255,.5)} .ml-meta em{font-size:var(--t-note);font-weight:600;color:#fff} /* Preview card on the right: one flat surface, figures without boxes */ .mega-r{background:rgba(255,255,255,.05);box-shadow:var(--card-line-dark);border-radius:var(--card-r-m)} .mp-scope{background:none;box-shadow:none} .mp-kpi div{padding:10px 0 0;border-radius:0;background:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} .mp-kpi b{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;color:#fff} .mp-feed{background:none} .mega-r .mp-top .it,.mega-r .mp-top>span:first-child{background:none;box-shadow:none} .mega-r .mp-top>span:first-child{color:var(--c)} .mega-r .mp-top>span:first-child .ic{width:22px;height:22px} .mega-r .mp-go{white-space:nowrap;flex:none} #nav .mega-r .mp-ic{color:var(--c);background:none;box-shadow:none} #nav .mega-r .mp-go{display:inline-flex;width:auto;padding:8px 16px;white-space:nowrap} .dh-bar .mq__item,.dh-bar .mq__item b,.dh-bar .mq__item span{font-size:var(--t-note)} #nav .dd-panel.mega{background:var(--c-ink);background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none} #nav .mega-f{background:none;border-top:1px solid rgba(255,255,255,.1)} /* Mega preview fixes: icon in sector colour, figure labels as plain notes, initials that fit */ #nav .mega-r .mp-ic svg,#nav .mega-r .mp-ic .ic{width:22px;height:22px;color:var(--c);stroke:currentColor} #nav .mega-r .mp-kpi small{font-family:var(--font);font-size:var(--t-note);font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.6)} #nav .mega-r .mp-ago{font-family:var(--font);font-size:var(--t-note);letter-spacing:0;color:rgba(255,255,255,.5);white-space:nowrap} #nav .mega-r .mp-rv i{width:28px;height:28px;margin-left:-6px;font-family:var(--font);font-size:var(--t-tag);font-weight:700;letter-spacing:0;box-shadow:0 0 0 2px var(--c-ink)} #nav .mega-r .mp-rv i:first-child{margin-left:0} #nav .mega-r .mp-kpi div{display:grid;grid-template-rows:1fr auto;gap:4px} #nav .mega-r .mp-feed{align-items:baseline} /* 33b Mega preview head: icon + eyebrow on one line, title under, Live on the right of line one; feed aligned to the card edge */ #nav .mega-r .mp-top{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic tag live" "t t t";column-gap:8px;row-gap:6px;align-items:center} #nav .mega-r .mp-top>div{display:contents} #nav .mega-r .mp-ic{grid-area:ic;width:16px;height:16px;border-radius:0;display:block} #nav .mega-r .mp-ic svg,#nav .mega-r .mp-ic .ic{width:16px;height:16px;display:block} #nav .mega-r .mp-tag{grid-area:tag;line-height:16px} #nav .mega-r .mg-lbl{grid-area:t;margin:0} #nav .mega-r .mp-live{grid-area:live;font-size:var(--t-tag);line-height:1;padding:5px 10px} #nav .mega-r .mp-feed{margin:0;padding:12px 0;align-items:center;line-height:1.4} /* 11b Hero globe still: shown only when WebGL is not available (hero-globe.js adds .is-static) */ .dh-globe.is-static{opacity:1;background:url(vendor/globe-fallback.webp) center/auto 100% no-repeat} @media (max-width:1100px){.dh-globe.is-static{background-image:url(vendor/globe-fallback-near.webp)}} /* 31 roles applied to the Sourced answers memo (home + /client-stories): title / meta / body / index / label / emphasis. Working steps, context line, sources and stamp = meta (gray); answer points = body; footnote numbers = index. */ #view-home #answers .memo .iconrow__d{font-size:var(--t-note);color:var(--c-gray)} #view-home #answers .memo .trace,#view-home #answers .memo .trace span:not(.ok){font-family:var(--font);font-size:var(--t-note);line-height:1.5;letter-spacing:0;color:var(--c-gray)} #view-home #answers .memo .points,#view-home #answers .memo .points p{font-family:var(--font);font-size:var(--t-prose);line-height:1.6;letter-spacing:0;color:var(--c-body)} #view-home #answers .memo .points sup{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:0;color:var(--c-primary)} #view-home #answers .memo .srcs span,#view-home #answers .memo .stamp{color:var(--c-gray)} /* ========================================================================== /sectors deep panels (site.js #sdeep), 2026-11-04. Light blocks (.sd-light: "The questions your leadership asks", "Where your agent reads in …", first 30 days): one full-width white band, kit 31 card types inside (white cards with the line only, label grey mono, index + active in primary, chips = .badge--neutral, no hue glow, sweep or grid). Dark cards on the black /sectors ground: see-through glass instead of navy. The "Start with a Readout" card is not shown on /sectors. ========================================================================== */ .sd-light{--hd:var(--c-primary);--fg:var(--c-ink);--muted:#46566e;--faint:var(--c-gray);--line:var(--c-rule);--line-2:var(--c-rule); margin-inline:0;padding-inline:0;border-radius:0;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);color:var(--c-ink)} .sd-light::before,.sd-light::after{content:none} @media (max-width:640px){.sd-light{margin-inline:0;padding-inline:0;border-radius:0}} .sd-light :is(.qcard,.srcbox,.ttable,.mbrief,.src-live){background:#fff;box-shadow:var(--card-line-white)} .sd-light .qcard::before,.sd-light .qcard::after{content:none} .sd-light .qcard:hover,.sd-light .qcard.run,.sd-light .qcard.done{transform:none;box-shadow:inset 0 0 0 1px var(--c-primary)} .sd-light .srcbox:hover,.sd-light .mbrief:hover{transform:none} .sd-light .qcard .qn{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-primary)} .sd-light .qcard q{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)} .sd-light .qcard .ab{border-top-color:var(--c-rule)} .sd-light :is(.qcard .ab small,.tt-row.th>div,.mb-top,.mb-foot){font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--faint)} .sd-light :is(.qcard .ab span,.srcbox span){padding:4px 10px;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;color:var(--muted);background:color-mix(in srgb,var(--c-ink) 6%,transparent);box-shadow:none;transform:none} .sd-light .qcard .ab span.lit,.sd-light .srcbox span.scan{color:var(--c-primary);background:var(--c-soft);box-shadow:none;transform:none;animation:none} .sd-light .tt-row{border-top-color:var(--c-rule)}.sd-light .tt-row>div+div{border-left-color:var(--c-rule)} .sd-light .tt-row.th{background:var(--c-paper)} .sd-light .tt-row:not(.th):hover,.sd-light .tt-row.hot{background:var(--c-paper)} .sd-light .tt-row::before{background:var(--c-primary)} .sd-light .tt-row .tm{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;color:var(--c-ink)} .sd-light .tt-row .tm i{color:var(--c-primary);background:var(--c-soft);box-shadow:none} .sd-light .tt-row :is(.wa,.tg){font-size:var(--t-note);color:var(--muted)} .sd-light .tt-row .tg::before{color:var(--c-primary)} .sd-light .srcbox :is(h4,.sc-lbl){font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;color:var(--c-ink)} .sd-light .srcbox :is(h4,.sc-lbl) .ic{width:16px;height:16px;color:var(--c-primary)} .sd-light .mb-dec{box-shadow:inset 3px 0 0 var(--c-primary),var(--card-line-white)} .sd-light .mb-dec small,.sd-light .mb-foot .ic{color:var(--c-primary)} .sd-light .mb-src{color:var(--c-primary);box-shadow:var(--card-line-white)} .sd-light .mbrief li:hover{background:var(--c-paper)} .sd-light .d30 ol::before{background:var(--c-rule)} .sd-light .d30 ol::after{background:var(--c-primary)} .sd-light .d30 small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-primary)} .sd-light .d30 b{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;color:var(--c-ink)} .sd-light .d30 p{font-size:var(--t-note);color:var(--muted)} .sd-light .dn2{color:var(--c-primary);background:#fff;box-shadow:var(--card-line-white)} .sd-light .d30 li.cur .dn2{color:#fff;background:var(--c-primary);transform:none;box-shadow:none} /* Dark cards on /sectors: glass on black */ #sectors .sdeep{--card-grad:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));--c-navy:rgba(255,255,255,.04)} #sectors .sdeep :is(.whynow,.kpi2,.wtable,.chartcard,.fnl-panel,.fnl-sum>div,.lb-feed){-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} #sectors .sdeep .scta{display:none} .sd-light .srcbox :is(h4,.sc-lbl){text-transform:none;letter-spacing:-.01em} /* /sectors deep panels: every panel title = kit section head (.h2 + .lede subtitle), not a tiny mono line */ #sectors .sdeep .dhead{display:grid;justify-content:start;align-items:start;gap:16px;margin-bottom:var(--head-gap);max-width:var(--head-title-w)} #sectors .sdeep .dhead>span{font-family:var(--font);font-size:var(--t-lede);line-height:1.7;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);max-width:var(--head-lede-w)} #sectors .sdeep .dhead>span .ic{width:16px;height:16px} /* /sectors "Your first 30 days" + Monday brief: kit head across the top, then the brief (doc card) and the days as kit 27 steps (.kledger: rule + dot, label, title, body). No icon tiles, no progress rail. */ .sd-light .bgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h h" "b s";column-gap:64px;row-gap:0;align-items:start} .sd-light .bgrid .d30{display:contents} .sd-light .d30 .dhead{grid-area:h} .sd-light .d30 ol{grid-area:s;display:grid;gap:24px} .sd-light .bgrid .mbrief{grid-area:b} @media (max-width:1100px){.sd-light .bgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "s" "b";row-gap:40px}.sd-light .d30 .dhead{margin-bottom:0}} .sd-light .d30 ol::before,.sd-light .d30 ol::after{content:none} .sd-light .d30 li,.sd-light .d30 li.on{position:relative;display:block;padding:24px 0 0;border-top:1px solid var(--c-rule);opacity:1;cursor:default} .sd-light .d30 li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--c-primary)} .sd-light .d30 .dn2{display:none} .sd-light .d30 small{display:block;text-transform:uppercase} .sd-light .d30 h3{margin:8px 0 0} .sd-light .d30 b{display:block;margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .sd-light .d30 p{margin:4px 0 0;font-size:var(--t-prose);line-height:1.6;color:var(--muted)} .sd-light .mbrief{display:grid;gap:20px;padding:var(--card-p-l);border-radius:var(--card-r-l)} .sd-light .mb-top{padding-bottom:16px;border-bottom:1px solid var(--c-rule)} .sd-light .mbrief h3{margin:0;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} .sd-light .mbrief ol{gap:12px} .sd-light .mbrief li{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:0;font-size:var(--t-prose);line-height:1.6;color:var(--c-ink)} .sd-light .mbrief li:hover{background:none} .sd-light .mbrief li::before{content:"0" counter(m);width:auto;height:auto;padding-top:4px;border-radius:0;display:block;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;color:var(--c-primary);background:none} .sd-light .mb-dec{margin:0;padding:var(--card-p-s);border-radius:var(--card-r-m);background:var(--c-paper);box-shadow:none} .sd-light .mb-dec small{display:block;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-primary)} .sd-light .mb-dec p{margin:4px 0 0;font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;color:var(--c-ink)} .sd-light .mb-foot{margin:0;gap:8px;font-family:var(--font);font-size:var(--t-note);letter-spacing:0;text-transform:none;color:var(--faint)} .sd-light .mb-foot .ic{width:16px;height:16px;color:var(--c-primary)} .sd-light .src-live{width:fit-content;margin-top:16px;padding:8px 14px;border-radius:999px;font-family:var(--font);font-size:var(--t-note);letter-spacing:0;color:var(--faint)} /* ========================================================================== Client story card (.pcard, home + client stories), 2026-11-04. Same language as The value detail card: white card with the kit line, icon-row head (48 box, soft blue, mono label, title), the screenshot as an inner block, figures in a paper block, meta + text link at the foot. No hue rail, scan or dark badge. Home: two cards in view, the rest slide in from the right (.pc-track + .pc-nav). ========================================================================== */ .pcard,.case-nav a.pcard{display:flex;flex-direction:column;gap:20px;padding:var(--card-p-m);border:0;border-radius:var(--card-r-l);background:#fff;box-shadow:var(--card-line-white);color:var(--c-ink);overflow:hidden;transform:none;transition:box-shadow .2s} .pcard:hover,.case-nav a.pcard:hover{transform:none;box-shadow:0 0 0 1px var(--c-primary)} .pcard .pc-head{grid-template-columns:48px minmax(0,1fr)} .pcard .pc-head .iconrow__box{color:var(--c-primary);background:var(--c-soft)} .pcard .pc-tag{align-self:end;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} .pcard .pc-t,.pg4 .pcard .pc-t{align-self:start;margin:4px 0 0;font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink);text-wrap:balance} .pcard .pc-img{flex:none;width:auto;min-height:0;aspect-ratio:16/9;border-radius:var(--card-r-m);background:var(--c-paper);box-shadow:inset 0 0 0 1px var(--c-rule)} .pcard .pc-img::after,.pcard .pc-scan{display:none} .pcard:hover .pc-img img{transform:none} .pcard .pc-badge{left:12px;top:12px;padding:4px 10px;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--c-ink);background:rgba(255,255,255,.94);box-shadow:var(--card-line-white)} .pcard .pc-body,.pc-adv .pc-body{display:flex;flex-direction:column;gap:16px;flex:1;padding:0;border:0;justify-content:flex-start} .pcard .pc-stats{grid-template-columns:1fr 1fr;gap:16px;padding:var(--card-p-s);border:0;border-radius:var(--card-r-m);background:var(--c-paper)} .pcard .pc-stats b{color:var(--c-ink)} .pcard .pc-stats span{font-size:var(--t-note);color:var(--c-body)} .pcard .pc-find{font-size:var(--t-note);line-height:1.5;color:var(--c-body)} .pcard .pc-find b{color:var(--c-ink);font-weight:600} .pcard .pc-go{margin-top:auto;font-size:var(--t-note);font-weight:600;color:var(--c-primary)} .pcard .pc-go .ic{width:16px;height:16px} .pcard.pc-adv{flex-direction:column} .pc-adv .pc-img.pc-quad{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;min-height:0;aspect-ratio:16/9;overflow:hidden} .pcard .pc-list li{grid-template-columns:28px minmax(0,1fr) auto;padding:8px 0;border-bottom:1px solid var(--c-rule);font-size:var(--t-note)} .pcard .pc-list small{font-family:var(--mono);font-size:var(--t-eyebrow);color:var(--c-primary);filter:none} .pcard .pc-list span{color:var(--c-ink)} .pcard .pc-list b{color:var(--c-body);font-size:var(--t-note)} @media (max-width:980px){.pcard,.pcard.pc-adv{flex-direction:column}.pcard .pc-img,.pc-adv .pc-img{width:auto;min-height:0;aspect-ratio:16/9}} /* Home: slider, two cards in view */ .proofgrid.pc-track{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 2);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:1px;margin:-1px} .proofgrid.pc-track::-webkit-scrollbar{display:none} .proofgrid.pc-track>.pcard{grid-column:auto;scroll-snap-align:start} @media (max-width:760px){.proofgrid.pc-track{grid-auto-columns:88%}} .pc-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:24px} .pc-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:#fff;color:var(--c-ink);box-shadow:var(--card-line-white);cursor:pointer;transition:box-shadow .2s,color .2s} .pc-nav button:hover:not(:disabled){box-shadow:0 0 0 1px var(--c-primary);color:var(--c-primary)} .pc-nav button:disabled{opacity:.4;cursor:default} .pc-nav .ic{width:16px;height:16px} .pc-nav .pc-prev .ic{transform:scaleX(-1)} /* People in the loop: centred head + sign-off, then the three points as kit icon-row cards */ #people .people.people--cards{display:block} #people .people__top{display:grid;justify-items:center;gap:24px;margin-bottom:var(--head-gap)} #people .people__top .head{margin-bottom:0} #people .people__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} #people .ppl-card{display:grid;align-content:start;gap:16px} #people .ppl-card .iconrow{grid-template-columns:48px minmax(0,1fr)} #people .ppl-card__k{align-self:end;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray)} #people .ppl-card .iconrow__t{align-self:start} #people .ppl-card__d{margin:0;font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} @media (max-width:980px){#people .people__cards{grid-template-columns:1fr}} #people .ppl-card .iconrow__box{color:var(--c-primary);background:var(--c-soft)} .proofgrid.pc-track{align-items:start}.proofgrid.pc-track .pc-go{margin-top:0} /* Rival Readout card (#readout): stacked title / price / guarantee with kit gaps, body text in one tone, line only */ #view-home #readout{column-gap:48px;align-items:center;box-shadow:var(--card-line-dark)} #view-home #readout .hook-l{display:grid;gap:16px;align-content:start} #view-home #readout .hook-pr{margin:0;color:#fff} #view-home #readout .hook-g{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;margin:0;max-width:none;font-size:var(--t-prose);line-height:1.6;color:rgba(255,255,255,.68)} #view-home #readout .hook-g svg{width:16px;height:16px;margin-top:4px;color:var(--c-signal)} #view-home #readout .hook-list{gap:12px} #view-home #readout .hook-list li{font-size:var(--t-prose);line-height:1.6;color:rgba(255,255,255,.68)} #view-home #readout .hook-list li::before{margin-top:10px} /* Free snapshot: white section, light card, light form (kit light inputs, dark button) */ #view-home #snapshot{background:#fff} #view-home #snapshot .snap{background:var(--c-paper);color:var(--c-ink);box-shadow:var(--card-line-white)} #view-home #snapshot .snap::before,#view-home #snapshot .snap::after{display:none} #view-home #snapshot .snap .eyebrow{color:var(--c-primary)} #view-home #snapshot .snap :is(h2,.h2),#view-home #snapshot .snap .h2 em{color:var(--c-ink)} #view-home #snapshot .snap .lede{color:var(--c-body)} #view-home #snapshot .sn-pts li{color:var(--c-body)} #view-home #snapshot .sn-pts .ic{color:var(--c-primary)} #view-home #snapshot .snap .snform{background:#fff;box-shadow:var(--card-line-white)} #view-home #snapshot .snform label{color:var(--c-ink)} #view-home #snapshot .snform :is(input,select){border-color:var(--c-rule);background-color:#fff;color:var(--c-ink)} #view-home #snapshot .snform input::placeholder{color:var(--f-ph)} #view-home #snapshot .snform select{background-image:linear-gradient(45deg,transparent 50%,var(--c-gray) 50%),linear-gradient(135deg,var(--c-gray) 50%,transparent 50%)} #view-home #snapshot .snform select option{background:#fff;color:var(--c-ink)} #view-home #snapshot .snform :is(input,select):focus{border-color:var(--c-primary);box-shadow:0 0 0 2px var(--f-ring)} #view-home #snapshot .snform .btn.btn-white{background:var(--c-ink);color:#fff;box-shadow:none} #view-home #snapshot .snform .btn.btn-white:hover{background:var(--c-navy)} #view-home #snapshot :is(.sn-fine,.sn-done p){color:var(--c-body)} #view-home #snapshot .sn-done b,#view-home #snapshot .sp-h b{color:var(--c-ink)} #view-home #snapshot .sn-prev{background:var(--c-paper);box-shadow:var(--card-line-white);color:var(--c-ink)} /* Insight report cards (#insGrid .rep, home + /insights): light, same language as the client story card */ #insGrid .rep,.day #insGrid>.rep{--fg:var(--c-ink);--muted:var(--c-body);--faint:var(--c-gray);display:flex;flex-direction:column;gap:20px;padding:var(--card-p-m);border-radius:var(--card-r-l);background:#fff;color:var(--c-ink);box-shadow:var(--card-line-white);transform:none} #insGrid .rep:hover{transform:none;box-shadow:0 0 0 1px var(--c-primary)} #insGrid .rep-cover{height:150px;border:0;border-radius:var(--card-r-m);overflow:hidden;background:var(--c-paper);box-shadow:inset 0 0 0 1px var(--c-rule)} #insGrid .rep-cover .rt{left:12px;top:12px;padding:4px 10px;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--c-ink);background:#fff;box-shadow:var(--card-line-white)} #insGrid .rep-body{flex:1;gap:8px;padding:0;box-shadow:none} #insGrid .rep-body .rep-t,#insGrid .rep-body :is(h2,h3,h4){font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)} #insGrid .rep-body p{font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} #insGrid .rep-body>span{font-family:var(--font);font-size:var(--t-note);letter-spacing:0;color:var(--c-gray)} /* /insights: longer hero, the report cards rise over its foot */ body[data-page="insights"] #pagehead .phero__in{padding-bottom:calc(79px + 160px)} body[data-page="insights"] #insGrid{position:relative;z-index:3;margin-top:calc(-110px - 160px)} /* Pricing: FAQ starts a new block, so it gets a section gap (kit --sec-y) above it, not the in-section block gap */ #start .faqsec{margin-top:var(--sec-y)} #insGrid .rep,.day #insGrid>.rep{border:1px solid var(--c-rule);box-shadow:none}#insGrid .rep:hover{border-color:var(--c-primary);box-shadow:none} /* Client story cards: real 1px border (the inset line was clipped by the slider's scroll box); arrows sit at the top right, level with the head's last line */ .pcard,.case-nav a.pcard{border:1px solid var(--c-rule);box-shadow:none} .pcard:hover,.case-nav a.pcard:hover{border-color:var(--c-primary);box-shadow:none} .proofgrid.pc-track{padding:0;margin:0} .pc-nav{margin:calc(-44px - 24px) 0 24px auto;width:fit-content;position:relative;z-index:1} @media (max-width:760px){.pc-nav{margin:0 0 16px auto}} .proofgrid.pc-track{overflow-y:hidden;transition:height .35s ease} /* People in the loop (rev): head left; "Analyst reviewed" = kit .badge--ok on the right, level with the head's foot */ #people .people__top{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;align-items:end;column-gap:48px} #people .people__top .head{text-align:left;justify-items:start;margin-inline:0} #people .people__top .signoff{display:inline-flex;align-items:center;gap:6px;justify-self:end;margin:0;padding:4px 10px;border:0;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--ok);background:var(--ok-soft);box-shadow:none} #people .people__top .signoff i{display:grid;place-items:center;width:14px;height:14px;padding:0;border-radius:0;background:none;box-shadow:none;color:inherit} #people .people__top .signoff svg{width:14px;height:14px} @media (max-width:980px){#people .people__top{grid-template-columns:1fr}#people .people__top .signoff{justify-self:start}} /* Home pricing FAQ: head across the top, the questions in two equal columns (6-6); the free snapshot CTA follows with one section gap, not two */ #view-home #start .faqsec{grid-template-columns:minmax(0,1fr);row-gap:var(--head-gap)} #view-home #start .faqsec>.head{position:static} #view-home #start .faqsec .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;align-items:start} #view-home #start .faqsec .faq>*{margin:0} @media (max-width:980px){#view-home #start .faqsec .faq{grid-template-columns:minmax(0,1fr)}} #view-home #snapshot{padding-top:0} #view-home section#snapshot.sec{padding-top:0} #view-home .day #snapshot.sec:not(#book){padding-top:0} /* 20 SECTION TITLE (rev 2026-11-04): .head.right, and one gap rule. The space under a section title is only --head-gap (the head's margin); the block right under it adds no top margin of its own. */ .head.right,#view-home .head.right{margin-left:auto;text-align:right;justify-items:end} .head.right .lede,#view-home .head.right .lede{margin-left:auto} :is(.head,#view-home .head):not(.head--side)+*{margin-top:0} /* FAQ head (pricing, home): the grid row gap doubled the head gap; the head's own margin is the gap */ #view-home #start .faqsec,#start .faqsec{row-gap:0} #view-home #proof .pc-nav,#proof .head+.pc-nav{margin:calc(-44px - 24px) 0 24px auto} @media (max-width:760px){#view-home #proof .pc-nav,#proof .head+.pc-nav{margin:0 0 16px auto}} /* Inner block titles use the kit section title too (20 SECTION TITLE): "Step 2 · Signal Agent / One retainer…" on home was an 18px h3 */ #view-home .tierhead .head :is(h2,h3),#view-home .tierhead .head h3>*{margin:0;font-family:var(--font-h);font-size:var(--t-section);font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--c-ink)} /* 20 SECTION TITLE: hierarchy. Section title = h2 (--t-section). A block inside a section = the same .head with an h3 (--t-sub); eyebrow, lede and --head-gap unchanged. On sub pages the hero is the h1, so those blocks are h2. */ .head>h3:not(.h2),.head>h3:not(.h2)>*,#view-home .head>h3:not(.h2),#view-home .head>h3:not(.h2)>*, #view-home .tierhead .head h3,#view-home .tierhead .head h3>*{margin:0;font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--fg)} #sectors .sdeep .dhead>span.eyebrow{font-family:var(--mono);font-size:var(--t-eyebrow);line-height:1.5;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c-primary);max-width:none} /* /sectors deep panels = home section rhythm (kit 20 + --sec-y): every panel is a section: --sec-y between panels, white bands carry --sec-y inside, the last band meets the closing section with no dark strip; days = kit 27 .kledger row (rule + dot, label, title, body) across the width. */ body.sub-page #sectors .sdeep{margin-top:var(--sec-y);row-gap:var(--sec-y)} body.sub-page #sectors .sd-light{padding-block:var(--sec-y);row-gap:var(--sec-y)} body.sub-page #sectors:has(.sdeep>.sd-light:last-child){padding-bottom:0} body.sub-page #sectors .sdeep>.sd-light:last-child{margin-bottom:0} #sectors .sdeep .dhead>span.eyebrow{color:var(--c-signal)} #sectors .sd-light .dhead>span.eyebrow{color:var(--c-primary)} .sd-light .bgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "s" "b";row-gap:var(--block-gap)} .sd-light .d30 .dhead{margin-bottom:0} .sd-light .d30 ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px} @media (max-width:980px){.sd-light .d30 ol{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.sd-light .d30 ol{grid-template-columns:minmax(0,1fr)}} .sd-light .d30 small{color:var(--c-primary)} /* the hidden .scta is the last child, so the white sdl-b band ends the section: no dark strip under it */ body.sub-page #sectors:has(.sdeep .sdl-b){padding-bottom:0} body.sub-page #view-home #sectors.sec:not(#book):has(.sdeep .sdl-b){padding-bottom:0} /* Home: FAQ + free snapshot on one grey (paper) band; the snapshot card inside it is white */ #view-home #start .faqsec{margin-top:var(--sec-y);padding-block:var(--sec-y);background:var(--c-paper);box-shadow:0 0 0 100vmax var(--c-paper);clip-path:inset(0 -100vmax)} #view-home .day #start.sec:not(#book){padding-bottom:0} #view-home .day #snapshot.sec:not(#book){background:var(--c-paper)} #view-home #snapshot .snap{background:#fff;box-shadow:var(--card-line-white)} #view-home #snapshot .snap .snform{background:var(--c-paper);box-shadow:none} #view-home #snapshot .snform :is(input,select){background-color:#fff} /* /pricing: "How you buy" steps sit in the page hero like the /about figures (.ab-nums): one navy card, cells split by a line */ .phero__slot .journey.kledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-radius:var(--card-r-m);background:var(--c-navy);box-shadow:var(--card-line-dark);overflow:hidden} .phero__slot .journey.kledger>li{display:grid;gap:8px;align-content:start;padding:var(--card-p-m);border:0;border-radius:0;background:none;box-shadow:none} .phero__slot .journey.kledger>li+li{box-shadow:inset 1px 0 0 rgba(163,182,255,.12)} .phero__slot .journey.kledger>li::before,.phero__slot .journey.kledger>li::after{content:none} .phero__slot .journey .kledger__n{color:var(--c-signal)} .phero__slot .journey .kledger__k{color:rgba(255,255,255,.5)} .phero__slot .journey .kledger__t{margin:4px 0 0;color:#fff} .phero__slot .journey .kledger__d{margin:4px 0 0;font-size:var(--t-note);line-height:1.5;color:rgba(255,255,255,.68)} .phero__slot .journey>li>div{display:grid;gap:0} @media (max-width:760px){.phero__slot .journey.kledger{grid-template-columns:minmax(0,1fr)}.phero__slot .journey.kledger>li+li{box-shadow:inset 0 1px 0 rgba(163,182,255,.12)}} /* /pricing: the three steps read as bands. Step 1 (Readout) white, Step 2 (Signal Agent: plans, estimate, benchmarks) on a full-width grey band, Step 3 (credits + add-ons) white, then the grey FAQ band. Each band: --sec-y top and bottom. */ #view-home #start .pr-step--2{margin-top:var(--sec-y);padding-block:var(--sec-y);background:var(--c-paper);box-shadow:0 0 0 100vmax var(--c-paper);clip-path:inset(0 -100vmax)} #view-home #start .pr-step--2>:first-child{margin-top:0} #view-home #start .pr-step--2+.credits,#view-home #start .pr-step--2+*{margin-top:var(--sec-y)} body:not([data-page="pricing"]) #view-home #start .pr-step--2{margin-top:var(--block-gap);padding-block:0;background:none;box-shadow:none;clip-path:none} /* hero steps: the old journey progress fill must not paint the number */ .phero__slot .journey .jn{width:auto;height:auto;padding:0;border-radius:0;background:none!important;box-shadow:none;display:block} /* ========================================================================== AUDIT FIXES 2026-11-04 (ui-ux audit A spacing/layout, C states/forms/nav, D consistency/motion). Values come from kit tokens. Undo: remove this section (backup kit.css.before-audit). ========================================================================== */ :root{--grid-gap:24px;--card-head-gap:20px} /* A · home hero at tablet widths: same side edge as the nav and .wrap */ @media (max-width:1100px){.dh .copy{padding-inline:var(--gut) var(--gutr)}.dh-pop{margin:0 var(--gutr) 0 var(--gut)}} /* A · /insights pull-up follows the fluid tokens, not fixed px */ body[data-page="insights"] #pagehead .phero__in{padding-bottom:calc(var(--hero-bottom) + 160px)} body[data-page="insights"] #insGrid{margin-top:calc(-1 * var(--sec-y) - 160px)} /* A · insights report card: text on the same edge as its cover (one padding, the card's) */ #view-home #insGrid .rep-body{padding:0} /* A · /trust: text columns read apart (same column gap as the FAQ) */ #view-home #trust .tr-grid{column-gap:clamp(32px,5vw,72px)} /* A · pricing tiers at 981–1100: three columns need the medium card padding so the stat boxes fit */ @media (max-width:1100px){#view-home #start .tier{padding:var(--card-p-m)}} #view-home #start .tier .incl>*{min-width:0} /* A · the hidden legal sections inside .day no longer block the .day padding reset (/about, /trust) */ #view-home .day:not(:has(>.lgv:not([hidden]))){padding-block:0} /* A · stacked answers module: head gap token */ @media (max-width:1100px){#view-home #answers .mo-split .head{margin-bottom:var(--head-gap)}} /* A · /about blocks: block gap token */ #view-home #about .wrap{gap:var(--block-gap)} /* A · small overflows */ .pa-l1{min-width:0;overflow-wrap:anywhere} .fnl-sum>div,.bf-int>*,#value .vx-track,#value .vx-marks,#value .vx-marks>*{min-width:0} /* A + C · touch targets */ .dh-dots button,#lensDots button{width:24px;height:24px} #stickyCta .sc-x{width:40px;height:40px} #menuBtn{width:44px;height:44px} @media (max-width:980px){.nav .mpanel a:not(.btn){padding-block:10px}} /* A · mobile sector tabs: fade on the cut edge */ @media (max-width:640px){#stabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}} /* A · card grids share one gap token */ #view-home :is(.tiers,.ins-grid,#insGrid,.case-nav .proofgrid,.qcards,.bk-proof,.people__cards,.op-grid){gap:var(--grid-gap)} /* D · outline button for light surfaces (second action next to a dark one) */ .btn.btn-outline.btn-outline--ink{background:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-rule)} .btn.btn-outline.btn-outline--ink:hover{background:var(--c-paper);box-shadow:inset 0 0 0 1px var(--c-ink)} /* D · nav mega radar rings: only animate while the menu is open; never with reduced motion */ .mp-ring{animation-play-state:paused} .dd:hover .mp-ring,.dd:focus-within .mp-ring,.dd.open .mp-ring{animation-play-state:running} @media (prefers-reduced-motion:reduce){.mp-ring{animation:none}#value .vx-fill,#vxFill,#value .vx-m{transition:none}} /* D · line only on cards inside sections (no drop shadow) */ #view-home .practice,#view-home .practice.night-card{box-shadow:var(--card-line-dark)} #view-home #sectors :is(.whynow,.chartcard){box-shadow:var(--card-line-dark)} /* D · no coloured glow on the agent mascot */ .ag-halo{background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent 72%)} .ag-core{background:radial-gradient(120% 90% at 30% 18%,rgba(255,255,255,.35),transparent 42%),radial-gradient(circle at 42% 38%,#5b7cf0 0,#2447c8 38%,#111f48 70%,#111f48 100%); box-shadow:inset 0 3px 6px rgba(255,255,255,.16),inset 0 0 0 1px rgba(223,227,255,.28),0 8px 18px -6px rgba(17,31,72,.9)} /* D · running query dot: opacity pulse, no coloured ring */ .qcard.run .qa-d{box-shadow:none;animation:qblink 1s ease-in-out infinite} @keyframes qblink{50%{opacity:.35}} @media (prefers-reduced-motion:reduce){.qcard.run .qa-d{animation:none}} /* D · title icon box from the kit */ #view-home .whynow .wi{width:var(--ct-ic-box);height:var(--ct-ic-box);border-radius:var(--ct-ic-r)} #view-home .whynow .wi .ic{width:var(--ct-ic);height:var(--ct-ic)} /* D · inline icon sizes from the kit */ .mq__item svg,.stab .ic,#sectors .stabs .stab .ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline)} #view-home .mo-flow .mo-ibox,#view-home .mo-flow .mo-ibox .ic,#view-home .mo-flow .mo-ibox svg{width:var(--ct-ic-inline);height:var(--ct-ic-inline)} .badge svg,.badge .ic{width:14px;height:14px} /* D · one link-card hover: line turns primary, .2s, no lift */ .pcard,.case-nav a.pcard,#view-home #insGrid .rep{transition:border-color .2s,box-shadow .2s} #view-home #insGrid .rep:hover{transform:none;border-color:var(--c-primary)} .pcard:hover,.case-nav a.pcard:hover{transform:none;border-color:var(--c-primary)} /* D + C · clickable rows show a hover */ .vx-o:hover,.qcard:hover{outline:1px solid var(--c-primary);outline-offset:-1px} .mo-pickrow:hover,.mo-wrow:hover,.mo-src__h:hover{background:rgba(255,255,255,.05)} /* D · case images keep their frame ratio before they load */ .pcard .pc-img img,.cv-shot img,.cv-th img{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover} /* D · form fields use the small card radius */ .f-input,.lgv-ct-input,.bkform input:not([type=radio]),.bkform select,.bkform textarea,.snform input,.snform select,.f-inline{border-radius:var(--card-r-s)} /* C · skip link */ .skip{position:absolute;left:var(--gut);top:-100px;z-index:1000;padding:10px 16px;border-radius:var(--card-r-s);background:var(--c-white);color:var(--c-ink);font:600 var(--t-note)/1.4 var(--font);box-shadow:var(--card-line-white)} .skip:focus{top:12px} /* C · mobile menu: body does not scroll behind it; icon becomes a close mark; current page; CTA */ body.m-open{overflow:hidden} .mpanel a[aria-current="page"]{color:var(--c-white);font-weight:600} .mpanel .m-cta{grid-column:1/-1;width:100%} /* C · sticky bar keeps the page end reachable */ body.has-sticky{padding-bottom:72px} /* C · FAQ summary hover + smooth open */ :root{interpolate-size:allow-keywords} .faq summary{transition:color .2s} .faq summary:hover{color:var(--c-primary)} .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .25s ease,content-visibility .25s allow-discrete} .faq details[open]::details-content{block-size:auto} @media (prefers-reduced-motion:reduce){.faq details::details-content{transition:none}} /* C · billing toggle hover */ .billtog button:not(.on):not([aria-pressed="true"]):hover{color:var(--c-ink)} /* C · inline text links */ #view-home :is(.lgv,#about,#trust) p a:not(.btn){text-decoration:underline;text-decoration-color:var(--c-rule);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s} #view-home :is(.lgv,#about,#trust) p a:not(.btn):hover{text-decoration-color:currentColor;color:var(--c-primary)} /* C · estimator range thumb and focus */ #view-home #start .est input[type=range]::-webkit-slider-thumb{width:24px;height:24px} #view-home #start .est input[type=range]::-moz-range-thumb{width:24px;height:24px} #view-home #start .est input[type=range]:focus-visible{outline:2px solid var(--c-primary);outline-offset:4px} /* C · autofill keeps the field colours */ input:-webkit-autofill,select:-webkit-autofill,textarea:-webkit-autofill{-webkit-text-fill-color:var(--c-ink);box-shadow:inset 0 0 0 1000px var(--c-white);caret-color:var(--c-ink)} #snform input:-webkit-autofill{-webkit-text-fill-color:var(--c-ink);box-shadow:inset 0 0 0 1000px var(--c-white)} /* C · per-field error text (kit .f-err) under booking/snapshot fields */ .f-err[hidden]{display:none} /* A · /sectors 30 days: one head gap (the bgrid row gap already separates the head from the steps) */ body.sub-page #sectors .sd-light .d30 .dhead{margin-bottom:calc(var(--head-gap) - var(--block-gap))} /* A · tier price: "from" stays on the price line */ #view-home .tier .tpr{flex-wrap:nowrap;white-space:nowrap} /* A · /book form head on mobile: title on the field edge, live dot to the right */ @media (max-width:640px){.bf-h{position:relative;padding-right:24px}.bf-h .live-dot{position:absolute;right:0;top:8px}} /* B · typography + contrast (audit B). --c-gray darkened to #5B6E8A (AA on white, paper, #EFF2FD); hard-coded #667994 now var(--c-gray); placeholders solid --c-gray; weight 550 -> 700. */ :root{--t-nav:14px} .ddb{font-size:var(--t-nav)} .dh-title>b{font-weight:inherit} /* dark cards: meta text in the on-dark meta tone */ .pa-note,.pa-l1 em{color:rgba(255,255,255,.6)} .pa-c:first-child .pa-l1 em{color:#8ff5e3} /* how module source badges: note size, readable when the row is not active */ #view-home .mo-sigs li.badge{font-size:var(--t-note)} #view-home .mo-src:not(.is-on) .mo-sigs{opacity:.8} /* lit wheel label keeps contrast over the bright segment */ :is(#sectors,#lenses,#rhythm) .mo-lab--lens.is-on{text-shadow:0 1px 2px rgba(2,5,14,.85),0 0 1px rgba(2,5,14,.9)} /* sticky close on light */ #stickyCta.is-light .sc-x{color:var(--c-body)} /* uppercase mono labels: .2em eyebrows, .12em card labels, weight 500 */ .mq__when,.pr-k{letter-spacing:.12em;font-weight:500} .pa-tag{letter-spacing:.12em;font-weight:500} /* body line-height */ .bd-list b{line-height:1.5} /* C · field errors: snapshot fields get the same red line as booking; .f-err sits under its field */ .snform input.is-err,.snform input.is-err:focus{border-color:var(--f-err)} .bkform label>.f-err,.snform .f-err{margin-top:6px;font-weight:400;text-transform:none;letter-spacing:0} .bkform .bk-row{align-items:start} /* ========================================================================== CONSISTENCY A (2026-11-04): same component = same value, from kit tokens. Undo: remove this section (backups *.before-consA). ========================================================================== */ /* A1 hairlines: one line on dark (white 10% / strong 16%), one on light (--c-rule) */ :root{--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.16)} .day{--line:var(--c-rule);--line-2:var(--c-rule)} .day .memo,.night-card,.day .night-card,.day .tier.rec{--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.16)} #view-home :is(#how,#sectors,#lenses,#rhythm,#answers,#model){--mo-line:rgba(255,255,255,.1);--mo-hair:rgba(255,255,255,.1)} /* A2 nav: sub pages like home (white 10% line, no drop shadow) */ .nav,.nav.dh-nav.is-solid{border-bottom-color:rgba(255,255,255,.1);box-shadow:none} /* A3 shadows: line only */ #view-home #sectors :is(.wtable,.lb-feed),#view-home :is(.wtable,.lb-feed,.cv-frame){box-shadow:var(--card-line-dark)} #stickyCta.is-light .sc-in{box-shadow:var(--card-line-white)} .btn.btn-blue,.btn.btn-accent{box-shadow:none} .card--l{box-shadow:var(--card-line-white)} .card--l.card--dark,.card--l.card--grad{box-shadow:var(--card-line-dark)} #view-home .ag-core{box-shadow:inset 0 3px 6px rgba(255,255,255,.16),inset 0 0 0 1px rgba(223,227,255,.28)} #view-home .ag-eyes{filter:none} /* A5 card titles: --t-row whatever the tag */ #view-home .tbl-title :is(h2,h3,div).iconrow__t,#view-home .tbl-title .iconrow__t{font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em} #view-home #insGrid .rep-t{font-size:var(--t-row);line-height:1.3;letter-spacing:-.015em} .phero__slot .journey .kledger__t,.phero__slot .journey b{font-size:var(--t-row);letter-spacing:-.015em;line-height:1.3} #view-home :is(#sectors,#lenses,#rhythm) :is(.mo-gets,.mo-dash__dec) .dh-title{font-size:var(--t-row);line-height:1.3} /* motion item titles: one role (--t-lede / 700) in every module */ #view-home :is(#how,#sectors,#lenses,#rhythm) :is(.mo-src__n,.mo-dest__t,.mo-row b,.mo-sub b){font-family:var(--font-h);font-size:var(--t-lede);font-weight:700} /* A6 stats: one label (kit card label), figures 800 */ #view-home :is(#sectors,#lenses,#rhythm) .stat__label,.stat__label{font-family:var(--mono);font-size:var(--t-tag);letter-spacing:.12em;font-weight:500;text-transform:uppercase} #view-home :is(#sectors,#lenses,#rhythm) .stat__value,.stat__value,#value .vx-kpi b{font-weight:800} /* A7 inner grey blocks: small radius + small padding */ #view-home :is(.stat--box,.mt-cov,.vx-c,.pc-stats,.mb-dec),#view-home #sectors div.stat{border-radius:var(--card-r-s)} #view-home :is(.stat--box,.mt-cov,.pc-stats,.mb-dec){padding:var(--card-p-s)} /* A8 insights report card = client story card */ #view-home #insGrid .rep{border-radius:var(--card-r-l);box-shadow:none} /* A9 badges and tags */ #view-home #how :is(.mo-sigs li.badge,.mo-dest .badge):not(.is-hot){height:auto;padding:4px 10px;font-size:var(--t-note);background:rgba(255,255,255,.1);box-shadow:none;color:var(--c-white)} #view-home #how :is(.mo-sigs li.badge,.mo-dest .badge){font-size:var(--t-note)} .fp-tag,.billtog em{border-radius:999px} #view-home #insGrid .rep-cover .rt{font-size:var(--t-note);letter-spacing:0} .pa-tag,.pa-sv{border:0;background:color-mix(in srgb,currentColor 14%,transparent)} .pa-own{border:0} .badge--neutral{background:rgba(6,18,52,.08)} /* A10 icon boxes: static cards soft blue; dark surfaces the dark kit box; grey glyph = --c-gray */ .iconrow__box,#view-home .iconrow__box{color:var(--c-gray)} #view-home .pcard .iconrow__box,#view-home #model .mt-h .iconrow__box{background:var(--c-soft);color:var(--c-primary)} #view-home .whynow .wi,.pa-eye{width:var(--ct-ic-box);height:var(--ct-ic-box);border-radius:var(--ct-ic-r);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--c-white)} .pa-eye svg,.pa-eye .ic{width:var(--ct-ic);height:var(--ct-ic)} .tt-row .tm i,.sd-light .tt-row .tm i{width:auto;height:auto;border-radius:0;background:none;box-shadow:none} .tt-row .tm i svg,.tt-row .tm i .ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline)} /* A11 inline icons 16 */ .bf-priv svg,.case-note svg,.lgv-sheet__lock svg,.signoff i svg,.signoff svg,.vx-ar,.vx-ar svg{width:var(--ct-ic-inline);height:var(--ct-ic-inline)} /* A12 eyebrows and labels */ .case-nav .eyebrow,#view-home .eyebrow.pr-k{letter-spacing:.2em} .hook-tag{letter-spacing:.2em} #view-home #book .bk-two .eyebrow{color:var(--c-primary);letter-spacing:.2em} #view-home :is(#sectors,#lenses,#rhythm) small.dh-eyebrow{color:var(--c-signal)} .whynow small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase} #view-home .mo-og__h em{letter-spacing:inherit} /* A14 bars and small radii */ .fp-fun i,.fp-fun span,.lg-read,.vx-rail,.vx-fill,#vxFill,.eo-bars i,.bn-r i,.mo-bar__t,.mo-bar__t>*,.thr,.thr>*,.cov-bar,.cov-bar>*{border-radius:999px} .ddb{border-radius:var(--card-r-s)} #view-home :is(#sectors,#lenses,#rhythm) .mo-dash__scene .mo-lab{border-radius:var(--card-r-s)} /* A15 one selected state: 1px primary ring */ .vx-o.on{box-shadow:inset 0 0 0 1px var(--c-primary)} #answers .mo-pickrow.is-on,.ct--select.is-on{box-shadow:inset 0 0 0 1px var(--c-primary)} /* A16 select cards (#value and #answers): same padding, every row carded, same description role */ #view-home #answers .mo-pickrow.iconrow{padding:var(--card-p-s);background:var(--c-white);box-shadow:var(--card-line-white)} #view-home #answers .mo-pickrow.iconrow.is-on{box-shadow:inset 0 0 0 1px var(--c-primary)} #view-home #answers .mo-pickrow:not(.is-on):hover{background:var(--c-white);outline:1px solid var(--c-primary);outline-offset:-1px} #view-home #answers .mo-pickrow .iconrow__t,#view-home #answers .mo-pickrow:not(.is-on) .iconrow__t{color:var(--c-ink)} #view-home #answers .mo-pickrow .iconrow__d,#view-home #value .vx-o .iconrow__d,#view-home #value .vx-o p{font-size:var(--t-prose);color:var(--c-body)} #view-home #value .vx-o{padding:var(--card-p-s)} .mo-pickrow:hover{background:none} #view-home :is(#how,#sectors,#lenses,#rhythm) :is(.mo-wrow,.mo-src__h):hover{background:rgba(255,255,255,.05)} /* A17 leaks: case-nav rules only for the nav links; dark first section on /how-it-works starts under the hero */ .case-nav span,.case-nav b{font-size:inherit;letter-spacing:inherit} .case-nav a>b{font-size:var(--t-prose);letter-spacing:0} .case-nav a>span{font-size:var(--t-note);letter-spacing:0} body[data-page="how-it-works"] #view-home #how.sec:not(#book){padding-top:0} /* ========================================================================== CONSISTENCY B (2026-11-04, approved recommendations). Undo: backups *.before-consB / kit.css.before-consA. ========================================================================== */ /* B1 one FAQ design everywhere (home/pricing build): title on top, questions in 2 columns, full-bleed paper band */ #view-home .faqsec{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:var(--sec-y);padding-block:var(--sec-y);background:var(--c-paper);box-shadow:0 0 0 100vmax var(--c-paper);clip-path:inset(0 -100vmax)} #view-home .faqsec>.head{position:static;margin-bottom:var(--head-gap)} #view-home .faqsec .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;align-items:start} #view-home .faqsec .faq>*{margin:0} @media (max-width:980px){#view-home .faqsec .faq{grid-template-columns:minmax(0,1fr)}} /* the FAQ band closes its section: no extra white under it */ #view-home #trust.sec:not(#book):has(.faqsec){padding-bottom:0} #view-home #book .bk-band:has(>.wrap>.faqsec){padding-block:0;background:none} #view-home #book .bk-band .faqsec{margin-top:0} /* B2 steps: every step block = kit ledger (rule + dot, mono label, --t-row title) */ #view-home #book .bk-tl.kledger>li,body .lgv .lgv-ct-steps.kledger>li{padding:24px 0 0;border:0;border-top:1px solid var(--c-rule);border-radius:0;background:none;box-shadow:none} #view-home #book .bk-tl.kledger,body .lgv .lgv-ct-steps.kledger{gap:24px 32px} #view-home #book .bk-tl.kledger>li>b,body .lgv .lgv-ct-steps.kledger>li>span{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary)} #view-home .mo-steps>div{position:relative;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)} #view-home .mo-steps>div::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--c-signal)} #view-home .d30 small,#view-home .pov .kledger__n,#view-home .kledger__n{color:var(--c-primary)} #view-home .night-card .kledger__n,.phero__slot .kledger__n{color:var(--c-signal)} /* B3 buttons: action inside a card = kit default (44); form submit = lg (50) */ #view-home :is(#readout,.ab-cta,.tr-proc,.fineprint,.est-out) .btn.btn-lg{height:44px;padding:0 24px;font-size:14px;line-height:20px} #view-home :is(#bkform .bf-go,#snform button[type=submit],#nl button[type=submit]),body .lgv .lgv-ct-send{height:50px;padding:0 28px;font-size:var(--t-button);line-height:22px} /* B4 list markers: plain list = 6px primary dot; yes / no lists = check / minus icon (sprite style, 24 grid, stroke 2) */ :root{--ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ic-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")} .tier li::before,#book .bk-yes li::before,#model .mt-col li.yes::before{content:"";flex:0 0 16px;width:16px;height:16px;margin-top:3px;border:0;border-radius:0;transform:none;box-shadow:none;background:var(--ok);background-image:none;-webkit-mask:var(--ic-check) center/16px no-repeat;mask:var(--ic-check) center/16px no-repeat} .tier.rec li::before{background:var(--c-signal)} #book .bk-yes li::after{content:none} #book .bk-no li::before,#model .mt-col li.no::before,#model .mt-col li.mid::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border:0;background:var(--c-gray);background-image:none;-webkit-mask:var(--ic-minus) center/16px no-repeat;mask:var(--ic-minus) center/16px no-repeat} #model .mt-col li.no::before,#model .mt-col li.mid::before{position:static;flex:0 0 16px;margin-top:2px} #book .bk-yes li::before{position:absolute;left:0;top:3px;margin:0} .tier li,#model .mt-col li{gap:12px} /* B5 form cards: one build (white card, line); snapshot fields sit in the card, no inner panel; contact form first on mobile like /book */ #view-home #snapshot .snap .snform{padding:0;border-radius:0;background:none;box-shadow:none} @media (max-width:1100px){body .lgv .lgv-request__side{order:-1}} /* B6 large card with medium padding is a named variant */ .card--l.card--tight{padding:var(--card-p-m)} /* B7 recommended tier: line only */ .tier.rec,#view-home .tier.rec{box-shadow:var(--card-line-dark)} /* B8 bands alternate white / paper */ body[data-page="client-stories"] #view-home #answers{background:var(--c-paper);box-shadow:0 0 0 100vmax var(--c-paper);clip-path:inset(0 -100vmax);padding-block:var(--sec-y)} body[data-page="client-stories"] #view-home #people{background:var(--c-white)} body[data-page="about"] #view-home .ab-op{padding-block:var(--sec-y);background:var(--c-paper);box-shadow:0 0 0 100vmax var(--c-paper);clip-path:inset(0 -100vmax)} /* B2 step descriptions = .kledger__d (body, regular, muted) */ #view-home #book .bk-tl.kledger>li>span,body .lgv .lgv-ct-steps.kledger>li>p{display:block;margin:4px 0 0;font-family:var(--font);font-size:var(--t-prose);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--c-body)} #view-home #book .bk-tl.kledger>li>h3,body .lgv .lgv-ct-steps.kledger>li>h3{margin:4px 0 0} /* client-stories: answers is its own paper band, so it keeps its top padding (beats the "same surface join" pt:0) */ body[data-page="client-stories"] #view-home #answers.sec:not(#book){padding-block:var(--sec-y)} /* /about facts + CTA: column gap like the other two-column blocks (FAQ, /trust grid) */ #view-home #about .ab-co{column-gap:clamp(32px,5vw,72px)} /* /about CTA: paper card, actions on the card's bottom edge (card stretches to the facts table) */ #view-home #about .ab-cta.cta-card{display:flex;flex-direction:column;background:var(--c-paper);box-shadow:none} #view-home #about .ab-cta .ab-ctas{margin-top:auto;padding-top:var(--card-p-m)} /* /client-stories practice groups: kit section head (eyebrow, h2, lede); --block-gap between a grid and the next head */ #view-home .case-nav .cn-h.head{display:grid;gap:16px;justify-items:start;margin:0 0 var(--head-gap);padding:0} #view-home .case-nav .cn-h.head:not(:first-child){margin-top:var(--sec-y)} #view-home .case-nav .cn-h.head .eyebrow{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c-primary)} #view-home .case-nav .cn-h.head .h2{margin:0;font-size:var(--t-section);color:var(--c-ink)} #view-home .case-nav .cn-h.head .lede{margin:0;font-family:var(--font);font-size:var(--t-lede);line-height:1.7;letter-spacing:0;color:var(--c-body)} #view-home .case-nav .cn-h.head.center{justify-items:center;text-align:center;margin-inline:auto} /* /client-stories Practice 02 (#case-adv): a full-width dark section like the home dark sections (ink to black), centred kit head, then stats + steps (kit ledger on dark) left and the agent card (glass) right. */ #view-home .case-nav .practice,#view-home .practice{position:relative;isolation:isolate;overflow:visible;margin:var(--sec-y) 0 0;padding:var(--sec-y) 0;border-radius:0;background:none;box-shadow:none; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "copy agent";gap:0 clamp(32px,5vw,72px);align-items:start} #view-home .practice::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:linear-gradient(180deg,var(--c-ink),var(--c-black));background-size:auto} #view-home .practice::after{display:none} #view-home .practice .pr-head{grid-area:head;margin:0 auto var(--head-gap);max-width:none} #view-home .practice .pr-head .eyebrow{letter-spacing:.2em;color:var(--c-signal)} #view-home .practice .pr-head .h2{margin:0;font-size:var(--t-section);color:var(--c-white)} #view-home .practice .pr-head .lede{color:rgba(255,255,255,.68)} #view-home .practice .pr-copy{grid-area:copy;display:grid;gap:var(--block-gap);align-content:start} #view-home .practice .pr-agent{grid-area:agent;border-radius:var(--card-r-l);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:var(--card-line-dark)} /* stats: same as the other figure rows on dark */ #view-home .practice .pr-tot{border-color:rgba(255,255,255,.1)} #view-home .practice .pr-tot div+div{border-left-color:rgba(255,255,255,.1)} #view-home .practice .pr-tot span{color:rgba(255,255,255,.68)} /* steps: kit ledger on dark (rule + dot, mono index, title, text) */ #view-home .practice .pr-how{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 32px} #view-home .practice .pr-how li{position:relative;display:grid;gap:4px;padding:24px 0 0;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:none;box-shadow:none} #view-home .practice .pr-how li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--c-signal)} #view-home .practice .pr-how h3,#view-home .practice .pr-how h3 b{font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-white)} #view-home .practice .pr-how b::before{display:block;margin-bottom:8px;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--c-signal)} #view-home .practice .pr-how span{font-size:var(--t-prose);line-height:1.6;color:rgba(255,255,255,.68)} @media (max-width:1100px){#view-home .practice{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "copy" "agent";row-gap:var(--block-gap)}#view-home .practice .pr-head{margin-bottom:0}} @media (max-width:640px){#view-home .practice .pr-how{grid-template-columns:minmax(0,1fr)}} #view-home .practice::before{-webkit-mask-image:none;mask-image:none;opacity:1} /* Select cards (kit .ct--select: #answers, #value): 12px between the cards everywhere */ :root{--select-gap:12px} #view-home #answers .mo-pick,#view-home #value .vx-list,.ct-select-list{gap:var(--select-gap)} /* Practice 02 on phones: the agent card stays inside the column */ #view-home .practice>*{min-width:0} #view-home .practice .pr-agent{max-width:100%;overflow:hidden} @media (max-width:1100px){#view-home .case-nav .practice,#view-home .practice{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "copy" "agent";row-gap:var(--block-gap)}} /* --------------------------------------------------------------------------- CASE PAGES ON KIT (2026-11-04) - /case-01..08 (site.js case markup, text unchanged). Chips = kit badge, meta = krows rules, stats = line card without accent bar, section labels = kit eyebrow, findings = dark kit card without glow, "How it ran" = kit ledger (rule + dot), outcome/pager = line cards, no side accent bars. --------------------------------------------------------------------------- */ body.case-page #view-home .c-id{gap:8px} body.case-page #view-home :is(.c-no,.c-tag){display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-family:var(--font);font-size:var(--t-note);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:none} body.case-page #view-home .c-no{color:#fff;background:var(--c-ink)} body.case-page #view-home .c-tag{color:var(--c-primary);background:var(--c-soft)} body.case-page #view-home .c-meta{gap:0 32px} body.case-page #view-home .c-meta div{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--c-rule);box-shadow:none} body.case-page #view-home .c-meta dt{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} body.case-page #view-home .c-meta dd{margin:0;font-size:var(--t-prose);line-height:1.6;color:var(--c-ink)} body.case-page #view-home .c-stats{border-radius:var(--card-r-m)} body.case-page #view-home .c-stats div{padding:var(--card-p-m)} body.case-page #view-home .c-stats div::before{content:none} body.case-page #view-home .c-stats b{color:var(--c-ink)} body.case-page #view-home .c-stats span{color:var(--c-body)} body.case-page #view-home .cv-thumbs{gap:var(--select-gap);padding:1px} body.case-page #view-home .cv-th{border-radius:var(--card-r-s)} body.case-page #view-home .cv-th.on{box-shadow:inset 0 0 0 1px var(--c-primary)} body.case-page #view-home .cv-th img{border-radius:6px} body.case-page #view-home .cv-ctl{gap:var(--select-gap)} body.case-page #view-home .cv-ctl button{height:44px;border-radius:var(--card-r-s);box-shadow:var(--card-line-white)} body.case-page #view-home :is(.c-story small,.c-finds>small,.c-flow>small,.c-finds>.h-wrap>small,.c-flow>.h-wrap>small,.c-out small){font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--c-primary)} body.case-page #view-home :is(.c-story small,.c-finds>small,.c-flow>small,.c-finds>.h-wrap>small,.c-flow>.h-wrap>small){margin-bottom:var(--card-head-gap)} body.case-page #view-home .c-story li{color:var(--c-body)} body.case-page #view-home .c-story li::before{top:4px;width:18px;height:18px;border-radius:50%;background:var(--c-soft);box-shadow:none} body.case-page #view-home .c-story li::after{left:6px;top:9px;border-color:var(--c-primary)} body.case-page #view-home .c-finds>div{gap:var(--grid-gap)} body.case-page #view-home .cf::after{content:none} body.case-page #view-home .cf b{color:#fff} body.case-page #view-home .c-flow ol{gap:24px 32px} body.case-page #view-home .c-flow ol::before{content:none} body.case-page #view-home .c-flow li{gap:8px;padding:24px 0 0;border-top:1px solid var(--c-rule)} body.case-page #view-home .c-flow li::before{top:-5px;width:9px;height:9px;background:var(--c-primary);box-shadow:none} body.case-page #view-home .c-flow b{font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:var(--faint)} body.case-page #view-home .c-flow strong{margin-top:4px;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} body.case-page #view-home .c-flow li>span{font-size:var(--t-prose);line-height:1.6;color:var(--muted)} body.case-page #view-home .c-out{border-left:0;align-items:center} body.case-page #view-home .c-out .co-ic{color:var(--c-primary);background:var(--c-soft)} body.case-page #view-home :is(.cp-prev,.cp-next){border-left:0;border-right:0} /* Sectors "What each team gets" table: moving flow line in the "Your agent watches" cell removed (user request 2026-11-04). */ .tt-flow{display:none} /* --------------------------------------------------------------------------- CASE PAGES REBUILT ON KIT SECTIONS (2026-11-04, replaces the token-only pass above for layout). site.js now renders each case as kit bands: intro (head + krows facts + stat strip) / dark band (viewer) / paper "What we built" cards / white findings cards / paper ledger / outcome card + pager. Section labels keep their words: "01 · The brief" = eyebrow "01" + h2 "The brief". --------------------------------------------------------------------------- */ body.case-page #view-home .case{display:block;gap:0} body.case-page #view-home .cz-band{position:relative;padding-block:var(--sec-y)} body.case-page #view-home .cz-intro{padding-top:0} body.case-page #view-home .cz-paper{background:var(--c-paper);box-shadow:0 0 0 100vmax var(--c-paper);clip-path:inset(0 -100vmax)} body.case-page #view-home .cz-dark{isolation:isolate;color:#fff} body.case-page #view-home .cz-dark::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:linear-gradient(180deg,var(--c-ink),var(--c-black))} body.case-page #view-home .cz-end{padding-bottom:0} /* intro: head + facts side by side, stat strip below */ body.case-page #view-home .cz-intro__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start;margin-bottom:var(--block-gap)} body.case-page #view-home .c-head{display:block} body.case-page #view-home .c-head .c-id{margin-bottom:var(--card-head-gap)} body.case-page #view-home .c-head .head{margin-bottom:0} body.case-page #view-home .c-head .head .eyebrow,body.case-page #view-home .cz-band .head .eyebrow{text-transform:uppercase;color:var(--c-primary)} body.case-page #view-home .c-meta{display:grid;grid-template-columns:none;gap:0;margin:0} body.case-page #view-home .c-meta div{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:24px;align-items:baseline;padding:16px 0;border-top:1px solid var(--c-rule);box-shadow:none} body.case-page #view-home .c-meta div:last-child{border-bottom:1px solid var(--c-rule)} /* dark band: viewer side panel as glass on dark */ body.case-page #view-home .cz-dark .cv-cap{background:rgba(255,255,255,.06);box-shadow:var(--card-line-dark)} body.case-page #view-home .cz-dark .cv-th{background:rgba(255,255,255,.04);box-shadow:var(--card-line-dark);color:rgba(255,255,255,.68)} body.case-page #view-home .cz-dark .cv-th.on{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);color:#fff} body.case-page #view-home .cz-dark .cv-ctl button{background:rgba(255,255,255,.06);box-shadow:var(--card-line-dark);color:#fff} body.case-page #view-home .cz-dark .cv-frame{box-shadow:var(--card-line-dark)} /* 02 What we built: check cards */ body.case-page #view-home .cz-built{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);margin:0;padding:0;list-style:none} body.case-page #view-home .cz-built li{display:flex;gap:16px;align-items:flex-start;font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} body.case-page #view-home .cz-ck{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--c-soft)} body.case-page #view-home .cz-ck::after{content:"";position:absolute;inset:0;background:var(--c-primary);-webkit-mask:var(--ic-check) center/16px no-repeat;mask:var(--ic-check) center/16px no-repeat} /* 03 findings: white stat cards */ body.case-page #view-home .cz-finds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)} body.case-page #view-home .cz-find{display:grid;gap:8px;align-content:start} body.case-page #view-home .cz-find b{font-family:var(--font-h);font-size:var(--t-big);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--c-ink)} body.case-page #view-home .cz-find em{font-style:normal;font-size:var(--t-note);line-height:1.5;color:var(--c-gray)} body.case-page #view-home .cz-find p{margin:12px 0 0;padding-top:16px;border-top:1px solid var(--c-rule);font-size:var(--t-prose);line-height:1.6;color:var(--c-body)} /* 04 How it ran: kit ledger, four columns */ body.case-page #view-home .cz-flow{grid-template-columns:repeat(4,minmax(0,1fr))} /* 05 outcome: centred kit card */ body.case-page #view-home .cz-out{display:grid;justify-items:center;gap:var(--card-head-gap);max-width:880px;margin:0 auto;text-align:center} body.case-page #view-home .cz-out .iconrow__box{color:var(--c-primary);background:var(--c-soft)} body.case-page #view-home .cz-out .head{margin:0} body.case-page #view-home .cz-out .lede{margin:0;max-width:var(--head-lede-w);color:var(--muted)} body.case-page #view-home .cz-end .c-pager{margin-top:var(--block-gap)} @media (max-width:1100px){body.case-page #view-home .cz-flow{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:980px){body.case-page #view-home .cz-intro__grid{grid-template-columns:1fr}body.case-page #view-home .cz-built{grid-template-columns:repeat(2,minmax(0,1fr))}body.case-page #view-home .cz-finds{grid-template-columns:1fr}} @media (max-width:640px){body.case-page #view-home .cz-built,body.case-page #view-home .cz-flow{grid-template-columns:1fr}body.case-page #view-home .c-meta div{grid-template-columns:1fr;gap:4px}} /* Case pages 02-05: legal-page layout (/gdpr, /privacy) - head sticky on the left, content flows on the right, items one per row, stacked down. */ body.case-page #view-home .cz-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start} body.case-page #view-home .cz-split>.head{position:sticky;top:7rem;margin:0;text-align:left;justify-items:start} body.case-page #view-home .cz-split>.head .h2{font-size:var(--t-sub)} body.case-page #view-home .cz-split :is(.cz-built,.cz-finds,.cz-flow){grid-template-columns:1fr} body.case-page #view-home .cz-split .cz-flow{gap:40px} body.case-page #view-home .cz-split .cz-out{max-width:none;margin:0;justify-items:start;text-align:left} body.case-page #view-home .cz-split .c-pager{grid-column:1/-1} @media (max-width:980px){body.case-page #view-home .cz-split{grid-template-columns:1fr;gap:var(--head-gap)}body.case-page #view-home .cz-split>.head{position:static}} @media (max-width:640px){body.case-page #view-home .cz-split :is(.cz-built,.cz-finds,.cz-flow){grid-template-columns:1fr}} /* Practice 02 agent feed: the fixed 396px box squeezed the three kit-sized cards (154px each) to 125px and cut the "Account owner / Draft ready" row. Height now follows the cards. */ #view-home .practice .pa-feed{height:auto;min-height:0;overflow:visible;grid-auto-rows:max-content;-webkit-mask-image:none;mask-image:none} /* Case pager sits after the 05 section (outside the sticky-head grid) so the sticky head never slides over it. */ body.case-page #view-home .cz-pager{padding-top:var(--block-gap)} body.case-page #view-home .cz-pager .c-pager a{background:#fff} body.case-page #view-home .cz-end{padding-bottom:0} /* --------------------------------------------------------------------------- Case pages 02-05 = legal-page pattern (/gdpr, /privacy): one grid, sticky section index on the left (same words as the section heads, current part marked on scroll), all parts flow on the right. --------------------------------------------------------------------------- */ body.case-page #view-home .cz-doc__grid{display:grid;gap:3rem} body.case-page #view-home .cz-doc__grid>*{min-width:0} body.case-page #view-home .cz-nav{display:none} body.case-page #view-home .cz-nav ul{margin:0;padding:0;list-style:none;border-left:1px solid var(--c-rule)} body.case-page #view-home .cz-nav a{display:block;margin-left:-1px;padding:8px 0 8px 16px;border-left:1px solid transparent;font-size:var(--t-note);line-height:1.5;color:var(--c-body);transition:color .2s,border-color .2s} body.case-page #view-home .cz-nav a:hover{color:var(--c-ink)} body.case-page #view-home .cz-nav a.is-active{border-left-color:var(--c-primary);color:var(--c-primary);font-weight:600} body.case-page #view-home .cz-part{scroll-margin-top:7rem} body.case-page #view-home .cz-part+.cz-part{margin-top:var(--block-gap);padding-top:var(--block-gap);border-top:1px solid var(--c-rule)} body.case-page #view-home .cz-part>.head{margin-bottom:var(--card-head-gap);text-align:left;justify-items:start} body.case-page #view-home .cz-part>.head .h2{font-size:var(--t-sub)} body.case-page #view-home .cz-part :is(.cz-built,.cz-finds,.cz-flow){grid-template-columns:1fr} body.case-page #view-home .cz-part .cz-built{gap:12px} body.case-page #view-home .cz-part .cz-flow{gap:40px} body.case-page #view-home .cz-part .cz-out{max-width:none;margin:0;justify-items:start;text-align:left} @media (min-width:1024px){ body.case-page #view-home .cz-doc__grid{grid-template-columns:220px minmax(0,1fr);gap:5rem} body.case-page #view-home .cz-nav{display:block;position:sticky;top:7rem;align-self:start} } /* ========================================================================== 34 CONSISTENCY PASS (2026-11-04, phase 5). One place for the rules the inventory (docs/color-migration-2026-11-04/audit/inventory.html) found broken. Prefix "html #view-home:not(#_)" = two ids, so these beat the older section-scoped rules above. Remove this block to undo. Motion sections and product mock-ups (agent card, document frames) are left as they are. ========================================================================== */ :root{--cta-pad:calc(var(--card-p-l) * 1.75)} /* F1 card size: radius 20 -> padding 32, radius 14 -> padding 24 */ html #view-home:not(#_) :is(.pcard,.mt-col,.vx-card,.rep,.bk-doc,.bkform){padding:var(--card-p-l)} html #view-home:not(#_) :is(.cp-prev,.cp-all,.cp-next,.bf-alt a){padding:var(--card-p-m)} /* F2 card titles on the card role (20). Rows (.cr-r, table heads) stay --t-row. */ html #view-home:not(#_) :is(.qcard h3.h-wrap>q,.bk-guar h3.h-wrap>b,.bkform .bf-h h3.h-wrap>b,#insGrid .rep-t,.kcard__t,.kcard__t b){font-family:var(--font-h);font-size:var(--t-card);font-weight:700;line-height:1.25;letter-spacing:-.02em} html #view-home:not(#_) .cr-r :is(.kcard__t,.kcard__t b,h3,h3>b){font-size:var(--t-row);line-height:1.3;letter-spacing:-.015em} /* F3 figures: value --t-sub, label --t-note (prices stay --t-big) */ html #view-home:not(#_) .stat__value{font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;line-height:1.1;letter-spacing:-.025em} /* F4 prose inside cards on --t-prose (15) */ html #view-home:not(#_) :is(.tier .best,.cv-d,.kledger__d,.eo-note){font-size:var(--t-prose);line-height:1.65} /* K1 CTA cards: title on the section role (40), padding 56 (35 on phones) */ html #view-home:not(#_) :is(.snap,.tr-proc,.ab-cta,.nl,.scta){padding:var(--cta-pad)} /* Offer cards (price + list) are content cards: large card padding */ html #view-home:not(#_) :is(.hook,.fineprint){padding:var(--card-p-l)} html #view-home:not(#_) .hook .hook-g{border-top:0} html #view-home:not(#_) :is(.hook,.snap,.tr-proc,.ab-cta,.nl,.scta) .head :is(h2,h3,.h2), html #view-home:not(#_) .fineprint .fp-a :is(h3,h3>b){font-family:var(--font-h);font-size:var(--t-section);font-weight:800;line-height:1.1;letter-spacing:-.025em} /* K2 a page's own blocks are sections (40): case pages too */ html body.case-page #view-home:not(#_) :is(.cz-part,.cz-split)>.head .h2{font-size:var(--t-section);line-height:1.1;letter-spacing:-.025em} /* Estimator: head top-aligned with the result card, sliders bottom-aligned with it */ html #view-home:not(#_) .est{align-items:stretch} html #view-home:not(#_) .est-in{display:flex;flex-direction:column} html #view-home:not(#_) .est-in>.head{margin:0 0 auto;padding-bottom:var(--card-p-m)} html #view-home:not(#_) .est-in>label:first-of-type{margin-top:0} /* Price tiers: one spacing scale inside the card (4 inside a pair, 16 between groups, 24 around the list), and no lift on the recommended card so rows line up. */ html #view-home:not(#_) .tier{gap:0;transform:none} html #view-home:not(#_) .tier>*{margin:0} html #view-home:not(#_) .tier .scope{margin-top:4px} html #view-home:not(#_) .tier .tpr{margin-top:16px} html #view-home:not(#_) .tier .bill{margin-top:4px} html #view-home:not(#_) .tier .best{margin-top:16px} html #view-home:not(#_) .tier .incl{margin-top:16px} html #view-home:not(#_) .tier ul{margin-top:24px;padding-top:24px} html #view-home:not(#_) .tier>.btn{margin-top:24px} /* Estimator sliders: 32 between rows so the group carries its weight at the bottom */ html #view-home:not(#_) .est-in>label{margin-top:32px} html #view-home:not(#_) .est-in>label:first-of-type{margin-top:0} html #view-home:not(#_) .tier{display:flex;flex-direction:column} html #view-home:not(#_) .tier ul{align-content:start;gap:12px;margin-bottom:24px} html #view-home:not(#_) .tier>.btn{margin-top:auto;align-self:flex-start} /* 35 MOTION POLICY (2026-11-04, phase 6) Motion lives only in Hero, How, Sectors, Lenses, Rhythm, Answers. Everywhere else: interaction feedback only (hover, menus, focus, content swap on click). Elements are pinned to their final, visible state. */ .mq__track,.cs-track{animation:none!important;transform:none!important} .cv-shot img,.cv-shot.on img{animation:none!important;transform:none!important} .hs,.cv-shot.on .hs{animation:none!important;opacity:1!important;transform:translate(-50%,-50%)!important} .hs i::after{animation:none!important;opacity:0!important} .cv-scan,.pc-scan{display:none!important} .pa-eye i{animation:none!important;transform:none!important} .pa-bar i{animation:none!important;transform:none!important;width:100%} .bk-doc .bd-list li,.bk-doc.in .bd-list li{animation:none!important;opacity:1!important;transform:none!important} /* 36 SECTOR DEEP PANELS = HOME CONTENT CARDS (2026-11-05) Question cards and source cards follow the home content card (.pcard): large radius + padding, 20 inside, no hairline dividers, 24 grid gap, card-title label, same hover (outline, no lift). */ html #view-home:not(#_) .sd-light :is(.qcard,.srcbox){border-radius:var(--card-r-l);padding:var(--card-p-l)} html #view-home:not(#_) .sd-light .qcard{gap:20px} html #view-home:not(#_) .sd-light .qcard .ab{border-top:0;padding-top:0} html #view-home:not(#_) .sd-light .qcard .qa{margin-top:0} html #view-home:not(#_) .sd-light .srcg{gap:var(--grid-gap,24px)} html #view-home:not(#_) .sd-light .srcbox .sc-lbl{font-family:var(--font-h);font-size:var(--t-card);font-weight:700;line-height:1.25;letter-spacing:-.02em;margin-bottom:20px} html #view-home:not(#_) .sd-light .srcbox .sc-lbl :is(small,.src-n){font-family:var(--font);font-size:var(--t-note);font-weight:500;letter-spacing:0;color:var(--muted)} html #view-home:not(#_) .sd-light .srcbox:hover{transform:none;outline:1px solid var(--c-primary);outline-offset:-1px} html #view-home:not(#_) .sd-light .qcard{display:flex;flex-direction:column} html #view-home:not(#_) .sd-light .qcard .qa{margin-top:auto} html #view-home:not(#_) .sd-light .mb-top{flex-wrap:wrap;gap:4px 16px} html #view-home:not(#_) .sd-light .mb-top>span{white-space:nowrap} /* 37 LAB LAYOUTS ON KIT (2026-11-05) Five layouts the user picked from /lab, rebuilt on kit tokens and kit head styles. Value · case card (.pcard, home + client stories) · People · Readout card (.hook) · FAQ. */ :root{--c-blue-soft:#EEF2FE;--c-blue-line:#D9E2FC} /* ---- Value: outcome list left, comparison card right ---- */ html #view-home:not(#_) #value .vx2{display:grid;gap:24px;align-items:start} @media (min-width:1001px){html #view-home:not(#_) #value .vx2{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}} html #view-home:not(#_) #value .vx-list{display:grid;gap:8px} html #view-home:not(#_) #value .vx-o{padding:var(--card-p-s);border-radius:var(--card-r-m);background:transparent;box-shadow:none;border:1px solid transparent;transition:background .2s,border-color .2s} html #view-home:not(#_) #value .vx-o:hover{background:var(--c-paper);outline:0} html #view-home:not(#_) #value .vx-o.on{background:#fff;border-color:var(--c-rule);box-shadow:inset 3px 0 0 var(--c-primary)} html #view-home:not(#_) #value .vx-o .iconrow__box{background:var(--c-paper);color:var(--c-gray)} html #view-home:not(#_) #value .vx-o.on .iconrow__box{background:var(--c-soft);color:var(--c-primary)} html #view-home:not(#_) #value .vx-o .iconrow__t{font-size:var(--t-row);line-height:1.3;letter-spacing:-.015em} html #view-home:not(#_) #value .vx-o .vx-pb{display:none} html #view-home:not(#_) #value .vx-card{display:grid;gap:28px} html #view-home:not(#_) #value .vx-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px} html #view-home:not(#_) #value .vx-seg{display:inline-flex;width:auto;padding:4px;gap:2px;border-radius:999px;background:var(--c-paper);box-shadow:0 0 0 1px var(--c-rule)} html #view-home:not(#_) #value .vx-seg .vx-thumb{display:none} html #view-home:not(#_) #value .vx-seg button{flex:none;padding:10px 16px;border-radius:999px;font-size:var(--t-note);font-weight:600;color:var(--c-body);background:transparent;transition:background .2s,color .2s} html #view-home:not(#_) #value .vx-seg button.on{background:var(--c-ink);color:#fff} html #view-home:not(#_) #value .vx-stage{padding:0;background:none;border:0;box-shadow:none;display:grid;gap:28px} html #view-home:not(#_) #value .vx-kpi{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px} html #view-home:not(#_) #value .vx-kpi small{flex-basis:100%} html #view-home:not(#_) #value #vxK{font-family:var(--font-h);font-size:var(--t-big);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--c-ink)} html #view-home:not(#_) #value #vxG{font-size:var(--t-note);font-weight:600;color:var(--c-primary);background:var(--c-soft);padding:4px 12px;border-radius:999px} html #view-home:not(#_) #value .vx2[data-mode="t"] #vxG{color:var(--c-body);background:var(--c-paper)} html #view-home:not(#_) #value .vx-track{display:flex;flex-direction:column-reverse;gap:8px;padding:0} html #view-home:not(#_) #value .vx-rail{position:relative;height:10px;border-radius:999px;background:var(--c-paper);overflow:hidden} html #view-home:not(#_) #value .vx-rail::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--ghost,100%);background:repeating-linear-gradient(135deg,#D5DBE6 0 6px,transparent 6px 10px);border-radius:999px} html #view-home:not(#_) #value .vx-fill{position:absolute;inset:0 auto 0 0;height:100%;min-width:10px;border-radius:999px;background:linear-gradient(90deg,var(--c-primary),#5B7CF0);transition:width .5s cubic-bezier(.2,.7,.2,1)} html #view-home:not(#_) #value .vx2[data-mode="t"] .vx-fill{background:var(--c-gray)} html #view-home:not(#_) #value .vx-marks{display:none} html #view-home:not(#_) #value .vx-axis{position:static;display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--t-tag);color:var(--c-gray)} html #view-home:not(#_) #value .vx-axis span{position:static;transform:none} html #view-home:not(#_) #value .vx-steps{display:grid;gap:12px;padding:0;background:none} @media (min-width:761px){html #view-home:not(#_) #value .vx-steps{grid-template-columns:repeat(3,1fr)}} html #view-home:not(#_) #value .vx-ar{display:none} html #view-home:not(#_) #value .vx-st{display:flex;align-items:flex-start;gap:12px;padding:var(--card-p-s);border-radius:var(--card-r-s);background:var(--c-paper)} html #view-home:not(#_) #value .vx-st>i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c-ink);color:#fff;font:600 var(--t-tag)/1 var(--mono);font-style:normal} html #view-home:not(#_) #value .vx-st b{display:block;font-size:var(--t-prose);font-weight:600;line-height:1.35;color:var(--c-ink)} html #view-home:not(#_) #value .vx-st small{display:block;font-size:var(--t-note);color:var(--c-gray)} html #view-home:not(#_) #value .vx-cmp{display:grid;gap:12px} @media (min-width:761px){html #view-home:not(#_) #value .vx-cmp{grid-template-columns:1fr 1fr}} html #view-home:not(#_) #value .vx-c{display:flex;gap:12px;padding:var(--card-p-s);border-radius:var(--card-r-s);background:#fff;box-shadow:none;border:1px solid var(--c-rule)} html #view-home:not(#_) #value .vx-c .mk{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700;background:var(--c-paper);color:var(--c-gray)} html #view-home:not(#_) #value .vx-c.a{background:var(--c-blue-soft);border-color:transparent} html #view-home:not(#_) #value .vx-c.a .mk{background:var(--c-primary);color:#fff} html #view-home:not(#_) #value .vx-c p{margin-top:4px;font-size:var(--t-prose);line-height:1.55;color:var(--c-ink)} html #view-home:not(#_) #value .vx-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:20px;border-top:1px solid var(--c-rule);font-family:var(--font);font-size:var(--t-note);letter-spacing:0;text-transform:none;color:var(--c-gray)} html #view-home:not(#_) #value .vx-foot .live-dot{display:none} /* ---- Case card (.pcard): picture first, then tag, question, numbers ---- */ html #view-home:not(#_) .pcard:not(.pc-adv){display:flex;flex-direction:column;gap:16px;padding:var(--card-p-l)} html #view-home:not(#_) .pcard:not(.pc-adv) .pc-img{order:-1;margin:0 0 8px;aspect-ratio:16/9;border-radius:var(--card-r-m);overflow:hidden;box-shadow:0 0 0 1px var(--c-rule);background:var(--c-paper)} html #view-home:not(#_) .pcard:not(.pc-adv) .pc-img img{width:100%;height:100%;object-fit:cover;object-position:top left} html #view-home:not(#_) .pcard:not(.pc-adv) .pc-badge{left:12px;top:12px;background:rgba(6,18,52,.72);color:#fff;box-shadow:none;backdrop-filter:blur(6px)} html #view-home:not(#_) .pcard:not(.pc-adv) .pc-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px} html #view-home:not(#_) .pcard:not(.pc-adv) .pc-head .iconrow__box{display:none} html #view-home:not(#_) .pcard:not(.pc-adv) .pc-body{display:flex;flex-direction:column;gap:16px;flex:1} html #view-home:not(#_) .pcard .pc-stats b{font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;letter-spacing:-.025em;line-height:1.1} html #view-home:not(#_) .pcard:not(.pc-adv) .pc-go{margin-top:auto} html #view-home:not(#_) .pcard:hover{box-shadow:0 0 0 1px var(--c-primary)} /* ---- People: head + sign-off left, three principles stacked right ---- */ @media (min-width:1001px){ html #view-home:not(#_) #people .people--cards{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start} html #view-home:not(#_) #people .people__top{position:sticky;top:120px;display:block;margin:0} html #view-home:not(#_) #people .people__top .head{margin:0} } html #view-home:not(#_) #people .people__top .head{text-align:left;align-items:flex-start} html #view-home:not(#_) #people .signoff{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:10px 16px 10px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--c-rule);font-size:var(--t-note);font-weight:600;color:var(--c-ink)} html #view-home:not(#_) #people .signoff i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#12805C;color:#fff} html #view-home:not(#_) #people .signoff i svg{width:14px;height:14px} html #view-home:not(#_) #people .people__cards{display:grid;grid-template-columns:1fr;gap:24px} html #view-home:not(#_) #people .ppl-card{display:grid;grid-template-columns:44px 1fr;column-gap:20px;row-gap:6px;align-items:start;padding:var(--card-p-l)} html #view-home:not(#_) #people .ppl-card .iconrow{display:contents} html #view-home:not(#_) #people .ppl-card .iconrow__box{grid-column:1;grid-row:1/4;width:44px;height:44px;margin:0} html #view-home:not(#_) #people .ppl-card :is(.ppl-card__k,.iconrow__t,.ppl-card__d){grid-column:2;margin:0} html #view-home:not(#_) #people .ppl-card .ppl-card__d{margin-top:2px} /* ---- Readout card (.hook): offer left, what you get + button right ---- */ html #view-home:not(#_) .hook{display:grid;gap:var(--card-p-l);padding:var(--card-p-l);border-radius:var(--card-r-l);background:linear-gradient(180deg,var(--c-blue-soft),#F6F8FF);box-shadow:0 0 0 1px var(--c-blue-line);border:0} @media (min-width:1001px){ html #view-home:not(#_) .hook{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:64px;row-gap:32px;padding:48px;align-items:start} html #view-home:not(#_) .hook .hook-l{grid-column:1;grid-row:1/3} html #view-home:not(#_) .hook .hook-list{grid-column:2;grid-row:1} html #view-home:not(#_) .hook .hook-cta{grid-column:2;grid-row:2;justify-self:start;align-self:start} } html #view-home:not(#_) .hook .hook-pr{margin-top:16px;font-family:var(--font-h);font-size:var(--t-big);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--c-ink)} html #view-home:not(#_) .hook .hook-pr small{font-family:var(--font);font-size:var(--t-lede);font-weight:500;letter-spacing:0;color:var(--c-body)} html #view-home:not(#_) .hook .hook-g{display:flex;gap:12px;margin-top:24px;padding:var(--card-p-s);border-radius:var(--card-r-s);background:#fff;box-shadow:0 0 0 1px var(--c-blue-line);font-size:var(--t-prose);line-height:1.6;color:var(--c-ink)} html #view-home:not(#_) .hook .hook-g svg{flex:none;width:18px;height:18px;margin-top:2px;color:#12805C} html #view-home:not(#_) .hook .hook-list{display:grid;gap:12px;margin:0;padding:0;list-style:none} html #view-home:not(#_) .hook .hook-list li{position:relative;padding-left:28px;font-size:var(--t-prose);line-height:1.55;color:var(--c-ink)} html #view-home:not(#_) .hook .hook-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--c-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23345EEA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;border:0;transform:none} /* ---- FAQ: head left, questions right ---- */ html #view-home:not(#_) .faqsec{display:grid;gap:32px} @media (min-width:1001px){html #view-home:not(#_) .faqsec{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start} html #view-home:not(#_) .faqsec>.head{text-align:left;align-items:flex-start;margin:0}} html #view-home:not(#_) .faqsec .faq{display:block;max-width:none;margin:0} html #view-home:not(#_) .faqsec details{border:0;border-bottom:1px solid var(--c-rule);border-radius:0;background:none;box-shadow:none;padding:0;margin:0} html #view-home:not(#_) .faqsec details:first-child{border-top:1px solid var(--c-rule)} html #view-home:not(#_) .faqsec summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;cursor:pointer;font-family:var(--font-h);font-size:var(--t-row);font-weight:700;letter-spacing:-.015em;line-height:1.35;color:var(--c-ink)} html #view-home:not(#_) .faqsec summary::-webkit-details-marker{display:none} html #view-home:not(#_) .faqsec summary::before{display:none} html #view-home:not(#_) .faqsec summary::after{content:"";position:static;flex:none;width:28px;height:28px;border-radius:50%;border:0;background:var(--c-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061234' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/12px no-repeat;transform:none;transition:transform .2s} html #view-home:not(#_) .faqsec details[open] summary::after{transform:rotate(45deg)} html #view-home:not(#_) .faqsec summary:hover{color:var(--c-primary)} html #view-home:not(#_) .faqsec details p{padding:0 48px 24px 0;margin:0;font-size:var(--t-prose);line-height:1.7;color:var(--c-body)} html #view-home:not(#_) .pcard:not(.pc-adv) .pc-tag{margin:0;text-align:left;align-self:flex-start} html #view-home:not(#_) .hook .hook-list{border:0;padding:0;margin:0;background:none;box-shadow:none} html #view-home:not(#_) .hook .hook-list::before{display:none} html #view-home:not(#_) .hook .hook-list li{display:block;margin:0;border:0;background:none} html #view-home:not(#_) .hook .hook-list li::before{display:block;-webkit-mask:none;mask:none;box-shadow:none;margin:0;inset:auto;left:0;top:3px} html #view-home:not(#_) .faqsec summary::after{background-color:#fff;box-shadow:0 0 0 1px var(--c-rule)} html #view-home:not(#_) #value :is(.vx-track,.vx-stage,.vx-steps){border:0;box-shadow:none} html #view-home:not(#_) #value .vx-track::before,html #view-home:not(#_) #value .vx-track::after{display:none} html #view-home:not(#_) .hook .hook-cta{margin:0} /* 38 PICKER ROW = one component (2026-11-05): Value outcomes and Sourced answers teams share it. Row: 16 padding, radius 14; idle = no box; active = white card + kit line + blue left edge. */ html #view-home:not(#_) :is(#value .vx-list,#answers .mo-pick){display:grid;gap:8px} html #view-home:not(#_) :is(#value .vx-o,#answers .mo-pickrow){padding:var(--card-p-s);gap:16px;border-radius:var(--card-r-m);background:transparent;box-shadow:none;border:1px solid transparent;transition:background .2s,border-color .2s} html #view-home:not(#_) :is(#value .vx-o,#answers .mo-pickrow):not(.on):not(.is-on):hover{background:rgba(6,18,52,.03);outline:0} html #view-home:not(#_) :is(#value .vx-o.on,#answers .mo-pickrow.is-on){background:#fff;border-color:var(--c-rule);box-shadow:inset 3px 0 0 var(--c-primary)} html #view-home:not(#_) :is(#value .vx-o,#answers .mo-pickrow) .iconrow__box{width:40px;height:40px;background:var(--c-paper);color:var(--c-gray)} html #view-home:not(#_) #answers .mo-pickrow .iconrow__box{background:#fff;box-shadow:0 0 0 1px var(--c-rule)} html #view-home:not(#_) :is(#value .vx-o.on,#answers .mo-pickrow.is-on) .iconrow__box{background:var(--c-soft);color:var(--c-primary);box-shadow:none} html #view-home:not(#_) :is(#value .vx-o,#answers .mo-pickrow) .iconrow__t{font-family:var(--font-h);font-size:var(--t-row);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)} html #view-home:not(#_) :is(#value .vx-o,#answers .mo-pickrow) .iconrow__d{font-family:var(--font);font-size:var(--t-note);line-height:1.45;color:var(--c-gray)} html #view-home:not(#_) :is(#value .vx-o,#answers .mo-pickrow){row-gap:2px;column-gap:16px;align-items:center} html #view-home:not(#_) .pcard .pc-head,html #view-home:not(#_) .pcard .pc-head>*{max-width:none;width:100%} html #view-home:not(#_) .pcard .pc-t{max-width:none;text-wrap:pretty} /* 39 SECTORS DEEP (DARK) = HOME DARK SYSTEM (2026-11-05) Panels follow the home glass panel (#how .mo-feed): glass gradient, 1px white/10 line, radius 20, padding 24. Figures follow the home stat box (#sectors .mo-dash .stat): white/5 fill, radius 10, 16/20 padding, mono 12 label, 28 Jakarta 800 value. */ :root{--glass-bg:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),rgba(6,18,52,.62);--glass-line:0 0 0 1px rgba(255,255,255,.1);--stat-bg:rgba(255,255,255,.05)} html #view-home:not(#_) #sdeep :is(.whynow,.kpis,.wtable,.lf2 .tl,.chartcard){background:var(--glass-bg);box-shadow:var(--glass-line);border:0;border-radius:var(--card-r-l);padding:var(--card-p-m)} /* Why now: a glass panel with the home icon box + stat label */ html #view-home:not(#_) #sdeep .whynow{display:flex;gap:20px;align-items:center} html #view-home:not(#_) #sdeep .whynow .wi{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(163,182,255,.12);color:#A3B6FF;box-shadow:none;border:0} html #view-home:not(#_) #sdeep .whynow small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)} html #view-home:not(#_) #sdeep .whynow p{margin-top:6px;font-size:var(--t-lede);line-height:1.6;color:#fff} /* KPI board: one panel, four stat boxes (sparkline kept under the figure) */ html #view-home:not(#_) #sdeep .kpis{gap:12px} html #view-home:not(#_) #sdeep .kpi2{background:var(--stat-bg);box-shadow:none;border:0;border-radius:var(--card-r-s);padding:16px 20px 62px;gap:4px} html #view-home:not(#_) #sdeep .kpi2::before{display:none} html #view-home:not(#_) #sdeep .kpi2 small{font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;color:rgba(255,255,255,.6)} html #view-home:not(#_) #sdeep .kpi2 b{font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;letter-spacing:-.025em} html #view-home:not(#_) #sdeep .kpi2 em{font-style:normal;font-size:var(--t-note);color:rgba(255,255,255,.68)} html #view-home:not(#_) #sdeep .kpi2 svg{border-radius:0 0 var(--card-r-s) var(--card-r-s)} /* Watchlist: home feed table (mono head on no fill, white/8 row rules) */ html #view-home:not(#_) #sdeep .wtable{overflow:hidden} html #view-home:not(#_) #sdeep .wtable .wt-row{background:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)} html #view-home:not(#_) #sdeep .wtable .wt-row:last-child{border-bottom:0;padding-bottom:0} html #view-home:not(#_) #sdeep .wtable .wt-row.th{padding-top:0;font-size:var(--t-eyebrow);letter-spacing:.2em;color:rgba(255,255,255,.6)} html #view-home:not(#_) #sdeep .wtable .wt-row b{font-size:var(--t-prose);font-weight:600;color:#fff} html #view-home:not(#_) #sdeep .wtable .wt-row .mv{font-size:var(--t-note);color:rgba(255,255,255,.8)} /* Signal feed: same panel as the watchlist; rail moved with the panel padding */ html #view-home:not(#_) #sdeep .lf2 .tl::before{left:calc(83px + var(--card-p-m));top:calc(14px + var(--card-p-m));bottom:calc(14px + var(--card-p-m))} @media (max-width:760px){html #view-home:not(#_) #sdeep .lf2 .tl::before{left:calc(79px + var(--card-p-m))}} /* Funnel: stat boxes on top, the chart in a glass panel, the week panel as an inner stat surface */ html #view-home:not(#_) #sdeep .fnl-sum>div{background:var(--stat-bg);box-shadow:none;border:0;border-radius:var(--card-r-s);padding:16px 20px} html #view-home:not(#_) #sdeep .fnl-sum b{font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;letter-spacing:-.025em} html #view-home:not(#_) #sdeep .fnl-sum span{font-size:var(--t-note);color:rgba(255,255,255,.68)} html #view-home:not(#_) #sdeep .chartcard{gap:24px} html #view-home:not(#_) #sdeep .fnl-panel{background:var(--stat-bg);box-shadow:none;border:0;border-radius:var(--card-r-m);padding:var(--card-p-m)} html #view-home:not(#_) #sdeep .fnl-sum :is(.fs0,.fs1,.fs2,.fs3) b{font-family:var(--font-h);letter-spacing:-.025em} /* §40 Inline field + button (.f-inline, e.g. newsletter): pill shell so it follows the pill button. Overrides the 10px form radius above; stacked phone layout keeps a rounded box. */ .f-inline{border-radius:999px} @media (max-width:479.98px){.f-inline{border-radius:1.75rem}}