/* ==========================================================================
   Compass Energy
   --------------------------------------------------------------------------
   Design brief, so nobody sands this back into a template later:

   This site must not look like a service-business site with a hero, three
   rounded cards and a footer. That shape is everywhere, and Compass has a
   visual language nobody else in the trade can borrow — the illuminated
   station price board, the diagonal pinstripe sweep in the logo, and the hard
   industrial geometry of tanker trucks and jobsite tanks.

   Four rules hold the whole thing together:

   1. NO ROUNDED CORNERS. Radius is 0 or 2px, ever. Soft cards read domestic;
      this is a diesel company. Hard edges, heavy rules, real corners.
   2. DIAGONALS ARE THE SIGNATURE. Section boundaries are cut at -2deg, echoing
      the sweep under the logo script. Reused deliberately, never randomly.
   3. AMBER IS THE PRICE COLOUR, RED IS THE BRAND COLOUR. The flyer prints the
      phone number in yellow on black - amber is already in the brand, and on a
      dark field it reads exactly like a lit station sign. Red is for identity
      and action; amber is for numbers. Never swap them.
   4. TYPE CARRIES THE WEIGHT. Anton at poster scale for display, Oswald for
      labels and controls, JetBrains Mono for anything numeric. Big, tight,
      confident. No decorative anything.
   ========================================================================== */

:root {
  /* Field -------------------------------------------------------------- */
  --void:        #08090B;
  --steel-900:   #0F1115;
  --steel-800:   #161A20;
  --steel-700:   #1F242C;
  --steel-600:   #2B313B;
  --hairline:    rgba(255, 255, 255, .085);
  --hairline-up: rgba(255, 255, 255, .16);

  /* Brand -------------------------------------------------------------- */
  --red:         #ED141D;   /* sampled from the logo PNG */
  --red-hot:     #FF2A33;
  --red-deep:    #A50D14;
  --amber:       #FFB000;   /* the flyer's phone-number yellow */
  --amber-soft:  #FFD166;

  /* Paper -------------------------------------------------------------- */
  --paper:       #FFFFFF;
  --bone:        #F4F4F2;
  --bone-2:      #E8E8E4;
  --ink:         #101216;
  --ink-2:       #3A404A;
  --mute:        #6E7480;
  --mute-light:  #9AA0AA;

  /* Signal ------------------------------------------------------------- */
  --go:          #12A05B;
  --warn:        #C98A00;

  /* Type --------------------------------------------------------------- */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --head:    "Oswald", "Arial Narrow", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1240px;
  --gutter: 28px;

  /* Rule 1. These exist so a stray `border-radius: 12px` looks obviously
     wrong when someone adds it. */
  --radius: 0px;
  --radius-chip: 2px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* diagonal cuts overhang by design; never scroll to them */
}

img, svg { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

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

h1, h2, h3, h4 { margin: 0 0 .5em; }

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

h3, h4 {
  font-family: var(--head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

h1 { font-size: clamp(3.1rem, 8.4vw, 7rem); }
h2 { font-size: clamp(2.3rem, 5vw, 4rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.42rem); }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }

/* Small technical label with a rule through it. Used everywhere a section
   needs a name without another heading competing with the display type. */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .34;
}
.kicker.amber { color: var(--amber); }
.kicker.center { justify-content: center; }
.kicker.center::after { display: none; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(8, 9, 11, .93);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 78px;
  position: relative;
}

.brand { flex: 0 0 auto; }
.brand img { height: 44px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }

.nav a {
  font-family: var(--head);
  font-weight: 500;
  font-size: .88rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #C6CAD2;
  position: relative;
  padding: 4px 0;
}
.nav a:hover { color: #fff; text-decoration: none; }

/* Underline grows from the left rather than fading in - reads mechanical. */
.nav a:not(.nav-call)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--red);
  transition: width .2s ease;
}
.nav a:not(.nav-call):hover::after,
.nav a.active::after { width: 100%; }
.nav a.active { color: #fff; }

.nav-call {
  font-family: var(--mono) !important;
  font-weight: 700;
  font-size: 1rem !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  background: var(--red);
  padding: 11px 18px;
  border: 1px solid var(--red);
}
.nav-call:hover { background: var(--red-hot); border-color: var(--red-hot); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline-up);
  color: #fff;
  padding: 9px 13px;
  font-size: 1.05rem;
  cursor: pointer;
  margin-left: 10px;
}

