/* v7 · Hedgehog house style — one design for the whole site.
   Led by Ink and Studio (Tom, 25 Oct): Ink's cool grey paper, navy ink, red accent, column rules, serif
   ledes and navy duotone plates; Studio's bold grotesk headlines, mono labels and figures, rounded photo
   frames and alternating photo rows. Gilt is a reference only: full-bleed photo heads, the lifted figures band.
   Loaded after the site's own stylesheet. Layout and look only: the pages' text and menu are untouched.
   Photos are set per page in css/p-<page>.css through custom properties (--hero, --cta, --img …). */

:root {
  --bg: #ECEEF0;          /* Ink page colour: the logo kit's background */
  --panel: #F4F5F6;       /* Ink card colour */
  --panel-2: #E2E5E9;
  --white: #FBFBFC;
  --line: #C9CFD8;
  --line-soft: rgba(20, 33, 58, .12);
  --fg: #14213A;          /* navy ink */
  --black: #121417;       /* Studio */
  --muted: #545D6E;
  --navy: #14213A;
  --navy-2: #1C2C4C;
  --navy-deep: #0B1322;
  --red: #B8323A;         /* Ink emphasis */
  --red-dark: #8E232A;
  --red-deep: #8E232A;
  --gold: #A67F3B;        /* figures only */
  --gold-light: #D9C28F;
  --gold-deep: #7C5E22;
  --champ: #B8323A;
  --mint: #2F7A55;
  --display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Newsreader', 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --radius: 14px;
  --shadow: 0 24px 60px rgba(11, 19, 34, .16);
  --page: 1240px;
  --gutter: max(1.4rem, calc(50vw - var(--page) / 2));
  color-scheme: light;
}

html { scroll-behavior: auto }
body { font-size: 16.5px; line-height: 1.62; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
.wrap { max-width: var(--page); padding-bottom: 0 }
::selection { background: var(--navy); color: #fff }
a { text-underline-offset: .18em }

/* ── header: solid paper so the logo sits on the colour it was drawn for ── */
.site-header { background: #ECEEF0; backdrop-filter: none; border-bottom: 1px solid var(--line); box-shadow: none }
.nav-bar { max-width: var(--page); min-height: 4.6rem }
.brand svg { display: none }
.brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.brand::before { content: ""; width: 300px; height: 20px; flex: none; background: url("../img/logo/hedgehog-capital_wordmark_ink-page_ECEEF0.svg") left center / contain no-repeat }
.site-nav { gap: 1.8rem }
.site-nav a { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--fg); padding-block: .4rem }
.site-nav a:hover { color: var(--red) }
.site-nav a[aria-current], .footer-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--red); color: var(--fg) }
.btn.nav-cta { background: var(--black); color: #fff; border-radius: 999px; padding: .7rem 1.25rem }
.btn.nav-cta:hover { background: var(--red) }
.nav-toggle { border-color: var(--line); color: var(--fg); background: var(--panel) }
@media (max-width: 1100px) and (min-width: 641px) {
  .nav-bar { flex-wrap: wrap; row-gap: 0; padding-top: .6rem }
  .site-nav { order: 3; flex-basis: 100%; justify-content: space-between; border-top: 1px solid var(--line); margin-top: .6rem; padding-block: .5rem }
}
@media (max-width: 560px) { .brand::before { width: 220px; height: 15px } }
@media (max-width: 420px) {
  .brand::before { width: 176px; height: 12px }
  .btn.nav-cta { padding: .5rem .8rem; font-size: .85rem }
  .nav-bar { gap: .6rem }
}
@media (max-width: 380px) {
  .brand::before { width: 150px; height: 10px }
  .nav-toggle { padding: .45rem .7rem; font-size: .85rem }
  .nav-bar { gap: .45rem; padding-inline: .8rem }
}
@media (max-width: 640px) { .site-nav a[aria-current] { box-shadow: inset 3px 0 0 var(--red) } }

/* ── type: Studio grotesk heads, Ink serif ledes, mono labels ── */
h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--fg); text-wrap: balance }
h1 { letter-spacing: -.04em; line-height: .96 }
h2 { letter-spacing: -.035em; line-height: 1.0; font-size: clamp(2.1rem, 3.9vw, 3.3rem) }
h3 { letter-spacing: -.02em; font-weight: 700 }
p { text-wrap: pretty }
.eyebrow, .kicker, .body > span:first-child, .flow-k, .k {
  font-family: var(--mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--red)
}
.lede { font-family: var(--serif); font-size: 1.28rem; line-height: 1.5 }
.section-lead { font-family: var(--serif); color: var(--muted); font-size: 1.2rem; line-height: 1.5; max-width: 46rem }
.prose a, footer a, .lede a, .section-lead a, .faq-item a { color: var(--red); text-decoration-color: rgba(184, 50, 58, .4) }

