/* Self-hosted fonts (tools/fonts/fetch.mjs). Mona Sans, Geist Mono and Newsreader are Google Fonts' standard latin
   files; GFS Didot holds only the Greek word. The "Fallback" faces stand in while a font loads: local fonts resized to
   the same widths (measured by tools/fonts/fallbacks.mjs), so the swap moves nothing. */
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:400 700;font-stretch:100% 125%;font-display:swap;src:url("/_astro/mona-sans-latin.BvC6AHX8.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/_astro/geist-mono-500-latin.Ct0HJOk2.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("/_astro/newsreader-italic-latin.wf7sDKHF.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;font-display:swap;src:url("data:font/woff2;base64,d09GMgABAAAAAAXkAA4AAAAADLQAAAWRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbWhweBmAAgRwRCAqNdIs4CyAAATYCJAM8BCAFhEQHIBtjCsjEADqtWVTZxBW2ddwjSwWV0hTA9s7JGSgeRvHHvaqJBfMx51MsF6U1XuZeFMDZbrC5tFcqtoC9AkU7sAXyLmuLnr6uE9qsZBAA+Ih0JAgOwsP1AA/eUIGoLGishj3or5xBQl9hqn8V4sEBGqQAe02GlI+EJ5xpgIQdHD4CexDxrZ7kCU+Q5npTBYS2xULvRxKPiVWwAcjrpAULV57iiPsYi/9MCm2SWEp9AqwEEKbzSMypbGzAbLA+X5A3R37FWOos4cQi2dYEYiMekaeJgQWlBzjxHQUQGKGx5GW8IQYFIViKoGTUMeoEdZq6SN2mHvrAh/ZhfQJ8vhgdpc3/etbop8PE0C9D6UPGIf1Q8lDU0NxPeZ/affLDJ99+ovDUwtpAjI4mjYZBdBB6CwyZpKJstER0JQHAQIGsMMYOqCp4zxQomnaQOnjxHeQeArmzIETqwTiIvfhyqdxBLHUWCPg2gnyascnjHHU841bG+vF1ro9HHLxJ9PIs+3gWopep4Bx1QcatjDWHCznGs4zdYujrswwQvcZBxqo3Munb5cet2vX51sFezR2eRdcHroJz1AUZysvg+rh+cJdsCN63FqfrY3nGwctnOMSznOi9yVj1g7PuMtYaLuSYxSr/NZMYxFwY66DZ2PFmaz/Xx7MYOP3xOddlZYYB4s8Y7NWcUYjl+hlrFTeZnWDYYUjnDWYNjB1Qlx8h+CYzBo1Mer++n7GetF7+/nlhDFmWUEYedA0wZn7K88crSKwmxlJWhO3JaP+B8NqjNpRh1f/7WjCirjg/5PnmL5snzzT/Z8al47JnS7pcio/tdvdH05sfdDMTNbJL29xCfMgn9ip/zVwcPuJ0df7itPxza9x9zzYE8yf4KV88lMQGxWXrtxT2pJaPjZtiLFkuPDv7kGmey/62U2FNcmv6xO5rpVd8J0YqDQGRyeuw/6jz+/pv7ukbd0Lj2Jcjq/ESErKZGfHRisTs2SUT/5YVcEm+TbJY+bxI5rSNyEYp88gV3HZKE5yMbUdObpAwIOH5BVm8S2RTcTc6HrNC8Ds+WDLfeX/m7PVeA+umXfGdGKUw+kclrjNM7L6GX73d/FP+/YVc1+v5G6p7w1ZksNEz9vL83J0j3LeI0kcn5YbVflTlH7Ol64eZKdqs4Lhtc4pnx0K4y4v+ko2Td4y6LNkWkjuzeK27bM6wyqASf0OJssR+i/1MEc7J20Irs88ZhTFu0cH1fsKzKiGmfCjQzY5XSy8tdwvxobY6qAPUc+PnB/MnJLx4Ko0MisvWbyruSS0fGzfFWJJKkkPmBS57sxXyZXmLTM+ejPWPSvoz/Hlc+uGSLhfTsdXuAbKwd0P8lGFKnj4sTC1+dNgtMCu0xNpdcD/yu8PuuvAIteTAM9dAH+JdB7WvKszGFP1hg9TLwh6nhkKRitQ3P+pnxjdRHHXFTj1T26EqY65FRHyc6nF5nmj6n/YM9c0796PLB4pOOaO6kVP0J3QbFtkP8ihiw9TZke/hZuMwqhv+mf5kiiAXEb9jFpH/0H3wcRp8sgFaUgJ/ehELOfE5bMlGaF/Zn5iWIiIUQpy8umu9PUqmQRntAKYTROgNT0BKeONJCAkxnsI8rMDT8EMl3gau0OFtwWI8XyieApSiEY2oxVRooUUDilCPMtSiESMaNLxGJTSoQT3M0CIJkYhHFCKRhnCUoRg1aIQaqTDBjCZUogD1MADU651dg2qwGAMNQsHqdLNAjfXpUIAKHGhAHAr8Q81nhizjQ2kBqlGMKJgSk2hCODRIkDM0otSbqFZ+5zVowFSPDInDjUUoQjHmYwM9CLMObQUE5oKLZRGCIshJVcKHYUHEQi8LwMKwLHSrEseQ0s1BJe5mEwANDwYTGoo9sRkmFEOzlKLHW418hBCsAQA=") format("woff2")}
/* FALLBACKS */
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New");font-style:normal;font-weight:100 500;font-stretch:100%;size-adjust:99.98%;ascent-override:100.52%;descent-override:29.51%;line-gap-override:0%} /* 688 characters */
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New Bold");font-style:normal;font-weight:600 900;font-stretch:100%;size-adjust:99.99%;ascent-override:100.51%;descent-override:29.50%;line-gap-override:0%} /* 16 characters */
@font-face{font-family:"GFS Didot Fallback";src:local("Times New Roman");font-style:normal;font-weight:100 500;font-stretch:100%;size-adjust:109.56%;ascent-override:86.43%;descent-override:25.28%;line-gap-override:0%} /* 8 characters */
@font-face{font-family:"Mona Sans Fallback";src:local("Arial");font-style:normal;font-weight:100 500;font-stretch:100%;size-adjust:103.82%;ascent-override:104.99%;descent-override:30.82%;line-gap-override:0%} /* 13964 characters */
@font-face{font-family:"Mona Sans Fallback";src:local("Arial");font-style:normal;font-weight:100 500;font-stretch:108%;size-adjust:110.43%;ascent-override:98.70%;descent-override:28.98%;line-gap-override:0%} /* 141 characters */
@font-face{font-family:"Mona Sans Fallback";src:local("Arial Bold");font-style:normal;font-weight:600 900;font-stretch:100%;size-adjust:100.89%;ascent-override:108.04%;descent-override:31.72%;line-gap-override:0%} /* 958 characters */
@font-face{font-family:"Mona Sans Fallback";src:local("Arial Bold");font-style:normal;font-weight:600 900;font-stretch:112%;size-adjust:105.06%;ascent-override:103.75%;descent-override:30.46%;line-gap-override:0%} /* 708 characters */
@font-face{font-family:"Mona Sans Fallback";src:local("Arial Bold");font-style:normal;font-weight:600 900;font-stretch:118%;size-adjust:108.68%;ascent-override:100.30%;descent-override:29.45%;line-gap-override:0%} /* 78 characters */
@font-face{font-family:"Mona Sans Fallback";src:local("Arial Bold");font-style:normal;font-weight:600 900;font-stretch:125%;size-adjust:110.31%;ascent-override:98.81%;descent-override:29.01%;line-gap-override:0%} /* 585 characters */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia Italic");font-style:italic;font-weight:100 500;font-stretch:100%;size-adjust:89.26%;ascent-override:82.35%;descent-override:29.69%;line-gap-override:0%} /* 27 characters */
/* The site stylesheet, ported in the same order from the old one-page site (html/index.html, last on main at 86ab649). Fonts live in fonts.css */
:root{
  color-scheme: dark;
  --bg:#07080A; --bg-2:#0D0F12; --bg-3:#14171B; --bg-4:#1B1F25;
  --line:#1D2127; --line-2:#2B3039;
  --fg:#F3F1EC; --fg-2:#A8ACB4; --fg-3:#7C8189;
  --origin:#FFF1D0;
  --thimble:#FF6A1A; --aeon:#F2EEE6; --aeon-ink:#161411; --ao2:#00D5CB; --ao2-deep:#002D2B;
  --ao2-grad:linear-gradient(90deg, #00968F, #00FFF4);
  --c: var(--fg);
  --f-sans:"Mona Sans", "Mona Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:"Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-greek:"GFS Didot", "GFS Didot Fallback", "Times New Roman", serif;
  --f-aeon:"Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --hdr: 64px; --sub: 52px;
  /* The bar that stays pinned while the page scrolls: the Arkhe bar, or the product bar on product pages (below) */
  --pin: var(--hdr);
  /* Where in-page links, old links on load and keyboard focus stop: 24 px under that bar (html, below). The product
     pages' settle stage works out its height from it too (Scroll-linked settle, below) */
  --land: calc(env(safe-area-inset-top,0px) + var(--pin) + 24px);
  --r-card: 22px;
  /* A button's side padding and border width (.btn; .btn-sm sets its own padding). The line under a booking button
     starts after both (.book): change them here, not on the button, so the two stay lined up */
  --btn-px: 22px; --btn-bw: 1px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --sec: clamp(80px, 11vw, 152px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:var(--land)}
body{background:var(--bg);color:var(--fg);font-family:var(--f-sans);font-size:17px;line-height:1.55;font-stretch:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
/* The image pipeline wraps images in picture; the wrapper adds no box, so every img rule works as before. Its source
   elements would otherwise count as flex and grid items */
picture{display:contents}
picture>source{display:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* In-page links, old links on load and keyboard focus stop 24 px under the pinned bar. One offset, on the page's
   scroller: an element's own scroll-margin would add to it (until PR PM both were set, and links landed about 80 px
   too low). Product pages pin the product bar; the Arkhe bar above it scrolls away */
html:has(.subnav){--pin:var(--sub)}
/* Product pages: the Arkhe bar scrolls away, only the product bar stays pinned, one button on screen. Tech consulting, the legal pages and the 404 page have no product bar, so they keep the Arkhe bar like home */
body:not([data-view="home"]):not([data-view="consulting"]):not([data-view="privacy"]):not([data-view="terms"]):not([data-view="not-found"]) .hdr{position:relative;top:auto}
body:not([data-view="home"]):not([data-view="consulting"]):not([data-view="privacy"]):not([data-view="terms"]):not([data-view="not-found"]) .hdr .btn{display:none}
/* ...and the Products menu moves with that bar (the top layer's absolute box is the page), until the script closes it once the bar has gone */
body:not([data-view="home"]):not([data-view="consulting"]):not([data-view="privacy"]):not([data-view="terms"]):not([data-view="not-found"]) .pm{position:absolute;top:calc(var(--hdr) + 8px)}

/* Type */
.display{font-stretch:125%;font-weight:600;letter-spacing:-.035em;text-wrap:balance;margin:0}
.h1{font-size:clamp(38px, 6.6vw, 88px);line-height:.98}
.h2{font-size:clamp(32px, 4.6vw, 64px);line-height:1.02;letter-spacing:-.032em}
.h3{font-size:clamp(19px, 1.6vw, 22px);line-height:1.25;font-weight:600;letter-spacing:-.012em;margin:0;font-stretch:112%}
.lead{font-size:clamp(18px, 1.55vw, 21px);line-height:1.5;color:var(--fg-2);max-width:40ch;margin:0;text-wrap:pretty}
.dim{color:var(--fg-3)}
.c{color:var(--c)}
.label{font-family:var(--f-mono);font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin:0;display:flex;align-items:center;gap:10px}
.label .dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
p{margin:0}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(40px, 5vw, 64px)}

/* Buttons */
.btn{--bb:var(--fg);--bt:var(--bg);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 var(--btn-px);border-radius:999px;background:var(--bb);color:var(--bt);font-weight:600;font-size:16px;letter-spacing:-.005em;border:var(--btn-bw) solid transparent;transition:transform .16s var(--ease), background-color .2s, border-color .2s, color .2s;white-space:nowrap;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:16px;height:16px}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--fg-3)}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn-thimble{--bb:var(--thimble);--bt:#140700}
.btn-aeon{--bb:var(--aeon);--bt:var(--aeon-ink)}
.btn-ao2{--bb:var(--ao2);--bt:var(--ao2-deep)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
/* A booking button and its line (BookCall.astro): one group, so the line stays right under its button whether the
   buttons sit side by side or stack. It sits closer to the button than the buttons sit to each other (6 px against
   12), starts under the button's text and wraps within the button's width. The button is a pill, so a line starting at
   its outer edge pokes out past the rounded end (Caleb, Oct 1): it starts after the button's border and side padding,
   read from the same two values the button uses (:root), so the two stay lined up if either changes there */
.book{display:grid;gap:6px;justify-items:start}
.book .fineprint{justify-self:stretch;contain:inline-size;margin-inline-start:calc(var(--btn-bw) + var(--btn-px))}
.textlink{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:500;border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:border-color .2s}
.textlink:hover{border-color:var(--fg)}
.textlink svg{width:14px;height:14px}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;height:var(--hdr);display:flex;align-items:center;background:rgba(7,8,10,.72);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid transparent;transition:border-color .25s;view-transition-name:hdr}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg)}
.brand .i-mark{width:26px;height:26px;fill:currentColor}
.brand .i-word{height:13px;width:72px;fill:currentColor}
.nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:15px;color:var(--fg-2)}
.nav > a:not(.btn){transition:color .2s}
.nav > a:not(.btn):hover,.nav > a[aria-current="page"]{color:var(--fg)}

