/* ==========================================================================
   South Jersey Firewood -- site styles
   Single stylesheet, no build step, no dependencies.
   Edit the tokens in :root to re-skin the whole site.
   ========================================================================== */

:root {
  /* Color */
  --ink:        #0c0d0e;
  --ink-2:      #131518;
  --panel:      #191c20;
  --panel-2:    #20242a;
  --line:       rgba(244, 239, 230, 0.13);
  --line-2:     rgba(244, 239, 230, 0.24);
  --cream:      #f5f0e7;
  --muted:      #a6a099;
  --muted-2:    #7d7871;
  --ember:      #e2622a;
  --ember-lt:   #f79448;
  --ember-dim:  rgba(226, 98, 42, 0.14);
  --moss:       #8a9a72;
  --gold:       #d9a441;

  /* Type */
  --display: "Anton", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --wrap: 1140px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Tell the browser this is a dark UI so native controls (checkboxes,
   scrollbars, select popups, date pickers) render dark instead of white. */
:root { color-scheme: dark; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

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

::selection { background: var(--ember); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ember-lt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------- typography ---- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.04;
  margin: 0 0 .6em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); letter-spacing: .03em; }
h4 { font-size: 1rem; letter-spacing: .08em; color: var(--muted); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.55;
  color: #ded7cc;
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
  max-width: 90px;
}

.small { font-size: .87rem; color: var(--muted); }
.tiny  { font-size: .78rem; color: var(--muted-2); line-height: 1.5; }

/* ------------------------------------------------------------- layout ---- */

.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }
.wrap-narrow { width: min(760px, calc(100% - 2.5rem)); margin-inline: auto; }

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
section.tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(205px, 100%), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their content's minimum width -- and a long unbreakable string
   then pushes the whole page sideways. Let them shrink. */
.grid > *, .split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; } }
@media (min-width: 900px) { .split.reverse > *:first-child { order: 2; } }

.alt { background: var(--ink-2); }
.alt-2 { background: var(--panel); }

hr.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: clamp(2rem, 5vw, 3.5rem) 0;
}

/* ------------------------------------------------------------- header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(12, 13, 14, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
  /* The logo is an INLINE <svg> filled with currentColor, and it sits inside
     an <a>. Without this it inherits the link color and the wordmark turns
     ember, which reads as a link rather than as the brand. Pin it. */
  color: var(--cream);
}
.brand:hover { text-decoration: none; }
/* The horizontal lockup is one piece of artwork -- size it by height and let
   the width follow, so the aspect ratio can never be squashed. */
.brand img { height: 46px; width: auto; max-width: 100%; }
.site-footer .brand img { height: 54px; }
/* Small phones get a shorter mark, but the link keeps a 44px tap height --
   the logo is the way home from every page. */
@media (max-width: 420px) {
  .brand img { height: 38px; }
  .brand { min-height: 44px; }
}
.brand-text {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: .98;
  letter-spacing: .04em;
  color: var(--cream);
  text-transform: uppercase;
}
.brand-text span { display: block; font-family: var(--body); font-size: .58rem; letter-spacing: .3em; color: var(--ember); font-weight: 700; margin-top: 4px; }

.nav-links {
  display: flex;
  gap: .3rem;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--cream);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .5rem .72rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav-links a:hover { background: rgba(255,255,255,.06); text-decoration: none; }

/* The page you're on. Color AND a rule underneath: roughly one man in twelve
   cannot reliably tell the ember from the cream, so color on its own is not
   a signal. Drawn with an inset shadow rather than a border so it doesn't add
   2px to the link's height and shift the whole header. */
.nav-links a[aria-current="page"] {
  color: var(--ember-lt);
  box-shadow: inset 0 -2px 0 var(--ember);
  border-radius: 0;
}

/* Keyboard users land here first. Parked off-screen until it takes focus,
   which is the one moment anybody needs it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ember);
  color: #fff;
  padding: .75rem 1.1rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--cream);
  border-radius: var(--radius);
  padding: .5rem .7rem;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  /* 44px is the tap-target floor. This button is the only way to reach the
     nav on a phone -- it does not get to be 39px tall. */
  min-height: 44px;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line);
    padding: .5rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .8rem 1rem; }
  .nav-links .btn { margin-top: .4rem; text-align: center; }
}

