/* Ziffr Räknaren design system (zr-). Source: the Ziffr Räknaren design system artifact. Fonts are self-hosted. */
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/familjen-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/familjen-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/familjen-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/schibsted-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/schibsted-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/schibsted-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/special-elite-400.woff2') format('woff2')}
/* Ziffr Räknaren – bundle.css. Tokens as CSS variables (light, and dark via data-theme), then the zr- components. */
:root, [data-theme="light"] {
  --bg:#EFE6D3;
  --paper:#FFFDF6;
  --paper-2:#F6EFE1;
  --line:#E3D7BF;
  --line-strong:#8E8270;
  --ink:#13221C;
  --ink-2:#3F4B45;
  --muted:#6B6355;
  --mint:#A2D8C8;
  --mint-hi:#BDE5D9;
  --mint-edge:#7FBFAC;
  --mint-soft:#DDF0E8;
  --mint-ink:#1F6650;
  --on-mint:#13221C;
  --key-edge:#CDBE9F;
  --dark-key:#2A3A33;
  --dark-edge:#16231D;
  --band:#13221C;
  --on-band:#F4F1EA;
  --on-band-muted:#AFC0B8;
  --hl-bg:#13221C;
  --hl-fg:#A2D8C8;
  --calc-a:#FFFBF1;
  --calc-b:#F1E8D5;
  --calc-lip:#D2C3A4;
  --solar:#3A2C22;
  --lcd-a:#B9D9C6;
  --lcd-b:#CBE6D6;
  --lcd-ink:#13221C;
  --lcd-dim:#2E4A3C;
  --tape:#FFFDF6;
  --tape-ink:#2B2A26;
  --success:#1F6650;
  --warning:#855400;
  --warning-bg:#FBEFD6;
  --danger:#A61B1B;
  --danger-bg:#FBE3E0;
  --shadow:rgba(70,50,20,0.4);
  --font-display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-type:"Special Elite","Courier New",Courier,monospace;
  --radius-key:20px; --radius-card:28px; --radius-calc:46px;
  --gutter:72px; --container:1296px; --measure:62ch;
  --hero-top:40px; /* space above every page's first block, so the heading never jumps between pages */
}
[data-theme="dark"] {
  --bg:#0F1713;
  --paper:#18231E;
  --paper-2:#1F2B26;
  --line:#2B3A33;
  --line-strong:#6F8178;
  --ink:#EDF3EF;
  --ink-2:#B6C4BD;
  --muted:#93A39B;
  --mint:#A2D8C8;
  --mint-hi:#BDE5D9;
  --mint-edge:#6FA897;
  --mint-soft:#173A31;
  --mint-ink:#A2D8C8;
  --on-mint:#13221C;
  --key-edge:#070C0A;
  --dark-key:#33463E;
  --dark-edge:#1C2924;
  --band:#0A110E;
  --on-band:#EDF3EF;
  --on-band-muted:#9FB2A9;
  --hl-bg:#A2D8C8;
  --hl-fg:#13221C;
  --calc-a:#2A3832;
  --calc-b:#1F2B26;
  --calc-lip:#0C1310;
  --solar:#0B100D;
  --lcd-a:#B9D9C6;
  --lcd-b:#CBE6D6;
  --lcd-ink:#13221C;
  --lcd-dim:#2E4A3C;
  --tape:#F4EFE3;
  --tape-ink:#2B2A26;
  --success:#7FD1B0;
  --warning:#E8BD66;
  --warning-bg:#3A2E14;
  --danger:#F4A29A;
  --danger-bg:#3D1F1C;
  --shadow:rgba(0,0,0,0.6);
  color-scheme:dark;
}

