:root[data-theme="light"]{color-scheme:light;
--bg:#f5f6f6;--bg-deep:#eceef0;--bg2:#ffffff;--surface:#ffffff;--surface2:#eef0f2;--border:#e1e4e8;--border2:#cdd1d7;--hover:#b6bbc3;
--text:#0a0c10;--muted:#5f6063;--muted2:#3f4042;
--blue:#08699a;--blue-light:#08699a;--blue-deep:#08699a;--blue-glow:rgba(8,105,154,.14);
--purple:#5E2BFF;--purple-glow:rgba(94,43,255,.12);
--orange:#08699a;--orange-glow:rgba(8,105,154,.14);--yellow:#08699a;--yellow-glow:rgba(8,105,154,.14);
--green:#4d7a00;--green-glow:rgba(77,122,0,.14);
--shadow-ring:0 0 0 1px rgba(10,12,16,.05);
--shadow-sm:0 0 0 1px rgba(10,12,16,.05),0 2px 6px rgba(10,12,16,.05);
--shadow-md:0 0 0 1px rgba(10,12,16,.05),0 6px 16px rgba(10,12,16,.07);
--shadow-lg:0 0 0 1px rgba(10,12,16,.05),0 12px 32px rgba(10,12,16,.09);
--shadow-xl:0 0 0 1px rgba(10,12,16,.05),0 24px 56px rgba(10,12,16,.12)}
:root[data-theme="light"] body{background:var(--bg);color:var(--text)}
/* footer follows the theme */
:root[data-theme="light"] .pfoot{background:#f5f6f6;color:#0a0c10}
:root[data-theme="light"] .pfoot .pfoot-word{background-color:#0a0c10}
:root[data-theme="light"] .pfoot a{color:inherit}
/* theme toggle */
.pfoot-theme{display:inline-flex;padding:2px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(1,3,9,.6);backdrop-filter:blur(6px);font:500 10px/1 'neue-haas-grotesk-text-1',var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase}
.pfoot-theme button{all:unset;cursor:pointer;padding:5px 10px;border-radius:999px;color:#f5f6f6;opacity:.7;transition:opacity .2s,background .2s}
.pfoot-theme button:hover{opacity:1}
.pfoot-theme button:focus-visible{outline:2px solid #6ccff6;outline-offset:2px}
.pfoot-theme button[aria-pressed="true"]{background:#f5f6f6;color:#010309;opacity:1}
:root[data-theme="light"] .pfoot-theme{border-color:rgba(10,12,16,.18);background:rgba(255,255,255,.7)}
:root[data-theme="light"] .pfoot-theme button{color:#0a0c10}
:root[data-theme="light"] .pfoot-theme button[aria-pressed="true"]{background:#0a0c10;color:#f5f6f6}
:root[data-theme="light"] .topnav{background:rgba(245,246,246,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
:root[data-theme="light"] .topnav .nav-link:not(.cta):not(.cta-accent){color:#0a0c10;border-color:rgba(10,12,16,.22)}
/* Footer mountains: the same photo, inverted into a pale misty ridge behind the wordmark */
:root[data-theme="light"] .pfoot-sky{filter:invert(1) hue-rotate(180deg) grayscale(.3) contrast(.85);mix-blend-mode:multiply}
:root[data-theme="light"] .pfoot.pf-in .pfoot-sky{opacity:calc(.5*var(--pf-sky,1))}
:root[data-theme="light"] .pfoot-grain{display:none}
:root[data-theme="light"] .pfoot a,:root[data-theme="light"] .pfoot p,:root[data-theme="light"] .pfoot span{color:inherit}
/* Hero (light): the audit Mac standing in snow (Gemini), with a live screen (see .hero-mac below). Also saved: hero-mac-snow.webp, hero-mac-studio.webp, hero-snow-b.webp, hero-footprints.webp, Dark mode keeps the cone.
   hero-crystal.webp, hero-footprints-route.webp, hero-snow-a.webp, hero-snow-b-dither.png, hero-cone-dither-fs.png / -bayer.png */
:root[data-theme="light"] .hero-bg .hb-wrap{display:none}
/* Mountain option: :root[data-theme="light"] .hero-bg{background:url('/assets/hero-snow-b.webp') center 30%/cover no-repeat} */
/* Crystal option: swap the line above for these two
:root[data-theme="light"] .hero-bg{background:url('/assets/hero-crystal.webp') left 200px top/auto 100% no-repeat}
@media(max-width:900px){:root[data-theme="light"] .hero-bg{background-position:center top;background-size:cover}} */
:root[data-theme="light"] .hero-bg::after{background:linear-gradient(180deg,transparent 55%,#f5f6f6 96%),linear-gradient(90deg,rgba(245,246,246,.94) 0%,rgba(245,246,246,.86) 40%,rgba(245,246,246,.55) 64%,transparent 88%)}
/* Saved trials, not in use: assets/hero-cone-dither-fs.png and hero-cone-dither-bayer.png (dithered cone) */
:root[data-theme="light"] .hero h1,:root[data-theme="light"] .hero-type{color:var(--text)}
:root[data-theme="light"] .hero h1 .dim,:root[data-theme="light"] .hero h1 .h1-tail{color:var(--muted)}
:root[data-theme="light"] .btn-primary{background:#0a0c10;color:#fff}
:root[data-theme="light"] .btn-primary:hover{background:#252a33;box-shadow:0 8px 24px rgba(10,12,16,.18)}
:root[data-theme="light"] .btn-ghost{background:#fff;color:#0a0c10;border-color:var(--border2)}
:root[data-theme="light"] .hero-badge{background:rgba(255,255,255,.8)}
:root[data-theme="light"] .hero-alt{text-decoration-color:rgba(10,12,16,.3)}
:root[data-theme="light"] .hero-proof{border-top-color:var(--border2)}
:root[data-theme="light"] .hero-proof span,:root[data-theme="light"] .trust-label{color:var(--muted2)}
:root[data-theme="light"] .trust{background:#fff}
/* White logo files (ours and clients') flip to black */
:root[data-theme="light"] img[src*="mainlogo"],:root[data-theme="light"] img[src*="p-striped"],:root[data-theme="light"] img[src*="/assets/logos/"]{filter:invert(1)}
/* client logos sit back as a mid grey (about 4.8:1 on the page) rather than solid black */
:root[data-theme="light"] img[src*="/assets/logos/"]{filter:invert(1) opacity(.56)}
/* Footer pixel strip: the dark squares flip to light, the blues stay blue */
:root[data-theme="light"] .pfoot-strip{filter:invert(1) hue-rotate(180deg)}
/* Case studies hero: the same cone drawn as ::before, inverted to a dark beam on white */
:root[data-theme="light"] .hero-bg::before{filter:invert(1) hue-rotate(180deg) saturate(1.1);opacity:.42}
:root[data-theme="light"] .hero-bg:not(:has(.hb-wrap))::after{background:linear-gradient(180deg,rgba(245,246,246,.2) 0%,transparent 28%,transparent 50%,#f5f6f6 90%)}
/* Image tiles keep their dark look, so their text and chips stay light */
:root[data-theme="light"] .work-tile{--text:#f5f6f6;--muted:#8f9299;--muted2:#b4b6bb;color:#f5f6f6}
:root[data-theme="light"] .work-tile-mark,:root[data-theme="light"] .project-mark{color:#f5f6f6}
/* Talk to the team: neutral icon discs in light mode, no blue glow */
:root[data-theme="light"] .cd-btn .cd-icon{background:var(--surface2);color:var(--text);box-shadow:none}
:root[data-theme="light"] .cd-btn:hover{box-shadow:0 6px 20px rgba(10,12,16,.08);border-color:var(--hover)}
/* MCP hero checker: flipped like the footer strip, so the dark cells go pale and the lit cells read as a deeper blue */
:root[data-theme="light"] .hero-blocks,:root[data-theme="light"] .soon-blocks{filter:invert(1) hue-rotate(180deg)}
:root[data-theme="light"] .hero-type{color:var(--muted)!important}

/* Light hero Mac. Two layers share one frame: the image sits in .hero-bg under the copy, and .hm-live sits above the copy
   holding only the screen, which is a link to the swipe file. Geometry comes from the 2752x1536 source (glass at
   x1760-2200, y478-826) scaled to the 780px hero. Colourways with identical geometry: hero-mac-plain / -beige / -black / -blue.webp */
.hm-frame{display:none}
/* Computer on the 12-column grid: 84% scale, its right edge on the content edge (col 12), spanning cols 9-12,
   top lip level with the eyebrow line, base level with the proof numbers. Content column = 1032px centred, so its right edge is 50% + 516px.
   In the 1397x780 frame the computer itself sits at x 797..1178, y 163..693; x0.84 -> 669.5 / 320 wide; frame left = 50% + 516 - 1178*.84. */
@media(min-width:1180px){:root[data-theme="light"] .hm-frame{display:block;position:absolute;top:37px;left:calc(50% - 473.5px);width:1397px;height:780px;transform:scale(.84);transform-origin:0 0;backface-visibility:hidden}}

:root[data-theme="light"] .hero-mac{z-index:1;background:url('/assets/hero-mac.webp') 756.71px 139.70px/461.01px 612.35px no-repeat; /* the computer cropped out of the 2400x1340 frame image (x1300 y240), same placement */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 300px);mask-image:linear-gradient(90deg,transparent 0,#000 300px)}
:root[data-theme="light"] .hm-live{z-index:2;pointer-events:none}
.hm-screen{pointer-events:auto;position:absolute;left:894px;top:243px;width:223px;height:177px;border-radius:14px/18px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;
  animation:hmOn 5s steps(1) both}
.hm-screen::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(20,60,90,.08) 0 1px,transparent 1px 3px);pointer-events:none;z-index:2}
.hm-screen:focus-visible{outline:2px solid #08699a;outline-offset:4px}
/* 1. the striped P draws in band by band (the real logo as a mask), 2. a loading bar fills, 3. both clear for the work */
.hm-p{position:relative;width:64px;height:64px;display:flex;flex-direction:column;
  -webkit-mask:url(/assets/logo.svg) center/contain no-repeat;mask:url(/assets/logo.svg) center/contain no-repeat;
  filter:drop-shadow(0 0 3px rgba(108,207,246,.7));animation:hmOut .3s linear 2.9s both}
.hm-p i{flex:1;background:#1f4258;transform-origin:left center;transform:scaleX(0);margin-bottom:1px;
  animation:hmBand .4s steps(6,end) both;animation-delay:calc(.5s + var(--i)*.11s)}
.hm-p i:last-child{margin-bottom:0}
.hm-bar{display:block;position:relative;width:84px;height:6px;border:1px solid rgba(31,66,88,.6);padding:1px;box-sizing:border-box;animation:hmOut .3s linear 2.9s both}
.hm-bar i{display:block;height:100%;background:#1f4258;transform-origin:left center;transform:scaleX(0);animation:hmBand 1.6s steps(14,end) .7s both}
/* 4. a 3x3 wall of things we've made, dropping in one by one, then it stays */
.hm-tiles{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px}
.hm-tiles i{background:url('/assets/hero-mac-tiles.webp') calc(var(--x)*50%) calc(var(--y)*50%)/300% 300% no-repeat;border-radius:2px;opacity:0;
  filter:saturate(.9) contrast(1.05);animation:hmTile .36s steps(4) both;animation-delay:calc(3.2s + var(--i)*.09s);transition:filter .2s}
.hm-screen:hover .hm-tiles i{filter:saturate(1.05) contrast(1.08) brightness(1.04)}
@keyframes hmBand{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hmOut{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes hmTile{0%{opacity:0;transform:scale(.6)}50%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hmOn{0%{opacity:.35}6%{opacity:1}9%{opacity:.6}12%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.hm-screen,.hm-p,.hm-bar,.hm-p i,.hm-bar i,.hm-tiles i{animation:none}.hm-p,.hm-bar{display:none}.hm-tiles i{opacity:1}}

/* Retro computer (hero-retro-single.webp, glass at x1660-2220, y440-890 of the 2752x1536 source): a dark phosphor screen.
   To go back to the clean Mac, point .hero-mac at hero-mac-beige.webp and delete this block. */
:root[data-theme="light"] .hm-screen{left:832px;top:219px;width:296px;height:235px;border-radius:20px/24px;background:#0f1f1c;box-shadow:inset 0 0 24px rgba(0,0,0,.6)}
:root[data-theme="light"] .hm-screen::after{background:repeating-linear-gradient(180deg,rgba(214,246,232,.05) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.35) 100%)}
.hm-sphere{position:absolute;inset:0;width:100%;height:100%;animation:hmOut .3s linear 2s both}
:root[data-theme="light"] .hm-p{filter:drop-shadow(0 0 5px rgba(108,207,246,.75));opacity:0;animation:hmIn .25s linear 2.15s forwards,hmOut .25s linear 3.9s forwards}
:root[data-theme="light"] .hm-p i,:root[data-theme="light"] .hm-bar i{background:#6ccff6}
:root[data-theme="light"] .hm-p i{animation-delay:calc(2.2s + var(--i)*.07s)}
:root[data-theme="light"] .hm-bar{border-color:rgba(108,207,246,.55);opacity:0;animation:hmIn .25s linear 2.15s forwards,hmOut .25s linear 3.9s forwards}
:root[data-theme="light"] .hm-bar i{animation-delay:2.4s;animation-duration:1.2s}
:root[data-theme="light"] .hm-tiles{inset:12px}
:root[data-theme="light"] .hm-tiles i{animation-duration:.24s;animation-delay:calc(4.05s + var(--i)*.035s);filter:saturate(.85) contrast(1.05) sepia(.08)}
@keyframes hmIn{from{opacity:0}to{opacity:1}}

/* Provel Labs: 'Labs' beside the logo, and no theme toggle (Labs is always dark) */
html[data-labs] .nav-logo a{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
html[data-labs] .nav-logo a::after{content:'Labs';font:500 15px/1 'neue-haas-grotesk-text-1',var(--sans,sans-serif);color:#a9adb5;letter-spacing:normal}
html[data-labs] .pfoot-theme{display:none}
:root[data-theme="light"] .nav-labs-btn{color:#0a0c10}
:root[data-theme="light"] .hero h1 .h1-tail,:root[data-theme="light"] .hero h1 .dim{color:#4d525a}
/* Screen is now one looping canvas (see the script at the end of index.html); not a link */
.hm-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
:root[data-theme="light"] .hm-screen{pointer-events:none;cursor:default;animation:none}
/* The live screen layer sits above the hero copy; this box clips it so the page never scrolls sideways */
.hm-clip{position:absolute;left:0;right:0;top:0;height:780px;overflow:hidden;pointer-events:none;z-index:2}
:root[data-theme="light"] .hero-sub{color:#2a2d33}

/* No widows anywhere: browsers that support it rebalance the last lines of paragraphs and headings */
p,li,figcaption,blockquote,.lede,.hero-sub{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}

/* Type: Neue Haas Grotesk from the Provel Adobe Fonts kit (nqt6rtn: Display 600/700, Text 400/500; domains provel.co,
   www.provel.co, *.vercel.app, localhost), linked in every page head.
   Display 600 for headings and big numbers, Text 400/500 for everything else, including the small labels that used to be mono.
   Neue Haas is already tightly spaced, so headings use its natural spacing (no negative tracking). Geist has been removed site-wide. */
:root{--sans:"neue-haas-grotesk-text-1","neue-haas-grotesk-text","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;--display:"neue-haas-grotesk-display-1","neue-haas-grotesk-display","Helvetica Neue",Helvetica,Arial,sans-serif}
body,.pfoot,button,input,textarea,select{font-family:var(--sans)}
/* Display cut only at 20px and up (headlines, big numbers, quotes); smaller headings use the Text cut, which is drawn for small sizes */
h1,h2,.price-amount,.hero-proof b,.work-tile-title,.quote-text,.work-marquee-title,.cs-hero h1{font-family:var(--display)!important;font-weight:600!important;letter-spacing:normal!important}
h3,h4,.price-title,.kit-title,.wf-cap b,.cap-group-title,.project-title,.faq-q,.test-name,.work-tile .work-tile-title{font-family:var(--sans)!important;font-weight:500!important;letter-spacing:normal!important}
h1 *,h2 *{font-family:inherit!important;letter-spacing:normal!important;font-weight:inherit!important}

/* CRT bezel, modelled on the portfolio's vector Mac: a thick near-black rounded surround with a soft inner shadow,
   and the picture tube inset inside it with its own smaller radius. The canvas and scanlines sit in the tube. */
/* Curved CRT bezel traced from the photo's glass: the tube (canvas + scanlines) sits under a bezel image with a pillow-shaped opening */
:root[data-theme="light"] .hm-screen{background:url('/assets/crt-tube-dark.png') 22px 14px/261px 204px no-repeat;box-shadow:none;border-radius:0;overflow:visible}
:root[data-theme="light"] .hm-screen::before{content:'';position:absolute;inset:-10px;background:url('/assets/crt-bezel.webp') 0 0/100% 100% no-repeat;z-index:3;pointer-events:none}
:root[data-theme="light"] .hm-cv,:root[data-theme="light"] .hm-screen::after{inset:auto;top:14px;left:22px;width:261px;height:204px;border-radius:0;-webkit-mask:url('/assets/crt-tube-mask.png') 0 0/100% 100% no-repeat;mask:url('/assets/crt-tube-mask.png') 0 0/100% 100% no-repeat}
:root[data-theme="light"] .hm-cv{background:none;box-shadow:none;z-index:1;filter:drop-shadow(-.4px 0 0 rgba(255,70,110,.28)) drop-shadow(.4px 0 0 rgba(70,120,255,.32)) drop-shadow(0 0 1.6px rgba(108,207,246,.55))} /* slight chromatic aberration (red left, blue right) + phosphor glow */
:root[data-theme="light"] .hm-screen::after{z-index:2;box-shadow:none;background:repeating-linear-gradient(180deg,rgba(214,246,232,.05) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.45) 100%)}

/* Type audit (Neue Haas): footer column labels use the Text cut like every other small label, not Display */
.pfoot-col h3{font-family:var(--sans)!important;font-weight:500!important;font-size:11px!important;letter-spacing:.06em!important}
/* Home quote: its own block — a white panel on the grey page, no dashed rules or corner marks */
:root[data-theme="light"] .quote-block{background:#fff;border:0;border-radius:20px;padding:56px 56px 52px}
:root[data-theme="light"] .quote-block .qx{display:none}
@media(max-width:900px){:root[data-theme="light"] .quote-block{padding:36px 28px}}
@media(max-width:640px){:root[data-theme="light"] .quote-block{padding:28px 20px;border-radius:16px}}

/* Footer: a wireframe planet (the hero screen's globe) rising behind the wordmark, instead of the snow photo */
.pfoot .pfoot-globe{filter:none!important;mix-blend-mode:normal!important}
:root[data-theme="light"] .pfoot.pf-in .pfoot-globe{opacity:calc(.9*var(--pf-sky,1))}

/* Hero headline: Neue Haas Display at 72px keeps its own pair kerning (font-kerning on); word spaces trimmed a touch, as display sizes need */
.hero h1{font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility;word-spacing:-.02em}

/* Stack chips: IBM Plex Mono, the code face, so the tools read as tools */
.stack-mini li{font-family:"ibm-plex-mono-1","ibm-plex-mono",ui-monospace,Menlo,monospace!important;font-size:12px!important;letter-spacing:0!important}
/* CTAs: tighter corners (pills stay pills) */
.btn-primary,.btn-ghost,.btn-blue,.btn-secondary,.cta-btn,.fa-free,.fa-buy,.fa-mcp-link,.stickycta .btn-primary,.spec-card .btn-primary,.price-cta,.tier-cta,button[type=submit]:not(.chip){border-radius:5px!important}

/* keep the computer photo crisp when the browser scales it down */
:root[data-theme="light"] .hero-mac{image-rendering:-webkit-optimize-contrast}
/* Quote marks: give the glyphs room so the gradient (background-clip:text) never clips the opening mark's top */
.quote-block .quote-mark{height:auto!important;line-height:1!important;padding-top:.08em;margin-bottom:-22px!important}
.quote-block .quote-mark-end{margin-top:-6px!important;margin-bottom:-48px!important}
/* Headline tail: the ink colour at lower strength, not a separate cool grey */
:root[data-theme="light"] .hero h1 .h1-tail{color:var(--muted)!important} /* one solid secondary grey, same as all secondary text */
/* Black CTAs: border the same colour as the fill and no drop shadow, so they match the outlined buttons' size exactly */
:root[data-theme="light"] .btn-primary{border:1px solid #0a0c10!important;box-shadow:none!important}
:root[data-theme="light"] .btn-primary{background-color:#0a0c10}
.stack-mini-icon{display:block;margin:0 auto 10px;width:24px;height:24px;color:var(--text)}

/* ===== Design slop pass (Design files/CLAUDE.md §0) =====
   No section numbering, no decorative tags, no italics, no dividers between rows,
   no outlined containers (solid fills and space instead), no diagrams, no code breadcrumbs. */

/* Section numbering */
.kit-num,.faq-num,.lt-count,.step-num-n{display:none!important}

/* Decorative tags and badges */
.hero-badge:not(.swipe-file-link),.mcp-badge,.soon-badge,.feature-badge,.feature-team,.retainer-tag,.work-tile-mark,.work-tile-tag,.deliv-format,.problem-tag,.ai-stage-label,.das-badge,.ask-badge{display:none!important}
.tier.featured::before,.price-card.feature::before{content:none!important;display:none!important}

/* Italics */
em,i:not([class]),cite,blockquote{font-style:normal!important}

/* Dividers between rows and sections */
.faq,.faq-list,details.faq,.kit-grid,.kit,.caps-grid,.cap,.fa-list,.fa-grid,.fa-cell,.price-feats,.price-note,.retainer-cta,
.test-grid,.test-foot,.testimonial,.challenges-grid,.challenge-row,.challenge-stat,.challenge,.tier-note,.tier-feats,
.apps,details.app,.fix-acc,.steps,.stp,.lvl-del,.chk-cat,.exp,.tools-grid,.tl,.chat-head,
.hero-stats,.feature-meta,.profile-head,.hero-about,.parts,.part,section.trust,section.work-marquee,.section.process{border-top:0!important;border-bottom:0!important;border-left:0!important;border-right:0!important}
.faq-toggle{border:0!important;background:none!important}
.kit-grid,.caps-grid,.fa-grid,.chk-grid,.tools-grid{gap:20px!important}
.kit-grid::before,.kit-grid::after,.kit .qx,.qx{display:none!important}

/* Outlined containers -> solid fills (white on the grey page) */
:root[data-theme="light"] :is(.price-card,.retainer-card,.problem,.deliv-card,.rec,.phase,.tier,.final,.profile,.comm-item,.spec-card,.apply-section,.feature,.feature-hl,.bottom-cta,.sf-filters,.cs-figure,.msg-bubble,.kit,.cap,.fa-tier,.fa-cell){border-color:transparent!important;box-shadow:none!important;background-color:#fff!important}
:root[data-theme="dark"] :is(.fa-tier,.fa-expert,.lvl,.aud,.install-col,.code,.chat,.chk-grid,.exp-grid,summary,.fa-mcp,.audit-form,.cap-icon,.app-logo,.cap,.fa-cell,.tl,.chk-cat){border-color:transparent!important;box-shadow:none!important}
:root[data-theme="dark"] :is(.fa-tier,.fa-expert,.lvl,.aud,.install-col,.chat,.fa-mcp,.audit-form){background-color:#111318!important}
.test-avatar,.rec-icon,.cap-icon,.avatar{border:0!important}
.stack-mini li{border-color:transparent!important;background:#e9eaeb!important}
:root[data-theme="dark"] .stack-mini li{background:#16181d!important}

/* Quote marks: one style everywhere (testimonials and the quote block) — Display 600, solid ink, no gradient overlay */
.quote-block .quote-mark,.test-quote::before,.test-quote::after{font-family:var(--display)!important;font-weight:600!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--text)!important}
.quote-block .quote-mark{font-size:72px!important}
.feature-mark{display:none!important}
.std-chip{border:0!important;background:none!important;padding-left:0!important;padding-right:0!important}
:root[data-theme="light"] :is(.recs,.stickycta){border-color:transparent!important}
:root[data-theme="dark"] :is(.lvl,.aud,.install-col,.chk-grid,.exp-grid,.chat,.code,summary,.app-logo){border-color:transparent!important}
:root[data-theme="dark"] :is(details,ul,.chk-cat,.lvl-del,.stp,.tl){border-top-color:transparent!important;border-bottom-color:transparent!important;border-left-color:transparent!important}
/* Secondary text: two solid neutral greys site-wide — --muted2 for body/intro copy, --muted for supporting text and headline tails */
:root[data-theme="light"] .hero-sub,:root[data-theme="light"] .lede{color:var(--muted2)!important}
:root[data-theme="light"] h1 .h1-tail,:root[data-theme="light"] h1 .muted,:root[data-theme="light"] h1 [style*="--muted"],:root[data-theme="light"] h2 .muted{color:var(--muted)!important}
:root[data-theme="light"] :is(h1,h2) .dim,:root[data-theme="light"] :is(h1,h2) .dim *{color:var(--muted)!important}
/* Secondary hero button: a clear dark outline so it reads as a real second option (audit fix) */
:root[data-theme="light"] .hero-ctas .btn-ghost{border:1px solid #0a0c10!important;background:transparent!important;color:#0a0c10!important}
/* Optical alignment: Neue Haas Display's P carries ~3.5px of left side bearing at 72px; pull the first line back so its ink lines up with the line above and the copy below */
.hero h1 > .hw:first-child{margin-left:-.048em}

/* Mobile fixes */
/* toolkit / capability cards are white fills now, so they need their own inner padding */
:root[data-theme="light"] :is(.kit,.cap,.fa-cell){padding:24px!important;border-radius:14px}
/* Labs nav: drop the "Labs" word next to the logo on phones so the CTA never overlaps it */
@media(max-width:560px){html[data-labs] .nav-logo a::after{display:none}}
/* text glyphs only, never emoji presentation */
.mk,.chat-tool,.chat-head i{font-variant-emoji:text}

/* Performance: idle cost */
.anim-off,.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
.hero-type:not(.is-thinking) .hero-type-dots i{animation-play-state:paused!important}
/* pulsing dots: animate opacity only (compositor), not box-shadow (repaints every frame) */
.cd-status-dot{animation:pvPulse 2.2s ease-in-out infinite!important;box-shadow:0 0 8px var(--blue)!important;will-change:opacity}
.hero-badge-dot,.status-dot,.price-avail-dot,[class*="avail"] i,.slot-dot{will-change:opacity}
@keyframes pvPulse{0%,100%{opacity:1}50%{opacity:.45}}
.price-avail::before,.price-card.feature .price-avail::before{animation:pvPulse 1.8s ease-in-out infinite!important}
.pfoot-globe{-webkit-mask-image:linear-gradient(to bottom,transparent 8%,#000 52%);mask-image:linear-gradient(to bottom,transparent 8%,#000 52%)} /* long, even fade so the top of the planet dissolves instead of leaving one bright ring near the pole */
/* Work tiles fade in without a blur (blurring big image tiles while the strip moves made the first pass stutter) */
.js-wm .work-tile{filter:none!important;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)!important}
.work-track{will-change:transform}

/* ── 10 Nov: readability, weights and small screens ─────────────────────────────────────────── */
/* Small labels up from 11px (card copy stays 13px). */
.retainer-feat{font-size:13px!important}
.trust-label{font-size:14px!important}
.eyebrow,.price-meta,.price-amount span,.price-amount-alt,.price-avail,.retainer-tag,.test-role,.quote-side-label,.stack-mini-label,.pfoot-meta,.work-marquee-cta{font-size:12px!important}
/* Only weights the font kit really has (Text 400/500/700, Display 600/700), so the browser never substitutes one. */
.btn-primary,.btn-blue,.cta-btn,.fa-buy,.cd-btn,.skip-link{font-weight:500!important}
.work-marquee-title .dim,.quote-text em{font-weight:600!important}
@media(max-width:760px){
  .cd-long{display:none}                         /* "Talk" only, so the floating button stops covering body copy */
  .cd-status{min-height:44px;padding:0 14px!important}
  .btn-primary,.btn-ghost{min-height:44px}
}
/* The computer below 1180px. In the 1397x780 frame the computer sits at x 797..1178, y 163..693 (381 x 530).
   960-1179px: on the right edge of the content, beside the headline. Below 960px: above the headline, on the left gutter. */
@media(max-width:1179px){
  :root[data-theme="light"] .hm-frame{display:block;position:absolute;width:1397px;height:780px;transform:scale(var(--s));transform-origin:0 0;backface-visibility:hidden;
    --s:.6;left:calc(min(100% - 24px,50% + 516px) - 1178px*var(--s));top:calc(150px - 163px*var(--s))}
}
@media(max-width:959px){
  :root[data-theme="light"] .hm-frame{--s:.5;left:calc(24px - 797px*var(--s));top:calc(88px - 163px*var(--s))}
  html .hero{padding-top:calc(88px + 530px*.5 + 32px)!important}
}
@media(max-width:560px){
  :root[data-theme="light"] .hm-frame{--s:.42}
  html .hero{padding-top:calc(88px + 530px*.42 + 28px)!important}
}
/* The larger copy must not leave a single word on a last line. */
.price-feat,.retainer-feat,.kit-title{text-wrap:balance}
.kit-desc,.price-desc,.price-note{text-wrap:pretty}