/* Bercroft / Elevation — shared design system.
   Loaded by every page so the whole site reads as one system, in both themes. */

:root{
  /* ---- theme-dependent (flip with data-theme / prefers-color-scheme) ---- */
  --bg:#ffffff; --surface:#f6f5f2; --surface-2:#eeece7;
  --card:#ffffff; --card-2:#fbfaf8;
  --line:#e8e7e2; --line-2:#f0efea; --line-strong:#dad9d3;
  --ink:#0e0f11; --grey:#6f7278; --grey-2:#9a9da0;
  --accent:#0f7a5a;
  --shadow-a:rgba(14,15,17,.4); --shadow-b:rgba(14,15,17,.18);

  /* ---- constant across both themes (the "signature dark" accent bands) ---- */
  --void:#0e0f11; --void-2:#08090a;
  --on-void:#ededea; --grey-void:#9a9da3;
  --line-void:rgba(255,255,255,.12); --line-void-2:rgba(255,255,255,.06);

  --sans:'Inter','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --maxw:1180px; --ease:cubic-bezier(.2,.7,.2,1);
  /* Corner radius, everywhere. --r is panels and cards, --rs is controls.
     Deliberately near-square: the brand is an architect's drawing sheet and
     a humanist wordmark, and soft pill corners fought both. Genuine circles
     — status dots, the spinner, the success tick — are left alone; they are
     a different idiom from a rounded corner. */
  --r:3px; --rs:2px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08090b; --surface:#101216; --surface-2:#15181d;
    --card:#131519; --card-2:#191c22;
    --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
    --ink:#f2f1ee; --grey:#9a9da3; --grey-2:#7a7d84;
    --accent:#2fbf8a;
    --shadow-a:rgba(0,0,0,.6); --shadow-b:rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#08090b; --surface:#101216; --surface-2:#15181d;
  --card:#131519; --card-2:#191c22;
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
  --ink:#f2f1ee; --grey:#9a9da3; --grey-2:#7a7d84;
  --accent:#2fbf8a;
  --shadow-a:rgba(0,0,0,.6); --shadow-b:rgba(0,0,0,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* the nav is fixed, so anchor targets must stop clear of it rather than
   sliding underneath */
:target,section[id],header[id]{scroll-margin-top:96px}
@media (max-width:640px){ :target,section[id],header[id]{scroll-margin-top:86px} }
body{font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:17px; line-height:1.6; overflow-x:hidden; letter-spacing:-.01em;
  transition:background .3s var(--ease), color .3s var(--ease)}
h1,h2,h3,h4{font-weight:600; letter-spacing:-.03em; line-height:1.05}
::selection{background:var(--ink); color:var(--bg)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey)}
.eyebrow.on-dark{color:var(--grey-void)}
.eyebrow .tick{color:var(--accent)}
.grey{color:var(--grey)} .on-dark .grey{color:var(--grey-void)}

/* ---- brand lockups ----
   Header/company = Bercroft. Product = Elevation, used where the software
   itself is introduced. Keeping the two apart matters and has been got wrong
   before: the Elevation mark does not belong in the site header. */
.logo{display:inline-flex; align-items:center; gap:12px}

/* Bercroft — the company wordmark, in the header and footer.
   Set in Optima and converted to outlines by tools/wordmark.swift, so a
   visitor without the font still sees the real letterforms.

   Drawn as a mask filled with currentColor rather than an <img>, which means
   one file serves both themes. The previous site shipped the wordmark as a
   light PNG and a dark PNG and swapped them in markup — two assets, two <img>
   tags on every page, and a rule in the handover explaining the swap. There is
   now nothing to swap: it inherits the ink colour like text does.

   The width is computed from the height rather than left to aspect-ratio,
   which only fills in a dimension that is *missing*. As a block-level span the
   width is already auto — meaning fill the parent — so aspect-ratio was
   ignored and the footer mark measured 435px with the artwork letterboxed
   inside it, pushing the whole page sideways on a phone. Set the height and
   the width follows. */
.wordmark{--wm-h:20px; --wm-ratio:7.243;
  display:block; height:var(--wm-h); width:calc(var(--wm-h) * var(--wm-ratio)); color:var(--ink);
  background:currentColor;
  -webkit-mask:url('../img/wordmark.svg') left center/contain no-repeat;
  mask:url('../img/wordmark.svg') left center/contain no-repeat}

/* Elevation — the product */
.el-mark{width:32px; aspect-ratio:512/441; flex:none;
  background:url('../img/elevation-mark-dark.png') center/contain no-repeat}
:root[data-theme="dark"] .el-mark{background-image:url('../img/elevation-mark-light.png')}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .el-mark{background-image:url('../img/elevation-mark-light.png')}
}
.el-word{display:flex; flex-direction:column; line-height:1.05}
.el-word b{font-size:20px; font-weight:600; letter-spacing:-.03em; color:var(--ink)}
.el-word i{font-style:normal; font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--grey); margin-top:3px}

/* Elevation identity block — introduces the software in the product section */
.el-intro{display:flex; align-items:center; gap:18px; padding-bottom:30px; margin-bottom:34px; border-bottom:1px solid var(--line)}
.el-intro .el-mark{width:54px}
.el-intro .txt b{display:block; font-size:30px; font-weight:600; letter-spacing:-.032em; color:var(--ink); line-height:1}
.el-intro .txt span{display:block; font-size:14.5px; color:var(--grey); margin-top:7px}
@media (max-width:640px){
  .el-intro{gap:14px; padding-bottom:24px; margin-bottom:26px}
  .el-intro .el-mark{width:42px}
  .el-intro .txt b{font-size:24px}
  .el-intro .txt span{font-size:13.5px}
}

/* The footer sits on the constant dark void whatever the site theme is doing,
   so it takes the constant on-void ink rather than --ink. Same single wordmark
   as the header, larger — the old site kept a separate stacked logo file in two
   inks for this one spot. */
.brand{--wm-h:40px; color:var(--on-void)}
@media (max-width:640px){ .brand{--wm-h:30px} }

/* nav */
nav{position:fixed; inset:0 0 auto 0; z-index:60; height:78px; display:flex; align-items:center; transition:background .35s var(--ease), border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent}
nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px}
nav .links{display:flex; gap:32px; align-items:center}
nav .links a{font-size:14px; font-weight:450; color:var(--ink); opacity:.66; transition:opacity .2s}
nav .links a:hover{opacity:1}
nav .right{display:flex; align-items:center; gap:14px}
nav .cta{font-size:13.5px; font-weight:500; padding:10px 18px; border-radius:var(--r); background:var(--ink); color:var(--bg); transition:transform .2s, box-shadow .3s}
nav .cta:hover{transform:translateY(-1px); box-shadow:0 8px 24px var(--shadow-b)}
nav.scrolled{background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.5) blur(16px); border-color:var(--line)}
.theme-btn{width:36px; height:36px; border-radius:var(--r); border:1px solid var(--line-strong); background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:border-color .2s, background .2s}
.theme-btn:hover{background:var(--surface)}
.theme-btn svg{width:16px; height:16px}
/* One click flips light <-> dark. An untouched visit still follows the device;
   the button always shows the theme it will switch *to*, so it reads as a
   plain on/off rather than a cycle you have to click through. */
.theme-btn .sun{display:none}
.theme-btn .moon{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}

