/* ============================================================================
   DAS CONTACT — the navy slash
   ----------------------------------------------------------------------------
   Loaded AFTER the page's own inline <style> so it wins on equal specificity.

   Jayden 2026-09-19: "redesign that header to have the same background as we
   have on our sign-in page (the off-duty one) ... the navy slash background
   and stuff we have on off duty and retention."

   THE GROUND IS A LITERAL TRACE of retention-opportunity
   components/drive/drive.module.css — itself the ODNDR sign-in frame, itself
   Stripe's. Copied exactly:
     .guide  dashed verticals at 14.3% · 32.2% · 50% · 67.8% · 85.7%
     .band   clip-path: polygon(0 0, 100% 0, 100% 14%, 0 49%)
     .card   radius 4px, 0 15px 35px 0 rgba(60,66,87,.08),
                          0 5px 15px 0 rgba(0,0,0,.12)
     tokens  ink #1A1F36 · label #3C4257 · muted #697386 · hairline #E3E8EE

   THE ONE DELIBERATE DEPARTURE: the gradient is rebuilt from DAS's OWN navy
   family per BRAND-KIT.md, not Off Duty's. Stop-for-stop, same positions,
   same 100deg, DAS hues:
       #0A1628 0%   -> #060E24 0%
       #0E1B2E 22%  -> #0C1840 22%
       #1B3F6B 45%  -> #16264F 45%
       #215387 62%  -> #1A2E6E 62%
       #5C9BEA 82%  -> #4E8BE8 82%
       #A9CBF5 100% -> #9CC4F5 100%
   Copying Off Duty's blues onto DAS would be the off-brand mistake made
   earlier in this programme (#0E1B2E / #2F6BFF shipped and had to be pulled).

   Composition over that ground, traced from four contact pages:
     ECOM  Fiasco          THE DIRECTORY. Named contacts grouped by PURPOSE —
                           general, new business, purchasing — beside the form
                           rather than buried under it. A fleet buyer wants to
                           know who they are reaching.
     ECOM  In Common With  the contact TABLE: label left, value right, hairline
                           between every row. And the form on the RIGHT.
     TECH  Melius          the form as a single card against the ground.
     TECH  Farm Minerals   the oversized headline sitting ON the ground with
                           the direct details in small caps beneath it.
   ========================================================================== */

.dc {
  --dc-ink:      #1A1F36;
  --dc-label:    #3C4257;
  --dc-muted:    #697386;
  --dc-hair:     #E3E8EE;
  --dc-navy:     #1A2E6E;
  --dc-navy-dk:  #16264F;
}

/* ── The ground ─────────────────────────────────────────────────────────── */
.dc-ground { position: relative; isolation: isolate; overflow: clip; background: #fff; }
.dc-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dc-guide { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--dc-hair); }
/* The band is held to ONE VIEWPORT so the slash keeps Off Duty's angle. Its
   clip-path is in percentages of its own box — letting it span this whole
   scrolling page would flatten 14%/49% into a shallow wedge and the trace
   would stop being a trace. */
