/*
 * BidRebel Landing Page styles (LAND-S2)
 * v3.1 "Editorial Luxury" - hand-written static bundle, no build step.
 *
 * Token block ported from the v3.1 design system source:
 *   BidRebel/design/design_handoff_bidrebel_v3.1/design_system/colors_and_type.css
 * Values copied in directly (NOT @import-ed) so the bundle is self-contained
 * on S3 / CloudFront and does not depend on a file that will not ship.
 *
 * Playfair Display self-hosts from assets/fonts/ via @font-face below.
 * DM Sans + JetBrains Mono load from Google Fonts (spec section 1).
 */

/* ─── FONTS ─────────────────────────────────────────── */
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'),
       url('assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── TOKENS (ported from v3.1 colors_and_type.css :root) ─── */
:root {
  /* Primary Brand */
  --rebel-red:         #DB1414;
  --power-black:       #1A1A1A;

  /* Luxury Accent (reserved, NOT used on this page) */
  --luxury-gold:       #C8A951;

  /* Dark Surfaces */
  --deep-charcoal:     #2D2D2D;

  /* Neutral / Light */
  --ivory-warm:        #F5F1E8;
  --ivory-mid:         #EDE8DB;
  --stone-gray:        #6B6560;
  --white:             #FFFFFF;

  /* State Colors */
  --rebel-red-hover:   #BF1010;
  --rebel-red-press:   #A50D0D;

  /* Foreground / Text on light */
  --fg-primary:        var(--power-black);
  --fg-secondary:      var(--deep-charcoal);
  --fg-tertiary:       var(--stone-gray);

  /* Foreground / Text on dark (audited marketing values, spec section 1) */
  --fg-primary-dark:   #F5F1E8;   /* ivory primary on dark, ~15.3:1 */
  --fg-secondary-dark: #C7C2BA;   /* secondary on dark, ~9.6:1 */
  --fg-tertiary-dark:  #9A938B;   /* muted on dark, ~5.4:1 */
  --fg-error-dark:     #FF6B6B;   /* red TEXT on dark, ~5.4:1 */

  /* Red TEXT colors (NOTE A): press-red on light, lightened on dark */
  --red-text-light:    #A50D0D;   /* red text on ivory, 8.6:1 */
  --red-text-dark:     #FF6B6B;   /* red text on power-black, 5.4:1 */

  /* Borders */
  --input-border:      #827D78;   /* light-theme input boundary, clears 3:1 on ivory AND white (NOTE B) */
  --input-border-dark: #8C8782;
  --hairline:          rgba(26,26,26,0.10);
  --hairline-dark:     rgba(245,241,232,0.14);

  /* Status */
  --status-success:    #2E7D4F;
  --status-success-strong: #256B43;
  --status-error:      #DB1414;

  /* Focus ring */
  --focus-ring:        #DB1414;
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* Font Families */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3rem;
  --text-5xl:   4rem;
  --text-hero:  clamp(2.75rem, 9vw, 8rem);

  /* Font Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.12em;
  --tracking-display:  0.18em;

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Radius */
  --radius-pill: 999px;

  /* Shadow (rare) */
  --shadow-sm:  0 1px 3px rgba(26,26,26,0.10);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-base: 200ms;
}

/* ─── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  background: var(--ivory-warm);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rebel-red);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  z-index: 200;
  font-weight: var(--weight-semibold);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ─── FOCUS-VISIBLE (ported verbatim from token file) ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ─── REDUCED MOTION (ported verbatim from token file) ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── SHARED PRIMITIVES ─────────────────────────────── */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-20);
  padding-right: var(--space-20);
}
.section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}
.section--dark   { background: var(--power-black); color: var(--fg-primary-dark); }
.section--ivory  { background: var(--ivory-warm); }
.section--mid    { background: var(--ivory-mid); }

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: 1;
  color: var(--red-text-light);
  margin-bottom: var(--space-4);
}
.section--dark .overline { color: var(--red-text-dark); }

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-primary);
}
.section--dark h2 { color: var(--fg-primary-dark); }

