/* ===== Tokens ===== */
:root{
  --bg: #060706;
  --bg-alt: #090a09;
  --panel: #101110;
  --panel-2: #0c0d0c;
  --border: rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.13);
  --text: #eef1ee;
  --text-dim: #97a094;
  --text-dimmer: #666e64;
  --accent: #7fe14c;
  --accent-strong: #9dff66;
  --accent-dim: rgba(127,225,76,.14);
  --accent-line: rgba(127,225,76,.35);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --wrap: clamp(1180px, 90vw, 1600px);
  --ease: cubic-bezier(.16,.8,.24,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
input{font:inherit;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 clamp(20px, 3.4vw, 64px);
}

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

#features, #architecture, #pricing, #waitlist{ scroll-margin-top:92px; }

/* ===== Scroll reveal ===== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.15s; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14.5px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn svg{width:15px; height:15px; flex:none;}
.btn-primary{
  background:linear-gradient(180deg, var(--accent-strong), var(--accent));
  color:#0a1406;
  box-shadow:0 0 0 0 rgba(127,225,76,0);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 24px -8px rgba(127,225,76,.55); }
.btn-outline{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--border-strong);
  color:var(--text);
}
.btn-outline:hover{ border-color:var(--accent-line); background:rgba(127,225,76,.14); transform:translateY(-1px); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,10,8,.38);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background:rgba(8,10,8,.72);
  border-bottom-color:var(--border);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
}
.header-inner{
  display:flex; align-items:center; gap:28px;
  height:76px;
}
.logo{
  display:flex; align-items:center;
  margin-right:auto;
}
.logo-img{
  height:42px; width:auto; display:block;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.footer-brand .logo-img{ height:46px; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  font-size:14.5px; font-weight:500; color:var(--text-dim);
  position:relative; padding:6px 0;
  transition:color .15s ease;
}
.main-nav a:hover{color:var(--text);}
.main-nav a.active{color:var(--text);}
.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent); border-radius:2px;
}
.nav-toggle{display:none;}

/* ===== Hero ===== */
.hero{ position:relative; padding:76px 0 110px; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 68%;
  opacity:.85;
}
.hero-bg-fade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,7,6,.1) 0%, rgba(6,7,6,.4) 55%, var(--bg) 94%),
    linear-gradient(100deg, var(--bg) 0%, rgba(6,7,6,.55) 22%, rgba(6,7,6,.15) 48%, rgba(6,7,6,.4) 78%, var(--bg) 100%);
}
.hero-grid{
  position:relative;
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:56px; align-items:start;
  padding-top:28px;
}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px 6px 10px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--text-dim);
  background:rgba(255,255,255,.03);
  margin-bottom:22px;
}
.pill svg{width:13px; height:13px; color:var(--accent);}

.hero-copy h1{
  font-family:var(--font-display);
  font-size:56px; line-height:1.06;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:20px;
  /* Reserve both lines' height up front: line1 is a background-clip:text
     gradient span that collapses to zero line-box height while empty
     (start of each type cycle, and mid-erase), which otherwise made
     everything below the headline jump up and back down as it typed --
     most visible on mobile where the layout is tightly stacked. em units
     scale with this element's own font-size, so this holds at the
     mobile font-size override too without a separate rule there. */
  min-height:calc(1.06em * 2);
}
.gradient-text{
  background:linear-gradient(180deg, #ffffff, #b9c4b8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.accent-text{
  background:linear-gradient(135deg, var(--accent-strong), var(--accent) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.type-cursor{
  display:inline-block; width:3px; height:.85em;
  background:var(--accent-strong); margin-left:5px; vertical-align:-0.1em;
  animation:caret-blink 1s step-end infinite;
}
@keyframes caret-blink{ 50%{ opacity:0; } }
.hero-sub{
  color:var(--text-dim);
  font-size:16.5px; line-height:1.65;
  max-width:440px;
  margin-bottom:32px;
}
.hero-actions{ display:flex; gap:14px; margin-bottom:30px; flex-wrap:wrap;}
.hero-trust{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--text-dimmer); font-weight:500;
}
.hero-trust svg{width:15px; height:15px; color:var(--text-dimmer);}

/* ===== Dashboard screenshot frame ===== */
.hero-visual{ position:relative; }
.dashboard-frame{
  position:relative;
  border-radius:22px;
  padding:2px;
  background:linear-gradient(135deg, rgba(127,225,76,.55), rgba(127,225,76,.05) 45%, rgba(127,225,76,.3));
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.75),
    0 0 70px -18px rgba(127,225,76,.22);
  animation:float 6s ease-in-out infinite;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dashboard-frame:hover{
  transform:translateY(-4px) scale(1.006);
  box-shadow:
    0 46px 100px -28px rgba(0,0,0,.8),
    0 0 90px -14px rgba(127,225,76,.3);
}
.dashboard-img{
  display:block; width:100%; height:auto; border-radius:20px;
  background:var(--panel);
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.preview-disclaimer{
  text-align:center; font-size:11.5px; color:var(--text-dimmer);
  margin-top:14px; letter-spacing:.01em;
}

/* ===== Sections ===== */
.section{ padding:110px 0; }
.section-head{ max-width:600px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{
  display:block; font-family:var(--font-mono);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-strong); margin-bottom:14px;
}
.section-head h2{
  font-family:var(--font-display); font-size:38px; font-weight:800;
  letter-spacing:-.02em; line-height:1.15;
  position:relative; display:inline-block; padding-bottom:18px;
}
.section-head.center h2::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:64px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), transparent);
}

