/* ==========================================================================
   ReachAgent — single stylesheet
   --------------------------------------------------------------------------
   Frame order on every page: Header/Nav → Main Box → Content/Body → Footer.
   Required dimensions (master AGENTS.md 4A + design-stable-web-frames):
     Header/Footer background ....... full viewport width
     Header/Footer inner content .... max 1200px, centred
     Main Box + its image ........... full viewport width, never cropped
     Desktop Content/Body ........... 75% width, max 1600px, centred
     Mobile Content/Body ............ ~92% width, centred
     Responsive breakpoint .......... 768px
   Change these in one place only. Individual pages must not re-declare them.
   ========================================================================== */

:root{
  --void:#0B0E14;
  --ink:#141922;
  --panel:#1A2029;
  --mist:#8B96A5;
  --signal:#4FE0C0;
  --pulse:#FF7A45;
  --paper:#F5F3EE;
  --line:rgba(255,255,255,0.08);

  --sans:'Space Grotesk','IBM Plex Sans','Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --body:'IBM Plex Sans','Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;

  --shell:1200px;   /* header + footer inner cap */
  --body-max:1600px;/* Content/Body cap */
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* guard against accidental horizontal scroll */
}

h1,h2,h3,.brand{font-family:var(--sans);letter-spacing:-0.01em;}

.mono{font-family:var(--mono);}

a{color:inherit;text-decoration:none;}

a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

img,svg{max-width:100%;}

/* Keyboard users reach the Content/Body without tabbing the whole nav. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--signal);color:var(--void);
  padding:10px 16px;font-size:14px;font-weight:600;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ==========================================================================
   Section ID labels — every independent Content/Body box carries a permanent
   ID so a request can name one box without touching its neighbours.
   Header, navigation, Main Box and Footer are excluded by rule.
   ========================================================================== */
.content-box{position:relative;}

.section-id-label{
  position:absolute;top:10px;right:0;z-index:2;
  font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.06em;
  color:var(--paper);opacity:.13;
  user-select:text;                 /* selectable, per the frame standard */
  transition:opacity .2s ease;
}
.content-box:hover > .section-id-label{opacity:.45;}
.section-id-label::selection{background:var(--signal);color:var(--void);opacity:1;}

/* ==========================================================================
   Header + navigation  (shared frame — full width, 1200px inner)
   ========================================================================== */
header{
  width:100%;
  background:var(--void);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}

.nav-wrap{
  max-width:var(--shell);
  margin:0 auto;
  padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.brand{font-size:19px;font-weight:600;display:flex;align-items:center;gap:8px;}

.brand-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 10px var(--signal);
  flex:0 0 auto;
}

.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{font-size:14px;color:var(--mist);transition:color .2s ease;}
.nav-links a:hover{color:var(--paper);}
/* Current page reads in the accent, per the How It Works sample. */
.nav-links a[aria-current="page"]{color:var(--signal);}

/* The CTA repeats inside the mobile panel, where the pill button is hidden. */
.nav-cta-mobile{display:none;}

.nav-cta{
  font-size:13px;font-weight:600;
  padding:9px 18px;
  border:1px solid var(--signal);border-radius:100px;
  color:var(--signal);
  transition:background .2s ease,color .2s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--signal);color:var(--void);}

/* Mobile menu button — hidden on desktop, shown under the breakpoint. */
.nav-toggle{
  display:none;
  background:none;border:1px solid var(--line);border-radius:9px;
  width:38px;height:38px;
  cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle span{
  display:block;position:relative;
  width:16px;height:1.5px;background:var(--paper);
  transition:background .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";position:absolute;left:0;
  width:16px;height:1.5px;background:var(--paper);
  transition:transform .2s ease;
}
.nav-toggle span::before{top:-5px;}
.nav-toggle span::after{top:5px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg);}

/* ==========================================================================
   Main Box  (shared frame — image only: no text, label, overlay or control)
   Full viewport width. The graphic keeps its aspect ratio and is never
   cropped; on narrow screens the band letterboxes against the wash instead.
   ========================================================================== */