/* ── buttons: Studio's black pill, red on hover ── */
.btn { background: var(--black); color: #fff; border-radius: 999px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; padding: .85rem 1.5rem; box-shadow: none }
.btn:hover { background: var(--red); color: #fff }
.btn.ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--fg) }
.btn.ghost:hover { background: var(--fg); color: #fff; border-color: var(--fg) }

/* ── page rhythm ── */
.poster { gap: 0; padding-top: 0 }
.poster > section, .poster > div:not(.hero):not(.prose), .wrap > main > section { padding-block: clamp(3.2rem, 6vw, 5.5rem) }
.poster > section:first-child { padding-top: 0 }
.machine { border-top: 0; padding-top: clamp(3.2rem, 6vw, 5.5rem); gap: 1.6rem }
.card:hover { transform: none }

/* section heads: Ink's numbered rule */
.sh { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1.1rem; margin-bottom: .4rem; border-top: 2px solid var(--fg); padding-top: 1.1rem }
.sh-num { width: auto; height: auto; background: none; border-radius: 0; color: var(--red); font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .08em; display: inline-block }

/* ── hero: full-bleed photograph (Gilt reference), navy veil, white grotesk headline ── */
.hero {
  position: relative; isolation: isolate;
  width: 100vw; margin-left: calc(50% - 50vw); border: 0; border-radius: 0; overflow: hidden;
  min-height: clamp(440px, 64vh, 680px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(5rem, 10vh, 8rem) var(--gutter) clamp(3rem, 7vh, 5rem);
  background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .86) 0%, rgba(11, 19, 34, .6) 42%, rgba(11, 19, 34, .1) 100%), linear-gradient(0deg, rgba(11, 19, 34, .55), rgba(11, 19, 34, 0) 45%), var(--hero, none);
  background-size: cover; background-position: center, center, var(--hero-pos, 50% 50%);
  background-blend-mode: normal, normal, var(--hero-blend, normal);
  color: #fff;
}
.hero > *, .hero-cols > div:last-child > * { max-width: 48rem }
.hero h1 { color: #fff; font-size: clamp(2.8rem, 6.2vw, 5.6rem); line-height: .95; max-width: 14ch; margin: .6rem 0 0 }
.hero .eyebrow { color: #fff; opacity: .8 }
.hero .lede { color: rgba(255, 255, 255, .86); max-width: 40rem; margin-top: 1.3rem }
.hero .lede + .lede { margin-top: .7rem }
.hero .actions { margin-top: 1.8rem }
.hero .btn { background: #fff; color: var(--black) }
.hero .btn:hover { background: var(--red); color: #fff }
.hero .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6) }
.hero .btn.ghost:hover { background: #fff; color: var(--black); border-color: #fff }
.hero .firm { color: rgba(255, 255, 255, .75); border-top: 1px solid rgba(255, 255, 255, .3); max-width: 48rem }
.hero-cols { display: block }
.hero-deco { display: none }
.hero .chips { margin: 1.5rem 0 0 }
.hero .chip { background: rgba(11, 19, 34, .35); border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-family: var(--mono); font-weight: 400; font-size: .74rem; letter-spacing: .02em; backdrop-filter: blur(4px) }
.firm { font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem }
.chip { background: transparent; border: 1px solid var(--fg); color: var(--fg); font-family: var(--mono); font-weight: 400 }

/* back link above a note's hero */
.back { display: inline-block; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); padding: 1rem 0; text-decoration: none }
.back:hover { color: var(--fg) }

/* ── figures band: a ruled spec strip lifted over the hero's foot ── */
.poster > section:has(> .stats-band) { padding-top: 0 }
.stats-band { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); gap: 0; position: relative; z-index: 2; margin-top: -4.2rem; box-shadow: var(--shadow); overflow: hidden }
.stat { background: none; padding: 1.8rem 1.7rem 1.6rem }
.stat + .stat { border-left: 1px solid var(--line) }
.stat-num { font-family: var(--display); font-weight: 700; color: var(--fg); font-size: clamp(2.3rem, 4vw, 3.4rem); letter-spacing: -.04em; margin-bottom: .5rem }
.stat-label { font-family: var(--mono); font-weight: 400; color: var(--muted); letter-spacing: .06em; font-size: .7rem }

/* ── cards (shared) ── */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius) }
.stage { background: var(--navy) center / cover no-repeat; background-image: var(--img, none); background-position: var(--img-pos, 50% 50%); background-blend-mode: var(--img-blend, normal); border-bottom: 0 }
.stage svg.scene { display: none }
.stage-num { display: none }
.body { padding: 1.5rem 1.6rem 1.7rem; gap: .55rem }
.body h3 { font-size: 1.45rem; line-height: 1.1 }
.body p, ul.tick li { color: var(--muted); font-size: .96rem }
ul.tick li::before, .ai-block li::before { background: var(--red) }
a.card { transition: box-shadow .25s ease }
a.card:hover { box-shadow: var(--shadow); border-color: var(--line) }
a.card:hover h3 { color: var(--red) }
.card.soon { border-style: solid; background: var(--white) }
.merge { display: none }

