/* Prime Vantage funnel. Sage accent from the PV logo, plain grotesk, light first with dark mode. */
:root {
  --bg: #FFFFFF; --soft: #F4F5F3; --field: #FFFFFF; --ink: #1B1F1D; --muted: #5F6763; --line: #E1E4E1;
  --accent: #3D6A5A; --accent-ink: #FFFFFF; --accent-soft: #E5EEEA; --dark: #141816; --on-dark: #EEF1EF;
  --bad: #B2432D; --good: #2E7A4A;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w: 1100px;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #141716; --soft: #1B1F1D; --field: #1B1F1D; --ink: #E8ECEA; --muted: #9AA39F; --line: #2B312E;
  --accent: #8CBBA8; --accent-ink: #141716; --accent-soft: #21302A; --dark: #0E1110; --on-dark: #E8ECEA;
  --bad: #E68B72; --good: #7BC394; color-scheme: dark } }

* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans) }
img { max-width: 100% }
a { color: var(--accent) }
p { margin: 0 }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance }
h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 700 }
h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700 }
h3 { font-size: 19px; font-weight: 600 }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wrap { max-width: var(--w); margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
.muted { color: var(--muted) }

/* header */
.site-head { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10 }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -.01em }
.logo svg { width: 32px; height: 32px }
.site-nav { display: flex; gap: 22px; align-items: center }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500 }
.site-nav a:hover { color: var(--accent) }
.menu-btn { display: none; border: 1px solid var(--line); background: none; color: var(--ink); border-radius: 8px; padding: 7px 11px; font: 500 14px var(--sans) }
@media (max-width: 820px) {
  .menu-btn { display: block }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 6px 18px 14px }
  .site-nav a { padding: 11px 0; border-bottom: 1px solid var(--line) }
  .site-head.open .site-nav { display: flex }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 13px 20px; font: 600 15px var(--sans); text-decoration: none; cursor: pointer }
.btn:hover { filter: brightness(1.06) }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line) }
.btn:disabled { opacity: .55; cursor: default }

/* landing hero with form */
.hero { padding-block: 44px 56px; background: var(--soft); border-bottom: 1px solid var(--line) }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 48px; align-items: start }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px } }
.hero .copy { display: grid; gap: 18px; padding-top: 8px }
.tag { display: inline-block; justify-self: start; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px }
.hero .lede { font-size: 18px; max-width: 52ch }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px }
.ticks li { padding-left: 28px; position: relative }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 13px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) }

/* form card */
.form-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 18px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25) }
.form-card h2 { font-size: 22px }
.progress { display: grid; gap: 7px }
.progress-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden }
.progress-bar i { display: block; height: 100%; background: var(--accent); transition: width .25s }
.progress small { font-size: 13px; color: var(--muted) }
.step { display: grid; gap: 14px; border: 0; margin: 0; padding: 0; min-width: 0 }
.field { display: grid; gap: 6px }
.field label, .field .flabel { font-size: 14px; font-weight: 500 }
.field .hint { font-size: 12.5px; color: var(--muted) }
.req { color: var(--bad) }
.field input, .field select, .field textarea { width: 100%; background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; font: 15px var(--sans) }
.field textarea { min-height: 88px; resize: vertical }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad) }
.field .err { font-size: 12.5px; color: var(--bad) }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width: 480px) { .pair { grid-template-columns: 1fr } }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13.5px }
.check input { width: 18px; height: 18px; margin-top: 2px }
.notice { font-size: 13.5px; background: var(--accent-soft); color: var(--ink); border-radius: 8px; padding: 10px 12px }
.notice.warn { background: transparent; border: 1px solid var(--bad) }
.form-nav { display: flex; justify-content: space-between; gap: 10px }
.form-nav .btn { flex: 1 }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.secure { font-size: 12.5px; color: var(--muted); text-align: center }

/* sections */
.section { padding-block: 64px }
.section + .section { border-top: 1px solid var(--line) }
.section-head { display: grid; gap: 10px; max-width: 680px; margin-bottom: 30px }
.problems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; list-style: none; padding: 0; margin: 0 }
@media (max-width: 720px) { .problems { grid-template-columns: minmax(0, 1fr) } }
.problems li { padding: 14px 0 14px 30px; border-bottom: 1px solid var(--line); position: relative }
.problems li::before { content: "?"; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; display: grid; place-items: center }
.help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0 }
@media (max-width: 860px) { .help { grid-template-columns: minmax(0, 1fr) } }
.help li { background: var(--soft); border-radius: 12px; padding: 20px; display: grid; gap: 6px; align-content: start }
.help li b { font-size: 16.5px }
.help li span { color: var(--muted); font-size: 14.5px }
.story { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: start }
@media (max-width: 820px) { .story { grid-template-columns: minmax(0, 1fr); gap: 20px } }
.story .photo { position: relative; overflow: hidden; aspect-ratio: 4/5; border-radius: 14px; background: var(--soft); display: grid; place-items: center; max-width: 100% }
.story .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.story .photo span { font-size: 84px; font-weight: 700; letter-spacing: -.05em; color: var(--accent); opacity: .22 }
.story .text { display: grid; gap: 14px; max-width: 64ch }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px }
.figures div { border: 1px solid var(--line); border-radius: 10px; padding: 14px }
.figures small { display: block; font-size: 12.5px; color: var(--muted) }
.figures strong { font-size: 22px }
.faq { display: grid; border-top: 1px solid var(--line); max-width: 820px }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0 }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 24px; line-height: 1; flex: none; width: 28px; height: 28px; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center }
.faq details[open] summary::after { content: "−" }
.faq details p { color: var(--muted); margin-top: 10px }
.cta-band { background: var(--dark); color: var(--on-dark); border-radius: 16px; padding: 34px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px }
.cta-band p { opacity: .8; margin-top: 6px }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding-block: 34px 44px; font-size: 13px; color: var(--muted) }
.site-foot .wrap { display: grid; gap: 14px }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px }
.foot-links a { color: var(--ink); text-decoration: none; font-weight: 500 }
.foot-small { max-width: 90ch; display: grid; gap: 8px }

/* plain text pages */
.prose { max-width: 72ch; display: grid; gap: 14px; padding-block: 48px 64px }
.prose h2 { font-size: 22px; margin-top: 14px }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px }
.preview-banner { background: #F6E7B5; color: #3A2F05; font-size: 13.5px; text-align: center; padding: 8px 16px }

.story-text { max-width: 64ch; display: grid; gap: 14px }
.back-bar { border-bottom: 1px solid var(--line); background: var(--bg) }
.back-bar .wrap { padding-block: 10px }
.back-bar a { font-size: 14px; font-weight: 600; text-decoration: none }
.back-bar a:hover { text-decoration: underline }