/* ============================================================
   JAWEX IT Support — single-file site
   Brand: orange #ED500F  |  Dark-first, one cream section
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

:root{
  /* surfaces */
  --bg:#08080A;
  --bg-2:#0D0D10;
  --surface:#141418;
  --surface-2:#1B1B21;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* text on dark */
  --fg:#F5F5F7;
  --fg-2:#B4B4BC;   /* 9.5:1 on --bg */
  --fg-3:#8A8A93;   /* 5.7:1 on --bg */

  /* brand */
  --brand:#ED500F;       /* 5.4:1 on --bg */
  --brand-2:#FF7A3D;
  --brand-ink:#0A0A0B;   /* text ON orange -> 5.4:1 */
  --brand-soft:rgba(237,80,15,.12);
  --brand-line:rgba(237,80,15,.35);

  /* cream section */
  --cream:#F4F1EC;
  --cream-2:#FFFFFF;
  --cream-fg:#17171A;
  --cream-fg-2:#55555C;
  --cream-line:rgba(0,0,0,.10);

  /* type */
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* space scale */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;

  --radius:14px;
  --radius-lg:22px;
  --shell:1200px;
  --nav-h:72px;

  /* motion */
  --dur-fast:140ms;
  --dur:220ms;
  --dur-slow:420ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* layers */
  --z-base:0; --z-raised:10; --z-sticky:40; --z-nav:100; --z-top:1000;
}

html{scroll-behavior:smooth}
/* Anchor jumps land inside the section's own top padding so a jumped-to heading
   sits close under the navbar. The offset has to be responsive: section padding
   ranges 56-104px, and a single value that reads well on desktop would tuck the
   heading behind the fixed nav on mobile. Result: a 24-44px gap at every width. */
section[id],div[id]{scroll-margin-top:40px}
@media (min-width:900px){
  section[id],div[id]{scroll-margin-top:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg-2);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- shared primitives ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{position:relative;padding-block:clamp(56px,7vw,104px)}
.stack>*+*{margin-top:var(--s-3)}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--fg);
  line-height:1.06;
  letter-spacing:-.028em;
  font-weight:600;
  text-wrap:balance;
}
p{text-wrap:pretty}

.h-xl{font-size:clamp(2.6rem,6.6vw,4.6rem)}
.h-lg{font-size:clamp(1.9rem,3.7vw,2.8rem)}
.h-md{font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.18}
.h-sm{font-size:1.1rem;line-height:1.3;letter-spacing:-.015em}

.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--fg-2);max-width:60ch}
.muted{color:var(--fg-3)}
.accent{color:var(--brand)}

/* eyebrow label — orange dot + caps (pin 3) */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);
  font-size:.75rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-3);
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--brand);flex:none;
  box-shadow:0 0 0 4px var(--brand-soft);
}
.section--light .eyebrow{color:var(--cream-fg-2)}

/* pill badge (pin 1 / pin 2) */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 6px 6px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  font-size:.86rem;color:var(--fg-2);
  backdrop-filter:blur(8px);
}
.pill b{
  font-family:var(--display);
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--brand);color:var(--brand-ink);
  padding:4px 9px;border-radius:999px;
  white-space:nowrap;flex:none;
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--fg); --btn-line:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;
  border:1px solid var(--btn-line);
  border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--display);font-size:.97rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
  touch-action:manipulation;
}
.btn svg{flex:none;transition:transform var(--dur) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0) scale(.985)}

.btn--primary{--btn-bg:var(--brand);--btn-fg:var(--brand-ink);--btn-line:var(--brand)}
.btn--primary:hover{--btn-bg:var(--brand-2);--btn-line:var(--brand-2)}

.btn--ghost{--btn-bg:rgba(255,255,255,.04)}
.btn--ghost:hover{--btn-bg:rgba(255,255,255,.09);--btn-line:rgba(255,255,255,.28)}

.btn--onLight{--btn-bg:var(--cream-fg);--btn-fg:var(--cream-2);--btn-line:var(--cream-fg)}
.btn--onLight:hover{--btn-bg:#000;--btn-line:#000}

.btn--onOrange{--btn-bg:var(--brand-ink);--btn-fg:#fff;--btn-line:var(--brand-ink)}
.btn--onOrange:hover{--btn-bg:#000;--btn-line:#000}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}

/* focus — visible everywhere, 3:1 against both grounds */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand-2);
  outline-offset:3px;
  border-radius:6px;
}
.section--light :where(a,button,input,textarea,select):focus-visible{outline-color:#B33B08}

.skip{
  position:absolute;left:16px;top:-100px;z-index:var(--z-top);
  background:var(--brand);color:var(--brand-ink);
  padding:12px 20px;border-radius:10px;font-weight:600;text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip:focus{top:16px}

/* ============================================================
   NAV — sticky glass bar
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(8,8,10,.55);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  padding-top:env(safe-area-inset-top);
}
.nav[data-stuck="true"]{background:rgba(8,8,10,.9);border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;gap:var(--s-3);width:100%}
.nav__logo{display:flex;align-items:center;flex:none;text-decoration:none;border-radius:8px}
.nav__logo img{height:30px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav__links a{
  position:relative;
  white-space:nowrap;
  padding:9px 14px;border-radius:999px;
  color:var(--fg-2);text-decoration:none;
  font-size:.94rem;font-weight:500;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.nav__links a:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.nav__links a[aria-current="true"]{color:var(--fg)}
.nav__links a[aria-current="true"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  border-radius:2px;background:var(--brand);
}
.nav__right{display:flex;align-items:center;gap:10px;flex:none}
/* Remote Connect and Get Support are a matched pair: same height and radius,
   different fill so the primary CTA still leads. */
.nav__right .btn{min-height:44px;padding-inline:18px;font-size:.92rem}
.nav__right .btn svg{opacity:.8}
.nav__tel{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--fg);text-decoration:none;font-weight:600;font-size:.94rem;
  padding:9px 12px;border-radius:999px;
  transition:background var(--dur) var(--ease);
}
.nav__tel:hover{background:rgba(255,255,255,.06)}
.nav__tel svg{color:var(--brand)}

.nav__toggle{
  display:none;
  width:46px;height:46px;flex:none;
  align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:12px;
  background:rgba(255,255,255,.04);cursor:pointer;
}
.nav__toggle:hover{background:rgba(255,255,255,.09)}

/* mobile drawer */
.drawer{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:calc(var(--z-nav) - 1);
  background:rgba(8,8,10,.97);
  backdrop-filter:blur(20px);
  padding:var(--s-4) clamp(20px,5vw,40px) calc(var(--s-5) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:6px;
  transform:translateY(-10px);opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  overflow-y:auto;
}
.drawer[data-open="true"]{transform:none;opacity:1;visibility:visible}
.drawer a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;padding:0 8px;
  color:var(--fg);text-decoration:none;
  font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
}
.drawer a:hover{color:var(--brand)}
.drawer .btn{margin-top:var(--s-3)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  /* Tight enough that the topology hub lands above the fold on a laptop. */
  padding-top:calc(var(--nav-h) + clamp(20px,2.4vw,36px));
  padding-bottom:clamp(40px,5vw,64px);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
/* constellation canvas (pin 5) */
.hero__field{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;
  opacity:.55;
  -webkit-mask-image:radial-gradient(120% 85% at 50% 25%,#000 25%,transparent 78%);
          mask-image:radial-gradient(120% 85% at 50% 25%,#000 25%,transparent 78%);
}
/* warm bloom behind the headline */
.hero::before{
  content:"";position:absolute;z-index:-2;
  left:50%;top:-14%;translate:-50% 0;
  width:min(1150px,145vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(237,80,15,.24) 0%,
    rgba(237,80,15,.10) 32%,
    transparent 62%);
  pointer-events:none;
}
.hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.hero h1{margin-top:6px}
.hero .lede{margin-inline:auto;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}

.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 22px;margin-top:var(--s-2);
  font-size:.9rem;color:var(--fg-3);
}
.hero__trust span{display:inline-flex;align-items:center;gap:7px}
.hero__trust svg{color:var(--brand);flex:none}

/* --------------------------------------------------------------
   NETWORK TOPOLOGY — what JAWEX actually does, drawn:
   every system in the building reporting back to one place.
   -------------------------------------------------------------- */
.topo{
  position:relative;
  width:min(1180px,100%);
  margin:clamp(12px,2vw,26px) auto 0;
  pointer-events:none;
}
.topo svg{width:100%;height:auto;overflow:visible}
.topo--compact{display:none}
@media (max-width:900px){
  .topo--wide{display:none}
  .topo--compact{display:block;max-width:420px}
}

/* the connecting runs */
.topo__link{fill:none;stroke:rgba(237,80,15,.28);stroke-width:1.5}
/* packets travelling back to the hub */
.topo__flow{
  fill:none;stroke:var(--brand-2);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:3 130;
  animation:flow 3.4s linear infinite;
}
.topo__flow:nth-of-type(2){animation-delay:-.55s}
.topo__flow:nth-of-type(3){animation-delay:-1.1s}
.topo__flow:nth-of-type(4){animation-delay:-1.65s}
.topo__flow:nth-of-type(5){animation-delay:-2.2s}
.topo__flow:nth-of-type(6){animation-delay:-2.75s}
@keyframes flow{from{stroke-dashoffset:133}to{stroke-dashoffset:0}}

/* endpoint chips */
.topo__node rect{fill:#131317;stroke:rgba(255,255,255,.13);stroke-width:1}
.topo__node:hover rect{stroke:var(--brand-line)}
.topo__node .ic{fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.topo__node text{
  fill:var(--fg-2);font-family:inherit;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;
}
.topo__node{transition:opacity var(--dur) var(--ease)}

/* the hub */
.topo__hub rect{fill:#17110E;stroke:var(--brand);stroke-width:1.5}
.topo__hub text{
  fill:var(--brand);font-family:inherit;font-weight:700;
  letter-spacing:.14em;text-anchor:middle;
}
.topo__glow{fill:url(#hubGlow)}
.topo__pulse{
  fill:none;stroke:var(--brand);stroke-width:1.2;opacity:0;
  transform-origin:center;
  animation:hubPulse 3.2s var(--ease) infinite;
}
@keyframes hubPulse{
  0%{opacity:.55;transform:scale(.92)}
  70%,100%{opacity:0;transform:scale(1.5)}
}

/* ============================================================
   MARQUEE (pin 4)
   ============================================================ */
.marquee{
  position:relative;z-index:1;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(237,80,15,.07),rgba(237,80,15,.02));
  padding-block:16px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;width:max-content;
  animation:slide 42s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__group span{
  display:inline-flex;align-items:center;gap:20px;
  padding-inline:20px;
  font-family:var(--display);
  font-size:clamp(.95rem,1.5vw,1.12rem);font-weight:600;
  letter-spacing:-.01em;color:var(--fg);
  white-space:nowrap;
}
.marquee__group span::after{
  content:"";width:11px;height:11px;flex:none;
  background:var(--brand);
  clip-path:polygon(42% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%);
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(20px,2.4vw,32px)}
.sec-head--center{align-items:center;text-align:center}
.sec-head--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap}
.sec-head--split .sec-head__copy{max-width:34ch}
.sec-head p{max-width:56ch}
.sec-head--center p{margin-inline:auto}

/* wide-tracked centered label (pin 5) */
.label-wide{
  font-family:var(--display);
  font-size:.72rem;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--brand);
  padding-left:.42em;
}

/* ============================================================
   CARDS
   ============================================================ */
.grid{display:grid;gap:var(--s-2)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{
  position:relative;
  padding:var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
  overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(237,80,15,.13),transparent 62%);
  opacity:0;transition:opacity var(--dur-slow) var(--ease);
}
.card:hover{border-color:var(--brand-line);transform:translateY(-3px)}
.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.card h3{margin-bottom:10px}
.card p{font-size:.94rem;line-height:1.58;color:var(--fg-2)}

.card__ico{
  display:grid;place-items:center;
  width:40px;height:40px;margin-bottom:12px;
  border-radius:11px;
  border:1px solid var(--brand-line);
  background:var(--brand-soft);
  color:var(--brand);
}
.card--feature{padding-block:var(--s-4)}

.card__num{
  position:absolute;top:18px;right:20px;z-index:1;
  font-family:var(--display);font-size:.78rem;font-weight:700;
  letter-spacing:.1em;color:var(--fg-3);
}

/* ============================================================
   CREAM SECTION (pin 3)
   ============================================================ */
.section--light{background:var(--cream);color:var(--cream-fg-2)}
.section--light h1,.section--light h2,.section--light h3,.section--light h4{color:var(--cream-fg)}
.section--light .lede,.section--light p{color:var(--cream-fg-2)}
.section--light .label-wide{color:#B33B08}
.section--light .card{
  background:var(--cream-2);
  border-color:var(--cream-line);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -16px rgba(0,0,0,.22);
}
.section--light .card:hover{border-color:rgba(237,80,15,.42);transform:translateY(-3px)}
.section--light .card::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(237,80,15,.08),transparent 62%)}
.section--light .card p{color:var(--cream-fg-2)}
.section--light .card__ico{background:rgba(237,80,15,.10);border-color:rgba(237,80,15,.28);color:#B33B08}

/* Optional inverted card for the cream grid (from the Novacraft reference).
   Currently UNUSED - all six service cards are white for consistency.
   To re-enable on any card, add class="card card--invert" in index.html. */
.card--invert{background:var(--cream-fg) !important;border-color:var(--cream-fg) !important;box-shadow:none !important}
.card--invert h3{color:var(--brand) !important}
.card--invert p{color:rgba(255,255,255,.75) !important}
.card--invert .card__ico{background:rgba(237,80,15,.16) !important;border-color:rgba(237,80,15,.4) !important;color:var(--brand) !important}
.card--invert .link{color:#fff}
.card--invert .link:hover{color:var(--brand)}

.link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;
  color:var(--cream-fg);text-decoration:none;
  font-family:var(--display);font-size:.92rem;font-weight:600;
  transition:color var(--dur) var(--ease),gap var(--dur) var(--ease);
}
.link:hover{color:var(--brand);gap:12px}
.section:not(.section--light) .link{color:var(--fg)}
.section:not(.section--light) .link:hover{color:var(--brand)}

/* ============================================================
   STATS BAND — solid orange (pin 3)
   ============================================================ */
.stats{
  background:linear-gradient(135deg,var(--brand) 0%,#FF6A24 55%,var(--brand-2) 100%);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,48px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);
  color:var(--brand-ink);
}
.stat{text-align:center}
.stat__n{
  display:block;
  font-family:var(--display);
  font-size:clamp(2rem,4.6vw,3.1rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;
  color:var(--brand-ink);
  font-variant-numeric:tabular-nums;
}
.stat__l{
  display:block;margin-top:10px;
  font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:rgba(10,10,11,.88);
}
.stats .stat+.stat{border-left:1px solid rgba(10,10,11,.18)}

/* ============================================================
   HEX PROCESS CHAIN (pin 5)
   ============================================================ */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);position:relative}
.process::before{
  content:"";position:absolute;z-index:0;
  left:12.5%;right:12.5%;top:58px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-line) 12%,var(--brand-line) 88%,transparent);
}
.step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.hex{
  position:relative;
  width:116px;aspect-ratio:1/1.1547;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand),var(--brand-2));
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:transform var(--dur-slow) var(--ease),filter var(--dur-slow) var(--ease);
}
.hex::before{
  content:"";position:absolute;inset:2px;
  background:var(--bg-2);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.hex span{
  position:relative;z-index:1;
  font-family:var(--display);
  font-size:1.55rem;font-weight:700;letter-spacing:-.03em;
  color:var(--brand);font-variant-numeric:tabular-nums;
}
.step:hover .hex{transform:translateY(-4px);filter:drop-shadow(0 12px 26px rgba(237,80,15,.32))}
.step h3{font-size:1.12rem}
.step p{font-size:.94rem;max-width:26ch;margin-inline:auto}

/* ============================================================
   PRICING
   ============================================================ */
/* stretch, not start: one wrapping bullet must not make a card taller than
   its neighbours. The feature list absorbs the slack so the CTAs line up. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);align-items:stretch}
.plan{
  display:flex;flex-direction:column;
  padding:var(--s-4) var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.plan:hover{border-color:var(--line-2);transform:translateY(-3px)}
.plan--featured{
  background:linear-gradient(160deg,var(--brand) 0%,#FF6A24 60%,var(--brand-2) 100%);
  border-color:var(--brand);color:var(--brand-ink);
}
.plan--featured:hover{transform:translateY(-5px);border-color:var(--brand-2)}
.plan--featured h3,.plan--featured .plan__price b{color:var(--brand-ink)}
.plan--featured .plan__price,.plan--featured .plan__note,.plan--featured li{color:rgba(10,10,11,.88)}
.plan--featured .plan__tag{background:rgba(10,10,11,.88);color:#fff;border-color:transparent}
.plan--featured li svg{color:var(--brand-ink)}
.plan--featured .plan__sep{background:rgba(10,10,11,.2)}
.plan__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--s-2)}
.plan__tag{
  font-family:var(--display);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand);
}
.plan__price{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;color:var(--fg-3)}
.plan__price b{
  font-family:var(--display);
  font-size:clamp(2.2rem,4vw,2.9rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.plan__note{font-size:.92rem;color:var(--fg-3)}
.plan__sep{height:1px;background:var(--line);margin-block:var(--s-3)}
.plan ul{display:flex;flex-direction:column;gap:12px;flex:1;font-size:.96rem;color:var(--fg-2);list-style:none;padding:0;margin:0}
.plan li{display:flex;align-items:flex-start;gap:10px}
.plan li svg{flex:none;margin-top:3px;color:var(--brand)}
.plan .btn{margin-top:var(--s-4);width:100%}

.fineprint{
  margin-top:var(--s-3);padding:var(--s-3);
  border:1px dashed var(--line-2);border-radius:var(--radius);
  font-size:.94rem;color:var(--fg-3);
  display:flex;gap:14px;align-items:flex-start;
}
.fineprint svg{flex:none;margin-top:3px;color:var(--brand)}

/* ============================================================
   ABOUT / VALUES / TEAM
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,var(--s-6));align-items:center}

.values{display:flex;flex-direction:column;gap:2px;list-style:none;padding:0;margin:0}
.values li{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.values li:first-child{border-top:1px solid var(--line)}
.values b{
  font-family:var(--display);font-size:1.05rem;font-weight:600;
  color:var(--fg);flex:none;min-width:108px;letter-spacing:-.015em;
}
.values span{color:var(--fg-2);font-size:.99rem}
.values svg{flex:none;margin-top:4px;color:var(--brand)}

.people{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.person{
  padding:var(--s-3);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
.person__ini{
  display:grid;place-items:center;
  width:56px;height:56px;margin-bottom:var(--s-2);
  border-radius:14px;
  background:linear-gradient(150deg,var(--brand),var(--brand-2));
  color:var(--brand-ink);
  font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;
}
.person h3{font-size:1.12rem;margin-bottom:4px}
.person .role{
  font-family:var(--display);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
}
.person p{margin-top:12px;font-size:.95rem}

/* ============================================================
   CONTACT
   ============================================================ */
/* Both columns stretch to the taller one, then each pushes its last block
   to the bottom - so the channel list and the form end on the same line
   whichever side happens to be taller. */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,var(--s-6));align-items:stretch}
.contact__aside{display:flex;flex-direction:column}

.contact .channels{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:var(--s-4) 0 0;list-style:none}
.channels a,.channels div{
  display:flex;align-items:center;gap:16px;
  min-height:64px;padding:12px 18px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  color:var(--fg);text-decoration:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.channels a:hover{border-color:var(--brand-line);background:var(--brand-soft);transform:translateX(3px)}
.channels .ico{
  display:grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:10px;
  background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand);
}
.channels .k{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);font-weight:600}
.channels .v{display:block;font-family:var(--display);font-size:1.04rem;font-weight:600;letter-spacing:-.015em;color:var(--fg)}

.form{
  display:flex;flex-direction:column;
  padding:clamp(24px,3.5vw,var(--s-4));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:.9rem;font-weight:600;color:var(--fg)}
.field .req{color:var(--brand);margin-left:2px}
.field input,.field textarea{
  width:100%;min-height:52px;padding:14px 16px;
  border:1px solid var(--line-2);border-radius:12px;
  background:rgba(0,0,0,.35);color:var(--fg);
  font-size:16px; /* prevents iOS zoom */
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#6A6A73}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.26)}
.field input:focus,.field textarea:focus{
  border-color:var(--brand);background:rgba(0,0,0,.5);
  box-shadow:0 0 0 4px var(--brand-soft);outline:none;
}
.field .hint{font-size:.84rem;color:var(--fg-3)}
.field .err{
  display:none;align-items:center;gap:7px;
  font-size:.86rem;font-weight:500;color:#FF8A6B;
}
.field .err svg{flex:none}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:#FF6B4A}
.field[data-invalid="true"] .err{display:flex}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3)}
.form__foot .btn{min-width:190px}
.form__status{font-size:.92rem;color:var(--fg-3);flex:1;min-width:200px}
.form__status[data-tone="ok"]{color:#5FD08A}
.form__status[data-tone="bad"]{color:#FF8A6B}

/* error summary (WCAG 2.2) */
.summary{
  display:none;gap:12px;align-items:flex-start;
  margin-bottom:var(--s-3);padding:16px 18px;
  border:1px solid #FF6B4A;border-radius:var(--radius);
  background:rgba(255,107,74,.10);color:#FFB9A6;
}
.summary[data-show="true"]{display:flex}
.summary svg{flex:none;margin-top:3px;color:#FF8A6B}
.summary h3{font-size:1rem;margin-bottom:6px;color:#FFC9BA}
.summary ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;font-size:.92rem}
.summary a{color:#FFB9A6;text-decoration:underline;text-underline-offset:3px}
.summary a:hover{color:#fff}

/* ============================================================
   CTA BANNER + FOOTER
   ============================================================ */
.cta-band{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--brand-line);
  background:linear-gradient(135deg,rgba(237,80,15,.16),rgba(237,80,15,.04) 55%,transparent);
  padding:clamp(34px,5vw,var(--s-6)) clamp(26px,4vw,var(--s-5));
  text-align:center;
}
.cta-band::before{
  content:"";position:absolute;inset:auto 0 -60% 0;height:110%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(237,80,15,.28),transparent 70%);
  pointer-events:none;
}
.cta-band>*{position:relative;z-index:1}
.cta-band .btn{margin-top:var(--s-3)}

.footer{
  border-top:1px solid var(--line);
  background:var(--bg-2);
  padding-block:clamp(44px,6vw,var(--s-7)) var(--s-4);
}
.footer__grid{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);
  gap:var(--s-4);margin-bottom:var(--s-5);
}
.footer img{height:30px;width:auto;display:block;margin-bottom:var(--s-2)}
.footer .foot-col{
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:16px;
}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.footer a{color:var(--fg-2);text-decoration:none;font-size:.96rem;transition:color var(--dur) var(--ease)}
.footer a:hover{color:var(--brand)}
.footer__blurb{font-size:.95rem;color:var(--fg-3);max-width:34ch}
.footer__chambers{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-3);
}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:.82rem;color:var(--fg-3);
}
.chip svg{color:var(--brand);flex:none}
.footer__bar{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);
  align-items:center;justify-content:space-between;
  padding-top:var(--s-3);border-top:1px solid var(--line);
  font-size:.9rem;color:var(--fg-3);
}
.footer__social{display:flex;gap:8px}
.footer__social a{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--fg-2);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.footer__social a:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity 560ms var(--ease),transform 560ms var(--ease)}
[data-reveal-stagger].is-in>*{opacity:1;transform:none}
[data-reveal-stagger].is-in>*:nth-child(1){transition-delay:0ms}
[data-reveal-stagger].is-in>*:nth-child(2){transition-delay:70ms}
[data-reveal-stagger].is-in>*:nth-child(3){transition-delay:140ms}
[data-reveal-stagger].is-in>*:nth-child(4){transition-delay:210ms}
[data-reveal-stagger].is-in>*:nth-child(5){transition-delay:280ms}
[data-reveal-stagger].is-in>*:nth-child(6){transition-delay:350ms}