.main-box{
  width:100%;
  background:radial-gradient(circle at 50% 46%,#172033 0%,var(--void) 68%);
  display:flex;align-items:center;justify-content:center;
}

.signal-graphic{width:100%;height:auto;display:block;}

/* --- Slogan inside the Main Box (home) -----------------------------------
   Seung's explicit decision, 2026-08-17, overriding the image-only rule for
   this one element. It sits on the left, aligned to the Content frame's left
   edge so it lines up with the body copy below, and is vertically centred in
   the band. `role="img"` moved from `.main-box` onto the SVG itself — leaving
   it on the container would have made this text invisible to screen readers. */
.main-box-home{position:relative;}

.main-box-slogan{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:75%;max-width:var(--body-max);
  margin:0;pointer-events:none;
  font-family:var(--sans);
  font-size:clamp(1.05rem,1.7vw,1.5rem);
  font-weight:500;line-height:1.35;
  color:var(--paper);
  text-align:left;
}

/* Keeps the line off the graphic: the rings start around 39% of the width. */
.main-box-slogan span{display:block;max-width:22ch;}

.ring{
  fill:none;stroke:var(--signal);stroke-width:1.2;
  opacity:0;
  /* The core sits on the viewBox centre, so the rings expand from the core. */
  transform-box:view-box;transform-origin:center;
  animation:pulseRing 4.5s ease-out infinite;
}
.ring2{animation-delay:1.1s;stroke:var(--pulse);}
.ring3{animation-delay:2.2s;}
.ring4{animation-delay:3.3s;stroke:var(--pulse);}

@keyframes pulseRing{
  0%{opacity:0;transform:scale(0.12);}
  12%{opacity:.55;}
  100%{opacity:0;transform:scale(1);}
}

.core{fill:var(--signal);filter:drop-shadow(0 0 18px var(--signal));}
.node{fill:var(--paper);opacity:.85;}
.node-line{stroke:var(--mist);stroke-width:1;opacity:.35;}

/* --- Main Box variant: traced path (How It Works) ------------------------
   The path carries pathLength="100" so the draw animation is independent of
   the geometry. Rescaling the graphic never desynchronises the dash values. */
.path-line{fill:none;stroke:var(--line);stroke-width:1.5;}

.path-progress{
  fill:none;stroke:var(--signal);stroke-width:1.5;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:draw 3.5s ease forwards;
}

@keyframes draw{to{stroke-dashoffset:0;}}

.step-node{fill:var(--ink);stroke:var(--mist);stroke-width:1.5;}
.step-node.active{fill:var(--signal);stroke:var(--signal);filter:drop-shadow(0 0 10px var(--signal));}

/* --- Main Box variant: reference grid (Resources) ------------------------
   `color` is set alongside `stroke` so the glow's `currentColor` drop-shadow
   matches the cell it belongs to instead of inheriting the body text colour. */
.grid-line{stroke:var(--line);stroke-width:1;}

.cell{fill:var(--ink);stroke:var(--line);stroke-width:1.5;}

.cell.lit{
  stroke:var(--signal);color:var(--signal);
  animation:glow 3.6s ease-in-out infinite;
}
.cell.lit2{stroke:var(--pulse);color:var(--pulse);animation-delay:1.2s;}
.cell.lit3{animation-delay:2.4s;}

@keyframes glow{
  0%,100%{opacity:.5;}
  50%{opacity:1;filter:drop-shadow(0 0 8px currentColor);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .ring{animation:none;opacity:.22;transform:scale(1);}
  .path-progress{animation:none;stroke-dashoffset:0;}
  .cell.lit{animation:none;opacity:.85;}
}

/* ==========================================================================
   Content/Body  (75% / max 1600px, centred)
   ========================================================================== */
.content{
  width:75%;
  max-width:var(--body-max);
  margin:0 auto;
}

.hero-copy{
  text-align:center;
  padding:64px 0 20px;
  max-width:760px;      /* reading measure, inside the 75% frame */
  margin:0 auto;
}

.eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin-bottom:18px;display:inline-block;
}

.hero-copy h1{
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.08;font-weight:600;margin-bottom:22px;
}

.hero-copy p{font-size:17px;line-height:1.65;color:var(--mist);}

/* Category-page hero — 70% of the standard hero height. Set by Seung,
   2026-08-17. Trimmed padding alone could not get there (the text is 240px of
   a 324px block), so the category display heading caps lower than home's. */
.hero-copy.hero-compact{padding:10px 0 4px;}
.hero-copy.hero-compact h1{font-size:clamp(1.9rem,4vw,2.8rem);}

.band{
  padding:96px 0;
  border-bottom:1px solid var(--line);
}
.band:last-of-type{border-bottom:none;}

.section-head{max-width:620px;margin-bottom:56px;}

.section-head .tag{
  font-size:12px;color:var(--signal);letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:14px;display:block;
}

.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;line-height:1.2;}

