/* Latitude Meridian / 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; --r:16px; --ease:cubic-bezier(.2,.7,.2,1);
}
@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 ----
   The supplied logo files bake their wordmarks in as pixels, so at header
   height that text renders microscopic. Both lockups therefore pair the
   cropped MARK with the words set in live type, which stays crisp at any
   size. Marks ship as opposite-ink files and are swapped (not blend-moded),
   since black artwork on a near-black surface is invisible either way.

   Header/company = Latitude Meridian. Product = Elevation, used where the
   software itself is introduced. */
.logo{display:inline-flex; align-items:center; gap:12px}

/* Latitude Meridian — the company wordmark, in the header.
   Supplied artwork, trimmed to its ink so this height is the visible cap
   height. 12.8:1, so 20px tall renders ~256px wide. */
.wordmark{height:20px; width:auto; display:block}
.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}
}

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

/* footer's background is always the constant dark "void" regardless of site
   theme, so the footer company logo is always the light-ink file — never swaps */
.brand{height:74px; width:auto; display:block}
.brand-light{display:none}
:root[data-theme="dark"] .brand-dark{display:none}
:root[data-theme="dark"] .brand-light{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-dark{display:none}
  :root:not([data-theme="light"]) .brand-light{display:block}
}

/* 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:100px; 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:100px; 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:100px; 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:100px; 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:7px;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:16px; 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:7px; 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:3px;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:11px; 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:8px}
.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:5px}

.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:20px; font-weight:600}
.acct-journal{border:1px solid rgba(255,255,255,.1); border-radius:11px; 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:20px; 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:12px; 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:9px; 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:13px; 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:9px;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:5px; 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:10px;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}
.sheet-frame{flex:1; position:relative; border:1px solid var(--line-strong); display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(370px,.88fr); background:var(--card)}
/* 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); overflow:visible}
#elev .bp{stroke:var(--line-strong); stroke-width:.7; fill:none; opacity:.5}
#elev .dim{stroke:var(--grey-2); stroke-width:.45; fill:none}
#elev .lv{stroke:var(--ink); stroke-width:.9; fill:none; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .55s var(--ease)}
#elev .lv.on{stroke-dashoffset:0}
#elev .cap{stroke:var(--accent); stroke-width:1.2; fill:none; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .5s var(--ease)}
#elev .cap.on{stroke-dashoffset:0}
#elev .dot{fill:var(--accent); opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.3);
  transition:opacity .4s var(--ease), transform .4s var(--ease)}
#elev .dot.on{opacity:1; transform:none}
#elev text{fill:var(--grey); font-family:var(--sans); font-size:4.4px; font-weight:600; letter-spacing:.15em}
#elev text.lit{fill:var(--ink)}
.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-strong)}
.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-strong); 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-strong); border-radius:4px; 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-strong); border-right:1px solid var(--line-strong); 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)}
/* team size as a ruled segmented run */
.seg{display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--line-strong)}
.seg button{font-family:inherit; font-size:12.5px; font-weight:500; padding:12px 2px; border:0; border-right:1px solid var(--line-strong);
  background:transparent; color:var(--ink); cursor:pointer; transition:background .2s, color .2s; white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--surface)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
/* scope: uniform ruled tiles, symbol then name */
.tiles{display:grid; grid-template-columns:1fr 1fr}
.tile{display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--line-strong);
  border-right:1px solid var(--line-strong); 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}
.tile:nth-child(2n){border-right:0}
.tile:hover{background:var(--surface)}
.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:3px; display:flex; align-items:center; justify-content:center}
.tile .tk svg{width:9px; height:9px; opacity:0; color:var(--bg)}
.tile[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.tile[aria-pressed="true"] svg{color:var(--bg)}
.tile[aria-pressed="true"] .tk{background:var(--bg); border-color:var(--bg)}
.tile[aria-pressed="true"] .tk svg{opacity:1; color:var(--ink)}
.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}

/* ---- the stamp ---- */
/* display:none until it fires — an opacity:0 stamp still contributes its
   scaled-up transform to the scrollable overflow, which widened the page */
.stamp{display:none; position:absolute; z-index:5; left:40%; top:43%; width:min(330px,50%); pointer-events:none;
  padding:14px 20px 12px; border:2.5px solid var(--accent); border-radius:4px; color:var(--accent); text-align:center;
  opacity:0; transform:translate(-50%,-50%) rotate(-12deg) scale(1.55); box-shadow:inset 0 0 0 1.5px var(--accent)}
.stamp b{display:block; font-size:clamp(17px,2.3vw,25px); font-weight:700; letter-spacing:.05em; line-height:1.06}
.stamp i{display:block; font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.22em; margin-top:6px; opacity:.9}
.stamp.on{display:block; animation:stampin .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes stampin{
  0%{opacity:0; transform:translate(-50%,-50%) rotate(-12deg) scale(1.55)}
  60%{opacity:.96; transform:translate(-50%,-50%) rotate(-12deg) scale(.95)}
  100%{opacity:.94; transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
}
/* reduce-motion still needs the stamp to land, just without the slam */
@media (prefers-reduced-motion:reduce){
  .stamp.on{display:block; animation:none; opacity:.94; transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
}

@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}
  .stamp{width:min(300px,78%); top:42%}
}
@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:18px; 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:100px; 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:10px; 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:100px; 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{height:20px; width:auto; display:block}
.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:100px; 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:18px; padding:40px 38px; box-shadow:0 40px 90px -50px var(--shadow-a)}
.pcard .badge{width:46px; height:46px; border-radius:12px; 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:11px; 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:12px; 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} }