.header-call {
  display: none;
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  color: #fff !important;
  background: var(--red);
  padding: 10px 15px;
  white-space: nowrap;
}
.header-call:hover { text-decoration: none; }

/* ==========================================================================
   Hero
   --------------------------------------------------------------------------
   Two columns that are NOT "text left, generic card right". The right column
   is the price board - the single most useful object on the site and the one
   thing a fuel dealer has that nobody else does.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--void);
  color: #fff;
  padding: 88px 0 132px;
  overflow: hidden;
}

/* Real photography of the actual business, not stock. It sits under a heavy
   scrim on purpose: the job of the picture here is atmosphere and proof that
   these are real trucks and real drivers, not to be looked at directly. The
   headline and the price board have to stay the things you read first.
   Anything that makes the photo more legible makes the type less legible. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
  opacity: .76;
  filter: contrast(1.06) saturate(.72);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Two scrims: one across, burying the photo under the headline column, and
     one down, so the sticky header and the red sweep both have solid ground. */
  background:
    linear-gradient(100deg,
      var(--void) 0%,
      rgba(8, 9, 11, .94) 30%,
      rgba(8, 9, 11, .52) 58%,
      rgba(8, 9, 11, .26) 100%),
    linear-gradient(180deg,
      rgba(8, 9, 11, .66) 0%,
      rgba(8, 9, 11, .06) 34%,
      rgba(8, 9, 11, .78) 100%);
}

/* The tanker on the order page is the subject, not texture behind type. The
   base .hero-photo mutes its photo hard (opacity .76, saturate .72) because
   the commercial hero only wants a suggestion of one. Here the truck IS the
   argument - it is the actual Compass rig, plates and DOT number and all - so
   it keeps its colour and sits higher in the frame. The photo was already
   graded dark on export, so it needs less scrim, not more. */
.hero-photo.is-subject img {
  opacity: .95;
  filter: none;
  /* The cab is right-of-centre in the frame and the headline sits left, so
     nudge the crop right to keep the grille clear of the type. */
  object-position: 54% 64%;
}
.hero-photo.is-subject::after {
  background:
    linear-gradient(100deg,
      var(--void) 0%,
      rgba(8, 9, 11, .92) 26%,
      rgba(8, 9, 11, .38) 56%,
      rgba(8, 9, 11, .10) 100%),
    linear-gradient(180deg,
      rgba(8, 9, 11, .58) 0%,
      rgba(8, 9, 11, .00) 38%,
      rgba(8, 9, 11, .72) 100%);
}
@media (max-width: 760px) {
  /* On a phone the truck ends up behind the whole column, so it goes back to
     being texture rather than fighting the headline. */
  .hero-photo.is-subject img { opacity: .55; }
}

/* Full-bleed tanker band. No wrap, no max-width: the point is that the tank
   runs edge to edge like a slab. The top and bottom edges are feathered into
   --void so the band joins the dark section above it instead of sitting in a
   box, and the -2deg diagonal that cuts every other section boundary is left
   off here deliberately - the tank already has its own strong horizontal. */
.tankband {
  position: relative;
  padding: 0;
  background: var(--void);
  line-height: 0;
  overflow: hidden;
}
.tankband img {
  display: block;
  width: 100%;
  height: clamp(190px, 26vw, 340px);
  object-fit: cover;
  object-position: 50% 46%;
}
.tankband::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--void) 0%,
    rgba(8, 9, 11, 0) 16%,
    rgba(8, 9, 11, 0) 78%,
    rgba(8, 9, 11, .96) 100%);
}
@media (max-width: 700px) {
  /* Crop toward the script rather than shrinking the whole tank to a stripe. */
  .tankband img { height: 150px; object-position: 42% 48%; }
}

/* Photo behind the closing call band. This is the last thing on the page and
   it was a flat red slab; the truck and the flag behind it give the phone
   number something to sit on. Scrimmed hard in red rather than black, so the
   band still reads as the brand block it was, not as a photo with type on it. */
.callband { position: relative; overflow: hidden; }
.callband > .wrap { position: relative; z-index: 1; }
.callband-photo { position: absolute; inset: 0; z-index: 0; }
.callband-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: .20;
  filter: saturate(.45) contrast(1.05);
}
.callband-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(95% 80% at 50% 46%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.62) 100%);
}

/* Faint technical grid. Almost invisible; stops the black reading as a flat
   empty field on a large monitor. */
.hero::before {
  z-index: 1;
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 20%, #000 25%, transparent 78%);
  pointer-events: none;
}