/* Products menu (the mockup's rules, Sept 29). The panel is a popover: the top layer, so nothing on the page moves.
   menu() in src/scripts/site.ts sets --pm-x, its left edge under the button, held inside the header's width (it reads
   --pm-w); without the script it sits at the left gutter. Phones (640 px and under) have no Products button: the phone
   menu holds the rows. Its height is capped to the screen, with its own scroll, so every row can be reached at any
   zoom. On product pages it moves with the Arkhe bar (below, with the pinned-bar rules) */
.nav-btn{appearance:none;border:0;background:transparent;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer;transition:color .2s}
.nav-btn:hover,.nav-btn[aria-expanded="true"]{color:var(--fg)}
.nav-btn:focus-visible{outline:2px solid var(--origin);outline-offset:4px;border-radius:6px}
.nav-chev{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.nav-btn[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
.pm{--pm-w:420px;position:fixed;inset:auto;margin:0;top:calc(env(safe-area-inset-top,0px) + var(--hdr) + 8px);left:var(--pm-x,var(--gutter));width:min(var(--pm-w),calc(100vw - 32px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--hdr) - 16px);overflow-y:auto;overscroll-behavior:contain;padding:8px;border:1px solid var(--line-2);border-radius:20px;background:rgba(13,15,18,.96);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 40px 90px -30px rgba(0,0,0,.85);color:var(--fg);font-family:var(--f-sans)}
.pm:popover-open{animation:pmIn .2s var(--ease-out)}
@keyframes pmIn{from{opacity:0;transform:translateY(-6px)}}
.pm::backdrop{background:transparent}
.pm-head{display:flex;justify-content:space-between;align-items:center;margin:0;padding:10px 12px 8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.pm-count{font-variant-numeric:tabular-nums}
.pm-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pm-item{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:14px;padding:12px;border-radius:14px;color:var(--fg);text-decoration:none;transition:background .15s}
.pm-item:hover{background:var(--bg-3)}
.pm-item:focus-visible{background:var(--bg-3);outline:2px solid var(--origin);outline-offset:-2px}
.pm-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in oklab,var(--c) 9%,var(--bg-2));border:1px solid color-mix(in oklab,var(--c) 28%,var(--line))}
.pm-ic img{width:24px;height:auto;display:block}
.pm-txt{display:grid;gap:2px;min-width:0}
.pm-name{font-weight:600;font-size:16px;line-height:1.3;letter-spacing:-.01em}
.pm-line{font-size:14px;line-height:1.4;color:var(--fg-2)}
.pm-go{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--fg-3);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s,color .15s}
.pm-item:hover .pm-go,.pm-item:focus-visible .pm-go{opacity:1;transform:none;color:var(--fg)}
.pm-foot{margin-top:6px;padding:12px 12px 6px;border-top:1px solid var(--line)}
.pm-all{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-size:14px;font-weight:500;text-decoration:none;border-radius:6px}
.pm-all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pm-all:hover{text-decoration:underline;text-underline-offset:4px}
.pm-all:focus-visible{outline:2px solid var(--origin);outline-offset:4px}