/* ===== Proof / stats =====
   Same pinned intro treatment as the features section (see script.js):
   the heading rests at mid-height, then on scroll locks toward the top
   while the stat grid fades and rises in beneath it. No horizontal
   phase here -- the grid already fits in one row, so the pin only ever
   runs the vertical intro before releasing. */
.proof-section{ padding-top:0; }
.proof-scroll-outer{ position:relative; }
.proof-scroll-pin{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(170px, 24vh, 230px);
}
.proof-scroll-pin .section-head{ will-change:transform; }
.proof-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; will-change:transform, opacity; }
.proof-tile{
  text-align:center; padding:44px 28px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:transform .3s var(--ease), border-color .2s ease;
}
.proof-tile:hover{ border-color:var(--accent-line); transform:translateY(-3px); }
.proof-value{
  font-family:var(--font-mono); font-size:46px; font-weight:600;
  color:var(--accent-strong); margin-bottom:12px; letter-spacing:-.01em;
}
.proof-prefix, .proof-suffix{ font-size:20px; color:var(--text-dim); font-weight:500; }
.proof-label{ font-size:14px; color:var(--text-dimmer); line-height:1.5; }

@media (max-width:760px){
  .proof-scroll-outer{ height:auto !important; }
  .proof-scroll-pin{ position:static; height:auto; display:block; padding-top:0; }
  .proof-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ===== Pricing =====
   Same pinned intro as the proof section: heading rests mid-height, then
   locks toward the top on scroll while the 3 pricing cards fade and rise
   in beneath it. No horizontal phase -- the cards already fit in one row. */
.pricing-scroll-outer{ position:relative; }
.pricing-scroll-pin{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(140px, 18vh, 190px);
}
.pricing-scroll-pin .section-head{ will-change:transform; margin-bottom:40px; }
.pricing-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  align-items:stretch;
  will-change:transform, opacity;
}
.pricing-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px 28px;
  /* transform is intentionally short and un-delayed: the Starter/
     Enterprise cards get their transform set every scroll frame by the
     side slide-in in script.js, and a long transition (this used to be
     .5s, plus a per-card stagger delay below) made that JS-driven value
     visibly lag behind the actual scroll position -- worse for
     Enterprise specifically, which had the longest stacked delay. A
     short transition keeps the hover-lift smooth without reintroducing
     that lag. */
  transition:opacity .8s var(--ease), transform .2s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.pricing-card:hover{
  border-color:var(--accent-line);
  transform:translateY(-6px);
  box-shadow:
    0 -18px 44px -22px rgba(127,225,76,.35),
    0 26px 55px -30px rgba(127,225,76,.35);
}
.pricing-card.featured{
  border-color:var(--accent-line);
  background:linear-gradient(180deg, rgba(127,225,76,.07), var(--panel) 40%);
  box-shadow:0 30px 60px -30px rgba(127,225,76,.25);
  transform:scale(1.03);
}
.pricing-card.featured:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:
    0 -22px 54px -20px rgba(127,225,76,.4),
    0 36px 74px -26px rgba(127,225,76,.5);
}
.pricing-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--accent-strong), var(--accent));
  color:#0a1406; font-family:var(--font-display); font-weight:700; font-size:11.5px;
  padding:5px 14px; border-radius:999px; white-space:nowrap;
}
.pricing-tier{ font-family:var(--font-display); font-size:19px; font-weight:800; margin-bottom:4px; }
.pricing-tagline{ font-size:13px; color:var(--text-dimmer); margin-bottom:22px; }
.pricing-access{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--accent-strong);
  margin-bottom:26px;
}
.pricing-access::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--accent-strong);
}
.pricing-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex:1; }
.pricing-list li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--text-dim); line-height:1.4; }
.pricing-list li svg{ width:15px; height:15px; color:var(--accent-strong); flex:none; margin-top:1px; }
.pricing-cta{ justify-content:center; width:100%; }

/* ===== Features: pinned horizontal scroll =====
   .feature-scroll-outer is given an inline height (JS) tall enough that
   scrolling through it exactly covers the distance .feature-track needs
   to travel horizontally. .feature-scroll-pin sticks to the top of the
   viewport for that whole distance, so vertical scroll input drives a
   horizontal translateX on the track (see script.js). Below the mobile
   breakpoint this is disabled entirely in favor of a plain swipeable
   snap-scroll strip, since pinned scroll-driven sections are unreliable
   on touch/trackpad and the panels are small enough to just scroll. */
/* No overflow:hidden here: it would make this section (an ancestor of
   the sticky pin below) the pin's sticky containing block instead of
   the viewport, breaking the pin entirely. Clipping is already handled
   by overflow:hidden on .feature-scroll-pin itself. */
