/* ==========================================================================
   daiahn.com — site-specific layout.

   Composition ONLY. Every color, font, size, space, radius, shadow and easing
   comes from the vendored design system (css/design.css → tokens.*).
   If something here needs a value the tokens don't offer, that's a signal to
   propose a token upstream in daiahn-web-design-system — not to hard-code it.

   This is the only stylesheet this repo owns. Sections mirror the page
   structure so layout is findable:

     1  Header / nav
     2  Hero + orbit graphic
     3  Section scaffolding
     4  Problem grid
     5  Platform / product cards + tier pills
     6  AgentOS Engineering
     7  Industries
     8  Enterprise ready
     9  Why Daiahn
     10 Outcomes
     11 FAQ
     12 CTA band
     13 Footer
     14 About page
     15 Lead-capture pages (form / embed / queue)
     16 Long-form prose (legal + role detail)
     17 Efficiency calculator
     18 Careers
     18b News
     19 Alpha access (unlisted)
     19b Beta-launch homepage (unlisted draft)
     20 Responsive
     21 Print (calculator takeaway)

   Plus, immediately below: the opt-in "Ink" dark ground.
   ========================================================================== */


/* ==========================================================================
   0 · "INK" DARK GROUND  —  opt-in, off by default
   --------------------------------------------------------------------------
   The daiahnmock comps sat on a near-black ground rather than the design
   system's space-cadet. This block makes that palette available without
   changing the default: it only applies when you opt a page in.

       <html lang="en" data-theme="dark" data-ground="ink">

   Add data-ground="ink" to switch a page (or all pages) to the darker
   comp ground; remove it to return to the design-system default. Because
   only the three ground tokens are reassigned, every component, border,
   gradient and text color re-derives automatically — nothing else needs
   touching.

   Mapping to the original mock variable names:

       --bg         #0d0d18   was  --ink          (page ground)
       --bg-sunken  #14141f   was  --ink-2        (alt sections, header, footer)
       --bg-raised  #22223b   was  --space-cadet  (cards, inputs)

   NOTE: these three literals are the only hard-coded colors in this file,
   and they're deliberately quarantined here. If the team decides the Ink
   ground is the permanent brand direction, the durable fix is to propose
   these as real tokens in daiahn-web-design-system (so the app design
   system inherits them too) and then delete this block — not to leave a
   consumer-side override in place long-term.
   ========================================================================== */
html[data-ground="ink"] {
  --bg:        #0d0d18;
  --bg-sunken: #14141f;
  --bg-raised: #22223b;
}


/* ==========================================================================
   1 · HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-sunken) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
  position: relative;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  flex: none;
}
.brand:hover { color: var(--text); }
.brand img { width: 30px; height: 30px; }
.brand span {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  transition: max-height var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.site-nav a {
  color: var(--text-soft);
  font-size: 15px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* Mobile menu button — hidden until the nav collapses (see §17). */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--text);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1);
}


/* ---- Beta ribbon (homepage, directly under the sticky header) ----------
   Solid accent fill: this is meant to be the first thing you see. Uses the
   same --accent / --on-accent pairing as .btn--primary rather than a
   one-off orange, so it stays in step if the token ever moves.

   Loud in color, small in height. The brief was orange that pops without a
   big announcement bar, so the fill does the shouting and the vertical
   padding stays tight — space-2, roughly a third of a standard section gap.

   NOT sticky. The header is, so the ribbon scrolls away with the page:
   present on arrival, gone once someone is reading. A bar that follows you
   down the page is the thing that reads as an ad. */
.beta-ribbon {
  background: var(--accent);
}
.beta-ribbon .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  /* No font-size: inherit body's 17px so this reads at exactly the size of
     the rest of the site's copy. It was --text-sm and looked like fine
     print. --text-base is 16px, close but still a notch under body, and
     17px isn't a token — base.css sets it directly — so inheriting is both
     the accurate match and the one that survives a design-system bump. */
  color: var(--on-accent);
  text-align: center;
}
.beta-ribbon strong { color: var(--on-accent); }
.beta-ribbon a {
  color: var(--on-accent);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.beta-ribbon a:hover { opacity: 0.82; }

/* The hero opens on space-7 (72px), which is right when it sits below the
   header alone. Under the ribbon that gap reads as dead ground between the
   announcement and the page. Scoped to the adjacent sibling so only a hero
   that actually follows a ribbon tightens; every other page is untouched. */
.beta-ribbon + main .hero { padding-top: var(--space-4); }

/* Phone: swap the full sentence for the short one. The link already reads
   "Join the waitlist", so the clause restating it is what goes. */
.beta-ribbon-compact { display: none; }
@media (max-width: 560px) {
  .beta-ribbon-full { display: none; }
  .beta-ribbon-compact { display: inline; }
}


/* ==========================================================================
   2 · HERO + ORBIT GRAPHIC
   ========================================================================== */
.hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-8);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 500px at 88% 6%,   color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    radial-gradient(700px 600px at 100% 52%, color-mix(in srgb, var(--support) 18%, transparent), transparent 62%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}
.hero h1 { margin: var(--space-3) 0 var(--space-4); }
.hero h1 em {
  font-style: italic;
  color: var(--support);
}
/* Teal but upright, so the italic stays unique to the <em> and the two
   coloured phrases read as different emphases rather than one long run. */