/* The sweep. Same -2deg used at every section boundary on the site. */
.hero::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; bottom: -66px;
  height: 132px;
  background: var(--red);
  transform: rotate(-2deg);
  z-index: 1;
}

.hero .wrap { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 58px;
  align-items: center;
}

.hero h1 { color: #fff; margin-bottom: 24px; }
.hero h1 em { font-style: normal; color: var(--red); display: block; }

.hero-lead {
  font-size: 1.16rem;
  line-height: 1.62;
  color: #AEB4BF;
  max-width: 30em;
  margin-bottom: 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

/* Three proof points on a hairline rail, instead of pill badges. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.hero-proof div {
  flex: 1 1 150px;
  padding: 18px 20px 0 0;
}
.hero-proof dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.hero-proof dd {
  margin: 0;
  font-family: var(--head);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .02em;
  color: #E7E9ED;
  text-transform: uppercase;
}

/* ==========================================================================
   Price board
   --------------------------------------------------------------------------
   A lit station sign. Amber numerals on near-black, hairline frame, mono
   everywhere. This is the component the whole design hangs off.
   ========================================================================== */

.board {
  background:
    linear-gradient(180deg, var(--steel-800) 0%, var(--steel-900) 100%);
  border: 1px solid var(--hairline-up);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 30px 70px rgba(0,0,0,.55);
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(0,0,0,.35);
}
.board-head span {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute-light);
}

/* The live dot. Pulses only when a price is actually posted. */
.board-live { display: flex; align-items: center; gap: 8px; color: var(--amber) !important; }
.board-live::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--amber);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.board-body { padding: 30px 22px 26px; }

.board-price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--amber);
  /* The glow is what sells it as a lit sign rather than yellow text. */
  text-shadow: 0 0 34px rgba(255, 176, 0, .38);
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.board-price .cur { font-size: .42em; margin-top: .32em; opacity: .8; }
.board-unit {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute-light);
  margin-top: 12px;
}

/* Shown instead of a number when no price is posted. Never a stale figure. */
.board-none {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: #fff;
}
.board-none + .board-unit { color: var(--amber); }

.board-ladder { width: 100%; border-collapse: collapse; margin-top: 26px; }
.board-ladder th, .board-ladder td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: .86rem;
}
.board-ladder th {
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  padding-bottom: 8px;
}
.board-ladder td { color: #C6CAD2; }
.board-ladder td.p { color: var(--amber); text-align: right; font-weight: 700; }
.board-ladder tr:last-child td { border-bottom: none; }

.board-foot { padding: 0 22px 24px; }
.board-note {
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--mute);
  margin-top: 16px;
}

/* ==========================================================================
   Ticker
   --------------------------------------------------------------------------
   The markets Compass fuels, scrolling. Reads like a depot board and fills a
   band that would otherwise be another row of pills.
   ========================================================================== */

.ticker {
  background: var(--red);
  color: #fff;
  overflow: hidden;
  padding: 15px 0;
  border-top: 1px solid rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(0,0,0,.22);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: slide 34s linear infinite;
}
.ticker-track span {
  font-family: var(--display);
  font-size: 1.32rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
}
.ticker-track span::after {
  content: "";
  width: 9px; height: 9px;
  background: var(--void);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
@keyframes slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .board-live::before { animation: none; }
}

/* ==========================================================================
   The split
   --------------------------------------------------------------------------
   The business has two halves priced in completely different ways, so the
   page is physically cut in two. A diagonal seam, not a card grid.
   ========================================================================== */

.split { display: grid; grid-template-columns: 1fr 1fr; position: relative; }

.split-half {
  position: relative;
  padding: 82px 52px 76px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .25s;
}

/* Clears the skewed seam. See the note on .split::after - at the top of the
   section the slab reaches about 85px past the centre line, so anything less
   than that here clips the first character of every line in this column. */
.split-work { padding-left: 104px; }

