/* Wayforge public site styles, shared by every page in site/.
   Part 1 mirrors the app (app/app/globals.css): same tokens, header, buttons, cards, forms, trade cards, facts
   and career ladder, with the same class names, so moving from this site to the app at launch feels like
   the same product. If you change one of these in the app, change it here too.
   Part 2 adds what only the marketing pages need (hero, sections, FAQ, waitlist). Brand rules: brand/BRAND.md */

/* ===================== Part 1: shared with the app ===================== */
:root {
  --wf-black: #0F0E0C; --wf-iron: #1C1A16; --wf-slate: #3A352B;
  --wf-gold: #C9A24A; --wf-gold-light: #E0C27A; --wf-gold-deep: #7A5C17;
  --wf-cream: #F3EEE3; --wf-white: #FFFFFF; --wf-ash: #A8A195; --wf-ash-dark: #6E685D;
  --wf-font-display: "Cinzel", Georgia, serif;
  --wf-font-body: "Source Sans 3", system-ui, sans-serif;
  --radius: 12px;
  --max: 1100px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  background: var(--wf-black); color: var(--wf-cream);
  font: 400 17px/1.6 var(--wf-font-body); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--wf-gold); }
a:hover { color: var(--wf-gold-light); }
h1, h2, h3 { font-family: var(--wf-font-display); color: var(--wf-gold); margin: 0 0 12px; letter-spacing: .08em; line-height: 1.2; }
h1 { font-size: clamp(26px, 5vw, 34px); }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 14px; }
.muted { color: var(--wf-ash); }
.small { font-size: 14px; }
.eyebrow { display: block; font: 600 13px/1.4 var(--wf-font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--wf-gold); margin-bottom: 10px; }
.lead { font-size: 20px; color: var(--wf-cream); max-width: 640px; }
.stack > * + * { margin-top: 16px; }
.card { background: var(--wf-iron); border: 1px solid var(--wf-slate); border-radius: var(--radius); padding: 28px; }
.inline { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--wf-gold-light); outline-offset: 3px; }

/* Header */
.top { background: var(--wf-iron); border-bottom: 1px solid var(--wf-slate); position: sticky; top: 0; z-index: 20; }
.top .inner { max-width: var(--max); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top .logo img { height: 40px; width: auto; display: block; }
.topnav { display: flex; align-items: center; gap: 16px; font: 600 13px/1 var(--wf-font-display); letter-spacing: .12em; text-transform: uppercase; }
.topnav a { color: var(--wf-cream); text-decoration: none; }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--wf-gold); }
.nav-links { display: flex; align-items: center; gap: 16px; }
.badge {
  font: 600 11px/1 var(--wf-font-display); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--wf-gold); color: var(--wf-gold); border-radius: 999px; padding: 6px 10px;
}
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--wf-slate); border-radius: 8px; color: var(--wf-cream); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--wf-gold); color: var(--wf-gold); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--wf-iron); border-bottom: 1px solid var(--wf-slate); padding: 8px 16px 16px; display: grid; }
.menu-panel a { display: block; padding: 14px 0; border-bottom: 1px solid var(--wf-slate); color: var(--wf-cream); text-decoration: none; }
.menu-panel .muted { padding-top: 12px; text-transform: none; letter-spacing: 0; font-family: var(--wf-font-body); font-weight: 400; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--wf-gold); color: var(--wf-black); border: 1px solid var(--wf-gold); border-radius: 6px;
  padding: 13px 22px; font: 700 13px/1.2 var(--wf-font-display); letter-spacing: .12em; text-transform: uppercase;
}
.btn:hover { background: var(--wf-gold-light); border-color: var(--wf-gold-light); color: var(--wf-black); }
.btn.ghost { background: transparent; color: var(--wf-gold); }
.btn.ghost:hover { color: var(--wf-gold-light); border-color: var(--wf-gold-light); background: transparent; }
.btn.block { width: 100%; }
.btn.small-btn { padding: 9px 14px; font-size: 12px; white-space: nowrap; color: var(--wf-black); }
.btn.big { padding: 17px 28px; font-size: 14px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--wf-gold); font: inherit; cursor: pointer; text-decoration: underline; }

