/* ═══════════════════════════════════════════════════════════════════════════════
   PREMISE — premisepm.com
   ───────────────────────────────────────────────────────────────────────────────
   Tokens are the PRODUCT's tokens, copied verbatim from apps/admin/src/app/globals.css
   so there is no seam between the marketing site and the thing it sells. The site adds
   one thing the app does not need: a NIGHT surface set, because the app is a work tool
   that lives in daylight and a homepage has about one second to establish that this is
   a real product.

   The competition was measured, not guessed (Playwright computed styles, 2026-08-22):
   RAY runs Montserrat on #3DB8F5, AppFolio Helvetica Now at 90px/400/-1.8px on #05094F
   navy, DoorLoop system-ui at 64px on #DFFE02 lime, Buildium a light dashboard shot.
   Three of the four open on a dashboard screenshot and all four lead with "Book a demo".
   The gap they leave: every one of them is a bright, busy, feature-grid page. Opening
   dark, quiet and typographic is the differentiated move, not the safe one.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* product tokens — identical to the app. That line is only true if these move together:
     --ink-faint was #7c776c here and in the app, failing AA on both surfaces (4.46 on
     white, 4.09 on paper). Now 5.29:1 / 4.86:1. scripts/check-contrast.mjs recomputes it. */
  --ink:#16150f; --ink-soft:#55524a; --ink-faint:#706b62;
  --paper:#f7f5f0; --surface:#fff; --line:#dcdedf; --line-strong:#c8cbcd;
  /* --accent-lift is the copper used ON dark. 2026-10-13: the graphite redesign made --night-3
     #24282d, where #d07244 fell to 4.36:1; #d47849 measures 4.65:1 there, 5.24:1 on --night-2
     and 5.73:1 on --night (scripts/check-contrast.mjs). --accent itself is unchanged. */
  --accent:#b0552b; --accent-ink:#fff; --accent-lift:#d47849;
  --ok:#2d784c; --ok-soft:#e7f1ea;
  --warn:#8e6200; --warn-soft:#f5edd8;
  --bad:#b4332a; --bad-soft:#f6e4e2;

  /* night set — site only */
  --night:#131518; --night-2:#1b1e22; --night-3:#24282d;
  --night-line:rgba(255,255,255,.09); --night-line-2:rgba(255,255,255,.14);
  /* --night-faint was #78736a: 4.07:1 on --night and only 3.45:1 on --night-3, so the quietest
     text on every dark section of this site failed AA. It is now 5.04:1 on the LIGHTEST dark
     ground and 5.95:1 on the darkest. The light palette had a contrast guard from 2026-08-23;
     this half was never measured, and scripts/check-contrast.mjs now covers it too. */
  --night-text:#eef0f1; --night-soft:#aab1b8; --night-faint:#959ca4;

  --w:1200px; --pad:22px; --r:2px;
  /* Wayfinding zone colours (2026-10-12 redesign): one per product floor, used on floor chips,
     pictograms and the lift rail only — never for the call to action, which stays copper.
     White bold numerals on each are large text (>=20px bold), all above 3:1. */
  --z1:#2b8a83; --z2:#a87b1f; --z3:#3b68a8; --z4:#4a8546;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* No 300ms double-tap delay, and a tap highlight we chose rather than the OS blue box. */
a,button,summary,label,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:rgba(176,85,43,.18)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font:400 17px/1.62 "Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad);width:100%}
.narrow{max-width:900px}

/* ── TYPE ─────────────────────────────────────────────────────────────────────
   Large, light, tight — the measured lesson from AppFolio's 90px/400/-1.8px. Presence
   in this category is typographic; the four competitors all reach for colour instead. */
/* ARCHIVO, not Outfit. Outfit is a GEOMETRIC face - circular bowls, wide apertures, Futura
   lineage - and our own type data files it under "Bauhaus Geometric … poster". It reads as a
   design-forward poster, which is why it never read as buildings.
   Archivo is a grotesque from the DIN/signage tradition: the drafting lineage that architectural
   drawings, elevations and building signage are actually set in. Tall x-height, flat terminals,
   engineered rhythm.
   The width axis is the part that does the work. Buildings are planar and horizontal - floor
   plates, elevations - so display type runs slightly EXPANDED (wdth 112). No competitor is near
   this: RAY runs geometric Montserrat, AppFolio neutral Helvetica Now, DoorLoop system-ui. */
h1,h2,h3,h4,.display{
  font-family:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;letter-spacing:-.028em;line-height:1.02;
  font-variation-settings:"wdth" 112;
  /* Stops a one-word orphan on the last line of a headline. */
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:.95;letter-spacing:-.036em;font-variation-settings:"wdth" 108}
h2{font-size:clamp(1.9rem,4.2vw,3.3rem);letter-spacing:-.03em}
h3{font-size:1.16rem;letter-spacing:-.018em;line-height:1.3}
p{color:var(--ink-soft);max-width:62ch}
.lede{font-size:clamp(1.06rem,1.55vw,1.28rem);line-height:1.55}
.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

section{padding:clamp(58px,6.5vw,104px) 0;position:relative;scroll-margin-top:74px}
section + section{border-top:1px solid var(--line)}
.night + .night, .night + section, section + .night{border-top:0}

/* ── SURFACES ─────────────────────────────────────────────────────────────── */
.night{background:var(--night);color:var(--night-text)}
.night h1,.night h2,.night h3{color:var(--night-text)}
.night p{color:var(--night-soft)}
.night .eyebrow{color:var(--accent-lift)}

/* Blueprint grid — the app uses it on its login screen; the site inherits it as texture. */
.grid-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--g,rgba(22,21,15,.045)) 1px,transparent 1px),
    linear-gradient(90deg,var(--g,rgba(22,21,15,.045)) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
}
.night.grid-bg::before{--g:rgba(255,255,255,.055)}

/* ── BUTTONS ──────────────────────────────────────────────────────────────────
   One shape, three weights. The sheen sweep is a single pseudo-element rather than a
   library; it costs nothing and it is the difference between a button that looks
   pressed-out-of-a-template and one that looks made. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:15px 28px;border-radius:var(--r);border:1px solid transparent;
  font-family:"Source Sans 3",sans-serif;font-weight:500;font-size:.97rem;letter-spacing:-.005em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .65s var(--ease);
}
.btn:hover::after{transform:translateX(130%)}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-lift);border-color:var(--accent-lift)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-line:hover{border-color:var(--ink);background:rgba(22,21,15,.03)}
.night .btn-line{color:var(--night-text);border-color:var(--night-line-2)}
.night .btn-line:hover{border-color:var(--night-text);background:rgba(255,255,255,.05)}
.btn-sm{min-height:42px;padding:11px 19px;font-size:.9rem}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.note{font-size:.87rem;color:var(--ink-faint)}
.night .note{color:var(--night-faint)}

/* ── HEADER ───────────────────────────────────────────────────────────────── */
header{
  position:fixed;inset:0 0 auto;z-index:90;
  background:rgba(16,15,11,0);border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,backdrop-filter .35s;
}
header.solid{background:rgba(16,15,11,.94);backdrop-filter:blur(12px);border-bottom-color:var(--night-line)}
header.light{background:rgba(247,245,240,.95);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:14px;height:72px}
.mark{
  display:inline-flex;align-items:center;gap:10px;color:var(--night-text);
  font-family:"Public Sans",sans-serif;font-weight:500;font-size:1.3rem;letter-spacing:-.032em;
}
header.light .mark{color:var(--ink)}
.mark svg{transition:transform .4s var(--ease)}
.mark:hover svg{transform:rotate(-90deg)}
nav.links{display:flex;gap:26px;margin-left:auto}
nav.links a{color:var(--night-soft);font-size:.94rem;transition:color .2s;position:relative}
header.light nav.links a{color:var(--ink-soft)}
nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .28s var(--ease)}
nav.links a:hover::after{right:0}
nav.links a:hover{color:var(--night-text)}
header.light nav.links a:hover{color:var(--ink)}
.bar-actions{display:flex;align-items:center;gap:12px;margin-left:26px}
.bar-actions .signin{color:var(--night-soft);font-size:.94rem}
header.light .bar-actions .signin{color:var(--ink-soft)}
.menu-btn{display:none}
@media(max-width:1000px){
  nav.links{display:none}.bar-actions{margin-left:auto}
  /* Phone/tablet menu (assets/menu.js): the same four links, opened as a panel under the bar. */
  .menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;
    padding:0 11px;background:none;border:1px solid var(--night-line);color:var(--night-text);cursor:pointer}
  header.light .menu-btn{border-color:var(--line);color:var(--ink)}
  .menu-btn span{display:block;height:1.5px;background:currentColor;transition:transform .25s var(--ease)}
  .menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  @media(prefers-reduced-motion:reduce){.menu-btn span{transition:none}}
  .menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  nav.links.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;
    margin:0;padding:8px var(--pad) 18px;background:var(--night);border-bottom:1px solid var(--night-line)}
  header.light nav.links.open{background:var(--paper);border-bottom-color:var(--line)}
  nav.links.open a{min-height:48px;font-size:1.05rem;border-bottom:1px solid var(--night-line)}
  header.light nav.links.open a{border-bottom-color:var(--line)}
  nav.links.open a::after{display:none}
}
/* Phones: Sign in moves into the menu panel so the bar holds mark, Book a demo and Menu on one
   line (it wrapped onto two once the Menu button arrived). Selectors carry the header scope so
   they beat the later `.bar-actions .signin{display:inline-flex}` touch-target rule. */