/* ============================================================
   RESPONSIVE — 1024 / 768 / 560 / 375
   ============================================================ */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__right{margin-left:auto}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr);row-gap:var(--s-5)}
  .process::before{display:none}
  .plans{grid-template-columns:1fr}
  .plan--featured{order:-1}
  .contact{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-3)}
}

@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;row-gap:var(--s-3)}
  .stats .stat+.stat{border-left:0;border-top:1px solid rgba(10,10,11,.18);padding-top:var(--s-3)}
  .sec-head--split{flex-direction:column;align-items:flex-start}
}

@media (max-width:640px){
  body{font-size:16px}
  /* the desktop density trim exists to fit six cards on a laptop screen;
     on mobile the grid stacks, so keep copy at the 16px readability floor */
  .card p{font-size:1rem}
  .spec__d,.plan li{font-size:1rem}
  .nav__tel span{display:none}
  /* the drawer carries the CTAs at this width; keep the bar from overflowing */
  .nav__right .btn--primary{display:none}
  .grid--4,.grid--2,.people{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:var(--s-4)}
  .footer__bar{flex-direction:column;align-items:flex-start}
  .hero__cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .pill{font-size:.82rem;padding-left:12px}
  .arc{width:150%;margin-bottom:calc(-1 * 22vw)}
  .values li{flex-direction:column;gap:6px}
  .values b{min-width:0}
}