/* audience and scenario cards: photo on top */
.who-grid { gap: 1.3rem; margin-top: 1.8rem }
.who-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0 1.6rem; overflow: hidden }
.who-card::before { content: ""; display: block; aspect-ratio: 3 / 2; margin-bottom: 1.3rem; background: var(--navy) var(--img, none) center / cover no-repeat; background-position: var(--img-pos, 50% 50%); background-blend-mode: var(--img-blend, normal) }
.who-card > * { padding-inline: 1.5rem }
.who-card h3 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; color: var(--fg); margin: 0 0 .7rem; line-height: 1.12 }
.who-card ul { padding-left: 2.6rem; padding-right: 1.5rem }
.who-card li, .who-card p { color: var(--muted); opacity: 1; font-size: .93rem }

/* three steps: Studio's alternating photo rows */
.three { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 1.8rem }
.three > .card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; overflow: hidden }
.three > .card .stage { min-height: 340px; height: 100% }
.three > .card .body { align-content: center; padding: clamp(1.8rem, 4vw, 3.4rem) }
.three > .card .body h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.02 }
.three > .card .body p { font-size: 1rem }
.three > .card:nth-child(even) .stage { order: 2 }

/* library cards (go deeper, research): photo-topped tiles */
.library { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; margin-top: 1.8rem }
.library > .card .stage { aspect-ratio: 16 / 10; min-height: 0 !important }
.library > .card .body h3 { font-size: 1.35rem }