/* Optional lead paragraph under a section heading. */
.section-head p{margin-top:16px;font-size:15.5px;line-height:1.65;color:var(--mist);}

/* ---- Three-up capability panels ---------------------------------------- */
.grid-3{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}

/* Flex column so a panel that ends in a `.status-tag` can pin it to the
   bottom and keep tags aligned across the row. Panels without a tag are
   unaffected: `flex:1` only applies when the paragraph is not the last child. */
.panel{background:var(--ink);padding:38px 32px;display:flex;flex-direction:column;}

.panel .mark{
  width:34px;height:34px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.panel .mark svg{width:16px;height:16px;}

.panel h3{font-size:17px;font-weight:600;margin-bottom:12px;}
.panel p{font-size:14.5px;line-height:1.6;color:var(--mist);}
.panel p:not(:last-child){flex:1;}

/* Status pill closing a resource panel. */
.status-tag{
  align-self:flex-start;margin-top:20px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pulse);
  border:1px solid rgba(255,122,69,0.35);border-radius:100px;
  padding:5px 12px;
}

/* ---- Two-up teaser cards ------------------------------------------------ */
.teaser-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;}

.teaser{
  background:var(--ink);
  border:1px solid var(--line);border-radius:14px;
  padding:40px;
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .2s ease;
}
.teaser:hover{border-color:rgba(79,224,192,0.35);}

.teaser .step-index{font-size:12px;color:var(--pulse);letter-spacing:.08em;}
.teaser h3{font-size:19px;font-weight:600;}
.teaser p{font-size:14.5px;line-height:1.6;color:var(--mist);}

.teaser-link{
  margin-top:6px;font-size:13.5px;font-weight:600;color:var(--signal);
  display:inline-flex;align-items:center;gap:6px;
}
.teaser-link svg{width:13px;height:13px;transition:transform .2s ease;}
.teaser:hover .teaser-link svg{transform:translateX(3px);}

/* ---- Numbered stage list (How It Works) ---------------------------------
   `.stage-index` is deliberately not `.step-index`: that class already names
   the small orange label on the home-page teaser cards, and two unrelated
   components must not share one selector. */
.steps{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}

.step{
  display:grid;grid-template-columns:100px 1fr;gap:28px;
  padding:40px 36px;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:none;}

.stage-index{font-size:13px;color:var(--pulse);letter-spacing:.06em;}

.stage-index .num{
  display:block;
  font-family:var(--sans);font-size:34px;font-weight:600;
  color:var(--paper);margin-top:6px;
}

.step-body h3{font-size:19px;font-weight:600;margin-bottom:10px;}
.step-body p{font-size:14.5px;line-height:1.65;color:var(--mist);max-width:640px;}

/* ---- Standalone note band ----------------------------------------------- */
.note-band{
  background:var(--ink);
  border:1px solid var(--line);border-radius:14px;
  padding:36px 40px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}

.note-band .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--signal);box-shadow:0 0 10px var(--signal);
  flex-shrink:0;
}

