:where(x-h3,x-h4){display:block;font-weight:bold;unicode-bidi:isolate}:where(x-h3){font-size:1.17em;margin-block:1em}:where(x-h4){margin-block:1.33em}/* Layout concept: NYC editorial grid on a deep canvas; content lives on large rounded sheets that slide over one another. One orange accent. */
:root{
--canvas:#0B0B0A; --sheet:#141413; --sheet-2:#1C1C1A; --raise:#242422;
--fg:#F5F3EE; --muted:#A8A49C; --rule:#2E2D2A;
--accent:#ED6944; --accent-deep:#A63C1E; --on-accent:#1A1A1A; --link:#F08A6C;
--inv-bg:#FAF9F5; --inv-fg:#1A1A1A; --inv-muted:#555555; --inv-rule:#DCD9D0;
--focus:#8FB2FF; --glass:rgba(20,20,19,.78);
--display:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
--gutter:clamp(16px,4vw,56px); --r:clamp(24px,3vw,40px);
color-scheme:dark;
}
/* Light is the default site theme. Dark applies only after a visitor picks it with the theme button (data-mode="dark"). */
:root:not([data-mode="dark"]){
--canvas:#FAF9F5; --sheet:#FFFFFF; --sheet-2:#F1EFE8; --raise:#FFFFFF;
--fg:#1A1A1A; --muted:#555555; --rule:#DAD6CC;
--link:#C24A26; --inv-bg:#121211; --inv-fg:#F5F3EE; --inv-muted:#A8A49C; --inv-rule:#2E2D2A;
--focus:#1F5FD6; --glass:rgba(255,255,255,.82); color-scheme:light; }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--canvas); color:var(--fg); font:400 18px/1.6 var(--display); margin:0; overflow-x:clip; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--canvas)}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
.wrap{max-width:1440px; margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
.skip{position:absolute; left:12px; top:-60px; z-index:80; background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:999px; font-weight:600; text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.label{font:500 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.pill-label{display:inline-flex; align-items:center; gap:10px; padding:13px 14px 9px; border-radius:3px; color:#F5F3EE; font-weight:500; background:linear-gradient(#0A0A09 0 4px, rgba(245,243,238,.9) 4px 5.5px, #0A0A09 5.5px) ; box-shadow:0 0 0 1px var(--rule)}
.pill-label::before{content:""; width:13px; height:13px; border-radius:50%; background:var(--accent); flex:none}
h1,h2,h3,x-h3{margin:0; font-family:var(--display); text-wrap:balance}
h2{font-weight:600; font-size:clamp(38px,5.4vw,86px); line-height:.97; letter-spacing:-.042em}
h3,
x-h3{font-weight:600; font-size:clamp(21px,1.7vw,26px); line-height:1.15; letter-spacing:-.02em}
p{margin:0; text-wrap:pretty}
.lede{font-size:clamp(18px,1.45vw,21px); line-height:1.55; color:var(--muted); max-width:38ch}
/* Logo: original files, never retyped */
.logo{display:inline-flex; align-items:center; text-decoration:none; padding:6px 2px}
.logo .lg{width:171px; height:22px; background:no-repeat center/contain} .logo .lg.on-dark{background-image:url(../img/logo-on-dark.png)} .logo .lg.on-light{background-image:url(../img/logo-on-light.png)}
.logo .on-dark{display:block} .logo .on-light{display:none}
:root:not([data-mode="dark"]) .logo .on-dark{display:none} :root:not([data-mode="dark"]) .logo .on-light{display:block}
/* Buttons */
.btn{--h:52px; position:relative; display:inline-flex; align-items:center; gap:14px; height:var(--h); padding:0 8px 0 24px; border-radius:999px; font:600 16px/1 var(--display); letter-spacing:-.01em; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-ghost{border-color:var(--rule); color:var(--fg); padding-right:24px}
.btn .dot{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--on-accent); color:var(--accent); transition:transform .45s var(--ease)}
.btn:hover .dot{transform:rotate(-45deg)}
.btn-ghost:hover{background:var(--sheet-2)}
.roll{display:inline-block; overflow:hidden; height:1.1em; line-height:1.1}
.roll>span{display:block; transition:transform .5s var(--ease)}
.roll>span>i{font-style:normal; display:inline-block; transition:transform .5s var(--ease); transition-delay:calc(var(--i)*18ms)}
.roll .r2{position:absolute}
.btn:hover .roll i,.btn:focus-visible .roll i{transform:translateY(-110%)}
.roll{position:relative}
.roll .r2 i{transform:translateY(110%)}
.btn:hover .roll .r2 i,.btn:focus-visible .roll .r2 i{transform:translateY(0)}
.tlink{display:inline-flex; align-items:center; gap:8px; color:var(--link); font-weight:600; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size .45s var(--ease); padding:4px 0}
.tlink:hover,.tlink:focus-visible{background-size:100% 1.5px}
.tlink svg{transition:transform .45s var(--ease)} .tlink:hover svg{transform:translateX(4px)}
/* Header */
.site-header{position:fixed; z-index:50; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 12px); transition:transform .6s var(--ease)}
.site-header.hide{transform:translateY(calc(-100% - 24px))}
.bar{display:flex; align-items:center; gap:28px; height:64px; padding:0 8px 0 20px; border-radius:999px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--rule)}
.nav{display:flex; gap:4px; list-style:none; margin:0; padding:0; flex:1}
.nav>li>a,.nav>li>button{display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 14px; border-radius:999px; font:500 15px/1 var(--display); color:var(--fg); text-decoration:none; background:none; border:0; cursor:pointer}
.nav>li>a:hover,.nav>li>button:hover,.nav>li>button[aria-expanded="true"]{background:var(--sheet-2)}
.nav>li>a,.nav>li>button,.util{white-space:nowrap}
@media (min-width:861px) and (max-width:1360px){ .bar{gap:14px} .nav{gap:0} .nav>li>a,.nav>li>button{padding:0 9px; font-size:14.5px} .bar-right{gap:6px} .bar-right .btn-primary{font-size:15px; padding-left:18px} }
@media (min-width:1101px) and (max-width:1250px){ .util{display:none} }
@media (min-width:1101px) and (max-width:1160px){ .nav>li>a,.nav>li>button{padding:0 7px; font-size:14px} }
.nav>li>button svg{transition:transform .35s var(--ease)} .nav>li>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.bar-right{display:flex; align-items:center; gap:6px}
.util{font:500 13px/1 var(--display); color:var(--muted); text-decoration:none; padding:12px 10px; border-radius:999px}
.util:hover{color:var(--fg)}
.icon-btn{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:0; background:none; color:var(--fg); cursor:pointer}
.icon-btn:hover{background:var(--sheet-2)}
.bar .btn{--h:48px}
.menu-btn{display:none}
.mega{position:absolute; left:-1px; right:-1px; top:calc(100% + 10px)}
.mega-panel{border-radius:28px; background:var(--sheet); border:1px solid var(--rule); padding:28px; display:grid; gap:20px 28px; box-shadow:0 30px 80px -30px rgba(0,0,0,.45); max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px); overflow:auto; overscroll-behavior:contain}
:root:not([data-mode="dark"]) .mega-panel{box-shadow:0 34px 80px -34px rgba(26,26,26,.3), 0 2px 6px rgba(26,26,26,.04)}
.mega-panel[data-cols="svc"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) 268px; column-gap:24px}
.mega-panel[data-cols="agency"]{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}
.mega-h{font:500 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:4px 0 10px}
.mega-col ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.mega-item{display:grid; grid-template-columns:38px minmax(0,1fr) 16px; gap:12px; align-items:center; padding:9px 12px; margin-inline:-12px; border-radius:16px; text-decoration:none}
.mega-item:hover,.mega-item:focus-visible,.mega-item.is-pv{background:var(--sheet-2)}
.mi-ic{position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; border:1px solid var(--rule); color:var(--fg); transition:transform .5s var(--ease)}
.mi-ic::before{content:""; position:absolute; inset:-1px; border-radius:inherit; background:var(--accent); opacity:0; transform:scale(.5); transition:opacity .3s var(--ease), transform .5s var(--ease)}
.mi-ic svg{position:relative; width:19px; height:19px}
.mega-item:hover .mi-ic,.mega-item:focus-visible .mi-ic,.mega-item.is-pv .mi-ic{color:var(--on-accent); transform:rotate(-6deg)}
.mega-item:hover .mi-ic::before,.mega-item:focus-visible .mi-ic::before,.mega-item.is-pv .mi-ic::before{opacity:1; transform:none}
.mi-t{display:grid; gap:1px; min-width:0}
.mi-t b{font-weight:500; font-size:16px; line-height:1.3}
.mi-t small{font-size:13px; line-height:1.4; color:var(--muted)}
.mega-item > svg{opacity:0; transform:translateX(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease); color:var(--accent)}
.mega-item:hover > svg,.mega-item:focus-visible > svg{opacity:1; transform:none}
.mega-rail{position:relative; isolation:isolate; display:flex; flex-direction:column; gap:20px; padding:24px; border-radius:20px; background:var(--sheet-2); overflow:hidden}
.mega-rail::after{content:""; position:absolute; z-index:-1; right:-90px; top:-90px; width:240px; height:240px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent); pointer-events:none}
.mr-pv{display:grid; gap:10px; align-content:start; flex:1}
.mr-k{color:var(--link); margin:0}
.mr-h{font:600 22px/1.2 var(--display); letter-spacing:-.015em; margin:0; text-wrap:balance}
.mr-b{font-size:15px; line-height:1.55; color:var(--muted); margin:0}
.mr-x{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.mr-x:empty{display:none}
.mr-x li{padding:6px 10px; border-radius:999px; border:1px solid var(--rule); background:var(--sheet); font:500 11.5px/1.2 var(--mono); letter-spacing:.03em; color:var(--muted)}
.mr-foot{display:grid; gap:12px}
.mr-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
.mega-rail .btn{--h:46px}
.mr-note{margin:0; font-size:13px; line-height:1.45; color:var(--muted)}
:root:not([data-mode="dark"]) .mega-rail{--link:#983618}
.mi-t small .nw{white-space:nowrap}
.mega-scope{margin-top:18px; padding:18px 18px 16px; border-radius:16px; border:1px dashed var(--rule); display:grid; gap:6px}
.mega-scope p{margin:0; font-size:13.5px; line-height:1.5; color:var(--muted)}
.mega-scope .ms-h{font:600 15px/1.3 var(--display); color:var(--fg)}
.mega-scope .ms-min{color:var(--fg); font-weight:500}
.rm .mega *,.rm .mega *::before,.rm .nav>li>button svg{transition:none!important}
@media (max-width:1359px){
.mega-panel[data-cols="svc"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr)}
.mega-panel[data-cols="svc"] .mega-rail{grid-column:1/-1; flex-direction:row; align-items:center; gap:28px; padding:18px 22px}
.mega-panel[data-cols="svc"] .mr-h{font-size:18px}
.mega-panel[data-cols="svc"] .mr-pv{gap:6px}
.mega-panel[data-cols="svc"] .mr-b,.mega-panel[data-cols="svc"] .mr-x{display:none}
.mega-panel[data-cols="svc"] .mr-foot{flex:none; justify-items:end; text-align:right; gap:8px}
}
@media (max-height:820px){ .mega-panel{padding:22px 26px} .mega-item{padding:7px 12px} .mega-h{margin-bottom:6px} }
/* Mobile menu */
.mobile-menu{position:fixed; inset:0; z-index:70; background:var(--canvas); overflow:auto; padding-top:calc(env(safe-area-inset-top,0px) + 16px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}
.mm-top{display:flex; justify-content:space-between; align-items:center; height:64px}
.mm-list{list-style:none; margin:24px 0 0; padding:0; display:grid}
.mm-list > li > a,.mm-list > li > details > summary{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--rule); font:600 32px/1.1 var(--display); letter-spacing:-.03em; text-decoration:none; cursor:pointer; list-style:none}
.mm-list summary::-webkit-details-marker{display:none}
.mm-sub{list-style:none; margin:8px 0 16px; padding:0; display:grid; gap:2px}
.mm-sub a{display:block; padding:10px 0; color:var(--muted); text-decoration:none; font-size:18px}
.mm-ag a{display:grid; gap:2px} .mm-ag a span{color:var(--fg); font-weight:500} .mm-ag a small{font-size:14px; line-height:1.4; color:var(--muted)}
.mm-intro{margin:4px 0 8px; font-size:15px; line-height:1.5; color:var(--muted)} .mm-intro b{display:block; color:var(--fg); font-size:17px; margin-bottom:2px}
.mm-acts{display:grid; gap:4px; justify-items:start; margin:6px 0 0} .mm-ag .mm-acts a{display:inline-flex; align-items:center; gap:8px; color:var(--link); font-weight:600; font-size:16px}
.mm-list summary span{transition:transform .35s var(--ease)} .mm-list details[open] summary span{transform:rotate(45deg)}
.rm .mm-list summary span{transition:none}
.mm-sub h3,
.mm-sub x-h3{font:500 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:14px 0 4px}
.mm-cta{margin-top:28px; display:grid; gap:12px}
.mm-cta .btn{justify-content:space-between}
/* Sheets */
.sheet{position:relative; border-radius:var(--r) var(--r) 0 0; margin-top:calc(var(--r) * -1); transform-origin:50% 0}
.s-canvas{background:var(--canvas)} .s-sheet{background:var(--sheet)} .s-sheet2{background:var(--sheet-2)}
.section{padding-block:clamp(88px,11vw,168px)}
/* Hero */
.hero{padding-top:calc(env(safe-area-inset-top,0px) + clamp(128px,14vw,196px)); padding-bottom:clamp(40px,5vw,72px)}
.hero h1{font-weight:640; font-size:clamp(46px,8.6vw,146px); line-height:.93; letter-spacing:-.05em; margin-top:28px; max-width:15ch}
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em}
.hero h1 .w>span{display:inline-block}
.hero h1 .lt{font-weight:300; letter-spacing:-.045em}
.hero{position:relative; overflow:hidden; isolation:isolate}
.hero::before{content:""; position:absolute; inset:-60% -30%; z-index:-1; transform:rotate(29deg); background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:240px 64px; -webkit-mask-image:radial-gradient(60% 55% at 72% 38%,#000 0%,transparent 75%); mask-image:radial-gradient(60% 55% at 72% 38%,#000 0%,transparent 75%); opacity:.9}
.js:not(.rm) .hero::before{animation:drift 90s linear infinite}
@keyframes drift{to{background-position:240px 64px}}
.hero-foot{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px 64px; align-items:end; margin-top:clamp(36px,4vw,56px)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end}
.hero-note{grid-column:1 / -1; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:14px; padding-top:20px; border-top:1px solid var(--rule)}
.js:not(.rm) .hero h1 .w>span{animation:rise 1.05s var(--ease) both; animation-delay:calc(var(--d) * 1s + .05s)}
.js:not(.rm) [data-intro]{animation:fadeup .9s var(--ease) both; animation-delay:var(--d,.4s)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeup{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
/* Ticker */
.ticker{overflow:hidden; padding-block:20px 16px; margin-top:clamp(40px,5vw,72px); background:linear-gradient(#0A0A09 0 5px, rgba(245,243,238,.9) 5px 6.5px, #0A0A09 6.5px); color:#F5F3EE}
.ticker-track{display:flex; width:max-content; gap:0}
.ticker ul{display:flex; list-style:none; margin:0; padding:0}
.ticker li{display:flex; align-items:center; gap:28px; padding-right:28px; color:#F5F3EE; font-size:13px}
.ticker li::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.js:not(.rm) .ticker-track{animation:marquee 46s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Section heads */
.head{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:32px 80px; align-items:end; margin-bottom:clamp(48px,6vw,88px)}
.head .pill-label{margin-bottom:28px}
.split-w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.split-w>span{display:inline-block}
/* Marketing */
.mkt{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px 80px; align-items:end}
.mkt p{color:var(--muted); max-width:46ch}
.mkt-body{display:grid; gap:18px}
.mkt-body .btn{justify-self:start; margin-top:12px}
.rails{margin-top:clamp(64px,8vw,112px); display:grid; gap:10px; overflow:hidden}
.rail{display:flex; width:max-content}
.rail ul{display:flex; gap:10px; list-style:none; margin:0; padding:0 10px 0 0}
.rail li{font:600 clamp(28px,4.4vw,64px)/1 var(--display); letter-spacing:-.04em; padding:18px 32px; border-radius:999px; border:1px solid var(--rule); white-space:nowrap}
.rail.r2 li{color:var(--muted)}
.rail li.hl{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.js:not(.rm) .rail{animation:marquee 60s linear infinite}
.js:not(.rm) .rail.r2{animation-direction:reverse; animation-duration:72s}
.rails:hover .rail,.rails:focus-within .rail{animation-play-state:paused}
/* Approach */
.approach-inner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:64px; align-items:start}
.approach-left{position:relative}
.progress{margin-top:48px; height:2px; background:var(--rule); border-radius:2px; overflow:hidden; max-width:360px}
.progress i{display:block; height:100%; width:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0)}
.no-js .progress i,.rm .progress i{transform:none}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.step{display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; padding:32px; border-radius:28px; background:var(--sheet-2); border:1px solid var(--rule); transition:background .5s var(--ease), border-color .5s var(--ease), opacity .5s var(--ease)}
.step .num{font:600 clamp(56px,6vw,96px)/.8 var(--display); letter-spacing:-.06em; color:var(--muted); transition:color .5s var(--ease)}
.step p{color:var(--muted); margin-top:12px}
.pinning .step{opacity:.45}
.pinning .step.on{opacity:1; border-color:var(--accent)}
.pinning .step.on .num{color:var(--accent)}
/* History */
.history{overflow:hidden}
.year{font:700 clamp(140px,30vw,480px)/.78 var(--display); letter-spacing:-.07em; color:transparent; -webkit-text-stroke:1.5px var(--rule); white-space:nowrap; margin:0 0 clamp(32px,4vw,56px) -.04em; user-select:none}
.history-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:40px 80px; align-items:start}
.history-grid .body{display:grid; gap:24px; font-size:clamp(20px,1.8vw,26px); line-height:1.45; letter-spacing:-.01em}
.bw{transition:opacity .2s}
/* Agency */
.agency{padding:0}
.agency-reveal{background:var(--inv-bg); color:var(--inv-fg); border-radius:var(--r) var(--r) 0 0}
.agency-reveal .section{padding-block:clamp(96px,11vw,168px)}
.agency .pill-label{box-shadow:none}
.agency-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px 80px; align-items:end}
.agency p{color:var(--inv-muted); max-width:44ch}
.agency-links{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(48px,6vw,80px)}
.agency-links a{display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:999px; border:1px solid var(--inv-rule); text-decoration:none; font-weight:500; color:var(--inv-fg); transition:background .35s, color .35s}
.agency-links a:hover,.agency-links a:focus-visible{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.agency .btn-primary .dot{background:var(--on-accent)}
.logo-inv .on-dark{display:none} .logo-inv .on-light{display:block}
/* FAQ */
.faq-list{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 0; background:none; border:0; color:var(--fg); font:600 clamp(20px,2vw,28px)/1.2 var(--display); letter-spacing:-.02em; text-align:left; cursor:pointer}
.faq-q .pm{flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center; transition:transform .5s var(--ease), background .3s}
.faq-q[aria-expanded="true"] .pm{transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{color:var(--muted); max-width:62ch; padding-bottom:28px}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:48px 80px}
/* Close */
.close{background:var(--accent); color:var(--on-accent)}
.close h2{font-size:clamp(46px,8.4vw,140px); letter-spacing:-.05em; line-height:.92; max-width:14ch}
.close p{max-width:46ch; font-size:clamp(18px,1.5vw,21px); color:var(--on-accent)}
.close-foot{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end; margin-top:clamp(40px,5vw,72px)}
.btn-ink{background:var(--on-accent); color:#F5F3EE; --h:68px; font-size:18px; padding-left:30px}
.btn-ink .dot{background:var(--accent); color:var(--on-accent); width:52px; height:52px}
.magnet{display:inline-block}
.close .close-sec{margin-top:18px}
.close-foot.one{grid-template-columns:minmax(0,1fr)}
.close-body{display:grid; gap:12px}
.close-acts{display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin:28px 0 14px}
.close-acts .tlink{color:var(--on-accent)}
.close .close-sec .tlink{color:var(--on-accent)}
.ag-sec{justify-self:start; color:#F5F3EE}
.f-contact a{color:inherit; text-decoration:none}
.f-contact a:hover{color:var(--accent)}
/* Footer */
.footer{padding-block:clamp(72px,8vw,120px) 32px; background:var(--canvas)}
.f-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:48px 64px}
.f-brand p{color:var(--muted); margin-top:20px; max-width:34ch; font-size:16px}
.f-contact{margin-top:24px; display:grid; gap:4px; font-size:16px}
.f-contact span{color:var(--muted); font:500 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; margin-top:10px}
.f-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px}
.f-cols h2{font:500 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.f-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.f-cols a{display:inline-block; padding:5px 0; text-decoration:none; font-size:16px}
.f-cols a:hover{color:var(--accent)}
.f-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:clamp(56px,6vw,96px); padding-top:24px; border-top:1px solid var(--rule); color:var(--muted); font-size:14px}
.f-bottom ul{display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0; padding:0}
.f-bottom a{text-decoration:none} .f-bottom a:hover{color:var(--fg)}
/* Curtain (page transition preview) */
.curtain{position:fixed; inset:0; z-index:90; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; transform:translateY(101%); pointer-events:none; padding:24px}
.curtain b{font:640 clamp(44px,8vw,128px)/.95 var(--display); letter-spacing:-.05em; text-align:center}
.curtain small{display:block; text-align:center; margin-top:18px}
.curtain.show{pointer-events:auto}
/* Preview controls */
.pctl{position:fixed; z-index:55; left:max(16px, env(safe-area-inset-left,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; gap:6px; padding:6px; border-radius:999px; background:var(--glass); border:1px solid var(--rule); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.pctl button{font:500 12px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; height:36px; padding:0 14px; border-radius:999px; border:0; background:var(--sheet-2); color:var(--fg); cursor:pointer}
.pctl button:hover{background:var(--raise)}
/* Photography */
.photo{position:relative; overflow:hidden; border-radius:var(--r); margin:0; background:var(--sheet-2)}
.photo img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.14); will-change:transform}
.rm .photo img{transform:none}
.ph-label{position:absolute; left:14px; bottom:12px; padding:7px 10px; border-radius:6px; background:rgba(10,10,9,.62); color:#F5F3EE; font-size:10px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.reel{padding-top:clamp(40px,5vw,72px)}
.reel-main{aspect-ratio:21/9; max-height:78svh}
.people{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:16px}
.pp{aspect-ratio:4/5}
.pp:nth-child(2){margin-top:56px}
.band{border-radius:0; aspect-ratio:21/8; margin-top:clamp(64px,8vw,120px)}
.ag-photo{aspect-ratio:4/3; border-radius:24px}
.year{color:transparent; -webkit-text-stroke:0; background:linear-gradient(180deg,var(--fg) 8%,color-mix(in srgb,var(--fg) 14%,transparent) 92%); -webkit-background-clip:text; background-clip:text}
.hero h1 .lt>span{background:linear-gradient(180deg,var(--fg) 30%,var(--muted) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.06em}
/* Art direction: agency over photography, 2011 cut from the crosswalk photo */
.agency-reveal{position:relative; overflow:hidden; isolation:isolate; background:#0B0B0A; color:#F5F3EE}
.ag-bg{position:absolute; inset:0; z-index:-1}
.ag-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 35%; display:block; transform:scale(1.1)}
.ag-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,11,10,.94) 0%,rgba(11,11,10,.78) 38%,rgba(11,11,10,.25) 75%,rgba(11,11,10,.55) 100%), linear-gradient(0deg,rgba(11,11,10,.85),transparent 40%)}
.agency p{color:#CFCBC2}
.agency .pill-label{box-shadow:0 0 0 1px rgba(245,243,238,.18)}
.agency-grid.with-photo{grid-template-columns:minmax(0,1fr); max-width:720px}
.agency-reveal .section{min-height:min(820px,92svh); display:flex; flex-direction:column; justify-content:flex-end}
.agency-links a{color:#F5F3EE; border-color:rgba(245,243,238,.28); background:rgba(11,11,10,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.year{font-weight:800; color:transparent; -webkit-text-stroke:1.5px var(--rule); background:50% 55% / cover no-repeat; -webkit-background-clip:text; background-clip:text; transition:color .8s}
.year.in{-webkit-text-stroke:0; background-image:url("../img/crosswalk-g-1600.webp")}
@media (max-width:860px){ .year.in{background-image:url("../img/crosswalk-g-800.webp")} }
.close .close-ag{margin-top:10px} .close .close-ag a{color:var(--on-accent); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.pctl .note{font:500 11px/1 var(--mono); color:var(--muted); padding:0 10px 0 6px; align-self:center; letter-spacing:.03em}
/* How We Work: tactile steps with a glowing active node */
.step{background:linear-gradient(180deg,color-mix(in srgb,var(--sheet-2) 92%,#fff 8%),var(--sheet-2)); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent), 0 24px 48px -32px rgba(0,0,0,.55)}
.step .num{background:linear-gradient(180deg,var(--fg),var(--muted)); -webkit-background-clip:text; background-clip:text; color:transparent}
.pinning .step.on{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent), 0 0 0 1px var(--accent), 0 0 40px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.pinning .step.on .num{background:linear-gradient(180deg,#FFB089,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 55%,transparent))}
.progress{height:4px; border-radius:4px; box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.progress i{background:linear-gradient(90deg,var(--accent-deep),var(--accent)); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent); border-radius:4px}
/* ===== Hero: street photography with the product composition in front ===== */
.h5{position:relative; isolation:isolate; overflow:hidden; background:#0B0B0A; color:#F5F3EE; --fg:#F5F3EE; --muted:#CFCBC2; --rule:rgba(245,243,238,.16); --sheet-2:rgba(245,243,238,.08); color-scheme:dark}
.h5::before{display:none}
.h5-bg{position:absolute; inset:0; z-index:-1}
.h5-bg img{width:100%; height:100%; object-fit:cover; object-position:60% 50%; display:block; transform:scale(1.06)}
.h5-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,11,10,.94) 0%,rgba(11,11,10,.82) 34%,rgba(11,11,10,.42) 62%,rgba(11,11,10,.62) 100%), linear-gradient(0deg,#0B0B0A 2%,rgba(11,11,10,0) 34%), linear-gradient(180deg,rgba(11,11,10,.7),transparent 22%)}
.h5-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:48px; align-items:center}
.h5-copy{display:grid; gap:28px; justify-items:start}
.h5 h1{margin-top:0; font-size:clamp(46px,5.9vw,104px); max-width:11.5ch; color:#F5F3EE}
.h5 h1 .lt>span{background:linear-gradient(180deg,#F5F3EE 25%,#8F8B83 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.h5 .lede{color:#CFCBC2; max-width:44ch}
.h5 .hero-actions{justify-content:flex-start}
.h5 .btn-ghost{color:#F5F3EE; border-color:rgba(245,243,238,.3); background:rgba(11,11,10,.3)}
.h5 .hero-note{color:#B0ACA3; border-top-color:rgba(245,243,238,.14); width:100%}
.h5 .ticker{margin-top:clamp(56px,6vw,88px)}
@keyframes floatin{from{opacity:0; transform:translateY(40px)}to{opacity:1; transform:none}}
@media (max-width:860px){
.h5-grid{gap:28px}
.h5-copy{gap:20px}
.h5 h1{font-size:clamp(38px,10.6vw,46px)}
.h5 .lede{font-size:16.5px; line-height:1.5}
.h5 .pill-label{font-size:10.5px; letter-spacing:.05em; padding:11px 12px 8px}
.h5 .hero-note{padding-top:14px; font-size:13px}
}
/* Responsive */
@media (max-width:1100px){
.nav,.util{display:none} .menu-btn{display:grid} .bar{justify-content:space-between}
}
@media (max-width:860px){
.hero-foot,.head,.mkt,.approach-inner,.history-grid,.agency-grid,.faq-wrap,.f-top,.close-foot{grid-template-columns:minmax(0,1fr)}
.hero-actions{justify-content:flex-start}
.needs-grid .tile{grid-column:1 / -1 !important; min-height:0}
.tile-art{opacity:1; min-height:0}
.f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.step{padding:24px; gap:18px; transition:background .5s var(--ease), border-color .5s var(--ease)}
}
@media (max-width:520px){
.bar .btn{display:none}
.hero-actions .btn{width:100%; justify-content:space-between}
.btn-ink{--h:60px}
.rail li{padding:14px 22px}
}
.rm *{scroll-behavior:auto !important}
@media (prefers-reduced-motion: reduce){ .ticker-track,.rail{animation:none !important} }
/* ===== v6 product UI kit: one always dark system for every illustrative screen =====
Screens are authored at their real pixel size and scaled to their frame with a pure CSS ratio,
so text and SVG stay sharp and no script is needed to lay them out. */
.fit{--w:1280; --h:800; position:relative; width:100%; aspect-ratio:var(--w) / var(--h); container-type:inline-size}
.fit>.ui{position:absolute; left:0; top:0; width:calc(var(--w) * 1px); height:calc(var(--h) * 1px); transform-origin:0 0; transform:scale(tan(atan2(100cqw, calc(var(--w) * 1px))))}
:root{--u-bg:#0C0C0B; --u-side:#0F0F0E; --u-card:#161615; --u-card2:#1D1D1B; --u-raise:#262624; --u-line:rgba(255,255,255,.065); --u-line2:rgba(255,255,255,.1);
--u-fg:#F3F1EC; --u-fg2:#B3AFA7; --u-fg3:#8F8B83; --u-acc:#ED6944; --u-acc2:#F7A27F; --u-soft:rgba(237,105,68,.14);
--u-grad:linear-gradient(180deg,#F6906C 0%,#ED6944 46%,#D9532F 100%); --u-glow:0 8px 22px -8px rgba(237,105,68,.75);
--u-hi:inset 0 1px 0 rgba(255,255,255,.06);}
.ui{
background:var(--u-bg); color:var(--u-fg); font:400 13px/1.35 "Inter", ui-sans-serif, system-ui, sans-serif; letter-spacing:-.005em; overflow:hidden; color-scheme:dark;
font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-align:left}
.ui,.ui *{box-sizing:border-box}
.ui b{font-weight:600}
.ui small{font-size:11.5px; color:var(--u-fg3)}
.ui .mono{font:500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing:.04em; text-transform:uppercase}
.ui svg.i{width:16px; height:16px; flex:none}
.ui img{display:block}
/* Surfaces */
.u-card{position:relative; background:linear-gradient(180deg,#1A1A19,#141413); border:1px solid var(--u-line); border-radius:18px; box-shadow:var(--u-hi)}
.u-inset{background:#121211; border:1px solid var(--u-line); border-radius:12px; box-shadow:inset 0 1px 3px rgba(0,0,0,.55)}
.u-white{background:#F3F1EC; color:#151514; border-radius:22px}
.u-white small{color:#67635B} .u-white :is(.pt-items>div,.pt-det .hd,.pt-tot) small{color:#A9A59D} /* Nov 8 audit: small text on the dark panels inside a light screen */
.u-hd{display:flex; align-items:center; justify-content:space-between; gap:10px}
.u-hd h4,
.u-hd x-h4{margin:0; font-size:14px; font-weight:600; letter-spacing:-.01em}
.u-hd small{display:block; margin-top:2px}
/* Controls */
.u-ib{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#1B1B19; border:1px solid var(--u-line2); color:var(--u-fg2); flex:none; position:relative}
.u-ib.dot::after{content:""; position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--u-acc); box-shadow:0 0 0 2px #1B1B19}
.u-ib svg{width:15px; height:15px}
.u-btn{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:999px; font-weight:600; font-size:12.5px; white-space:nowrap; flex:none}
.u-btn svg{width:14px; height:14px}
.u-btn.pri{background:var(--u-grad); color:#1A1A1A; box-shadow:inset 0 1px 0 rgba(255,255,255,.38), var(--u-glow)}
.u-btn.gh{background:#1C1C1A; border:1px solid var(--u-line2); color:var(--u-fg)}
.u-btn.wh{background:#F3F1EC; color:#151514}
.u-btn.ink{background:#151514; color:#F3F1EC}
.u-seg{display:inline-flex; padding:3px; border-radius:999px; background:#121211; border:1px solid var(--u-line); box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.u-seg span{padding:6px 12px; border-radius:999px; font-size:12px; color:var(--u-fg3); white-space:nowrap}
.u-seg span.on{background:var(--u-grad); color:#1A1A1A; font-weight:600; box-shadow:var(--u-glow)}
.u-seg.lite span.on{background:#2A2A27; color:var(--u-fg); box-shadow:var(--u-hi)}
.u-chip{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; font:500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
background:#232321; color:#CFCBC2; border:1px solid #34332F}
.u-chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9}
.u-chip.o{background:var(--u-soft); color:#F79B79; border-color:rgba(237,105,68,.45)}
.u-chip.s{background:var(--u-grad); color:#1A1A1A; border-color:transparent}
.u-chip.ok{background:rgba(243,241,236,.08); color:#EDEAE3; border-color:rgba(243,241,236,.22)}
.u-chip.ok::before{background:#EDEAE3}
.u-chip.n::before{display:none}
.u-tag{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; background:#22221F; border:1px solid var(--u-line2); font-size:11px; color:var(--u-fg2); white-space:nowrap}
.u-pill{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px; background:#171716; border:1px solid var(--u-line2); font-size:12px; color:var(--u-fg2); white-space:nowrap}
.u-pill svg{width:13px; height:13px}
.u-pill.on{background:#F3F1EC; color:#151514; border-color:transparent; font-weight:600}
.u-field{display:flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:10px; background:#121211; border:1px solid var(--u-line); color:var(--u-fg3); font-size:12px}
.u-field svg{width:14px; height:14px}
/* People */
.u-av{width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px #161615}
.u-av.l{width:38px; height:38px} .u-av.xl{width:46px; height:46px} .u-av.s{width:22px; height:22px}
.u-in{display:grid; place-items:center; font:600 11px/1 "Inter", sans-serif; color:#1A1A1A; background:#E9E2D6; letter-spacing:0}
.u-in.b{background:#F2B79E} .u-in.c{background:#9C978E; color:#0E0E0D} .u-in.d{background:#3E3C38; color:#E9E4DA}
.u-stack{display:flex; align-items:center}
.u-stack>*{margin-left:-8px; box-shadow:0 0 0 2px #171716} .u-stack>*:first-child{margin-left:0}
.u-stack .more{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#2A2A27; font-size:10.5px; color:var(--u-fg2); font-weight:600}
.u-white .u-stack>*{box-shadow:0 0 0 2px #F3F1EC}
/* Numbers */
.u-big{font-weight:600; letter-spacing:-.045em; line-height:.95; color:var(--u-fg); display:flex; align-items:baseline; gap:6px; white-space:nowrap}
.u-big .cur{font-size:.5em; color:var(--u-fg3); font-weight:500; letter-spacing:0; align-self:flex-start; margin-top:.18em}
.u-big .dec{color:var(--u-fg3)}
.u-big em{font-style:normal; font-size:.36em; letter-spacing:-.01em; color:var(--u-fg3); font-weight:500}
.u-grad-num{background:linear-gradient(180deg,#F6F4EF 25%,#8A867E); -webkit-background-clip:text; background-clip:text; color:transparent}
/* Progress */
.u-bar{position:relative; height:8px; border-radius:8px; background:#24231F; overflow:hidden}
.u-bar>i{position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:8px; background:var(--u-grad); box-shadow:0 0 12px rgba(237,105,68,.45); transform-origin:0 50%}
.u-bar.str>i{background:repeating-linear-gradient(115deg,#ED6944 0 6px,#F4875F 6px 12px)}
.u-bar.mut>i{background:#6E6A63; box-shadow:none}
.u-bar.stack{display:flex; gap:3px; background:none}
.u-bar.stack>i{position:static; width:auto; flex:var(--f); box-shadow:none}
.u-bar.stack>i:nth-child(2){background:#F7B497} .u-bar.stack>i:nth-child(3){background:#67635B}
/* Charts */
.ch{display:block; overflow:visible}
.ch .gl{stroke:rgba(255,255,255,.07); stroke-width:1; stroke-dasharray:2 4}
.ch .ax{fill:#67635B; font:500 10px "Geist Mono", ui-monospace, monospace}
.ch .ax.on{fill:#F79B79}
.ch .ln{fill:none; stroke:#ED6944; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 4px 8px rgba(237,105,68,.45))}
.ch .ln2{fill:none; stroke:#8F8B83; stroke-width:1.6; stroke-dasharray:4 4; stroke-linecap:round}
.ch .gd{stroke:rgba(247,162,127,.55); stroke-dasharray:3 3}
.ch .dot{fill:#F3F1EC; stroke:#ED6944; stroke-width:2.6}
.ch .halo{fill:rgba(237,105,68,.22)}
.ch-dots .dot{fill:#ED6944; stroke:#161615; stroke-width:2}
.ch-dots .dot.last{fill:#F3F1EC; stroke:#ED6944; stroke-width:3}
.ch-dots .ln{stroke-width:2.2}
.ch-bars .hot{filter:drop-shadow(0 0 10px rgba(237,105,68,.65))}
.ch-bars .avg{stroke:rgba(247,162,127,.6); stroke-dasharray:4 4}
.ch-mini rect{fill:#3A3935} .ch-mini rect.hot{fill:#ED6944}
.ch-donut .trk,.ch-ring .trk{fill:none; stroke:#22221F}
.ch-donut .sg{fill:none}
.d1{stroke:#ED6944} .d2{stroke:#F7B497} .d3{stroke:#8F8B83} .d4{stroke:#43413C}
.ch-ring .arc{fill:none; stroke:#ED6944; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(237,105,68,.6))}
.ch-spark .ln{stroke-width:2; filter:none}
.ch-spark .dot{stroke-width:2}
.ch-map .st{stroke:#232220; stroke-width:3; fill:none} .ch-map .st.av{stroke:#2E2D2A; stroke-width:6}
.ch-map .park{fill:#1F221D}
.ch-map .rt-b{fill:none; stroke:rgba(237,105,68,.18); stroke-width:9; stroke-linecap:round; stroke-linejoin:round}
.ch-map .rt{fill:none; stroke:#ED6944; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 7; filter:drop-shadow(0 0 4px rgba(237,105,68,.7))}
.ch-map .pin-a{fill:#F3F1EC; stroke:#151514; stroke-width:3}
.ch-map .pin-h{fill:rgba(237,105,68,.25)} .ch-map .pin-b{fill:#ED6944}
.lg{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--u-fg2)}
.lg i{width:8px; height:8px; border-radius:3px; background:#ED6944; flex:none}
.lg i.l2{background:#F7B497} .lg i.l3{background:#8F8B83} .lg i.l4{background:#43413C} .lg i.dash{height:0; border-top:2px dashed #8F8B83; border-radius:0; background:none; width:12px}
.lg b{margin-left:auto; color:var(--u-fg); font-weight:600}
.lg em{font-style:normal; color:var(--u-fg3); width:32px; text-align:right}
.tip{position:absolute; padding:9px 11px; border-radius:11px; background:#F3F1EC; color:#151514; font-size:11px; box-shadow:0 14px 30px -12px rgba(0,0,0,.8); white-space:nowrap; z-index:3}
.tip b{display:block; font-size:12.5px}
.tip span{display:flex; align-items:center; gap:6px; color:#4D4A45} .tip span i{width:7px; height:7px; border-radius:2px; background:#ED6944} .tip span i.g{background:#8F8B83}
.tip::after{content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:#F3F1EC; transform:translateX(-50%) rotate(45deg); border-radius:2px}
/* App chrome */
.u-side{position:absolute; left:0; top:0; bottom:0; width:72px; background:var(--u-side); border-right:1px solid var(--u-line); display:flex; flex-direction:column; align-items:center; padding:20px 0; gap:6px}
.u-mark{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--u-grad); color:#1A1A1A; font:700 17px/1 "Inter", sans-serif; letter-spacing:-.04em; box-shadow:var(--u-glow); margin-bottom:18px}
.u-side .nv{display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#6F6B64}
.u-side .nv svg{width:18px; height:18px}
.u-side .nv.on{background:#1F1F1D; color:var(--u-fg); box-shadow:var(--u-hi), 0 0 0 1px var(--u-line2)}
.u-side .nv.on::before{content:""; position:absolute; left:0; width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--u-acc)}
.u-side .sp{flex:1}
.u-main{position:absolute; left:72px; right:0; top:0; bottom:0; padding:22px 26px}
/* Schedule pill bar (CRM reference) */
.u-sched{display:flex; align-items:center; height:48px; padding:5px; border-radius:999px; background:#F3F1EC; color:#151514; gap:8px; box-shadow:0 10px 30px -14px rgba(0,0,0,.8)}
.u-sched .lbl{display:flex; align-items:center; gap:8px; padding:0 14px 0 12px; height:38px; border-radius:999px; background:#fff; font-weight:600; font-size:12.5px; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.u-sched .lbl small{color:#67635B; font-weight:500}
.u-sched .lbl svg{width:15px; height:15px; color:#67635B}
.u-tl{position:relative; flex:1; height:38px; border-radius:999px; background:#E7E3DA; overflow:visible}
.u-tl .hr{position:absolute; top:50%; transform:translate(-50%,-50%); font:500 9.5px "Geist Mono", monospace; color:#5F5B54}
.u-tl .blk{position:absolute; top:4px; bottom:4px; border-radius:999px; background:var(--u-grad); display:flex; align-items:center; gap:6px; padding:0 4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px -4px rgba(237,105,68,.7); color:#1A1A1A; font-size:10.5px; font-weight:600; overflow:hidden; white-space:nowrap}
.u-tl .blk.mut{background:#CFCAC0; box-shadow:none; color:#3C3A36}
.u-tl .blk .u-stack>*{box-shadow:0 0 0 2px #EE7A55; width:24px; height:24px}
.u-tl .blk.mut .u-stack>*{box-shadow:0 0 0 2px #CFCAC0}
.u-tl .now{position:absolute; top:-9px; bottom:-5px; width:2px; background:#151514; border-radius:2px}
.u-tl .now::before{content:attr(data-t); position:absolute; top:-14px; left:50%; transform:translateX(-50%); padding:3px 7px; border-radius:999px; background:#151514; color:#F3F1EC; font:600 9.5px "Geist Mono", monospace; white-space:nowrap}
.u-tl .now::after{content:""; position:absolute; bottom:-3px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#151514}
/* Tables */
.u-tbl{width:100%; border-collapse:separate; border-spacing:0}
.u-tbl th{font:500 10px/1 "Geist Mono", ui-monospace, monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--u-fg3); text-align:left; padding:0 10px 10px; border-bottom:1px solid var(--u-line); white-space:nowrap}
.u-tbl td{padding:9px 10px; border-bottom:1px solid var(--u-line); white-space:nowrap; vertical-align:middle}
.u-tbl tr.hl td{background:rgba(237,105,68,.09)}
.u-tbl tr.hl td:first-child{box-shadow:inset 3px 0 0 #ED6944}
.u-tbl .who{display:flex; align-items:center; gap:10px}
.u-tbl .who div{display:grid; gap:1px}
.u-tbl .id{font:500 11px "Geist Mono", monospace; color:var(--u-fg2)}
/* Phone frame (titanium) */
.phone{position:relative; width:100%; aspect-ratio:390 / 844; border-radius:15.5% / 7.2%; padding:2.6%; background:linear-gradient(145deg,#6A6A64 0%,#2A2A28 12%,#0D0D0C 45%,#1E1E1C 80%,#585852 100%);
box-shadow:0 70px 100px -50px rgba(0,0,0,.95), 0 30px 60px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 3px #0B0B0A}
.phone::before{content:""; position:absolute; right:-1.2%; top:22%; width:1.4%; height:11%; border-radius:0 3px 3px 0; background:linear-gradient(90deg,#3B3B38,#6A6A64)}
.phone>.fit{--w:390; --h:844; border-radius:13.4% / 6.2%; overflow:hidden; height:100%}
.phone .island{position:absolute; z-index:4; top:3.6%; left:50%; width:31%; height:3.7%; transform:translateX(-50%); border-radius:99px; background:#000}
.p-sb{display:flex; justify-content:space-between; align-items:center; height:54px; padding:16px 30px 0 34px; font-weight:600; font-size:15px}
.p-sb .sig{display:flex; gap:5px; align-items:center}
.p-sb .sig i{display:block; width:3px; border-radius:1px; background:#F3F1EC}
.p-sb .bat{width:25px; height:12px; border-radius:4px; border:1.5px solid rgba(243,241,236,.5); padding:1.5px} .p-sb .bat::before{content:""; display:block; height:100%; width:78%; border-radius:2px; background:#F3F1EC}
.p-nav{position:absolute; left:18px; right:18px; bottom:24px; height:64px; border-radius:999px; background:rgba(28,28,26,.92); border:1px solid var(--u-line2); display:flex; align-items:center; justify-content:space-around; padding:0 10px; box-shadow:0 20px 40px -18px rgba(0,0,0,.9), var(--u-hi); backdrop-filter:blur(10px)}
.p-nav span{display:grid; justify-items:center; gap:3px; color:#6F6B64; font-size:9.5px; font-weight:500}
.p-nav span svg{width:20px; height:20px}
.p-nav span.on{color:var(--u-acc2)}
.p-nav .mid{width:54px; height:54px; border-radius:50%; background:var(--u-grad); color:#1A1A1A; display:grid; place-items:center; box-shadow:0 0 0 5px rgba(237,105,68,.14), 0 0 28px rgba(237,105,68,.7), inset 0 1px 0 rgba(255,255,255,.4); margin-top:-26px}
.p-nav .mid svg{width:22px; height:22px}
.p-home{position:absolute; bottom:8px; left:50%; width:36%; height:5px; border-radius:5px; background:rgba(243,241,236,.85); transform:translateX(-50%)}
/* Tablet and laptop frames */
.tablet{position:relative; padding:1.6%; border-radius:4.2% / 6%; background:linear-gradient(150deg,#55554F 0%,#1C1C1B 10%,#0B0B0A 50%,#1C1C1A 88%,#4F4F4A 100%); box-shadow:0 80px 120px -60px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 4px #090908}
.tablet>.fit{border-radius:2.8% / 4%; overflow:hidden}
.tablet::after{content:""; position:absolute; top:50%; left:.7%; width:.5%; aspect-ratio:1; border-radius:50%; background:#1F2A30; transform:translateY(-50%)}
.laptop{position:relative}
.laptop .lid{position:relative; padding:1.7% 1.7% 2.6%; border-radius:2.6% / 4%; background:linear-gradient(180deg,#2C2C2A,#0E0E0D 6%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 0 0 1.5px #8C8B86, 0 60px 90px -50px rgba(0,0,0,.95)}
.laptop .lid>.fit{border-radius:.8%; overflow:hidden}
.laptop .lid::before{content:""; position:absolute; top:.6%; left:50%; width:.6%; aspect-ratio:1; border-radius:50%; background:#222; transform:translateX(-50%)}
.laptop .base{position:relative; height:clamp(10px,1.7cqw,22px); margin:0 -6.5%; border-radius:0 0 18px 18px / 0 0 100% 100%; background:linear-gradient(180deg,#D9D8D3 0%,#A9A8A3 35%,#6C6B67 100%); box-shadow:0 30px 50px -20px rgba(0,0,0,.9)}
.laptop .base::before{content:""; position:absolute; top:0; left:50%; width:15%; height:42%; transform:translateX(-50%); border-radius:0 0 10px 10px; background:linear-gradient(180deg,#8E8D88,#B6B5B0)}
.laptop{container-type:inline-size}
/* Floating panels and toasts */
.fl{position:absolute; z-index:4}
.u-toast{display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px; border-radius:16px; background:rgba(24,24,22,.94); border:1px solid var(--u-line2); box-shadow:0 30px 60px -24px rgba(0,0,0,.9), var(--u-hi); color:var(--u-fg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.u-toast .ico{display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--u-grad); color:#1A1A1A; box-shadow:var(--u-glow); flex:none}
.u-toast .ico.dk{background:#262624; color:var(--u-acc2); box-shadow:var(--u-hi)}
.u-toast .ico svg{width:17px; height:17px}
.u-toast div{display:grid; gap:2px}
.u-toast b{font-size:13px} .u-toast small{font-size:11.5px; color:var(--u-fg3)}
.u-cursor{position:absolute; z-index:9; width:22px; height:22px; pointer-events:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); left:0; top:0}
.u-cursor .clk{position:absolute; left:-8px; top:-8px; width:22px; height:22px; border-radius:50%; border:2px solid #ED6944; opacity:0}
.ill{position:absolute; z-index:6; display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:rgba(11,11,10,.62); border:1px solid rgba(245,243,238,.16); color:#D8D4CB; font:500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.ill::before{content:""; width:6px; height:6px; border-radius:50%; background:#ED6944}
/* Live states toggled by the motion layer */
.u-chip[data-live]{transition:background .45s, color .45s, border-color .45s}
.tip.l{transform:translate(calc(-100% - 16px),-50%) !important}
.tip.l::after{left:auto; right:-5px; bottom:auto; top:50%; transform:translateY(-50%) rotate(45deg)}
/* ===== v6 screens: layout for each illustrative product screen ===== */
.u-ib.s{width:28px; height:28px} .u-ib.s svg{width:13px; height:13px}
/* Operations dashboard, 1280 x 800 */
.o-top{display:flex; align-items:center; gap:10px}
.o-top .u-sched{flex:1}
.o-title{display:flex; justify-content:space-between; align-items:flex-end; margin-top:22px}
.o-title h3,
.o-title x-h3{margin:2px 0 0; font-size:34px; font-weight:600; letter-spacing:-.045em; line-height:1}
.o-act{display:flex; align-items:center; gap:8px}
.o-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px}
.o-kpis .k{padding:13px 16px; display:grid; gap:9px; align-content:start; height:128px}
.o-kpis .k.hot{background:linear-gradient(160deg,#F7976F 0%,#ED6944 45%,#D24E2B 100%); border-color:transparent; color:#1A1A1A; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px -16px rgba(237,105,68,.75)}
.o-kpis .k.hot small,.o-kpis .k.hot .u-big em{color:rgba(26,26,26,.7)}
.o-kpis .k.hot .u-big{color:#1A1A1A}
.o-kpis .k.hot .u-ib{background:rgba(26,26,26,.12); border-color:rgba(26,26,26,.18); color:#1A1A1A}
.o-kpis .k.hot .u-stack>*{box-shadow:0 0 0 2px #EE7049}
.o-row{display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
.o-src{display:flex; gap:12px; font-size:11px; color:var(--u-fg3)}
.o-src span{display:flex; align-items:center; gap:5px} .o-src i{width:7px; height:7px; border-radius:2px; background:#ED6944} .o-src i.l2{background:#F7B497} .o-src i.l3{background:#67635B}
.o-src b{color:var(--u-fg); font-weight:600} .o-src .r{margin-left:auto}
.o-sub{display:flex; justify-content:space-around; font:500 9.5px "Geist Mono", monospace; color:var(--u-fg3); width:112px; margin-left:auto; margin-top:-4px}
.o-sub .on{color:#F79B79}
.o-body{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; margin-top:14px}
.o-jobs{padding:12px 14px 0; height:470px; overflow:hidden}
.o-tabs{display:flex; gap:6px}
.o-tabs .u-pill b{margin-left:4px; padding:2px 6px; border-radius:999px; background:#151514; color:#F3F1EC; font-size:10.5px}
.o-jobs .u-tbl{margin-top:12px}
.o-jobs .u-tbl td{font-size:12.5px; padding-block:10px}
.o-jobs .u-tbl td b{font-size:12.5px}
.o-rec{padding:16px 18px; height:470px; display:grid; align-content:start; gap:10px}
.o-rec .id{font:500 11px "Geist Mono", monospace; color:var(--u-fg2)}
.o-rec h4,
.o-rec x-h4{margin:0; font-size:19px; font-weight:600; letter-spacing:-.03em}
.o-fields{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin:2px 0 4px; padding:12px; border-radius:14px; background:#121211; border:1px solid var(--u-line)}
.o-fields div{display:grid; gap:2px} .o-fields dt{font:500 9.5px "Geist Mono", monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--u-fg3)} .o-fields dd{margin:0; font-size:12.5px}
.o-trl-h{font:500 10px "Geist Mono", monospace !important; letter-spacing:.05em; text-transform:uppercase}
.o-trl{list-style:none; margin:0; padding:0; display:grid}
.o-trl li{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 0; font-size:12.5px; color:var(--u-fg3)}
.o-trl li::before{content:""; position:absolute; left:10px; top:-6px; height:12px; width:2px; background:#2E2D2A} .o-trl li:first-child::before{display:none}
.o-trl i{width:22px; height:22px; border-radius:50%; border:1.5px solid #3D3C38; display:grid; place-items:center; background:#121211; position:relative; z-index:1}
.o-trl i svg{width:12px; height:12px; opacity:0}
.o-trl time{font:500 10px "Geist Mono", monospace; color:var(--u-fg3)}
.o-trl .done{color:var(--u-fg2)} .o-trl .done::before{background:#ED6944}
.o-trl .done i{background:var(--u-grad); border-color:transparent; color:#1A1A1A} .o-trl .done i svg{opacity:1}
.o-trl .cur{color:var(--u-fg); font-weight:600} .o-trl .cur i{border-color:#ED6944; box-shadow:0 0 0 4px rgba(237,105,68,.18)} .o-trl .cur time{color:#F79B79}
.o-rec-a{display:grid; grid-template-columns:1fr 1.2fr; gap:8px; margin-top:4px} .o-rec-a .u-btn{justify-content:center; height:38px}
/* The spreadsheet shown before the wipe */
.xls{position:absolute; inset:0; z-index:5; display:none; flex-direction:column; background:#FFFFFF; color:#202124; font:400 12px/1 "Inter", Arial, sans-serif; letter-spacing:0}
.js:not(.rm) .xls{display:flex}
.sh-bar{display:flex; align-items:center; gap:10px; height:44px; padding:0 16px; background:#F6F6F4; border-bottom:1px solid #E1E0DC}
.sh-bar b{font-size:13.5px} .sh-bar small{color:#67635B; font-size:11.5px} .sh-bar .sp,.sh-tools .sp{flex:1}
.sh-doc{display:grid; place-items:center; width:26px; height:26px; border-radius:6px; background:#44617F; color:#fff} .sh-doc svg{width:14px; height:14px}
.sh-btn{padding:7px 14px; border-radius:6px; border:1px solid #CFCDC7; font-size:12px; font-weight:600}
.sh-tools{display:flex; align-items:center; gap:14px; height:36px; padding:0 16px; border-bottom:1px solid #E1E0DC; color:#5F5B54; font-size:11.5px}
.sh-tools i{width:1px; height:18px; background:#DAD8D2} .sh-tools .b{font-weight:700; color:#202124} .sh-tools .it{font-style:italic} .sh-tools .u{text-decoration:underline}
.sh-fx{display:flex; align-items:center; gap:12px; height:30px; padding:0 12px; border-bottom:1px solid #E1E0DC; font-size:12px}
.sh-fx .ref{width:56px; padding-right:10px; border-right:1px solid #E1E0DC; color:#5F5B54} .sh-fx .fx{font-style:italic; color:#9A968E}
.sh-grid{flex:1; overflow:hidden}
.sh-grid table{border-collapse:collapse; table-layout:fixed; width:1400px}
.sh-grid th,.sh-grid td{height:25px; padding:0 7px; border:1px solid #E3E2DE; white-space:nowrap; overflow:hidden; text-overflow:clip; text-align:left; font-size:12px; font-weight:400}
.sh-grid thead th{background:#F3F2EF; color:#6F6B64; text-align:center; font-size:11px; height:22px}
.sh-grid tbody th{width:40px; background:#F3F2EF; color:#6F6B64; text-align:center; font-size:11px}
.sh-grid col:first-child,.sh-grid thead th:first-child{width:40px}
.sh-grid thead th:nth-child(2){width:62px} .sh-grid thead th:nth-child(3){width:130px} .sh-grid thead th:nth-child(4){width:118px} .sh-grid thead th:nth-child(5){width:140px} .sh-grid thead th:nth-child(6){width:170px} .sh-grid thead th:nth-child(7){width:70px} .sh-grid thead th:nth-child(8){width:84px} .sh-grid thead th:nth-child(9){width:130px} .sh-grid thead th:nth-child(10){width:200px}
.sh-grid .hdr td{font-weight:700; background:#FAFAF8}
.sh-grid .yl td{background:#FFF3B0}
.sh-grid .st td{color:#9A968E; text-decoration:line-through}
.sh-grid .sel th{background:#E6E4DF; color:#202124}
.sh-grid td.on{box-shadow:inset 0 0 0 2px #44617F; background:#EEF3F8}
.sh-grid .rd{color:#C7361B; font-weight:600}
.sh-grid .er{color:#C7361B}
.sh-tabs{display:flex; align-items:center; height:32px; padding:0 8px; gap:2px; background:#F6F6F4; border-top:1px solid #E1E0DC; font-size:11.5px; color:#5F5B54}
.sh-tabs span{padding:7px 14px} .sh-tabs .on{background:#fff; color:#44617F; font-weight:600; box-shadow:inset 0 -2px 0 #44617F}
.sh-scan{position:absolute; z-index:6; top:0; bottom:0; left:0; width:3px; margin-left:-1.5px; background:#ED6944; box-shadow:0 0 18px 4px rgba(237,105,68,.7), 0 0 60px 10px rgba(237,105,68,.3); opacity:0; display:none}
.js:not(.rm) .sh-scan{display:block}
/* Hero workspace, 860 x 600 */
.scr-hero{padding:20px 22px; display:grid; grid-template-rows:auto auto auto 1fr; gap:16px; background:radial-gradient(120% 80% at 80% 0%,#1B1512 0%,#0C0C0B 55%)}
.h-top{display:flex; align-items:center; gap:10px}
.h-top .u-mark{margin:0; width:34px; height:34px; font-size:15px; border-radius:11px}
.h-top .u-sched{flex:1; height:44px} .h-top .u-sched .lbl{height:34px} .h-top .u-tl{height:34px}
.h-kpis{display:grid; grid-template-columns:1.05fr 1fr 1.25fr; gap:12px}
.h-kpis .k{padding:14px 16px; display:grid; gap:10px}
.h-kpis .k.hot{background:linear-gradient(160deg,#F7976F 0%,#ED6944 45%,#D24E2B 100%); border-color:transparent; color:#1A1A1A; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px -16px rgba(237,105,68,.75)}
.h-kpis .k.hot small,.h-kpis .k.hot .u-big em{color:rgba(26,26,26,.7)} .h-kpis .k.hot .u-big{color:#1A1A1A}
.h-kpis .k.hot .u-stack>*{box-shadow:0 0 0 2px #EE7049}
.h-mid{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:12px}
.h-mid .u-card{padding:14px 16px}
.h-area .o-chart{margin-top:10px}
.h-dn{display:flex; align-items:center; gap:16px; margin-top:12px}
.h-dn .o-dl{gap:9px}
.h-dn .lg{font-size:11px}
.h-rows{display:grid; gap:8px; align-content:start}
.h-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; align-items:center; gap:12px; padding:9px 12px; border-radius:14px; background:#141413; border:1px solid var(--u-line)}
.h-row .id{font:500 11px "Geist Mono", monospace; color:var(--u-fg2)}
.h-row div{display:grid; gap:1px}
.h-row.hl{background:linear-gradient(90deg,rgba(237,105,68,.14),rgba(237,105,68,.03)); border-color:rgba(237,105,68,.35)}
.h-row .t{font-size:12px; color:var(--u-fg2)}
/* Client portal, 1180 x 820 (tablet) */
.scr-portal{padding:22px 26px; background:radial-gradient(90% 60% at 70% 0%,#17171A 0%,#0C0C0B 60%)}
.pt-top{display:flex; align-items:center; gap:10px}
.pt-brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:-.02em; margin-right:8px}
.pt-brand .u-mark{margin:0; width:34px; height:34px; font-size:15px; border-radius:11px}
.pt-tabs{display:flex; align-items:center; gap:2px; padding:4px; border-radius:999px; background:#F3F1EC; color:#4D4A45}
.pt-tabs span{padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:500}
.pt-tabs span.on{background:var(--u-grad); color:#1A1A1A; font-weight:600; box-shadow:0 6px 14px -6px rgba(237,105,68,.8)}
.pt-tabs span b{margin-left:6px; display:inline-grid; place-items:center; min-width:18px; height:18px; border-radius:9px; background:#151514; color:#F3F1EC; font-size:10px}
.pt-top .sp{flex:1}
.pt-title{display:flex; align-items:center; gap:16px; margin-top:18px}
.pt-title h3,
.pt-title x-h3{margin:0; font-size:40px; font-weight:600; letter-spacing:-.045em; line-height:1}
.pt-title .sub{display:grid; gap:3px; margin-left:4px}
.pt-title .o-act{margin-left:auto}
.pt-row{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; margin-top:16px}
.pt-sum{padding:16px 20px 10px}
.pt-nums{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.pt-nums>div{display:grid; gap:10px}
.pt-ph{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px}
.pt-ph>div{display:grid; gap:9px}
.pt-ph .nm{display:flex; justify-content:space-between; font-size:12px; color:var(--u-fg2)}
.pt-ph .nm em{font-style:normal; color:var(--u-fg3); font:500 10.5px "Geist Mono", monospace}
.pt-pay{padding:18px 20px; display:grid; grid-template-rows:auto 1fr auto; gap:12px}
.pt-pay .dnw{display:flex; align-items:center; gap:18px}
.pt-pay .dn-c b{font-size:22px}
.pt-meth{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:end}
.pt-meth span{display:grid; gap:14px; padding:10px; border-radius:12px; background:#1F1F1D; border:1px solid var(--u-line); font-size:11px; color:var(--u-fg3); height:62px}
.pt-meth span b{font:500 11px "Geist Mono", monospace; color:var(--u-fg2)}
.pt-meth span.on{background:var(--u-grad); color:rgba(26,26,26,.75); height:76px; border-color:transparent; box-shadow:var(--u-glow)}
.pt-meth span.on b{color:#1A1A1A}
.pt-filt{display:flex; align-items:center; gap:8px; margin-top:16px}
.pt-filt .t{font-weight:600; font-size:14px; margin-right:6px; display:flex; align-items:center; gap:8px}
.pt-filt .t i{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#F3F1EC; color:#151514; font-style:normal; font-size:11px; font-weight:600}
.pt-filt .u-field{flex:1; justify-content:space-between}
.pt-white{position:relative; margin-top:30px; padding:16px; display:grid; grid-template-columns:330px minmax(0,1fr); gap:16px; height:286px}
.pt-white .seg{position:absolute; top:-18px; left:50%; transform:translateX(-50%); display:flex; gap:4px; padding:5px; border-radius:999px; background:#0C0C0B}
.pt-white .seg span{padding:7px 13px; border-radius:999px; background:#1D1D1B; color:var(--u-fg2); font-size:12px; display:flex; gap:7px; align-items:center}
.pt-white .seg span.on{background:var(--u-grad); color:#1A1A1A; font-weight:600}
.pt-white .seg b{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.25); font-size:10px}
.pt-list h4,
.pt-list x-h4{margin:4px 4px 10px; font-size:14px; font-weight:600}
.pt-li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border-radius:14px}
.pt-li div{display:grid; gap:1px} .pt-li b{font-size:12.5px} .pt-li small{font-size:11px}
.pt-li .u-chip{background:#E7E3DA; color:#4D4A45; border-color:#D9D4CA}
.pt-li .u-chip.o{background:rgba(237,105,68,.16); color:#A63C1E; border-color:rgba(237,105,68,.45)}
.pt-li .u-chip.ok{background:#151514; color:#F3F1EC; border-color:#151514}
.pt-li .ico{display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#E7E3DA; color:#4D4A45}
.pt-li .ico svg{width:15px; height:15px}
.pt-li.on{background:#151514; color:#F3F1EC} .pt-li.on small{color:#9C978E} .pt-li.on .ico{background:var(--u-grad); color:#1A1A1A}
.pt-li.on .u-chip{background:#F3F1EC; color:#151514; border-color:transparent}
.pt-det{background:#151514; color:var(--u-fg); border-radius:18px; padding:16px; display:grid; gap:12px; align-content:start}
.pt-det .hd{display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:16px}
.pt-det .hd .who{justify-self:end; display:flex; align-items:center; gap:10px}
.pt-det .hd .who div{display:grid}
.pt-items{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 56px; gap:8px}
.pt-items>div{position:relative; padding:12px; border-radius:14px; background:#1F1F1D; border:1px solid var(--u-line); display:grid; gap:16px; height:84px}
.pt-items>div .u-big{font-size:19px}
.pt-items>div svg{position:absolute; top:12px; right:12px; width:13px; height:13px; color:var(--u-fg3)}
.pt-items>.add{display:grid; place-items:center; background:repeating-linear-gradient(135deg,#1A1A19 0 6px,#1F1F1D 6px 12px)}
.pt-items>.add span{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#2A2A27; color:var(--u-fg2)}
.pt-tot{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:12px; align-items:center; padding:10px 10px 10px 14px; border-radius:14px; background:#1F1F1D}
.pt-tot>div{display:grid; gap:4px} .pt-tot .u-big{font-size:18px}
.pt-tot .acts{display:flex; gap:6px}
/* Field crew app, 390 x 844 */
.scr-field,.scr-job,.scr-book{background:radial-gradient(120% 50% at 50% 0%,#1A1512 0%,#0C0C0B 50%)}
.f-pad{padding:0 20px}
.f-hd{display:flex; align-items:center; gap:10px; margin-top:12px}
.f-hd div{display:grid; gap:1px; flex:1} .f-hd b{font-size:15px} .f-hd small{font-size:12px}
.f-hd .cnt{display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:999px; background:#1A1A19; border:1px solid var(--u-line2); font-weight:600; font-size:14px}
.f-hd .cnt svg{width:15px; height:15px; color:var(--u-acc)}
.f-h1{margin:20px 0 2px; font-size:29px; font-weight:600; letter-spacing:-.04em; line-height:1.05}
.f-sub{color:var(--u-fg2); font-size:14px}
.f-seg{display:flex; margin-top:16px; padding:4px; border-radius:999px; background:#141413; border:1px solid var(--u-line)}
.f-seg span{flex:1; text-align:center; padding:9px 0; border-radius:999px; font-size:14px; color:var(--u-fg3)}
.f-seg span.on{background:var(--u-grad); color:#1A1A1A; font-weight:600; box-shadow:var(--u-glow)}
.f-card{margin-top:12px; padding:14px 16px}
.f-card .u-hd small{font-size:13px; color:var(--u-fg2)}
.f-card .u-big{font-size:30px; margin-top:4px}
.f-card .ch-bars{margin-top:10px}
.f-two{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.f-two .u-card{padding:13px 14px; display:grid; gap:6px; align-content:start}
.f-ring{display:flex; align-items:center; justify-content:space-between}
.f-ring .rv{position:relative}
.f-ring .rv b{position:absolute; inset:0; display:grid; place-items:center; font-size:17px; letter-spacing:-.03em}
.f-next{margin-top:10px; display:grid; gap:8px}
.f-job{display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#151514; border:1px solid var(--u-line)}
.f-job .tm{display:grid; text-align:center; padding:6px 0; border-radius:11px; background:#1F1F1D; font-weight:600; font-size:13px} .f-job .tm small{font-size:10px}
.f-job div{display:grid; gap:1px} .f-job b{font-size:13.5px} .f-job small{font-size:11.5px}
.f-job.on{background:linear-gradient(90deg,rgba(237,105,68,.16),rgba(237,105,68,.04)); border-color:rgba(237,105,68,.4)}
.f-job.on .tm{background:var(--u-grad); color:#1A1A1A} .f-job.on .tm small{color:rgba(26,26,26,.7)}
/* Job detail */
.j-top{display:flex; align-items:center; justify-content:space-between; margin-top:10px}
.j-top b{font-size:16px}
.j-cust{margin-top:14px; padding:14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center}
.j-cust div{display:grid; gap:2px} .j-cust b{font-size:16px; letter-spacing:-.02em}
.j-sec{display:flex; justify-content:space-between; align-items:baseline; margin:16px 2px 8px}
.j-sec b{font-size:15px} .j-sec small{font-size:12px}
.j-list{padding:6px 14px}
.j-ck{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--u-line); font-size:14px}
.j-ck:last-child{border-bottom:0}
.j-ck i{width:22px; height:22px; border-radius:7px; border:1.5px solid #3D3C38; display:grid; place-items:center}
.j-ck i svg{width:13px; height:13px; opacity:0}
.j-ck.done i{background:var(--u-grad); border-color:transparent; color:#1A1A1A; box-shadow:0 0 12px rgba(237,105,68,.55)} .j-ck.done i svg{opacity:1}
.j-ck.done span{color:var(--u-fg2)}
.j-ck.cur{color:var(--u-fg)} .j-ck.cur i{border-color:#ED6944}
.j-ck small{font:500 10.5px "Geist Mono", monospace}
.j-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.j-photos>span{position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; border:1px solid var(--u-line2)}
.j-photos img{width:100%; height:100%; object-fit:cover}
.j-photos .add{display:grid; place-items:center; align-content:center; gap:6px; color:var(--u-fg3); font-size:11.5px; border:1.5px dashed #3D3C38; background:#121211}
.j-photos .add svg{width:20px; height:20px; color:var(--u-acc2)}
.j-chart{padding:12px 14px}
.j-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.j-btns .u-btn{height:48px; justify-content:center; font-size:14px}
/* Customer booking app */
.b-hero{position:relative; margin-top:12px; height:210px; border-radius:24px; overflow:hidden; border:1px solid var(--u-line2)}
.b-hero img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.b-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,12,11,.1) 30%,rgba(12,12,11,.92))}
.b-hero .cap{position:absolute; z-index:1; left:16px; right:16px; bottom:14px; display:grid; gap:4px}
.b-hero .cap b{font-size:22px; letter-spacing:-.03em}
.b-hero .u-chip{position:absolute; z-index:1; top:12px; left:12px}
.b-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.b-grid span{display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; background:#151514; border:1px solid var(--u-line); font-size:13.5px; font-weight:500}
.b-grid span i{display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#1F1F1D; color:var(--u-fg2)} .b-grid span i svg{width:16px; height:16px}
.b-grid span.on{background:var(--u-grad); color:#1A1A1A; border-color:transparent; box-shadow:var(--u-glow)} .b-grid span.on i{background:rgba(26,26,26,.14); color:#1A1A1A}
.b-dates{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.b-dates span{display:grid; text-align:center; padding:9px 0; border-radius:14px; background:#151514; border:1px solid var(--u-line); font-weight:600; font-size:17px}
.b-dates span small{font-size:10.5px; font-weight:500}
.b-dates span.on{background:#F3F1EC; color:#151514} .b-dates span.on small{color:#67635B}
.b-slots{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px}
.b-slots span{text-align:center; padding:9px 0; border-radius:12px; border:1px solid var(--u-line2); font-size:13px; color:var(--u-fg2)}
.b-slots span.on{border-color:#ED6944; color:#F79B79; background:rgba(237,105,68,.1)}
.b-slots span.x{opacity:.35; text-decoration:line-through}
/* AI inbox with review queue, 1280 x 800 */
.scr-inbox .u-main{display:grid; grid-template-columns:340px minmax(0,1fr) 292px; gap:16px; padding:22px 22px 0}
.ib-col{display:grid; grid-template-rows:auto auto auto 1fr; gap:12px; min-height:0}
.ib-col h3,
.ib-col x-h3{margin:0; font-size:30px; font-weight:600; letter-spacing:-.045em; display:flex; align-items:baseline; gap:10px}
.ib-col h3 small,
.ib-col x-h3 small{font-size:12px; letter-spacing:0; font-weight:500}
.ib-tabs{display:flex; gap:6px}
.ib-tabs .u-pill b{margin-left:3px; padding:2px 6px; border-radius:999px; background:#151514; color:#F3F1EC; font-size:10.5px}
.ib-tabs .u-pill:not(.on) b{background:#262624}
.ib-list{display:grid; gap:8px; align-content:start}
.ib-m{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:11px 12px; border-radius:16px; background:#141413; border:1px solid var(--u-line)}
.ib-m .r1{display:flex; justify-content:space-between; align-items:center; gap:8px}
.ib-m .r1 b{font-size:13px} .ib-m .r1 small{font:500 10.5px "Geist Mono", monospace}
.ib-m p{margin:3px 0 7px; font-size:12px; color:var(--u-fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ib-m .r3{display:flex; align-items:center; gap:6px}
.ib-m .ch{display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--u-fg3)} .ib-m .ch svg{width:12px; height:12px}
.ib-m .r3 .u-chip{margin-left:auto}
.ib-m.on{background:linear-gradient(180deg,#1E1C1A,#171615); border-color:rgba(237,105,68,.45); box-shadow:0 0 0 3px rgba(237,105,68,.08)}
.ib-m.on::before{content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:#ED6944}
.ib-th{display:grid; grid-template-rows:auto auto auto auto 1fr; gap:12px; min-height:0}
.ib-th .hd{display:flex; align-items:center; gap:12px; padding:12px 14px}
.ib-th .hd>div:not(.o-act){display:grid; gap:2px} .ib-th .hd b{font-size:15px}
.ib-th .hd .o-act{margin-left:auto}
.ib-msg{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:0 4px}
.ib-msg .bub{padding:13px 15px; border-radius:4px 18px 18px 18px; background:#1D1D1B; border:1px solid var(--u-line); font-size:13.5px; line-height:1.5; color:#E6E2DA}
.ib-msg .meta{display:flex; gap:10px; margin-top:6px; font:500 10.5px "Geist Mono", monospace; color:var(--u-fg3)}
.ib-ai{padding:14px 16px; border-color:rgba(237,105,68,.35); background:linear-gradient(180deg,#1E1A17,#151413); box-shadow:0 0 0 1px rgba(237,105,68,.12), 0 30px 60px -30px rgba(237,105,68,.35), var(--u-hi)}
.ib-ai .u-hd .t{display:flex; align-items:center; gap:10px}
.ib-ai .sp{display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:var(--u-grad); color:#1A1A1A; box-shadow:var(--u-glow)} .ib-ai .sp svg{width:15px; height:15px}
.ib-facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px}
.ib-facts>div{padding:9px 10px; border-radius:12px; background:#121211; border:1px solid var(--u-line); display:grid; gap:3px}
.ib-facts b{font-size:12.5px}
.ib-draft{margin-top:10px; padding:11px 13px; border-radius:12px; background:#121211; border:1px solid var(--u-line); font-size:12.5px; line-height:1.55; color:#DAD6CE; min-height:76px}
.ib-draft .car{display:inline-block; width:2px; height:14px; margin-left:1px; background:#ED6944; vertical-align:-2px}
.ib-src{display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap}
.ib-src small{margin-right:2px}
.ib-src .u-tag svg{width:11px; height:11px; margin-right:5px; color:var(--u-acc2)}
.ib-foot{display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--u-line)}
.ib-foot .lim{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--u-fg3); margin-right:auto}
.ib-foot .lim svg{width:14px; height:14px; color:var(--u-acc2)}
.ib-q{display:grid; gap:12px; align-content:start}
.ib-q .u-card{padding:14px 16px}
.ib-q .dnw{display:flex; align-items:center; gap:16px; margin-top:12px}
.ib-q .o-dl{gap:9px} .ib-q .lg{font-size:11px}
.ib-rv{display:grid; gap:10px; margin-top:10px}
.ib-rv>div{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center}
.ib-rv>div>span{display:grid; gap:6px} .ib-rv b{font-size:12.5px}
.ib-rv .n{font:600 13px "Inter", sans-serif}
.ib-act{padding:14px 16px}
.ib-tl{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:0}
.ib-tl li{position:relative; display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 0; font-size:12.5px; color:var(--u-fg2)}
.ib-tl li i{width:10px; height:10px; border-radius:50%; border:2px solid #3D3C38; background:#121211; justify-self:center; position:relative; z-index:1}
.ib-tl li::before{content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:#2A2926}
.ib-tl li:first-child::before{top:50%} .ib-tl li:last-child::before{bottom:50%}
.ib-tl li.done i{background:#ED6944; border-color:#ED6944}
.ib-tl li.cur{color:var(--u-fg)} .ib-tl li.cur i{border-color:#ED6944; box-shadow:0 0 0 4px rgba(237,105,68,.18)}
.ib-tl small{font:500 10.5px "Geist Mono", monospace}
.b-rem{display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:16px; background:#151514; border:1px solid var(--u-line)}
.b-rem div{display:grid; gap:1px; flex:1} .b-rem b{font-size:13.5px}
.b-rem .tog{width:44px; height:26px; border-radius:99px; background:var(--u-grad); position:relative; box-shadow:var(--u-glow)}
.b-rem .tog::after{content:""; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#F3F1EC}
.b-rem .ico{display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#1F1F1D; color:var(--u-acc2)} .b-rem .ico svg{width:16px; height:16px}
.pt-ch{margin-top:14px; padding-top:12px; border-top:1px solid var(--u-line)}
.pt-ch .o-chart{margin-top:8px}
.pt-items>.add svg{position:static; width:15px; height:15px}
.ib-lim ul{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:9px}
.ib-lim li{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--u-fg2)}
.ib-lim li svg{width:18px; height:18px; padding:3px; border-radius:6px; flex:none}
.ib-lim li.y svg{background:rgba(237,105,68,.16); color:#F79B79}
.ib-lim li.n svg{background:#22221F; color:#7B776F; transform:rotate(45deg)}
/* Dispatch board, 880 x 600 (hero) */
.scr-dsp{padding:18px 20px 18px; display:grid; grid-template-rows:auto auto auto 1fr; gap:12px; background:radial-gradient(110% 80% at 85% 0%,#1C1512 0%,#0C0C0B 55%)}
.d-top{display:flex; align-items:center; gap:12px}
.d-top .u-mark{margin:0; width:34px; height:34px; font-size:15px; border-radius:11px}
.d-ttl{display:grid; gap:1px} .d-ttl h3, .d-ttl x-h3{margin:0; font-size:22px; font-weight:600; letter-spacing:-.04em; line-height:1}
.d-date{display:flex; align-items:center; gap:10px; margin-left:14px; padding:3px; border-radius:999px; background:#121211; border:1px solid var(--u-line)}
.d-date b{font-size:12.5px} .d-date .u-ib{width:26px; height:26px} .d-date .u-ib svg{width:12px; height:12px} .d-date .fl-r svg{transform:rotate(180deg)}
.d-top .sp{flex:1}
.d-flt{display:flex; align-items:center; gap:8px}
.d-key{display:flex; gap:14px; margin-left:10px; font-size:11px; color:var(--u-fg2)}
.d-key span{display:flex; align-items:center; gap:6px} .d-key i{width:9px; height:9px; border-radius:3px}
.k-d{background:#3A3935} .k-p{background:transparent; box-shadow:inset 0 0 0 1.5px #ED6944} .k-s{background:#2A2A27; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.d-cnt{margin-left:auto}
.d-board{padding:10px 12px 6px}
.d-hrs{display:grid; grid-template-columns:132px minmax(0,1fr); height:20px; align-items:center}
.d-lh{font:500 9.5px "Geist Mono", monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--u-fg3)}
.d-ht{position:relative; height:100%}
.d-ht span{position:absolute; top:50%; transform:translateY(-50%); font:500 9.5px "Geist Mono", monospace; color:var(--u-fg3); white-space:nowrap}
.d-lanes{position:relative}
.d-ln{display:grid; grid-template-columns:132px minmax(0,1fr); height:66px; border-top:1px solid var(--u-line)}
.d-ln.on{background:linear-gradient(90deg,rgba(237,105,68,.07),transparent 60%)}
.d-who{display:flex; align-items:center; gap:9px}
.d-who div{display:grid; gap:1px} .d-who b{font-size:12.5px} .d-who small{font-size:10.5px}
.d-tr{position:relative; background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 11.111%)}
.jb{position:absolute; top:8px; bottom:8px; width:calc(var(--w) - 5px); padding:6px 9px; border-radius:11px; display:grid; align-content:center; gap:1px; overflow:hidden; white-space:nowrap; background:#1F1F1D; border:1px solid var(--u-line2)}
.jb b{font-size:11.5px; line-height:1.15; overflow:hidden; text-overflow:ellipsis} .jb small{font-size:10px; overflow:hidden; text-overflow:ellipsis}
.jb.d{background:#171716; border-color:var(--u-line)} .jb.d b{color:var(--u-fg3)} .jb.d small{color:#6F6B64}
.jb.d::after{content:""; position:absolute; right:8px; top:8px; width:6px; height:6px; border-radius:50%; background:#57544E}
.jb.p{background:linear-gradient(90deg,rgba(237,105,68,.2),rgba(237,105,68,.07)); border-color:rgba(237,105,68,.5); box-shadow:inset 3px 0 0 #ED6944}
.jb.slot{background:none; border:1.5px dashed #4A4842; place-content:center; text-align:center}
.jb.new{background:var(--u-grad); border-color:transparent; color:#1A1A1A; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px -8px rgba(237,105,68,.85); z-index:2; overflow:visible}
.jb.new small{color:rgba(26,26,26,.72)}
.jb.new .st{position:absolute; right:6px; top:-9px; padding:3px 7px; box-shadow:0 4px 10px -2px rgba(0,0,0,.6); border-radius:999px; background:#151514; color:#F3F1EC; font:600 8.5px/1.2 "Geist Mono", monospace; letter-spacing:.05em; text-transform:uppercase; font-style:normal}
.jb.new.done{background:#262624; color:var(--u-fg); box-shadow:inset 0 0 0 1.5px #ED6944} .jb.new.done small{color:var(--u-fg3)} .jb.new.done .st{background:var(--u-grad); color:#1A1A1A}
.d-now{position:absolute; left:132px; right:0; top:-22px; bottom:0; pointer-events:none; transform:translateX(29.63%)}
.d-now i{position:absolute; left:0; top:22px; bottom:0; width:2px; margin-left:-1px; background:#ED6944; box-shadow:0 0 10px rgba(237,105,68,.8)}
.d-now i::before{content:attr(data-t); position:absolute; top:-21px; left:50%; transform:translateX(-50%); padding:3px 7px; border-radius:999px; background:#ED6944; color:#1A1A1A; font:600 9.5px "Geist Mono", monospace; white-space:nowrap}
.d-now i::after{content:""; position:absolute; bottom:-3px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#ED6944}
.d-low{display:grid; grid-template-columns:250px minmax(0,1fr); gap:12px; min-height:0}
.d-log{padding:12px 16px; overflow:hidden}
.d-log ul{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:0}
.d-log li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; padding:5px 0; font-size:11.5px; color:var(--u-fg2); border-top:1px solid var(--u-line); white-space:nowrap}
.d-log li span{overflow:hidden; text-overflow:ellipsis}
.d-log li:first-child{border-top:0}
.d-log time{font:500 10px/1.5 "Geist Mono", monospace; color:var(--u-fg3)}
.d-log li[data-log] time{color:#F79B79} .d-log li[data-log] span{color:var(--u-fg)}
.d-log .lg-x{opacity:0}
.d-un{padding:12px 14px; display:grid; gap:8px; align-content:start}
.d-ur{display:grid; gap:2px; padding:8px 10px; border-radius:11px; border:1.5px dashed #3D3C38} .d-ur b{font-size:12px} .d-ur small{font-size:10.5px}
/* Customer visit tracker, 390 x 844 (hero phone) */
.scr-trk{background:radial-gradient(120% 60% at 50% 0%,#1E1512 0%,#0C0C0B 60%)}
.t-top{display:flex; align-items:center; gap:10px; margin-top:8px}
.t-top .u-mark{margin:0; width:36px; height:36px; font-size:15px} .t-top div{display:grid; gap:1px; flex:1} .t-top b{font-size:14px}
.t-hero{display:grid; gap:7px; margin:22px 2px 16px}
.t-hero b{font-size:30px; letter-spacing:-.045em; line-height:1; margin-bottom:4px}
.t-when{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--u-fg2)} .t-when svg{width:15px; height:15px; color:var(--u-acc2)}
.t-steps{padding:8px 16px}
.t-st{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:8px 0}
.t-st::before{content:""; position:absolute; left:11px; top:-8px; height:16px; width:2px; background:#2E2D2A}
.t-st:first-child::before{display:none}
.t-st.done::before{background:#ED6944}
.t-st i{width:24px; height:24px; border-radius:50%; border:1.5px solid #3D3C38; display:grid; place-items:center; background:#121211; position:relative; z-index:1}
.t-st i svg{width:13px; height:13px; opacity:0}
.t-st div{display:grid; gap:1px} .t-st b{font-size:14px; color:var(--u-fg3); font-weight:500} .t-st small{font-size:11.5px}
.t-st.done i{background:var(--u-grad); border-color:transparent; color:#1A1A1A; box-shadow:0 0 12px rgba(237,105,68,.55)} .t-st.done i svg{opacity:1}
.t-st.done b{color:var(--u-fg); font-weight:600}
.t-st:not(.done) .tm{opacity:0}
.t-st.cur i{border-color:#ED6944; box-shadow:0 0 0 4px rgba(237,105,68,.18)} .t-st.cur b{color:var(--u-fg); font-weight:600}
.t-tech{margin-top:12px; padding:12px 14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center}
.t-tech div{display:grid; gap:1px} .t-tech b{font-size:14px}
.t-msg{margin-top:12px; padding:12px 14px; border-radius:18px 18px 18px 6px; background:#F3F1EC; color:#151514; display:grid; gap:4px}
.t-msg small{color:#67635B; font:500 10px "Geist Mono", monospace; letter-spacing:.05em; text-transform:uppercase}
.t-msg p{margin:0; font-size:13px; line-height:1.4}
.t-btns{position:absolute; left:20px; right:20px; bottom:30px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.t-btns .u-btn{height:46px; justify-content:center; font-size:14px}
.t-btns .t-req{position:absolute; inset:0; opacity:0; pointer-events:none}
/* Integration console, 1180 x 820 (02 tablet). Panels sit at fixed coordinates so the wires land exactly on their fields. */
.scr-sync{background:radial-gradient(90% 70% at 50% 0%,#1A1512 0%,#0C0C0B 60%)}
.scr-sync>*{position:absolute}
.sy-top{left:22px; right:22px; top:20px; height:42px; display:flex; align-items:center; gap:12px}
.sy-top .u-mark{margin:0; width:36px; height:36px; font-size:15px; border-radius:11px}
.sy-ttl{display:grid; gap:1px} .sy-ttl h3, .sy-ttl x-h3{margin:0; font-size:22px; font-weight:600; letter-spacing:-.04em; line-height:1}
.sy-tabs{display:flex; gap:2px; margin-left:18px; padding:3px; border-radius:999px; background:#F3F1EC}
.sy-tabs span{padding:7px 13px; border-radius:999px; font-size:12px; color:#5F5B54; font-weight:500}
.sy-tabs span.on{background:var(--u-grad); color:#1A1A1A; font-weight:600; box-shadow:var(--u-glow)}
.sy-top .sp,.sy-flow .sp{flex:1}
.sy-con{display:flex; align-items:center; gap:4px; height:36px; padding:0 14px 0 5px; border-radius:999px; background:#161615; border:1px solid var(--u-line2)}
.sy-con b{font-size:12px; margin-left:6px}
.sy-ic{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#232321; color:var(--u-fg2); box-shadow:0 0 0 2px #161615}
.sy-ic svg{width:13px; height:13px}
.sy-ic.o{background:var(--u-grad); color:#1A1A1A; box-shadow:var(--u-glow)}
.sy-con .sy-ic+.sy-ic{margin-left:-8px}
.sy-flow{left:22px; right:22px; top:76px; height:34px; display:flex; align-items:center; gap:12px}
.sy-flow h4,
.sy-flow x-h4{margin:0; font-size:16px; font-weight:600; letter-spacing:-.02em}
.sy-src{left:22px; top:124px; width:340px; height:456px; padding:0}
.sy-ch{display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; border-bottom:1px solid var(--u-line)}
.sy-ch div{display:grid; gap:1px; flex:1} .sy-ch b{font-size:13px} .sy-ch small{font-size:11px}
.sy-ch time{font:500 10px "Geist Mono", monospace; color:var(--u-fg3)}
.sy-f{position:relative; height:54px; padding:9px 26px 0 14px; display:grid; gap:4px; border-bottom:1px solid var(--u-line); align-content:start}
.sy-f small{font:500 9.5px "Geist Mono", monospace; letter-spacing:.05em; text-transform:uppercase}
.sy-f .v{display:block; font-size:13px; color:var(--u-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sy-f[data-fi="5"] .v{white-space:normal; font-size:12px; line-height:1.3; color:var(--u-fg2)}
.sy-f .pt{position:absolute; right:-5px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:#0C0C0B; border:2px solid #ED6944; box-shadow:0 0 8px rgba(237,105,68,.7); z-index:2}
.sy-sub{position:absolute; left:14px; right:14px; bottom:14px; height:38px; justify-content:center}
.sy-w{left:362px; top:124px; width:238px; height:470px; pointer-events:none; z-index:1}
.sy-w svg{display:block; overflow:visible}
.sy-w .g{fill:none; stroke:rgba(237,105,68,.14); stroke-width:7; stroke-linecap:round}
.sy-w .l{fill:none; stroke:#ED6944; stroke-width:1.8; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(237,105,68,.8))}
.sy-w circle{fill:#F3F1EC; stroke:#ED6944; stroke-width:2.5}
.sy-lb{position:absolute; left:50%; transform:translate(-50%,-50%); padding:4px 9px; border-radius:999px; background:#151514; border:1px solid rgba(237,105,68,.45); color:#F79B79; font:500 9.5px/1.2 "Geist Mono", monospace; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.sy-d{left:600px; width:558px; padding:0}
.sy-cust{top:124px; height:166px}
.sy-who{display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; margin-top:0}
.sy-who div{display:grid; gap:1px} .sy-who b{font-size:14px} .sy-who .u-av{width:32px; height:32px; font-size:11px}
.sy-kv{position:relative; display:grid; grid-template-columns:130px minmax(0,1fr) auto; align-items:center; height:24px; padding:0 14px; font-size:12.5px}
.sy-kv small{font:500 9.5px "Geist Mono", monospace; letter-spacing:.05em; text-transform:uppercase}
.sy-kv em{font-style:normal; font:500 9.5px "Geist Mono", monospace; letter-spacing:.05em; text-transform:uppercase; color:#F79B79}
.sy-sch{top:304px; height:128px}
.sy-day{position:relative; margin:10px 14px 0; height:62px; border-radius:12px; background:#121211; border:1px solid var(--u-line); background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 25%)}
.sy-day>span{position:absolute; top:5px; margin-left:6px; font:500 9px "Geist Mono", monospace; color:var(--u-fg3)}
.sy-day .bk{position:absolute; top:20px; bottom:7px; border-radius:9px; display:grid; align-content:center; padding:0 10px; font-style:normal; background:var(--u-grad); color:#1A1A1A; box-shadow:0 8px 20px -8px rgba(237,105,68,.8); overflow:hidden; white-space:nowrap}
.sy-day .bk b{font-size:11.5px} .sy-day .bk small{font-size:10px; color:rgba(26,26,26,.72)}
.sy-day .bk.mut{background:#262624; color:var(--u-fg3); box-shadow:none; font-size:10.5px}
.sy-est{top:446px; height:142px}
.sy-li{position:relative; display:flex; justify-content:space-between; align-items:center; height:22px; padding:0 14px; font-size:12px; color:var(--u-fg2)}
.sy-li:first-of-type{margin-top:4px}
.sy-li b{color:var(--u-fg); font-weight:600}
.sy-li.note{color:var(--u-fg3); font-style:italic; border-top:1px solid var(--u-line); margin-top:4px; height:26px}
.sy-li .tot{font-style:normal; font-size:15px; letter-spacing:-.02em}
[data-hit]{position:relative}
[data-hit]::after{content:""; position:absolute; inset:-2px 4px; border-radius:8px; background:rgba(237,105,68,.22); box-shadow:inset 0 0 0 1px rgba(237,105,68,.6); opacity:0; pointer-events:none}
.u-chip[data-hit]::after,.sy-day .bk[data-hit]::after{display:none}
[data-hit].hit::after{opacity:1}
.sy-log{left:22px; right:22px; top:600px; height:198px; padding:12px 16px}
.sy-log ol{list-style:none; margin:8px 0 0; padding:0}
.sy-log li{display:grid; grid-template-columns:70px 130px minmax(0,1fr) auto; gap:12px; align-items:center; height:25px; border-top:1px solid var(--u-line); font-size:12px; color:var(--u-fg2)}
.sy-log li:first-child{border-top:0}
.sy-log time{font:500 10px "Geist Mono", monospace; color:var(--u-fg3)}
.sy-log .t{font-weight:600; color:var(--u-fg)}
.sy-log .u-chip{height:19px; font-size:9px}
.sy-log li.warn span:not(.u-chip){color:#F79B79}
/* ===== v6 compositions: hero product scene and the four needs stages ===== */
/* Hero: one job moving through three surfaces */
.hx{position:relative; height:620px; color:var(--u-fg,#F3F1EC)}
.hx-ill{left:8%; top:2px}
.hx-board{position:absolute; top:44px; left:8%; width:114%; border-radius:22px; padding:7px; z-index:1; background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 30%,rgba(255,255,255,.02)); box-shadow:0 60px 120px -40px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.hx-board>.fit{border-radius:16px; overflow:hidden}
.hx-cust{position:absolute; left:-3%; top:214px; width:184px; z-index:3}
.hx-crew{position:absolute; left:80%; top:250px; width:166px; z-index:3}
.hx-lbl{display:block; margin-top:12px; text-align:center; font:500 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#B0ACA3}
.hx-ai{position:absolute; right:-6%; top:-8px; z-index:4; width:300px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 12px; padding:14px; border-radius:18px; background:rgba(24,24,22,.94); border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 60px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font:400 13px/1.35 "Inter", ui-sans-serif, system-ui, sans-serif}
.hx-ai .ico{display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--u-grad); color:#1A1A1A; box-shadow:var(--u-glow)} .hx-ai .ico svg{width:17px; height:17px}
.hx-ai>div{display:grid; gap:2px} .hx-ai b{font-size:13px; font-weight:600} .hx-ai small{font-size:11.5px; color:var(--u-fg3)}
.hx-ai .hx-ai-f{grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid rgba(255,255,255,.08)}
.hx-ai .u-btn{height:30px; font-size:12px}
.hx-thread{position:absolute; inset:0; width:100%; height:100%; z-index:2; overflow:visible; pointer-events:none; display:none}
.js:not(.rm) .hx-thread{display:block}
.hx-thread .th{fill:none; stroke:#ED6944; stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(237,105,68,.9))}
.hx-thread .th-g{fill:none; stroke:rgba(237,105,68,.16); stroke-width:8; stroke-linecap:round}
.hx-thread circle{fill:#F3F1EC; stroke:#ED6944; stroke-width:3}
.hx .u-cursor{opacity:0}
.js:not(.rm) .hx-board{animation:floatin 1.3s var(--ease) .5s backwards}
.js:not(.rm) .hx-cust{animation:floatin 1.3s var(--ease) .75s backwards}
.js:not(.rm) .hx-crew{animation:floatin 1.3s var(--ease) .9s backwards}
/* Needs: editorial rows with full width stages */
.nd{display:grid; gap:clamp(96px,10vw,160px)}
.nd-copy{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,4.8fr) minmax(0,5fr); gap:24px 40px; align-items:end; padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--rule)}
.nd-num{font:600 clamp(64px,8vw,132px)/.78 var(--display); letter-spacing:-.07em; background:linear-gradient(180deg,var(--fg) 10%,color-mix(in srgb,var(--fg) 18%,transparent) 95%); -webkit-background-clip:text; background-clip:text; color:transparent}
.nd-copy h3,
.nd-copy x-h3{font-size:clamp(30px,3.2vw,52px); letter-spacing:-.04em; line-height:1; max-width:13ch}
.nd-txt{display:grid; gap:14px; justify-items:start}
.nd-txt p{color:var(--muted); max-width:44ch}
.nd-cap{margin-top:16px; font:500 12px/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); max-width:70ch}
.stage{position:relative; isolation:isolate; border-radius:clamp(22px,2.6vw,36px); background:#0B0B0A; color:#F3F1EC; container-type:inline-size; aspect-ratio:1328 / 780; overflow:visible}
.stage::before{content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit; overflow:hidden;
background:radial-gradient(60% 70% at 72% 40%,rgba(237,105,68,.16),transparent 70%), radial-gradient(40% 50% at 20% 90%,rgba(120,130,150,.08),transparent 70%), #0B0B0A}
.stage::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,")}
.st-photo{position:absolute; z-index:-1; inset:0 auto 0 0; width:48%; overflow:hidden; border-radius:inherit; border-top-right-radius:0; border-bottom-right-radius:0}
.st-photo img{width:100%; height:112%; object-fit:cover; display:block; margin-top:-6%}
.st-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,11,10,.15) 0%,rgba(11,11,10,.35) 50%,#0B0B0A 98%), linear-gradient(0deg,rgba(11,11,10,.75),transparent 35%)}
.st-photo.r{inset:0 0 0 auto; width:100%; border-radius:inherit}
.st-photo.rt{inset:0 0 0 auto; width:50%; border-radius:inherit; border-top-left-radius:0; border-bottom-left-radius:0}
.st-photo.rt img{object-position:70% 40%}
.st-photo.rt::after{background:linear-gradient(270deg,rgba(11,11,10,.05) 0%,rgba(11,11,10,.25) 45%,#0B0B0A 97%), linear-gradient(0deg,rgba(11,11,10,.8),transparent 38%)}
.st-photo.r::after{background:linear-gradient(90deg,rgba(11,11,10,.55),rgba(11,11,10,.88) 55%,rgba(11,11,10,.7)), linear-gradient(0deg,#0B0B0A,transparent 40%)}
.stage .fl{position:absolute}
/* 01 laptop over the workshop */
.st1-lap{position:absolute; right:3.5%; top:9%; width:66%}
.st1-t{left:3.5%; top:9%}
.tk{left:27%; bottom:9%; width:clamp(264px,24cqw,300px); padding:16px; border-radius:22px 22px 22px 22px; color:#1A1A1A; display:grid; gap:12px; z-index:5;
background:linear-gradient(160deg,#F7976F 0%,#ED6944 45%,#D24E2B 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 40px 70px -30px rgba(0,0,0,.9), 0 20px 50px -20px rgba(237,105,68,.6)}
.tk-h{display:flex; align-items:center; gap:10px} .tk-h div{display:grid; flex:1} .tk-h b{font-size:13px} .tk-h small{font-size:11.5px; color:rgba(26,26,26,.7)}
.tk-h .u-av{box-shadow:0 0 0 2px #EE7049}
.tk-go{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#1A1A1A; color:#F3F1EC} .tk-go svg{width:15px; height:15px}
.tk-t{font-size:22px; letter-spacing:-.03em; line-height:1.05}
.tk-m{display:grid; gap:6px; font-size:12px; color:rgba(26,26,26,.78)} .tk-m span{display:flex; align-items:center; gap:7px} .tk-m svg{width:14px; height:14px}
.tk-f{display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid rgba(26,26,26,.16)}
.tk-s{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#1A1A1A; color:#F3F1EC; font:500 10px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase}
.tk-s::before{content:""; width:6px; height:6px; border-radius:50%; background:#ED6944}
.tk .u-stack>*{box-shadow:0 0 0 2px #E25C37; margin-left:-4px} .tk .u-stack>*:first-child{margin-left:0}
/* 02 tablet and sync chain */
.st-2::before{background:radial-gradient(50% 60% at 30% 40%,rgba(237,105,68,.14),transparent 70%), radial-gradient(80% 80% at 90% 100%,#1A1918,transparent 60%), linear-gradient(160deg,#121211,#0A0A09)}
.st2-tab{position:absolute; left:3.5%; top:9.5%; width:68%}
.sync{right:2.5%; top:12%; width:27%; padding:18px; border-radius:22px; background:rgba(22,22,21,.92); border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 80px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:4}
.sync-h{display:flex; justify-content:space-between; align-items:center} .sync-h div{display:grid} .sync-h b{font-size:15px} .sync-h small{font-size:12px; color:#7B776F}
.chain-w{position:relative; margin:14px 0 4px}
.chain{display:block; width:100%; height:auto; overflow:visible}
.chain .cp-b{fill:none; stroke:#2A2926; stroke-width:12; stroke-linecap:round; stroke-linejoin:round}
.chain .cp{fill:none; stroke:#ED6944; stroke-width:2; stroke-dasharray:4 6; stroke-linecap:round; opacity:.85}
.chain .pk{fill:#F7A27F; filter:drop-shadow(0 0 5px #ED6944)}
.cn{position:absolute; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:6px; z-index:1}
.cn i{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#1F1F1D; border:1px solid rgba(255,255,255,.12); color:#B3AFA7; box-shadow:0 0 0 5px #161615}
.cn i svg{width:17px; height:17px}
.cn.on i{background:linear-gradient(180deg,#F6906C,#E0552F); color:#1A1A1A; border-color:transparent; box-shadow:0 0 0 5px #161615, 0 0 22px rgba(237,105,68,.7)}
.cn small{font-size:11px; color:#B3AFA7; white-space:nowrap; padding:2px 7px; border-radius:999px; background:#161615}
.sync-log{list-style:none; margin:10px 0 0; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.07); display:grid; gap:10px}
.sync-log li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; align-items:center; font-size:12px; color:#B3AFA7}
.sync-log i{display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:rgba(237,105,68,.16); color:#F79B79} .sync-log svg{width:12px; height:12px}
.sync-log small{font:500 10.5px var(--mono); color:#7B776F}
.st2-t{right:6%; bottom:8%; z-index:5}
/* 03 AI inbox window over the loft */
.st3-win{position:absolute; left:3%; top:9%; width:70%; border-radius:20px; padding:6px; background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 30%); box-shadow:0 70px 120px -50px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.14)}
.st3-win>.fit{border-radius:15px; overflow:hidden}
.rvw{right:3%; bottom:9%; width:clamp(300px,26cqw,330px); padding:16px; border-radius:22px; background:#F3F1EC; color:#151514; display:grid; gap:12px; z-index:5; box-shadow:0 50px 90px -30px rgba(0,0,0,.95)}
.rvw-h{display:flex; align-items:center; gap:10px} .rvw-h div{display:grid; flex:1} .rvw-h b{font-size:14px} .rvw-h small{font-size:12px; color:#67635B}
.rvw-h .u-av{width:38px; height:38px; box-shadow:none}
.rvw p{margin:0; font-size:14px; line-height:1.45; color:#3A3835}
.rvw-a{display:flex; flex-wrap:wrap; gap:8px} .rvw-h .u-chip{flex:none} .rvw p{overflow-wrap:break-word}
.rvw-a .u-btn.gh{background:#E7E3DA; border-color:#D9D4CA; color:#151514}
.rvw .u-chip.o{background:rgba(237,105,68,.14); color:#A63C1E}
.rvw .u-chip.live-ok{background:#151514 !important; color:#F3F1EC !important; border-color:#151514 !important} .rvw .u-chip.live-ok::before{background:#ED6944}
.st3-t{left:24%; bottom:4%; z-index:6}
/* 04 bento around the field app */
.st-4{aspect-ratio:1328 / 820}
.st-4::before{background:radial-gradient(40% 55% at 50% 45%,rgba(237,105,68,.2),transparent 70%), linear-gradient(180deg,#111110,#0A0A09)}
.bnt{position:absolute; border-radius:24px; background:linear-gradient(180deg,#1A1A19,#131312); border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 80px -36px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; z-index:2}
.bw-photo{left:3%; top:8%; width:29%; height:52%}
.bw-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.bw-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,11,10,0) 40%,rgba(11,11,10,.92))}
.bw-chip{position:absolute; z-index:1; left:14px; top:14px}
.bw-cap{position:absolute; z-index:1; left:16px; right:16px; bottom:16px; display:grid; gap:4px}
.bw-cap small{color:#CFCBC2; font-size:12px} .bw-cap b{font-size:20px; letter-spacing:-.03em}
.bw-sl{display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:#CFCBC2} .bw-sl b{font-size:12px; letter-spacing:0}
.bw-map{left:3%; top:63%; width:29%; height:31%; padding:16px; display:grid; grid-template-rows:auto 1fr auto; gap:8px}
.bw-map .ch-map{width:100%; height:100%; min-height:0} .bw-map{overflow:hidden} .bw-map .u-big{overflow:visible}
.bw-route{display:flex; justify-content:space-between; font-size:12px; color:#B3AFA7} .bw-route span{display:flex; align-items:center; gap:6px} .bw-route svg{width:13px; height:13px; color:#F7A27F}
.bw-ph1{position:absolute; left:36%; top:4%; width:25.5%; z-index:3}
.bw-ph2{position:absolute; left:65%; top:27%; width:19%; z-index:2}
.bw-ring{right:3%; top:5%; width:15%; padding:14px; display:grid; gap:8px; justify-items:start; z-index:4}
.bw-ring small{font-size:12px; color:#7B776F}
.bw-rv{position:relative; justify-self:center}
.bw-rv b{position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-size:22px; letter-spacing:-.04em; line-height:1}
.bw-rv b em{font-style:normal; font-size:11px; color:#7B776F; letter-spacing:0; font-weight:500}
.bw-t{left:52%; bottom:5%; z-index:5}
/* 02 variant: integration console with the manual handoffs it removes */
.hof{right:2.5%; top:13%; width:27%; padding:18px; border-radius:22px; background:#F3F1EC; color:#151514; z-index:4; box-shadow:0 50px 90px -30px rgba(0,0,0,.95); font:400 13px/1.35 "Inter", ui-sans-serif, system-ui, sans-serif}
.hof-h{display:flex; justify-content:space-between; align-items:flex-start; gap:10px} .hof-h div{display:grid; gap:2px} .hof-h b{font-size:16px; letter-spacing:-.02em} .hof-h small{font-size:12px; color:#67635B}
.hof .u-chip.o{background:rgba(237,105,68,.14); color:#A63C1E}
.hof ul{list-style:none; margin:14px 0 0; padding:0; display:grid}
.hof li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; align-items:center; padding:11px 0; border-top:1px solid #E2DED5; font-size:13.5px; color:#3A3835}
.hof li i{display:grid; place-items:center; width:22px; height:22px; border-radius:7px; border:1.5px solid #CFCAC0; color:transparent}
.hof li i svg{width:13px; height:13px}
.hof li span{position:relative; justify-self:start}
.hof li span::after{content:""; position:absolute; left:0; right:0; top:52%; height:1.5px; background:#151514; transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease)}
.hof li.done i{background:var(--u-grad); border-color:transparent; color:#1A1A1A; box-shadow:0 4px 12px -4px rgba(237,105,68,.8)}
.hof li.done span{color:#8A867E} .hof li.done span::after{transform:scaleX(1); background:#8A867E}
.hof-f{display:flex; align-items:center; gap:8px; margin-top:6px; padding:12px 14px; border-radius:14px; background:#151514; color:#F3F1EC; font-size:12.5px}
.hof-f .d{width:8px; height:8px; border-radius:50%; background:#ED6944; box-shadow:0 0 10px #ED6944}
.hof-f b{margin-left:auto; color:#F79B79; font-weight:600}
.st-2b .st2-t{right:4%; bottom:7%}
/* Plain-language guides: ordered hero steps, Hollis framing, before and after, what you are seeing */
.hx-col{display:grid; gap:14px; min-width:0}
.hx-ill{left:38%; right:auto; top:auto; bottom:6px}
.hx-cap{margin:0; padding-left:0; color:#CFCBC2; font-size:15px; line-height:1.5; max-width:56ch}
.hx-steps{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.hx-steps li{position:relative; display:flex; align-items:center; gap:9px; min-height:40px; padding:6px 11px 6px 6px; border-radius:14px; background:rgba(22,22,21,.82); border:1px solid rgba(245,243,238,.18); color:#F3F1EC; font-size:12.5px; font-weight:500; line-height:1.25; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transform-origin:50% 100%; transition:transform .5s var(--ease), background .45s, color .45s, border-color .45s, box-shadow .45s}
.hx-steps i{flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#F3F1EC; color:#151514; font:700 11.5px/1 "Inter", sans-serif; font-style:normal; transition:background .45s, color .45s}
.hx-steps li{white-space:nowrap; flex:0 1 auto; cursor:pointer}
.hx-steps li.done i{background:#ED6944; color:#1A1A1A; font-size:0}
.hx-steps li.done i::after{content:""; width:9px; height:5px; border-left:2px solid #1A1A1A; border-bottom:2px solid #1A1A1A; transform:translateY(-1px) rotate(-45deg)}
.hx-col[data-step="1"] [data-hs="1"],.hx-col[data-step="2"] [data-hs="2"],.hx-col[data-step="3"] [data-hs="3"],.hx-col[data-step="4"] [data-hs="4"]{background:var(--u-grad); border-color:transparent; color:#1A1A1A; font-weight:600; transform:translateY(-2px); box-shadow:0 0 0 4px rgba(237,105,68,.22), 0 16px 34px -12px rgba(237,105,68,.95)}
.hx-col[data-step="1"] [data-hs="1"] i,.hx-col[data-step="2"] [data-hs="2"] i,.hx-col[data-step="3"] [data-hs="3"] i,.hx-col[data-step="4"] [data-hs="4"] i{background:#151514; color:#F3F1EC}
/* Spotlight: the screen for the current step stays lit, the others dim behind a veil (opacity only) */
.hx-board,.hx-ai{isolation:isolate}
.hx-board::after,.hx-ai::after,.hx-cust .phone::after,.hx-crew .phone::after{content:""; position:absolute; inset:0; z-index:20; border-radius:inherit; background:rgba(11,11,10,.42); opacity:0; pointer-events:none; transition:opacity .5s var(--ease)}
.hx-col.focus[data-step]:not([data-step="1"]) .hx-cust .phone::after,
.hx-col.focus[data-step]:not([data-step="2"]) .hx-board::after,
.hx-col.focus[data-step]:not([data-step="3"]) .hx-ai::after,
.hx-col.focus[data-step]:not([data-step="4"]) .hx-crew .phone::after{opacity:1}
.hx-cust .phone,.hx-crew .phone{transition:transform .6s var(--ease)}
.hx-col.focus[data-step="1"] .hx-cust .phone,.hx-col.focus[data-step="4"] .hx-crew .phone{transform:scale(1.04)}
.hx-board::after{background:rgba(11,11,10,.26)}
.hx-col.focus[data-step="3"] .hx-ai{outline:1.5px solid rgba(237,105,68,.85); outline-offset:3px}
.hx-col.focus[data-step="2"] #dspNew{box-shadow:0 0 0 3px rgba(237,105,68,.35), 0 14px 32px -8px rgba(237,105,68,.95)}
.hx{height:600px}
.nd-frame{display:flex; align-items:center; gap:16px; margin-bottom:calc(clamp(96px,10vw,160px) * -.5); padding:18px 22px; border-radius:20px; border:1px solid var(--rule); background:color-mix(in srgb,var(--fg) 4%,transparent)}
.nd-frame .u-mark{margin:0; flex:none; width:44px; height:44px; font-size:19px; border-radius:13px}
.nd-frame p{margin:0; font-size:17px; line-height:1.5; color:var(--muted); max-width:84ch}
.nd-frame b{color:var(--fg)}
.nd-ba{display:grid; gap:8px; margin:2px 0 4px; padding:14px 16px; border-radius:16px; border:1px solid var(--rule); max-width:46ch}
.nd-ba div{display:grid; grid-template-columns:62px minmax(0,1fr); gap:10px; align-items:baseline}
.nd-ba dt{font:500 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.nd-ba dd{margin:0; font-size:15px; line-height:1.45; color:var(--muted)}
.nd-ba div:last-child dt{color:var(--accent)} .nd-ba div:last-child dd{color:var(--fg)}
.nd-scene{display:grid; gap:14px; justify-items:center}
.nd-scene>.stage{width:100%}
.nd-guide{justify-self:start; display:flex; align-items:baseline; gap:12px; margin:0; max-width:90ch; font-size:17px; line-height:1.45; color:var(--fg)}
.nd-guide .label{flex:none; color:var(--accent)}
@media (min-width:861px){
.nd-scene>.stage{width:min(100%, calc((100vh - 250px) * 1328 / 780))}
.nd-scene>.st-4{width:min(100%, calc((100vh - 250px) * 1328 / 820))}
.nd-scene>.nd-guide{width:min(100%, calc((100vh - 230px) * 1328 / 780)); max-width:none}
}
@media (max-width:1100px){ .hx-steps,.hx-cap{padding-left:0} }
@media (max-width:860px){
.hx-steps{grid-template-columns:1fr 1fr}
.hx-steps li{font-size:12px; min-height:40px}
.hx-cap{font-size:14.5px}
.nd-frame{align-items:flex-start; padding:16px} .nd-frame p{font-size:15.5px}
.nd-guide{display:grid; gap:4px; font-size:15.5px}
}
/* Narrator: three short beats that change with the scroll, key phrase highlighted */
.nd-narr{justify-self:stretch; display:grid; gap:12px}
.nn-bar{display:flex; gap:6px}
.nn-bar i{height:4px; flex:0 0 44px; border-radius:4px; background:color-mix(in srgb,var(--fg) 16%,transparent); overflow:hidden; position:relative}
.nn-bar i::after{content:""; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease)}
.nn-l{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.nn-l li{display:flex; align-items:baseline; gap:14px; font:600 clamp(19px,1.75vw,27px)/1.25 var(--display); letter-spacing:-.025em; color:var(--fg); text-wrap:balance}
.nn-k{flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--on-accent,#1A1A1A); font:700 13px/1 "Inter", sans-serif; letter-spacing:0; transform:translateY(-3px)}
.nn-l mark{position:relative; z-index:0; background:none; color:inherit; white-space:nowrap}
.nn-l mark{transition:color .3s .35s}
.nn-l mark::before{content:""; position:absolute; z-index:-1; left:-.14em; right:-.14em; top:.06em; bottom:-.02em; border-radius:.2em; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease) .18s}
/* Without script, or with reduced motion, all three beats show as a short list with highlights on */
.nn-l mark::before{transform:scaleX(1)}
.nn-l mark{color:#151514}
.js:not(.rm) .nn-l mark{color:inherit}
.js:not(.rm) .nn-l{display:grid; grid-template-areas:"s"}
.js:not(.rm) .nn-l li{grid-area:s; opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .55s var(--ease)}
.js:not(.rm) .nn-l mark::before{transform:scaleX(0)}
.js:not(.rm) .nd-narr[data-n="1"] [data-n="1"],.js:not(.rm) .nd-narr[data-n="2"] [data-n="2"],.js:not(.rm) .nd-narr[data-n="3"] [data-n="3"]{opacity:1; transform:none}
.js:not(.rm) .nd-narr[data-n="1"] [data-n="1"] mark,.js:not(.rm) .nd-narr[data-n="2"] [data-n="2"] mark,.js:not(.rm) .nd-narr[data-n="3"] [data-n="3"] mark{color:#151514}
.js:not(.rm) .nd-narr[data-n="1"] [data-n="1"] mark::before,.js:not(.rm) .nd-narr[data-n="2"] [data-n="2"] mark::before,.js:not(.rm) .nd-narr[data-n="3"] [data-n="3"] mark::before{transform:scaleX(1)}
.nd-narr[data-n="1"] .nn-bar i:nth-child(-n+1)::after,.nd-narr[data-n="2"] .nn-bar i:nth-child(-n+2)::after,.nd-narr[data-n="3"] .nn-bar i:nth-child(-n+3)::after{transform:scaleX(1)}
.rm .nn-bar i::after{transform:scaleX(1)}
@media (min-width:861px){ .nd-scene>.nd-narr{width:min(100%, calc((100vh - 250px) * 1328 / 780))} }
@media (max-width:860px){
.js:not(.rm) .nd-narr{position:sticky; top:84px; z-index:8; padding:12px 14px; margin:0 -4px; border-radius:16px; background:color-mix(in srgb,var(--sheet) 90%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.nn-l li{gap:10px}
.nn-l mark{white-space:normal; border-radius:.18em; padding:0 .08em; -webkit-box-decoration-break:clone; box-decoration-break:clone; background:var(--accent); color:#151514 !important}
.nn-l mark::before{display:none}
.nn-k{width:26px; height:26px; font-size:12px}
}
/* Section spotlight: each narrator beat lights the panel it talks about, the rest dims (opacity only) */
.stage [data-spot]::after{content:""; position:absolute; inset:0; z-index:30; border-radius:inherit; background:rgba(11,11,10,.6); opacity:0; pointer-events:none; transition:opacity .5s var(--ease)}
.stage.spotting [data-spot]:not(.lit)::after{opacity:1}
.stage [data-spot]{transition:outline-color .5s var(--ease)}
.stage.spotting [data-spot].lit:not(.sy-w):not(.bw-ph1):not(.bw-ph2){outline:1.5px solid rgba(237,105,68,.85); outline-offset:3px}
.stage.spotting .bw-ph1.lit .phone,.stage.spotting .bw-ph2.lit .phone{outline:1.5px solid rgba(237,105,68,.85); outline-offset:4px; border-radius:15.5% / 7.2%}
.bw-ph1 .phone,.bw-ph2 .phone{transition:transform .6s var(--ease)}
.stage.spotting .bw-ph1.lit .phone,.stage.spotting .bw-ph2.lit .phone{transform:scale(1.03)}
/* Hero focus mode: the hero blacks out, a camera moves to each step's device, a large narrator explains it */
.hx-scrim{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:radial-gradient(80% 90% at 50% 58%,rgba(7,7,6,.86),rgba(7,7,6,.97))}
.h5-grid{position:relative}
.h5-copy{position:relative; z-index:1}
.hx-col{position:relative; z-index:3; transform-origin:50% 50%}
.hx-narr{position:absolute; z-index:5; left:50%; top:104px; width:min(92vw,1000px); transform:translateX(-50%); display:grid; justify-items:center; gap:14px; text-align:center; opacity:0; pointer-events:none}
.hx-narr .nn-bar i{flex-basis:56px}
.hx-narr .nn-l{justify-items:center}
.hx-narr .nn-l li{justify-content:center; font-size:clamp(28px,3vw,44px); line-height:1.15; max-width:26ch; color:#F5F3EE}
.hx-narr .nn-k{width:36px; height:36px; font-size:15px; transform:translateY(-6px)}
.hx-narr .nn-l mark{white-space:nowrap; color:#151514}
.js:not(.rm) .hx-narr[data-n="4"] [data-n="4"]{opacity:1; transform:none}
.js:not(.rm) .hx-narr[data-n="4"] [data-n="4"] mark{color:#151514}
.js:not(.rm) .hx-narr[data-n="4"] [data-n="4"] mark::before{transform:scaleX(1)}
.hx-narr[data-n="4"] .nn-bar i::after{transform:scaleX(1)}
.rm .hx-narr,.no-js .hx-narr{display:none}
@media (max-width:860px){ .hx-narr{display:none} }
/* Stronger spotlight in focus mode */
.hx-cust .phone::after,.hx-crew .phone::after,.hx-ai::after{background:rgba(9,9,8,.8)}
.hx-board::after{background:rgba(9,9,8,.62)}
.hx-col.focus[data-step="1"] .hx-cust .phone,.hx-col.focus[data-step="4"] .hx-crew .phone{outline:2px solid rgba(237,105,68,.9); outline-offset:5px}
@media (max-width:1366px){ .hx-steps li{font-size:11.5px; gap:7px; padding:5px 9px 5px 5px} .hx-steps i{width:21px; height:21px} .hx-steps{gap:5px} }
/* Live states */
.tk-s.done{background:#F3F1EC; color:#1A1A1A}
.u-chip.live-ok{background:rgba(243,241,236,.08) !important; color:#EDEAE3 !important; border-color:rgba(243,241,236,.22) !important}
.u-chip.live-ok::before{background:#EDEAE3}
.js:not(.rm) .st1-t,.js:not(.rm) .st2-t,.js:not(.rm) .st3-t,.js:not(.rm) .bw-t{opacity:0}
/* Tablet widths */
@media (max-width:1100px){
.h5-grid{grid-template-columns:minmax(0,1fr)}
.hx-col{max-width:760px; margin-inline:auto; width:100%}
.hx{height:640px}
.hx-board{left:12%; width:84%}
.hx-cust{left:0}
.hx-crew{left:auto; right:0}
.hx-ai{right:0}
.nd-copy{grid-template-columns:auto minmax(0,1fr); }
.nd-txt{grid-column:1 / -1}
}
/* Phones: each stage becomes a taller crop with the main device large and readable */
@media (max-width:860px){
.hx{height:560px}
.hx-board{left:6%; width:150%; top:96px}
.hx-cust{left:0; top:250px; width:130px}
.hx-crew{right:0; top:290px; width:118px}
.hx-lbl{display:none}
.hx-ai{left:0; right:auto; top:0; width:min(300px,86%)}
.js:not(.rm) .hx-thread{display:none}
.nd-copy{grid-template-columns:minmax(0,1fr); gap:14px}
.nd-num{font-size:72px}
.stage{aspect-ratio:auto; overflow:hidden}
.st-1{height:560px} .st-2{height:600px} .st-3{height:620px} .st-4{height:720px}
.st-photo{width:100%; border-radius:inherit}
.st-photo::after{background:linear-gradient(180deg,rgba(11,11,10,.2),rgba(11,11,10,.7) 45%,#0B0B0A 80%)}
.st1-lap{width:150%; right:auto; left:6%; top:14%}
.st1-t{display:none}
.tk{left:4%; bottom:4%; width:220px; padding:12px; gap:9px}
.tk-m span:last-child{display:none}
.tk-t{font-size:18px}
.tk-h small{display:none}
.st2-tab{width:150%; left:5%; top:9%}
.sync{width:auto; left:5%; right:5%; top:auto; bottom:4%; padding:14px}
.chain-w,.sync-log li:nth-child(n+2){display:none}
.sync-log{margin-top:8px; padding-top:8px}
.st2-t{display:none}
.st-2b .st2-tab{width:150%}
.hof{width:auto; left:5%; right:5%; top:auto; bottom:4%; padding:14px}
.hof li{padding:8px 0; font-size:12.5px}
.hof li:nth-child(n+3){display:none}
.st-photo.rt{width:100%; border-radius:inherit}
.st-photo.rt img{height:70%; object-position:68% 30%}
.st-photo.rt::after{background:linear-gradient(180deg,rgba(11,11,10,.05),rgba(11,11,10,.5) 38%,#0B0B0A 62%)}
.st3-win{width:165%; left:5%; top:40%}
.rvw{width:auto; left:5%; right:5%; top:auto; bottom:4%; padding:13px}
.st3-t{display:none}
.st-4{height:780px}
.bw-photo{left:4%; top:auto; bottom:4%; width:44%; height:210px}
.bw-cap b{font-size:16px} .bw-sl{display:none}
.bw-map{display:none}
.bw-ph1{left:19%; top:7%; width:62%}
.bw-ph2{display:none}
.bw-ring{right:4%; top:auto; bottom:4%; width:44%; height:210px; align-content:space-between}
.bw-t{display:none}
}
.rm .u-cursor{display:none}
/* ===== v7 hero tour: everything Rocket Driver builds, on one example business ===== */
.tv-col{display:grid; gap:14px; min-width:0; position:relative; z-index:3; transform-origin:50% 50%}
.tv-cap{margin:0; color:#CFCBC2; font-size:15px; line-height:1.5}
.tv-chips{display:flex; flex-wrap:wrap; gap:6px}
.tv-chips span{display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; background:rgba(22,22,21,.82); border:1px solid rgba(245,243,238,.18); color:#F3F1EC; font-size:12.5px; font-weight:500; cursor:pointer; transition:background .3s, border-color .3s}
.tv-chips span:hover{border-color:rgba(237,105,68,.7); background:rgba(237,105,68,.16)}
.tv{position:relative; height:600px; color:var(--u-fg,#F3F1EC)}
.tv-ill{left:40%; right:auto; top:auto; bottom:4px}
.tv-t{position:absolute; isolation:isolate}
.tv-site{left:8%; top:8px; width:100%; border-radius:16px; overflow:hidden; box-shadow:0 60px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.14)}
.tv-portal{left:-9%; top:318px; width:58%; border-radius:16px; padding:6px; background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 30%,rgba(255,255,255,.02)); box-shadow:0 50px 100px -40px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:2}
.tv-portal>.fit{border-radius:11px; overflow:hidden}
.tv-phone{left:46%; top:262px; width:150px; z-index:3}
.tv-ai{right:-7%; top:-26px; width:290px; z-index:4; display:grid; gap:10px; padding:14px; border-radius:18px; background:rgba(24,24,22,.95); border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 60px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font:400 13px/1.35 "Inter", ui-sans-serif, system-ui, sans-serif}
.ta-h{display:flex; align-items:center; gap:10px} .ta-h div{display:grid; gap:1px; flex:1} .ta-h b{font-size:13px; font-weight:600} .ta-h small{font-size:11px; color:var(--u-fg3)}
.tv-ai .ico{display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--u-grad); color:#1A1A1A; box-shadow:var(--u-glow)} .tv-ai .ico svg{width:16px; height:16px}
.ta-q{justify-self:end; margin:0; max-width:86%; padding:8px 11px; border-radius:14px 14px 4px 14px; background:#F3F1EC; color:#151514; font-size:12.5px}
.ta-a{margin:0; max-width:92%; padding:9px 11px; border-radius:14px 14px 14px 4px; background:#22221F; border:1px solid rgba(255,255,255,.08); font-size:12.5px; color:#EDEAE3; display:grid; gap:6px}
.ta-a small{display:flex; align-items:center; gap:5px; font-size:10.5px; color:#F79B79} .ta-a small svg{width:12px; height:12px}
.ta-f{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:9px; border-top:1px solid rgba(255,255,255,.08); font-size:11px; color:var(--u-fg3)}
.ta-f>span:first-child{display:flex; align-items:center; gap:6px} .ta-f svg{width:13px; height:13px}
.tv-ai .u-btn{height:28px; font-size:11.5px; padding:0 11px}
.tv-grow{left:70%; top:214px; width:224px; z-index:3; display:grid; gap:10px}
.tg-card{padding:12px; border-radius:16px; background:#F6F4EF; color:#151514; box-shadow:0 30px 60px -24px rgba(0,0,0,.9); font:400 12px/1.35 "Inter", ui-sans-serif, system-ui, sans-serif; display:grid; gap:9px}
.tg-q{display:flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px #E1DED6; font-size:12.5px} .tg-q svg{width:14px; height:14px; color:#67635B}
.tg-ans{display:grid; gap:4px; padding:9px 10px; border-radius:12px; background:#EDE9E0}
.tg-ans small{display:flex; align-items:center; gap:5px; font:600 10px/1 "Geist Mono", monospace; letter-spacing:.05em; text-transform:uppercase; color:#A63C1E} .tg-ans small svg{width:11px; height:11px}
.tg-ans p{margin:0; font-size:12px; color:#2A2825}
.tg-src{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:#5F5B54} .tg-src svg{width:11px; height:11px}
.tg-res{display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1.5px rgba(237,105,68,.55)}
.tg-res div{display:grid; gap:1px; flex:1} .tg-res b{font-size:12.5px} .tg-res small{font-size:10.5px; color:#67635B}
.tg-pin{width:12px; height:12px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#ED6944; flex:none}
.tg-act{padding:5px 9px; border-radius:999px; background:#151514; color:#F3F1EC; font-size:10.5px; font-weight:600}
.tg-hd{display:flex; justify-content:space-between; align-items:baseline} .tg-hd b{font-size:13px} .tg-hd small{font-size:10.5px; color:#67635B}
.tg-row{display:flex; align-items:center; gap:9px; padding-top:8px; border-top:1px solid #E2DED5}
.tg-row div{display:grid; gap:1px; flex:1; min-width:0} .tg-row b{font-size:12px} .tg-row small{font-size:10.5px; color:#67635B}
.tg-ic{display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#151514; color:#F7A27F; flex:none} .tg-ic svg{width:13px; height:13px}
.tg-card .u-chip{height:20px; font-size:9px; padding:0 7px}
.tg-card .u-chip.o{background:rgba(237,105,68,.14); color:#A63C1E}
.tg-card .u-chip:not(.o){background:#E7E3DA; color:#3A3835; border-color:#D9D4CA}
/* Website screen, 1180 x 740 */
.scr-site{background:#F6F4EF; color:#151514}
.ws-chrome{display:flex; align-items:center; gap:8px; height:38px; padding:0 16px; background:#E7E3DA; border-bottom:1px solid #D9D4CA}
.ws-chrome .d{width:11px; height:11px; border-radius:50%; background:#CFCAC0}
.ws-url{display:flex; align-items:center; gap:6px; margin-left:16px; height:24px; padding:0 14px; border-radius:999px; background:#F6F4EF; color:#5F5B54; font-size:11.5px} .ws-url svg{width:12px; height:12px}
.ws-chrome .sp,.ws-nav .sp{flex:1}
.ws-page{padding:0 44px}
.ws-nav{display:flex; align-items:center; gap:26px; height:74px; font-size:13.5px; color:#3A3835}
.ws-logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; color:#151514; margin-right:14px}
.ws-logo i{display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--u-grad); color:#1A1A1A; font:700 15px/1 "Inter", sans-serif; font-style:normal}
.ws-ph{display:flex; align-items:center; gap:7px; font-weight:600; color:#151514} .ws-ph svg{width:15px; height:15px}
.ws-btn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; background:var(--u-grad); color:#1A1A1A; font-weight:600; font-size:13.5px; box-shadow:0 10px 22px -10px rgba(237,105,68,.9), inset 0 1px 0 rgba(255,255,255,.4)}
.ws-btn svg{width:16px; height:16px} .ws-btn.lg{height:50px; padding:0 24px; font-size:15px}
.ws-btn.gh{background:#fff; box-shadow:inset 0 0 0 1px #D9D4CA}
.ws-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; margin-top:18px}
.ws-copy{display:grid; gap:18px; justify-items:start}
.ws-eye{font:600 11px/1 "Geist Mono", monospace !important; letter-spacing:.08em; text-transform:uppercase; color:#A63C1E !important}
.ws-h{font-size:50px; line-height:1.02; letter-spacing:-.045em; font-weight:700}
.ws-copy p{margin:0; font-size:17px; line-height:1.5; color:#4D4A45; max-width:34ch}
.ws-cta{display:flex; gap:10px}
.ws-pts{display:flex; gap:18px; font-size:12.5px; color:#3A3835} .ws-pts span{display:flex; align-items:center; gap:6px} .ws-pts svg{width:14px; height:14px; color:#ED6944}
.ws-photo{position:relative; height:330px; border-radius:24px; overflow:hidden}
.ws-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.ws-open{position:absolute; left:16px; bottom:16px; display:grid; gap:2px; padding:12px 16px; border-radius:16px; background:rgba(246,244,239,.95); box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.ws-open small{font-size:11px; color:#67635B} .ws-open b{font-size:16px}
.ws-svc{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:28px}
.ws-svc>div{display:grid; gap:4px; padding:16px; border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px #E1DED6}
.ws-svc b{font-size:15px} .ws-svc small{font-size:12px; color:#67635B}
.ws-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#151514; color:#F7A27F; margin-bottom:8px} .ws-ic svg{width:17px; height:17px}
/* Customer app, 390 x 844 */
.scr-plan{background:radial-gradient(120% 60% at 50% 0%,#1E1512 0%,#0C0C0B 60%)}
.pl-top{display:flex; align-items:center; gap:10px; margin-top:8px} .pl-top div{display:grid; gap:1px; flex:1} .pl-top b{font-size:17px}
.pl-plan{margin-top:16px; padding:14px; display:grid; gap:12px}
.pl-t{font-size:22px; letter-spacing:-.03em}
.pl-next{display:grid; gap:4px; padding:12px; border-radius:14px; background:#121211; border:1px solid var(--u-line)}
.pl-next b{font-size:16px} .pl-next span{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--u-fg2)} .pl-next svg{width:14px; height:14px; color:var(--u-acc2)}
.pl-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px} .pl-btns .u-btn{justify-content:center; height:40px}
.pl-sys{padding:4px 14px}
.pl-sys>div,.pl-inv{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--u-line)}
.pl-sys>div:last-child{border-bottom:0}
.pl-sys span:nth-child(2),.pl-inv span:nth-child(2){display:grid; gap:1px} .pl-sys b,.pl-inv b{font-size:13.5px}
.scr-plan .ic{display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#1F1F1D; color:var(--u-acc2)} .scr-plan .ic svg{width:15px; height:15px}
.pl-inv{margin-top:12px; padding:10px 14px} .pl-inv .amt{font-size:15px}
/* Spotlight on the tour: the lit target stays bright, the rest dims (opacity only) */
.tv-t::after{content:""; position:absolute; inset:0; z-index:40; border-radius:inherit; background:rgba(9,9,8,.9); opacity:0; pointer-events:none; transition:opacity .5s var(--ease)}
.tv-phone::after{border-radius:15.5% / 7.2%}
.tv-col.focus .tv-t:not(.on)::after{opacity:1}
.tv-col.focus .tv-t.on{outline:2px solid rgba(237,105,68,.9); outline-offset:5px}
.tv-col.focus .tv-phone.on{outline:0} .tv-col.focus .tv-phone.on .phone{outline:2px solid rgba(237,105,68,.9); outline-offset:5px; border-radius:15.5% / 7.2%}
.tv-col.focus .tv-grow.on{outline:0} .tv-col.focus .tv-grow.on .tg-card{outline:2px solid rgba(237,105,68,.9); outline-offset:4px}
.tv-grow::after{display:none} .tv-grow .tg-card{position:relative} .tv-grow .tg-card::after{content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(9,9,8,.9); opacity:0; transition:opacity .5s var(--ease)}
.tv-col.focus .tv-grow:not(.on) .tg-card::after{opacity:1}
/* Tour narrator: service tags under each line */
.tv-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px}
.tv-tags em{font-style:normal; display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; border:1px solid rgba(245,243,238,.22); background:rgba(245,243,238,.06); color:#E9E5DC; font:500 12.5px/1 "Inter", sans-serif; letter-spacing:0}
.tv-narr .nn-l li{flex-wrap:wrap}
.tv-narr .nn-t{display:block}
.js:not(.rm) .tv-narr[data-n="0"] [data-n="0"]{opacity:1; transform:none}
.js:not(.rm) .tv-narr[data-n="0"] [data-n="0"] mark::before{transform:scaleX(1)}
.js:not(.rm) .tv-narr[data-n="1"] [data-n="1"]{opacity:1; transform:none}
.js:not(.rm) .tv-narr[data-n="1"] [data-n="1"] mark::before{transform:scaleX(1)}
.tv-narr[data-n="1"] .nn-bar i:nth-child(-n+1)::after{transform:scaleX(1)}
.js:not(.rm) .tv-narr[data-n="2"] [data-n="2"]{opacity:1; transform:none}
.js:not(.rm) .tv-narr[data-n="2"] [data-n="2"] mark::before{transform:scaleX(1)}
.tv-narr[data-n="2"] .nn-bar i:nth-child(-n+2)::after{transform:scaleX(1)}
.js:not(.rm) .tv-narr[data-n="3"] [data-n="3"]{opacity:1; transform:none}
.js:not(.rm) .tv-narr[data-n="3"] [data-n="3"] mark::before{transform:scaleX(1)}
.tv-narr[data-n="3"] .nn-bar i:nth-child(-n+3)::after{transform:scaleX(1)}
.js:not(.rm) .tv-narr[data-n="4"] [data-n="4"]{opacity:1; transform:none}
.js:not(.rm) .tv-narr[data-n="4"] [data-n="4"] mark::before{transform:scaleX(1)}
.tv-narr[data-n="4"] .nn-bar i:nth-child(-n+4)::after{transform:scaleX(1)}
.js:not(.rm) .tv-narr[data-n="5"] [data-n="5"]{opacity:1; transform:none}
.js:not(.rm) .tv-narr[data-n="5"] [data-n="5"] mark::before{transform:scaleX(1)}
.tv-narr[data-n="5"] .nn-bar i:nth-child(-n+5)::after{transform:scaleX(1)}
.js:not(.rm) .tv-narr[data-n="6"] [data-n="6"]{opacity:1; transform:none}
.js:not(.rm) .tv-narr[data-n="6"] [data-n="6"] mark::before{transform:scaleX(1)}
.tv-narr[data-n="6"] .nn-bar i:nth-child(-n+5)::after{transform:scaleX(1)}
.story{position:relative; isolation:isolate; overflow:hidden; background:#0B0B0A; color:#F5F3EE; --fg:#F5F3EE; --muted:#CFCBC2; --rule:rgba(245,243,238,.16); color-scheme:dark; padding-block:clamp(64px,7vw,110px)}
.story::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 70% at 75% 45%,rgba(237,105,68,.14),transparent 70%), #0B0B0A}
.story-copy{position:relative; z-index:1; display:grid; gap:22px; justify-items:start}
.story-copy h2{font-size:clamp(36px,4vw,64px); letter-spacing:-.045em; line-height:1; max-width:12ch; color:#F5F3EE}
.story-copy .lede{color:#CFCBC2; max-width:40ch}
@media (max-width:1100px){ .tv-col{max-width:760px; margin-inline:auto; width:100%} .tv-ai{right:0} .tv-grow{left:auto; right:0} }
@media (max-width:860px){
.tv{height:560px}
.tv-site{left:6%; width:150%; top:40px}
.tv-portal{display:none}
.tv-phone{left:0; top:230px; width:130px}
.tv-ai{left:auto; right:0; top:auto; bottom:30px; width:min(280px,76%)}
.tv-grow{display:none}
.tv-ill{left:auto; right:0; top:0; bottom:auto}
}
/* A dark band behind every narrator so its words never sit on top of dimmed screens */
.hx-narr::before{content:""; position:absolute; z-index:-1; left:50%; width:100vw; margin-left:-50vw; top:-104px; bottom:-34px; background:linear-gradient(180deg,#070706 0%,#070706 72%,rgba(7,7,6,0) 100%); pointer-events:none}
/* Beat specific: clear the website while it is lit, summary groups on the close */
.tv-col .tv-ai{transition:opacity .5s var(--ease)}
.tv-col.b4 .tv-ai{opacity:0}
.tv-groups{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; text-align:left}
.tv-groups>span{display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; padding:14px; border-radius:16px; border:1px solid rgba(245,243,238,.16); background:rgba(245,243,238,.04)}
.tv-groups b{width:100%; font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}
.tv-groups em{font-style:normal; display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:999px; border:1px solid rgba(245,243,238,.2); color:#E9E5DC; font:500 12px/1 "Inter", sans-serif; letter-spacing:0}
.tv-narr .nn-l li[data-n="6"]{max-width:none}
.tv-narr .nn-l li[data-n="6"] .nn-t{max-width:min(92vw,980px)}
@media (min-width:861px) and (max-height:780px){ .hero.h5{padding-top:104px} .h5 h1{font-size:clamp(38px,4.2vw,66px)} .h5-copy{gap:16px} .h5 .lede{font-size:16.5px; line-height:1.5} .h5 .pill-label{padding:10px 12px 7px} .hx-narr{top:80px} .hx-narr .nn-l li{font-size:clamp(22px,2.3vw,32px)} .tv-tags em,.tv-groups em{height:24px; font-size:11.5px} }
.pt-ch .o-chart{position:relative !important}
/* Hero tour polish: chapter rail, underline emphasis, lift instead of outline */
.tv-narr .nn-bar,.tv-narr .nn-k{display:none}
.tv-narr .nn-l mark{background:none !important; color:#F7A27F !important; padding:0; position:relative}
.tv-narr .nn-l mark::before{display:block !important; content:""; position:absolute; left:0; right:0; top:auto; bottom:-.06em; height:.09em; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease) .35s}
.tv-rail{position:absolute; z-index:6; left:max(24px,3vw); top:50%; transform:translateY(-50%); display:grid; gap:18px; padding-left:22px; opacity:0; pointer-events:none}
.tv-rail .tr-line{position:absolute; left:0; top:4px; bottom:4px; width:1px; background:rgba(245,243,238,.18)}
.tv-rail .tr-line b{position:absolute; inset:0; background:var(--accent); transform:scaleY(0); transform-origin:50% 0; transition:transform .6s var(--ease)}
.tv-rail span{font:500 13px/1.2 "Inter", sans-serif; color:rgba(245,243,238,.4); cursor:pointer; transition:color .35s}
.tv-rail .tr-skip{margin-top:10px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:rgba(245,243,238,.55)}
.tv-rail .tr-skip:hover{color:#F5F3EE}
.tv-rail[data-n="1"] span:nth-of-type(1){color:#F5F3EE}
.tv-rail[data-n="1"] .tr-line b{transform:scaleY(0.20)}
.tv-rail[data-n="2"] span:nth-of-type(2){color:#F5F3EE}
.tv-rail[data-n="2"] .tr-line b{transform:scaleY(0.40)}
.tv-rail[data-n="3"] span:nth-of-type(3){color:#F5F3EE}
.tv-rail[data-n="3"] .tr-line b{transform:scaleY(0.60)}
.tv-rail[data-n="4"] span:nth-of-type(4){color:#F5F3EE}
.tv-rail[data-n="4"] .tr-line b{transform:scaleY(0.80)}
.tv-rail[data-n="5"] span:nth-of-type(5){color:#F5F3EE}
.tv-rail[data-n="5"] .tr-line b{transform:scaleY(1.00)}
.tv-rail[data-n="6"] span{color:#F5F3EE} .tv-rail[data-n="6"] .tr-line b{transform:scaleY(1)}
.tv-col.focus .tv-t.on,.tv-col.focus .tv-phone.on .phone,.tv-col.focus .tv-grow.on .tg-card{outline:0 !important}
.tv-col.focus .tv-t.on:not(.tv-grow):not(.tv-phone),.tv-col.focus .tv-phone.on .phone,.tv-col.focus .tv-grow.on .tg-card{box-shadow:0 0 0 1px rgba(237,105,68,.55), 0 40px 90px -30px rgba(237,105,68,.55), 0 50px 100px -40px rgba(0,0,0,.95)}
body.touring .pctl{opacity:0; pointer-events:none; visibility:hidden} /* hidden also means out of the Tab order (Nov 8) */
.pctl{transition:opacity .4s, visibility .4s}
@media (max-width:1100px){ .tv-rail{display:none} }
/* Sections scroll freely, so each narrator sticks above its screen while that screen plays */
@media (min-width:861px){
.js:not(.rm) .nd-scene>.nd-narr{position:sticky; top:92px; z-index:8; padding:12px 18px; border-radius:18px; background:color-mix(in srgb,var(--sheet) 88%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 0 0 1px var(--rule), 0 18px 40px -24px rgba(0,0,0,.5)}
}
/* Close line is a real link to Contact, clickable only while the close beat is showing */
.tv-cta{color:inherit; text-decoration:none; display:inline-flex; align-items:baseline; gap:.22em; white-space:nowrap}
.tv-cta svg{width:.8em; height:.8em; color:var(--accent); align-self:center; transform:translateX(0); transition:transform .3s var(--ease)}
.tv-narr[data-n="6"] .tv-cta{pointer-events:auto; cursor:pointer}
.tv-cta:hover svg{transform:translateX(.18em)}
.tv-cta:hover mark{color:#FFC2A6 !important}
.tv-narr .nn-l .tv-cta mark::before{height:.11em}
/* Headline also scales with viewport height, so the paragraph and buttons stay above the fold on wide but short screens */
@media (min-width:861px) and (min-height:781px){ .h5 h1{font-size:clamp(46px,min(5.9vw,8vh),104px)} }
@media (min-width:861px) and (min-height:781px) and (max-height:920px){ .h5-copy{gap:20px} .hero.h5{padding-top:124px} }
/* The dark band behind the tour narrator ends just under the current line, not the tallest one */
.tv-narr::before{bottom:auto; height:calc(var(--band,100%) + 104px + 26px); background:linear-gradient(180deg,#070706 0%,#070706 calc(100% - 26px),rgba(7,7,6,0) 100%)}
/* Desktop hero at rest: headline only. The screens enter on scroll, so the caption and chips are not needed */
.tv-cue{display:none}
@media (min-width:861px){
.js:not(.rm) .tv-cap,.js:not(.rm) .tv-chips{display:none}
.js:not(.rm) #tvStack{opacity:0}
.js:not(.rm) .tv-cue{display:flex; position:absolute; z-index:4; left:74%; top:min(calc(100svh - 78px),calc(100% - 196px)); transform:translateX(-50%); flex-direction:column; align-items:center; gap:10px; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#CFCBC2; pointer-events:none}
.tv-cue i{display:block; width:1px; height:30px; background:rgba(245,243,238,.22); position:relative; overflow:hidden}
.tv-cue i::after{content:""; position:absolute; left:0; top:0; width:1px; height:12px; background:var(--accent); animation:tvcue 1.8s var(--ease) 2} /* two passes, 3.6 s in all, then still (WCAG 2.2.2, Nov 8) */
}
@keyframes tvcue{0%{transform:translateY(-12px)}100%{transform:translateY(30px)}}
/* Close: the promise balances on its own lines, the link sits on a line of its own beneath it */
.tv-narr li[data-n="6"] .nn-t{text-wrap:balance}
.tv-narr li[data-n="6"] .tv-cta{display:flex; width:max-content; margin:.08em auto 0}
/* Desktop sections hold as a whole now, so the narrator rides with its screen instead of sticking to the window */
@media (min-width:861px){ .js:not(.rm) .nd-scene>.nd-narr{position:relative; top:auto} }
/* One screen per beat: the lit screen sits on top and the others fade out completely, so nothing shows half dimmed or sliced by the narrator band */
.tv-col .tv-t{transition:opacity .45s var(--ease)}
.tv-col.focus .tv-t:not(.on){opacity:0}
.tv-col.focus .tv-t.on{z-index:10}
/* During the tour the label keeps one size and one place, bottom right, instead of riding on the zooming collage */
.tv-ill-fix{display:none}
@media (min-width:861px){
.js:not(.rm) .tv-ill{display:none}
.js:not(.rm) .tv-ill-fix{display:inline-flex; position:absolute; z-index:6; left:auto; right:max(28px,2.4vw); top:calc(100svh - 58px); bottom:auto; opacity:0; pointer-events:none}
}
/* Close: what the conversation covers, small and quiet under the link */
.tv-sub{display:block; max-width:min(92vw,640px); margin:.9em auto 0; font:400 15px/1.5 "Inter", ui-sans-serif, system-ui, sans-serif; letter-spacing:0; color:rgba(245,243,238,.68); text-wrap:balance}
@media (min-width:861px) and (max-height:780px){ .tv-sub{font-size:13.5px; margin-top:.6em} }
.tv-ln{display:block}
/* ===== Split screen stories (owner direction, Nov 1 2026) =====
Desktop: the three steps sit on the left, large enough to read first; the screen plays on the right.
All three steps stay visible so the visitor always knows where the story is. The current step is lit, the others rest dim. */
@media (min-width:1100px){
.nd-scene{grid-template-columns:minmax(0,.86fr) minmax(0,1.55fr); align-items:center; justify-items:stretch; gap:clamp(32px,3.4vw,64px)}
.nd-scene>.nd-narr{width:auto; grid-column:1; grid-row:1 / span 2; align-self:center; gap:26px}
.nd-scene>.stage{grid-column:2; grid-row:1; justify-self:end; width:min(100%, calc((100vh - 170px) * 1328 / 780))}
.nd-scene>.st-4{width:min(100%, calc((100vh - 170px) * 1328 / 820))}
.nd-scene>.nd-guide{grid-column:2; grid-row:2; width:auto; justify-self:stretch}
.nd-scene .nn-bar{display:none}
.nd-scene .nn-l{gap:clamp(22px,2.4vw,34px)}
.js:not(.rm) .nd-scene .nn-l{display:grid; grid-template-areas:none}
.js:not(.rm) .nd-scene .nn-l li{grid-area:auto}
.js:not(.rm) .nd-scene>.nd-narr{position:relative; top:auto; padding:0; margin:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
.nd-scene .nn-l li{grid-area:auto; display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start;
font:600 clamp(25px,2.15vw,36px)/1.16 var(--display); letter-spacing:-.03em; text-wrap:pretty}
.js:not(.rm) .nd-scene .nn-l li{opacity:1; transform:none; color:color-mix(in srgb,var(--fg) 44%,var(--sheet)); transition:color .5s var(--ease)}
.js:not(.rm) .nd-scene .nd-narr[data-n="1"] li[data-n="1"],.js:not(.rm) .nd-scene .nd-narr[data-n="2"] li[data-n="2"],.js:not(.rm) .nd-scene .nd-narr[data-n="3"] li[data-n="3"]{color:var(--fg)}
.nd-scene .nn-k{width:40px; height:40px; font-size:16px; transform:translateY(-1px); background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fg) 34%,transparent); transition:background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease)}
.rm .nd-scene .nn-k,.nd-scene .nd-narr[data-n="1"] li[data-n="1"] .nn-k,.nd-scene .nd-narr[data-n="2"] li[data-n="2"] .nn-k,.nd-scene .nd-narr[data-n="3"] li[data-n="3"] .nn-k{background:var(--accent); color:#151514; box-shadow:none}
/* The orange phrase wraps naturally in the narrower column and fills in when its step is current */
.nd-scene .nn-l mark{white-space:normal; padding:0 .1em; margin:0 -.04em; border-radius:.16em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 0 / 0% 100%; transition:background-size .7s var(--ease) .15s, color .3s .3s}
.nd-scene .nn-l mark::before{display:none}
.rm .nd-scene .nn-l mark,.nd-scene .nd-narr[data-n="1"] li[data-n="1"] mark,.nd-scene .nd-narr[data-n="2"] li[data-n="2"] mark,.nd-scene .nd-narr[data-n="3"] li[data-n="3"] mark{background-size:100% 100%; color:#151514}
}
/* Narrow desktops and tablets keep the step above the screen, set larger */
@media (min-width:861px) and (max-width:1099px){
.nn-l li{font-size:clamp(24px,2.7vw,30px)}
}
/* Phones: the step pinned above the screen reads first, at a comfortable size */
@media (max-width:860px){
.nd-scene .nn-l li{font-size:21px; line-height:1.25}
}
/* Story screens now sit at the right edge; cursors that start off screen must not widen the page */
.sheet:has(.nd){overflow-x:clip}
/* Light theme polish (light is the default site). Sheets get a soft top edge so sections read as separate pages,
and dark mode glows give way to neutral shadows on white. */
:root:not([data-mode="dark"]) .sheet{box-shadow:0 -1px 0 var(--rule), 0 -28px 56px -40px rgba(20,20,19,.12)}
:root:not([data-mode="dark"]) .step{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px -30px rgba(20,20,19,.16)}
:root:not([data-mode="dark"]) .pinning .step{opacity:.62}
:root:not([data-mode="dark"]) .pinning .step.on{opacity:1; box-shadow:0 0 0 1.5px var(--accent), 0 18px 40px -24px rgba(20,20,19,.18)}
:root:not([data-mode="dark"]) .pinning .step.on .num{filter:none}
/* Homepage Revision 3: hero support line, service names on the story cards, results, why, feedback and agency proof */
.h5 .hero-support{color:#CFCBC2; font-size:15px; line-height:1.5; max-width:52ch; margin:-4px 0 0}
.h5 .hero-note{flex-direction:column; align-items:flex-start; gap:4px}
.nd-svc{display:block; margin-bottom:12px; font:500 12px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.mkt-body .mkt-lead{font-size:clamp(20px,1.6vw,24px); line-height:1.4; letter-spacing:-.015em; color:var(--fg)}
.res-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.res-card{display:grid; align-content:start; gap:12px; padding:clamp(26px,3vw,44px); border-radius:28px; background:var(--sheet-2); border:1px solid var(--rule)}
.s-sheet2 .res-card{background:var(--sheet)}
.res-n{font:600 clamp(72px,9vw,148px)/.86 var(--display); letter-spacing:-.06em; color:var(--fg)}
.res-card h3,.res-lbl,
.res-card x-h3{margin:0; font-size:clamp(20px,1.7vw,26px); line-height:1.2; letter-spacing:-.02em; font-weight:600}
.res-meta{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.res-meta li{padding:7px 12px; border-radius:999px; border:1px solid var(--rule); font:500 12px/1 var(--mono); letter-spacing:.04em; color:var(--muted)}
.res-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 32px; margin-top:24px}
.res-note{margin:0; font-size:14px; line-height:1.5; color:var(--muted); max-width:62ch}
.history-grid h2{font-size:clamp(34px,3.6vw,58px); line-height:1.02; letter-spacing:-.04em; text-wrap:balance}
.hist-since{margin:0; font:500 13px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.fb-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:40px 80px; align-items:start}
.fb-body{display:grid; gap:32px}
.rq{margin:0; display:grid; gap:16px; padding:clamp(26px,3vw,40px); border-radius:28px; background:var(--sheet-2); border:1px solid var(--rule)}
.s-sheet2 .rq{background:var(--sheet)}
.rq blockquote{margin:0}
.rq blockquote p{margin:0; font:600 clamp(24px,2.2vw,34px)/1.2 var(--display); letter-spacing:-.025em; color:var(--fg); text-wrap:balance}
.rq.big blockquote p{font-size:clamp(30px,3vw,46px)}
.rq figcaption{display:grid; gap:4px; font-size:14px; color:var(--muted)}
.rq figcaption b{color:var(--fg); font-size:15px}
.rq time{font:500 12px/1.3 var(--mono); letter-spacing:.04em}
.rq .tlink{justify-self:start}
.fb-cta{display:grid; gap:12px; justify-items:start}
.fb-sup,.ag-sup,.close-sup{margin:0; font-size:14.5px; line-height:1.5; color:var(--muted); max-width:52ch}
.ag-body{display:grid; gap:18px}
.ag-body>p{margin:0}
.ag-acts{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:8px}
.agency .ag-sup{color:#B9B5AC}
.agp-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch}
/* The agency result stands on its own row, apart from the two reviews, so it is not read as either reviewer's outcome */
.agp-top{margin-bottom:clamp(56px,7vw,96px)}
.agp-top .agp-res{display:grid; margin-top:0}
.agp-res{grid-column:1 / -1; grid-template-columns:minmax(0,auto) minmax(0,1fr); column-gap:clamp(28px,4vw,64px); align-items:end; margin-top:14px; background:var(--inv-bg) !important; color:var(--inv-fg); border-color:var(--inv-bg)}
.agp-res>*{grid-column:2}
.agp-res .res-n{grid-column:1; grid-row:1 / span 5; color:var(--inv-fg); align-self:center}
.agp-res .res-meta li{border-color:color-mix(in srgb,var(--inv-fg) 22%,transparent); color:var(--inv-muted)}
.agp-res .res-note{color:var(--inv-muted)}
.agp-res .tlink{color:#F59A74}
.agp-res .agp-h{margin:0; font:500 12px/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--accent)}
.agp-res .res-n{font-size:clamp(64px,6.4vw,104px)}
.agp-res .tlink{justify-self:start}
.close .close-sup{color:color-mix(in srgb,var(--on-accent) 78%,transparent)}
@media (max-width:980px){ .agp-grid{grid-template-columns:minmax(0,1fr)} .agp-res{grid-template-columns:minmax(0,1fr)} .agp-res>*,.agp-res .res-n{grid-column:1; grid-row:auto} }
@media (max-width:860px){ .res-grid,.fb-grid{grid-template-columns:minmax(0,1fr)} }
/* Tour close: the call to action is a clear button under the closing sentence */
.tv-narr li[data-n="6"] .tv-cta.tv-btn{display:inline-flex; align-items:center; gap:10px; width:max-content; margin:.55em auto 0; padding:15px 24px; border-radius:999px; background:var(--accent); color:#151514; font:600 17px/1 "Inter", ui-sans-serif, system-ui, sans-serif; letter-spacing:0; white-space:nowrap}
.tv-narr .tv-btn svg{width:18px; height:18px; color:#151514}
.tv-narr .tv-btn:hover{background:#F58A63}
/* Reduced motion: the service rail stops, so its labels wrap instead of running off screen */
.rm .rail{width:auto} .rm .rail ul{flex-wrap:wrap; padding:0 var(--gutter)} .rm .rail ul+ul,.rm .rail.r2{display:none}
/* Nov 2 homepage: two part hero body, two part needs intro, and the Why section's call to action */
.h5 .lede-2{margin-top:-6px}
.nd-head-body{display:grid; gap:14px}
.hist-cta{display:grid; gap:12px; justify-items:start; margin-top:8px}
/* Links to a section stop just below the fixed header */
[id]{scroll-margin-top:96px}
/* Story and tour captions never overlap: the outgoing line fades out fast, the incoming one starts after it */
.js:not(.rm) .nn-l li{transition:opacity .2s var(--ease), transform .3s var(--ease)}
.js:not(.rm) .nd-narr[data-n="1"] [data-n="1"],.js:not(.rm) .nd-narr[data-n="2"] [data-n="2"],.js:not(.rm) .nd-narr[data-n="3"] [data-n="3"],.js:not(.rm) .nd-narr[data-n="4"] [data-n="4"],.js:not(.rm) .nd-narr[data-n="5"] [data-n="5"],.js:not(.rm) .nd-narr[data-n="6"] [data-n="6"]{transition:opacity .45s var(--ease) .2s, transform .55s var(--ease) .2s}
.js:not(.rm) .tv-narr[data-n="0"] [data-n="0"],.js:not(.rm) .tv-narr[data-n="1"] [data-n="1"],.js:not(.rm) .tv-narr[data-n="2"] [data-n="2"],.js:not(.rm) .tv-narr[data-n="3"] [data-n="3"],.js:not(.rm) .tv-narr[data-n="4"] [data-n="4"],.js:not(.rm) .tv-narr[data-n="5"] [data-n="5"],.js:not(.rm) .tv-narr[data-n="6"] [data-n="6"]{transition:opacity .45s var(--ease) .2s, transform .55s var(--ease) .2s}
/* Readability and touch (overnight audit), shared by the homepage and inner pages */
:root:not([data-mode="dark"]) .sp-kick,:root:not([data-mode="dark"]) .nd-svc,:root:not([data-mode="dark"]) .sp-num,:root:not([data-mode="dark"]) body[data-page="agency_pricing"] .ap-plan:not(.feat) .ap-k{color:#B4401F}
:root:not([data-mode="dark"]) body[data-page="agency_pricing"] .ap-table .ap-g th{color:#983618}
.sp-card.cat .cat-a::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit}
[data-mode="dark"] .agp-res .agp-h{color:#A63C1E} /* Nov 8 round 2: this card stays cream in dark mode, so the heading keeps the light-theme orange (5.9:1) */
.close .close-sup{color:rgba(26,26,26,.9)}
@media (max-width:860px){
.sp-crumb a,.f-cols a,.f-bottom a,.tlink{min-height:44px; display:inline-flex; align-items:center}
.sp-crumb{align-items:center} .sp-crumb a{padding-inline:4px; margin-inline:-4px; margin-block:-14px}
.js:not(.rm) .nd-narr{background:var(--sheet); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 0 0 1px var(--rule), 0 14px 30px -22px rgba(0,0,0,.45)}
}
@media (max-width:700px){
.sp-sup,.hero-support,.ag-sup,.res-note,.sp-form-note,.sp-field .help,.rq figcaption span,.rq figcaption time{font-size:15px}
.sp-ex li{font-size:12.5px}
body[data-page="agency_pricing"] .ap-due{font-size:14px}
body[data-page="agency_pricing"] .ap-fit,.sp-hero .hero-note,.sp-hero.has-scene .hero-note{font-size:15px}
}
/* Overnight audit B: shared fixes */
.nn-l mark{margin-right:-.1em}
:root:not([data-mode="dark"]) .s-sheet,:root:not([data-mode="dark"]) .s-sheet2{--link:#983618}
@media (min-width:861px) and (max-width:1180px){
.f-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
.f-bottom a{display:inline-flex; padding:0 2px}
.f-cols a{padding-block:4px}
.tlink-in{padding-block:10px; margin-block:-10px}
}
/* Phone story camera layer (rd.js camera) when a stage has no single screen to move */
.stage>.cam{position:absolute; inset:0; will-change:transform}
.stage>.fit{will-change:transform}
@media (max-width:600px){ .sp-story .stage.cam-on{height:min(520px,64svh) !important; overflow:hidden}
/* Step subjects that the phone layout hid come back for the camera */
body[data-page="client_portals"] .cam-on .cp-mail{display:grid; left:16px; top:70px; width:300px; z-index:6; background:#0B0B0A}
body[data-page="websites"] .cam-on .wb-rv{display:grid; left:auto; right:14px; top:170px; bottom:auto; width:250px; z-index:6}
.cam-on .cp-mail:not(.lit),.cam-on .wb-rv:not(.lit){visibility:hidden}
body[data-page="client_portals"] .cam-on .cp-mail.lit .m{opacity:1 !important} }
/* Homepage closer looks (owner, Nov 3 2026): the three lines show together as a caption, no step changes */
.js .nd-narr.nn-all{position:relative !important; top:auto !important}
.js .nd-narr.nn-all .nn-l{grid-template-areas:none}
.js .nd-narr.nn-all .nn-l li{grid-area:auto; opacity:1; transform:none; color:var(--fg)}
.js .nd-narr.nn-all .nn-l mark{background:none; padding:0; margin:0; color:inherit !important; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:.09em; text-underline-offset:.16em; text-decoration-skip-ink:none}
.js .nd-narr.nn-all .nn-l mark::before{display:none}
.nd-narr.nn-all .nn-bar{display:none}
@media (min-width:1100px){ .nd-scene .nd-narr.nn-all .nn-k{background:var(--accent); color:#151514; box-shadow:none} .nd-scene .nd-narr.nn-all .nn-l mark{background-size:0 100%; color:inherit} }
/* ===== Two door fork and two paths (owner, Nov 3 2026) =====
Right after the hero, two doors summarize the two halves of the work and scroll to them. Nothing hides or swaps:
both paths stay on the page in the same closer look format. No pin, no new motion beyond the shared reveals. */
.fork{padding-block:clamp(72px,8vw,120px)}
.fk-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,2.18fr); gap:clamp(32px,3.4vw,56px); align-items:stretch}
.fk-head{display:flex; flex-direction:column; align-items:flex-start; gap:22px; padding-top:6px}
.fk-head h2{font-size:clamp(36px,3.5vw,58px); line-height:1; letter-spacing:-.045em}
.fk-head .lede{font-size:clamp(17px,1.25vw,19px); max-width:34ch}
.fk-note{margin-top:auto; display:grid; gap:14px; padding-top:22px; border-top:1px solid var(--rule)}
.fk-note p{margin:0; font-size:15.5px; line-height:1.5; color:var(--muted); max-width:36ch}
.fk-both b{color:var(--fg); font-weight:600}
.fk-ag .tlink{font-size:15px; padding:2px 0}
.fk-doors{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-content:start}
.fk-door{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:22px; padding:clamp(24px,2.4vw,36px); border-radius:30px; background:var(--sheet-2); border:1px solid var(--rule)}
.fk-door::after{content:""; position:absolute; z-index:-1; right:-120px; top:-140px; width:340px; height:340px; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 20%,transparent),transparent); pointer-events:none}
.fk-n{position:absolute; right:clamp(20px,2vw,32px); top:clamp(14px,1.6vw,24px); font:600 clamp(56px,5.2vw,88px)/.8 var(--display); letter-spacing:-.07em; background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 26%,transparent) 0%,transparent 92%); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none}
.fk-top{display:grid; gap:10px; padding-right:72px}
.fk-k{color:var(--link)}
.fk-door h3,
.fk-door x-h3{font-size:clamp(30px,2.6vw,44px); line-height:1; letter-spacing:-.045em}
.fk-sum{margin:2px 0 0; color:var(--muted); font-size:16.5px; line-height:1.45; max-width:34ch}
.fk-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.fk-list a{display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border-radius:999px; background:var(--sheet); border:1px solid var(--rule); color:var(--fg); font-size:14.5px; font-weight:500; line-height:1.2; text-decoration:none; transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease)}
.fk-list a:hover,.fk-list a:focus-visible{border-color:var(--accent); color:var(--link)}
.fk-foot{margin-top:auto; display:grid; gap:18px; padding-top:20px; border-top:1px solid var(--rule)}
.fk-proof{margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 14px; align-items:center}
.fk-proof b{grid-row:1 / span 2; font:600 clamp(44px,3.8vw,60px)/.86 var(--display); letter-spacing:-.06em; color:var(--fg)}
.fk-proof span{font-weight:600; font-size:16.5px; line-height:1.25; letter-spacing:-.01em}
.fk-proof small{font:500 11px/1.45 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.btn.fk-go{justify-self:start; background:var(--fg); color:var(--sheet); --h:50px}
.btn.fk-go .dot{background:var(--sheet); color:var(--fg)}
.btn.fk-go:hover .dot{transform:translateY(2px)}
.fk-res{grid-column:1 / -1; margin:2px 0 0; font-size:13.5px}
/* Path heads: one compact heading per path, the scroll target for its door */
.path{padding-block:clamp(80px,9vw,140px)}
.pth{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px 80px; align-items:end; margin-bottom:clamp(56px,6vw,96px)}
.pth .pill-label{margin-bottom:24px}
.pth h2{font-size:clamp(36px,4vw,66px); line-height:.98; letter-spacing:-.045em}
.pth h2:focus{outline:none} .pth h2:focus-visible{outline:3px solid var(--focus); outline-offset:6px}
.pth .lede{max-width:44ch}
.path .nd{gap:clamp(88px,8.4vw,132px)}
.nd-links{display:flex; flex-wrap:wrap; gap:4px 24px}
.nd-chips{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.nd-chips a{display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--rule); color:var(--fg); font-size:14px; font-weight:500; text-decoration:none; transition:border-color .3s, color .3s}
.nd-chips a:hover,.nd-chips a:focus-visible{border-color:var(--accent); color:var(--link)}
@media (min-width:1101px){ .path .nd-copy h3, .path .nd-copy x-h3{max-width:15ch} }
/* Marketing stages: the service pages' own screens, composed in the closer look frame */
.st-5::before{background:radial-gradient(55% 65% at 40% 40%,rgba(237,105,68,.16),transparent 70%), radial-gradient(70% 80% at 95% 100%,#1A1918,transparent 60%), linear-gradient(160deg,#121211,#0A0A09)}
.mk5-win{position:absolute; left:3.5%; top:11%; width:68%; padding:5px; border-radius:16px; background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 30%); box-shadow:0 60px 110px -45px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.14)}
.mk5-win>.fit{border-radius:11px; overflow:hidden}
.mk5-ph{position:absolute; z-index:3; right:4%; top:7%; width:19.5%}
.mk5-card{left:7%; bottom:5%; width:42%; z-index:5}
.st-6 .so-card{position:absolute}
.mk6-serp{left:3.5%; top:8%; width:39%; z-index:2}
.mk6-tree{left:44.5%; top:9%; width:28.5%; z-index:3}
.mk6-gsc{right:3.5%; bottom:7%; width:40%; z-index:4}
.mk-pg .sr-car{display:none}
.mk7-ad,.mk7-ph,.mk7-cv,.mk7-pace{position:absolute}
.mk7-ad{left:3.5%; top:11%; width:40%; z-index:2}
.mk7-ad>.fit{border-radius:18px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08)}
.mk7-pace{left:3.5%; top:63%; width:33%; z-index:3}
.mk7-ph{left:47%; top:7%; width:19%; z-index:3}
.mk7-ph .pa-n{left:50%; transform:translateX(-50%); top:-15px}
.mk7-cv{right:3%; bottom:8%; width:39.5%; z-index:4}
/* Tour links: Skip tour and the close cards are real links while the tour shows them */
body.touring .tv-rail{pointer-events:auto}
.tv-rail .tr-skip{text-decoration:underline; text-underline-offset:3px}
.tv-groups>a{display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; padding:14px; border-radius:16px; border:1px solid rgba(245,243,238,.16); background:rgba(245,243,238,.04); color:inherit; text-decoration:none; transition:border-color .3s, background .3s}
.tv-narr[data-n="6"] .tv-groups>a{pointer-events:auto; cursor:pointer}
.tv-groups>a:hover{border-color:rgba(237,105,68,.7); background:rgba(237,105,68,.1)}
.tv-groups>a b::after{content:" \2193"; color:#F5F3EE; opacity:.6}
/* Phone hero chips are real links to the closer looks */
.tv-chips{list-style:none; margin:0; padding:0}
.tv-chips a{display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border-radius:999px; background:rgba(22,22,21,.82); border:1px solid rgba(245,243,238,.18); color:#F3F1EC; font-size:13px; font-weight:500; text-decoration:none; transition:background .3s, border-color .3s}
.tv-chips a:hover,.tv-chips a:focus-visible{border-color:rgba(237,105,68,.7); background:rgba(237,105,68,.16)}
@media (max-width:1100px){
.fk-grid{grid-template-columns:minmax(0,1fr)}
.fk-head{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:end; gap:18px 48px}
.fk-head .pill-label,.fk-head h2{grid-column:1}
.fk-head .lede{grid-column:1}
.fk-note{grid-column:2; grid-row:2 / span 2; margin-top:0}
}
@media (max-width:860px){
.fork{padding-block:64px 56px}
.fk-head{display:flex}
.fk-head h2{font-size:clamp(34px,9vw,44px)}
.fk-note{margin-top:0; padding-top:18px}
.fk-doors{grid-template-columns:minmax(0,1fr); gap:12px}
.fk-door{padding:22px; gap:18px; border-radius:24px}
.fk-n{font-size:52px; right:18px; top:16px}
.fk-top{padding-right:58px}
.fk-door h3,
.fk-door x-h3{font-size:30px}
.fk-sum{font-size:16px}
.fk-list{gap:6px} .fk-list a{min-height:44px; padding:0 13px; font-size:14px}
.fk-foot{gap:16px; padding-top:16px}
.btn.fk-go{justify-self:stretch; justify-content:space-between}
.fk-res{font-size:14px}
.path{padding-block:72px}
.pth{grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:48px}
.pth .pill-label{margin-bottom:18px}
.path .nd{gap:80px}
.nd-links{gap:0 20px}
.nd-chips a{min-height:44px}
/* phone crops: the main screen large, the supporting card below it */
.st-5{height:520px} .st-6{height:540px} .st-7{height:560px}
.mk5-win{left:5%; top:9%; width:150%}
.mk5-ph{right:5%; top:auto; bottom:4%; width:38%}
.mk5-card{left:4%; bottom:5%; width:54%}
.mk6-serp{left:5%; top:9%; width:76%}
.mk6-tree{display:none}
.mk6-gsc{left:auto; right:4%; bottom:4%; width:74%}
.mk7-ad{left:4%; top:10%; width:76%}
.mk7-pace{display:none}
.mk7-ph{left:auto; right:5%; top:auto; bottom:4%; width:38%}
.mk7-cv{left:4%; right:auto; bottom:6%; width:54%}
}
/* Compact pass: the fork and both paths together stay shorter than the sections they replaced */
.fork{padding-block:clamp(64px,6.4vw,96px)}
@media (min-width:1101px){ .fk-grid{grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr)} }
.fk-head{gap:18px}
.fk-head h2{font-size:clamp(32px,2.9vw,46px)}
.fk-door{padding:clamp(22px,2vw,30px); gap:18px}
.fk-door h3,
.fk-door x-h3{font-size:clamp(28px,2.3vw,38px)}
.fk-list{gap:6px}
.fk-list a{min-height:36px; padding:0 13px; font-size:14px}
.fk-foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 18px; padding-top:18px}
.fk-proof b{font-size:clamp(40px,3.2vw,52px)}
.btn.fk-go{--h:46px; font-size:15px; padding-left:20px; gap:12px}
.btn.fk-go .dot{width:34px; height:34px}
.path{padding-block:clamp(64px,6vw,92px)}
.pth{margin-bottom:clamp(44px,4.4vw,68px)}
.path .nd{gap:clamp(72px,6vw,88px)}
.path .nd-copy{padding-bottom:22px; margin-bottom:22px}
.path .nd-copy h3,
.path .nd-copy x-h3{font-size:clamp(28px,2.7vw,44px)}
.path .nd-num{font-size:clamp(56px,6.4vw,108px)}
@media (min-width:1100px){ .path .nd-scene{grid-template-columns:minmax(0,.98fr) minmax(0,1.42fr); grid-template-rows:auto} .path .nd-scene>.nd-narr{grid-row:1} }
@media (max-width:860px){
.fork{padding-block:56px 48px}
.fk-door{padding:20px; gap:16px}
.fk-list a{min-height:42px; padding:0 12px}
.fk-foot{gap:14px}
.btn.fk-go{flex:1 1 100%}
.path{padding-block:64px}
.pth{margin-bottom:40px}
.path .nd{gap:64px}
.path .nd-num{font-size:52px}
.path .nd-copy{gap:10px; padding-bottom:18px; margin-bottom:18px}
.path .nd-txt p{font-size:16.5px; line-height:1.55}
.st-5{height:480px} .st-6{height:500px} .st-7{height:500px}
}
/* Related service chips sit on the same line as the Explore link when there is room */
.nd-links .nd-chips{margin:0}
.nd-links{align-items:center}
/* Phones: the door services read as a tidy two column list instead of tall rows of pills */
@media (max-width:600px){
.fk-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px}
.fk-list a{display:flex; width:100%; min-height:46px; padding:8px 0; border:0; border-top:1px solid var(--rule); border-radius:0; background:none; font-size:14.5px}
.fk-n{font-size:44px}
}
.mk7-cv .pa-src em,.mk5-card .wb-to em{white-space:nowrap}
/* Fork on phones: label on the left, the "Need both?" note after the two doors */
@media (max-width:860px){
.fk-grid{display:flex; flex-direction:column; gap:0}
.fk-head{display:contents}
.fk-head .pill-label{align-self:flex-start; margin:0 0 18px}
.fk-head h2{margin:0 0 16px}
.fk-head .lede{margin:0 0 26px}
.fk-doors{order:1}
.fk-note{order:2; margin-top:22px}
}
/* Fork review (Nov 3): services read as a plain link list everywhere, not selectable pills */
.fk-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px}
.fk-list a{display:flex; width:100%; min-height:44px; padding:8px 0; border:0; border-top:1px solid var(--rule); border-radius:0; background:none; font-size:15px}
.fk-list a:hover,.fk-list a:focus-visible{border-color:var(--rule); color:var(--link)}
.fk-top{padding-right:0}
.fk-more{display:none}
.fk-proof small .nw{font:inherit; letter-spacing:inherit; white-space:nowrap}
.fk-ag .tlink{display:table; margin-top:4px}
@media (max-width:600px){
.fk-list li:nth-child(n+5):not(.fk-more){display:none}
.fk-more{display:block}
.fk-more a{color:var(--link); font-weight:600}
.fk-sum{display:none}
}
/* Nov 8 round 2: tablets, the search panel gets more height so the performance card no longer covers the Images and News tabs */
@media (min-width:601px) and (max-width:860px){ .st-6{height:min(86vw,700px)} }
/* ===================== Inner pages: same system as the homepage ===================== */
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.arriving .curtain{transform:none}
/* Hero: words rise from the middle, product composition on the right */
.sp-hero{position:relative; overflow:hidden; isolation:isolate; padding-top:calc(env(safe-area-inset-top,0px) + clamp(124px,12vw,168px)); padding-bottom:clamp(72px,8vw,128px); background:var(--canvas)}
.sp-hero-bg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.sp-hero-bg::before{content:""; position:absolute; inset:0; background:linear-gradient(var(--rule) 1px,transparent 1px) 0 0/100% 96px, linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/96px 100%; opacity:.35; -webkit-mask:radial-gradient(120% 90% at 70% 30%,#000 10%,transparent 70%); mask:radial-gradient(120% 90% at 70% 30%,#000 10%,transparent 70%)}
.sp-hero-bg i{position:absolute; width:min(1100px,110vw); aspect-ratio:1; right:-22%; top:-38%; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent 72%); filter:blur(10px); opacity:.55}
.sp-hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:56px; align-items:center}
.sp-hero.has-scene .sp-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.sp-hero-copy{display:grid; gap:22px; justify-items:start; max-width:760px}
.sp-crumb{display:flex; gap:10px; color:var(--muted)} .sp-crumb a{text-decoration:none} .sp-crumb a:hover{color:var(--fg)}
.sp-h1{font-weight:600; font-size:clamp(42px,5.2vw,84px); line-height:.98; letter-spacing:-.045em}
.sp-hero:not(.has-scene) .sp-h1{font-size:clamp(46px,7vw,112px); max-width:16ch}
.sp-h1 .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.js:not(.rm) .sp-h1 .w>span{display:inline-block; transform:translateY(105%); animation:spw 1.1s var(--ease) var(--d) forwards}
@keyframes spw{to{transform:none}}
.sp-lede{display:grid; gap:14px; color:var(--muted); font-size:clamp(17px,1.3vw,20px); line-height:1.6; max-width:56ch}
.js:not(.rm) [data-intro]{opacity:0; transform:translateY(18px); animation:spi .9s var(--ease) var(--d,.3s) forwards}
@keyframes spi{to{opacity:1; transform:none}}
.sp-hero .hero-actions{justify-content:flex-start}
.sp-hero .hero-note{grid-column:auto; max-width:56ch}
.sp-scene{position:relative; min-width:0}
.sp-scene-in{position:relative; width:100%; aspect-ratio:var(--ar,1.12); container-type:inline-size}
.sp-ill{position:absolute; right:10px; bottom:-14px; z-index:30}
.js:not(.rm) .sp-scene-in{opacity:0; transform:translateY(40px) scale(.97); animation:spsc 1.2s var(--ease) .3s forwards}
@keyframes spsc{to{opacity:1; transform:none}}
/* Scene building blocks: screens scale to their box like the homepage .fit frames */
.sp-scene .fit,.stage .fit{width:var(--w)}
.sp-frame{position:absolute; border-radius:18px; overflow:hidden; background:var(--sheet); box-shadow:0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12)}
.sp-frame>.fit{transform-origin:0 0}
/* Intro statement */
.sp-intro .wrap{display:grid; gap:28px}
.sp-kick{color:var(--accent)}
.sp-intro h2{max-width:18ch}
.sp-intro-body{display:grid; gap:20px; max-width:62ch; font-size:clamp(20px,1.7vw,26px); line-height:1.45; letter-spacing:-.01em}
.sp-intro-body p+p{color:var(--muted); font-size:.82em}
/* Two columns with a sticky heading */
.sp-2col{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:48px 88px; align-items:start}
.sp-stick{position:sticky; top:120px; display:grid; gap:22px}
.sp-stick h2{font-size:clamp(34px,4vw,64px)}
.sp-prose{display:grid; gap:18px; font-size:clamp(17px,1.25vw,19px); color:var(--muted); max-width:62ch}
.sp-prose p:first-child{color:var(--fg); font-size:1.12em; line-height:1.5}
.sp-head-body{display:grid; gap:12px}
/* Split statement */
.sp-split-in{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px 88px; align-items:end}
.sp-split-h{display:grid; gap:28px}
.sp-rule{display:block; height:3px; width:min(320px,60%); background:var(--accent); border-radius:3px; transform-origin:0 50%}
/* Cards */
.sp-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; perspective:1400px}
.sp-cards[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-cards[data-n="3"],.sp-cards[data-n="6"],.sp-cards[data-n="9"]{grid-template-columns:repeat(3,minmax(0,1fr))}
/* White label catalog: three service groups, each with its anchor */
.sp-cat-g{display:grid; gap:18px; margin-top:clamp(36px,4vw,56px); scroll-margin-top:110px}
.sp-cat-g:first-of-type{margin-top:clamp(24px,3vw,40px)}
.sp-cat-gh{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; padding-bottom:14px; border-bottom:1px solid var(--rule)}
.sp-cat-gh h3,
.sp-cat-gh x-h3{margin:0; font-size:clamp(24px,2.2vw,32px); letter-spacing:-.02em}
.sp-card.cat{min-height:0; scroll-margin-top:120px} .sp-card.cat h4, .sp-card.cat x-h4{margin:0; font-size:clamp(19px,1.5vw,22px); line-height:1.25; max-width:22ch}
.sp-cat-cards[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-card.cat .cat-a{color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size .45s var(--ease)} .sp-card.cat .cat-a:hover,.sp-card.cat .cat-a:focus-visible{background-size:100% 1.5px}
.sp-card.cat:target{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.sp-cards[data-n="7"]{grid-template-columns:repeat(4,minmax(0,1fr))} .sp-cards[data-n="7"]>.sp-card:last-child{grid-column:span 2}
.sp-card{position:relative; overflow:hidden; isolation:isolate; display:grid; align-content:start; gap:14px; padding:clamp(24px,2.4vw,36px); min-height:260px; border-radius:28px; background:linear-gradient(180deg,color-mix(in srgb,var(--sheet-2) 92%,#fff 8%),var(--sheet-2)); border:1px solid var(--rule); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent); transition:translate .6s var(--ease), border-color .4s}
.sp-card:hover{translate:0 -4px; border-color:color-mix(in srgb,var(--accent) 45%,var(--rule))}
.sp-card p{color:var(--muted); font-size:16.5px; line-height:1.6}
.sp-card .tlink{margin-top:auto; justify-self:start}
.sp-num{font:500 12px/1 var(--mono); letter-spacing:.08em; color:var(--accent)}
.sp-card h3,
.sp-card x-h3{font-size:clamp(21px,1.7vw,26px); max-width:20ch}
.sp-glow{position:absolute; z-index:-1; left:var(--mx,50%); top:var(--my,0); width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent); opacity:0; transition:opacity .4s}
.sp-card:hover .sp-glow{opacity:1}
.sp-card.ex{background:var(--sheet); border-style:dashed}
.ill-chip{justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--rule); color:var(--muted); font:500 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.ill-chip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.sp-after{margin-top:28px}
/* Steps: a track fills as each step lights */
.sp-steps{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.sp-step{display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; padding:30px; border-radius:26px; background:var(--sheet-2); border:1px solid var(--rule); transition:background .6s var(--ease), border-color .6s, box-shadow .6s}
.sp-step h3,
.sp-step x-h3{margin-bottom:10px} .sp-step p{color:var(--muted); font-size:16.5px}
.sp-step-n{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--rule); font:500 13px/1 var(--mono); color:var(--muted); transition:.6s var(--ease)}
.sp-step.on{border-color:color-mix(in srgb,var(--accent) 50%,var(--rule)); box-shadow:0 30px 60px -40px color-mix(in srgb,var(--accent) 70%,transparent)}
.sp-step.on .sp-step-n{background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent)}
.sp-track{width:4px; height:160px; border-radius:4px; background:var(--rule); overflow:hidden}
.sp-track i{display:block; height:100%; background:var(--accent); transform-origin:50% 0}
.js:not(.rm) .sp-steps-s .sp-step:not(.on) .sp-step-n{opacity:.7}
/* Close section extras */
.close .sp-sec .tlink{color:var(--on-accent)}
.close-foot>div{display:grid; gap:14px; max-width:56ch}
/* Held story rows reuse the homepage section structure */
.sp-story .nd{display:grid; gap:0}
.sp-story .nd-row{border-top:0}
/* Forms */
.sp-form{display:grid; gap:18px; padding:clamp(24px,3vw,40px); border-radius:28px; background:var(--sheet-2); border:1px solid var(--rule)}
.sp-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.sp-field{display:grid; gap:8px}
.sp-field label{font-weight:600; font-size:15px}
.sp-field .req{color:var(--accent)}
.sp-field input,.sp-field select,.sp-field textarea{font:400 16px/1.4 var(--display); color:var(--fg); background:var(--sheet); border:1px solid var(--rule); border-radius:14px; padding:14px 16px; width:100%; min-width:0}
.sp-field textarea{min-height:150px; resize:vertical}
.sp-field input:focus,.sp-field select:focus,.sp-field textarea:focus{outline:2px solid var(--focus); outline-offset:1px}
.sp-field .help{color:var(--muted); font-size:14px}
.sp-field .err{color:var(--err,#FF8A7A); font-size:14px; display:none}
.sp-field.bad .err{display:block} .sp-field.bad input,.sp-field.bad select,.sp-field.bad textarea{border-color:var(--err,#FF8A7A)}
.sp-check{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--muted)}
.sp-check input{width:20px; height:20px; margin-top:2px; accent-color:var(--accent)}
.sp-form .btn{justify-self:start}
.sp-form-note{color:var(--muted); font-size:14px}
.sp-ok{display:none; gap:10px; padding:24px; border-radius:20px; background:color-mix(in srgb,var(--accent) 12%,var(--sheet)); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--rule))}
.sp-form.sent .sp-ok{display:grid}
/* Own inquiry form */
.sp-form.own{gap:20px} .sp-form .row2{align-items:start}
:root:not([data-mode="dark"]) .sp-form{--link:#983618} :root:not([data-mode="dark"]) .sp-field input,:root:not([data-mode="dark"]) .sp-field select,:root:not([data-mode="dark"]) .sp-field textarea{border-color:#8E897F} :root:not([data-mode="dark"]) .sp-field.bad input,:root:not([data-mode="dark"]) .sp-field.bad select,:root:not([data-mode="dark"]) .sp-field.bad textarea{border-color:var(--err)}
.sp-form-hd{display:grid; gap:8px} .sp-form-hd h3, .sp-form-hd x-h3{margin:0; font-size:clamp(22px,2vw,28px); letter-spacing:-.02em; line-height:1.15}
.sp-form .req-key{font-size:13px}
.sp-form .opt{font:500 11px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-left:6px}
.sp-field .sel{position:relative; display:block} .sp-field .sel select{appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer}
.sp-field .sel svg{position:absolute; right:16px; top:50%; width:16px; height:16px; margin-top:-8px; color:var(--muted); pointer-events:none}
.sp-field input::placeholder,.sp-field textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.sp-field input:hover,.sp-field select:hover,.sp-field textarea:hover{border-color:color-mix(in srgb,var(--fg) 30%,var(--rule))}
.sp-field .under{margin:2px 0 0; padding:12px 14px; border-radius:12px; background:var(--sheet); border:1px solid var(--rule); color:var(--fg)}
.sp-none{display:flex; align-items:center; gap:10px; font-weight:400 !important; font-size:15px; color:var(--muted); cursor:pointer; min-height:32px; width:max-content; max-width:100%} .sp-none input{width:18px !important; height:18px; padding:0 !important; margin:0; accent-color:var(--accent); flex:none; cursor:pointer}
.sp-field input:disabled{opacity:.5; cursor:not-allowed}
.sp-more{border-top:1px solid var(--rule); padding-top:14px} .sp-more summary{display:flex; align-items:center; gap:8px} .sp-more .row2{margin-top:4px}
.sp-hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.sp-form .sp-acts{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.sp-status{display:grid; gap:6px; padding:18px 20px; border-radius:16px; border:1px solid var(--rule); background:var(--sheet)}
.sp-status b{font-weight:600} .sp-status p{margin:0; color:var(--muted); font-size:15px} .sp-status p:empty{display:none} .sp-status .btn{justify-self:start; margin-top:6px}
.sp-status.note{border-color:color-mix(in srgb,var(--accent) 45%,var(--rule)); background:color-mix(in srgb,var(--accent) 8%,var(--sheet))}
.sp-status.err{border-color:var(--err)}
.sp-form.sent>:not(.sp-ok){display:none} .sp-ok h3, .sp-ok x-h3{margin:0}
.sp-form{--err:#FF8A7A} :root:not([data-mode="dark"]) .sp-form{--err:#B3261E}
/* Booking calendar (preview) */
.bk{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:16px; padding:clamp(20px,2.4vw,32px); border-radius:28px; background:var(--sheet-2); border:1px solid var(--rule)}
.bk-cal{display:grid; gap:12px}
.bk-hd{display:flex; justify-content:space-between; align-items:center; font-weight:600}
.bk-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; font-size:14px}
.bk-grid span{padding:10px 0; border-radius:12px; color:var(--muted)}
.bk-grid button{padding:10px 0; border-radius:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--fg); font:500 14px/1 var(--display); cursor:pointer}
.bk-grid button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.bk-times{display:grid; gap:8px; align-content:start}
.bk-times button{padding:14px; border-radius:14px; border:1px solid var(--rule); background:var(--sheet); color:var(--fg); font:500 15px/1 var(--display); cursor:pointer; text-align:left}
.bk-times button[aria-pressed="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.bk-done{grid-column:1/-1; display:none; gap:8px; padding:20px; border-radius:18px; background:color-mix(in srgb,var(--accent) 12%,var(--sheet))}
.bk.booked .bk-done{display:grid}
/* Responsive */
@media (max-width:1100px){
.sp-hero.has-scene .sp-hero-grid{grid-template-columns:minmax(0,1fr)}
.sp-scene{max-width:760px}
.sp-cards[data-n="3"],.sp-cards[data-n="6"],.sp-cards[data-n="7"],.sp-cards[data-n="9"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
.sp-cat-cards[data-n="2"]{grid-template-columns:minmax(0,1fr)}
.sp-2col,.sp-split-in{grid-template-columns:minmax(0,1fr)}
.sp-stick{position:static}
.sp-track{display:none}
.sp-cards,.sp-cards[data-n="4"],.sp-cards[data-n="3"],.sp-cards[data-n="6"],.sp-cards[data-n="7"],.sp-cards[data-n="9"]{grid-template-columns:minmax(0,1fr)} .sp-cards[data-n="7"]>.sp-card:last-child{grid-column:auto}
.sp-card{min-height:0}
.sp-form .row2,.bk{grid-template-columns:minmax(0,1fr)}
.sp-step{padding:22px; gap:18px}
}
.sp-list{margin:0; padding-left:1.1em; display:grid; gap:8px; color:var(--muted)} .sp-list li::marker{color:var(--accent)}
[hidden]{display:none!important}
.sp-sum{color:var(--err,#FF8A7A); font-weight:600}
.sp-more summary{cursor:pointer; color:var(--link); font-weight:600; padding:6px 0}
.sp-more[open] summary{margin-bottom:14px}
.sp-form .btn[disabled]{opacity:.7; cursor:progress}
.bk-go{margin-top:6px} .bk-go[disabled]{opacity:.5; cursor:not-allowed}
/* Desktop hero graphic: centred on the copy; on screens wider than the 1440 grid it grows into the side margin instead of leaving it empty */
@media (min-width:1101px){ .sp-hero.has-scene .sp-scene{align-self:center; margin-right:calc(-1 * clamp(0px, (100vw - 1440px) / 2 - 32px, 120px))} }
.sp-hero.has-scene .sp-h1{font-size:clamp(40px,4.2vw,68px)}
.sp-steps-s{overflow-x:clip}
@media (max-width:480px){ .sp-hero .hero-actions{width:100%} .sp-hero .hero-actions .btn,.close .btn-ink{font-size:15px; padding-left:18px; gap:10px; max-width:100%} .close .btn-ink{--h:60px} }
.sp-hero::before{content:none}
/* Metric matched fallbacks so text keeps its shape while Inter loads (no layout shift). One face per weight band, sized from
measured Inter widths (2026-11-04): regular text, medium text, and semibold headings (Arial Bold) */
@font-face{font-family:"Inter Fallback"; src:local("Arial"),local("ArialMT"),local("Helvetica"); font-weight:100 450; size-adjust:106.9%; ascent-override:90.6%; descent-override:22.6%; line-gap-override:0%}
@font-face{font-family:"Inter Fallback"; src:local("Arial"),local("ArialMT"),local("Helvetica"); font-weight:451 599; size-adjust:107.9%; ascent-override:89.8%; descent-override:22.4%; line-gap-override:0%}
@font-face{font-family:"Inter Fallback"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"); font-weight:600 900; size-adjust:101.2%; ascent-override:95.7%; descent-override:23.8%; line-gap-override:0%}
:root{--display:"Inter","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.sp-hero-bg i{top:min(-240px,-28vw)}
/* Hero with a graphic: copy and buttons stay above the fold on laptop screens */
@media (min-width:1101px){
.sp-hero.has-scene{padding-top:calc(env(safe-area-inset-top,0px) + clamp(104px,8.4vw,136px))}
.sp-hero.has-scene .sp-hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:48px}
.sp-hero.has-scene .sp-hero-copy{gap:16px}
.sp-hero.has-scene .sp-h1{font-size:clamp(36px,min(4.1vw,6.4vh),66px)}
.sp-hero.has-scene .sp-lede{font-size:clamp(15.5px,1.12vw,18px); line-height:1.55; gap:10px}
.sp-hero.has-scene .hero-note{padding-top:14px; font-size:13px}
}
/* Content rewrite 2026-11-01: split second link, inline contact actions, FAQ links */
.sp-acts{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}
.tlink-in{color:var(--link); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.close .tlink-in{color:var(--on-accent)}
.faq-a .tlink{margin-top:4px}
/* Real integrations: JotForm inquiry form and Zoom Scheduler */
.jf-wrap{position:relative; min-height:1100px; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--rule)}
.jf-wrap iframe{display:block; width:100%; min-width:100%; height:1100px; border:0}
.bk-real{grid-template-columns:minmax(0,1fr); gap:20px}
.bk-intro{display:grid; gap:10px; justify-items:start}
.bk-frame iframe{display:block; width:100%; height:min(820px,82vh); border:0; border-radius:18px; background:#fff}
.bk-alt{display:grid; gap:6px; padding-top:18px; border-top:1px solid var(--rule)}
.bk-load[disabled]{opacity:.7; cursor:progress}
.bl-more-w{display:flex; justify-content:center; margin-top:28px}
.bk-frame{margin-top:clamp(28px,3vw,44px)}
.bk-frame iframe{height:min(860px,86vh); min-height:640px; border:1px solid var(--rule)}
.sp-form.jf>div:first-child{display:grid; gap:8px}
/* Mobile stories: the illustrative label sits just above the screen so it never covers screen text */
@media (max-width:860px){
.sp-story .nd-scene>.stage>.ill{display:none}
/* Nov 6 rule: no per-screen "Illustrative example" pill (the page says it once under the hero) */
}
/* Light theme polish: cards always contrast with the sheet they sit on; active steps use a clean outline */
.s-sheet2 .sp-card,.s-sheet2 .sp-step{background:var(--sheet)}
.sp-card.ex{border-style:solid}
.s-sheet .sp-card.ex{background:linear-gradient(180deg,color-mix(in srgb,var(--sheet-2) 92%,#fff 8%),var(--sheet-2))}
:root:not([data-mode="dark"]) .sp-step.on{box-shadow:0 0 0 1px var(--accent), 0 18px 40px -24px rgba(20,20,19,.18)}
:root:not([data-mode="dark"]) .sp-card{box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 36px -30px rgba(20,20,19,.18)}
.sp-h1{line-height:1.02}
.sp-form.jf{background:none; border:0; padding:0}
.jf-wrap{border:0; border-radius:0}
/* Content package Nov 2: section labels, captions, supporting lines, example chips, plans, reviews, results, comparison table */
.sp-kick{display:block; margin-bottom:14px; color:var(--accent)}
.sp-split-h .sp-kick,.sp-stick .sp-kick{margin-bottom:18px}
.sp-cap{margin-top:12px; font:500 12px/1.45 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.sp-sup{margin:0; font-size:14.5px; line-height:1.5; color:var(--muted); max-width:56ch}
.sp-acts{display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px}
.sp-after{display:grid; gap:14px; justify-items:start; margin-top:28px; max-width:72ch}
.sp-after>p{margin:0}
.sp-hero .hero-support{margin:0; font-size:15px; line-height:1.5; color:var(--muted); max-width:56ch}
.sp-hero .hero-support .tlink{margin-left:0} /* Nov 8 round 2: the link wraps as one piece, so a margin would indent it at the start of a line */
.sp-hero .hero-note{display:grid; gap:4px}
.sp-ex{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.sp-ex li{padding:6px 10px; border-radius:999px; border:1px solid var(--rule); font:500 11.5px/1.2 var(--mono); letter-spacing:.03em; color:var(--muted)}
.sp-card.plan{align-content:start}
.sp-price{margin:0; display:grid; gap:4px}
.sp-price b:first-child{font:600 clamp(30px,2.6vw,40px)/1 var(--display); letter-spacing:-.03em; color:var(--fg)}
.sp-price b+b{font:500 13px/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}
.sp-quote-list{display:grid; gap:18px; align-content:start}
.sp-results .res-grid[data-n="1"]{grid-template-columns:minmax(0,640px)}
.sp-results .res-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-table-wrap{overflow-x:auto; border-radius:22px; border:1px solid var(--rule); background:var(--sheet)}
.sp-table{width:100%; min-width:720px; border-collapse:collapse; font-size:15px}
.sp-table th,.sp-table td{padding:16px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule)}
.sp-table thead th{font:600 13px/1.2 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--sheet-2)}
.sp-table tbody th{font-weight:600; color:var(--fg); width:32%}
.sp-table td.no{color:var(--muted); font-size:13.5px}
.sp-table tr:last-child>*{border-bottom:0}
.close .close-ag{margin-top:14px; font-size:15px}
.close .close-ag .tlink,.close .close-ag .tlink-in{color:var(--on-accent)}
@media (max-width:980px){ .sp-results .res-grid[data-n="3"]{grid-template-columns:minmax(0,1fr)} }
/* Comparison table on phones: each row becomes a block, and every value names its plan */
@media (max-width:700px){
.sp-table{min-width:0}
.sp-table thead{display:none}
.sp-table,.sp-table tbody,.sp-table tr,.sp-table th,.sp-table td{display:block; width:auto}
.sp-table tr{padding:14px 16px; border-bottom:1px solid var(--rule)}
.sp-table tr:last-child{border-bottom:0}
.sp-table tbody th{padding:0 0 8px; border:0; width:auto}
.sp-table td{display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px; padding:6px 0; border:0}
.sp-table td::before{content:attr(data-th); font:500 11px/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
}
/* Overnight audit B: hero headline lines no longer touch; tablet heroes use the width */
.sp-hero .sp-h1{line-height:1.03}
@media (min-width:700px) and (max-width:1100px){
.sp-hero.has-scene .sp-h1{font-size:clamp(52px,7vw,74px); max-width:15ch}
.sp-hero.has-scene .sp-lede{max-width:62ch}
}
/* Card grids: five cards sit as three over two; three across holds down to 960px */
.sp-cards[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))} .sp-cards[data-n="5"]>.sp-card{grid-column:span 2} .sp-cards[data-n="5"]>.sp-card:nth-child(n+4){grid-column:span 3}
@media (max-width:1100px) and (min-width:961px){ .sp-cards[data-n="3"],.sp-cards[data-n="6"],.sp-cards[data-n="9"]{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:960px) and (min-width:861px){ .sp-cards[data-n="5"]{grid-template-columns:repeat(2,minmax(0,1fr))} .sp-cards[data-n="5"]>.sp-card,.sp-cards[data-n="5"]>.sp-card:nth-child(n+4){grid-column:auto} .sp-cards[data-n="5"]>.sp-card:last-child{grid-column:1 / -1} }
@media (max-width:860px){ .sp-cards[data-n="5"]{grid-template-columns:minmax(0,1fr)} .sp-cards[data-n="5"]>.sp-card,.sp-cards[data-n="5"]>.sp-card:nth-child(n+4){grid-column:auto} }
/* Section heads: the label spans the row so the heading and intro line up beneath it */
.head>.sp-kick{grid-column:1 / -1}
/* ===================== Motion plan v2 (2026-11-04): signature moments, hero compositions, card layouts =====================
State logic lives in rd.js patterns() and always runs. Only transform and opacity transition, and nothing moves under .rm */
/* Moment section: heading and one line caption, then the moment; a merged steps list sits beside it */
.mv-grid{display:grid; gap:clamp(28px,3.2vw,48px)}
.mv-head{display:grid; gap:16px; align-content:start; max-width:860px}
.mv-head h2{font-size:clamp(34px,3.8vw,58px)}
@media (min-width:1101px){ .mv:not(.mv-has-steps) .mv-head{max-width:none; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:clamp(48px,6vw,112px); align-items:end} .mv:not(.mv-has-steps) .mv-head>.sp-kick{grid-column:1 / -1; margin-bottom:0} .mv:not(.mv-has-steps) .mv-cap{padding-bottom:.4em} }
.mv-cap{margin:0; color:var(--muted); font-size:clamp(17px,1.3vw,19px); line-height:1.55; max-width:60ch}
.mv-steps{list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--rule)}
.mv-steps li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:18px 0; border-bottom:1px solid var(--rule)}
.mv-steps h3,
.mv-steps x-h3{font-size:clamp(18px,1.35vw,21px); margin-bottom:6px} .mv-steps p{color:var(--muted); font-size:16px; line-height:1.55}
@media (min-width:1101px){ .mv-has-steps .mv-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); column-gap:clamp(48px,6vw,96px); align-items:start} }
.mv .ill{position:absolute; z-index:6}
/* B: switch the view. One skeleton; the parts that differ stack in one grid cell, so the panel keeps the tallest part's height */
.pv{display:grid; gap:16px}
.pv-tabs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:6px; max-width:780px; border-radius:22px; background:var(--sheet-2); border:1px solid var(--rule)}
.s-sheet2 .pv-tabs{background:var(--sheet)}
.pv-tab{display:grid; align-content:center; gap:3px; min-height:58px; padding:10px 16px; border:0; border-radius:16px; background:none; color:var(--fg); font:inherit; text-align:left; cursor:pointer}
.pv-tab b{font-size:16px; font-weight:600; line-height:1.2} .pv-tab small{font-size:13px; line-height:1.3; color:var(--muted)}
.pv-tab:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.pv-tab[aria-selected="true"]{background:var(--sheet); box-shadow:0 0 0 1.5px var(--accent), 0 10px 24px -18px rgba(20,20,19,.5)}
.s-sheet2 .pv-tab[aria-selected="true"]{background:var(--sheet-2)}
@media (min-width:1101px){ .pv{grid-template-columns:minmax(220px,290px) minmax(0,1fr); align-items:start; gap:20px} .pv-tabs{grid-template-columns:minmax(0,1fr); max-width:none} .pv-tab{min-height:72px; padding:14px 18px} }
.pv-slot{display:grid; min-width:0} .pv-slot>*{grid-area:1 / 1; min-width:0}
[data-role][inert]{visibility:hidden; opacity:0}
:root:not(.rm) [data-role]{transition:opacity .32s var(--ease) .14s, transform .32s var(--ease) .14s} /* Nov 8 audit: the new state fades in after the old one is gone, so text never blends */
:root:not(.rm) [data-role][inert]{transform:translateY(6px); transition:opacity .16s, transform .16s, visibility 0s .16s}
/* D: tap the notes. Real buttons over the screen; every caption is listed beside it at rest */
.pn{display:grid; gap:clamp(24px,3vw,48px); align-items:center}
@media (min-width:1101px){ .pn{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)} }
.pn-stage{position:relative}
.pn-dot{position:absolute; z-index:5; left:var(--x); top:var(--y); width:34px; height:34px; margin:-17px 0 0 -17px; padding:0; display:grid; place-items:center; border-radius:50%; border:2px solid #FFF; background:var(--accent); color:#1A1A1A; font:600 14px/1 var(--mono); cursor:pointer; box-shadow:0 8px 18px -6px rgba(0,0,0,.55), 0 0 0 5px color-mix(in srgb,var(--accent) 28%,transparent)}
.pn-dot::before{content:""; position:absolute; inset:-6px; border-radius:50%}
@media (max-width:600px){ .pn-dot{width:30px; height:30px; margin:-15px 0 0 -15px; font-size:12px; border-width:1.5px; box-shadow:0 6px 14px -6px rgba(0,0,0,.55), 0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)} .pn-dot::before{inset:-8px} .pn-lab{font-size:12px; padding:6px 10px; transform:translate(18px,-50%)} .pn-lab.l{transform:translate(calc(-100% - 18px),-50%)} }
.pn-dot[aria-expanded="true"]{background:#151514; color:#FFF; border-color:var(--accent)}
.pn-dot:focus-visible{outline:3px solid var(--focus); outline-offset:4px}
.pn-lab{position:absolute; z-index:6; left:var(--x); top:var(--y); transform:translate(24px,-50%); padding:8px 13px; border-radius:999px; background:#151514; color:#F5F3EE; font:600 13.5px/1 var(--display); white-space:nowrap; pointer-events:none; box-shadow:0 12px 24px -12px rgba(0,0,0,.6)}
.pn-lab.l{transform:translate(calc(-100% - 24px),-50%)}
:root:not(.rm) .pn-lab:not([hidden]){animation:pnIn .28s var(--ease)}
@keyframes pnIn{from{opacity:0; translate:-6px 0}}
.pn-ring{position:absolute; z-index:4; left:var(--x); top:var(--y); width:var(--w); height:var(--h); border-radius:14px; box-shadow:0 0 0 2px var(--accent), 0 0 0 8px color-mix(in srgb,var(--accent) 18%,transparent); opacity:0; pointer-events:none}
.pn-ring.r{border-radius:13% / 6%}
:root:not(.rm) .pn-ring{transition:opacity .3s var(--ease)}
.pn-ring.on{opacity:1}
.pn-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pn-list li{display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; padding:16px 18px; border-radius:18px; border:1px solid var(--rule); background:var(--sheet)}
.s-sheet .pn-list li{background:var(--sheet-2)}
:root:not(.rm) .pn-list li{transition:opacity .3s, border-color .3s, box-shadow .3s}
.pn-n{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#1A1A1A; font:600 13px/1 var(--mono)}
.pn-list b{font-size:17px; line-height:1.3} .pn-list p{margin-top:3px; color:var(--muted); font-size:15.5px; line-height:1.5}
.pn-on .pn-list li:not(.on){opacity:.5}
.pn-list li.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
/* F: play the thread. Complete at rest; entries keep their space and only fade and lift during Replay */
:root:not(.rm) .pt-e{transition:opacity .5s var(--ease)}
.pt-e.pt-wait{opacity:.22}
.rm .pt-ft{display:none}
.pt-st{display:grid; justify-items:end} .pt-st>*{grid-area:1 / 1} .pt-st>.off{visibility:hidden}
.pt-ft{display:flex; align-items:center; gap:16px}
.pt-play{display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px 0 14px; border-radius:999px; border:1px solid currentColor; background:none; color:inherit; font:600 15px/1 var(--display); cursor:pointer}
.pt-ico{position:relative; width:14px; height:14px}
.pt-ico::before{content:""; position:absolute; inset:1px 0 1px 2px; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%)}
.pt[data-state="play"] .pt-ico::before{inset:1px 2px; clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.pt-bar{flex:1; height:4px; border-radius:4px; background:color-mix(in srgb,currentColor 18%,transparent); overflow:hidden}
.pt-bar i{display:block; height:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(var(--pt-p,1))}
:root:not(.rm) .pt-bar i{transition:transform .5s var(--ease)}
/* K: what's included, a two column accordion */
.sp-cards.sp-inc{display:grid; grid-template-columns:minmax(0,1fr); gap:0 clamp(28px,4vw,72px); align-items:start}
@media (min-width:861px){ .sp-cards.sp-inc{grid-template-columns:repeat(2,minmax(0,1fr))} }
.inc-item{border-top:1px solid var(--rule)}
.sp-inc>.inc-item:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
@media (max-width:860px){ .sp-inc>.inc-item:nth-last-child(2){border-bottom:0} }
.inc-q{width:100%; display:grid; grid-template-columns:40px minmax(0,1fr) 44px; align-items:center; gap:12px; padding:24px 0; border:0; background:none; color:var(--fg); font:600 clamp(19px,1.6vw,24px)/1.2 var(--display); letter-spacing:-.02em; text-align:left; cursor:pointer}
.inc-q .pm{width:44px; height:44px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center}
:root:not(.rm) .inc-q .pm{transition:transform .4s var(--ease)}
.inc-q[aria-expanded="true"] .pm{transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.inc-a>div{display:grid; gap:12px; justify-items:start; padding:0 56px 26px 52px} .inc-a p{color:var(--muted)}
:root:not(.rm) .inc-a:not([hidden])>div{animation:incIn .35s var(--ease)}
@keyframes incIn{from{opacity:0; transform:translateY(-6px)}}
/* Card layouts: one large card plus three small, or plain list rows */
/* One large card across the top (number, heading, and text side by side), then three smaller cards in a row */
@media (min-width:861px){
.sp-cards[data-layout="feature"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-cards[data-layout="feature"]>.sp-card:first-child{grid-column:1 / -1; grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr); align-items:start; column-gap:clamp(28px,4vw,64px)}
}
.sp-cards[data-layout="feature"]>.sp-card{min-height:0}
.sp-cards[data-layout="feature"]>.sp-card:first-child{background:#151514; color:#F5F3EE; border-color:transparent; padding:clamp(28px,3.4vw,52px)}
:root[data-mode="dark"] .sp-cards[data-layout="feature"]>.sp-card:first-child{background:var(--raise); border-color:color-mix(in srgb,var(--accent) 45%,var(--rule))}
.sp-cards[data-layout="feature"]>.sp-card:first-child .sp-num{font:600 clamp(44px,4.4vw,72px)/.9 var(--display); letter-spacing:-.05em; color:#F08A6C}
.sp-cards[data-layout="feature"]>.sp-card:first-child h3,
.sp-cards[data-layout="feature"]>.sp-card:first-child x-h3{font-size:clamp(26px,2.4vw,38px); max-width:16ch}
.sp-cards[data-layout="feature"]>.sp-card:first-child p{color:#C9C5BD; font-size:clamp(17px,1.3vw,19px); max-width:52ch}
.sp-cards.sp-rows{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-top:1px solid var(--rule)}
.sp-row{display:grid; grid-template-columns:56px minmax(0,.9fr) minmax(0,1.2fr); gap:10px 40px; align-items:baseline; padding:30px 0; border-bottom:1px solid var(--rule)}
.sp-row h3,
.sp-row x-h3{font-size:clamp(21px,1.9vw,30px); max-width:22ch} .sp-row-b{display:grid; gap:12px; justify-items:start} .sp-row-b p{color:var(--muted); font-size:17px; line-height:1.6}
@media (max-width:860px){ .sp-row{grid-template-columns:40px minmax(0,1fr); padding:24px 0} .sp-row-b{grid-column:2} }
/* Hero compositions. Software: one large product surface under the headline, entering with the first scroll (clean at rest) */
.sp-hero .sp-scene-in:has([data-hc]){aspect-ratio:auto; animation:none; opacity:1; transform:none}
.hc-win{position:relative; border-radius:22px; padding:7px; background:linear-gradient(160deg,#4A4A46,#151514 26%,#0B0B0A); box-shadow:0 70px 120px -60px rgba(20,20,19,.7), inset 0 0 0 1px rgba(255,255,255,.1)}
.hc-win>.fit{border-radius:16px; overflow:hidden}
.sp-scene:has([data-hc])>.sp-ill{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(11,11,10,.82)}
.hc-surface{overflow:hidden; border-radius:22px 22px 0 0}
@media (min-width:1101px){
.sp-hero:has([data-hc="surface"]){padding-bottom:0}
.sp-hero:has([data-hc="surface"]) .sp-hero-grid{grid-template-columns:minmax(0,1fr); gap:clamp(44px,7vh,88px)}
.sp-hero:has([data-hc="surface"]) .sp-hero-copy{max-width:none; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); column-gap:clamp(48px,6vw,112px); row-gap:0; align-items:start;
grid-template-areas:"crumb crumb" "pill pill" "h1 lede" "h1 acts" "h1 sup" "h1 note"}
.sp-hero:has([data-hc="surface"]) .sp-crumb{grid-area:crumb; margin-bottom:16px} .sp-hero:has([data-hc="surface"]) .pill-label{grid-area:pill; justify-self:start; margin-bottom:26px}
.sp-hero:has([data-hc="surface"]) .sp-h1{grid-area:h1; font-size:clamp(44px,min(4.6vw,7.6vh),76px)}
.sp-hero:has([data-hc="surface"]) .sp-lede{grid-area:lede; padding-top:6px} .sp-hero:has([data-hc="surface"]) .hero-actions{grid-area:acts; margin-top:22px}
.sp-hero:has([data-hc="surface"]) .hero-support{grid-area:sup; margin-top:14px} .sp-hero:has([data-hc="surface"]) .hero-note{grid-area:note; margin-top:10px}
.sp-hero .sp-scene:has([data-hc="surface"]){justify-self:center; width:min(100%,1080px); margin-right:0}
.sp-scene:has([data-hc="surface"])>.sp-ill{bottom:auto; top:-13px; right:28px}
.hc-surface{height:clamp(380px,40vw,600px)}
}
@media (max-width:1100px){ .hc-surface{border-radius:22px} .hc-surface .hc-win{width:150%} .sp-scene:has([data-hc="surface"]){max-width:none} }
/* Websites and Marketing: a cinematic real photo, people first, with one small interface chip */
.hc-photo{position:relative; aspect-ratio:4 / 4.4; border-radius:28px; overflow:hidden; background:#2A2622}
.hc-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 34%}
.hc-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,11,10,0) 55%,rgba(12,11,10,.42)); pointer-events:none}
.hc-chip{position:absolute; z-index:2; left:clamp(14px,2vw,24px); bottom:clamp(14px,2vw,24px); display:flex; align-items:center; gap:12px; padding:12px 18px 12px 12px; border-radius:18px; background:rgba(250,249,245,.96); color:#151514; box-shadow:0 24px 48px -20px rgba(0,0,0,.6)}
.hc-chip b{display:block; font-size:15px; line-height:1.25} .hc-chip small{display:block; font-size:13px; color:#5F5B54}
.hc-ico{display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:12px; background:#151514; color:#F7A27F} .hc-ico svg{width:18px; height:18px}
:root:not(.rm) .hc-chip{opacity:0; transform:translateY(14px); animation:spsc .8s var(--ease) 1.1s forwards}
.sp-scene:has([data-hc="photo"])>.sp-ill{bottom:auto; top:14px; right:14px}
@media (min-width:1101px){ .sp-hero .sp-scene:has([data-hc="photo"]){margin-right:calc(-1 * clamp(0px, (100vw - 1440px) / 2, 140px))} }
@media (min-width:1101px){ .hc-photo{aspect-ratio:auto; height:clamp(460px,calc(100vh - 150px),780px)} }
@media (max-width:1100px){ .hc-photo{aspect-ratio:4 / 3} .hc-photo img{object-position:50% 30%} }
@media (max-width:600px){ .hc-photo{aspect-ratio:1 / 1} .hc-photo img{object-position:50% 40%} }
/* Cold load layout shift (2026-11-04): hero widths set in ch follow the width of the digit 0, which differs between Inter and the
fallback, so the hero headline rewrapped when Inter arrived. The same widths in em (Inter 640: 1ch = .6655em, Inter 400: 1ch = .631em) */
.hero.sp-hero h1{max-width:9.98em} .sp-hero:not(.has-scene) .sp-h1{max-width:10.65em} .sp-lede,.sp-hero .hero-note,.sp-hero .hero-support{max-width:35.3em}
@media (min-width:700px) and (max-width:1100px){ .sp-hero.has-scene .sp-h1{max-width:9.98em} .sp-hero.has-scene .sp-lede{max-width:39.1em} }
/* Phones and tablets: the thread comes right after its caption, the merged steps follow it */
@media (max-width:1100px){ .mv-has-steps .mv-head{display:contents} .mv-has-steps .mv-body{order:1} .mv-has-steps .mv-steps{order:2; margin-top:0} }
/* Steps sections, three treatments (no neighbor repeats): a row of columns, a plain numbered list, a timeline. No scroll highlight */
.st-head{display:grid; gap:16px; max-width:860px; margin-bottom:clamp(32px,4vw,56px)}
.st-head h2{font-size:clamp(34px,3.8vw,58px)}
.st-alt{list-style:none; margin:0; padding:0; display:grid}
.st-alt h3,
.st-alt x-h3{font-size:clamp(20px,1.6vw,24px); margin-bottom:8px} .st-alt p{color:var(--muted); font-size:16.5px; line-height:1.6}
.st-n{font:600 13px/1 var(--mono); letter-spacing:.06em; color:var(--link)}
.st-row .st-alt{gap:clamp(24px,3vw,48px)}
@media (min-width:861px){ .st-row .st-alt{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))} .st-row .st-alt[data-n="4"]{--cols:4} }
.st-row .st-i{display:grid; gap:18px; align-content:start; padding-top:22px; border-top:2px solid var(--fg)}
.st-row .st-n{font:600 clamp(40px,4vw,64px)/.9 var(--display); letter-spacing:-.05em; color:var(--fg)}
.st-list .st-alt{max-width:980px; border-top:1px solid var(--rule)}
.st-list .st-i{display:grid; grid-template-columns:clamp(72px,9vw,140px) minmax(0,1fr); gap:20px; padding:clamp(24px,3vw,40px) 0; border-bottom:1px solid var(--rule)}
.st-list .st-n{font:300 clamp(48px,6vw,96px)/.85 var(--display); letter-spacing:-.06em; color:var(--accent)}
/* Owner, Nov 4: the numerals take the brand orange (same gradient as the CRM wordmark), not the darker link color */
@supports (-webkit-background-clip:text) or (background-clip:text){ .st-list .st-n{background:linear-gradient(180deg,#F7976F 0%,#ED6944 55%,#D24E2B 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:400} }
.st-list h3,
.st-list x-h3{font-size:clamp(22px,2.2vw,32px)}
.st-timeline .st-alt{position:relative; gap:28px}
@media (min-width:861px){ .st-timeline .st-alt{grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px} .st-timeline .st-alt::before{content:""; position:absolute; left:0; right:0; top:15px; height:2px; background:var(--rule)} }
@media (max-width:860px){ .st-timeline .st-alt::before{content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:var(--rule)} .st-timeline .st-i{grid-template-columns:32px minmax(0,1fr); gap:18px} }
.st-timeline .st-i{position:relative; display:grid; gap:18px; align-content:start}
.st-timeline .st-n{position:relative; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--canvas); border:2px solid var(--accent); font-size:11px; color:var(--fg)}
.s-sheet .st-timeline .st-n,.st-timeline.s-sheet .st-n{background:var(--sheet)} .st-timeline.s-sheet2 .st-n{background:var(--sheet-2)}
/* Thread moment: heading and caption beside a card about 720 px wide */
@media (min-width:1101px){ .mv-thread .mv-grid{grid-template-columns:minmax(0,1fr) minmax(0,720px); column-gap:clamp(48px,6vw,96px); align-items:start} .mv.mv-thread .mv-head{display:grid; grid-template-columns:none; align-items:start} }
/* Screen labels on light frames: solid, readable */
.pv-ill,.pt-ill,.pn-ill{background:#151514 !important; color:#ECE9E2 !important; border-color:#151514 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; font-size:11px !important}
/* Software hero, stacked variant (Support): a wide headline over the copy, then one light status card rises with the first scroll */
@media (min-width:1101px){
.sp-hero:has([data-hl="stack"]) .sp-hero-copy{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"crumb crumb" "pill pill" "h1 h1" "lede acts" "lede sup" "lede note"}
.sp-hero:has([data-hl="stack"]) .sp-h1{max-width:14em; font-size:clamp(46px,min(5.4vw,7.4vh),88px); margin-bottom:clamp(18px,2.2vh,40px)}
.sp-hero:has([data-hl="stack"]) .sp-hero-grid{gap:clamp(32px,5vh,72px)}
.sp-hero:has([data-hl="stack"]) .hcc{padding:clamp(18px,2vw,24px); gap:12px} .sp-hero:has([data-hl="stack"]) .hcc-tiles li{padding:12px 14px}
.sp-hero:has([data-hl="stack"]) .hero-actions{margin-top:6px}
.sp-hero .sp-scene:has([data-hl="stack"]){width:min(100%,980px)}
.hc-surface.hc-card{height:auto; overflow:visible; border-radius:0}
.sp-hero:has([data-hl="stack"]){padding-bottom:clamp(72px,8vw,128px)}
}
.hc-card .hcc{display:grid; gap:16px; padding:clamp(18px,2.4vw,30px); border-radius:28px; background:#FFFFFF; color:#1A1A1A; border:1px solid var(--rule); box-shadow:0 50px 100px -60px rgba(20,20,19,.5)}
:root[data-mode="dark"] .hc-card .hcc{background:#F3F1EC; border-color:transparent}
.hcc-hd{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center}
.hcc-hd small{display:block; font-size:14px; color:#5F5B54} .hcc-hd b{display:block; font-size:clamp(22px,2.2vw,32px); letter-spacing:-.03em; line-height:1.1}
.hcc-mark{display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#151514; color:#F7A27F; font-weight:700; font-size:18px}
.hcc-chip{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:#151514; color:#F3F1EC; font-size:13px; font-weight:600; white-space:nowrap} .hcc-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:#ED6944}
.hcc-tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.hcc-tiles li{display:grid; gap:4px; padding:16px; border-radius:18px; background:#F5F3EE} .hcc-tiles small{font-size:14px; color:#5F5B54} .hcc-tiles b{font-size:clamp(19px,1.7vw,24px); letter-spacing:-.02em}
.hcc-tiles li.hot{background:rgba(237,105,68,.12); box-shadow:inset 0 0 0 1px rgba(237,105,68,.45)}
@media (max-width:700px){ .hcc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .hcc-hd{grid-template-columns:auto minmax(0,1fr)} .hcc-chip{grid-column:1 / -1; justify-self:start} }
/* Phones: the large portal screen gives way to one card at readable size */
.hc-mini{display:none}
@media (max-width:600px){
.hc-surface:has(.hc-mini) .hc-win{display:none}
.hc-surface:has(.hc-mini){border-radius:24px; height:auto}
.hc-mini{display:grid; gap:10px; padding:18px; border-radius:24px; background:#141413; color:#F5F3EE}
.hc-mini small{font-size:13px; color:#B5B1A9} .hc-mini b{font-size:24px; letter-spacing:-.03em; line-height:1.1}
.hc-mini .hm-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; color:#D8D4CB} .hc-mini .hm-row strong{font-size:30px; letter-spacing:-.04em; color:#F5F3EE}
.hc-mini .hm-bar{height:8px; border-radius:8px; background:#2E2D2A; overflow:hidden} .hc-mini .hm-bar i{display:block; width:71%; height:100%; background:linear-gradient(90deg,#F29A74,#ED6944)}
}
/* Self playing tours (Nov 4): a thin timer under the active tab while the views play by themselves */
.pv-tab{position:relative; overflow:hidden}
.pat-auto .pv-tab[aria-selected="true"]::after{content:""; position:absolute; left:16px; right:16px; bottom:8px; height:2px; border-radius:2px; background:var(--accent); transform-origin:0 50%; animation:patT var(--at,3.4s) linear forwards}
@keyframes patT{from{transform:scaleX(0)} to{transform:scaleX(1)}}
/* ===================== Foundation patterns (rollout, Nov 4): A2, C, E, G, H =====================
State logic in rd.js patterns() (plain JS, always runs). Only transform, opacity and clip-path move; nothing moves under .rm.
Pages style their own screen in page.css; the hooks each pattern offers are listed in content-handoff/2026-11-04-rollout/PATTERNS.md */
/* Shared: parts that differ stack in one grid cell, so the height never changes; hidden parts are inert */
.pat-slot{display:grid} .pat-slot>*{grid-area:1 / 1; min-width:0}
:is([data-pat="stepper"] [data-step],[data-pat="toggle"] [data-side],[data-pat="pick"] [data-opt])[inert]{visibility:hidden; opacity:0}
:root:not(.rm) :is([data-pat="stepper"] [data-step],[data-pat="toggle"] [data-side],[data-pat="pick"] [data-opt]){transition:opacity .32s var(--ease) .14s, transform .32s var(--ease) .14s}
:root:not(.rm) :is([data-pat="stepper"] [data-step],[data-pat="toggle"] [data-side],[data-pat="pick"] [data-opt])[inert]{transform:translateY(6px); transition:opacity .16s, transform .16s, visibility 0s .16s}
.pat-say{margin:0; font-size:clamp(17px,1.35vw,20px); line-height:1.45; font-weight:500; color:var(--fg); max-width:62ch}
.pat-say>*{margin:0}
.px-ill,.pc-ill,.pe-ill,.pw-ill,.pk-ill{background:#151514!important; color:#ECE9E2!important; border-color:#151514!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; font-size:11px!important}
/* Pattern A2: step through. The list of steps fills as you go; Back, the counter and Next sit above the screen */
.px{display:grid; gap:16px}
.px-rail{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:8px}
.px-rail li{position:relative; padding-top:14px; font-size:14px; line-height:1.3; color:var(--muted)}
.px-rail li::before,.px-rail li::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px; background:var(--rule)}
.px-rail li::after{background:var(--accent); transform:scaleX(0); transform-origin:0 50%}
:root:not(.rm) .px-rail li::after{transition:transform .4s var(--ease)}
.px-rail li.on{color:var(--fg)} .px-rail li.on::after{transform:none} .px-rail li[aria-current]{font-weight:600}
.pat-auto .px-rail li[aria-current]+li::after{animation:patT var(--at,1.8s) linear forwards}
.px-row{display:grid; gap:14px; align-items:center}
@media (min-width:861px){ .px-row{grid-template-columns:minmax(0,1fr) auto; column-gap:32px} }
.px-bar{display:flex; align-items:center; gap:12px}
.px-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; min-width:44px; padding:0 18px; border-radius:999px; border:1px solid var(--rule); background:var(--sheet); color:var(--fg); font:600 15px/1 var(--display); cursor:pointer; white-space:nowrap}
.px-btn.pri{background:var(--fg); border-color:var(--fg); color:var(--canvas)}
.px-btn[aria-disabled="true"]{opacity:.38; cursor:default}
.px-btn:focus-visible,.pc-b:focus-visible,.pk-o:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.px-count{margin:0; min-width:4.6em; text-align:center; font:500 13px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.px-stage{position:relative}
@media (max-width:600px){ .px-rail li{font-size:12.5px; padding-top:12px} .px-bar{justify-content:space-between} }
/* Pattern C: toggle, before and after. Two pressed buttons in one switch; the dark thumb slides to the side that is shown */
.pc{display:grid; gap:16px}
.pc-sw{position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); justify-self:start; padding:5px; border-radius:999px; background:var(--sheet-2); border:1px solid var(--rule); max-width:100%}
.s-sheet2 .pc-sw{background:var(--sheet)}
.pc-sw::before{content:""; position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:var(--fg)}
.pc[data-at="b"] .pc-sw::before{transform:translateX(100%)}
:root:not(.rm) .pc-sw::before{transition:transform .45s var(--ease)}
.pc-b{position:relative; z-index:1; min-height:44px; padding:8px 20px; border:0; border-radius:999px; background:none; color:var(--fg); font:600 15px/1.2 var(--display); text-align:center; cursor:pointer}
.pc-b[aria-pressed="true"],.pc-b[aria-checked="true"]{color:var(--canvas)}
:root:not(.rm) .pc-b{transition:color .3s}
.pc-stage{position:relative}
@media (max-width:600px){ .pc-sw{justify-self:stretch} .pc-b{padding:8px 12px; font-size:14px} }
/* Pattern E: draw the path. Nodes in a row (a column on phones, or always with data-scroll); each node's segment runs to the next dot */
.pe-l{list-style:none; margin:0; padding:0; display:grid; gap:var(--pe-gap,20px)}
.pe-n{position:relative; min-width:0; padding-left:44px}
.pe-dot{position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:var(--canvas); border:2px solid var(--accent)}
.s-sheet .pe-dot{background:var(--sheet)} .s-sheet2 .pe-dot{background:var(--sheet-2)}
.pe-n.on .pe-dot,.pe:not(.pe-go) .pe-dot{background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)}
.pe-gate .pe-dot{border-radius:7px}
.pe-seg{position:absolute; left:10px; top:28px; width:2px; height:calc(100% + var(--pe-gap,20px) - 30px); background:var(--rule); overflow:hidden}
.pe-seg>i{position:absolute; inset:0; background:var(--accent); transform-origin:50% 0}
.pe-n:last-child>.pe-seg{display:none}
.pe-go .pe-seg>i{transform:scaleY(0)}
.pe-go .pe-n.on>.pe-seg>i{transform:none}
:root:not(.rm) .pe-go:not([data-scroll]) .pe-n.on>.pe-seg>i{transition:transform var(--pe-step,.65s) linear}
.pe-go[data-scroll] .pe-seg>i{transform:scaleY(var(--f,0))}
.pe-go .pe-n:not(.on)>.pe-c{opacity:.42}
:root:not(.rm) .pe-c{transition:opacity .5s var(--ease)}
@media (min-width:861px){
.pe:not([data-scroll]) .pe-l{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.pe:not([data-scroll]) .pe-n{padding:44px 0 0}
.pe:not([data-scroll]) .pe-dot{top:0}
.pe:not([data-scroll]) .pe-seg{left:28px; top:10px; height:2px; width:calc(100% + var(--pe-gap,20px) - 30px)}
.pe:not([data-scroll]) .pe-seg>i{transform-origin:0 50%}
.pe-go:not([data-scroll]) .pe-seg>i{transform:scaleX(0)}
.pe-go:not([data-scroll]) .pe-n.on>.pe-seg>i{transform:none}
}
/* E, vertical timeline (data-scroll): a sticky title column beside the list on desktop; the line follows the scroll, no pin */
.pe-tl{display:grid; gap:clamp(28px,4vw,56px)}
@media (min-width:1101px){ .pe-tl{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start} .pe-side{position:sticky; top:clamp(96px,14vh,140px)} }
.pe[data-scroll]{--pe-gap:clamp(28px,4vw,48px)}
/* As a page moment ("kind": "moment" with only the list in moment.html): the section heading and caption are the sticky title */
@media (min-width:1101px){ .mv:has(.pe[data-scroll]) .mv-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:clamp(48px,6vw,96px); align-items:start} .mv:has(.pe[data-scroll]) .mv-head{position:sticky; top:clamp(96px,14vh,140px); grid-template-columns:none} }
/* Pattern G: work timeline. Months in a row (a column on phones), each lights in turn; the count up slot sits apart from it */
.pw{display:grid; gap:clamp(24px,3vw,40px)}
@media (min-width:1101px){ .pw:has(.pw-fig){grid-template-columns:minmax(0,1fr) minmax(250px,300px); align-items:stretch} }
.pw-l{list-style:none; margin:0; padding:0; display:grid; gap:0 14px}
@media (min-width:861px){ .pw-l{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))} }
.pw-m{position:relative; display:grid; gap:6px; align-content:start; padding:20px 0 4px; border-top:2px solid var(--rule)}
.pw-m::before{content:""; position:absolute; left:0; right:0; top:-2px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%}
.pw-m.on::before,.pw:not(.pw-go) .pw-m::before{transform:none}
:root:not(.rm) .pw-m::before{transition:transform .5s var(--ease)}
.pw-k{font:500 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--link)}
.pw-m b{font-size:clamp(17px,1.3vw,19px); line-height:1.25; letter-spacing:-.01em}
.pw-m p{margin:0; color:var(--muted); font-size:15px; line-height:1.5}
@media (max-width:860px){ .pw-m{grid-template-columns:86px minmax(0,1fr); column-gap:14px; padding:16px 0} .pw-m>:not(.pw-k){grid-column:2} .pw-k{grid-row:1 / span 2; padding-top:3px} }
.pw-fig{display:grid; gap:10px; align-content:start; padding:clamp(20px,2.4vw,28px); border-radius:24px; background:#151514; color:#F5F3EE}
:root[data-mode="dark"] .pw-fig{background:var(--raise); border:1px solid color-mix(in srgb,var(--accent) 45%,var(--rule))}
.pw-fig small{font:500 12px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#C9C5BD}
.pw-fig b{font:600 clamp(56px,6vw,88px)/.9 var(--display); letter-spacing:-.05em; color:#F08A6C; font-variant-numeric:tabular-nums}
[data-pat="work"] [data-to]{display:inline-block; text-align:right}
.pw-fig p{margin:0; color:#E4E0D8; font-size:16px; line-height:1.5} .pw-fig p+p{color:#B5B1A9; font-size:14px}
/* Pattern H: pick an option. A radio group of a few choices; the panel parts for every choice are in the HTML */
.pk{display:grid; gap:16px}
@media (min-width:1101px){ .pk{grid-template-columns:minmax(200px,260px) minmax(0,1fr); align-items:start; gap:20px} }
.pk-opts{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:6px; padding:6px; border-radius:22px; background:var(--sheet-2); border:1px solid var(--rule)}
.s-sheet2 .pk-opts{background:var(--sheet)}
@media (min-width:1101px){ .pk-opts{grid-template-columns:minmax(0,1fr)} }
.pk-o{position:relative; overflow:hidden; display:grid; align-content:center; gap:2px; min-height:64px; padding:10px 16px; border:0; border-radius:16px; background:none; color:var(--fg); font:inherit; text-align:left; cursor:pointer}
.pk-o b{font:600 clamp(24px,2.2vw,32px)/1 var(--display); letter-spacing:-.03em} .pk-o small{font-size:13.5px; line-height:1.3; color:var(--muted)}
.pk-o:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.pk-o[aria-checked="true"]{background:var(--sheet); box-shadow:0 0 0 1.5px var(--accent), 0 10px 24px -18px rgba(20,20,19,.5)}
.s-sheet2 .pk-o[aria-checked="true"]{background:var(--sheet-2)}
.pat-auto .pk-o[aria-checked="true"]::after{content:""; position:absolute; left:16px; right:16px; bottom:8px; height:2px; border-radius:2px; background:var(--accent); transform-origin:0 50%; animation:patT var(--at,1.8s) linear forwards}
.pk-panel{position:relative; min-width:0}
/* ===================== Hero styles by menu group (rollout, Nov 4) =====================
Visible at rest and filled in on load with CSS only: .hc-in rises, .hc-fill grows, .hc-swap trades its .hc-a for its .hc-b, each at
its own --t. The HTML holds the finished state (no script, reduced motion). Below the fold (phones) rd.js holds it with .hc-wait */
.js:not(.rm) [data-hc] .hc-in{animation:hcIn .8s var(--ease) var(--t,.4s) both}
@keyframes hcIn{from{opacity:0; transform:translateY(14px)}}
.js:not(.rm) [data-hc] .hc-fill{transform-origin:0 50%; animation:hcFill 1.2s var(--ease) var(--t,.5s) both}
@keyframes hcFill{from{transform:scaleX(0)}}
.hc-swap{display:inline-grid} .hc-swap>*{grid-area:1 / 1} .hc-swap>.hc-a{visibility:hidden}
.js:not(.rm) [data-hc] .hc-swap>.hc-a{visibility:visible; animation:hcOut .3s var(--ease) var(--t,1s) both}
.js:not(.rm) [data-hc] .hc-swap>.hc-b{animation:hcSwap .45s var(--ease) var(--t,1s) both}
@keyframes hcOut{to{opacity:0; visibility:hidden}}
@keyframes hcSwap{from{opacity:0; transform:scale(.94)}}
.js:not(.rm) [data-hc] .hc-wipe{animation:hcWipe 1s var(--ease) var(--t,.6s) both}
@keyframes hcWipe{from{clip-path:inset(0 100% 0 0)}}
.hc-wait [data-hc] *,.hc-wait [data-hc]{animation-play-state:paused!important}
.sp-scene:has([data-hc="app"],[data-hc="type"],[data-hc="brand"])>.sp-ill{backdrop-filter:none; -webkit-backdrop-filter:none; background:#151514; color:#ECE9E2; border-color:#151514; font-size:11px}
/* Hero: Software. One large product surface: an app window beside the copy on desktop (visible at rest), under it on tablets and phones */
.hc-app{position:relative; border-radius:22px; padding:7px; background:linear-gradient(160deg,#4A4A46,#151514 26%,#0B0B0A); box-shadow:0 60px 110px -60px rgba(20,20,19,.7), inset 0 0 0 1px rgba(255,255,255,.1)}
.hca-in{border-radius:16px; overflow:hidden; background:#FFFFFF; color:#1A1A1A}
:root[data-mode="dark"] .hca-in{background:#F3F1EC}
.hca-bar{display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; background:#EFECE6; border-bottom:1px solid #E2DED5}
.hca-bar>i{width:9px; height:9px; border-radius:50%; background:#CFCAC0}
.hca-bar>span{margin-left:10px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:5px 12px; border-radius:999px; background:#FFFFFF; font:500 12px/1 var(--mono); color:#5F5B54}
.hca-body{display:grid; gap:14px; padding:clamp(16px,2vw,24px)}
.hca-rows{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.hca-rows li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px 14px; border-radius:14px; background:#F5F3EE}
.hca-rows b{font-size:15px; line-height:1.3} .hca-rows small{grid-column:1; font-size:13px; color:#5F5B54} .hca-rows .hcc-chip{grid-row:1 / span 2; grid-column:2}
.hca-rows li.hot{background:rgba(237,105,68,.1); box-shadow:inset 0 0 0 1px rgba(237,105,68,.4)}
@media (min-width:1101px){ .sp-hero .sp-scene:has([data-hc="app"]){align-self:start; margin-top:8px} }
.hca-body .hcc-tiles li{padding:12px 14px} .hca-body .hcc-tiles b{font-size:clamp(17px,1.4vw,20px)} .hca-body .hcc-hd b{font-size:clamp(20px,1.8vw,26px)}
.sp-scene:has([data-hc="app"])>.sp-ill{bottom:auto; top:-13px; right:28px}
/* Hero: Marketing (data-hc="photo", built in the motion plan v2 block above). On desktop it starts at the top of the copy and fits the
screen, so the chip is never below the fold; the chip rises at 1.1 s */
@media (min-width:1101px){ .sp-hero .sp-scene:has([data-hc="photo"]){align-self:start; margin-top:6px} .hc-photo{height:clamp(440px,calc(100vh - 170px),720px)} }
/* Hero: AI. Typographic: the headline leads across the page; one small live element sits beside the lede, never beside the H1 */
@media (min-width:1101px){
.sp-hero:has([data-hc="type"]) .sp-hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,380px); column-gap:clamp(48px,6vw,112px); row-gap:0; align-items:start;
grid-template-areas:"crumb crumb" "pill pill" "h1 h1" "lede live" "acts live" "sup live" "note live"}
.sp-hero:has([data-hc="type"]) .sp-hero-copy{display:contents}
.sp-hero:has([data-hc="type"]) .sp-crumb{grid-area:crumb; margin-bottom:16px} .sp-hero:has([data-hc="type"]) .pill-label{grid-area:pill; justify-self:start; margin-bottom:22px}
.sp-hero:has([data-hc="type"]) .sp-h1{grid-area:h1; max-width:12.5em; font-size:clamp(52px,min(6.4vw,10.4vh),104px); margin-bottom:clamp(24px,3.4vh,44px)}
.sp-hero:has([data-hc="type"]) .sp-lede{grid-area:lede} .sp-hero:has([data-hc="type"]) .hero-actions{grid-area:acts; margin-top:22px}
.sp-hero:has([data-hc="type"]) .hero-support{grid-area:sup; margin-top:14px} .sp-hero:has([data-hc="type"]) .hero-note{grid-area:note; margin-top:10px}
.sp-hero .sp-scene:has([data-hc="type"]){grid-area:live; align-self:start; margin:4px 0 0}
}
.hct{display:grid; gap:12px; padding:18px; border-radius:22px; background:#FFFFFF; color:#1A1A1A; border:1px solid var(--rule); box-shadow:0 40px 80px -50px rgba(20,20,19,.5)}
:root[data-mode="dark"] .hct{background:#F3F1EC; border-color:transparent}
.hct-hd{display:flex; align-items:center; gap:10px; font-size:13px; color:#5F5B54} .hct-hd b{color:#1A1A1A; font-size:14.5px}
.hct-msg{margin:0; padding:12px 14px; border-radius:4px 16px 16px 16px; background:#F5F3EE; font-size:15px; line-height:1.5; color:#2E2C29}
.hct-list{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.hct-list li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border-radius:12px; background:#F5F3EE; font-size:14px}
.hct-ok{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#983618; white-space:nowrap}
.hct-ok::before{content:""; width:9px; height:5px; margin-top:-3px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg)}
@media (max-width:1100px){ .sp-scene:has([data-hc="type"]){max-width:420px} }
/* Hero: Agencies. A brand swap: a deliverable whose logo slot and accent take the agency's brand on load (sample agency: Harbor Lane Digital) */
.hcb{position:relative; display:grid; gap:14px; padding:clamp(18px,2.2vw,28px); border-radius:28px; background:#FFFFFF; color:#1A1A1A; border:1px solid var(--rule); box-shadow:0 50px 100px -60px rgba(20,20,19,.5); overflow:hidden}
:root[data-mode="dark"] .hcb{background:#F3F1EC; border-color:transparent}
.hcb-stripe{position:absolute; left:0; right:0; top:0; height:6px; background:#D9D5CC}
.hcb-stripe>i{position:absolute; inset:0; background:var(--hcb-brand,linear-gradient(90deg,#4F8FC6,#1E4569))}
.hcb-hd{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:6px}
.hcb-slot{display:grid; place-items:center; min-height:48px; padding:0 16px; border-radius:14px; border:1.5px dashed #B9B3A8; color:#6B675F; font-size:13px; font-weight:600}
.hcb-logo{display:flex; align-items:center; gap:10px; min-height:48px; font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--hcb-ink,#1E4569)}
.hcb-mark{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--hcb-brand,linear-gradient(160deg,#4F8FC6,#2B5F8E 55%,#1E4569)); color:#FFFFFF; font-size:14px; letter-spacing:-.02em}
.hcb-tag{padding:6px 11px; border-radius:999px; background:#F1EFE8; font:500 11.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:#4D4A45; white-space:nowrap}
.hcb-ft{display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid #E6E2D9; font-size:13.5px; color:#5F5B54}
/* Moment sections start closer to their heading on desktop, so the screen is in view when the section arrives (review, Nov 4) */
@media (min-width:1101px){ .section.mv{padding-top:clamp(64px,5.5vw,96px)} }
/* ===== Photos with people (Nov 6, owner: warmth on inner pages). Built from pages//photos.json by build_site.py pic() =====
Hero, "edge bleed": the photo fills the right side of the hero to the screen edge and fades into the page on its left and bottom.
The example screen floats over it, a little smaller and toward the lower left, so the person shows in the upper right.
Phones and tablets: the screen moves down and the photo sits behind it, with the person visible above the screen */
.sp-hero-bg .phx{position:absolute; top:0; right:0; bottom:0; left:46%; display:block;
-webkit-mask:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,#000 72%,transparent);
-webkit-mask-composite:source-in; mask:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,#000 72%,transparent); mask-composite:intersect}
.sp-hero-bg .phx img{width:100%; height:100%; object-fit:cover; object-position:var(--hx-pos,72% 30%)}
.sp-hero.phx-on .sp-hero-bg::before{opacity:.18}
.sp-hero.phx-on .sp-scene-in{filter:drop-shadow(0 30px 50px rgba(12,11,10,.28))}
/* Nov 8 round 2: Safari painted this shadow as a stray box over the breadcrumb on phones and tablets; its own layer fixes it */
@media (max-width:1100px){ .sp-hero .sp-scene{transform:translateZ(0)} }
@media (min-width:1101px){
.sp-hero.phx-on .sp-scene{transform:translate(var(--hx-dx,-28px),var(--hx-dy,34px)) scale(var(--hx-s,.82)); transform-origin:0 100%}
}
@media (max-width:1100px){
.sp-hero-bg .phx{left:0; top:auto; height:var(--hx-h,62%);
-webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 62%,transparent); mask:linear-gradient(180deg,transparent 0,#000 12%,#000 62%,transparent)}
.sp-hero-bg .phx img{object-position:var(--hx-pos-m,var(--hx-pos,70% 20%))}
.sp-hero.phx-on .sp-scene{margin-top:clamp(200px,56vw,360px)}
}
:root[data-mode="dark"] .sp-hero-bg .phx img{filter:brightness(.86)}
/* Rows, "band": the photo fills the row and fades into the sheet behind the text (left on desktop, bottom on phones).
"stage": the photo fills the row, softly darkened, and the example screen floats over it */
.phb-on{isolation:isolate; overflow:clip} /* clip, not hidden, so sticky headings inside still stick */
.phb-on>.phb{position:absolute; inset:0; z-index:-1; display:block; pointer-events:none}
.phb-on>.phb img{width:100%; height:100%; object-fit:cover; object-position:var(--bx-pos,70% 40%)}
.phb-band>.phb{left:40%; -webkit-mask:linear-gradient(90deg,transparent 0,#000 42%); mask:linear-gradient(90deg,transparent 0,#000 42%)}
@media (min-width:1101px){ .phb-band .wrap>*{max-width:min(100%,46vw)} .phb-band h2{font-size:clamp(40px,3.6vw,60px)} }
.phb-stage>.phb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,11,10,.66) 0,rgba(12,11,10,.5) 34%,rgba(12,11,10,.4))}
/* Only the text that sits straight on the photo turns light; the example's own cards, tabs and buttons keep their colors */
@media (min-width:1101px){
.phb-stage :is(.mv-head,.px-rail,.px-count,.px-row>.pat-say,.pc>.pat-say){color:#F5F3EE; --fg:#F5F3EE; --muted:#DEDAD2; --rule:rgba(245,243,238,.28); --link:#F6B39B}
.phb-stage .mv-head .sp-kick{color:#F6B39B}
.phb-stage .mv-head{text-shadow:0 1px 18px rgba(12,11,10,.45)}
}
.phb-top{padding-top:clamp(360px,36vw,560px)}
.phb-top>.phb{bottom:auto; height:clamp(380px,37vw,580px); -webkit-mask:linear-gradient(180deg,#000 52%,transparent); mask:linear-gradient(180deg,#000 52%,transparent)}
@media (max-width:1100px){
.phb-band,.phb-top{padding-top:clamp(300px,70vw,480px)}
.phb-top>.phb{height:clamp(320px,74vw,520px); -webkit-mask:linear-gradient(180deg,#000 55%,transparent); mask:linear-gradient(180deg,#000 55%,transparent)}
.phb-stage{padding-top:clamp(300px,70vw,480px)}
.phb-stage>.phb{bottom:auto; height:clamp(320px,74vw,520px); -webkit-mask:linear-gradient(180deg,#000 55%,transparent); mask:linear-gradient(180deg,#000 55%,transparent)}
.phb-stage>.phb::after{display:none}
.phb-stage>.phb img{object-position:var(--bx-pos-m,var(--bx-pos,60% 40%))}
.phb-band>.phb{left:0; bottom:auto; height:clamp(320px,74vw,520px); -webkit-mask:linear-gradient(180deg,#000 55%,transparent); mask:linear-gradient(180deg,#000 55%,transparent)}
.phb-band>.phb img{object-position:var(--bx-pos-m,var(--bx-pos,60% 40%))}
}
:root[data-mode="dark"] .phb-on>.phb img{filter:brightness(.82)}
/* Stacked hero (the screen under the text, Software Support): the photo starts just above the screen, the person beside it */
@media (min-width:1101px){
.sp-hero.phx-on:has([data-hl="stack"]) .sp-hero-bg .phx{top:auto; left:38%; height:var(--phx-h,55%);
-webkit-mask:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(180deg,transparent 0,#000 30%); -webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(180deg,transparent 0,#000 30%); mask-composite:intersect}
.sp-hero.phx-on:has([data-hl="stack"]) .sp-scene{transform:none}
}
@media (min-width:1101px){ .phb-band .sp-2col{grid-template-columns:minmax(0,1fr); row-gap:28px} .phb-band .sp-stick{position:static} }
/* How We Work (editorial RD-089): the action after the scroll timeline sits in the content column, clear of the sticky heading */
@media (min-width:1101px){ .mv:has(.pe[data-scroll]) .mv-grid>.sp-after{grid-column:2} }
/* Marketing photo heroes (Nov 6): the boxed photo becomes the edge bleed photo behind the hero; the status card floats over it */
.sp-hero.phx-on .hc-photo{background:none; border-radius:0; overflow:visible}
.sp-hero.phx-on .hc-photo::after{display:none}
@media (min-width:1101px){ .sp-hero.phx-on .sp-scene:has([data-hc="photo"]){transform:none} }
@media (max-width:1100px){ .sp-hero.phx-on .sp-scene:has([data-hc="photo"]){margin-top:0} }
@media (max-width:1100px){ .sp-hero.phx-on:has([data-hc="photo"]) .sp-hero-bg .phx{-webkit-mask:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent); mask:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent)} }
/* Wide typographic headlines (AI heroes) stay on the clean side of the hero photo */
@media (min-width:1101px){ .sp-hero.phx-on:has([data-hc="type"]) .sp-h1{max-width:min(100%,44vw); font-size:clamp(40px,min(4.3vw,8vh),70px)} }
@media (max-width:1100px){ .sp-hero.phx-on:has([data-hc="photo"]) .sp-hero-bg .phx img{object-position:var(--hx-pos-m,72% 0%)}
.sp-hero.phx-on:has([data-hc="photo"]) .sp-hero-bg .phx{-webkit-mask:linear-gradient(180deg,transparent 0,#000 5%,#000 86%,transparent); mask:linear-gradient(180deg,transparent 0,#000 5%,#000 86%,transparent)} }
/* Photo heroes (owner, Nov 6): the "Illustrative example" label never sits on a face. It goes to the top left of the photo area,
where the photo fades into the page; the status card keeps its own corner */
.sp-hero.phx-on .sp-scene:has([data-hc="photo"])>.sp-ill{top:14px !important; left:0 !important; right:auto !important; bottom:auto !important}
@media (max-width:1100px){ .sp-hero.phx-on .sp-scene:has([data-hc="photo"])>.sp-ill{top:10px !important; left:10px !important} }
/* QA fixes (Nov 6) */
/* Phones: the row heading starts clear of the photo fade */
@media (max-width:1100px){ .phb-band,.phb-top,.phb-stage{padding-top:clamp(340px,80vw,520px)} }
/* Stages: the photo covers the top of the row and fades out, so the backdrop stays Retina sharp on wide screens */
@media (min-width:1101px){ .phb-stage>.phb{bottom:auto; height:82%; -webkit-mask:linear-gradient(180deg,#000 62%,transparent); mask:linear-gradient(180deg,#000 62%,transparent)} }
/* Owner (Nov 6): inner pages say "Examples on this page are illustrative." once, under the hero; the per screen pills are hidden */
body.sp .ill{display:none !important}
.sp-hero .hero-note .hero-illus{color:var(--muted)}
/* Nov 8 (SEO check): card headings in a section without its own heading are H2s (404 page). They keep the card H3 look */
.sp-card h2.sp-ch{font-size:clamp(21px,1.7vw,26px); max-width:20ch; letter-spacing:-.02em; line-height:1.15}
/* Sections focused by a same page link (rd.js) take focus without a ring around the whole section (Nov 8) */
[data-anchor-focus]:focus{outline:none}
/* ---------- Migrated blog posts and legal pages (Nov 8). Long reading text: one calm column, the site's type and colors ---------- */
.ar-hero{position:relative; padding-top:calc(env(safe-area-inset-top,0px) + clamp(118px,11vw,156px)); padding-bottom:clamp(40px,4.4vw,64px); background:var(--canvas)}
.ar-head{max-width:880px}
.ar-crumb{flex-wrap:wrap; row-gap:4px; margin-bottom:18px} .ar-crumb [aria-current]{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; max-width:42ch}
.ar-head .pill-label{display:inline-flex; margin-bottom:20px}
.ar-hero .ar-h1{font-family:var(--display); font-weight:600; font-size:clamp(34px,4.3vw,60px); line-height:1.06; letter-spacing:-.028em; color:var(--fg); margin:0 0 18px; text-wrap:balance; max-width:22ch}
.ar-meta{margin:0; color:var(--muted); font-size:15px}
.ar-sec{padding-top:clamp(8px,1.5vw,16px)}
.ar-wrap{max-width:880px}
.ar-fig{margin:0 0 clamp(28px,4vw,48px); border-radius:22px; overflow:hidden; background:var(--sheet-2)}
.ar-fig img{display:block; width:100%; height:auto}
.ar-body{font-size:clamp(17px,1.12vw,19px); line-height:1.72; color:var(--fg); max-width:72ch}
.ar-body > :first-child{margin-top:0}
.ar-body p,.ar-body ul,.ar-body ol,.ar-body details,.ar-body blockquote,.ar-body figure,.ar-body .ar-table{margin:0 0 1.15em}
.ar-body h2{font-family:var(--display); font-weight:600; font-size:clamp(25px,2.2vw,34px); line-height:1.16; letter-spacing:-.02em; margin:1.9em 0 .6em; text-wrap:balance}
.ar-body h3,
.ar-body x-h3{font-family:var(--display); font-weight:600; font-size:clamp(20px,1.5vw,24px); line-height:1.25; letter-spacing:-.01em; margin:1.6em 0 .5em}
.ar-body h4,
.ar-body x-h4{font-weight:600; font-size:1.02em; margin:1.4em 0 .4em}
.ar-body ul,.ar-body ol{padding-left:1.25em} .ar-body li{margin:.4em 0} .ar-body li::marker{color:var(--accent)}
.ar-body a{color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.ar-body a:hover{text-decoration-thickness:2px}
.ar-body strong{font-weight:600}
.ar-body hr{border:0; border-top:1px solid var(--rule); margin:2.2em 0}
.ar-body blockquote{border-left:3px solid var(--accent); padding:.2em 0 .2em 1.1em; color:var(--muted)}
.ar-body img{display:block; max-width:100%; height:auto; border-radius:16px}
.ar-body figcaption{font-size:14px; color:var(--muted); margin-top:8px}
.ar-body code{font-family:var(--mono); font-size:.86em; background:var(--sheet-2); padding:.12em .38em; border-radius:6px; overflow-wrap:anywhere}
.ar-body details{border:1px solid var(--rule); border-radius:14px; padding:14px 18px; background:var(--sheet)}
.ar-body details[open]{padding-bottom:6px} .ar-body summary{cursor:pointer; font-weight:600; line-height:1.4}
.ar-body details > :not(summary){margin-top:.7em}
.ar-table{overflow-x:auto; border:1px solid var(--rule); border-radius:14px}
.ar-table:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.ar-body table{width:100%; border-collapse:collapse; font-size:.9em; line-height:1.5; min-width:520px}
.ar-body th,.ar-body td{padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule)}
.ar-body tr:last-child td{border-bottom:0} .ar-body th{font-weight:600; background:var(--sheet-2)}
.ar-legal .ar-body{font-size:clamp(16px,1.05vw,17.5px); line-height:1.7}
.ar-legal .ar-body h2{font-size:clamp(22px,1.8vw,28px)} .ar-legal .ar-body h3, .ar-legal .ar-body x-h3{font-size:clamp(18px,1.3vw,21px)}
.ar-end{margin-top:clamp(44px,5vw,72px); padding-top:28px; border-top:1px solid var(--rule); max-width:72ch}
.ar-end-h{font-family:var(--display); font-weight:600; font-size:clamp(22px,1.9vw,28px); letter-spacing:-.015em; margin:0 0 18px}
.ar-end-acts{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px}
@media (max-width:600px){ .ar-fig{border-radius:16px} .ar-body table{min-width:460px} }
/* Partnership authorization pages: the plan's signing form, full width and tall enough to use without a nested scroll */
.auth-head{max-width:62ch; margin-bottom:clamp(24px,3vw,36px)} .auth-sec .auth-head h2{margin:10px 0 14px; font-size:clamp(30px,3.4vw,52px); line-height:1.05; max-width:16ch}
.auth-head{max-width:min(62ch,100%)} .auth-head p.lede{margin:0 0 .8em; max-width:none; color:var(--muted); font-size:clamp(16px,1.15vw,18px); line-height:1.6}
/* the signing form comes from RightSignature and is always white, so it sits in a deliberate light card with its own note, in both themes */
.auth-frame{position:relative; border:1px solid var(--rule); border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.auth-frame::before{content:"Loading the secure authorization form\2026"; position:absolute; left:0; right:0; top:120px; text-align:center; font-size:15px; color:#6b675f}
.auth-frame iframe{position:relative; display:block; width:100%; height:clamp(640px,100vh,900px); border:0; background:transparent}
[data-mode="dark"] .auth-frame{border-color:rgba(255,255,255,.14); box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.auth-note{margin:14px 0 0; font-size:14px; color:var(--muted)}
.ar-body .ar-rev{color:var(--muted); font-size:15px; margin-bottom:1.8em}
/* Nov 8 audit: on photo heroes the small lines under the buttons can sit over the photo (Software Support). A soft halo in the
page color keeps them readable there and is invisible over the plain background; dark mode also lifts the color */
.sp-hero.phx-on .hero-support,.sp-hero.phx-on .hero-note{position:relative; z-index:2; text-shadow:0 0 14px var(--canvas),0 0 6px var(--canvas),0 0 2px var(--canvas)}
[data-mode="dark"] .sp-hero.phx-on .hero-support,[data-mode="dark"] .sp-hero.phx-on .hero-note{color:color-mix(in srgb,var(--fg) 82%,transparent)}
/* Nov 8 audit: tables in posts and legal pages show a soft shadow on the side that has more to scroll, and Safari's default
FAQ triangle gives way to the site's own plus and minus */
.ar-table{background:linear-gradient(to right,var(--sheet) 30%,rgba(255,255,255,0)) left center/40px 100% no-repeat local,linear-gradient(to left,var(--sheet) 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.16),transparent) left center/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.16),transparent) right center/14px 100% no-repeat scroll}
.ar-body summary{list-style:none; position:relative; padding-right:34px}
.ar-body summary::-webkit-details-marker{display:none}
.ar-body summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--sheet-2); font-weight:500; color:var(--accent)}
.ar-body details[open]>summary::after{content:"\2212"}
/* Nov 8 audit: the published result card sits at its own height beside the plan (it stretched into a tall empty box), and stays
visible while the plan scrolls past on desktop */
@media (min-width:1101px){ .pw:has(.pw-fig){align-items:start} .pw-fig{position:sticky; top:clamp(96px,14vh,140px)} }
/* dark mode: the phone panel behind the Mobile Apps hero phone read as a flat grey box over the photo */
[data-mode="dark"] body[data-page="mobile_apps"] .mah{background:rgba(11,11,10,.32); border-color:rgba(245,243,238,.1)}
/* dark mode: the bright top of the AI Search photo band */
[data-mode="dark"] body[data-page="ai_search"] .phb img{filter:brightness(.8)}
/* Nov 8 audit: when a text link wraps onto two lines its arrow drifted to the far right of the box; now the arrow follows the
last word (inner pages; the homepage keeps its own links) */
body.sp .tlink{display:inline-block}
body.sp .tlink svg{display:inline-block; vertical-align:-3px; margin-left:8px}
@media (max-width:860px){ body.sp .tlink{min-height:0; padding-block:11px} }
body.sp .tl-end{white-space:nowrap}
/* links inside a sentence keep the sentence's line height (the tap padding is for standalone links) */
@media (max-width:860px){ body.sp :is(p,li) .tlink{padding-block:0} }
/* Nov 8 round 3 (dark review): Software Support's lines under the buttons sit over the mid-tone photo. On desktop they share one soft
backing card, so they read clearly in both themes */
@media (min-width:1101px){
body[data-page="support"] .sp-hero :is(.hero-support,.hero-note){background:rgba(250,249,245,.9); text-shadow:none; box-sizing:border-box; width:min(100%,400px); max-width:none}
body[data-page="support"] .sp-hero .hero-support{margin-bottom:0; padding:12px 16px 8px; border-radius:14px 14px 0 0}
body[data-page="support"] .sp-hero .hero-note{margin-top:0; padding:8px 16px 12px; border-radius:0 0 14px 14px}
[data-mode="dark"] body[data-page="support"] .sp-hero :is(.hero-support,.hero-note){background:rgba(17,17,16,.84)}
[data-mode="dark"] body[data-page="support"] .sp-hero :is(.hero-support,.hero-note),[data-mode="dark"] body[data-page="support"] .sp-hero :is(.hero-support,.hero-note) *{color:#E9E6DF}
}
/* Mobile Apps, dark mode: no panel behind the phone; the phone sits straight on the photo */
[data-mode="dark"] body[data-page="mobile_apps"] .mah{background:none; border-color:transparent}
/* Agency Pricing, dark mode: the "not included" circles a step brighter */
[data-mode="dark"] body[data-page="agency_pricing"] .ap-table .ap-no{color:#B8B4AC}