/* ═══════════════════════════════════════════════════════════════════════════════
   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 */
  --ink:#16150f; --ink-soft:#55524a; --ink-faint:#7c776c;
  --paper:#f7f5f0; --surface:#fff; --line:#e3dfd6; --line-strong:#d3cec2;
  --accent:#b0552b; --accent-ink:#fff; --accent-lift:#c9683a;
  --ok:#2d784c; --ok-soft:#e7f1ea;
  --warn:#8e6200; --warn-soft:#f5edd8;
  --bad:#b4332a; --bad-soft:#f6e4e2;

  /* night set — site only */
  --night:#100f0b; --night-2:#1a1812; --night-3:#232019;
  --night-line:rgba(255,255,255,.09); --night-line-2:rgba(255,255,255,.14);
  --night-text:#f2efe6; --night-soft:#a8a396; --night-faint:#78736a;

  --w:1200px; --pad:22px; --r:2px;
  --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 "Geist",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:"Archivo",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:"Geist 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:"Geist 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:"Geist",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,.72);backdrop-filter:blur(12px);border-bottom-color:var(--night-line)}
header.light{background:rgba(247,245,240,.8);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:"Archivo",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)}
@media(max-width:1000px){nav.links{display:none}.bar-actions{margin-left:auto}}
@media(max-width:560px){.bar-actions .signin{display:none}}

/* ── 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}}
.line{overflow:hidden;display:block}
.line > span{display:block;transform:translateY(106%)}
/* 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:scaleX(0);transform-origin:left;transition:transform .85s var(--ease);
}
.uline.drawn::after{transform:scaleX(1)}
.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:"Geist 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:"Geist 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:"Geist Mono",monospace;font-size:.68rem;font-weight:400;
  color:var(--ink-faint);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:"Archivo",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:"Geist 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:"Geist 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}
table.rows .ref{font-family:"Geist 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:"Geist 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:"Archivo",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:"Geist Mono",monospace;font-size:.72rem;color:var(--accent)}
.beat b{font-family:"Archivo",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:"Geist Mono",monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}

/* ── SHOWSTOPPER ──────────────────────────────────────────────────────────── */
.stage{position:relative;height:230vh;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:center}
@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)}
.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:"Geist 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:"Archivo",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}}

.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 ──────────────────────────────────────────────────────── */
.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}
.gi:hover{background:#fffdfa}
.gi b{font-family:"Archivo",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}

/* ── 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{font-family:"Geist Mono",monospace;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lift);margin-bottom:16px}
.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:"Geist Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.plan .fig{font-family:"Archivo",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:"Geist Mono",monospace;font-size:.8rem;color:var(--accent)}
ol.steps b{display:block;font-family:"Archivo",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:"Archivo",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:"Archivo",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:"Geist 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 "Geist",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:"Geist 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{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{transform:none!important}
  .uline::after{transform:scaleX(1)!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:"Geist 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:"Geist 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 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}

/* Feature cells: a hairline that draws from the left as the cell is approached, and a light
   that tracks the cursor across the grid. Cheap — one gradient, one scaled pseudo-element. */
.gi{position:relative;overflow:hidden}
.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)}

/* 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{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:"Geist 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}
.night .strip 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:"Geist 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:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.3)}
.legend .k-unit{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35)}
.legend .k-open{background:rgba(176,85,43,.35);border:1px solid var(--accent)}