/* The page being shown (Header.astro, aria-current="page"): its link in the bar and in the phone menu turns ivory, as
   the bar's links do on hover, and a product's row keeps the rows' hover ground. On a product page the Products button
   turns ivory too, so the bar shows where the page is */
.nav:has(.pm-item[aria-current="page"]) > .nav-btn{color:var(--fg)}
.pm-item[aria-current="page"]{background:var(--bg-3)}

/* Phone menu (PR PN, 640 px and under; Header.astro, phoneMenu() in src/scripts/site.ts). The bar shows the logo and a
   Menu button; Products and "Work with us" move into the menu (Responsive, below). The button only shows once the
   script has run; before that, and without JavaScript, a "Menu" link in the same place goes to the footer's links.
   Menu and Close share one grid cell, so both take the same room and the button never moves; both end at the header's
   edge, like the bar's last item on a laptop; aria-expanded picks the word shown, and the hidden one is not part of
   its name.
   The menu covers the page under the bar on the site's ground, above the product bar and the cookie bar (z-index 75,
   over 55 and 70), with its own scroll on short screens; the script sets --mm-top to the bar's bottom edge as it opens.
   "Work with us" sits at the bottom of the screen: when the menu scrolls it stays there over a short fade, and a link
   that gets focus scrolls clear of it (scroll-padding-bottom, its height). It fades in and out in 0.2 s, and takes no
   taps while it fades out; with reduce motion on it just appears (Reduced motion, below). Every link is at least 48 px
   tall: the product rows 68 (86 on two lines), "See all products" 48, Services, About and Contact 52, the button 48.
   While it is open the bar turns solid and the page behind doesn't scroll (html.mm-open) */
.mm-btn{display:none;place-items:center end;height:44px;margin-inline-end:-10px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--fg);font:inherit;font-weight:500;cursor:pointer}
.mm-btn > span{grid-area:1 / 1;transition:none}
.mm-btn > span + span,.mm-btn[aria-expanded="true"] > span:first-child{visibility:hidden}
.mm-btn[aria-expanded="true"] > span + span{visibility:visible}
.mm-btn:focus-visible{outline:2px solid var(--origin);outline-offset:0}
.mm{display:none;position:fixed;z-index:75;left:0;right:0;bottom:0;top:var(--mm-top,calc(env(safe-area-inset-top,0px) + var(--hdr)));overflow-y:auto;overscroll-behavior:contain;scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--bg);color:var(--fg);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out),visibility 0s .2s}
.mm-open .mm{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
.mm-in{display:flex;flex-direction:column;min-height:100%;padding-top:8px}
.mm .pm-head{padding:16px 0 8px}
/* The row icons line up with the logo, and a row's ground stops 8 px from the screen's edges */
.mm .pm-list{margin-inline:-8px}
.mm .pm-item{padding-inline:8px}
.mm .pm-foot{margin-top:2px;padding:0;border:0}
.mm .pm-all{min-height:48px;font-size:15px}
.mm-links{list-style:none;margin:16px 0;padding:0;border-top:1px solid var(--line)}
.mm-links a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--fg-2);transition:color .2s}
.mm-links a:hover,.mm-links a[aria-current="page"]{color:var(--fg)}
.mm-links a:focus-visible{outline:2px solid var(--origin);outline-offset:-2px;border-radius:8px}
.mm-end{position:sticky;bottom:0;margin-top:auto;padding:16px 0 calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.mm-end::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:linear-gradient(rgba(7,8,10,0),var(--bg));pointer-events:none}
.mm-work{width:100%}

/* Home hero */
.hero{padding-block:clamp(44px, 6vw, 84px) clamp(20px, 3vw, 36px);display:grid;gap:clamp(22px, 2.6vw, 32px)}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.greek{display:flex;align-items:baseline;gap:10px;color:var(--fg-3);font-size:14px}
.greek [lang="grc"]{font-family:var(--f-greek);font-size:22px;color:var(--fg-2);letter-spacing:.02em}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 48px}

/* Origin. The glow behind the A is wider than a phone screen (inset -85%): the clip keeps it from making the page
   slide sideways */