.hero h1 .accent-support { color: var(--support); }
.hero-subhead {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--support);
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
}
.hero .lede {
  font-size: var(--text-lg);
  color: var(--text-soft);
  max-width: 34rem;
  margin-bottom: var(--space-5);
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.hero .mono { font-size: var(--text-sm); }
.hero .mono::before { content: "// "; opacity: 0.55; }

/* Decorative orbit. Rings/dots are grouped in the SVG so each group can
   rotate independently; all motion is opt-in via prefers-reduced-motion. */
.orbit {
  position: relative;
  height: 420px;
}
.orbit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .orbit-ring-outer,
  .orbit-ring-mid {
    transform-box: view-box;
    transform-origin: 210px 210px;
  }
  .orbit-ring-outer { animation: orbit-spin 60s linear infinite; }
  .orbit-ring-mid   { animation: orbit-spin-reverse 32s linear infinite; }
  .orbit-pulse      { animation: orbit-pulse 4s ease-in-out infinite; }
  .orbit-curve {
    stroke-dasharray: 8 16;
    animation: orbit-flow 7s linear infinite;
  }
}
@keyframes orbit-spin         { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes orbit-spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes orbit-pulse        { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.40; } }
@keyframes orbit-flow         { to { stroke-dashoffset: -480; } }


/* ==========================================================================
   3 · SECTION SCAFFOLDING
   ========================================================================== */

/* Semantic <ul>s rendered as custom layouts — pills, arrow grids, numbered
   rows, footer link columns — none of which want a marker. The vendored
   design system has no global list reset, so without this the browser's
   default disc leaks out next to the pill/arrow/link. Add new marker-less
   lists to this selector. (.footer-col ul is matched by ancestor because
   those lists carry no class of their own.) */
.industry-pills,
.expect-list,
.feature-list,
.footer-col ul {
  list-style: none;
  padding-left: 0;
}

.section { padding: var(--space-8) 0; }
/* For pages that open on a short intro rather than a full hero. The default
   96px top/bottom stacks with the next section's 96px into ~190px of empty
   band, which pushes real content below the fold. The adjacent-sibling rule
   tightens whatever follows, so the pairing can't drift apart later. */
.section--tight { padding-top: var(--space-6); padding-bottom: var(--space-5); }
.section--tight + .section { padding-top: var(--space-6); }
/* .section-head reserves 48px below itself for the content it introduces.
   When it IS the content — an intro section with nothing after it — that
   margin is just more dead band. */
.section--tight .section-head:last-child { margin-bottom: 0; }
.section--alt {
  background: var(--bg-sunken);
  border-block: 1px solid var(--border);
}
.section-head {
  max-width: 42rem;
  margin-bottom: var(--space-6);
}
.section-head h2 { margin: var(--space-3) 0 var(--space-3); }
.section-head p {
  color: var(--text-soft);
  font-size: var(--text-lg);
}

/* Reveal-on-scroll. js/site.js opts in by adding .reveal-on only when
   IntersectionObserver exists, so content is never hidden without JS. */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-on .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   4 · PROBLEM GRID
   ========================================================================== */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.problem-card .num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 0.1em;
}
.problem-card h3 {
  font-size: var(--text-lg);
  margin: 12px 0 8px;
}
.problem-card p {
  font-size: 15px;
  color: var(--text-soft);
}


/* ==========================================================================
   5 · PLATFORM / PRODUCT CARDS + TIER PILLS
   ========================================================================== */
.product-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: var(--space-6);
}
.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* Corner bloom keys off the card's accent modifier. */
.product-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}
.product-card--accent::before  { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.product-card--support::before { background: color-mix(in srgb, var(--support) 30%, transparent); }

.product-card > * { position: relative; }
.product-card .tagline {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: var(--space-3) 0 var(--space-2);
}
.product-card h3 {
  font-size: var(--text-xl);
  margin-bottom: 14px;
}
.product-card .desc {
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}

.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-bottom: var(--space-4);
}
.feature-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text);
}
.feature-list li::before {
  content: "→";
  color: var(--support);
  flex: none;
}

.tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 98px;
  padding: var(--space-2) 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-family: var(--font-mono);
}
.tier b {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.tier small { font-size: 10px; letter-spacing: 0.03em; }
.tier--soon small    { color: var(--support); }
.tier--contact small { color: var(--accent); }

.product-card .btn { margin-top: auto; align-self: flex-start; }


/* ==========================================================================
   6 · AGENTOS ENGINEERING
   ========================================================================== */
.agentos-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-5);
}
.agentos-copy p {
  color: var(--text-soft);
  max-width: 36rem;
  margin-bottom: var(--space-4);
}
.agentos-copy .feature-list { max-width: 30rem; }