/* Forms (same as the app's sign-up) */
label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 14px; }
label .hint { display: block; font-weight: 400; color: var(--wf-ash); font-size: 13px; }
input[type=text], input[type=email], select {
  display: block; width: 100%; margin-top: 6px; padding: 12px 13px; border-radius: 8px;
  border: 1px solid var(--wf-slate); background: var(--wf-black); color: var(--wf-cream); font: 400 16px var(--wf-font-body);
}
input:focus, select:focus { outline: 2px solid var(--wf-gold); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--wf-gold); flex: none; }
.choices { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--wf-slate); border-radius: 10px; font-weight: 400; cursor: pointer; margin: 0; }
.choice:has(input:checked) { border-color: var(--wf-gold); background: #221d12; }
.choice input { margin-top: 5px; accent-color: var(--wf-gold); }
.choice b { display: block; color: var(--wf-cream); }
.error { border: 1px solid #b3261e; background: #2a1311; color: #f2b8b5; border-radius: 8px; padding: 12px 14px; margin: 12px 0 0; }
.notice { border: 1px solid var(--wf-slate); background: #221d12; border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.notice[role="status"] { border-color: #3f6b3a; background: #17231a; color: #cfe8cb; }

/* Trade cards and facts (the app's trade library) */
.trade-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.trade-card { display: flex; flex-direction: column; gap: 8px; height: 100%; background: var(--wf-iron); border: 1px solid var(--wf-slate); border-radius: var(--radius); padding: 24px; color: var(--wf-cream); text-decoration: none; }
.trade-card:hover { border-color: var(--wf-gold); color: var(--wf-cream); }
.trade-card h3 { color: var(--wf-gold); margin: 0; font-size: 20px; }
.trade-card p { margin: 0; color: var(--wf-ash); }
.trade-card .stat span { color: var(--wf-cream); font-weight: 600; }
.trade-card .more { margin-top: auto; color: var(--wf-gold); font-weight: 600; }
.trade-grid .featured .trade-card { border-color: var(--wf-gold-deep); background: #1f1a10; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.fact { background: var(--wf-iron); border: 1px solid var(--wf-slate); border-radius: 10px; padding: 14px 16px; }
.fact dt { color: var(--wf-ash); font-size: 14px; }
.fact dd { margin: 4px 0 0; color: var(--wf-cream); font-size: 20px; font-weight: 600; }
.fact dd.source { font-size: 12px; font-weight: 400; color: var(--wf-ash); }
.bullets { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Career ladder (the app's My Path) */
.ladder { list-style: none; margin: 24px 0; padding: 0; position: relative; }
.ladder::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--wf-slate); }
.rung { position: relative; padding: 0 0 22px 64px; }
.rung .node {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font: 700 16px var(--wf-font-display);
  background: var(--wf-black); border: 2px solid var(--wf-slate); color: var(--wf-ash);
}
.rung.done .node { border-color: var(--wf-gold-deep); color: var(--wf-gold); }
.rung.current .node { background: var(--wf-gold); border-color: var(--wf-gold); color: var(--wf-black); }
.rung .body { padding-top: 8px; }
.rung h3 { margin-bottom: 4px; color: var(--wf-cream); }
.rung.current h3 { color: var(--wf-gold); }
.rung p { margin: 0; }
.ladder.compact { margin: 8px 0; }
.ladder.compact .rung { padding-bottom: 14px; }
.here { font: 600 11px/1 var(--wf-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--wf-gold); margin-left: 8px; }
.next { border: 1px solid var(--wf-gold); border-radius: var(--radius); padding: 20px; background: #1f1a10; }
.qty { color: var(--wf-gold); font-weight: 600; }
.bar { display: block; width: 100%; height: 8px; margin-top: 8px; accent-color: var(--wf-gold); }

/* Footer */
footer.bottom { border-top: 1px solid var(--wf-slate); color: var(--wf-ash); font-size: 14px; background: var(--wf-black); }
footer.bottom .inner { max-width: var(--max); margin: 0 auto; padding: 24px 16px; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
footer.bottom a { color: var(--wf-ash); text-decoration: none; }
footer.bottom a:hover { color: var(--wf-gold); }
footer.bottom nav { display: flex; gap: 8px 18px; flex-wrap: wrap; }

@media (max-width: 1060px) { .topnav .badge { display: none; } }
@media (max-width: 900px) {
  .topnav { gap: 10px; }
  .topnav .nav-links { display: none; }
  .menu { display: block; }
}

@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fact { padding: 10px 12px; }
  .fact dt { font-size: 12px; }
  .fact dd { font-size: 16px; }
  .trade-card { padding: 18px; }
}

/* ===================== Part 2: marketing pages only ===================== */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--wf-gold); color: var(--wf-black); padding: 10px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }
main { flex: 1; width: 100%; }
section { padding: 80px 0; }
section + section { border-top: 1px solid var(--wf-slate); }
section.alt { background: var(--wf-iron); }
section.alt .card, section.alt .trade-card, section.alt .fact { background: var(--wf-black); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2, .band h2 { font-size: clamp(24px, 3.4vw, 32px); }
.section-head p { color: var(--wf-ash); font-size: 19px; margin: 12px 0 0; }
.section-cta { margin-top: 36px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  border: 1px solid var(--wf-slate); background: var(--wf-iron); color: var(--wf-ash);
  border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.pill:hover { color: var(--wf-cream); border-color: var(--wf-gold-deep); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wf-gold); }

/* Home hero */
.hero { padding: 88px 0 96px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, 7vw, 76px); line-height: 1.05; letter-spacing: .1em; margin-bottom: 20px; }
.hero h1 span { display: block; color: var(--wf-cream); }
.hero .lead { color: var(--wf-ash); margin: 0 0 32px; }
.hero .lead b { color: var(--wf-cream); font-weight: 600; }
.assure { margin: 16px 0 0; font-size: 15px; color: var(--wf-ash); }
.preview { position: relative; }
.preview h3 { color: var(--wf-gold); }
.preview .next { margin-top: 4px; padding: 16px; }
.preview .next b { display: block; font-family: var(--wf-font-display); letter-spacing: .08em; color: var(--wf-gold); margin-bottom: 4px; }
.preview-note { font-size: 13px; color: var(--wf-ash); margin: 14px 0 0; text-align: right; }

/* Sub-page hero */
.page-hero { padding: 56px 0 64px; }
.page-hero h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.15; max-width: 900px; }
.page-hero .lead { color: var(--wf-ash); max-width: 760px; margin: 0 0 28px; }
.crumbs { font-size: 14px; color: var(--wf-ash); margin-bottom: 20px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--wf-slate); }
.crumbs a { color: var(--wf-ash); text-decoration: none; }
.crumbs a:hover { color: var(--wf-gold); }

/* What is Wayforge */
.definition { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.55; color: var(--wf-cream); max-width: 880px; margin: 0; }
.definition strong { color: var(--wf-gold); font-weight: 600; }

/* Cards grid */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cards .card { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.cards .card p { margin: 0; color: var(--wf-ash); }
.cards .card h3 { margin: 0; }
.cards a.card { text-decoration: none; color: var(--wf-cream); }
.cards a.card:hover { border-color: var(--wf-gold); }
.kicker { font: 600 11px/1.3 var(--wf-font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--wf-ash); }
.cards .more { margin-top: auto; padding-top: 6px; color: var(--wf-gold); font-weight: 600; }

/* Three steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: st; }
.steps li { counter-increment: st; background: var(--wf-iron); border: 1px solid var(--wf-slate); border-radius: var(--radius); padding: 24px; }
.steps li::before {
  content: counter(st); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px;
  border: 2px solid var(--wf-gold-deep); color: var(--wf-gold); font: 700 16px var(--wf-font-display);
}
.steps li:last-child::before { background: var(--wf-gold); border-color: var(--wf-gold); color: var(--wf-black); }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--wf-ash); }
.journey { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 28px 0 0; padding: 0; }
.journey li { border: 1px solid var(--wf-slate); border-radius: 999px; padding: 6px 14px; font: 600 12px/1.2 var(--wf-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--wf-ash); }
.journey li:last-child { border-color: var(--wf-gold); color: var(--wf-gold); }
.fineprint { font-size: 14px; color: var(--wf-ash); margin-top: 24px; max-width: 820px; }

/* Checks and two columns */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.two-col p { color: var(--wf-ash); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 28px; color: var(--wf-ash); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--wf-gold); font-weight: 700; }
.checks li b { color: var(--wf-cream); font-weight: 600; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat { border-top: 2px solid var(--wf-gold); padding-top: 20px; }
.stat .trade { font: 600 12px var(--wf-font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--wf-ash); }
.stat .big { font: 700 44px/1 var(--wf-font-display); color: var(--wf-gold); margin: 12px 0 10px; }
.stat p { margin: 0; color: var(--wf-ash); font-size: 16px; }
.stat p b { color: var(--wf-cream); font-weight: 600; }
.source { font-size: 14px; color: var(--wf-ash); margin-top: 28px; }

/* Call-to-action band */
.band { padding: 56px 0; }
.band .card { display: grid; grid-template-columns: 1.3fr auto; gap: 24px 40px; align-items: center; border-color: var(--wf-gold-deep); background: #1f1a10; }
.band h2 { margin: 0 0 6px; }
.band p { margin: 0; color: var(--wf-ash); }

/* Career guide pages */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.article h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 48px 0 14px; }
.article > article > h2:first-child { margin-top: 0; }
.article h3 { margin-top: 22px; }
.article p, .article .bullets { color: var(--wf-ash); }
.article .bullets li::marker { color: var(--wf-gold); }
.aside { position: sticky; top: 88px; }
.aside .btn { width: 100%; margin-bottom: 14px; }
.aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; }
.aside h3 { margin-top: 20px; }
.branch-group h3 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-cream); margin: 22px 0 10px; }
.branch-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.branch-group li { border-left: 2px solid var(--wf-gold-deep); padding-left: 14px; }
.branch-group li b { color: var(--wf-cream); font-weight: 600; }
.branch-group li span { display: block; color: var(--wf-ash); font-size: 16px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--wf-slate); border-radius: var(--radius); }
table.wages { width: 100%; border-collapse: collapse; font-size: 16px; }
table.wages caption { text-align: left; padding: 12px 14px; color: var(--wf-ash); font-size: 13px; caption-side: bottom; border-top: 1px solid var(--wf-slate); }
table.wages th, table.wages td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--wf-slate); }
table.wages thead th { font: 600 12px var(--wf-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--wf-ash); background: var(--wf-iron); }
table.wages .num { text-align: right; font-variant-numeric: tabular-nums; }
table.wages tr.us td { color: var(--wf-gold); font-weight: 600; }
.sources { font-size: 15px; color: var(--wf-ash); padding-left: 20px; display: grid; gap: 6px; }
.sources a { color: var(--wf-ash); }
.note { font-size: 15px; color: var(--wf-ash); border-left: 2px solid var(--wf-gold-deep); padding-left: 14px; margin: 20px 0 0; }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq-wrap .section-head { margin-bottom: 0; }
.faq { border-top: 1px solid var(--wf-slate); }
.faq details { border-bottom: 1px solid var(--wf-slate); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font-weight: 600; font-size: 18px; color: var(--wf-cream); }
.faq summary h3 { font: inherit; color: inherit; letter-spacing: 0; display: inline; margin: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--wf-font-body); color: var(--wf-gold); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--wf-gold-light); }
.faq details p { margin: -4px 0 20px; color: var(--wf-ash); max-width: 640px; }

