/* ==========================================================================
   DAIG v2 design system  (Oct 1, 2026 redesign, branch redesign-2026-10-01)
   One stylesheet, one script (v2.js). Pages link both and keep only truly
   page-specific CSS inline.  No third-party requests, no build step.

   HOW TO BUILD WITH IT  (paste-ready patterns; class names are the contract)
   --------------------------------------------------------------------------
   Head of every page:
     <link rel="preload" href="/v2/fonts/fraunces-latin-wght500-600.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="/v2/v2.css">
     ... at the end of body:  <script defer src="/v2/v2.js"></script>
   Body: header from partials/header.html (it holds the skip link), <main id="main">,
   footer from partials/footer.html.  One <h1> per page.  Scenes stack inside <main>.
   Mark the current page: add class="is-current" aria-current="page" to its nav link.

   A DARK SCENE (navy to teal fade, two glows, noise):
     <section class="scene scene--dark" style="--glow-x:75%;--glow-y:40%">
       <div class="wrap"> <p class="eyebrow">Label</p> <h2>Heading</h2> ... </div>
     </section>
     --glow-x / --glow-y put the teal glow behind the main object (the mint glow follows it);
     --glow-size changes its width (700px).  The band at the top of an inner page is
     class="scene scene--dark scene--band" (40px top padding instead of 56) with an <h1>
     and <p class="lede">.  Keep the footer element's background a plain colour: the chat widget copies it.

   A PAPER OR SAND SCENE:  class="scene scene--paper"  or  "scene scene--sand".
     Alternate them and never put two of the same colour side by side.  Spacing is built in:
     first element 56px from the top, 96px below (64 on phones).  Do not add margins to the
     first or last child.  Head block: <div class="sec-head"> <p class="eyebrow">, <h2>, optional
     <p class="lede"> </div>  (label 24 / heading-to-text 28 / text-to-content 40, or 48 with a lede).
     Paragraph to paragraph is 18 automatically.  .mt-row = 40, .mt-grid = 48 for what follows.
     Long headings: glue the last two words with &nbsp; so no word is left alone.

   A BROWSER FRAME (picture in a window):
     <figure class="bframe"> <div class="bframe-bar" aria-hidden="true"><i></i><i></i><i></i></div>
       <div class="bframe-shot"><img src="..." alt="what the picture shows" width="1440" height="900" loading="lazy"></div> </figure>
     .bframe--dark on dark scenes.  Fictional samples get <span class="bframe-tag">Sample style</span>
     inside the bar.  A PHONE FRAME: <figure class="pframe"><span class="pframe-notch"></span><img ...></figure>.
     A mosaic of three pictures: <div class="bframe-shot mosaic"> three <div><img></div> </div>.
     HOVER SCROLL for a full-page capture: .bframe--scroll on the frame and class="shot-slide" on the
     image (it is taller than the window).  Hovering or focusing the frame, or its .pcard, slides it
     up over 6s; a tap does it once on touch; reduced motion keeps it still.  Cap the travel with
     style="--slide-max:420px".  Optional hint inside .bframe-shot:
     <span class="shot-hint" aria-hidden="true"><span class="hint-hover">Hover to scroll</span><span class="hint-touch">Tap to scroll</span></span>

   A PROJECT CARD (frame + name + status pill + line + text link):
     <article class="pcard"> <figure class="bframe bframe--scroll">...</figure>
       <div class="pcard-head"><h3>Name</h3><span class="status status--live">Live</span></div>
       <p>One line.</p> <a class="link-arrow" href="/before-after/">See the before &amp; after <span class="arr" aria-hidden="true">&rarr;</span></a> </article>
     Status pills: .status--live  .status--sample  .status--count.  Cards go in <div class="grid grid-3" data-reveal-stagger>.

   A STICKY SUB-NAV (long pages), right after the dark band:
     <nav class="subnav" aria-label="On this page"><div class="subnav-in wrap">
       <a class="chip" href="#launched">Launched</a> <a class="chip" href="#styles">Styles</a> </div></nav>
     v2.js fills .is-active and aria-current on the chip of the section in view.  A second row of
     filter chips: <div class="subnav-in subnav-in--row2 wrap"> <button class="chip" type="button" aria-pressed="true">All</button> </div>.

   A REVEAL ON SCROLL:  data-reveal on any block (rises 16px and fades in over 500ms, once, when it
     enters the viewport).  data-reveal-stagger on a parent staggers its children 80ms apart.
   COUNT-UP:  <span class="count" data-count="100">100</span>  plays 0 to the number once, in view, in 600ms.
     The final number stays in the HTML, so no-JS and reduced motion just show it.
   PROGRESS LINE under the header:  <body data-progress>.

   Buttons .btn (green) and .btn.btn-ghost, in a <div class="btn-row">; header size .btn-sm.
   Pills .pill (16px icon + text, a.pill for links).  Stats .stats > .stat > .stat-num + .stat-label.
   Quote .quote (.quote-mark, blockquote, .stars, .quote-by).  Tiles .tiles > .tile (icon, h3, .tile-price, p).
   Steps ol.steps > li.step (.step-n, h3, p).  Layout helpers: .split / .split--rev, .grid-2/3/4/5, .card,
   .card--feature, .price, .check-list, .list-2col, .table-wrap > table.table, .faq > details.
   Inline links inside a sentence are underlined automatically; standalone links underline on hover.
   Ready-when-you-are band: paste partials/book-band.html as the last scene.  .nowrap, .sr-only.
   HERO STAGE (home): .stage[data-stage] holds .stage-desktop (browser frame, .stage-layer pieces placed
     by --x --y --w in 1440-wide page pixels and timed by --d), .stage-phone, .stage-chat, .stage-badge.
     An inline script adds .is-run; v2.js is the fallback.  Phones and reduced motion get the finished frame.
   ========================================================================== */

