/* Værsgo' — designtokens og basisstil. Genereret fra brandets designsystem. */

/* Archivo (variable, wdth+wght) and Inter Tight — both Open Font License.
   Served from Google Fonts: no binaries were supplied with the brand sources. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Inter+Tight:wght@400;500;600&display=swap");

:root{
  --font-display:"Archivo","Arial Narrow",sans-serif;
  --font-ui:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  /* The display axis setting is part of the brand, not a preference. */
  --display-axes:'wdth' 66,'wght' 800; /* @kind font */
}


:root{
  /* Base palette */
  --nat:#141210;          /* warm near-black */
  --dagslys:#FBF8F3;      /* page background */
  --hylde:#F0EBE1;        /* cards and fields */
  --gul:#FFC24B;          /* Værsgo'-yellow, signal only */
  --frisk:#7FE0A5;        /* fresh goods, confirmation */
  --kant:#E2DACC;         /* 1px rules */
  --daempet:#7C746A;      /* muted text */
  --fejl:#D93A2B;         /* error / destructive */
  --nat-flade:#141210;    /* Nat mode page */
  --nat-hylde:#201D19;    /* Nat mode card */
  --nat-daempet:#A39C90;  /* Nat mode muted text */
  --placeholder:#A79E92;

  /* Semantic aliases — use these in components */
  --surface-page:var(--dagslys);
  --surface-card:var(--hylde);
  --surface-inverse:var(--nat);
  --surface-signal:var(--gul);
  --surface-fresh:var(--frisk);
  --text-body:var(--nat);
  --text-muted:var(--daempet);
  --text-on-inverse:var(--dagslys);
  --text-on-signal:var(--nat);
  --text-error:var(--fejl);
  --border-hairline:var(--kant);
  --border-focus:var(--nat);
  --border-error:var(--fejl);

  /* Distribution guardrail: ~65% page, 25% card, 10% inverse, yellow only in small doses (max 10%). */
}


:root{
  --headline-display-size:92px;   --headline-display-lh:82px;  --headline-display-ls:-1.8px;
  --headline-lg-size:56px;        --headline-lg-lh:52px;       --headline-lg-ls:-1px;
  --headline-md-size:30px;        --headline-md-lh:30px;       --headline-md-ls:-0.4px;
  --headline-sm-size:18px;        --headline-sm-lh:24px;       --headline-sm-ls:-0.1px; --headline-sm-weight:600;
  --price-size:40px;              --price-lh:38px;             --price-ls:-0.8px;
  --body-lg-size:19px;            --body-lg-lh:28px;
  --body-md-size:16px;            --body-md-lh:24px;
  --body-sm-size:14px;            --body-sm-lh:20px;
  --label-md-size:15px;           --label-md-lh:20px;          --label-md-weight:500;
  --label-sm-size:11px;           --label-sm-lh:14px;          --label-sm-ls:1.4px; --label-sm-weight:600;
  --caption-size:12px;            --caption-lh:16px;

  --measure-prose:60ch;
  --container-max:1200px;
}

/* Composed classes: available to consumers that link styles.css. */
.vg-display{font-family:var(--font-display);font-variation-settings:var(--display-axes);text-transform:uppercase;line-height:.9;letter-spacing:-0.02em;}
.vg-eyebrow{font-family:var(--font-ui);font-size:var(--label-sm-size);line-height:var(--label-sm-lh);font-weight:var(--label-sm-weight);letter-spacing:var(--label-sm-ls);text-transform:uppercase;color:var(--text-muted);}
.vg-sub{font-family:var(--font-ui);font-size:var(--body-lg-size);line-height:var(--body-lg-lh);color:var(--text-muted);}
.vg-price{font-family:var(--font-display);font-variation-settings:var(--display-axes);text-transform:uppercase;font-size:var(--price-size);line-height:var(--price-lh);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}