/* fee band: Studio's navy band with gold figures */
.share { background: var(--navy); border: 0; border-radius: 22px; color: #EEF0F3; box-shadow: none; padding: clamp(2rem, 4vw, 3.4rem); margin-block: clamp(3.2rem, 6vw, 5.5rem) }
.share .sh { border-top-color: rgba(255, 255, 255, .35) }
.share h2 { color: #fff }
.share .lead { color: #C9D0DC; font-family: var(--serif); font-size: 1.15rem }
.share .card { background: var(--navy-2); border: 1px solid rgba(255, 255, 255, .12) }
.share .stage { background: #0E1626 }
.share .stage svg.scene { display: block }
.share .body h3 { color: #fff }
.share .body p { color: #B5BDCB }
.share .sh-num { color: var(--gold-light) !important; background: none !important }
.bar { border-radius: 999px }
.bar .you { background: #fff; color: var(--navy) }
.bar .us { background: var(--gold-light); color: var(--navy) }
.share .bar-legend { color: #8E98AB }

/* closing call: full-bleed photograph with a navy veil */
.cta-band {
  width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .9), rgba(11, 19, 34, .55) 60%, rgba(11, 19, 34, .2)), var(--cta, none);
  background-size: cover; background-position: center, var(--cta-pos, 50% 50%);
  background-blend-mode: normal, var(--cta-blend, normal);
  color: #fff;
}
.cta-band { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2rem; min-height: clamp(440px, 60vh, 600px); align-content: center; margin-top: 0;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .3) 100%), var(--cta, none) }
.cta-band h2 { color: #fff; font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
.cta-band p { color: rgba(255, 255, 255, .86); font-family: var(--serif); font-weight: 400; font-size: 1.28rem; max-width: 46ch }
.cta-band .btn { background: #fff; color: var(--black) }
.cta-band .btn:hover { background: var(--red); color: #fff }

/* two AIs */
.split-2 { gap: 1.3rem }
.ai-block { border-radius: var(--radius); background: var(--white); border: 1px solid var(--line) }
.ai-stage { min-height: 300px; border: 0; background: var(--navy) center / cover no-repeat; background-image: var(--img, none); background-position: var(--img-pos, 50% 50%); background-blend-mode: var(--img-blend, normal) }
.ai-stage.central, .ai-stage.yours { background-color: var(--navy) }
.ai-content { padding: 1.6rem 1.7rem 1.8rem }
.ai-content h3 { font-size: 1.55rem }
.tag-central, .tag-yours { background: rgba(255, 255, 255, .94); color: var(--navy); border: 0; font-family: var(--mono); font-weight: 500; letter-spacing: .1em }
.ai-block ul { border-top-color: var(--line) }

/* numbered points: Ink's ruled ledger, two columns */
ol.points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; margin-top: 1rem }
ol.points li { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.4rem 0 1.5rem; gap: 1.2rem }
ol.points .n { width: auto; height: auto; background: none; border-radius: 0; color: var(--red); font-family: var(--mono); font-size: .78rem; font-weight: 500; margin-top: .3rem }
ol.points li strong { font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.015em; line-height: 1.2; margin-bottom: .45rem }
ol.points li p { font-size: .96rem; color: var(--muted) }

/* mock screens: a dark device on paper */
.mock-screen { border-radius: 14px; border: 0; box-shadow: 0 40px 80px rgba(11, 19, 34, .28), 0 0 0 1px rgba(20, 33, 58, .25); max-width: 760px; font-size: .76rem; --line: #263753; --muted: #95A0B4; --fg: #EEF0F3; --champ: #D9C28F; --mint: #5CC08C; --red: #E0646B }
.mock-titlebar { background: #111C2E }
.caption { opacity: .8; color: var(--muted) }

/* prose: Ink's editorial column, heads in a left margin on wide screens */
.prose { max-width: none }
.prose section { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 44rem); gap: .6rem 4rem; padding: 2.4rem 0; border-top: 1px solid var(--line) }
.prose section > * { grid-column: 2 }
.prose section > h2 { grid-column: 1; grid-row: 1 / span 20; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.12; margin: 0; align-self: start }
.prose h2 { margin: 2rem 0 .6rem }
.prose p, .prose ul { font-family: var(--serif); font-size: 1.18rem; line-height: 1.66; color: #283246; max-width: 44rem }
.prose p + p { margin-top: 1rem }
.prose strong { color: var(--fg); font-weight: 600 }
.prose ul { gap: .55rem }

/* a note's sources: a quiet numbered list in the prose column */
.prose .sources ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .7rem; font-family: var(--sans); font-size: .92rem; line-height: 1.5; color: var(--muted) }
.prose .sources li::marker { font-family: var(--mono); font-size: .78rem; color: var(--red) }
.prose .sources a { color: var(--fg); text-decoration-color: var(--line) }
.prose .sources a:hover { color: var(--red); text-decoration-color: currentColor }

/* a note's "Important information": a quiet ruled panel at the end of the prose */
.prose .important { margin-top: 1.4rem; padding: 2rem 0 0; border-top: 2px solid var(--fg) }
.prose .important p { font-family: var(--sans); font-size: .9rem; line-height: 1.55; color: var(--muted) }
.prose .important p + p { margin-top: .6rem }
.prose .important a { color: var(--fg) }

/* white papers: the key-findings box under the hero, and data tables in the prose column */
.poster > section.findings {
  margin-top: clamp(2.8rem, 5vw, 4.4rem); padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--fg); border-radius: 0 0 var(--radius) var(--radius);
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem 4rem; align-items: start
}
.findings h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 0 }
.findings ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem }
.findings li { position: relative; padding-left: 1.5rem; font-family: var(--serif); font-size: 1.14rem; line-height: 1.5; color: var(--fg) }
.findings li::before { content: ""; position: absolute; left: 0; top: .7em; width: .7rem; height: 2px; background: var(--red) }
.prose section > * { min-width: 0 }
.prose .table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; margin: 1.2rem 0 .4rem }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .9rem; line-height: 1.4; font-variant-numeric: tabular-nums }
.prose caption { caption-side: top; text-align: left; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: .7rem }
.prose th { text-align: left; font-weight: 600; color: var(--fg); border-bottom: 2px solid var(--fg); padding: .55rem .8rem .55rem 0; vertical-align: bottom }
.prose td { border-bottom: 1px solid var(--line); padding: .55rem .8rem .55rem 0; color: #283246; vertical-align: top }
.prose th:not(:first-child), .prose td:not(:first-child) { text-align: right }
@media (max-width: 860px) { .poster > section.findings { grid-template-columns: minmax(0, 1fr) } }

/* the note's closing line and the next-note panel */
.poster > .firm { max-width: 44rem; margin: 0 0 0 auto }
.next { border-top: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 2.2rem; margin-block: 2.4rem }
.next p { font-size: 1.05rem; color: var(--fg) }
.next .actions { flex-wrap: wrap }
.next .btn { white-space: normal; max-width: 100%; text-align: left }

/* FAQ: editorial accordions; the marker is drawn, not typed */
.faq { max-width: 56rem; gap: 0; margin-top: .6rem }
.faq-item { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 }
.faq-item summary { list-style: none; position: relative; padding: 1.25rem 3rem 1.25rem 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.35; color: var(--fg) }
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: linear-gradient(var(--red), var(--red)) center / 16px 1.5px no-repeat, linear-gradient(var(--red), var(--red)) center / 1.5px 16px no-repeat;
  transition: transform .2s ease
}
.faq-item[open] summary::after { transform: rotate(45deg) }
.faq-item[open] summary, .faq-item summary:hover { color: var(--red) }
.faq-item p { margin: 0 0 1.4rem; max-width: 46rem; color: var(--muted); font-family: var(--serif); font-size: 1.1rem; line-height: 1.6 }

/* forms */
.call, .bill { border-top: 0 }
form { max-width: 34rem; gap: 1rem }
label { color: var(--fg); font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase }
input { background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; padding: .85rem 1rem }
input:focus { outline: 2px solid var(--fg); outline-offset: 1px; border-color: transparent }
.check, form .check { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 400; color: var(--muted) }
.check input { accent-color: var(--black) }
.checks legend { color: var(--fg); font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase }
.confirm { background: var(--white); border-color: var(--fg); color: var(--fg) }

/* security flow */
.flow { gap: 1rem }
.flow-node { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem }
.flow-yours { border-color: var(--fg); box-shadow: inset 0 3px 0 var(--red) }
.flow-node strong { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: 1.45rem; color: var(--fg) }
.flow-node small { font-size: .9rem }
.flow-edge span::after { color: var(--red) }
.flow-back { background: var(--white); border-left-color: var(--red); border-radius: 0 10px 10px 0 }

/* notices */
.notice { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.8rem 2rem; max-width: 52rem }
.notice ul { color: var(--muted) }

/* fee comparison */
.bar-track { background: var(--panel-2); height: 18px; border-radius: 999px }
.bar-fill, .seg { border-radius: 0 }
.bar-trad .bar-fill, .seg-mgmt { background: #9AA3B5 }
.bar-hh .bar-fill { background: var(--red) }
.seg-perf { background: var(--navy) }
.bar-val, .bar-split, .compare-row-label small { font-family: var(--mono) }
.compare-row-label { font-family: var(--display); font-weight: 700; font-size: 1.05rem }

/* strategy themes and screenshots (shared look; photos per page) */
.theme-group, .shot-img { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius) }
.theme-group h3 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.025em; color: var(--fg) }
.theme-name { font-family: var(--sans); font-weight: 600; color: var(--fg) }
.shot-label { background: rgba(20, 33, 58, .88); color: #fff }

/* campaign economics */
.economics { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.35; color: var(--fg) }
.economics a { color: var(--red) }

/* ── footer: paper, Ink's navy rule, the logo, the fine print ── */
footer { border-top: 2px solid var(--fg); padding: 2.6rem 0 3.4rem; margin-top: clamp(3rem, 6vw, 5rem); color: var(--muted); font-size: .86rem; gap: .9rem }
footer::before { content: ""; width: 280px; height: 19px; max-width: 100%; margin-bottom: .8rem; background: url("../img/logo/hedgehog-capital_wordmark_ink-page_ECEEF0.svg") left center / contain no-repeat }
.footer-nav { gap: .5rem 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem }
.footer-nav a { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); text-decoration: none }
.footer-nav a:hover { color: var(--red) }
.risk-line { color: var(--fg); opacity: 1; max-width: 62rem }
footer p:last-child { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--fg) }
.cta-band + footer, .poster:has(> .cta-band:last-child) + footer { margin-top: 0; border-top: 0 }