.intro {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  max-width: 680px;
  margin-top: var(--space-4);
}
.section--dark .intro { color: var(--fg-secondary-dark); }

.divider-red {
  width: 48px;
  height: 3px;
  background: var(--rebel-red);
  border: none;
  margin: var(--space-4) 0 var(--space-6);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.btn--primary {
  background: var(--rebel-red);
  color: var(--white);
  border-color: var(--rebel-red);
}
.btn--primary:hover  { background: var(--rebel-red-hover); border-color: var(--rebel-red-hover); }
.btn--primary:active { background: var(--rebel-red-press); border-color: var(--rebel-red-press); }
.btn--ghost {
  background: transparent;
  color: var(--fg-primary-dark);
  border-color: var(--fg-primary-dark);
}
.btn--ghost:hover { background: var(--fg-primary-dark); color: var(--power-black); }
.btn--full { width: 100%; }

/* ─── HEADER ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--power-black);
  border-bottom: 1px solid var(--hairline-dark);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.header-logo img { height: 28px; width: auto; }
.nav-desktop { display: flex; align-items: center; gap: var(--space-8); }
.nav-desktop ul { display: flex; gap: var(--space-6); }
.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivory-warm);
  padding: var(--space-2) 0;
}
.nav-link:hover { color: var(--white); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--hairline-dark);
  border-radius: 0;
  color: var(--ivory-warm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

#mobile-nav { display: none; }

/* ─── HERO ──────────────────────────────────────────── */
.hero { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.hero-inner { max-width: 780px; }
.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary-dark);
  margin: var(--space-4) 0 var(--space-6);
}
.hero-headline em { font-style: italic; font-weight: var(--weight-black); }
.hero-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary-dark);
  max-width: 620px;
  margin-bottom: var(--space-8);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.trust-strip {
  font-size: var(--text-xs);
  color: var(--fg-tertiary-dark);
  letter-spacing: var(--tracking-wide);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * {
    animation: fade-up var(--duration-base) var(--ease-standard) both;
  }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── HOW IT WORKS ──────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.step {
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: var(--space-8);
  background: transparent;
}
.step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--rebel-red);
  display: block;
  margin-bottom: var(--space-4);
}
.step h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--power-black);
  margin-bottom: var(--space-3);
}
.step p { font-size: var(--text-base); color: var(--fg-secondary); }

/* ─── WHY / CARD GRIDS ──────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.card {
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: var(--space-8);
}
.card .tick {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--rebel-red);
  margin-bottom: var(--space-5);
}
.card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--power-black);
  margin-bottom: var(--space-3);
}
.card p { font-size: var(--text-base); color: var(--fg-secondary); }

/* ─── FOR CONTRACTORS (dark) ────────────────────────── */
.contractors-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-top: var(--space-12);
  align-items: start;
}
.contractors-lead p { color: var(--fg-secondary-dark); font-size: var(--text-md); }
.contractors-cta { margin-top: var(--space-8); }
.contractors-cta .note {
  color: var(--fg-tertiary-dark);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.benefit {
  border: 1px solid var(--hairline-dark);
  border-radius: 0;
  padding: var(--space-6);
}
.benefit .tick { display: block; width: 24px; height: 3px; background: var(--red-text-dark); margin-bottom: var(--space-4); }
.benefit h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary-dark);
  margin-bottom: var(--space-2);
}
.benefit p { font-size: var(--text-sm); color: var(--fg-secondary-dark); }

/* ─── ABOUT ─────────────────────────────────────────── */
.about-body { max-width: 680px; margin-top: var(--space-8); }
.about-body p { color: var(--fg-secondary); font-size: var(--text-md); }
.about-body p + p { margin-top: var(--space-6); }