:root{
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:48px;
  --space-xl:80px;
  --space-2xl:128px;

  --card-padding:var(--space-md);
  --section-padding-y:var(--space-xl);
  --control-height:48px;
  --control-padding-x:26px;
  --navbar-height:72px;
}


:root{
  --radius-none:0px;
  --radius-sm:6px;    /* controls, fields, price tags */
  --radius-md:12px;   /* cards, navbar, mark box */
  --radius-lg:20px;   /* large image surfaces */
  --radius-full:9999px; /* chips only */
}


:root{
  /* There is no shadow system. Hierarchy comes from the surface change
     between Dagslys and Hylde, plus type size. Kept as a token so the
     intent is explicit rather than forgotten. */
  --shadow-none:none;
  --hairline:1px solid var(--border-hairline);
  /* The single legal inner glow: the machine window in Nat mode. */
  --glow-machine:inset 0 0 60px -22px rgba(255,194,75,.7); /* @kind shadow */
}


:root{
  --ease-standard:ease; /* @kind other */
  --duration-press:.12s; /* @kind other */
  --duration-fade:.15s; /* @kind other */
  --transition-control:transform var(--duration-press) var(--ease-standard),opacity var(--duration-fade) var(--ease-standard),border-color var(--duration-fade) var(--ease-standard);
  --press-translate:translateY(1px); /* @kind other */
  --hover-opacity:.85; /* @kind other */
  --disabled-opacity:.35; /* @kind other */
}


/* ---------- Reset og basis ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:clip;scroll-behavior:smooth;}
body{margin:0;background:var(--dagslys);color:var(--nat);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;}
a{color:var(--nat);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
section[id],div[id]{scroll-margin-top:96px;}
:focus-visible{outline:2px solid var(--nat);outline-offset:3px;}

/* ---------- Navigation ---------- */
.vg-navwrap{position:sticky;top:0;z-index:60;padding:var(--space-sm) var(--space-md) 0;}
.vg-nav{max-width:var(--container-max);margin:0 auto;background:var(--surface-page);border-radius:var(--radius-md);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-md);gap:var(--space-md);box-shadow:inset 0 0 0 1px var(--border-hairline);}
.vg-nav__logo{display:flex;align-items:center;}
.vg-nav__logo img{height:22px;width:auto;display:block;}
.vg-nav__links{display:flex;gap:var(--space-sm);align-items:center;}
.vg-nav__links a{font-size:15px;font-weight:500;color:var(--text-body);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;}
.vg-nav__links a:hover{text-decoration:none;border-bottom-color:var(--nat);}
.vg-nav__links a[aria-current="page"]{border-bottom-color:var(--text-body);}
.vg-nav__toggle{display:none;}