nav.links .nav-signin{display:none}
.btn-sm{white-space:nowrap}
@media(max-width:560px){
  header .bar-actions .signin{display:none}
  header nav.links.open .nav-signin{display:inline-flex}
  .bar-actions{gap:8px}
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero{
  min-height:100dvh;display:flex;align-items:center;padding:118px 0 64px;
  border-top:0;overflow:hidden;
}
/* The aurora is one radial gradient that drifts with the pointer. Not a purple-to-blue
   slop gradient: it is the accent colour at 14% against near-black, which reads as light
   spilling into a lobby rather than as decoration. */
.aurora{
  position:absolute;inset:-30% -10% auto -10%;height:120%;pointer-events:none;
  background:
    radial-gradient(52% 46% at var(--mx,62%) var(--my,26%),rgba(176,85,43,.30),transparent 68%),
    radial-gradient(46% 40% at 14% 78%,rgba(176,85,43,.12),transparent 70%);
  transition:background .5s linear;
}
.hero-grid{display:grid;gap:clamp(46px,5vw,70px);align-items:center;position:relative;z-index:2;width:100%}
@media(min-width:1080px){.hero-grid{grid-template-columns:.88fr 1.12fr}}
/* The split column is ~478px wide, so the global h1 size broke "building, not" into two rows and
   left "not" alone on a line. Capped here so the headline holds its three written lines. */
.hero h1{font-size:clamp(2.7rem,5.4vw,4.75rem)}
.line{overflow:hidden;display:block}
/* Hero entrance in CSS from the first paint (2026-10-13 speed pass). It used to wait for GSAP
   to download, then a .55s delay, then a 1.2s blur, so on a phone the top of the page stayed
   empty for two to four seconds. Fill mode is `backwards` so the finished state belongs to the
   normal styles again and the scroll parallax on #hero-frame can still move it. Every delay
   starts after var(--intro): the lift-doors intro's opening time on the first page of a visit,
   0s otherwise (lift-intro.fragment). */
.line > span{display:block;animation:hero-rise .9s cubic-bezier(.2,.8,.2,1) var(--intro,0s) backwards}
.line:nth-child(2) > span{animation-delay:calc(var(--intro,0s) + .07s)}
.line:nth-child(3) > span{animation-delay:calc(var(--intro,0s) + .14s)}
#brow{animation:hero-in .5s ease-out var(--intro,0s) backwards}
.hero .rv{animation:hero-in .7s cubic-bezier(.2,.8,.2,1) calc(var(--intro,0s) + .28s) backwards}
.hero .rv ~ .rv{animation-delay:calc(var(--intro,0s) + .36s)}
.hero .rv ~ .rv ~ .rv{animation-delay:calc(var(--intro,0s) + .44s)}
#hero-frame{animation:frame-in 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--intro,0s) + .12s) backwards}
@keyframes hero-rise{from{transform:translateY(106%);filter:blur(10px)}}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}}
@keyframes frame-in{from{opacity:0;transform:perspective(1400px) rotateX(12deg) rotateY(-8deg) translateY(40px) scale(.96)}}
/* the one word that carries the argument gets a drawn rule under it */
.uline{position:relative;white-space:nowrap}
.uline::after{
  content:"";position:absolute;left:0;bottom:.06em;height:.055em;width:100%;background:var(--accent);
  transform-origin:left;animation:uline-draw .8s var(--ease) calc(var(--intro,0s) + .75s) backwards;
}
@keyframes uline-draw{from{transform:scaleX(0)}}
.hero .lede{color:var(--night-soft);margin-top:26px;max-width:47ch}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;
  font-family:"JetBrains Mono",monospace;font-size:.74rem;letter-spacing:.06em;color:var(--night-faint);text-transform:uppercase;
}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.scroll-cue{
  position:absolute;left:var(--pad);bottom:30px;z-index:3;display:flex;align-items:center;gap:11px;
  font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--night-faint);
}
.scroll-cue i{display:block;width:40px;height:1px;background:var(--night-line-2);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@media(max-width:1080px){.scroll-cue{display:none}}

/* ═══ THE PRODUCT FRAME ═══════════════════════════════════════════════════════
   Not a stock screenshot and not an abstraction: the manager screen rebuilt in markup
   using the app's own tokens, class names and reference-number format. Built rather than
   captured for three reasons — it stays sharp at any density, it weighs nothing next to
   a PNG, and it can move. Every label, badge and REQ number below exists in the product. */
.frame{
  position:relative;border-radius:5px;overflow:hidden;background:var(--surface);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 3px rgba(0,0,0,.2),0 30px 60px -12px rgba(0,0,0,.55),0 60px 120px -30px rgba(0,0,0,.5);
  transform-style:preserve-3d;
  /* The frame is a LIGHT island inside a dark section, so it has to re-establish the text
     colour explicitly. Without this it inherits `.night`'s near-white and every heading inside
     the product screenshot renders white-on-white — which is exactly what shipped in the first
     pass and what the screenshot caught. Anything that does not set its own colour is now dark
     by default here, which is the safe direction for a white surface. */
  color:var(--ink);
  /* Its columns respond to the FRAME's width, not the viewport. A 570px frame on a 1440px
     screen was keeping all six columns and overflowing by 100px, clipping the status column
     mid-word. A media query cannot see that; a container query can. */
  container-type:inline-size;
}
.frame::after{ /* glass edge so it sits IN the dark rather than on top of it */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(22,21,15,.06);
}
.chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#eceae3;border-bottom:1px solid var(--line)}
.chrome i{width:9px;height:9px;border-radius:50%;background:#d3cec2}
.chrome b{
  margin-left:12px;font-family:"JetBrains Mono",monospace;font-size:.68rem;font-weight:400;
  color:var(--ink-soft);letter-spacing:.02em;
}
.app{display:grid;grid-template-columns:186px 1fr;min-height:432px;background:var(--paper)}
@media(max-width:620px){.app{grid-template-columns:1fr}.app .side{display:none}}

.side{background:var(--surface);border-right:1px solid var(--line);padding:15px 0;font-size:.8rem}
.side .bld{display:flex;align-items:center;gap:9px;padding:0 15px 14px;border-bottom:1px solid var(--line);margin-bottom:11px}
.side .bld .sq{width:26px;height:26px;border-radius:2px;background:var(--ink);display:grid;place-items:center;flex:none}
.side .bld u{text-decoration:none;font-family:"Public Sans",sans-serif;font-weight:500;font-size:.86rem;letter-spacing:-.02em;display:block;line-height:1.2}
.side .bld small{color:var(--ink-faint);font-size:.66rem}
.side a{display:flex;align-items:center;gap:9px;padding:6.5px 15px;color:var(--ink-soft);border-left:2px solid transparent}
.side a.on{color:var(--ink);font-weight:500;border-left-color:var(--accent);background:rgba(176,85,43,.05)}
.side a .d{width:14px;height:14px;border:1.4px solid currentColor;border-radius:2px;opacity:.42;flex:none}
.side a.on .d{opacity:1;border-color:var(--accent)}
.side a em{margin-left:auto;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.64rem;background:var(--accent);color:#fff;border-radius:20px;padding:1px 6px}

.pane{padding:18px 20px;min-width:0}
.pane-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.pane-head h4{font-size:1.12rem}
.pane-head p{font-size:.74rem;color:var(--ink-faint);margin-top:2px}
.pane-head .go{background:var(--accent);color:#fff;border-radius:2px;padding:7px 13px;font-size:.74rem;font-weight:500;white-space:nowrap}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs b{
  font-weight:400;font-size:.73rem;padding:5px 11px;border-radius:2px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
}
.tabs b.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tabs b i{font-style:normal;font-weight:600;margin-left:5px}

table.rows{width:100%;border-collapse:collapse;font-size:.76rem;background:var(--surface);border:1px solid var(--line);border-radius:2px}
table.rows th{
  text-align:left;padding:8px 11px;font-family:"JetBrains Mono",monospace;font-weight:400;font-size:.63rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--line);
}
table.rows td{padding:9px 11px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:middle}
table.rows tr:last-child td{border-bottom:0}
/* 12 Oct review: the request title wrapped one word per line at 1280-1440 while the reference
   column kept its width, and on phones the status pill was clipped at the right edge. Titles get
   a floor width, pills never wrap, and the narrowest frames drop the priority column. */
table.rows .ttl{min-width:12ch}
table.rows .pill{white-space:nowrap}
/* The hero mock-up is too narrow for five columns: it keeps priority (its caption says "sorted
   by priority") and drops status. */
.hero table.rows .hide-s{display:none}
table.rows .ref{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--ink);white-space:nowrap}
table.rows .ttl{color:var(--ink);font-weight:500}
table.rows .age{font-family:"JetBrains Mono",monospace;font-size:.7rem;white-space:nowrap}
/* Secondary columns drop when the FRAME is narrow, whatever the screen is doing. */
@container (max-width: 660px){ table.rows .hide-c{display:none} }
@supports not (container-type: inline-size){
  /* Older engines fall back to the viewport, plus a hard clip so a wide table can never
     spill past the frame's rounded edge the way it did before. */
  @media(max-width:1240px){ table.rows .hide-c{display:none} }
  .pane{overflow:hidden}
}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.65rem;font-weight:500;white-space:nowrap}
.pill.urgent{background:var(--bad-soft);color:var(--bad)}
.pill.high{background:var(--warn-soft);color:var(--warn)}
.pill.normal{background:#eceae3;color:var(--ink-soft)}
.pill.open{background:var(--warn-soft);color:var(--warn)}
.pill.prog{background:var(--info-soft,#e8ebf1);color:var(--info,#3a4a6b)}
.pill.done{background:var(--ok-soft);color:var(--ok)}
tr.fresh{background:rgba(176,85,43,.07)}

/* ── PROOF STRIP ──────────────────────────────────────────────────────────── */
.proof{padding:0;border-top:1px solid var(--night-line)}
.proof-in{display:grid;gap:0;border-bottom:1px solid var(--night-line)}
@media(min-width:760px){.proof-in{grid-template-columns:repeat(4,1fr)}}
.stat{padding:34px 26px;border-right:1px solid var(--night-line)}
.stat:last-child{border-right:0}
@media(max-width:759px){.stat{border-right:0;border-bottom:1px solid var(--night-line);padding:24px}.stat:last-child{border-bottom:0}}
.stat b{font-variant-numeric:tabular-nums;
  display:block;font-family:"Public Sans",sans-serif;font-weight:500;font-size:clamp(2rem,3.6vw,2.9rem);
  letter-spacing:-.035em;line-height:1;color:var(--night-text);font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:9px;font-size:.86rem;color:var(--night-faint);line-height:1.4}

/* ── PROBLEM ──────────────────────────────────────────────────────────────── */
.split{display:grid;gap:clamp(30px,4vw,60px)}
@media(min-width:940px){.split{grid-template-columns:.85fr 1.15fr;align-items:start}}
.beats{display:grid;gap:0;border-top:1px solid var(--line)}
.beat{padding:26px 0;border-bottom:1px solid var(--line);display:grid;gap:5px 26px}
@media(min-width:680px){.beat{grid-template-columns:34px 1fr auto;align-items:baseline}}
.beat .n{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--accent)}
.beat b{font-family:"Public Sans",sans-serif;font-weight:500;font-size:1.18rem;letter-spacing:-.022em;display:block;margin-bottom:5px}
.beat p{font-size:.98rem;max-width:56ch}
.beat .fix{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}

/* ── SHOWSTOPPER ──────────────────────────────────────────────────────────── */
.stage{position:relative;height:230vh;padding:0;background:var(--night);color:var(--night-text);border-top:0}
.stage-pin{position:sticky;top:0;height:100dvh;display:grid;place-items:center;overflow:hidden}
.stage-inner{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad);display:grid;gap:34px;align-items:start}
@media(min-width:1000px){.stage-inner{grid-template-columns:.92fr 1.08fr}}
.stage svg#tower{width:100%;max-width:540px;height:auto;margin:0 auto;filter:drop-shadow(0 34px 64px rgba(0,0,0,.55))}
.stage .floor{opacity:0}
.stage h2{max-width:15ch}
.stage p{max-width:45ch;color:var(--night-soft)}
/* The story's intro is prose, so it is set in the body face (mono stays for data: the ticker,
   the legend). On narrow screens the pinned panel holds a tall stack (text over tower), so it
   is aligned to the top under the fixed header instead of centred, which pushed the heading
   under the header and left an empty band as the section scrolled in. */
.stage .story-intro{margin-top:14px;max-width:44ch;font-size:1rem;line-height:1.6;color:var(--night-soft)}
.stage .cap h2 + p{margin-top:16px}
.stage-pin{place-items:start center;padding-top:96px}
@media(max-width:999px){
  .stage-pin{padding-top:96px}
  .stage-inner{gap:22px}
  .stage svg#tower{max-width:min(340px,78vw)}
  .stage .story-intro{font-size:.95rem}
}
/* Building section on phones and tablets in portrait (2026-10-13 overlap fix). The pinned panel
   is exactly one screen tall and clips what does not fit, and text + tower + legend came to
   ~880px: on a 390x800 phone the bottom of the building and the whole legend were cut off by
   the next section. The panel is now a column whose last row (the tower) takes whatever height
   is left, so the building shrinks to fit any screen and the legend always shows. The long
   explanation is dropped here only; the drawing's aria-label carries the same description.
   Bottom padding clears the fixed "Book a demo" bar on phones. */
@media(max-width:999px){
  .stage-pin{display:flex;flex-direction:column;padding-top:88px;padding-bottom:18px}
  .stage-inner{flex:1 1 auto;min-block-size:0;display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .stage-inner > div:last-child{flex:1 1 auto;min-block-size:0;display:flex;flex-direction:column;align-self:stretch}
  .stage .tower-wrap{flex:1 1 auto;min-block-size:0;display:flex;align-items:center;justify-content:center}
  .stage svg#tower{block-size:100%;max-block-size:100%;inline-size:auto;max-inline-size:min(340px,78vw)}
  .stage .story-intro{display:none}
  .stage .legend{margin-top:8px}
}
@media(max-width:760px){.stage-pin{padding-bottom:84px}}
/* Without motion the panel is not pinned, so there is room for the explanation again. */
@media(max-width:999px) and (prefers-reduced-motion:reduce){.stage .story-intro{display:block}}
.cap{position:relative}
.cap > div{opacity:0;position:absolute;inset:0}
.cap > div:first-child{position:relative}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ticker{font-family:"JetBrains Mono",monospace;font-size:.73rem;letter-spacing:.08em;color:var(--night-faint);margin-top:24px;text-transform:uppercase;white-space:nowrap}
@media(max-width:520px){.ticker{white-space:normal;font-size:.68rem}}
.ticker b{color:var(--accent-lift);font-weight:500}
.rail{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);width:2px;height:180px;background:var(--night-line);z-index:3}
.rail i{position:absolute;inset:0 0 auto;height:0;background:var(--accent);display:block}
@media(max-width:900px){.rail{display:none}}

/* ── FEATURE TABS ─────────────────────────────────────────────────────────── */
.tabbar{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:44px}
.tabbar button{
  position:relative;appearance:none;background:none;border:0;cursor:pointer;
  padding:19px 24px 19px 0;margin-right:30px;font:inherit;font-size:1rem;color:var(--ink-faint);
  font-family:"Public Sans",sans-serif;font-weight:500;letter-spacing:-.02em;transition:color .25s;
}
.tabbar button:hover{color:var(--ink-soft)}
.tabbar button[aria-selected="true"]{color:var(--ink)}
.tabbar button::after{content:"";position:absolute;left:0;right:30px;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.tabbar button[aria-selected="true"]::after{transform:scaleX(1)}
@media(max-width:700px){
  .tabbar button{padding:14px 0;margin-right:20px;font-size:.92rem;white-space:nowrap;flex:none}
  /* One scrollable row instead of wrapping with a tab orphaned on its own line; the fade on the
     right edge says there is more. */
  .tabbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .tabbar::-webkit-scrollbar{display:none}
}

.panels{margin-top:42px}
.panel{display:none;gap:clamp(30px,4vw,58px)}
.panel[data-on]{display:grid}
@media(min-width:1000px){.panel{grid-template-columns:.78fr 1.22fr;align-items:center}}
.panel ul{list-style:none;margin-top:24px;display:grid;gap:0;border-top:1px solid var(--line)}
.panel li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line);font-size:.97rem;color:var(--ink-soft);position:relative}
.panel li::before{content:"";position:absolute;left:0;top:21px;width:11px;height:1px;background:var(--accent)}
.panel .frame{box-shadow:0 1px 2px rgba(22,21,15,.05),0 22px 44px -14px rgba(22,21,15,.2);border-color:var(--line)}