/* ------------------------------------------------------------ buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .87rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--ember); color: #fff; }
.btn-primary:hover { background: var(--ember-lt); color: #1a0d06; }

.btn-ghost { border-color: var(--line-2); color: var(--cream); background: transparent; }
.btn-ghost:hover { border-color: var(--cream); background: rgba(255,255,255,.05); }

/* 40px floor even on the small variant. .btn-sm padding alone lands at 35px,
   which is under the tap-target minimum -- fine for a button sitting in a
   card footer that nobody hunts for, not fine for the three buttons that ARE
   the drop-pin tool. The floor costs nothing anywhere else. */
.btn-sm { padding: .6rem 1.05rem; font-size: .78rem; min-height: 40px; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

/* --------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 480px at 78% 18%, rgba(226,98,42,.17), transparent 62%),
    radial-gradient(700px 500px at 8% 92%, rgba(138,154,114,.09), transparent 60%),
    repeating-linear-gradient(96deg, rgba(255,255,255,.017) 0 2px, transparent 2px 7px);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }

.hero h1 { margin-bottom: .35em; }
.hero h1 em {
  font-style: normal;
  color: var(--ember);
  display: block;
}

/* width, not max-width: `max-width: 380px` beats the global `img { max-width:
   100% }`, so on a narrow screen the badge stayed 380px inside a 350px column,
   overflowed right, and got clipped by the hero's overflow:hidden -- which reads
   as "off center" rather than "too big". min() caps it against both. */
/* The hero mark is a shield, not a circle -- taller than it is wide, so it
   gets a smaller width or it dominates the fold on a phone. */
.hero-badge {
  width: min(320px, 100%);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.55));
}

.trust-row {
  display: grid;
  /* Fixed two columns, not auto-fit.
     This row holds FOUR items and it sits inside the hero's narrow left
     column, so auto-fit was choosing 3 across on a desktop and 2 on a phone --
     meaning one width or the other always ended with a lone item and a hole
     beside it. Two columns fills evenly at every width, and it keeps the
     display-face headings ("No markup", "Their number") off a second line,
     which four columns in a ~560px column would not. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}
.trust-row strong { color: var(--cream); display: block; font-size: 1.35rem; font-family: var(--display); letter-spacing: .02em; }

/* -------------------------------------------------------------- cards ---- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line-2); }

.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); font-size: .93rem; }
.card .card-foot { margin-top: auto; padding-top: 1.2rem; }

.card-num {
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--ember);
  line-height: 1;
  margin-bottom: .5rem;
  display: block;
}

/* ---------------------------------------------------------- price card ---- */

.price-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  border-color: var(--ember);
  background: linear-gradient(180deg, rgba(226,98,42,.09), var(--panel) 45%);
}
.price-card .tag {
  position: absolute;
  top: -11px;
  left: 1.7rem;
  background: var(--ember);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 2px;
}
.price-card h3 { margin-bottom: .2em; }
.price-card .vol { font-size: .82rem; color: var(--muted-2); font-family: var(--mono); margin-bottom: 1.1rem; }
.price {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 1;
  color: var(--cream);
}
.price sup { font-size: 1.1rem; vertical-align: super; color: var(--muted); margin-right: 2px; }
.price-sub { font-size: .82rem; color: var(--muted); margin-top: .35rem; }

.feature-list { list-style: none; padding: 0; margin: 1.4rem 0 0; font-size: .9rem; }
.feature-list li {
  padding: .45rem 0 .45rem 1.5rem;
  position: relative;
  color: var(--muted);
  border-bottom: 1px solid rgba(244,239,230,.06);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 7px; height: 7px;
  background: var(--ember);
  border-radius: 50%;
}
.feature-list li.no::before { background: var(--muted-2); opacity: .4; }