.origin-wrap{position:relative;isolation:isolate}
.origin{position:relative;z-index:1;overflow-x:clip;display:grid;place-items:center;padding-block:clamp(8px, 1.5vw, 20px) clamp(72px, 9vw, 116px)}
.origin-art{position:relative;width:clamp(150px, 17vw, 220px);aspect-ratio:1}
.products-label{margin-bottom:20px}
.origin-art::before{content:"";position:absolute;inset:-85%;border-radius:50%;background:radial-gradient(closest-side, rgba(255,241,208,.20), rgba(255,241,208,.07) 38%, rgba(255,241,208,0) 72%);pointer-events:none;animation:glowIn 1.6s var(--ease-out) .15s both}
.origin-mark{position:relative;width:100%;height:100%;overflow:visible;fill:var(--fg)}
.origin-mark .arc{transform-box:view-box;transform-origin:16px 16px;animation:arcIn 1.15s var(--ease-out) both}
.origin-mark .a0{animation-delay:.35s}.origin-mark .a1{animation-delay:.45s}.origin-mark .a2{animation-delay:.55s}
.origin-mark .core{transform-box:fill-box;transform-origin:center;fill:var(--origin);animation:coreIn .8s var(--ease-out) .12s both}
@keyframes arcIn{from{transform:rotate(-100deg) scale(.82);opacity:0}to{transform:none;opacity:1}}
@keyframes coreIn{0%{transform:scale(0);opacity:0}55%{transform:scale(1.35);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes glowIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}

/* Products */
.products{position:relative;z-index:1;padding-bottom:var(--sec)}
.cards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(14px, 1.6vw, 22px)}
.card{--mx:50%;--my:0%;position:relative;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;isolation:isolate;transition:transform .35s var(--ease), border-color .35s}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 55% at 50% 0%, color-mix(in oklab, var(--c) 26%, transparent), transparent 70%);opacity:.3;transition:opacity .8s var(--ease)}
.card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.06), transparent 60%);opacity:0;transition:opacity .3s}
.card:hover::after{opacity:1}
.card:hover{transform:translateY(-3px)}
.card-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;margin:10px 10px 0;border-radius:14px;background:var(--bg-3)}
.card-body{display:grid;gap:10px;padding:22px 24px 26px;flex:1;align-content:start}
.card-tag{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.card-title{display:flex;align-items:center;gap:10px;font-size:26px;line-height:1.1;font-weight:600;font-stretch:118%;letter-spacing:-.025em;margin:0}
.card-title img,.card-title svg{width:26px;height:26px;object-fit:contain;flex:none}
.card-line{font-weight:500;color:var(--fg)}
.card-text{color:var(--fg-2);font-size:15.5px;line-height:1.5}
.card-cta{margin-top:8px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--fg)}
.card-cta svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.card:hover .card-cta svg{transform:translateX(4px)}
/* card media variants */
.m-phone{background:radial-gradient(80% 70% at 50% 100%, rgba(255,106,26,.28), transparent 70%), var(--bg-3)}
.m-phone .mini-phone{position:absolute;left:50%;top:12%;width:48%;translate:-50% 0;border-radius:26px;padding:6px;background:#0A0B0D;border:1px solid #2C3139;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.m-phone .mini-phone img{border-radius:20px;width:100%}
.m-window{background:radial-gradient(90% 70% at 50% 100%, rgba(242,238,230,.12), transparent 70%), var(--bg-3)}
.m-window .win{position:absolute;left:7%;right:-12%;top:14%;border-radius:12px 0 0 0;overflow:hidden;border:1px solid #2C3139;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.m-window .win img{width:100%}
.m-tv img{width:100%;height:100%;object-fit:cover}
.live{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;background:#E5252A;color:#fff;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.6s steps(1) 3}
@keyframes blink{50%{opacity:.2}}
.m-tv::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent, rgba(0,0,0,.72))}
.m-tv .pb{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:grid;gap:8px;font-size:12px;color:#fff}
.m-tv .pb i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.m-tv .pb i::before{content:"";display:block;height:100%;width:100%;background:var(--ao2-grad)}

/* Tech consulting on home: the origin light prototype's panel rules as written (Sept 28), with one change: lit tiles
   keep the --bg-3 background (the prototype's 4% colour tint dropped the "Proven in" lines under 4.5:1 contrast). The
   panel ships lit, the look without JavaScript; the Blueprint takes .lit off and lights it as the drawing arrives */
.consult { position: relative; z-index: 1; padding-bottom: var(--sec); }
.consult-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 64px); align-items: start; padding: clamp(24px, 4vw, 56px);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 28px; isolation: isolate; overflow: hidden;
  transition: border-color 1s var(--ease), box-shadow 1.4s var(--ease); }
.consult-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 0%, rgba(255, 241, 208, .11), transparent 72%);
  opacity: .3; transition: opacity 1.4s var(--ease); }
.consult-panel.lit { border-color: color-mix(in oklab, var(--origin) 26%, var(--line));
  box-shadow: 0 80px 160px -90px rgba(255, 241, 208, .35); }
.consult-panel.lit::before { opacity: 1; }
.consult-top { grid-column: 1 / -1; display: grid; gap: 14px; }
.consult-top .h2 { margin: 0; }
.consult-head { display: grid; gap: 18px; align-content: start; }
.consult-head .h2 { margin: 0; }
.consult-head .lead { margin: 0; }
.svc { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc li { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2);
  padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 999px; }
.consult-head .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.xp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xp li { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 22px 20px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .8s var(--ease), background .8s var(--ease); }
.xp h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 600; font-stretch: 112%;
  letter-spacing: -.015em; line-height: 1.2; }
.xp .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; opacity: .45;
  transition: opacity .8s var(--ease), box-shadow .8s var(--ease); }
.xp p { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.xp .xp-proof { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-top: 4px; }
.consult-panel.lit .xp li { border-color: color-mix(in oklab, var(--c) 30%, var(--line)); }
.consult-panel.lit .xp .dot { opacity: 1; box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 16%, transparent), 0 0 18px color-mix(in oklab, var(--c) 70%, transparent); }
.consult-panel.lit .xp li:nth-child(2), .consult-panel.lit .xp li:nth-child(2) .dot { transition-delay: .14s; }
.consult-panel.lit .xp li:nth-child(3), .consult-panel.lit .xp li:nth-child(3) .dot { transition-delay: .28s; }
.consult-panel.lit .xp li:nth-child(4), .consult-panel.lit .xp li:nth-child(4) .dot { transition-delay: .42s; }
@media (max-width: 960px) { .consult-panel { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .xp { grid-template-columns: 1fr; } .consult-panel { border-radius: 22px; } }

/* Blueprint (src/scripts/blueprint.ts): the prototype's rules as written (Sept 28). The script sets .cx and
   .cx-blueprint on .light-stage while it runs, and drives the lights with --ink (cards), --tl (tiles), --pl (panel)
   and --gr (the graph paper) as the reading line moves, so none of them transition */
.light-stage.cx { position: relative; isolation: isolate; }
.cx > .origin-wrap, .cx > .consult { position: relative; z-index: 1; }
.cx .card { transition: transform .35s var(--ease); }
.cx .card::before { transition: none; }
.cx .xp li, .cx .xp .dot { transition: none; }
.cx .consult-panel { transition: none;
  border-color: color-mix(in oklab, var(--origin) calc(var(--pl, 0) * 26%), var(--line));
  box-shadow: 0 80px 160px -90px rgba(255, 241, 208, calc(var(--pl, 0) * .35)); }
.cx .consult-panel::before { transition: none; opacity: calc(.3 + .7 * var(--pl, 0)); }
.cx .xp .dot { opacity: calc(.4 + .6 * var(--tl, 0));
  box-shadow: 0 0 0 calc(var(--tl, 0) * 4px) color-mix(in oklab, var(--c) 16%, transparent),
    0 0 calc(var(--tl, 0) * 18px) color-mix(in oklab, var(--c) 70%, transparent); }
.bp-grid { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(243, 241, 236, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 241, 236, .035) 1px, transparent 1px),
    linear-gradient(rgba(243, 241, 236, .014) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 241, 236, .014) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px; }
/* The prototype masked the paper with radial-gradient(#000 gr - 220px, transparent gr); the veil is its inverse in the
   page's colour, which gives the same picture. Each on its own layer, so only the veil repaints as it grows */