/* ── EVERYTHING ELSE ──────────────────────────────────────────────────────── */
/* The pricing section's short list keeps the plain hairline cells (unchanged). */
.grid-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px}
@media(min-width:640px){.grid-list{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid-list{grid-template-columns:repeat(3,1fr)}}
.gi{background:var(--surface);padding:24px 22px;transition:background .3s;position:relative;overflow:hidden}
.gi:hover{background:#fffdfa}
.gi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.gi:hover::before{transform:scaleY(1)}
.gi b{font-family:"Public Sans",sans-serif;font-weight:500;font-size:1.02rem;letter-spacing:-.02em;display:block;margin-bottom:6px}
.gi span{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
/* A lobby directory board, not a card grid (2026-10-13 design pass). Twelve identical boxes in
   three columns is the most generic layout a page can have; a building already has the right
   pattern for "everything that is here": the board by the lifts. Numbered rows on hairlines,
   read down the first column and then the second, like a real directory. Scoped to #everything:
   the pricing section's three-line list shares the class and must stay a plain list. */
#everything .grid-list{display:grid;grid-template-columns:1fr;margin-top:52px;background:none;border:0;border-top:1px solid var(--ink);gap:0 clamp(32px,5vw,80px);counter-reset:gi}
@media(min-width:900px){#everything .grid-list{grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);grid-auto-flow:column}}
#everything .gi{display:grid;grid-template-columns:3.2rem 1fr;column-gap:12px;align-items:baseline;padding:22px 0;background:none;overflow:visible;border-bottom:1px solid var(--line);counter-increment:gi}
#everything .gi::before{content:counter(gi,decimal-leading-zero);position:static;inline-size:auto;background:none;transform:none;transition:none;
  grid-row:1 / span 2;font:500 .78rem/1 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--accent);padding:6px 0 0}
#everything .gi b{font-family:"Public Sans",sans-serif;font-weight:600;font-size:clamp(1.12rem,1.5vw,1.36rem);letter-spacing:-.025em;display:block;margin-bottom:6px;
  transition:transform .35s var(--ease)}
#everything .gi span{grid-column:2;font-size:.94rem;color:var(--ink-soft);line-height:1.55;max-width:48ch}
#everything .gi:hover b{transform:translateX(6px)}
@media(prefers-reduced-motion:reduce){#everything .gi b{transition:none}#everything .gi:hover b{transform:none}}

/* ── AUDIENCE LANES ───────────────────────────────────────────────────────── */
.lanes{display:grid;gap:1px;background:var(--night-line);border:1px solid var(--night-line);margin-top:48px}
@media(min-width:900px){.lanes{grid-template-columns:repeat(3,1fr)}}
.lane{background:var(--night);padding:34px 28px 30px;display:flex;flex-direction:column;transition:background .35s}
.lane:hover{background:var(--night-2)}
.lane h3{font-size:1.3rem;margin-bottom:10px}
.lane p{font-size:.95rem;color:var(--night-soft);flex:1}
.lane .who{display:flex;align-items:center;gap:10px;font-family:"Public Sans",sans-serif;font-weight:700;font-size:.95rem;color:var(--night-text);margin-bottom:16px}
.lane .who svg{color:var(--accent-lift)}
.lane .who .ic{display:inline-flex}
.lane a.go{
  margin-top:22px;display:inline-flex;align-items:center;gap:8px;color:var(--night-text);
  font-size:.93rem;font-weight:500;border-bottom:1px solid var(--night-line-2);padding-bottom:6px;align-self:flex-start;
  transition:border-color .25s,gap .25s var(--ease);
}
.lane a.go:hover{border-color:var(--accent);gap:13px}

/* ── SERVICES / PRICING ───────────────────────────────────────────────────── */
.plans{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
@media(min-width:860px){.plans{grid-template-columns:1fr 1fr}}
.plan{background:var(--surface);padding:36px 32px}
.plan.hi{background:var(--ink);color:#fff}
.plan.hi p{color:#b8b3a6}
.plan .tag{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.plan .fig{font-family:"Public Sans",sans-serif;font-weight:500;font-size:2.6rem;letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.plan.hi .fig{color:#fff}
.plan ul{list-style:none;margin:24px 0 0;display:grid;gap:0}
.plan li{padding:11px 0 11px 25px;border-top:1px solid var(--line);font-size:.94rem;color:var(--ink-soft);position:relative}
.plan.hi li{border-top-color:rgba(255,255,255,.12);color:#b8b3a6}
.plan li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--accent)}
.plan .btn{margin-top:28px;width:100%}

/* ── STEPS ────────────────────────────────────────────────────────────────── */
ol.steps{counter-reset:s;list-style:none;margin-top:46px;border-top:1px solid var(--line)}
ol.steps li{counter-increment:s;padding:25px 0 25px 64px;border-bottom:1px solid var(--line);position:relative;color:var(--ink-soft)}
ol.steps li::before{content:"0" counter(s);position:absolute;left:0;top:26px;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--accent)}
ol.steps b{display:block;font-family:"Public Sans",sans-serif;font-weight:500;font-size:1.14rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:5px}

/* ── STORES ───────────────────────────────────────────────────────────────── */
.stores{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}
.store{
  display:inline-flex;align-items:center;gap:13px;min-height:56px;padding:9px 22px 9px 17px;
  border:1px solid var(--line-strong);border-radius:3px;background:var(--surface);color:var(--ink);cursor:default;
}
.store span{display:flex;flex-direction:column;line-height:1.16}
.store small{font-size:.66rem;letter-spacing:.05em;color:var(--ink-faint)}
.store strong{font-family:"Public Sans",sans-serif;font-weight:500;font-size:1.02rem;letter-spacing:-.018em}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:"Public Sans",sans-serif;font-weight:500;font-size:1.1rem;letter-spacing:-.02em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:31px;width:13px;height:1px;background:var(--ink-faint);
  box-shadow:0 0 0 0 transparent;transition:transform .3s var(--ease);
}
.faq summary::before{
  content:"";position:absolute;right:12px;top:25px;width:1px;height:13px;background:var(--ink-faint);
  transition:transform .3s var(--ease),opacity .3s;
}
.faq details[open] summary::before{transform:scaleY(0);opacity:0}
.faq details p{padding:0 0 24px;font-size:.99rem}

/* ── DEMO FORM ────────────────────────────────────────────────────────────── */
.demo-grid{display:grid;gap:clamp(36px,5vw,68px);align-items:start}
@media(min-width:1000px){.demo-grid{grid-template-columns:.92fr 1.08fr}}
form.book{display:grid;gap:14px}
@media(min-width:620px){form.book{grid-template-columns:1fr 1fr}form.book .full{grid-column:1/-1}}
form.book label{display:block}
form.book span.lb{
  display:block;font-family:"JetBrains Mono",monospace;font-size:.67rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--night-faint);margin-bottom:8px;
}
form.book input,form.book select,form.book textarea{
  width:100%;min-height:52px;background:rgba(255,255,255,.035);color:var(--night-text);
  border:1px solid var(--night-line-2);border-radius:var(--r);padding:14px 15px;
  font:400 1rem/1.4 "Source Sans 3",sans-serif;transition:border-color .2s,background .2s;
}
form.book textarea{min-height:96px;resize:vertical}
form.book select{
  -webkit-appearance:none;appearance:none;height:52px;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a8a396' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px;
}
form.book select option{background:var(--night-2);color:var(--night-text)}
form.book input:focus,form.book select:focus,form.book textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.06);
}
form.book input::placeholder,form.book textarea::placeholder{color:var(--night-faint)}
/* Honeypot: off-screen, never focusable by a real user (tabindex -1 on the input itself). */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Skip link: off-screen until focused, then a real visible target. Distinct from .hp — the
   two were briefly the same class, which would have hidden the skip link from keyboard users
   even while it had focus. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0;font-size:.92rem}
.skip:focus{left:0}
.formnote{font-size:.83rem;color:var(--night-faint);margin-top:4px}
.formmsg{
  grid-column:1/-1;padding:15px 17px;border-radius:var(--r);font-size:.94rem;
  border:1px solid var(--night-line-2);background:rgba(255,255,255,.04);color:var(--night-text);
}
.formmsg.ok{border-color:rgba(45,120,76,.55);background:rgba(45,120,76,.14)}
.formmsg.err{border-color:rgba(180,51,42,.55);background:rgba(180,51,42,.14)}
.contact{margin-top:34px;border-top:1px solid var(--night-line);padding-top:26px;display:grid;gap:14px}
.contact a{display:flex;align-items:center;gap:12px;color:var(--night-soft);font-size:.96rem;transition:color .2s}
.contact a:hover{color:var(--night-text)}
.contact a svg{flex:none;color:var(--accent-lift)}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
footer{background:var(--night);color:var(--night-faint);padding:56px 0 40px;font-size:.9rem;border-top:1px solid var(--night-line)}
.foot{display:grid;gap:34px}
@media(min-width:800px){.foot{grid-template-columns:1.5fr 1fr 1fr 1fr}}
footer h5{font-family:"JetBrains Mono",monospace;font-weight:400;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--night-faint);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:4px}
/* 24px is the WCAG 2.2 minimum for a pointer target on its SMALLER side. A footer link is
   ~19px tall at this size, which passes every colour and naming check and is still a
   coin-toss to hit with a thumb. Measured on the live page, not assumed. */