/* ---------- fonts (self-hosted, latin subset, OFL; see fonts/OFL.txt) ---------- */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-latin-wght500-600.woff2") format("woff2");
  font-weight:500 600;font-style:normal;font-display:swap;
  /* Everything but "&" (U+0026): Fraunces draws a swash ampersand that reads
     like a registered mark at a glance, so that one character falls through
     to the plain system serif. */
  unicode-range:U+0000-0025,U+0027-10FFFF;
}
/* Metric-matched stand-ins so the swap from Georgia to Fraunces barely moves the page. */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");font-weight:500;size-adjust:85.7%;unicode-range:U+0000-0025,U+0027-10FFFF}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia Bold"),local("Georgia-Bold");font-weight:600;size-adjust:75.3%;unicode-range:U+0000-0025,U+0027-10FFFF}

/* ---------- tokens ---------- */
:root{
  --navy:#12263A;--ink:#0F1B29;--paper:#F7F5F0;--sand:#EFEAE0;
  --green:#1F7A55;--green-dark:#186344;--teal:#15636A;--blue:#2193D6;--mint:#87E5B8;
  --muted:#5B6B7A;--muted-dark:#C9D2DC;
  --line:rgba(18,38,58,.12);--line-dark:rgba(255,255,255,.10);--glass:rgba(255,255,255,.06);
  --line-dark-strong:rgba(255,255,255,.22);
  --card:#fff;--gold:#E3A82B;                       /* gold is for review stars only */
  --serif:"Fraunces","Fraunces Fallback",ui-serif,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --w-content:1060px;--w-wide:1240px;--gutter:24px;--header-h:65px;
  --r-card:14px;--r-btn:10px;
  --ease:cubic-bezier(.22,.8,.26,1);
  --shadow-paper:0 20px 50px rgba(18,38,58,.18);
  --shadow-dark:0 30px 80px rgba(0,0,0,.35);
  --fade:linear-gradient(160deg,var(--navy) 0%,var(--navy) 40%,var(--teal) 100%);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--header-h);scroll-behavior:smooth}
