/* 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;
}