/* ── site-wide fixes from the page review (25 Oct) ── */
/* full-bleed text lines up with the logo and the page column (.wrap adds 1.4rem inside the 1240px page) */
:root { --gutter: calc(max(0px, 50vw - var(--page) / 2) + 1.4rem) }
/* no doubled paper under the hero or around the closing band; the footer follows the band directly */
.poster > section:has(> .hero) { padding-bottom: 0 }
.poster > section:has(> .cta-band) { padding-bottom: 0 }
.poster > section:has(> .cta-band:first-child) { padding-top: 0 }
main:has(.poster > section:last-child > .cta-band:last-child) + footer, main:has(.poster > section.next:last-child) + footer { margin-top: 0; border-top: 0 }
/* the hero eyebrow carries a short red rule */
.hero .eyebrow { opacity: 1; color: rgba(255, 255, 255, .86); display: flex; align-items: center; gap: .9rem }
.hero .eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: var(--red); flex: none }
/* links on dark photo bands stay readable */
.hero .lede a, .hero .firm a, .cta-band p a { color: #fff; text-decoration-color: rgba(255, 255, 255, .55) }
/* the approved arrow and figure marks inside card stages show as white marks on the photo */
.stage { position: relative }
.library > .card .stage { display: flex; align-items: flex-end; justify-content: flex-end }
.library > .card .stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 19, 34, 0) 40%, rgba(11, 19, 34, .7)); pointer-events: none }
.library > .card .stage-num { display: block; position: relative; z-index: 1; min-height: 0; padding: .9rem 1.1rem; line-height: 1; font-family: var(--display); font-weight: 600; font-size: 1.4rem !important; color: #fff; user-select: auto }
/* the two-AI stages: site.css sets their background shorthand at higher specificity, so restate the photo */
.ai-stage.central, .ai-stage.yours { background-image: var(--img, none); background-size: cover; background-position: var(--img-pos, 50% 50%); background-repeat: no-repeat }
/* the fee band: readable labels, the 10% reads across */
.share .k { color: var(--gold-light) !important }
.bar .us { writing-mode: horizontal-tb; min-width: 3.4rem; padding: 0 .4rem }
/* form fields need a visible edge (WCAG 1.4.11) */
input { border-color: #7A8292 }
/* prose: the heading spans the rows without opening gaps between paragraphs */
.prose section { row-gap: 0 }
.prose section > h2 + * { margin-top: 0 }
.prose section > :not(h2) + :not(h2) { margin-top: 1rem }

/* ── responsive ── */
@media (max-width: 1000px) {
  .prose section > h2 { margin-bottom: 1rem }
  .library { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .prose section { grid-template-columns: 1fr; gap: .6rem }
  .prose section > *, .prose section > h2 { grid-column: 1; grid-row: auto }
}
@media (max-width: 860px) {
  .three > .card { grid-template-columns: 1fr }
  .three > .card .stage { min-height: 240px; order: 0 !important }
  ol.points { grid-template-columns: 1fr }
  .split-2 { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  :root { --gutter: 1rem }
  .cta-band { background-image: linear-gradient(180deg, rgba(11, 19, 34, .86), rgba(11, 19, 34, .74) 55%, rgba(11, 19, 34, .9)), var(--cta, none) }
  .cta-band { min-height: 0; gap: 1.6rem; padding-block: 4.4rem }
  .cta-band h2 { text-wrap: wrap; font-size: clamp(2rem, 9vw, 2.4rem); margin-bottom: .8rem }
  .cta-band p { font-size: 1.12rem }
  .hero { min-height: 520px; padding: 6rem 1rem 2.6rem; background-image: linear-gradient(0deg, rgba(11, 19, 34, .92) 0%, rgba(11, 19, 34, .7) 55%, rgba(11, 19, 34, .25) 100%), linear-gradient(0deg, rgba(11, 19, 34, 0), rgba(11, 19, 34, 0)), var(--hero, none) }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem) }
  .lede { font-size: 1.15rem }
  .stats-band { margin-top: -2.4rem; grid-template-columns: 1fr 1fr }
  .stat:nth-child(3) { border-left: 0 }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line) }
  .library { grid-template-columns: 1fr }
  .who-grid { grid-template-columns: 1fr }
  .cta-band { padding: 3.4rem 1rem }
  .share { padding: 1.6rem; border-radius: 18px }
  .next { padding: 1.4rem }
  .prose p, .prose ul { font-size: 1.08rem }
}

