/* Shared styles for the public content pages (/beta, /sikkerhed, /support).
   No amber here by design (GV-222): amber is money-only and these pages show no
   money. Emphasis uses --gv-leaf / --gv-forest, status uses --gv-attention. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; color: var(--gv-text-primary); background: var(--gv-warm-white); font-family: var(--gv-font-body); line-height: 1.65; }
a { color: inherit; }
img { display: block; }
/* Two-layer focus ring — same reasoning, and the same measured ratios, as landing.css
   (GV-377). These pages have the dark --gv-deep-forest nav above light content, so a
   single-colour ring fails on one half of every page whichever colour it takes. */
:focus-visible {
  outline: 2px solid var(--gv-deep-forest);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--gv-light-leaf);
}
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 10px 14px; color: var(--gv-deep-forest); background: #fff; border-radius: 6px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.page-nav { height: 64px; padding: 0 max(20px, calc((100vw - 1040px) / 2)); display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--gv-deep-forest); }
.page-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--gv-font-display); font-size: 19px; font-weight: 900; text-decoration: none; }
.page-brand img { border-radius: 7px; }
.page-back { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); }
.page-hero { padding: 86px max(20px, calc((100vw - 1040px) / 2)) 74px; color: #fff; background: var(--gv-deep-forest); }
.page-eyebrow { margin-bottom: 12px; color: var(--gv-leaf); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.page-hero h1 { max-width: 780px; font-family: var(--gv-font-display); font-size: 50px; line-height: 1.08; font-weight: 900; letter-spacing: 0; text-wrap: balance; }
.page-lead { max-width: 680px; margin-top: 18px; color: rgba(255,255,255,.68); font-size: 18px; }
.status-line { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; color: rgba(255,255,255,.52); font-size: 13px; }
.page-main { max-width: 1040px; margin: 0 auto; padding: 72px 20px 100px; }
.page-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.info-block { padding: 24px; background: #fff; border: 1px solid var(--gv-border); border-radius: 8px; }
.info-block h2, .content-section h2 { margin-bottom: 8px; font-family: var(--gv-font-display); font-size: 22px; line-height: 1.25; letter-spacing: 0; }
.info-block p, .content-section p, .content-section li { color: var(--gv-text-secondary); font-size: 14px; }
.info-block a, .content-section a { color: var(--gv-forest); font-weight: 600; }
.content-section { max-width: 760px; margin: 58px auto 0; }
.content-section:first-child { margin-top: 0; }
.content-section ul, .content-section ol { margin: 14px 0 0 22px; }
.content-section li { margin: 8px 0; }
.content-section + .content-section { padding-top: 48px; border-top: 1px solid var(--gv-border); }
.action-panel { margin-top: 38px; padding: 30px; color: #fff; background: var(--gv-deep-forest); border-radius: 8px; }
.action-panel h2 { font-family: var(--gv-font-display); font-size: 26px; letter-spacing: 0; }
.action-panel p { max-width: 660px; margin-top: 8px; color: rgba(255,255,255,.65); }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.primary-action, .secondary-action { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 20px; border-radius: 7px; font-family: var(--gv-font-display); font-weight: 800; text-decoration: none; }
.primary-action { color: #fff; background: var(--gv-forest); }
.secondary-action { color: #fff; border: 1px solid rgba(255,255,255,.24); }
.action-note { margin-top: 14px; font-size: 11px; color: rgba(255,255,255,.45); }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 34px; counter-reset: step; }
.step { padding: 22px; background: #fff; border: 1px solid var(--gv-border); border-radius: 8px; counter-increment: step; }
.step::before { content: "0" counter(step); display: block; margin-bottom: 14px; color: var(--gv-forest); font-family: var(--gv-font-display); font-weight: 900; }
.step h2 { font-family: var(--gv-font-display); font-size: 18px; letter-spacing: 0; }
.step p { margin-top: 5px; color: var(--gv-text-secondary); font-size: 13px; }
.page-footer { padding: 32px 20px; color: rgba(255,255,255,.48); background: #111e15; text-align: center; font-size: 12px; }
.page-footer a { margin: 0 8px; }
/* Newsletter signup (GV-366). The only <form> on the public content pages, and it lives
   inside .action-panel — dark surface, white text. Still no amber: this is a signup, not
   money, and the rule holds even for a call to action. */
.signup-form { display: grid; gap: 12px; margin-top: 22px; max-width: 480px; }
.signup-form label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); }
.signup-form input[type="email"] { min-height: 48px; padding: 0 14px; color: var(--gv-text-primary); background: #fff; border: 1px solid var(--gv-border); border-radius: 7px; font-family: var(--gv-font-body); font-size: 16px; }
.signup-form button { min-height: 48px; padding: 0 20px; color: #fff; background: var(--gv-forest); border: 0; border-radius: 7px; font-family: var(--gv-font-display); font-size: 15px; font-weight: 800; cursor: pointer; }
.signup-consent { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 13px; }
/* The honeypot. Hidden from people without display:none, which some bots skip, and
   removed from the tab order and the accessibility tree so nobody real ever lands on it. */
.signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) {
  .page-hero { padding-top: 62px; }
  .page-hero h1 { font-size: 36px; }
  .page-lead { font-size: 16px; }
  .page-main { padding-top: 52px; }
  .page-grid, .steps { grid-template-columns: 1fr; }
  .action-row { display: grid; }
}