/* ---------- Knapper ---------- */
.vg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-height);padding:0 var(--control-padding-x);border-radius:var(--radius-sm);border:1px solid transparent;font-family:var(--font-ui);font-size:var(--label-md-size);line-height:var(--label-md-lh);font-weight:var(--label-md-weight);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-control);}
.vg-btn:hover{text-decoration:none;}
.vg-btn:active{transform:var(--press-translate);}
.vg-btn--primary{background:var(--surface-inverse);color:var(--text-on-inverse);}
.vg-btn--primary:hover{opacity:var(--hover-opacity);}
.vg-btn--accent{background:var(--surface-signal);color:var(--text-on-signal);font-weight:600;}
.vg-btn--accent:hover{opacity:var(--hover-opacity);}
.vg-btn--secondary{background:transparent;color:var(--text-body);border-color:var(--border-hairline);}
.vg-btn--secondary:hover{border-color:var(--border-focus);}
.vg-btn--tertiary{background:transparent;color:var(--text-body);height:auto;padding:0;border-radius:0;font-size:var(--headline-sm-size);line-height:var(--headline-sm-lh);font-weight:var(--headline-sm-weight);}
.vg-btn--tertiary:hover{text-decoration:underline;text-underline-offset:3px;}
.vg-btn--nav{height:40px;padding:0 18px;font-size:14px;}
.vg-btn[disabled]{opacity:var(--disabled-opacity);cursor:not-allowed;}
.vg-on-nat .vg-btn--secondary{color:var(--dagslys);border-color:#332E28;}
.vg-on-nat .vg-btn--secondary:hover{border-color:var(--dagslys);}

/* ---------- Chip ---------- */
.vg-chip{display:inline-block;border-radius:var(--radius-full);padding:7px 14px;background:var(--surface-card);color:var(--text-muted);font-family:var(--font-ui);font-size:var(--label-sm-size);line-height:var(--label-sm-lh);font-weight:var(--label-sm-weight);letter-spacing:var(--label-sm-ls);text-transform:uppercase;}
.vg-chip--outline{background:transparent;color:var(--dagslys);box-shadow:inset 0 0 0 1px #332E28;}

/* ---------- Prisskilt ---------- */
.vg-pricetag{display:inline-flex;flex-direction:column;background:var(--surface-signal);color:var(--text-on-signal);border-radius:var(--radius-sm);padding:12px 16px;min-width:96px;}
.vg-pricetag b{font-family:var(--font-display);font-variation-settings:var(--display-axes);text-transform:uppercase;font-size:var(--price,64px);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;font-weight:normal;}
.vg-pricetag small{font-family:var(--font-ui);font-size:var(--label-sm-size);font-weight:600;letter-spacing:1.2px;text-transform:uppercase;margin-top:4px;}

/* ---------- Formular ---------- */
.vg-field{width:100%;background:var(--dagslys);border:1px solid transparent;border-radius:var(--radius-sm);padding:13px 16px;font-family:var(--font-ui);font-size:15px;color:var(--nat);outline:none;transition:var(--transition-control);}
.vg-field:focus{border-color:var(--nat);}

/* ---------- Juridisk side ---------- */
.vg-legal p{margin:0 0 16px;font-size:16px;line-height:26px;max-width:66ch;}
.vg-legal ul{margin:0 0 16px;padding-left:20px;max-width:66ch;}
.vg-legal li{font-size:16px;line-height:26px;margin:0 0 6px;}
.vg-legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.vg-legal table{width:100%;border-collapse:collapse;margin:0 0 20px;}
.vg-legal th{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--kant);font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--daempet);}
.vg-legal td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--kant);font-size:15px;line-height:23px;}
.vg-legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--hylde);border-radius:var(--radius-sm);padding:2px 6px;}

/* ---------- Responsivt ---------- */
@media (max-width:1100px){
  body{--gut:24px;--pad:72px;--pad3:96px;--gap:32px;--h1:64px;--h1s:60px;--h2:44px;--stat:96px;--big:160px;}
}
@media (max-width:820px){
  body{--h1:34px;--h1s:38px;--h2:27px;--h2b:32px;--h3:23px;--seg:23px;--scene:17px;--faq:20px;--lede:17px;--pad:56px;--pad3:72px;--gut:20px;--gap:28px;--c3:1fr;--c2:1fr;--cfaq:1fr;--cstep:1fr;--cform:1fr;--cfoot:1fr;--ctext:1fr;--cperson:1fr;--cpol:1fr;--maxw:100%;--maxw3:100%;--stat:60px;--big:130px;--price:52px;--pricew:100%;--cardpad:20px;--cardpad3:22px;--formpad:24px;--segh:auto;--navover:72px;--heroar:4 / 3;--teamar:4 / 3;--tocpos:static;--toctop:0;}
  .vg-nav{height:auto;flex-wrap:wrap;padding:14px var(--space-sm);gap:12px;}
  .vg-nav__links{order:3;width:100%;flex-wrap:wrap;gap:14px;}
  .vg-nav__links a{font-size:14px;}
  .vg-btn{width:auto;}
}