/* mobile nav — hidden above 940px; nav .links themselves hide below it */
.menu-btn{display:none; width:36px; height:36px; border-radius:var(--r); border:1px solid var(--line-strong); background:transparent; color:var(--ink); align-items:center; justify-content:center; cursor:pointer; flex:none}
.menu-btn svg{width:18px; height:18px}
.menu-btn .xicon{display:none}
.menu-btn.open .bars{display:none}
.menu-btn.open .xicon{display:block}
.mobile-menu{position:fixed; top:78px; left:0; right:0; z-index:59; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 20px 40px -20px var(--shadow-b);
  padding:8px 28px 20px; display:flex; flex-direction:column; transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform .25s var(--ease), opacity .2s}
.mobile-menu.show{transform:none; opacity:1; pointer-events:auto}
.mobile-menu a{padding:15px 2px; font-size:16.5px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line-2)}
.mobile-menu a:last-child{border-bottom:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .moon{display:none}
  :root:not([data-theme="light"]) .theme-btn .sun{display:block}
}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:500; padding:14px 24px; border-radius:var(--r); border:1px solid transparent; cursor:pointer; transition:transform .2s var(--ease), box-shadow .3s, background .2s, color .2s, border-color .2s; font-family:inherit}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--ink); color:var(--bg)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px var(--shadow-b)}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-line:hover{border-color:var(--ink)}
.btn-onink{background:#fff; color:var(--void)}
.btn-onink:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.35)}
.btn-ghost-d{background:transparent; color:var(--on-void); border-color:var(--line-void)}
.btn-ghost-d:hover{border-color:var(--on-void)}
.btn[disabled]{opacity:.55; cursor:default; transform:none!important; box-shadow:none!important}

section{position:relative}
.band{padding:118px 0}
.band.dark{background:var(--void); color:var(--on-void)}
.band.soft{background:var(--surface)}
.kicker{font-size:clamp(28px,3.8vw,48px); font-weight:600; letter-spacing:-.03em; line-height:1.08}
.p-lg{font-size:18px; line-height:1.6; color:var(--grey)}
.band.dark .p-lg{color:var(--grey-void)}
.center{text-align:center}
.sec-head{max-width:640px}
.sec-head.center{margin:0 auto}
.sec-head .kicker{margin-top:16px}
.sec-head p{margin-top:16px}

/* hero */
.hero{padding:138px 0 90px; position:relative; overflow:hidden; background:radial-gradient(120% 80% at 50% -10%, var(--surface), var(--bg) 60%)}
.hero .grid-bg{position:absolute; inset:0 0 auto 0; height:620px; opacity:.5; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px; mask-image:radial-gradient(90% 70% at 50% 0,#000,transparent 75%)}
.hero .wrap{position:relative; z-index:2; text-align:center}
.hero .eyebrow{margin-bottom:22px}
.hero h1{font-size:clamp(40px,6.6vw,78px); font-weight:600; letter-spacing:-.038em; line-height:1.0; max-width:15ch; margin:0 auto}
.hero h1 .soft{color:var(--grey)}
.hero .sub{margin:26px auto 0; max-width:60ch; font-size:clamp(17px,1.5vw,20px); color:var(--grey); line-height:1.6}
.hero .actions{margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero .fine{margin-top:18px; font-size:13.5px; color:var(--grey)}

/* generic small page header (pricing / get / developers) */
.pagehead{padding:150px 0 70px; text-align:center; background:radial-gradient(120% 80% at 50% -10%, var(--surface), var(--bg) 60%)}
.pagehead .eyebrow{margin-bottom:18px}
.pagehead h1{font-size:clamp(34px,5.2vw,58px); font-weight:600; letter-spacing:-.035em; max-width:16ch; margin:0 auto}
.pagehead p{margin:20px auto 0; max-width:52ch; font-size:17.5px; color:var(--grey); line-height:1.6}

/* trust bar */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg)}
.trust .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:26px; padding-bottom:26px; flex-wrap:wrap}
.trust .t{display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--ink); font-weight:450}
.trust .t svg{width:19px;height:19px;color:var(--grey);flex:none}