@media (max-width:420px){
  .process{grid-template-columns:1fr;row-gap:var(--s-4)}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .marquee__track{animation:none;transform:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  [data-reveal],[data-reveal-stagger]>*{opacity:1 !important;transform:none !important}
  .btn:hover,.card:hover,.plan:hover,.step:hover .hex,.channels a:hover{transform:none}
}

/* print */
@media print{
  .nav,.drawer,.marquee,.arc,.hero__field,.cta-band{display:none !important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   SERVICE SUBPAGES
   ========================================================================== */
.page-hero{
  position:relative;
  /* Same offset as the homepage hero so inner pages open at the same height. */
  padding-top:calc(var(--nav-h) + clamp(20px,2.4vw,36px));
  padding-bottom:clamp(32px,4vw,52px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:-52%;translate:-50% 0;
  width:min(900px,120vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(237,80,15,.15),transparent 62%);
  pointer-events:none;
}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:var(--s-3);
  font-size:.86rem;color:var(--fg-3);
}
.crumb a{color:var(--fg-3);text-decoration:none;transition:color var(--dur) var(--ease)}
.crumb a:hover{color:var(--brand)}
.crumb svg{opacity:.55}
.crumb [aria-current]{color:var(--fg-2)}

.page-hero h1{font-size:clamp(2.2rem,5vw,3.5rem)}
.page-hero .lede{margin-top:18px}
.page-hero .hero__cta{justify-content:flex-start;margin-top:var(--s-4)}

/* what's included */
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2)}
.incl li{
  display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
  padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  font-size:.97rem;color:var(--fg-2);
}
.incl li svg{margin-top:4px;color:var(--brand)}
.incl li b{display:block;color:var(--fg);font-weight:600;margin-bottom:3px}

/* honest scope box — what we do and don't do */
.scope{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.scope__col{
  padding:var(--s-3);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.scope__col h3{
  display:flex;align-items:center;gap:10px;
  font-size:1rem;margin-bottom:var(--s-2);
}
.scope__col h3 svg{flex:none}
.scope__col--yes h3 svg{color:var(--brand)}
.scope__col--no h3 svg{color:var(--fg-3)}
.scope__col ul{display:flex;flex-direction:column;gap:10px}
.scope__col li{
  display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;
  font-size:.95rem;color:var(--fg-2);
}
.scope__col li svg{margin-top:4px}
.scope__col--yes li svg{color:var(--brand)}
.scope__col--no li svg{color:var(--fg-3)}
.scope__col--no li{color:var(--fg-3)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:22px 4px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:1.06rem;font-weight:600;
  color:var(--fg);letter-spacing:-.015em;
  transition:color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq summary .chev{flex:none;color:var(--brand);transition:transform var(--dur) var(--ease)}
.faq details[open] summary .chev{transform:rotate(45deg)}
.faq p{padding:0 4px 22px;font-size:.98rem;color:var(--fg-2);max-width:70ch}

/* other services rail */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.more a{
  display:flex;align-items:center;gap:14px;
  padding:18px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  color:var(--fg);text-decoration:none;
  font-family:var(--display);font-size:.99rem;font-weight:600;letter-spacing:-.015em;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.more a:hover{border-color:var(--brand-line);background:var(--brand-soft);transform:translateY(-2px)}
.more a .ic{
  display:grid;place-items:center;flex:none;width:38px;height:38px;
  border-radius:10px;border:1px solid var(--brand-line);
  background:var(--brand-soft);color:var(--brand);
}
.more a .ar{margin-left:auto;color:var(--fg-3);flex:none}

/* platform chips (WooCommerce / Shopify etc.) */
.plats{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-3)}
.plat{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:999px;
  border:1px solid var(--brand-line);background:var(--brand-soft);
  font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--fg);
}
.plat svg{color:var(--brand);flex:none}

@media (max-width:820px){
  .incl,.scope,.more{grid-template-columns:1fr}
}

/* ==========================================================================
   LEGAL / PROSE PAGES
   ========================================================================== */
.legal{max-width:74ch}
.legal__meta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:var(--s-3);padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:.86rem;color:var(--fg-3);
}
.legal__meta svg{color:var(--brand);flex:none}
.legal h2{
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  margin-top:clamp(36px,4vw,var(--s-5));
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal h3{
  font-size:1.02rem;color:var(--fg);
  margin-top:var(--s-3);margin-bottom:8px;
}
.legal p{margin-top:14px;color:var(--fg-2)}
.legal p:first-child{margin-top:0}
.legal ul{
  list-style:none;padding:0;margin-top:14px;
  display:flex;flex-direction:column;gap:10px;
}
.legal ul li{
  display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start;
  color:var(--fg-2);
}
.legal ul li::before{
  content:"";width:6px;height:6px;margin-top:10px;margin-left:5px;
  border-radius:50%;background:var(--brand);flex:none;
}
.legal a{color:var(--brand);text-underline-offset:3px}
.legal a:hover{color:var(--brand-2)}
.legal__contact{
  margin-top:var(--s-4);padding:var(--s-3);
  border:1px solid var(--line);border-left:2px solid var(--brand);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.legal__contact p{margin-top:0}
.legal__contact ul{margin-top:14px}
.legal__contact ul li::before{display:none}
.legal__contact ul li{grid-template-columns:1fr}

/* external-link marker */
.ext{display:inline-flex;align-items:center;gap:7px}
.ext svg{flex:none;opacity:.75}



/* visually hidden, still announced by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   NAV OVERFLOW — six links plus two buttons need ~1200px to sit comfortably.
   Collapse to the drawer earlier than the layout breakpoint (1024) so the bar
   never crowds. Everything hidden here is still reachable in the drawer.
   ========================================================================== */
@media (max-width:1200px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__right{margin-left:auto}
}
@media (max-width:640px){
  /* phone icon + burger only; both CTAs live in the drawer at this width */
  .nav__right .btn{display:none}
}

/* ==========================================================================
   SHORT VIEWPORTS — on a 768px-tall laptop the hero is ~100px too tall for
   the topology hub to clear the fold. Compress the vertical rhythm (not the
   content) so the whole diagram, hub included, lands on first paint.
   Width guard keeps this off phones, which use the compact stacked topology.
   ========================================================================== */
@media (min-width:901px) and (max-height:880px){
  .hero{
    padding-top:calc(var(--nav-h) + 14px);
    padding-bottom:28px;
  }
  .hero__inner{gap:14px}
  .hero h1{margin-top:2px;font-size:clamp(2.2rem,4.4vw,3.3rem)}
  .hero .lede{font-size:1rem;max-width:62ch}
  .hero__cta{margin-top:2px}
  .hero__trust{margin-top:10px}
  .topo{margin-top:8px}
}

/* 'From' prefix on plan prices — published rates are a floor, not a ceiling. */
.plan__from{font-family:var(--display);font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--fg-3);margin-right:2px}
.plan--featured .plan__from{color:rgba(10,10,11,.7)}
.plan__p .plan__from{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ==========================================================================
   AGENT DOWNLOADS (/agent) — behind Basic Auth at the edge
   ========================================================================== */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.dl{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:var(--s-4) var(--s-3);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
.dl__os{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:var(--s-2);
  border-radius:13px;border:1px solid var(--brand-line);
  background:var(--brand-soft);color:var(--brand);
}
.dl h2{margin-bottom:10px}
.dl p{font-size:.95rem;color:var(--fg-2)}
.dl code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;padding:1px 5px;border-radius:4px;
  background:rgba(255,255,255,.07);color:var(--fg);
}
.dl .btn{margin-top:var(--s-3);width:100%}
.dl__meta{
  margin-top:12px;font-size:.8rem;letter-spacing:.04em;color:var(--fg-3);
  font-variant-numeric:tabular-nums;
}
@media (max-width:820px){ .dl-grid{grid-template-columns:1fr} }

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}