.note-band p{font-size:14.5px;line-height:1.6;color:var(--mist);}
.note-band strong{color:var(--paper);}

/* ---- Closing call to action --------------------------------------------
   `.cta-band` is an inner block, not a modifier on `.band`. Its padding is
   deliberately additive to the section's, which is what gives the closing CTA
   more breathing room than an ordinary band. */
.cta-band{text-align:center;padding:80px 0;}

/* Lets a band sit directly under the one above it, with no top gap. */
.band.band-tight{padding-top:0;}

.cta-band h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:600;margin-bottom:16px;}

.cta-band p{
  color:var(--mist);font-size:15px;margin:0 auto 30px;max-width:520px;line-height:1.65;
}

.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

.btn-primary,
.btn-secondary{
  font-weight:600;font-size:14px;
  padding:13px 26px;border-radius:100px;
}

.btn-primary{background:var(--signal);color:var(--void);transition:opacity .2s ease;}
.btn-primary:hover{opacity:.85;}

.btn-secondary{border:1px solid var(--line);color:var(--paper);transition:border-color .2s ease;}
.btn-secondary:hover{border-color:var(--mist);}

/* ==========================================================================
   Footer  (shared frame — full width, 1200px inner)
   ========================================================================== */
footer{width:100%;background:var(--void);border-top:1px solid var(--line);}

.footer-wrap{max-width:var(--shell);margin:0 auto;padding:56px 24px 40px;}

.footer-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:32px;margin-bottom:40px;
}

.footer-tag{font-size:14px;color:var(--mist);max-width:320px;line-height:1.6;margin-top:14px;}

.footer-links{display:flex;gap:40px;flex-wrap:wrap;}

.footer-col h4{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--mist);margin-bottom:14px;
}

.footer-col a{display:block;font-size:14px;color:var(--paper);opacity:.8;margin-bottom:10px;}
.footer-col a:hover{opacity:1;color:var(--signal);}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--mist);
  flex-wrap:wrap;gap:12px;
}

/* ==========================================================================
   Responsive — single breakpoint at 768px
   ========================================================================== */
@media (max-width:768px){
  .nav-wrap{padding:16px 12px;}

  .nav-toggle{display:flex;}

  .nav-links{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    padding:8px 12px 16px;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{display:block;padding:14px 4px;font-size:15px;border-bottom:1px solid var(--line);}
  .nav-links li:last-child a{border-bottom:none;}

  .nav-cta{display:none;}
  .nav-cta-mobile{display:block;}
  .nav-links .nav-cta-mobile a{color:var(--signal);font-weight:600;}

  .main-box{min-height:300px;}

  /* Overlaying text on a 390px-wide graphic would collide with it, so on
     mobile the slogan leaves the overlay and stacks above the image. */
  .main-box-home{flex-direction:column;}
  .main-box-slogan{
    position:static;transform:none;
    order:-1;width:92%;
    padding:22px 0 2px;
    font-size:1.05rem;
  }
  .main-box-slogan span{max-width:none;}

  .content{width:92%;}

  .hero-copy{padding:48px 0 12px;}
  .hero-copy.hero-compact{padding:16px 0 8px;}

  .band{padding:64px 0;}

  .section-head{margin-bottom:36px;}

  .grid-3{grid-template-columns:1fr;}
  .panel{padding:32px 24px;}

  .teaser-row{grid-template-columns:1fr;}
  .teaser{padding:32px 24px;}

  .step{grid-template-columns:1fr;gap:12px;padding:32px 24px;}
  .stage-index{display:flex;align-items:baseline;gap:10px;}
  .stage-index .num{margin-top:0;font-size:28px;}

  .cta-band{padding:56px 0;}
  .band.band-tight{padding-top:0;}

  .note-band{flex-direction:column;align-items:flex-start;padding:28px 24px;}

  .footer-wrap{padding:44px 12px 32px;}
  .footer-top{flex-direction:column;}

  .section-id-label{top:6px;font-size:9px;}
}