/* =========================================================
   GardenRouteNet · core stylesheet
   Pre-launch. Dark-led. Teal earned, not sprayed.
   ========================================================= */

:root {
  --abyss:#050C17;
  --midnight:#0B1829;
  --deep:#111F33;
  --navy:#1A2B42;
  --steel:#4A6078;
  --slate:#6B7F96;
  --fog:#B8C5D4;
  --cloud:#E8EDF2;
  --white:#F4F7FA;
  --pure:#FFFFFF;
  --teal:#14B8A6;
  --teal-light:#5EEAD4;
  --teal-dark:#0D9488;
  --copper:#C78B4A;
  --warn:#F5B544;

  --f-display:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --max:1200px;
  --gut:48px;
  --radius:14px;
  --radius-sm:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:.15s;
  --t:.25s;
}

* { box-sizing:border-box; margin:0; padding:0; }
*::before, *::after { box-sizing:border-box; }

html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:80px;
}

body {
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.65;
  background:var(--abyss);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga";
  overflow-x:hidden;
}

img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; transition:color var(--t-fast); }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea { font:inherit; color:inherit; }

::selection { background:var(--teal); color:var(--midnight); }

:focus-visible {
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:2px;
}

.container {
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut);
}
.container-narrow {
  max-width:900px;
  margin:0 auto;
  padding:0 var(--gut);
}

.mono {
  font-family:var(--f-mono);
  font-feature-settings:"tnum" 1;
}

.skip-link {
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--teal);
  color:var(--midnight);
  padding:10px 16px;
  font-weight:600;
  font-size:13px;
  z-index:200;
  border-radius:0 0 8px 0;
}
.skip-link:focus { left:0; top:0; }

/* =========================================================
   Header + navigation
   ========================================================= */
.header {
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(5,12,23,0.84);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(26,43,66,0.45);
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--f-display);
  font-weight:800;
  font-size:15px;
  letter-spacing:-0.015em;
  color:var(--white);
}
.brand-mark {
  width:32px;
  height:18px;
  flex-shrink:0;
}
.nav {
  display:flex;
  align-items:center;
  gap:36px;
}
.nav-list {
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
}
.nav-list a {
  font-size:13px;
  color:var(--fog);
  font-weight:500;
  position:relative;
  padding:4px 0;
}
.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color:var(--white);
}
.nav-list a[aria-current="page"]::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:1px;
  background:var(--teal);
}
.nav-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--teal);
  color:var(--midnight);
  padding:10px 20px;
  border-radius:8px;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:-0.005em;
  transition:background var(--t-fast), transform var(--t-fast);
}
.nav-cta:hover { background:var(--teal-light); transform:translateY(-1px); }

.nav-toggle {
  display:none;
  width:40px; height:40px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--navy);
  border-radius:8px;
}
.nav-toggle span {
  display:block;
  width:16px; height:1.5px;
  background:var(--fog);
  position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--fog);
}
.nav-toggle span::before { top:-5px; }
.nav-toggle span::after { top:5px; }

@media (max-width:860px) {
  .nav-list { display:none; }
  .nav-toggle { display:flex; }
  .nav-cta { display:none; }
  .nav.open .nav-list {
    display:flex;
    position:absolute;
    top:68px; left:0; right:0;
    flex-direction:column;
    gap:0;
    background:var(--midnight);
    border-bottom:1px solid var(--navy);
    padding:8px 0;
  }
  .nav.open .nav-list li { width:100%; border-bottom:1px solid var(--navy); }
  .nav.open .nav-list li:last-child { border-bottom:none; }
  .nav.open .nav-list a {
    display:block;
    padding:16px var(--gut);
    font-size:15px;
  }
  .nav.open .nav-cta { display:inline-flex; margin:12px var(--gut) 16px; }
}

/* =========================================================
   Launch strip (honest, no fake live status)
   ========================================================= */