.features-scroll-section{ padding:110px 0 0 0; }
.feature-scroll-outer{ position:relative; }
.feature-scroll-pin{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  padding-top:clamp(135px, 18vh, 190px);
  overflow:hidden;
}
/* Top-anchored (not vertically centered) with generous padding-top:
   centering the whole heading+track+progress stack meant on shorter
   viewports the stack could be taller than 100vh, pushing the eyebrow
   line above y:0 where overflow:hidden silently clipped it. Anchoring
   from the top with fixed clearance guarantees the heading -- eyebrow
   included -- is always fully on-screen. This padding is also the
   heading's resting spot for the "intro" scroll phase in script.js: it
   sits here, roughly mid-height, until the visitor starts scrolling,
   at which point JS slides it up (translateY) toward a tighter locked
   position while the cards rise in beneath it -- only once that intro
   settles does horizontal scrolling take over. align-self:center
   overrides the pin's flex-start (needed on .feature-track so JS
   translateX starts from the true left edge, see below) so the heading
   is still centered on the viewport. */
.feature-scroll-pin > .section-head{ align-self:center; margin-bottom:44px; will-change:transform; }
.feature-track{
  display:flex; gap:22px; padding:0 8vw;
  will-change:transform, opacity;
}
.feature-panel{
  flex:none; width:min(330px, 46vw);
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 24px 26px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  transform-origin:center center;
  transition:opacity .25s linear, transform .25s linear, border-color .2s ease;
}
.feature-panel-index{
  font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.08em;
  color:var(--accent-strong);
}
.feature-panel .feature-icon{
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-strong);
  margin:6px 0 4px;
}
.feature-panel .feature-icon svg{ width:clamp(118px, 23vw, 168px); height:clamp(118px, 23vw, 168px); overflow:visible; }
.feature-panel h3{ font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.01em; margin-top:6px; }
.feature-panel p{ font-size:13.5px; color:var(--text-dimmer); line-height:1.55; max-width:250px; }

/* ===== Feature panel icon animations =====
   Paused by default and only switched to running while the section is
   in view (.in-view is toggled by an IntersectionObserver in script.js,
   which also pauses the satellite's SMIL orbit since this CSS property
   doesn't reach that). !important beats the per-icon `animation:`
   shorthands below, which each implicitly set play-state:running --
   without it their higher selector specificity would win and the pause
   would never apply. This is the one deliberate use of !important in
   this file, and it's load-bearing. */
.icon-scene *{ animation-play-state:paused !important; }
.features-scroll-section.in-view .icon-scene *{ animation-play-state:running !important; }

/* 01 Precision Monitoring: a ground sensor pinging outward, radar-style */
.icon-monitor .ping{
  transform-box:fill-box; transform-origin:center;
  opacity:0; animation:icon-ping 2.8s ease-out infinite;
}
.icon-monitor .ping-2{ animation-delay:.93s; }
.icon-monitor .ping-3{ animation-delay:1.87s; }
@keyframes icon-ping{
  0%{ transform:scale(.4); opacity:.85; }
  100%{ transform:scale(2.3); opacity:0; }
}

/* 02 AI Advisory: a CPU chip pulling data in along every pin, core pulsing
   as it "thinks" -- each pin path is drawn pad-to-chip (like the site's
   existing mesh-flow lines) so the traveling dash reads as data flowing
   inward, not outward. */
.icon-ai .pin{
  stroke-dasharray:16 84; opacity:0;
  animation:icon-pin-flow 2.4s linear infinite;
}
.icon-ai .chip-core{
  transform-box:fill-box; transform-origin:center;
  animation:icon-core-pulse 2.4s ease-in-out infinite;
}
@keyframes icon-pin-flow{
  0%{ opacity:0; stroke-dashoffset:0; }
  10%{ opacity:1; }
  70%{ opacity:1; }
  88%{ opacity:0; stroke-dashoffset:-100; }
  100%{ opacity:0; stroke-dashoffset:-100; }
}
@keyframes icon-core-pulse{
  0%, 100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.7); }
}

/* 03 Weather Intelligence: cloud drifting gently, rain falling underneath */
.icon-weather .cloud{ animation:icon-drift 5s ease-in-out infinite; transform-box:fill-box; }
.icon-weather .sun{ animation:icon-glow 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.icon-weather .rain{
  transform-box:fill-box; opacity:0;
  animation:icon-rain 1.6s ease-in infinite;
}
.icon-weather .rain-2{ animation-delay:.25s; }
.icon-weather .rain-3{ animation-delay:.5s; }
@keyframes icon-drift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(2.5px); } }
@keyframes icon-glow{ 0%,100%{ opacity:.45; transform:scale(1); } 50%{ opacity:.8; transform:scale(1.08); } }
@keyframes icon-rain{
  0%{ transform:translateY(-3px); opacity:0; }
  25%{ opacity:1; }
  85%{ opacity:.3; }
  100%{ transform:translateY(7px); opacity:0; }
}

/* 04 Satellite Imagery: satellite orbiting the field, scanning beam pulses down */
.icon-satellite .beam{ animation:icon-beam 2.4s ease-in-out infinite; }
@keyframes icon-beam{
  0%, 100%{ stroke-dashoffset:0; opacity:.25; }
  50%{ stroke-dashoffset:-11; opacity:.85; }
}

/* 05 Market Insights: the price line draws in, arrow ticks up, dot glows */
.icon-market .chart-line, .icon-market .chart-arrow{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:icon-draw-once 3s cubic-bezier(.4,0,.2,1) infinite;
}
.icon-market .chart-arrow{ animation-delay:.55s; }
.icon-market .chart-dot{
  transform-box:fill-box; transform-origin:center; opacity:0;
  animation:icon-dot-pop 3s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes icon-draw-once{
  0%{ stroke-dashoffset:100; }
  45%, 82%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:-100; }
}
@keyframes icon-dot-pop{
  0%, 42%{ opacity:0; transform:scale(.3); }
  55%{ opacity:1; transform:scale(1.3); }
  65%{ transform:scale(1); }
  85%{ opacity:1; }
  100%{ opacity:0; transform:scale(.3); }
}