/* statement */
.statement .wrap{max-width:960px}
.statement h2{font-size:clamp(28px,4.4vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1.14}
.statement h2 span{color:var(--grey)}
.statement .cols{margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:36px}
.statement .cols div{padding-top:22px; border-top:1px solid var(--line); font-size:16px; color:var(--grey); line-height:1.6}
.statement .cols b{color:var(--ink); font-weight:600}

/* feature */
.feature{display:grid; grid-template-columns:1fr 1.08fr; gap:60px; align-items:center}
.feature + .feature{margin-top:112px}
.feature.rev{grid-template-columns:1.08fr 1fr}
.feature.rev .copy{order:2}
.feature .eyebrow{margin-bottom:18px}
.feature h1,.feature h3{font-size:clamp(26px,3.4vw,42px); font-weight:600; letter-spacing:-.03em}
.feature .lead{margin-top:18px; font-size:18px; line-height:1.58; color:var(--grey)}
.fpoints{margin-top:28px; display:grid; gap:0}
.fpoint{display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--line)}
.fpoint .ic{width:26px;height:26px;border-radius:var(--rs);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.fpoint .ic svg{width:14px;height:14px;color:var(--ink)}
.fpoint b{font-weight:550; font-size:15.5px}
.fpoint span{display:block; font-size:14px; color:var(--grey); margin-top:2px}

/* ============ themed product visuals (app's own colour language — never a screenshot) ============ */
.demo{background:linear-gradient(165deg,#141c31,#0a0f1e); border:1px solid rgba(255,255,255,.09); border-radius:var(--r); padding:24px 24px 26px; box-shadow:0 34px 80px -40px rgba(10,15,31,.55); position:relative; overflow:hidden; color:#e6e9f2}
.demo::after{content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 88% -5%,rgba(99,102,241,.16),transparent 58%); pointer-events:none}
.demo-h{display:flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#8a93aa; margin-bottom:18px; position:relative; z-index:1}
.demo-h .dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
/* the product mark inside its own dark UI panel — always the light-ink file,
   since these panels are dark in both site themes */
.demo-h .el-mark-inline{width:16px; aspect-ratio:512/441; flex:none;
  background:url('../img/elevation-mark-light.png') center/contain no-repeat}
.demo-b{position:relative; z-index:1}

.stk{display:grid; grid-template-columns:repeat(6,1fr); gap:7px}
.stk .cell{height:40px; border-radius:var(--rs); display:flex; flex-direction:column; justify-content:center; padding:0 8px; font-family:ui-monospace,'Cascadia Mono',monospace}
.stk .cell b{font-weight:600; font-size:10.5px; letter-spacing:0}
.stk .cell span{font-size:8px; opacity:.72; margin-top:1px}
.c-av{border:1.5px solid #22c55e; color:#86e5aa}
.c-hold{border:1px solid #fbbf24; background:repeating-linear-gradient(45deg,rgba(251,191,36,.2) 0 4px,transparent 4px 8px); color:#fcd34d}
.c-book{background:#5b60e6; color:#eef0ff}
.c-agr{background:#0f9d8f; color:#d6fff8}
.c-reg{background:#0e9e63; color:#dcffe9}
.stk-legend{display:flex; flex-wrap:wrap; gap:13px; margin-top:17px; font-size:11px; color:#9aa2b8}
.stk-legend i{display:inline-flex; align-items:center; gap:6px; font-style:normal}
.stk-legend .sw{width:11px;height:11px;border-radius:var(--rs);display:block}

.glance{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-bottom:15px}
.gtile{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:var(--r); padding:11px 13px; display:flex; align-items:center; gap:11px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.gk{font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:#8a93aa}
.gv{font-size:16px; font-weight:600; color:#eef0ff; margin-top:2px; white-space:nowrap}
.gv small{font-size:10px; font-weight:400; color:#9aa2b8}
.ring{width:36px; height:36px; flex:none}
.ring circle{fill:none; stroke-width:3.6}
.ring .bg{stroke:rgba(255,255,255,.13)}
.ring .fg{stroke:#34d399; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center}

.wbs-demo{display:flex; flex-direction:column; gap:3px; font-size:13px}
.wbs-row{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--rs)}
.wbs-row .amt{margin-left:auto; font-family:ui-monospace,monospace; font-size:12px; color:#c3c9db; white-space:nowrap}
.wbs-pkg{background:rgba(99,102,241,.15); font-weight:600; color:#eef0ff}
.wbs-task{padding-left:20px; color:#dfe3ee}
.wbs-res{padding-left:38px; font-size:12px; color:#aab1c6; display:flex; align-items:center; gap:9px}
.wbs-res .rd{width:6px;height:6px;border-radius:50%;flex:none}
.wbs-res .hsn{font-family:ui-monospace,monospace; font-size:10px; color:#8188a0; background:rgba(255,255,255,.05); padding:1px 6px; border-radius:var(--rs)}

.acct-demo{display:flex; flex-direction:column; gap:15px}
.acct-src{display:flex; align-items:center; gap:10px; font-size:13.5px; color:#dfe3ee}
.acct-src .tag{background:rgba(52,211,153,.16); color:#6ee7b7; font-size:11px; padding:3px 10px; border-radius:var(--r); font-weight:600}
.acct-journal{border:1px solid rgba(255,255,255,.1); border-radius:var(--r); overflow:hidden}
.acct-journal .jr{display:flex; justify-content:space-between; gap:12px; padding:10px 14px; font-size:12.5px; border-top:1px solid rgba(255,255,255,.06)}
.acct-journal .jr:first-child{border-top:0}
.acct-journal .jr .lab{color:#cdd3e2}
.acct-journal .jr .dr{font-family:ui-monospace,monospace; color:#9aa2b8; white-space:nowrap}
.acct-journal .jr.tot{background:rgba(255,255,255,.04); font-weight:600}
.acct-journal .jr.tot .lab,.acct-journal .jr.tot .dr{color:#eef0ff}
.acct-chips{display:flex; flex-wrap:wrap; gap:8px}
.acct-chips .chip{font-size:11.5px; padding:5px 11px; border-radius:var(--r); border:1px solid rgba(255,255,255,.13); color:#c7cde0}
.acct-chips .chip b{color:#fff; font-weight:600}

/* hero "workspace" composite — the flagship visual, distinct composition, same visual language */
.orbit{max-width:1000px; margin:64px auto 0; text-align:left; padding:28px 28px 26px}
.orbit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.otile{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:var(--r); padding:15px 16px; display:flex; align-items:flex-start; gap:12px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s}
.otile .oi{width:32px; height:32px; border-radius:var(--rs); background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; flex:none}
.otile .oi svg{width:16px; height:16px; color:#c7cde0}
.otile b{display:block; font-size:13px; font-weight:600; color:#eef0ff}
.otile span{display:block; font-size:11.5px; color:#9aa2b8; margin-top:2px}
.orbit-foot{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-start; justify-content:space-between; gap:14px 24px; flex-wrap:wrap}
.orbit-foot .ofl{font-size:12.5px; color:#9aa2b8; display:flex; align-items:flex-start; gap:8px; flex:none; max-width:100%}
.orbit-foot .ofl svg,.orbit-foot .ofl b{flex:none; margin-top:1px}
.orbit-foot .ofl b{color:#eef0ff; font-weight:600}
.orbit-foot .ofl > span b{color:#eef0ff; font-weight:600; margin-top:0}
@media (max-width:720px){ .orbit-grid{grid-template-columns:repeat(2,1fr)} }

/* ============ modules — bento, tinted, less repetitive ============ */
.mod-group + .mod-group{margin-top:44px}
.mod-group h4{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:18px; display:flex; align-items:center; gap:12px}
.mod-group h4::after{content:''; flex:1; height:1px; background:var(--line)}
.mod-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:14px}
.mcard{border:1px solid var(--line); border-radius:var(--r); padding:20px 20px 22px; background:var(--card); transition:border-color .2s, transform .2s var(--ease), box-shadow .3s; display:flex; flex-direction:column}
.mcard:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 14px 30px -18px var(--shadow-b)}
.mcard .ic{width:34px;height:34px;border-radius:var(--rs);background:var(--tint,var(--surface-2));display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mcard .ic svg{width:18px;height:18px;color:var(--tint-ink,var(--ink))}
.mcard h5{font-size:15.5px; font-weight:600; letter-spacing:-.02em}
.mcard p{margin-top:6px; font-size:13.5px; color:var(--grey); line-height:1.45}
/* wide "hero" card per group — carries a tiny themed visual, breaks the grid's monotony */
.mcard.wide{grid-column:span 2; grid-row:span 1}
.mcard.wide .mc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.mcard.wide .mini{display:flex; gap:4px; margin-top:14px}
.mcard.wide .mini i{flex:1; height:22px; border-radius:var(--rs); display:block; font-style:normal}
/* tint palettes per group */
.t-indigo{--tint:rgba(99,102,241,.13); --tint-ink:#4f52d1}
:root[data-theme="dark"] .t-indigo,@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-indigo{--tint:rgba(129,140,248,.18); --tint-ink:#a5a8fb}}
.t-amber{--tint:rgba(245,158,11,.13); --tint-ink:#b4740a}
:root[data-theme="dark"] .t-amber,@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-amber{--tint:rgba(251,191,36,.18); --tint-ink:#fbbf24}}
.t-teal{--tint:rgba(15,157,143,.13); --tint-ink:#0d7a6e}
:root[data-theme="dark"] .t-teal,@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-teal{--tint:rgba(45,212,191,.18); --tint-ink:#5eead4}}

/* ============ why — varied glow per cell, not flat repeats ============ */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-void-2); border:1px solid var(--line-void-2); border-radius:var(--r); overflow:hidden; margin-top:52px}
.why-cell{background:var(--void); padding:38px 32px; position:relative; overflow:hidden}
.why-cell::before{content:''; position:absolute; inset:-40% -40% auto auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(closest-side, var(--glow,rgba(99,102,241,.22)), transparent 72%); pointer-events:none}
.why-cell .ic{width:40px;height:40px;border-radius:var(--rs);border:1px solid var(--line-void);display:flex;align-items:center;justify-content:center;margin-bottom:20px; position:relative; z-index:1}
.why-cell .ic svg{width:20px;height:20px;color:var(--on-void)}
.why-cell h4{font-size:19px; font-weight:600; margin-bottom:9px; color:var(--on-void); position:relative; z-index:1}
.why-cell p{font-size:14.5px; color:var(--grey-void); line-height:1.55; position:relative; z-index:1}
.g-indigo{--glow:rgba(99,102,241,.25)} .g-emerald{--glow:rgba(52,211,153,.22)} .g-amber{--glow:rgba(251,191,36,.2)}
.g-sky{--glow:rgba(56,189,248,.22)} .g-violet{--glow:rgba(167,139,250,.22)} .g-rose{--glow:rgba(251,113,133,.2)}

/* ============ the enquiry as a drawing sheet (pricing.html) ============
   Every construction drawing carries a title block: a ruled grid of cells,
   each labelled in its corner, holding project / client / scale / date / rev.
   It is already a form, so the enquiry is drawn as one — labels set small in
   the corner of a ruled cell, values written straight into it, no boxes nested
   inside boxes. The plate alongside carries the elevation the answers draft.
   Theme-aware throughout: the sheet is paper in light, drafting film in dark. */
.sheet{margin-top:78px; min-height:calc(100vh - 78px); padding:22px; display:flex}
/* rounded like the rest of the site's cards, so the sheet reads as part of the
   system rather than a technical drawing dropped into it */
.sheet-frame{flex:1; position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(370px,.88fr); background:var(--card); box-shadow:0 40px 90px -60px var(--shadow-a)}
/* No inner double rule: the content fills to the frame edge, so a second
   rectangle would cut straight across the tiles and cells. */

/* ---- plate: the drawing itself ---- */
.plate{display:flex; flex-direction:column; min-width:0; padding:30px 34px 22px; border-right:1px solid var(--line-strong); position:relative}
.plate::before{content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(78% 72% at 46% 58%, #000, transparent 78%);
  mask-image:radial-gradient(78% 72% at 46% 58%, #000, transparent 78%); opacity:.6}
.plate > *{position:relative; z-index:2}
.plate h1{font-size:clamp(26px,2.9vw,38px); font-weight:600; letter-spacing:-.035em; line-height:1.06; margin-top:12px; max-width:17ch}
.plate .lede{margin-top:13px; font-size:15.5px; line-height:1.55; color:var(--grey); max-width:48ch}
.plate-draw{flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:center; padding:14px 0 6px}
#elev{width:100%; height:auto; max-height:min(520px,52vh)}
/* the building is a solid mass; every opening is cut back out of it in the
   sheet's own colour, so the silhouette reads at a glance rather than as wire */
/* a shade off full ink — a pure black mass punches out of the page in light
   mode, the same way the solid-black selections did */
#elev .ink{fill:color-mix(in srgb, var(--ink) 86%, var(--surface))}
#elev .cut{fill:var(--card)}
#elev .gl{stroke:var(--grey-2); stroke-width:.5; fill:none}
#elev .crown{fill:var(--accent)}
/* only a newly added stage animates; opacity rests at 1 so a disabled
   animation still leaves the drawing visible */
#elev .st{animation:compose .42s var(--ease)}
@keyframes compose{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.plate-cap{margin-top:12px; font-size:12.5px; letter-spacing:.02em; color:var(--grey); min-height:1.3em}
.plate-cap b{color:var(--ink); font-weight:600}
.plate-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line)}
.plate-foot b{font-size:14px; font-weight:600; letter-spacing:-.01em}
.plate-foot .st{font-size:13.5px; color:var(--grey)}
.plate-foot .cnt{margin-left:auto; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---- title block: the enquiry ---- */
.tblock{display:flex; flex-direction:column; min-width:0; background:var(--card-2)}
.tb-title{display:flex; align-items:baseline; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line)}
.tb-title b{font-size:15px; font-weight:600; letter-spacing:-.01em}
.tb-title i{font-style:normal; font-size:12.5px; color:var(--grey)}
.tb-title .no{margin-left:auto; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); white-space:nowrap}
.tb-head{display:flex; align-items:center; gap:10px; padding:9px 16px; border-bottom:1px solid var(--line); background:var(--surface)}
.tb-head b{font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey)}
.tb-head .acts{margin-left:auto; display:flex; gap:6px}
/* nowrap + fixed padding so these never wrap onto a second line */
.tb-head .acts button{font-family:inherit; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border:1px solid var(--line); border-radius:var(--rs); background:transparent; color:var(--grey);
  cursor:pointer; white-space:nowrap; transition:border-color .2s, color .2s, background .2s}
.tb-head .acts button:hover{border-color:var(--ink); color:var(--ink); background:var(--card)}
/* ruled cells — label in the corner, value written straight in */
.tb-grid{display:grid; grid-template-columns:1fr 1fr}
.tcell{padding:9px 16px 10px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); min-width:0; transition:background .2s}
.tcell:nth-child(2n){border-right:0}
.tcell.wide{grid-column:1/-1; border-right:0}
.tcell:focus-within{background:var(--surface)}
.tcell label{display:block; font-size:9.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-2); margin-bottom:4px}
.tcell input,.tcell textarea{width:100%; border:0; background:transparent; color:var(--ink); font-family:inherit;
  font-size:14.5px; padding:1px 0; resize:none}
.tcell input:focus,.tcell textarea:focus{outline:none}
/* the same ruled cell, but holding an issued value rather than an input */
.tcell .v{font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tcell .v.acc{color:var(--accent); font-weight:600}
.tcell textarea{min-height:40px; line-height:1.45; font-size:14px}
.tcell ::placeholder{color:var(--grey-2)}
/* Choices sit as discrete rounded chips with gaps rather than inside a ruled
   grid — the continuous rules boxing every option read far too heavy, and
   chips match the pill language used elsewhere on the site. */
.seg{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:11px 16px 13px; border-bottom:1px solid var(--line)}
.seg button{font-family:inherit; font-size:12.5px; font-weight:500; padding:10px 2px; border:1px solid var(--line); border-radius:var(--rs);
  background:transparent; color:var(--ink); cursor:pointer; transition:background .2s, color .2s, border-color .2s; white-space:nowrap}
.seg button:hover{background:var(--surface); border-color:var(--line-strong)}
.seg button[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 10%, var(--card)); color:var(--ink);
  font-weight:600; border-color:color-mix(in srgb, var(--accent) 42%, var(--card))}
/* scope: uniform chips, symbol then name then tick */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:11px 16px 14px; border-bottom:1px solid var(--line)}
.tile{display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--rs);
  background:transparent; color:var(--ink); font-family:inherit; font-size:12.5px;
  text-align:left; cursor:pointer; min-width:0; transition:background .2s, color .2s, border-color .2s}
.tile:hover{background:var(--surface); border-color:var(--line-strong)}
.tile svg{width:15px; height:15px; flex:none; color:var(--grey); transition:color .2s}
.tile span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tile .tk{width:14px; height:14px; flex:none; border:1px solid var(--line-strong);  border-radius:var(--rs); display:flex; align-items:center; justify-content:center}
.tile .tk svg{width:9px; height:9px; opacity:0; color:var(--bg)}
/* an accent wash rather than a full ink inversion — solid black selections
   read far too heavy against the site's soft surfaces in light mode */
.tile[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 10%, var(--card)); color:var(--ink);
  border-color:color-mix(in srgb, var(--accent) 42%, var(--card))}
.tile[aria-pressed="true"] svg{color:var(--accent)}
.tile[aria-pressed="true"] .tk{background:var(--accent); border-color:var(--accent)}
.tile[aria-pressed="true"] .tk svg{opacity:1; color:#fff}
.tb-send{margin-top:auto; padding:14px 16px 16px}
.tb-send .btn{width:100%}
.tb-send .msg{margin-top:11px; font-size:13.5px; line-height:1.5; display:none}
.tb-send .msg.err{display:block; color:#c23b3b}
.tb-send .msg.ok{display:block; color:var(--accent)}
.tb-send .note{margin-top:11px; font-size:12.5px; color:var(--grey)}
.tb-send .note a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

@media (max-width:1040px){
  .sheet{padding:14px; min-height:auto}
  .sheet-frame{grid-template-columns:1fr}
  .plate{border-right:0; border-bottom:1px solid var(--line-strong); padding:24px 20px 18px}
  /* flex:1 1 0 resolves to zero height in an auto-height column, which let the
     drawing spill out over the heading — size it to its own content instead */
  .plate-draw{flex:0 0 auto; padding:18px 0 14px}
  #elev{max-height:300px}
}
@media (max-width:640px){
  .sheet{margin-top:70px; padding:10px}
  .plate{padding:20px 16px 16px}
  .tcell,.tb-title,.tb-head{padding-left:14px; padding-right:14px}
  .seg button{font-size:11.5px; padding:11px 1px}
  .tile{font-size:11.5px; padding:10px 11px; gap:7px}
  .plate-foot .cnt{margin-left:0; width:100%}
}

/* ============ pricing ============ */
.price-grid{display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:18px; margin-top:52px; justify-content:center}
.price-card{border:1px solid var(--line); border-radius:var(--r); padding:34px 30px; background:var(--card); display:flex; flex-direction:column}
.price-card.feat{background:var(--void); color:var(--on-void); border-color:var(--void)}
.price-card .tier{font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grey)}
.price-card.feat .tier{color:var(--grey-void)}
.price-card .price{font-size:42px; font-weight:600; letter-spacing:-.035em; margin:18px 0 3px}
.price-card .per{font-size:13.5px; color:var(--grey)}
.price-card.feat .per{color:var(--grey-void)}
.price-card .desc{margin:18px 0 22px; font-size:14.5px; color:var(--grey); line-height:1.55}
.price-card.feat .desc{color:var(--grey-void)}
.price-card ul{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex:1}
.price-card li{display:flex; gap:10px; font-size:14.5px; align-items:flex-start}
.price-card li svg{flex:none;width:15px;height:15px;margin-top:3px;color:var(--accent)}
.price-card.feat li svg{color:#5fd0a8}
.price-card .btn{width:100%; justify-content:center}
.price-note{text-align:center; margin-top:26px; font-size:14.5px; color:var(--grey)}
.price-note a{color:var(--ink); text-decoration:underline; font-weight:500}

/* ============ buy modal (lead form) ============ */
.modal-veil{position:fixed; inset:0; background:rgba(8,9,10,.55); backdrop-filter:blur(3px); z-index:200; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:60px 20px}
.modal-veil.show{display:flex}
.modal{width:100%; max-width:480px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:32px 32px 30px; box-shadow:0 50px 100px -40px rgba(0,0,0,.4); position:relative}
.modal .x{position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:var(--r); border:0; background:transparent; color:var(--grey); cursor:pointer; display:flex; align-items:center; justify-content:center}
.modal .x:hover{background:var(--surface)}
.modal h3{font-size:22px; font-weight:600; letter-spacing:-.03em; margin-bottom:6px}
.modal .msub{font-size:14px; color:var(--grey); line-height:1.5; margin-bottom:22px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field{margin-bottom:13px}
.field label{display:block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); margin-bottom:7px}
.field input,.field select,.field textarea{width:100%; padding:11px 13px; border:1px solid var(--line-strong); border-radius:var(--rs); background:var(--card-2); color:var(--ink); font-family:inherit; font-size:14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--ink)}
.field textarea{resize:vertical; min-height:64px}
.chiprow{display:flex; flex-wrap:wrap; gap:7px}
.chiprow label{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:7px 12px; border-radius:var(--r); border:1px solid var(--line-strong); cursor:pointer; color:var(--ink); text-transform:none; letter-spacing:0}
.chiprow input{width:auto; accent-color:var(--ink)}
.chiprow label:has(input:checked){background:var(--ink); color:var(--bg); border-color:var(--ink)}
#chips label{display:inline-flex; text-transform:none}
#chips input{width:auto}
.modal .btn{width:100%; justify-content:center; margin-top:6px}
.modal .msg{margin-top:12px; font-size:13.5px; line-height:1.5; display:none}
.modal .msg.err{display:block; color:#c23b3b}
.modal .msg.ok{display:block; color:var(--accent)}
.modal .foot{margin-top:16px; font-size:12.5px; color:var(--grey); text-align:center}

/* ============ simple centred card pages (get.html / developers.html) ============ */
.card-page{min-height:100vh; display:flex; flex-direction:column}
.card-top{height:78px; display:flex; align-items:center; padding:0 30px; justify-content:space-between}
.card-main{flex:1; display:flex; align-items:center; justify-content:center; padding:30px}

/* ============ onboarding / activation split (get.html) ============ */
.onb{min-height:100vh; display:grid; grid-template-columns:1.02fr .98fr}
.onb-side{background:var(--void); color:var(--on-void); padding:44px 54px 48px; display:flex; flex-direction:column; position:relative; overflow:hidden}
.onb-side::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 6% -4%, rgba(47,191,138,.15), transparent 56%),
             radial-gradient(90% 70% at 104% 104%, rgba(255,255,255,.07), transparent 60%)}
.onb-side::after{content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line-void-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-void-2) 1px,transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(72% 62% at 26% 26%, #000, transparent 76%);
  mask-image:radial-gradient(72% 62% at 26% 26%, #000, transparent 76%)}
.onb-side > *{position:relative; z-index:2}
.onb-side .wm{color:var(--on-void)}
.onb-hero{margin-top:auto; padding-top:60px}
.onb-hero h1{font-size:clamp(30px,3.6vw,46px); font-weight:600; letter-spacing:-.035em; line-height:1.05; max-width:15ch}
.onb-hero .sub{margin-top:18px; font-size:17px; line-height:1.6; color:var(--grey-void); max-width:46ch}
.steps{margin-top:46px}
.step{display:flex; gap:15px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line-void)}
.step .n{width:26px; height:26px; border-radius:var(--r); border:1px solid var(--line-void); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex:none; margin-top:1px}
.step b{font-weight:550; font-size:15.5px}
.step span{display:block; font-size:14px; color:var(--grey-void); margin-top:3px; line-height:1.5}
.onb-meta{margin-top:auto; padding-top:34px; font-size:12.5px; letter-spacing:.02em; color:var(--grey-void)}
.onb-main{display:flex; flex-direction:column; min-width:0}
.onb-bar{height:78px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 30px; flex:none}
.onb-card{flex:1; display:flex; align-items:center; justify-content:center; padding:0 40px 60px}
.onb-card .pcard{max-width:430px}
.done .tick{width:46px; height:46px; border-radius:100px; background:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:22px}
.done .tick svg{width:23px; height:23px; color:#fff}
.done h2{font-size:26px; font-weight:600; letter-spacing:-.03em; margin-bottom:8px}
.done .sub{font-size:15px; color:var(--grey); line-height:1.55; margin-bottom:24px}
.done .nx{border-top:1px solid var(--line)}
/* On a phone the key entry must not sit below a full screen of preamble, so the
   side panel dissolves (display:contents) and its parts are reordered around the
   form: welcome → enter key → the three steps as reference. */
@media (max-width:940px){
  .onb{display:flex; flex-direction:column; min-height:auto}
  .onb-side{display:contents}
  .onb-side > a{order:1; background:var(--void); padding:22px 22px 0}
  .onb-hero{order:2; margin-top:0; padding:24px 22px 30px; background:var(--void); color:var(--on-void)}
  .onb-hero h1{font-size:clamp(27px,7.4vw,34px)}
  .onb-hero .sub{margin-top:13px; font-size:15.5px; max-width:none}
  .onb-main{order:3}
  .steps{order:4; margin-top:0; padding:4px 22px 0; background:var(--void); color:var(--on-void)}
  .step{padding:13px 0}
  .onb-meta{order:5; margin-top:0; padding:16px 22px 30px; background:var(--void)}
  .onb-bar{height:60px; padding:0 18px}
  .onb-card{padding:4px 18px 40px}
}
.pcard{width:100%; max-width:460px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:40px 38px; box-shadow:0 40px 90px -50px var(--shadow-a)}
.pcard .badge{width:46px; height:46px; border-radius:var(--r); background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:22px}
.pcard .badge svg{width:22px; height:22px; color:var(--bg)}
.pcard h1{font-size:26px; font-weight:600; letter-spacing:-.03em; margin-bottom:8px}
.pcard .sub{font-size:15px; color:var(--grey); line-height:1.55; margin-bottom:26px}
.pcard label{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:9px}
.pcard input{width:100%; padding:14px 15px; border:1px solid var(--line-strong); border-radius:var(--r); font-family:inherit; font-size:14px; background:var(--card-2); color:var(--ink); letter-spacing:.01em}
.pcard input:focus{outline:none; border-color:var(--ink)}
.pcard .btn{width:100%; margin-top:16px}
.pcard .msg{margin-top:14px; font-size:13.5px; line-height:1.5; display:none}
.pcard .msg.err{display:block; color:#c23b3b}
.pcard .msg.ok{display:block; color:var(--accent)}
.pcard .foot{margin-top:24px; padding-top:22px; border-top:1px solid var(--line); font-size:14px; color:var(--grey); line-height:1.6}
.pcard .foot a{color:var(--ink); text-decoration:underline; font-weight:500}
.dev-res{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.dev-res a.resource{display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line-strong); border-radius:var(--r); font-size:14px; font-weight:500; transition:border-color .2s, background .2s}
.dev-res a.resource:hover{border-color:var(--ink); background:var(--surface)}
.dev-res a.resource svg{width:17px;height:17px;color:var(--grey);flex:none}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.spin.on-ink{border-color:rgba(14,15,17,.25); border-top-color:var(--ink)}
@keyframes sp{to{transform:rotate(360deg)}}

/* ============ pricing teaser on home ============ */
.price-teaser{border:1px solid var(--line); border-radius:var(--r); padding:44px 40px; background:var(--card); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-top:52px}
.price-teaser .l h3{font-size:24px; font-weight:600; letter-spacing:-.025em; margin-bottom:8px}
.price-teaser .l p{font-size:15px; color:var(--grey); max-width:44ch}
.price-teaser .r{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.price-teaser .from{text-align:right}
.price-teaser .from .k{font-size:11.5px; color:var(--grey); text-transform:uppercase; letter-spacing:.08em}
.price-teaser .from .v{font-size:28px; font-weight:600; letter-spacing:-.03em}

/* final */
.final{background:var(--void); color:var(--on-void); padding:120px 0; text-align:center; position:relative; overflow:hidden}
.final .grid-bg{position:absolute; inset:0; opacity:.4; background-image:linear-gradient(var(--line-void-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-void-2) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 72%)}
.final .wrap{position:relative; z-index:2}
.final h2{font-size:clamp(34px,5.4vw,66px); font-weight:600; letter-spacing:-.035em; max-width:16ch; margin:0 auto}
.final .sub{margin:22px auto 0; max-width:50ch; color:var(--grey-void); font-size:18px}
.final .actions{margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* footer */
footer{background:var(--void-2); color:var(--grey-void); padding:72px 0 36px}
footer .top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; padding-bottom:48px; border-bottom:1px solid var(--line-void-2)}
footer .blurb{margin-top:20px; font-size:14px; max-width:34ch; line-height:1.6}
footer h5{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:16px}
footer ul{list-style:none; display:flex; flex-direction:column; gap:11px}
footer ul a{font-size:14px; opacity:.82}
footer ul a:hover{opacity:1; color:var(--on-void)}
footer .bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; gap:16px; flex-wrap:wrap}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}

@media (max-width:940px){
  nav .links{display:none}
  .menu-btn{display:flex}
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .mcard.wide{grid-column:span 2}
  .why-grid,.statement .cols{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .feature,.feature.rev{grid-template-columns:1fr; gap:34px}
  .feature.rev .copy{order:0}
  .feature + .feature{margin-top:72px}
  .band{padding:78px 0}
  .hero{padding:112px 0 64px}
  .frow{grid-template-columns:1fr}
  .price-teaser{flex-direction:column; align-items:flex-start}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  nav{height:70px}
  .mobile-menu{top:70px}
  /* keep the header wordmark large on phones — it is the brand, and shrinking
     it was the whole complaint. 18px tall = ~230px wide, which still clears
     the theme + menu buttons inside a 390px viewport. */
  .wordmark{height:18px}
  footer .brand{height:60px}
  nav .cta{display:none}                          /* "Get Elevation" already reachable via menu + hero CTA — keep the bar uncluttered */
  .hero{padding:98px 0 52px}
  .pagehead{padding:120px 0 54px}
  .card-top{height:68px; padding:0 18px}
  .band{padding:64px 0}
  .hero .sub,.pagehead p{font-size:16px}
  .hero .actions,.final .actions{flex-direction:column; align-items:stretch}
  .hero .actions .btn,.final .actions .btn{width:100%}
  .trust .wrap{flex-direction:column; align-items:flex-start; gap:14px}
  .mod-grid{grid-template-columns:1fr}
  .mcard.wide{grid-column:span 1}
  .stk{grid-template-columns:repeat(3,1fr)}
  .orbit-grid{grid-template-columns:1fr}
  .glance{grid-template-columns:1fr 1fr; grid-auto-rows:1fr}
  .why-grid{border-radius:0; margin-left:-18px; margin-right:-18px; border-left:0; border-right:0}
  .why-cell{padding:30px 22px}
  .price-card{padding:26px 22px}
  .price-card .price{font-size:36px}
  .modal-veil{padding:0}
  .modal{max-width:100%; min-height:100%; border-radius:0; border:0; padding:24px 20px 26px}
  .frow{gap:0}
  footer .top{grid-template-columns:1fr; gap:30px}
  .final h2,.pagehead h1{letter-spacing:-.03em}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} .reveal{opacity:1; transform:none} }

/* ============================================================
   PRICING — plans, the estimator, the module catalogue
   ============================================================ */

.price-hero{padding:150px 0 10px}
.price-hero h1{font-size:clamp(34px,5vw,60px); max-width:16ch}
.price-hero .lede{margin-top:18px; font-size:18px; line-height:1.6; color:var(--grey); max-width:58ch}
.price-hero .lede b{color:var(--ink); font-weight:600}
.psec{padding:64px 0}
.psec-head{margin-bottom:30px}
.psec-head h2{font-size:clamp(24px,3vw,34px)}
.psec-head p{margin-top:11px; font-size:15.5px; color:var(--grey); max-width:62ch; line-height:1.6}

/* ---- the four plans ---- */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch}
@media (max-width:1080px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .plans{grid-template-columns:1fr} }
/* Three across rather than four. A class and not an inline style on the
   element: an inline grid-template-columns outranks every media query below
   it, so the seat bands stayed three-abreast on a phone and took the page
   509px wide. */
.plans.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){ .plans.three{grid-template-columns:1fr} }
.plan{display:flex; flex-direction:column; padding:24px 22px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); position:relative; transition:border-color .2s, transform .2s}
.plan:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.plan.pick{border-color:var(--ink); box-shadow:0 14px 40px -22px var(--shadow-a)}
.plan .tag{position:absolute; top:-9px; left:22px; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--bg); padding:4px 9px; border-radius:var(--r)}
.plan h3{font-size:19px; letter-spacing:-.02em}
.plan .line{margin-top:6px; font-size:13.5px; color:var(--grey); line-height:1.45; min-height:2.9em}
/* Pin the rows that wrap unevenly so every card's bullets start on the same
   line. Three price cards whose insides do not line up read as approximate,
   and so then do the prices. */
.plan .fig{margin-top:18px; display:flex; align-items:baseline; gap:5px; flex-wrap:wrap}
.plan .fig b{font-size:30px; font-weight:600; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.plan .fig i{font-style:normal; font-size:13px; color:var(--grey)}
.plan .plus{margin-top:5px; font-size:13px; color:var(--accent); font-weight:500}
.plan .seats{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); font-size:13.5px; color:var(--grey); min-height:3.9em}
.plan .seats b{color:var(--ink); font-weight:600}
.plan ul{list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:7px; flex:1}
.plan li{font-size:13.5px; line-height:1.45; color:var(--grey); padding-left:19px; position:relative}
.plan li::before{content:''; position:absolute; left:0; top:.5em; width:9px; height:2px; background:var(--accent); border-radius:var(--rs)}
.plan li b{color:var(--ink); font-weight:600}
.plan .go{margin-top:20px; display:block; text-align:center; font-size:13.5px; font-weight:500; padding:11px 16px; border-radius:var(--r);
  border:1px solid var(--line-strong); transition:border-color .2s, background .2s, color .2s}
.plan .go:hover{border-color:var(--ink)}
.plan.pick .go{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* ---- the configurator ----
   One rhythm throughout: 12px between things, 24px inside a panel, 56px
   between sections. Every grid is uniform and every column lines up with the
   one above it, because a price list that looks approximate reads as though
   the prices are too.

   Nothing lifts, slides or fades. Colour is the only thing that changes, and
   it changes to show a choice rather than to decorate. */

/* the figure */
.cfg-bar{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding:24px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface)}
.cfg-bar .k{font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-2)}
.cfg-bar .fig{margin-top:8px; font-size:32px; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1}
.cfg-bar .fig i{font-style:normal; font-size:14px; font-weight:400; color:var(--grey); letter-spacing:0}
.cfg-bar .mix{margin-top:8px; font-size:13px; color:var(--grey)}
.cfg-bar .sp{flex:1 1 24px}
.cfg-bar .rt{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap}
.cfg-bar .pay{font-size:12px; color:var(--grey-2); letter-spacing:.02em}
.cfg-bar .pay b{display:block; font-size:17px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:6px; letter-spacing:-.02em}
.cfg-bar .go{font-size:14px; font-weight:500; padding:12px 22px; border-radius:var(--rs); background:var(--ink); color:var(--bg); white-space:nowrap}
@media (max-width:760px){
  .cfg-bar .rt{width:100%; justify-content:space-between; align-items:center}
  .cfg-bar .go{flex:1; text-align:center}
}

.cfg-lab{margin:32px 0 12px; font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-2)}

/* the team */
.crew{display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:12px}
.mate{position:relative; display:flex; flex-direction:column; padding:16px; min-height:124px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink);
  font-family:inherit; text-align:left; cursor:pointer; transition:border-color .15s, background .15s}
.mate:hover{border-color:var(--line-strong)}
.mate[aria-current="true"]{border-color:var(--ink); background:var(--surface)}
.mate .av{width:30px; height:30px; border-radius:var(--rs); display:grid; place-items:center; margin-bottom:12px;
  background:var(--surface-2); color:var(--grey); font-size:11.5px; font-weight:600; transition:background .15s, color .15s}
.mate[aria-current="true"] .av{background:var(--ink); color:var(--bg)}
.mate .nm{font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mate .amt{margin-top:auto; padding-top:12px; font-size:17px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.mate .amt span{font-size:12px; font-weight:400; color:var(--grey); letter-spacing:0}
.mate .rm{position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:var(--rs);
  border:1px solid transparent; background:transparent; color:var(--grey-2); font-family:inherit; font-size:14px; line-height:1;
  cursor:pointer; display:grid; place-items:center; opacity:0; transition:opacity .15s, border-color .15s, color .15s}
.mate:hover .rm,.mate:focus-within .rm{opacity:1}
.mate .rm:hover{border-color:var(--line-strong); color:var(--ink)}
.tier{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--grey)}
.tier::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--grey-2)}
.tier.is-pro{color:var(--ink)} .tier.is-pro::before{background:var(--ink)}
.tier.is-max{color:var(--accent)} .tier.is-max::before{background:var(--accent)}

.mate.add{align-items:center; justify-content:center; gap:10px; border-style:dashed; background:transparent; color:var(--grey)}
.mate.add:hover{border-style:solid; border-color:var(--ink); color:var(--ink); background:transparent}
.mate.add .plus{width:30px; height:30px; border-radius:var(--rs); border:1px solid currentColor; display:grid; place-items:center; font-size:16px; line-height:1}
.mate.add b{font-size:13px; font-weight:500}

/* one person's access */
.access{margin-top:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.access-hd{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:20px 24px; border-bottom:1px solid var(--line)}
.access-hd input{font-family:inherit; font-size:19px; font-weight:600; letter-spacing:-.025em; color:var(--ink);
  border:0; border-bottom:1px dashed var(--line-strong); background:transparent; padding:0 2px 4px; width:15ch; min-width:0}
.access-hd input:focus{outline:none; border-bottom-style:solid; border-bottom-color:var(--ink)}
.access-hd .cnt{margin-left:auto; font-size:13px; color:var(--grey); font-variant-numeric:tabular-nums; white-space:nowrap}
.access-hd .cnt b{color:var(--ink); font-weight:600}

.presets{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line); background:var(--surface)}
.presets > span{font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); margin-right:4px}
.presets button{font-family:inherit; font-size:12.5px; font-weight:450; padding:7px 12px; border-radius:var(--rs);
  border:1px solid var(--line); background:var(--card); color:var(--grey); cursor:pointer; transition:border-color .15s, color .15s}
.presets button:hover{border-color:var(--ink); color:var(--ink)}

/* twenty-five modules, five across, five down. The count is exactly a square
   and the grid is drawn as one, which is also how the product draws a tower. */
.sqs{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:24px}
@media (max-width:1080px){ .sqs{grid-template-columns:repeat(4,1fr)} }
@media (max-width:860px){ .sqs{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .sqs{grid-template-columns:repeat(2,1fr); gap:8px; padding:16px} }

.sq{position:relative; aspect-ratio:1; display:flex; flex-direction:column; padding:16px 14px 14px;
  border:1px solid var(--line); border-radius:var(--r); background:transparent; color:var(--ink);
  font-family:inherit; text-align:left; cursor:pointer; overflow:hidden;
  transition:border-color .15s, background .15s}
.sq:hover{border-color:var(--line-strong)}
/* The discipline reads as a stripe along the top rather than a fill. Filling
   twenty-five squares with pastel turned the picker into a wall of colour the
   moment somebody was on Max, which is the opposite of a neutral base. */
.sq::before{content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--tint-ink,var(--line-strong)); opacity:.35; transition:opacity .15s}
.sq[aria-pressed="true"]::before{opacity:1}
.sq .gp{font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tint-ink,var(--grey-2)); opacity:.75}
.sq .nm{margin-top:9px; font-size:14.5px; font-weight:600; letter-spacing:-.015em; line-height:1.25; color:var(--grey)}
.sq .wy{margin-top:7px; font-size:11.5px; line-height:1.4; color:var(--grey-2);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.sq .bx{position:absolute; right:12px; bottom:12px; width:18px; height:18px; border-radius:var(--rs);
  border:1px solid var(--line-strong); display:grid; place-items:center; transition:background .15s, border-color .15s}
.sq .bx svg{width:10px; height:10px; opacity:0; transition:opacity .12s; color:var(--card)}
.sq[aria-pressed="true"]{border-color:var(--ink); background:var(--surface)}
.sq[aria-pressed="true"] .nm{color:var(--ink)}
.sq[aria-pressed="true"] .wy{color:var(--grey)}
.sq[aria-pressed="true"] .bx{background:var(--ink); border-color:var(--ink)}
.sq[aria-pressed="true"] .bx svg{opacity:1}
@media (max-width:560px){
  .sq{aspect-ratio:auto; min-height:104px; padding:12px}
  .sq .wy{display:none}
}

.access-empty{padding:56px 24px; text-align:center; color:var(--grey)}
.access-empty b{display:block; font-size:15px; color:var(--ink); margin-bottom:6px}

/* the one line about what is never charged for */
.note-row{margin-top:12px; padding:16px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  font-size:13px; line-height:1.6; color:var(--grey)}
.note-row b{color:var(--ink); font-weight:600}

.addon{display:flex; gap:24px; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
  padding:24px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.addon .txt{flex:1; min-width:260px}
.addon h4{font-size:16px; letter-spacing:-.015em}
.addon p{margin-top:8px; font-size:13.5px; color:var(--grey); line-height:1.6; max-width:62ch}
.addon .fig b{font-size:24px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.addon .fig i{font-style:normal; font-size:12.5px; color:var(--grey); margin-left:7px}

/* six more tint pairs, same shape as the three above, one per discipline.
   These only ever paint a chosen square and its group label. */
.t-emerald{--tint:rgba(16,163,127,.1); --tint-ink:#0f7a5a}
.t-violet{--tint:rgba(139,92,246,.1); --tint-ink:#6d3fd4}
.t-rose{--tint:rgba(244,63,94,.09); --tint-ink:#c9314b}
.t-sky{--tint:rgba(14,165,233,.1); --tint-ink:#0369a1}
.t-orange{--tint:rgba(234,88,12,.09); --tint-ink:#b4530a}
.t-slate{--tint:rgba(100,116,139,.12); --tint-ink:#4a5568}
:root[data-theme="dark"]{
  .t-emerald{--tint:rgba(45,212,191,.13); --tint-ink:#34d399}
  .t-violet{--tint:rgba(167,139,250,.15); --tint-ink:#c4b5fd}
  .t-rose{--tint:rgba(251,113,133,.13); --tint-ink:#fda4af}
  .t-sky{--tint:rgba(56,189,248,.13); --tint-ink:#7dd3fc}
  .t-orange{--tint:rgba(251,146,60,.13); --tint-ink:#fdba74}
  .t-slate{--tint:rgba(148,163,184,.15); --tint-ink:#cbd5e1}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .t-emerald{--tint:rgba(45,212,191,.13); --tint-ink:#34d399}
  .t-violet{--tint:rgba(167,139,250,.15); --tint-ink:#c4b5fd}
  .t-rose{--tint:rgba(251,113,133,.13); --tint-ink:#fda4af}
  .t-sky{--tint:rgba(56,189,248,.13); --tint-ink:#7dd3fc}
  .t-orange{--tint:rgba(251,146,60,.13); --tint-ink:#fdba74}
  .t-slate{--tint:rgba(148,163,184,.15); --tint-ink:#cbd5e1}
}}

/* the enquiry — a plain form, aligned to the same grid as everything above */
.ask{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (max-width:700px){ .ask{grid-template-columns:1fr} }
.ask .fld{display:flex; flex-direction:column; gap:7px}
.ask .fld.wide{grid-column:1/-1}
.ask label{font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2)}
.ask input,.ask textarea{font-family:inherit; font-size:15px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:var(--rs); padding:12px 14px; width:100%; transition:border-color .15s}
.ask input:focus,.ask textarea:focus{outline:none; border-color:var(--ink)}
.ask textarea{min-height:88px; resize:vertical; line-height:1.5}
.ask-foot{grid-column:1/-1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px}
.ask-foot .btn{font-family:inherit; font-size:14px; font-weight:500; padding:13px 26px; border-radius:var(--rs);
  background:var(--ink); color:var(--bg); border:0; cursor:pointer}
.ask-foot .btn:disabled{opacity:.55; cursor:default}
.ask-foot .note{font-size:13px; color:var(--grey)}
.ask-foot .note a{text-decoration:underline; text-underline-offset:2px}
.ask .msg{grid-column:1/-1; font-size:13.5px; color:var(--grey); min-height:1.2em}
.ask .msg.err{color:#c9314b} .ask .msg.ok{color:var(--accent)}

/* ---- get.html: choosing a platform ----
   The page used to redirect straight to the only installer there was. With two
   builds the customer has to choose, so the choice is shown rather than
   guessed: the detected platform leads, the other stays one click away. A Mac
   user handed a .exe writes to support, and they are right to. */
.oschoice{display:flex; flex-direction:column; gap:10px; margin:22px 0 4px}
.osbtn{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:transparent; color:var(--ink); font-family:inherit; text-align:left; cursor:pointer; transition:border-color .2s, background .2s, transform .2s}
.osbtn:hover{border-color:var(--ink); transform:translateY(-1px)}
.osbtn.lead{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.osbtn svg{width:22px; height:22px; flex:none}
.osbtn .t{flex:1; min-width:0}
.osbtn .t b{display:block; font-size:14.5px; font-weight:600}
.osbtn .t span{display:block; font-size:12.5px; opacity:.7; margin-top:2px}
.osbtn .sz{font-size:12px; opacity:.6; font-variant-numeric:tabular-nums; white-space:nowrap}
.storelink{display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-size:13px; color:var(--grey)}
.storelink a{text-decoration:underline; text-underline-offset:2px}

/* At phone width the band's [name+description][price][stepper] row squeezes the
   description into a five-line column. Let the controls drop below it instead —
   the description is the part that has to stay readable, since it is what tells
   somebody which band a person falls into. */
@media (max-width:560px){
  .band{flex-wrap:wrap; gap:10px}
  .band .who{flex:1 1 100%}
  .band .cost{margin-left:auto}
}

/* term switch, inside the running total */
.yr{font-family:inherit; font-size:12px; padding:3px 10px; margin-left:4px; border-radius:var(--r); cursor:pointer;
  border:1px solid var(--line-strong); background:transparent; color:var(--grey); transition:all .18s}
.yr:hover{border-color:var(--ink); color:var(--ink)}
.yr[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}