.launch-strip {
  background:var(--midnight);
  border-bottom:1px solid var(--navy);
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--slate);
  overflow:hidden;
}
.launch-strip-inner {
  display:flex;
  align-items:center;
  gap:28px;
  padding:11px 0;
  flex-wrap:wrap;
  letter-spacing:0.02em;
}
.launch-strip-inner strong { color:var(--fog); font-weight:500; }
.launch-strip .pulse {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(20,184,166,.5);
  animation:pulse 2.4s infinite;
  margin-right:8px;
  flex-shrink:0;
}
.launch-strip .region { margin-left:auto; }
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(20,184,166,.5); }
  70%  { box-shadow:0 0 0 7px rgba(20,184,166,0); }
  100% { box-shadow:0 0 0 0 rgba(20,184,166,0); }
}
@media (max-width:720px) {
  .launch-strip-inner { gap:16px; font-size:10px; }
  .launch-strip .region { margin-left:0; width:100%; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 28px;
  border-radius:var(--radius-sm);
  font-family:var(--f-display);
  font-weight:600;
  font-size:14px;
  letter-spacing:-0.005em;
  border:1px solid transparent;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  text-align:center;
}
.btn svg { transition:transform var(--t) var(--ease); }
.btn:hover svg { transform:translateX(4px); }
.btn-primary {
  background:var(--teal);
  color:var(--midnight);
}
.btn-primary:hover {
  background:var(--teal-light);
  transform:translateY(-1px);
}
.btn-secondary {
  background:transparent;
  color:var(--fog);
  border-color:rgba(26,43,66,0.8);
}
.btn-secondary:hover {
  border-color:var(--teal);
  color:var(--teal);
}
.btn-block { width:100%; }
.btn-quiet {
  background:transparent;
  color:var(--fog);
  border-color:transparent;
  padding:15px 0;
}
.btn-quiet:hover { color:var(--teal); }

/* =========================================================
   Sections + typographic section heads (no bordered boxes)
   ========================================================= */
section { padding:160px 0; position:relative; }
section.tight { padding:100px 0; }
section + section { padding-top:0; }
@media (max-width:860px) { section { padding:100px 0; } section.tight { padding:68px 0; } }

.sec-kicker {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.sec-kicker::before {
  content:"";
  width:28px;
  height:1px;
  background:var(--teal);
  display:inline-block;
}
.sec-head { margin-bottom:72px; max-width:720px; }
.sec-head.centered { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.centered .sec-kicker { justify-content:center; }
.sec-title {
  font-family:var(--f-display);
  font-size:clamp(34px, 4.6vw, 56px);
  font-weight:800;
  letter-spacing:-0.038em;
  line-height:1.02;
  color:var(--white);
  margin-top:24px;
}
.sec-title .accent { color:var(--teal); }
.sec-sub {
  margin-top:24px;
  color:var(--fog);
  font-size:16.5px;
  line-height:1.72;
  max-width:580px;
  font-weight:300;
}
.centered .sec-sub { margin-left:auto; margin-right:auto; }

/* Eyebrow chip */
.chip {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px;
  border:1px solid rgba(20,184,166,0.32);
  background:rgba(20,184,166,0.06);
  border-radius:32px;
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.chip .dot {
  width:6px; height:6px;
  border-radius:50%;
  background:var(--warn);
  box-shadow:0 0 0 0 rgba(245,181,68,.5);
  animation:pulse 2.4s infinite;
}

/* =========================================================
   HERO · layered bleed composition. Brand mark as a low-contrast
   atmospheric layer, not a second element, but a texture.
   ========================================================= */
.hero {
  min-height:calc(100vh - 68px - 42px);
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding:160px 0 140px;
  isolation:isolate;
}
.hero-canvas {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.hero-canvas::before {
  content:"";
  position:absolute;
  top:50%; right:-6%;
  width:72%; height:130%;
  transform:translateY(-50%);
  background:radial-gradient(ellipse 48% 46% at 56% 50%, rgba(20,184,166,0.16), transparent 70%);
  filter:blur(80px);
}
.hero-canvas::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    var(--abyss) 0%,
    var(--abyss) 26%,
    rgba(5,12,23,0.82) 44%,
    rgba(5,12,23,0.5) 62%,
    rgba(5,12,23,0.2) 82%,
    transparent 100%);
}
.hero-mark-bleed {
  position:absolute;
  top:50%;
  right:-18%;
  transform:translateY(-50%);
  width:min(1400px, 92vw);
  height:auto;
  opacity:0.09;
  filter:blur(0.5px);
  animation:hero-breathe 20s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.7) 22%, black 38%,
    black 70%, rgba(0,0,0,0.6) 85%, transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.7) 22%, black 38%,
    black 70%, rgba(0,0,0,0.6) 85%, transparent 100%);
}
.hero-mark-bleed path { fill:var(--teal-light); }

@keyframes hero-breathe {
  0%, 100% { opacity:0.09; transform:translateY(-50%) scale(1); }
  50%      { opacity:0.13; transform:translateY(-50%) scale(1.012); }
}

.hero-inner {
  position:relative;
  z-index:1;
}
.hero-copy {
  max-width:660px;
}

@media (max-width:980px) {
  .hero { padding:112px 0 100px; min-height:auto; }
  .hero-canvas::before {
    top:auto; bottom:-20%; right:-20%;
    width:120%; height:70%;
    transform:none;
  }
  .hero-canvas::after {
    background:linear-gradient(180deg,
      var(--abyss) 0%,
      rgba(5,12,23,0.82) 38%,
      rgba(5,12,23,0.45) 68%,
      transparent 100%);
  }
  .hero-mark-bleed {
    top:auto; bottom:-18%;
    right:-40%;
    transform:none;
    width:150vw;
    opacity:0.07;
    animation:hero-breathe-m 20s ease-in-out infinite;
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,0.2) 18%, rgba(0,0,0,0.7) 40%, black 60%);
    mask-image:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,0.2) 18%, rgba(0,0,0,0.7) 40%, black 60%);
  }
  .hero-copy { max-width:100%; }
}
@keyframes hero-breathe-m {
  0%, 100% { opacity:0.07; }
  50%      { opacity:0.10; }
}

.hero-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--teal);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:36px;
}
.hero-eyebrow::before {
  content:"";
  width:44px;
  height:1px;
  background:var(--teal);
}
.hero h1 {
  font-family:var(--f-display);
  font-size:clamp(44px, 6.4vw, 84px);
  font-weight:800;
  line-height:0.93;
  letter-spacing:-0.045em;
  max-width:700px;
  margin-bottom:38px;
}
.hero h1 .accent { color:var(--teal); }
.hero h1 .muted { color:var(--slate); font-weight:700; }
.hero .lede {
  font-size:17px;
  color:var(--fog);
  line-height:1.72;
  max-width:490px;
  margin-bottom:48px;
  font-weight:300;
}
.hero-ctas {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================================================
   Launch focus areas · asymmetric, not twin cards
   ========================================================= */
.focus {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:20px;
}
@media (max-width:860px) { .focus { grid-template-columns:1fr; } }

.area {
  position:relative;
  background:linear-gradient(180deg, var(--deep) 0%, var(--midnight) 100%);
  border:1px solid rgba(26,43,66,0.7);
  border-radius:var(--radius);
  padding:52px 48px 48px;
  overflow:hidden;
  min-height:360px;
  display:flex;
  flex-direction:column;
  transition:border-color var(--t);
}
.area:hover { border-color:rgba(26,43,66,1); }
.area::after {
  content:"";
  position:absolute;
  top:-40%; right:-30%;
  width:90%; height:180%;
  background:radial-gradient(ellipse at center, rgba(20,184,166,0.06), transparent 65%);
  pointer-events:none;
}
.area-primary { grid-row:span 1; }
.area-secondary {
  background:var(--midnight);
}
.area-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:36px;
  position:relative;
  z-index:1;
}
.area-id {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--slate);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.area-name {
  font-family:var(--f-display);
  font-size:clamp(26px, 3.2vw, 36px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.05;
  color:var(--white);
}
.area-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:24px;
  font-family:var(--f-mono);
  font-size:9.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  flex-shrink:0;
  background:rgba(20,184,166,0.08);
  color:var(--teal);
  border:1px solid rgba(20,184,166,0.28);
}
.area-status .dot {
  width:6px; height:6px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(20,184,166,.5);
  animation:pulse 2.4s infinite;
}
.area-status-queue {
  background:rgba(107,127,150,0.1);
  color:var(--fog);
  border-color:rgba(107,127,150,0.3);
}
.area-status-queue .dot { background:var(--slate); animation:none; box-shadow:none; }

.area-body {
  font-size:15px;
  color:var(--fog);
  line-height:1.7;
  font-weight:300;
  margin-bottom:32px;
  position:relative;
  z-index:1;
  max-width:440px;
}
.area-foot {
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding-top:24px;
  border-top:1px solid var(--navy);
  position:relative;
  z-index:1;
}
.area-meta {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--steel);
  letter-spacing:0.06em;
}
.area-cta {
  font-family:var(--f-display);
  font-size:13px;
  font-weight:600;
  color:var(--teal);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:gap var(--t) var(--ease);
}
.area-cta:hover { gap:12px; }
.area-cta svg { transition:transform var(--t) var(--ease); }
.area-cta:hover svg { transform:translateX(3px); }

/* =========================================================
   Pillars · typographic, no heavy cards
   ========================================================= */
.pillars {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--navy);
}
@media (max-width:860px) { .pillars { grid-template-columns:1fr; } }
.pillar {
  padding:48px 40px 48px 0;
  border-bottom:1px solid var(--navy);
  position:relative;
}
.pillar:not(:last-child) { border-right:1px solid var(--navy); padding-right:40px; }
.pillar:not(:first-child) { padding-left:40px; }
@media (max-width:860px) {
  .pillar { padding:32px 0; border-right:none !important; padding-left:0 !important; padding-right:0 !important; }
  .pillar:last-child { border-bottom:none; }
}
.pillar-num {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.08em;
  margin-bottom:32px;
  display:block;
}
.pillar-title {
  font-family:var(--f-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.2;
  margin-bottom:18px;
}
.pillar-body {
  font-size:14.5px;
  color:var(--fog);
  line-height:1.75;
  font-weight:300;
  max-width:340px;
}

/* =========================================================
   Packages preview (home) · compact, typographic
   ========================================================= */
.packages-preview {
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
}
.pkg-row {
  display:grid;
  grid-template-columns:1fr 1fr 1.3fr auto;
  align-items:center;
  gap:32px;
  padding:32px 0;
  border-bottom:1px solid var(--navy);
  transition:background var(--t);
}
.pkg-row:last-child { border-bottom:none; }
.pkg-row:hover { background:rgba(20,184,166,0.02); }
.pkg-speed {
  font-family:var(--f-display);
  font-size:clamp(28px, 3vw, 36px);
  font-weight:800;
  letter-spacing:-0.035em;
  color:var(--white);
}
.pkg-speed .unit { color:var(--slate); font-weight:600; font-size:0.55em; margin-left:6px; }
.pkg-tier {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.pkg-line {
  font-size:14px;
  color:var(--fog);
  line-height:1.55;
  font-weight:300;
}
.pkg-price {
  font-family:var(--f-display);
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:700;
  color:var(--teal);
  letter-spacing:-0.025em;
  white-space:nowrap;
}
.pkg-price small {
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--slate);
  font-weight:500;
  display:block;
  margin-top:4px;
  letter-spacing:0.04em;
}
.pkg-install-note {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  margin-top:20px;
  gap:24px;
  flex-wrap:wrap;
}
.pkg-install-note p {
  font-size:13px;
  color:var(--slate);
  max-width:560px;
  line-height:1.6;
}
.pkg-install-note p strong { color:var(--fog); font-weight:500; }
@media (max-width:720px) {
  .pkg-row {
    grid-template-columns:1fr auto;
    gap:12px 20px;
    padding:24px 0;
  }
  .pkg-tier { grid-column:1/-1; }
  .pkg-line { grid-column:1/-1; order:3; }
}

/* =========================================================
   Packages · full comparison (Areas & Packages page)
   ========================================================= */
.packages {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
}
@media (max-width:860px) { .packages { grid-template-columns:1fr; } }
.package {
  padding:48px 40px 44px;
  border-right:1px solid var(--navy);
  display:flex;
  flex-direction:column;
  position:relative;
  transition:background var(--t);
}
.package:last-child { border-right:none; }
@media (max-width:860px) {
  .package { border-right:none; border-bottom:1px solid var(--navy); padding:36px 0; }
  .package:last-child { border-bottom:none; }
}
.package:hover { background:rgba(20,184,166,0.02); }
.package-tier {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.package-speed {
  font-family:var(--f-display);
  font-size:clamp(42px, 5vw, 58px);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:0.95;
  color:var(--white);
  margin-bottom:4px;
}
.package-speed .unit { color:var(--slate); font-weight:600; font-size:0.35em; letter-spacing:0; margin-left:6px; }
.package-price {
  font-family:var(--f-display);
  font-size:22px;
  font-weight:700;
  color:var(--teal);
  letter-spacing:-0.02em;
  margin-bottom:28px;
}
.package-price small {
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--slate);
  font-weight:500;
  margin-left:6px;
}
.package-for {
  font-size:14px;
  color:var(--fog);
  line-height:1.6;
  font-weight:300;
  max-width:240px;
  margin-bottom:32px;
  flex:1;
}

.package-install {
  padding:40px 0 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:720px) { .package-install { grid-template-columns:1fr; } }
.install-opt {
  padding:32px 36px;
  border:1px solid rgba(26,43,66,0.7);
  border-radius:var(--radius);
  background:var(--deep);
  transition:border-color var(--t);
}
.install-opt:hover { border-color:rgba(26,43,66,1); }
.install-opt-label {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.install-opt-name {
  font-family:var(--f-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.install-opt-price {
  font-family:var(--f-display);
  font-size:28px;
  font-weight:800;
  color:var(--teal);
  letter-spacing:-0.03em;
  margin-bottom:16px;
}
.install-opt-price .currency { font-size:16px; color:var(--slate); font-weight:600; margin-right:3px; }
.install-opt-body {
  font-size:13px;
  color:var(--fog);
  line-height:1.65;
  font-weight:300;
}
.install-shared-note {
  margin-top:24px;
  font-size:12.5px;
  color:var(--steel);
  line-height:1.7;
  max-width:700px;
}
.install-shared-note strong { color:var(--fog); font-weight:500; }

/* =========================================================
   How joining works · simple typographic steps
   ========================================================= */
.join {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--navy);
}
@media (max-width:720px) { .join { grid-template-columns:1fr; } }
.join-step {
  padding:48px 44px 44px 0;
  border-right:1px solid var(--navy);
  position:relative;
}
.join-step:last-child { border-right:none; padding-right:0; }
.join-step:not(:first-child) { padding-left:44px; }
@media (max-width:720px) {
  .join-step { padding:32px 0; border-right:none; border-bottom:1px solid var(--navy); padding-left:0 !important; }
  .join-step:last-child { border-bottom:none; }
}
.join-num {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.08em;
  margin-bottom:20px;
  display:block;
}
.join-title {
  font-family:var(--f-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.025em;
  margin-bottom:14px;
}
.join-body {
  font-size:14px;
  color:var(--fog);
  line-height:1.7;
  font-weight:300;
  max-width:280px;
}

/* =========================================================
   Trust band · quiet, typographic, no metrics
   ========================================================= */
.trust {
  padding:72px 0;
  text-align:center;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
  position:relative;
  overflow:hidden;
}
.trust::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, rgba(20,184,166,0.05), transparent 70%);
  pointer-events:none;
}
.trust blockquote {
  font-family:var(--f-display);
  font-size:clamp(22px, 2.8vw, 30px);
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.35;
  color:var(--white);
  max-width:780px;
  margin:0 auto 28px;
  position:relative;
}
.trust blockquote .accent { color:var(--teal); }
.trust-signature {
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--slate);
  letter-spacing:0.06em;
  text-transform:uppercase;
  position:relative;
}
.trust-signature span { color:var(--fog); }

/* =========================================================
   Final CTA banner
   ========================================================= */
.cta-banner {
  padding:96px 0 32px;
  text-align:center;
  position:relative;
  border-top:1px solid var(--navy);
}
.cta-banner::before {
  content:"";
  position:absolute;
  top:-20%; left:50%;
  width:70%; height:130%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 46% 42% at 50% 55%, rgba(20,184,166,0.09), transparent 68%);
  filter:blur(60px);
  pointer-events:none;
}
.cta-banner > * { position:relative; z-index:1; }
.cta-banner .sec-kicker { justify-content:center; display:inline-flex; }
.cta-banner h2 {
  font-family:var(--f-display);
  font-size:clamp(36px, 5vw, 60px);
  font-weight:800;
  letter-spacing:-0.042em;
  line-height:1.0;
  margin:24px 0 26px;
}
.cta-banner p {
  font-size:16.5px;
  color:var(--fog);
  max-width:520px;
  margin:0 auto 44px;
  line-height:1.72;
  font-weight:300;
}
.cta-banner .hero-ctas { justify-content:center; margin:0; }
@media (max-width:720px) { .cta-banner { padding:56px 28px; } }