/* 06 Disease Detection: magnifier sweeps the leaf, flags the spot it passes */
.icon-disease .magnifier{
  transform-box:fill-box;
  animation:icon-scan 3.6s cubic-bezier(.45,0,.15,1) infinite;
}
.icon-disease .scan-spot{
  transform-box:fill-box; transform-origin:center; opacity:0;
  animation:icon-spot-flag 3.6s cubic-bezier(.45,0,.15,1) infinite;
}
@keyframes icon-scan{
  0%{ transform:translate(38px,14px); }
  40%{ transform:translate(25px,27px); }
  60%{ transform:translate(25px,27px); }
  100%{ transform:translate(38px,14px); }
}
@keyframes icon-spot-flag{
  0%, 36%{ opacity:0; transform:scale(.5); }
  46%{ opacity:1; transform:scale(1.4); }
  56%, 64%{ opacity:1; transform:scale(1); }
  74%, 100%{ opacity:0; transform:scale(.5); }
}

.feature-progress{
  position:relative; width:min(560px, 74vw); height:3px;
  background:var(--border); border-radius:3px; margin-top:44px; overflow:hidden; flex:none;
}
.feature-progress-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius:3px;
}

@media (max-width:760px){
  .features-scroll-section{ padding-top:70px; }
  /* Same pinned scroll-jack as desktop (vertical swipe drives the
     horizontal card travel), just sized for a phone: svh instead of vh
     so the dynamic browser bar can't make the pin taller than the
     visible viewport (which would clip the last card), a tighter top
     clearance, and smaller cards/icons so the heading + card row fit
     inside one screen. The JS pin now runs at every width. */
  .feature-scroll-pin{
    height:100svh;
    padding-top:clamp(84px, 13vh, 120px);
  }
  .feature-scroll-pin > .section-head{ margin-bottom:26px; }
  .feature-track{ padding:0 14vw; gap:16px; }
  .feature-panel{ width:72vw; padding:22px 20px; }
  .feature-panel .feature-icon svg{ width:clamp(88px, 26vw, 120px); height:clamp(88px, 26vw, 120px); }
  .feature-panel h3{ font-size:18px; }
  .feature-panel p{ font-size:12.5px; }
  .feature-progress{ width:min(440px, 66vw); margin-top:26px; }
}

/* ===== Architecture ===== */
/* No background override here anymore: --bg-alt was only 3 RGB units off
   from --bg (near-imperceptible on its own) but still drew a visible
   seam at this section's top/bottom edges against the flat --bg on
   either side. Letting it inherit the body's background is seamless. */
/* Scroll-linked reveal, not a pinned/sticky lock like the features and
   proof sections: this section's content (diagram + connector + output
   chips) runs taller than a lot of viewports, so pinning it to 100vh
   risked clipping or overflow at the "locked" moment. Instead the copy
   and diagram rise in based on the section's own position as it scrolls
   through normally -- same "offset settles to 0" feel, no pin needed. */
.arch-copy{ will-change:transform, opacity; }
.arch-diagram-wrap{ will-change:transform, opacity; }
.arch-grid{
  display:grid; grid-template-columns:.75fr 1.55fr; gap:56px; align-items:center;
}
.arch-copy h2{ font-family:var(--font-display); font-size:38px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:14px 0 18px; }
.arch-copy p{ color:var(--text-dim); font-size:15px; line-height:1.65; max-width:420px; margin-bottom:26px; }

/* overflow:hidden here is a safety clip for the scale-to-fit JS below --
   harmless on desktop since nothing overflows there in the first place */
.arch-diagram-wrap{ display:flex; flex-direction:column; align-items:center; overflow:hidden; width:100%; }
.arch-scale-inner{ display:flex; flex-direction:column; align-items:center; width:100%; }
.arch-diagram{
  display:flex; align-items:stretch; gap:0; flex-wrap:nowrap; width:100%;
}
.arch-box{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px 16px; flex:1; min-width:140px;
  display:flex; flex-direction:column;
}
.arch-box.hub-box{
  border-color:var(--accent-line);
  box-shadow:0 0 0 1px rgba(127,225,76,.12) inset, 0 0 40px -18px rgba(127,225,76,.35);
  flex:1.5;
}
/* Wide enough for its title, "Central Intelligence Hub" / "SasyaLogix
   Cloud", to always fit on one line rather than wrapping like the
   shorter "Field Sensor Nodes" box can afford to. */
.arch-box.cloud-box{ flex:1.2; }
.arch-box-title{ font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:4px; }
.arch-box-sub{ font-size:12px; color:var(--text-dimmer); margin-bottom:12px; }
.arch-box-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:7px; margin-bottom:4px; }
.arch-box-title-row .arch-box-title{ margin-bottom:0; }
.cloud-icon{ width:16px; height:16px; color:var(--text-dim); flex:none; margin-top:2px; }