.bp-veil { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at var(--px) var(--py), transparent calc(var(--gr, 0px) - 220px), var(--bg) var(--gr, 0px)); }
.bp-grid, .bp-veil { will-change: transform; }
.bp-back, .bp-front { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.bp-back { z-index: 0; }
.bp-front { z-index: 2; }
.bp-l { fill: none; stroke: #5E646D; stroke-width: 1; }
.bp-faint { stroke: #353A42; }
.bp-dash { stroke-dasharray: 2 3; }
.bp-center { stroke: #4B5059; stroke-dasharray: 16 4 3 4; }
.bp-br { stroke: #A8ACB4; }
.bp-tick { marker-start: url(#bp-slash); marker-end: url(#bp-slash); }
.bp-arrow2 { marker-start: url(#bp-ai-s); marker-end: url(#bp-ai); }
.bp-ink-on { stroke: #07080A; stroke-width: 1.2; }
.bp-mki { fill: #07080A; stroke: none; }
.bp-mk { fill: none; stroke: #A8ACB4; stroke-width: 1; }
.bp-pencil { fill: none; stroke: #4A5059; stroke-width: 1; stroke-dasharray: 2 4; }
.bp-ink { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bp-node { stroke: var(--bg); stroke-width: 2; }
.bp-port { fill: var(--bg); stroke: #A8ACB4; stroke-width: 1; }
.bp-t { font-family: var(--f-mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; fill: #8B919A; opacity: 0; }
.bp-small { font-size: 9px; fill: #6C727B; }
.bp-net { font-size: 9px; letter-spacing: .14em; fill: #7C8189; }
.bp-tb { font-size: 9px; letter-spacing: .14em; fill: #C9CCD1; }
.bp-dim { fill: #5E646D; }
.cx-blueprint .card { border-color: color-mix(in oklab, var(--c) calc(var(--ink, 0) * 34%), var(--line)); }
.cx-blueprint .card::before { opacity: calc(.08 + .92 * var(--ink, 0)); }
.cx-blueprint .xp li { border-color: color-mix(in oklab, var(--c) calc(var(--tl, 0) * 38%), var(--line)); }
.bp-film { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background-color: #101316;
  background-image: linear-gradient(rgba(243, 241, 236, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 241, 236, .045) 1px, transparent 1px);
  background-size: 12px 12px; background-position: -1px -1px;
  clip-path: inset(var(--dev, 0%) 0 0 0); }
.bp-film svg { position: absolute; inset: 0; overflow: visible; }
.bp-wf path { fill: none; stroke: #6C727B; stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--wf, 0)); stroke-linecap: round; }
.bp-wf path.hi { stroke: #B9BDC4; }
.bp-wf path.dim { stroke: #3B4048; }
.bp-wf path.bar { stroke: #4E545D; stroke-width: 5; }
.bp-wf path.acc { stroke: var(--c); }
.bp-wf .pin { fill: var(--c); opacity: var(--wf, 0); }
.bp-film .wft { font-family: var(--f-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .1em; fill: #8B919A; opacity: var(--wf, 0); }
/* The scan line rides on a transform, not on top as in the prototype: a moving top counted as layout shift every
   frame (0.26 on a phone for one scroll past the cards) */
.bp-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; margin-top: -1px; z-index: 6; pointer-events: none;
  transform: translateY(var(--devy, 0px));
  background: linear-gradient(90deg, transparent, var(--c) 12%, #FFF8EA 50%, var(--c) 88%, transparent);
  box-shadow: 0 0 14px 2px color-mix(in oklab, var(--c) 55%, transparent), 0 0 46px 8px color-mix(in oklab, var(--c) 22%, transparent);
  opacity: var(--scan, 0); }
/* The script arrives after first paint, so what it changes is already on screen: the films fade in over the card
   screens, and for 0.3 s (.bp-in) the card glows, the panel and its tiles ease from their lit look to the drawing's
   instead of jumping. After that the reading line drives them directly */
@media (prefers-reduced-motion: no-preference) { .bp-film, .bp-scan { animation: bpIn .3s var(--ease-out); } }
@keyframes bpIn { from { opacity: 0; } }
.bp-in .card { transition: transform .35s var(--ease), border-color .3s var(--ease-out); }
.bp-in .card::before, .bp-in .consult-panel::before { transition: opacity .3s var(--ease-out); }
.bp-in .consult-panel, .bp-in .xp li, .bp-in .xp .dot { transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), opacity .3s var(--ease-out); }

/* Principles */
.principles{padding-bottom:var(--sec)}
.pgrid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(28px, 4vw, 56px);border-top:1px solid var(--line);padding-top:clamp(28px, 3vw, 40px)}
.pgrid .p{display:grid;gap:10px;align-content:start}
.pgrid .p p{color:var(--fg-2);max-width:34ch}
.pull{margin:clamp(56px, 7vw, 96px) 0 0;display:grid;gap:18px;max-width:min(880px, 100%)}
.pull blockquote{margin:0;font-size:clamp(24px, 2.8vw, 38px);line-height:1.18;font-weight:500;letter-spacing:-.02em;font-stretch:108%;text-wrap:balance}
.pull figcaption{font-size:14px;color:var(--fg-3);max-width:44ch}
.pull figcaption b{color:var(--fg-2);font-weight:500}

/* Proof */
.proof{padding-bottom:var(--sec)}
.proof-in{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px, 3.5vw, 44px);display:grid;gap:28px;background:linear-gradient(180deg, var(--bg-2), var(--bg))}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8, minmax(0,1fr));gap:26px 20px;align-items:center}
.logos li{display:grid;place-items:center;height:56px}
.logos img{max-height:48px;width:auto;max-width:100%;opacity:.62;transition:opacity .25s}
.logos li:hover img{opacity:1}
.proof-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--fg-3);font-size:14px}

/* About */
.about{padding-bottom:var(--sec)}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px, 5vw, 80px);align-items:start}
.about-copy{display:grid;gap:20px;padding-top:6px}
.about-copy p:not(.lead){color:var(--fg-2);max-width:52ch}
.about-copy .lead{color:var(--fg);max-width:32ch}
.gr{font-family:var(--f-greek);font-size:1.15em}

/* Contact + form */
.contact{padding-bottom:var(--sec)}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px, 5vw, 80px);align-items:start}
.contact-grid .left{display:grid;gap:22px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px, 3vw, 32px)}
.field{display:grid;gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:13.5px;color:var(--fg-2);font-weight:500}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.4;transition:border-color .2s, box-shadow .2s;appearance:none}
.field select{background-image:linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--fg-2);box-shadow:0 0 0 4px rgba(243,241,236,.08)}
.field .err{font-size:13px;color:#FF8A7A;min-height:0}
.form .actions{grid-column:1 / -1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-note{grid-column:1 / -1;font-size:14px;color:var(--fg-2);background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px}
.form-note.bad{color:#FF8A7A}
.form .fineprint{grid-column:1 / -1}

/* Footer */
.ftr{border-top:1px solid var(--line);padding-block:clamp(40px, 5vw, 64px) 28px;margin-top:0}
.ftr-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
.ftr-brand{display:grid;gap:16px;align-content:start;color:var(--fg-3);font-size:14px}
.ftr-brand .brand{color:var(--fg)}
.ftr-col{display:grid;gap:10px;align-content:start;font-size:15px;color:var(--fg-2)}
.ftr-col a:hover,.ftr-col button:hover{color:var(--fg)}
.ftr-col button{justify-self:start;padding:0;border:0;background:none;text-align:left;cursor:pointer;transition:color .2s}
.ftr-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--fg-3);font-size:13px}

/* Legal pages: the site's type at a reading width */
.legal{padding-block:clamp(56px, 8vw, 112px) var(--sec)}
.legal > *{max-width:50ch}
.legal > * + *{margin-top:14px}
.legal h1{margin:0;font-size:clamp(38px, 5.4vw, 72px);line-height:1;font-weight:600;font-stretch:125%;letter-spacing:-.035em;text-wrap:balance}
.legal .updated{margin-top:18px;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--fg-3)}
.legal .updated + p{margin-top:clamp(32px, 4vw, 48px)}
.legal h2{margin:clamp(40px, 4.4vw, 56px) 0 0;font-size:clamp(20px, 1.8vw, 24px);line-height:1.25;font-weight:600;font-stretch:112%;letter-spacing:-.012em}
.legal p,.legal li{color:var(--fg-2);text-wrap:pretty}
.legal ul{margin-bottom:0;padding-left:1.25em;display:grid;gap:10px}
.legal li::marker{color:var(--fg-3)}
.legal strong{color:var(--fg);font-weight:600}
.legal a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .2s}
.legal a:hover{text-decoration-color:var(--fg)}

/* Cookie bar: floats clear of the phone's safe area, and steps aside while a form's send button would sit under it */
.cookiebar{position:fixed;z-index:70;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom, 0px));width:min(780px, calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));margin-inline:auto;display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:14px 14px 14px 20px;border:1px solid var(--line-2);border-radius:18px;background:rgba(20,23,27,.94);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 24px 60px -24px rgba(0,0,0,.9);font-size:14.5px;line-height:1.45;color:var(--fg-2);view-transition-name:cookiebar;transition:transform .3s var(--ease-out), opacity .3s var(--ease-out), visibility 0s}
.cookiebar p{flex:1 1 320px}
.cb-actions{display:flex;align-items:center;gap:10px}
.cb-actions .btn{height:40px}
.cb-actions .inl{margin-left:6px}
.cookiebar.away{transform:translateY(calc(100% + 12px + env(safe-area-inset-bottom, 0px)));opacity:0;visibility:hidden;transition:transform .3s var(--ease-out), opacity .3s var(--ease-out), visibility 0s .3s}

/* Product: subnav */
.subnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:55;height:var(--sub);display:flex;align-items:center;background:rgba(7,8,10,.8);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid var(--line)}
.subnav-in{display:flex;align-items:center;gap:24px}
.subnav-name{display:flex;align-items:center;gap:10px;font-weight:600;font-stretch:112%;letter-spacing:-.01em}
.subnav-name img,.subnav-name svg{width:20px;height:20px;object-fit:contain}
.subnav-links{margin-left:auto;display:flex;gap:22px;font-size:14px;color:var(--fg-2)}
.subnav-links a:hover{color:var(--fg)}

/* Product hero */
.phero{position:relative;isolation:isolate}
.phero-bg{position:absolute;inset:0 0 auto 0;height:min(760px, 100%);z-index:-1;background:radial-gradient(70% 60% at 50% 0%, color-mix(in oklab, var(--c) 20%, transparent), transparent 72%);view-transition-name:none}
.phero-in{padding-block:clamp(56px, 8vw, 112px) clamp(24px, 3vw, 40px);display:grid;gap:clamp(22px, 2.6vw, 32px)}
.aeon-serif{font-family:var(--f-aeon);font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:-.01em}
.fineprint{font-size:13px;color:var(--fg-3)}

/* Stage: the settle moment. Nothing under the caption: the next section's own gap is the space below it.
   On a short screen the device and caption must still fit on screen together: the script at the end of the stage
   (src/components/Stage.astro) reads --room, the height they get while the stage is pinned (the screen with the
   browser's bars showing, less the product bar; and the top safe area twice, as the pinned box is centred on a screen
   that starts under it), and where they don't fit it narrows the device (--dw) until its height fits. A device that
   would end up too small to read gets the class still: it rests settled, unpinned (Scroll-linked settle, below).
   Registered as a length, so the script reads it in px. A narrowed device keeps its shape: its frame's corners,
   bezel, island and base scale with it (--k, its width over its own; unset, 1, where nothing is narrowed, so those
   screens are exactly as before). The stage, the device and its frame's parts have no transitions: with motion off
   every property would otherwise ease over .001 ms (Reduced motion, below), and WebKit and Firefox then hand the script
   the old screen height (--room), or the width it is trying and a base still at its old height, mid-way */
@property --room{syntax:'<length>';inherits:false;initial-value:0px}
.stage{position:relative;--room:calc(100svh - var(--sub) - 2 * env(safe-area-inset-top,0px));transition-property:none}
.stage .device{max-width:var(--dw, none)}
.stage :is(.device,.screen,.island,.lid,.base),.stage .base::before{transition-property:none}
.stage-sticky{display:grid;place-items:center;align-content:center;gap:clamp(18px, 2.4vw, 28px);padding-block:clamp(24px, 4vw, 48px) 0;padding-inline:var(--gutter);overflow:hidden}
.stage-cap{position:relative;z-index:2;font-size:15px;color:var(--fg-2);text-align:center;max-width:44ch}
.device{position:relative;--s0:1.4}
.device::after{content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side, color-mix(in oklab, var(--c) 22%, transparent), transparent 70%);pointer-events:none}
.screen{position:relative;overflow:hidden;background:#000}
.screen img{width:100%;height:100%;object-fit:cover}
.bezel{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.tv{width:min(1040px, 100%)}
.tv .screen{aspect-ratio:16/9;border-radius:calc(14px * var(--k,1));border:1px solid #2A2F37}
.tv .screen::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent, rgba(0,0,0,.75))}
.tv .pb{position:absolute;left:clamp(12px, 2vw, 24px);right:clamp(12px, 2vw, 24px);bottom:clamp(12px, 2vw, 22px);z-index:1;display:grid;gap:10px;color:#fff}
.tv .pb-row{display:flex;justify-content:space-between;gap:16px;font-size:clamp(12px, 1.2vw, 15px)}
.tv .pb-row span:last-child{color:rgba(255,255,255,.7);font-family:var(--f-mono);font-size:.85em;letter-spacing:.06em}
.tv .pb i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.tv .pb i::before{content:"";display:block;height:100%;width:100%;border-radius:inherit;background:var(--ao2-grad)}
.tv .live{left:clamp(12px, 2vw, 24px);top:clamp(12px, 2vw, 22px)}
.tv .bug{position:absolute;right:clamp(12px, 2vw, 24px);top:clamp(12px, 2vw, 22px);width:clamp(72px, 11vw, 132px);height:auto;opacity:.92;z-index:1}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(8,10,12,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-weight:600;font-size:16px;white-space:nowrap;cursor:pointer;transition:transform .2s var(--ease), background-color .2s}
.play:hover{transform:scale(1.04);background:rgba(8,10,12,.72)}
.play-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ao2-grad);color:var(--ao2-deep)}
.play-ic svg{width:15px;height:15px;margin-left:2px}
.play .dur{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.screen.playing .live,.screen.playing .bug,.screen.playing .pb,.screen.playing .play,.screen.playing .ev{display:none}
.ev{position:absolute;left:clamp(14px, 3.4vw, 48px);top:50%;translate:0 -50%;z-index:2;display:grid;gap:clamp(6px, 1vw, 12px);justify-items:start;max-width:64%;color:#fff}
.screen .ev-logo,.m-tv .ev-logo{width:clamp(64px, 10vw, 140px);height:auto;object-fit:contain}
.ev-kick{font-stretch:75%;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(16px, 2.6vw, 38px);line-height:.95}
.ev-meta{font-family:var(--f-mono);font-size:clamp(10px, 1vw, 13px);letter-spacing:.06em;color:rgba(255,255,255,.72)}
.ev .play{position:relative;left:auto;top:auto;translate:none;margin-top:clamp(4px, 1vw, 12px)}
.play-lg{height:64px;padding:0 26px 0 10px;font-size:17px;gap:14px}
.play-lg .play-ic{width:46px;height:46px}
.play-dot{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(8,10,12,.45);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;transition:transform .25s var(--ease)}
.play-dot svg{width:20px;height:20px;margin-left:3px}
.card:hover .play-dot{transform:scale(1.06)}
.screen .start-logo{position:absolute;left:50%;top:40%;translate:-50% -50%;z-index:2;width:clamp(150px, 40%, 420px);height:auto;object-fit:contain}
/* Home AO2 card: the logo and the play button are one centred group with the same gap at every width */
.start-group{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.m-tv .start-logo{width:56%;height:auto;object-fit:contain}
.play-lg.below{top:70%}
.play-dot.below{position:static;translate:none;flex:none;width:46px;height:46px}
.play-dot.below svg{width:16px;height:16px;margin-left:0}
.screen.playing .start-logo{display:none}
.ev-sm{gap:7px;left:16px;max-width:70%}
.m-tv .ev-sm .ev-logo{width:clamp(54px, 22%, 88px)}
.ev-sm .ev-kick{font-size:clamp(15px, 1.9vw, 21px)}
.tv .screen.playing::after{display:none}
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px, 1.4vw, 18px)}
.review{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:26px 24px;display:grid;gap:12px;align-content:start}
.stars{display:flex;gap:3px;color:var(--c)}
.stars svg{width:16px;height:16px}
.review blockquote{margin:0;color:var(--fg-2);font-size:16px;line-height:1.55}
.review figcaption{font-size:13.5px;color:var(--fg-3);line-height:1.45}
.review figcaption b{display:block;color:var(--fg-2);font-weight:600}
.phone{width:clamp(230px, 24vw, 300px);padding:calc(9px * var(--k,1));border-radius:calc(48px * var(--k,1));background:#0A0B0D;border:1px solid #30353E;box-shadow:0 calc(60px * var(--k,1)) calc(120px * var(--k,1)) calc(-40px * var(--k,1)) rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04)}
.phone .screen{aspect-ratio:709/1528;border-radius:calc(39px * var(--k,1))}
.phone .island{position:absolute;left:50%;top:calc(18px * var(--k,1));translate:-50% 0;width:31%;height:calc(24px * var(--k,1));border-radius:calc(14px * var(--k,1));background:#000;z-index:2}
.laptop{width:min(1000px, 100%)}
.laptop .lid{padding:1.4% 1.4% 2.2%;border-radius:calc(20px * var(--k,1)) calc(20px * var(--k,1)) 0 0;background:#0B0C0E;border:1px solid #30353E;border-bottom:0}
.laptop .screen{aspect-ratio:16/10;border-radius:calc(8px * var(--k,1))}
.laptop .base{height:calc(clamp(10px, 1.6vw, 18px) * var(--k,1));margin-inline:-6%;border-radius:0 0 calc(16px * var(--k,1)) calc(16px * var(--k,1));background:linear-gradient(#2A2E35, #15171B);border:1px solid #30353E;border-top:0}
.laptop .base::before{content:"";display:block;width:16%;height:40%;margin-inline:auto;border-radius:0 0 calc(8px * var(--k,1)) calc(8px * var(--k,1));background:#0E1013}
/* Pause and play for the Aeon loop (WCAG 2.2.2), round in the screen's bottom right corner, clear of the chart attribution */
.tour-btn{position:absolute;right:clamp(10px, 1.6vw, 16px);bottom:clamp(10px, 1.6vw, 16px);z-index:2;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(8,10,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:background-color .2s}
.tour-btn:hover{background:rgba(8,10,12,.72)}
.tour-btn svg{width:14px;height:14px}
.tour-btn.held svg{margin-left:2px}
/* Tabbing to the button must not scroll the stage box sideways while the laptop is scaled up: clip, unlike hidden,
   can't be scrolled */
.stage-sticky:has(.tour-btn){overflow:clip}

/* Product sections */
.psec{padding-top:var(--sec)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(20px, 3vw, 40px);counter-reset:s}
.steps li{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--line-2)}
.steps .n{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--c)}
.steps p{color:var(--fg-2);max-width:36ch}
.tiles{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:clamp(12px, 1.4vw, 18px)}
.tiles.t3{grid-template-columns:repeat(3, minmax(0,1fr))}
.tile{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;display:grid;gap:10px;align-content:start}
.tile p{color:var(--fg-2);font-size:15.5px}
.tile .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in oklab, var(--c) 14%, transparent);color:var(--c);margin-bottom:6px}
.tile .ic svg{width:18px;height:18px}
/* A tile with a link: the link sits at the tile's foot, so a row's links line up */
.tile.has-link{grid-template-rows:auto 1fr auto}
.tile .textlink{justify-self:start;margin-top:6px}
.steps.s4{grid-template-columns:repeat(4, minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px, 5vw, 72px);align-items:end}
.split .copy{display:grid;gap:18px}
.bar{display:flex;height:clamp(84px, 9vw, 112px);border-radius:18px;overflow:hidden;border:1px solid var(--line-2)}
.bar > div{display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;min-width:0}
.bar span{font-size:13px;font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.bar b{font-size:clamp(26px, 3vw, 40px);font-stretch:125%;letter-spacing:-.03em;line-height:1}
.bar-you{flex:70 1 0;background:var(--ao2-grad);color:var(--ao2-deep);transition:flex-grow 1.1s var(--ease-out)}
.bar-us{flex:30 1 0;background:var(--bg-3);color:var(--fg-2)}
.bar.pre .bar-you{flex-grow:34}
.bar.pre .bar-us{flex-grow:66}
.bar-legend{margin-top:12px;font-size:14px;color:var(--fg-3)}
.logo-wall{list-style:none;margin:0 0 clamp(40px, 5vw, 64px);padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logo-wall li{display:grid;place-items:center;height:112px;padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.logo-wall img{max-height:62px;width:auto;opacity:.7;transition:opacity .25s}
.logo-wall li:hover img{opacity:1}
.row{display:grid;gap:18px}
.row-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px, 34%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:4px}
.row-track::-webkit-scrollbar{display:none}
.row-track > *{scroll-snap-align:start}
.row-ctrl{display:flex;gap:8px;justify-content:flex-end}
.row-ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer;transition:border-color .2s, opacity .2s}
.row-ctrl button:hover{border-color:var(--fg-3)}
.row-ctrl button[disabled]{opacity:.35;cursor:default}
.row-ctrl svg{width:16px;height:16px}
.row.fits .row-ctrl{display:none}
.quote{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:26px 24px;display:grid;gap:20px;align-content:space-between}
.quote blockquote{margin:0;font-size:17px;line-height:1.5;color:var(--fg)}
.quote figcaption{font-size:13.5px;color:var(--fg-3);line-height:1.45}
.quote figcaption b{display:block;color:var(--fg-2);font-weight:600}
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:clamp(18px, 1.6vw, 21px);font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:1.6px solid var(--fg-2);border-bottom:1.6px solid var(--fg-2);rotate:45deg;translate:0 -3px;transition:rotate .25s var(--ease)}
.faq details[open] summary::after{rotate:225deg;translate:0 3px}
.faq details p{color:var(--fg-2);padding:0 0 24px;max-width:60ch}
.screens .row-track{grid-auto-columns:minmax(216px, 1fr)}
.shot{display:grid;gap:16px;margin:0;align-content:start}
.shot .phone{position:relative;width:100%;max-width:280px;margin-inline:auto;padding:7px;border-radius:40px}
.shot .phone .screen{border-radius:33px}
.shot .phone .island{top:14px;height:20px}
.shot figcaption{display:grid;gap:4px;text-align:center}
.shot figcaption span{color:var(--fg-2);font-size:15px;text-wrap:pretty}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px, 1.4vw, 18px)}
.duo .tile{padding:28px;display:flex;flex-direction:column}
.duo .ctas{margin-top:auto;padding-top:14px}
.duo ul{margin:6px 0 0;padding-left:18px;color:var(--fg-2);display:grid;gap:8px;font-size:15.5px}
.inl{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.inl:hover{text-decoration-color:var(--fg)}
/* An email address never breaks at its hyphen, and a phone number never breaks at all */
a[href^="mailto:"],a[href^="tel:"]{white-space:nowrap}
.plans{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));border:1px solid var(--line);border-radius:18px;overflow:hidden}
.plans > div{padding:22px;display:grid;gap:6px;align-content:start;border-left:1px solid var(--line)}
.plans > div:first-child{border-left:0}
.plans .pn{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.plans .pp{font-size:clamp(28px, 3vw, 38px);font-weight:600;font-stretch:125%;letter-spacing:-.03em;line-height:1.05}
.plans .pd{font-size:14px;color:var(--fg-3)}
.dots{display:flex;gap:18px;flex-wrap:wrap}
.dots div{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:14px;color:var(--fg-2)}
.dots i{display:flex;gap:4px}
.dots i b{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.dots i b.on{background:var(--fg)}
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badges a{display:block;height:48px;transition:transform .16s var(--ease)}
.badges a:hover{transform:translateY(-1px)}
.badges img{height:48px;width:auto}
.band{border:1px solid var(--line);border-radius:28px;padding:clamp(28px, 5vw, 64px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;background:radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--c) 18%, transparent), transparent 60%), var(--bg-2)}
.also{padding-block:var(--sec)}
.also-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px, 1.4vw, 18px);margin-top:20px}
.also-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 26px;border-radius:18px;border:1px solid var(--line);background:radial-gradient(70% 140% at 0% 0%, color-mix(in oklab, var(--c) 16%, transparent), transparent 60%), var(--bg-2);transition:transform .3s var(--ease), border-color .3s}
.also-card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.also-card .t{display:grid;gap:4px}
.also-card .t b{font-size:21px;font-stretch:118%;letter-spacing:-.02em}
.also-card .t span{color:var(--fg-2);font-size:15px}
.also-card svg{width:18px;height:18px;flex:none}
.also-grid.a3{grid-template-columns:repeat(3, minmax(0,1fr))}

/* Reveal (visible at rest; JS only offsets items still below the fold) */
.rv{transition:transform .7s var(--ease-out), opacity .7s var(--ease-out)}
.rv.pre{transform:translateY(26px);opacity:.45}

/* View transitions: page to page, only when motion is welcome (Firefox simply loads the page) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
#card-thimble{view-transition-name:p-thimble}
#card-aeon{view-transition-name:p-aeon}
#card-ao2{view-transition-name:p-ao2}
[data-view="thimble-travel"] .phero-bg{view-transition-name:p-thimble}
[data-view="aeon"] .phero-bg{view-transition-name:p-aeon}
[data-view="ao2-live"] .phero-bg{view-transition-name:p-ao2}

/* Scroll-linked settle, only where supported and motion is welcome. The stage is pinned only while it moves. Its scroll
   timeline starts as its top reaches --land. Until PR SG the stage was 170svh tall and its timeline ran that less the
   screen's height, plus --land (--run below): the device settled over the first 58% of the run, its glow came in from
   20 to 60%, the caption from 40 to 62%, and the stage stayed pinned and still for the other 38%, then left a screen
   tall box with the image in its middle, an empty band under the caption. Each range is still that share of --run,
   counted from the same start, so the settle has the same start, end and speed for the same scroll as before (100dvh is
   the screen as it is, toolbars and all, as the timeline sees it). The stage is now just long enough for the pin to end
   as the caption finishes: a screen (from the top safe area, as the pinned box ends there) plus 62% of the run on a
   screen 100svh tall, less --land. Then it gives back the room under the caption (--g, set by the script at the end of
   the stage, src/components/Stage.astro, and kept by src/scripts/stage.ts) and the next section starts there, its own
   gap below the caption. That room lies over the next section, so only the device and the caption take taps.
   A stage with the class still (a screen so short the device would be too small to read once fitted, Stage.astro)
   keeps none of this: it rests settled, as with motion off */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .stage:not(.still){--run:calc(170svh - 100dvh + var(--land));height:calc(env(safe-area-inset-top,0px) + 100svh + .62 * (70svh + var(--land)) - var(--land));margin-bottom:calc(-1 * var(--g, 0px));view-timeline:--stage block;pointer-events:none}
    .stage:not(.still) .stage-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--sub));height:calc(100svh - var(--sub));padding-block:0}
    .stage:not(.still) :is(.device,.stage-cap){pointer-events:auto}
    .stage:not(.still) .device{animation:settle linear both;animation-timeline:--stage;animation-range:contain 0% contain calc(.58 * var(--run))}
    .stage:not(.still) .device::after{animation:haloIn linear both;animation-timeline:--stage;animation-range:contain calc(.2 * var(--run)) contain calc(.6 * var(--run))}
    .stage:not(.still) .screen{animation:screenR linear both;animation-timeline:--stage;animation-range:contain 0% contain calc(.58 * var(--run))}
    .stage:not(.still) .stage-cap{animation:haloIn linear both;animation-timeline:--stage;animation-range:contain calc(.4 * var(--run)) contain calc(.62 * var(--run))}
  }
}
@keyframes settle{from{transform:scale(var(--s0))}to{transform:none}}
@keyframes haloIn{from{opacity:0}to{opacity:1}}
@keyframes screenR{from{border-radius:0}}