/* ---------- Base ---------- */
.zr { font-family:var(--font-sans); color:var(--ink); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.zr *, .zr *::before, .zr *::after { box-sizing:border-box; }
.zr :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd) { margin:0; }
.zr :where(h1,h2,h3) { text-wrap:balance; }
.zr :where(p) { text-wrap:pretty; }
:where(.zr) a { color:var(--mint-ink); text-underline-offset:4px; }
:where(.zr) a:hover { color:var(--ink); }
.zr :focus-visible { outline:3px solid var(--mint-ink); outline-offset:3px; border-radius:8px; }
.zr :where(button) { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
.zr-main { background:var(--bg); }
/* A theme switch mid-tree: text must follow the new tokens (color inherits as a computed value). */
.zr[data-theme], .zr [data-theme] { color:var(--ink); }
[data-theme="dark"] [data-theme="light"] { --shadow:rgba(0,0,0,0.55); --key-edge:#B9AC8F; }
.zr-container { width:100%; max-width:var(--container); margin-left:auto; margin-right:auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.zr-section { padding-top:120px; padding-bottom:0; }
.zr-section:last-child { padding-bottom:120px; }
.zr-stack { display:flex; flex-direction:column; gap:22px; }
.zr-head { display:flex; flex-direction:column; gap:16px; max-width:900px; }
.zr-measure { max-width:var(--measure); }
@media (min-width:1101px){ .zr { --hero-top:64px; } }
@media (max-width:720px){ .zr { --gutter:16px; --hero-top:16px; } .zr-section { padding-top:72px; } .zr-section:last-child { padding-bottom:72px; } }

/* ---------- Type ---------- */
.zr-display-xl, .zr-display-l, .zr-display-m, .zr-h3, .zr-lcd--flat { box-shadow:none; }
.zr-lcd-num { font-family:var(--font-display); font-weight:700; }
.zr-display-xl { font-size:clamp(48px, 6.6vw, 96px); line-height:.92; letter-spacing:-.04em; }
.zr-display-l  { font-size:clamp(44px, 5.6vw, 80px); line-height:.95; letter-spacing:-.04em; }
.zr-display-m  { font-size:clamp(34px, 4.6vw, 64px); line-height:1; letter-spacing:-.035em; }
.zr-h3 { font-size:25px; line-height:1.2; letter-spacing:-.02em; }
.zr-lead { font-size:clamp(17px, 1.5vw, 20px); line-height:1.55; color:var(--ink-2); max-width:var(--measure); }
.zr-body-s { font-size:14px; line-height:1.5; }
.zr-muted { color:var(--muted); }
.zr-rhyme { font-family:var(--font-type); font-size:clamp(16px, 1.5vw, 20px); line-height:1.4; color:var(--mint-ink); }
.zr-label { font-family:var(--font-type); font-size:13px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.zr-figure { font-family:var(--font-type); font-size:16px; font-variant-numeric:tabular-nums; }
.zr-hl { display:inline-block; background:var(--hl-bg); color:var(--hl-fg); padding:.02em .14em .14em; line-height:1; border-radius:.14em; transform:rotate(-2deg); } /* room for descenders: g, j, y */
.zr-hl--flat { transform:none; }

/* ---------- Buttons ---------- */
.zr-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border-radius:999px; font-family:var(--font-sans); font-weight:700; font-size:16px; line-height:1.2; text-decoration:none; white-space:nowrap; transition:background .15s, transform .06s; }
:where(.zr) .zr-btn { color:inherit; }
.zr-btn svg { width:18px; height:18px; flex:none; }
.zr .zr-btn--mint { background:var(--mint); color:var(--on-mint); }
.zr .zr-btn--mint:hover { background:var(--mint-hi); color:var(--on-mint); }
.zr .zr-btn--ink { background:var(--ink); color:var(--bg); }
.zr .zr-btn--ink:hover { background:var(--ink-2); color:var(--bg); }
.zr .zr-btn--outline { box-shadow:0 0 0 2px var(--ink); color:var(--ink); }
.zr .zr-btn--outline:hover { background:var(--paper); color:var(--ink); }
.zr .zr-btn--ghost { color:var(--ink); padding-left:12px; padding-right:12px; }
.zr-btn--lg { min-height:56px; padding:14px 28px; font-size:17px; }
.zr-btn--sm { min-height:40px; padding:8px 18px; font-size:15px; }
.zr-btn--block { width:100%; }
.zr-btn:active { transform:translateY(1px); }
.zr-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* ---------- Navbar ---------- */
.zr-nav { background:var(--bg); position:sticky; top:0; z-index:5; transition:translate .3s cubic-bezier(.16,1,.3,1); } /* stays in reach while scrolling, on every width */
.zr-nav.is-hidden { translate:0 -100%; transition-duration:.2s; } /* slid away while scrolling down (NavHeadroom); back on the first scroll up */
@keyframes zr-nav-lift { from { box-shadow:0 1px 0 transparent; } to { box-shadow:0 1px 0 var(--key-edge), 0 10px 20px -16px var(--shadow); } }
@supports (animation-timeline: scroll()) { .zr-nav { animation:zr-nav-lift linear both; animation-timeline:scroll(); animation-range:0 48px; } }
html:has(.zr-nav) { scroll-padding-top:96px; } /* anchors (#bokning) land below the bar */
@media (max-width:900px){ html:has(.zr-nav) { scroll-padding-top:80px; } }
.zr-nav__in { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:88px; }
.zr-nav__logo { display:block; line-height:0; }
.zr-nav__logo img { height:40px; width:auto; }
.zr-nav__links { display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.zr .zr-nav__links a { color:var(--ink); font-weight:600; text-decoration:none; padding-top:10px; padding-bottom:10px; }
.zr .zr-nav__links a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--mint-edge); text-underline-offset:8px; }
.zr-nav__actions { display:flex; gap:6px; align-items:center; }
.zr-nav__menu { display:none; width:48px; height:48px; border-radius:14px; align-items:center; justify-content:center; background:var(--paper); box-shadow:0 4px 0 var(--key-edge); }
.zr-nav__menu svg { width:22px; height:22px; }
@media (max-width:900px){ .zr-nav__links, .zr-nav__login { display:none; } .zr-nav__menu { display:inline-flex; } .zr-nav__in { min-height:72px; } .zr-nav__logo img { height:34px; } }

/* ---------- Hero ---------- */
.zr-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:40px; align-items:start; padding-top:var(--hero-top); padding-bottom:120px; }
.zr-hero__text { display:flex; flex-direction:column; gap:0; }
/* Every hero starts its text at the top (never centred against the picture), so the heading sits at the same height on every page. */
.zr-hero__text .zr-rhyme { margin-top:18px; }
.zr-hero__text .zr-lead { margin-top:28px; }
.zr-hero__text .zr-actions { margin-top:32px; }
.zr-hero--page { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); padding-bottom:110px; }
.zr-hint { font-family:var(--font-type); font-size:15px; color:var(--ink-2); }
@media (max-width:1100px){ .zr-hero, .zr-hero--page { grid-template-columns:minmax(0,1fr); gap:56px; } }
@media (max-width:720px){ .zr-hero, .zr-hero--page { padding-bottom:72px; } }