/* fan-out connector from hub to real-world outputs — one continuous
   rounded-corner path per branch, same viewBox px-for-px as the rendered
   width so the curves never distort; a bright dash sweeps down each path
   once when the section comes into view */
.arch-connector{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:480px; }
.connector-svg{ display:block; width:100%; height:46px; }
.conn-line{ fill:none; stroke:var(--border-strong); stroke-width:1.5; stroke-linecap:round; }
.conn-flow{
  fill:none; stroke:var(--accent-strong); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:16 110; stroke-dashoffset:110; opacity:0;
  filter:drop-shadow(0 0 5px rgba(127,225,76,.85));
  /* Unconditional, matching .arch-arrow/.mesh-flow below: this used to
     be gated behind .reveal.in-view, back when the architecture section
     used the old IntersectionObserver reveal. It was switched to a
     scroll-linked JS reveal (see script.js) that never adds .in-view,
     which silently killed this animation. */
  animation-name:conn-flow-loop; animation-timing-function:ease-out; animation-iteration-count:infinite;
}
@keyframes conn-flow-loop{
  0%{ opacity:0; stroke-dashoffset:110; }
  2.8%{ opacity:1; }
  29.75%{ opacity:1; }
  35%{ opacity:0; stroke-dashoffset:-16; }
  100%{ opacity:0; stroke-dashoffset:-16; }
}
.arch-outputs{
  display:grid; grid-template-columns:repeat(3, 1fr); width:100%;
}
.output-col{ display:flex; flex-direction:column; align-items:center; padding:0 6px; }

.output-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:999px; padding:10px 16px;
  font-size:12.5px; font-weight:600; color:var(--text-dim);
  white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.output-chip svg{ width:15px; height:15px; color:var(--accent-strong); flex:none; }
.output-chip:hover{
  border-color:var(--accent-line); color:var(--text); transform:translateY(-3px);
  box-shadow:0 10px 24px -12px rgba(127,225,76,.35);
}

.arch-list{
  display:flex; flex-direction:column; gap:13px;
  margin-top:auto; margin-bottom:auto;
}
.arch-list li{
  font-size:13.5px; color:var(--text-dim); line-height:1.3;
  padding-left:17px; position:relative;
}
.arch-list li::before{
  content:''; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}
.arch-arrow{ flex:none; width:24px; display:flex; align-items:center; justify-content:center; color:var(--text-dimmer); }
.arch-arrow svg{ width:20px; height:14px; }
.arch-arrow.accent{ color:var(--accent-strong); }
.arch-arrow svg line{ stroke-dasharray:3 3; animation:flow 1.1s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-14; } }

.sensor-mesh{ height:130px; margin-top:auto; }
.mesh-lines{ display:block; width:100%; height:100%; overflow:visible; }
.mesh-lines .mesh-link{ stroke:rgba(255,255,255,.16); stroke-width:1; }
.mesh-lines .mesh-node{ fill:var(--accent-strong); }
.mesh-lines .mesh-pulse{
  fill:none; stroke:var(--accent-line); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
  animation:mesh-pulse 2.6s ease-out infinite;
}
@keyframes mesh-pulse{
  0%{ transform:scale(.6); opacity:.9; }
  70%{ transform:scale(2.4); opacity:0; }
  100%{ opacity:0; }
}
.mesh-lines .mesh-flow{
  stroke:var(--accent-strong); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:14 86; opacity:0;
  animation-name:mesh-flow; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes mesh-flow{
  0%{ opacity:0; stroke-dashoffset:0; }
  8%{ opacity:.9; }
  75%{ opacity:.9; }
  92%{ opacity:0; stroke-dashoffset:-100; }
  100%{ opacity:0; stroke-dashoffset:-100; }
}

/* ===== CTA ===== */
.cta-band{ padding:90px 0; }
.cta-inner{
  display:grid; grid-template-columns:1.3fr 1fr; column-gap:56px; align-items:center;
  background:var(--panel); border:1px solid var(--border); border-radius:28px;
  padding:56px;
  position:relative; overflow:hidden;
}
.cta-inner::before{
  content:''; position:absolute; top:-120px; left:-100px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(127,225,76,.1), transparent 70%);
  pointer-events:none;
}
.cta-pill{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 13px; border:1px solid var(--border-strong); border-radius:999px;
  background:rgba(127,225,76,.05);
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-strong); margin-bottom:26px;
}
.cta-pill-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-strong); box-shadow:0 0 8px 1px rgba(157,255,102,.65); }
.cta-text{ position:relative; }
.cta-text h2{
  font-family:var(--font-display); font-size:38px; font-weight:800; letter-spacing:-.02em; line-height:1.22; margin-bottom:16px;
}
.cta-text > p{ color:var(--text-dim); font-size:15.5px; line-height:1.65; max-width:480px; margin-bottom:40px; }

.cta-perks{ display:grid; grid-template-columns:repeat(3,1fr); }
.cta-perk{ display:flex; align-items:center; gap:12px; padding-right:20px; }
.cta-perk:not(:first-child){ padding-left:22px; border-left:1px solid var(--border); }
.cta-perk-icon{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:var(--accent-dim); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
}
.cta-perk-icon svg{ width:19px; height:19px; }
.cta-perk h4{ font-family:var(--font-display); font-size:14.5px; font-weight:700; }