html.menu-open,html.menu-open body{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:900px){body{font-size:18px}}
img,svg,picture{max-width:100%}
img{height:auto}
p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* links inside running text always carry an underline, so they never rely on colour alone (WCAG 1.4.1) */
p:not(.book-lines,.foot-contact)>a:not([class]),.small a,.consent a,.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
p:not(.book-lines,.foot-contact)>a:not([class]):hover,.small a:hover,.consent a:hover,.prose a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-optical-sizing:auto;color:var(--ink);text-wrap:balance}
h1,.display{font-family:var(--serif);color:inherit;font-size:clamp(40px,calc(26px + 3.6vw),72px);font-weight:500;line-height:1.05;letter-spacing:-.018em;text-wrap:balance}
h2{font-size:clamp(32px,calc(25px + 1.8vw),48px);font-weight:600;line-height:1.12;letter-spacing:-.012em}
h3{font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
@media (min-width:900px){h3{font-size:24px}}
p+p{margin-top:18px}
.lede{font-size:18px;line-height:1.55;color:var(--muted)}
@media (min-width:900px){.lede{font-size:20px}}
small,.small{font-size:14px;line-height:1.5}
b,strong{font-weight:700}
.eyebrow{margin:0 0 24px;font:700 12.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* containers */
.wrap{width:min(100% - 2*var(--gutter),var(--w-content));margin-inline:auto}
.wrap-wide{width:min(100% - 2*var(--gutter),var(--w-wide));margin-inline:auto}

/* focus: green ring on light surfaces, mint on dark ones, always visible */
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.scene--dark :focus-visible,.site-footer :focus-visible,.menu-open .site-nav :focus-visible{outline-color:var(--mint)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 22px;border-radius:0 0 10px 0;background:var(--navy);color:#fff;font-weight:600;text-decoration:none}
.skip-link:focus{left:0;outline-color:var(--mint)}

/* ---------- scenes ---------- */
.scene{position:relative;padding:56px 0 96px}
.scene--band{padding-top:40px}
@media (max-width:899px){.scene{padding-bottom:64px}}
.scene--paper{background:var(--paper)}
.scene--sand{background:var(--sand)}
.scene--sand .eyebrow{color:var(--green-dark)}
.scene--dark{
  --glow-x:72%;--glow-y:42%;--glow-size:700px;
  isolation:isolate;overflow:hidden;overflow:clip;color:var(--muted-dark);
  background-color:var(--navy);
  background-image:var(--noise),var(--fade);
}
.scene--dark::before,.scene--dark::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;aspect-ratio:1}
.scene--dark::before{width:var(--glow-size);left:var(--glow-x);top:var(--glow-y);translate:-50% -50%;background:radial-gradient(closest-side,rgba(21,99,106,.55),transparent)}
.scene--dark::after{width:calc(var(--glow-size)*.55);left:calc(var(--glow-x) + 7%);top:calc(var(--glow-y) - 9%);translate:-50% -50%;background:radial-gradient(closest-side,rgba(135,229,184,.10),transparent)}
.scene--dark h1,.scene--dark h2,.scene--dark h3,.scene--dark h4{color:#fff}
.scene--dark .eyebrow{color:var(--mint)}
.scene--dark .lede{color:var(--muted-dark)}
.scene--dark :where(p){color:var(--muted-dark)}
.scene--dark :where(a:not(.btn,.pill,.chip,.chat-cta)){color:var(--mint)}
@media (max-width:899px){.scene--dark{--fade:linear-gradient(160deg,var(--navy) 0%,var(--navy) 40%,#14545E 100%);--glow-size:520px}}

/* a head block: label, heading, optional lede; the gap to what follows is built in */
.sec-head{margin-bottom:40px}
.sec-head .lede{margin-top:28px;max-width:62ch}
.sec-head h2+p,.sec-head h1+p,.band h1+p,.band h1+.lede{margin-top:28px}
.sec-head.has-lede{margin-bottom:48px}
.mt-row{margin-top:40px}.mt-grid{margin-top:48px}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.scene--dark .rule{border-top-color:var(--line-dark)}

/* grids */
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media (max-width:899px){.grid-3,.grid-4{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h)}
/* the frosted bar lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed phone menu inside 65px */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(247,245,240,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-header-in{width:min(100% - 2*var(--gutter),var(--w-wide));height:100%;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--navy);text-decoration:none}
.brand:hover{text-decoration:none}
.brand picture{display:block;flex:none}
.brand-mark{display:block;width:44px;height:44px}
.brand-word{display:block;width:auto;height:34px;aspect-ratio:151/34}
/* 10/1 lockup mock (Jeff: Gemini's upright wordmark text plus our ribbon). The name is live
   text in an 11-letter subset of Plus Jakarta Sans ExtraBold and the descriptor is JetBrains Mono
   (capitals, digits and a few marks only), both OFL and self-hosted, per Gemini's type notes.
   brand--dark is the same lockup on navy, used in the footer. */
@font-face{font-family:"DAIG Wordmark";src:url("fonts/wordmark-plusjakarta-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1}
.brand-name{font-family:"DAIG Wordmark",var(--sans);font-weight:800;font-size:19px;letter-spacing:-.02em;word-spacing:.14em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.brand-ai{color:var(--green)}
.brand-tag{margin-top:5px;font-family:"DAIG Mono Full",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.brand--dark .brand-name{color:#fff}
.brand--dark .brand-ai{color:var(--mint)}
.brand--dark .brand-tag{color:var(--muted-dark)}
@media (max-width:360px){.brand-name{font-size:16.5px}.brand-tag{font-size:8.5px;letter-spacing:.18em}}
@media (max-width:420px){.brand-mark{width:38px;height:38px}.brand-word{height:29px}}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a:not(.btn){position:relative;padding:10px 14px;border-radius:8px;color:var(--navy);font:600 15.5px/1 var(--sans);text-decoration:none}
.site-nav a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.site-nav a:not(.btn):hover::after,.site-nav a.is-current::after{transform:scaleX(1)}
.site-nav .btn{margin-left:12px}
.nav-contact{display:none}
.nav-toggle{display:none;position:relative;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--navy);transition:transform .22s var(--ease),opacity .18s}
.nav-toggle::before{top:15px}.nav-toggle span{top:21px}.nav-toggle::after{top:27px}
.menu-open .nav-toggle::before{transform:translateY(6px) rotate(45deg)}
.menu-open .nav-toggle span{opacity:0}
.menu-open .nav-toggle::after{transform:translateY(-6px) rotate(-45deg)}
.v2-progress{position:absolute;left:0;right:0;top:100%;height:2px;display:none;pointer-events:none}
[data-progress] .v2-progress{display:block}
.v2-progress i{display:block;height:100%;background:var(--mint);transform:scaleX(var(--p,0));transform-origin:left}

@media (max-width:899px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;inset:var(--header-h) 0 0 0;z-index:55;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;overflow-y:auto;overscroll-behavior:contain;padding:12px var(--gutter) calc(28px + env(safe-area-inset-bottom));background-color:var(--navy);background-image:var(--noise),var(--fade);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .22s var(--ease),visibility 0s .22s}
  .menu-open .site-nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .site-nav a:not(.btn){padding:19px 2px;border-radius:0;border-bottom:1px solid var(--line-dark);color:#fff;font:500 32px/1.15 var(--serif);letter-spacing:-.01em}
  .site-nav a:not(.btn)::after{display:none}
  .site-nav a.is-current{color:var(--mint)}
  .site-nav .btn{margin:28px 0 0;height:56px;font-size:17px}
  .nav-contact{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:36px;color:var(--muted-dark);font-size:17px}
  .site-nav .nav-contact a:not(.btn){padding:6px 0;border:0;font:600 17px/1.4 var(--sans);letter-spacing:0;color:var(--mint)}
  .site-nav .nav-contact a:not(.btn):hover{text-decoration:underline}
}
/* with scripting off the burger cannot open, so show the links as a plain row */
@media (max-width:899px) and (scripting:none){
  .site-header{height:auto;position:static}
  .site-header-in{flex-wrap:wrap;padding:8px 0}
  .nav-toggle{display:none}
  .site-nav{position:static;opacity:1;visibility:visible;transform:none;flex-direction:row;flex-wrap:wrap;padding:0;background:none;overflow:visible}
  .site-nav a:not(.btn){font:600 15px/1 var(--sans);color:var(--navy);padding:10px;border:0}
  .nav-contact{display:none}
}

/* ---------- footer ---------- */
.site-footer{background-color:var(--navy);color:var(--muted-dark);padding:64px 0 0;font-size:16px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px}
.foot-brand .plate{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:var(--paper);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.foot-brand .plate picture{display:block}
.foot-name{margin-top:22px;font:600 22px/1.2 var(--serif);color:#fff}
.foot-brand p{margin-top:8px;max-width:34ch}
.foot-brand .foot-contact{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.site-footer a{color:var(--mint)}
.foot-h{margin:0 0 16px;font:700 12.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.foot-col ul{display:grid;gap:2px}
.foot-col a{display:inline-block;padding:6px 0;color:#fff;font-weight:500}
.foot-col a:hover{color:var(--mint)}
.foot-bottom{margin-top:56px;padding:22px 0 26px;border-top:1px solid var(--line-dark);font-size:14px;color:var(--muted-dark)}
.foot-bottom .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}
@media (max-width:899px){
  .site-footer{padding-top:48px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .foot-brand{grid-column:1/-1}
}

/* ---------- shared closing band (partials/book-band.html) ---------- */
.book-band{text-align:center}
.book-band .lede{margin:28px auto 0;max-width:54ch}
.book-band .btn-row{justify-content:center;margin-top:40px}
.book-lines{margin-top:40px;display:grid;justify-items:center;gap:2px;font:600 20px/1.5 var(--sans)}
.book-lines a{padding:4px 0}
.consent{margin:22px auto 0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--muted-dark);text-wrap:balance}

/* ---------- buttons, links, pills, status ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-btn);background:var(--green);color:#fff;font:600 16px/1 var(--sans);white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px rgba(18,38,58,.22);transition:transform .18s var(--ease),box-shadow .18s,background-color .18s,border-color .18s}
.btn:hover{background:var(--green-dark);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 36px rgba(18,38,58,.3)}
.scene--dark .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px rgba(0,0,0,.25)}
.scene--dark .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 40px rgba(0,0,0,.38)}
.btn-ghost{background:transparent;border-color:rgba(18,38,58,.28);color:var(--navy);box-shadow:none}
.btn-ghost:hover{background:rgba(18,38,58,.06);color:var(--navy);border-color:rgba(18,38,58,.5);box-shadow:0 12px 28px rgba(18,38,58,.12)}
.scene--dark .btn-ghost{background:var(--glass);border-color:var(--line-dark-strong);color:#fff;box-shadow:none}
.scene--dark .btn-ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.btn-sm{height:44px;padding:0 18px;font-size:15.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.link-arrow:hover{text-decoration:underline}
.link-arrow .arr{display:inline-block;transition:transform .18s var(--ease)}
.link-arrow:hover .arr{transform:translateX(3px)}
.scene--dark .link-arrow{color:var(--mint)}
.link-row{display:flex;flex-wrap:wrap;gap:12px 32px}

.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(18,38,58,.04);color:var(--ink);font:500 14px/1.25 var(--sans);text-decoration:none}
.pill svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scene--dark .pill{border-color:var(--line-dark);background:var(--glass);color:var(--muted-dark)}
.scene--dark .pill svg{stroke:var(--mint)}
a.pill{transition:border-color .18s,background-color .18s,transform .18s var(--ease)}
a.pill:hover{text-decoration:none;transform:translateY(-1px);border-color:rgba(18,38,58,.3)}
.scene--dark a.pill:hover{color:#fff;border-color:rgba(135,229,184,.5);background:rgba(255,255,255,.1)}

.status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font:700 12.5px/1 var(--sans);letter-spacing:.03em;white-space:nowrap;background:rgba(18,38,58,.06);color:var(--navy)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.status--live{background:rgba(31,122,85,.12);color:var(--green-dark)}
.status--live::before{background:var(--green);box-shadow:0 0 0 3px rgba(31,122,85,.2)}
.status--sample{background:rgba(33,147,214,.12);color:#165C86}
.status--sample::before{background:var(--blue)}
.status--count{background:rgba(18,38,58,.07);color:var(--navy)}
.status--count::before{background:var(--teal)}

/* ---------- browser frame, phone frame, hover scroll ---------- */
.bframe{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-paper)}
.bframe-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-bottom:1px solid var(--line);background:linear-gradient(#fff,#F2EFE8)}
.bframe-bar i{display:block;width:10px;height:10px;border-radius:50%;background:rgba(18,38,58,.17)}
.bframe-tag{margin-left:auto;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bframe-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper);container-type:size}
.bframe-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.bframe--dark{border-color:rgba(255,255,255,.14);background:#0E1B2A;box-shadow:var(--shadow-dark),inset 0 1px 0 rgba(255,255,255,.08)}
.bframe--dark .bframe-bar{border-bottom-color:var(--line-dark);background:rgba(255,255,255,.06)}
.bframe--dark .bframe-bar i{background:rgba(255,255,255,.24)}
.bframe--dark .bframe-tag{color:var(--muted-dark)}
/* mosaic of three pictures inside one window */
.mosaic{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:1fr 1fr;gap:3px;background:var(--line)}
.mosaic>*{position:relative;overflow:hidden;background:var(--paper)}
.mosaic>:first-child{grid-row:1/3}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}

.shot-slide{position:absolute;left:0;top:0;width:100%;height:auto!important;max-width:none;object-fit:initial!important;transition:transform .9s var(--ease)}
.pcard:hover .shot-slide,.pcard:focus-within .shot-slide,.bframe--scroll:hover .shot-slide,.bframe--scroll:focus-within .shot-slide,.bframe--scroll.is-slid .shot-slide{
  transform:translateY(calc(-1*max(0px,min(100% - 100cqh,var(--slide-max,100000px)))));
  transition:transform 6s cubic-bezier(.45,.05,.3,1);
}

.shot-hint{position:absolute;z-index:2;right:10px;bottom:10px;padding:6px 11px;border-radius:999px;background:rgba(18,38,58,.84);color:#fff;font:600 11.5px/1 var(--sans);letter-spacing:.02em;pointer-events:none;transition:opacity .25s}
.shot-hint .hint-touch{display:none}
@media (hover:none){.shot-hint .hint-hover{display:none}.shot-hint .hint-touch{display:inline}}
.pcard:hover .shot-hint,.pcard:focus-within .shot-hint,.bframe--scroll:hover .shot-hint,.bframe--scroll:focus-within .shot-hint,.bframe--scroll.is-slid .shot-hint{opacity:0}

.pframe{position:relative;aspect-ratio:9/19.5;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow-paper)}
.pframe-notch{position:absolute;z-index:2;left:0;right:0;top:0;height:6px;background:#0B1622}
.pframe-notch::after{content:"";position:absolute;left:50%;top:0;width:34px;height:6px;translate:-50% 0;border-radius:0 0 5px 5px;background:#25384C}
.pframe img{position:absolute;left:0;top:6px;width:100%;height:calc(100% - 6px);object-fit:cover;object-position:top}
.pframe--dark{border-color:var(--line-dark);box-shadow:var(--shadow-dark)}

/* ---------- project card ---------- */
.pcard{display:flex;flex-direction:column;min-width:0;transition:transform .18s var(--ease)}
.pcard:hover{transform:translateY(-3px)}
.pcard .bframe{transition:box-shadow .18s var(--ease)}
.pcard:hover .bframe{box-shadow:0 28px 64px rgba(18,38,58,.26)}
.pcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.pcard-head h3{font-size:22px}
.pcard p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--muted)}
.pcard .link-arrow{align-self:flex-start;margin-top:auto;padding-top:14px;font-size:16px}

/* ---------- stat, quote ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{padding:8px 28px 0 0}
.stat+.stat{padding-left:32px;border-left:1px solid var(--line)}
.stat-num{font:500 44px/1.05 var(--serif);letter-spacing:-.015em;color:var(--navy);font-variant-numeric:lining-nums tabular-nums}
.stat-num .count{display:inline-block;text-align:left}
.stat-label{margin-top:10px;max-width:30ch;font-size:14px;line-height:1.5;color:var(--muted)}
.scene--dark .stat-num{color:#fff}
.scene--dark .stat+.stat{border-left-color:var(--line-dark)}
.scene--dark .stat-label{color:var(--muted-dark)}
@media (max-width:899px){
  .stats{grid-template-columns:1fr}
  .stat{padding:22px 0}
  .stat+.stat{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .stat:first-child{padding-top:8px}
}
.quote{position:relative;max-width:880px}
.quote-mark{display:block;margin:0 0 12px -6px;font:500 150px/.72 var(--serif);color:var(--green);height:50px;overflow:visible;user-select:none}
.scene--dark .quote-mark{color:var(--mint)}
.quote blockquote{font:500 28px/1.36 var(--serif);letter-spacing:-.008em;color:var(--ink);text-wrap:balance}
.scene--dark .quote blockquote{color:#fff}
.stars{display:inline-flex;gap:4px;margin-top:28px}
.stars svg{width:22px;height:22px;fill:var(--gold)}
.quote-by{margin-top:12px;font-size:15px;line-height:1.5;color:var(--muted)}
.quote-by b{color:var(--ink);font-weight:600}
@media (max-width:899px){.quote blockquote{font-size:23px}.quote-mark{font-size:110px;height:38px;margin-bottom:10px}}

/* ---------- sticky sub-nav, chips ---------- */
.subnav{position:sticky;top:var(--header-h);z-index:40;background:rgba(247,245,240,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.subnav-in{display:flex;gap:8px;padding:10px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav-in::-webkit-scrollbar{display:none}
.subnav-in--row2{padding-top:0}
.chip{display:inline-flex;flex:none;align-items:center;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--navy);font:600 14.5px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
.chip:hover{background:rgba(18,38,58,.06);text-decoration:none}
.chip.is-active,.chip[aria-current="true"],.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- scroll cue ---------- */
.scroll-cue{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px;color:var(--muted-dark);font:700 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;transition:opacity .45s}
.scroll-cue svg{width:16px;height:16px;fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scroll-cue.is-gone{opacity:0;pointer-events:none}
@keyframes v2-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:no-preference){.scroll-cue svg{animation:v2-cue 1.9s ease-in-out infinite}}

/* ---------- tiles, steps ---------- */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;padding:24px 22px 26px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(18,38,58,.13)}
.tile-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:11px;background:rgba(31,122,85,.11)}
.tile-icon svg{width:22px;height:22px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:20px;line-height:1.2}
.tile-price{margin-top:12px;font:600 19px/1.2 var(--serif);color:var(--green-dark);letter-spacing:-.005em}
.tile p{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--muted)}
@supports (grid-template-rows:subgrid){
  .tiles .tile{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
}
@media (max-width:1060px) and (min-width:900px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.tile{padding:22px 16px 24px}}
@media (max-width:899px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tile{padding:18px 16px 20px}
  .tile:last-child{grid-column:1/-1}
  .tile h3{font-size:18px}
  .tile p{font-size:15px}
}
@media (max-width:359px){.tiles{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.step{position:relative}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;font:600 19px/1 var(--serif)}
.step:not(:last-child)::before{content:"";position:absolute;left:54px;right:-20px;top:21px;height:1px;background:var(--line)}
.step h3{margin-top:20px;font-size:20px}
.step p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--muted)}
.step p b{color:var(--ink);font-weight:600}
@media (max-width:899px){
  .steps{grid-template-columns:1fr;gap:28px}
  .step{display:grid;grid-template-columns:42px 1fr;column-gap:16px}
  .step-n{grid-row:1/3}
  .step h3{margin-top:6px}
  .step:not(:last-child)::before{left:20px;right:auto;top:52px;bottom:-24px;width:1px;height:auto}
}

/* ---------- layouts for inner pages ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split--rev>:first-child{order:2}
@media (max-width:899px){.split{grid-template-columns:1fr;gap:32px}.split--rev>:first-child{order:0}}
.card{padding:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.card--feature{border-color:var(--green);box-shadow:0 0 0 1px var(--green),var(--shadow-paper)}
.price{font:600 44px/1 var(--serif);letter-spacing:-.015em;color:var(--navy)}
.price small{font:500 15px/1 var(--sans);letter-spacing:0;color:var(--muted)}
.check-list{display:grid;gap:10px}
.check-list li{position:relative;padding-left:28px}
.check-list li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);rotate:-45deg}
.list-2col{columns:2;column-gap:56px}
.list-2col li{break-inside:avoid;padding:12px 0;border-top:1px solid var(--line)}
@media (max-width:899px){.list-2col{columns:1}}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.5}
.table th,.table td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table tr:last-child>*{border-bottom:0}
.table thead th{background:rgba(18,38,58,.04);color:var(--muted);font:700 12.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;cursor:pointer;list-style:none;font:600 20px/1.3 var(--serif);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 26px/1 var(--sans);color:var(--green)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 2px 22px;max-width:68ch;color:var(--muted)}

/* ---------- hero stage (home): a client site assembles, then the assistant speaks ---------- */
.stage{--bleed:clamp(0px,calc((100vw - 1288px)/2 + 16px),80px);position:relative;margin-right:calc(var(--bleed)*-1)}
.stage-desktop{display:block}
.stage-phone{display:none}
.stage-frame{position:relative;z-index:1;margin:0}
.stage-canvas{position:relative;aspect-ratio:1440/1100;overflow:hidden;background:#FAF7EF}
.stage-layer{position:absolute;left:calc(var(--x)*100%/1440);top:calc(var(--y)*100%/1100);width:calc(var(--w)*100%/1440)}
.stage-layer picture{display:block}
.stage-layer img{display:block;width:100%;height:auto}
/* the illustration card of the captured page is drawn in CSS (cheap, and no image bigger than the page's own headline) */
.stage-card{aspect-ratio:575/342;border:1px solid #DED5C7;border-radius:2px;background:#F3ECDD}
.stage-card picture{position:absolute;left:calc(181*100%/575);top:calc(37*100%/342);width:calc(220*100%/575)}

.stage-badge{position:absolute;z-index:4;top:-50px;right:-18px;display:grid;place-items:center;width:116px;height:116px;border:1px solid var(--line-dark-strong);border-radius:28px;background:var(--navy);box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.stage-badge img{display:block;width:96px;height:96px}
.stage-chat{position:absolute;z-index:3;right:58px;bottom:-40px;display:block;width:300px;padding:15px 15px 16px;border:1px solid var(--line-dark-strong);border-radius:16px;background:rgba(13,27,43,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);color:#fff;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.stage-chat:hover{transform:translateY(-3px);box-shadow:0 38px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.chat-label{margin:0 0 12px;display:flex;align-items:center;gap:8px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.chat-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(135,229,184,.18)}
.chat-msgs{display:flex;flex-direction:column;gap:8px}
.bubble{margin:0!important;max-width:90%;padding:9px 12px;border-radius:14px;font:500 13.5px/1.45 var(--sans);color:#fff}
.bubble--you{align-self:flex-end;border-bottom-right-radius:4px;background:var(--green)}
.bubble--bot{border:1px solid var(--line-dark);border-bottom-left-radius:4px;background:rgba(255,255,255,.08);color:#E6EDF3}
.bubble-slot{display:grid}
.bubble-slot>*{grid-area:1/1}
.typing{display:none;align-self:start;justify-self:start;gap:5px;padding:13px 14px;border:1px solid var(--line-dark);border-radius:14px;border-bottom-left-radius:4px;background:rgba(255,255,255,.08)}
.typing i{display:block;width:6px;height:6px;border-radius:50%;background:var(--muted-dark);opacity:.5}
.chat-cta{position:static;margin-top:13px;display:flex;align-items:center;justify-content:center;height:42px;border-radius:var(--r-btn);background:var(--green);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);color:#fff;font:600 15px/1 var(--sans);text-decoration:none}
.chat-cta::after{content:"";position:absolute;inset:0;border-radius:16px}
.chat-cta:hover{color:#fff;text-decoration:none}
.stage-chat:focus-within{outline:3px solid var(--mint);outline-offset:3px}
.chat-cta:focus-visible{outline:0}

@media (max-width:1380px){.stage-badge{right:-4px}}
@media (min-width:900px) and (max-width:1099px){
  .stage-chat{width:256px;right:12px}
  .stage-badge{width:96px;height:96px;top:-30px;border-radius:24px}
  .stage-badge img{width:78px;height:78px}
}
@media (max-width:899px){
  .stage{margin-right:0;width:min(100%,380px);margin-inline:auto;padding-bottom:56px}
  .stage-desktop{display:none}
  .stage-phone{display:block}
  .stage-phone .pframe{width:min(66%,248px);margin-left:2%;box-shadow:var(--shadow-dark)}
  .stage-badge{top:-26px;right:2px;width:92px;height:92px;border-radius:22px}
  .stage-badge img{width:76px;height:76px}
  .stage-chat{right:0;bottom:0;width:min(86%,300px)}
}

/* ---------- motion (all of it off under reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  /* hero stage, two columns only: hidden until v2.js adds .is-run when the hero is on screen.
     On phones the finished composition simply fades up with the scene (data-reveal on .stage). */
  @media (min-width:900px){
    .stage:not(.is-run) .stage-frame,.stage:not(.is-run) .stage-chat,.stage:not(.is-run) .stage-badge{opacity:0}
    .stage.is-run .stage-frame{animation:st-frame .7s var(--ease) backwards}
    .stage.is-run .stage-layer{animation:st-layer .7s var(--ease) var(--d,0ms) backwards}
    .stage.is-run .stage-chat{animation:st-chat .8s var(--ease) 3s backwards}
    .stage.is-run .bubble--you{animation:st-pop .5s var(--ease) 3.45s backwards}
    .stage.is-run .typing{display:flex;animation:st-typing .65s linear 3.95s both}
    .stage.is-run .typing i{animation:st-dot .6s ease-in-out 3.95s 1 both}
    .stage.is-run .typing i:nth-child(2){animation-delay:4.07s}
    .stage.is-run .typing i:nth-child(3){animation-delay:4.19s}
    .stage.is-run .bubble--bot{animation:st-pop .5s var(--ease) 4.6s backwards}
    .stage.is-run .chat-cta{animation:st-pop .5s var(--ease) 5.1s backwards}
    .stage.is-run .stage-badge{animation:st-badge .8s var(--ease) 3.7s backwards}
    .stage[data-reveal]:not(.is-in){opacity:1;transform:none}
    .stage[data-reveal].is-in{animation:none}
  }
  @keyframes st-frame{from{opacity:0;transform:translateY(20px)}}
  @keyframes st-layer{from{opacity:0;transform:translateY(12px)}}
  @keyframes st-chat{from{opacity:0;transform:translateY(34px)}}
  @keyframes st-pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
  @keyframes st-badge{from{opacity:0;transform:scale(.8) rotate(-6deg)}}
  @keyframes st-typing{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
  @keyframes st-dot{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

  /* reveal on scroll */
  [data-reveal]:not(.is-in),[data-reveal-stagger]:not(.is-in)>*{opacity:0;transform:translateY(16px)}
  [data-reveal].is-in{animation:v2-rise .5s var(--ease) backwards}
  [data-reveal-stagger].is-in>*{animation:v2-rise .5s var(--ease) calc(var(--i,0)*80ms) backwards}
  @keyframes v2-rise{from{opacity:0;transform:translateY(16px)}}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.pcard:hover,.tile:hover,a.pill:hover,.stage-chat:hover{transform:none!important}
  .shot-slide{transform:none!important}
  .shot-hint{display:none}
}
@media print{
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important}
  .site-header,.scroll-cue,.v2-progress{display:none!important}
}

/* ---------- Type variant B, for comparison only (Jeff, 10/1) ----------
   Gemini's type notes applied to the whole site: a tight geometric sans for headings
   (Plus Jakarta Sans, -0.03em) and JetBrains Mono for eyebrow labels and price tags.
   Switch it on with <html data-type="sans">; the preview Worker sets that from a cookie
   and v2.js draws the switch (preview and localhost only). The static ExtraBold file is
   declared as weight 500 and the Bold file as 600 to 700, so every place the serif was
   used at 500 or 600 picks up the right cut with no per-rule overrides. */
@font-face{font-family:"DAIG Display Sans";src:url("fonts/plusjakarta-800-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DAIG Display Sans";src:url("fonts/plusjakarta-700-latin.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"DAIG Mono Full";src:url("fonts/jetbrainsmono-500-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
html[data-type="sans"]{--serif:"DAIG Display Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
html[data-type="sans"] :is(h1,h2,h3,h4,.display,.stat-num,.quote-text){letter-spacing:-.03em}
/* The hybrid Jeff chose (10/1): serif headings stay, and the small labels and the price
   tags are set in JetBrains Mono on every page, in either type setting. */
:is(.eyebrow,.kicker,.foot-h,.tile-price,.price,.brand-tag){font-family:"DAIG Mono Full",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:is(.eyebrow,.kicker,.foot-h){letter-spacing:.14em;font-weight:500}
:is(.tile-price,.price){letter-spacing:-.02em}
/* the preview-only switch */
.type-switch{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:2147483000;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(15,27,41,.92);border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 30px rgba(0,0,0,.35);font:600 12.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.type-switch span{padding:0 8px 0 10px;color:#C9D2DC;letter-spacing:.04em}
.type-switch button{appearance:none;border:0;cursor:pointer;padding:9px 14px;border-radius:999px;background:transparent;color:#fff;font:inherit}
.type-switch button[aria-pressed="true"]{background:#1F7A55}
@media print{.type-switch{display:none}}