/* ------------------------------------------------------------- tables ---- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
/* For a table inside a narrow column, where 520px would overflow. */
.table-scroll.narrow table { min-width: 0; }
thead th {
  text-align: left;
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .95rem 1.1rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: .9rem 1.1rem; border-bottom: 1px solid rgba(244,239,230,.07); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(odd) { background: rgba(255,255,255,.014); }
td strong { color: var(--cream); }
.num { font-family: var(--mono); font-size: .88rem; white-space: nowrap; }

/* ------------------------------------------------- tables on a phone ---- */
/* A three-column table can't be squeezed into 350px and stay readable, so
   below 720px each row becomes its own card and the column headings move
   inline as labels on each cell. Nobody should have to scroll sideways to
   find out what a cord costs.
   Add class "keep-table" to a .table-scroll that's narrow enough to stay
   a table (a two-column list, say). */
@media (max-width: 720px) {
  .table-scroll:not(.keep-table) {
    border: 0;
    border-radius: 0;
    overflow-x: visible;
  }
  .table-scroll:not(.keep-table) table { min-width: 0; display: block; }
  .table-scroll:not(.keep-table) thead { display: none; }
  .table-scroll:not(.keep-table) tbody { display: block; }

  .table-scroll:not(.keep-table) tbody tr {
    display: block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: .8rem;
    overflow: hidden;
  }
  .table-scroll:not(.keep-table) tbody tr:last-child { margin-bottom: 0; }

  .table-scroll:not(.keep-table) td {
    display: block;
    width: auto;
    padding: .7rem 1rem;
    border-bottom: 1px solid rgba(244, 239, 230, .07);
    white-space: normal;
  }
  .table-scroll:not(.keep-table) td:last-child { border-bottom: 0; }

  .table-scroll:not(.keep-table) td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: .3rem;
  }

  /* the first cell is the row's name, so it reads as the card's heading */
  .table-scroll:not(.keep-table) td:first-child {
    background: var(--panel-2);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cream);
  }
  .table-scroll:not(.keep-table) td:first-child::before { display: none; }

  /* keep numbers on one line even though everything else wraps */
  .table-scroll:not(.keep-table) td.num { white-space: nowrap; }
}

/* --------------------------------------------------------------- misc ---- */

.pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
}
.pill.on { border-color: var(--moss); color: var(--moss); }
.pill.low { border-color: var(--gold); color: var(--gold); }
.pill.off { border-color: rgba(226,98,42,.5); color: var(--ember-lt); }

.callout {
  border-left: 3px solid var(--ember);
  background: var(--ember-dim);
  padding: 1.1rem 1.3rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .93rem;
}
.callout strong { color: var(--cream); }

.note {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: .86rem;
  color: var(--muted);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Four-cell version: lock to a 2x2 so it never leaves an empty grid cell. */
.stat-strip.quad { grid-template-columns: 1fr; }
@media (min-width: 420px) { .stat-strip.quad { grid-template-columns: repeat(2, 1fr); } }
.stat-strip div { background: var(--ink-2); padding: 1.4rem 1.2rem; }
.stat-strip .k { font-family: var(--display); font-size: 2rem; color: var(--ember); line-height: 1; }
.stat-strip .v { font-size: .8rem; color: var(--muted); margin-top: .4rem; }

/* ---------------------------------------------------------- accordion ---- */

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600;
  font-size: 1.01rem;
  list-style: none;
  position: relative;
  color: var(--cream);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+";
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ember);
  line-height: 1;
}
.acc details[open] summary::after { content: "\2013"; }  /* en dash, as a CSS escape: entities are not parsed inside <style> */
.acc summary:hover { color: var(--ember-lt); }
.acc .acc-body { padding: 0 2.5rem 1.5rem 0; color: var(--muted); font-size: .94rem; }
.acc .acc-body p { margin-bottom: .8em; }

/* ------------------------------------------------- collapsible forms ---- */
/* Three long forms stacked open is a wall of fields you have to scroll past to
   reach anything else. Each is a <details> instead, so the page reads as a
   short list of choices until you pick one. Native element -- no JS needed. */

.form-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color .16s ease;
}
.form-panel:hover { border-color: var(--line-2); }
.form-panel[open] { border-color: var(--line-2); background: var(--ink-2); }

.form-panel > summary {
  cursor: pointer;
  list-style: none;
  display: block;
  padding: 1.2rem 3.4rem 1.2rem 1.4rem;
  position: relative;
}
.form-panel > summary::-webkit-details-marker { display: none; }
.form-panel > summary:hover { background: rgba(255, 255, 255, .035); }
.form-panel > summary::after {
  content: "+";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ember);
}
.form-panel[open] > summary::after { content: "\2013"; }
.form-panel[open] > summary { border-bottom: 1px solid var(--line); }

.fp-title {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.1;
}
.fp-sub {
  display: block;
  font-size: .92rem;
  color: var(--muted);
  margin-top: .3rem;
  max-width: 56ch;
}
.fp-body { padding: clamp(1.2rem, 3vw, 1.8rem) 1.4rem 1.8rem; }