.cta-form-wrap{
  position:relative; background:var(--panel-2); border:1px solid var(--border);
  border-radius:20px; padding:32px;
}
.cta-form-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:26px; }
.cta-form-icon{
  flex:none; width:44px; height:44px; border-radius:12px;
  background:var(--accent-dim); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
}
.cta-form-icon svg{ width:21px; height:21px; }
.cta-form-head h3{ font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.01em; margin-bottom:3px; }
.cta-form-head p{ font-size:12.5px; color:var(--text-dimmer); }

.cta-form{ display:flex; flex-direction:column; gap:12px; }
.cta-input-wrap{ position:relative; display:flex; align-items:center; }
.cta-input-wrap svg{ position:absolute; left:16px; width:17px; height:17px; color:var(--text-dimmer); pointer-events:none; }
.cta-form input{
  width:100%;
  background:rgba(255,255,255,.04); border:1px solid var(--border-strong);
  border-radius:12px; padding:13px 16px 13px 44px; color:var(--text); font-size:14px;
}
.cta-form input::placeholder{ color:var(--text-dimmer); }
.cta-form input:focus{ outline:none; border-color:var(--accent-line); }
.cta-submit{ width:100%; justify-content:center; padding:14px 20px; font-size:14.5px; }
.cta-form .btn[disabled]{ opacity:.7; cursor:default; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error{ font-size:12.5px; color:#ff8a80; min-height:0; margin-bottom:8px; display:none; }
.form-error.show{ display:block; }

/* ===== Waitlist modal ===== */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(4,5,4,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s ease;
}
.modal-overlay[hidden]{ display:none; }
.modal-overlay.open{ opacity:1; }
.modal-card{
  position:relative; width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:36px 32px; box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transform:translateY(10px) scale(.97); transition:transform .22s var(--ease);
}
.modal-overlay.open .modal-card{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--text-dimmer);
  border:1px solid var(--border); transition:color .15s ease, border-color .15s ease;
}
.modal-close:hover{ color:var(--text); border-color:var(--border-strong); }
.modal-close svg{ width:13px; height:13px; }

.modal-form h3, .modal-success h3{ font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.01em; margin:12px 0 8px; }
.modal-sub{ color:var(--text-dim); font-size:13.5px; line-height:1.55; margin-bottom:22px; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field span{ font-size:12.5px; font-weight:600; color:var(--text-dim); }
.field .req{ color:var(--accent-strong); }
.field .opt{ color:var(--text-dimmer); font-weight:500; }
.field input, .field textarea{
  background:rgba(255,255,255,.04); border:1px solid var(--border-strong);
  border-radius:12px; padding:10px 14px; color:var(--text); font-size:13.5px; font-family:inherit;
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-dimmer); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent-line); }

/* Native <select> dropdown popups mostly ignore CSS in every major
   browser, so the "I am a..." field is a fully custom listbox instead. */
.custom-select{ position:relative; }
.custom-select-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--border-strong);
  border-radius:12px; padding:10px 14px; color:var(--text); font-size:13.5px; font-family:inherit;
  text-align:left; cursor:pointer;
}
.custom-select-trigger:focus-visible, .custom-select.open .custom-select-trigger{ outline:none; border-color:var(--accent-line); }
.custom-select-trigger svg{ width:13px; height:13px; flex:none; color:var(--text-dimmer); transition:transform .15s ease; }
.custom-select.open .custom-select-trigger svg{ transform:rotate(180deg); }
.custom-select-value.placeholder{ color:var(--text-dimmer); }
.custom-select-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:5;
  background:var(--panel-2); border:1px solid var(--border-strong); border-radius:12px;
  padding:6px; max-height:220px; overflow-y:auto;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.7);
}
.custom-select-list[hidden]{ display:none; }
.custom-select-list li{
  padding:8px 10px; border-radius:8px; font-size:13.5px; color:var(--text-dim); cursor:pointer;
}
.custom-select-list li:hover, .custom-select-list li.active{ background:rgba(255,255,255,.06); color:var(--text); }
.custom-select-list li[aria-selected="true"]{ color:var(--accent-strong); font-weight:600; }

.modal-submit{ width:100%; justify-content:center; margin-top:6px; position:relative; }
.btn-spinner{
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(10,20,6,.3); border-top-color:currentColor;
  border-radius:50%; animation:btn-spin .7s linear infinite;
}
.btn-spinner[hidden]{ display:none; }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

.modal-success{ text-align:center; padding:12px 4px 4px; }
.modal-success-icon{ display:inline-flex; color:var(--accent-strong); margin-bottom:6px; }
.modal-success-icon svg{ width:44px; height:44px; }
.modal-success p{ color:var(--text-dim); font-size:13.5px; line-height:1.6; margin-bottom:22px; }
.modal-success .btn{ width:100%; justify-content:center; }

.toast{
  position:fixed; bottom:24px; right:24px; z-index:110; max-width:320px;
  background:var(--panel-2); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:14px 18px; font-size:13px; color:var(--text-dim); line-height:1.5;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.7);
  opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
}
.toast[hidden]{ display:none; }
.toast.show{ opacity:1; transform:translateY(0); }
.toast a{ color:var(--accent-strong); text-decoration:underline; }

@media (max-width:520px){
  .modal-card{ padding:28px 22px; }
}