.stat {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
/* Small qualifier stacked above the numeral ("Minimum of" / "Up to"). Mirrors
   .stat-label so the card reads as one unit, with the numeral the only
   large element. */
.stat-qualifier {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-soft);
  margin-bottom: var(--space-2);
}
.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 8vw, 5rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--accent);
}
.stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-soft);
  margin-top: var(--space-3);
}


/* ==========================================================================
   7 · INDUSTRIES
   ========================================================================== */
.industry-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-5);
}
.industry-pills li {
  padding: 11px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  color: var(--text-soft);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.industry-pills li:hover {
  border-color: var(--support);
  color: var(--text);
}


/* ==========================================================================
   8 · ENTERPRISE READY
   ========================================================================== */
.enterprise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
}
.ent-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ent-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--support);
  flex: none;
  margin-top: 9px;
}
.ent-item h3 { font-size: 17px; margin-bottom: 4px; }
.ent-item p {
  font-size: 14.5px;
  color: var(--text-soft);
}


/* ==========================================================================
   9 · WHY DAIAHN
   ========================================================================== */
.compare {
  max-width: 48rem;
  margin-top: var(--space-5);
}
.compare p {
  color: var(--text-soft);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.compare p strong { color: var(--text); }
.compare-note {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--accent);
}
/* .compare-note carries no bottom margin, so the trailing CTA needs its
   own gap or it butts straight against the note's rule. */
.compare-cta { margin-top: var(--space-5); }

/* Numbered pillar rows. */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 40px;
}
.pillar {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.pillar .n {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  color: var(--accent);
  line-height: 1;
  flex: none;
  width: 44px;
}
.pillar h3 { font-size: 18px; margin-bottom: 6px; }
.pillar p {
  font-size: 15px;
  color: var(--text-soft);
  line-height: var(--leading-snug);
}


/* ==========================================================================
   10 · OUTCOMES
   ========================================================================== */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--space-5);
}
.outcome-card {
  padding: var(--space-4);
  border-left: 2px solid var(--support);
}
.outcome-card .arrow {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: var(--text-lg);
}
.outcome-card h3 {
  font-size: 17px;
  margin: var(--space-2) 0 6px;
}
.outcome-card p {
  font-size: 14.5px;
  color: var(--text-soft);
}


/* ==========================================================================
   11 · FAQ
   ========================================================================== */
.faq-list {
  max-width: 46rem;
  margin-top: var(--space-5);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--text);
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--accent);
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--support); }
.faq-item p {
  color: var(--text-soft);
  font-size: 15.5px;
  padding-bottom: var(--space-4);
  max-width: 42rem;
}


/* ==========================================================================
   12 · CTA BAND
   ========================================================================== */
.cta-band {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
}
.cta-band h2 { margin: var(--space-3) 0; }
.cta-band p {
  color: var(--text-soft);
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ==========================================================================
   13 · FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--border);
  padding: var(--space-7) 0 var(--space-4);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.footer-brand p {
  font-size: var(--text-sm);
  color: var(--text-soft);
  margin: 14px 0 var(--space-4);
  max-width: 17rem;
}
.social { display: flex; gap: 14px; }
.social a {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.social a:hover { border-color: var(--support); color: var(--support); }

.footer-col h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.footer-col a:hover { color: var(--support); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.footer-bottom p {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.legal-links { display: flex; gap: 22px; }
.legal-links a {
  font-size: var(--text-xs);
  color: var(--text-soft);
}
.legal-links a:hover { color: var(--text); }


/* ==========================================================================
   14 · ABOUT PAGE
   ========================================================================== */
.about-hero { padding: var(--space-8) 0 var(--space-7); }
.about-hero .orbit { height: 380px; }

.meaning-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
  align-items: center;
}
.gift-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3.75rem, 9vw, 6.875rem);
  color: var(--support);
  line-height: 1;
}
.gift-mark small {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: var(--space-3);
}
.prose p {
  color: var(--text-soft);
  margin-bottom: var(--space-3);
  max-width: 34rem;
}
.prose p strong { color: var(--text); }

.origin-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-5);
}
.place-card {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.place-card .pin { font-size: 2rem; }
.place-card .label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-soft);
  margin-top: var(--space-3);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--space-5);
}
.values-grid h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.values-grid p {
  font-size: 15px;
  color: var(--text-soft);
}


/* ==========================================================================
   15 · LEAD-CAPTURE PAGES (form / embed / queue)
   ========================================================================== */
.capture-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-7);
  align-items: start;
}
.capture-lede {
  font-size: var(--text-lg);
  color: var(--text-soft);
  max-width: 30rem;
  margin: var(--space-3) 0 var(--space-5);
}

/* Numbered "what to expect" list */
.expect-list { margin-bottom: var(--space-5); }
.expect-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  color: var(--text-soft);
  font-size: 14.5px;
}
.expect-list .num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  flex: none;
  margin-top: 2px;
}
.expect-list strong { color: var(--text); }

.aside-note {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-soft);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  max-width: 30rem;
}

/* Live waitlist queue counter */
.queue {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}
.queue-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--support);
}
.queue-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--support);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .queue-dot { animation: queue-ping 1.8s ease-in-out infinite; }
}
@keyframes queue-ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--support) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.queue-count {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 2.875rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text);
}
.queue-count.is-bumped { animation: queue-bump var(--dur) var(--ease); }
@keyframes queue-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); color: var(--accent); }
  100% { transform: scale(1); color: var(--text); }
}
.queue-sub {
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.queue-joined {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--support);
}
.queue-joined.is-visible { display: flex; }

/* Form panel + third-party embed slots */
.form-panel {
  position: relative;
  overflow: hidden;
}
.form-panel::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(50px);
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  pointer-events: none;
}
.form-panel > * { position: relative; }
.form-panel h2 {
  font-size: var(--text-xl);
  margin: var(--space-3) 0 var(--space-2);
}
.form-panel > p {
  font-size: var(--text-base);
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}

.embed-slot { min-height: 340px; }
.embed-placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-soft);
  line-height: var(--leading-body);
}
/* Visitor-facing stand-in for an embed that isn't live yet. Unlike
   .embed-placeholder (which is developer scaffolding and must never ship
   visible), this is real copy for real visitors and always offers a way
   through — a dead end on a lead-capture page is a lost lead. */
.embed-notice {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.embed-notice strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--text);
  margin-bottom: var(--space-2);
}
.embed-notice p {
  font-size: var(--text-sm);
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}
.embed-notice .btn { width: 100%; }
.embed-notice .embed-notice-alt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
}

.embed-placeholder strong {
  display: block;
  color: var(--support);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

/* Brand the third-party form markup once it replaces the placeholder.
   Scoped to .embed-slot so it can never leak into the rest of the site. */
.embed-slot form { font-family: var(--font-sans); }
.embed-slot label {
  display: block;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: 6px;
}
.embed-slot input[type="text"],
.embed-slot input[type="email"],
.embed-slot input[type="tel"],
.embed-slot select,
.embed-slot textarea {
  width: 100%;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  margin-bottom: var(--space-3);
}
.embed-slot input:focus-visible,
.embed-slot select:focus-visible,
.embed-slot textarea:focus-visible { border-color: var(--support); }
.embed-slot .hs-button,
.embed-slot input[type="submit"] {
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.embed-slot .hs-button:hover,
.embed-slot input[type="submit"]:hover { background: var(--accent-hover); }
.embed-slot .hs-error-msgs label { color: var(--accent); font-size: var(--text-xs); }
.embed-slot .legal-consent-container,
.embed-slot .hs-richtext { color: var(--text-soft); font-size: var(--text-xs); }

/* Agent Intelligence product views, below the waitlist form. Screenshots use
   a site-owned media directory so design-system sync cannot remove them. */
.ai-product-tour .section-head { max-width: 48rem; }
.ai-product-views {
  display: grid;
  gap: var(--space-7);
}
.ai-product-view { margin: 0; }
.ai-product-shot {
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease);
}
.ai-product-shot:hover { border-color: var(--support); }
.ai-product-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.ai-product-view figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-5);
  padding-top: var(--space-4);
}
.ai-product-view h3 { margin: var(--space-3) 0 0; }
.ai-product-view figcaption p { color: var(--text-soft); }
.ai-product-view-hint {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--support);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.ai-product-view--portrait {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
.ai-product-view--portrait figcaption {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-top: 0;
}


/* ==========================================================================
   16 · LONG-FORM PROSE PAGES  (legal + role detail)
   --------------------------------------------------------------------------
   Shared container for any page that is mostly running text: privacy,
   terms, and individual job descriptions. .role-detail is included on every
   selector so a job description renders identically to a legal page rather
   than needing a parallel set of rules.
   ========================================================================== */
.legal { padding: var(--space-7) 0 var(--space-8); }
.role-detail { padding: var(--space-5) 0 var(--space-7); }
.legal .wrap,
.role-detail .wrap { max-width: 48rem; }
.legal h1,
.role-detail h1 { margin-bottom: var(--space-2); }
.legal .updated,
.role-detail .updated {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.legal h2,
.role-detail h2 {
  font-size: var(--text-xl);
  margin: var(--space-6) 0 var(--space-3);
  scroll-margin-top: 90px;
}
/* Role pages stack many short sections, so each heading gets a hairline to
   separate it from the list above rather than relying on margin alone. */
.role-detail h2 {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
/* ...except the first, which already sits under the meta line. */
.role-detail h2:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.legal p,
.legal li,
.role-detail p,
.role-detail li {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 14px;
}
.legal ul,
.role-detail ul { margin-left: 20px; list-style: disc; }
.legal strong,
.role-detail strong { color: var(--text); }
/* :not(.btn) — the prose underline is for inline links. Without this it also
   underlines button labels, which reads as a broken link rather than a CTA. */
.legal a:not(.btn),
.role-detail a:not(.btn) { text-decoration: underline; }
.legal .caps { font-size: var(--text-sm); }


/* ==========================================================================
   17 · EFFICIENCY CALCULATOR
   Interactive model on ai-output-efficiency.html. Every coefficient the model uses is
   exposed as an editable assumption in the UI — see js/efficiency.js.
   ========================================================================== */
.calc {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}

/* Grid items default to min-width:auto, so a column refuses to shrink below
   its widest unbreakable content — here the nowrap <output> readouts. On a
   phone that pushed the panel past the viewport and scrolled the whole page
   sideways. min-width:0 lets the columns actually honour 1fr. */
.calc > *,
.result-grid > * { min-width: 0; }

/* ---- Controls ------------------------------------------------------------ */
.calc-panel { padding: var(--space-5); }
.calc-panel h2 {
  font-size: var(--text-xl);
  margin: var(--space-3) 0 var(--space-2);
}
.calc-panel > p {
  font-size: var(--text-sm);
  color: var(--text-soft);
  margin-bottom: var(--space-5);
}

.calc-field { margin-bottom: var(--space-5); }
.calc-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  /* On a narrow phone the label and its readout can't sit on one line; let
     the readout drop below rather than force the panel wider. */
  flex-wrap: wrap;
}
.calc-field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  min-width: 0;
}
.calc-field output {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--support);
  white-space: nowrap;
}
.calc-field .hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Range inputs, restyled from scratch so both tracks match the tokens. */
.calc-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text) 14%, transparent);
  cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.calc-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-field input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.calc-field input[type="range"]:focus-visible { outline-offset: 6px; }

/* ---- Results ------------------------------------------------------------- */
.calc-results { display: flex; flex-direction: column; gap: var(--space-4); }

.result-headline {
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.result-headline::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(60px);
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  pointer-events: none;
}
.result-headline > * { position: relative; }
.result-figure {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text);
  margin: var(--space-2) 0 var(--space-1);
}
.result-figure.is-updating { animation: result-bump var(--dur) var(--ease); }
@keyframes result-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.03); color: var(--accent); }
  100% { transform: scale(1); color: var(--text); }
}
.result-caption {
  font-size: var(--text-base);
  color: var(--text-soft);
}

/* auto-fit rather than a fixed 3 columns: the card count reflows on its own
   from 3 → 2 → 1 as space runs out, so this needs no breakpoint of its own
   and can't be left behind when the surrounding layout changes. */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.result-card { padding: var(--space-4); }
.result-num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--support);
  line-height: var(--leading-tight);
}
.result-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-soft);
  margin-top: var(--space-2);
  line-height: var(--leading-snug);
}

/* ---- Assumptions disclosure --------------------------------------------- */
.calc-assumptions {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 var(--space-4);
}
.calc-assumptions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.calc-assumptions summary::-webkit-details-marker { display: none; }
.calc-assumptions summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--accent);
}
.calc-assumptions[open] summary::after { content: "–"; }
.calc-assumptions summary:hover { color: var(--text); }
.calc-assumptions .calc-field { margin: var(--space-3) 0; }
.calc-assumptions > p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-bottom: var(--space-3);
  line-height: var(--leading-body);
}

/* ---- Soft lead capture (revealed after repeated engagement) -------------- */
.calc-capture {
  padding: var(--space-5);
  border-color: var(--support);
  display: none;
}
.calc-capture.is-visible {
  display: block;
  animation: capture-in 0.45s var(--ease);
}
@keyframes capture-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.calc-capture h2 {
  font-size: var(--text-lg);
  margin: var(--space-2) 0;
}
.calc-capture p {
  font-size: var(--text-sm);
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}

.calc-disclaimer {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-body);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--border);
  margin-top: var(--space-5);
}


.brief-consent {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  margin-top: var(--space-3);
}


/* ==========================================================================
   18 · CAREERS
   Role list on careers.html. Each .role is a row, not a card, so a long
   list stays scannable rather than becoming a wall of boxes.
   ========================================================================== */
.role-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease);
}
.role:hover { border-color: var(--support); }
/* Flex children default to min-width:auto and would refuse to shrink below
   their longest word, pushing the Apply button off a narrow screen. */
.role-main { min-width: 0; }
.role-main h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.role-main > p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: var(--leading-body);
  max-width: 46rem;
  margin-bottom: var(--space-3);
}
.role-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding-left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.role-meta li:not(:last-child)::after {
  content: " ·";
  margin-left: var(--space-3);
}
.role .btn { flex: none; }

/* Same meta list, but standing alone under an <h1> rather than inside a
   list row — so it gets room above and below instead of hugging the copy. */
.role-meta--detail {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--text-sm);
}
/* The apply line — plain text with a mailto rather than a button, so it can
   be read and acted on outside the page (copied, forwarded, printed). Given
   slight emphasis so it doesn't disappear into the surrounding prose. */
.role-apply {
  font-size: var(--text-lg);
  color: var(--text);
}
.role-apply a { color: var(--support); }

.roles-empty {
  max-width: 44rem;
  margin-top: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.roles-empty p {
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}
.roles-empty p strong { color: var(--text); }


/* ==========================================================================
   18b · NEWS
   news.html reuses the careers row (.role-list / .role) for its listing, and
   each release page sits on the long-form .legal container (§16). This only
   adds what a press release has that a role or a policy doesn't.
   ========================================================================== */
/* The date leads each row, so the meta line moves above the headline. */
.news-item .role-meta { margin-bottom: var(--space-2); }
.news-item h3 a { color: var(--text); }
.news-item h3 a:hover { color: var(--support); }
/* .legal gives every <ul> prose bullets; the meta line isn't prose. */
.news-article .role-meta { list-style: none; margin-left: 0; }

/* Release headlines run long; the full --h1 display size wraps to 5+ lines. */
.news-article h1 { font-size: var(--h2); }
.news-article .news-subhead {
  font-size: var(--text-lg);
  color: var(--text-soft);
  margin-top: var(--space-3);
}
.news-quote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--support);
}
.news-article .news-quote p { color: var(--text); font-style: italic; }


/* ==========================================================================
   19 · GATED ACCESS  (unlisted alpha + beta download pages)
   Three stacked cards, one visible at a time, driven by js/alpha-access.js
   and js/beta-access.js.

   Named access-* rather than alpha-*: the same rules dress both release
   pages, and the calculator's capture form borrows the field/row/error
   trio. A class called .alpha-field on a beta page misleads whoever reads
   it next. Check all three before changing anything here.
   ========================================================================== */
/* Single-task access page: one card is the whole point, so it's centred
   like a sign-in screen rather than left-aligned in a full-width column.
   Without the auto margins the content hugged the left edge and left the
   right half of a desktop viewport empty. */
.access-wrap {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
}
/* Keep the intro from being wider than the card it introduces, and stop the
   h1 from breaking mid-phrase the way it did at 34rem. */
.access-wrap .section-head {
  margin-bottom: var(--space-5);
}
.access-wrap h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  margin-bottom: var(--space-3);
}
.access-wrap .section-head p {
  color: var(--text-soft);
  font-size: var(--text-sm);
}
/* Form controls read as broken when centred, so the card re-establishes
   left alignment for its contents. */
.access-card {
  padding: var(--space-5);
  text-align: left;
}
/* Short page: without this the footer rides up under the card and the
   layout looks truncated rather than deliberate. */
.access-page { min-height: 62vh; }
.access-card h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.access-note {
  color: var(--text-soft);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.access-field { margin-bottom: var(--space-4); }
.access-field label,
.access-field legend {
  display: block;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: 6px;
}
.access-field input[type="text"],
.access-field input[type="email"] {
  width: 100%;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
}
.access-field input:focus-visible { border-color: var(--support); outline: none; }

/* Two-up on desktop, stacked on a phone. min-width:0 so a long value can't
   push the row wider than the card. */
.access-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.access-row > * { min-width: 0; }

.access-platform {
  border: 0;
  padding: 0;
  margin-bottom: var(--space-5);
}
/* Full-width submit reads as the single next step on a one-task page. */
.access-card > .btn,
.access-card form > .btn { width: 100%; }
.access-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-4);
  color: var(--text-soft);
  font-size: 15px;
  font-weight: var(--weight-regular);
  cursor: pointer;
}
.access-choice input { accent-color: var(--accent); }
.access-choice:hover { color: var(--text); }

.access-error {
  color: var(--accent);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
/* Two full-width download buttons stacked, so neither reads as the primary
   and nobody has to hunt for their platform. */
.access-downloads {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.access-downloads .btn {
  width: 100%;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  /* The design system's .btn is nowrap, which is right for an inline button
     sized to its label. These are full-width stacked blocks whose labels can
     run long ("macOS · Apple Silicon · M1 and later · Coming soon"), and at
     375px nowrap pushes that text clean outside the button. Wrapping is the
     correct behaviour for this shape. */
  white-space: normal;
  text-align: center;
}
/* Architecture qualifier under the platform name — picking the wrong Mac
   build means the app simply won't launch, so it needs to be readable at a
   glance rather than buried in the help text. */
.btn-sub {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  opacity: 0.85;
}
/* [hidden] only sets display:none at UA-stylesheet strength, so .btn's own
   display wins and a hidden button stays on screen — pointing at a dead
   href. Needs a rule that actually outranks .btn. */
.access-downloads .btn[hidden] { display: none; }

/* A build with no URL yet: present so the panel keeps its shape, but
   unmistakably not clickable. */
.access-downloads .btn.is-disabled {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  cursor: not-allowed;
}
.access-downloads .btn.is-disabled:hover { background: transparent; }

/* Collapsed by default — a wall of caveats above the download button
   discourages the click, but a tester who hits Gatekeeper needs it there. */
.access-help {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}
.access-help summary {
  color: var(--support);
  cursor: pointer;
  list-style: none;
}
.access-help summary::-webkit-details-marker { display: none; }
.access-help summary::before { content: "? "; opacity: 0.7; }
.access-help p {
  color: var(--text-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  margin-top: var(--space-3);
}

/* Shown when a build URL isn't configured yet. */
.access-pending {
  color: var(--text-soft);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--accent);
  margin-top: var(--space-3);
}

/* Feedback booking link on the download panel. Separated from the install
   notes above it so it doesn't read as another troubleshooting step. */
.access-feedback-cta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.access-feedback-cta a {
  color: var(--support);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Product page link under the beta page intro. */
.access-guide {
  color: var(--text-soft);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
.access-guide a {
  color: var(--support);
  text-decoration: underline;
}
/* ---- Beta: Windows and Linux install callouts -------------------------
   Show the relevant instructions in the download panel when either platform
   is selected. Left-aligned because each is a numbered procedure. */
.access-callout {
  text-align: left;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-left: 2px solid var(--support);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-sunken);
}
.access-callout h3 {
  font-size: var(--text-sm);
  color: var(--support);
  margin-bottom: var(--space-2);
}
.access-callout p,
.access-callout li {
  color: var(--text-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.access-callout ol {
  margin: var(--space-2) 0 0 18px;
  list-style: decimal;
}
.access-callout li { margin-bottom: var(--space-2); }
.access-callout strong { color: var(--text); }

/* Optional fields carry a quiet marker so the required ones read as the
   short list. Without it people treat every input as mandatory and the
   referral question depresses completion instead of informing it. */
.access-optional {
  font-weight: var(--weight-regular, 400);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 480px) {
  .access-row { grid-template-columns: 1fr; }
}


/* ---- Internal stats page (unlisted) ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.stats-grid > * { min-width: 0; }
.stat-tile { padding: var(--space-4); }
.stat-tile-num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-2xl, 32px);
  font-weight: var(--weight-bold);
  color: var(--support);
  line-height: 1.1;
}
.stat-tile-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.stats-updated {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.stats-note { padding: var(--space-5); margin-bottom: var(--space-4); }
.stats-note h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.stats-note p,
.stats-note li {
  color: var(--text-soft);
  font-size: 15px;
  line-height: var(--leading-body);
  margin-bottom: var(--space-3);
}
.stats-note ol { margin-left: 20px; list-style: decimal; }
.stats-note strong { color: var(--text); }
.stats-note code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--support);
}


/* Wide table on a narrow screen scrolls inside its own container rather
   than making the whole page scroll sideways. */
.daily-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
.daily-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.daily-table th,
.daily-table td {
  padding: 10px var(--space-3);
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.daily-table thead th {
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--weight-medium);
}
.daily-table tbody th {
  text-align: left;
  color: var(--text);
  font-weight: var(--weight-regular);
}
.daily-table tbody td { color: var(--support); }
/* A day with no activity is dimmed, not dropped — an absent row looks like
   missing data, a dim zero reads as a quiet day. */
.daily-table tr.is-quiet th,
.daily-table tr.is-quiet td { color: var(--text-muted); opacity: 0.6; }


/* ==========================================================================
   19b · BETA-LAUNCH HOMEPAGE  (unlisted draft, home-beta.html)
   Reuses the homepage hero/sections as-is; these are only the pieces that
   page adds — the product panel in the hero, the three-step overview and
   the beta band. Fold into §2/§3 if it replaces index.html.

   .steps and .capabilities are also used on agent-intelligence.html (live),
   so they must survive any cleanup of this section.
   ========================================================================== */
.hero--beta h1 { font-size: clamp(2.75rem, 7vw, 4.75rem); line-height: 1.02; }

/* Live-signal dot on the "is coming" eyebrow. Static unless motion is OK. */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: var(--space-2);
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .pulse-dot { animation: orbit-pulse 2s ease-in-out infinite; }
}
/* The dot replaces the eyebrow's leading rule rather than sitting beside it. */
.hero--beta .eyebrow::before { display: none; }

.hero-panel {
  position: relative;
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
}
.hero-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.hero-panel-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}
.hero-panel-list { list-style: none; padding-left: 0; }
.hero-panel-list li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-soft);
}
.hero-panel-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-panel-key {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--support);
  padding-top: 2px;
}

/* Three-step "how it works". An <ol> for semantics; the numbers are drawn
   from .num so they match the problem cards. */
.steps {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.step .num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 0.1em;
}
.step h3 { font-size: var(--text-lg); margin: 12px 0 8px; }
.step p { font-size: 15px; color: var(--text-soft); }

.capabilities { margin-top: var(--space-6); }
.capabilities-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.capabilities .feature-list { grid-template-columns: repeat(4, 1fr); }

/* One product card on its own: full width rather than half of an empty
   two-column grid. */
.product-cards--single { grid-template-columns: 1fr; }

/* Beta band: pitch + CTA on the left, what-you-get list on the right. */
.beta-band {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}
.beta-band h2 { margin: var(--space-3) 0; }
.beta-band p {
  color: var(--text-soft);
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
}
.beta-band .expect-list { margin-bottom: 0; }
.beta-band .expect-list li { font-size: 15px; }


/* ==========================================================================
   20 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .problem-grid,
  .outcomes-grid,
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: var(--space-5); }
}

@media (max-width: 900px) {
  .hero-grid,
  .agentos-grid,
  .meaning-grid,
  .origin-grid,
  .capture-grid,
  .beta-band,
  .steps,
  .product-cards { grid-template-columns: 1fr; }
  .capabilities .feature-list { grid-template-columns: repeat(2, 1fr); }

  .orbit,
  .about-hero .orbit { height: 260px; }

  .enterprise-grid,
  .pillar-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  /* The calculator holds two columns further down than the other grids
     (which stack at 900px): its results panel stays readable in a narrow
     column, and side-by-side is what makes inputs-affect-results legible.
     Deliberately its own breakpoint — don't fold it back into the 900px
     rule. */
  .calc { grid-template-columns: 1fr; }

  /* Nav collapses into a disclosure panel driven by js/site.js. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0 28px;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border);
  }
  .site-nav.is-open {
    max-height: 60vh;
    padding: var(--space-3) 28px var(--space-4);
  }
  .site-nav a { width: 100%; padding: 10px 0; }
  .nav-toggle { display: block; }

  .section { padding: var(--space-7) 0; }
  .hero { padding: var(--space-6) 0 var(--space-7); }
}

@media (max-width: 620px) {
  .problem-grid,
  .outcomes-grid,
  .values-grid,
  .feature-list,
  .capabilities .feature-list { grid-template-columns: 1fr; }
  .hero-panel-list li { grid-template-columns: 1fr; gap: var(--space-1); }
  .ai-product-view--portrait { grid-template-columns: 1fr; gap: var(--space-4); }
  .ai-product-view figcaption { grid-template-columns: 1fr; gap: var(--space-2); }
  .footer-top { grid-template-columns: 1fr; }
  .queue { align-items: flex-start; text-align: left; }
  .queue-label,
  .queue-joined { justify-content: flex-start; }

  /* Role rows stack: the Apply button drops under the copy and goes
     full-width rather than being squeezed beside a wrapping title. */
  .role {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .role .btn { width: 100%; }
}

@media (max-width: 480px) {
  .hero-actions,
  .cta-actions { flex-direction: column; }
  .hero-actions .btn,
  .cta-actions .btn { width: 100%; }
}

/* Smallest phones still in use (iPhone SE, 320px). Site-wide, not calculator-
   specific: the brand plus a full-size "Book a demo" and the menu button
   overflow the header here and scroll every page sideways. */
@media (max-width: 380px) {
  .site-header .wrap { gap: var(--space-2); }
  .brand span { font-size: var(--text-lg); }
  .site-header .btn--primary {
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
  }
}


/* ==========================================================================
   21 · PRINT  —  the calculator as a takeaway
   --------------------------------------------------------------------------
   No backend, so there's nothing to generate a PDF server-side. The browser
   already can: "Print > Save as PDF" produces a real file with zero
   dependencies and no library to vendor. This makes what it produces worth
   keeping — the visitor's own numbers on a clean page.

   Screen chrome (nav, footer, sliders, the capture form) is dropped: none of
   it means anything on paper, and a printed range input is just a grey line.
   The values stay because they're rendered as text.
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .calc-assumptions,
  .calc-capture,
  #brief-form,
  .cta-band,
  .btn,
  input[type="range"] { display: none !important; }

  /* Paper is white; the dark ground would burn a cartridge and read badly. */
  html, body {
    background: #fff !important;
    color: #111 !important;
  }
  .section { padding: 0 !important; }
  .card,
  .calc-panel,
  .result-headline,
  .result-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  h1, h2, h3,
  .result-figure,
  .result-num,
  .stat-num { color: #111 !important; }
  .eyebrow,
  .result-label,
  .calc-field label,
  .calc-field output,
  .hint,
  p { color: #333 !important; }

  /* Slider labels and their values still carry the inputs, so the reader can
     see what scenario produced these numbers. */
  .calc-field { break-inside: avoid; margin-bottom: 8px; }

  /* The disclaimer is the most important thing on a page that leaves the
     building — it must survive printing. */
  .calc-disclaimer {
    color: #444 !important;
    border-top: 1px solid #ccc;
    padding-top: 8px;
    margin-top: 12px;
    break-inside: avoid;
  }
  .result-grid { grid-template-columns: repeat(3, 1fr) !important; }
  a[href]::after { content: ""; }   /* no URL noise after every link */
}