.dc-band {
  position: absolute; top: 0; left: 0; right: 0; height: 100dvh;
  clip-path: polygon(0 0, 100% 0, 100% 14%, 0 49%);
  background: linear-gradient(100deg, #060E24 0%, #0C1840 22%, #16264F 45%, #1A2E6E 62%, #4E8BE8 82%, #9CC4F5 100%);
}
.dc-ground > *:not(.dc-stage) { position: relative; z-index: 1; }

/* ── The headline, ON the ground (Farm Minerals) ────────────────────────── */
.contact-hero { background: none !important; padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 64px) !important; }
.contact-hero .container { max-width: 1120px; }
.ch-eyebrow {
  color: rgba(255, 255, 255, .78) !important;
  font-size: .6875rem !important; font-weight: 700 !important;
  letter-spacing: .16em !important; text-transform: uppercase;
  margin-bottom: 18px !important;
}
.ch-title {
  color: #fff !important;
  font-size: clamp(2.25rem, 5.4vw, 4rem) !important;
  line-height: 1.02 !important; letter-spacing: -.035em !important; font-weight: 700 !important;
  margin: 0 0 20px !important; text-wrap: balance;
}
.ch-title span { color: #9CC4F5 !important; }
.ch-subtitle {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 1.0625rem !important; line-height: 1.6 !important;
  max-width: 48ch; margin: 0 !important;
}

/* Farm Minerals sets the direct details in small caps under the headline —
   the fastest path for someone who does not want a form at all. */
.dc-direct { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 32px; }
.dc-direct a, .dc-direct span { display: block; }
.dc-direct dt {
  font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); margin-bottom: 5px;
}
.dc-direct dd { margin: 0; font-size: .9375rem; font-weight: 600; color: #fff; }
.dc-direct dd a { color: #fff; }
.dc-direct dd a:hover { color: #9CC4F5; text-decoration: underline; text-underline-offset: 3px; }

/* ── The body grid — directory LEFT, form RIGHT ──────────────────────────
   Fiasco, In Common With and Melius all put the form on the right. The old
   layout had it left; order flips it without touching the markup, so the
   form's own DOM, ids and submit handler are untouched. */
.contact-main { background: none !important; padding-bottom: clamp(56px, 8vw, 96px) !important; }
.contact-grid {
  max-width: 1120px !important;
  grid-template-columns: 340px minmax(0, 1fr) !important;
  gap: 56px !important;
  align-items: start;
}
.contact-grid > .dc-formcol { order: 2; }   /* the form column, by name not position */
.info-panel { order: 1; }
@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  .contact-grid > .dc-formcol { order: 1; } /* on a phone the form comes first */
  .info-panel { order: 2; }
}

/* ── The form, as one card (Melius / the Off Duty card) ─────────────────── */
.contact-grid > .dc-formcol {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 15px 35px 0 rgba(60, 66, 87, .08), 0 5px 15px 0 rgba(0, 0, 0, .12);
  padding: clamp(28px, 4vw, 48px);
}
.form-section-head { margin-bottom: 28px; }
.form-eyebrow {
  font-size: .625rem !important; font-weight: 700 !important;
  letter-spacing: .16em !important; text-transform: uppercase; color: var(--dc-muted) !important;
}
.form-section-title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem) !important;
  line-height: 1.2 !important; letter-spacing: -.022em !important; font-weight: 700 !important;
  color: var(--dc-ink) !important; margin: 10px 0 8px !important;
}
.form-section-sub { font-size: .875rem !important; line-height: 1.6; color: var(--dc-muted) !important; }

/* The frame's input ring — 1:1 from drive.module.css .opt */
.cf-input, .cf-select {
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 1px rgba(60, 66, 87, .16), 0 1px 1px rgba(0, 0, 0, .12) !important;
  background: #fff !important;
  color: var(--dc-ink) !important;
  font-size: .9375rem !important;
  padding: 11px 14px !important;
  transition: box-shadow .15s !important;
}
.cf-input:hover, .cf-select:hover { box-shadow: 0 0 0 1px rgba(60, 66, 87, .32), 0 1px 1px rgba(0, 0, 0, .12) !important; }
.cf-input:focus, .cf-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--dc-navy) !important;
}
.cf-label { font-size: .8125rem !important; font-weight: 600 !important; color: var(--dc-label) !important; }
.cf-req { color: var(--dc-navy) !important; }
.cf-submit {
  border-radius: 6px !important;
  background: var(--dc-navy) !important;
  color: #fff !important;
  font-size: 1rem !important; font-weight: 600 !important;
  min-height: 44px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 2px 5px rgba(60, 66, 87, .08) !important;
}
.cf-submit:hover { background: var(--dc-navy-dk) !important; }
.cf-fu {
  border-radius: 6px !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px rgba(60, 66, 87, .16), 0 1px 1px rgba(0, 0, 0, .12) !important;
  background: #fff !important;
  color: var(--dc-ink) !important;
}
.cf-fu.is-active { box-shadow: 0 0 0 2px var(--dc-navy) !important; background: #F5F9FF !important; color: var(--dc-navy) !important; }

/* ── The directory (Fiasco + In Common With) ────────────────────────────── */
.info-panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.dc-dir-group + .dc-dir-group { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--dc-hair); }
.dc-dir-head {
  display: block;
  font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dc-muted); margin-bottom: 14px;
}
/* In Common With's table: label left, value right, a hairline under each row */
.dc-tbl { display: flex; flex-direction: column; }
.dc-tbl-row {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--dc-hair);
  font-size: .8125rem; line-height: 1.5;
}
.dc-tbl-row:last-child { border-bottom: 0; }
.dc-tbl-k { color: var(--dc-muted); }
.dc-tbl-v { color: var(--dc-ink); font-weight: 500; }
.dc-tbl-v a { color: var(--dc-navy); font-weight: 600; }
.dc-tbl-v a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dc-tbl-v small { display: block; margin-top: 3px; font-size: .6875rem; color: var(--dc-muted); font-weight: 400; }

