/* 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;
  /* Both greys are set to clear WCAG AA (4.5:1) against the *darker* of the
     two grounds they sit on, --surface, not just against white. --grey-2 was
     #9a9da0, which measured 2.7:1 on white: a small uppercase label nobody
     with ordinary eyesight should have to squint at. tools/check.js measures
     every rendered string on every page in both themes. */
  --ink:#0e0f11; --grey:#6d7076; --grey-2:#6e7174;
  --accent:#0f7a5a;
  --shadow-a:rgba(14,15,17,.4); --shadow-b:rgba(14,15,17,.18);
  /* The drawing sheet. --line at 50% opacity was invisible on white, which
     rather defeats a grid whose whole job is to be seen. */
  --rule:rgba(14,15,17,.085); --rule-fine:rgba(14,15,17,.032);

  /* ---- 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:#7c7f86;
    --accent:#2fbf8a;
    --shadow-a:rgba(0,0,0,.6); --shadow-b:rgba(0,0,0,.4);
    --rule:rgba(255,255,255,.075); --rule-fine:rgba(255,255,255,.03);
  }
}
: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:#7c7f86;
  --accent:#2fbf8a;
  --shadow-a:rgba(0,0,0,.6); --shadow-b:rgba(0,0,0,.4);
  --rule:rgba(255,255,255,.075); --rule-fine:rgba(255,255,255,.03);
}

*{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:114px}
@media (max-width:640px){ :target,section[id],header[id]{scroll-margin-top:100px} }
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; flex:none}

/* Bercroft — the company wordmark.
   Supplied artwork, trimmed to its ink by tools/brand.js in the ERP repo, so
   the height set here is the visible height of the mark. Two inks rather than
   a mask: the falcon carries internal detail that a single-colour mask would
   flatten into a blob. */
/* SIZE A LOCKUP BY ITS WORD, NEVER BY ITS BOX.
   In this lockup the falcon's sun disc rises far above the cap height, so the
   word "Bercroft" is only 44% of the image. At the 34px a wordmark would
   normally take, the word rendered at 15px and read as an afterthought. The
   footer's stacked lockup is 81% word, which is why 52px looks right there.

   52px here puts the word at 23px, comfortably above the 14px nav links.
   tools/check.js asserts the rendered height so it cannot quietly shrink
   again. If the artwork is re-cut, re-measure the ratio rather than guessing
   a pixel. */
.wordmark{display:block; height:52px; width:auto; max-width:none; flex:none}
@media (max-width:640px){ .wordmark{height:42px} }
.wordmark-light{display:none}
:root[data-theme="dark"] .wordmark-dark{display:none}
:root[data-theme="dark"] .wordmark-light{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wordmark-dark{display:none}
  :root:not([data-theme="light"]) .wordmark-light{display:block}
}
/* The footer sits on the constant dark void whatever the theme is doing, so it
   always takes the light-ink artwork and never swaps. */
.brand{display:block; height:52px; width:auto}
@media (max-width:640px){ .brand{height:42px} }

/* 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. */


/* nav */
nav{position:fixed; inset:0 0 auto 0; z-index:60; height:96px; display:flex; align-items:center; transition:background .35s var(--ease), border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent}
/* 96px, not 78. The mark is 52px and the falcon's ink runs hard to the top of
   its own bounds, so 13px of clearance read as touching the edge. A brand that
   fills two thirds of the bar is cramped whatever the arithmetic says. */
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:96px; 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%)}
/* An architect's sheet, faintly, behind the empty parts of the page. A coarse
   96px rule with a 16px sub-grid inside it, which is what makes it read as
   drawing paper rather than as a table. Always masked, so it fades out before
   it reaches anything that has to be read.

   Anything drawn on top of it needs position:relative and a z-index — the
   sheet is inert (pointer-events:none) but it will still paint over a static
   sibling that came earlier in the markup. */
