/* The three "How it works" deep pages (/how-ai-decides, /be-quoted, /track-record).
   Oliver 2026-09-28 (#26): "so bland rn" + header missing / logo over the headline.
   Built by scripts/mobile_deep_pages.py; phone first, centred on desktop. */
.deep-page { background: var(--bg); }
.deep-page .rv, .deep-page .rv.in { opacity: 1 !important; transform: none !important; }
/* styles.css pulls <main> up under the home nav; that put content over these heroes. */
.deep-page main.dp-main { margin-top: 0; }
.dp-wrap { width: min(100% - 32px, 1080px); margin-inline: auto; }

/* Top bar: always visible, never over the headline. */
.dp-nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 max(16px, calc((100% - 1080px) / 2));
  background: rgba(246, 248, 251, .82); border-bottom: 1px solid rgba(15, 42, 74, .08);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
}
.dp-nav .logo {
  position: static; font: 700 24px/1 "Poppins", var(--sans); letter-spacing: -.03em; color: var(--forest); text-decoration: none;
}
.dp-nav .logo b { color: var(--leaf); }
.dp-back {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(15, 42, 74, .14); background: #fff; color: var(--forest);
  font: 600 13.5px/1 var(--sans); text-decoration: none;
}
.dp-back:hover { background: var(--forest-wash); }

/* Sky band hero. */
.dp-hero {
  position: relative; overflow: hidden; margin: 10px 10px 0; border-radius: 28px;
  padding: 34px 0 40px; color: #fff; isolation: isolate;
  background: linear-gradient(160deg, #0f2a4a 0%, #1c58a8 55%, #3c82d1 100%);
}
.dp-hero::before, .dp-hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(28px); pointer-events: none;
}
.dp-hero::before { width: 320px; height: 150px; right: -90px; bottom: -40px; background: rgba(255, 255, 255, .28); }
.dp-hero::after { width: 240px; height: 110px; left: -80px; top: -30px; background: rgba(153, 195, 232, .35); }
.dp-step {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.dp-dots { display: inline-flex; gap: 5px; }
.dp-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.dp-dots i.on { width: 18px; background: #fff; }
.dp-hero h1 {
  margin: 0; max-width: 18ch; font: 700 clamp(32px, 8.4vw, 56px)/1.06 var(--sans); letter-spacing: -.035em;
  color: #fff; text-wrap: balance;
}
.dp-hero h1 em { font-style: normal; color: var(--sky-3); }
.dp-lede { margin: 14px 0 0; max-width: 46ch; font: 400 17px/1.5 var(--sans); color: rgba(255, 255, 255, .86); }

/* Content: the lifted section, without its own heading. */
.dp-main > .section:first-child { padding-top: 26px !important; }
.dp-main .deep { padding-top: 0 !important; margin-top: 0 !important; }
.dp-main .deep-copy { gap: 14px; }
.dp-main .facts { display: grid !important; gap: 10px !important; grid-template-columns: 1fr !important; margin: 0 !important; }
.dp-point {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 16px 14px;
  border-radius: 18px; background: #fff; border: 1px solid rgba(15, 42, 74, .08);
  box-shadow: 0 1px 2px rgba(15, 42, 74, .04);
}
.dp-ic {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--forest-wash); color: var(--sky-1);
}
.dp-ic svg { width: 18px; height: 18px; }
.dp-point b { display: block; margin: 1px 0 3px; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.dp-point p { margin: 0; font: 400 14.5px/1.45 var(--sans); color: var(--soft); }
.dp-main .facts-note { margin: 4px 0 0 !important; border-radius: 18px !important; }

/* Next page card. */
.dp-next {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  margin: 8px 0 34px; padding: 22px 20px; border-radius: 22px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #0f2a4a, #1c58a8);
  box-shadow: 0 10px 26px -14px rgba(15, 42, 74, .55);
}
.dp-next-k { grid-column: 1; font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sky-3); }
.dp-next b { grid-column: 1; font: 600 19px/1.25 var(--sans); letter-spacing: -.015em; }
.dp-next-go {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: #fff; color: var(--forest);
}
.dp-next-go svg { width: 18px; height: 18px; }
.dp-next:active { transform: scale(.99); }

@media (min-width: 721px) {
  .dp-nav { height: 68px; }
  .dp-hero { margin: 14px auto 0; width: min(100% - 28px, 1200px); padding: 64px 0 70px; border-radius: 34px; }
  .dp-main > .section:first-child { padding-top: 56px !important; }
  .dp-main .facts { grid-template-columns: 1fr 1fr !important; }
  .dp-next { max-width: 640px; margin: 24px auto 64px; padding: 26px 28px; }
}
@media (prefers-reduced-motion: reduce) { .dp-next:active { transform: none; } }