/* ---------- Calculator (ZR-0) ---------- */
.zr-calc-wrap { position:relative; display:flex; flex-direction:column; width:100%; max-width:600px; justify-self:center; }
.zr-calc { position:relative; z-index:1; background:linear-gradient(160deg, var(--calc-a), var(--calc-b)); border-radius:var(--radius-calc); padding:34px 32px 38px; transform:rotate(3deg); }
.zr-calc::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; box-shadow:0 8px 0 var(--calc-lip), 0 50px 60px -30px var(--shadow); }
.zr-calc--flat { transform:none; }
.zr-calc, .zr-tape { -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.zr-key { touch-action:manipulation; cursor:pointer; }
.zr-calc__brand { display:flex; justify-content:space-between; align-items:center; margin:0 6px 18px; font-family:var(--font-type); font-size:15px; letter-spacing:.2em; color:var(--muted); }
.zr-calc__solar { display:flex; gap:2px; width:120px; height:26px; border-radius:6px; overflow:hidden; }
.zr-calc__solar i { flex:1; background:var(--solar); }
.zr-lcd { background:linear-gradient(180deg, var(--lcd-a), var(--lcd-b)); border-radius:18px; padding:18px 26px 14px; box-shadow:inset 0 4px 10px rgba(0,0,0,.28); text-align:right; color:var(--lcd-ink); min-height:156px; display:flex; flex-direction:column; justify-content:flex-end; }
.zr-lcd--flat { box-shadow:none; }
.zr-lcd-num { font-size:clamp(60px, 9vw, 118px); line-height:1; letter-spacing:.01em; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--lcd-ink); }
.zr-lcd__cap { display:flex; justify-content:space-between; gap:12px; font-family:var(--font-type); font-size:13px; color:var(--lcd-dim); margin-top:8px; text-transform:uppercase; text-align:left; }
.zr-keys { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:26px; }
.zr-key { height:80px; border-radius:var(--radius-key); background:var(--paper); display:grid; place-items:center; align-content:center; text-align:center; font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.05; color:var(--ink); text-decoration:none; box-shadow:0 6px 0 var(--key-edge), 0 14px 14px -8px var(--shadow); transition:transform .06s, box-shadow .06s; }
.zr .zr-key { color:var(--ink); }
.zr-key small { display:block; font-family:var(--font-type); font-weight:400; font-size:12px; letter-spacing:.06em; color:var(--muted); margin-top:4px; }
.zr-key:active { transform:translateY(4px); box-shadow:0 2px 0 var(--key-edge), 0 4px 8px -6px var(--shadow); }
.zr .zr-key[aria-pressed="true"], .zr .zr-key--mint { background:var(--mint); color:var(--on-mint); box-shadow:0 6px 0 var(--mint-edge), 0 14px 14px -8px var(--shadow); }
.zr-key[aria-pressed="true"] small, .zr-key--mint small { color:var(--lcd-dim); }
.zr .zr-key--dark { background:var(--dark-key); color:var(--mint); box-shadow:0 6px 0 var(--dark-edge), 0 14px 14px -8px var(--shadow); }
.zr-key--dark small { color:var(--on-band-muted); }
.zr-key--wide { grid-column:span 2; }
.zr-tape { position:relative; z-index:0; align-self:flex-start; margin:-26px 0 0 56px; width:250px; background:var(--tape); color:var(--tape-ink); padding:44px 20px 30px; font-family:var(--font-type); font-size:15px; line-height:1.75; transform:rotate(-3deg); box-shadow:0 14px 20px -10px var(--shadow);
  -webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/16px 100%; mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/16px 100%; }
.zr-tape__row { display:flex; justify-content:space-between; gap:10px; }
.zr-tape__sum { border-top:2px dashed #9A9488; margin-top:6px; padding-top:6px; }
.zr-tape__tot { font-size:18px; }
@media (max-width:600px){
  .zr-calc { transform:none; border-radius:32px; padding:22px 16px 26px; }
  .zr-keys { gap:9px; } .zr-key { height:70px; font-size:19px; border-radius:16px; } .zr-key small { font-size:11px; letter-spacing:.02em; }
  .zr-lcd { padding:14px 16px 12px; min-height:120px; } .zr-lcd__cap { font-size:12px; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; } .zr-calc__solar { width:80px; }
  .zr-tape { margin:-26px auto 0; align-self:center; transform:rotate(2deg); }
}

/* Beside the hero text the calculator is drawn smaller, so the whole receipt (TOTALT included) fits on a laptop screen. */
@media (min-width:1101px){
  .zr-hero:not(.zr-hero--page) { grid-template-columns:minmax(0,1fr) minmax(0,520px); }
  .zr-hero .zr-calc-wrap { max-width:500px; margin-top:-24px; } /* the tilted top corner lines up with the heading */
  .zr-hero .zr-calc { padding:24px 24px 28px; }
  .zr-hero .zr-calc__brand { margin-bottom:12px; font-size:13px; }
  .zr-hero .zr-calc__solar { width:96px; height:22px; }
  .zr-hero .zr-lcd { min-height:112px; padding:14px 20px 12px; }
  .zr-hero .zr-lcd-num { font-size:84px; }
  .zr-hero .zr-lcd__cap { font-size:12px; }
  .zr-hero .zr-keys { gap:11px; margin-top:18px; }
  .zr-hero .zr-key { height:62px; font-size:20px; }
  .zr-hero .zr-key small { font-size:11px; margin-top:2px; }
  .zr-hero .zr-tape { margin:-22px 0 0 44px; width:226px; padding:34px 18px 24px; font-size:14px; line-height:1.6; min-height:calc(58px + 12.8em + 14px + 1.6em); } /* room for every row (moms, TIPS) so % never moves the page */
  .zr-hero .zr-tape__tot { font-size:16px; }
}

/* ---------- Cards ---------- */
.zr-card { background:var(--paper); border-radius:var(--radius-card); padding:28px; box-shadow:0 6px 0 var(--key-edge), 0 18px 22px -14px var(--shadow); min-width:0; }
.zr-card--mint { background:var(--mint); color:var(--on-mint); box-shadow:0 6px 0 var(--mint-edge), 0 18px 22px -14px var(--shadow); }
.zr-card--ink { background:var(--band); color:var(--on-band-muted); box-shadow:0 6px 0 var(--dark-edge), 0 18px 22px -14px var(--shadow); }
.zr-card--ink :where(b, h3, .zr-h3) { color:var(--on-band); }
.zr-grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.zr-grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.zr-grid-4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; }
@media (max-width:960px){ .zr-grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .zr-grid-3, .zr-grid-2, .zr-grid-4 { grid-template-columns:minmax(0,1fr); } }

/* Service card: a key-cap tile, a title, a line, a price */
.zr-svc { display:flex; flex-direction:column; gap:8px; }
.zr-svc__cap { width:52px; height:52px; border-radius:14px; background:var(--mint); color:var(--on-mint); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:20px; box-shadow:0 4px 0 var(--mint-edge); margin-bottom:8px; }
.zr-svc__name { font-family:var(--font-display); font-weight:700; font-size:25px; line-height:1.2; letter-spacing:-.02em; }
.zr-svc p { color:var(--ink-2); }
.zr-svc__price { font-family:var(--font-type); font-size:15px; color:var(--mint-ink); text-transform:uppercase; margin-top:4px; }
.zr .zr-svc__more { font-weight:700; text-decoration:none; margin-top:6px; }

/* Step card: ink card with an LCD chip on top */
.zr-step { display:flex; flex-direction:column; gap:6px; }
.zr-step__chip { color:var(--lcd-a); font-family:var(--font-display); font-weight:700; font-size:38px; line-height:1.05; letter-spacing:-.02em; text-align:left; margin-bottom:4px; }
.zr-step b { font-family:var(--font-display); font-size:25px; line-height:1.15; letter-spacing:-.02em; color:var(--on-band); }

/* Quote */
.zr-quote p { font-family:var(--font-display); font-weight:700; font-size:clamp(23px, 2.4vw, 30px); line-height:1.3; letter-spacing:-.02em; }
.zr-quote figcaption { font-family:var(--font-type); margin-top:16px; color:var(--ink-2); }

/* Panel: a paper card with rows – deadlines, receipts, accounts */
.zr-panel { display:flex; flex-direction:column; gap:14px; }
.zr-panel__head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.zr-rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.zr-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding-top:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.zr-row:first-child { border-top:1px solid var(--line); }
.zr-row b { font-weight:600; }
.zr-row .zr-figure { white-space:nowrap; text-align:right; }
.zr-rows--stack .zr-row > :last-child { text-align:right; }
@media (max-width:640px){ .zr-rows--stack .zr-row { grid-template-columns:minmax(0,1fr); gap:4px; } .zr-rows--stack .zr-row > :last-child { text-align:left; } }
.zr-row--total { border-bottom:3px double var(--ink); }
.zr-row--total .zr-figure { font-size:22px; }

/* Chips and badges */
.zr-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-type); font-size:13px; line-height:1.2; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.zr-badge--ok { background:var(--mint-soft); color:var(--success); }
.zr-badge--warn { background:var(--warning-bg); color:var(--warning); }
.zr-badge--mint { background:var(--mint); color:var(--on-mint); }
.zr-badge--ink { background:var(--band); color:var(--mint); }

/* Price card (pricing page and service pages): LCD price on a key-like card */
.zr-price { display:flex; flex-direction:column; gap:14px; }
.zr-price__top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.zr-price__name { font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.02em; }
.zr-price__screen { background:linear-gradient(180deg, var(--lcd-a), var(--lcd-b)); color:var(--lcd-ink); border-radius:16px; padding:12px 18px; text-align:right; font-family:var(--font-display); font-weight:700; font-size:64px; line-height:1.05; letter-spacing:.01em; font-variant-numeric:tabular-nums; box-shadow:inset 0 3px 8px rgba(20,60,40,.3); }
.zr-card--mint .zr-price__screen { background:var(--band); color:var(--mint); }
.zr-price__fine { font-size:15px; color:var(--ink-2); }
.zr-card--mint .zr-price__fine { color:var(--lcd-dim); }
.zr-checks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.zr-checks li { display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; }
.zr-checks li::before { content:"✓"; font-weight:700; color:var(--mint-ink); }
.zr-card--mint .zr-checks li::before { color:var(--on-mint); }

/* Compare table */
.zr-table-wrap { overflow-x:auto; }
.zr-nowrap { white-space:nowrap; }
.zr-table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0; background:var(--paper); border-radius:var(--radius-card); box-shadow:0 6px 0 var(--key-edge), 0 18px 22px -14px var(--shadow); font-size:16px; }
.zr-table th, .zr-table td { padding:16px 22px; text-align:center; border-bottom:2px dashed var(--line); vertical-align:middle; }
.zr-table tr:last-child > * { border-bottom:0; }
.zr-table th:first-child, .zr-table td:first-child { text-align:left; }
.zr-table thead th { font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.02em; }
.zr-table thead th small { display:block; font-family:var(--font-type); font-weight:400; font-size:13px; letter-spacing:0; color:var(--muted); margin-top:2px; }
.zr-table tbody th { font-weight:500; }
.zr-table tbody th small { display:block; font-size:13px; font-weight:400; color:var(--muted); margin-top:2px; }
.zr-table td { font-family:var(--font-display); font-weight:700; font-size:19px; font-variant-numeric:tabular-nums; }
.zr-table .is-pick { background:var(--mint-soft); }
.zr-table tr:first-child > .is-pick { border-top-left-radius:0; }
.zr-table tr:first-child > :first-child { border-top-left-radius:var(--radius-card); }
.zr-table tr:first-child > :last-child { border-top-right-radius:var(--radius-card); }
.zr-table tr:last-child > :first-child { border-bottom-left-radius:var(--radius-card); }
.zr-table tr:last-child > :last-child { border-bottom-right-radius:var(--radius-card); }
.zr-table .zr-no { color:var(--muted); font-weight:500; }
@media (min-width:641px){ .zr-table { min-width:0; } }

/* Add-on key */
.zr-addon { display:flex; flex-direction:column; gap:6px; border-radius:var(--radius-key); padding:22px 24px 26px; }
.zr-addon__price { font-family:var(--font-display); font-weight:700; font-size:38px; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.zr-addon__price small { font-size:16px; letter-spacing:0; margin-left:4px; }
.zr-addon b { font-size:18px; }
.zr-addon p { font-size:15px; line-height:1.5; color:var(--ink-2); }

/* FAQ */
.zr-faq { display:flex; flex-direction:column; }
.zr-faq details { border-bottom:2px solid var(--ink); }
.zr-faq details:first-child { border-top:2px solid var(--ink); }
.zr-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:22px; padding-bottom:22px; font-family:var(--font-display); font-weight:700; font-size:23px; line-height:1.3; letter-spacing:-.02em; }
.zr-faq summary::-webkit-details-marker { display:none; }
.zr-faq summary::after { content:"+"; flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--paper); box-shadow:0 4px 0 var(--key-edge); font-size:24px; }
.zr-faq details[open] summary::after { content:"−"; background:var(--mint); color:var(--on-mint); box-shadow:0 4px 0 var(--mint-edge); }
.zr-faq details p { padding:0 56px 24px 0; color:var(--ink-2); max-width:var(--measure); }
.zr-split { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start; }
@media (max-width:960px){ .zr-split { grid-template-columns:minmax(0,1fr); gap:32px; } }

/* Timeline (LCD day chips in a row) */
.zr-timeline { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,4), minmax(0,1fr)); gap:22px; }
.zr-timeline li { display:flex; flex-direction:column; gap:6px; }
.zr-timeline__day { align-self:flex-start; background:linear-gradient(180deg, var(--lcd-a), var(--lcd-b)); color:var(--lcd-ink); border-radius:12px; padding:6px 14px; font-family:var(--font-display); font-weight:700; font-size:22px; margin-bottom:8px; }
.zr-timeline b { font-family:var(--font-display); font-size:22px; letter-spacing:-.02em; }
.zr-timeline span:not(.zr-timeline__day) { color:var(--ink-2); font-size:15px; }
@media (max-width:960px){ .zr-timeline { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .zr-timeline { grid-template-columns:minmax(0,1fr); } }

/* Chips (day, slot, choice) as small keys */
.zr-chips { display:flex; flex-wrap:wrap; gap:10px; }
.zr-chip { min-height:46px; padding:10px 18px; border-radius:14px; background:var(--paper); box-shadow:0 4px 0 var(--key-edge); font-family:var(--font-display); font-weight:700; font-size:17px; }
.zr .zr-chip[aria-pressed="true"] { background:var(--mint); color:var(--on-mint); box-shadow:0 4px 0 var(--mint-edge); }
.zr-chip:active { transform:translateY(3px); box-shadow:0 1px 0 var(--key-edge); }

/* Range (slider) */
.zr-range { -webkit-appearance:none; appearance:none; width:100%; height:12px; border-radius:999px; background:var(--paper-2); box-shadow:inset 0 2px 4px rgba(20,40,30,.2); }
.zr-range::-webkit-slider-thumb { -webkit-appearance:none; width:34px; height:34px; border-radius:12px; background:var(--mint); box-shadow:0 4px 0 var(--mint-edge); cursor:pointer; }
.zr-range::-moz-range-thumb { width:34px; height:34px; border:0; border-radius:12px; background:var(--mint); box-shadow:0 4px 0 var(--mint-edge); cursor:pointer; }

/* Forms */
.zr-form { display:flex; flex-direction:column; gap:18px; }
.zr-field { display:flex; flex-direction:column; gap:6px; }
.zr-field label { font-weight:600; }
.zr-input, .zr-textarea { width:100%; font:inherit; color:var(--ink); background:var(--paper); border:2px solid var(--line-strong); border-radius:14px; padding:12px 16px; min-height:52px; }
.zr-textarea { min-height:120px; resize:vertical; }
.zr-input:focus, .zr-textarea:focus { outline:3px solid var(--mint-ink); outline-offset:2px; }
.zr-field--error .zr-input { border-color:var(--danger); }
.zr-field__hint { font-size:14px; color:var(--danger); }
.zr-check { display:flex; gap:12px; align-items:flex-start; }
.zr-check input { width:22px; height:22px; accent-color:var(--mint-ink); flex:none; margin-top:2px; }
.zr-flow { display:flex; flex-direction:column; gap:14px; }
.zr-flow__head { display:flex; align-items:center; gap:12px; }
.zr-flow__n { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--band); color:var(--mint); font-family:var(--font-display); font-weight:700; font-size:18px; flex:none; }
.zr-flow--done .zr-flow__n { background:var(--mint); color:var(--on-mint); }
.zr-summary { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--band); color:var(--on-band); border-radius:18px; padding:16px 20px; }
.zr .zr-summary a { color:var(--mint); }
.zr-notice { border-radius:18px; padding:16px 20px; background:var(--mint-soft); color:var(--ink); }
.zr-notice--warn { background:var(--warning-bg); }

/* Person */
.zr-person { display:flex; align-items:center; gap:14px; }
.zr-avatar { width:48px; height:48px; border-radius:14px; object-fit:cover; background:var(--mint); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:var(--on-mint); flex:none; }

/* Prose (legal pages, guide) */
.zr-prose { display:flex; flex-direction:column; gap:20px; max-width:760px; }
.zr-prose h2 { font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:-.03em; line-height:1.15; margin-top:16px; }
.zr-prose p { color:var(--ink-2); }

/* CTA slab and footer */
.zr-cta { background:var(--band); color:var(--on-band-muted); border-radius:var(--radius-calc); padding:64px 64px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.zr-cta h2 { color:var(--on-band); }
.zr-cta h2 em { font-style:normal; color:var(--mint); }
.zr-footer-wrap { background:var(--bg); padding-top:24px; padding-bottom:40px; }
.zr-footer { position:relative; isolation:isolate; background:var(--band); color:var(--on-band-muted); border-radius:var(--radius-calc); padding:70px 64px 40px; }
/* Wallpaper N: tiny mint dinosaurs (T-rex, brachiosaurus, stegosaurus, triceratops), faint, behind the content. */
.zr-footer__dinos { position:absolute; inset:0; z-index:-1; width:100%; height:100%; border-radius:inherit; pointer-events:none; color:var(--mint); opacity:0; transition:opacity .6s ease; }
/* The site's footer: a herd placed around the text by the FooterDinos island (own look per phone, iPad, desktop). */
.zr-footer__dinos.is-ready { opacity:.16; }
.zr-footer--dinos::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:var(--mint); opacity:.16; -webkit-mask:url('/img/dinos.svg') 0 0/1200px 720px repeat; mask:url('/img/dinos.svg') 0 0/1200px 720px repeat; }
.zr-footer h2 { color:var(--on-band); }
.zr-footer h2 em { font-style:normal; color:var(--mint); }
.zr-footer__grid { display:grid; grid-template-columns:1.2fr repeat(3, minmax(0,1fr)); gap:32px; margin-top:56px; }
.zr-footer__grid h3 { font-family:var(--font-type); font-weight:400; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--mint); margin-bottom:8px; }
.zr-footer__grid ul { list-style:none; margin:0; padding:0; }
.zr .zr-footer__grid a { color:var(--on-band-muted); text-decoration:none; display:inline-flex; min-height:44px; align-items:center; }
.zr .zr-footer__grid a:hover { color:var(--on-band); }
.zr-footer__bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid #2E4038; margin-top:40px; padding-top:22px; font-size:14px; }
.zr .zr-footer__bottom a { color:var(--on-band-muted); }
@media (max-width:900px){ .zr-footer__grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .zr-cta, .zr-footer { padding:44px 22px 32px; border-radius:30px; } .zr-footer__grid { grid-template-columns:minmax(0,1fr); } }


/* Cookie bar */
.zr-cookie { display:flex; align-items:center; gap:16px; background:var(--band); color:var(--on-band); border-radius:20px; padding:14px 14px 14px 20px; max-width:520px; box-shadow:0 14px 24px -12px var(--shadow); }
.zr-cookie p { font-size:15px; }

/* Bar chart (CFO forecast) */
.zr-bars { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; align-items:end; height:180px; }
.zr-bars div { display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:8px; height:100%; }
.zr-bars i { display:block; border-radius:10px 10px 4px 4px; background:var(--mint); }
.zr-bars i.is-low { background:var(--warning-bg); box-shadow:inset 0 0 0 2px var(--warning); }
.zr-bars span { font-family:var(--font-type); font-size:13px; text-align:center; color:var(--muted); }

/* Big stat (3:12 guide) */
.zr-stat b { display:block; font-family:var(--font-display); font-weight:700; font-size:44px; letter-spacing:-.03em; line-height:1.05; }
.zr-stat span { color:var(--ink-2); font-size:15px; }

@media (prefers-reduced-motion:reduce){ .zr *{ transition:none !important; animation:none !important; } }

/* Tima, Timey's mascot, alive (from Timey's TimaLoader): floats, curls wave, blinks, a glint crosses
   the glasses, and the head leans happily toward the price below her. Still with reduced motion. */
.zr-tima { display:block; width:100%; height:auto; overflow:visible; }
.zr-tima__float { animation:zr-tima-float 3.2s ease-in-out infinite; }
.zr-tima__head { transform-origin:100px 190px; animation:zr-tima-look 2.8s ease-in-out infinite; }
.zr-tima__curl { transform-box:fill-box; transform-origin:50% 100%; animation:zr-tima-curl 1.2s ease-in-out infinite; }
.zr-tima__curl--1 { animation-delay:80ms; }
.zr-tima__curl--2 { animation-delay:160ms; }
.zr-tima__curl--3 { animation-delay:240ms; }
.zr-tima__curl--4 { animation-delay:320ms; }
.zr-tima__curl--5 { animation-delay:400ms; }
.zr-tima__curl--6 { animation-delay:480ms; }
.zr-tima__curl--7 { animation-delay:560ms; }
.zr-tima__curl--8 { animation-delay:640ms; }
.zr-tima__curl--9 { animation-delay:720ms; }
.zr-tima__curl--10 { animation-delay:800ms; }
.zr-tima__curl--11 { animation-delay:880ms; }
.zr-tima__curl--12 { animation-delay:960ms; }
.zr-tima__curl--13 { animation-delay:1040ms; }
.zr-tima__eye { transform-box:fill-box; transform-origin:center; animation:zr-tima-blink 3.6s ease-in-out infinite; }
.zr-tima__glint { opacity:0; animation:zr-tima-glint 2.4s ease-in-out infinite; }
@keyframes zr-tima-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes zr-tima-look { 0%,100% { transform:rotate(5deg); } 45% { transform:rotate(12deg); } 55% { transform:rotate(11deg) translateY(2px); } }
@keyframes zr-tima-curl { 0%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(-6px) rotate(-8deg); } }
@keyframes zr-tima-blink { 0%,90%,100% { transform:scaleY(1); } 94% { transform:scaleY(.1); } }
@keyframes zr-tima-glint { 0%,55%,100% { opacity:0; transform:translateX(-8px); } 72% { opacity:.9; transform:translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .zr-tima__float, .zr-tima__head, .zr-tima__curl, .zr-tima__eye, .zr-tima__glint { animation:none; } }

/* Tima peeking over a price card (Timey page) */
.zr-tima-peek { position:absolute; right:96px; top:-92px; width:112px; }
.zr-price:has(> .zr-tima-peek) { margin-top:64px; } /* room for Tima above the card, clear of the menu bar */
@media (max-width:600px) { .zr-tima-peek { right:72px; top:-70px; width:84px; } }

/* Logo: the Ziffr mark (a zero). Also the favicon. */
.zr-logo { display:block; height:40px; width:auto; color:var(--ink); }
.zr-logo--footer { color:var(--mint); }
@media (max-width:900px) { .zr-logo { height:34px; } }

/* The receipt keeps one height whatever rows it shows (up to 6 + sum + total), so the calculator
   never changes size and the hero text next to it does not jump when a key is pressed. */
.zr-tape { min-height:calc(74px + 14em + 20px); }

/* Tima beside the Timey card on Start */
.zr-tima-teaser { width:120px; flex-shrink:0; }
.zr-svc__cap--icon svg { width:30px; height:30px; }
.zr-quote--wide { grid-column:1 / -1; }
/* Phone menu: drops down from the top under the bar, logo left, close key where the menu key was */
.zr-menu { background:var(--bg); color:var(--ink); border-radius:0 0 28px 28px; box-shadow:0 18px 40px rgba(19,34,28,.25); padding-bottom:24px; }
.zr-menu__head { display:flex; align-items:center; justify-content:space-between; min-height:72px; }
.zr .zr-menu__close { display:inline-flex; }
.zr-menu__body { display:flex; flex-direction:column; gap:20px; }
.zr-menu__links { list-style:none; margin:0; padding:0; }
.zr-menu__links li { border-bottom:1px solid var(--line); padding-block:4px; }
.zr .zr-menu__links a { display:flex; justify-content:space-between; align-items:center; min-height:56px; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--ink); text-decoration:none; }
.zr .zr-menu__links a[aria-current="page"] { color:var(--mint-ink); }
/* Role matrix (Timey): text cells, read left to right */
.zr-table--roles { min-width:640px; }
.zr-table--roles caption, .zr-table--platforms caption { caption-side:top; text-align:left; padding:0 0 14px; }
.zr-table--roles th:first-child { width:34%; }
.zr-table--roles td { font-variant-numeric:normal; font-family:var(--font-sans); font-weight:500; font-size:16px; line-height:1.4; text-align:left; }
.zr-table--roles thead th { text-align:left; }
@media (max-width:640px){
  .zr-table--stack { min-width:0; box-shadow:none; background:none; }
  .zr-table--stack thead { display:none; }
  .zr-table--stack caption { display:block; width:auto; }
  .zr-table--stack, .zr-table--stack tbody, .zr-table--stack tr, .zr-table--stack th, .zr-table--stack td { display:block; width:auto; }
  .zr-table--stack tr { background:var(--paper); border-radius:var(--radius-card); padding:16px 18px; box-shadow:0 4px 0 var(--key-edge); }
  .zr-table--stack tbody { display:flex; flex-direction:column; gap:12px; }
  .zr-table--stack th, .zr-table--stack td { padding:0; border:0; border-radius:0 !important; }
  .zr-table--stack th:first-child { width:auto; font-family:var(--font-display); font-weight:700; font-size:19px; margin-bottom:8px; }
  .zr-table--stack td { display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:10px; text-align:left; align-items:baseline; padding-top:6px; font-size:15px; }
  .zr-table--stack td::before { content:attr(data-label); font-family:var(--font-type); font-weight:400; font-size:13px; color:var(--muted); }
}
/* Partners (Start): who we work with, label first, then the name */
.zr-partner { display:flex; flex-direction:column; gap:8px; }
.zr-partner__name { font-family:var(--font-display); font-weight:700; font-size:25px; line-height:1.15; letter-spacing:-.02em; }
.zr-partner p { color:var(--ink-2); }
.zr .zr-partner__link { margin-top:auto; padding-top:8px; font-weight:600; color:var(--ink); }
.zr-advice { align-items:start; }
.zr-grid-4 > .zr-step { container-type:inline-size; }
.zr-grid-4 .zr-step__chip { font-size:clamp(18px, 14.5cqi, 38px); white-space:nowrap; } /* sized by the card, so VARJE MÅNAD always fits */
/* Platform matrix (Timey): like the price table, a ✓ or a short note per platform */
@media (min-width:641px){ .zr-table--platforms th:first-child { width:34%; } }
.zr-table--platforms td { font-size:17px; }
@media (max-width:640px){ .zr-table--platforms td { text-align:left; font-family:var(--font-sans); font-weight:500; font-size:15px; } }
/* Long labels read better in normal case; keep body text near 70 characters a line */
.zr-label--plain { text-transform:none; letter-spacing:.02em; }
.zr-prose > p, .zr-stack > p { max-width:62ch; }
/* Systems we work in (Om oss): grouped by what they are for, name first */
.zr-tools { align-items:start; }
.zr-tools__group { display:flex; flex-direction:column; gap:14px; }
.zr-tools__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.zr-tools__list li { display:flex; flex-direction:column; gap:2px; padding-block:10px; border-top:1px solid var(--line); }
.zr-tools__list li:first-child { border-top:0; padding-top:0; }
.zr-tools__list b { font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.02em; line-height:1.15; }
.zr-tools__list span { font-size:15px; color:var(--ink-2); }

/* ---------- Motion ----------
   One idea: the calculator prints. The receipt is revealed top to bottom once on load, never slid under a key, and its rows print again when a key
   changes the sum; the LCD rolls to the new price (Calculator island). Around it, quiet support only: cards
   press like keys, the highlighter is drawn on as a heading comes into view, FAQ answers open smoothly.
   Everything is visible without motion, and .zr * { animation:none } above switches it all off for
   prefers-reduced-motion. */
.zr-vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

@keyframes zr-print { from { clip-path:inset(0 0 100% 0); translate:0 -12px; } to { clip-path:inset(0 0 0 0); translate:0 0; } }
@keyframes zr-print-row { from { opacity:0; translate:0 -6px; } to { opacity:1; translate:0 0; } }
.zr-tape { animation:zr-print .7s cubic-bezier(.16,1,.3,1) .1s backwards; } /* backwards: no clip left behind */
.zr-tape__row { animation:zr-print-row .24s cubic-bezier(.16,1,.3,1) both; }
.zr-tape__row:nth-child(2) { animation-delay:.03s; }
.zr-tape__row:nth-child(3) { animation-delay:.06s; }
.zr-tape__row:nth-child(n+4) { animation-delay:.09s; }

a.zr-card { transition:translate .15s ease-out, box-shadow .15s ease-out; }
a.zr-card:hover { translate:0 -3px; }
a.zr-card:active { translate:0 3px; transition-duration:.06s; }

@keyframes zr-mark { from { clip-path:inset(-.2em 100% -.2em 0); } to { clip-path:inset(-.2em -.2em -.2em 0); } }
.zr-hero .zr-hl { animation:zr-mark .55s cubic-bezier(.16,1,.3,1) .15s both; }
@supports (animation-timeline: view()) {
  .zr-main .zr-hl:not(.zr-hero .zr-hl), .zr-cta .zr-hl {
    animation:zr-mark linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; /* done once fully in view */
  }
}

@supports (interpolate-size: allow-keywords) {
  .zr-faq { interpolate-size:allow-keywords; }
  .zr-faq details::details-content { block-size:0; overflow:hidden; transition:block-size .3s cubic-bezier(.16,1,.3,1), content-visibility .3s allow-discrete; }
  .zr-faq details[open]::details-content { block-size:auto; }
}