.sheet-grid{position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px),
    linear-gradient(var(--rule-fine) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-fine) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px}
.sheet-grid.fade-down{mask-image:linear-gradient(#000 30%,transparent 92%)}
.sheet-grid.fade-out{mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%)}

.hero .grid-bg{position:absolute; inset:0 0 auto 0; height:620px; pointer-events:none;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px),
    linear-gradient(var(--rule-fine) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-fine) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px;
  mask-image:radial-gradient(90% 75% at 50% 0,#000,transparent 78%)}
.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}
/* The mockup's unit cells carry a code and a configuration, so they are text
   and have to be readable. Tinted-white on mid-green measured 3.2:1; the
   grounds are darkened and the text is plain white. */
.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:#fff}
.c-agr{background:#008577; color:#fff}
.c-reg{background:#00884d; color:#fff}
.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 */
/* One selector per rule. These three were written as
   `:root[data-theme="dark"] .t-x, @media (...) {...}` — a selector list with an
   at-rule in it, which is not a selector, so the browser threw the whole rule
   away and the dark variants never existed. Nothing showed it until the
   contrast check measured indigo text meant for white sitting on a dark card. */
.t-indigo{--tint:rgba(99,102,241,.13); --tint-ink:#4f52d1}
:root[data-theme="dark"] .t-indigo{--tint:rgba(129,140,248,.18); --tint-ink:#a5a8fb}
@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{--tint:rgba(251,191,36,.18); --tint-ink:#fbbf24}
@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{--tint:rgba(45,212,191,.18); --tint-ink:#5eead4}
@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-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}
/* The footer sits on the constant dark void, so its greys come from the
   constant set. Using --grey here put 4.0:1 text on it the moment --grey
   was darkened for light backgrounds. */
footer h5{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-void); 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:82px}
  /* 42px, set with the other wordmark rules above. The 18px that used to live
     here was sized for the old 12.8:1 letterform mark, where 18px tall meant
     230px wide. The falcon lockup is 2.7:1 and only 44% word, so the same
     number gives a 49px logo with an unreadable name in it. */
  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{position:relative; padding:150px 0 10px}
.price-hero .wrap{position:relative; z-index:1}
.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{position:relative; padding:64px 0}
.psec .wrap{position:relative; z-index:1}
.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 — one flush row.
   Seven tiles fit the 1124px content width exactly at 12px gaps, and the
   default team is six people plus the add tile, so it lands as one clean row
   rather than six across with an orphan underneath. Nothing is decorative:
   name, what they landed on, what they cost. */
.crew{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px}
.mate{position:relative; display:flex; flex-direction:column; padding:14px; 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 .nm{font-size:13.5px; font-weight:600; letter-spacing:-.01em; line-height:1.3; padding-right:18px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mate .tier{margin-top:5px}
.mate .amt{margin-top:auto; padding-top:10px; font-size:16px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.mate .amt span{font-size:11.5px; font-weight:400; color:var(--grey); letter-spacing:0}
.mate .rm{position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:var(--rs);
  border:1px solid transparent; background:transparent; color:var(--grey-2); font-family:inherit; font-size:13px; 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); flex:none}
.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:8px; 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 b{font-size:13px; font-weight:500}

/* one person's access — a single header row, and then the squares.
   The role names used to appear twice on this screen: once as the team tiles
   and again as a row of ten "start from" buttons directly beneath them. The
   same ten words meaning two different things, stacked. The templates are a
   dropdown now, which is an action rather than a second list of people. */
.access{margin-top:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.access-hd{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 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}
.role{font-family:inherit; font-size:12.5px; color:var(--grey); background:var(--card);
  border:1px solid var(--line); border-radius:var(--rs); padding:7px 28px 7px 11px; cursor:pointer;
  appearance:none; -webkit-appearance:none; transition:border-color .15s, color .15s;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:5px 5px,5px 5px; background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%; background-repeat:no-repeat}
.role:hover{border-color:var(--ink); color:var(--ink)}
.role:focus{outline:none; border-color:var(--ink)}

/* The modules, grouped the way the app groups them.
   No discipline has more than four modules, so a four-column grid means every
   one of them sits on exactly one row and nothing ever wraps. Nine rows, the
   discipline named in the gutter, and every tile in a column lines up with the
   tile above it. It reads the way the product's own stacking plan reads: a
   label on the left, a run of cells to the right. */
.mrows{padding:20px 24px 24px; display:flex; flex-direction:column; gap:10px}
.mrow{display:grid; grid-template-columns:150px repeat(4,1fr); gap:10px; align-items:stretch}
.mrow-lab{display:flex; flex-direction:column; justify-content:center; gap:3px; padding-right:8px; min-width:0}
.mrow-lab b{font-size:12px; font-weight:600; letter-spacing:-.005em; color:var(--ink);
  display:flex; align-items:center; gap:7px}
.mrow-lab b::before{content:''; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--tint-ink,var(--grey-2))}
.mrow-lab span{font-size:11px; color:var(--grey-2); font-variant-numeric:tabular-nums; padding-left:14px}
.mrow-lab button{margin-top:4px; margin-left:14px; align-self:flex-start; font-family:inherit;
  font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--rs); border:1px solid var(--line); background:transparent;
  color:var(--grey-2); cursor:pointer; transition:border-color .15s, color .15s}
.mrow-lab button:hover{border-color:var(--ink); color:var(--ink)}

.mtile{position:relative; display:flex; flex-direction:column; gap:5px; padding:12px 34px 12px 14px; min-height:86px;
  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}
.mtile::before{content:''; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--tint-ink,var(--line-strong)); opacity:.4; transition:opacity .15s}
.mtile:hover{border-color:var(--line-strong)}
.mtile:hover::before{opacity:.7}
.mtile .nm{font-size:13.5px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--grey)}
.mtile .wy{font-size:11px; line-height:1.4; color:var(--grey-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mtile .bx{position:absolute; top:12px; right:12px; width:16px; height:16px; border-radius:var(--rs);
  border:1px solid var(--line-strong); display:grid; place-items:center; transition:background .15s, border-color .15s}
.mtile .bx svg{width:9px; height:9px; opacity:0; transition:opacity .12s; color:var(--card)}
.mtile[aria-pressed="true"]{border-color:var(--ink); background:var(--surface)}
.mtile[aria-pressed="true"]::before{opacity:1}
.mtile[aria-pressed="true"] .nm{color:var(--ink)}
.mtile[aria-pressed="true"] .wy{color:var(--grey)}
.mtile[aria-pressed="true"] .bx{background:var(--ink); border-color:var(--ink)}
.mtile[aria-pressed="true"] .bx svg{opacity:1}

@media (max-width:940px){
  .mrow{grid-template-columns:repeat(3,1fr)}
  .mrow-lab{grid-column:1/-1; flex-direction:row; align-items:baseline; gap:10px; padding:6px 0 0}
  .mrow-lab span,.mrow-lab button{padding-left:0; margin-left:0; margin-top:0}
  .mrow-lab button{margin-left:auto}
}
@media (max-width:620px){ .mrow{grid-template-columns:repeat(2,1fr)} .mtile .wy{display:none} .mtile{min-height:62px} }

.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)}

/* a plan card is a control now, not a description */
/* A button does not inherit colour: the UA sets `color: buttontext`, which on
   a dark ground rendered the plan name and its price near-black on near-black.
   Anything turned into a button has to be told its colour again. */
button.plan{width:100%; font-family:inherit; color:var(--ink); cursor:pointer; text-align:left}
.plan .apply{display:block; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2);
  font-size:12.5px; font-weight:500; color:var(--grey); transition:color .15s}
.plan:hover .apply{color:var(--ink)}
.plan[aria-pressed="true"]{border-color:var(--ink); background:var(--surface)}
.plan[aria-pressed="true"] .apply{color:var(--accent)}

/* how many of this person there are */
 /* Price above the stepper, not beside it. At 148px a card cannot hold
    "₹50,000 /yr" and a stepper on one line, and letting them wrap put the
    unit on its own orphan row. */
.mate .foot{margin-top:auto; padding-top:10px; display:flex; flex-direction:column; align-items:flex-start; gap:7px}
.mate .foot .amt{margin-top:0; padding-top:0; white-space:nowrap}
.qty{display:flex; align-items:center; gap:1px; flex:none}
.qty button{width:20px; height:20px; border-radius:var(--rs); border:1px solid var(--line-strong);
  background:transparent; color:var(--grey); font-family:inherit; font-size:12px; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:border-color .15s, color .15s}
.qty button:hover{border-color:var(--ink); color:var(--ink)}
.qty b{min-width:18px; text-align:center; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums}

/* the line that answers "did my click do anything" */
.compare{padding:0 24px 16px; margin-top:-4px; font-size:13px; line-height:1.55; color:var(--grey)}
.compare b{color:var(--ink); font-weight:600}

/* ---- the module showcase on the home page ----
   Nine disciplines, each naming what is inside it. Driven from the generated
   catalogue, so it cannot claim a module the product does not have. Colour is
   the discipline's own tint on the dot and the rule above it, nothing else:
   twenty-five tinted panels would be a rainbow, not a highlight. */
.disciplines{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px}
@media (max-width:980px){ .disciplines{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .disciplines{grid-template-columns:1fr} }

.disc{padding:22px; border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  border-top:3px solid var(--tint-ink,var(--line-strong))}
.disc h4{display:flex; align-items:baseline; gap:9px; font-size:15px; letter-spacing:-.015em}
/* The count takes the ordinary muted ink, not the discipline's accent. Those
   accents are tuned to carry a 3px rule and a dot; as 11px text several of
   them fall under AA on their own card. Colour belongs on the edge here. */
.disc h4 .n{margin-left:auto; font-size:11px; font-weight:600; color:var(--grey-2);
  font-variant-numeric:tabular-nums}
.disc > p{margin-top:6px; font-size:12.5px; color:var(--grey-2); line-height:1.5}
.disc ul{list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:11px}
.disc li b{display:block; font-size:13.5px; font-weight:600; color:var(--ink)}
.disc li span{display:block; font-size:12px; color:var(--grey); line-height:1.45; margin-top:2px}

.disc-foot{margin-top:20px; font-size:13.5px; color:var(--grey); line-height:1.6}
.disc-foot b{color:var(--ink); font-weight:600}

/* ---- book a demo, on the page ----
   Sits inside the dark final section, so the fields have to read on the void
   ground rather than the page's usual surface. */
.demo-form{max-width:560px; margin:34px auto 0; text-align:left; opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease}
.demo-form.in{opacity:1; transform:none}
.df-row{display:flex; gap:14px; flex-wrap:wrap}
.df-row > label{flex:1 1 200px; min-width:0}
.demo-form label{display:block; font-size:12.5px; color:var(--grey-void); margin-bottom:14px}
.demo-form input{
  display:block; width:100%; margin-top:6px; padding:11px 13px;
  background:rgba(255,255,255,.05); border:1px solid var(--line-void-2);
  border-radius:9px; color:var(--on-void); font:inherit; font-size:15px;
}
/* 16px or larger, or iOS zooms the page when the field takes focus. */
@media (max-width:640px){ .demo-form input{font-size:16px} }
.demo-form input:focus{outline:none; border-color:var(--on-void); background:rgba(255,255,255,.09)}
.df-full{display:block}
.df-go{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px}
.df-msg{font-size:13px; color:var(--grey-void)}
.df-msg.err{color:#ff9a9a}
.df-done{font-size:16px; color:var(--on-void); line-height:1.6; margin:0}
.df-done b{font-weight:600}