/* =========================================================
   Forms
   ========================================================= */
.form {
  background:linear-gradient(180deg, var(--deep) 0%, rgba(11,24,41,0.6) 100%);
  border:1px solid rgba(26,43,66,0.7);
  border-radius:var(--radius);
  padding:48px;
}
@media (max-width:720px) { .form { padding:28px 24px; } }
.form-title {
  font-family:var(--f-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.025em;
  margin-bottom:8px;
}
.form-sub {
  font-size:13.5px;
  color:var(--fog);
  margin-bottom:32px;
  line-height:1.65;
  font-weight:300;
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:640px) { .form-grid { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1 / -1; }
.field label {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--slate);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:500;
}
.field input,
.field select,
.field textarea {
  background:var(--midnight);
  border:1px solid var(--navy);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:14px;
  color:var(--white);
  font-family:var(--f-body);
  transition:border-color var(--t-fast), background var(--t-fast);
  width:100%;
}
.field textarea { resize:vertical; min-height:120px; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color:var(--steel); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline:none;
  border-color:var(--teal);
  background:rgba(20,184,166,0.03);
}
.field input::placeholder,
.field textarea::placeholder { color:var(--steel); }
.form-submit { margin-top:28px; }
.form-hint {
  margin-top:20px;
  font-size:11.5px;
  color:var(--steel);
  line-height:1.6;
  text-align:center;
}
.form-success {
  display:none;
  padding:18px 20px;
  border-radius:var(--radius-sm);
  background:rgba(20,184,166,0.06);
  border:1px solid rgba(20,184,166,0.28);
  color:var(--fog);
  font-size:13px;
  line-height:1.6;
  margin-top:20px;
  text-align:center;
  font-weight:400;
}
.form-success a {
  color:var(--teal);
  font-weight:600;
  border-bottom:1px solid rgba(20,184,166,0.4);
}
.form-success a:hover { color:var(--teal-light); }
.form-success.visible { display:block; }

/* =========================================================
   Split sections (intro + form)
   ========================================================= */
.split {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:72px;
  align-items:start;
}
@media (max-width:980px) { .split { grid-template-columns:1fr; gap:52px; } }
.split-kicker {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:24px;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.split-kicker::before {
  content:"";
  width:28px;
  height:1px;
  background:var(--teal);
}
.split h2 {
  font-family:var(--f-display);
  font-size:clamp(30px, 3.8vw, 44px);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1.05;
  margin-bottom:24px;
}
.split h2 .accent { color:var(--teal); }
.split p {
  color:var(--fog);
  font-size:15.5px;
  line-height:1.75;
  font-weight:300;
  margin-bottom:16px;
  max-width:460px;
}
.split p a { color:var(--teal); }
.split-meta {
  display:grid;
  gap:16px;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--navy);
  max-width:460px;
}
.split-meta > div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  font-family:var(--f-mono);
  font-size:11.5px;
  color:var(--slate);
}
.split-meta > div strong { color:var(--fog); font-weight:500; text-transform:uppercase; letter-spacing:0.06em; font-size:10px; }

/* =========================================================
   Contact · channels (no filler phone)
   ========================================================= */
.channels {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:720px) { .channels { grid-template-columns:1fr; } }
.channel {
  background:linear-gradient(180deg, var(--deep) 0%, rgba(11,24,41,0.5) 100%);
  border:1px solid rgba(26,43,66,0.7);
  border-radius:var(--radius);
  padding:40px 40px 36px;
  transition:border-color var(--t), transform var(--t);
  display:block;
  position:relative;
  overflow:hidden;
}
.channel::after {
  content:"";
  position:absolute;
  top:0; right:0;
  width:140px; height:140px;
  background:radial-gradient(circle at top right, rgba(20,184,166,0.07), transparent 70%);
  pointer-events:none;
}
.channel:hover {
  border-color:var(--teal);
  transform:translateY(-2px);
}
.channel-icon {
  width:44px; height:44px;
  border-radius:10px;
  background:rgba(20,184,166,0.1);
  border:1px solid rgba(20,184,166,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--teal);
  margin-bottom:28px;
  position:relative;
}
.channel-label {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.channel-value {
  font-family:var(--f-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:10px;
  color:var(--white);
  word-break:break-word;
}
.channel-note {
  font-size:13px;
  color:var(--slate);
  line-height:1.6;
  font-weight:300;
  position:relative;
}
.channel-pending {
  cursor:default;
  opacity:0.72;
}
.channel-pending:hover {
  border-color:var(--navy);
  transform:none;
}
.channel-pending .channel-icon {
  background:rgba(107,127,150,0.08);
  border-color:rgba(107,127,150,0.25);
  color:var(--slate);
}
.channel-pending .channel-label { color:var(--slate); }
.channel-pending .channel-value { color:var(--fog); font-weight:500; font-size:15px; letter-spacing:0; }

/* =========================================================
   Founder strip (not full cards)
   ========================================================= */
.founder-strip {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
}
@media (max-width:720px) { .founder-strip { grid-template-columns:1fr; } }
.founder-item {
  padding:36px 40px 36px 0;
  border-right:1px solid var(--navy);
}
.founder-item:last-child { border-right:none; padding-left:40px; padding-right:0; }
@media (max-width:720px) {
  .founder-item { padding:28px 0; border-right:none; border-bottom:1px solid var(--navy); padding-left:0 !important; }
  .founder-item:last-child { border-bottom:none; }
}
.founder-label {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.founder-name {
  font-family:var(--f-display);
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:6px;
}
.founder-role {
  font-size:13px;
  color:var(--slate);
  line-height:1.55;
  max-width:320px;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { display:grid; gap:0; border-top:1px solid var(--navy); }
.faq-item {
  border-bottom:1px solid var(--navy);
  overflow:hidden;
}
.faq-q {
  width:100%;
  text-align:left;
  padding:28px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:var(--f-display);
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--white);
  transition:color var(--t-fast);
  list-style:none;
  cursor:pointer;
}
.faq-q::-webkit-details-marker { display:none; }
.faq-q:hover { color:var(--teal); }
.faq-plus {
  width:16px; height:16px;
  position:relative;
  flex-shrink:0;
}
.faq-plus::before,
.faq-plus::after {
  content:"";
  position:absolute;
  background:var(--teal);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.faq-plus::before { top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }
.faq-plus::after { left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }
.faq-item[open] .faq-plus::after { transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-a {
  padding:0 0 28px;
  font-size:14.5px;
  color:var(--fog);
  line-height:1.75;
  font-weight:300;
  max-width:760px;
}

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
.reveal.in {
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal { opacity:1; transform:none; }
  .hero-mark-bleed { animation:none !important; }
  html { scroll-behavior:auto; }
}

/* =========================================================
   Page header (sub-pages)
   ========================================================= */
.page-header {
  padding:152px 0 112px;
  position:relative;
  overflow:hidden;
}
.page-header::before {
  content:"";
  position:absolute;
  top:-30%; left:-10%;
  width:50%; height:90%;
  background:radial-gradient(ellipse at center, rgba(20,184,166,0.05), transparent 65%);
  filter:blur(50px);
  pointer-events:none;
}
.page-header-inner { position:relative; z-index:1; max-width:840px; }
.page-header h1 {
  font-family:var(--f-display);
  font-size:clamp(48px, 7vw, 88px);
  font-weight:800;
  line-height:0.96;
  letter-spacing:-0.045em;
  margin:28px 0 28px;
}
.page-header h1 .accent { color:var(--teal); }
.page-header h1 .muted { color:var(--slate); }
.page-header p {
  font-size:17.5px;
  color:var(--fog);
  line-height:1.65;
  max-width:620px;
  font-weight:300;
}
.page-header p a { color:var(--teal); }
@media (max-width:720px) { .page-header { padding:88px 0 68px; } }

/* =========================================================
   Footer · minimal two-row
   ========================================================= */
.footer {
  background:var(--midnight);
  border-top:1px solid var(--navy);
  padding:64px 0 40px;
  margin-top:0;
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
  padding-bottom:36px;
  border-bottom:1px solid var(--navy);
}
.footer-nav {
  display:flex;
  gap:32px;
  list-style:none;
  flex-wrap:wrap;
}
.footer-nav a {
  font-size:13px;
  color:var(--fog);
  font-family:var(--f-display);
  font-weight:500;
}
.footer-nav a:hover { color:var(--teal); }
.footer-bottom {
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--steel);
  flex-wrap:wrap;
  letter-spacing:0.04em;
}
.footer-bottom .sep { color:var(--steel); opacity:0.4; margin:0 4px; }
@media (max-width:640px) {
  .footer-top { flex-direction:column; align-items:flex-start; gap:24px; }
  .footer-nav { gap:20px 24px; }
}

/* =========================================================
   Small utilities
   ========================================================= */
.mt-24 { margin-top:24px; }
.mt-40 { margin-top:40px; }
.inline-cta {
  color:var(--teal);
  font-family:var(--f-display);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.inline-cta svg { transition:transform var(--t) var(--ease); }
.inline-cta:hover svg { transform:translateX(3px); }

/* =========================================================
   Header scroll state + body lock
   ========================================================= */
.header.is-scrolled {
  background:rgba(5,12,23,0.94);
  box-shadow:0 1px 0 rgba(26,43,66,0.8), 0 10px 30px -20px rgba(0,0,0,0.6);
}
body.nav-locked { overflow:hidden; }

/* =========================================================
   Hero · proof list
   ========================================================= */
.hero-proof {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid rgba(26,43,66,0.7);
  max-width:620px;
}
.hero-proof li {
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--slate);
  letter-spacing:0.03em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.hero-proof .dot {
  width:5px; height:5px;
  border-radius:50%;
  background:var(--teal);
  flex-shrink:0;
}

/* =========================================================
   Waitlist block (home)
   ========================================================= */
.waitlist {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
  padding:80px;
  background:linear-gradient(180deg, var(--deep) 0%, var(--midnight) 100%);
  border:1px solid rgba(26,43,66,0.7);
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
.waitlist::before {
  content:"";
  position:absolute;
  top:-40%; right:-20%;
  width:60%; height:160%;
  background:radial-gradient(ellipse at center, rgba(20,184,166,0.08), transparent 60%);
  filter:blur(70px);
  pointer-events:none;
}
.waitlist > * { position:relative; z-index:1; }
.waitlist-copy h2 {
  font-family:var(--f-display);
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.05;
  margin-top:22px;
}
.waitlist-copy p {
  color:var(--fog);
  font-weight:300;
  line-height:1.7;
  margin-top:22px;
  max-width:420px;
}
.waitlist-points {
  list-style:none;
  margin-top:28px;
  display:grid;
  gap:12px;
}
.waitlist-points li {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--fog);
}
.waitlist-points .tick {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:50%;
  background:rgba(20,184,166,0.12);
  color:var(--teal);
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(20,184,166,0.3);
  flex-shrink:0;
}
.waitlist-form.form { padding:36px; }
@media (max-width:860px) {
  .waitlist { grid-template-columns:1fr; gap:44px; padding:44px 28px; }
}

/* =========================================================
   Package preview · featured highlight
   ========================================================= */
.pkg-row-featured {
  background:linear-gradient(90deg, rgba(20,184,166,0.05) 0%, transparent 70%);
  position:relative;
}
.pkg-row-featured::before {
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:var(--teal);
  transform:translateX(-14px);
}
.package-featured {
  background:rgba(20,184,166,0.03);
  position:relative;
}
.package-featured::before {
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:var(--teal);
}
.package-feats {
  list-style:none;
  display:grid;
  gap:10px;
  margin-bottom:28px;
  flex:1;
}
.package-feats li {
  font-size:13px;
  color:var(--fog);
  line-height:1.55;
  font-weight:300;
  padding-left:20px;
  position:relative;
}
.package-feats li::before {
  content:"";
  position:absolute;
  left:0; top:8px;
  width:10px; height:2px;
  background:var(--teal);
}
.install-opt-featured {
  border-color:rgba(20,184,166,0.35);
  background:linear-gradient(180deg, rgba(20,184,166,0.04), var(--deep));
}

/* =========================================================
   Forms · status, honeypot, errors, spinner, optional tag
   ========================================================= */
.field .optional {
  color:var(--steel);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-family:var(--f-body);
  font-size:11px;
  margin-left:6px;
}
.field-error {
  display:block;
  margin-top:6px;
  font-family:var(--f-mono);
  font-size:11px;
  color:#FF7A85;
  letter-spacing:0.02em;
  min-height:1em;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color:#FF7A85;
  background:rgba(255,122,133,0.04);
}
.field.hp {
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.form-status {
  display:none;
  padding:16px 20px;
  border-radius:var(--radius-sm);
  font-size:13.5px;
  line-height:1.6;
  margin-top:20px;
  text-align:left;
  border:1px solid;
}
.form-status.visible { display:block; }
.form-status[data-state="success"] {
  background:rgba(20,184,166,0.08);
  border-color:rgba(20,184,166,0.35);
  color:var(--cloud);
}
.form-status[data-state="error"] {
  background:rgba(255,122,133,0.06);
  border-color:rgba(255,122,133,0.4);
  color:#FFD1D5;
}
.form-status[data-state="info"] {
  background:rgba(107,127,150,0.1);
  border-color:rgba(107,127,150,0.3);
  color:var(--fog);
}
.form-status a {
  color:var(--teal);
  font-weight:600;
  border-bottom:1px solid rgba(20,184,166,0.4);
}
.btn.is-loading { opacity:0.9; cursor:wait; }
.btn-spinner {
  display:inline-block;
  width:14px; height:14px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform:rotate(360deg); } }

/* =========================================================
   Footer · richer columns
   ========================================================= */
.footer-brand {
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:320px;
}
.footer-tag {
  font-size:13px;
  color:var(--slate);
  line-height:1.5;
  font-weight:300;
}
.footer-cols {
  display:grid;
  grid-template-columns:repeat(3, minmax(140px, auto));
  gap:48px;
}
.footer-cols h4 {
  font-family:var(--f-mono);
  font-size:10px;
  color:var(--teal);
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:16px;
}
.footer-cols ul {
  list-style:none;
  display:grid;
  gap:10px;
}
.footer-cols ul li,
.footer-cols ul a {
  font-size:13px;
  color:var(--fog);
  font-weight:400;
  line-height:1.5;
}
.footer-cols ul a:hover { color:var(--teal); }
@media (max-width:640px) {
  .footer-cols { gap:28px 24px; grid-template-columns:1fr 1fr; }
}

/* =========================================================
   Channels · three-up, even grid
   ========================================================= */
.channels { grid-template-columns:repeat(3, 1fr); }
@media (max-width:860px) { .channels { grid-template-columns:1fr; } }

/* =========================================================
   Mobile refinements
   ========================================================= */
@media (max-width:720px) {
  body { font-size:15px; }
  .hero .lede { font-size:16.5px; }
  .waitlist-form.form { padding:28px; }
  .hero-ctas .btn { flex:1; min-width:0; }
}

/* Prevent horizontal overflow from hero bleed on very narrow screens */
@media (max-width:420px) {
  .hero-mark-bleed { display:none; }
  .hero-canvas::before { opacity:0.7; }
}

/* =========================================================
   Place / locality block (aerial image)
   ========================================================= */
.place-section { padding-top:0; }
.place {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:80px;
  align-items:center;
}
@media (max-width:980px) { .place { grid-template-columns:1fr; gap:40px; } }

.place-media {
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(26,43,66,0.6);
  aspect-ratio: 16 / 11;
  background:var(--midnight);
}
.place-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(0.85) contrast(1.02) brightness(0.88);
  transition:transform .8s var(--ease);
}
.place-media:hover img { transform:scale(1.02); }
.place-media.media-missing,
.trust-media.media-missing {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(20,184,166,0.14), transparent 60%),
    linear-gradient(180deg, var(--deep), var(--midnight));
}
.place-media.media-missing img,
.trust-media.media-missing img { display:none; }
.place-media.media-missing::after,
.trust-media.media-missing::after {
  content:"Image placeholder";
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--steel);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.place-media-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,12,23,0) 40%, rgba(5,12,23,0.75) 100%),
    linear-gradient(90deg, rgba(5,12,23,0.3) 0%, rgba(5,12,23,0) 40%);
  pointer-events:none;
}
.place-caption {
  position:absolute;
  left:24px; bottom:22px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--cloud);
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:12px 16px;
  background:rgba(5,12,23,0.7);
  border:1px solid rgba(20,184,166,0.25);
  border-radius:8px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.place-coord { color:var(--teal); }

