/* Inner pages only (index.html does not load this).
   Pulls the subpages toward the homepage: deep-sea hero band, then a plain
   left-aligned editorial body. Flat rows and hairlines instead of floating
   cards, no number badges, no glow, no tilt. */

/* ---------- hero: dark ledger grid with a pointer spotlight ---------- */

.page-hero {
  --mx: 70%;
  --my: 20%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  color: #f4f7ff;
  border-bottom: none;
  padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(3.5rem, 7vw, 5rem);
  background:
    radial-gradient(38rem 26rem at var(--mx) var(--my), rgba(47, 94, 245, 0.32), transparent 70%),
    #06122a;
  transition: background-position 0.2s;
}
/* fine grid, fading out toward the bottom */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(169, 196, 255, 0.07) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgba(169, 196, 255, 0.07) 1px, transparent 1px) 0 0 / 3rem 3rem;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
/* scan line: a slow sweep, like a record being checked */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(169, 196, 255, 0.55) 30%, rgba(169, 196, 255, 0.55) 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(47, 94, 245, 0.45);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero::after { animation: ph-scan 7s cubic-bezier(.45, 0, .55, 1) 0.6s infinite; }
  .page-hero.is-wipe h1 { animation: ph-wipe 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .page-hero.is-wipe .lede,
  .page-hero.is-wipe .prose { animation: ph-rise 0.9s cubic-bezier(.2, .7, .2, 1) 0.35s both; }
}
@keyframes ph-scan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(var(--ph-h, 420px)); opacity: 0; }
}
@keyframes ph-wipe {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-0.4rem); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes ph-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

/* ruled lines draw across as their block scrolls in (JS adds .rule-draw) */
.rule-draw { position: relative; border-top-color: transparent !important; }
.rule-draw::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: var(--rule-w, 1px);
  background: var(--rule-c, var(--ink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 90ms);
}
.rule-draw.is-drawn::before { transform: scaleX(1); }
.price-card:first-child.rule-draw { --rule-w: 3px; --rule-c: var(--accent); }
.price-card:first-child.rule-draw::before { top: -3px; }
.page-hero .eyebrow { display: none; }
.page-hero h1 { margin: 0; max-width: 18ch; color: #fff; }
.page-hero .lede { margin: 1.25rem 0 0; max-width: 34rem; color: rgba(226, 234, 255, 0.82); text-wrap: pretty; }
.page-hero .prose { margin-left: 0; color: rgba(226, 234, 255, 0.82); }
.page-hero .prose strong { color: #fff; }
.page-hero .prose a { color: #a9c4ff; }

/* ---------- headings and ledes: left, not centred ---------- */

.tiles-heading,
.content-section .kicker { text-align: left; margin-left: 0; margin-right: 0; }
.content-section .kicker { margin-bottom: 2rem; }
.section-lede,
.prose,
.terms-block,
.row-list { margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
.section-lede { margin-top: 0.5rem !important; }
.legend { justify-content: flex-start; }

/* ---------- small labels: plain text, no dash, no tracking ---------- */

.eyebrow {
  letter-spacing: 0.01em;
  text-transform: none;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.eyebrow::before { display: none; }

/* ---------- numbered rows: a ruled list ---------- */

.row-list { gap: 0; max-width: 46rem; border-top: 1px solid var(--ink); }
.row-item {
  grid-template-columns: 3.5rem 1fr;
  padding: 1.4rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  box-shadow: none;
}
.row-num {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  padding-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- tiles, prices, contact: columns under a rule ---------- */

.tiles { gap: 2.5rem 2rem; }
.tile,
.price-card,
.contact-card {
  background: none;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  padding: 1.25rem 0 0;
  text-align: left;
}
.tile:hover,
.price-card:hover,
.contact-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.tilt.is-tilting { transform: none; }

.price-grid,
.contact-grid { gap: 2.5rem; margin-left: 0; max-width: none; }
.price-card:first-child { border: 0; border-top: 3px solid var(--accent); padding-top: calc(1.25rem - 2px); }
.price-card .eyebrow { color: var(--ink); font-size: 1rem; margin-bottom: 0.75rem; }
.contact-card h4 { letter-spacing: 0; text-transform: none; font-size: 0.95rem; color: var(--ink); }

/* ---------- buttons: no glow ---------- */

.btn-primary,
.btn-primary:hover { box-shadow: none; }
.btn-primary:hover { transform: none; }
nav.links a.nav-highlight,
nav.links a.nav-highlight:hover { box-shadow: none; transform: none; }

/* ---------- closing band: dark, left, button beside the copy ---------- */

.cta-band {
  text-align: left;
  background: #06122a;
  color: #f4f7ff;
  border-top: 0;
}
.cta-band .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "h btn" "p btn";
  column-gap: 3rem;
  align-items: center;
}
.cta-band h2 { grid-area: h; margin: 0 0 0.75rem; color: #fff; }
.cta-band p { grid-area: p; margin: 0; max-width: 36rem; color: rgba(226, 234, 255, 0.75); }
.cta-band .btn-primary,
.cta-band .cta-row { grid-area: btn; }
.cta-band .btn-text { color: #a9c4ff; }

@media (max-width: 48rem) {
  .cta-band .wrap { grid-template-columns: 1fr; grid-template-areas: "h" "p" "btn"; }
  .cta-band .btn-primary, .cta-band .cta-row { margin-top: 1.75rem; justify-self: start; }
}

/* ---------- coverage figures and pull quote: left, unboxed ---------- */

.big-stat-row { margin-left: 0; margin-right: 0; box-shadow: none; background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; }
.big-stat { text-align: left; padding: 1.25rem 2rem 1.25rem 0; border-left: 0; }
.pull { margin-left: 0; margin-right: 0; padding: 0 0 0 1.4rem; background: none; border-radius: 0; }

/* ---------- live demo: left with the rest of the page ---------- */

.demo-section { text-align: left; }
.demo-box, .demo-note { margin-left: 0; margin-right: 0; }

/* ---------- button rows and comparison table: left-aligned ---------- */

.cta-row { justify-content: flex-start; }
.cmp-table { margin-left: 0; }

/* ---------- printables & guides pages (built by ../build_printables.py) ---------- */

.crumbs { font-size: 0.85rem; margin-bottom: 1rem; color: rgba(226, 234, 255, 0.7); }
.crumbs a { color: #a9c4ff; }
.prose h2 { color: var(--ink); font-size: 1.45rem; line-height: 1.3; margin: 2.5rem 0 0.9rem; }
.prose h3 { color: var(--ink); font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.45rem; }
.prose .small, .prose .byline { font-size: 0.9rem; }
.prose .byline { border-left: 3px solid var(--accent); padding-left: 0.9rem; }
.prose img.preview { display: block; width: 100%; max-width: 26rem; height: auto; margin: 1.5rem 0; border: 1px solid var(--divider); }
.prose img.preview.wide { max-width: 100%; }
.dl-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.prose .dl-row a { color: inherit; }
.prose .dl-row a.btn-primary { color: var(--accent-ink); }
.note-box { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: 0.98rem; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.prose a.pt-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--divider); background: var(--surface); color: var(--ink-soft); font-weight: 400; text-decoration: none; }
.pt-card img { width: 100%; height: 14rem; object-fit: cover; object-position: top; }
.pt-card strong { color: var(--ink); }
.pt-card span { font-size: 0.92rem; }