.split-home { background: var(--red); color: #fff; }
.split-home:hover { background: var(--red-hot); }
.split-work { background: var(--steel-900); color: #fff; }
.split-work:hover { background: var(--steel-800); }

/* The seam. A skewed slab on the boundary so the two sides meet on an angle
   instead of a straight gutter. */
.split::after {
  content: "";
  position: absolute;
  /* Flush at the top. The ticker sits directly above this and a negative offset
     cut a visible notch out of it. Only the bottom needs to overrun. */
  top: 0; bottom: -2px;
  left: 50%;
  width: 74px;
  background: var(--void);
  transform: translateX(-50%) skewX(-8deg);
  z-index: 2;
  pointer-events: none;
}

.split-half > * { position: relative; z-index: 1; }

/* Oversized ghost numeral, bled off the corner. */
.split-half .ghost {
  position: absolute;
  right: -18px; bottom: -46px;
  font-family: var(--display);
  font-size: 15rem;
  line-height: .8;
  color: rgba(255,255,255,.07);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.split-half h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: 16px; }
.split-half .lead { color: rgba(255,255,255,.82); margin-bottom: 26px; max-width: 34em; }

.split-list { list-style: none; margin: 0 0 32px; padding: 0; }
.split-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: .98rem;
  color: rgba(255,255,255,.9);
}
.split-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 9px; height: 9px;
  background: #fff;
  transform: rotate(45deg);
}
.split-work .split-list li::before { background: var(--red); }

.split-half .split-cta { margin-top: auto; }

/* The price posture of each side, stated plainly on the tile itself. */
.split-price {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 0 22px;
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.2);
  margin-bottom: 6px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: var(--head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  transition: background .16s, color .16s, border-color .16s;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-hot); border-color: var(--red-hot); color: #fff; }

.btn-amber { background: var(--amber); color: var(--void); border-color: var(--amber); }
.btn-amber:hover { background: var(--amber-soft); border-color: var(--amber-soft); color: var(--void); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); color: #fff; }

