/* WalletLegacy: shared styles
   Security print and legal tape. Intaglio navy ink on cool rag paper, guilloché engraving
   for depth, and one sharp accent: the pink-red tape solicitors tie legal papers with. */

@font-face {
  font-family: "Gloock";
  src: url("/fonts/gloock-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #eef0eb;
  --bg-deep: #e2e6df;
  --surface: #fbfbf8;
  --ink: #0f2340;
  --ink-soft: #243757;
  --muted: #4e5c6d;
  --line: #d2d8cf;
  --line-strong: #b4bdb2;
  --accent: #0f2340;
  --accent-hover: #1d3b68;
  --accent-ink: #fbfbf8;
  --accent-soft: #dce3ec;
  --tape: #c22d57;
  --tape-deep: #a0213f;
  --tape-bright: #f27a9b;
  --tape-soft: #f4dde4;
  /* Older names, kept so every page picks up the new accent */
  --brass: var(--tape);
  --brass-bright: var(--tape-bright);
  --brass-soft: var(--tape-soft);
  --bad: #a8321f;
  --bad-soft: #f7e4df;
  --good: #1f6a49;
  --navy: #0b1a33;
  --navy-2: #102546;
  --on-navy: #eef0eb;
  --on-navy-muted: #a9b5c8;
  --engrave: url("/images/engraving.svg");
  --rosette: url("/images/rosette.svg");
  --shadow-sm: 0 1px 0 rgba(15, 35, 64, 0.05), 0 2px 8px -2px rgba(15, 35, 64, 0.08);
  --shadow-md: 0 1px 0 rgba(15, 35, 64, 0.05), 0 14px 30px -12px rgba(15, 35, 64, 0.22);
  --shadow-lg: 0 40px 70px -30px rgba(3, 10, 24, 0.55), 0 10px 24px -12px rgba(3, 10, 24, 0.35);
  --radius: 6px;
  --radius-sm: 4px;
  --display: "Gloock", "Bodoni 72", Didot, Georgia, serif;
  --body: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0a1426;
    --bg-deep: #081021;
    --surface: #111e36;
    --ink: #e8ecf1;
    --ink-soft: #cbd3df;
    --muted: #9aa7ba;
    --line: #22324f;
    --line-strong: #34466a;
    --accent: #c9d6ee;
    --accent-hover: #e3eaf7;
    --accent-ink: #0a1426;
    --accent-soft: #19294a;
    --tape: #f27a9b;
    --tape-deep: #ff9bb6;
    --tape-bright: #f7a1b8;
    --tape-soft: #3a1a29;
    --bad: #f39a8a;
    --bad-soft: #3a1a17;
    --good: #86d1aa;
    --navy: #060d1b;
    --navy-2: #0c1830;
    --shadow-sm: none;
    --shadow-md: 0 14px 30px -12px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 40px 70px -30px rgba(0, 0, 0, 0.9);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--body);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-decoration-color: var(--tape);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--tape); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tape);
  outline-offset: 3px;
  border-radius: 2px;
}
img, svg { max-width: 100%; }
::selection { background: var(--tape); color: #fff; }
/* Schibsted Grotesk's tabular figures space punctuation widely, so markers use proportional ones */
::marker { font-variant-numeric: normal; }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(42px, 6.4vw, 76px); }
h2 { font-size: clamp(32px, 4.2vw, 50px); margin-bottom: 16px; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 650; letter-spacing: -0.005em; margin: 0 0 6px; }
p { margin: 0 0 14px; max-width: 64ch; }
em.accent { font-style: normal; }

/* A small sentence-case label, used sparingly */
.eyebrow {
  display: inline-block;
  font: 600 14px/1.2 var(--body);
  color: var(--tape);
  margin-bottom: 14px;
}

.section-head { max-width: 700px; margin-bottom: 44px; }
.section-head p { font-size: 19px; color: var(--muted); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }

/* Buttons: rectangular, like a stamped docket */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--tape);
  color: #fff;
  font: 650 16px/1 var(--body);
  padding: 17px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s var(--ease-out), box-shadow 0.18s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 22px -12px color-mix(in srgb, var(--tape) 80%, transparent);
}
.button:hover { background: var(--tape-deep); color: #fff; transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
.button.secondary:hover { background: var(--ink); color: var(--bg); }
.button .arrow { display: none; }
@media (prefers-color-scheme: dark) { .button { color: #1a0710; } .button:hover { color: #1a0710; } }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo:hover { color: var(--ink); }
.logo-word span { color: var(--tape); }
.logo-mark { width: 30px; height: 30px; flex: none; }
.header-links { display: flex; gap: 28px; align-items: center; }
.header-links a { font-weight: 550; font-size: 15px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.header-links a:hover { color: var(--tape); }
.header-links .nav-cta {
  color: var(--bg);
  background: var(--ink);
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-weight: 650;
}
.header-links .nav-cta:hover { background: var(--tape); color: #fff; }
@media (max-width: 720px) { .header-links .hide-sm { display: none; } .header-links { gap: 16px; } }
@media (max-width: 400px) {
  .logo { font-size: 21px; gap: 8px; }
  .logo-mark { width: 26px; height: 26px; }
  .header-links { gap: 12px; }
  .header-links a { font-size: 14px; }
  .header-links .nav-cta { padding: 9px 12px; }
}

/* Hero: the plan as a bundle of papers tied with legal tape, on engraved navy */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 88px 104px;
  background:
    radial-gradient(900px 520px at 78% 40%, rgba(58, 92, 150, 0.35), transparent 70%),
    linear-gradient(170deg, var(--navy-2), var(--navy) 70%);
  color: var(--on-navy);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--engrave) 0 0 / 240px 120px repeat;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 65%);
  mask-image: linear-gradient(90deg, #000, transparent 65%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 980px; height: 980px; right: -260px; top: 50%; margin-top: -490px;
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.7;
  animation: rosette-in 1.6s var(--ease-out) both;
}
@keyframes rosette-in { from { opacity: 0; transform: rotate(-14deg) scale(0.94); } to { opacity: 0.7; transform: none; } }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.6vw, 70px); }
.hero h1 { color: #fff; }
.hero .lede { font-size: 21px; line-height: 1.5; color: var(--on-navy-muted); margin-top: 24px; max-width: 30em; }
.hero .eyebrow { color: var(--tape-bright); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .button.secondary { color: var(--on-navy); border-color: rgba(238, 240, 235, 0.55); }
.hero .button.secondary:hover { background: var(--on-navy); color: var(--navy); }
.hero .button:not(.secondary) { box-shadow: 0 12px 26px -16px rgba(242, 122, 155, 0.7); }

/* Staggered page-load reveal, hero only */
.reveal { animation: rise 0.9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* What you get, as three numbered lines that match the pins on the scene */
.hero-offer { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; max-width: 34em; }
.hero-offer li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-size: 18px; line-height: 1.45; color: var(--on-navy-muted); }
.hero-offer strong { color: #fff; font-weight: 650; }
.hero-offer b, .scene-pin {
  display: grid; place-items: center; border-radius: 50%;
  font: 400 17px/1 var(--display); color: #fff; background: var(--tape);
  box-shadow: 0 0 0 3px rgba(242, 122, 155, 0.28);
}
.hero-offer b { width: 32px; height: 32px; margin-top: -2px; }
.hero-price { margin: 18px 0 0; font-size: 15px; color: var(--on-navy-muted); }

/* The scene: Sam Taylor's dashboard, tax estimate and printed plan, pinned
   like exhibits. Sized in container units so it scales as one drawing.
   The paper objects keep light colours in dark mode, like real paper. */
.scene { display: block; width: min(100%, 540px); margin-left: auto; text-decoration: none; color: #0f2340; container-type: inline-size; }
.scene-in { position: relative; aspect-ratio: 100 / 90; font: 500 2.6cqw/1.3 var(--body); }
.scene p { margin: 0; max-width: none; }
.scene-cover { position: absolute; left: 55cqw; top: 1cqw; width: 43cqw; transform: rotate(5deg); animation: page-in 1s var(--ease-out) 0.15s both; }
.scene-cover img { display: block; width: 100%; height: auto; border-radius: 3px; outline: 1px solid rgba(255, 255, 255, 0.3); outline-offset: -1px; filter: brightness(1.35); box-shadow: 0 30px 60px -24px rgba(3, 10, 24, 0.75), 0 2px 6px rgba(3, 10, 24, 0.35); }
.scene-tape { position: absolute; left: -8%; right: -8%; top: 64%; height: 3.4cqw; background: linear-gradient(180deg, #d23a65, #c22d57 55%, #a0213f); box-shadow: 0 3px 6px rgba(3, 10, 24, 0.35); display: flex; align-items: center; justify-content: flex-end; padding-right: 9%; font-weight: 700; font-size: 0.72em; color: #fff; white-space: nowrap; transform: rotate(-4deg); transform-origin: left center; animation: tape-draw 0.7s var(--ease-out) 1.35s both; }
@keyframes tape-draw { from { transform: rotate(-4deg) scaleX(0); } }

/* The dashboard card uses the dark console look of the real dashboard. */
.scene-dash {
  position: absolute; left: 0; top: 11cqw; width: 66cqw; padding: 3.4cqw 3.6cqw 3.2cqw;
  background: radial-gradient(120% 60% at 100% 0%, rgba(242, 122, 155, 0.09), transparent 60%), linear-gradient(180deg, #0d1a2e, #08111f);
  color: #e8ecf1; border-radius: 4px; border: 1px solid #2b4167;
  box-shadow: 0 34px 60px -24px rgba(0, 4, 12, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 6px rgba(0, 4, 12, 0.4);
  animation: page-in 1s var(--ease-out) 0.3s both; transition: transform 0.5s var(--ease-out);
}
.sd-top { display: flex; justify-content: space-between; gap: 2cqw; padding-bottom: 1.8cqw; border-bottom: 1px solid #1d2f4c; font-weight: 650; font-size: 0.86em; color: #8d9bb3; }
.sd-top span:first-child { color: #fff; display: flex; align-items: center; gap: 1.4cqw; }
.sd-top span:first-child::before { content: ""; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #79c9a2; box-shadow: 0 0 0 0.7cqw rgba(121, 201, 162, 0.16); }
.sd-head { display: flex; justify-content: space-between; align-items: end; gap: 2cqw; margin-top: 2.4cqw; }
.sd-head p { display: grid; gap: 0.6cqw; }
.sd-head small { font-size: 0.86em; font-weight: 600; color: #8d9bb3; }
.sd-head b { font: 400 7.4cqw/1 var(--display); letter-spacing: -0.01em; color: #fff; }
.sd-head .sd-up { text-align: right; }
.sd-head .sd-up b { font-size: 4.4cqw; color: #79c9a2; }
.sd-head .sd-up b span { font: 600 0.8em/1 var(--body); margin-right: 0.1em; }
.sd-chart { display: block; width: 100%; height: 13cqw; margin-top: 2.4cqw; overflow: visible; }
.sd-area { fill: rgba(121, 201, 162, 0.12); }
.sd-mark { stroke: #f27a9b; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sd-line { fill: none; stroke: #79c9a2; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; animation: line-draw 1.2s var(--ease-out) 0.8s both; }
@keyframes line-draw { from { stroke-dashoffset: 1; } }
.sd-share { display: flex; gap: 2px; height: 1.3cqw; margin-top: 2.6cqw; }
.sd-share i, .sd-rows i { display: block; background: #f27a9b; }
.sd-share i:nth-child(2), .sd-rows li:nth-child(2) i { background: #8fb8d8; }
.sd-share i:nth-child(3), .sd-rows li:nth-child(3) i { background: #f0a35e; }
.sd-rows { list-style: none; margin: 1.4cqw 0 0; padding: 0; }
.sd-rows li { display: grid; grid-template-columns: 1.6cqw 1fr auto; gap: 1.8cqw; align-items: baseline; padding: 1.5cqw 0; border-bottom: 1px solid #1d2f4c; }
.sd-rows i { width: 1.6cqw; height: 1.6cqw; }
.sd-rows span { font-weight: 650; }
.sd-rows small { display: block; font-size: 0.84em; font-weight: 500; color: #8d9bb3; }
.sd-rows b { font-weight: 600; color: #fff; }
.sd-todo { display: grid; grid-template-columns: auto 1fr auto; gap: 2cqw; align-items: center; margin-top: 2.4cqw; font-size: 0.86em; font-weight: 650; color: #8d9bb3; }
.sd-todo span:first-child { color: #fff; }
.sd-bar { display: flex; gap: 2px; }
.sd-bar i { flex: 1; height: 1cqw; background: #79c9a2; }
.sd-bar i:nth-child(n+9) { background: #22365a; }

.scene-tax {
  position: absolute; left: 64.5cqw; top: 57cqw; width: 35cqw; display: grid; gap: 1cqw;
  padding: 3.4cqw 3.4cqw 3cqw; border-radius: 4px; border-top: 0.9cqw solid #c22d57;
  background: #fbfbf8; color: #0f2340;
  box-shadow: 0 30px 50px -20px rgba(0, 4, 12, 0.95), 0 2px 6px rgba(0, 4, 12, 0.45);
  animation: page-in 1s var(--ease-out) 0.55s both;
}
.scene-tax small { font-size: 0.9em; font-weight: 650; color: #c22d57; }
.scene-tax b { font: 400 7cqw/1 var(--display); }
.scene-tax span:not(.scene-pin) { font-size: 0.9em; color: #4e5c6d; }

.scene-pin { position: absolute; width: 6.4cqw; height: 6.4cqw; font-size: 3.6cqw; animation: pin-in 0.5s var(--ease-out) both; }
.scene-pin.p1 { left: -3cqw; top: 13cqw; animation-delay: 1.6s; }
.scene-pin.p2 { left: -3cqw; top: -3cqw; animation-delay: 1.75s; }
.scene-pin.p3 { right: -2cqw; top: 6cqw; animation-delay: 1.9s; transform: rotate(-5deg); }
@keyframes pin-in { from { opacity: 0; scale: 1.6; } }
.scene-note { position: absolute; left: 0; top: 4.4cqw; font-weight: 700; font-size: 0.86em; color: #fff; background: var(--tape); padding: 1cqw 1.6cqw; border-radius: 2px; animation: rise 0.6s var(--ease-out) 1.5s both; }

.scene:hover .scene-dash { transform: translateY(-5px); }
.scene:focus-visible { outline: 2px solid var(--tape-bright); outline-offset: 6px; }
@keyframes page-in { from { opacity: 0; transform: translateY(50px) rotate(0deg); } }
@media (max-width: 900px) { .scene { margin-inline: auto; } }
@media (max-width: 560px) {
  .hero-offer li { font-size: 16.5px; grid-template-columns: 30px 1fr; gap: 12px; }
  .hero-offer b { width: 28px; height: 28px; font-size: 15px; }
  .scene-in { font-size: 3cqw; }
}

/* Under-hero strip of plain facts */
.facts-strip { border-bottom: 1px solid var(--line); background: var(--surface); }
.facts-strip ul { list-style: none; margin: 0 auto; padding: 22px 24px; max-width: 1160px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 24px; font-size: 15.5px; font-weight: 550; color: var(--ink-soft); }
.facts-strip li { display: inline-flex; align-items: center; gap: 10px; }
.facts-strip svg { width: 18px; height: 18px; color: var(--tape); flex: none; }

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 28px 0 0; font-size: 15px; color: var(--ink-soft); }
.trust-row li { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { width: 18px; height: 18px; color: var(--good); flex: none; }

/* Sections */
section.block { padding-block: 104px; }
section.block.tint { background: var(--bg-deep); }
@media (max-width: 720px) { section.block { padding-block: 68px; } .hero { padding-block: 48px 72px; } }

/* Problem: a statement on the left, what goes wrong on the right */
.problem { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.problem h2 { font-size: clamp(36px, 4.8vw, 60px); }
.problem .intro { font-size: 19px; color: var(--muted); }
.problem-grid { display: grid; gap: 0; }
.problem-grid > div { display: grid; grid-template-columns: 52px 1fr; gap: 4px 20px; padding: 26px 0; border-top: 1px solid var(--line-strong); }
.problem-grid > div:last-child { border-bottom: 1px solid var(--line-strong); }
.problem-grid .icon-badge { grid-row: span 2; margin: 0; }
.problem-grid h3 { font: 400 26px/1.15 var(--display); margin: 0; }
.problem-grid p { font-size: 16px; color: var(--muted); margin: 0; }
.icon-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 18px;
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge.brass, .icon-badge.bad { color: var(--tape); }

/* How it works: a real sequence, strung on a length of tape */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 30px; right: calc((100% - 72px) / 3 - 30px); top: 27px; height: 6px; background: linear-gradient(180deg, #b3244d, #d3406a 50%, #b3244d); border-radius: 1px; opacity: 0.9; }
.steps li { position: relative; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ink);
  color: var(--ink);
  font: 400 28px/1 var(--display);
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
section.block.tint .steps li::before { background: var(--bg-deep); }
.steps h3 { font: 400 26px/1.15 var(--display); margin-bottom: 8px; }
.steps p { font-size: 16px; color: var(--muted); margin: 0 0 14px; }
.pill {
  display: inline-block;
  font: 650 13px/1 var(--body);
  padding: 7px 10px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}
.pill.brass { background: var(--tape); border-color: var(--tape); color: #fff; }

/* Dark band: what we never do */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  color: var(--on-navy);
}
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--engrave) 0 0 / 240px 120px repeat;
  opacity: 0.12;
}
.band h2 { color: #fff; }
.band .eyebrow { color: var(--tape-bright); }
.band p { color: var(--on-navy-muted); }
.band a { color: #fff; }
.never { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.never-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.never-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid rgba(238, 240, 235, 0.16);
}
.never-list li:last-child { border-bottom: 1px solid rgba(238, 240, 235, 0.16); }
.never-list strong { display: block; color: #fff; font: 400 23px/1.2 var(--display); margin-bottom: 4px; }
.never-list span { color: var(--on-navy-muted); font-size: 15.5px; }
.never-list .x {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--tape-bright);
  color: var(--tape-bright);
  margin-top: 2px;
}
.never-list .x svg { width: 15px; height: 15px; }
.scam-note { display: flex; gap: 12px; margin-top: 28px; padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(242, 122, 155, 0.1); border-left: 4px solid var(--tape-bright); color: #ffe3ea; font-size: 15.5px; }
.scam-note svg { width: 20px; height: 20px; flex: none; color: var(--tape-bright); margin-top: 2px; }

/* Pricing: two documents, the paid one tied with tape */
.who { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: start; max-width: 1000px; margin-inline: auto; }
.who-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 38px 34px 34px;
  box-shadow: var(--shadow-sm);
}
.who-card.featured { border-color: var(--ink); box-shadow: var(--shadow-md); overflow: hidden; }
.who-card.featured::before { /* tape across the corner */
  content: ""; position: absolute; top: 26px; right: -46px; width: 190px; height: 14px;
  background: linear-gradient(180deg, #b3244d, #d3406a 50%, #b3244d);
  transform: rotate(38deg); box-shadow: 0 2px 5px rgba(80, 8, 30, 0.3);
}
.who-card .ribbon {
  align-self: flex-start;
  font: 650 13px/1 var(--body);
  color: var(--tape);
  margin-bottom: 12px;
}
.who-card h3 { font: 400 34px/1.1 var(--display); margin-bottom: 6px; }
.who-card .tagline { font-size: 16px; color: var(--muted); margin-bottom: 22px; }
.price-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.price-line .amount { font: 400 64px/0.9 var(--display); letter-spacing: -0.02em; }
.price-line .per { color: var(--muted); font-size: 15px; }
.price-line .pill { margin-left: auto; align-self: center; }
.ticks { list-style: none; padding: 0; margin: 0 0 28px; font-size: 16px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; line-height: 1.5; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c22d57' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.who-card .button { margin-top: auto; width: 100%; }
.who-card .example-link { margin: 14px 0 0; text-align: center; font-size: 15px; max-width: none; }
/* The rest of the featured plan's list, folded so the two cards stay a similar height */
.more-ticks { margin: -12px 0 24px; }
.more-ticks summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 650; font-size: 16px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--tape); text-underline-offset: 4px; }
.more-ticks summary::-webkit-details-marker { display: none; }
.more-ticks summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--tape); border-bottom: 2px solid var(--tape); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s; }
.more-ticks[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.more-ticks summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.more-ticks .ticks { margin: 14px 0 0; }
.cta-free { font-size: 16px; margin-top: 12px; }
.cta-free a { text-decoration-color: var(--tape-bright); text-underline-offset: 3px; }
.pro-note { text-align: center; font-size: 15px; color: var(--muted); margin: 36px auto 0; }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq details:first-child { border-top: 1px solid var(--line-strong); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-weight: 650;
  font-size: 18px;
}
.faq summary:hover { color: var(--tape); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--tape), var(--tape)) center / 14px 2px no-repeat,
    linear-gradient(var(--tape), var(--tape)) center / 2px 14px no-repeat;
  transition: transform 0.25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 20px; margin: 0; }

/* Closing call to action (class name kept from the old waitlist) */
.waitlist {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 64px;
  background: linear-gradient(160deg, var(--navy-2), var(--navy));
  color: var(--on-navy);
}
.waitlist::after {
  content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; right: -180px; top: -200px;
  background: var(--rosette) center / contain no-repeat; opacity: 0.6;
}
.waitlist h2 { color: #fff; }
.waitlist .eyebrow { color: var(--tape-bright); }
.waitlist p { color: var(--on-navy-muted); }
.waitlist a { color: #fff; }
.waitlist .form label { color: #fff; }
.waitlist .form input[type="email"], .waitlist .form select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.waitlist .form select option { color: #111; }
.waitlist .form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.waitlist .form .consent { color: var(--on-navy-muted); }
.waitlist .button.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.waitlist .button.secondary:hover { background: #fff; color: var(--navy); }
.waitlist .plan-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

.form { display: grid; gap: 16px; }
.form label { font-weight: 650; font-size: 15px; display: block; margin-bottom: 7px; }
.form input[type="email"], .form input[type="text"], .form select {
  width: 100%;
  font: 16px var(--body);
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form input:focus, .form select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tape) 30%, transparent); }
.form .consent { font-size: 13px; color: var(--muted); margin: 0; }
.hidden-field { position: absolute; left: -10000px; }

/* Footer */
.site-footer { position: relative; isolation: isolate; background: var(--navy); color: var(--on-navy-muted); font-size: 15px; padding-block: 72px 28px; border-top: 6px solid var(--tape); }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--tape-bright); }
.site-footer .logo { color: #fff; }
.site-footer .logo-mark { border-radius: 8px; box-shadow: 0 0 0 1px rgba(242, 122, 155, 0.45); }
.site-footer .logo-word span { color: var(--tape-bright); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 40px; }
.footer-grid h4 { font: 400 19px/1 var(--display); color: #fff; margin: 4px 0 16px; }
.footer-grid nav { display: grid; gap: 10px; align-content: start; }
.footer-about p { margin-top: 16px; max-width: 34ch; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }

/* Simple content pages */
.page { padding-block: 64px 104px; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(40px, 5.4vw, 58px); margin-bottom: 20px; }
.page h2 { font-size: 30px; margin-top: 40px; }
.page ul { max-width: 64ch; }

@media (max-width: 900px) {
  .hero .wrap, .waitlist, .never, .who, .faq-wrap, .problem { grid-template-columns: 1fr; }
  .hero .wrap { gap: 48px; }
  .bundle { margin-inline: auto; }
  .problem { gap: 32px; }
  .steps { grid-template-columns: 1fr; gap: 36px; padding-left: 0; }
  .steps::before { left: 27px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; }
  .steps li { padding-left: 84px; }
  .steps li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .waitlist { padding: 36px 22px; gap: 28px; }
  .waitlist .plan-actions { justify-content: flex-start; }
  .faq-wrap { gap: 12px; }
  .never { gap: 32px; }
  .hero::after { width: 620px; height: 620px; right: -260px; top: auto; bottom: -200px; margin-top: 0; }
}

/* Guides */
.article { padding-block: 56px 104px; }
.article .wrap { max-width: 760px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--muted); }
.article h1 { font-size: clamp(38px, 5.6vw, 60px); margin-bottom: 18px; }
.article .standfirst { font-size: 21px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }
.article .meta { font: 500 14px/1.4 var(--body); color: var(--muted); margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--line-strong); }
.article h2 { font-size: 32px; margin-top: 52px; margin-bottom: 14px; }
.article ul, .article ol { max-width: 64ch; padding-left: 22px; }
.article li { margin-bottom: 10px; }
.article li::marker { color: var(--tape); }
.callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--tape); border-radius: var(--radius-sm); padding: 18px 20px; margin-block: 24px; }
.callout p:last-child { margin-bottom: 0; }
.cta-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-2), var(--navy));
  color: var(--on-navy);
  border-radius: var(--radius-sm);
  border-top: 6px solid var(--tape);
  padding: 34px;
  margin-top: 52px;
}
.cta-box::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -140px; top: -120px; background: var(--rosette) center / contain no-repeat; opacity: 0.55; }
.cta-box h3 { font: 400 30px/1.1 var(--display); color: #fff; }
.cta-box p { color: var(--on-navy-muted); }
.cta-box a:not(.button) { color: #fff; }
.pref-source { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 32px; padding-block: 16px; border-block: 1px solid var(--line-strong); font-size: 15px; color: var(--muted); max-width: none; }
.pref-source a { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--body); color: var(--ink); text-decoration: none; padding: 10px 14px; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface); }
.pref-source a::before { content: "+"; font: 700 18px/1 var(--body); color: var(--tape); }
.pref-source a:hover { border-color: var(--tape); color: var(--tape); }
.disclaimer { font-size: 14px; color: var(--muted); margin-top: 32px; }
.article .guide-list, .guide-list { list-style: none; padding: 0; display: grid; gap: 0; max-width: none; }
.guide-list li {
  padding: 26px 0;
  margin: 0;
  border-top: 1px solid var(--line-strong);
}
.guide-list li:last-child { border-bottom: 1px solid var(--line-strong); }
.guide-list a { font: 400 28px/1.15 var(--display); text-decoration: none; color: var(--ink); }
.guide-list a:hover { color: var(--tape); }
.guide-list p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }

/* Buy page */
.buy-page .lede-sm { font-size: 20px; color: var(--muted); }
.buy-card { background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius-sm); padding: 34px; margin-top: 24px; box-shadow: var(--shadow-md); }
.buy-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.buy-form .button { justify-self: start; }
.check, .form label.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 400; cursor: pointer; margin: 0; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--tape); flex: none; }
.field-note { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.notice { border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 16px; }
.notice.error { background: var(--bad-soft); color: var(--bad); }
.guarantee { margin-top: 32px; padding: 22px 24px; border-radius: var(--radius-sm); background: var(--tape-soft); }
.guarantee h2 { font-size: 26px; margin: 0 0 8px; }
.guarantee p { margin: 0; }
@media (max-width: 600px) { .buy-card { padding: 22px 16px; } }

/* Buy page: single or couples plan */
.plan-choice { border: 0; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-choice legend { font: 650 15px/1 var(--body); color: var(--ink); margin-bottom: 12px; padding: 0; }
.plan-option { position: relative; display: block; cursor: pointer; }
.plan-option input { position: absolute; opacity: 0; }
.plan-option-body { display: grid; align-content: start; gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.plan-option-price { font: 400 34px/1.05 var(--display); }
.plan-option-note { color: var(--muted); font-size: 14px; }
.plan-option input:checked + .plan-option-body { border-color: var(--tape); box-shadow: inset 4px 0 0 var(--tape); }
.plan-option input:focus-visible + .plan-option-body { outline: 2px solid var(--tape); outline-offset: 2px; }
@media (max-width: 560px) { .plan-choice { grid-template-columns: 1fr; } }
.couples-note { margin: 0 0 20px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--tape-soft); font-size: 15px; }

/* Why you can trust us */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 28px 0 40px; }
.trust-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--radius-sm); padding: 22px; }
.trust-card h2 { font-size: 24px; margin: 0 0 8px; }
.trust-card p { margin: 0; color: var(--muted); font-size: 15px; }
.trust-scams { background: var(--tape-soft); border-left: 4px solid var(--tape); border-radius: var(--radius-sm); padding: 24px 26px; margin-bottom: 40px; }
.trust-scams h2, .trust-why h2 { margin-top: 0; }
.trust-page .wrap { max-width: 960px; }
.trust-page .lede-sm { font-size: 20px; color: var(--muted); max-width: 640px; }
.trust-link { margin: 18px 0 0; font-weight: 650; }

/* Executors: a way in from the problem section */
.executor-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 56px; padding: 24px 28px; border-radius: var(--radius-sm);
  background: var(--navy); color: var(--on-navy); text-decoration: none;
  border-left: 6px solid var(--tape);
  transition: transform 0.2s var(--ease-out);
}
.executor-callout:hover { color: var(--on-navy); transform: translateX(3px); }
.executor-callout-text { max-width: 640px; font-size: 16px; color: var(--on-navy-muted); }
.executor-callout-text strong { color: #fff; display: block; margin-bottom: 2px; font: 400 22px/1.2 var(--display); }
.executor-callout-go { font-weight: 650; color: var(--tape-bright); white-space: nowrap; }

/* Pricing: real pages from the example plan */
.pages-preview { margin-top: 72px; display: grid; gap: 26px; }
.pages-head { text-align: center; max-width: 640px; margin: 0 auto; }
.pages-head h3 { font: 400 32px/1.1 var(--display); margin: 0 0 8px; }
.pages-head p { margin: 0 auto; color: var(--muted); }
.pages-strip { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 20px; max-width: 1160px; margin: 0 auto; }
.page-thumb {
  display: grid; gap: 10px; width: 100%; padding: 0; border: 0; background: none;
  font: 600 14px/1.3 var(--body); color: var(--ink); text-align: left; cursor: zoom-in;
}
.page-thumb img {
  width: 100%; height: auto; display: block; border-radius: 2px; background: #fff;
  box-shadow: var(--shadow-md); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.page-thumb:hover img, .page-thumb:focus-visible img { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(15, 35, 64, 0.45); }
.page-thumb:focus-visible { outline: 2px solid var(--tape); outline-offset: 6px; }
.page-viewer {
  padding: 0; border: 0; background: none; max-width: min(92vw, 780px); max-height: 96vh; overflow: visible;
}
.page-viewer::backdrop { background: rgba(6, 14, 30, 0.94); }
.page-viewer img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(96vh - 64px); margin: 0 auto; background: #fff; border-radius: 2px; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: #fff; }
.viewer-caption { margin: 0; font: 600 15px/1.3 var(--body); text-align: center; }
.page-viewer button { font: 600 22px/1 var(--body); color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; width: 44px; height: 44px; cursor: pointer; }
.page-viewer button:hover { background: rgba(255, 255, 255, 0.24); }
.page-viewer .viewer-close { position: absolute; top: 10px; right: 10px; background: rgba(15, 35, 64, 0.85); }
.pages-links { text-align: center; margin: 8px auto 0; max-width: none; font-weight: 650; }
@media (max-width: 900px) {
  .pages-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pages-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Page not found */
.notfound-page .lede-sm { font-size: 20px; color: var(--muted); }
.notfound-links { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 0; max-width: none; }
.notfound-links li { border-top: 1px solid var(--line-strong); padding: 16px 0; display: grid; gap: 2px; }
.notfound-links li:last-child { border-bottom: 1px solid var(--line-strong); }
.notfound-links a { font: 400 22px/1.2 var(--display); }
.notfound-links span { color: var(--muted); font-size: 15px; }
.article blockquote { margin: 16px 0 20px; padding: 16px 20px; max-width: 64ch; background: var(--surface); border-left: 4px solid var(--tape); border-radius: var(--radius-sm); font: 400 20px/1.5 var(--display); }

/* Utility bar: search, email and enquiry button above the main header */
.utility-bar { background: var(--navy); font-size: 14px; }
.utility-bar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 22px; min-height: 38px; }
.utility-bar a { color: var(--on-navy-muted); text-decoration: none; font-weight: 550; white-space: nowrap; }
.utility-bar a:hover { color: #fff; }
.util-search { display: inline-flex; align-items: center; gap: 6px; }
.utility-bar .util-cta { align-self: stretch; display: inline-flex; align-items: center; padding: 0 16px; background: var(--tape); color: #fff; font-weight: 650; }
.utility-bar .util-cta:hover { background: var(--tape-deep); color: #fff; }
@media (prefers-color-scheme: dark) { .utility-bar .util-cta, .utility-bar .util-cta:hover { color: #1a0710; } }
@media (max-width: 720px) { .utility-bar .hide-sm { display: none; } .utility-bar .wrap { gap: 16px; } }

/* Contact page */
.contact-page .lede-sm { font-size: 20px; color: var(--muted); max-width: 640px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 28px 0 44px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--radius-sm); padding: 22px; }
.contact-card[hidden] { display: none; }
.contact-card h2 { font-size: 24px; margin: 0 0 8px; }
.contact-card p { margin: 0; color: var(--muted); font-size: 15px; }
.contact-card p + p { margin-top: 8px; }
.contact-card a { font-weight: 650; overflow-wrap: break-word; }
.social-links { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.social-links:empty { display: none; }
.contact-card .button { margin-top: 14px; color: #fff; }
.contact-more { color: var(--muted); }
.contact-card.wide { grid-column: 1 / -1; }
.enquiry { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 34px; }
.enquiry h2 { margin-top: 0; }
.enquiry-warning { background: var(--bad-soft); color: var(--ink); border-left: 4px solid var(--bad); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15px; margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } .enquiry { padding: 22px 18px; } }
.form textarea { width: 100%; font: 16px/1.5 var(--body); padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); resize: vertical; }
.form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tape) 30%, transparent); }
.field-error { color: var(--bad); font-size: 14px; margin: 8px 0 0; }
.contact-page .plan-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Search */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search-form { display: flex; gap: 10px; margin: 8px 0 18px; }
.search-form input { flex: 1; min-width: 0; font: 17px var(--body); padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.search-form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tape) 30%, transparent); }
.search-status { color: var(--muted); }
.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: none; }
.search-results li { border-top: 1px solid var(--line-strong); padding: 18px 0; }
.search-results li:last-child { border-bottom: 1px solid var(--line-strong); }
.search-results a { font: 400 24px/1.25 var(--display); }
.search-results p { margin: 6px 0; color: var(--muted); font-size: 15px; }
.search-url { font: 13px var(--mono); color: var(--tape); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}
@media print { .utility-bar { display: none !important; } }

/* Homepage: the plan dashboard feature */
.dash-feature { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.dash-feature-text h2 { margin-top: 6px; }
.dash-feature-text .intro { font-size: 19px; color: var(--muted); }
.dash-feature-note { font-size: 15px; color: var(--muted); border-left: 3px solid var(--tape); padding-left: 14px; margin: 0 0 24px; }
.dash-feature-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dash-shot { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-lg); }
.dash-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .dash-feature { grid-template-columns: 1fr; gap: 36px; }
}

/* Main menu: links on wide screens, a menu button on narrower ones */
.nav-menu { position: relative; display: none; }
.nav-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { border-color: var(--ink); }
.nav-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--tape); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 8px; display: grid; }
.header-links .nav-menu-panel a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); white-space: normal; }
.header-links .nav-menu-panel a:hover { background: var(--bg); color: var(--ink); }
.nav-menu-panel strong { font-size: 15.5px; color: var(--ink); }
.nav-menu-panel span { font-size: 13.5px; font-weight: 450; color: var(--muted); }
@media (max-width: 1060px) { .header-links .hide-md { display: none; } .nav-menu { display: block; } }
@media (max-width: 400px) { .nav-menu summary { width: 38px; height: 38px; } }
@media print { .nav-menu { display: none !important; } }

/* Homepage: three ways in, as tied dockets on the navy hero */
.hub-hero .wrap { grid-template-columns: 1.05fr 0.95fr; }
.hub-hero h1 { max-width: 13ch; }
.doors { display: grid; gap: 12px; }
.doors-label { margin: 0 0 2px; font: 600 14px/1.3 var(--body); color: var(--tape-bright); }
.door {
  position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  padding: 18px 20px 18px 18px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, #fbfbf8, #f1f2ec); border-radius: var(--radius-sm);
  border-left: 5px solid var(--tape); box-shadow: var(--shadow-md);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s ease;
}
.door:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); color: var(--ink); }
.door b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0f2340; color: #fff; font: 400 18px/1 var(--display); }
.door small { display: block; font: 650 13px/1.2 var(--body); color: #c22d57; margin-bottom: 4px; }
.door strong { display: block; font: 400 22px/1.2 var(--display); color: #0f2340; }
.door em { display: block; font-style: normal; font-size: 14px; color: #4e5c6d; margin-top: 6px; }
.door::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-top: 2px solid #c22d57; border-right: 2px solid #c22d57; transform: translateY(-50%) rotate(45deg); }
.door span { padding-right: 22px; }
@media (max-width: 560px) { .door { grid-template-columns: 30px 1fr; gap: 12px; padding: 14px 14px 14px 12px; } .door b { width: 28px; height: 28px; font-size: 15px; } .door strong { font-size: 19px; } }

/* A product, its text on one side and a picture of it on the other */
.product-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.product-row.flip .product-text { order: 2; }
.product-text .intro { font-size: 19px; color: var(--muted); }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.product-price { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.product-example { font-weight: 650; color: var(--ink); text-decoration-color: var(--tape); text-underline-offset: 4px; }
.console-shot { margin: 0; min-width: 0; }
.console-shot .sc-console { font-size: 12px; padding: 12px; max-height: 620px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
@media (max-width: 900px) { .product-row { grid-template-columns: 1fr; gap: 40px; } .product-row.flip .product-text { order: 0; } }

/* A sheet from the Executor Kit, as a picture */

/* Free tools: a ruled list, not cards */
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line-strong); }
.tools a { display: grid; gap: 4px; padding: 20px 28px 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; }
.tools a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--tape); border-right: 2px solid var(--tape); transform: translateY(-50%) rotate(45deg); }
.tools strong { font: 400 22px/1.2 var(--display); color: var(--ink); }
.tools span { color: var(--muted); font-size: 16px; }
.tools a:hover strong { color: var(--tape); }
@media (max-width: 720px) { .tools { grid-template-columns: 1fr; } }

/* Pricing page */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.price-card.featured { border-top-color: var(--tape); box-shadow: var(--shadow-md); }
.price-card .for { font: 650 14px var(--body); color: var(--tape); margin: 0 0 6px; }
.price-card h2 { font-size: 30px; margin-bottom: 8px; }
.price-card .tagline { color: var(--muted); font-size: 16px; }
.price-card .price-line { margin: 6px 0 18px; }
.price-card .ticks { flex: 1; }
.price-card .button { margin-top: 18px; }
.price-card .small { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.price-free { margin-top: 28px; padding: 22px 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.price-free p { margin: 0; }
.compare { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15.5px; }
.compare th, .compare td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--ink); }
.compare td.y { color: var(--good); font-weight: 650; }
.compare td.n { color: var(--muted); }
.compare-wrap { overflow-x: auto; margin-top: 64px; }
@media (max-width: 960px) { .price-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.kit-steps-list { grid-template-columns: repeat(4, 1fr); }
.kit-steps-list::before { right: calc((100% - 108px) / 4 - 30px); }
.kit-steps-list.five { grid-template-columns: repeat(5, 1fr); gap: 24px; }
.kit-steps-list.five::before { right: calc((100% - 96px) / 5 - 30px); }
.kit-steps-list.five h3 { font-size: 22px; }
.kit-buy { max-width: 720px; margin-inline: auto; }
.ex-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ex-figures div { border-top: 3px solid var(--ink); padding-top: 12px; }
.ex-figures b { display: block; font: 400 38px/1.05 var(--display); margin-bottom: 6px; }
.ex-figures strong { display: block; font-size: 15px; }
.ex-figures p { color: var(--muted); font-size: 15px; margin: 4px 0 0; }
@media (max-width: 900px) { .ex-figures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ex-figures { grid-template-columns: 1fr; } }
.kit-buy h2 { margin-bottom: 8px; }
@media (max-width: 900px) { .kit-steps-list, .kit-steps-list.five { grid-template-columns: 1fr; } }
/* The scam note on light backgrounds (it was first made for the navy band) */
:not(.band) > .wrap .product-row .scam-note, .kit-step .scam-note, .sc-hero + * .scam-note, #full-report .scam-note { background: var(--tape-soft); color: var(--ink); border-left-color: var(--tape); }
:not(.band) > .wrap .product-row .scam-note svg, .kit-step .scam-note svg, #full-report .scam-note svg { color: var(--tape); }
@media (max-width: 900px) { .hub-hero .wrap { grid-template-columns: 1fr; } }

/* Example pages and the free tools page */
section.block.example-intro { padding-block: 72px 16px; }
.example-intro h1 { margin-bottom: 16px; }
.example-intro .lede { font-size: 20px; color: var(--muted); max-width: 62ch; }
.example-intro .preview-note { width: fit-content; max-width: 100%; background: var(--accent-soft); border-radius: var(--radius); padding: 10px 14px; font-size: 15px; }
.example-intro .hero-actions { margin-top: 24px; }
section.block.example-console-block { padding-top: 40px; }
.example-console-block .section-head { margin-bottom: 24px; }
.example-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; font-weight: 650; }
.free-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.free-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tape); border-radius: var(--radius); padding: 26px 24px 22px; box-shadow: var(--shadow-sm); }
.free-card h2 { font-size: 30px; margin: 2px 0 10px; }
.free-card > p { color: var(--muted); }
.free-card .ticks { margin: 4px 0 22px; font-size: 15.5px; }
.free-card .button { margin-top: auto; }
.free-num { position: absolute; top: 18px; right: 22px; margin: 0; font: 400 44px/1 var(--display); color: var(--line-strong); }
.free-more { font-size: 14.5px; color: var(--muted); margin: 14px 0 0; }
section.block.free-block { padding-top: 32px; }
@media (max-width: 960px) { .free-cards { grid-template-columns: 1fr; max-width: 620px; } }
.hero .console-shot .sc-console { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8); border-color: #2b4167; }
.console-shot .sc-chips { display: none; }
.console-shot .sc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.console-shot .sc-tile { padding: 10px 10px 9px; }
.console-shot .sc-tile b { font-size: 24px; }
.console-shot .sc-tile-label, .console-shot .sc-tile-sub { font-size: 11px; }
@media (max-width: 720px) { .example-console-block .sc-register { display: none; } }
/* A launch offer: the price it goes up to, shown plainly underneath */
.price-line.has-then .price-then { flex-basis: 100%; font-size: 14px; color: var(--muted); }
.price-line.has-then .price-then strong { color: var(--ink); }