footer a,nav.links a,.bar-actions .signin,.contact a{display:inline-flex;align-items:center;min-height:26px}
footer a{color:var(--night-soft);transition:color .2s}
footer a:hover{color:var(--night-text)}
.foot-b{margin-top:44px;padding-top:22px;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}

/* ── MOTION GATING ────────────────────────────────────────────────────────────
   Everything scroll-driven is hidden ONLY when `.js` is present, and `.js` is set at the
   very end of a successful boot. A blocked CDN, a failed import or reduced-motion all land
   on a page that simply renders. */
.js .rv:not(.hero .rv){opacity:0;transform:translateY(24px)}
.js .rv-s > *{opacity:0;transform:translateY(18px)}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv-s > *{opacity:1!important;transform:none!important}
  .line > span,#brow,.hero .rv,#hero-frame,.uline::after{animation:none!important}
  .stage{height:auto}.stage-pin{position:static;height:auto;padding:84px 0}
  .stage .floor{opacity:1}.cap > div{opacity:1;position:relative;inset:auto}
  .pulse,.scroll-cue i::after{animation:none}
  .aurora{transition:none}
}

/* ── LEGAL PAGES ──────────────────────────────────────────────────────────────
   Privacy and terms. Set on paper at a comfortable reading measure, because a policy
   nobody can read is the same as not having one. */