/* Fiasco's "what happens next" — a numbered sequence, ordinals earned */
.dc-steps { display: flex; flex-direction: column; counter-reset: dcstep; }
.dc-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--dc-hair); }
.dc-step:first-child { border-top: 0; padding-top: 0; }
.dc-step-n {
  font-size: .625rem; font-weight: 700; color: var(--dc-muted);
  font-variant-numeric: tabular-nums; letter-spacing: .08em; padding-top: 2px;
}
.dc-step b { display: block; font-size: .8125rem; font-weight: 700; color: var(--dc-ink); margin-bottom: 3px; }
.dc-step p { margin: 0; font-size: .75rem; line-height: 1.55; color: var(--dc-muted); }

@media (prefers-reduced-motion: reduce) { .cf-input, .cf-select { transition: none !important; } }

/* ── The headline on the dark band ──────────────────────────────────────
   .ch-title is Anton with a VERTICAL NAVY GRADIENT painted through
   background-clip:text, which sets -webkit-text-fill-color:transparent. That
   wins over `color`, so setting color:#fff above did nothing and the headline
   computed as rgba(0,0,0,0) — navy-on-navy, i.e. invisible, which is exactly
   the failure this page's own brand notes warn about for dark sections.
   The gradient device and the Anton face are kept; only the ramp is inverted
   to the light end of the DAS navy family. */