.place-copy .sec-title { font-size:clamp(30px, 4vw, 46px); }
.place-copy p {
  margin-top:22px;
  color:var(--fog);
  font-size:16px;
  line-height:1.75;
  font-weight:300;
  max-width:500px;
}
.place-facts {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--navy);
  max-width:520px;
}
.place-facts li {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.place-facts strong {
  font-family:var(--f-display);
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:800;
  color:var(--teal);
  letter-spacing:-0.03em;
  line-height:1;
}
.place-facts span {
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--slate);
  letter-spacing:0.06em;
  text-transform:uppercase;
}

/* =========================================================
   Rollout timeline
   ========================================================= */
.timeline {
  list-style:none;
  display:grid;
  gap:0;
  border-top:1px solid var(--navy);
  max-width:860px;
}
.timeline-item {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:24px;
  padding:36px 0;
  border-bottom:1px solid var(--navy);
  position:relative;
}
.timeline-dot {
  width:14px; height:14px;
  border-radius:50%;
  background:var(--midnight);
  border:2px solid var(--steel);
  margin-top:6px;
  position:relative;
}
.timeline-item.is-done .timeline-dot {
  background:var(--teal);
  border-color:var(--teal);
}
.timeline-item.is-done .timeline-dot::after {
  content:"";
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:var(--midnight);
}
.timeline-item.is-active .timeline-dot {
  background:var(--teal);
  border-color:var(--teal);
  box-shadow:0 0 0 0 rgba(20,184,166,.5);
  animation:pulse 2.4s infinite;
}
.timeline-phase {
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--teal);
  letter-spacing:0.1em;
  text-transform:uppercase;
  display:block;
  margin-bottom:10px;
}
.timeline-item:not(.is-done):not(.is-active) .timeline-phase { color:var(--steel); }
.timeline-body h3 {
  font-family:var(--f-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.3;
  margin-bottom:8px;
  color:var(--white);
}
.timeline-item:not(.is-done):not(.is-active) .timeline-body h3 { color:var(--fog); }
.timeline-body p {
  font-size:14px;
  color:var(--fog);
  line-height:1.7;
  font-weight:300;
  max-width:640px;
}
.timeline-item:not(.is-done):not(.is-active) .timeline-body p { color:var(--slate); }

/* =========================================================
   Trust pro · tower image + commitments
   ========================================================= */
.trust-pro {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:72px;
  align-items:center;
}
@media (max-width:980px) { .trust-pro { grid-template-columns:1fr; gap:40px; } }
.trust-media {
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(26,43,66,0.6);
  aspect-ratio: 4 / 5;
  max-height:640px;
  background:var(--midnight);
}
@media (max-width:980px) { .trust-media { aspect-ratio: 16 / 10; max-height:none; } }
.trust-media img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(0.8) contrast(1.05) brightness(0.82);
}
.trust-media-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,12,23,0.3) 0%, rgba(5,12,23,0.1) 40%, rgba(5,12,23,0.85) 100%),
    radial-gradient(ellipse at 30% 70%, rgba(20,184,166,0.15), transparent 60%);
  pointer-events:none;
}
.commitments {
  list-style:none;
  display:grid;
  gap:32px;
  margin-top:44px;
}
.commitments li {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:22px;
  align-items:start;
  padding-bottom:32px;
  border-bottom:1px solid var(--navy);
}
.commitments li:last-child { border-bottom:none; padding-bottom:0; }
.commit-num {
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  color:var(--teal);
  letter-spacing:0.06em;
  padding-top:4px;
}
.commitments h3 {
  font-family:var(--f-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:-0.015em;
  line-height:1.35;
  margin-bottom:6px;
  color:var(--white);
}
.commitments p {
  font-size:14px;
  color:var(--fog);
  line-height:1.65;
  font-weight:300;
}

/* =========================================================
   Mobile sticky CTA
   ========================================================= */
.mobile-cta {
  display:none;
  position:fixed;
  left:16px; right:16px;
  bottom:16px;
  z-index:70;
  background:var(--teal);
  color:var(--midnight);
  font-family:var(--f-display);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:-0.005em;
  padding:17px 22px;
  border-radius:14px;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:
    0 16px 32px -12px rgba(20,184,166,0.45),
    0 6px 16px rgba(0,0,0,0.35);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.mobile-cta:hover { background:var(--teal-light); }
.mobile-cta svg { transition:transform var(--t) var(--ease); }
.mobile-cta:active { transform:translateY(1px); }
.mobile-cta.is-hidden {
  opacity:0;
  pointer-events:none;
  transform:translateY(120%);
}
@media (max-width:720px) {
  .mobile-cta { display:flex; }
  /* Leave footer room for sticky CTA so it doesn't cover content */
  .footer { padding-bottom:96px; }
}

/* =========================================================
   Form hint link colour · better contrast
   ========================================================= */
.form-hint a {
  color:var(--fog);
  border-bottom:1px solid rgba(184,197,212,0.35);
  transition:color var(--t-fast), border-color var(--t-fast);
}
.form-hint a:hover { color:var(--teal); border-color:var(--teal); }

/* =========================================================
   Legal pages (privacy, terms)
   ========================================================= */
.legal { padding-top:0; }
.legal-body {
  padding:24px 0 64px;
  font-size:15.5px;
  line-height:1.8;
  color:var(--fog);
  font-weight:300;
}
.legal-body h2 {
  font-family:var(--f-display);
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--white);
  margin:44px 0 14px;
  padding-top:28px;
  border-top:1px solid var(--navy);
}
.legal-body h2:first-child { margin-top:0; padding-top:0; border-top:none; }
.legal-body p { margin-bottom:16px; }
.legal-body ul {
  margin:0 0 20px;
  padding-left:22px;
}
.legal-body ul li {
  margin-bottom:10px;
  line-height:1.75;
}
.legal-body ul li::marker { color:var(--teal); }
.legal-body strong { color:var(--cloud); font-weight:500; }
.legal-body a {
  color:var(--teal);
  border-bottom:1px solid rgba(20,184,166,0.4);
}
.legal-body a:hover { color:var(--teal-light); border-color:var(--teal-light); }
.legal-meta {
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--steel);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-top:16px;
}