.legal{max-width:760px;margin:0 auto;padding:126px var(--pad) 90px}
.legal .eyebrow{margin-bottom:20px}
.legal h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:14px}
.legal .stamp{font-family:"JetBrains Mono",monospace;font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:44px}
.legal h2{font-size:clamp(1.3rem,2.3vw,1.7rem);margin:46px 0 12px;scroll-margin-top:90px}
.legal h3{font-size:1.04rem;margin:26px 0 8px}
.legal p{margin-bottom:14px;max-width:none}
.legal ul{list-style:none;margin:14px 0 20px}
.legal li{padding:9px 0 9px 24px;border-bottom:1px solid var(--line);color:var(--ink-soft);position:relative;font-size:.98rem}
.legal li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--accent)}
.legal table{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:.94rem}
.legal th{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line-strong);font-family:"JetBrains Mono",monospace;font-weight:400;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.legal td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.legal td:first-child{color:var(--ink);font-weight:500;width:34%}
.legal .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 24px}
.legal .table-scroll table{margin:0}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal .toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-bottom:8px;display:grid;gap:7px}
.legal .toc a{color:var(--ink-soft);text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;min-height:26px}
.legal .toc a:hover{color:var(--ink)}
.legal .callout{border-left:2px solid var(--accent);background:var(--surface);padding:18px 22px;margin:22px 0;font-size:.96rem;color:var(--ink-soft)}


/* ── CURSOR LIGHT ─────────────────────────────────────────────────────────────
   A soft copper light that follows the pointer across dark sections. One radial gradient
   moved by CSS custom properties — no per-frame layout, no filter, nothing to composite
   beyond a single already-promoted layer. It reads as a lamp passing over a model. */
.lit{position:relative;isolation:isolate}
/* z-index:-1 inside an isolated stacking context, NOT a z-index:1 on every child. The first
   version raised the children instead, which meant `.lit > *` overrode `position:absolute` on
   the two elements in the hero that depend on it — the aurora and the scroll cue — killing the
   glow and throwing the cue to the right edge where it clipped. Isolation keeps the -1 from
   escaping behind the section's own background, so the light sits between background and
   content with nothing else touched. */
.lit::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(340px circle at var(--lx,50%) var(--ly,50%),rgba(176,85,43,.16),transparent 62%);
}
.lit:hover::after{opacity:1}


/* Headlines reveal a WORD at a time rather than as one block. The mask is per word, so the
   line appears to be typed into place instead of faded on. */
.js .wsplit > i{display:inline-block;opacity:0;transform:translateY(.4em);font-style:normal}

/* A running strip of what the product covers. Pure transform, so it costs one composited
   layer and nothing per frame on the main thread. */
.strip{border-block:1px solid var(--line);overflow:hidden;padding:15px 0;--sp:38s}
.night .strip,.strip.night{border-color:var(--night-line)}
.strip-in{display:flex;gap:0;width:max-content;animation:slide var(--sp) linear infinite}
.strip span{
  padding:0 26px;font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;display:flex;align-items:center;gap:26px;
}
.strip span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.55}
/* `.strip.night` too: the strip IS the night element, so the descendant rule alone never
   matched and its labels rendered paper-grey on black (3.45:1, under the 4.5:1 floor). */
.night .strip span,.strip.night span{color:var(--night-faint)}
@keyframes slide{to{transform:translateX(-50%)}}
.strip:hover .strip-in{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.strip-in{animation:none}.lit::after{display:none}}

/* Magnetic pull on the primary action. Small — 6px at the edge. Enough to feel alive,
   not enough to make the button hard to hit. */
.btn{will-change:transform}


/* ── TOWER LEGEND ─────────────────────────────────────────────────────────────
   Anthony, on the finished section: "i did not understand the 3d object and what it
   represents, it is nice, but i did not understand it." That is a failure of the drawing,
   not of the viewer. An isometric massing model reads as a generic tech-shape unless it is
   labelled, so it now carries the same labels a real drawing would: what the building is,
   what a plate is, and what the one lit cell means. */