/* A second level, for the accessory list inside the order form. */
.sub-panel {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
}
.sub-panel > summary {
  cursor: pointer;
  list-style: none;
  display: block;
  padding: .85rem 2.6rem .85rem 1rem;
  position: relative;
}
.sub-panel > summary::-webkit-details-marker { display: none; }
.sub-panel > summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ember);
}
.sub-panel[open] > summary::after { content: "\2013"; }
.sub-panel[open] > summary { border-bottom: 1px dashed var(--line); }
.sp-title {
  display: block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}
.sp-sub { display: block; font-size: .88rem; color: var(--muted); margin-top: .2rem; }
.sp-body { padding: 1.1rem 1rem 1.2rem; }

/* --------------------------------------------------------------- form ---- */

.form-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field.full { grid-column: 1 / -1; }

label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
label .req { color: var(--ember); }

/* Keep this list in step with the form markup. A type the list forgets gets
   the browser's own 21px-tall control, which fails the 40px tap-target check
   -- which is exactly how the drop-pin field was caught. */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="search"], input[type="url"], select, textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--cream);
  font: inherit;
  font-size: .95rem;
  padding: .78rem .9rem;
  transition: border-color .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ember);
  background: var(--panel);
  outline: none;
}
textarea { resize: vertical; min-height: 120px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
option { background: var(--ink-2); color: var(--cream); }

.check-row { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--muted); min-width: 0; }
.check-row label { min-width: 0; overflow-wrap: anywhere; }
.check-row input { margin-top: .2rem; accent-color: var(--ember); width: 20px; height: 20px; flex: none; }
.check-row label { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 400; color: var(--muted); }