.dc .ch-title {
  background: linear-gradient(180deg, #FFFFFF 0%, #E8F0FC 52%, #9CC4F5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* The second line was navy-on-navy for the same reason. */
.dc .ch-title span {
  -webkit-text-fill-color: #9CC4F5 !important;
  background: none !important;
  color: #9CC4F5 !important;
}

/* Farm Minerals sets the headline hard left against the ground, and the
   directory below rails left too — a centred hero over a left-falling slash
   fights both. */
.dc .contact-hero, .dc .contact-hero .container { text-align: left !important; }
.dc .ch-title { margin-left: 0 !important; margin-right: 0 !important; max-width: 16ch !important; }
.dc .ch-subtitle { margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 720px) { .dc .ch-title { max-width: none !important; } }

/* ── Align the content to the guides ────────────────────────────────────
   In the Off Duty frame the logo, the footer links and the card all hang off
   calc(14.3% + 8px) — the first dashed guide. That alignment is what makes
   the guides read as a grid the page obeys rather than as decoration behind
   it. Content therefore spans guide 1 to guide 5 (14.3% -> 85.7%). */
@media (min-width: 1024px) {
  .dc .contact-hero .container,
  .dc .contact-grid {
    width: 71.4% !important;
    max-width: none !important;
    margin-left: 14.3% !important;
    margin-right: 14.3% !important;
    padding-left: 8px !important;
    padding-right: 0 !important;
  }
}
/* Below the guide breakpoint the guides are too close together to align to,
   so the content falls back to ordinary page gutters. */
@media (max-width: 1023px) {
  .dc .dc-stage { display: none; }
}

/* ============================================================================
   THE SLASH WAS EATING THE HERO COPY — WHITE TEXT ON WHITE GROUND
   ----------------------------------------------------------------------------
   Found 2026-09-25 while matching these pages to ODNDR. Measured on the LIVE
   page at 1280x900, against the band's own clip-path geometry rather than by
   eye — the band's lower edge runs from 49% of its height at x=0 to 14% at
   x=100%, so for any element you can compute exactly where it crosses:

       .ch-subtitle   bottom 435   diagonal at its right edge 331   104px over
       .dc-direct     bottom 512   diagonal at its right edge 236   275px over
                      dt rgba(255,255,255,.62) · dd #fff · "302.681.0995"

   Both are white. Past the diagonal the ground is white. So the last two lines
   of the hero paragraph and the ENTIRE call/email/hours block have been
   invisible in production — the phone number most of all, which is the one
   thing on this page a buyer in a hurry actually wants.

   WHY IT HAPPENS, and why it is not a one-line colour change: the band was
   `height: 100dvh`. The diagonal's depth therefore moved with the visitor's
   window. The headline only clears it at all on a tall window — at 1280x900
   there are 22px to spare, and on a 1280x700 laptop the headline's own bottom
   corner falls past the diagonal and starts disappearing too. ODNDR hit this
   first and left the answer in its own CSS:

       "band (FIXED 760px, never 100vh, so the diagonal always clears the
        left copy)"                       — odndr-web stripe-demo.module.css

   (Quoted, not pasted as a comment: a nested comment-close inside this block
   ends it early, and every rule after it is swallowed by the parser. That is
   exactly what happened on the first attempt at this fix — the band kept its
   old height and the measurement caught it.)

   So: pin the height, then place the copy against a diagonal that no longer
   moves. 940px is the smallest height that clears this headline at every
   window with room to spare (the headline's right edge sits at ~51% across,
   where the band is 0.49 - 0.35 x 0.51 = 31% deep; 940 x 0.31 = 292px, against
   a headline that ends at 258px below the band's top).

   Everything BELOW the diagonal then takes ink instead of white. That is also
   what ODNDR does — its headline is white on the band and its list, its links
   and its phone number are #0A2540 / #425466 / #215387 on the white underneath.
   The gap this opens between headline and paragraph is the same gap ODNDR has
   (`.with { margin: 150px 0 0 }`); the oversized watermark word already sits in
   it, which is what that word is for.
   ========================================================================== */

.dc-band { height: 940px; }

/* Below the slash — ink, not white. Colours are ODNDR's, not invented. */
.dc .ch-subtitle {
  color: #425466 !important;
  margin-top: 208px !important;
  max-width: 54ch;
}
.dc .dc-direct dt { color: #697386; }
.dc .dc-direct dd { color: #0A2540; }
.dc .dc-direct dd a { color: #215387; }
.dc .dc-direct dd a:hover { color: #0A2540; text-decoration: underline; text-underline-offset: 3px; }

/* On a phone the band's clip-path is re-cut shallower and the copy is a single
   narrow column, so the diagonal clears the headline on its own and the long
   push-down would only leave a dead navy field. */
@media (max-width: 767px) {
  .dc-band { height: 560px; }
  .dc .ch-subtitle { margin-top: 20px !important; }

  /* The direct details are label-left / value-right pairs, which works until
     the value is an email address. Measured at 375px: the row gives the value
     246px and info@driverappreciationsolutions.com needs 272px, so it wrapped
     and left a single "m" stranded on its own line. Stacking the label above
     the value hands it the full 295px and it fits on one line. */
  .dc .dc-direct > div { display: block; }
  .dc .dc-direct dt { margin-bottom: 3px; }
  .dc .dc-direct dd { text-align: left; }
}

/* THE HEADLINE HAS TO FIT ABOVE THE SLASH — INCLUDING THE THREE-LINE ONE.
   The quote page's headline runs to three lines ("Need a Quote, Purchase
   Order, / or Net 30 Terms?"). Measured per line with a Range rather than off
   the element box, the third line's bottom sat 24px BELOW the diagonal — so
   its caps were rendering in the gradient's pale end (#9CC4F5) on white.
   Two small moves buy the clearance without touching the copy: the headline
   comes down a step, and the hero starts higher in the band's deepest part.
   Re-measured after: every line clears on both pages. */
.dc .contact-hero {
  padding-top: clamp(44px, 6.5vw, 76px) !important;
}

/* ============================================================================
   BELOW 1024 THE BAND IS HIDDEN — SO THE COPY HAS TO STOP BEING WHITE
   ----------------------------------------------------------------------------
   `.dc .dc-stage { display: none }` above turns the navy band and the dashed
   guides off under 1024px, because the guides sit too close together to align
   to. Reasonable. But the hero copy kept the colours it was given FOR the band:

       .ch-eyebrow   rgba(255,255,255,.78)      invisible
       .ch-title     transparent + a white -> #9CC4F5 gradient clipped to text
                                                 a pale ghost on white
       .ch-title span  #9CC4F5                   near-invisible
       .ch-subtitle  rgba(255,255,255,.82)      invisible  (fixed above)
       .dc-direct    #fff                        invisible  (fixed above)

   So on every phone and tablet the contact and quote heroes have been rendering
   a headline you can barely read and an eyebrow you cannot. The desktop bug at
   least needed a diagonal to explain it; this one is just white on white for
   the entire width range that most of the traffic arrives on.

   Under 1024 the ground is plain white, so the copy takes the site's ordinary
   light-ground treatment — the navy gradient styles.css already defines for
   every other page hero. Nothing invented; it is what this headline looks like
   everywhere else on the site.
   ========================================================================== */
@media (max-width: 1023px) {
  .dc .ch-eyebrow { color: #1A2E6E !important; }
  .dc .ch-title {
    color: transparent !important;
    background: linear-gradient(180deg, #16264F 0%, #1A2E6E 46%, #3A5FC0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }
  /* The highlighted half of the headline. `inherit` looked right — let the
     parent's clipped gradient paint it — but the measurement said otherwise:
     it kept resolving to #9CC4F5, 1.81:1 on white. A solid navy is what this
     span is on every other DAS hero, it needs no gradient to cooperate with,
     and it measures 12.65:1. */
  .dc .ch-title span {
    color: #1A2E6E !important;
    background: none !important;
    -webkit-text-fill-color: #1A2E6E !important;
  }
  .dc .ch-subtitle { color: #425466 !important; }
}

/* ============================================================================
   THE TWO-COLUMN LAYOUT — ODNDR'S, NOT A STACK
   ----------------------------------------------------------------------------
   Jayden: "its sized different its at the top so its covering over white space
   match the layout too."

   ODNDR is one grid and everything hangs off that:

       .main  max-width 1080 · padding 36px 16px 96px
              grid · 1fr 540px · gap 56px · align-items: start

   Copy left, card right, BOTH flush to the top of the band. The card therefore
   begins on the navy and runs down across the diagonal onto the white — the
   overlap Jayden is pointing at. DAS had a full-width hero stacked ABOVE a
   separate form section, so the card started hundreds of pixels below the band
   and nothing ever crossed it. scripts/hero-into-grid.mjs moved the hero block
   inside .contact-grid; this places the three children in two columns.

   TWO DEPARTURES FROM 1080-CENTRED, both to keep DAS's own dashed-guide
   alignment, which is an earlier decision on this page and still correct:

     · the grid spans guide 1 to guide 5 (14.3% -> 85.7%) instead of a centred
       1080px, so the columns still land on the guides;
     · the card is 50% of that span rather than a hard 540px — ODNDR's card is
       540 of 1080, which IS 50%, so this is the same proportion expressed
       against a narrower frame.

   The band comes DOWN to 600px here. It was 940 because the old stacked hero
   put a wide headline far across the page and needed a deep diagonal to sit
   on. In two columns the copy is a narrow left column, so the diagonal clears
   it much sooner, and 940 would have left a dead navy field. Same reason ODNDR
   runs 760 rather than a viewport height.
   ========================================================================== */

@media (min-width: 1024px) {
  .dc .contact-main { padding-top: 36px !important; }

  .dc .contact-grid {
    grid-template-columns: minmax(0, 1fr) 50% !important;
    column-gap: 56px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  /* Column 1, row 1 — the hero copy, stripped of the padding and centring it
     carried when it was a full-width band of its own. */
  .dc .contact-grid > .contact-hero {
    grid-column: 1; grid-row: 1;
    order: 0 !important;
    padding: 0 !important;
    background: none !important;
    text-align: left !important;
  }
  .dc .contact-grid > .contact-hero .container {
    width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* Column 1, row 2 — the directory, under the copy. */
  .dc .contact-grid > .info-panel {
    grid-column: 1; grid-row: 2;
    order: 0 !important;
    margin-top: 44px;
  }

  /* Column 2, both rows — the card, top-aligned with the headline. */
  .dc .contact-grid > .dc-formcol {
    grid-column: 2; grid-row: 1 / span 2;
    order: 0 !important;
  }

  /* 760px is ODNDR's own figure and it is the one that leaves margin here too.
     At 680 the quote headline's third line cleared the diagonal by exactly 0px
     at 1440 — passing the check and one font-metric away from failing it. */
  .dc-band { height: 760px; }

  /* THE HEADLINE MUST TRACK THE COLUMN, NOT THE VIEWPORT.
     The left column is a fixed fraction of the window here — 71.4% of it,
     halved — so at 1440 it is 449px and at 1024 only 300px. A headline sized
     for the wide case wrapped to four and five lines in the narrow one, and
     measured per line, the last two hung 30px and 64px past the diagonal. The
     clamp below is the same 46px at 1440, scaled linearly down with the column
     so the line count stays put. */
  .dc .contact-grid > .contact-hero .ch-title {
    font-size: clamp(1.75rem, 3.2vw, 2.875rem) !important;
  }

  /* The long push-down existed to get the paragraph clear of a 940px band's
     diagonal. At 600 in a narrow column it is far too much — the real figure
     is measured below and set here. */
  /* GETTING THE PARAGRAPH BELOW THE DIAGONAL, ROBUSTLY.
     ODNDR pushes its list down with a fixed `margin: 150px 0 0`. A fixed push
     does not survive here, because DAS's two headlines wrap to different
     heights and each one wraps differently again as the column narrows: at
     1024 the contact paragraph landed 5px ABOVE the diagonal — dark ink on
     navy — while the quote paragraph, under a taller headline, had 32px to
     spare. Same rule, opposite failures.

     What IS constant is the geometry. Measured on both pages at 1024 and 1440:

         diagonal depth at the column's left edge   397 / 398 / 397 / 398
         headline top                               143 / 143 / 145 / 145

     Both fixed — the band height is fixed and the headline starts under a
     fixed nav and padding. So the headline gets a MINIMUM BLOCK HEIGHT instead
     of the paragraph getting a margin. However many lines the headline takes,
     the paragraph begins at the same y, ~15px clear of the slash, on both
     pages at every width. 270 = 398 - 143 + 15. */
  .dc .contact-grid > .contact-hero .ch-title {
    min-height: 270px;
    margin-bottom: 0 !important;
  }
  .dc .ch-subtitle { margin-top: 0 !important; }
}

/* Under 1024 the grid is already a single column and the band is hidden, so
   none of the above applies and the page reads top to bottom: copy, card,
   directory. */

/* WHY .dc-formcol EXISTS. The rules above used to say
   `.contact-grid > *:first-child`, which is a description of WHERE the form
   column sat, not of WHAT it is. Moving the hero block into the grid put
   something in front of it, and the hero silently inherited the white card
   background, the shadow, the padding and the column-2 placement — landing on
   top of the real card. Named, it cannot happen again.
   The hero is now first in the DOM, which is also the right reading order:
   headline, then the form. Grid placement, not source order, decides where the
   two columns appear. */

/* ============================================================================
   THE BOOKED PAGE — ticket, checks, add-to-calendar, prep
   ----------------------------------------------------------------------------
   booked.html is generated from contact.html (scripts/build-booked-page.mjs) so
   it inherits this file's whole layout: the band, the guides, the two-column
   grid, the headline min-height, the slash-safe colours. Only these four blocks
   are new, and every value is ODNDR's own, from
   odndr-web/app/(public)/contact/booked + stripe-demo.module.css, with the one
   substitution this site always makes: DAS navy in place of Off Duty's blues
   (BRAND-KIT.md; shipping #0E1B2E on a DAS page is a mistake already made once
   and pulled).
   ========================================================================== */

/* ── What happens next, in the left column ─────────────────────────────────
   ODNDR: .checks — list-style none, 12px gap, 15px/1.45, #425466, a filled
   tick in a pale disc. It sits BELOW the diagonal, so it takes ink like the
   paragraph above it does. */
.dc .dc-checks {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 46ch;
}
.dc .dc-checks li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: #425466;
}
.dc .dc-tick { flex: none; margin-top: 3px; }
.dc .dc-tick svg { display: block; width: 15px; height: 15px; }
.dc .dc-tick circle { fill: #E3ECF7; }
.dc .dc-tick path { fill: none; stroke: #1A2E6E; stroke-width: 1.8; }

/* ── The ticket ────────────────────────────────────────────────────────────
   ODNDR: .ticket / .ticketTop / .dl. A dark header strip naming the meeting,
   then a hairline-ruled definition list. The 1px grid gap over a #E3E8EE
   background IS the hairline — no borders on the cells. */
.dc .dc-ticket {
  margin-top: 16px;
  border: 1px solid var(--dc-hair);
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
}
.dc .dc-ticket-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--dc-navy-dk);
  color: #fff;
}
.dc .dc-ticket-ic {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(156, 196, 245, .18);
  color: #9CC4F5;
  display: grid; place-items: center;
  flex: none;
}
.dc .dc-ticket-ic svg { width: 18px; height: 18px; display: block; }
.dc .dc-ticket-top b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.dc .dc-ticket-top span span { font-size: 12.5px; color: rgba(255, 255, 255, .72); }

.dc .dc-dl { margin: 0; background: var(--dc-hair); display: grid; gap: 1px; }
.dc .dc-dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1px; background: var(--dc-hair); }
.dc .dc-dl dt, .dc .dc-dl dd { margin: 0; background: #fff; padding: 10px 16px; font-size: 14px; line-height: 1.45; }
.dc .dc-dl dt { color: #697386; }
.dc .dc-dl dd { color: #0A2540; }
@media (max-width: 560px) {
  .dc .dc-dl > div { grid-template-columns: 90px minmax(0, 1fr); }
  .dc .dc-dl dt, .dc .dc-dl dd { padding: 9px 12px; }
}

/* ── Add to calendar ───────────────────────────────────────────────────────
   The webinar confirmation page's block: one statement, one reason, three
   destinations. Outlook leads because this audience is Microsoft-shaped;
   Google and the .ics are equal alternatives, so they are ghosts rather than
   a hierarchy of two more primaries. */
.dc .dc-cal {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 6px;
  background: #F6F9FC;
}
.dc .dc-cal b { display: block; font-size: 14px; font-weight: 600; color: #0A2540; }
.dc .dc-cal p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #425466; }
.dc .dc-cal-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dc .dc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--dc-navy); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.dc .dc-btn:hover { background: var(--dc-navy-dk); }
.dc .dc-btn-ghost { background: #fff; color: #0A2540; border-color: #D5DBE3; }
.dc .dc-btn-ghost:hover { background: #fff; border-color: var(--dc-navy); color: var(--dc-navy); }
.dc .dc-btn:focus-visible { outline: 2px solid var(--dc-navy); outline-offset: 3px; }
/* No usable time in the booking: the buttons are switched OFF rather than
   pointing at the wrong hour, and the note beside them says why. */
.dc .dc-btn.is-off { opacity: .45; pointer-events: none; }
.dc .dc-cal-note { margin-top: 10px; font-size: 12.5px; color: #697386; }

/* ── What to bring ─────────────────────────────────────────────────────── */
.dc .dc-prep {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #F6F9FC;
  text-align: left;
}
.dc .dc-prep b { display: block; font-size: 13px; font-weight: 600; color: #0A2540; margin-bottom: 6px; }
.dc .dc-prep ul { margin: 0; padding: 0 0 0 18px; }
.dc .dc-prep li { font-size: 13.5px; line-height: 1.55; color: #425466; }

/* ODNDR sets this note in #8792A2. Measured, that is 3.15:1 on white — fine
   for large text, short of the 4.5:1 that 13px body copy needs, and this is the
   line that tells someone how to RESCHEDULE. #697386 is the muted grey already
   used for the ticket's labels and measures 4.78:1. */
.dc .dc-small { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: #697386; }
.dc .dc-small a { color: var(--dc-navy); font-weight: 600; text-decoration: none; }
.dc .dc-alt {
  margin: 16px 0 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  border-radius: 999px; border: 1px solid #D5DBE3;
  font-size: 14px; font-weight: 600; color: #0A2540; background: #fff;
  text-decoration: none;
}
.dc .dc-alt:hover { border-color: var(--dc-navy); color: var(--dc-navy); }