/* ── cookie banner (29 Oct): a paper card at the bottom left; Accept and Reject carry equal weight ── */
.consent {
  position: fixed; left: max(1rem, env(safe-area-inset-left, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 15; /* under the sticky header (20), so an open phone menu sits above it */
  width: min(30rem, calc(100vw - 2rem)); display: grid; gap: .8rem; padding: 1.3rem 1.4rem 1.4rem;
  background: var(--white); color: var(--fg); border: 1px solid var(--line); border-top: 3px solid var(--fg);
  border-radius: var(--radius); box-shadow: var(--shadow); font-size: .92rem; line-height: 1.5
}
.consent[hidden] { display: none }
.consent p { margin: 0 }
.consent .consent-label { margin: 0; font-family: var(--mono); font-weight: 500; font-size: .72rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--red) }
.consent:focus { outline: none }
.consent:focus-visible { outline: 2px solid var(--red); outline-offset: 3px }
.consent a { color: var(--red); text-decoration-color: rgba(184, 50, 58, .4) }
.consent-actions { display: flex; gap: .7rem; flex-wrap: wrap }
.consent-actions .btn { flex: 1 1 8rem; justify-content: center; padding: .75rem 1.2rem }
.consent .btn:focus-visible, .cookie-settings:focus-visible { outline: 2px solid var(--red); outline-offset: 3px }
.cookie-settings { background: none; border: 0; padding: 0; font: inherit; color: var(--red); text-decoration: underline; text-decoration-color: rgba(184, 50, 58, .4); text-underline-offset: .18em; cursor: pointer }
.cookie-settings:hover { color: var(--red-dark) }
@media (max-width: 640px) {
  .consent { left: .75rem; right: .75rem; bottom: .75rem; width: auto; padding: 1rem 1.1rem 1.1rem; gap: .6rem; font-size: .86rem; line-height: 1.45 }
  .consent-actions .btn { flex-basis: 6rem; padding: .6rem 1rem }
}
/* while the banner is open, the page gains its height at the bottom (set by js/site.js), so nothing stays hidden under it */
body { padding-bottom: var(--consent-space, 0px) }
html { scroll-padding-bottom: var(--consent-space, 0px) }
@media print { .consent, .cookie-settings { display: none !important } }

/* ── forms (29 Oct): the field bots fill in stays off screen; the send error reads in the accent ── */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.form-error { color: var(--red); margin: 0 }
.form-error a { color: var(--red) }
form .btn:disabled { opacity: .6; cursor: progress }

/* ── code blocks (29 Oct, the install guide): navy panels in Plex Mono that scroll sideways inside, never the page ── */
.code { position: relative; margin: 1rem 0; min-width: 0 }
.code pre { margin: 0; background: var(--navy-deep); color: #E6EAF1; border-radius: 10px; padding: 1.1rem 4.8rem 1.1rem 1.2rem; overflow-x: auto; max-width: 100%; font-family: var(--mono); font-size: .84rem; line-height: 1.6; tab-size: 2 }
.code code { font-family: inherit; white-space: pre }
.code .copy { position: absolute; top: .55rem; right: .55rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #C9D1DE; background: #1A2740; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; padding: .3rem .55rem; cursor: pointer }
.code .copy:hover, .code .copy:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .5) }
.ph { font-family: var(--mono); background: rgba(217, 194, 143, .22); color: var(--gold-deep); border: 1px dashed var(--gold); border-radius: 4px; padding: 0 .3em }
.code .ph { background: rgba(217, 194, 143, .16); color: #E9D6A8; border-color: rgba(217, 194, 143, .6) }
@media print { .code .copy { display: none } }