/* ===== Footer ===== */
.site-footer{
  position:relative; padding-top:70px;
  background:linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent) top / 100% 1px no-repeat;
}
.footer-top{
  display:grid; grid-template-columns:1.3fr 2fr 1fr; gap:40px;
  padding-bottom:50px;
}
.footer-brand p{ color:var(--text-dimmer); font-size:13.5px; margin:14px 0 0; max-width:280px; line-height:1.6; }
.footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.footer-col h5{ font-family:var(--font-display); font-size:13px; font-weight:700; margin-bottom:14px; }
.footer-col a{ display:block; font-size:13.5px; color:var(--text-dimmer); margin-bottom:11px; transition:color .15s ease; }
.footer-col a:hover{ color:var(--text); }
.footer-launch{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px; align-self:start;
}
.footer-launch .pill{ margin-bottom:14px; }
.footer-launch h5{ font-family:var(--font-display); font-size:14px; font-weight:700; margin-bottom:6px; }
.footer-launch p{ font-size:13px; color:var(--text-dimmer); }
.footer-bottom{
  border-top:1px solid var(--border); padding:22px 0; text-align:center;
}
.footer-bottom p{ font-size:12.5px; color:var(--text-dimmer); }

/* ===== Content pages (About / FAQ / Security / Privacy / Terms) ===== */
.page-hero{ padding:56px 0 8px; }
.page-hero h1{
  font-family:var(--font-display); font-size:38px; font-weight:800;
  letter-spacing:-.02em; line-height:1.15; margin-bottom:14px;
}
.page-hero p{ color:var(--text-dim); font-size:15.5px; max-width:580px; line-height:1.65; }
.page-updated{ font-family:var(--font-mono); font-size:12px; color:var(--text-dimmer); margin-top:20px; }

.prose{ max-width:720px; padding:26px 0 110px; }
.prose h2{ font-family:var(--font-display); font-size:21px; font-weight:700; margin:38px 0 12px; letter-spacing:-.01em; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--text-dim); font-size:15px; line-height:1.75; margin-bottom:14px; }
.prose ul{ display:flex; flex-direction:column; gap:9px; margin:0 0 14px; }
.prose ul li{ color:var(--text-dim); font-size:15px; line-height:1.6; padding-left:20px; position:relative; }
.prose ul li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prose a{ color:var(--accent-strong); text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:2px; }
.prose strong{ color:var(--text); font-weight:600; }

.faq-list{ display:flex; flex-direction:column; gap:14px; max-width:760px; padding:26px 0 110px; }
.faq-item{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px 26px; transition:border-color .2s ease;
}
.faq-item:hover{ border-color:var(--accent-line); }
.faq-item h3{ font-family:var(--font-display); font-size:16px; font-weight:700; margin-bottom:8px; }
.faq-item p{ color:var(--text-dim); font-size:14.5px; line-height:1.65; }

.trust-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:30px 0 50px; max-width:760px; }
.trust-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px;
}
.trust-card svg{ width:22px; height:22px; color:var(--accent-strong); margin-bottom:12px; }
.trust-card h3{ font-family:var(--font-display); font-size:14.5px; font-weight:700; margin-bottom:6px; }
.trust-card p{ font-size:13.5px; color:var(--text-dimmer); line-height:1.55; }

.page-cta{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:6px; padding-bottom:110px; text-align:center; }
.page-cta p{ color:var(--text-dimmer); font-size:13.5px; }

/* Same pinned intro as the proof/pricing sections on the homepage:
   heading rests mid-height, then locks toward the top on scroll while
   the founder cards fade and rise in beneath it. */
.founders-scroll-outer{ position:relative; }
.founders-scroll-pin{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(140px, 20vh, 200px);
}
.founders-scroll-pin .section-head{ will-change:transform; }
.founder-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:720px; margin-bottom:48px;
  will-change:transform, opacity;
}
.founder-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:44px 32px 36px;
  transition:border-color .2s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.founder-card:hover{
  border-color:var(--accent-line); transform:translateY(-4px);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.7);
}
.founder-avatar{
  flex:none; width:132px; height:132px; border-radius:50%; overflow:hidden;
  margin-bottom:20px; padding:3px;
  background:linear-gradient(135deg, var(--accent-strong), rgba(127,225,76,.15) 60%);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(127,225,76,.08);
}
.founder-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.founder-card h3{ font-family:var(--font-display); font-size:17px; font-weight:700; }
.founder-role{
  display:inline-block; margin:8px 0 16px; padding:5px 14px; border-radius:999px;
  background:var(--accent-dim); color:var(--accent-strong);
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.founder-focus{ font-size:13.5px; color:var(--text-dimmer); line-height:1.6; max-width:260px; }

@media (max-width:600px){
  .founder-grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .founders-scroll-outer{ height:auto !important; }
  .founders-scroll-pin{ position:static; height:auto; display:block; padding-top:0; }
}

/* Center these narrow columns within the wider desktop wrap instead of
   pinning them to the left edge (which read as a half-empty page), and
   size them with clamp() so they actually grow with the viewport --
   a fixed max-width looked fine at 1440px and sparse/wasteful at 1900px+.
   Same clamp() pattern as --wrap. Scoped to min-width so mobile (where
   the narrower, left-pinned layout already worked fine) is untouched. */
@media (min-width:941px){
  .page-hero{ max-width:clamp(760px, 70vw, 1100px); margin:0 auto; text-align:center; }
  .page-hero p{ max-width:none; margin:0 auto; }
  .prose{ max-width:clamp(820px, 65vw, 1000px); margin:0 auto; }
  .faq-list{ max-width:clamp(860px, 68vw, 1040px); margin:0 auto; }
  .trust-grid{ max-width:clamp(820px, 65vw, 1000px); margin:30px auto 50px; }
  .founder-grid{ max-width:clamp(780px, 60vw, 960px); margin:0 auto 48px; }
  .page-cta{ max-width:clamp(820px, 65vw, 1000px); margin:6px auto 0; }
  main:has(.founder-grid) .section-head{ max-width:clamp(780px, 60vw, 960px); margin:0 auto 56px; text-align:center; }
}

@media (max-width:760px){
  .page-hero h1{ font-size:29px; }
  .trust-grid{ grid-template-columns:1fr; }
}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .pricing-grid{ grid-template-columns:repeat(2,1fr); }
  /* No special span/width/centering for the featured card at this width —
     it previously kept a leftover `margin:0 auto` with no matching reset
     below 760px, which shrinks a grid item to fit-content and centers it,
     making it visibly smaller than the other cards at every narrower
     width too, not just this one. Let it size like a normal grid item. */
  .pricing-card.featured{ transform:scale(1); }
  .pricing-card.featured:hover{ transform:translateY(-6px) scale(1); }
  .footer-top{ grid-template-columns:1fr; gap:36px; }
  .footer-launch{ max-width:360px; }
}