.form-status {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  font-size: .92rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.ok { background: rgba(138,154,114,.14); border: 1px solid rgba(138,154,114,.45); color: #cfdcbb; }
.form-status.err { background: rgba(226,98,42,.12); border: 1px solid rgba(226,98,42,.45); color: #f7bb95; }

/* ------------------------------------------------------------ ordering ---- */

.order-summary {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 1.4rem;
}
/* Sticky only where there's room beside the form. On a phone a 325px panel
   pinned under the header eats half the screen while you're typing. */
@media (min-width: 900px) {
  .order-summary { position: sticky; top: 92px; }
}
.order-summary h3 { margin-bottom: 1rem; }
.summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .92rem; border-bottom: 1px solid rgba(244,239,230,.07); }
.summary-line:last-of-type { border-bottom: 0; }
.summary-line .lbl { color: var(--muted); }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.summary-total .price { font-size: 2.1rem; }

/* ------------------------------------------------------ bed capacity ----- */
/* The truck bed is the constraint the customer can't see, so we draw it.
   Green while there's room, amber past 85%, red when the load doesn't fit. */

.cap {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-2);
}
.cap-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .5rem;
}
.cap-head .lbl {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cap-head .cap-text {
  font-family: var(--font-mono, inherit);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--sand, var(--muted));
  white-space: nowrap;
}
.cap-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(244, 239, 230, .09);
  overflow: hidden;
}
.cap-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--moss);
  transition: width .2s ease, background-color .2s ease;
}
.cap-fill.full { background: var(--ember, #e2622a); }
.cap-fill.over { background: #c2472b; }
.cap-note {
  display: none;
  margin-top: .7rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--sand, var(--muted));
  border-left: 2px solid var(--ember, #e2622a);
  padding-left: .7rem;
}
.cap-note.show { display: block; }

/* No animation for anyone who's asked not to see it. */
@media (prefers-reduced-motion: reduce) {
  .cap-fill { transition: none; }
}

/* --------------------------------------------------------------- CTA ----- */

.cta-band {
  background: linear-gradient(135deg, #1a1005, var(--ink-2) 55%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.cta-band h2 { margin-bottom: .4em; }

/* ------------------------------------------------------------- footer ---- */

.site-footer {
  background: #08090a;
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
  font-size: .89rem;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.site-footer h4 { color: var(--cream); font-family: var(--body); font-size: .72rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--cream); }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: .8rem;
}

/* The header is sticky, so an in-page jump would otherwise park the target
   underneath it. Push every anchorable element clear of the header height. */
[id] { scroll-margin-top: 92px; }

/* ------------------------------------------------- phone refinements ---- */
@media (max-width: 720px) {
  /* Pills sat at 10.9px inside table cells -- too small to read. */
  .pill { font-size: .8rem; padding: .28rem .62rem; }
  .price-card .tag { font-size: .78rem; letter-spacing: .12em; }

  /* Links inside a table cell were 16px tall. Give them a thumb-sized target.
     min-height carries the short ones -- "Apply" is four characters and was
     landing at 37x35, under the 40px floor on both axes. */
  .table-scroll td a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    min-width: 40px;
    padding: .35rem 0;
  }

  /* Footer links were 16px tall -- too small to hit reliably with a thumb.
     Padding alone left them at 39px, one pixel short, so set the floor. */
  .site-footer li { margin-bottom: 0; }
  .site-footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .5rem 0;
  }

  /* Nudge the smallest labels up to a readable size. */
  .eyebrow { font-size: .78rem; }
  .tiny { font-size: .82rem; }
  label { font-size: .78rem; }
  thead th { font-size: .74rem; }

  /* Give inline fine-print links a bigger hit area. */
  .tiny a, .fine a { padding: .2rem 0; display: inline-block; }
}

/* --------------------------------------------------------- draft flag ---- */
/* Remove this block and the matching markup before launch. */
.draft-bar {
  background: repeating-linear-gradient(45deg, #2a1c05, #2a1c05 12px, #201505 12px, #201505 24px);
  border-bottom: 1px solid rgba(217,164,65,.35);
  color: var(--gold);
  font-size: .76rem;
  letter-spacing: .06em;
  text-align: center;
  padding: .5rem 1rem;
  font-weight: 600;
}

/* ------------------------------------------------- drop-pin picker ---- */
/* The X. It sits on satellite imagery, which is visually noisy and can be any
   color, so it needs its own contrast rather than borrowing the page's:
   ember on a dark halo reads on grass, gravel, asphalt and snow. */
.dp-x {
  color: var(--ember);
  font-size: 2.6rem;
  line-height: 46px;
  text-align: center;
  font-weight: 700;
  text-shadow:
     0 0 4px #0c0d0e, 0 0 4px #0c0d0e,
     2px 2px 0 #0c0d0e, -2px -2px 0 #0c0d0e,
     2px -2px 0 #0c0d0e, -2px 2px 0 #0c0d0e;
  cursor: grab;
}
.dp-x:focus { outline: 3px solid var(--cream); outline-offset: 2px; border-radius: 4px; }
.dp-x:active { cursor: grabbing; }
.leaflet-container { border-radius: var(--radius); font-family: var(--body); }

/* --------------------------------------------------- long-string wrapping --
   A bare URL, an email address or a long business name has no break
   opportunity in it, so at 320px it pushes the whole page sideways -- and a
   horizontally scrolling body is the single most common mobile layout bug
   there is. Caught by the overflow check in verify.py on standards.html,
   where the Guarantee section prints a shareable URL in full.

   Scoped to running text rather than set on * so it cannot interfere with
   the tables, which do their own overflow handling in .table-scroll. */
p, li, td, th, dd, dt, figcaption, .tiny, .lede, .fp-sub { overflow-wrap: anywhere; }

/* ...but NEVER inside a phone number.
   The rule above broke "609-850-0101" across two lines as "609-850-0" / "101",
   which is worse than an overflow: a wrapped phone number gets misread and
   misdialled, and the whole point of this directory is that the number on the
   row is the number that rings. Same for a figure in a numeric column. If a
   column gets too narrow to hold one, .table-scroll scrolls -- that is what it
   is for. */
a[href^="tel:"], .num, .pill { white-space: nowrap; overflow-wrap: normal; }

/* ------------------------------------------------------ report-a-problem --
   The per-row link that opens the contact form prefilled. It has to look
   tappable without competing with the seller's name above it or the phone
   number below it -- the phone number is what most people came for and it
   stays the loudest thing in the card.

   Given a colored dot rather than link color for exactly that reason: it
   reads as an available action on a scan, and as secondary next to an ember
   phone link. Padding is for the thumb; on the desktop table the row is
   already tall enough that it costs nothing. */
a.report-link {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-2);
  padding: .45rem 0;
  margin-top: .1rem;
}
a.report-link::before {
  content: "";
  display: inline-block;
  width: .4rem; height: .4rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--ember);
  vertical-align: middle;
}
a.report-link:hover,
a.report-link:focus-visible { color: var(--cream); border-bottom-color: var(--ember); }