.legend{
  margin:18px auto 0;max-width:560px;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--night-faint);justify-content:center;
}
.legend b{display:inline-flex;align-items:center;gap:8px;font-weight:400}
.legend i{width:11px;height:11px;border-radius:1px;flex:none;font-style:normal}
.legend .k-plate{background:linear-gradient(90deg,var(--z1) 25%,var(--z2) 25% 50%,var(--z3) 50% 75%,var(--z4) 75%);border:0}
.legend .k-unit{background:#f2c27e;border:0}
.legend .k-open{background:rgba(176,85,43,.35);border:1px solid var(--accent)}

/* Studio credit — AF&U's byline in the footer of every site we build.
   Deliberately quiet: same faint colour as the copyright it sits beside, never
   larger and never higher-contrast, so the client's notice stays dominant.
   rel="nofollow" is the default and stays that way until a client knowingly
   agrees to endorse us with a followed link — the risk of a self-placed
   footer link across a growing roster lands on THEIR domain, not ours. */
.credit { color: inherit; text-decoration: none; }
.credit:hover { text-decoration: underline; }

/* ══ WAYFINDING (2026-10-12 redesign) ═══════════════════════════════════════════
   The site speaks a building's signage language: a lobby directory as the hero's product
   navigator, one colour and pictogram per product floor, and a lift floor indicator that
   tracks the page. Headline, proof and the copper call to action stay literal; the signage
   is the visual language, never the structure. Logical properties throughout, so an Arabic
   (RTL) version mirrors without new rules. */
.sign-plate{display:inline-flex;align-items:center;gap:10px;font-family:"Public Sans",sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.04em;color:var(--night-soft);padding-block:6px;padding-inline:6px 14px;
  border:1px solid var(--night-line-2);border-radius:3px;background:rgba(255,255,255,.03)}
.sign-plate .lv{display:inline-grid;place-items:center;inline-size:26px;block-size:26px;border-radius:2px;
  background:var(--accent);color:#fff;font-weight:800;font-size:.9rem;letter-spacing:0}

.hero-right{display:grid;gap:14px;align-content:start}
.dir-sign{background:#0c0d0f;border:1px solid var(--night-line-2);border-radius:4px;padding:6px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05)}
.dir-head{display:flex;justify-content:space-between;padding:10px 14px 8px;font-family:"Public Sans",sans-serif;
  font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--night-faint)}
.dir-row{display:grid;grid-template-columns:40px 26px 1fr 18px;align-items:center;gap:14px;inline-size:100%;
  padding:11px 14px;background:none;border:0;border-block-start:1px solid rgba(255,255,255,.07);color:var(--night-text);
  font:inherit;text-align:start;cursor:pointer;transition:background .2s}
.dir-row .fl{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:3px;background:var(--z);
  color:#fff;font-family:"Public Sans",sans-serif;font-weight:800;font-size:1.3rem}
.dir-row .pg{color:var(--z);filter:brightness(1.35)}
.dir-row .nm{font-family:"Public Sans",sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.01em;line-height:1.2}
.dir-row .nm small{display:block;font-family:"Source Sans 3",sans-serif;font-weight:400;font-size:.84rem;letter-spacing:0;color:var(--night-soft);margin-block-start:2px}
.dir-row .ar{color:var(--night-faint);transition:transform .25s var(--ease),color .2s}
.dir-row:hover,.dir-row:focus-visible{background:rgba(255,255,255,.04)}
.dir-row[aria-selected="true"]{background:rgba(255,255,255,.06)}
.dir-row[aria-selected="true"] .ar{color:var(--accent-lift);transform:translateX(4px)}
/* Directory board entrance (2026-10-13): the rows flip down like a lobby board being set, in CSS
   from the first paint, inside the hero frame's own entrance. `backwards` fill only, so the rows
   are ordinary again once they land. */
.dir-head{animation:hero-in .4s cubic-bezier(.2,.8,.2,1) calc(var(--intro,0s) + .3s) backwards}
.dir-row{transform-origin:50% 0;animation:dir-flip .7s cubic-bezier(.34,1.4,.64,1) calc(var(--intro,0s) + .4s) backwards}
.dir-row:nth-of-type(2){animation-delay:calc(var(--intro,0s) + .49s)}
.dir-row:nth-of-type(3){animation-delay:calc(var(--intro,0s) + .58s)}
.dir-row:nth-of-type(4){animation-delay:calc(var(--intro,0s) + .67s)}
.dir-screens{animation:hero-in .7s cubic-bezier(.2,.8,.2,1) calc(var(--intro,0s) + .7s) backwards}
@keyframes dir-flip{from{opacity:0;transform:perspective(700px) rotateX(-92deg)}}
@media(prefers-reduced-motion:reduce){.dir-head,.dir-row,.dir-screens{animation:none}}
[dir="rtl"] .dir-row .ar{transform:scaleX(-1)}
.dir-row:focus-visible{outline:2px solid var(--accent-lift);outline-offset:-2px}
.dir-screens{position:relative}
.dir-screens > [hidden]{display:none!important}
.frame.shot{margin:0}
.frame.shot img{display:block;inline-size:100%;block-size:auto;max-block-size:340px;object-fit:cover;object-position:top}
.frame.shot.phone{background:none;border:0;box-shadow:none;display:grid;justify-items:center}
.frame.shot.phone img{inline-size:auto;max-inline-size:220px;max-block-size:380px;border-radius:18px;border:6px solid #0c0d0f;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}

/* Product-section tabs take their floor's colour. */
.tabbar button:nth-child(1)::after{background:var(--z1)}.tabbar button:nth-child(2)::after{background:var(--z2)}
.tabbar button:nth-child(3)::after{background:var(--z3)}.tabbar button:nth-child(4)::after{background:var(--z4)}

/* Lift floor indicator (assets/wayfinding.js builds it from [data-floor] sections). */
.lift{position:fixed;inset-inline-start:18px;inset-block-start:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:4px;padding:8px 6px;border-radius:4px;background:rgba(19,21,24,.86);
  backdrop-filter:blur(8px);border:1px solid var(--night-line-2)}
.lift a{position:relative;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:2px;
  font-family:"Public Sans",sans-serif;font-weight:700;font-size:.8rem;color:var(--night-faint);text-decoration:none}
.lift a:hover,.lift a:focus-visible{color:var(--night-text);background:rgba(255,255,255,.06)}
.lift a[aria-current="true"]{background:var(--accent);color:#fff}
.lift a span{position:absolute;inset-inline-start:40px;white-space:nowrap;padding:4px 8px;border-radius:2px;
  background:#0c0d0f;color:var(--night-text);font-weight:600;font-size:.76rem;opacity:0;pointer-events:none;transition:opacity .2s}
.lift a:hover span,.lift a:focus-visible span{opacity:1}
.lift a:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}
@media(max-width:1279px){.lift{display:none}}

/* Phones: a sticky Book a demo bar once the hero has scrolled away. */
.demo-bar{position:fixed;inset-inline:12px;inset-block-end:12px;z-index:80;display:none}
.demo-bar a{display:flex;justify-content:center;align-items:center;gap:8px;min-block-size:52px;border-radius:3px;
  background:var(--accent);color:#fff;font-family:"Public Sans",sans-serif;font-weight:700;text-decoration:none;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
@media(max-width:760px){.demo-bar.show{display:block}}
@media(prefers-reduced-motion:reduce){.dir-row .ar,.lift a span{transition:none}}
/* Keep the lobby inside one viewport on desktop: the sign is compact and the screen under it
   is a window onto the product, cropped with a fade rather than shown at full height. */
.dir-row{padding-block:8px}
.dir-row .fl{inline-size:36px;block-size:36px;font-size:1.25rem}
.dir-row{grid-template-columns:36px 24px 1fr 18px}
.dir-screens{max-block-size:330px;overflow:hidden;border-radius:4px;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.dir-screens .frame.shot.phone{max-block-size:330px}
@media(min-width:1080px){.hero .hero-grid{align-items:start;padding-block-start:clamp(8px,4vh,48px)}}

/* Finish-review fixes (2026-10-12). The signage carries past the hero: every floor section's
   heading opens with its floor numeral in a sign chip, matching the lift indicator. */
.floor-chip{display:inline-grid;place-items:center;inline-size:1.05em;block-size:1.05em;margin-inline-end:.35em;
  border-radius:3px;background:var(--ink);color:#fff;font-family:"Public Sans",sans-serif;font-weight:800;
  font-size:.62em;vertical-align:.18em;letter-spacing:0}
.night .floor-chip{background:var(--accent);color:#fff}
.beat .fix{font-family:"Public Sans",sans-serif;text-transform:none;letter-spacing:0;font-weight:600}
.beat .fix::before{content:"\2192\00a0"}
.stage .story-intro.after{margin-top:22px;font-size:.92rem;color:var(--night-faint)}
.hero h1{font-weight:700;letter-spacing:-.04em}
h1,h2{font-weight:700}
@media(max-width:760px){.hero-meta{flex-direction:column;align-items:flex-start;gap:8px}}
.demo-bar{display:none;grid-template-columns:auto 1fr;gap:8px}
@media(max-width:760px){.demo-bar.show{display:grid}}
.cur-floor{display:flex;align-items:center;gap:8px;padding-inline:10px 12px;border-radius:3px;background:rgba(19,21,24,.94);
  border:1px solid var(--night-line-2);color:var(--night-text);font-family:"Public Sans",sans-serif;font-size:.8rem}
.cur-floor b{display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:2px;background:var(--accent);color:#fff;font-weight:800}
.cur-floor i{font-style:normal;max-inline-size:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dir-screens{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.beat:not(:has(> .n)){grid-template-columns:1fr}

/* Finish-review round 2: the hero screen fits its window whole (two rows and three sidebar items
   fewer), so there is no fade cropping a row; the phone panel sits on the sign's own surface;
   the phone floor chip lifts off the dark footer. */
.dir-screens{max-block-size:none;overflow:visible;-webkit-mask-image:none;mask-image:none;border:0}
.dir-screens .frame.shot img{max-block-size:300px}
.frame.shot.phone{padding-block:18px;background:#0c0d0f;border:1px solid var(--night-line-2);border-radius:4px}
.frame.shot.phone img{max-block-size:300px;border-width:5px}
.cur-floor{background:#2a2f35;border-color:rgba(255,255,255,.22)}
.cur-floor i{max-inline-size:16ch}
.hero-right .app{min-height:0}

/* Lift car (wayfinding motion): a copper car slides behind the numerals; the current link
   drops its own fill while the car is present. Without motion the link keeps its fill. */
.lift.has-car{position:fixed}
.lift-car{position:absolute;inset-inline-start:6px;inset-block-start:8px;inline-size:30px;block-size:30px;border-radius:2px;background:var(--accent);z-index:0;pointer-events:none}
.lift.has-car a{z-index:1}
.lift.has-car a[aria-current="true"]{background:transparent}
.dir-sign{perspective:900px}

/* the shadow sits on the static wrapper, not the rotating SVG, so scrubbing never repaints it */
.stage svg#tower{filter:none}
.stage .tower-wrap{filter:drop-shadow(0 34px 64px rgba(0,0,0,.55))}

/* Section motion (2026-10-13) */
#problem .beat b.struck{--s:0%;background:linear-gradient(var(--accent),var(--accent)) 0 58%/var(--s) 2px no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
[dir="rtl"] #problem .beat b.struck{background-position:100% 58%}
#start .steps{position:relative}
#start .steps .steps-rail{position:absolute;inset-inline-start:13px;inset-block:6px;inline-size:2px;background:var(--accent);transform-origin:top center;opacity:.9}
#start .steps li.lit::before{background:var(--accent);color:#fff;border-color:var(--accent);transition:background .3s,color .3s}
/* Step numbers become sign chips the rail runs behind. */
#start ol.steps li::before{display:grid;place-items:center;inline-size:28px;block-size:28px;top:22px;left:0;z-index:1;
  border:1px solid var(--line-strong);background:var(--paper);border-radius:3px;font-family:"Public Sans",sans-serif;font-weight:800;color:var(--ink)}
#start .steps .steps-rail{z-index:0}
/* Cards that slide in from the sides start outside the column; clip (not hidden) so the page never scrolls sideways and sticky sections keep working. */
main{overflow-x:clip}

/* Directory board rows (2026-10-13). */
.tenants-board{margin-block-start:34px;background:#0c0d0f;border:1px solid var(--night-line-2);border-radius:4px;padding:6px}
.tenants-board .tb-head{display:flex;justify-content:space-between;padding:10px 14px 8px;font-family:"Public Sans",sans-serif;
  font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--night-faint)}
.tenants-board ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.tenants-board li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;min-width:0;padding:13px 14px;
  border-block-start:1px solid rgba(255,255,255,.07);border-inline-start:1px solid rgba(255,255,255,.07)}
.tenants-board li:nth-child(4n+1){border-inline-start:0}
.tenants-board b{font-family:"Public Sans",sans-serif;font-weight:700;font-size:1rem;color:var(--night-text)}
.tenants-board i{font-style:normal;font-family:"Public Sans",sans-serif;font-weight:600;font-size:.74rem;color:var(--night-faint);
  padding:3px 8px;border:1px solid var(--night-line-2);border-radius:2px;white-space:nowrap}
.tenants-board li.live i{background:var(--accent);border-color:var(--accent);color:#fff}
.tenants-board .note{padding:14px 14px 10px;margin:0;border-block-start:1px solid rgba(255,255,255,.07)}
@media(max-width:860px){.tenants-board ul{grid-template-columns:repeat(2,1fr)}.tenants-board li:nth-child(4n+1){border-inline-start:1px solid rgba(255,255,255,.07)}.tenants-board li:nth-child(2n+1){border-inline-start:0}}

/* Tower section (2026-10-13 fix): the building is sized to the screen and centred beside the
   text, so it is never cut off under the header and no empty band is left below the copy. */
@media(min-width:1000px){
  .stage-inner > div:last-child{align-self:center}
  .stage svg#tower{max-block-size:max(240px, calc(100dvh - 190px));inline-size:auto;max-inline-size:100%}
}

/* Cinematic pass (2026-10-13) */
@property --sky{syntax:"<color>";inherits:true;initial-value:#131518}
.stage{background:var(--sky,var(--night))}
.js #who,.js #demo{will-change:clip-path}

/* Centres strip (2026-10-13, second pass): the register's business centres by name, running
   the full width of the screen like a street seen from a moving car. The head line stays in the
   column; the track breaks out of it to both screen edges. Two copies of the set make the -50%
   loop seamless; hover, focus or the Pause button stop it; reduced motion turns it into a plain
   horizontal scroller. Live centres are solid with a copper tag; the six still moving in sit at
   lower weight, so the strip itself shows how far the rollout has got. */
.centres{margin-block-start:44px}
.centres-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-block-end:8px}
.centres-head p{flex:1 1 320px;margin:0;color:var(--night-soft);font-size:.98rem}
.centres-head p b{color:var(--night-text);font-family:"Public Sans",sans-serif}
.centres-pause{margin-inline-start:auto;min-block-size:44px;padding-inline:16px;background:none;border:1px solid var(--night-line-2);color:var(--night-text);
  font:600 .85rem "Public Sans",sans-serif;border-radius:3px;cursor:pointer}
.centres-pause:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}
.centres-track{overflow:hidden;margin-inline:calc(50% - 50vw);border-block:1px solid var(--night-line)}
.centres-row{display:flex;align-items:center;list-style:none;margin:0;padding:clamp(18px,2.6vw,30px) 0;inline-size:max-content;animation:centres-drift 52s linear infinite}
/* only the track itself pauses on hover/focus, so the Pause/Play button is never fighting it */
.centres-track:hover .centres-row,.centres-track:focus-within .centres-row,.centres.paused .centres-row{animation-play-state:paused}
@keyframes centres-drift{to{transform:translateX(-50%)}}
[dir="rtl"] .centres-row{animation-direction:reverse}
.centres-row li{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);padding-inline-start:clamp(22px,2.6vw,40px);white-space:nowrap}
.centre-name{font:800 clamp(2rem,5.2vw,4.4rem)/1 "Public Sans",sans-serif;letter-spacing:-.035em;color:var(--night-text);opacity:.5;transition:opacity .3s}
.centres-row li.live .centre-name{opacity:1}
.centres-row li:hover .centre-name{opacity:1}
.centre-tag{align-self:flex-start;margin-block-start:.5em;font:500 .68rem/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:5px 7px 4px;border-radius:2px}
/* the separator is the logo's lit window: one copper square between names */
.centre-mark{inline-size:clamp(9px,.9vw,13px);block-size:clamp(9px,.9vw,13px);background:var(--accent-lift);flex:none;margin-inline-start:clamp(8px,1vw,18px)}
.live-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:var(--accent-lift);box-shadow:0 0 0 4px rgba(212,120,73,.18);vertical-align:middle}
/* the product ticker below runs the other way, so the two bands read as depth, not repetition */
.proof + .strip .strip-in{animation-direction:reverse}
@media(prefers-reduced-motion:reduce){
  .centres-row{animation:none}
  .centres-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .centres-track:focus-visible{outline:2px solid var(--accent-lift);outline-offset:4px}
  .centres-row li[aria-hidden="true"]{display:none}
  .centres-pause{display:none}
}

/* ── LIQUID GLASS (2026-10-13) ────────────────────────────────────────────────
   Anthony: "liquid like apple liquid", on the website itself. Apple's Liquid Glass (WWDC 2025,
   apple.com/newsroom, fetched 13 Oct): a translucent material that "behaves like glass in the
   real world", refracts what is behind it, carries specular highlights that respond to movement,
   takes its colour from the content around it; controls and navigation float as "a distinct
   functional layer" above the content; controls morph between states; tab bars shrink as you
   scroll down and expand as you scroll back up. Applied here to the controls only (bar, buttons,
   lift, tabs, directory, demo bar), never to text blocks, so reading stays on solid ground.
   The material: a saturating backdrop blur, a top specular rim and a lower inner shade (the
   thickness of the glass), a soft lift shadow, capsule corners; a highlight that follows the
   pointer (--gx/--gy, set by assets/menu.js). Without backdrop-filter support the tint alone
   is dense enough to read. */
:root{
  --glass-dark:rgba(24,26,30,.46);
  --glass-light:rgba(255,255,255,.52);
  --glass-shadow:0 12px 34px -14px rgba(0,0,0,.5);
  --glass-rim:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.07);
  --glass-rim-light:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(22,21,15,.06),inset 0 0 0 1px rgba(255,255,255,.55);
  --glass-blur:blur(18px) saturate(1.8);
}
.lift,.dir-sign,.tabbar,.cur-floor,.centres-pause,nav.links.open,.btn-line,.night .btn-line,header .bar::after{
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
/* the pointer's highlight on every glass surface */
/* .lift is left out of this list on purpose: it is position:fixed (left edge, vertically
   centred), and a later position:relative here would drop it into the page flow whenever the
   lift car never arrives (reduced motion, or before GSAP loads). Fixed already contains its
   ::before highlight and the car. */
header .bar,.dir-sign,.tabbar,.btn,.demo-bar a,.cur-floor,.centres-pause{position:relative;isolation:isolate}
.lift{isolation:isolate}
header .bar::before,.lift::before,.dir-sign::before,.tabbar::before,.btn::before,.demo-bar a::before,.cur-floor::before,.centres-pause::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(160px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),transparent 65%);
}
header .bar:hover::before,.lift:hover::before,.dir-sign:hover::before,.tabbar:hover::before,.btn:hover::before,
.demo-bar a:active::before,.cur-floor:hover::before,.centres-pause:hover::before{opacity:1}

/* The bar floats: a glass capsule above the content, not a strip across it. */
header,header.solid,header.light{background:none;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
header .bar{width:calc(100% - 24px);max-width:1180px;height:60px;margin:12px auto 0;padding:0 8px 0 20px;border-radius:999px;
  transition:max-width .55s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1)}
/* The glass itself is the bar's ::after, not the bar: an element with backdrop-filter becomes a
   "backdrop root", and the phone menu panel inside the bar would then blur only the bar, leaving
   the page sharp behind its links. */
header .bar::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 50%,rgba(255,255,255,.04)),var(--glass-dark);
  box-shadow:var(--glass-rim),var(--glass-shadow);transition:background .35s,box-shadow .35s}
header.light .bar::after{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.18) 55%,rgba(255,255,255,.3)),var(--glass-light);
  box-shadow:var(--glass-rim-light),0 12px 34px -16px rgba(22,21,15,.28)}
/* scrolling down: the bar condenses toward the content; scrolling up: it opens again */
@media(min-width:1001px){header.shrink .bar{max-width:900px;height:54px}}
header .bar-actions .btn-sm{min-height:42px}
@media(max-width:1000px){
  header .bar{padding:0 6px 0 16px}
  .menu-btn{border-radius:999px;border-color:rgba(255,255,255,.14)}
  header.light .menu-btn{border-color:rgba(22,21,15,.1)}
  nav.links.open{left:12px;right:12px;top:calc(100% + 8px);padding:6px 18px 10px;border:0;border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(18,20,24,.86);box-shadow:var(--glass-rim),var(--glass-shadow);
    -webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8)}
  header.light nav.links.open{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.3)),rgba(250,249,246,.88);box-shadow:var(--glass-rim-light),0 14px 34px -16px rgba(22,21,15,.3)}
  nav.links.open a:last-child{border-bottom:0}
}