@media (max-width:940px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ text-align:center; }
  .hero-actions, .hero-trust{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .arch-grid{ grid-template-columns:1fr; }
  /* Order: title, then the diagram, then the description, then the
     button. display:contents drops .arch-copy's own box so its children
     become direct items of .arch-grid and can each take their own
     `order`, interleaved with .arch-diagram-wrap between the title and
     the description. */
  .arch-copy{ display:contents; text-align:center; }
  .arch-copy .eyebrow{ order:1; justify-self:center; }
  .arch-copy h2{ order:1; justify-self:center; }
  .arch-diagram-wrap{ order:2; }
  .arch-copy p{ order:3; margin-left:auto; margin-right:auto; }
  .arch-copy a{ order:4; justify-self:center; }
  /* The 3-box row was still using its desktop sizing here -- each box's
     140px min-width added up to more than a phone's viewport width, so
     the row silently overflowed (third box clipped at the edge) while
     the tall, mostly-empty sensor-mesh graphic (fixed 130px) stretched
     every box to match its height via align-items:stretch, reading as
     one long rectangle rather than three compact cards. Scaling every
     dimension down together keeps the row's proportions, just smaller. */
  .arch-box{ padding:12px 8px; min-width:0; }
  .arch-box-title{ font-size:11.5px; line-height:1.25; }
  .arch-box-sub{ font-size:9.5px; margin-bottom:8px; }
  .cloud-icon{ width:12px; height:12px; margin-top:1px; }
  .arch-list{ gap:7px; }
  .arch-list li{ font-size:9.5px; line-height:1.25; padding-left:11px; }
  .arch-list li::before{ width:4px; height:4px; top:4px; }
  .sensor-mesh{ height:76px; }
  .arch-arrow{ width:14px; }
  .arch-arrow svg{ width:12px; height:9px; }
  /* Same overflow problem as the box row: forcing 3 equal grid columns
     meant a chip wider than its share (nowrap label + padding + icon)
     grew the whole row past its container, and arch-diagram-wrap's
     overflow:hidden silently clipped the third chip. Letting text wrap
     inside a fixed-width chip "fixed" the clipping but made that chip
     tall and round -- a different, inconsistent shape from its
     neighbors. Switching to flex-wrap instead keeps every chip the
     same compact single-line pill; if all three don't fit one row, the
     odd one out drops to a centered second row as a whole chip, not a
     stretched, mismatched box. */
  .arch-outputs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  .output-col{ padding:0; flex:none; }
  .output-chip{ gap:5px; padding:7px 12px; font-size:10.5px; white-space:nowrap; }
  .output-chip svg{ width:12px; height:12px; }
  .cta-inner{ grid-template-columns:1fr; padding:36px 26px; row-gap:36px; }
  .cta-text{ text-align:center; }
  .cta-pill{ margin-left:auto; margin-right:auto; }
  .cta-text > p{ margin-left:auto; margin-right:auto; }
  .cta-perks{ grid-template-columns:1fr; row-gap:22px; }
  .cta-perk{ justify-content:flex-start; padding-right:0; text-align:left; }
  .cta-perk:not(:first-child){ border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:22px; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .main-nav{
    position:absolute; top:76px; left:0; right:0;
    background:rgba(8,16,10,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    flex-direction:column; align-items:flex-start; gap:2px; padding:14px 32px 20px;
    display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ width:100%; padding:10px 0; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px;
  }
  .nav-toggle span{ display:block; width:20px; height:1.6px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }
  .header-cta{ display:none; }

  .hero-copy h1{ font-size:40px; }

  .section{ padding:70px 0; }
  .section-head h2{ font-size:28px; }

  .pricing-scroll-outer{ height:auto !important; }
  .pricing-scroll-pin{ position:static; height:auto; display:block; padding-top:0; }
  .pricing-grid{ grid-template-columns:1fr; }

  .footer-cols{ grid-template-columns:1fr 1fr; }
}