/* ─── CONTACT ───────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.contact-item .contact-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--stone-gray);
  margin-bottom: var(--space-3);
}
.contact-item .contact-value { font-size: var(--text-md); color: var(--fg-primary); }
.contact-item a { color: var(--red-text-light); text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }
.contact-value.phone { font-family: var(--font-mono); }

/* ─── WAITLIST FORM ─────────────────────────────────── */
.form-wrap { max-width: 520px; margin: var(--space-12) auto 0; }
.form-group { margin-bottom: var(--space-5); }
.form-group label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--power-black);
  margin-bottom: var(--space-2);
}
.form-group input,
.form-group select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--power-black);
  background: var(--white);
  border: 1px solid var(--input-border);
  border-radius: 0;
}
.form-group input:hover,
.form-group select:hover { border-color: var(--power-black); }
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"] { border-color: var(--status-error); }
.field-error {
  display: none;
  font-size: var(--text-sm);
  color: var(--red-text-light);
  margin-top: var(--space-2);
}
.field-error.is-visible { display: block; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.captcha-group { margin-bottom: var(--space-5); }

.form-message {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.form-message:empty { margin-top: 0; }
.form-message.is-error { color: var(--red-text-light); }
.form-message a { color: var(--red-text-light); font-weight: var(--weight-semibold); }

.form-success { display: none; max-width: 520px; margin: var(--space-12) auto 0; text-align: left; }
.form-success.is-visible { display: block; }
.form-success h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--power-black);
  margin-bottom: var(--space-4);
}
.form-success p { color: var(--fg-secondary); font-size: var(--text-md); }
.form-success:focus { outline: none; }

/* ─── FOOTER ────────────────────────────────────────── */
.site-footer {
  background: var(--power-black);
  border-top: 1px solid var(--hairline-dark);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  color: var(--fg-secondary-dark);
}
.footer-inner { display: flex; flex-direction: column; gap: var(--space-6); }
.footer-logo img { height: 22px; width: auto; }
.footer-entity {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary-dark);
}
.footer-copyright { font-size: var(--text-sm); color: var(--fg-tertiary-dark); }
.footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-secondary-dark);
  text-decoration: none;
}
.footer-links a:hover { color: var(--white); }

/* ─── STANDALONE DOC PAGES (terms / privacy) ────────── */
.doc-main { background: var(--ivory-warm); }
.doc-wrap { max-width: 760px; margin: 0 auto; padding: var(--space-16) var(--space-20) var(--space-24); }
.doc-wrap h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--power-black);
  margin-bottom: var(--space-4);
}
.doc-wrap h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: none;
  letter-spacing: var(--tracking-wide);
  color: var(--power-black);
  margin: var(--space-12) 0 var(--space-4);
}
.doc-wrap p, .doc-wrap li { color: var(--fg-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); }
.doc-wrap p + p { margin-top: var(--space-4); }
.doc-wrap ul { list-style: disc; padding-left: var(--space-6); margin: var(--space-4) 0; }
.doc-wrap li { margin-bottom: var(--space-2); }
.doc-wrap a { color: var(--red-text-light); }
.doc-notice {
  border: 1px solid var(--input-border);
  border-left: 3px solid var(--rebel-red);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  background: var(--ivory-mid);
}
.doc-notice p { color: var(--fg-primary); }
.doc-effective { font-size: var(--text-sm); color: var(--fg-tertiary); margin-bottom: var(--space-8); }
.doc-back { margin-top: var(--space-12); }

/* ─── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1023px) {
  .wrap { padding-left: var(--space-5); padding-right: var(--space-5); }
  .doc-wrap { padding-left: var(--space-5); padding-right: var(--space-5); }
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }

  #mobile-nav.is-open {
    display: block;
    background: var(--power-black);
    border-bottom: 1px solid var(--hairline-dark);
    padding: var(--space-4) var(--space-5) var(--space-8);
  }
  #mobile-nav ul { display: flex; flex-direction: column; }
  #mobile-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid var(--hairline-dark);
  }
  #mobile-nav .btn { margin-top: var(--space-6); width: 100%; }

  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .hero { padding-top: var(--space-16); padding-bottom: var(--space-16); }

  .steps-grid { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .contractors-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 600px) {
  .steps-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
}