/* Responsive */
@media (max-width: 960px){
  .cards{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .pgrid,.steps,.tiles.t3,.also-grid.a3{grid-template-columns:1fr}
  .steps.s4{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .about-grid,.contact-grid,.split{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(4, minmax(0,1fr))}
  .plans{grid-template-columns:1fr 1fr}
  .plans > div:nth-child(3){border-left:0}
  .plans > div:nth-child(n+3){border-top:1px solid var(--line)}
  .band{grid-template-columns:1fr}
  .duo .ctas .btn{flex:1 1 auto}
  .subnav-links{display:none}
  .subnav-in .btn{margin-left:auto}
  .ftr-in{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1 / -1}
}
@media (max-width: 640px){
  :root{--hdr:58px;--sub:50px}
  body{font-size:16px}
  /* The Arkhe bar: the logo and the Menu button. Products, Services, About, Contact and "Work with us" are in the
     phone menu */
  .nav .hide-sm,.nav .nav-btn,.nav > .btn{display:none}
  .nav{gap:18px}
  .mm-btn{display:inline-grid}
  .mm{display:block}
  .hdr{transition:border-color .25s,background-color .2s var(--ease-out)}
  .mm-open{overflow:hidden}
  .mm-open .hdr{background:var(--bg)}
  .hero-foot{grid-template-columns:1fr}
  .hero-top{flex-direction:column;gap:10px}
  .form{grid-template-columns:1fr}
  .tiles,.steps.s4{grid-template-columns:1fr}
  .duo,.also-grid{grid-template-columns:1fr}
  .row-track{grid-auto-columns:86%}
  .screens .row-track{grid-auto-columns:78%}
  .logo-wall{grid-template-columns:repeat(2, minmax(0,1fr))}
  .logo-wall li{height:96px}
  .logos{grid-template-columns:repeat(4, minmax(0,1fr));gap:18px 14px}
  .logos li{height:44px}
  .logos img{max-height:36px}
  .card-title{font-size:23px}
  .phone .island{top:calc(15px * var(--k,1));height:calc(20px * var(--k,1))}
  .reviews{grid-template-columns:1fr}
  .play{height:46px;gap:10px;padding:0 16px 0 6px;font-size:14px}
  .play-lg{height:50px;padding:0 18px 0 7px;font-size:15px;gap:10px}
  .play-lg .play-ic{width:36px;height:36px}
  .play-ic{width:34px;height:34px}
  .tour-btn{width:32px;height:32px}
  .cookiebar{padding:14px 16px;font-size:14px}
  .cookiebar p{flex-basis:100%}
}

/* Reduced motion: everything rests in its final state */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv.pre{transform:none;opacity:1}
  /* The phone menu just appears. No transition at all: the rule above would give its visibility one too, which its
     links inherit, and in Firefox and WebKit a link would still read hidden as the script moves focus to it */
  .mm,.mm *,.mm-links a{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* Alpha point */
.brand .i-logo{height:15px;width:81px;fill:currentColor}
.origin-mark{color:var(--fg)}
.art-b .lam{fill:none;stroke:currentColor;stroke-width:128.5;stroke-linejoin:miter;stroke-miterlimit:12;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.15s var(--ease-out) .2s both}
.art-b .core{animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}