/* Buttons are capsules. The primary is copper glass: the colour under a clear top layer, a
   bright rim and a darker lower edge, so it reads as a lens of copper, not a flat chip. */
.btn{border-radius:999px}
.btn-accent,.btn-accent:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.05) 48%,rgba(0,0,0,.08)),var(--accent);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 4px rgba(90,30,8,.28),0 10px 26px -12px rgba(176,85,43,.75)}
.btn-accent:hover{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08) 48%,rgba(0,0,0,.05)),var(--accent-lift)}
.btn-line{background:rgba(255,255,255,.4);border-color:rgba(22,21,15,.1);box-shadow:var(--glass-rim-light),0 8px 22px -14px rgba(22,21,15,.3)}
.btn-line:hover{background:rgba(255,255,255,.62);border-color:rgba(22,21,15,.16)}
.night .btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:var(--glass-rim),0 8px 22px -14px rgba(0,0,0,.6)}
.night .btn-line:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}

/* The lift: a glass capsule; the current floor is a copper drop of glass inside it. */
.lift{border-radius:999px;padding:8px 6px;border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(20,22,26,.8);box-shadow:var(--glass-rim),var(--glass-shadow)}
.lift a{color:var(--night-soft)}
.lift a{border-radius:999px;transition:background .3s,color .3s}
.lift a[aria-current="true"]{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.04) 55%),var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -4px rgba(176,85,43,.8)}
/* with motion, the copper lens is the lift car that travels between floors (wayfinding.js),
   so the current link itself stays clear */