/* =========================================================
   Contact · credibility section (non-founder)
   ========================================================= */
.credibility {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
}
@media (max-width:720px) { .credibility { grid-template-columns:1fr; } }
.credibility-item {
  padding:40px 44px 40px 0;
  border-right:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
  position:relative;
}
.credibility-item:nth-child(2n) { border-right:none; padding-left:44px; padding-right:0; }
.credibility-item:nth-last-child(-n+2) { border-bottom:none; }
@media (max-width:720px) {
  .credibility-item { padding:32px 0; border-right:none !important; padding-left:0 !important; }
  .credibility-item:nth-last-child(-n+2) { border-bottom:1px solid var(--navy); }
  .credibility-item:last-child { border-bottom:none; }
}
.credibility-num {
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--teal);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:18px;
  display:block;
}
.credibility-item h3 {
  font-family:var(--f-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.3;
  margin-bottom:10px;
  color:var(--white);
}
.credibility-item p {
  font-size:14px;
  color:var(--fog);
  line-height:1.72;
  font-weight:300;
  max-width:320px;
}

/* =========================================================
   Utility: flush padding-top for sections needing override
   ========================================================= */
.section-flush { padding-top:48px; }

/* =========================================================
   Small readability bumps
   ========================================================= */
.launch-strip-inner { font-size:11px; }
.footer-bottom { font-size:11px; }
.area-id, .pillar-num, .join-num, .sec-kicker, .pkg-tier, .package-tier,
.install-opt-label, .founder-label, .channel-label,
.split-kicker, .footer-cols h4, .timeline-phase {
  font-size:10.5px;
}
.area-meta { font-size:10.5px; }
.field label { font-size:10.5px; }