/* ============================================================================ META FUNCTIONS — metafns.com Stylesheet · organized by section ---------------------------------------------------------------------------- 01 · Design tokens (colors, fonts) 06 · Infographics (glance, pillars) 02 · Base & typography 07 · Panels, screens, console 03 · Navigation & mobile menu 08 · Journey, tables, timeline, cycle, engagement scroller 04 · Hero 09 · Case rows, people, FAQ 05 · Sections, labels, cards 11 · Contact (copy-email widget) 12 · CTA band, footer 13 · Responsive & reduced motion ============================================================================ */ /* ================= 01 · DESIGN TOKENS ================= */ :root{ --bg:#F3F2EC;--bg2:#ECEBE3;--card:#FBFAF6; --tinta:#EFEDE3;--tintb:#E9EDE7;--tintc:#EAECEF; --line:#E0DED4;--line2:#CBC9BD; --txt:#1C1E24;--mut:#5B5F6A;--dim:#616773; --cyan:#0B709F;--green:#137640;--amber:#935A00;--red:#C4453B;--indigo:#5B6FD8;--teal:#0D7A68;--plum:#8A4A9E;--rose:#A14B5C; --slate:#232833;--slate2:#1C212B;--slate3:#181C26;--sline:#394153;--sline2:#465066; --stxt:#E7EBF2;--smut:#A9B2C3;--sdim:#8591A4; --bcyan:#34C8EE;--bcyan2:#6FDCF7;--bgreen:#43D17C;--bamber:#F5A83C;--bred:#EF6A5F;--bindigo:#8B93FF; --ink:#12161F;--grad1:#34C8EE;--grad2:#8FE7FF;--grad3:#8B9BF0; --cyan-rgb:11,112,159;--bcyan-rgb:52,200,238;--bcyan2-rgb:111,220,247; --amber-rgb:147,90,0;--green-rgb:19,118,64;--red-rgb:196,69,59;--bamber-rgb:245,168,60; --indigo-rgb:91,111,216;--slate-rgb:35,40,51;--slate2-rgb:28,33,43;--slate3-rgb:24,28,38; --teal-rgb:13,122,104;--plum-rgb:138,74,158;--rose-rgb:161,75,92; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; --head:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --box:'Space Grotesk','Inter',-apple-system,sans-serif; --sans:'Instrument Sans','Inter',-apple-system,sans-serif} /* ================= 01b · BACKGROUND LAYOUT MODES (how-we-deliver.html only) ================= */ /* "Soft Contrast" — same alternating structure, but the dark bands are a lighter mid-depth slate instead of near-black, so the jump against cream is gentler. Every dark widget (#sec-orbit, #sec-boundary, #sec-gates, #sec-pid, #sec-touch) already pulls its colours from --slate2/--sline/--sline2, so this one root change cascades everywhere automatically — no per-widget edits needed. */ html[data-bgmode="soft"]{ --slate:#3A4050;--slate2:#323847;--slate3:#2B3140;--sline:#4E5872;--sline2:#606C89; --slate-rgb:58,64,80;--slate2-rgb:50,56,71;--slate3-rgb:43,49,64; } /* "Midnight" — one consistent dark base for the whole page. Sections that were bright cards (What It Is, Compare, Five Axes, Ledger, Cycle, Architecture) become dark too; their content still reads correctly because they're built entirely from semantic tokens (--bg/--card/--txt/--cyan/etc.), so remapping those tokens once at the root re-skins the whole page without touching any individual chapter's markup. Widgets that already had their own dark bridge (orbit/boundary/gates/pipeline/touch) are untouched — they were dark already. */ html[data-bgmode="midnight"]{ --bg:var(--slate3);--bg2:var(--slate);--card:var(--slate2); --tinta:var(--slate2);--tintb:var(--slate2);--tintc:var(--slate2); --line:var(--sline);--line2:var(--sline2); --txt:var(--stxt);--mut:var(--smut);--dim:var(--sdim); --cyan:var(--bcyan);--cyan-rgb:var(--bcyan-rgb); --green:var(--bgreen);--green-rgb:67,209,124; --amber:var(--bamber);--amber-rgb:var(--bamber-rgb); --indigo:var(--bindigo);--indigo-rgb:139,147,255; --red:var(--bred);--red-rgb:239,106,95; --teal:#2fd6bd;--teal-rgb:47,214,189; --rose:#E8899C;--rose-rgb:232,137,156; } /* darkband sections and the light sections now share one tone, so the seam shadows and cyan accent line would just be visual noise — drop them here */ html[data-bgmode="midnight"] .sec.darkband::before, html[data-bgmode="midnight"] .sec.darkband + .sec::before, html[data-bgmode="midnight"] .sec:has(+ .sec.darkband)::after{display:none} html[data-bgmode="midnight"] .sec.darkband, html[data-bgmode="midnight"] .sec.ta, html[data-bgmode="midnight"] .sec.tb, html[data-bgmode="midnight"] .sec.tc{border-color:var(--line)} html[data-bgmode="midnight"] .topsec{background:var(--slate3)} html[data-bgmode="midnight"] .accelhead{background:var(--slate)} /* ================= 02 · BASE & TYPOGRAPHY ================= */ *{margin:0;padding:0;box-sizing:border-box} a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{ outline:2.5px solid var(--cyan);outline-offset:3px;border-radius:4px} #nav :focus-visible,.darkband :focus-visible,.band :focus-visible,footer :focus-visible,#mobmenu :focus-visible{outline-color:var(--bcyan)} .skiplink{position:fixed;top:-64px;left:16px;z-index:300;background:var(--bcyan);color:var(--ink); font-family:var(--head);font-weight:700;font-size:14px;padding:12px 20px;border-radius:100px;transition:top .25s} .skiplink:focus{top:14px} html{scroll-behavior:smooth;scroll-padding-top:84px} body{background:var(--bg);color:var(--txt);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:rgba(var(--cyan-rgb),.18)} a{text-decoration:none;color:inherit} h1,h2,.btn,.navcta,.fbrand,#nav .brand{font-family:var(--head)} h3,h4{font-family:var(--box);letter-spacing:-.01em} img,svg,canvas{max-width:100%} /* ================= 03 · NAVIGATION & MOBILE MENU ================= */ #pgbar{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:99;border-radius:0 2px 2px 0; background:linear-gradient(90deg,var(--cyan),var(--bcyan));box-shadow:0 0 8px rgba(var(--bcyan-rgb),.6)} #nav{position:fixed;top:0;left:0;right:0;z-index:80;height:70px;display:flex;align-items:center;justify-content:space-between; padding:0 max(24px,calc(50vw - 640px));background:rgba(var(--slate2-rgb),.9);backdrop-filter:saturate(150%) blur(16px); border-bottom:1px solid var(--sline)} #nav.scrolled::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px; background:linear-gradient(90deg,transparent,var(--bcyan),transparent);animation:navline .6s ease both} @keyframes navline{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:none}} #nav .brand{display:flex;align-items:center;gap:12px;color:var(--stxt);font-weight:800;font-size:23px;letter-spacing:-.015em} #nav .brand .glyph{font-family:var(--mono);color:var(--bcyan);font-weight:700;font-size:.82em;transition:text-shadow .3s} #nav .brand:hover .glyph{text-shadow:0 0 12px rgba(var(--bcyan-rgb),.9)} #nav .links{display:flex;align-items:center;gap:2px} #nav .links a{position:relative;font-family:var(--box);font-size:15px;font-weight:600;color:var(--smut);padding:10px 15px; transition:color .25s} #nav .links a::before{content:'';position:absolute;left:15px;right:15px;bottom:6px;height:1.5px;border-radius:2px; background:linear-gradient(90deg,var(--bcyan),var(--indigo));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)} #nav .links a:hover{color:var(--stxt)} #nav .links a:hover::before{transform:scaleX(1)} #nav .links a.on{color:var(--bcyan)} #nav .links a.on::before{transform:scaleX(1);box-shadow:0 0 8px rgba(var(--bcyan-rgb),.7)} .navcta{position:relative;overflow:hidden;margin-left:14px;font-size:14px;font-weight:700;color:var(--ink);background:var(--bcyan); padding:11px 22px;border-radius:100px;box-shadow:0 0 16px rgba(var(--bcyan-rgb),.25);transition:all .25s;cursor:pointer;border:0} .navcta::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .55s} .navcta:hover::after{left:130%} .navcta:hover{background:var(--bcyan2);box-shadow:0 0 26px rgba(var(--bcyan-rgb),.45)} #burger{display:none;background:none;border:0;cursor:pointer;padding:10px;position:relative;z-index:91} #burger span{display:block;width:22px;height:2px;background:var(--stxt);margin:5px 0;border-radius:2px;transition:transform .3s,opacity .3s} #burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} #burger.open span:nth-child(2){opacity:0} #burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} #mobmenu{position:fixed;inset:0;z-index:90;background:rgba(var(--slate3-rgb),.98);backdrop-filter:blur(18px); display:flex;flex-direction:column;justify-content:center;padding:0 34px;gap:4px;opacity:0;pointer-events:none;transition:opacity .35s} #mobmenu.open{opacity:1;pointer-events:auto} #mobmenu a{font-family:var(--box);font-size:clamp(24px,6vw,32px);font-weight:700;color:var(--stxt);padding:9px 0;letter-spacing:-.02em; opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s,color .25s} #mobmenu.open a{opacity:1;transform:none} #mobmenu a:hover{color:var(--bcyan)} #mobmenu .mm-cta{margin-top:24px;font-size:16px;background:var(--bcyan);color:var(--ink);padding:14px 28px;border-radius:100px;width:max-content;border:0;cursor:pointer;font-family:var(--head);font-weight:700} /* ================= 04 · HERO ================= */ .hero{position:relative;overflow:hidden;color:var(--stxt); background:linear-gradient(180deg,#272C39 0%,#20242E 100%);padding:172px 24px 104px;text-align:left} .hero.home{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:150px 24px 70px} .hero .wrap{position:relative;z-index:2;will-change:transform,opacity} .hero::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 55% 45% at 50% 108%,rgba(var(--bcyan-rgb),.13),transparent 65%)} .heroanim{position:absolute;inset:-40px;overflow:hidden;pointer-events:none;z-index:0; transition:transform .6s cubic-bezier(.15,.6,.3,1);will-change:transform} .heroanim .blob{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(90px)} .heroanim .b1{background:radial-gradient(circle,rgba(var(--bcyan-rgb),.20),transparent 65%);top:-170px;right:-90px;animation:drift1 16s ease-in-out infinite alternate} .heroanim .b2{background:radial-gradient(circle,rgba(var(--indigo-rgb),.16),transparent 65%);bottom:-200px;left:-140px;animation:drift2 21s ease-in-out infinite alternate} .heroanim .b3{background:radial-gradient(circle,rgba(67,209,124,.10),transparent 65%);top:30%;left:38%;width:420px;height:420px;animation:drift3 18s ease-in-out infinite alternate} @keyframes drift1{to{transform:translate(-90px,70px) scale(1.15)}} @keyframes drift2{to{transform:translate(80px,-60px) scale(1.08)}} @keyframes drift3{to{transform:translate(-60px,-40px) scale(1.12)}} .heroanim .gridpan{position:absolute;inset:0; background-image:linear-gradient(rgba(var(--bcyan-rgb),.08) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--bcyan-rgb),.08) 1px,transparent 1px); background-size:44px 44px;animation:pan 16s linear infinite; mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,black,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,black,transparent 78%)} @keyframes pan{to{background-position:44px 44px}} .hero .wm{position:absolute;right:-60px;bottom:-40px;width:min(680px,66%);opacity:.07;z-index:0; filter:invert(1) hue-rotate(180deg);transform:rotate(-3deg);pointer-events:none;will-change:transform} .hero .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:22px; display:inline-flex;align-items:center;flex-wrap:wrap;gap:9px;color:var(--stxt); padding:9px 16px;border-radius:100px;background:rgba(var(--bcyan-rgb),.1);border:1px solid rgba(var(--bcyan-rgb),.3)} .hero .eyebrow .sep{color:var(--bcyan);font-weight:700} @media(max-width:720px){ /* A pill badge only reads well on one line; at phone/small-tablet widths this phrase list wraps to 2-3 lines, which turns the capsule into a bulky block. Drop the pill chrome and let it sit as a plain wrapped kicker line instead, matching the section-label style used everywhere else on the site. Desktop above this width is untouched. */ .hero .eyebrow{background:none;border:0;padding:0;border-radius:0;gap:5px 10px; font-size:11.5px;letter-spacing:.09em;color:var(--bcyan);row-gap:4px} .hero .eyebrow .sep{opacity:.6} } .herobrand{font-family:var(--head);font-weight:800;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.02em;color:var(--stxt); display:flex;align-items:center;gap:14px;margin-bottom:18px} .herobrand .glyph{font-family:var(--mono);color:var(--bcyan);font-weight:700;font-size:.85em} .hero h1{font-weight:800;font-size:clamp(30px,4.6vw,58px);line-height:1.1;letter-spacing:-.024em;max-width:27ch} .hero h1 .hl{background:linear-gradient(100deg,var(--grad1) 15%,var(--grad2) 40%,var(--grad3) 70%,var(--grad1) 100%); background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:sheen 7.5s ease-in-out infinite;transition:filter .5s} .hero:hover h1 .hl{filter:brightness(1.18) saturate(1.1)} @keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .hero .lede{margin-top:20px;font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;color:var(--smut);max-width:52ch} .hero .lede b{color:var(--bcyan);font-weight:600} .hero .ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap} .btn{display:inline-block;font-size:15px;font-weight:600;padding:13px 26px;border-radius:100px;transition:all .25s;cursor:pointer;border:0} .btn.fill{background:var(--bcyan);color:var(--ink);box-shadow:0 0 22px rgba(var(--bcyan-rgb),.28)} .btn.fill:hover{background:var(--bcyan2);box-shadow:0 0 34px rgba(var(--bcyan-rgb),.5);transform:translateY(-1px)} .btn.line{color:var(--stxt);border:1px solid var(--sline2);background:rgba(var(--slate-rgb),.5)} .btn.line:hover{border-color:var(--bcyan);color:var(--bcyan);transform:translateY(-1px)} .hero .factline{margin-top:40px;display:flex;gap:44px;flex-wrap:wrap} .hero .fact{transition:transform .3s} .hero .fact:hover{transform:translateY(-3px)} .hero .fact:hover .n{color:var(--bcyan)} .hero .fact .n{font-family:var(--head);font-weight:800;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;color:var(--stxt); font-variant-numeric:tabular-nums;transition:color .3s} .hero .fact .k{margin-top:3px;font-size:13px;color:var(--sdim)} /* ================= 05 · SECTIONS, LABELS, CARDS ================= */ #tick{border-top:1px solid var(--sline);border-bottom:1px solid var(--line);background:var(--slate3); overflow:hidden;padding:13px 0;position:relative;z-index:2} #tick .track{display:flex;gap:44px;width:max-content;animation:mq 32s linear infinite; font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--smut);text-transform:uppercase;font-weight:500} #tick span b{color:var(--bcyan);margin-right:10px;font-weight:700} @keyframes mq{to{transform:translateX(-25%)}} #tick:hover .track{animation-play-state:paused} .sec{padding:80px 24px;position:relative} .sec.ta{background:var(--tinta);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sec.tb{background:var(--tintb);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sec.tc{background:var(--tintc);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sec.darkband{background:var(--slate3);color:var(--stxt);overflow:hidden} .sec.darkband::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px; background:linear-gradient(90deg,transparent,var(--bcyan),transparent);opacity:.8} .sec.darkband{border-bottom:1px solid var(--sline)} .sec.darkband::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 60% 45% at 50% 100%,rgba(var(--bcyan-rgb),.06),transparent 65%)} .sec.darkband .wrap{position:relative;z-index:2} /* Soft neutral shadow at dark→light seams instead of a colour-blended gradient — a plain black-to-transparent fade reads as a gentle shelf, not a muddy smear. */ .sec.darkband + .sec::before{content:'';position:absolute;top:0;left:0;right:0;height:72px; background:linear-gradient(to bottom,rgba(10,12,18,.16),transparent);pointer-events:none;z-index:1} .sec:has(+ .sec.darkband)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:72px; background:linear-gradient(to top,rgba(10,12,18,.1),transparent);pointer-events:none;z-index:1} .wrap{max-width:1120px;margin:0 auto} .narrow{max-width:820px} .label{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:700; display:flex;align-items:center;gap:14px;margin-bottom:22px} .label::after{content:'';flex:1;height:1px;background:var(--line2);opacity:.7;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .25s} .label.fx.in::after,.label:not(.fx)::after{transform:scaleX(1)} /* Chapter numeral badge, used in place of the spelled-out "Chapter N". A wayfinding device like a chapter number earns real presence on the card. Flat institutional grey read as an afterthought, so unvisited chapters use a soft tint of the theme's secondary accent (indigo) instead — still clearly "not yet opened" (quieter than the primary accent used for visited/active), but a colour, not a grey. Two more states step up from there — the primary accent as a tinted outline once you've opened a chapter at least once, and a solid primary-accent fill while it's the one currently open — so the numbers double as a lightweight progress trail (site.js section 26b adds .hwd-active while open and .hwd-visited permanently after). */ .chnum{font-family:var(--mono);font-weight:800;font-size:13px;letter-spacing:0;text-transform:none; color:var(--indigo);background:rgba(var(--indigo-rgb),.12);border:1.5px solid rgba(var(--indigo-rgb),.35);box-sizing:border-box; width:34px;height:34px;padding:0;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:1; transition:background-color .3s,border-color .3s,color .3s} .darkband .chnum{color:var(--indigo);background:rgba(var(--indigo-rgb),.18);border-color:rgba(var(--indigo-rgb),.4)} .darkband .label{color:var(--bcyan)} .hwd-visited .chnum{background:rgba(var(--cyan-rgb),.14);border-color:var(--cyan);color:var(--cyan)} .sec.darkband.hwd-visited .chnum{background:rgba(var(--bcyan-rgb),.16);border-color:var(--bcyan);color:var(--bcyan)} .hwd-active .chnum{background:var(--cyan);border-color:var(--cyan);color:#fff} .sec.darkband.hwd-active .chnum{background:var(--bcyan);border-color:var(--bcyan);color:var(--ink)} .darkband .label::after{background:var(--sline)} h1,h2{text-wrap:balance} h2{font-weight:800;font-size:clamp(27px,3.8vw,44px);line-height:1.12;letter-spacing:-.022em;max-width:23ch} .cs-topbar{display:flex;align-items:center;gap:24px;margin-bottom:22px} .cs-topbar .label{flex:1;margin-bottom:0} .cs-topnav{display:flex;gap:10px;flex:none} .cs-navbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--mut); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s,background .25s,color .25s,border-color .25s} .cs-navbtn svg{width:15px;height:15px} .cs-navbtn:hover{background:var(--cyan);color:#fff;border-color:var(--cyan)} .cs-navbtn.prev:hover{transform:translateX(-3px)} .cs-navbtn.next:hover{transform:translateX(3px)} @media(max-width:480px){ .cs-topbar .label{font-size:11.5px;letter-spacing:.14em} } .tagline{margin-top:12px;font-family:var(--mono);font-size:14.5px;font-weight:700;color:var(--cyan);letter-spacing:.01em} .darkband .tagline{color:var(--bcyan)} h2 .c{color:var(--cyan)}.darkband h2 .c{color:var(--bcyan)} .lede{margin-top:16px;font-size:16.5px;line-height:1.62;color:var(--mut);max-width:58ch} .lede b{color:var(--cyan);font-weight:600} .darkband .lede{color:var(--smut)} .darkband .lede b{color:var(--bcyan)} .prose{margin-top:16px;font-size:15.5px;line-height:1.7;color:var(--mut);max-width:64ch} .prose b{color:var(--cyan);font-weight:600} .prose+.prose{margin-top:12px} .plain{margin-top:22px;padding:15px 20px;border-left:3px solid var(--cyan);background:rgba(var(--cyan-rgb),.05); font-size:14.5px;line-height:1.62;color:var(--mut);max-width:64ch;border-radius:0 10px 10px 0} .plain b{color:var(--cyan)} .darkband .plain{border-left-color:var(--bcyan);background:rgba(var(--bcyan-rgb),.06);color:var(--smut)} .darkband .plain b{color:var(--bcyan)} .pagelink{display:inline-block;margin-top:28px;color:var(--cyan);font-size:15.5px;font-weight:600;padding-bottom:3px; background:linear-gradient(var(--cyan),var(--cyan)) no-repeat left bottom/0 1.5px;transition:background-size .35s cubic-bezier(.2,.7,.2,1)} .pagelink:hover{background-size:100% 1.5px} .pagelink::after{content:' \2192';transition:margin .2s} .pagelink:hover::after{margin-left:4px} .darkband .pagelink{color:var(--bcyan)} .fx{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.6,.2,1) var(--d,0s),transform .85s cubic-bezier(.2,.6,.2,1) var(--d,0s)} .fx.in{opacity:1;transform:none} .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px} .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;text-align:left; transition:border-color .3s,box-shadow .3s,transform .3s} .card.railcard{display:flex;padding:0;overflow:hidden} .card.railcard:hover{transform:translateY(-2px) scale(1.015)} .railband{width:68px;flex:none;background:rgba(var(--cyan-rgb),.06);border-right:2.5px solid var(--cyan); display:flex;align-items:flex-start;justify-content:center;padding-top:22px} .railband svg{width:28px;height:28px;color:var(--cyan)} .railbody{padding:19px 20px;display:flex;flex-direction:column;flex:1;min-width:0} .railbody h3{margin-top:6px;font-size:15.5px} .railbody p{margin-top:6px;font-size:12.5px;line-height:1.5} .railbody .k{font-size:10px} .railbody .ev{font-size:10.5px;padding-top:10px} .railcard.iv-indigo .railband{background:rgba(var(--indigo-rgb),.06);border-color:var(--indigo)} .railcard.iv-indigo .railband svg{color:var(--indigo)} .railcard.iv-indigo h3::after{background:var(--indigo)} .railcard.iv-indigo .k{color:var(--indigo)} .railcard.iv-indigo .ev{color:var(--indigo)} .railcard.iv-amber .railband{background:rgba(var(--amber-rgb),.08);border-color:var(--amber)} .railcard.iv-amber .railband svg{color:var(--amber)} .railcard.iv-amber h3::after{background:var(--amber)} .railcard.iv-amber .k{color:var(--amber)} .railcard.iv-amber .ev{color:var(--amber)} .railcard.iv-green .railband{background:rgba(var(--green-rgb),.06);border-color:var(--green)} .railcard.iv-green .railband svg{color:var(--green)} .railcard.iv-green h3::after{background:var(--green)} .railcard.iv-green .k{color:var(--green)} .railcard.iv-green .ev{color:var(--green)} @media(max-width:640px){ .railband{width:56px;padding-top:18px} .railband svg{width:24px;height:24px} } .card:hover{border-color:rgba(var(--cyan-rgb),.4);box-shadow:0 12px 32px rgba(28,30,36,.08);transform:translateY(-2px) scale(1.02)} .card .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:600} .card h3,.card h4{margin-top:10px;font-size:17.5px;font-weight:700;line-height:1.3} .card h3::after,.card h4::after,.person h3::after,.shapecard h3::after,.spanel h3::after{ content:'';display:block;width:26px;height:2.5px;border-radius:2px;background:var(--cyan);opacity:.8; margin-top:9px;transition:width .35s cubic-bezier(.2,.7,.2,1)} .card:hover h3::after,.card:hover h4::after,.person:hover h3::after,.shapecard:hover h3::after, .spanel h3::after{width:44px} .shapecard.b h3::after{background:var(--indigo)} .gnode h4::after{content:'';display:block;width:22px;height:2.5px;border-radius:2px;background:var(--cyan); opacity:.7;margin:8px auto 0;transition:width .35s} .gnode:hover h4::after{width:36px} .gnode.checks h4::after{background:var(--indigo)} .gnode.human h4::after{background:var(--amber)} .gnode.proof h4::after{background:var(--green)} .card p{margin-top:8px;font-size:14.5px;line-height:1.62;color:var(--mut)} .card p b{color:var(--cyan)} .card .ev{margin-top:13px;font-family:var(--mono);font-size:11.5px;color:var(--cyan);line-height:1.8} .icard h4{font-size:15.5px} .icard p{font-size:13px;margin-top:6px} .icard .ic{width:46px;height:46px;border-radius:12px;background:rgba(var(--cyan-rgb),.1); border:1px solid rgba(var(--cyan-rgb),.22);display:flex;align-items:center;justify-content:center; color:var(--cyan);transition:transform .3s,box-shadow .3s} .icard .ic svg{width:22px;height:22px} .icard:hover .ic{transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--cyan-rgb),.18)} .icard.iv-indigo .ic{background:rgba(var(--indigo-rgb),.1);color:var(--indigo);border-color:rgba(var(--indigo-rgb),.24)} .icard.iv-indigo:hover .ic{box-shadow:0 6px 18px rgba(var(--indigo-rgb),.2)} .icard.iv-amber .ic{background:rgba(var(--amber-rgb),.12);color:var(--amber);border-color:rgba(var(--amber-rgb),.24)} .icard.iv-amber:hover .ic{box-shadow:0 6px 18px rgba(var(--amber-rgb),.22)} .icard.iv-green .ic{background:rgba(var(--green-rgb),.1);color:var(--green);border-color:rgba(var(--green-rgb),.24)} .icard.iv-green:hover .ic{box-shadow:0 6px 18px rgba(var(--green-rgb),.2)} /* ================= 06 · INFOGRAPHICS ================= */ .glance{margin-top:44px;display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;align-items:stretch;gap:0} .gnode{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 18px;text-align:center;transition:border-color .3s,transform .3s} .gnode:hover{border-color:rgba(var(--cyan-rgb),.45);transform:translateY(-2px) scale(1.025)} .gnode .gi{width:48px;height:48px;margin:0 auto;border-radius:13px; display:flex;align-items:center;justify-content:center;background:rgba(var(--cyan-rgb),.1);color:var(--cyan); transition:transform .3s,box-shadow .3s,background .3s} .gnode .gi svg{width:23px;height:23px} .gnode:hover .gi{box-shadow:0 6px 18px rgba(var(--cyan-rgb),.18)} .gnode.checks .gi{background:rgba(var(--indigo-rgb),.1);color:var(--indigo)} .gnode.human .gi{background:rgba(var(--amber-rgb),.12);color:var(--amber)} .gnode.proof .gi{background:rgba(var(--green-rgb),.1);color:var(--green)} .gnode.checks:hover .gi{box-shadow:0 6px 18px rgba(var(--indigo-rgb),.2)} .gnode.human:hover .gi{box-shadow:0 6px 18px rgba(var(--amber-rgb),.22)} .gnode.proof:hover .gi{box-shadow:0 6px 18px rgba(var(--green-rgb),.2)} .gnode{position:relative} .gnode:hover .gi{transform:translateY(-2px) scale(1.06)} .gnode h4{margin-top:12px;font-size:15.5px;font-weight:700} .gnode p{margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--mut)} .garrow{display:flex;align-items:center;justify-content:center;color:var(--dim);position:relative} .garrow::before{content:'';width:100%;height:1.5px;background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 11px);position:absolute} .garrow::after{content:'\25B8';position:relative;color:var(--cyan);background:inherit;font-size:13px} .darkband .gnode{background:var(--slate);border-color:var(--sline)} .darkband .gnode h4{color:var(--stxt)} .darkband .gnode p{color:var(--smut)} .darkband .garrow::before{background:repeating-linear-gradient(90deg,var(--sline2) 0 6px,transparent 6px 11px)} .darkband .garrow::after{color:var(--bcyan)} .glance-cap{margin-top:22px;font-size:14.5px;color:var(--mut);max-width:60ch} .glance-cap b{color:var(--cyan)} .darkband .glance-cap{color:var(--smut)} .darkband .glance-cap b{color:var(--bcyan)} .wm.wmt{inset:110px -70px auto auto;opacity:.05} .sec:has(> svg.wm){overflow:hidden} .wm{position:absolute;inset:auto -40px -60px auto;width:min(680px,72%);opacity:.06;pointer-events:none;z-index:0;transform:rotate(-3deg);will-change:transform} .darkband .wm{opacity:.07;filter:invert(1) hue-rotate(180deg)} /* ================= 07 · PANELS, SCREENS, CONSOLE ================= */ .panel{background:var(--slate);border:1px solid var(--sline);border-radius:12px;overflow:hidden;color:var(--stxt); box-shadow:0 1px 2px rgba(20,22,30,.2),0 14px 34px rgba(20,22,30,.16);text-align:left} .panel .ph{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--sline); background:var(--slate2);font-family:var(--mono);font-size:11px;color:var(--sdim)} .panel .ph .dots{display:flex;gap:6px} .panel .ph .dots i{width:10px;height:10px;border-radius:50%} .panel .ph .dots i:nth-child(1){background:#FF5F57}.panel .ph .dots i:nth-child(2){background:#FEBC2E}.panel .ph .dots i:nth-child(3){background:#28C840} .panel .pb{padding:18px 20px;font-family:var(--mono);font-size:12.5px;line-height:2;color:var(--smut)} .ok{color:var(--bgreen)}.warn{color:var(--bamber)}.err{color:var(--bred)}.cy{color:var(--bcyan)}.dimt{color:var(--sdim)} .kv{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid rgba(57,65,83,.6)} .kv:last-child{border-bottom:0} .kv .k{color:var(--sdim)} .kv .v{color:var(--stxt);text-align:right} .shot-cap{margin-top:13px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .darkband .shot-cap{color:var(--sdim)} .screen{background:#070D16 !important;border-color:rgba(0,216,255,.35) !important; box-shadow:0 0 40px rgba(0,216,255,.1),0 26px 60px rgba(20,22,30,.28) !important} .screen .ph{background:#0A1220;border-bottom-color:#152332} .logbody{height:260px;padding:16px 20px;font-family:var(--mono);font-size:12px;line-height:2.05;overflow:hidden} .cline{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:640px){ /* Desktop truncates each line to one row with an ellipsis, which works because the console is wide. At phone widths the same fixed nowrap chops real content ("read 47 do…", "14 item…") — let lines wrap instead, and give the console enough height to hold the wrapped result without clipping. */ .logbody{height:auto;min-height:260px;max-height:540px;line-height:1.75;padding:14px 16px} .cline{white-space:normal;overflow:visible;text-overflow:clip;padding:3px 0} } /* ---- accelerators toolkit panel (How We Deliver, Chapter One) ---- */ .accelpanel{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden; box-shadow:0 14px 34px rgba(28,30,36,.06)} .accelhead{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--bg2)} .accelhead .dots{display:flex;gap:6px} .accelhead .dots i{width:9px;height:9px;border-radius:50%} .accelhead .dots i:nth-child(1){background:#E8877C}.accelhead .dots i:nth-child(2){background:#E8C27C}.accelhead .dots i:nth-child(3){background:#8FCB9B} .accellabel{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);font-weight:600} .accelbody{padding:30px 32px 34px} .acc-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim); padding:20px 32px 0} .accelbody h3{font-size:21px;font-weight:800;letter-spacing:-.015em} .accelbody>p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--mut);max-width:64ch} .accelbody>p b{color:var(--cyan)} .accelgrid{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .accelcard{border:1px solid var(--line);border-radius:12px;padding:18px 16px;transition:border-color .3s,box-shadow .3s,transform .3s} .accelcard:hover{border-color:rgba(var(--cyan-rgb),.4);box-shadow:0 10px 24px rgba(28,30,36,.08);transform:translateY(-2px) scale(1.02)} .accelcard .ic{width:36px;height:36px;border-radius:10px;background:rgba(var(--cyan-rgb),.1);color:var(--cyan); display:flex;align-items:center;justify-content:center} .accelcard .ic svg{width:18px;height:18px} .accelcard h4{margin-top:12px;font-size:14.5px;font-weight:700} .accelcard p{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--mut)} .accelcard.iv-green .ic{background:rgba(var(--green-rgb),.1);color:var(--green)} .accelcard.iv-indigo .ic{background:rgba(var(--indigo-rgb),.1);color:var(--indigo)} .accelcard.iv-amber .ic{background:rgba(var(--amber-rgb),.12);color:var(--amber)} @media(max-width:860px){ .accelgrid{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .accelbody{padding:24px 20px 28px} .acc-kicker{padding:16px 20px 0} .accelgrid{grid-template-columns:1fr} } /* ---- speed-vs-governance quadrant chart (How We Deliver hero) ---- */ .quadwrap{margin-top:40px;background:var(--slate2);border:1px solid var(--sline);border-radius:16px;padding:22px 26px 14px;max-width:660px} .quadchart{width:100%;height:auto;display:block} .quadchart .qaxis{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;fill:var(--sdim);font-weight:600} .quadchart .qlabel{font-family:var(--head);font-size:13px;fill:var(--stxt);font-weight:700} .quadchart .qsub{font-family:var(--mono);font-size:10px;fill:var(--smut);paint-order:stroke;stroke:var(--slate2);stroke-width:5px;stroke-linejoin:round} .quadchart .qmf{fill:var(--bcyan);font-size:16px} @media(max-width:560px){ .quadwrap{padding:18px 16px 10px} } /* ---- speed-vs-governance quadrant chart, interactive (homepage) ---- */ .quadwrap2{margin-top:44px;background:var(--card);border:1px solid var(--line);border-radius:18px; padding:30px 34px 32px;box-shadow:0 14px 34px rgba(28,30,36,.06)} .qtop2{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:20px} .qsplit{display:flex;align-items:center;gap:36px} .quadchart2{width:100%;height:auto;display:block;flex:1 1 52%;max-width:440px} .qaxisline{stroke:var(--line2);stroke-width:1.5} .qzone{opacity:.05} .qzone-safe{fill:var(--cyan)} .qzone-risk{fill:var(--red)} .qaxis2{font-family:var(--mono);font-size:12px;letter-spacing:.08em;fill:var(--dim);font-weight:600} .qdot{fill:var(--dim);transition:r .25s ease,fill .25s ease} .qlabel2{font-family:var(--head);font-size:15px;fill:var(--txt);font-weight:700;transition:fill .25s} .qsub2{font-family:var(--mono);font-size:11.5px;fill:var(--mut)} .qcluster{cursor:pointer} .qhitzone{pointer-events:all} .qcluster:hover .qdot{fill:var(--cyan);r:7} .qcluster:hover .qlabel2{fill:var(--cyan)} .qtrail{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-dasharray:520;stroke-dashoffset:520; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)} .quadwrap2.play .qtrail{stroke-dashoffset:0} .qtrailstart{fill:var(--cyan)} .qmfring{fill:none;stroke:var(--cyan);stroke-width:2;opacity:0;transition:opacity .4s .3s,stroke-width .25s,r .25s; animation:qpulse 2.6s ease-in-out .3s infinite} .qmfdot{fill:var(--cyan);opacity:0;transform-origin:500px 68px;transform:scale(.3); transition:opacity .4s .3s,transform .5s cubic-bezier(.34,1.56,.64,1) .3s} .quadwrap2.play .qmfring,.quadwrap2.play .qmfdot{opacity:1} .quadwrap2.play .qmfdot{transform:scale(1)} .qmf2{fill:var(--cyan);font-size:17px;opacity:0;transition:opacity .4s .6s} .quadwrap2.play .qmf2{opacity:1} .qmfgroup{cursor:pointer} .qmfgroup:hover .qmfring{stroke-width:3;r:16} @keyframes qpulse{0%,100%{opacity:.5}50%{opacity:1}} .qbenefits{flex:1 1 44%;display:flex;flex-direction:column;gap:12px} .qchip{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:var(--card); border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--txt);opacity:0;transform:translateX(14px); box-shadow:0 8px 20px rgba(28,30,36,.04);transition:opacity .45s,transform .45s,border-color .25s,background .25s,box-shadow .25s} .qbenefits.show .qchip{opacity:1;transform:none} .qbenefits.show .qchip:nth-child(1){transition-delay:0s} .qbenefits.show .qchip:nth-child(2){transition-delay:.09s} .qbenefits.show .qchip:nth-child(3){transition-delay:.18s} .qbenefits.show .qchip:nth-child(4){transition-delay:.27s} .qbenefits.hl .qchip{border-color:rgba(var(--cyan-rgb),.35);box-shadow:0 10px 24px rgba(28,30,36,.07)} .qchip:hover{border-color:rgba(var(--cyan-rgb),.3);transform:translateY(-1px);box-shadow:0 10px 24px rgba(28,30,36,.07)} .qchip .qcico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none; background:rgba(var(--cyan-rgb),.1);color:var(--cyan);transition:transform .25s} .qchip:hover .qcico{transform:scale(1.08)} .qchip svg{width:18px;height:18px;flex:none} .qchip:nth-child(2) .qcico{background:rgba(var(--indigo-rgb),.12);color:var(--indigo)} .qchip:nth-child(3) .qcico{background:rgba(var(--amber-rgb),.13);color:var(--amber)} .qchip:nth-child(4) .qcico{background:rgba(var(--green-rgb),.12);color:var(--green)} @media(max-width:820px){ .qsplit{flex-direction:column;align-items:stretch;gap:24px} .quadchart2{max-width:460px;margin:0 auto;flex:none} .qbenefits{flex-direction:column} } @media(max-width:560px){ .quadwrap2{padding:22px 18px 24px} } .cline.show{opacity:1;transform:none} .pstats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #152332} .pstats>div{padding:12px 18px;border-right:1px solid #152332} .pstats>div:last-child{border-right:0} .pstats .sk{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--sdim);text-transform:uppercase} .pstats .sv{font-family:var(--head);font-size:19px;font-weight:700;margin-top:2px;color:var(--stxt);font-variant-numeric:tabular-nums} .pstats .sv.c{color:var(--bcyan)} .shotrow .btn2{font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:6px 12px;border-radius:6px;border:1px solid rgba(var(--bcyan-rgb),.4);color:var(--bcyan);white-space:nowrap;flex:none} .shotrow .btn2.fill{background:var(--bcyan);color:var(--ink);border-color:var(--bcyan);font-weight:700} .meterwrap{margin-top:8px;height:6px;border-radius:4px;background:#101A24;overflow:hidden} .meter{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--bgreen),var(--bcyan));width:0;transition:width 1.4s cubic-bezier(.2,.6,.2,1)} .tree{font-family:var(--mono);font-size:12.5px;line-height:2.05;color:var(--smut);padding:20px 24px} .tree .b{color:var(--sdim)} .tree .lay{color:var(--stxt);font-weight:700} .tree .lay.cy{color:var(--bcyan)} .tree .lay.am{color:var(--bamber)} .tree .note{color:var(--sdim)} .bndline{margin:6px 0;padding:7px 24px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bamber); border-top:1px dashed rgba(var(--bamber-rgb),.4);border-bottom:1px dashed rgba(var(--bamber-rgb),.4);background:rgba(var(--bamber-rgb),.05)} /* ---- chapter eleven: inside/outside the boundary comparison ---- */ .bnd-cols{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--sline);margin-top:30px} .bnd-col{padding:20px 24px 22px} .bnd-col.allow{border-right:1px solid var(--sline)} .bnd-colhead{display:flex;align-items:center;gap:9px;font-family:var(--box);font-weight:600;font-size:14.5px;margin-bottom:14px} .bnd-colhead svg{width:16px;height:16px;flex:none} .bnd-col.allow .bnd-colhead{color:var(--bgreen)} .bnd-col.block .bnd-colhead{color:var(--bred)} .bnd-row{padding:11px 0;border-top:1px solid var(--sline)} .bnd-col .bnd-row:first-of-type{border-top:0;padding-top:0} .bnd-t{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--stxt)} .bnd-d{font-family:var(--mono);font-size:11.5px;color:var(--smut);margin-top:5px;line-height:1.55} @media(max-width:640px){ .bnd-cols{grid-template-columns:1fr} .bnd-col.allow{border-right:0;border-bottom:1px solid var(--sline)} } /* ================= 08 · JOURNEY, TABLES, TIMELINE, CYCLE ================= */ /* ---- chapter six: with/without, compact single panel ---- */ .cmp-panel{margin-top:32px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden; box-shadow:0 10px 26px rgba(28,30,36,.05)} .cmp-head{display:grid;grid-template-columns:30px 118px 1fr 1fr;gap:16px;align-items:center;padding:14px 22px;background:var(--bg2);border-bottom:1px solid var(--line)} .cmp-head .cmp-lg{display:flex;align-items:center;gap:7px;font-family:var(--box);font-weight:600;font-size:12px} .cmp-head .cmp-lg.no{color:var(--mut);grid-column:3} .cmp-head .cmp-lg.yes{color:var(--cyan);grid-column:4;padding-left:16px} .cmp-line{display:grid;grid-template-columns:30px 118px 1fr 1fr;align-items:center;gap:16px; padding:12px 22px;border-bottom:1px solid var(--line);transition:background .2s} .cmp-line:last-child{border-bottom:0} .cmp-line:hover{background:rgba(var(--cyan-rgb),.03)} .cmp-ord{font-family:var(--mono);font-size:11px;color:var(--line2);font-weight:700} .cmp-tag2{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600} .cmp-no,.cmp-yes{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.35} .cmp-no{color:var(--mut)} .cmp-yes{color:var(--txt);font-weight:600;padding-left:16px;border-left:2px solid rgba(var(--cyan-rgb),.3)} .cmp-x,.cmp-ck{width:16px;height:16px;border-radius:50%;flex:none;position:relative} .cmp-x{background:rgba(var(--red-rgb),.1)} .cmp-x::before,.cmp-x::after{content:'';position:absolute;top:50%;left:50%;width:7px;height:1.6px;background:var(--red);border-radius:1px} .cmp-x::before{transform:translate(-50%,-50%) rotate(45deg)} .cmp-x::after{transform:translate(-50%,-50%) rotate(-45deg)} .cmp-ck{background:var(--cyan)} .cmp-ck::before{content:'';position:absolute;top:47%;left:50%;width:7px;height:4px;border:1.6px solid #fff;border-top:0;border-right:0; transform:translate(-50%,-65%) rotate(-45deg)} @media(max-width:760px){ .cmp-line{grid-template-columns:1fr;gap:8px;padding:18px 20px} .cmp-ord{display:none} .cmp-tag2{margin-bottom:2px;font-size:13px} .cmp-no,.cmp-yes{font-size:17px;line-height:1.5} .cmp-yes{padding-left:0;border-left:0;padding-top:8px;margin-top:2px;border-top:1px dashed var(--line)} .cmp-head{grid-template-columns:1fr;gap:9px;padding:15px 20px} .cmp-head .cmp-lg{font-size:14px} .cmp-head .cmp-lg.no{grid-column:auto} .cmp-head .cmp-lg.yes{grid-column:auto;padding-left:0} } /* ---- comparison table (buyer questions) ---- */ .tblwrap{overflow-x:auto;margin-top:40px} .tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden} .tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim); text-align:left;padding:13px 16px;border-bottom:1px solid var(--line2);font-weight:600;background:var(--bg2)} .tbl td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--mut);vertical-align:top;line-height:1.5} .tbl tr:last-child td{border-bottom:0} .tbl td:first-child{color:var(--txt);font-weight:600;white-space:nowrap} .tbl .y{color:var(--green);font-weight:500}.tbl .n{color:var(--red)}.tbl .p{color:var(--amber)} .tbl .hl{background:rgba(var(--cyan-rgb),.05)} .tbl .hl td{color:var(--txt);font-weight:600} /* ---- vertical timeline (why we built it) ---- */ .tl{max-width:720px;margin:44px 0 0;position:relative;padding-left:34px} .tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1.5px; background:linear-gradient(to bottom,rgba(var(--cyan-rgb),.5),rgba(var(--amber-rgb),.5))} .tl .step{position:relative;padding:0 0 28px} .tl .step:last-child{padding-bottom:0} .tl .step::before{content:'';position:absolute;left:-31px;top:5px;width:11px;height:11px;border-radius:50%; background:var(--bg);border:2px solid var(--cyan);box-shadow:0 0 8px rgba(var(--cyan-rgb),.35); transition:background .45s,box-shadow .45s,transform .45s} .tl .step.lit::before{background:var(--cyan);transform:scale(1.25); box-shadow:0 0 4px rgba(var(--cyan-rgb),.9),0 0 18px rgba(var(--cyan-rgb),.75)} .tl .yr{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cyan);font-weight:600;text-transform:uppercase} .tl h4{margin-top:5px;font-size:17px;font-weight:700} .tl p{margin-top:5px;font-size:13.5px;line-height:1.62;color:var(--mut);max-width:58ch} .tl p b{color:var(--cyan)} /* ---- quality that compounds: big number + sparkline ---- */ .numfeat{text-align:center} .numfeat .big{font-family:var(--mono);font-weight:700;font-size:clamp(70px,12vw,140px);letter-spacing:-.04em;line-height:1; color:var(--green);font-variant-numeric:tabular-nums} .numfeat .big .pct{font-size:.38em;color:var(--dim)} .spark{width:min(540px,84vw);height:82px;margin:24px auto 0;display:block} .spark .axis{stroke:var(--line2);stroke-width:1} .spark .line{fill:none;stroke:url(#sg);stroke-width:3;stroke-linecap:round} .spark .dot{fill:var(--cyan);opacity:0;transition:opacity .4s} .cyclbl{display:flex;justify-content:space-between;width:min(540px,84vw);margin:8px auto 0; font-family:var(--mono);font-size:11px;color:var(--dim)} /* ---- engagement chips (you / we / keep) ---- */ .chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600; padding:5px 10px;border-radius:100px;border:1px solid;transition:transform .25s} .chip:hover{transform:translateY(-1px)} .chip.you{color:var(--amber);border-color:rgba(var(--amber-rgb),.4);background:rgba(var(--amber-rgb),.06)} .chip.we{color:var(--cyan);border-color:rgba(var(--cyan-rgb),.4);background:rgba(var(--cyan-rgb),.05)} .chip.keep{color:var(--green);border-color:rgba(var(--green-rgb),.4);background:rgba(var(--green-rgb),.06)} /* ---- the cycle, elaborated: pipeline flow + under-the-hood console ---- */ .flow{margin-top:46px;display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr 44px 1fr;align-items:stretch} .fstage{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px;cursor:pointer;position:relative; transition:border-color .3s,transform .3s,box-shadow .3s,opacity .5s;opacity:.78;display:flex;flex-direction:column} .fstage:hover{transform:translateY(-2px) scale(1.02)} .fstage.lit{opacity:1} .fstage.act{border-color:rgba(var(--cyan-rgb),.55);box-shadow:0 12px 30px rgba(28,30,36,.09),0 0 0 3px rgba(var(--cyan-rgb),.08)} .fstage .fnum{font-family:var(--mono);font-size:11px;color:var(--dim);font-weight:600;position:absolute;top:16px;right:18px;transition:color .3s} .fstage.act .fnum{color:var(--cyan)} .fstage .fname{font-family:var(--box);font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px; min-height:46px;padding-right:26px;text-wrap:balance} .fstage .fname::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--line2);transition:background .35s,box-shadow .35s} .fstage.lit .fname::before{background:var(--cyan);box-shadow:0 0 9px rgba(var(--cyan-rgb),.7)} .fstage p{margin-top:7px;font-size:13.5px;line-height:1.55;color:var(--mut)} .fstage p b{color:var(--cyan)} .fstage .ftags{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px} .fstage .ftags span{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--dim); border:1px solid var(--line);border-radius:100px;padding:4px 9px;transition:color .3s,border-color .3s} .fstage.act .ftags span{color:var(--cyan);border-color:rgba(var(--cyan-rgb),.4)} .fcon{position:relative;display:flex;align-items:center;justify-content:center;--frail:44px} .fcon::before{content:'';position:absolute;left:4px;right:4px;top:var(--frail);height:2px;background:var(--line);border-radius:2px} .fcon i{position:absolute;left:4px;top:var(--frail);height:2px;width:0;border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--bcyan));box-shadow:0 0 8px rgba(var(--cyan-rgb),.5); transition:width .6s cubic-bezier(.2,.7,.2,1)} .fcon.fill i{width:calc(100% - 8px)} .fcon .fgate{position:absolute;top:calc(var(--frail) - 13px);left:50%;transform:translateX(-50%);z-index:2;width:26px;height:26px;border-radius:50%;background:var(--bg); border:2px solid var(--line2);display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:12px;color:var(--dim);transition:border-color .4s,color .4s,box-shadow .4s} .fcon.fill .fgate{border-color:var(--amber);color:var(--amber);box-shadow:0 0 10px rgba(var(--amber-rgb),.45)} .flowcap{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim); display:flex;gap:26px;flex-wrap:wrap;align-items:center} .flowcap .fitem{display:inline-flex;align-items:center;gap:8px;line-height:1} .flowcap .fdot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block} .flowcap .fdot.amber{background:var(--amber)} .flowcap .fdot.cyan{background:var(--cyan)} .hood{margin-top:26px;max-width:860px} .hood .pb{min-height:132px} .hoodline{opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s;display:flex;gap:14px} .hoodline.show{opacity:1;transform:none} .hoodline .hk{color:var(--bcyan);min-width:7ch;font-weight:600} .hoodsrc{display:none} @media(max-width:960px){ .flow{grid-template-columns:1fr} .fcon{height:40px} .fcon::before{left:50%;right:auto;top:6px;bottom:6px;height:auto;width:2px;transform:translateX(-50%)} .fcon i{left:50%;top:6px;transform:translateX(-50%);width:2px !important;height:0} .fcon .fgate{top:50%;left:50%;transform:translate(-50%,-50%)} .fcon.fill i{height:calc(100% - 12px)} .tl{padding-left:30px} } /* ---- interactive case showcase (Our Work) ---- */ .showcase{margin-top:44px;display:grid;grid-template-columns:280px 1fr;gap:0;border:1px solid var(--line);border-radius:20px; overflow:hidden;background:var(--card);box-shadow:0 20px 50px rgba(28,30,36,.08)} .showrailbar{display:contents} .srnav{display:none} .showrail{background:var(--tinta);border-right:1px solid var(--line);position:relative;overflow:hidden;padding:10px; display:flex;flex-direction:column;gap:4px} .stab{width:100%;display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:12px;cursor:pointer; text-align:left;transition:background .25s,box-shadow .25s,transform .25s;position:relative;z-index:2;border:0;background:transparent; color:var(--mut);border-left:3px solid transparent} .stab:hover{background:rgba(var(--cyan-rgb),.05);transform:scale(1.012)} .stab.act{background:var(--card);border-left-color:var(--cyan);box-shadow:0 4px 14px rgba(28,30,36,.06)} .stab .sticon{flex:none;width:34px;height:34px;border-radius:9px;background:var(--card);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--dim);transition:color .3s,background .3s,border-color .3s} .stab.act .sticon{color:var(--cyan);background:rgba(var(--cyan-rgb),.1);border-color:rgba(var(--cyan-rgb),.35)} .stab .sticon svg{width:18px;height:18px;display:block} .stab .stmeta{min-width:0} .stab .stsector{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .3s;line-height:1.35} .stab.act .stsector{color:var(--cyan)} .stab .sttitle{display:block;font-family:var(--box);font-size:13.5px;font-weight:600;color:var(--mut);margin-top:4px;line-height:1.35;transition:color .3s} .stab.act .sttitle{color:var(--txt)} .showpanel{position:relative;min-height:380px;display:flex;flex-direction:column} .spanel{display:none;animation:panelin .5s cubic-bezier(.2,.7,.2,1) both} .spanel.act{display:flex;flex-direction:column;flex:1;min-width:0} @keyframes panelin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .spbody{padding:40px 40px;display:flex;flex-direction:column;flex:1;min-width:0} .spbadge{width:52px;height:52px;border-radius:14px;background:rgba(var(--cyan-rgb),.1);color:var(--cyan); display:flex;align-items:center;justify-content:center;margin-bottom:18px} .spbadge svg{width:26px;height:26px} .spanel .spsector{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:700} .spanel h3{margin-top:10px;font-size:26px;font-weight:700;max-width:26ch;line-height:1.25;color:var(--cyan)} .spanel .spmetric{margin-top:20px;display:inline-flex;flex-direction:column;gap:2px;padding:14px 20px;border-radius:12px; background:rgba(var(--cyan-rgb),.06);border:1px solid rgba(var(--cyan-rgb),.2);align-self:flex-start} .spanel .spmetric .sv{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--cyan);line-height:1.5} .spanel .spgrid{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .spanel .spgrid .sph{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);font-weight:600} .spanel .spgrid .sph .sphdot{width:6px;height:6px;border-radius:50%;background:var(--cyan)} .spanel .spgrid p{margin-top:11px;font-size:14.5px;line-height:1.72;color:var(--mut)} .spanel .spgrid p b{color:var(--cyan)} .spnav{margin:auto 0 0;display:flex;align-items:center;justify-content:center;gap:14px;padding-top:22px; border-top:1px solid var(--line)} .spnav-btn{display:flex;align-items:center;justify-content:center;cursor:pointer} .spnav-arrow{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);color:var(--mut); display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s,color .25s,border-color .25s} .spnav-btn:hover .spnav-arrow{background:var(--cyan);color:#fff;border-color:var(--cyan)} .spnav-btn.prev:hover .spnav-arrow{transform:translateX(-4px)} .spnav-btn.next:hover .spnav-arrow{transform:translateX(4px)} .spnav-arrow svg{width:16px;height:16px} .spanel.iv-indigo .spbadge{background:rgba(var(--indigo-rgb),.1);color:var(--indigo)} .spanel.iv-indigo .spsector,.spanel.iv-indigo h3,.spanel.iv-indigo .spmetric .sv,.spanel.iv-indigo .spgrid p b{color:var(--indigo)} .spanel.iv-indigo .spmetric{background:rgba(var(--indigo-rgb),.06);border-color:rgba(var(--indigo-rgb),.2)} .spanel.iv-indigo .spgrid .sphdot{background:var(--indigo)} .spanel.iv-amber .spbadge{background:rgba(var(--amber-rgb),.12);color:var(--amber)} .spanel.iv-amber .spsector,.spanel.iv-amber h3,.spanel.iv-amber .spmetric .sv,.spanel.iv-amber .spgrid p b{color:var(--amber)} .spanel.iv-amber .spmetric{background:rgba(var(--amber-rgb),.08);border-color:rgba(var(--amber-rgb),.22)} .spanel.iv-amber .spgrid .sphdot{background:var(--amber)} .spanel.iv-green .spbadge{background:rgba(var(--green-rgb),.1);color:var(--green)} .spanel.iv-green .spsector,.spanel.iv-green h3,.spanel.iv-green .spmetric .sv,.spanel.iv-green .spgrid p b{color:var(--green)} .spanel.iv-green .spmetric{background:rgba(var(--green-rgb),.06);border-color:rgba(var(--green-rgb),.2)} .spanel.iv-green .spgrid .sphdot{background:var(--green)} .spanel.iv-teal .spbadge{background:rgba(var(--teal-rgb),.1);color:var(--teal)} .spanel.iv-teal .spsector,.spanel.iv-teal h3,.spanel.iv-teal .spmetric .sv,.spanel.iv-teal .spgrid p b{color:var(--teal)} .spanel.iv-teal .spmetric{background:rgba(var(--teal-rgb),.06);border-color:rgba(var(--teal-rgb),.2)} .spanel.iv-teal .spgrid .sphdot{background:var(--teal)} .spanel.iv-plum .spbadge{background:rgba(var(--plum-rgb),.1);color:var(--plum)} .spanel.iv-plum .spsector,.spanel.iv-plum h3,.spanel.iv-plum .spmetric .sv,.spanel.iv-plum .spgrid p b{color:var(--plum)} .spanel.iv-plum .spmetric{background:rgba(var(--plum-rgb),.06);border-color:rgba(var(--plum-rgb),.2)} .spanel.iv-plum .spgrid .sphdot{background:var(--plum)} .spanel.iv-rose .spbadge{background:rgba(var(--rose-rgb),.1);color:var(--rose)} .spanel.iv-rose .spsector,.spanel.iv-rose h3,.spanel.iv-rose .spmetric .sv,.spanel.iv-rose .spgrid p b{color:var(--rose)} .spanel.iv-rose .spmetric{background:rgba(var(--rose-rgb),.06);border-color:rgba(var(--rose-rgb),.2)} .spanel.iv-rose .spgrid .sphdot{background:var(--rose)} /* tab buttons synced to the same per-case colour as their panel — this is what makes the active tab visually "merge" into the panel instead of always showing a fixed cyan/amber mix */ .stab.iv-indigo.act{border-left-color:var(--indigo)} .stab.iv-indigo.act .sticon{color:var(--indigo);background:rgba(var(--indigo-rgb),.1);border-color:rgba(var(--indigo-rgb),.35)} .stab.iv-indigo.act .stsector{color:var(--indigo)} .stab.iv-amber.act{border-left-color:var(--amber)} .stab.iv-amber.act .sticon{color:var(--amber);background:rgba(var(--amber-rgb),.1);border-color:rgba(var(--amber-rgb),.35)} .stab.iv-amber.act .stsector{color:var(--amber)} .stab.iv-green.act{border-left-color:var(--green)} .stab.iv-green.act .sticon{color:var(--green);background:rgba(var(--green-rgb),.1);border-color:rgba(var(--green-rgb),.35)} .stab.iv-green.act .stsector{color:var(--green)} .stab.iv-teal.act{border-left-color:var(--teal)} .stab.iv-teal.act .sticon{color:var(--teal);background:rgba(var(--teal-rgb),.1);border-color:rgba(var(--teal-rgb),.35)} .stab.iv-teal.act .stsector{color:var(--teal)} .stab.iv-plum.act{border-left-color:var(--plum)} .stab.iv-plum.act .sticon{color:var(--plum);background:rgba(var(--plum-rgb),.1);border-color:rgba(var(--plum-rgb),.35)} .stab.iv-plum.act .stsector{color:var(--plum)} .stab.iv-rose.act{border-left-color:var(--rose)} .stab.iv-rose.act .sticon{color:var(--rose);background:rgba(var(--rose-rgb),.1);border-color:rgba(var(--rose-rgb),.35)} .stab.iv-rose.act .stsector{color:var(--rose)} .swdots{display:none;justify-content:center;gap:7px;padding:4px 0 20px} .swdot{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:background .3s,transform .3s,width .3s} .swdot.act{background:var(--cyan);width:18px;border-radius:4px} @media(max-width:960px){ .showcase{grid-template-columns:1fr} /* Replaces the old horizontal scrollable icon rail. That version collapsed the active tab down to a bare icon (to avoid repeating its sector+title text right above the matching panel content) while inactive tabs kept full text — the mismatch in width/content between the shrunk active tab and its full-text neighbours could read as a stray icon sitting next to the wrong label. This is a plain, unambiguous prev/current/next control instead: only the active case is ever shown, as a full card between two arrow buttons, with the .swdots strip below the panel giving position. */ .showrailbar{display:flex;align-items:center;gap:8px;padding:12px 12px 0} .srnav{display:flex;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2); background:var(--card);color:var(--mut);align-items:center;justify-content:center; transition:background .2s,color .2s,border-color .2s} .srnav:hover,.srnav:active{background:var(--cyan);color:#fff;border-color:var(--cyan)} .srnav svg{width:16px;height:16px} .showrail{display:flex;flex:1;min-width:0;overflow:hidden;padding:0;gap:0} .stab{display:none} .stab.act{display:flex;width:100%;min-width:0;padding:13px 14px; border:0;background:var(--tinta);border-radius:12px;box-shadow:none} .stab.act .sticon{display:none} .stab.act .stmeta{display:block} .stab.act .stsector{display:none} .cs-topnav{display:none} .showpanel{min-height:0;min-width:0} .spbody{padding:28px 22px 30px} .spanel .spgrid{grid-template-columns:1fr;gap:22px;margin-top:28px;padding-top:24px} .swdots{display:flex} } /* ================= 09 · CASE ROWS, PEOPLE, FAQ ================= */ .person{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 28px;transition:border-color .3s,box-shadow .3s,transform .3s} .person:hover{border-color:rgba(var(--cyan-rgb),.4);box-shadow:0 12px 32px rgba(28,30,36,.08);transform:translateY(-2px) scale(1.02)} .person .role{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:600} .person h3{margin-top:9px;font-size:19px;font-weight:700} .person p{margin-top:9px;font-size:14px;line-height:1.62;color:var(--mut)} .person .ct{margin-top:13px;font-family:var(--mono);font-size:12px;color:var(--cyan)} .adv{background:var(--card);border:1.5px dashed var(--line2);border-radius:16px;padding:34px 28px;text-align:center;transition:border-color .3s,transform .3s} .adv:hover{border-color:rgba(var(--cyan-rgb),.45);transform:scale(1.02)} .adv .ava{width:88px;height:88px;border-radius:50%;margin:0 auto;background:var(--bg2);border:1px solid var(--line2); display:flex;align-items:center;justify-content:center} .adv .ava svg{width:44px;height:44px;opacity:.4} .adv .role{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:600} .adv h3{margin-top:8px;font-size:17px;font-weight:700;color:var(--dim)} .adv p{margin-top:7px;font-size:13px;line-height:1.55;color:var(--dim)} .faq{margin-top:40px;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:20px 4px;font-family:var(--box);font-size:16.5px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:center;transition:color .2s} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';font-family:var(--mono);color:var(--cyan);font-size:19px;transition:transform .25s} .faq details[open] summary::after{transform:rotate(45deg)} .faq summary:hover{color:var(--cyan)} .faq .fa{padding:0 4px 22px;font-size:14.5px;line-height:1.68;color:var(--mut);max-width:68ch} .faq details[open] .fa{animation:faqin .45s cubic-bezier(.2,.7,.2,1) both} @keyframes faqin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .faq .fa b{color:var(--cyan)} .steppend{margin-top:8px;background:linear-gradient(135deg,rgba(var(--cyan-rgb),.07),rgba(var(--indigo-rgb),.09)); border:1px solid rgba(var(--cyan-rgb),.18);color:var(--txt);border-radius:16px;padding:32px 32px;position:relative;overflow:hidden; display:flex;gap:40px;align-items:center} .steppend::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--cyan),var(--indigo),transparent)} .steppend h3{font-size:19px;font-weight:700;flex:1 1 38%} .steppend h3 .c{color:var(--indigo)} .steppend p{font-size:13.5px;line-height:1.6;color:var(--mut);flex:1 1 52%;margin-top:0; padding-left:32px;border-left:1px solid rgba(var(--indigo-rgb),.18)} .steppend p b{color:var(--txt)} @media(max-width:760px){ .steppend{flex-direction:column;align-items:flex-start;gap:16px} .steppend p{padding-left:0;border-left:0;max-width:none} .steppend h3{max-width:none} } @media(max-width:560px){ .steppend{padding:26px 22px} } /* ---- engagement journey: minimal icon-flow with animated color-graduated arrows ---- */ .jflow{margin-top:40px;display:flex;align-items:flex-start;justify-content:space-between;gap:2px} .jnode{display:flex;flex-direction:column;align-items:center;text-align:center;width:112px;flex:none} .jicon{width:54px;height:54px;border-radius:50%;background:rgba(var(--cyan-rgb),.07);border:1.5px solid rgba(var(--cyan-rgb),.25); color:var(--cyan);display:flex;align-items:center;justify-content:center;flex:none; transition:background .4s,border-color .4s,box-shadow .4s,transform .4s} .jicon svg{width:24px;height:24px} .jnode.lit .jicon{background:rgba(var(--cyan-rgb),.13);border-color:var(--cyan);box-shadow:0 0 0 5px rgba(var(--cyan-rgb),.1);transform:scale(1.05)} .jnode-end.lit .jicon{background:rgba(var(--green-rgb),.14);border-color:var(--green);color:var(--green);box-shadow:0 0 0 5px rgba(var(--green-rgb),.12)} .jnum{margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--dim);font-weight:700} .jlabel{margin-top:3px;font-family:var(--head);font-weight:700;font-size:13.5px;line-height:1.28} .jdesc{margin-top:4px;font-size:11.5px;color:var(--mut);line-height:1.3} .jarrow{flex:1;display:flex;align-items:center;justify-content:center;margin-top:27px;min-width:24px;color:var(--line2); transition:color .5s} .jarrowsvg{width:100%;height:12px;display:block} .jpath{stroke-dasharray:70;stroke-dashoffset:70;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)} .jarrow.fill{color:var(--ac,var(--cyan))} .jarrow.fill .jpath{stroke-dashoffset:0} @media(max-width:920px){ .jflow{flex-direction:column;align-items:stretch;gap:0} .jnode{flex-direction:row;width:100%;text-align:left;gap:16px;padding:12px 4px} .jicon{width:46px;height:46px} .jicon svg{width:20px;height:20px} .jnum{margin-top:0} .jarrow{margin:0 0 0 22px;width:20px;min-width:20px;height:28px;transform:rotate(90deg);justify-content:flex-start} } /* ---- engagement shapes: numbered badge cards ---- */ .shapegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px} .shapecard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 26px; transition:border-color .3s,box-shadow .3s,transform .3s} .shapecard:hover{border-color:rgba(var(--cyan-rgb),.4);box-shadow:0 16px 38px rgba(28,30,36,.08);transform:translateY(-3px) scale(1.02)} .shbadge{width:50px;height:50px;border-radius:50%;background:rgba(var(--cyan-rgb),.1);color:var(--cyan); display:flex;align-items:center;justify-content:center;font-family:var(--box);font-weight:700;font-size:18px;margin-bottom:18px} .shbadge svg{width:23px;height:23px;flex:none;display:block} .shapecard.b .shbadge{background:rgba(var(--indigo-rgb),.1);color:var(--indigo)} .shk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600} .shapecard h3{margin-top:9px;font-size:21px;font-weight:700} .shapecard p{margin-top:10px;font-size:14px;line-height:1.62;color:var(--mut)} .shev{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--cyan);line-height:1.7} @media(max-width:960px){.shapegrid{grid-template-columns:1fr}} /* ================= 11 · CONTACT — COPY-EMAIL WIDGET ================= */ .mailwidget{display:inline-flex;flex-direction:column;gap:8px} .mailbox{display:inline-flex;align-items:center;gap:0;background:var(--slate);border:1px solid var(--sline2); border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(20,22,30,.22);transition:border-color .3s,box-shadow .3s; cursor:pointer;user-select:none} .mailbox:hover{border-color:rgba(var(--bcyan-rgb),.55);box-shadow:0 8px 22px rgba(20,22,30,.28),0 0 18px rgba(var(--bcyan-rgb),.12)} .mailbox .mprompt{font-family:var(--mono);font-size:11.5px;color:var(--sdim);padding:9px 0 9px 12px} .mailbox .maddr{font-family:var(--mono);font-size:12.5px;color:var(--bcyan);padding:9px 12px 9px 7px;min-width:19ch; letter-spacing:.01em;white-space:nowrap} .mailbox .maddr .cursorblink{display:inline-block;width:8px;margin-left:2px;color:var(--bcyan);animation:blinkc 1s steps(1) infinite} @keyframes blinkc{50%{opacity:0}} .mailbox .mcopy{color:var(--bcyan);background:transparent;border:0;border-left:1px solid var(--sline); cursor:pointer;padding:9px 12px;display:flex;align-items:center;align-self:stretch;transition:background .25s,color .25s} .mailbox .mcopy svg{width:15px;height:15px;display:block} .mailbox .mcopy:hover{background:var(--bcyan);color:var(--ink)} .mailbox .mcopy.copied{background:var(--bgreen);color:var(--ink)} .mailnote{display:block;font-size:12px;color:var(--dim);font-family:var(--sans);background:none;border:0;padding:0; margin-top:2px;cursor:default;text-align:left} .darkband .mailnote,footer .mailnote{color:var(--sdim)} .mailwidget.lg .mailbox .maddr{font-size:14.5px;padding:12px 14px 12px 8px} .mailwidget.lg .mailbox .mprompt{font-size:13px;padding-left:15px} .mailwidget.lg .mailbox .mcopy{padding:12px 15px} .mailwidget.lg .mailbox .mcopy svg{width:17px;height:17px} /* header dropdown */ #mailpanel{position:fixed;top:80px;right:max(20px,calc(50vw - 640px));z-index:96;width:min(380px,calc(100vw - 32px)); background:var(--slate);border:1px solid var(--sline2);border-radius:16px;padding:20px;color:var(--stxt); box-shadow:0 24px 60px rgba(10,12,18,.5),0 0 40px rgba(var(--bcyan-rgb),.12); transform:translateY(-8px) scale(.98);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s} #mailpanel.open{transform:none;opacity:1;pointer-events:auto} #mailpanel .mtitle{font-family:var(--head);font-weight:700;font-size:15px;display:flex;align-items:center;gap:9px} #mailpanel .mtitle .glyph{font-family:var(--mono);color:var(--bcyan)} #mailpanel .msub{margin-top:5px;font-size:12.5px;color:var(--smut);line-height:1.5} #mailpanel .mailwidget{margin-top:14px;width:100%} #mailpanel .mailbox{width:100%;justify-content:space-between} /* ================= 12 · CTA BAND, FOOTER ================= */ .band{background:var(--slate3);color:var(--stxt);text-align:center;padding:96px 24px;position:relative;overflow:hidden} .band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(var(--bcyan-rgb),.1),transparent 65%);pointer-events:none;z-index:1} .band::after{content:'';position:absolute;top:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,var(--sline),var(--sline),transparent);z-index:2} .band .bandrain{position:absolute;inset:0;width:100%;height:100%;opacity:.16;z-index:0;pointer-events:none} .band .wrap{position:relative;z-index:2} .band h2{margin:0 auto;max-width:26ch} .band h2 .c{color:var(--bcyan);text-shadow:0 0 22px rgba(var(--bcyan-rgb),.3)} .band .lede{margin:16px auto 0;text-align:center;color:var(--smut)} footer{background:var(--slate3);border-top:1px solid rgba(var(--bcyan-rgb),.16);padding:58px 24px 32px;color:var(--sdim)} .fwrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(260px,400px) auto auto auto;justify-content:space-between;gap:36px;text-align:left} .fbrand{font-weight:700;color:var(--stxt);font-size:17px;display:flex;align-items:center;gap:10px} .fbrand .glyph{font-family:var(--mono);color:var(--bcyan);font-weight:600} .fdesc{margin-top:13px;font-size:13.5px;line-height:1.68;max-width:36ch;color:var(--smut)} footer .mailwidget{margin-top:16px} .fcol .fh{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sdim);margin-bottom:14px;font-weight:600} .fh-chev{display:none} .fcol a{display:block;color:var(--smut);font-size:13.5px;padding:5px 0;transition:color .25s,padding-left .25s} .fcol a:hover{color:var(--bcyan);padding-left:4px} .fbase{max-width:1120px;margin:42px auto 0;padding-top:22px;border-top:1px solid rgba(57,65,83,.8); display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase} .fbase .g{color:var(--bgreen)} /* ---- ambient rain, subtle, dark contexts only ---- */ .hero .bandrain{position:absolute;inset:0;width:100%;height:100%;opacity:.07;z-index:0;pointer-events:none} .sec.darkband .bandrain{position:absolute;inset:0;width:100%;height:100%;opacity:.055;z-index:0;pointer-events:none} /* ---- thread section: content + sector icon grid ---- */ .threadgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center} .sectorgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .sgtile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 16px;text-align:center; transition:border-color .3s,box-shadow .3s,transform .3s} .sgtile:hover{border-color:rgba(var(--cyan-rgb),.4);box-shadow:0 12px 28px rgba(28,30,36,.08);transform:translateY(-2px) scale(1.03)} .sgic{width:44px;height:44px;margin:0 auto;border-radius:12px;background:rgba(var(--cyan-rgb),.1);color:var(--cyan); display:flex;align-items:center;justify-content:center;transition:transform .3s,box-shadow .3s} .sgic svg{width:21px;height:21px} .sgtile:hover .sgic{transform:translateY(-1px);box-shadow:0 6px 16px rgba(var(--cyan-rgb),.2)} .sgtile span{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;font-weight:600; color:var(--mut);line-height:1.35} @media(max-width:960px){ .threadgrid{grid-template-columns:1fr;gap:36px} .sectorgrid{max-width:420px;margin:0 auto} } @media(max-width:480px){ .sectorgrid{grid-template-columns:repeat(2,1fr)} .sgtile{padding:18px 10px} } /* ================= 13 · RESPONSIVE & REDUCED MOTION ================= */ @media(max-width:960px){ #nav .links{display:none} #burger{display:block} .g2,.g3,.g4,.cyc{grid-template-columns:1fr} .glance{grid-template-columns:1fr} .garrow{height:30px} .garrow::before{width:1.5px;height:100%;background:repeating-linear-gradient(180deg,var(--line2) 0 6px,transparent 6px 11px)} .garrow::after{content:'\25BE'} .fwrap{grid-template-columns:1fr 1fr} .sec{padding:66px 20px} .hero{padding:140px 20px 80px} .hero.home{min-height:0;padding:132px 20px 56px} .hero .factline{gap:28px} .wm,.hero .wm{display:none} /* scroll-story: single column, spine on the left */ .story{grid-template-columns:1fr;column-gap:0;padding-left:34px} } @media(max-width:560px){ .fwrap{grid-template-columns:1fr} .sec{padding:56px 16px} .hero{padding:128px 16px 64px} .hero.home{min-height:0;padding:118px 16px 48px} .band{padding:76px 16px} .mailbox{flex-wrap:wrap} /* Three fully-expanded link columns plus the brand blurb reads as a wall of text stacked on a phone. Collapse each column behind its heading — brand blurb and email stay put since that's the content people actually need without hunting for it. Desktop is untouched: .fh-chev only shows here, and .fcol-links only gets height-collapsed inside this query. */ footer{padding-top:44px} .fcol{border-top:1px solid rgba(255,255,255,.08)} .fcol .fh{cursor:pointer;display:flex;align-items:center;justify-content:space-between; margin-bottom:0;padding:16px 2px} .fh-chev{display:flex;color:var(--sdim);transition:transform .25s ease} .fcol-open .fh-chev{transform:rotate(180deg);color:var(--bcyan)} .fcol-links{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s ease} .fcol-open .fcol-links{max-height:400px;opacity:1;padding-bottom:14px} /* Plain stacked text links read as a wall of list items on a phone. Rendered as rounded pill buttons instead — the same fully-rounded shape used for the site's primary buttons elsewhere (border-radius:100px) — wrapped in a flex row so they align cleanly regardless of how many fit per line, rather than one link per row. */ .fcol-links{display:flex;flex-wrap:wrap;gap:8px} .fcol a{display:inline-flex;align-items:center;padding:9px 16px;border-radius:100px; border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04); font-size:13px;color:var(--smut);transition:border-color .2s,background .2s,color .2s} .fcol a:hover,.fcol a:active{border-color:rgba(var(--bcyan-rgb),.4);color:var(--bcyan);background:rgba(var(--bcyan-rgb),.08)} .fbase{margin-top:28px;flex-direction:column;align-items:flex-start} .mailbox .maddr{min-width:0} .pstats{grid-template-columns:1fr} .pstats>div{border-right:0;border-bottom:1px solid #152332} .pstats>div:last-child{border-bottom:0} } /* ---- top-section ambient glow (first content section per page) ---- */ .topsec{position:relative;overflow:hidden; background:linear-gradient(158deg,var(--card) 0%,var(--bg) 45%,var(--tinta) 100%)} .topglow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .topglow i{position:absolute;border-radius:50%;filter:blur(70px)} .topglow .tg1{width:440px;height:440px;top:-180px;left:-100px; background:radial-gradient(circle,rgba(var(--cyan-rgb),.14),transparent 70%); animation:tgdrift1 26s ease-in-out infinite alternate} .topglow .tg2{width:400px;height:400px;bottom:-170px;right:-80px; background:radial-gradient(circle,rgba(var(--indigo-rgb),.12),transparent 70%); animation:tgdrift2 30s ease-in-out infinite alternate} .topglow .tg3{width:280px;height:280px;top:20%;right:8%; background:radial-gradient(circle,rgba(var(--amber-rgb),.07),transparent 70%); animation:tgdrift3 22s ease-in-out infinite alternate} @keyframes tgdrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,35px) scale(1.08)}} @keyframes tgdrift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,-30px) scale(1.06)}} @keyframes tgdrift3{from{transform:translate(0,0)}to{transform:translate(-25px,20px)}} .topsec .wrap{position:relative;z-index:1} @media(prefers-reduced-motion:reduce){ .fx{opacity:1;transform:none;transition:none} .heroanim .blob,.heroanim .gridpan{animation:none} .topglow i{animation:none} .qmfring{animation:none} .qtrail,.qmfdot,.qmf2,.qchip{transition:none} .jicon,.jarrow,.jpath{transition:none} .heroanim{transition:none} .hero h1 .hl{animation:none} #tick .track{animation:none} .cline{opacity:1;transform:none} .spark .dot{opacity:1} .meter{transition:none} #nav,.hero,#nav .links a{animation:none;opacity:1} .fstage{opacity:1} .hoodline{opacity:1;transform:none} .spanel{animation:none} .faq details[open] .fa{animation:none} #themepanel{transition:none} .mailbox .maddr .cursorblink{animation:none} .ob-led{animation:none} .whl-ambient-ring{animation:none} .whl-tick-arc.flash{animation:none} .orb-zone-tab.target{animation:none} .gts-token{transition:none} } /* ---- theme picker (review tool) ---- */ #themebtn{position:fixed;right:20px;bottom:20px;z-index:120;width:48px;height:48px;border-radius:50%; background:var(--slate2);border:1px solid var(--sline2);cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s} #themebtn:hover{transform:scale(1.06);box-shadow:0 14px 32px rgba(0,0,0,.36)} #themebtn svg{width:21px;height:21px;color:var(--bcyan)} #themepanel{position:fixed;right:20px;bottom:78px;z-index:120;width:252px;background:var(--slate2); border:1px solid var(--sline2);border-radius:16px;padding:16px;box-shadow:0 24px 56px rgba(0,0,0,.4); transform:translateY(8px) scale(.97);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .25s} #themepanel.open{transform:none;opacity:1;pointer-events:auto} #themepanel .tptitle{font-family:var(--head);font-weight:700;font-size:13px;color:var(--stxt);margin-bottom:3px} #themepanel .tpsub{font-size:11px;color:var(--sdim);margin-bottom:12px;line-height:1.5} .tpgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .tpswatch{cursor:pointer;border-radius:10px;padding:8px 6px 7px;border:1.5px solid var(--sline);background:var(--slate); display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .2s,background .2s} .tpswatch:hover{background:var(--slate3)} .tpswatch.act{border-color:var(--bcyan)} .tpswatch .tpdots{display:flex;gap:3px} .tpswatch .tpdots i{width:11px;height:11px;border-radius:50%;display:block} .tpswatch span{font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:var(--smut);text-align:center;line-height:1.3} .tpswatch.act span{color:var(--stxt)} @media(max-width:560px){ #themebtn{right:14px;bottom:14px;width:44px;height:44px} #themepanel{right:14px;bottom:68px;width:calc(100vw - 28px);max-width:280px} } /* ================= 14 · SHARED INSTRUMENT-PANEL CHROME (dark-band widgets) ================= */ /* Bezel / screw / LED / screen — reusable shell for any widget dropped into a darkband chapter. Each widget defines its own token bridge on its own #id (see below) so --cyan/--amber/etc. resolve to the site's real palette; this chrome just consumes those tokens. */ .ob-bezel{position:relative;border-radius:16px;padding:20px; background:linear-gradient(145deg,#262a33,#15171d 55%,#1c1f26); border:1px solid rgba(255,255,255,.06); box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)} .ob-screw{position:absolute;width:8px;height:8px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#565c69,#1a1c22 70%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)} .ob-screw::after{content:'';position:absolute;top:50%;left:15%;right:15%;height:1px;background:rgba(0,0,0,.6);transform:rotate(18deg)} .ob-tl{top:8px;left:8px}.ob-tr{top:8px;right:8px}.ob-bl{bottom:8px;left:8px}.ob-br{bottom:8px;right:8px} .ob-led{position:absolute;top:5px;right:36px;width:6px;height:6px;border-radius:50%;background:var(--green); box-shadow:0 0 6px var(--green);animation:obLedBlink 2.6s steps(1) infinite} @keyframes obLedBlink{0%,84%{opacity:1}85%,100%{opacity:.25}} .ob-screen{position:relative;border-radius:11px;padding:22px 20px 18px;background:#0c0e13;overflow:hidden; border:1px solid rgba(255,255,255,.04);color:var(--txt); box-shadow:inset 0 2px 8px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.7)} /* ================= 14b · MATURITY ORBIT WIDGET (How We Deliver · Chapter two) ================= */ /* Token bridge so this widget's own colour names resolve to the site's dark palette */ /* Fixed a real bug, found via screenshot: the bespoke dark widgets below (#sec-orbit, #sec-pid, #sec-gates) each locally define --txt:var(--stxt) etc. so their internals stay legible against their own dark background regardless of the surrounding page — until the darkband-chapter fix a few rounds back redefined --stxt itself to *equal* --txt at the .hwd-acc-item level (so plain text on the now-light collapsed card would read correctly). Nested one level deeper, those two remaps chained into each other: --txt became --stxt became --txt again, resolving to the page's dark text colour instead of the widget's intended light one — dark text on the widget's own dark background, which is exactly the barely-visible "AI drafting" label and readout card in the screenshot. Re-pinned to the original dark-theme constants here, inside each widget's own scope, so they're immune to whatever an ancestor does with the same variable names — same fix applies whether or not the darkband-chapter override exists upstream. */ .sec.darkband .hwd-acc-item #sec-orbit, .sec.darkband .hwd-acc-item #sec-pid, .sec.darkband .hwd-acc-item #sec-gates{ --stxt:#E7EBF2;--smut:#A9B2C3;--sdim:#8591A4; --bcyan:#34C8EE;--bcyan-rgb:52,200,238;--bcyan2-rgb:111,220,247; --sline:#394153;--sline2:#465066; --slate:#232833;--slate2:#1C212B;--slate3:#181C26; --slate-rgb:35,40,51;--slate2-rgb:28,33,43;--slate3-rgb:24,28,38; } #sec-orbit{ --bg:var(--slate3);--card:var(--slate2);--line:var(--sline);--line2:var(--sline2); --cyan:var(--bcyan);--cyan-rgb:var(--bcyan-rgb); --amber:var(--bamber);--amber-rgb:var(--bamber-rgb); --green:var(--bgreen);--green-rgb:67,209,124; --txt:var(--stxt);--mut:var(--smut);--dim:var(--sdim) } /* Widget internals — unchanged from the reference build */ #sec-orbit .orb-orbit-wrap{margin-top:0;display:flex;justify-content:center;position:relative} #sec-orbit #orb-orbits{width:100%;max-width:266px;height:auto;overflow:visible} #sec-orbit .orb-ring{fill:none;stroke:var(--line);transition:stroke .3s,opacity .3s,stroke-width .3s} #sec-orbit .orb-ring.active{stroke:var(--cyan);opacity:1} #sec-orbit .orb-ring.hover:not(.active){stroke:var(--cyan);opacity:.55} #sec-orbit .orb-ring.decaying{stroke-dasharray:5 4} #sec-orbit .orb-ring.locked{stroke-width:1.6} #sec-orbit .orb-node-core{transition:fill .3s,filter .3s,r .2s} #sec-orbit .orb-node-core.hover:not(.active){filter:drop-shadow(0 0 4px currentColor)} #sec-orbit .orb-node-hit{cursor:pointer} #sec-orbit .orb-node-label{font-family:var(--mono);font-weight:700;font-size:10px;fill:var(--dim);text-anchor:middle;transition:fill .3s} #sec-orbit .orb-traj-banner{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:4px} #sec-orbit .orb-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase} #sec-orbit .orb-path{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--mut); border:1px solid var(--line2);border-radius:100px;padding:4px 13px;display:flex;align-items:center;gap:6px; max-width:100%;flex-wrap:wrap;justify-content:center} #sec-orbit .orb-path .from{color:var(--amber);font-weight:700} #sec-orbit .orb-path .to{color:var(--green);font-weight:700} #sec-orbit .orb-path .arrow{color:var(--dim)} #sec-orbit .orb-notes{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap} #sec-orbit .orb-note{flex:1;min-width:190px;border:1px solid var(--line);border-radius:9px;padding:6px 10px; font-family:var(--mono);font-size:11px;color:var(--mut);display:flex;align-items:center;gap:7px} #sec-orbit .orb-note-text{flex:1;min-width:0} #sec-orbit .orb-note b{font-weight:700;letter-spacing:.03em} #sec-orbit .orb-note.trap{border-color:rgba(var(--amber-rgb),.35)} #sec-orbit .orb-note.trap b{color:var(--amber)} #sec-orbit .orb-note.target{border-color:rgba(var(--green-rgb),.35)} #sec-orbit .orb-note.target b{color:var(--green)} #sec-orbit .orb-note-dot{width:6px;height:6px;border-radius:50%;flex:none} #sec-orbit .orb-note.trap .orb-note-dot{background:var(--amber);box-shadow:0 0 6px rgba(var(--amber-rgb),.6)} #sec-orbit .orb-note.target .orb-note-dot{background:var(--green);box-shadow:0 0 6px rgba(var(--green-rgb),.6)} #sec-orbit .orb-telemetry{margin-top:8px} #sec-orbit .orb-t-flag{font-family:var(--mono);font-size:11px;color:var(--amber);border:1px solid rgba(var(--amber-rgb),.4); border-radius:100px;padding:2px 10px;display:inline-block} #sec-orbit .orb-t-flag.target{color:var(--green);border-color:rgba(var(--green-rgb),.4)} #sec-orbit .orb-zones{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} #sec-orbit .orb-zone-tab{flex:1;min-width:120px;cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:9px; padding:6px 9px;display:flex;align-items:center;gap:7px;text-align:left;color:inherit;font:inherit; transition:border-color .3s,background .3s;position:relative} #sec-orbit .orb-zone-tab:hover,#sec-orbit .orb-zone-tab.hover{border-color:rgba(var(--cyan-rgb),.4)} #sec-orbit .orb-zone-tab.target:not(.active){border-color:rgba(var(--green-rgb),.4);animation:orbTargetBlink 2.8s ease-in-out infinite} @keyframes orbTargetBlink{ 0%,100%{background:rgba(var(--green-rgb),.05);box-shadow:0 0 0 0 rgba(var(--green-rgb),0)} 50%{background:rgba(var(--green-rgb),.16);box-shadow:0 0 14px 1px rgba(var(--green-rgb),.3)} } #sec-orbit .orb-zone-tab.active{border-color:var(--cyan);background:rgba(var(--cyan-rgb),.08)} #sec-orbit .orb-zone-tab .ic{width:19px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none; background:rgba(var(--cyan-rgb),.13);color:var(--cyan)} #sec-orbit .orb-zone-tab.trap .ic{background:rgba(var(--amber-rgb),.15);color:var(--amber)} #sec-orbit .orb-zone-tab.target .ic{background:rgba(var(--green-rgb),.18);color:var(--green)} #sec-orbit .orb-zone-tab .ic svg{width:10px;height:10px} #sec-orbit .orb-zone-tab .t{font-family:var(--box);font-weight:600;font-size:12.5px} #sec-orbit .orb-zone-tab .n{font-family:var(--mono);font-size:11px;color:var(--dim)} #sec-orbit .orb-target-badge{position:absolute;top:-9px;right:8px;font-family:var(--mono);font-size:11px;letter-spacing:.05em; color:var(--bg);background:var(--green);border-radius:100px;padding:2px 7px;text-transform:uppercase; box-shadow:0 0 6px rgba(var(--green-rgb),.5)} #sec-orbit .orb-detail{margin-top:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 15px;overflow:hidden;transition:opacity .16s ease,border-color .3s,height .2s ease} #sec-orbit .orb-detail.swap{opacity:0} #sec-orbit .orb-detail .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)} #sec-orbit .orb-detail .head{display:flex;align-items:center;gap:9px;margin-top:5px} #sec-orbit .orb-detail .ic-lg{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;background:rgba(var(--cyan-rgb),.14);color:var(--cyan)} #sec-orbit .orb-detail .ic-lg svg{width:13px;height:13px} #sec-orbit .orb-detail h3{font-family:var(--head);font-weight:700;font-size:16.5px} #sec-orbit .orb-detail p{color:var(--mut);margin-top:7px;font-size:14px;line-height:1.5} #sec-orbit .orb-detail .gap{margin-top:7px;font-family:var(--mono);font-size:12px;color:var(--amber)} #sec-orbit .orb-progress-dots{display:flex;gap:6px;margin-top:9px} #sec-orbit .orb-progress-dots i{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:background .3s,transform .3s;display:block} #sec-orbit .orb-progress-dots i.filled{background:var(--cyan)} #sec-orbit .orb-progress-dots i.current{transform:scale(1.5);box-shadow:0 0 6px var(--cyan)} /* Trim the shared bezel chrome specifically for this widget — it was running tall */ #sec-orbit.ob-bezel{padding:14px} #sec-orbit .ob-screen{padding:16px 14px 14px} /* ================= 15 · FIFTEEN-FACTOR WHEEL WIDGET (How We Deliver · Chapter three) — bright theme ================= */ /* No dark token bridge here: this widget stays in the site's normal light palette. */ #sec-wheel .whl-controls{display:flex;align-items:center;justify-content:center;gap:12px} #sec-wheel .whl-play-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--mut); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,color .25s;flex:none} #sec-wheel .whl-play-btn:hover{border-color:var(--cyan);color:var(--cyan)} #sec-wheel .whl-play-btn svg{width:11px;height:11px} #sec-wheel .whl-step{font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.06em;min-width:56px;text-align:left} #sec-wheel .whl-step b{color:var(--mut);font-weight:500} #sec-wheel .whl-stage{margin-top:14px;position:relative;display:flex;justify-content:center} #sec-wheel #whl-wheel{width:100%;max-width:460px;height:auto;overflow:visible;display:block} #sec-wheel .whl-ambient-ring{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:1 9;opacity:.4; transform-box:fill-box;transform-origin:center;animation:whlSpin 46s linear infinite} @keyframes whlSpin{to{transform:rotate(360deg)}} #sec-wheel .whl-tick-arc{fill:none;stroke-linecap:round;stroke-width:4;transition:stroke .3s,filter .3s} #sec-wheel .whl-tick-arc.flash{animation:whlTickFlash .38s ease-out} @keyframes whlTickFlash{0%{stroke-width:8;opacity:.55}100%{stroke-width:4;opacity:1}} #sec-wheel .whl-spoke-line{transition:stroke .25s,opacity .25s} #sec-wheel .whl-spoke-dot{transition:r .2s ease,fill .25s,filter .25s} #sec-wheel .whl-spoke-hit{cursor:pointer} #sec-wheel .whl-spoke-hitarea{fill:transparent;pointer-events:all} #sec-wheel .whl-spoke-label{font-family:var(--mono);font-weight:700;font-size:11px;fill:var(--dim);transition:fill .25s;text-anchor:middle} #sec-wheel .whl-spoke-hit.active .whl-spoke-label{font-family:var(--box);font-weight:700} #sec-wheel .whl-spoke-hit:focus{outline:none} #sec-wheel .whl-spoke-hit:focus-visible{outline:none} #sec-wheel .whl-spoke-hit:focus-visible .whl-spoke-dot{r:9;filter:drop-shadow(0 0 7px currentColor)} @media (hover:hover) and (pointer:fine){ #sec-wheel .whl-spoke-hit:hover .whl-spoke-dot{r:9;filter:drop-shadow(0 0 7px currentColor)} } #sec-wheel .whl-tooltip{position:absolute;top:0;left:0;transform:translate(-9999px,-9999px); background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:7px 13px; font-family:var(--box);font-weight:600;font-size:13px;color:var(--txt);white-space:nowrap; pointer-events:none;opacity:0;transition:opacity .16s ease,transform .12s ease;z-index:5; box-shadow:0 8px 20px rgba(0,0,0,.4)} #sec-wheel .whl-tooltip.show{opacity:1} #sec-wheel .whl-center-circle{fill:var(--card);stroke:var(--line2);stroke-width:1.3;transition:stroke .3s} #sec-wheel .whl-center-content{text-align:center;font-family:var(--sans);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:opacity .16s ease;overflow:hidden} #sec-wheel .whl-center-content.swap{opacity:0} #sec-wheel .whl-ct-num{font-family:var(--mono);font-weight:700;font-size:24px;color:var(--cyan);transition:color .3s;flex:none} #sec-wheel .whl-ct-name{font-family:var(--box);font-weight:600;font-size:14.5px;color:var(--txt);padding:0 10px;flex:none} #sec-wheel .whl-ct-def{font-size:12.5px;color:var(--mut);line-height:1.45;padding:0 12px;margin-top:4px; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} #sec-wheel .whl-ct-badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-top:8px;flex:none} /* ================= 16 · FIVE-AXES RADAR WIDGET (How We Deliver · Chapter four) — bright theme ================= */ /* No dark token bridge here: this widget stays in the site's normal light palette. */ .rdr-panel{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:30px 28px 26px;box-shadow:0 14px 34px rgba(28,30,36,.06)} #sec-radar .rdr-stage{display:flex;justify-content:center} #sec-radar #rdr-radar{width:100%;max-width:340px;height:auto;overflow:visible} #sec-radar .rdr-ax-lbl{font-family:var(--mono);font-size:11.5px;fill:var(--mut);text-anchor:middle} #sec-radar .rdr-ring{fill:none;stroke:var(--line2);stroke-width:.75;stroke-dasharray:1 3} #sec-radar .rdr-axis-line{stroke:var(--line2);stroke-width:1} #sec-radar .rdr-sweep{stroke:var(--cyan);stroke-width:1;opacity:.4} #sec-radar .rdr-poly{fill-opacity:.14;stroke-width:1.4} #sec-radar .rdr-poly.mf{filter:drop-shadow(0 0 4px var(--bgreen))} #sec-radar .rdr-pt{transition:filter .25s} #sec-radar .rdr-toggles{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap} #sec-radar .rdr-tgl{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--mut); border:1px solid var(--line2);padding:7px 13px;border-radius:100px;cursor:pointer;transition:opacity .25s,border-color .25s;background:none} #sec-radar .rdr-tgl i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none} #sec-radar .rdr-tgl.off{opacity:.35} /* ================= 17 · SHARED LIGHT CARD (bright-theme widgets) ================= */ .wcard{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:30px 28px 26px;box-shadow:0 14px 34px rgba(28,30,36,.06)} /* ================= 18 · BOUNDARY POLICIES WIDGET (How We Deliver · Chapter five) ================= */ #sec-boundary{ --card:var(--slate2);--line:var(--sline);--line2:var(--sline2); --cyan:var(--bcyan);--cyan-rgb:var(--bcyan-rgb); --green:var(--bgreen);--green-rgb:67,209,124; --red:var(--bred);--red-rgb:239,106,95; --txt:var(--stxt);--mut:var(--smut);--dim:var(--sdim) } #sec-boundary .bnd-stage{position:relative;display:grid;grid-template-columns:1fr 74px 1fr;align-items:start;gap:0} #sec-boundary .bnd-side h3{font-family:var(--box);font-weight:600;font-size:15px;display:flex;align-items:center;gap:7px;margin-bottom:10px} #sec-boundary .bnd-allow h3{color:var(--green)} #sec-boundary .bnd-block h3{color:var(--red)} #sec-boundary .bnd-side h3 svg{width:14px;height:14px} #sec-boundary .bnd-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;margin-bottom:6px;cursor:pointer; border:1px solid var(--line);background:rgba(255,255,255,.03);transition:all .25s} #sec-boundary .bnd-item svg{width:13px;height:13px;flex:none} #sec-boundary .bnd-item span{font-size:14px;color:var(--txt)} #sec-boundary .bnd-allow .bnd-item{border-left:2.5px solid var(--green)} #sec-boundary .bnd-allow .bnd-item svg{color:var(--green)} #sec-boundary .bnd-allow .bnd-item:hover{background:rgba(var(--green-rgb),.08)} #sec-boundary .bnd-block .bnd-item{border-left:2.5px solid var(--red)} #sec-boundary .bnd-block .bnd-item svg{color:var(--red)} #sec-boundary .bnd-block .bnd-item:hover{background:rgba(var(--red-rgb),.08)} #sec-boundary .bnd-item .bnd-note{display:none;font-family:var(--mono);font-size:12px;color:var(--mut);margin-top:5px;line-height:1.5} #sec-boundary .bnd-item.open .bnd-note{display:block} #sec-boundary .bnd-item.open{flex-wrap:wrap} #sec-boundary .bnd-gate{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px} #sec-boundary .bnd-lock{width:38px;height:38px;border-radius:50%;background:rgba(var(--cyan-rgb),.12);border:1.5px solid var(--cyan); display:flex;align-items:center;justify-content:center;color:var(--cyan)} #sec-boundary .bnd-lock svg{width:17px;height:17px} #sec-boundary .bnd-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:center} #sec-boundary .bnd-gateline{position:absolute;left:50%;top:32px;bottom:0;width:1.5px;background:repeating-linear-gradient(180deg,var(--line2) 0 6px,transparent 6px 12px);transform:translateX(-50%);z-index:-1} #sec-boundary.ob-bezel{padding:14px} #sec-boundary .ob-screen{padding:16px 14px 14px} @media(max-width:680px){ #sec-boundary .bnd-stage{grid-template-columns:1fr} #sec-boundary .bnd-gate{flex-direction:row;justify-content:center;padding:14px 0} #sec-boundary .bnd-gateline{display:none} } /* ================= 19 · QUALITY GATES WIDGET (How We Deliver · Chapter seven) ================= */ #sec-gates{ --card:var(--slate2);--line:var(--sline);--line2:var(--sline2); --cyan:var(--bcyan);--cyan-rgb:var(--bcyan-rgb); --indigo:var(--bindigo);--indigo-rgb:139,147,255; --teal:#2fd6bd;--teal-rgb:47,214,189; --green:var(--bgreen); --txt:var(--stxt);--mut:var(--smut);--dim:var(--sdim) } #sec-gates .gts-lanes{display:flex;justify-content:center;gap:10px;flex-wrap:wrap} #sec-gates .gts-lanebtn{font-family:var(--box);font-weight:600;font-size:13.5px;color:var(--lc,var(--cyan));background:rgba(255,255,255,.03); border:1.5px solid var(--lc,var(--cyan));padding:8px 15px;border-radius:100px;cursor:pointer;transition:all .25s} #sec-gates .gts-lanebtn:hover{background:rgba(var(--lc-rgb,var(--cyan-rgb)),.12)} #sec-gates .gts-lanebtn:disabled{opacity:.5;cursor:default} #sec-gates .gts-lanebtn.active{opacity:1;color:#fff;background:var(--lc,var(--cyan)); box-shadow:0 0 16px rgba(var(--lc-rgb,var(--cyan-rgb)),.45)} #sec-gates .gts-stage{position:relative;margin-top:16px;height:172px} #sec-gates .gts-mobile-steps{display:none} #sec-gates .gts-stage svg{width:100%;height:100%;overflow:visible} #sec-gates .gts-funnelshape{fill:rgba(255,255,255,.02);stroke:var(--line2);stroke-width:1.2} #sec-gates .gts-token{transition:cx 1.1s cubic-bezier(.3,.65,.3,1),cy 1.1s cubic-bezier(.3,.65,.3,1),opacity .3s} #sec-gates .gts-console{margin-top:10px;background:#0d0f14;border:1px solid var(--line);border-radius:11px;padding:11px 16px; font-family:var(--mono);font-size:11.5px;min-height:42px} #sec-gates .gts-cline{color:var(--dim);opacity:0;transition:opacity .35s} #sec-gates .gts-cline.show{opacity:1} #sec-gates .gts-cline b{color:var(--green)} @media(max-width:640px){ #sec-gates .gts-stage{height:auto} #sec-gates .gts-stage svg{display:none} #sec-gates .gts-mobile-steps{display:flex;flex-direction:column;gap:0;padding:6px 4px} #sec-gates .gms-step{display:flex;align-items:center;gap:14px;position:relative;padding:10px 0} #sec-gates .gms-step::before{content:'';position:absolute;left:5px;top:-2px;bottom:-2px;width:1.5px; background:var(--line2);z-index:0} #sec-gates .gms-step:first-child::before{top:50%} #sec-gates .gms-step:last-child::before{bottom:50%} #sec-gates .gms-dot{position:relative;z-index:1;width:13px;height:13px;border-radius:50%;flex:none; background:var(--card);border:2px solid var(--line2);transition:all .3s} #sec-gates .gms-label{font-family:var(--box);font-weight:600;font-size:15.5px;color:var(--dim);transition:color .3s} #sec-gates .gms-step.active .gms-dot{background:var(--lc,var(--cyan));border-color:var(--lc,var(--cyan)); box-shadow:0 0 8px var(--lc,var(--cyan))} #sec-gates .gms-step.active .gms-label{color:var(--txt)} #sec-gates .gms-step.done .gms-dot{background:var(--lc,var(--cyan));border-color:var(--lc,var(--cyan))} #sec-gates .gms-step.done .gms-label{color:var(--mut)} } #sec-gates.ob-bezel{padding:14px} #sec-gates .ob-screen{padding:16px 14px 14px} /* ================= 20 · ENGAGEMENT PIPELINE WIDGET (How We Deliver · Chapter nine) ================= */ #sec-pid{ --card:var(--slate2);--line:var(--sline);--line2:var(--sline2); --cyan:var(--bcyan);--cyan-rgb:var(--bcyan-rgb); --indigo:var(--bindigo);--indigo-rgb:139,147,255; --amber:var(--bamber);--amber-rgb:var(--bamber-rgb); --green:var(--bgreen);--green-rgb:67,209,124; --teal:#2fd6bd;--teal-rgb:47,214,189; --txt:var(--stxt);--mut:var(--smut);--dim:var(--sdim) } #sec-pid .pid-controls{display:flex;align-items:center;justify-content:center;gap:12px} #sec-pid .pid-play-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--mut); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,color .25s;flex:none} #sec-pid .pid-play-btn:hover{border-color:var(--cyan);color:var(--cyan)} #sec-pid .pid-play-btn svg{width:11px;height:11px} #sec-pid .pid-step{font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.06em;min-width:52px;text-align:left} #sec-pid .pid-step b{color:var(--mut);font-weight:500} #sec-pid .pid-pipeline{display:flex;align-items:center;margin-top:14px;overflow-x:auto} #sec-pid .pid-node{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;cursor:pointer; background:none;border:none;color:inherit;font:inherit;padding:4px;font-family:inherit; animation:pidFadeIn .55s cubic-bezier(.2,.7,.3,1) backwards} @keyframes pidFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} #sec-pid .pid-tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim);transition:color .3s} #sec-pid .pid-node.active .pid-tag{color:var(--lc)} #sec-pid .pid-shape-wrap{position:relative;display:inline-flex} #sec-pid .pid-shape-wrap::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--lc);opacity:0;pointer-events:none} #sec-pid .pid-node.active .pid-shape-wrap::after{animation:pidPing 1.7s ease-out infinite} @keyframes pidPing{0%{transform:scale(.72);opacity:.55}100%{transform:scale(1.55);opacity:0}} #sec-pid .pid-shape{width:38px;height:38px;overflow:visible} #sec-pid .pid-shape .ring{fill:var(--card);stroke:var(--line2);stroke-width:1.5;transition:stroke .3s,fill .3s} #sec-pid .pid-shape .mid{stroke:var(--line2);stroke-width:1;opacity:.6;transition:stroke .3s} #sec-pid .pid-node.active .pid-shape .ring{stroke:var(--lc);fill:rgba(var(--lc-rgb),.14)} #sec-pid .pid-node.active .pid-shape .mid{stroke:var(--lc);opacity:1} #sec-pid .pid-shape svg.icn{stroke:var(--dim);transition:stroke .3s} #sec-pid .pid-node.active .pid-shape svg.icn{stroke:var(--lc)} #sec-pid .pid-label{font-family:var(--box);font-weight:600;font-size:12px;text-align:center;max-width:92px;line-height:1.3;color:var(--mut);transition:color .3s} #sec-pid .pid-node.active .pid-label{color:var(--txt)} #sec-pid .pid-valve-l, #sec-pid .pid-valve-r{transition:transform .4s cubic-bezier(.3,.8,.3,1);transform-box:fill-box;transform-origin:center} #sec-pid .pid-node.active .pid-valve-l{transform:translateX(-3.5px)} #sec-pid .pid-node.active .pid-valve-r{transform:translateX(3.5px)} #sec-pid .pid-connector{flex:1;min-width:14px;height:38px;position:relative} #sec-pid .pid-connector .line{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line2);transform:translateY(-50%);transition:background .3s} #sec-pid .pid-connector .arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--dim);font-size:13px;transition:color .3s} #sec-pid .pid-connector.active .line{background:var(--lc);background-image:repeating-linear-gradient(90deg,var(--lc) 0 5px,transparent 5px 9px)} #sec-pid .pid-connector.active .arrow{color:var(--lc)} #sec-pid .pid-particle{position:absolute;top:50%;left:0%;width:5px;height:5px;border-radius:50%;background:var(--lc); transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 7px var(--lc)} #sec-pid .pid-connector.active .pid-particle{opacity:1;animation:pidFlowH 2.2s linear infinite} @keyframes pidFlowH{0%{left:2%}100%{left:98%}} #sec-pid .pid-progress-track{height:2px;background:var(--line);margin-top:14px;border-radius:2px;overflow:hidden} #sec-pid .pid-progress-fill{height:100%;width:0%;background:var(--cyan);border-radius:2px} #sec-pid .pid-readout{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);padding:14px 16px;position:relative;transition:opacity .16s ease,border-color .3s} #sec-pid .pid-readout.swap{opacity:0} #sec-pid .pid-tick{position:absolute;width:8px;height:8px;border-color:var(--line2)} #sec-pid .pid-tick-tl{top:-1px;left:-1px;border-top:1.5px solid;border-left:1.5px solid} #sec-pid .pid-tick-tr{top:-1px;right:-1px;border-top:1.5px solid;border-right:1.5px solid} #sec-pid .pid-tick-bl{bottom:-1px;left:-1px;border-bottom:1.5px solid;border-left:1.5px solid} #sec-pid .pid-tick-br{bottom:-1px;right:-1px;border-bottom:1.5px solid;border-right:1.5px solid} #sec-pid .pid-r-head{display:flex;align-items:center;gap:11px} #sec-pid .pid-r-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none; background:rgba(var(--lc-rgb),.15);color:var(--lc);transition:background .3s,color .3s} #sec-pid .pid-r-ic svg{width:16px;height:16px} #sec-pid .pid-r-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--lc);display:block;transition:color .3s} #sec-pid .pid-r-name{font-family:var(--head);font-weight:600;font-size:16px;margin-top:2px} #sec-pid .pid-r-desc{margin-top:9px;font-size:14px;color:var(--mut);line-height:1.5;padding-left:43px} @media(prefers-reduced-motion:reduce){ #sec-pid .pid-node{opacity:1 !important;transform:none !important} #sec-pid .pid-shape-wrap::after, #sec-pid .pid-particle{display:none} } @media(max-width:640px){ /* The icon-on-top / label-below / code-above layout, repeated 5 times down the page, reads as a wall of near-identical circles on a phone. Collapse each step to a single compact row (icon left, label right) connected by a thin spine — the same pattern already used for the Gates stepper — so the whole sequence scans in one glance instead of a long scroll. */ #sec-pid .pid-pipeline{flex-direction:column;align-items:stretch;gap:0} #sec-pid .pid-node{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;width:100%;padding:9px 4px;animation:none} #sec-pid .pid-tag{display:none} #sec-pid .pid-shape{width:28px;height:28px} #sec-pid .pid-shape-wrap::after{inset:-3px} #sec-pid .pid-label{max-width:none;text-align:left;font-size:13.5px} #sec-pid .pid-connector{width:28px;height:14px;min-width:0;margin-left:4px} #sec-pid .pid-connector .line{top:0;bottom:0;left:18px;right:auto;width:1px;height:auto;background:var(--line2);transform:none} #sec-pid .pid-connector.active .line{background-image:repeating-linear-gradient(180deg,var(--lc) 0 5px,transparent 5px 9px)} #sec-pid .pid-connector .arrow{display:none} #sec-pid .pid-particle{left:18px;top:0} #sec-pid .pid-connector.active .pid-particle{animation:pidFlowV 2.2s linear infinite} #sec-pid .pid-r-desc{padding-left:0;margin-top:9px} } @keyframes pidFlowV{0%{top:2%}100%{top:98%}} #sec-pid.ob-bezel{padding:14px} #sec-pid .ob-screen{padding:16px 14px 14px} /* ================= 21 · AI TOUCH MAP WIDGET (How We Deliver · Chapter eleven) ================= */ #sec-touch{ --card:var(--slate2);--line:var(--sline);--line2:var(--sline2); --cyan:var(--bcyan);--cyan-rgb:var(--bcyan-rgb); --indigo:var(--bindigo);--indigo-rgb:139,147,255; --txt:var(--stxt);--mut:var(--smut);--dim:var(--sdim) } #sec-touch .tch-toprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;flex-wrap:wrap;gap:10px} #sec-touch .tch-switchwrap{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--mut)} #sec-touch .tch-switch{width:44px;height:24px;border-radius:100px;background:var(--card);border:1px solid var(--line2);position:relative;cursor:pointer;transition:background .3s} #sec-touch .tch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:all .3s} #sec-touch .tch-switch.on{background:rgba(var(--cyan-rgb),.18);border-color:var(--cyan)} #sec-touch .tch-switch.on .tch-knob{left:22px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)} #sec-touch .tch-legend{display:flex;gap:16px;font-family:var(--mono);font-size:12px;color:var(--dim);opacity:0;transition:opacity .3s} #sec-touch .tch-legend.show{opacity:1} #sec-touch .tch-legend span{display:flex;align-items:center;gap:6px} #sec-touch .tch-legend i{width:9px;height:9px;border-radius:2px;display:inline-block} #sec-touch .tch-panes{display:grid;grid-template-columns:200px 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden} #sec-touch .tch-tree{background:rgba(255,255,255,.03);padding:10px 8px;border-right:1px solid var(--line)} #sec-touch .tch-fdr{font-family:var(--mono);font-size:12px;color:var(--dim);padding:8px 10px 4px;letter-spacing:.06em} #sec-touch .tch-tree button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0; color:var(--mut);font-family:var(--mono);font-size:12.5px;padding:8px 10px;border-radius:7px;cursor:pointer;transition:all .2s} #sec-touch .tch-tree button svg{width:13px;height:13px;flex:none;opacity:.7} #sec-touch .tch-tree button:hover{background:rgba(255,255,255,.04);color:var(--txt)} #sec-touch .tch-tree button.active{background:rgba(var(--cyan-rgb),.12);color:var(--cyan)} #sec-touch .tch-code{background:#0d0f14;padding:12px 4px;font-family:var(--mono);font-size:13px;line-height:1.65;overflow-x:auto} #sec-touch .tch-ln{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:1px 16px;border-left:3px solid transparent;transition:all .35s;white-space:pre} #sec-touch .tch-ln .no{color:#3d4658;text-align:right;user-select:none} #sec-touch .tch-ln .c{color:var(--mut)} #sec-touch .tch-code.map .tch-ln.ai{border-left-color:var(--cyan);background:rgba(var(--cyan-rgb),.07)} #sec-touch .tch-code.map .tch-ln.ai .c{color:#cdeffb} #sec-touch .tch-code.map .tch-ln.human{border-left-color:var(--indigo);background:rgba(var(--indigo-rgb),.07)} #sec-touch .tch-code.map .tch-ln.human .c{color:#d9dbff} #sec-touch .tch-counts{margin-top:9px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--dim)} @media(max-width:680px){ #sec-touch .tch-panes{grid-template-columns:1fr} #sec-touch .tch-tree{border-right:0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px} #sec-touch .tch-fdr{width:100%} #sec-touch .tch-tree button{width:auto} } #sec-touch.ob-bezel{padding:14px} #sec-touch .ob-screen{padding:16px 14px 14px} /* ================= 22 · DELIVERY LEDGER WIDGET (How We Deliver · Chapter twelve) — bright theme ================= */ .ldg-stamp-title{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .ldg-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .ldg-count{font-family:var(--mono);font-size:13.5px;color:var(--cyan)} .ldg-addbtn{font-family:var(--head);font-weight:700;font-size:13px;color:#fff;background:var(--cyan); border:0;padding:10px 20px;border-radius:100px;cursor:pointer;box-shadow:0 6px 16px rgba(var(--cyan-rgb),.28);transition:transform .2s} .ldg-addbtn:hover{transform:translateY(-1px)} .ldg-addbtn:disabled{opacity:.5;cursor:default;transform:none} .ldg-ledger{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden} .ldg-row.ldg-head{display:grid;grid-template-columns:1.1fr .9fr .6fr .8fr .9fr .9fr;gap:10px;padding:10px 16px; font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim); background:var(--bg2);border-bottom:1px solid var(--line)} .ldg-row.ldg-item{display:grid;grid-template-columns:1.1fr .9fr .6fr .8fr .9fr .9fr;gap:10px;padding:10px 16px; font-family:var(--mono);font-size:13px;color:var(--mut);border-bottom:1px solid var(--line); align-items:center;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s} .ldg-row.ldg-item.show{opacity:1;transform:none} .ldg-row.ldg-item:last-child{border-bottom:0} .ldg-row.ldg-item .ldg-id{color:var(--txt);font-weight:600} .ldg-gate-ok{color:var(--green)} .ldg-stamp{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--green);color:var(--green); padding:3px 10px;border-radius:5px;font-weight:700;font-size:11.5px;letter-spacing:.06em; transform:scale(0) rotate(-8deg);transition:transform .4s cubic-bezier(.3,1.6,.4,1);transform-origin:left center} .ldg-row.ldg-item.show .ldg-stamp{transform:scale(1) rotate(-8deg)} #sec-ledger.wcard{padding:20px 22px 18px} #sec-ledger .ldg-stamp-title{margin-bottom:4px} @media(max-width:760px){ .ldg-row.ldg-head{display:none} .ldg-row.ldg-item{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:8px;padding:14px 16px;align-items:baseline} .ldg-row.ldg-item .ldg-id{font-size:14px} .ldg-row.ldg-item [data-k="Time"]{text-align:right;color:var(--dim);font-size:12px} .ldg-row.ldg-item [data-k="Size"],.ldg-row.ldg-item [data-k="Approver"]{font-size:12.5px} .ldg-row.ldg-item [data-k="Approver"]{text-align:right;color:var(--mut)} .ldg-row.ldg-item .ldg-gate-ok{font-size:12.5px} .ldg-row.ldg-item [data-k="Status"]{margin-top:2px} } /* ================= 23b · MOBILE TOUCH TARGETS ================= */ /* Bump the smallest interactive controls up to a comfortable tap size on touch-width screens, without changing their look on desktop/mouse. */ @media(max-width:640px){ #sec-wheel .whl-play-btn, #sec-pid .pid-play-btn{width:40px;height:40px} #sec-wheel .whl-play-btn svg, #sec-pid .pid-play-btn svg{width:14px;height:14px} #sec-gates .gts-lanebtn{padding:11px 16px;font-size:14px} #sec-orbit .orb-zone-tab{padding:9px 9px;min-height:44px} /* This whole widget ran small — a 9.5-11.5px mono font for level numbers, path text, and detail copy is fine as a dense desktop instrument panel, but too small to read comfortably on a phone. Sizes bumped up across the board. The five level cards also had visibly uneven heights (a two-line title like "Repeatable practice" made that row taller than its neighbours) — switched to a fixed 2-column grid with every card given the same minimum height, sized to comfortably fit the longest title, so short titles just get a little more breathing room instead of the row looking cramped by comparison. */ #sec-orbit .orb-kicker{font-size:11.5px} #sec-orbit .orb-path{font-size:13.5px;line-height:1.5} #sec-orbit .orb-note{padding:9px 12px} #sec-orbit .orb-note-text{font-size:13px;line-height:1.4} #sec-orbit .orb-zones{display:grid;grid-template-columns:1fr 1fr;gap:8px} #sec-orbit .orb-zones .orb-zone-tab:last-child{grid-column:1 / -1} #sec-orbit .orb-zone-tab{min-height:76px;align-items:flex-start;padding:11px 12px;gap:9px} #sec-orbit .orb-zone-tab .ic{width:24px;height:24px;margin-top:1px} #sec-orbit .orb-zone-tab .ic svg{width:13px;height:13px} #sec-orbit .orb-zone-tab .t{font-size:14px;line-height:1.3;display:block;margin-top:2px} #sec-orbit .orb-zone-tab .n{font-size:11px} #sec-orbit .orb-detail{padding:16px 16px} #sec-orbit .orb-detail .k{font-size:12.5px} #sec-orbit .orb-detail h3{font-size:18px} #sec-orbit .orb-detail p{font-size:14.5px;line-height:1.55;margin-top:9px} #sec-orbit .orb-detail .gap{font-size:13px;margin-top:9px} #sec-orbit .orb-detail .ic-lg{width:30px;height:30px} #sec-orbit .orb-detail .ic-lg svg{width:15px;height:15px} } /* ================= 23 · TECHNICAL SECTION WATERMARK STRIP ================= */ .techstrip{position:relative;padding:22px 24px;background:var(--slate3);overflow:hidden; border-top:1px solid var(--sline);border-bottom:1px solid var(--sline)} .techstrip::before{content:'';position:absolute;inset:0; background:repeating-linear-gradient(-45deg,rgba(var(--bcyan-rgb),.05) 0 12px,transparent 12px 24px)} .techstrip-text{position:relative;text-align:center;font-family:var(--mono);font-weight:700;font-size:13px; letter-spacing:.5em;text-indent:.5em;color:var(--bcyan);text-transform:uppercase;opacity:.85} @media(max-width:600px){.techstrip-text{letter-spacing:.28em;text-indent:.28em;font-size:11px}} /* ================= 24 · MOBILE CARD ACCORDION (site-wide) ================= */ .macc-chev{display:none} /* On phones, dense card grids collapse to a vertical stack of tap-to-expand rows — icon/label/title always visible, body copy revealed on tap — instead of a horizontal carousel. Vertical scroll stays the only gesture on the page. Unchanged on tablet/laptop/desktop/TV, where the flat grid already works fine. Applies globally to every .g2/.g3/.g4/.accelgrid/.shapegrid on every page since they all share these classes. */ @media(max-width:640px){ .g2, .g3, .g4, .accelgrid, .shapegrid{ display:flex !important; grid-template-columns:none !important; flex-direction:column; gap:10px; } .g2 > *, .g3 > *, .g4 > *, .accelgrid > *, .shapegrid > *{ width:100%; } .macc-card{position:relative;cursor:pointer;padding-right:46px !important} .macc-card.card.railcard{padding-right:0 !important} .macc-card.card.railcard .railbody{padding-right:46px} .macc-card p, .macc-card .ev, .macc-card .shev{display:none;margin-top:8px} .macc-card.macc-open p, .macc-card.macc-open .ev, .macc-card.macc-open .shev{ display:block;animation:maccReveal .18s ease; } .macc-card h3::after, .macc-card h4::after{display:none} @keyframes maccReveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}} .macc-chev{display:flex;position:absolute;top:18px;right:16px;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%;background:var(--bg2);color:var(--mut); transition:transform .25s ease,background .2s,color .2s;flex:none} .macc-card.macc-open .macc-chev{transform:rotate(180deg);color:var(--cyan);background:rgba(var(--cyan-rgb),.12)} .sec.darkband .macc-chev{background:var(--slate2);color:var(--smut)} .sec.darkband .macc-card.macc-open .macc-chev{color:var(--bcyan);background:rgba(var(--bcyan-rgb),.16)} .adv .macc-chev{top:14px;right:14px} /* One consistent mobile card typography scale, applied to EVERY card type on the site — .card, .icard, .accelcard, .adv, .person, .shapecard. Previously these ranged from 14.5px to 21px for headings and 12.5px to 14.5px for body text with no consistent logic, so cards felt randomly sized against each other. Mobile only (≤640px); desktop/tablet keep their existing per-component sizing untouched. !important is used deliberately here so this one rule is the single source of truth for mobile card text, instead of being overridden by each card type's own more-specific desktop rule. */ .card h3,.card h4,.icard h4,.accelcard h4,.adv h3,.person h3,.shapecard h3{ font-size:17px !important;line-height:1.32 !important; } .card p,.icard p,.accelcard p,.adv p,.person p,.shapecard p{ font-size:14.5px !important;line-height:1.56 !important; } /* Icon-bearing collapsed cards (.icard, .accelcard, .shapecard) were stacking the icon above the heading with a big gap between them — fine on a wide desktop card, but on a collapsed mobile row (icon + heading is *all* that's visible until tapped open) it read as two small, disconnected things floating in a mostly-empty box rather than one clear list item. Icons bump up substantially and sit beside the heading instead, so a collapsed card reads the way a well-designed settings/list row does: icon, title, done — not a shrunken desktop layout. Work.html's case-study tabs (.stab/.spanel) are a different, already-good pattern and are deliberately left untouched here. */ .icard,.accelcard{ display:grid !important;grid-template-columns:56px 1fr;column-gap:16px;row-gap:0; align-items:center; } .icard .ic,.accelcard .ic{ grid-column:1;grid-row:1;width:56px !important;height:56px !important; border-radius:15px !important;align-self:center; } .icard .ic svg,.accelcard .ic svg{width:27px !important;height:27px !important} .icard h4,.accelcard h4{grid-column:2;grid-row:1;margin-top:0 !important;align-self:center} .icard p,.accelcard p{grid-column:1/-1;margin-top:14px !important} .shapecard{ display:grid !important;grid-template-columns:56px 1fr;column-gap:16px;row-gap:2px; } .shapecard .shbadge{ grid-column:1;grid-row:1/3;width:56px !important;height:56px !important; align-self:center; } .shapecard .shbadge svg{width:26px !important;height:26px !important} .shapecard .shk{grid-column:2;grid-row:1;margin-top:0} .shapecard h3{grid-column:2;grid-row:2;margin-top:2px !important} .shapecard p,.shapecard .shev{grid-column:1/-1;margin-top:14px !important} } /* ===== Delivery-flow widget (how-we-deliver #dflow) ===== */ #dflow{--dfline:#E6E4DC;--dfline2:#D8D6CD;--dfease:cubic-bezier(.22,.72,.24,1);--dfsh-sm:0 1px 2px rgba(28,30,36,.05),0 2px 8px rgba(28,30,36,.05);--dfsh-md:0 2px 4px rgba(28,30,36,.04),0 12px 32px rgba(28,30,36,.09)} #dflow /* spine — compact */ .df-journey{margin-top:44px} #dflow .df-phases{display:grid;grid-template-columns:repeat(9,1fr);margin-bottom:8px} #dflow .df-phase{grid-column:span 3;text-align:center;font-family:var(--box);font-weight:600;font-size:13px;padding-bottom:9px;position:relative;color:var(--dim);transition:color .4s} #dflow .df-phase::after{content:'';position:absolute;left:10%;right:10%;bottom:0;height:2.5px;border-radius:3px;background:currentColor;opacity:.22;transition:opacity .4s} #dflow .df-phase::before{content:'';position:absolute;left:10%;right:10%;bottom:0;height:2.5px;border-radius:3px;background:var(--ph,currentColor);transform:scaleX(var(--pp,0));transform-origin:left;z-index:1} #dflow .df-phase.df-on{color:var(--ph)} #dflow .df-phase.df-on::after{opacity:1} #dflow .df-spine{position:relative;height:74px;margin-bottom:2px} #dflow .df-track,#dflow .df-fill{position:absolute;top:calc(50% - 11px);height:4px;border-radius:4px;transform:translateY(-50%)} #dflow .df-track{left:2.5%;right:2.5%;background:var(--dfline2)} #dflow .df-fill{left:2.5%;width:0;background:linear-gradient(90deg,#1596CE,var(--indigo) 45%,var(--green));transition:width .7s var(--dfease);box-shadow:0 0 12px rgba(var(--cyan-rgb),.35)} #dflow .df-nodes{position:absolute;inset:0 0 22px 0;display:flex;justify-content:space-between;padding:0 calc(2.5% - 20px)} #dflow .df-node{width:40px;height:40px;align-self:center;border-radius:50%;border:0;background:transparent;cursor:pointer;position:relative;padding:0} #dflow .df-node .df-disc{position:absolute;inset:6px;border-radius:50%;background:var(--bg);border:2px solid var(--dfline2);display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:11px;font-weight:600;color:#5B5F6A;transition:all .35s var(--dfease)} #dflow .df-node:hover .df-disc{border-color:var(--cyan);color:var(--cyan);transform:scale(1.08)} #dflow .df-node.df-done .df-disc{background:#1C1E24;border-color:#1C1E24;color:#fff} #dflow .df-node.df-on .df-disc{inset:2px;background:var(--ph,#0B709F);border-color:transparent;color:#fff;font-weight:700;box-shadow:var(--dfsh-md),0 0 14px rgba(var(--cyan-rgb),.22)} #dflow .df-node .df-ring{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .3s;background:conic-gradient(var(--ph,#0B709F) calc(var(--p,0)*1%), var(--dfline2) 0)} #dflow .df-node.df-on .df-ring{opacity:1} #dflow .df-node:focus-visible{outline:2.5px solid var(--cyan);outline-offset:3px} #dflow .df-node .df-nlabel{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%); font-family:var(--box);font-size:11.5px;font-weight:600;color:var(--dim);white-space:nowrap;transition:color .3s} #dflow .df-node.df-done .df-nlabel{color:var(--mut)} #dflow .df-node.df-on .df-nlabel{color:var(--txt)} #dflow .df-node .df-tip{position:absolute;bottom:calc(100% + 11px);left:50%;transform:translateX(-50%) translateY(4px); background:var(--txt);color:#fff;font-family:var(--box);font-size:13px;font-weight:600;padding:8px 15px;border-radius:10px; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--dfease),transform .2s var(--dfease);box-shadow:var(--dfsh-md);z-index:5} #dflow .df-node .df-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--txt)} #dflow .df-node:hover .df-tip,#dflow .df-node:focus-visible .df-tip{opacity:1;transform:translateX(-50%) translateY(0)} #dflow .df-node.df-tip-l .df-tip{left:0;transform:translateX(0) translateY(4px)} #dflow .df-node.df-tip-l:hover .df-tip,#dflow .df-node.df-tip-l:focus-visible .df-tip{transform:translateX(0) translateY(0)} #dflow .df-node.df-tip-l .df-tip::after{left:18px} #dflow .df-node.df-tip-r .df-tip{left:auto;right:0;transform:translateX(0) translateY(4px)} #dflow .df-node.df-tip-r:hover .df-tip,#dflow .df-node.df-tip-r:focus-visible .df-tip{transform:translateX(0) translateY(0)} #dflow .df-node.df-tip-r .df-tip::after{left:auto;right:12px} #dflow /* stage card — compact */ .df-stagecard{margin-top:18px;background:var(--card);border:1px solid var(--dfline);border-radius:20px;box-shadow:var(--dfsh-md);overflow:hidden} #dflow .df-sc-head{padding:16px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--dfline)} #dflow .df-sc-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} #dflow .df-sc-title .df-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600} #dflow .df-sc-title h2{font-family:var(--head);font-weight:800;font-size:clamp(18px,2.1vw,24px);letter-spacing:-.022em;margin:0} #dflow .df-sc-meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end} #dflow .df-chiprow,#dflow .df-ctrlrow{display:contents} #dflow .df-chip{font-family:var(--box);font-size:12px;font-weight:600;padding:6px 13px;border-radius:100px;white-space:nowrap;border:1.5px solid transparent} #dflow .df-chip.df-phase0{color:var(--cyan);background:rgba(var(--cyan-rgb),.08);border-color:rgba(var(--cyan-rgb),.25)} #dflow .df-chip.df-phase1{color:var(--indigo);background:rgba(var(--indigo-rgb),.08);border-color:rgba(var(--indigo-rgb),.25)} #dflow .df-chip.df-phase2{color:var(--green);background:rgba(var(--green-rgb),.08);border-color:rgba(var(--green-rgb),.25)} #dflow .df-chip.df-prod{color:var(--green);background:transparent;border:1.5px dashed rgba(var(--green-rgb),.5);font-size:11.5px} #dflow .df-navbtns{display:flex;gap:7px} #dflow .df-nbtn,#dflow .df-mapctl{width:40px;height:40px;border-radius:50%;border:1px solid var(--dfline2);background:var(--card);color:var(--txt);font-size:16px;cursor:pointer; transition:all .2s var(--dfease);display:flex;align-items:center;justify-content:center;flex:none} #dflow .df-nbtn:hover,#dflow .df-mapctl:hover{border-color:var(--txt);transform:translateY(-1px);box-shadow:var(--dfsh-sm)} #dflow .df-nbtn:focus-visible,#dflow .df-mapctl:focus-visible{outline:2.5px solid var(--cyan);outline-offset:2px} #dflow .df-mapctl svg{width:11px;height:12px} #dflow .df-sc-body{padding:14px 26px 16px} #dflow .df-maptop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px} #dflow .df-mlegend{display:flex;gap:14px;flex-wrap:wrap} #dflow .df-mlegend .df-li{display:flex;align-items:center;gap:7px;font-family:var(--box);font-weight:600;font-size:12.5px;color:var(--mut)} #dflow .df-mlegend .df-sw{width:22px;height:4px;border-radius:4px;opacity:.6} #dflow .df-mlegend .df-term{width:12px;height:12px;border-radius:50%;background:var(--card);border:3px solid var(--txt)} #dflow /* drawer */ .df-drawer{overflow:hidden;border:1px solid var(--dfline);border-radius:16px;background: radial-gradient(ellipse 70% 60% at 85% 20%,rgba(var(--indigo-rgb),.05),transparent 60%),var(--bg)} #dflow .df-dtrack{display:flex;width:200%;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden} #dflow .df-dtrack.df-animate{transition:transform 1.15s cubic-bezier(.4,.6,.25,1)} #dflow .df-dpanel{width:50%;flex:none;min-width:0} #dflow .df-mapscroll{position:relative;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} #dflow .df-mapscroll::-webkit-scrollbar{display:none} #dflow .df-mapscroll svg{display:block;min-width:820px;width:100%;height:auto} #dflow .df-st-label{font-family:var(--box);font-weight:600;font-size:13.5px;fill:var(--txt);letter-spacing:-.005em} #dflow .df-lane-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600} #dflow .df-term-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;fill:var(--dim)} #dflow .df-term-key{font-family:var(--box);font-weight:700;font-size:14px;fill:var(--txt)} #dflow .df-rail{fill:none;stroke-linecap:round;stroke-linejoin:round} #dflow .df-exitarrow{animation:df-arrowpulse 1.8s ease-in-out infinite} @keyframes df-arrowpulse{0%,100%{opacity:.45} 50%{opacity:1} } #dflow .df-transfer{stroke:var(--dfline2);stroke-width:2;stroke-dasharray:3 6;stroke-linecap:round} #dflow .df-stn{fill:var(--card);stroke-width:2.4;transition:fill .25s} #dflow .df-stn-ring{fill:none;stroke:var(--txt);stroke-width:1.5;opacity:.85} #dflow .df-train{stroke:#fff;stroke-width:2} #dflow .df-terminal .df-tc{fill:var(--card);stroke:var(--txt);stroke-width:3.6;transition:all .3s} #dflow .df-terminal .df-to{fill:none;stroke:var(--txt);stroke-width:1.5;opacity:.45;transform-origin:center;transform-box:fill-box} #dflow .df-terminal .df-chk{fill:none;stroke:var(--green);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26} #dflow .df-terminal.df-lit .df-tc{stroke:var(--green)} #dflow .df-terminal.df-lit .df-chk{transition:stroke-dashoffset .5s var(--dfease) .1s;stroke-dashoffset:0} #dflow .df-terminal.df-lit .df-to{stroke:var(--green);opacity:.6;animation:df-tpulse 1.6s ease-out infinite} @keyframes df-tpulse{0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.5);opacity:0} } #dflow .df-celebration{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:4} #dflow .df-celebration i{position:absolute;left:85%;top:46%;width:7px;height:11px;border-radius:2px;opacity:0; animation:df-pop 1.6s cubic-bezier(.2,.7,.3,1) var(--dl,0s) forwards} @keyframes df-pop{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.6)} 10%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)} 100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,-120px)) rotate(var(--rot,180deg)) scale(.9)} } #dflow /* gate banner — slim */ .df-gaterow{margin:12px 14px 14px;display:flex;align-items:center;gap:16px;padding:14px 22px;border-radius:12px;background:var(--txt);color:#fff} #dflow .df-gaterow .df-diamond{width:13px;height:13px;transform:rotate(45deg);border:3px solid var(--amber);flex:none;border-radius:2px;animation:df-dpulse 2.6s ease-in-out infinite} @keyframes df-dpulse{0%,100%{box-shadow:0 0 0 0 rgba(192,122,0,.4)} 50%{box-shadow:0 0 0 7px rgba(192,122,0,0)} } #dflow .df-gaterow .df-gwrap{min-width:0} #dflow .df-gaterow .df-gl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C9CEDC;display:block;margin-bottom:2px;font-weight:600} #dflow .df-gaterow p{margin:0;font-family:var(--box);font-weight:600;font-size:clamp(14px,1.6vw,16.5px);letter-spacing:-.01em;line-height:1.35} #dflow .df-gaterow .df-plain{margin-top:2px;font-family:var(--sans);font-weight:500;font-size:12.5px;color:#AEB6C6} #dflow .df-gaterow .df-proof{margin-left:auto;text-align:right;flex:none;max-width:270px} #dflow .df-gaterow .df-proof .df-pl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8FE7B8;display:block;margin-bottom:2px;font-weight:600} #dflow .df-gaterow .df-proof p{font-family:var(--sans);font-weight:500;font-size:12.5px;color:#DDE2EC;line-height:1.45} #dflow /* footer row: reporting + note in one line */ .df-underrow{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} #dflow .df-underrow .df-rl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--dim)} #dflow .df-rtag{font-family:var(--box);font-size:11.5px;font-weight:600;color:var(--mut);background:var(--bg);border:1px solid var(--dfline2);padding:5px 11px;border-radius:100px;white-space:nowrap} #dflow .df-disclaim{margin-left:auto;font-size:11.5px;color:var(--dim)} #dflow .df-dots{display:flex;gap:2px;justify-content:center;margin-top:14px} #dflow .df-dots button{width:32px;height:32px;border-radius:50%;border:0;background:transparent;cursor:pointer;position:relative;padding:0} #dflow .df-dots button::after{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--dfline2);transition:all .3s var(--dfease)} #dflow .df-dots button:hover::after{background:var(--dim)} #dflow .df-dots button.df-on::after{inset:10.5px;background:var(--txt)} #dflow .df-dots button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px} #dflow .df-vocab{margin-top:20px;text-align:center;font-family:var(--box);font-size:13.5px;color:var(--dim);font-weight:500} #dflow .df-vocab b{color:var(--txt);font-weight:600} #dflow .df-vocab .df-a{color:var(--cyan);margin:0 7px} #dflow .df-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} #dflow .df-mobilenav{display:none} #dflow .df-mchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px} #dflow .df-mchips::-webkit-scrollbar{display:none} #dflow .df-mchip{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--box);font-size:12.5px;font-weight:600; color:#4A4E58;background:var(--card);border:1.5px solid var(--dfline2);border-radius:100px;padding:9px 14px;cursor:pointer; transition:all .25s var(--dfease);white-space:nowrap} #dflow .df-mchip .df-mn{font-family:var(--mono);font-size:11px;color:#5B5F6A;font-weight:600} #dflow .df-mchip.df-done{border-color:var(--txt);color:var(--txt)} #dflow .df-mchip.df-done .df-mn{color:var(--green)} #dflow .df-mchip.df-on{background:#1C1E24;border-color:#1C1E24;color:#fff} #dflow .df-mchip.df-on .df-mn{color:#8FE7B8} #dflow .df-mprog{margin-top:9px;height:3px;border-radius:3px;background:var(--dfline2);overflow:hidden} #dflow .df-mfill{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#1596CE,var(--indigo) 45%,var(--green));transition:width .7s var(--dfease)} @media (max-width:900px){ #dflow .df-gaterow{flex-wrap:wrap} #dflow .df-gaterow .df-proof{margin-left:29px;text-align:left;max-width:none} #dflow .df-disclaim{margin-left:0} }@media (max-width:640px){ #dflow .df-phases{display:none} #dflow .df-spine{display:none} #dflow .df-mobilenav{display:block} #dflow .df-sc-head,#dflow .df-sc-body{padding-left:16px;padding-right:16px} /* Stabilise the stage-card header. The chip row (phase chip + "governs the product's AI too" chip) was the last source of dancing: its content differs stage to stage (0, 1, or 2 chips), which still shifted the control row up/down beneath it even once separated. On mobile the chip row is dropped entirely — the phase name is already shown by the active pill in the tab strip above (df-mchips), so nothing is lost — and the header becomes three fully fixed rows: stage label, title, controls. */ #dflow .df-sc-head{flex-direction:column;align-items:stretch;row-gap:8px} #dflow .df-sc-title{width:100%;flex-direction:column;align-items:flex-start;row-gap:4px} #dflow .df-sc-title h2{font-size:19px} #dflow .df-sc-meta{width:100%;flex-direction:column;align-items:stretch;row-gap:10px} #dflow .df-chiprow{display:none} #dflow .df-ctrlrow{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:2px} }@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } /* ================= 26 · MOBILE PAGE PAGER (site-wide) ================= */ /* A plain in-flow prev/next link pair placed right before the footer on every page. Because it sits in normal document flow (never fixed or absolutely positioned) it can never overlap other content — reaching the bottom of a page's scroll always surfaces a clear, tappable way to move to the next or previous page in the site. Desktop already has the full nav bar for this, so the pager stays hidden there. */ .pagepager{display:none} @media(max-width:760px){ .pagepager{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:1120px;margin:0 auto;padding:0 20px 32px} .pagepager.pp-single{grid-template-columns:1fr} .pp-tile{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:18px;text-decoration:none;min-height:44px;justify-content:center; transition:border-color .25s,transform .15s,box-shadow .25s,background .3s} .pp-tile:active{transform:scale(.97)} .pp-tile:focus-visible{border-color:rgba(var(--cyan-rgb),.5)} .pp-tile:focus-visible{outline:2.5px solid var(--cyan);outline-offset:2px} .pp-next{text-align:right;align-items:flex-end} .pp-dir{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:700} .pp-name{font-family:var(--head);font-weight:700;font-size:15px;color:var(--txt);line-height:1.25} } @media(max-width:560px){ .pagepager{padding:0 16px 28px} .pp-tile{padding:14px 16px} } /* ================= 27 · HOW WE DELIVER — CLICK CHAPTER ACCORDION ================= */ /* Runs at every screen size (see site.js section 26b — no viewport check there any more), so this styling isn't gated behind a media query either. grid-template-rows 0fr→1fr gives a smooth height animation with no manual measuring. Header + panel share one bordered box (.hwd-acc- item) so the accordion has a visible boundary at rest, not just plain text sitting in the page. The border itself stays a neutral grey at every state on purpose — open vs. collapsed is communicated by the background tint, the shadow, and the numeral badge filling in solid, not by recolouring the edge of the box. A faint ambient shadow sits on every card even at rest (not just on hover/open), so the boundary still reads clearly even though the border colour itself is deliberately very light. */ .hwd-acc-item{position:relative;border:1.5px solid var(--line);border-radius:18px;background:var(--card); overflow:hidden;box-shadow:0 1px 4px rgba(28,30,36,.045); transition:border-color .3s,background-color .3s,box-shadow .3s,transform .25s} .hwd-acc-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:rgba(var(--cyan-rgb),.3);transition:background .3s} .hwd-acc-item.hwd-open::before{background:var(--cyan)} .hwd-acc-item:hover{border-color:var(--line2)} .hwd-acc-item.hwd-open{border-color:var(--line2);background:color-mix(in srgb, var(--card) 96%, var(--cyan) 4%); box-shadow:0 10px 28px rgba(28,30,36,.08)} @media(hover:hover) and (pointer:fine){ .hwd-acc-item:hover{transform:translateY(-1px)} } /* Dark-band chapters (maturity, pipeline, gates, console) previously kept their dark theme even in the collapsed accordion list, so the sequence of cards alternated jarringly between light and dark boxes. Per feedback, every chapter's card now follows the same light theme regardless of the section's own background — variety comes from the content once you open it, not from the list itself. Rather than overriding every individual dark-themed rule that could apply inside a chapter's content (labels, ledes, nested cards, chip colours — a long, easy-to-miss list), this reassigns the underlying dark-theme CSS variables to their light equivalents at the .hwd-acc-item boundary. Everything downstream that reads --stxt/--smut/--sdim/--bcyan/ --sline/--slate (dozens of rules across the stylesheet) picks up the light values automatically, without needing to hunt down and duplicate each one. Bespoke dark-mode UI components with their own explicit dark styling (the console/terminal mockups, the orbit screen bezel) are unaffected — they set their own colours directly rather than reading these shared tokens, which is appropriate since those are meant to look like dark instrument panels regardless of the surrounding page theme. */ .sec.darkband .hwd-acc-item{ --stxt:var(--txt);--smut:var(--mut);--sdim:var(--dim); --bcyan:var(--cyan);--bcyan-rgb:var(--cyan-rgb);--bcyan2-rgb:var(--cyan-rgb); --sline:var(--line);--sline2:var(--line2); --slate:var(--card);--slate2:var(--bg2);--slate3:var(--bg); --slate-rgb:var(--card-rgb, 251,250,246);--slate2-rgb:var(--bg2-rgb, 236,235,227); background:var(--card);border-color:var(--line);color:var(--txt); box-shadow:0 1px 4px rgba(28,30,36,.045);position:relative} .sec.darkband .hwd-acc-item:hover{border-color:var(--line2)} .sec.darkband .hwd-acc-item.hwd-open{border-color:var(--line2);background:color-mix(in srgb, var(--card) 96%, var(--cyan) 4%); box-shadow:0 10px 28px rgba(28,30,36,.1)} .hwd-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.22,.72,.24,1)} .hwd-collapse-inner{min-height:0;overflow:hidden} .hwd-acc-item.hwd-open .hwd-collapse{grid-template-rows:1fr} .hwd-chhead{position:relative;cursor:pointer;padding:16px 40px 16px 12px;-webkit-tap-highlight-color:transparent} .hwd-acc-item.hwd-open .hwd-chhead{padding-bottom:11px} .hwd-acc-item.hwd-open .hwd-collapse-inner{padding:4px 12px 16px} .hwd-chhead .label,.hwd-chhead h2{margin-left:0} /* The gap above the title (label's own margin-bottom) was noticeably bigger than the gap below it (the header's own bottom padding) — 22px vs 15px — so a collapsed card read as slightly top-heavy. Evened out to 16px both ways, matching the header's top padding too, so the space above and below the title is the same all the way around. */ .hwd-chhead .label{margin-bottom:16px} /* The heading was inheriting the site's full-page hero scale (clamp(27px,3.8vw,44px)) — appropriate for a headline with the whole page around it, too big a jump from an 11px mono label with nothing between them inside a compact card. A smaller, dedicated scale here gives the eye an intermediate step (label → heading → body) instead of one big jump, and reads more like a list of chapter titles than a stack of hero banners. */ .hwd-chhead h2{font-size:clamp(19px,4.6vw,25px);line-height:1.22} /* Even with every heading shortened to roughly the same word count, some still wrap to one line and others to two depending on exact word lengths — "What's underneath." fits on one line, "Craft doesn't scale. Systems do." doesn't quite. Reserving space for two lines regardless means every collapsed card ends up exactly the same height rather than splitting into a "one-line" and "two-line" group. */ .hwd-chhead h2{min-height:47px} .hwd-chhead .label{font-size:13.5px;font-weight:800} .hwd-chchev{position:absolute;top:13px;right:10px;display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;background:var(--bg2);color:var(--dim);flex:none; transition:transform .3s ease,background .2s,color .2s} .hwd-acc-item.hwd-open .hwd-chchev{transform:rotate(180deg);color:var(--cyan);background:rgba(var(--cyan-rgb),.14)} .sec.darkband .hwd-chchev{background:var(--bg2);color:var(--dim)} .sec.darkband .hwd-acc-item.hwd-open .hwd-chchev{color:var(--cyan);background:rgba(var(--cyan-rgb),.14)} .hwd-chhead:focus-visible{outline:2.5px solid var(--cyan);outline-offset:-2px;border-radius:14px} /* A subtle marker on the currently-open chapter's label, echoing the cyan accent used for active state everywhere else on the site (nav link, dflow node). Descendant selector (not a direct-child one) because the label now sits inside the .hwd-chhead wrapper, one level deeper than before. */ .hwd-active .hwd-chhead .label{color:var(--cyan)} .sec.darkband.hwd-active .hwd-chhead .label{color:var(--bcyan)} /* The label's trailing divider rule (see .label::after above) is doing the same "there's more here" job the chevron and card border already do in this context — three signifiers for one fact. Drop the rule only inside the accordion header; every other section label on the site keeps it. */ .hwd-chhead .label::after{content:none} /* The section wrapping each chapter still carried the site's normal 80/66/56px top+bottom section padding, meant for full-page sections — around a small collapsed accordion card that reads as a huge gap between cards. Collapse it down to something proportionate to the card itself, at every breakpoint (placed last so it wins over the .sec media queries above it, regardless of viewport width). Horizontal padding is trimmed as far as it can go while still leaving a visible page gutter, so the card — and the heading inside it — gets as much of the screen's actual width as possible instead of losing it to two stacked gutters (section padding, then the card's own internal padding). */ .hwd-chapter{padding:18px 8px !important} /* The cards themselves are already a consistent light theme regardless of chapter (see the darkband override below), but the section behind each card was still whatever background that chapter originally had — plain cream, one of three subtle tints (.ta/.tb/.tc), or dark slate for darkband chapters — so the page alternated through four different background colours behind a uniform row of cards, a patchwork look. Forced to one flat background on mobile so the whole page reads as one consistent surface, with variety coming from the cards' content once opened, not from the page background between them. */ .hwd-chapter{background:var(--bg) !important;border-bottom:0 !important} /* Found via screenshot: the darkband "rain" canvas (falling-glyph effect) paints its own opaque near-black fill directly onto the canvas via JS — that's not a CSS background, so overriding .hwd-chapter's background above did nothing to it; it kept rendering as a solid dark rectangle inside an otherwise-light card row. It's a decorative flourish for a dark section that no longer exists on mobile, so it's simplest to hide it outright here rather than teach the drawing loop about a light mode it was never designed for. The darkband border-bottom (also a leftover dark-theme line, independent of background-colour) is dropped too. */ .hwd-chapter .bandrain{display:none} /* The intro chapter (#why) still carried its full-page hero decoration — large blurred colour glows (.topglow) sitting behind the section's content. Every other chapter's section has no such decoration, so on mobile this one chapter alone sat on a subtly tinted/glowing backdrop while the rest sat on the flat, uniform .hwd-chapter background set above — the actual source of "chapter 1's background doesn't match chapter 2's". Hidden here the same way the watermark SVG already is. */ .hwd-chapter .topglow{display:none} /* The "For Technical Readers" divider between chapters kept its dark background even after every chapter card around it went light — lightened to match, on mobile only (desktop keeps the original dark divider, which reads fine against the surrounding full-page sections there). */ @media(max-width:640px){ .techstrip{background:var(--bg2) !important;border-color:var(--line) !important} .techstrip::before{background:repeating-linear-gradient(-45deg,rgba(var(--cyan-rgb),.05) 0 12px,transparent 12px 24px) !important} .techstrip-text{color:var(--cyan) !important} } .hwd-chapter + .hwd-chapter::before, .hwd-chapter:has(+ .hwd-chapter)::after{display:none} /* A connecting rail through the numeral badges, echoing the timeline motif already used in "How we got here" earlier on this page. An earlier version reached into each card via negative top/bottom offsets so it would be continuous even behind card content — solid cards paint over it in principle, but in practice this read as a line crossing through cards rather than connecting them, especially at rounded corners. Replaced with two short stubs per chapter (one above, one below) that stay strictly within the gap between cards and never enter a card's own box — a cleaner, unambiguous "link" rather than a line that appears to run through things. */ .hwd-chapter .wrap{position:relative} .hwd-chapter .wrap::before{content:'';position:absolute;left:29px;top:-18px;height:18px;width:1.5px;background:var(--line2)} .hwd-chapter .wrap::after{content:'';position:absolute;left:29px;bottom:-18px;height:18px;width:1.5px;background:var(--line2)} .hwd-chapter.hwd-first .wrap::before{display:none} .hwd-chapter.hwd-last .wrap::after{display:none} /* ================= 29 · CROSS-PAGE MOBILE POLISH ================= */ /* The hero eyebrow ("ENTERPRISE SOFTWARE · REGULATED INDUSTRIES · AHEAD OF THE CURVE" and its equivalents on every page) is a nice wayfinding breadcrumb on a wide screen, but on a phone, ahead of a big headline that already says the same thing in plainer words, it just adds visual noise before the reader gets to the actual point. Hidden on mobile, site-wide — the headline alone still identifies the page and section. */ @media(max-width:640px){ .hero .eyebrow{display:none} } /* ================= 30 · RAILBAND TREATMENT FOR ICON CARDS (mobile) ================= */ /* Every expandable icon card (.icard — chapter-one principles and the homepage "Agentic engineering" cards; .accelcard — the four accelerators; .shapecard — engagement.html's "Three shapes") now uses the same visual language as the "Proven in the field" case-study cards on the homepage (.card.railcard): a full-height coloured band on the left edge with the icon centred in it, rather than a small icon floating above the heading. One consistent pattern for "collapsed card with an icon" across the whole site, mobile only — desktop is untouched, and no copy was added or changed, only re-laid-out. */ @media(max-width:640px){ .icard,.accelcard,.shapecard{display:flex !important;align-items:stretch;padding:0 !important;overflow:hidden} .icard .ic,.accelcard .ic,.shapecard .shbadge{ flex:none;width:56px;height:auto !important;align-self:stretch; border-radius:0 !important;border:0 !important;border-right:2.5px solid var(--cyan); background:rgba(var(--cyan-rgb),.06) !important; display:flex;align-items:center;justify-content:center;padding-top:18px} .icard.iv-indigo .ic,.accelcard.iv-indigo .ic{border-right-color:var(--indigo);background:rgba(var(--indigo-rgb),.06) !important} .icard.iv-amber .ic,.accelcard.iv-amber .ic{border-right-color:var(--amber);background:rgba(var(--amber-rgb),.08) !important} .icard.iv-green .ic,.accelcard.iv-green .ic{border-right-color:var(--green);background:rgba(var(--green-rgb),.06) !important} .shapecard.b .shbadge{border-right-color:var(--indigo);background:rgba(var(--indigo-rgb),.06) !important} .icard .railbody,.accelcard .railbody,.shapecard .railbody{ padding:18px 44px 18px 16px;display:flex;flex-direction:column;flex:1;min-width:0} .icard h4,.accelcard h4,.shapecard h3,.shapecard .shk{margin-top:0 !important;align-self:stretch !important;text-align:left !important} .icard p,.accelcard p,.shapecard p,.shapecard .shev{margin-top:10px !important} } /* ================= 31 · SHORT CHAPTER TITLES ON MOBILE ================= */ /* Chapter labels like "One engagement, traced stage by stage" or "The gates in the middle never change" wrap to two lines in the accordion header on a phone — fine as a page-wide breadcrumb with room to spare, too much text for a compact collapsed row. Each label now carries a short 2–3 word version alongside the full one; mobile shows the short one only, desktop keeps the full text unchanged. */ .label-full{display:inline} .label-short{display:none} @media(max-width:640px){ .label-full{display:none} .label-short{display:inline} } /* Same idea, applied to the five chapter headings that ran noticeably longer than the rest (up to 15 words — "Your product is what you receive. The console is how you watch it being built.") — a long heading on a short collapsed card also meant collapsed card heights varied a lot chapter to chapter. Shortened to a single punchy line on mobile, in the same 3–7 word range as every other chapter's heading; desktop keeps the original full sentence. */ .h2-full{display:inline} .h2-short{display:none} @media(max-width:640px){ .h2-full{display:none} .h2-short{display:inline} } /* ================= 32 · CONSISTENT LEFT-ALIGNED CARDS (mobile) ================= */ /* .gnode ("AI builds / System checks / Engineer approves / Proof generated") was the one remaining card centring its icon and text above one another — everywhere else on the site now uses the icon-band-on-the-left pattern. Brought in line with the same railband treatment as .icard/.accelcard/.shapecard, including its existing colour variants (.checks/.human/.proof). The connecting arrows between cards (.garrow) are separate elements between .gnode divs, untouched by this. */ @media(max-width:640px){ .gnode{display:flex !important;align-items:stretch;padding:0 !important;overflow:hidden;text-align:left} .gnode .gi{ flex:none;width:56px;height:auto !important;align-self:stretch;margin:0 !important; border-radius:0 !important;border-right:2.5px solid var(--cyan); background:rgba(var(--cyan-rgb),.06) !important; display:flex;align-items:center;justify-content:center;padding-top:18px} .gnode.checks .gi{border-right-color:var(--indigo);background:rgba(var(--indigo-rgb),.1) !important} .gnode.human .gi{border-right-color:var(--amber);background:rgba(var(--amber-rgb),.12) !important} .gnode.proof .gi{border-right-color:var(--green);background:rgba(var(--green-rgb),.1) !important} .gnode .railbody{padding:18px 18px 18px 16px;display:flex;flex-direction:column;flex:1;min-width:0} .gnode h4{margin-top:0 !important} .gnode h4::after{margin:0} .gnode p{margin-top:10px !important} /* Advisor placeholder cards (company.html) were the one remaining accordion card centring its content — smaller, left-aligned avatar instead, matching every other card's icon treatment. */ .adv{text-align:left !important} .adv .ava{width:48px;height:48px;margin:0 0 12px 0 !important} .adv .ava svg{width:24px;height:24px} } /* ===== V20.9 review fixes ===== */ .band .bandmail{margin-top:30px;display:flex;justify-content:center;position:relative;z-index:2} .band .mailnote{color:var(--smut)} @media(max-width:640px){ .mailbox .mcopy{min-width:44px;justify-content:center} .cs-navbtn{width:40px;height:40px} } /* ===== Floating section rail (desktop only) — V20.10 ===== */ #secrail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:70;display:none;flex-direction:column;align-items:center; gap:2px;padding:10px 0;width:48px;border-radius:30px;transition:background .3s,opacity .3s} #secrail .sr-item{position:relative;width:38px;height:38px;border-radius:50%;border:0;background:transparent;cursor:pointer; display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);padding:0;transition:background .25s,color .25s,transform .25s} #secrail .sr-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #secrail .sr-item:hover{color:#fff;background:rgba(255,255,255,.12)} #secrail .sr-item.on{background:var(--cyan);color:var(--ink);box-shadow:0 4px 14px rgba(var(--cyan-rgb),.35)} #secrail .sr-item:focus-visible{outline:2px solid var(--bcyan);outline-offset:2px} #secrail .sr-sep{width:22px;height:1px;background:rgba(255,255,255,.18);margin:5px 0} /* label pill — always shown for the active item, shown for others on hover/focus */ #secrail .sr-lbl{position:absolute;right:calc(100% + 14px);top:50%;transform:translate(6px,-50%);white-space:nowrap;pointer-events:none; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; color:#fff;background:rgba(var(--slate2-rgb,28,33,43),.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:6px 11px; opacity:0;transition:opacity .2s,transform .2s} #secrail .sr-lbl .sr-n{color:var(--bcyan);margin-right:7px;font-weight:700} #secrail .sr-item.on .sr-lbl,#secrail .sr-item:hover .sr-lbl,#secrail .sr-item:focus-visible .sr-lbl{opacity:1;transform:translate(0,-50%)} #secrail .sr-item.on .sr-lbl{background:var(--slate2);border-color:rgba(var(--cyan-rgb),.5)} /* only on desktop-class viewports; never on phones/tablets */ @media (min-width:1024px) and (min-height:620px) and (hover:hover){#secrail{display:flex}} @media (min-width:1024px) and (max-width:1239px){#secrail{width:40px;right:10px}#secrail .sr-item{width:32px;height:32px}#secrail .sr-item svg{width:17px;height:17px}} @media (prefers-reduced-motion:reduce){#secrail,#secrail .sr-item,#secrail .sr-lbl{transition:none}} /* ===== Glass utilities: back-to-top caret (all pages) + mobile Chapters sheet (How We Deliver) — V20.11 ===== */ .glass{position:relative;isolation:isolate;color:#fff;border:1px solid rgba(255,255,255,.26); background: linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 46%,rgba(255,255,255,0) 54%,rgba(255,255,255,.07) 100%), rgba(var(--slate2-rgb,28,33,43),.26); -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6); box-shadow:0 12px 32px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.06); transition:background .3s,box-shadow .3s,border-color .3s} .glass:hover,.glass:focus-within{border-color:rgba(255,255,255,.36); background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.08) 46%,rgba(255,255,255,0) 54%,rgba(255,255,255,.09) 100%),rgba(var(--slate2-rgb,28,33,43),.38)} #totop{position:fixed;right:20px;bottom:20px;z-index:118;width:48px;height:48px;border-radius:50%;cursor:pointer;padding:0; display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);pointer-events:none; transition:opacity .3s,transform .3s,background .3s} #totop.show{opacity:1;transform:none;pointer-events:auto} #totop:focus-visible{outline:2px solid var(--bcyan);outline-offset:2px} #totop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media(max-width:640px){#totop{width:42px;height:42px;right:16px;bottom:19px}#totop svg{width:18px;height:18px}} #chapbtn{position:fixed;left:16px;bottom:20px;z-index:118;display:none;align-items:center;gap:8px;height:40px;padding:0 15px 0 13px;border-radius:100px;cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:background .3s,opacity .3s} #chapbtn .cb-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:100px;background:var(--cyan);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:0} #chapbtn:focus-visible{outline:2px solid var(--bcyan);outline-offset:2px} #chapsheet{position:fixed;inset:0;z-index:125;display:none} #chapsheet.open{display:block} #chapsheet .cs-back{position:absolute;inset:0;background:rgba(10,12,18,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} #chapsheet .cs-panel{position:absolute;left:0;right:0;bottom:0;max-height:min(78vh,640px);overflow:auto;border-radius:22px 22px 0 0;border-bottom:0; padding:10px 14px calc(16px + env(safe-area-inset-bottom));background:rgba(var(--slate2-rgb,28,33,43),.72); transform:translateY(100%);transition:transform .34s cubic-bezier(.22,.72,.24,1)} #chapsheet.open .cs-panel{transform:none} #chapsheet .cs-grip{width:38px;height:4px;border-radius:4px;background:rgba(255,255,255,.35);margin:2px auto 12px} #chapsheet .cs-head{display:flex;align-items:center;justify-content:space-between;padding:0 6px 10px; font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600} #chapsheet .cs-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1} #chapsheet .cs-list{list-style:none;margin:0;padding:0} #chapsheet .cs-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 8px;border:0;border-top:1px solid rgba(255,255,255,.1);background:transparent;color:#fff;cursor:pointer;font-family:var(--sans);font-size:15px} #chapsheet .cs-row:first-child{border-top:0} #chapsheet .cs-row .cs-n{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85)} #chapsheet .cs-row.on .cs-n{background:var(--cyan);border-color:var(--cyan);color:var(--ink)} #chapsheet .cs-row .cs-t{flex:1;min-width:0} #chapsheet .cs-row .cs-s{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)} #chapsheet .cs-row:active{background:rgba(255,255,255,.08)} /* Chapters control exists only where the desktop rail does not */ @media (max-width:1023px), (max-height:619px), (hover:none){#chapbtn{display:inline-flex}} body.cs-open #chapbtn{opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){#totop,#chapsheet .cs-panel{transition:none}} /* Adaptive glass: over light sections the chrome flips to a light tint with dark ink (JS toggles .glass-light) */ .glass.glass-light{color:var(--txt);border-color:rgba(28,30,36,.14); background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.45) 46%,rgba(255,255,255,.3) 54%,rgba(255,255,255,.5) 100%),rgba(255,255,255,.28); box-shadow:0 12px 32px rgba(28,30,36,.1),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(28,30,36,.04)} .glass.glass-light:hover,.glass.glass-light:focus-within{border-color:rgba(28,30,36,.2); background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.6) 46%,rgba(255,255,255,.45) 54%,rgba(255,255,255,.65) 100%),rgba(255,255,255,.4)} #secrail.glass-light .sr-item{color:rgba(28,30,36,.72)} #secrail.glass-light .sr-item:hover{color:var(--txt);background:rgba(28,30,36,.07)} #secrail.glass-light .sr-item.on{color:var(--ink)} #secrail.glass-light .sr-sep{background:rgba(28,30,36,.14)} #chapbtn.glass-light{color:var(--txt)} /* Navigation jumps switch the accordion height animation off for one frame so the scroll target is measured against settled layout */ body.hwd-instant .hwd-collapse{transition:none !important} /* ===== Mobile prev/next chapter stepper — V20.12 (replaces the Chapters sheet) ===== */ #chapstep{position:fixed;left:16px;bottom:19px;z-index:118;display:none;align-items:center;height:42px;padding:0 4px;border-radius:100px; font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;transition:background .3s,opacity .3s} #chapstep .st-btn{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s} #chapstep .st-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} #chapstep .st-btn:active{background:rgba(255,255,255,.14)} #chapstep.glass-light .st-btn:active{background:rgba(28,30,36,.08)} #chapstep .st-btn:disabled{opacity:.3;cursor:default} #chapstep .st-btn:focus-visible{outline:2px solid var(--bcyan);outline-offset:2px} #chapstep .st-n{min-width:38px;text-align:center;line-height:1;font-style:normal} #chapstep .st-n b{font-weight:700} #chapstep .st-n i{font-style:normal;opacity:.6;font-size:10.5px;margin-left:1px} @media (max-width:1023px), (max-height:619px), (hover:none){#chapstep{display:inline-flex}} /* Chapters sheet pill retired behind a JS flag — never show both */ body:has(#chapstep) #chapbtn{display:none} /* Rail + stepper stay hidden over the hero; fade in once the second section arrives (JS toggles .vis) — V20.13 */ #secrail,#chapstep{opacity:0;pointer-events:none;transition:opacity .4s ease,background .3s} #secrail.vis,#chapstep.vis{opacity:1;pointer-events:auto} #secrail{transition:opacity .4s ease,background .3s,transform .4s ease;transform:translateY(-50%) translateX(8px)} #secrail.vis{transform:translateY(-50%)} @media (prefers-reduced-motion:reduce){#secrail,#chapstep{transition:none;transform:translateY(-50%)}#chapstep{transform:none}} /* Nudge chapter-card inner content clear of the new left accent bar */ .hwd-chhead{padding-left:22px !important} .hwd-collapse-inner{padding-left:6px}