/* The offer page, in Føniks's clothes (foniks.io). Filled in by verktoy/build.py --tilbud.
   The client's own colours and fonts are added in a :root block at the end by the build. */
@layer base, components;

@layer base {
  :root {
    --color-bg: #0b2936;            /* Føniks deep */
    --color-surface: #103442;       /* navy */
    --color-text: #f3f3ed;          /* paper */
    --color-text-muted: #b7cbd0;
    --color-accent: #6ae6ad;        /* mint */
    --color-accent-muted: #245548;
    --font-display: 'Red Hat Display', 'Akari Fallback', Arial, sans-serif;
    --font-body: 'DM Sans', 'Akari Fallback', Arial, sans-serif;

    --color-paper: #f3f3ed;
    --color-ink: #0b2936;
    --color-ink-muted: #4c6369;
    --color-green: #176b50;
    --color-white: #ffffff;
    --color-line: rgb(193 213 210 / 0.16);
    --color-line-light: rgb(24 61 67 / 0.16);
    --color-field: #6e8a90;
    --color-error: #a5341f;
    --glow-mint: rgb(106 230 173 / 0.24);
    --glow-green: rgb(23 107 80 / 0.42);
    --shadow: rgb(2 14 20 / 0.55);
    --shadow-soft: rgb(2 14 20 / 0.18);
    --serp-title: #1a0dab;
    --serp-text: #4d5156;
    --serp-url: #202124;
    --serp-chip: #f1f3f4;
    --wrap: 1240px;
    --gutter: clamp(20px, 4.5vw, 56px);
    --ease: cubic-bezier(.2, .8, .2, 1);
  }
  @font-face { font-family: 'Akari Fallback'; src: local('Arial'); size-adjust: 100%; }
  *, *::before, *::after { box-sizing: border-box; }
  html { background: var(--color-bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 1.0625rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
  main { overflow-x: clip; }
  h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
  h2 { font-size: clamp(2.1rem, min(1.3rem + 2.8vw, 7vh), 3.8rem); }
  h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
  p { margin: 0; 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(--color-accent); outline-offset: 3px; }
  [id] { scroll-margin-top: 88px; }
  .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .skip { position: absolute; left: 12px; top: -100px; z-index: 50; padding: 12px 16px; background: var(--color-paper); color: var(--color-ink); border-radius: 8px; }
  .skip:focus { top: 12px; }
  .dot { color: var(--color-accent); }
  .eyebrow { margin-bottom: 18px; font: 700 0.875rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
}

@layer components {
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 28px;
    border: 0; border-radius: 999px; background: var(--color-accent); color: var(--color-ink);
    font: 700 1.0625rem var(--font-display); text-decoration: none; cursor: pointer;
    transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
  }
  .btn:hover { background: var(--color-paper); transform: translateY(-2px); }
  .btn--ghost { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-line); }
  .btn--ghost:hover { background: var(--color-surface); }

  /* ---------- 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; justify-content: space-between; gap: 16px; min-height: 76px; }
  .top__brand { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- Hero: the stop ---------- */
  .hero {
    position: relative; overflow: clip; padding: calc(76px + clamp(28px, min(4vw, 6vh), 56px)) 0 clamp(48px, min(7vw, 8vh), 112px);
    background:
      radial-gradient(60% 55% at 78% 42%, var(--glow-mint), transparent 70%),
      radial-gradient(45% 50% at 8% 95%, var(--glow-green), transparent 70%),
      var(--color-bg);
  }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 72px); align-items: center; }
  .hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font-weight: 600; color: var(--color-text-muted); }
  .hero__eyebrow img { height: 30px; width: auto; }
  /* Sized by the height too: on a laptop the whole stop fits on the first screen, in three lines. */
  .hero h1 { font-size: clamp(2.7rem, min(1rem + 3vw, 8vh), 4.4rem); font-weight: 900; }
  .hero__name { display: block; color: var(--color-accent); }
  .hero__price { margin: -14px 0 26px; font: 700 1.15rem var(--font-display); color: var(--color-accent); }
  .hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero__lead { max-width: 34ch; margin: 22px 0 30px; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); color: var(--color-text-muted); }

  .stage { position: relative; display: block; perspective: 2400px; padding: 7% 8% 11% 0; text-decoration: none; }
  .stage__desk {
    display: block; overflow: hidden; border-radius: 14px; background: var(--color-surface);
    box-shadow: 0 50px 100px -30px var(--shadow), 0 0 0 1px var(--color-line);
    transform: rotateY(-16deg) rotateX(7deg) rotateZ(1.5deg); transform-origin: 30% 50%;
    transition: transform 0.6s var(--ease);
  }
  .stage__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; }
  .stage__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-line); }
  .stage__bar b { margin-left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 14px; border-radius: 999px; background: var(--color-bg); font: 500 0.8rem var(--font-body); color: var(--color-text-muted); }
  .stage__phone {
    position: absolute; right: 0; bottom: 2%; width: 26%; padding: 6px; border-radius: 30px; background: var(--color-ink);
    box-shadow: 0 40px 70px -20px var(--shadow), 0 0 0 1.5px var(--color-line);
    transform: rotate(5deg); transition: transform 0.6s var(--ease);
  }
  .stage__phone img { border-radius: 24px; }
  .stage__screen, .stage__screen picture { display: block; }
  .stage__badge {
    position: absolute; left: -2%; top: 0; display: grid; place-content: center; width: clamp(96px, 11vw, 132px); aspect-ratio: 1;
    border-radius: 50%; background: var(--color-accent); color: var(--color-ink); text-align: center; line-height: 1.15;
    transform: rotate(-12deg); box-shadow: 0 20px 40px -12px var(--shadow);
  }
  .stage__badge b { font: 900 clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem) var(--font-display); letter-spacing: -0.02em; }
  .stage__badge span { font-size: clamp(0.875rem, 0.8rem + 0.2vw, 0.95rem); font-weight: 600; }
  .stage__open {
    position: absolute; left: 34%; bottom: 0; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px; background: var(--color-ink); color: var(--color-accent);
    font: 700 0.95rem var(--font-display); box-shadow: 0 0 0 1.5px var(--color-line); white-space: nowrap;
  }
  .stage:hover .stage__desk, .stage:focus-visible .stage__desk { transform: rotateY(-8deg) rotateX(3deg) rotateZ(0.5deg); }
  .stage:hover .stage__phone, .stage:focus-visible .stage__phone { transform: rotate(3deg) translateY(-8px); }
  @media (min-width: 900px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .stage { margin-right: calc(-1 * var(--gutter)); }
  }
  @media (max-width: 899.98px) {
    .stage { padding: 9% 12% 13% 0; }
    .stage__desk { transform: rotateY(-10deg) rotateX(5deg) rotateZ(1deg); }
    .stage__phone { width: 34%; }
  }

  /* ---------- Bands ---------- */
  .band { padding: clamp(72px, min(8vw, 13vh), 128px) 0; }
  .band.paper { background: var(--color-paper); color: var(--color-ink); }
  .band.paper .eyebrow, .band.paper .dot { color: var(--color-green); }
  .band > .wrap > h2, .more > h2 { max-width: 18ch; }

  /* Before and after */
  .compare__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 56px; align-items: end; }
  .compare figure { margin: 0; }
  .compare__tag { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--color-line); font-weight: 700; font-size: 0.9rem; color: var(--color-text-muted); }
  .compare__new .compare__tag { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); }
  .compare__frame { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--color-surface); box-shadow: 0 30px 60px -24px var(--shadow), 0 0 0 1px var(--color-line); }
  .compare__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .compare__old .compare__frame { filter: saturate(0.6); }
  @media (min-width: 900px) { .compare__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px; } }

  /* The people */
  .people__list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
  .person-card { position: relative; display: grid; align-content: start; gap: 16px; padding: 30px; border-radius: 24px; background: var(--color-white); box-shadow: 0 24px 50px -30px var(--shadow-soft); }
  .person-card__avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-ink); color: var(--color-accent); font: 800 1.4rem var(--font-display); }
  .person-card__ask { font: 700 clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem) / 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(--color-ink-muted); }
  .five { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--color-line-light); font: 800 clamp(1.6rem, 1.1rem + 2vw, 2.8rem) / 1.12 var(--font-display); letter-spacing: -0.025em; }
  .five span { display: block; margin-bottom: 12px; font: 700 0.875rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-green); }

  /* The choices: big pictures from the site, numbered */
  .choices__region { margin-top: 64px; }
  .choices__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 104px); }
  /* Carousels on the phone (behaviour from the starter kit's script). Colours follow the band. */
  .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; }
  @media (max-width: 899.98px) {
    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; }
    .choices__list > li { align-content: start; }
    ul.proof-chips > li { flex-basis: 58%; }
    .needs .carousel .needs__list { margin-top: 0; }
    .carousel-bar { display: flex; }
  }
  .choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
  .choice__shot { display: block; margin: 0; overflow: hidden; max-height: 460px; border-radius: 16px; background: var(--color-paper); box-shadow: 0 40px 80px -30px var(--shadow), 0 0 0 1px var(--color-line); }
  .choice__shot img { width: 100%; height: auto; }
  .choice__n { display: block; margin-bottom: 14px; font: 900 clamp(3rem, 2rem + 4vw, 5.5rem) / 0.9 var(--font-display); letter-spacing: -0.04em; color: var(--color-accent); }
  .choice h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin-bottom: 12px; }
  .choice p { max-width: 42ch; font-size: 1.1rem; color: var(--color-text-muted); }
  @media (min-width: 900px) {
    .choice { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; }
    .choice:nth-child(even) .choice__shot { order: 2; }
    .choice:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  }

  /* The design system, compact, under the choices */
  .system { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 64px; padding: 24px; border-radius: 22px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-line); }
  .system__dots { list-style: none; margin: 0; padding: 0; display: flex; }
  .system__dots li { margin-right: -10px; }
  .swatch__chip { display: block; width: 52px; height: 52px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 3px var(--color-surface); }
  .system__type { display: flex; align-items: center; gap: 18px; color: var(--color-text-muted); }
  .system__type b { color: var(--color-text); }
  .system__aa { flex: none; font: 700 3rem/1 var(--client-display); color: var(--color-text); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (min-width: 900px) { .system { grid-template-columns: auto minmax(0, 1fr); gap: 40px; } }

  /* Hva dere får */
  .gains__list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
  .gains__list li { display: grid; align-content: start; gap: 10px; padding: 28px; border-radius: 24px; background: var(--color-white); box-shadow: 0 24px 50px -30px var(--shadow-soft); }
  .gains__list .icon { width: 34px; height: 34px; color: var(--color-green); }
  .gains__list h3 { font-size: 1.35rem; }
  .gains__list p { color: var(--color-ink-muted); }
  .gains__quote { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; margin: 56px 0 0; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--color-ink); color: var(--color-text); }
  .gains__quote img { width: 140px; height: 175px; object-fit: cover; border-radius: 18px; }
  .gains__quote blockquote { margin: 0; }
  .gains__quote p { font: 800 clamp(1.4rem, 1.1rem + 1.3vw, 2.2rem) / 1.2 var(--font-display); letter-spacing: -0.02em; }
  .gains__quote figcaption { margin-top: 16px; }
  .gains__quote figcaption b { display: block; color: var(--color-accent); }
  .gains__quote figcaption span { color: var(--color-text-muted); }
  @media (min-width: 900px) { .gains__quote { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; } .gains__quote img { width: 200px; height: 250px; } }

  /* The agreement, next to the price */
  .deal { margin-top: 32px; padding: 0 24px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px var(--color-line); }
  .deal[open] { padding-bottom: 22px; }
  .deal__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; margin-bottom: 0; cursor: pointer; font: 800 1.2rem 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; color: var(--color-text-muted); }
  .deal .icon { color: var(--color-accent); margin-top: 3px; }

  /* References */
  .refs__lead { max-width: 52ch; margin-top: 20px; font-size: 1.15rem; color: var(--color-text-muted); }
  .refs .carousel { margin-top: 48px; }
  .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: 4px; text-decoration: none; }
  .ref__shot { display: block; overflow: hidden; margin-bottom: 12px; border-radius: 16px; box-shadow: 0 30px 60px -30px var(--shadow), 0 0 0 1px var(--color-line); transition: transform 0.3s var(--ease); }
  .ref a:hover .ref__shot { transform: translateY(-4px); }
  .ref b { font: 700 1.1rem var(--font-display); }
  .ref span:last-child { color: var(--color-text-muted); }
  .refs__quote { margin: 48px 0 0; padding-left: 24px; border-left: 3px solid var(--color-accent); }
  .refs__quote blockquote { margin: 0; }
  .refs__quote p { max-width: 46ch; font: 700 clamp(1.2rem, 1rem + 0.8vw, 1.6rem) / 1.3 var(--font-display); }
  .refs__quote figcaption { margin-top: 12px; color: var(--color-text-muted); }

  /* Under panseret: visible where customers look */
  .visible__lead { max-width: 52ch; margin-top: 20px; font-size: 1.15rem; color: var(--color-text-muted); }
  .visible__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 56px; }
  .visible figure { margin: 0; }
  .visible figcaption { margin-bottom: 14px; font: 700 0.875rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
  .serp__card { padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--color-white); color: var(--serp-text); font-family: Arial, sans-serif; box-shadow: 0 40px 80px -36px var(--shadow); }
  .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(1.15rem, 1rem + 0.5vw, 1.35rem); line-height: 1.3; color: var(--serp-title); }
  .serp__desc { font-size: 15px; line-height: 1.58; color: var(--serp-text); }
  .facts__list { margin: 0; padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-line); font-variant-numeric: tabular-nums; }
  .facts__list div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--color-line); }
  .facts__list div:last-child { border-bottom: 0; }
  .facts__list dt { color: var(--color-text-muted); }
  .facts__list dt::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--color-accent); vertical-align: 2px; }
  .facts__list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .keywords__title { margin: 24px 0 10px; font: 700 0.875rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
  .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(--color-surface); box-shadow: 0 0 0 1px var(--color-line); font-weight: 600; }
  .keywords .icon { color: var(--color-accent); }
  .visible .carousel { margin-top: 40px; }
  .proof-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .proof-chips li { display: grid; gap: 4px; align-content: start; padding: 18px 20px; border-radius: 18px; background: var(--color-accent); color: var(--color-ink); }
  .proof-chips b { font: 900 clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem) / 1 var(--font-display); letter-spacing: -0.03em; }
  .proof-chips span { font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
  @media (min-width: 900px) {
    .visible__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
    .proof-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }

  /* Price */
  .price__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .price__lead { margin-top: 20px; max-width: 34ch; color: var(--color-text-muted); font-size: 1.15rem; }
  .plans { padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-line), 0 50px 100px -40px var(--shadow); }
  .plans__choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; margin: 0 0 32px; padding: 6px; border: 0; background: var(--color-bg); border-radius: 28px; }
  .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 { display: grid; place-items: center; min-height: 48px; padding: 0 12px; border-radius: 999px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
  .plans__choice input:checked + label { background: var(--color-accent); color: var(--color-ink); }
  .plans__choice input:focus-visible + label { outline: 3px solid var(--color-accent); 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="1"]:checked) .plan[data-plan="1"],
  .plans:has(input[value="2"]:checked) .plan[data-plan="2"],
  .plans:has(input[value="3"]:checked) .plan[data-plan="3"],
  .plans:has(input[value="4"]:checked) .plan[data-plan="4"],
  .plans:has(input[value="6"]:checked) .plan[data-plan="6"],
  .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: 900 clamp(3.4rem, 2.4rem + 4vw, 5.2rem) / 0.95 var(--font-display); letter-spacing: -0.045em; }
  .plan__price small { font-size: 0.36em; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-muted); }
  .plan__drift { margin-top: 12px; font-weight: 700; }
  .plan__total { margin-top: 4px; color: var(--color-text-muted); }
  .plan__after { margin-top: 28px; }
  .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%, 180px), 1fr)); gap: 10px; }
  .plan__options li { display: flex; gap: 10px; padding: 16px; border-radius: 16px; background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-line); }
  .plan__options .icon { color: var(--color-accent); margin-top: 2px; }
  .plans__note { margin-top: 24px; font-size: 0.9rem; color: var(--color-text-muted); }
  .plans__note a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; color: var(--color-accent); }
  @media (min-width: 900px) { .price__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; } }

  /* What we need */
  .needs .carousel { margin-top: 48px; }
  .needs__list { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
  .needs__list li { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 20px; border: 2px dashed var(--color-line); }
  .needs__list .icon { width: 30px; height: 30px; color: var(--color-accent); }
  .needs__list strong { font: 700 1.15rem var(--font-display); }
  .needs__list span { color: var(--color-text-muted); }
  .needs__after { margin-top: 28px; font-size: 1.15rem; color: var(--color-text-muted); }

  /* Contact */
  .contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contact-cards { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; }
  .contact-card { display: grid; align-content: start; gap: 4px; }
  @media (max-width: 899.98px) {
    .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .contact-card .person__photo { width: 84px; height: 84px; margin-bottom: 10px; }
    .contact-card .person__name { font-size: 1.05rem; }
    .contact-card .person__tel { font-size: 1.1rem; }
    .contact-card .person__links a { font-size: 0.95rem; overflow-wrap: anywhere; }
  }
  .person__photo { display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 16px; border-radius: 50%; object-fit: cover; background: var(--color-ink); color: var(--color-accent); font: 800 2.4rem var(--font-display); }
  .person h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); margin-bottom: 18px; }
  .person__lead { max-width: 38ch; margin-bottom: 24px; font-size: 1.15rem; color: var(--color-ink-muted); }
  .person__name { font: 800 1.25rem var(--font-display); }
  .person__name span { display: block; font: 400 1rem var(--font-body); color: var(--color-ink-muted); }
  .person__links { display: grid; gap: 0; margin-top: 8px; }
  .person__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--color-green); }
  .person__tel { font: 800 1.35rem var(--font-display); }
  @media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; } }

  /* Form (behaviour from the starter kit's script) */
  .form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(22px, 4vw, 36px); background: var(--color-white); border-radius: 28px; box-shadow: 0 40px 80px -40px var(--shadow-soft); }
  .form__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  @media (min-width: 900px) { .form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .field { display: grid; gap: 6px; min-width: 0; }
  .field label { font-weight: 700; }
  .field__optional { font-weight: 400; color: var(--color-ink-muted); }
  .field input, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; font-size: max(16px, 1rem); color: var(--color-ink); background: var(--color-paper); border: 1.5px solid var(--color-field); border-radius: 14px; }
  .field [aria-invalid="true"] { border-color: var(--color-error); }
  .field__hint { font-size: 0.9rem; color: var(--color-ink-muted); }
  .field__error { color: var(--color-error); font-weight: 700; font-size: 0.95rem; }
  .form__summary { padding: 14px 18px; border: 2px solid var(--color-error); border-radius: 14px; }
  .form__summary ul { margin: 6px 0 0; padding-left: 20px; }
  [data-submit-row] { display: grid; }
  .form__status { margin-top: 12px; font-weight: 700; }
  .form__status:empty { margin: 0; }
  .form__answer { padding: 28px; background: var(--color-white); color: var(--color-ink); border-radius: 28px; }
  .form__answer h3 { margin-bottom: 6px; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Footer */
  .foot { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--color-text-muted); font-size: 0.95rem; }
  .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; min-height: 44px; min-width: 44px; justify-content: center; }

  /* ---------- More: on the phone, the longer sections fold into rows (<details class="more">) ----------
     A wide screen shows them open, as before: ::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(--color-line); }
  .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 ----------
     Read on the move, between other things: the site itself first, gliding past in the phone; the offer
     in three numbers; what they get, in a list; the price; the rest folded, for whoever wants it; and
     «Se siden» always at the thumb. */
  @media (max-width: 899.98px) {
    .hero {
      padding: calc(76px + 16px) 0 8px; text-align: center;
      background: radial-gradient(90% 42% at 50% 62%, var(--glow-mint), transparent 72%), var(--color-bg);
    }
    .hero__grid { gap: 28px; }
    .hero__eyebrow { justify-content: center; gap: 10px; margin-bottom: 16px; font-size: 0.95rem; }
    .hero__eyebrow img { height: 24px; }
    .hero h1 { font-size: clamp(2.3rem, 1.1rem + 5.4vw, 3.2rem); }
    .hero__lead, .hero__price, .hero__btns { display: none; }
    .stage { width: min(64%, 290px); margin-inline: auto; padding: 0 0 40px; perspective: none; }
    .stage__desk { display: none; }
    .stage__phone {
      position: relative; right: auto; bottom: auto; display: block; width: 100%; padding: 7px; border-radius: 38px;
      transform: rotate(-2.5deg); box-shadow: 0 50px 90px -30px var(--shadow), 0 0 0 1.5px var(--color-line);
    }
    .stage__screen { aspect-ratio: 390 / 844; overflow: hidden; border-radius: 31px; container-type: size; background: var(--color-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:hover .stage__phone, .stage:focus-visible .stage__phone { transform: rotate(-1deg) translateY(-6px); }
    .stage__badge { left: auto; right: -20%; top: -4%; width: 92px; transform: rotate(10deg); }
    .stage__open { left: 50%; bottom: 14px; }

    /* Kort fortalt: the offer in three numbers */
    .brief { display: block; padding: 8px 0 64px; }
    .brief__card { padding: 26px 24px 22px; border-radius: 28px; background: var(--color-accent); color: var(--color-ink); text-align: left; box-shadow: 0 40px 80px -40px var(--shadow); }
    .brief__title { font: 700 0.875rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
    .brief__list { list-style: none; margin: 14px 0 0; padding: 0; }
    .brief__list li { display: grid; gap: 2px; padding: 14px 0; border-top: 1.5px solid var(--color-line-light); }
    .brief__list b { font: 900 2.2rem/1 var(--font-display); letter-spacing: -0.04em; }
    .brief__list b small { font-size: 0.5em; font-weight: 700; letter-spacing: -0.01em; }
    .brief__list span { font-weight: 500; line-height: 1.45; }
    .brief__list .brief__plus { font: 700 1rem/1.45 var(--font-body); letter-spacing: 0; }
    .brief__note { padding-top: 14px; border-top: 1.5px solid var(--color-line-light); font-size: 0.95rem; font-weight: 700; }

    /* What they get: a list to read at a glance, not cards to swipe */
    .band { padding: 64px 0; }
    .gains__list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
    .gains__list li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--color-line-light); }
    .gains__list li .icon { grid-row: span 2; width: 28px; height: 28px; margin-top: 1px; }
    .gains__list h3 { font-size: 1.2rem; }
    .gains__list h3 br { display: none; }
    .gains__list p { font-size: 1rem; line-height: 1.5; }
    .gains__quote { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "q q" "i c"; gap: 18px 14px; margin-top: 24px; padding: 24px 22px; border-radius: 24px; }
    .gains__quote > div { display: contents; }
    .gains__quote blockquote { grid-area: q; }
    .gains__quote p { font-size: 1.2rem; line-height: 1.3; }
    .gains__quote img { grid-area: i; width: 56px; height: 56px; border-radius: 50%; }
    .gains__quote figcaption { grid-area: c; align-self: center; margin: 0; font-size: 0.95rem; line-height: 1.35; }

    /* The price: the plan card first in mind, the agreement one tap away */
    .price__grid { gap: 28px; }
    .price__lead { font-size: 1.05rem; }
    .deal { margin-top: 24px; padding-inline: 20px; }
    .deal__title { min-height: 60px; font-size: 1.1rem; }

    /* The rest, folded */
    .more-head { display: block; padding-top: 8px; }
    .more-head p { padding-bottom: 14px; border-bottom: 1px solid var(--color-line); font: 700 0.875rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
    .band:has(> .wrap > .more) { padding: 0; background: var(--color-bg); color: var(--color-text); }
    .band:has(> .wrap > .more) .eyebrow, .band:has(> .wrap > .more) .dot, .band:has(> .wrap > .more) .five span { color: var(--color-accent); }
    .more { border-bottom: 1px solid var(--color-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(--color-surface); color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-line); }
    .more__text b { display: block; font: 700 1.1rem/1.25 var(--font-display); letter-spacing: -0.01em; }
    .more__text small { display: block; margin-top: 3px; text-wrap: pretty; font-size: 0.95rem; line-height: 1.4; color: var(--color-text-muted); }
    .more[open] { padding-bottom: 48px; }
    .more[open] > .more__row { margin-bottom: 8px; }
    .more > .eyebrow { display: none; }
    .more > h2 { font-size: 1.9rem; }
    .person-card { color: var(--color-ink); }
    .five { border-top-color: var(--color-line); }
    .contact { margin-top: 72px; }

    /* Se siden, at the thumb (RULES.md H1–H6). Calling is in the contact 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(--color-surface); box-shadow: 0 -1px 0 var(--color-line);
      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: 1rem; 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(--color-accent); --cc-btn-primary-color: var(--color-ink); --cc-btn-primary-hover-bg: var(--color-paper); --cc-btn-primary-hover-color: var(--color-ink); }
body .floating-cookie-btn { background: var(--color-accent); color: var(--color-ink); }
body .ae-privacy-notice { margin: 0; font-size: 14px; color: var(--color-ink-muted); }
[hidden]:not([hidden="until-found"]) { display: none; }

/* The client's colours and fonts (from the draft) */
:root {
  --sw-1: #f5f4f0;
  --sw-2: #ffffff;
  --sw-3: #1c1d1f;
  --sw-4: #b8460c;
  --sw-5: #fbe3d5;
  --sw-6: #262626;
  --client-display: 'Barlow Condensed', var(--font-display);
  --client-body: 'Source Sans 3', var(--font-body);
}
.sw-1 { --sw: var(--sw-1); }
.sw-2 { --sw: var(--sw-2); }
.sw-3 { --sw: var(--sw-3); }
.sw-4 { --sw: var(--sw-4); }
.sw-5 { --sw: var(--sw-5); }
.sw-6 { --sw: var(--sw-6); }