.btn-white { background: #fff; color: var(--void); border-color: #fff; }
.btn-white:hover { background: var(--bone); border-color: var(--bone); color: var(--void); }

.btn-dark { background: var(--void); color: #fff; border-color: var(--void); }
.btn-dark:hover { background: var(--steel-700); border-color: var(--steel-700); color: #fff; }

.btn-quiet {
  background: transparent; color: var(--ink);
  border-color: var(--bone-2); font-size: .88rem; padding: 11px 19px;
}
.btn-quiet:hover { border-color: var(--ink); }

.btn-block { width: 100%; }
.btn-sm { padding: 10px 17px; font-size: .82rem; }

/* ==========================================================================
   Sections
   ========================================================================== */

section { padding: 96px 0; position: relative; }
section.tight { padding: 64px 0; }
.bg-bone { background: var(--bone); }
.bg-void { background: var(--void); color: #C6CAD2; }
.bg-void h2, .bg-void h3, .bg-void h4 { color: #fff; }
.bg-steel { background: var(--steel-900); color: #C6CAD2; }
.bg-steel h2, .bg-steel h3 { color: #fff; }

/* Reusable diagonal edge, same -2deg as the hero. */
.cut-top { clip-path: polygon(0 42px, 100% 0, 100% 100%, 0 100%); margin-top: -42px; padding-top: 128px; }
.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%); padding-bottom: 128px; }

.section-head { max-width: 780px; margin-bottom: 52px; }
.section-head p { color: var(--mute); font-size: 1.08rem; }
.bg-void .section-head p, .bg-steel .section-head p { color: #99A0AB; }

/* ==========================================================================
   Showcase band
   --------------------------------------------------------------------------
   The one place a photograph is the subject rather than texture. Everywhere
   else an image sits under a heavy scrim; here it gets the full frame and the
   copy retreats into a corner panel with its own gradient, so the picture is
   never fighting the words for the same pixels.
   ========================================================================== */

.showcase {
  position: relative;
  padding: 0;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  /* Copy on the RIGHT. The driver sits left of centre in the frame, and the
     band is wider than the photo's aspect, so cover has no horizontal slack to
     move him with - the panel moves instead. */
  justify-content: flex-end;
  overflow: hidden;
  background: var(--void);
}

.showcase picture,
.showcase img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.showcase img {
  object-fit: cover;
  object-position: 38% 42%;
  /* Only a light knock-back. The point of this section is the photograph. */
  filter: contrast(1.04) saturate(.9) brightness(.94);
}

.showcase-copy {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  padding: 54px 48px 52px;
  color: #fff;
}

/* The gradient belongs to the copy panel, not the whole image - it fades out
   diagonally so the driver and the truck stay clean. */
.showcase-copy::before {
  content: "";
  position: absolute;
  left: -70%; right: -14%; top: -60%; bottom: -20%;
  z-index: -1;
  background: radial-gradient(120% 100% at 88% 88%,
    rgba(8, 9, 11, .96) 0%,
    rgba(8, 9, 11, .88) 30%,
    rgba(8, 9, 11, .58) 56%,
    rgba(8, 9, 11, 0) 82%);
  pointer-events: none;
}

.showcase-copy h2 { color: #fff; margin-bottom: 16px; }
.showcase-copy p { color: #C9CDD4; margin-bottom: 26px; max-width: 34em; }

@media (max-width: 700px) {
  .showcase { min-height: 540px; align-items: stretch; }
  .showcase img { object-position: 46% 38%; }
  .showcase-copy {
    width: 100%;
    padding: 200px 24px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* Stacked, the copy sits over the middle of the frame, so the scrim has to
     become a straight bottom-up fade instead of a corner glow. */
  .showcase-copy::before {
    left: 0; right: 0; top: 0; bottom: 0;
    background: linear-gradient(180deg,
      rgba(8, 9, 11, .30) 0%,
      rgba(8, 9, 11, .74) 42%,
      rgba(8, 9, 11, .96) 100%);
  }
}

/* ==========================================================================
   Equipment tiles
   --------------------------------------------------------------------------
   Hard-edged, hairline-separated, with drawn equipment marks. Not cards -
   there is no shadow, no radius and no lift on hover; the hover is a red
   edge and a colour shift on the icon.
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.tile {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 38px 32px 34px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background .2s;
}
.tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .24s ease;
}
.tile:hover { background: rgba(255,255,255,.028); }
.tile:hover::before { transform: scaleY(1); }

.tile .eq {
  width: 54px; height: 54px;
  margin-bottom: 22px;
  color: var(--red);
  transition: color .2s;
}
.tile:hover .eq { color: var(--amber); }

.tile h3 { color: #fff; margin-bottom: 10px; }
.tile p { color: #99A0AB; font-size: .96rem; margin-bottom: 18px; }

.tile-tag {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(255,176,0,.32);
  padding: 5px 10px;
}

/* ==========================================================================
   Process rail
   --------------------------------------------------------------------------
   Numbered steps down a vertical line. Replaces "three feature cards".
   ========================================================================== */

.rail { border-left: 2px solid var(--bone-2); margin-left: 20px; padding-left: 0; }

.rail-step {
  position: relative;
  padding: 0 0 46px 46px;
}
.rail-step:last-child { padding-bottom: 0; }

.rail-step::before {
  content: "";
  position: absolute;
  left: -9px; top: 5px;
  width: 16px; height: 16px;
  background: var(--red);
  transform: rotate(45deg);
}

.rail-step .n {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--red);
  display: block;
  margin-bottom: 7px;
}
.rail-step h3 { margin-bottom: 9px; }
.rail-step p { color: var(--mute); margin-bottom: 0; }

.bg-void .rail, .bg-steel .rail { border-left-color: var(--steel-600); }
.bg-void .rail-step p, .bg-steel .rail-step p { color: #99A0AB; }

/* ==========================================================================
   Statement block
   --------------------------------------------------------------------------
   For the "why there is no commercial price" argument. Large, quiet, and
   set apart - it is the most important thing on the commercial page.
   ========================================================================== */

.statement {
  border-left: 4px solid var(--amber);
  padding: 8px 0 8px 34px;
}
.statement p {
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(1.24rem, 2.2vw, 1.66rem);
  line-height: 1.42;
  letter-spacing: .005em;
  color: #fff;
  text-transform: none;
}
.statement p + p { margin-top: 20px; }
.statement .attrib {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 24px;
}

/* ==========================================================================
   Tax callout
   ========================================================================== */

.callout {
  border: 2px solid var(--amber);
  padding: 34px 36px;
  background: var(--paper);
  position: relative;
}
.callout .kicker { color: var(--warn); }
.callout h3 { margin-bottom: 12px; }
.callout p { color: var(--mute); margin-bottom: 0; }
.bg-void .callout, .bg-steel .callout { background: transparent; }
.bg-void .callout h3 { color: #fff; }
.bg-void .callout p { color: #99A0AB; }

/* ==========================================================================
   FAQ
   ========================================================================== */

details.faq { border-bottom: 1px solid var(--bone-2); }
details.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 24px 0;
  font-family: var(--head);
  font-weight: 500;
  font-size: 1.14rem;
  letter-spacing: .01em;
  color: var(--ink);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .22s;
}
details.faq[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
details.faq p { color: var(--mute); padding-bottom: 26px; margin: 0; max-width: 62em; }

/* ==========================================================================
   Big call band
   ========================================================================== */

.callband { background: var(--red); color: #fff; text-align: center; padding: 74px 0; }
.callband h2 { color: #fff; margin-bottom: 18px; }
.callband .num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  letter-spacing: -.02em;
  color: #fff;
  display: inline-block;
}
.callband .num:hover { text-decoration: none; color: var(--void); }
.callband .sub {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-top: 14px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card {
  background: var(--paper);
  border: 1px solid var(--bone-2);
  border-top: 3px solid var(--red);
  padding: 38px;
}

fieldset { border: 0; margin: 0 0 34px; padding: 0; }
fieldset:last-of-type { margin-bottom: 22px; }

legend {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 0 18px;
}

.field { margin-bottom: 20px; }
.field-row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.field-row-3 { display: grid; gap: 20px; grid-template-columns: 2fr 1fr 1fr; }

label {
  display: block;
  font-family: var(--head);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
label .optional { color: var(--mute-light); letter-spacing: .04em; }

input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: 13px 15px;
  border: 1px solid #C9CDD4;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
textarea { min-height: 120px; resize: vertical; }

.hint { font-size: .86rem; color: var(--mute); margin-top: 7px; }
.error-text { color: var(--red); font-size: .86rem; font-weight: 600; margin-top: 7px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }

/* Gallon chooser - segmented, mono, no gaps. Reads like a keypad. */
.gallon-picker { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 18px; }
.gallon-picker button {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 22px;
  border: 1px solid #C9CDD4;
  margin: 0 -1px -1px 0;   /* collapse to shared hairlines */
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .14s, color .14s;
  position: relative;
}
.gallon-picker button:hover { background: var(--bone); z-index: 1; }
.gallon-picker button.selected {
  background: var(--void);
  border-color: var(--void);
  color: var(--amber);
  z-index: 2;
}

/* Order summary, styled as a receipt. */
.quote-box {
  background: var(--void);
  padding: 26px 28px;
  margin: 20px 0 8px;
}
.quote-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 11px;
  font-family: var(--mono);
  font-size: .88rem;
  color: #C6CAD2;
}
.quote-line .label { color: var(--mute); letter-spacing: .08em; text-transform: uppercase; font-size: .74rem; }
.quote-line.total {
  border-top: 1px solid var(--hairline-up);
  padding-top: 16px;
  margin-top: 16px;
  margin-bottom: 0;
  align-items: baseline;
}
.quote-line.total .label { color: #fff; font-size: .78rem; }
.quote-line.total span:last-child {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--amber);
  text-shadow: 0 0 22px rgba(255,176,0,.3);
}

.notice { padding: 17px 19px; font-size: .93rem; margin-bottom: 22px; border-left: 4px solid; }
.notice-info  { background: #EEF3FA; border-color: #3F6FB0; color: #21344C; }
.notice-warn  { background: #FFF7E3; border-color: var(--amber); color: #654B00; }
.notice-error { background: #FDEBEB; border-color: var(--red); color: #7A1014; }
.notice-ok    { background: #E8F6EE; border-color: var(--go); color: #0C5433; }

.fineprint {
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--mute);
}

/* ==========================================================================
   Success screen
   ========================================================================== */

.done-card { text-align: center; padding: 62px 38px; }
.done-card h2 { font-size: clamp(2rem, 4vw, 3rem); }
.done-ref {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: .12em;
  color: var(--red);
  margin: 14px 0 20px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--void); color: #8A9098; padding: 76px 0 30px; font-size: .94rem; }
.site-footer .wrap { display: grid; gap: 44px; grid-template-columns: 1.4fr 1fr 1fr; }
.site-footer img { height: 46px; width: auto; margin-bottom: 20px; }
.site-footer h4 {
  font-family: var(--mono);
  font-weight: 500;
  color: #fff;
  font-size: .68rem;
  letter-spacing: .22em;
  margin-bottom: 18px;
}
.site-footer a { color: #C6CAD2; }
.site-footer a:hover { color: var(--red); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 10px; }

.footer-phone {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--amber) !important;
  display: inline-block;
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.footer-phone:hover { text-decoration: none; color: #fff !important; }

.footer-sign {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: #C6CAD2;
  text-transform: uppercase;
}

/* Service-area strip in the footer.
   --------------------------------------------------------------------------
   This is the part that actually earns "heating oil <town> ct" searches.
   The towns are in the LocalBusiness schema too, but Google wants them as
   visible text on the page - markup alone does not rank. Sitewide in the
   footer means every page carries the signal. */
.footer-area {
  grid-column: 1 / -1;
  border-top: 1px solid var(--hairline);
  padding-top: 26px;
  margin-top: 8px;
}
.footer-area h4 { margin-bottom: 12px; }
.footer-area p {
  font-size: .88rem;
  line-height: 1.85;
  color: #8A9098;
  max-width: none;
}
/* nowrap so a two-word town never breaks across lines - without this
   "New Britain" and "East Hampton" split down the middle, because the
   space inside the name is the only break opportunity in the run. */
.footer-area .town { color: #C6CAD2; white-space: nowrap; }
.footer-area .sep { color: var(--red); padding: 0 7px; }

.footer-bottom {
  grid-template-columns: 1fr !important;
  border-top: 1px solid var(--hairline);
  margin-top: 46px;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: #656B74;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
}

/* ==========================================================================
   Mobile call bar
   --------------------------------------------------------------------------
   Fixed to the bottom on phones. Half the people hitting this site are stood
   next to a machine that will not start.
   ========================================================================== */

.callbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: var(--red);
  border-top: 2px solid var(--red-deep);
}
.callbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.06rem;
  color: #fff;
}
.callbar a:hover { text-decoration: none; }
.callbar svg { width: 19px; height: 19px; }

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-body { background: var(--bone); }
.admin-shell { max-width: 1200px; margin: 0 auto; padding: 34px var(--gutter) 90px; }

.admin-bar { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-bottom: 30px; }
.admin-bar h1 { font-size: 2rem; margin: 0; }
.admin-bar .spacer { margin-left: auto; }

.pill {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 11px;
  background: var(--bone-2);
  color: var(--mute);
  white-space: nowrap;
}
.pill.on   { background: #E8F6EE; color: #0C5433; }
.pill.off  { background: #FDEBEB; color: #7A1014; }
.pill.test { background: #FFF7E3; color: #654B00; }

.panel { background: var(--paper); border: 1px solid var(--bone-2); padding: 30px; margin-bottom: 26px; }
.panel h2 { font-size: 1.5rem; margin-bottom: 6px; }
.panel > p.hint { margin-bottom: 24px; }

.price-form { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.price-form .field { margin-bottom: 0; }
.price-input { width: 190px; }
.price-input input {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.7rem;
  padding: 11px 14px;
}

.switch {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: .93rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.switch input { width: 19px; height: 19px; accent-color: var(--red); }

table.records { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.records th, table.records td {
  text-align: left; padding: 14px 11px;
  border-bottom: 1px solid var(--bone-2); vertical-align: top;
}
table.records th {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); font-weight: 500;
}
table.records tr:last-child td { border-bottom: none; }
table.records .num { font-family: var(--mono); font-weight: 700; font-size: 1rem; white-space: nowrap; }
table.records .muted { color: var(--mute); font-size: .84rem; font-family: var(--body); }

.status {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 9px; white-space: nowrap;
}
.status-new       { background: var(--red); color: #fff; }
.status-confirmed { background: var(--bone-2); color: var(--ink); }
.status-scheduled { background: #EEF3FA; color: #21344C; }
.status-delivered { background: #E8F6EE; color: #0C5433; }
.status-cancelled { background: #F1F1EF; color: var(--mute-light); }
.status-quoted    { background: #FFF7E3; color: #654B00; }
.status-won       { background: #E8F6EE; color: #0C5433; }
.status-lost      { background: #F1F1EF; color: var(--mute-light); }

.capture-row { display: flex; gap: 9px; align-items: center; }
.capture-row input { width: 96px; padding: 8px 10px; font-family: var(--mono); font-size: .9rem; }
.capture-row .btn { padding: 9px 15px; font-size: .78rem; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); background: var(--void); }
.login-card {
  width: 100%; max-width: 420px;
  background: var(--paper);
  padding: 34px;
  border-top: 3px solid var(--red);
}
.logo-plate { background: var(--void); padding: 20px 24px; margin-bottom: 28px; }
.login-card .logo-plate img { height: 42px; width: auto; margin: 0 auto; }

.empty { padding: 40px 10px; text-align: center; color: var(--mute-light); font-family: var(--mono); font-size: .84rem; }

/* ==========================================================================
   Utility
   ========================================================================== */

.hidden { display: none !important; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.skip-link { position: absolute; left: -9999px; background: var(--red); color: #fff; padding: 11px 17px; z-index: 200; }
.skip-link:focus { left: 14px; top: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .header-call { display: inline-block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--void);
    border-bottom: 2px solid var(--red);
    padding: 6px var(--gutter) 22px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--hairline); }
  .nav a:not(.nav-call)::after { display: none; }
  .nav-call { text-align: center; margin-top: 16px; border-bottom: none; }

  /* The diagonal seam only works side by side. Stacked, it becomes a
     horizontal band between the two halves. */
  .split { grid-template-columns: 1fr; }
  .split::after {
    top: 50%; bottom: auto; left: -2%; right: -2%;
    width: auto; height: 54px;
    transform: translateY(-50%) skewY(-2deg);
  }
  .split-half { min-height: 0; padding: 62px 34px 58px; }
  .split-half .ghost { font-size: 10rem; right: -10px; bottom: -30px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  /* Stacked, the copy runs the full width of the photo instead of sitting in
     a scrimmed column beside it, so the picture has to give way further. */
  .hero-photo img { opacity: .34; object-position: 58% 42%; }
  .hero-photo::after {
    background: linear-gradient(180deg,
      rgba(8, 9, 11, .82) 0%,
      rgba(8, 9, 11, .58) 38%,
      rgba(8, 9, 11, .92) 100%);
  }
  body { font-size: 16px; }
  section { padding: 64px 0; }
  section.tight { padding: 46px 0; }
  .hero { padding: 58px 0 100px; }
  .cut-top { padding-top: 92px; }
  .cut-bottom { padding-bottom: 92px; }

  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .form-card, .panel, .board-body { padding: 24px; }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }

  .site-footer .wrap { grid-template-columns: 1fr; }
  .admin-shell { padding: 22px 16px 90px; }

  .gallon-picker button { flex: 1 0 30%; padding: 14px 10px; }

  /* Bottom call bar takes over on phones. */

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll table { min-width: 660px; }
}

@media (max-width: 380px) {
  .brand img { height: 36px; }
  .header-call { padding: 9px 12px; font-size: .88rem; }
  .nav-toggle { padding: 8px 11px; margin-left: 8px; }
  .split-half { padding: 50px 22px 46px; }
}

.footer-legal { display: inline-flex; gap: 18px; }
.footer-legal a { color: #656B74; }
.footer-legal a:hover { color: var(--amber); }

@media print {
  .site-header, .site-footer, .btn, .nav, .ticker { display: none; }
  body { color: #000; background: #fff; padding-bottom: 0; }
}

/* ==========================================================================
   Legal pages
   --------------------------------------------------------------------------
   /privacy and /terms. These are not decorative pages - the A2P 10DLC carrier
   review fetches both URLs and reads them, so they have to be plain, complete
   and permanently reachable. Deliberately quiet: no diagonals, no board, no
   photography. Rule 1 still holds - square corners, hairline rules.
   ========================================================================== */

.legal-head {
  background: var(--void);
  color: #fff;
  padding: 74px 0 62px;
  border-bottom: 4px solid var(--red);
}
.legal-head h1 {
  /* Explicit, not inherited: the global h1 rule paints --ink, which is almost
     exactly the --void behind it. Inheriting here renders the title invisible. */
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: .96;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.legal-head p {
  margin-top: 14px;
  color: var(--mute-light);
  font-family: var(--head);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.legal { background: var(--bone); padding: 62px 0 90px; }
.legal .wrap { max-width: 860px; }
.legal-body {
  background: var(--paper);
  border: 1px solid var(--bone-2);
  padding: 52px 54px 58px;
}
.legal-body h2 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 44px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-family: var(--head);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: .03em;
  margin: 26px 0 8px;
}
.legal-body p, .legal-body li {
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.68;
}
.legal-body p + p { margin-top: 14px; }
.legal-body ul { margin: 12px 0 0; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--red); font-weight: 500; }

/* The disclosures the carriers grep for. Boxed so a reviewer scanning the page
   in ten seconds cannot miss them. */
.legal-callout {
  border-left: 4px solid var(--amber);
  background: var(--bone);
  padding: 20px 24px;
  margin: 22px 0;
}
.legal-callout p { color: var(--ink); font-weight: 500; }

.legal-updated {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--bone-2);
  font-family: var(--mono);
  font-size: .84rem;
  color: var(--mute);
  letter-spacing: .03em;
}

@media (max-width: 720px) {
  .legal-body { padding: 32px 24px 38px; }
  .legal { padding: 40px 0 64px; }
}