/* ── Layout ── */
.landing-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 48px; position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.landing-hero { text-align: center; padding: 72px 24px 48px; }
.landing-hero h1 { font-size: clamp(28px, 5vw, 48px); font-weight: 700; line-height: 1.15; margin-bottom: 20px; color: var(--color-text); }
.hero-accent { color: var(--color-accent); }
/* NEX-622: keep each sentence of the tagline on one line. Without this a
   phone-width wrap left "The" stranded at the end of line one, split from
   "right buyer." Each sentence is one unit; the break falls between them. */
.hero-phrase { display: inline-block; }
.landing-hero p { font-family: var(--font-serif); font-size: 16.5px; color: var(--color-muted); line-height: 1.68; max-width: 560px; margin: 0 auto; }
.audience-section { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 840px; margin: 0 auto; padding: 0 24px 72px; }
.audience-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; }
.audience-card h3 { font-size: 20px; font-weight: 600; color: var(--color-secondary-text); margin: 0; }
.audience-card p { font-family: var(--font-serif); font-size: 15px; color: var(--color-muted); line-height: 1.62; margin: 0; flex: 1; }
.audience-card .cta-btn { display: block; width: 100%; padding: 12px 0; background: var(--color-accent); color: var(--color-on-accent); font-size: 15px; font-weight: 600; text-align: center; border-radius: 6px; text-decoration: none; margin-top: auto; }
.audience-card .cta-btn:hover { opacity: 0.9; }
.benefits-section { margin: 0 auto 48px; padding: 0 24px; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-size: 28px; font-weight: 700; color: var(--color-accent); margin: 0 0 12px; }
.section-header p { font-family: var(--font-serif); font-size: 15px; color: var(--color-muted); max-width: 520px; margin: 0 auto; line-height: 1.62; }
.cta-header { text-align: center; padding: 64px 24px 24px; }
.cta-header h2 { font-size: 28px; font-weight: 700; color: var(--color-accent); margin: 0 0 12px; }
.cta-header p { font-family: var(--font-serif); font-size: 15px; color: var(--color-muted); max-width: 520px; margin: 0 auto; line-height: 1.62; }
.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 840px; margin: 0 auto; }
.benefit-tile { padding: 32px; border-top: 1px solid var(--color-border); }
.benefit-tile:nth-child(odd) { border-right: 1px solid var(--color-border); }
.benefit-tile h3 { font-size: 16px; font-weight: 600; color: var(--color-secondary-text); margin: 0 0 10px; }
.benefit-tile p { font-family: var(--font-serif); font-size: 15px; color: var(--color-muted); line-height: 1.62; margin: 0; }
.signin-btn { font-size: 14px; font-weight: 500; color: var(--color-accent); border: 1.5px solid var(--color-accent); border-radius: 6px; padding: 7px 16px; text-decoration: none; background: transparent; }
.signin-btn:hover { background: rgba(228, 107, 31, 0.08); }

/* NEX-542: on the index header Sign in is the only action on the right, so it
   takes the primary treatment instead of the outlined one. Everywhere else the
   outlined .signin-btn still sits next to a filled Request access and has to
   stay secondary to it. */
.signin-btn.header-signin-solo { font-weight: 600; color: var(--color-on-accent); background: var(--color-accent); }
.signin-btn.header-signin-solo:hover { background: var(--color-accent); opacity: 0.9; }
/* NEX-271: header actions — outlined Sign in + solid Create Account */
/* NEX-201: wraps rather than overflows — index.html carries three buttons and
   a narrow phone cannot fit them on one line. */
.header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
/* NEX-201: role entry points on the index header. Matched to .signin-btn so the
   three read as one set; separation comes from the gap before Sign in, not from
   inventing a third button style. */
.role-btn { font-size: 14px; font-weight: 500; color: var(--color-accent); border: 1.5px solid var(--color-accent); border-radius: 6px; padding: 7px 16px; text-decoration: none; background: transparent; white-space: nowrap; }
.role-btn:hover { background: rgba(228, 107, 31, 0.08); }
.header-signin { margin-left: 8px; }
/* Desktop: the menu is not a menu — the toggle is gone and the links sit inline.
   The mobile block near the bottom of this file turns it into a dropdown. */
.header-menu { position: relative; display: flex; align-items: center; }
.header-menu-panel { display: flex; align-items: center; gap: 12px; }
.header-menu-toggle { display: none; }
.create-btn { font-size: 14px; font-weight: 600; color: var(--color-on-accent); background: var(--color-accent); border: 1.5px solid var(--color-accent); border-radius: 6px; padding: 7px 16px; text-decoration: none; white-space: nowrap; }
.create-btn:hover { opacity: 0.9; }
/* box-sizing matters here: with `width: 100%`, the 20px side padding the phone
   breakpoint adds was landing outside the viewport and giving every landing page
   40px of horizontal scroll. */
.landing-footer { border-top: 1px solid var(--color-border); padding: 48px 0 40px; width: 100%; box-sizing: border-box; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1fr; gap: 40px; max-width: 840px; margin: 0 auto; padding: 0 24px; align-items: flex-start; box-sizing: border-box; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-brand svg { height: 40px !important; width: auto !important; }
.footer-copy { font-size: 12px; color: var(--color-muted); line-height: 1.6; margin: 0; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-heading { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text); margin: 0 0 4px; }
.footer-col a { font-size: 13px; color: var(--color-muted); text-decoration: none; line-height: 1.5; }
.footer-col a:hover { color: var(--color-text); }

/* ── NEX-317: scroll reveal ──────────────────────────────────────
   Scoped to `.js`, which theme-boot.js sets in <head>. Without JS the class
   never appears, so nothing is ever hidden and the page renders as static
   content. Do not lift these off `.js` — ungated, a script failure would
   leave the marketing pages blank.
   ───────────────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Belt and braces: reveal.js already bails on reduced motion, but if the class
   lands anyway the content must still be visible and still. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.is-revealed { transition: none; }
}

/* ── Stub page ── */
.stub-body { display: flex; flex-direction: column; min-height: 100vh; }
.stub-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; }
.stub-main h1 { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.stub-main p { font-size: 16px; color: var(--color-muted); max-width: 480px; margin-bottom: 24px; }
.stub-main .cta-btn { display: inline-block; padding: 12px 32px; background: var(--color-accent); color: var(--color-on-accent); font-size: 15px; font-weight: 600; text-align: center; border-radius: 6px; text-decoration: none; }
.stub-main .cta-btn:hover { opacity: 0.9; }

/* ── NEX-269: hero secondary CTA ── */
.hero-cta { display: inline-block; padding: 12px 28px; background: var(--color-accent); color: var(--color-on-accent); font-size: 15px; font-weight: 600; border-radius: 6px; text-decoration: none; }
.hero-cta:hover { opacity: 0.9; }
/* NEX-321 / NEX-201: the Early Release pitch under the primary CTA. At 16px it
   crowded the button and read as a caption hanging off it; it is its own
   statement, so it gets room and full-strength text.

   Scoped under .landing-hero deliberately: `.landing-hero p { margin: 0 auto }`
   outranks a bare .hero-note, which is why the old 16px never applied either
   and the note sat flush against the button. */
.landing-hero .hero-note { font-family: var(--font-serif); font-size: 16.5px; color: var(--color-text-serif); line-height: 1.68; max-width: 480px; margin: 36px auto 0; }
/* NEX-201: what participating actually gets you. Left-aligned inside a centred
   column — centred list items are hard to scan once they wrap. */
.hero-benefits { list-style: none; max-width: 480px; margin: 20px auto 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.hero-benefits li { font-family: var(--font-serif); position: relative; padding-left: 26px; font-size: 15px; color: var(--color-muted); line-height: 1.62; }
.hero-benefits li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: 700; }

/* ── NEX-269: How It Works ── */
.how-section { margin: 0 auto 8px; padding: 0 24px; }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 840px; margin: 0 auto; }
.how-track { padding: 32px; border-top: 1px solid var(--color-border); }
.how-track:nth-child(odd) { border-right: 1px solid var(--color-border); }
.how-track-title { font-size: 16px; font-weight: 600; color: var(--color-secondary-text); margin: 0 0 20px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: how-step; }
.how-step { display: flex; align-items: flex-start; gap: 14px; counter-increment: how-step; }
.how-step::before {
  content: counter(how-step);
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums lining-nums;
}
.how-step p { font-size: 14px; color: var(--color-muted); line-height: 1.55; margin: 0; padding-top: 4px; }

/* ── NEX-271: role landing pages (supplier / buyer) ── */
.role-hero { text-align: center; padding: 72px 24px 56px; }
/* The logo blue (#4E7C9B) is too desaturated to read as blue in small text on a
   near-black ground, so role pages use a lightened tint of it for type. */
/* v4 (NEX-333): the rogue `:root { --brand-blue-type: #7FB0D4 }` that lived
   here is gone — tokens belong in theme.css only. The same value is now
   --color-secondary-text, defined per theme so light mode gets #446E8A
   instead (#7FB0D4 measures ~2.3:1 on white). */
.role-eyebrow { font-size: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-secondary-text); margin: 0 0 18px; }
/* Role-page section headings use the brand blue (index keeps orange). */
.value-section .section-header h2,
.showcase .section-header h2,
.how-section--role .section-header h2,
.pricing-cta .section-header h2 { color: var(--color-secondary-text); }
.role-hero h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 700; line-height: 1.15; margin: 0 auto 20px; max-width: 860px; color: var(--color-text); }
.role-hero p { font-size: 17px; color: var(--color-muted); line-height: 1.6; max-width: 600px; margin: 0 auto; }

.value-section { padding: 8px 24px 64px; }
.value-section .section-header { margin-bottom: 40px; }
.value-group { max-width: 1040px; margin: 0 auto 40px; }
.value-group:last-child { margin-bottom: 0; }
.value-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 16px; }
.value-grid { --value-grid-gap: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--value-grid-gap); }
/* NEX-379: buyers.html's screened section reuses .value-grid with two cards, and
   the fixed three-column track packed them into the left two thirds under a
   centred heading. The pair keeps the three-column track width instead of
   growing to fill the row, so the cards line up with the section below, and the
   track set is centred rather than the text inside it. Not a NEX-335 regression
   — the section was written this way in NEX-347 and never carried a width. */
.value-grid--pair {
  grid-template-columns: repeat(2, minmax(0, calc((100% - var(--value-grid-gap) * 2) / 3)));
  justify-content: center;
}
.value-card { border-top: 1px solid var(--color-accent); padding-top: 20px; }
.value-card h3 { font-size: 15px; font-weight: 600; color: var(--color-text); margin: 0 0 10px; }
.value-card p { font-size: 14px; color: var(--color-muted); line-height: 1.6; margin: 0; }

.pricing-cta { border-top: 1px solid var(--color-border); max-width: 840px; margin: 0 auto; padding: 56px 24px; text-align: center; }
/* No subtitle <p> here — the three lede lines below do that job, so the header
   sits closer to them than the usual 48px. */
.pricing-cta .section-header { margin-bottom: 20px; }
/* Direct children only — the plan card below nests its own <p> elements, and this
   rule would otherwise out-specify every .plan-* type rule inside it. */
.pricing-cta > p { font-size: 15px; color: var(--color-muted); line-height: 1.6; max-width: 520px; margin: 0 auto 20px; }

/* ── NEX-315: About — long-form prose page ── */
.prose-hero { text-align: center; padding: 72px 24px 8px; }
.prose-hero h1 { font-size: clamp(26px, 4.5vw, 36px); font-weight: 700; margin: 0; color: var(--color-text); }
.prose { max-width: 680px; margin: 0 auto; padding: 32px 24px 64px; }
.prose p { font-size: 16px; color: var(--color-muted); line-height: 1.75; margin: 0 0 22px; }
/* The turn of the letter — the sentence the whole thing is built around. */
.prose-turn { font-size: 18px; color: var(--color-text); font-weight: 600; margin: 30px 0 30px; }
.prose-sign { font-size: 15px; color: var(--color-text); margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--color-border); }

.closing-cta { border-top: 1px solid var(--color-border); text-align: center; padding: 64px 24px 72px; }
.closing-cta h2 { font-size: 24px; font-weight: 700; color: var(--color-text); margin: 0 0 12px; }
.closing-cta p { font-size: 15px; color: var(--color-muted); line-height: 1.6; max-width: 560px; margin: 0 auto 28px; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .value-grid { --value-grid-gap: 28px; grid-template-columns: 1fr; }
  /* Stacked, so the pair drops its centred two-up track with everything else. */
  .value-grid--pair { grid-template-columns: 1fr; }
  .landing-header { padding: 16px 20px; }
  .header-actions { gap: 8px; }
  /* NEX-201: index.html carries three actions, and at full width they push Sign
     in onto a second line — a 105px sticky header on a phone. Shrinking them is
     not the fix (NEX-316 above deliberately restored their tap target), so all
     three collapse behind a toggle, leaving the header as the logo plus a 40px
     button. That is what buys back the wordmark below. */
  .header-menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 38px; padding: 0;
    background: transparent; border: 1.5px solid var(--color-accent);
    border-radius: 6px; cursor: pointer; color: var(--color-accent);
  }
  .header-menu-bars { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; }
  .header-menu-bars span { display: block; height: 2px; border-radius: 1px; background: currentColor; }
  .header-menu-toggle[aria-expanded="true"] { background: rgba(228, 107, 31, 0.12); }

  /* Closed by default, so no-JS leaves it shut rather than hanging open. */
  .header-menu-panel { display: none; }
  /* Scripts blocked entirely: theme-boot.js never set .js on <html>, so nothing
     will ever add .open. Focus opens the panel instead — the toggle is a real
     button, so tapping it works and tapping away closes it. Kept out of the JS
     path deliberately: there, clicking the toggle to close would leave it still
     focused and the panel would refuse to shut. Without this, Sign in is
     unreachable on a phone, unlike the role links the audience cards repeat. */
  html:not(.js) .header-menu:focus-within .header-menu-panel,
  .header-menu.open .header-menu-panel {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 101;
    min-width: 184px; padding: 10px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
  /* Full-width rows inside the panel — a dropdown of centred pills reads as
     loose buttons rather than a menu. */
  .header-menu-panel .role-btn,
  .header-menu-panel .signin-btn { text-align: center; padding: 10px 14px; }
  /* Sign in is a different kind of action from picking a role. Separated by
     space rather than a rule — the button carries its own border, and a divider
     immediately above it just reads as a doubled line. */
  .header-menu-panel .header-signin { margin-left: 0; margin-top: 10px; }
  /* NEX-316: the wordmark plus both buttons overran a ~390px viewport, which is
     why the buttons had been shrunk below a comfortable tap target. Dropping the
     wordmark reclaims ~130px, so the buttons go back to full size. */
  .brand-word { display: none; }
  /* NEX-201: but a header whose actions all live in the menu has only the logo
     and a 40px toggle on it, which leaves room for the wordmark NEX-316 had to
     drop. Scoped to that header — the other landing pages still carry two inline
     buttons and still need the ~130px. */
  .landing-header--menu .brand-word { display: inline; }
  .audience-section { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-tile:nth-child(odd) { border-right: none; }
  .benefit-tile { border-top: 1px solid var(--color-border); border-right: none; }
  .how-grid { grid-template-columns: 1fr; }
  .how-track:nth-child(odd) { border-right: none; }
  .landing-footer { padding: 40px 20px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}


/* ─────────────────────────────────────────────────────────────
   NEX-271: product showcase — HTML/CSS replicas of the app UI.
   Decorative marketing illustrations; scoped with .shot-* so they can never
   collide with the real app styles. Each frame scrolls horizontally on small
   screens rather than reflowing, so the "product screenshot" reads intact.
   ───────────────────────────────────────────────────────────── */
.showcase { max-width: 1040px; margin: 0 auto; padding: 8px 24px 24px; }
/* Only one of these shows at a time — see the phone block above. */
.showcase-lede-static { display: none; }
.showcase-item { margin-bottom: 56px; }
.showcase-item:last-child { margin-bottom: 0; }
.showcase-badge {
  display: inline-block; background: var(--color-accent); color: var(--color-on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 6px; margin-bottom: 20px;
}
.shot-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shot-frame {
  min-width: 720px;
  background: var(--color-panel, #0d0f16);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px 22px;
  font-size: 12px;
  color: var(--color-text);
}
.shot-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.shot-title::before { content: ""; width: 3px; height: 18px; background: var(--color-accent); border-radius: 2px; }

/* tabs */
.shot-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--color-border); margin-bottom: 14px; }
.shot-tab { display: flex; align-items: center; gap: 7px; padding: 0 2px 9px; color: var(--color-muted); font-size: 12.5px; }
.shot-tab--active { color: var(--color-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent); }
.shot-count { background: rgba(148,163,184,0.16); color: var(--color-muted); border-radius: 999px; padding: 1px 7px; font-size: 10.5px; font-variant-numeric: tabular-nums lining-nums; }
.shot-count--on { background: var(--color-accent); color: var(--color-on-accent); }
.shot-filter { display: inline-block; border: 1px solid var(--color-border); color: var(--color-accent); border-radius: 6px; padding: 4px 11px; font-size: 11.5px; margin-bottom: 14px; }

/* table */
.shot-table { width: 100%; border-collapse: collapse; }
.shot-table th {
  text-align: left; font-size: 10.5px; font-weight: 600; color: var(--color-muted);
  padding: 9px 10px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.shot-table td { padding: 11px 10px; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: 12px; white-space: nowrap; }
.shot-table td.shot-rfq { color: var(--color-text); font-weight: 600; white-space: normal; }
.shot-row--read td { color: #6b7280; }
.shot-row--read td.shot-rfq { color: #8b93a1; font-weight: 400; }
.shot-num { font-variant-numeric: tabular-nums lining-nums; }
.shot-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: 600; }
.shot-pill--new { background: rgba(228,107,31,0.15); color: var(--color-accent); }
.shot-pill--quoted { background: rgba(148,163,184,0.14); color: #8b93a1; }

/* quote builder */
.shot-back { display: inline-block; border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; color: var(--color-muted); font-size: 11px; margin-bottom: 12px; }
.shot-card { border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; background: rgba(255,255,255,0.012); }
.shot-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.shot-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 3px; }
.shot-label--blue { color: var(--color-secondary-text); }
.shot-sub { font-size: 11px; color: var(--color-muted); margin: 0; }
.shot-chip { border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 10px; font-size: 10.5px; color: var(--color-muted); }
.shot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.shot-field-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 4px; }
.shot-field-value { font-size: 13px; font-weight: 600; color: var(--color-text); margin: 0; }
.shot-input { border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 11px; font-size: 12px; color: var(--color-text); background: rgba(0,0,0,0.25); }
.shot-input--ph { color: #6b7280; }
.shot-desc { border-top: 1px solid var(--color-border); margin-top: 14px; padding-top: 12px; }
.shot-desc p { font-size: 11.5px; color: var(--color-muted); line-height: 1.6; margin: 0; }
.shot-link { color: var(--color-accent); font-size: 11.5px; }
.shot-links { display: flex; gap: 16px; margin: 4px 0 16px; }
.shot-bar { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 14px; }
.shot-total { font-size: 15px; font-weight: 700; }
.shot-bar-spacer { flex: 1; }
.shot-saved { border: 1px solid rgba(34,197,94,0.35); color: #4ade80; border-radius: 999px; padding: 3px 10px; font-size: 10.5px; }
.shot-btn { border: 1px solid var(--color-border); border-radius: 6px; padding: 6px 14px; font-size: 11.5px; font-weight: 600; color: var(--color-text); }
.shot-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* message board */
.shot-board-title { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 12px; }
.shot-visible { font-size: 11.5px; color: var(--color-muted); margin: 0 0 18px; }
.shot-visible strong { color: var(--color-text); }
.shot-msgs { display: flex; flex-direction: column; gap: 14px; }
.shot-msg { display: flex; flex-direction: column; gap: 5px; max-width: 78%; }
.shot-msg--them { align-self: flex-start; }
.shot-msg--us { align-self: flex-end; align-items: flex-end; }
.shot-msg-who { font-size: 11px; color: var(--color-muted); }
.shot-msg-who strong { color: var(--color-text); }
.shot-bubble { border-radius: 10px; padding: 11px 14px; font-size: 12.5px; line-height: 1.55; }
.shot-msg--them .shot-bubble { background: rgba(148,163,184,0.12); }
.shot-msg--us .shot-bubble { background: rgba(228,107,31,0.13); }
.shot-time { font-size: 10px; color: #6b7280; }
.shot-compose { display: flex; gap: 10px; margin-top: 18px; }
.shot-compose .shot-input { flex: 1; }


/* ── NEX-271: showcase carousel ── */
.car { position: relative; }
.car-stage { position: relative; padding: 0 52px; }
.car-viewport { overflow: hidden; }
.car-ready .car-viewport { transition: height 0.35s ease; }
.car-track--instant ~ .car-viewport, .car-reduced .car-viewport { transition: none !important; }
/* align-items must be flex-start: the default `stretch` makes every slide as
   tall as the tallest one, so measuring a slide returns the max height and the
   viewport can never shrink. */
.car-track { display: flex; align-items: flex-start; }
.car-ready .car-track { transition: transform 0.35s ease; }
.car-track--instant { transition: none !important; }
.car-slide { flex: 0 0 100%; min-width: 100%; }
/* Without JS every panel is simply stacked and readable. */
.car:not(.car-ready) .car-viewport { overflow: visible; }
.car:not(.car-ready) .car-track { display: block; }
.car:not(.car-ready) .car-slide { margin-bottom: 40px; }
.car:not(.car-ready) .car-arrow,
.car:not(.car-ready) .car-dots { display: none; }

.car-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
/* Fixed offset from the top of the stage rather than vertically centred: the
   panels differ in height, so centring moved the arrows down the page every
   time the viewport resized to a taller slide. 168px sits inside the shortest
   panel, so they hold one position across all three. */
.car-arrow {
  position: absolute; top: 168px; transform: none; z-index: 2;
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 50%;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.car-prev { left: 0; }
.car-next { right: 0; }
.car-arrow:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.car-arrow:disabled { opacity: 0.3; cursor: default; }
.car-arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.car-dots { display: flex; gap: 8px; }
.car-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: var(--color-border); border: none; cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.car-dot--on { background: var(--color-accent); transform: scale(1.25); }
.car-dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* editable demo inputs */
input.shot-input {
  font-family: inherit; width: 100%;
  -moz-appearance: textfield;
}
input.shot-input::-webkit-outer-spin-button,
input.shot-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.shot-input:focus { outline: none; border-color: var(--color-accent); }
input.shot-input[readonly] {
  font-family: var(--font-sans); color: var(--color-muted); }
.shot-editable { position: relative; }
.shot-hint {
  display: inline-block; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent); border: 1px solid rgba(228,107,31,0.4); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.shot-tab { background: none; border: none; font-family: inherit; cursor: pointer; }
.shot-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── NEX-271: RFQ detail drill-down (clicking a row in the inbox demo) ── */
.shot-row--clickable { cursor: pointer; }
.shot-row--clickable:hover td { background: rgba(228,107,31,0.06); }
.shot-row--clickable td:first-child { position: relative; }
.shot-open-hint {
  display: inline-block; margin-left: 8px; font-size: 9px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent);
  border: 1px solid rgba(228,107,31,0.4); border-radius: 999px; padding: 1px 7px;
  vertical-align: middle;
}
.shot-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 6px; }
.shot-detail-title { font-size: 19px; font-weight: 700; margin: 0; }
.shot-detail-right { text-align: right; flex-shrink: 0; }
.shot-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 22px; }
.shot-mono { font-family: ui-monospace, Menlo, Monaco, Consolas, monospace; font-size: 10.5px; color: #6b7280; }
.shot-tag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 11px; font-size: 11px; color: var(--color-muted); }
.shot-tag b { color: var(--color-text); font-weight: 600; }
.shot-tag-key { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; }
.shot-section-row { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 14px; }
.shot-section-row .shot-label { font-size: 13px; letter-spacing: 0.06em; margin: 0; }
.shot-hr { border: none; border-top: 1px solid var(--color-border); margin: 22px 0; }
.shot-poster { display: inline-flex; align-items: center; gap: 11px; border: 1px solid var(--color-border); border-radius: 8px; padding: 9px 14px; }
.shot-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #5b6a7d, #384453); flex-shrink: 0; }
.shot-poster-name { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.shot-poster-co { font-size: 11px; color: var(--color-muted); }
.shot-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; border-top: 1px solid var(--color-border); margin-top: 24px; padding-top: 20px; }
.shot-action { border-radius: 999px; padding: 9px 22px; font-size: 12.5px; font-weight: 600; }
.shot-action--primary { background: var(--color-accent); color: var(--color-on-accent); }
.shot-action--ack { border: 1px solid #3f9e5c; color: #58c47c; }
.shot-action--info { border: 1px solid var(--color-secondary); color: var(--color-secondary-text); }
.shot-back-btn { background: none; font-family: inherit; cursor: pointer; }
.shot-back-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.shot-back-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.shot-status-open { display: inline-block; background: rgba(96,165,250,0.16); color: #8ec2ff; border-radius: 999px; padding: 2px 12px; font-size: 10.5px; font-weight: 600; }

/* Placed after every .car-* / .shot-* rule above on purpose: a media query adds
   no specificity, so an override sitting earlier in the file loses to the base
   rule on source order alone. Several of these silently did nothing until they
   were moved down here. */
@media (max-width: 640px) {
  .showcase { padding: 8px 16px 16px; }
  .car-stage { padding: 0; }

  /* NEX-316: phones get three static stacked panels — no carousel, no controls.
     showcase.js skips initialisation below this width, so `.car-ready` is absent
     and the no-JS stacked rules already apply. These `!important`s exist for the
     one case that path misses: a desktop window dragged narrower after the
     carousel has already written inline transform and height. */
  .car-viewport { overflow: visible; height: auto !important; }
  .car-track { display: block; transform: none !important; }
  .car-slide { margin-bottom: 36px; min-width: 0; }
  .car-slide:last-child { margin-bottom: 0; }
  .car-arrow, .car-dots, .car-controls { display: none; }

  /* Affordances that no longer do anything must not look as if they might. */
  .showcase-lede-live { display: none; }
  .showcase-lede-static { display: block; }
  .shot-open-hint, .shot-hint { display: none; }
  .shot-tab { cursor: default; }
  .showcase--static .shot-tab, .showcase--static input.shot-input { pointer-events: none; }

  /* NEX-316: the panels used to keep a 640px min-width and scroll sideways, which
     meant swiping horizontally inside a carousel that also swipes horizontally —
     two competing gestures, and a whole panel never visible. They now fit. */
  .shot-scroll { overflow-x: visible; }
  .shot-frame { min-width: 0; padding: 14px 15px; }

  /* Panel 1 — keep Title / Quantity / Status; buyer, need-by and received are the
     columns a phone reader can most afford to lose. */
  .shot-table th:nth-child(2), .shot-table td:nth-child(2),
  .shot-table th:nth-child(4), .shot-table td:nth-child(4),
  .shot-table th:nth-child(5), .shot-table td:nth-child(5) { display: none; }
  .shot-table th { padding: 8px 6px; }
  .shot-table td { padding: 9px 6px; font-size: 11.5px; }
  /* The three tab labels overran a 320px frame by 3px at gap:14. Tighter, and
     allowed to wrap so a narrower device or a longer label cannot reintroduce
     the horizontal scroll this breakpoint exists to remove. */
  .shot-tabs { gap: 10px; flex-wrap: wrap; row-gap: 4px; }
  .shot-tab { font-size: 11.5px; }
  .shot-title { font-size: 15px; }

  /* Panel 2 — one field per row; the action bar wraps instead of overflowing. */
  .shot-fields { grid-template-columns: 1fr; gap: 12px; }
  .shot-bar { flex-wrap: wrap; gap: 10px; }
  .shot-bar-spacer { display: none; }
  .shot-desc p { font-size: 11px; }

  /* Panel 3 — bubbles can use most of the width; compose stacks. */
  .shot-msg { max-width: 90%; }
  .shot-compose { flex-direction: column; }
}

/* ── NEX-271: supplier plan card (figures per NEX-287) ── */
/* Both are direct children of .pricing-cta, so they need to out-specify its `> p`
   rule. Everything else below lives inside .plan-card and does not. */
.pricing-cta .plan-lede { font-size: 15px; font-weight: 600; color: var(--color-text); line-height: 1.6; max-width: 620px; margin: 0 auto 4px; }
.pricing-cta .plan-lede-lock { font-size: 15px; font-weight: 600; color: var(--color-secondary-text); line-height: 1.6; max-width: 620px; margin: 0 auto 4px; }
/* One line, always — the date must not break across lines. */
.pricing-cta .plan-lede-billing { font-size: 15px; font-weight: 600; color: var(--color-accent); max-width: none; margin: 0 auto 28px; white-space: nowrap; }
.plan-wrap { max-width: 620px; margin: 0 auto; }
.plan-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 30px 32px 32px; background: rgba(255,255,255,0.012); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; text-align: left; }
.plan-flag { display: inline-block; background: rgba(228,107,31,0.14); color: var(--color-accent); border: 1px solid rgba(228,107,31,0.35); border-radius: 999px; padding: 4px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.plan-name { font-size: 20px; font-weight: 700; color: var(--color-text); margin: 0 0 6px; }
.plan-sub { font-size: 13.5px; color: var(--color-muted); margin: 0; }

/* Founders on the left, standard on the right. */
.plan-prices { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.plan-pane { text-align: left; }
.plan-pane--founders { border-right: 1px solid var(--color-border); padding-right: 24px; }
.plan-pane--standard { padding-left: 24px; }
.plan-price-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 10px; }
.plan-pane--founders .plan-price-label { color: var(--color-secondary-text); }
.plan-price { font-family: var(--font-serif); font-size: 32px; font-weight: 600; color: var(--color-text); margin: 0; font-variant-numeric: tabular-nums lining-nums; line-height: 1.05; }
.plan-price small { font-size: 14px; font-weight: 500; color: var(--color-muted); }
.plan-price--founders { color: var(--color-accent); }
.plan-star { color: var(--color-accent); font-size: 0.55em; font-weight: 700; margin-left: 1px; }
.plan-annual { font-size: 13px; color: var(--color-muted); margin: 14px 0 0; font-variant-numeric: tabular-nums lining-nums; }
.plan-annual b { color: var(--color-text); font-weight: 600; }
/* Dollar amounts only — percentages read as noise next to two price columns. */
.plan-saves { font-size: 12px; font-weight: 600; margin: 5px 0 0; font-variant-numeric: tabular-nums lining-nums; }
.plan-pane--founders .plan-saves { color: var(--color-accent); }
.plan-pane--standard .plan-saves { color: var(--color-muted); }
.plan-rate-note { font-size: 12px; font-weight: 600; color: var(--color-secondary-text); margin: 16px 0 0; }
.plan-fine { font-size: 11px; color: #6b7280; line-height: 1.55; margin: 14px 0 0; text-align: left; }

.plan-list { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.plan-list li { font-size: 13.5px; color: var(--color-muted); line-height: 1.5; padding-left: 22px; position: relative; }
.plan-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }

@media (max-width: 640px) {
  .plan-card { padding: 26px 20px 28px; }
  .plan-head { flex-direction: column; gap: 12px; }
  /* Stacked: the panes no longer sit side by side, so the alignment spacer and the
     vertical rule between them have nothing left to do. */
  .plan-prices { grid-template-columns: 1fr; }
  .plan-pane--founders { border-right: 0; padding-right: 0; padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
  .plan-pane--standard { padding-left: 0; padding-top: 22px; }
  .plan-saves--spacer { display: none; }
  /* Stays on one line at narrow widths by shrinking rather than wrapping. */
  .pricing-cta .plan-lede-billing { font-size: 13.5px; }
}

/* ─────────────────────────────────────────────────────────────
   NEX-270: buyer landing page.
   The showcase panels replicate the buyer-side app — Create RFQ, the quote
   comparison grid, and the message board. Same .shot-* namespace as NEX-271:
   decorative replicas that can never collide with the real app styles.
   ───────────────────────────────────────────────────────────── */

/* The buyer flow is one track, so it sits centred rather than in the two-column
   grid the index page uses for buyers and suppliers side by side. */
.how-grid--single { grid-template-columns: 1fr; max-width: 620px; }
.how-grid--single .how-track:nth-child(odd) { border-right: none; }
.how-who { max-width: 620px; margin: 22px auto 0; font-size: 14px; color: var(--color-muted); line-height: 1.6; text-align: center; }

/* ── Panel 1: Create RFQ ── */
.shot-zone { border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; background: rgba(255,255,255,0.012); }
.shot-zone:last-of-type { margin-bottom: 0; }
.shot-zone-title { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.shot-zone-sub { font-size: 11px; color: var(--color-muted); margin: -2px 0 14px; }
.shot-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shot-cat {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 3px; padding: 14px 10px;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-panel, #0d0f16); color: var(--color-text);
  font-family: inherit; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.shot-cat:hover { border-color: var(--color-accent); }
.shot-cat--on { border-color: var(--color-accent); background: rgba(228,107,31,0.10); }
.shot-cat:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.shot-cat-icon { font-size: 20px; line-height: 1; margin-bottom: 3px; }
.shot-cat-label { font-size: 12px; font-weight: 600; }
.shot-cat-desc { font-size: 10.5px; color: var(--color-muted); line-height: 1.4; }
.shot-cat-check {
  position: absolute; top: 6px; right: 8px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent);
  font-size: 10px; display: none; align-items: center; justify-content: center;
}
.shot-cat--on .shot-cat-check { display: flex; }
.shot-guided { margin-top: 16px; }
.shot-req { color: var(--color-accent); }
.shot-helper { font-size: 10px; color: var(--color-muted); margin: 5px 0 0; }
.shot-freeform { font-size: 11.5px; color: var(--color-muted); line-height: 1.6; margin: 0; }
.shot-bar--end { justify-content: flex-end; }

/* ── Panel 2: quote comparison grid ── */
.shot-cmp { display: grid; grid-template-columns: 132px 1fr 1fr; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.shot-cmp-cell { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 9px 12px; border-bottom: 1px solid var(--color-border); font-size: 12px; color: var(--color-text); }
/* The last three cells are the bottom row — the card's own border closes it. */
.shot-cmp-cell:nth-last-child(-n+3) { border-bottom: none; }
.shot-cmp-lab { font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); border-right: 1px solid var(--color-border); background: rgba(255,255,255,0.015); }
.shot-cmp-lab--emph { color: var(--color-text); }
/* The cells are flex columns, so a pill would otherwise stretch the full width. */
.shot-cmp-cell > .shot-pill { align-self: flex-start; }
.shot-pill--won { background: rgba(34,197,94,0.12); color: #4ade80; }
.shot-cmp-alt { background: rgba(255,255,255,0.02); }
.shot-cmp-head { border-bottom: 2px solid var(--color-border); padding: 13px 12px; }
.shot-cmp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.shot-cmp-sup { font-size: 13px; font-weight: 700; }
.shot-cmp-meta { font-size: 10.5px; color: var(--color-muted); }
.shot-cmp-award { background: none; border: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--color-accent); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.shot-cmp-award:hover { text-decoration: underline; }
.shot-cmp-award:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.shot-cmp-total { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.shot-cmp-note { font-size: 11px; color: var(--color-muted); line-height: 1.5; }
.shot-lowest { display: inline-flex; width: fit-content; background: rgba(34,197,94,0.12); color: #4ade80; border-radius: 999px; padding: 2px 8px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.shot-dash { color: var(--color-muted); }
/* Awarding is one-way in the app, and the demo says the same thing: the losing
   column recedes and the buttons are gone once a quote is awarded. */
.shot-cmp-col--lost { opacity: 0.5; }
.shot-awarded { display: inline-flex; width: fit-content; background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.35); border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: 600; }
.shot-confirm { display: none; margin-top: 16px; border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; background: rgba(0,0,0,0.3); }
.shot-confirm--on { display: block; }
.shot-confirm-title { font-size: 13.5px; font-weight: 700; margin: 0 0 7px; }
.shot-confirm-body { font-size: 11.5px; color: var(--color-muted); line-height: 1.55; margin: 0 0 16px; }
.shot-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.shot-confirm-actions .shot-btn { font-family: inherit; cursor: pointer; }
/* .shot-btn was written for decorative spans; a real <button> needs the UA's
   light default background cleared. The primary variant keeps its own. */
.shot-confirm-actions .shot-btn:not(.shot-btn--primary) { background: transparent; }
.shot-confirm-actions .shot-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Buyer Free plan card (figures per NEX-287) ── */
.plan-prices--single { grid-template-columns: 1fr; }
.plan-pane--free { border-right: none; padding-right: 0; }
.plan-pane--free .plan-price-label { color: var(--color-secondary-text); }
/* Upgrade path with no figures on it: the paid buyer tier is not published yet,
   so this states the ceiling and the way around it, and promises no price. */
.plan-upsell { font-size: 12.5px; color: var(--color-muted); line-height: 1.55; text-align: left; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--color-border); }

/* Same reason as the block above: a media query adds no specificity, so these
   have to sit after the base rules they override. */
@media (max-width: 640px) {
  .how-who { font-size: 13.5px; }
  .shot-zone { padding: 13px 13px; }
  .shot-cats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .shot-cat { padding: 12px 8px; }
  .shot-cat-desc { display: none; }
  /* Three columns are kept: dropping one would remove the comparison this panel
     exists to show. They shrink instead. */
  .shot-cmp { grid-template-columns: 82px 1fr 1fr; }
  .shot-cmp-cell { padding: 7px 8px; font-size: 11px; }
  .shot-cmp-lab { font-size: 8.5px; letter-spacing: 0.02em; }
  .shot-cmp-head { padding: 10px 8px; }
  .shot-cmp-top { flex-direction: column; gap: 4px; }
  .shot-cmp-sup { font-size: 11.5px; }
  .shot-cmp-total { font-size: 13.5px; }
  .shot-cmp-note { font-size: 10px; }
  /* Notes run long; on a phone they would otherwise be most of the panel. The
     app collapses them behind a "more" toggle for the same reason. */
  .shot-cmp-cell .shot-cmp-note { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  /* Static mode: the cards and the award button are picture, not controls. */
  .showcase--static .shot-cat, .showcase--static .shot-cmp-award { pointer-events: none; }
  .shot-cat, .shot-cmp-award { cursor: default; }
}


/* ─────────────────────────────────────────────────────────────
   NEX-273: legal, security, and contact pages.
   Long-form policy documents sharing the marketing shell. Deliberately no
   data-reveal anywhere in the body: a policy has to be readable the instant
   it loads and printable in full, so none of this text may start at
   opacity 0. Measure is 720px — wider than the About letter, because these
   pages carry numbered clauses and lists rather than prose paragraphs.
   ───────────────────────────────────────────────────────────── */
.legal-hero { text-align: center; padding: 72px 24px 0; }
.legal-hero h1 { font-size: clamp(26px, 4.5vw, 36px); font-weight: 700; margin: 0 0 14px; color: var(--color-text); }
.legal-lede { font-size: 15px; color: var(--color-muted); line-height: 1.6; max-width: 560px; margin: 0 auto 20px; }
.legal-effective {
  display: inline-block; border: 1px solid var(--color-border); border-radius: 999px;
  padding: 5px 15px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--color-muted);
}

.legal { max-width: 720px; margin: 0 auto; padding: 40px 24px 64px; }

/* Contents. Two columns on desktop so a 20-clause document does not open with
   a full screen of link list before the reader reaches clause 1. */
.legal-toc { border: 1px solid var(--color-border); border-radius: 10px; padding: 22px 26px 16px; margin: 0 0 44px; background: rgba(255,255,255,0.012); }
.legal-toc-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 14px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 34px; }
.legal-toc li { font-size: 13px; line-height: 1.5; margin: 0 0 9px; break-inside: avoid; }
.legal-toc a { color: var(--color-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--color-accent); }

.legal-section { margin: 0 0 38px; }
.legal-section:last-child { margin-bottom: 0; }
/* scroll-margin so the sticky header does not cover a heading jumped to from
   the contents list. */
.legal-section h2 { font-size: 17px; font-weight: 600; color: var(--color-text); margin: 0 0 14px; scroll-margin-top: 88px; }
.legal-num { color: var(--color-accent); font-variant-numeric: tabular-nums lining-nums; margin-right: 9px; }
.legal-section h3 { font-size: 14px; font-weight: 600; color: var(--color-secondary-text); margin: 24px 0 10px; }
.legal-section p { font-size: 15px; color: var(--color-muted); line-height: 1.7; margin: 0 0 16px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legal-section li { font-size: 15px; color: var(--color-muted); line-height: 1.65; padding-left: 20px; position: relative; }
.legal-section li::before { content: "\2014"; position: absolute; left: 0; color: var(--color-accent); }
/* NEX-643: numbered steps in the help pages. The dash marker above is for
   bullet lists only; on an <ol> it sat in front of every number. */
.legal-section ol { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal-section ol li { padding-left: 4px; }
.legal-section ol li::before { content: none; }
.legal-section ol li::marker { color: var(--color-accent); font-variant-numeric: tabular-nums; }
.legal-section a { color: var(--color-accent); text-decoration: none; }
.legal-section a:hover { text-decoration: underline; }

/* The all-caps clauses (disclaimers, liability caps, jury waiver) arrive
   uppercase from the source documents and must stay that way to keep their
   legal effect. Set smaller and looser than body text so a wall of capitals is
   still readable, and boxed so the reader can see where it starts and ends. */
.legal-caps {
  border: 1px solid var(--color-border); border-radius: 8px;
  padding: 18px 20px; margin: 0 0 16px; background: rgba(255,255,255,0.012);
}
.legal-caps p { font-size: 12.5px; line-height: 1.8; letter-spacing: 0.01em; margin: 0 0 14px; }
.legal-caps p:last-child { margin-bottom: 0; }

/* Standing notice — Early Release status, superseding documents, and similar
   things a reader needs before the clause rather than after it. */
.legal-note {
  border-left: 2px solid var(--color-accent); border-radius: 0 8px 8px 0;
  background: rgba(228, 107, 31, 0.06);
  padding: 16px 20px; margin: 0 0 16px;
}
.legal-note p { font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.legal-note p:last-child { margin-bottom: 0; }

/* Address blocks (notice address, registered agent) — kept out of the running
   paragraph so they can be copied cleanly. */
.legal-address { font-style: normal; font-size: 14px; color: var(--color-muted); line-height: 1.7; border-left: 1px solid var(--color-border); padding-left: 16px; margin: 0 0 16px; }
.legal-address b { display: block; color: var(--color-text); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; }

/* Contact page: the request categories as cards rather than another numbered
   list, since the reader is picking one, not reading them all. */
.legal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 16px; }
.legal-card { border: 1px solid var(--color-border); border-radius: 10px; padding: 18px 20px; background: rgba(255,255,255,0.012); }
.legal-card h3 { font-size: 13.5px; font-weight: 600; color: var(--color-text); margin: 0 0 8px; }
.legal-card p { font-size: 13.5px; color: var(--color-muted); line-height: 1.6; margin: 0; }

/* The one address on the site people actually need. */
.legal-mail { text-align: center; border: 1px solid var(--color-border); border-radius: 10px; padding: 26px 24px; margin: 0 0 22px; background: rgba(255,255,255,0.012); }
/* Sentence case, not an uppercase eyebrow: this line is the first half of a
   sentence the address completes ("Report suspected security issues to …"), and
   set in caps with tracking it reads as shouting rather than as prose. */
.legal-mail-label { font-size: 14px; font-weight: 500; color: var(--color-muted); line-height: 1.6; margin: 0 0 12px; }
.legal-mail a { font-size: 20px; font-weight: 600; color: var(--color-accent); text-decoration: none; word-break: break-word; }
.legal-mail a:hover { text-decoration: underline; }

/* Cross-links to the sibling policies, above the footer. */
.legal-related { border-top: 1px solid var(--color-border); max-width: 720px; margin: 0 auto; padding: 36px 24px 8px; }
.legal-related-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 14px; }
.legal-related-links { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-related-links a { font-size: 13px; color: var(--color-muted); text-decoration: none; border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px; }
.legal-related-links a:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 640px) {
  .legal-hero { padding: 56px 20px 0; }
  .legal { padding: 32px 20px 48px; }
  .legal-toc { padding: 18px 18px 12px; }
  /* Two columns of 13px links do not fit a phone; one column of taller tap
     targets does. */
  .legal-toc ol { columns: 1; }
  .legal-toc li { margin-bottom: 11px; }
  .legal-section p, .legal-section li { font-size: 14.5px; }
  .legal-caps { padding: 15px 16px; }
  .legal-caps p { font-size: 12px; }
  .legal-cards { grid-template-columns: 1fr; }
  .legal-mail a { font-size: 17px; }
  .legal-related { padding: 32px 20px 4px; }
}

/* ─── NEX-202: Help / FAQ accordion ─────────────────────────
   Native <details>/<summary> — keyboard operable and expandable
   with no JS, and it still works if the reveal script never loads. */
.faq {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin: 0 0 10px;
  background: rgba(255,255,255,0.012);
  overflow: hidden;
}
.faq[open] { background: rgba(255,255,255,0.022); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  position: relative;
  transition: color 0.15s ease;
}
/* Suppress the default disclosure triangle so the custom chevron is the
   only affordance (WebKit needs its own selector). */
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: 10px;
}

/* Chevron rotates on open. Drawn in CSS so there is no icon dependency. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--color-accent);
  border-bottom: 1.6px solid var(--color-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq-body { padding: 0 18px 16px; }
.faq-body p {
  font-size: 14.5px;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0 0 12px;
}
.faq-body p:last-child { margin-bottom: 0; }
.faq-body ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.faq-body ul:last-child { margin-bottom: 0; }
.faq-body li {
  font-size: 14.5px;
  color: var(--color-muted);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}
.faq-body li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}
.faq-body strong { color: var(--color-text); font-weight: 600; }

@media (max-width: 640px) {
  .faq summary { font-size: 14.5px; padding: 14px 40px 14px 15px; }
  .faq-body { padding: 0 15px 14px; }
  .faq-body p, .faq-body li { font-size: 14px; }
}

/* NEX-202: the help lede carries an inline link; .legal-lede otherwise has no
   anchor styling of its own and would fall back to the UA default blue. */
.legal-lede a { color: var(--color-accent); text-decoration: none; }
.legal-lede a:hover { text-decoration: underline; }

/* NEX-164 (WCAG 1.4.1) — links inside legal and help prose must not be
   distinguished by colour alone. axe flagged 30 such links across terms,
   privacy, marketplace-terms, contact, cookie-policy, acceptable-use and
   help. Scoped to prose containers so nav, footer and button-styled links
   (which carry their own non-colour affordance) are unaffected. */
.legal-section p a,
.legal-section li a,
.legal-lede a,
.legal-mail a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* NEX-164 (WCAG 1.4.3) — the showcase mockups and plan fine-print used a flat
   #6b7280. On the dark ground those surfaces sit on it measures 3.96:1, under
   the 4.5:1 floor for text this size. The base theme here is dark, so the base
   value is lifted to #7d8593 (5.15:1 against #0d0f16). Light theme keeps
   #6b7280, which passes there (4.83:1 on white) and which the lifted value
   would have broken (3.72:1). One value cannot serve both grounds. */
.shot-row--read td,
.shot-input--ph,
.shot-time,
.shot-mono,
.shot-tag-key,
.plan-fine {
  color: #7d8593;
}

[data-theme="light"] .shot-row--read td,
[data-theme="light"] .shot-input--ph,
[data-theme="light"] .shot-time,
[data-theme="light"] .shot-mono,
[data-theme="light"] .shot-tag-key,
[data-theme="light"] .plan-fine {
  color: #6b7280;
}

/* NEX-629: hero actions on the role pages, the buyers' "Free for buyers" line,
   and the screening band shared by index, buyers and suppliers. */
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.hero-cta--ghost { background: transparent; color: var(--color-accent); border: 1.5px solid var(--color-accent); padding: 10.5px 26.5px; }
.hero-cta--ghost:hover { background: rgba(228, 107, 31, 0.08); opacity: 1; }
.role-hero .role-hero-free { font-size: 15px; font-weight: 600; color: var(--color-accent); margin: 16px auto 0; }
.screening-band { padding-bottom: 56px; }
.screening-band .section-header { margin-bottom: 0; }
.screening-band .section-header p { max-width: 620px; }
.screening-goal { max-width: 720px; margin: 8px auto 0; text-align: center; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.6; color: var(--color-text); }

/* NEX-630: photo heroes. The photo sits behind the hero on the right, and a
   dark fade from the left keeps the headline readable over it. Phones get the
   photo as a band above the text with the fade running downward instead. */
.hero-photo { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; text-align: left; padding: 72px 0; border-bottom: 1px solid var(--color-border); }
.hero-photo .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.hero-photo::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8,10,15,0.97) 0%, rgba(8,10,15,0.9) 42%, rgba(8,10,15,0.4) 68%, rgba(8,10,15,0) 88%); }
.hero-photo .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; }
.hero-photo .hero-inner > * { max-width: 560px; }
.hero-photo .hero-inner > h1 { max-width: 700px; }
.hero-photo h1 { margin: 0 0 20px; text-align: left; }
.hero-photo p { margin-left: 0; margin-right: 0; text-align: left; }
.hero-photo .hero-actions { justify-content: flex-start; }
.hero-photo .role-eyebrow { text-align: left; }
.hero-photo .hero-note { margin: 28px 0 0; }
.hero-photo .role-hero-free { margin: 16px 0 0; text-align: left; }
.benefits-after-hero { max-width: 840px; margin: 48px auto 8px; padding: 0 24px; }
.benefits-after-hero .hero-benefits { max-width: none; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin: 0; }
@media (max-width: 640px) {
  .hero-photo { min-height: 0; padding: 200px 0 40px; align-items: flex-end; }
  .hero-photo .hero-bg { height: 300px; object-position: 78% center; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(8,10,15,0.1) 0px, rgba(8,10,15,0.55) 150px, rgba(8,10,15,1) 290px); }
  .hero-photo .hero-inner { padding: 0 20px; }
  .benefits-after-hero .hero-benefits { grid-template-columns: 1fr; }
}

/* NEX-630: the sections the rail lists get room and a divider between them,
   so each one reads as its own block. */
main > [data-rail-label] { position: relative; padding-top: 88px; padding-bottom: 88px; margin-top: 0; margin-bottom: 0; }
main > [data-rail-label] ~ [data-rail-label]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1040px, calc(100% - 48px)); height: 1px; background: var(--color-border);
}
main > .pricing-cta[data-rail-label] { border-top: 0; }
/* Home's "Get started" heading leads straight into the two audience cards. */
main > .cta-header[data-rail-label] { padding-bottom: 24px; }
@media (max-width: 640px) {
  main > [data-rail-label] { padding-top: 56px; padding-bottom: 56px; }
  main > .cta-header[data-rail-label] { padding-bottom: 16px; }
}