/* Waitlist: the same card and fields as the app's sign-up, so the switch at launch is seamless */
.waitlist .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.waitlist h2 { font-size: clamp(28px, 4vw, 40px); }
.waitlist .perks { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 12px; }
.waitlist .perks li { position: relative; padding-left: 28px; color: var(--wf-ash); }
.waitlist .perks li::before { content: "✓"; position: absolute; left: 0; color: var(--wf-gold); font-weight: 700; }
.waitlist .perks b { color: var(--wf-cream); font-weight: 600; }
.waitlist .card { border-color: var(--wf-gold-deep); }
.waitlist .card h3 { font-size: 22px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.turnstile { display: flex; justify-content: center; margin: 4px 0 12px; }
.turnstile:empty { margin: 0; }
form .btn[disabled] { opacity: .6; cursor: wait; }
.form-msg:empty { display: none; }
.hidden { display: none !important; }
.hp { position: absolute; left: -9999px; }
.thanks:focus { outline: none; }
.share { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; }
.sticky-cta { display: none; }

@media (max-width: 900px) {
  .hero .wrap, .two-col, .faq-wrap, .waitlist .wrap, .article, .band .card { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 64px; }
  .hero .wrap { gap: 40px; }
  section { padding: 60px 0; }
  .page-hero { padding: 40px 0 48px; }
  .steps, .stats { grid-template-columns: 1fr; }
  .aside { position: static; }
  .sticky-cta {
    display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30;
    padding: 16px; transform: translateY(140%); transition: transform .25s ease; box-shadow: 0 0 0 4px var(--wf-black);
  }
  .sticky-cta.show { transform: none; }
  body:has(.sticky-cta) footer.bottom { padding-bottom: 88px; }
}
@media (max-width: 520px) {
  .row { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .hero h1 { letter-spacing: .06em; }
  .top .logo img { height: 30px; }
  .top .inner { gap: 8px; }
  .topnav { gap: 8px; }
  .btn.small-btn { padding: 9px 10px; font-size: 11px; letter-spacing: .06em; }
}
.m-0 { margin: 0 !important; }