/* =========================================================================
   The Forge — brand system
   Operated by The Golden Curtain LLC · Katy / Houston, TX
   Flat only: no gradients, no shadows, no glow. One accent (ember).
   Hairlines over boxes. Generous whitespace. One graphite block.
   ========================================================================= */

:root {
  --ink:#161412;
  --paper:#F8F6F2;
  --graphite:#232020;
  --ember:#C2410C;
  --ember-bright:#EA580C;
  --ember-deep:#7C2D12;
  --ember-tint:#FBEDE6;
  --warm-gray:#6E6862;
  --hairline:#E4DED4;
  --on-dark:#F8F6F2;
  --on-dark-meta:#B8B0A6;

  --maxw:1120px;
  --gutter:24px;
}

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

html { scroll-behavior:smooth; }

body {
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  font-weight:400;
  font-size:16.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.1;
  text-wrap:balance;
}

p { text-wrap:pretty; }

a { color:inherit; }

/* Numbers / prices: Space Grotesk, tabular figures */
.num {
  font-family:"Space Grotesk", sans-serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---- layout helpers ---- */
.wrap {
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section { padding-block:88px; }
.section--tight { padding-block:64px; }

.eyebrow {
  font-family:"Inter", sans-serif;
  font-weight:500;
  font-size:12.5px;
  letter-spacing:0.17em;
  text-transform:uppercase;
  color:var(--warm-gray);
}

.section-label {
  font-family:"Inter", sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#9a938b;
}

.lede { color:#3a342f; }

/* ---- spark glyph (ember diamond-star) ---- */
.spark {
  display:inline-block;
  background:var(--ember);
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
  flex:none;
}

/* ---- ember pill button ---- */
.btn {
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--ember);
  color:var(--paper);
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.01em;
  padding:14px 26px;
  border-radius:999px;
  text-decoration:none;
  transition:background .15s ease;
}
.btn:hover { background:var(--ember-bright); }
.btn .arrow { font-size:16px; line-height:1; }

.btn--on-dark { background:var(--ember); }
.btn--on-dark:hover { background:var(--ember-bright); }

/* =========================================================================
   Header
   ========================================================================= */
.site-header { border-bottom:1px solid var(--ember); }
.site-header .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-block:20px;
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
}
.brand .wordmark {
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:17px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
}
.brand .spark { width:14px; height:14px; }
.site-header .tagline {
  font-size:13px;
  color:var(--warm-gray);
}

/* =========================================================================
   Hero — paper copy left, graphite build-menu right
   ========================================================================= */
.hero .wrap {
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:0;
  align-items:stretch;
  border:1px solid var(--hairline);
  border-radius:5px;
  overflow:hidden;
  margin-top:64px;
  margin-bottom:0;
}
.hero { padding-bottom:88px; }

.hero-copy {
  background:var(--paper);
  padding:54px 52px;
  display:flex;
  flex-direction:column;
  gap:22px;
  justify-content:center;
}
.hero-copy h1 {
  font-size:clamp(34px, 4.4vw, 46px);
  line-height:1.06;
  max-width:14ch;
}
.hero-copy .subhead {
  font-size:16.5px;
  line-height:1.55;
  color:#3a342f;
  max-width:54ch;
}
.hero-cta {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:4px;
}
.hero-cta .note { font-size:13px; font-weight:500; color:var(--warm-gray); }

/* graphite build menu */
.build-menu {
  background:var(--graphite);
  color:var(--on-dark);
  padding:46px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.build-menu .menu-label {
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(248,246,242,0.5);
  margin-bottom:10px;
}
.build-menu .rule { height:1px; background:rgba(248,246,242,0.13); }
.offer {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:19px 0;
}
.offer + .offer { border-top:1px solid rgba(248,246,242,0.1); }
.offer-top {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
}
.offer-name {
  display:flex;
  align-items:center;
  gap:12px;
}
.offer-name .name {
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:20px;
  color:var(--on-dark);
}
.tick {
  width:7px; height:11px;
  border:solid var(--ember-bright);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  display:inline-block;
  flex:none;
}
.offer-price { white-space:nowrap; }
.offer-price .from { font-size:12px; color:rgba(248,246,242,0.5); }
.offer-price .amt {
  font-family:"Space Grotesk", sans-serif;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:18px;
  color:var(--ember-bright);
}
.offer-desc {
  font-size:13.5px;
  line-height:1.4;
  color:rgba(248,246,242,0.64);
  padding-left:19px;
}

/* =========================================================================
   Generic content sections
   ========================================================================= */
.section-head { max-width:60ch; margin-bottom:36px; display:flex; flex-direction:column; gap:12px; }
.section-head h2 { font-size:clamp(26px, 3.4vw, 34px); }
.section-head p { color:var(--warm-gray); }

/* card grid */
.grid-3 {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.card {
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.card h3 { font-size:21px; }
.card .card-meta {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.card .price { white-space:nowrap; }
.card .price .from { font-size:12px; color:var(--warm-gray); }
.card .price .amt { font-size:17px; font-weight:600; color:var(--ember); }
.card p { font-size:14.5px; line-height:1.5; color:#4a443f; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.step { display:flex; flex-direction:column; gap:12px; padding-top:18px; border-top:1px solid var(--ember); }
.step .step-num {
  font-family:"Space Grotesk", sans-serif;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:15px;
  color:var(--ember);
  letter-spacing:0.04em;
}
.step h3 { font-size:20px; }
.step p { font-size:14.5px; line-height:1.5; color:#4a443f; }

/* messaging consent block */
.messaging {
  background:var(--ember-tint);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:36px 34px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.messaging .section-label { color:var(--ember); }
.messaging h2 { font-size:clamp(23px, 3vw, 29px); }
.messaging p { color:#3a342f; max-width:70ch; }
.messaging ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.messaging li {
  display:flex; align-items:flex-start; gap:11px;
  font-size:15px; color:#3a342f;
}
.messaging li .dot { width:6px; height:6px; border-radius:50%; background:var(--ember); flex:none; margin-top:9px; }
.messaging .fineprint { font-size:13px; color:var(--warm-gray); }

/* =========================================================================
   Contact — graphite block
   ========================================================================= */
.contact .block {
  background:var(--graphite);
  color:var(--on-dark);
  border-radius:20px;
  padding:56px 48px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.contact .section-label { color:rgba(248,246,242,0.5); margin-bottom:14px; }
.contact h2 { color:var(--on-dark); font-size:clamp(28px, 3.6vw, 38px); margin-bottom:14px; }
.contact .block > div > p { color:var(--on-dark-meta); max-width:46ch; }
.contact-details { display:flex; flex-direction:column; gap:14px; }
.contact-details .row { display:flex; flex-direction:column; gap:3px; }
.contact-details .k {
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(248,246,242,0.45);
}
.contact-details .v { font-size:17px; color:var(--on-dark); text-decoration:none; }
.contact-details a.v:hover { color:var(--ember-bright); }
.contact .cta-row { margin-top:6px; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  border-top:1px solid var(--hairline);
  padding-block:44px;
}
.site-footer .cols {
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:90ch;
}
.site-footer .entity { font-size:14px; color:var(--ink); font-weight:500; }
.site-footer .msg { font-size:12.5px; line-height:1.55; color:var(--warm-gray); }
.site-footer .meta {
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  font-size:13px; color:var(--warm-gray);
  padding-top:8px; border-top:1px solid var(--hairline);
}
.site-footer .meta a { color:var(--ember); text-decoration:none; }
.site-footer .meta a:hover { text-decoration:underline; }

/* =========================================================================
   Legal / privacy document
   ========================================================================= */
.doc { padding-block:64px 88px; }
.doc .wrap { max-width:760px; }
.doc h1 { font-size:clamp(30px, 4vw, 40px); margin-bottom:10px; }
.doc .updated { color:var(--warm-gray); font-size:14px; margin-bottom:8px; }
.doc h2 {
  font-size:21px;
  margin-top:40px;
  margin-bottom:12px;
  padding-top:24px;
  border-top:1px solid var(--hairline);
}
.doc h3 { font-size:16px; margin-top:22px; margin-bottom:8px; }
.doc p, .doc li { color:#3a342f; font-size:15.5px; line-height:1.6; }
.doc p + p { margin-top:12px; }
.doc ul { margin:12px 0 12px 0; padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.doc a { color:var(--ember); }
.doc .callout {
  background:var(--ember-tint);
  border:1px solid var(--hairline);
  border-left:3px solid var(--ember);
  border-radius:10px;
  padding:18px 20px;
  margin-top:18px;
}
.doc .callout p { color:var(--ink); font-weight:500; }

/* =========================================================================
   Responsive — mobile first collapse
   ========================================================================= */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns:1fr; margin-top:40px; }
  .hero-copy { padding:40px 32px; }
  .build-menu { padding:36px 32px; }
  .contact .block { grid-template-columns:1fr; padding:40px 32px; }
}

@media (max-width: 640px) {
  body { font-size:16px; }
  .section { padding-block:64px; }
  .grid-3, .steps { grid-template-columns:1fr; }
  .hero-copy { padding:32px 24px; }
  .build-menu { padding:32px 24px; }
  .site-header .tagline { display:none; }
  .messaging { padding:28px 22px; }
  .contact .block { padding:32px 24px; }
}