.lift.has-car a[aria-current="true"]{box-shadow:none}
.lift-car{border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.04) 55%),var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -4px rgba(176,85,43,.8)}
.lift a span{border-radius:999px;padding:5px 10px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  background:rgba(20,22,26,.78);box-shadow:var(--glass-rim)}

/* The hero's directory: a dark glass slab with concentric corners (outer 22, rows 14). */
.dir-sign{border-radius:22px;padding:8px;border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 40%,rgba(255,255,255,.03)),rgba(14,15,18,.55);
  box-shadow:var(--glass-rim),0 24px 50px -22px rgba(0,0,0,.7)}
.dir-sign .dir-row{border-radius:14px}

/* Product tabs: a glass segmented control whose selection is a lens that slides between
   tabs (the thumb is placed by site.js; without it the selected tab carries the lens itself). */
.tabbar{display:inline-flex;flex-wrap:nowrap;gap:2px;padding:5px;margin-top:44px;border:0;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35)),rgba(236,234,227,.6);
  box-shadow:var(--glass-rim-light),inset 0 1px 3px rgba(22,21,15,.08),0 10px 28px -16px rgba(22,21,15,.3)}
.tabbar button{z-index:1;padding:11px 20px;margin:0;border-radius:999px;font-size:.96rem;white-space:nowrap}
.tabbar button::after{display:none}
.tabbar:not(.has-thumb) button[aria-selected="true"],.tab-thumb{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.82));
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(22,21,15,.1),0 6px 16px -8px rgba(22,21,15,.35)}
.tab-thumb{position:absolute;z-index:0;inset-block:5px;inset-inline-start:0;border-radius:999px;pointer-events:none;
  transition:translate .5s cubic-bezier(.3,1.3,.5,1),inline-size .5s cubic-bezier(.3,1.3,.5,1)}
.tab-thumb::after{content:"";position:absolute;inset-inline:22%;inset-block-end:4px;block-size:2px;border-radius:2px;background:var(--z,var(--accent))}
@media(max-width:700px){
  .tabbar{display:flex;inline-size:100%;overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .tabbar button{padding:10px 16px;font-size:.9rem;flex:none}
}

/* The centres' pause button and the phone's floor chip and demo bar, in the same glass. */
.centres-pause{border-radius:999px;border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);box-shadow:var(--glass-rim)}
.cur-floor{border-radius:999px;border:0;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),rgba(22,24,28,.62);
  box-shadow:var(--glass-rim),var(--glass-shadow)}
.cur-floor b{border-radius:999px}
.demo-bar a{border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 50%,rgba(0,0,0,.08)),var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 4px rgba(90,30,8,.3),0 14px 30px -12px rgba(176,85,43,.8)}
@media(prefers-reduced-motion:reduce){header .bar,.tab-thumb,.lift a{transition:none}}

/* ── SHAPE SYSTEM (2026-10-13) ────────────────────────────────────────────────
   Anthony, after the glass pass: "isnt it super varied between curved and squared shapes now?
   did you revise everything?" It was: the controls had become capsules while every card, field
   and badge kept the old 2–5px corners. Measured on the rendered pages (76 kinds of box, ten
   different radii). One system now, Apple's concentric rule (an inner corner = its container's
   corner minus the gap between them):
     capsule  999px  every control and label: buttons, tabs, chips, tags, plates, the skip link
     circle   50%    every floor number, as a lift's call button (lift, directory, headings, plate)
     card     22px   panels and cards: plans, lanes, the pricing list, store badges, callouts
     window   18px   the product screenshot frame (a window, so slightly tighter than a card)
     field    14px   form fields and the rows inside the 22px directory (22 − 8 padding)
     mark      3px   tiny swatches and the logo's lit window, which stay square on purpose
   Hairlines that divide (stats, beats, the directory board, FAQ, footer) are lines, not shapes,
   and stay square. Inside the product screenshot the UI is the
   real app's and follows the app's own shape system (apps/admin globals.css, the same family:
   capsule controls, 12px fields and tables, 10px sidebar rows), so the screenshot stays true. */
:root{--r-cap:999px;--r-card:22px;--r-window:18px;--r-field:14px;--r-mark:3px}
/* controls and labels: capsules */
.sign-plate,.centre-tag,.skip,.skip:focus{border-radius:var(--r-cap)}
.skip:focus{left:12px;top:12px}
/* floor numbers: round call buttons */
.sign-plate .lv,.dir-row .fl,.floor-chip{border-radius:50%}
.floor-chip{inline-size:1.12em;block-size:1.12em}
/* cards and panels, with what is inside them clipped to the same curve */
.plans,.lanes,.grid-list{border-radius:var(--r-card);overflow:hidden}
#everything .grid-list{border-radius:0;overflow:visible}
.store{border-radius:var(--r-card);padding-inline:17px 24px}
.legal .callout{border-radius:var(--r-field);border-left:0;box-shadow:inset 3px 0 0 var(--accent)}
/* the product window */
.frame,.frame::after{border-radius:var(--r-window)}
/* fields */
form.book input,form.book select,form.book textarea{border-radius:var(--r-field)}
/* tiny marks */
.legend i,.centre-mark{border-radius:var(--r-mark)}

/* The product inside the window, matching the app's shape system (2026-10-13). */
.frame .side a{margin-inline:8px;padding-inline:12px;border-left:0;border-radius:10px}
.frame .side a.on{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.frame .side .bld .sq{border-radius:12px}
.frame .side a .d{border-radius:4px}
.frame .pane-head .go,.frame .tabs b{border-radius:999px}
.frame table.rows{border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden}