/* Afterset marketing site — fixes and additions layered on top of
   docs/design/afterset-v1/styles.css (kept byte-identical at
   public/css/afterset-marketing.css, aside from the hero image path —
   see that file's own history). Everything here is new: things the
   design package didn't build at all (a working mobile menu — fix #5),
   or new page furniture the deep 14-page site structure needs that a
   6-page click-through prototype never had (breadcrumbs, a feature-page
   proof callout, tab accessibility). See docs/audits/afterset-port-report.md
   for why each of these exists. */

/* ---- Fix #5: mobile nav. Below 900px the original stylesheet hides
   `header nav` and adds nothing in its place — no menu button, no way to
   reach Features/Sell/Run/Know/Pricing/Sign in/Sign up free at all on a
   phone. This adds the missing control and panel. ---- */
.menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  padding: 10px 14px;
  font: 500 0.68rem "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-menu-panel,
.mobile-menu-panel[hidden] {
  display: none;
}
@media (max-width: 900px) {
  .menu-btn {
    display: inline-block;
  }
  .mobile-menu-panel:not([hidden]) {
    display: block;
    position: fixed;
    inset: 78px 0 0 0;
    z-index: 9;
    background: rgba(11, 9, 9, 0.98);
    backdrop-filter: blur(14px);
    padding: 20px 6vw 40px;
    overflow-y: auto;
  }
  .mobile-menu-panel nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-menu-panel nav a {
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  header.solid .account-actions {
    display: none;
  }
}

/* ---- Fix #6: consistent header includes the account actions row even
   at the width where the .menu-btn appears — the design's own
   `.account-actions` never had a mobile treatment beyond being crushed
   next to the hamburger; hiding it here (in favor of Sign in/Sign up
   free living inside the mobile panel above) keeps the header from
   overflowing at in-between widths. ---- */

/* ---- Breadcrumbs on feature pages (kept, per the build instruction —
   the design package has no notion of a breadcrumb at all, since it
   never had a third-level page). ---- */
.crumbs {
  font: 400 0.66rem "DM Mono", monospace;
  letter-spacing: 0.08em;
  color: #8d837d;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.crumbs a {
  color: #8d837d;
  text-decoration: none;
}
.crumbs a:hover {
  color: #d7cfc5;
}

/* ---- Feature-page "proof" callout. F.proof (docs/audits/afterset-port-report.md
   explains the source) is a single sentence, not the three-column grid
   .proof-band was built for — this is a lighter, single-line treatment
   reusing the same accent color instead of forcing that sentence into a
   grid it doesn't fit. ---- */
.fp-proof {
  border-left: 3px solid var(--blood);
  background: #121010;
  padding: 22px 26px;
  margin-top: 40px;
  font: 500 1.15rem/1.5 "Playfair Display", serif;
  color: #d4cec7;
  max-width: 720px;
}

/* ---- Fix #10: accessible tabs (home page's Sell/Run/Know showcase).
   Visual states are unchanged (.tab/.tab.active already existed) — this
   only adds a focus outline, since the design had none for keyboard
   users tabbing through. ---- */
.tab:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

/* ---- Feature-page "next feature" grid reuses .next-page, already
   correctly styled — no change needed there. ---- */

/* ---- "Sample venue" tags on the illustrative stat cards (metrics-card,
   the promoter leaderboard) — these numbers ($126,400, 578 names, etc.)
   are a fictional demo venue's data, not this visitor's or anyone's real
   numbers, and the tag says so wherever they appear. ---- */
.sample-tag {
  display: inline-block;
  font: 500 0.58rem "DM Mono", monospace;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 3px 7px;
  vertical-align: middle;
  text-transform: uppercase;
}
h2 .sample-tag {
  font-size: 0.32em;
  vertical-align: super;
  margin-left: 10px;
}

/* ---- Feature-page plan note ("Included on Host" / "Included on every
   plan") — new, since the design package's feature-page template never
   stated which plan a feature ships on. ---- */
.hero-note {
  margin-top: 18px;
}
.hero-note span {
  display: inline-block;
  font: 500 0.66rem "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 6px 10px;
}

/* ---- Real-demo disclaimer, inserted next to every .js-demo trigger by
   public/js/afterset-marketing.js — see that file's own comment. ---- */
.demo-disclaimer {
  display: block;
  width: 100%;
  margin-top: 12px;
  font: 400 0.6rem "DM Mono", monospace;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---- Footer restructure: the 8 feature pages shipped with no inbound
   link from any hub page or the footer, reachable only via sitemap.xml
   and each other's own next-feature chain. `buildFooter()` now emits a
   `.footer-main` (the original 4-column content, unchanged) plus a new
   `.footer-features` row underneath — the base stylesheet's bare
   `footer{...}` grid only ever expected those original 4 direct
   children, so it's overridden here to stack the two blocks instead. ---- */
footer {
  /* Bottom padding ≥96px on every width — clears the floating "Ask
     Afterset" launcher (public/assistant-widget.js, bottom:20px, ~68px
     tall including its shadow) so the footer's own Features column links
     are never sitting under it. */
  padding: 45px 5vw 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-top: 1px solid var(--line);
  color: #9d958e;
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.footer-main div {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 400 0.72rem "DM Mono", monospace;
}
.footer-features a {
  color: inherit;
  text-decoration: none;
}
.footer-features a:hover {
  color: #fff;
}
.footer-features .label {
  width: 100%;
  color: #726a64;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .footer-main {
    grid-template-columns: 1fr;
  }
}

/* ---- Hub-page "Go deeper" links (/sell, /run, /know) down to their own
   feature pages — added for the same reason as the footer restructure
   above: these pages had zero inbound links otherwise. ---- */
.hub-feature-links {
  padding: 60px 7vw 0;
}
.hub-feature-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}
.hub-feature-links-grid a {
  border: 1px solid var(--line);
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
  font: 500 0.78rem "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hub-feature-links-grid a span {
  color: var(--red);
}
.hub-feature-links-grid a:hover {
  border-color: var(--red);
}

/* ---- /features overview: each Sell/Run/Know block's own real links
   down to its feature pages — the existing `<ul><li>` capability pills
   in that page's content describe capabilities in prose, not all of
   which map 1:1 to a real slug, so this is a separate, explicit link
   row rather than converting the pills into links. ---- */
.feature-route-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 18px;
  margin-top: 4px;
}
.feature-route-links a {
  color: var(--red);
  text-decoration: none;
  font: 400 0.68rem "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.feature-route-links a:hover {
  text-decoration: underline;
}
/* The base stylesheet's own .feature-route:last-child border-bottom no
   longer matches once each anchor is wrapped in .feature-route-block
   (it's never literally the last child of anything now) — restated here
   on the wrapper instead, so the list still closes with a bottom rule. */
.feature-route-block:last-child .feature-route-links {
  border-bottom: 1px solid var(--line);
  padding-bottom: 40px;
}

/* "Request access" form (/request-access) — see "Marketing site goes
   public at afterset.ai" in CLAUDE.md. Reuses the page's existing dark
   theme/tokens rather than inventing a second visual language for one
   page.

   --go is a new token, not a pre-existing one -- there was no "go"/
   success color variable anywhere in this site's CSS before the
   confirmation panel below needed one. Set to #7fd99a, the exact color
   the inline success text already used (the former #raStatus.ra-success
   rule, removed below now that a real submission renders the panel
   instead of that text) -- the same color, promoted to a reusable token
   rather than a second, independently-chosen green. */
:root { --go: #7fd99a; }
.request-access-section { padding: 0 7vw 130px; max-width: 560px; }
/* .ra-card gives the form (and, after a submission, the confirmation
   panel in the exact same spot) the same bordered/elevated treatment
   every other card-shaped component on this site already uses
   (.metrics-card/.door-card/.leaderboard, afterset-marketing.css) --
   "the card keeps its shape" on a real submission is only true because
   this wraps both states in one unchanging container. */
.ra-card { border: 1px solid var(--line); background: #121010; padding: 38px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3); }
.request-access-section form { display: flex; flex-direction: column; gap: 22px; }
/* [hidden]'s own UA-stylesheet display:none is silently outranked by the
   rule just above (same hazard class documented at length in CLAUDE.md's
   "Any re-render of a container holding unsaved input..." — a display
   declared in an author stylesheet beats the UA default regardless of
   [hidden] being present) — restated here, at higher specificity, so
   hiding the form on a successful submission actually works. */
#requestAccessForm[hidden] { display: none; }
.request-access-section .field { display: flex; flex-direction: column; gap: 8px; }
.request-access-section label { font: 500 0.72rem "DM Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #aaa29a; }
.request-access-section label span { text-transform: none; letter-spacing: normal; color: #726a64; }
.request-access-section input {
  background: #15120f;
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 14px 16px;
  font: 400 1rem Manrope, sans-serif;
}
.request-access-section input:focus { outline: 1px solid var(--red); }
.request-access-section button.primary { align-self: flex-start; }
/* Honeypot — present in the DOM for a bot's generic form-filler to find,
   invisible (and unreachable by keyboard/screen reader) to a real
   visitor. position:absolute off-screen, not display:none — some
   unsophisticated bots specifically skip display:none fields. */
.request-access-section .hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#raStatus { font: 500 0.85rem Manrope, sans-serif; margin: 0; }
#raStatus.ra-error { color: #e08a8a; }
/* The post-submission state — same card, swapped content, no
   navigation. Same [hidden]-outranked-by-author-display hazard as
   #requestAccessForm above, restated here for the same reason. */
#raConfirmation[hidden] { display: none; }
.ra-confirmation { text-align: center; padding: 10px 0; }
.ra-confirm-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 24px;
  border: 1px solid var(--go);
  border-radius: 50%;
  color: var(--go);
  font-size: 1.4rem;
}
.ra-confirmation h2 { font: 500 1.9rem "Playfair Display", serif; margin: 0 0 14px; }
.ra-confirmation p { color: var(--muted); line-height: 1.7; max-width: 440px; margin: 0 auto; }

/* .primary (afterset-marketing.css) has no text-decoration rule of its
   own -- every OTHER <a class="primary"> on this site already pairs it
   with a second, context-specific class that supplies text-decoration:
   none (.price-cta, .choice-cta, install-strip's own `a{text-decoration:
   none}`), because .primary is applied to real <button> elements more
   often than anchors, and buttons never get the browser's own link
   underline to begin with. The header's "Book a demo" link is .primary
   on a bare <a> with no such sibling class, which is exactly why it
   rendered correctly in every other dimension (background, padding,
   uppercase DM Mono) but kept the default underline. Not a new visual
   design -- replicating the one property every other anchor-based
   .primary usage on this site already gets from a sibling class. */
.request-access-link {
  text-decoration: none;
}