/* DealQuest shared chrome.
 * Extracted verbatim from public/index.html's inline <style> so additional
 * pages render identically. index.html still carries its own inline copy and
 * is deliberately untouched -- migrating it to this file is a separate,
 * separately-testable change. The block is copied verbatim rather than
 * filtered, so rendering is guaranteed identical; that means it also carries
 * .form-wrap and .cta-final, which only the landing page uses today.
 */
  :root {
    --bone: #f4efe6;
    --bone-2: #ebe3d4;
    --bone-3: #e0d6c2;
    --ink: #1a1511;
    --ink-soft: #3a332c;
    --oxblood: #1a305c;
    --oxblood-deep: #0f1f3d;
    --navy: #1a305c;
    --mist: #7db3c2;
    --rule: rgba(26,21,17,0.18);
    --rule-soft: rgba(26,21,17,0.10);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bone);
    color: var(--ink);
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a { color: var(--navy); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }

  .shell { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
  .shell--narrow { max-width: 980px; }

  /* ========== MASTHEAD ========== */
  .masthead {
    border-bottom: 2px solid var(--ink);
    padding: 18px 0 16px;
    background: var(--bone);
  }
  .masthead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .brand {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .brand-mark {
    display: inline-block;
    width: 10px; height: 10px;
    background: var(--oxblood);
    border-radius: 50%;
    transform: translateY(-1px);
  }
  .brand em {
    font-style: normal;
    font-weight: 400;
    color: var(--oxblood);
    letter-spacing: 0.06em;
  }
  .mast-meta {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    gap: 28px;
    align-items: center;
  }
  .mast-meta .dot {
    width: 4px; height: 4px; background: var(--mist); border-radius: 50%;
    display: inline-block; margin-right: 8px; transform: translateY(-2px);
  }
  .mast-cta {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oxblood);
    border-bottom: 1px solid var(--oxblood);
    padding-bottom: 4px;
  }
  .mast-cta:hover { text-decoration: none; color: var(--oxblood-deep); border-color: var(--oxblood-deep);}

  /* tiny secondary bar */
  .kicker-bar {
    border-bottom: 1px solid var(--rule);
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 9px 0;
    background: var(--bone);
  }
  .kicker-bar .shell {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }
  .kicker-bar .vol { color: var(--oxblood); }

  /* ========== HERO ========== */
  .hero {
    padding: 72px 0 48px;
    border-bottom: 1px solid var(--rule);
    position: relative;
  }
  .hero-eyebrow {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .hero-eyebrow::before, .hero-eyebrow::after {
    content: "";
    display: inline-block;
    width: 36px; height: 1px;
    background: var(--oxblood);
  }
  .hero-title {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: clamp(48px, 7.5vw, 104px);
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-align: center;
    text-wrap: balance;
    margin-bottom: 28px;
  }
  .hero-title em {
    font-style: normal;
    font-weight: 300;
    color: var(--oxblood);
  }
  .hero-deck {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 22px;
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
    text-wrap: pretty;
  }
  .hero-deck strong {
    color: var(--ink);
    font-weight: 600;
  }

  /* Hero stats row — the focal point */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    margin-top: 40px;
  }
  .hero-stat {
    padding: 32px 24px 28px;
    border-right: 1px solid var(--rule);
    text-align: center;
    position: relative;
  }
  .hero-stat:last-child { border-right: none; }
  .hero-stat .num {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--oxblood);
    margin-bottom: 14px;
  }
  .hero-stat .num sup {
    font-size: 0.45em;
    font-weight: 500;
    vertical-align: super;
    color: var(--mist);
    letter-spacing: 0;
  }
  .hero-stat .label {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.45;
    max-width: 200px;
    margin: 0 auto;
  }

  .hero-cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 44px;
    flex-wrap: wrap;
  }

  .btn {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 18px 38px;
    border: 1.5px solid var(--oxblood);
    background: var(--oxblood);
    color: var(--bone);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .btn:hover {
    background: var(--oxblood-deep);
    border-color: var(--oxblood-deep);
    color: var(--bone);
    text-decoration: none;
  }
  .btn .arrow {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-style: italic;
    transition: transform 0.2s;
  }
  .btn:hover .arrow { transform: translate(3px, -3px); }

  .btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
  }
  .btn--ghost:hover {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
  }

  .hero-note {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
  }

  /* ========== SECTION SCAFFOLD ========== */
  section { padding: 96px 0; border-bottom: 1px solid var(--rule); }
  section:last-of-type { border-bottom: none; }

  .section-label {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--oxblood);
    font-weight: 600;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .section-label .num {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    color: var(--mist);
    letter-spacing: 0.12em;
  }
  .section-label .rule {
    flex: 1;
    height: 1px;
    background: var(--rule);
  }

  .section-title {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 4.6vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 24px;
    text-wrap: balance;
    max-width: 20ch;
  }
  .section-title em {
    font-style: normal;
    font-weight: 300;
    color: var(--oxblood);
  }
  .section-deck {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 58ch;
    text-wrap: pretty;
  }

  /* ========== ABOUT (two-column editorial) ========== */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 64px;
    align-items: start;
  }
  .about-lede {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--oxblood);
    padding-top: 8px;
    border-top: 3px solid var(--oxblood);
  }
  .about-body { columns: 2; column-gap: 48px; column-rule: 1px solid var(--rule); }
  .about-body p {
    font-size: 17.5px;
    line-height: 1.65;
    margin-bottom: 16px;
    break-inside: avoid-column;
  }
  .about-body p:first-child::first-letter {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 400;
    font-size: 72px;
    line-height: 0.85;
    float: left;
    padding: 10px 12px 0 0;
    color: var(--oxblood);
    letter-spacing: -0.02em;
  }
  .about-body strong { color: var(--ink); font-weight: 600; }

  .audience-split {
    margin-top: 72px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    border-top: 2px solid var(--ink);
    padding-top: 36px;
  }
  .audience-card .tag {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    color: var(--oxblood);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .audience-card .tag::before {
    content: "";
    width: 28px; height: 2px;
    background: var(--mist);
  }
  .audience-card h3 {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--ink);
  }
  .audience-card p {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* ========== TOPICS ========== */
  .topics-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-bottom: 56px;
    align-items: end;
  }
  .topics-list {
    border-top: 2px solid var(--ink);
  }
  .topic {
    display: grid;
    grid-template-columns: 80px 1fr 2fr;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
  }
  .topic .no {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    color: var(--mist);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-top: 10px;
  }
  .topic h4 {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .topic p {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 60ch;
  }
  .topic:hover { background: var(--bone-2); }
  .topic:hover h4 { color: var(--oxblood); }

  /* ========== FIT vs NOT FIT ========== */
  .fit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--ink);
    border: 2px solid var(--ink);
    margin-top: 56px;
  }
  .fit-col {
    padding: 44px 40px;
    background: var(--bone);
  }
  .fit-col--no {
    background: var(--ink);
    color: var(--bone);
  }
  .fit-col .col-label {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 600;
  }
  .fit-col--yes .col-label { color: var(--oxblood); }
  .fit-col--no .col-label { color: var(--mist); }

  .fit-col h3 {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin-bottom: 18px;
  }
  .fit-col--yes h3 em { font-style: normal; color: var(--oxblood); font-weight: 300; }
  .fit-col--no h3 em { font-style: normal; color: var(--mist); font-weight: 300; }

  .fit-col .intro {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
  .fit-col--no .intro { border-color: rgba(244,239,230,0.18); color: #d8cfbe; }

  .fit-list { list-style: none; }
  .fit-list li {
    padding: 16px 0 16px 32px;
    position: relative;
    font-size: 16.5px;
    line-height: 1.5;
    border-bottom: 1px solid var(--rule-soft);
  }
  .fit-col--no .fit-list li { border-color: rgba(244,239,230,0.10); color: #e5dccb; }
  .fit-list li:last-child { border-bottom: none; }
  .fit-list li::before {
    position: absolute;
    left: 0;
    top: 16px;
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-size: 18px;
    font-weight: 500;
  }
  .fit-col--yes .fit-list li::before {
    content: "+";
    color: var(--oxblood);
    font-style: normal;
    font-weight: 400;
  }
  .fit-col--no .fit-list li::before {
    content: "×";
    color: var(--mist);
    font-size: 22px;
    top: 14px;
  }

  /* ========== BENEFITS (what guests receive) ========== */
  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 56px;
    border-top: 2px solid var(--ink);
    border-left: 1px solid var(--rule);
  }
  .benefit {
    padding: 36px 32px 40px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--bone);
    min-height: 240px;
    display: flex;
    flex-direction: column;
  }
  .benefit .no {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: var(--mist);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .benefit h4 {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: 0;
  }
  .benefit p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .benefit--feature {
    background: var(--oxblood);
    color: var(--bone);
    grid-column: span 1;
  }
  .benefit--feature .no { color: var(--mist); }
  .benefit--feature h4 { color: var(--bone); }
  .benefit--feature p { color: #e9ddd1; }

  /* ========== HOST BIO ========== */
  .host-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 72px;
    align-items: start;
    margin-top: 40px;
  }
  .host-portrait {
    aspect-ratio: 4/5;
    border: 1.5px solid var(--ink);
    position: relative;
    overflow: hidden;
    background: var(--bone-2);
  }
  .host-portrait picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .host-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.02) saturate(0.95);
  }
  .host-portrait::after {
    content: "Corey Kupfer · Host";
    position: absolute;
    left: 16px;
    bottom: 16px;
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone);
    background: rgba(26,21,17,0.72);
    padding: 6px 12px;
    backdrop-filter: blur(4px);
  }
  .host-info .role {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    color: var(--oxblood);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .host-info h3 {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 20px;
  }
  .host-info .credentials {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 14px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 26px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  .host-info .credentials span::after { content: "·"; margin-left: 20px; color: var(--mist); }
  .host-info .credentials span:last-child::after { display: none; }
  .host-info p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 18px;
    color: var(--ink-soft);
  }
  .host-info p strong { color: var(--ink); font-weight: 600; }
  .host-info .pull {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.35;
    color: var(--oxblood);
    border-left: 3px solid var(--mist);
    padding: 6px 0 6px 22px;
    margin: 28px 0;
    letter-spacing: -0.005em;
  }

  /* ========== FAQ ========== */
  .faq-list {
    border-top: 2px solid var(--ink);
    margin-top: 48px;
  }
  .faq-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 32px;
    padding: 36px 0;
    border-bottom: 1px solid var(--rule);
  }
  .faq-item .q-no {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: var(--mist);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-top: 8px;
  }
  .faq-item h4 {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: 23px;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: 0;
  }
  .faq-item p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 68ch;
  }
  .faq-item p strong { color: var(--ink); font-weight: 600; }

  /* ========== FINAL CTA ========== */
  .cta-final {
    background: var(--ink);
    color: var(--bone);
    padding: 120px 0 110px;
    text-align: center;
    border-bottom: none;
    position: relative;
    overflow: hidden;
  }
  .cta-final::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(244,239,230,0.18);
    pointer-events: none;
  }
  .cta-final .eyebrow {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--mist);
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 28px;
  }
  .cta-final h2 {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: clamp(44px, 6vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin-bottom: 28px;
    text-wrap: balance;
  }
  .cta-final h2 em {
    font-style: normal;
    font-weight: 300;
    color: var(--mist);
  }
  .cta-final p {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 21px;
    line-height: 1.5;
    max-width: 640px;
    margin: 0 auto 44px;
    color: #d8cfbe;
    text-wrap: pretty;
  }
  .cta-final .btn-final {
    background: var(--mist);
    border-color: var(--mist);
    color: var(--ink);
    font-size: 19px;
    padding: 22px 46px;
  }
  .cta-final .btn-final:hover {
    background: var(--bone);
    border-color: var(--bone);
    color: var(--ink);
  }
  .cta-final .footnote {
    margin-top: 32px;
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(244,239,230,0.55);
  }
  .form-wrap {
    max-width: 720px;
    margin: 40px auto 0;
    background: var(--bone);
    color: var(--ink);
    padding: 40px 44px;
    text-align: left;
    position: relative;
    border: 1px solid rgba(244,239,230,0.18);
  }
  .form-wrap::before {
    content: "Guest Application";
    display: block;
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--oxblood);
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
  .form-wrap input,
  .form-wrap textarea,
  .form-wrap select {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    color: var(--ink) !important;
    background: var(--bone-2) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
  }
  .form-wrap input:focus,
  .form-wrap textarea:focus {
    outline: none !important;
    border-color: var(--oxblood) !important;
  }
  .form-wrap label {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
  }
  .form-wrap button,
  .form-wrap input[type="submit"] {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background: var(--oxblood) !important;
    color: var(--bone) !important;
    border: 1.5px solid var(--oxblood) !important;
    border-radius: 0 !important;
    padding: 16px 32px !important;
    cursor: pointer !important;
  }
  .form-wrap button:hover,
  .form-wrap input[type="submit"]:hover {
    background: var(--oxblood-deep) !important;
  }

  /* ========== FOOTER ========== */
  footer {
    background: var(--bone);
    padding: 56px 0 40px;
    border-top: 1px solid var(--rule);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rule);
  }
  .footer-top h5 {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 16px;
    font-weight: 600;
  }
  .footer-top p, .footer-top li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .footer-top ul { list-style: none; }
  .footer-top li { margin-bottom: 6px; }
  .footer-colophon {
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-style: normal;
    font-weight: 300;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.6;
    max-width: 52ch;
  }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* responsive */
  @media (max-width: 900px) {
    .shell { padding: 0 24px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--ink); }
    .hero-stat:nth-child(2) { border-right: none; }
    .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
    .about-grid, .topics-intro, .fit-grid, .host-grid, .audience-split, .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .about-body { columns: 1; }
    .benefits-grid { grid-template-columns: 1fr; }
    .topic { grid-template-columns: 50px 1fr; }
    .topic p { grid-column: 1 / -1; margin-top: 6px; }
    .faq-item { grid-template-columns: 1fr; gap: 8px; }
    section { padding: 64px 0; }
  }

  /* Small-screen masthead.
   * The 900px block above never wraps .masthead-inner, so below roughly 640px
   * its three flex children (brand, meta, CTA) overflow the viewport and the
   * page scrolls sideways. Measured at 390px: 533px of content in a 390px
   * viewport, on this page and on the landing page alike. Fixed here for
   * pages using this stylesheet; public/index.html carries its own inline
   * copy and still has the bug. */

  /* Navigation and link affordances.
     The pillar pages shipped reachable only from topic headings that inherited
     the global `a` style -- navy, no underline -- against near-black headings.
     Two shades of dark apart, with no arrow and no hover cue, they did not read
     as links at all, and the site had no nav of any kind. */
  .mast-nav {
    font-family: 'Futura', 'Futura PT', 'Jost', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 4px;
  }
  .mast-nav:hover { color: var(--oxblood); border-color: var(--oxblood); text-decoration: none; }
  .topic h4 a { color: inherit; border-bottom: 2px solid var(--rule); }
  .topic h4 a:hover { color: var(--oxblood); border-color: var(--oxblood); text-decoration: none; }
  .topic .go {
    display: inline-block;
    margin-top: 8px;
    font-family: 'Europa', 'Futura', 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oxblood);
    border-bottom: 1px solid var(--oxblood);
    white-space: nowrap;
  }
  .topic .go:hover { color: var(--oxblood-deep); border-color: var(--oxblood-deep); text-decoration: none; }
  .guides { list-style: none; padding: 0; margin: 1.4rem 0 0;
            display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 2rem; }
  .guides li { border-bottom: 1px solid var(--rule-soft); padding: .7rem 0;
               display: flex; justify-content: space-between; gap: 1rem; }
  .guides .c { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

  @media (max-width: 640px) {
    .mast-nav { font-size: 11px; letter-spacing: 0.1em; }
    .guides { grid-template-columns: 1fr; }
    .masthead-inner { flex-wrap: wrap; gap: 10px 16px; }
    .brand { font-size: 17px; }
    .mast-meta { order: 3; width: 100%; gap: 18px; font-size: 11px; letter-spacing: 0.12em; }
    .mast-cta { font-size: 11px; letter-spacing: 0.1em; }
    .kicker-bar .shell { flex-wrap: wrap; gap: 2px 12px; }
    /* Grid children default to min-width:auto and so refuse to shrink below
       their longest word. Below ~340px that pushed .hero-stats wider than the
       viewport (344px of content at 320px). */
    .hero-stat { padding: 24px 12px 20px; min-width: 0; }
    .hero-stat .label { overflow-wrap: break-word; }
  }