/* Public Pennyworth Delivery page (/delivery/). Mobile first; theme tokens only,
   so light and dark modes keep their contrast. Meaning never rides on colour:
   answers carry a symbol and words, map rings differ by line style and label.
   No flex `gap`: Safari 13.1.2 (the bidder floor) ignores it; grid gap is fine. */
.dp-hero { padding-bottom:1rem; }
.dp-hero .kicker { font-size:.75rem; }
.dp-hero .sub { font-size:1rem; }
.dp-facts { list-style:none; margin:1.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.dp-facts li { display:flex; flex-direction:column; min-width:0; padding:.75rem .85rem; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.dp-fact-k { font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.dp-fact-v { font-size:1.25rem; font-weight:800; line-height:1.25; color:var(--ink); overflow-wrap:anywhere; }
.dp-fact-n { font-size:.82rem; color:var(--muted); line-height:1.35; }

.dp-body { padding-top:1.4rem; }
.dp-check-grid { display:grid; gap:1rem; }
.dp-check { padding:1rem; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.dp-check h2 { margin:0 0 .6rem; }
.dp-zip-form label { font-size:.9rem; }
.dp-zip-row { display:flex; }
.dp-zip-row input { flex:1; min-width:0; min-height:48px; font-size:1.05rem; border-radius:10px; }
.dp-zip-row button { flex:none; margin-left:.5rem; min-height:48px; min-width:5.5rem; padding:.6rem 1.1rem; border:0; border-radius:10px; background:var(--gold); color:var(--on-gold); font:inherit; font-weight:800; cursor:pointer; }
.dp-zip-row button:focus-visible, .dp-zip-row input:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.dp-hint { margin:.7rem 0 0; font-size:.88rem; color:var(--muted); }
.dp-answer { margin-top:.8rem; padding:.75rem .9rem; border-radius:10px; background:var(--card); color:var(--ink); }
.dp-answer p { margin:.25rem 0 0; font-size:.92rem; }
.dp-answer .dp-answer-head { margin:0; font-size:1.02rem; font-weight:800; }
.dp-yes { border:2px solid var(--calm-positive); }
.dp-no { border:2px dashed var(--calm-negative); }

.dp-map-panel { margin:0; }
/* Own stacking context: Leaflet's internal z-indexes (400–1000) must stay under the sticky site nav (z 90). */
.dp-map { position:relative; z-index:0; isolation:isolate; height:260px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.dp-legend { display:flex; flex-wrap:wrap; margin-top:.35rem; font-size:.82rem; color:var(--ink); }
.dp-key { display:inline-flex; align-items:center; margin:.2rem .9rem 0 0; }
/* Swatches use the map's own fixed colours on a light chip so they read in dark mode too. */
.dp-key::before { content:""; flex:none; display:inline-block; margin-right:.4rem; box-sizing:border-box; }
.dp-key-home::before { width:14px; height:14px; border-radius:50%; background:#17231f; outline:2px solid #fff; }
.dp-ring-solid::before, .dp-ring-dashed::before, .dp-ring-dotted::before, .dp-ring-dashdot::before { width:26px; height:8px; border-top:3px solid #17231f; background:#fff; border-radius:2px; }
.dp-ring-dashed::before { border-top-style:dashed; }
.dp-ring-dotted::before { border-top-style:dotted; }
.dp-ring-dashdot::before { border-top:0; background:repeating-linear-gradient(90deg,#17231f 0 8px,transparent 8px 11px,#17231f 11px 13px,transparent 13px 16px) top/100% 3px no-repeat,#fff; }
.dp-key-zip::before { width:10px; height:10px; border-radius:50%; background:#0a6658; border:1px solid #17231f; outline:2px solid #fff; }
.dp-legend-note { flex-basis:100%; margin-top:.3rem; color:var(--muted); }

.dp-pin { display:inline-block; white-space:nowrap; padding:.2rem .45rem; border-radius:6px; font:800 .75rem/1.2 var(--sans); color:#fff; background:#17231f; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); transform:translate(-50%,-135%); }
/* The visitor's label sits below its point so it never covers the warehouse label. */
.dp-pin-you { background:#fff; color:#17231f; border-color:#17231f; transform:translate(-50%,35%); }
.dp-map .leaflet-control-attribution { font-size:.75rem; }
.dp-ring-tag { display:inline-block; white-space:nowrap; padding:.1rem .35rem; border-radius:5px; font:700 .75rem/1.2 var(--sans); color:#17231f; background:rgba(255,255,255,.9); border:1px solid #17231f; transform:translate(-50%,-50%); }
.dp-map .leaflet-control-zoom a { width:44px; height:44px; line-height:44px; font-size:22px; }

.dp-body h2 { margin-top:1.8rem; }
.dp-bands { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.dp-bands li { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:0 .8rem; padding:.7rem .9rem; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.dp-band-miles { font-weight:700; color:var(--ink); }
.dp-band-fee { font-size:1.35rem; font-weight:900; color:var(--gold); }
.dp-band-note { grid-column:1 / -1; font-size:.82rem; color:var(--muted); }
.dp-small { font-size:.9rem; color:var(--muted); }

.dp-steps { margin:0; padding:0; list-style:none; counter-reset:dp; display:grid; gap:.5rem; }
.dp-steps li { counter-increment:dp; position:relative; padding:.75rem .9rem .75rem 3rem; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:.93rem; color:var(--ink); }
.dp-steps li::before { content:counter(dp); position:absolute; left:.85rem; top:.75rem; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--gold); color:var(--on-gold); font-weight:800; text-align:center; line-height:1.6rem; }
.dp-trust { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.dp-trust li { display:flex; align-items:flex-start; font-size:.93rem; color:var(--ink); }
.dp-trust li > span { flex:none; margin-right:.6rem; }
/* Stays a list item so the disclosure triangle shows; padding gives the 44px target. */
.dp-faq summary { display:list-item; min-height:44px; padding:.55rem 0; box-sizing:border-box; }
.dp-zips { display:flex; flex-wrap:wrap; }
.dp-zips span { margin:0 .35rem .35rem 0; padding:.15rem .5rem; border:1px solid var(--line); border-radius:999px; font-variant-numeric:tabular-nums; font-size:.85rem; color:var(--ink); }
.dp-terms a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-decoration:underline; }

@media (min-width:760px) {
  .dp-facts { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .dp-check-grid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
  .dp-map { height:380px; }
  .dp-bands { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  .dp-steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .dp-trust { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Benefit, decision and continuation come before supporting detail. */
.dp-back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:.5rem;
  color:var(--ink); font-size:.9rem; font-weight:700; text-decoration:underline; text-underline-offset:.2em; }
.dp-hero .dp-benefit { color:var(--ink); font-weight:700; font-size:clamp(1.15rem,3vw,1.5rem); margin-top:.8rem; }
.dp-hero-detail { max-width:62ch; margin:.6rem 0 0; color:var(--muted); font-size:.95rem; line-height:1.6; }
.dp-hero-links { display:flex; flex-wrap:wrap; align-items:center; margin-top:1rem; }
.dp-hero-links a { display:inline-flex; align-items:center; min-height:48px; margin:0 1.2rem .5rem 0;
  color:var(--ink); font-weight:800; text-decoration:underline; text-underline-offset:.2em; }
.dp-hero-links .dp-primary { padding:.65rem 1rem; background:var(--gold); color:var(--on-gold); border-radius:9px; text-decoration:none; }
.dp-hero-links a span { margin-left:.7rem; }
.dp-body .dp-facts { margin:0 0 1.2rem; }
.dp-check .dp-check-intro { margin:0 0 .8rem; font-size:.9rem; color:var(--muted); }
.dp-result-link { display:inline-flex; align-items:center; min-height:48px; margin-top:.4rem;
  color:var(--ink); font-weight:800; text-decoration:underline; text-underline-offset:.2em; }
.dp-next { margin-top:1.5rem; }
.dp-next-grid { display:grid; gap:.7rem; }
.dp-next-grid article { padding:1rem; background:var(--card); border:1px solid var(--line); border-radius:12px; min-width:0; }
.dp-next-label { font-size:.8rem; color:var(--muted); font-weight:750; }
.dp-next-grid h3 { margin:.35rem 0 .5rem; font-size:1.1rem; line-height:1.3; color:var(--ink); }
.dp-next-grid p { font-size:.92rem; margin:0; color:var(--ink); }
.dp-next-grid a { display:inline-flex; align-items:center; min-height:48px; margin-top:.5rem;
  color:var(--ink); font-weight:800; text-decoration:underline; text-underline-offset:.2em; }
.dp-body a:focus-visible, .dp-hero a:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
#dp-check-title, #dp-prices { scroll-margin-top:6rem; }
@media (min-width:760px) { .dp-next-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }