/* The offer page, built on foniks.io's design (Nicolay, 21.10.2026: «make a beautiful offer page that reflects
   the Føniks brand»). Deep and Paper take turns, folded into each other; the pattern on Deep; the phoenix in the
   hero and on the renewal step; Mint as a surface once, for the order. Filled in by verktoy/offer/offer.py.
   The directions' own colours and fonts are added in a :root block at the end by the build. */
@layer base, components;

@layer base {
  :root {
    /* Føniks (foniks.io) */
    --deep: #0b2936;
    --deep-2: #0f3342;
    --deep-3: #16404f;
    --navy: #103442;
    --paper: #f3f3ed;
    --mint: #6ae6ad;
    --green: #176b50;
    --offwhite: #f5f6f0;
    --white: #ffffff;
    --muted: #4c6369;
    --muted-dark: #b7cbd0;
    --mint-muted: #245548;
    --line: rgba(24, 61, 67, 0.18);
    --line-dark: rgba(193, 213, 210, 0.18);
    --warn-bar: #eea54b;
    --error: #a5341f;
    --field: #6e8a90;
    --bar: #eceee6;
    --bar-line: #dfe2d8;
    --bar-dot: #d3d7cc;
    --us: #e6f0ea;
    --shadow-a55: rgba(0, 0, 0, 0.55);
    --shadow-a60: rgba(0, 0, 0, 0.6);
    --deep-a35: rgba(11, 41, 54, 0.35);
    --deep-a45: rgba(11, 41, 54, 0.45);
    --deep-a60: rgba(11, 41, 54, 0.6);
    --deep-a70: rgba(11, 41, 54, 0.7);
    --deep-a94: rgba(11, 41, 54, 0.94);
    --tone-a30: rgba(4, 22, 29, 0.3);
    --tone-a45: rgba(3, 18, 24, 0.45);
    --mint-a00: rgba(106, 230, 173, 0);
    --mint-a16: rgba(106, 230, 173, 0.16);
    --mint-a24: rgba(106, 230, 173, 0.24);
    --green-a20: rgba(23, 107, 80, 0.2);
    --white-a06: rgba(255, 255, 255, 0.06);
    --serp-title: #1a0dab;
    --serp-text: #4d5156;
    --serp-url: #202124;
    --serp-chip: #f1f3f4;
    /* Required by Akari Engine (agents.md) */
    --color-bg: #0b2936;
    --color-surface: #ffffff;
    --color-text: #103442;
    --color-text-muted: #4c6369;
    --color-accent: #6ae6ad;
    --color-accent-muted: #176b50;
    --font-display: 'Red Hat Display', 'Akari Fallback', Arial, sans-serif;
    --font-body: 'DM Sans', 'Akari Fallback', Arial, sans-serif;
    --wrap: 1200px;
    --gutter: clamp(20px, 4.5vw, 56px);
    --fold: clamp(34px, 5vw, 72px);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --bounce: cubic-bezier(.34, 1.56, .64, 1);
  }
  @font-face { font-family: 'Akari Fallback'; src: local('Arial'); size-adjust: 100%; }
  *, *::before, *::after { box-sizing: border-box; }
  /* iOS colours the bars from body: Deep, and the light sections have their own background (I1) */
  html { background-color: var(--deep); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; background: var(--deep); color: var(--navy); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
  main { overflow-x: clip; }
  h1, h2, h3, p, figure, ol, ul, dl, dd, blockquote { margin: 0; }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
  p, li { text-wrap: pretty; }
  a { color: inherit; text-underline-offset: 0.18em; }
  img, svg { display: block; max-width: 100%; height: auto; }
  svg.icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em; flex: none; }
  :focus-visible { outline: 3px solid var(--warn-bar); outline-offset: 3px; border-radius: 4px; }
  .deep :focus-visible { outline-color: var(--mint); }
  .mint :focus-visible { outline-color: var(--navy); }
  [id] { scroll-margin-top: 24px; }
  .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .skip { position: absolute; left: 12px; top: -100px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--mint); color: var(--navy); font-weight: 600; text-decoration: none; }
  .skip:focus { top: 12px; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@layer components {
  /* ---------- Surfaces, folds and type (foniks.io) ---------- */
  .sec { padding: clamp(56px, 9vh, 104px) 0; }
  .paper { background: var(--paper); color: var(--navy); }
  .deep { position: relative; background: url(assets/foniks-monster.svg) center / cover no-repeat, var(--deep); color: var(--offwhite); }
  .mint { background: var(--mint); color: var(--navy); }
  /* The fold: the edge between two surfaces is a slanted fold in the paper */
  .fold { position: relative; height: var(--fold); margin: -1px 0; background: var(--to); }
  .fold::before { content: ''; position: absolute; inset: -2px 0 0; background: var(--from); clip-path: polygon(0 0, 100% 0, 0 100%); }   /* -2px: no hairline at the seam */
  .fold--deep-paper { --from: var(--deep); --to: var(--paper); }
  .fold--paper-deep { --from: var(--paper); --to: var(--deep); }
  .fold--deep-mint { --from: var(--deep); --to: var(--mint); }
  .fold--mint-paper { --from: var(--mint); --to: var(--paper); }
  .label { margin-bottom: 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
  .deep .label { color: var(--mint); }
  .mint .label { color: var(--navy); }
  .h2 { font-size: clamp(34px, min(4.4vw, 6.6vh), 58px); line-height: 1.03; letter-spacing: -0.045em; }
  .h2 .t2 { display: block; color: var(--green); }
  .deep .h2 .t2 { color: var(--mint); }
  .dot { color: var(--green); }
  .deep .dot { color: var(--mint); }
  .mint .dot { color: var(--mint-muted); }
  .t2 .dot { color: inherit; }
  .lead { max-width: 560px; margin-top: 16px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; color: var(--muted); }
  .deep .lead { color: var(--muted-dark); }
  .mini-label { margin-bottom: 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }

  /* ---------- Buttons ---------- */
  .btn {
    --b: var(--mint); --c: var(--navy);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px;
    border: 0; border-radius: 999px; background: var(--b); color: var(--c); font: 700 17px var(--font-body);
    text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px -14px var(--shadow-a55);
    transition: transform 0.25s var(--bounce), box-shadow 0.25s var(--ease);
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px var(--shadow-a60); }
  .btn:hover .icon { transform: translateX(3px); }
  .btn .icon { transition: transform 0.3s var(--bounce); }
  .btn--navy { --b: var(--navy); --c: var(--mint); }
  .btn--ghost { background: transparent; color: var(--offwhite); box-shadow: inset 0 0 0 1.5px var(--line-dark); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--mint); }
  .btn--line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
  .paper .btn--ghost, .dir .btn--ghost { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }

  /* ---------- Top ---------- */
  .top { position: absolute; inset: 0 0 auto; z-index: 20; padding-top: env(safe-area-inset-top); }
  .top__in { display: flex; align-items: center; min-height: 72px; }
  .top__brand { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- Hero ---------- */
  .hero { padding: calc(72px + clamp(24px, 5vh, 56px)) 0 clamp(40px, 7vh, 88px); overflow: clip; }
  .hero > .wrap { position: relative; z-index: 1; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 72px); align-items: center; }
  @media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); } }
  .hero__logo { margin-bottom: clamp(16px, 2.6vh, 24px); }
  .hero__logo img { height: clamp(30px, 3vw, 40px); width: auto; }
  /* Sized by the height too: on a laptop the whole stop fits on the first screen */
  .hero h1 { font-size: clamp(40px, min(5vw, 8.6vh), 76px); line-height: 0.96; letter-spacing: -0.05em; margin-left: -0.03em; }
  .hero__name { display: block; color: var(--mint); }
  .lofte { margin-top: clamp(16px, 2.8vh, 26px); font: 650 clamp(20px, min(2vw, 3.6vh), 28px) / 1.15 var(--font-display); letter-spacing: -0.03em; }
  .lofte span { display: block; }
  .lofte__mint { color: var(--mint); }
  .buy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2.6vh, 22px); margin-top: clamp(22px, 4vh, 36px); }
  .hero-price { display: flex; align-items: center; gap: 14px; line-height: 1.2; }
  .hero-price b { font: 700 clamp(28px, 2.6vw, 38px) / 1 var(--font-display); letter-spacing: -0.04em; color: var(--offwhite); white-space: nowrap; }
  .hero-price b small { font-size: 0.55em; font-weight: 600; letter-spacing: -0.01em; }
  .price__rest { display: grid; gap: 1px; padding-left: 14px; border-left: 1px solid var(--line-dark); font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--muted-dark); white-space: nowrap; }
  .hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }

  /* The proposals, fanned, each in a browser window; the recommendation in front, its phone beside it */
  /* The top band of the stage is the bird's: the windows start below it, so it never covers a proposal */
  .stage { position: relative; display: block; padding: 24% 6% 8% 15%; text-decoration: none; }
  .stage__fan { position: relative; display: block; transform: rotate(-3deg); }
  .stage__desk { position: relative; z-index: 3; display: block; overflow: hidden; border-radius: 14px; background: var(--white); box-shadow: 0 40px 80px -30px var(--shadow-a60), 0 0 0 1px var(--white-a06); transition: translate 0.6s var(--ease), filter 0.6s var(--ease); }
  .stage__desk--2, .stage__desk--3 { position: absolute; inset: 0 0 auto; filter: brightness(0.82) saturate(0.9); }
  .stage__desk--2 { z-index: 2; }
  .stage__desk--3 { z-index: 1; }
  .stage__desk--2 { translate: -9% -11%; scale: 0.93; }
  .stage__desk--3 { translate: -18% -22%; scale: 0.86; }
  .stage:hover .stage__desk--2 { translate: -11% -13%; filter: none; }
  .stage:hover .stage__desk--3 { translate: -22% -26%; filter: none; }
  .card-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--bar); border-bottom: 1px solid var(--bar-line); }
  .card-bar i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--bar-dot); }
  .card-url { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 2px 14px; border-radius: 999px; background: var(--white); font: 500 12px/1.4 var(--font-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-url .icon { width: 10px; height: 10px; }
  .stage__phone { position: absolute; right: 2%; bottom: 3%; width: 25%; padding: 6px; border-radius: 30px; background: var(--navy); box-shadow: 0 40px 70px -20px var(--shadow-a60), 0 0 0 1.5px var(--line-dark); transform: rotate(4deg); transition: transform 0.6s var(--ease); }
  .stage__phone img { border-radius: 24px; }
  .stage__screen, .stage__screen picture { display: block; }
  .stage:hover .stage__phone { transform: rotate(2deg) translateY(-8px); }
  /* The phoenix flies out of the window, as on foniks.io */
  /* Above the windows and clear of the phone: the proposal, its logo and its menu, stay in sight */
  .stage__bird { position: absolute; z-index: 4; top: -3%; right: 4%; width: clamp(96px, 10vw, 140px); filter: drop-shadow(0 2px 2px var(--tone-a30)) drop-shadow(0 18px 28px var(--tone-a45)); pointer-events: none; }
  /* The sticker: how many, and until when (foniks.io's «Nytt liv!») */
  .sticker { position: absolute; z-index: 5; left: 0; top: 4%; display: grid; place-content: center; width: clamp(96px, 10vw, 128px); aspect-ratio: 1; border-radius: 50%; background: var(--mint); color: var(--navy); text-align: center; line-height: 1.1; transform: rotate(-12deg); box-shadow: 0 20px 40px -12px var(--shadow-a55); }
  .sticker b { font: 800 clamp(18px, 1.7vw, 23px) var(--font-display); letter-spacing: -0.03em; }
  .sticker span { font-size: 14px; font-weight: 600; }

  /* ---------- The proposals ---------- */
  .dirs .lead { max-width: 52ch; }
  .dirs__region { margin-top: clamp(48px, 7vw, 80px); }
  .dirs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(72px, 9vw, 120px); }
  /* position: relative keeps the hidden colour names inside the card, and the card inside the carousel */
  .dir { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
  .dir__media { position: relative; display: block; padding: 0 9% 9% 0; text-decoration: none; }
  .dir__desk { display: block; overflow: hidden; border-radius: 14px; background: var(--white); box-shadow: 0 40px 80px -36px var(--deep-a60), 0 0 0 1px var(--line); transition: transform 0.4s var(--ease); }
  .dir__desk > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
  .dir__phone { position: absolute; right: 0; bottom: 0; width: 23%; padding: 5px; border-radius: 24px; background: var(--navy); box-shadow: 0 30px 60px -20px var(--deep-a60); transition: transform 0.4s var(--ease); }
  .dir__phone img { border-radius: 19px; }
  .dir__media:hover .dir__desk { transform: translateY(-4px); }
  .dir__media:hover .dir__phone { transform: translateY(-8px) rotate(2deg); }
  .dir__n { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
  .dir__rec { padding: 5px 12px; border-radius: 999px; background: var(--mint); color: var(--navy); letter-spacing: 0.06em; }
  .dir h3 { margin-bottom: 10px; font-size: clamp(30px, min(3vw, 5vh), 44px); line-height: 1.04; letter-spacing: -0.04em; }
  .dir__idea { max-width: 44ch; font-size: 18px; line-height: 1.5; color: var(--muted); }
  .dir__why { margin-top: 16px; border-left: 3px solid var(--green); padding: 2px 0 2px 14px; color: var(--muted); }
  .dir__why b { color: var(--navy); }
  .dir__label { margin-top: 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
  .dir__pros { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
  .dir__pros li { display: flex; gap: 10px; }
  .dir__pros .icon { margin-top: 4px; color: var(--green); }
  .dir__grasp { margin-top: 14px; font-size: 17px; }
  .dir__grasp b { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
  .dir__con { display: flex; gap: 10px; margin-top: 12px; color: var(--muted); }
  .dir__con .icon { margin-top: 4px; }
  .dir__con b { color: var(--navy); }
  .dir__kit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 18px 0 22px; font-size: 15px; color: var(--muted); }
  .dir__dots { list-style: none; margin: 0; padding: 0 8px 0 0; display: flex; }
  .dir__dots li { margin-right: -8px; }
  .swatch__chip { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px var(--paper); }
  .dir__aa { font: 700 30px/1 var(--font-display); color: var(--navy); }
  @media (min-width: 900px) {
    .dir { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
    .dir:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .dir:nth-child(even) .dir__media { order: 2; }
  }

  /* ---------- Slik fungerer Føniks: the phoenix's life, on a dotted path ---------- */
  .slik-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
  @media (min-width: 900px) { .slik-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .slik-myte { max-width: 52ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
  .slik-flow { position: relative; margin-top: clamp(84px, 11vh, 120px); }
  .slik-arc { position: absolute; left: 0; top: -64px; width: 100%; height: 120px; overflow: visible; pointer-events: none; }
  .slik-arc path { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.5 11; vector-effect: non-scaling-stroke; }
  .steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: stretch; }
  @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .steps li { position: relative; display: flex; flex-direction: column; padding: 28px 28px 30px; border-radius: 22px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px var(--deep-a35); }
  .steps li > .icon { width: 34px; height: 34px; margin-bottom: 22px; color: var(--green); }
  .st-n { position: absolute; top: 24px; right: 26px; font: 800 14px var(--font-display); letter-spacing: 0.06em; color: var(--green); }
  .st-k { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
  .steps h3 { margin-top: 6px; font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; }
  .steps p:not(.st-k) { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--muted); }
  .st-here { align-self: flex-start; margin-top: 16px; padding: 5px 12px; border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 14px; font-weight: 700; }
  /* The rebirth is the high point: a dark card with light in its corner, and the phoenix rises out of it */
  .steps .st-reborn { background: radial-gradient(120% 90% at 88% 0%, var(--mint-a24), var(--mint-a00) 58%), var(--deep); color: var(--offwhite); box-shadow: 0 40px 70px -36px var(--deep-a70); }
  .steps .st-reborn::before { content: ''; display: block; height: 62px; }
  .steps .st-reborn .st-n { right: auto; left: 28px; }
  .steps .st-reborn .st-k, .steps .st-reborn .st-n { color: var(--mint); }
  .steps .st-reborn p:not(.st-k) { color: var(--muted-dark); }
  .st-rise { position: absolute; top: -66px; right: 18px; width: 46%; max-width: 150px; filter: drop-shadow(0 2px 2px var(--tone-a30)) drop-shadow(0 18px 24px var(--tone-a45)); }
  @media (min-width: 900px) { .steps .st-reborn { transform: translateY(-18px); } }
  .slik-loop { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 56px; font: 650 18px var(--font-display); letter-spacing: -0.01em; text-align: center; }
  .slik-loop .icon { width: 22px; height: 22px; color: var(--green); }

  /* ---------- Fornyelsen: after a year they choose ---------- */
  .renew__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
  @media (min-width: 900px) { .renew__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); } }
  .renew__choice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  @media (min-width: 600px) { .renew__choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .renew__choice li { position: relative; display: grid; align-content: start; gap: 10px; padding: 30px 28px; border-radius: 22px; background: var(--deep-2); box-shadow: inset 0 0 0 1px var(--line-dark); }
  .renew__choice .icon { width: 30px; height: 30px; color: var(--mint); }
  .renew__choice h3 { font-size: 26px; letter-spacing: -0.03em; }
  .renew__choice p { color: var(--muted-dark); }
  .renew__choice .renew__new { background: var(--mint); color: var(--navy); box-shadow: 0 30px 60px -30px var(--shadow-a55); }
  .renew__new .icon { color: var(--navy); }
  .renew__new p { color: var(--navy); }
  .sticker--small { left: auto; top: -22px; right: -12px; width: 84px; background: var(--navy); color: var(--mint); transform: rotate(10deg); }
  .sticker--small b, .sticker--small span { font: 800 17px/1.05 var(--font-display); }

  /* ---------- Laget for dem dere vil nå ---------- */
  .people__lead { max-width: 56ch; margin-top: 16px; font-size: 18px; color: var(--muted); }
  .people__list { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
  .person-card { position: relative; display: grid; align-content: start; gap: 14px; padding: 28px; border-radius: 22px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px var(--deep-a35); }
  .person-card__avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--deep); color: var(--mint); font: 800 22px var(--font-display); }
  .person-card__ask { font: 700 clamp(21px, 1.8vw, 25px) / 1.2 var(--font-display); letter-spacing: -0.02em; }
  .person-card__who { font-weight: 700; }
  .person-card__who span { display: block; font-weight: 400; color: var(--muted); }
  .person-card__answer { padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
  .person-card__answer b { color: var(--green); }
  .five { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); font: 700 clamp(24px, 2.6vw, 38px) / 1.15 var(--font-display); letter-spacing: -0.03em; }
  .five span { display: block; margin-bottom: 10px; font: 700 14px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }

  /* ---------- Hvorfor nå, and today's site next to the new one ---------- */
  .why__list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; }
  @media (min-width: 900px) { .why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .why__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; }
  .why__list .icon { grid-row: span 2; width: 28px; height: 28px; margin-top: 2px; color: var(--green); }
  .why__list h3 { font-size: 20px; letter-spacing: -0.02em; }
  .why__list p { color: var(--muted); }
  .compare__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; align-items: end; }
  @media (min-width: 900px) { .compare__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px; } }
  .compare__tag { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; font-size: 14px; color: var(--muted); }
  .compare__new .compare__tag { background: var(--mint); box-shadow: none; color: var(--navy); }
  .compare__frame { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--white); box-shadow: 0 30px 60px -30px var(--deep-a60), 0 0 0 1px var(--line); }
  .compare__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .compare__old .compare__frame { filter: saturate(0.6); }

  /* ---------- Pakk ut: the box, and the proof ---------- */
  .box { position: relative; margin-top: clamp(32px, 5vh, 48px); padding: 0 clamp(20px, 3vw, 36px) 6px; border-radius: 20px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px var(--deep-a35); }
  .box::before { content: ''; position: absolute; left: 50%; top: -9px; width: 64px; height: 18px; margin-left: -32px; border-radius: 9px; background: var(--mint); transform: rotate(-4deg); box-shadow: 0 4px 10px -4px var(--deep-a45); }
  .box-top { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 14px; border-bottom: 2px dashed var(--line); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 36px; }
  @media (min-width: 700px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .perks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 4px 14px; padding: clamp(14px, 2.2vh, 22px) 0; border-top: 1px solid var(--line); }
  .perks .icon { grid-row: span 2; width: 26px; height: 26px; margin-top: 1px; color: var(--green); }
  .perks h3 { font-size: 17.5px; line-height: 1.25; letter-spacing: -0.02em; }
  .perks p { font-size: 15px; line-height: 1.45; color: var(--muted); }
  @media (min-width: 1000px) { .perks li:nth-child(-n+4) { border-top: 0; } }
  @media (min-width: 700px) and (max-width: 999.98px) { .perks li:nth-child(-n+2) { border-top: 0; } }
  @media (max-width: 699.98px) { .perks li:first-child { border-top: 0; } }
  .proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: clamp(32px, 5vh, 48px); align-items: start; }
  @media (min-width: 900px) { .proof { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; } }
  .serp { margin: 0; }
  .serp__card { padding: clamp(20px, 3vw, 30px); border-radius: 20px; background: var(--white); color: var(--serp-text); font-family: Arial, sans-serif; box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px var(--deep-a35); }
  .serp__site { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .serp__site img { width: 28px; height: 28px; border-radius: 50%; background: var(--serp-chip); padding: 4px; }
  .serp__site b { display: block; font-weight: 400; font-size: 14px; color: var(--serp-url); }
  .serp__site small { display: block; font-size: 14px; color: var(--serp-text); }
  .serp__title { margin-bottom: 6px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; color: var(--serp-title); }
  .serp__desc { font-size: 15px; line-height: 1.58; color: var(--serp-text); }
  .keywords { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .keywords li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
  .keywords .icon { color: var(--green); }

  /* ---------- Sammenlignet: Føniks's column stands out ---------- */
  .sml-wrap { margin-top: clamp(24px, 4vh, 36px); overflow-x: auto; border-radius: 18px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px var(--deep-a35); }
  .sml { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; font-size: 15.5px; line-height: 1.4; }
  .sml th, .sml td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
  .sml tbody tr:last-child th, .sml tbody tr:last-child td { border-bottom: 0; }
  .sml thead td:first-child { width: 20%; }
  .sml thead th { font: 700 17px var(--font-display); letter-spacing: -0.01em; }
  .sml thead small { display: block; margin-top: 2px; font: 500 14px var(--font-body); color: var(--muted); }
  .sml tbody th { font-weight: 700; }
  .sml td { color: var(--muted); }
  .sml .us { background: var(--us); color: var(--navy); font-weight: 600; }
  .sml thead .us { color: var(--green); }
  .sml-note { max-width: 70ch; margin-top: 16px; font-size: 15px; color: var(--muted); }

  /* ---------- Price (on Deep) ---------- */
  .price__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  @media (min-width: 900px) { .price__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 80px); align-items: start; } }
  .price-sec .lead { max-width: 40ch; }
  .plans { padding: clamp(24px, 3.4vw, 40px); border-radius: 24px; background: linear-gradient(135deg, var(--mint-a16), var(--mint-a00) 46%), var(--deep-2); box-shadow: inset 0 0 0 1px var(--line-dark), 0 50px 100px -40px var(--shadow-a60); }
  .plans__choice { display: flex; gap: 4px; margin: 0 0 28px; padding: 4px; border: 1px solid var(--line-dark); border-radius: 999px; background: var(--deep); }
  .plans__choice legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .plans__choice input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
  .plans__choice label { flex: 1; display: grid; place-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--muted-dark); cursor: pointer; white-space: nowrap; transition: background-color 0.25s var(--ease), color 0.2s; }
  .plans__choice input:checked + label { background: var(--mint); color: var(--navy); }
  .plans__choice input:focus-visible + label { outline: 3px solid var(--mint); outline-offset: 2px; }
  /* One plan shows: the checked one (with :has), or the default where :has is missing. No JavaScript needed. */
  .plan { display: none; }
  .plan.is-default { display: block; }
  .plans:has(input:checked) .plan.is-default { display: none; }
  .plans:has(input[value="0"]:checked) .plan[data-plan="0"],
  .plans:has(input[value="12"]:checked) .plan[data-plan="12"],
  .plans:has(input[value="24"]:checked) .plan[data-plan="24"] { display: block; }
  .plan__price { font: 700 clamp(56px, 4.4vw + 24px, 84px) / 0.95 var(--font-display); letter-spacing: -0.05em; color: var(--offwhite); }
  .plan__price small { font-size: 0.34em; font-weight: 600; letter-spacing: -0.01em; color: var(--muted-dark); }
  .plan__drift { margin-top: 12px; font-weight: 700; }
  .plan__total { margin-top: 4px; color: var(--muted-dark); }
  .plan__after { margin-top: 24px; }
  .plan__after > p { margin-bottom: 12px; font-weight: 700; }
  .plan__options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
  .plan__options li { display: flex; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--line-dark); }
  .plan__options .icon { color: var(--mint); margin-top: 3px; }
  .plan__options b { display: block; margin-bottom: 2px; }
  .plan__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; font-weight: 700; color: var(--mint); }
  .plan__more .icon { width: 18px; height: 18px; }
  .plans__note { margin-top: 20px; font-size: 14.5px; color: var(--muted-dark); }
  .plans__note a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--mint); }
  /* The campaign page: 1–12 months on a slider (offer.js moves the numbers) */
  .campaign { display: grid; gap: 10px; margin-bottom: 24px; }
  .campaign label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-weight: 700; }
  .campaign output { font: 800 22px / 1.1 var(--font-display); letter-spacing: -0.02em; }
  .campaign input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--mint); cursor: pointer; }
  .pick__slider { grid-column: 1 / -1; padding: 10px 14px 4px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--field); }
  .pick__slider .campaign { margin: 0; }
  .pick__slider .campaign input { accent-color: var(--green); }
  /* The agreement, next to the price */
  .deal { margin-top: 28px; padding: 0 22px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--line-dark); }
  .deal[open] { padding-bottom: 20px; }
  .deal__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; cursor: pointer; font: 700 18px var(--font-display); list-style: none; }
  .deal__title::-webkit-details-marker { display: none; }
  .deal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .deal li { display: flex; gap: 10px; font-size: 15.5px; color: var(--muted-dark); }
  .deal .icon { color: var(--mint); margin-top: 3px; }

  /* ---------- The order (on Mint, the one Mint surface) ---------- */
  .order__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
  @media (min-width: 900px) { .order__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; } }
  .order-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
  .order-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; counter-increment: step; }
  .order-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--mint); font: 800 18px var(--font-display); }
  .order-steps b { font: 700 18px/1.3 var(--font-display); }
  .order-steps span { color: var(--mint-muted); }
  .order__ask { margin: 32px 0 0; font: 700 18px var(--font-display); }
  .contact-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
  .contact-card { display: grid; align-content: start; gap: 4px; }
  .person__photo { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 10px; border-radius: 50%; object-fit: cover; background: var(--navy); color: var(--mint); font: 800 26px var(--font-display); }
  .person__name { font: 800 19px var(--font-display); }
  .person__name span { display: block; font: 400 16px var(--font-body); color: var(--mint-muted); }
  .person__links { display: grid; margin-top: 2px; }
  .person__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; overflow-wrap: anywhere; }
  .person__tel { font: 800 19px var(--font-display); }
  /* The form (behaviour from the starter kit's script) */
  .form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--white); color: var(--navy); box-shadow: 0 40px 80px -40px var(--deep-a60); }
  .form__trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  @media (min-width: 900px) { .form__trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
  .field { display: grid; gap: 6px; min-width: 0; }
  .field label { font-weight: 700; }
  .field__optional { font-weight: 400; color: var(--muted); }
  .field input, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; font-size: max(16px, 1rem); color: var(--navy); background: var(--paper); border: 1.5px solid var(--field); border-radius: 14px; }
  .field [aria-invalid="true"] { border-color: var(--error); }
  .field__hint { font-size: 14.5px; color: var(--muted); }
  .field__error { color: var(--error); font-weight: 700; font-size: 15px; }
  .form__summary { padding: 14px 18px; border: 2px solid var(--error); border-radius: 14px; }
  .form__summary ul { margin: 6px 0 0; padding-left: 20px; }
  .form__note { font-size: 14.5px; color: var(--muted); }
  /* The choices in the form, as chips: the proposal and the way to pay */
  .pick { min-width: 0; margin: 0; padding: 0; border: 0; }
  .pick legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
  .pick__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  @media (min-width: 900px) { .pick__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pick__opt { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 6px 14px; overflow-wrap: anywhere; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--field); line-height: 1.25; cursor: pointer; }
  .pick__opt input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); font-size: 16px; }
  .pick__opt b { display: block; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .pick__mark { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--field); transition: box-shadow 0.2s var(--ease); }
  .pick__opt:has(input:checked) { background: var(--white); box-shadow: inset 0 0 0 2.5px var(--green); }
  .pick__opt:has(input:checked) .pick__mark { box-shadow: inset 0 0 0 6px var(--green); }
  .pick__opt:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
  [data-submit-row] { display: grid; }
  .form__status { margin-top: 12px; font-weight: 700; }
  .form__status:empty { margin: 0; }
  .form__answer { padding: 28px; border-radius: 24px; background: var(--white); color: var(--navy); }
  .form__answer h3 { margin-bottom: 6px; }
  .form__answer .btn { margin-top: 18px; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* ---------- Hvem er Akari? and what we recommend ---------- */
  .refs .carousel { margin-top: 40px; }
  .refs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .ref a, .ref > div { display: grid; gap: 2px; text-decoration: none; }
  .ref__shot { display: block; overflow: hidden; margin-bottom: 12px; border-radius: 14px; box-shadow: 0 30px 60px -36px var(--deep-a60), 0 0 0 1px var(--line); transition: transform 0.3s var(--ease); }
  .ref a:hover .ref__shot { transform: translateY(-4px); }
  .ref b { font: 700 18px var(--font-display); }
  .ref span:last-child { color: var(--muted); }
  /* Kundene sier: the dark card with the portrait (foniks.io) */
  .say { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 48px; overflow: hidden; border-radius: 26px; background: var(--deep); color: var(--offwhite); box-shadow: 0 40px 80px -40px var(--deep-a60); }
  @media (min-width: 760px) { .say { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); grid-template-areas: "img q" "img who"; } .say img { grid-area: img; } .say blockquote { grid-area: q; } .say figcaption { grid-area: who; } }
  .say img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; }
  @media (min-width: 760px) { .say img { aspect-ratio: auto; min-height: 360px; } }
  .say blockquote { align-self: end; padding: clamp(26px, 3.4vw, 44px) clamp(24px, 3.2vw, 44px) 0; }
  .say blockquote p { font: 600 clamp(21px, 2.1vw, 30px) / 1.25 var(--font-display); letter-spacing: -0.02em; }
  .say figcaption { display: grid; gap: 2px; padding: 20px clamp(24px, 3.2vw, 44px) clamp(26px, 3.4vw, 40px); color: var(--muted-dark); }
  .say figcaption b { color: var(--mint); }
  .needs__lead { max-width: 52ch; margin-top: 16px; font-size: 18px; color: var(--muted); }
  .needs .carousel { margin-top: 40px; }
  .needs__list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
  .needs .carousel .needs__list { margin-top: 0; }
  .needs__list li { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 18px; border: 2px dashed var(--line); }
  .needs__list .icon { width: 28px; height: 28px; color: var(--green); }
  .needs__list strong { font: 700 18px var(--font-display); }
  .needs__list span { color: var(--muted); }
  .needs__after { margin-top: 24px; font-size: 17px; color: var(--muted); }

  /* ---------- Footer ---------- */
  .foot { padding: 32px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--muted-dark); font-size: 15px; }
  .foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
  .foot__in p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

  /* ---------- Carousels on the phone (behaviour from the starter kit's script) ---------- */
  .carousel-bar { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
  .carousel-bar__count { font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.75; }
  .carousel-bar__buttons { display: flex; gap: 8px; }
  .carousel-bar button { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
  .carousel-bar button:disabled { opacity: 0.3; cursor: default; }

  /* ---------- More: on the phone, the longer sections fold into rows (<details class="more">) ----------
     A wide screen shows them open: ::details-content where the browser has it, and the offer script opens
     them where it does not. The phone-only parts (brief, more-head, action bar) are hidden there. */
  .brief, .more-head, .actionbar { display: none; }
  .more__sign { position: relative; flex: none; display: block; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
  .deep .more__sign { box-shadow: inset 0 0 0 1.5px var(--line-dark); }
  .more__sign::before, .more__sign::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: currentColor; translate: -50% -50%; transition: rotate 0.3s var(--ease); }
  .more__sign::after { rotate: 90deg; }
  [open] > summary .more__sign::after { rotate: 0deg; }
  .more__row { list-style: none; cursor: pointer; }
  .more__row::-webkit-details-marker { display: none; }
  @media (min-width: 900px) {
    .more[open] > .more__row { display: none; }
    @supports selector(::details-content) {
      .more > .more__row { display: none; }
      .more::details-content { content-visibility: visible; }
    }
  }

  /* ---------- The phone: a page of its own ---------- */
  @media (max-width: 899.98px) {
    .sec { padding: 56px 0; }
    .hero { padding: calc(72px + 8px) 0 8px; text-align: center; }
    .hero__grid { gap: 24px; }
    .hero__logo img { margin-inline: auto; height: 28px; }
    .hero h1 { font-size: clamp(36px, 9vw, 48px); }
    .lofte, .buy { display: none; }
    .stage { width: min(64%, 290px); margin-inline: auto; padding: 0 0 36px; }
    .stage__fan { display: none; }
    .stage__phone { position: relative; right: auto; bottom: auto; display: block; width: 100%; padding: 7px; border-radius: 38px; transform: rotate(-2.5deg); }
    .stage__screen { aspect-ratio: 390 / 844; overflow: hidden; border-radius: 31px; container-type: size; background: var(--paper); }
    .stage__screen img { width: 100%; max-width: none; height: auto; border-radius: 0; animation: glide 64s cubic-bezier(0.45, 0, 0.55, 1) 1.5s infinite; }
    .stage__bird { top: 2%; right: -30%; width: 28%; }   /* in the margin beside the phone, clear of its menu and the headline */
    .stage .sticker { display: none; }   /* on the phone it would lie on the proposal; the count is in the heading, the date in Kort fortalt */

    /* Kort fortalt: the offer in three numbers */
    .brief { display: block; padding: 8px 0 8px; }
    .brief__card { padding: 24px 22px 20px; border-radius: 24px; background: var(--deep); color: var(--offwhite); box-shadow: 0 30px 60px -36px var(--deep-a60); }
    .brief__title { font: 700 14px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
    .brief__list { list-style: none; margin: 12px 0 0; padding: 0; }
    .brief__list li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line-dark); }
    .brief__list b { font: 700 32px/1 var(--font-display); letter-spacing: -0.04em; color: var(--mint); }
    .brief__list b small { font-size: 0.5em; font-weight: 600; }
    .brief__list span { color: var(--muted-dark); line-height: 1.45; }
    .brief__list .brief__plus { font: 700 15px/1.45 var(--font-body); color: var(--offwhite); }
    .brief__note { padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: 15px; font-weight: 700; }

    .dir { gap: 18px; align-content: start; }
    .dir__media { padding: 0 10% 10% 0; }
    .dir__kit { display: none; }   /* the phone page is short: the colours and type are on the wide screen */
    .dir .btn { width: 100%; }
    ul[data-carousel], ol[data-carousel] {
      display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
      margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none;
    }
    ul[data-carousel]::-webkit-scrollbar, ol[data-carousel]::-webkit-scrollbar { display: none; }
    ul[data-carousel] > li, ol[data-carousel] > li { flex: 0 0 86%; scroll-snap-align: start; }
    .carousel-bar { display: flex; }

    /* The steps: one under the other, compact, the bird beside the third */
    .slik-flow { margin-top: 32px; }
    .slik-arc { display: none; }
    .steps { gap: 10px; }
    .steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 18px; border-radius: 18px; }
    .steps li > .icon, .st-rise { grid-row: span 3; width: 30px; margin: 2px 0 0; }
    .steps li > :not(.icon):not(.st-rise):not(.st-n) { grid-column: 2; }
    .steps .st-reborn::before { display: none; }
    .st-rise { position: static; width: 40px; max-width: none; }
    .st-n, .steps .st-reborn .st-n { top: 16px; right: 18px; left: auto; }
    .steps h3 { font-size: 18px; }
    .steps p:not(.st-k) { margin-top: 4px; font-size: 15.5px; }
    .st-here { margin-top: 8px; justify-self: start; }
    .slik-loop { margin-top: 28px; font-size: 16px; }
    .renew__choice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .renew__choice li { gap: 6px; padding: 20px 16px; border-radius: 18px; }
    .renew__choice h3 { font-size: 20px; }
    .renew__choice p { font-size: 15px; line-height: 1.45; }
    .renew__choice .icon { width: 24px; height: 24px; }
    .sticker--small { top: -18px; right: -6px; width: 72px; }
    .sticker--small b, .sticker--small span { font-size: 15px; }

    .box { padding-inline: 18px; }
    .perks li { grid-template-columns: 26px minmax(0, 1fr); align-items: center; padding: 12px 0; }
    .perks .icon { grid-row: auto; width: 22px; height: 22px; }
    .perks p { display: none; }   /* the phone shows what is in the box; the wide screen says what each gives */
    .proof-more { margin-top: 24px; border-top: 1px solid var(--line); }
    .proof { margin-top: 8px; }
    .brief { padding-top: 24px; }
    .refs__list { grid-template-columns: none; }

    /* The rest, folded into rows on the band's own surface */
    .more-head { display: block; padding-top: 24px; }
    .more-head p { padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 700 14px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
    .sec:has(> .wrap > .more) { padding: 0; }
    .more { border-bottom: 1px solid var(--line); }
    .more__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; align-items: center; gap: 14px; min-height: 84px; padding: 14px 0; }
    .more__row > .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--white); color: var(--green); box-shadow: 0 0 0 1px var(--line); }
    .more__text b { display: block; font: 700 18px/1.25 var(--font-display); letter-spacing: -0.01em; }
    .more__text small { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--muted); }
    .more[open] { padding-bottom: 48px; }
    .more[open] > .more__row { margin-bottom: 8px; }
    .more > .label { display: none; }
    .more > .h2 { font-size: 30px; }

    /* Velg favoritten, at the thumb (RULES.md H1–H6). Calling is in the order section. */
    .actionbar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px;
      padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)) 72px; /* 72 px: the cookie button's slot */
      background: var(--deep); box-shadow: 0 -1px 0 var(--line-dark);
      transform: translateY(110%); transition: transform 0.35s var(--ease);
    }
    .actionbar[data-visible="true"] { transform: none; }
    .actionbar .btn { flex: 1; min-width: 0; min-height: 50px; padding-inline: 12px; font-size: 16px; white-space: nowrap; }
    .foot { padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom)); }
  }
  @media (max-height: 480px) and (orientation: landscape) {
    .actionbar { padding-block: 4px calc(4px + env(safe-area-inset-bottom)); }
    .actionbar .btn { min-height: 44px; }
  }
  @keyframes glide {
    0%, 7% { translate: 0 0; }
    88%, 94% { translate: 0 calc(-100% + 100cqh); }
    100% { translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; animation-iteration-count: 1; }
    .stage__screen img { animation: none; }
  }
}

/* Unlayered: what Akari Engine injects, and [hidden] (RULES.md E1, L12) */
body #cc-main { --cc-btn-primary-bg: var(--mint); --cc-btn-primary-color: var(--navy); --cc-btn-primary-hover-bg: var(--paper); --cc-btn-primary-hover-color: var(--navy); }
body .floating-cookie-btn { background: var(--mint); color: var(--navy); }
body .ae-privacy-notice { margin: 0; font-size: 14px; color: var(--muted); }
[hidden]:not([hidden="until-found"]) { display: none; }

/* The directions' colours and fonts */
:root {
  --d1-sw-1: #f6f3ec;
  --d1-sw-2: #142628;
  --d1-sw-3: #4a5859;
  --d1-sw-4: #d8ebe8;
  --d1-sw-5: #006a68;
  --d1-sw-6: #7a4a00;
  --d1-display: 'Newsreader', var(--font-display);
}
.d1-sw-1 { --sw: var(--d1-sw-1); }
.d1-sw-2 { --sw: var(--d1-sw-2); }
.d1-sw-3 { --sw: var(--d1-sw-3); }
.d1-sw-4 { --sw: var(--d1-sw-4); }
.d1-sw-5 { --sw: var(--d1-sw-5); }
.d1-sw-6 { --sw: var(--d1-sw-6); }
.d1-aa { font-family: var(--d1-display); }