/* ZS Editorial — design language prototype (ZS_DESIGN_SYSTEM_V1 + library intelligence).
   Isolated prototype. Not production. Every colour pair used below is computed in
   evidence/palette_v2_contrast.json (all >= 4.5:1 for text). */

@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- tokens ---------- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C0C0F; --bg-2: #131318; --surface: #17171D; --surface-2: #1E1E25; --page-bg: #0C0C0F;
  --ink: #F3F0EA; --ink-2: #CFCAC1; --ink-3: #A7A298;
  --line: rgba(243, 240, 234, .16); --line-2: rgba(243, 240, 234, .08);
  --accent: #A48FFF; --gold: #DCBC7E; --stone: #D8D2C6;
  --btn-bg: #F3F0EA; --btn-ink: #0C0C0F; --btn-bg-hover: #FFFFFF;
  --elev: 0 0 0 1px var(--line-2);
  --logo-dark: none; --logo-light: block;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F1EB; --bg-2: #EAE5DC; --surface: #FFFFFF; --surface-2: #FBF9F5; --page-bg: #F4F1EB;
  --ink: #141317; --ink-2: #46424C; --ink-3: #55505B;
  --line: rgba(20, 19, 23, .16); --line-2: rgba(20, 19, 23, .07);
  --accent: #5236D6; --gold: #654810; --stone: #55505B;
  --btn-bg: #141317; --btn-ink: #F4F1EB; --btn-bg-hover: #000000;
  --elev: 0 1px 2px rgba(20, 19, 23, .05), 0 18px 40px rgba(20, 19, 23, .07);
  --logo-dark: block; --logo-light: none;
}
/* A dark band is dark in BOTH themes: tokens are re-scoped locally, never inherited from the page theme. */
.band-dark {
  --bg: #0C0C0F; --bg-2: #131318; --surface: #17171D; --surface-2: #1E1E25;
  --ink: #F3F0EA; --ink-2: #CFCAC1; --ink-3: #A7A298;
  --line: rgba(243, 240, 234, .18); --line-2: rgba(243, 240, 234, .09);
  --accent: #A48FFF; --gold: #DCBC7E; --stone: #D8D2C6;
  --btn-bg: #F3F0EA; --btn-ink: #0C0C0F; --btn-bg-hover: #FFFFFF;
  --logo-dark: none; --logo-light: block;
  color-scheme: dark; background: var(--bg); color: var(--ink);
}
.tier-starter, .tier-starter .band-dark { --tier: var(--stone); }
.tier-growth, .tier-growth .band-dark { --tier: var(--accent); }
.tier-premium, .tier-premium .band-dark { --tier: var(--gold); }

:root {
  --f-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --f-text: "Inter", system-ui, sans-serif;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --t-display: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --t-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  --t-h2: clamp(1.8rem, 1.3rem + 2.1vw, 2.9rem);
  --t-h3: clamp(1.35rem, 1.15rem + .8vw, 1.85rem);
  --t-lead: clamp(1.15rem, 1.05rem + .35vw, 1.32rem);
  --t-body: 1.0625rem; --t-small: .9375rem; --t-meta: .8125rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 16px; --wrap: 1320px; --text: 680px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 32px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.6 var(--f-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 var(--s-4); }
h1, h2, h3 { margin: 0; font-weight: 500; }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus); border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -60px; transform: translateY(-100%); z-index: 100; background: var(--btn-bg); color: var(--btn-ink); padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; }   /* b6 fix60: the lift by its own height keeps it off-screen at any text size */
.skip:focus { top: 12px; transform: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* ---------- type ---------- */
.meta { font: 600 var(--t-meta)/1.4 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 500 var(--t-meta)/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.kicker b { color: var(--tier, var(--ink)); font-weight: 600; }
.kicker::after { content: ""; width: 48px; height: 1px; background: var(--tier, var(--line)); }
.display { font: 500 var(--t-display)/.98 var(--f-display); letter-spacing: -.035em; }
.h1 { font: 500 var(--t-h1)/1.03 var(--f-display); letter-spacing: -.03em; }
.h2 { font: 500 var(--t-h2)/1.08 var(--f-display); letter-spacing: -.02em; }
.h3 { font: 500 var(--t-h3)/1.18 var(--f-display); letter-spacing: -.01em; }
.serif { font-family: var(--f-serif); font-weight: 600; letter-spacing: -.01em; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-small); color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 1rem/1 var(--f-text); text-decoration: none; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn--primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn--primary:hover { background: var(--btn-bg-hover); }
.btn--gold { background: #DCBC7E; color: #141317; }
.btn--gold:hover { background: #E7CB93; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-2); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line); font-weight: 500; }
.link:hover { text-decoration-color: currentColor; }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line-2); }
.nav__in { display: flex; align-items: center; gap: var(--s-5); min-height: 68px; }
.nav__logo { display: flex; align-items: center; margin-right: auto; }
.nav__logo img { width: 40px; height: 40px; }
.nav__logo .on-dark { display: var(--logo-light); }
.nav__logo .on-light { display: var(--logo-dark); }
.nav__links { display: none; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); opacity: .86; font-weight: 500; font-size: .96rem; padding: 0; white-space: nowrap; overflow-wrap: normal; }   /* b6 fix60: never cut inside a word at larger text */
.nav__links a:hover, .nav__links a[aria-current="page"] { opacity: 1; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--ink); }
.nav__cta { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { border-color: var(--ink-2); }
.icon-btn svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .nav__links { display: flex; } .nav__cta { display: inline-flex; } .nav__menu { display: none; } .nav__in { flex-wrap: wrap; } }   /* b6 fix60: at 175-200 % text the CTA drops to a second row instead of squeezing the links */
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: 12px var(--gutter) 32px; display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.sheet[data-open="true"] { display: flex; }
.sheet__top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: calc(var(--s-7) + 12px); }   /* b6 fix60: the close button sits where the hamburger was (y 12), the list stays where it was */
.sheet ul { list-style: none; margin: 0 0 var(--s-7); padding: 0; border-top: 1px solid var(--line); }
.sheet li a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 500 1.6rem/1.2 var(--f-display); }

/* ---------- common sections ---------- */
.section { padding: var(--s-8) 0; }
@media (min-width: 1024px) { .section { padding: 112px 0; } }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.eyebrow-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-7); }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; }
.back:hover { color: var(--ink); }
.list-hair { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list-hair li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding: 18px 0; border-bottom: 1px solid var(--line); }
.list-hair .n { font: 600 var(--t-meta)/1.8 var(--f-text); letter-spacing: .08em; color: var(--tier, var(--ink-2)); }
.list-hair strong { font-weight: 600; color: var(--ink); }
/* Growth contents: cards (a small site of parts), not Starter's single hairline list */
.list-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 768px) { .list-cards { grid-template-columns: 1fr 1fr; } }
.list-cards li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); padding: 22px 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--elev); }
[data-theme="dark"] .list-cards li { background: var(--surface-2); }
.list-cards .n { font: 600 var(--t-meta)/1.8 var(--f-text); letter-spacing: .08em; color: var(--tier, var(--ink-2)); }
.list-cards strong { display: block; font: 500 1.15rem/1.3 var(--f-display); color: var(--ink); margin-bottom: 6px; }
.list-cards p { margin: 0; color: var(--ink-2); font-size: var(--t-small); }
.list-hair p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-small); }
.excl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.excl li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: var(--t-small); color: var(--ink-2); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.price__n { font: 500 clamp(2.4rem, 1.9rem + 2vw, 3.6rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price__u { font-size: var(--t-small); color: var(--ink-2); }
.price-note { font-size: var(--t-small); color: var(--ink-2); margin-top: 10px; }
.terms { border: 1px solid var(--line); border-radius: 20px; padding: var(--s-6); background: var(--surface); box-shadow: var(--elev); }
.terms h2 { margin-bottom: var(--s-4); }
.held { position: relative; }
.review .held::after { content: "SPEC: RC2-formulering · publiceras först med W-07 efter KF2"; display: block; margin-top: 10px; font: 600 11px/1.3 var(--f-text); letter-spacing: .04em; color: #141317; background: #FFD66B; padding: 4px 8px; border-radius: 4px; width: fit-content; }
.review [data-stopped]::after { content: "STOPPAD: " attr(data-stopped) " – beslut krävs"; display: inline-block; margin-left: 8px; font: 600 11px/1.3 var(--f-text); color: #fff; background: #B3261E; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.cta-band { padding: var(--s-9) 0; border-top: 1px solid var(--line); }
.cta-band .h1 { max-width: 14em; }
/* closing band in light theme (David's review, 2026-09-26): the page ends as it began. The same warm "Ljus och djup"
   material as the home hero, with the light coming from the left this time. The dark theme is unchanged, and the Premium
   Max page keeps its own dark bands. */
[data-theme="light"] .cta-band, [data-theme="light"] .cta-home {
  background-color: #EEE7DB;
  background-image: linear-gradient(180deg, #F4F1EB 0, rgba(244, 241, 235, 0) var(--fade), rgba(244, 241, 235, 0) calc(100% - var(--fade)), #F4F1EB 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(900px 640px at 0% 38%, rgba(255, 252, 246, .96) 0%, rgba(254, 242, 222, .78) 22%, rgba(245, 214, 172, .42) 46%, rgba(232, 190, 142, .14) 68%, rgba(226, 188, 152, 0) 84%),
    linear-gradient(260deg, #E9E1D3 0%, #ECE5D9 35%, #F1EADF 70%, #F4EDE2 100%);
  background-blend-mode: normal, multiply, normal, normal;
}
[data-theme="light"] .cta-home::before, [data-theme="light"] .cta-home .pm-hero__marks { display: none; }
[data-theme="light"] .growth-band + :is(.cta-band, .cta-home) {
  background-image: linear-gradient(180deg, #EAE5DC 0, rgba(234, 229, 220, 0) var(--fade), rgba(244, 241, 235, 0) calc(100% - var(--fade)), #F4F1EB 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(900px 640px at 0% 38%, rgba(255, 252, 246, .96) 0%, rgba(254, 242, 222, .78) 22%, rgba(245, 214, 172, .42) 46%, rgba(232, 190, 142, .14) 68%, rgba(226, 188, 152, 0) 84%),
    linear-gradient(260deg, #E9E1D3 0%, #ECE5D9 35%, #F1EADF 70%, #F4EDE2 100%); }
.foot { border-top: 1px solid var(--line); padding: var(--s-7) 0 var(--s-8); color: var(--ink-2); font-size: var(--t-small); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-5); }
.foot a { color: var(--ink-2); }
.foot img { width: 36px; height: 36px; }

/* ---------- browser frame for example screenshots ---------- */
.frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--elev); }
.frame__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--line-2); }
.frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.frame__bar span { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.cap { margin-top: 10px; font-size: var(--t-small); color: var(--ink-2); }
.cap b { color: var(--ink); font-weight: 600; }

/* ===================================================================== */
/* STARTER — restrained, one column, fast                                */
/* ===================================================================== */
.starter-hero { padding: var(--s-8) 0 var(--s-7); }
@media (min-width: 1024px) { .starter-hero { padding: var(--s-9) 0 var(--s-8); } }
.starter-hero .h1 { max-width: 12em; margin: var(--s-5) 0 var(--s-5); }
.starter-hero .lead { margin-bottom: var(--s-6); }
.starter-cols { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .starter-cols { grid-template-columns: 5fr 7fr; gap: var(--s-9); align-items: start; } }
.starter-onepage { position: relative; }
.onepage-strip { display: flex; gap: 8px; margin-top: var(--s-4); }
.onepage-strip span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.onepage-strip span:first-child { background: var(--stone); flex: 0 0 22%; }

/* ===================================================================== */
/* GROWTH — structured, multi-page, a real site map                      */
/* ===================================================================== */
.growth-hero { padding: var(--s-8) 0 var(--s-8); }
@media (min-width: 1024px) { .growth-hero { padding: var(--s-9) 0; } }
.growth-hero__grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .growth-hero__grid { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: center; } }
.growth-hero .h1 { margin: var(--s-5) 0 var(--s-5); }
.sitemap { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sitemap__main { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .sitemap { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .sitemap__main { grid-column: 1 / -1; }
}
.sitemap .frame img { aspect-ratio: 16 / 8.4; object-position: left top; }
.sitemap__main .frame img { aspect-ratio: 3 / 2; }
.sitemap figcaption { margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.sitemap figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.sitemap__count { position: absolute; top: -14px; right: 0; transform: translateY(-100%); }
.growth-band { background: var(--bg-2); }
[data-theme="dark"] .growth-band { --band: var(--surface); }
[data-theme="dark"] .growth-band .list-cards li { background: var(--surface-2); }
.growth-two { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .growth-two { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.feature-card { border: 1px solid var(--line); border-radius: 20px; padding: var(--s-6); background: var(--surface); box-shadow: var(--elev); }
.feature-card .h3 { margin: var(--s-3) 0 var(--s-3); }
.batch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: var(--s-6); }
.batch div { border-top: 2px solid var(--accent); padding-top: 10px; }
.batch b { display: block; font: 500 clamp(2.4rem, 1.8rem + 2vw, 3.6rem)/1 var(--f-display); letter-spacing: -.04em; margin-bottom: 6px; }
.batch span { font-size: 13px; color: var(--ink-2); }
.ex-row { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .ex-row { grid-template-columns: 1fr 1fr; } }

/* ===================================================================== */
/* PREMIUM MAX — cinematic, editorial, a qualitative jump                */
/* ===================================================================== */
.pm-hero__marks { position: absolute; inset: 88px var(--gutter) var(--s-6); pointer-events: none; z-index: 0; }
.pm-hero__marks i { position: absolute; width: 14px; height: 14px; }
.pm-hero__marks i::before, .pm-hero__marks i::after { content: ""; position: absolute; background: rgba(220, 188, 126, .55); }
.pm-hero__marks i::before { left: 6px; top: 0; width: 1px; height: 14px; }
.pm-hero__marks i::after { top: 6px; left: 0; height: 1px; width: 14px; }
.pm-hero__marks i:nth-child(1) { left: 0; top: 0; } .pm-hero__marks i:nth-child(2) { right: 0; top: 0; }
.pm-hero__marks i:nth-child(3) { left: 0; bottom: 0; } .pm-hero__marks i:nth-child(4) { right: 0; bottom: 0; }
@media (max-width: 767px) { .pm-hero__marks { display: none; } }
.pm-title { font: 600 clamp(3.25rem, 1.4rem + 7.4vw, 9.2rem)/.86 var(--f-serif); letter-spacing: -.03em; margin: var(--s-5) 0 var(--s-6); max-width: 9.5em; }
.pm-title em { font-style: normal; color: var(--gold); }
.pm-plate { display: grid; gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); max-width: 760px; }
@media (min-width: 768px) { .pm-plate { grid-template-columns: auto 1fr; align-items: end; gap: var(--s-7); } }
.pm-plate .price__n { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.8rem, 2rem + 2.6vw, 4.2rem); letter-spacing: -.04em; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }

.chapter { display: grid; gap: var(--s-6); }
/* same 5:7 split as the Starter and Growth heroes, so vertical edges line up from hero to chapters */
@media (min-width: 1024px) { .chapter { grid-template-columns: 5fr 7fr; gap: var(--s-8); } .chapter > .chapter__head { position: sticky; top: 104px; align-self: start; } }
.chapter__num { font: 500 clamp(3.6rem, 2.6rem + 3.4vw, 6rem)/.9 var(--f-display); color: var(--gold); letter-spacing: -.05em; }
.chapter__num::after { content: ""; display: block; width: 64px; height: 1px; background: var(--gold); margin-top: var(--s-5); }
.chapter__head .h2 { margin-top: var(--s-5); }

/* Premium chapter 01: one held cinematic still beside large serif entries (the still is held on wide screens with
   motion on; everywhere else it sits above the entries). No per-entry image swaps: entries and image are not paired. */
.pm-story { padding: var(--s-9) 0; }
.pm-story__grid { display: grid; gap: var(--s-7); }
.pm-story__stage { margin: 0; }
.pm-story__frame { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #0C0C0F; box-shadow: 0 0 0 1px var(--line); }
.pm-story__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.pm-story__note { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.pm-story__text .chapter__head { margin-bottom: var(--s-6); }
.pm-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pm-items li { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s-4); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.pm-items .n { grid-row: span 2; font: 500 var(--t-meta)/2.4 var(--f-display); letter-spacing: .08em; color: var(--gold); }
.pm-items h3 { margin: 0 0 10px; font: 600 clamp(1.7rem, 1.25rem + 1.5vw, 2.6rem)/1.04 var(--f-serif); letter-spacing: -.01em; color: var(--ink); }
.pm-items p { margin: 0; color: var(--ink-2); max-width: 34em; }
@media (min-width: 1100px) {
  .pm-story__grid { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: start; }
  .pm-story__frame { aspect-ratio: auto; height: 72vh; max-height: 720px; }
  .js:not(.no-motion) .pm-story__stage { position: sticky; top: 104px; }
}
.chapter__head p { margin-top: var(--s-4); }
.pm-band { background: var(--bg-2); }
.spread { display: grid; gap: var(--s-6); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.spread:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) { .spread { grid-template-columns: 3fr 9fr; gap: var(--s-8); } }
.spread dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: var(--t-small); align-content: start; }
.spread dt { color: var(--ink-2); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; font-size: 12.5px; padding-top: 2px; }
.spread dd { margin: 0; color: var(--ink); }
.spread .h3 { font-family: var(--f-serif); font-weight: 600; font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.8rem); letter-spacing: -.01em; margin-bottom: var(--s-5); }
.pages6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (min-width: 768px) { .pages6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pages6 figure { margin: 0; }
.pages6 img { border-radius: 8px; border: 1px solid var(--line-2); aspect-ratio: 16 / 9; object-fit: cover; object-position: top; width: 100%; }
.pages6 figcaption { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.stills { display: grid; grid-template-columns: 7fr 5fr; gap: 12px; }
.stills img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.stills .tall { grid-row: span 2; }
.stills img { aspect-ratio: 4 / 3; }
.stills .tall img { aspect-ratio: auto; height: 100%; }
.diff { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.diff th, .diff td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.diff th { color: var(--ink-2); font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.diff td:first-child { color: var(--ink-2); width: 30%; }
.diff td.pm { color: var(--ink); }
.diff td.pm b { color: var(--gold); font-weight: 600; }
@media (max-width: 640px) { .diff thead { display: none; } .diff tr { display: grid; padding: 12px 0; border-bottom: 1px solid var(--line); } .diff td { border: 0; padding: 4px 0; width: auto !important; } .diff td[data-l]::before { content: attr(data-l) " "; color: var(--ink-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; display: block; } }

/* ---------- overview (/paket) ---------- */
.ov-hero { padding: var(--s-8) 0 var(--s-7); }
.ov-hero .h1 { margin: var(--s-5) 0 var(--s-4); max-width: 13em; }
.tiers { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .tiers { grid-template-columns: 1fr 1fr 1.22fr; align-items: stretch; } }
.tier { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--elev); overflow: hidden; }
.tier__visual { position: relative; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line-2); overflow: hidden; }
.tier__visual img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tier__body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); flex: 1; }
.tier__name { display: flex; align-items: center; gap: 10px; font: 600 var(--t-meta)/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tier__name i { width: 10px; height: 10px; border-radius: 50%; background: var(--tier); }
.tier__lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tier__lines li { padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-small); color: var(--ink-2); }
.tier__lines li b { color: var(--ink); font-weight: 600; }
.tier__actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: var(--s-4); }
.tier--premium { border-color: rgba(220, 188, 126, .45); }
.tier--premium .tier__visual { aspect-ratio: 16 / 10; }
.tier--premium .tier__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 12, 15, .55), rgba(12, 12, 15, 0) 55%); }
.tier--premium .tier__head .h3 { font-family: var(--f-serif); font-weight: 600; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); }
.glyph { position: absolute; left: 14px; bottom: 12px; z-index: 1; display: flex; gap: 4px; }
.glyph span { width: 16px; height: 22px; border-radius: 3px; background: rgba(243, 240, 234, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.glyph span.dim { background: rgba(243, 240, 234, .55); }
.glyph--gold span { background: #DCBC7E; }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.cmp th, .cmp td { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { position: sticky; top: 68px; background: var(--bg); z-index: 2; font: 600 var(--t-meta)/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cmp thead th span { display: block; font: 500 14px/1.3 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--ink-2); margin-top: 4px; }
.cmp tbody th { color: var(--ink-2); font-weight: 500; width: 22%; }
.cmp td { color: var(--ink); }
@media (max-width: 767px) {
  .cmp thead { display: none; }
  .cmp tr { display: grid; grid-template-columns: 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .cmp th, .cmp td { border: 0; padding: 4px 0; }
  .cmp td::before { content: attr(data-t); display: inline-block; min-width: 108px; color: var(--ink-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
}

/* ---------- motion (tier budgets; reduced motion honoured) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.no-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* nav over the Premium hero: transparent + dark tokens at the top, theme tokens once scrolled */
.nav--over { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.nav--over.is-solid { background: var(--bg); border-bottom-color: var(--line-2); backdrop-filter: none; }
.nav .btn--ghost { min-height: 44px; }
/* drafting-sheet hairline frame — Premium Max only */
.pm-frame { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.pm-frame::before, .pm-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--gold) 26%, transparent); }
.pm-frame::before { left: 16px; } .pm-frame::after { right: 16px; }
@media (max-width: 1023px) { .pm-frame { display: none; } }

/* chapter header as a 1/3–2/3 split: numeral + title left, statement right (no empty column) */
.chapter-split { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
@media (min-width: 1024px) { .chapter-split { grid-template-columns: 4fr 8fr; gap: var(--s-8); align-items: end; } }
.chapter-split .statement { font: 500 clamp(1.3rem, 1.1rem + .9vw, 2rem)/1.3 var(--f-display); letter-spacing: -.015em; color: var(--ink-2); max-width: 28em; margin: 0; }
/* closing cinematic band */
.pm-cta { position: relative; overflow: hidden; isolation: isolate; padding: 140px 0 120px; }
.pm-cta__img { position: absolute; inset: 0; z-index: -2; }
.pm-cta__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.pm-cta::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 56px; height: 1px; background: color-mix(in srgb, #DCBC7E 45%, transparent); }
.pm-cta .pm-hero__marks { inset: 32px var(--gutter) 32px; }
@media (max-width: 767px) { .pm-cta { padding: 96px 0 88px; } }
.pm-cta .pm-title { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); max-width: 11em; }

/* hero text columns in Starter/Growth: calmer H1, stacked price plate, no wrapping buttons */
.btn { white-space: nowrap; }
.starter-hero .h1, .growth-hero .h1 { font-size: clamp(2.2rem, 1.55rem + 2.5vw, 3.55rem); line-height: 1.05; max-width: 13.5em; }
.starter-hero .pm-plate, .growth-hero .pm-plate { grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 1024px) { .starter-cols { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: center; } }
/* phones: every tier shows its visual first (Starter frame, Growth page strip, Premium film frame), then the copy */
@media (max-width: 1023px) { .starter-cols > figure { order: -1; } }
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; } }

/* mobile: Growth shows its five pages first (tier signature before text) */
.pagestrip { display: none; }
@media (max-width: 1023px) {
  .growth-hero .sitemap { display: none; }
  .pagestrip { display: block; margin: 0 0 var(--s-6); }
  /* the start page at full width (whole captured viewport, nothing cut), the four other pages as a row below */
  .pagestrip__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pagestrip__row img { display: block; width: 100%; height: auto; object-fit: cover; object-position: left top; border-radius: 6px; border: 1px solid var(--line); aspect-ratio: 16 / 8.4; }
  .pagestrip__row .main { grid-column: 1 / -1; }
  .pagestrip__row .main img { border: 0; border-radius: 0; aspect-ratio: 3 / 2; }
  .pagestrip .meta { display: block; margin-top: 10px; }
}

/* kicker wraps as one phrase on narrow screens */
.kicker { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 560px) { .kicker::after { display: none; } .kicker b { white-space: nowrap; } }

/* ===== Premium Max hero v4: copy on the page surface, cinematic media bleeding to the right edge, full height ===== */
.pm-hero4 { position: relative; }
.pm-hero4__media { position: relative; height: 32vh; min-height: 230px; max-height: 320px; overflow: hidden; background: #0C0C0F; border-bottom: 1px solid var(--gold); }
.pm-hero4__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
@media (min-width: 768px) { .pm-hero4__media img { object-position: 50% 50%; } }
.pm-hero4__text { padding: var(--s-5) 0 var(--s-7); }
.pm-hero4 .pm-title { font-size: clamp(3.1rem, 1.5rem + 5.2vw, 7.2rem); margin-top: var(--s-5); text-wrap: balance; }
.pm-hero4 .lead { color: var(--ink-2); max-width: 30em; }
/* the credit sits on its image, bottom left, on a solid dark chip */
.pm-hero4__cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; margin: 0; padding: 6px 10px; border-radius: 999px; background: rgba(12, 12, 15, .82); font-size: 12px; color: #F3F0EA; }
@media (min-width: 768px) {
  .pm-hero4 { min-height: min(100vh - 68px, 900px); display: flex; align-items: center; }
  .pm-hero4__media { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; height: auto; min-height: 0; max-height: none; border-bottom: 0; }
  .pm-hero4__grid { width: 100%; }
  .pm-hero4__text { width: 50%; padding: var(--s-8) var(--s-6) var(--s-8) 0; }
}
.js:not(.no-motion) .pm-hero4__media img, .js:not(.no-motion) .pm-story__still { animation: kb 20s ease-in-out infinite alternate; }
/* the price and the one call to action sit on a dark ticket with a gold rule: the Premium signature, in both themes */
.pm-ticket { margin-top: var(--s-6); display: grid; gap: var(--s-5); padding: 22px 24px; border-radius: 18px; background: #141419; border: 1px solid rgba(220, 188, 126, .5); }
.pm-ticket .price__n { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); letter-spacing: -.04em; }
.pm-ticket .price-note { margin: 6px 0 0; }
@media (min-width: 1100px) { .pm-ticket { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-6); } }
@media (max-width: 559px) { .pm-ticket .btn { width: 100%; justify-content: center; } }

/* Premium chapter 03: a dark comparison band with the Premium column set in the display serif */
.pm-compare { padding: var(--s-9) 0; }
.pm-vs { width: 100%; border-collapse: collapse; margin-top: var(--s-7); }
.pm-vs thead th { text-align: left; padding: 0 16px 14px 0; font: 600 var(--t-meta)/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.pm-vs thead th:last-child { color: var(--gold); }
.pm-vs tbody th, .pm-vs td { text-align: left; vertical-align: top; padding: 22px 16px 22px 0; border-bottom: 1px solid var(--line); }
.pm-vs tbody th { width: 24%; font: 500 var(--t-small)/1.5 var(--f-text); color: var(--ink-2); }
.pm-vs td { width: 30%; color: var(--ink-2); }
.pm-vs td.pm { width: 46%; font: 600 clamp(1.25rem, 1rem + .9vw, 1.7rem)/1.25 var(--f-serif); color: var(--ink); }
@media (max-width: 767px) {
  .pm-vs thead { display: none; }
  .pm-vs tr { display: grid; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .pm-vs tbody th, .pm-vs td { width: auto; border: 0; padding: 4px 0; }
  .pm-vs td::before { content: attr(data-l); display: block; font: 600 12px/1.6 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
}
/* Premium limits and terms: a typographic ledger and a letter, not chips and a card */
.pm-ledger { padding: var(--s-9) 0; }
.pm-ledger__grid { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) { .pm-ledger__grid { grid-template-columns: 1fr 1fr; } }
.pm-ledger .h2 { margin: var(--s-4) 0 var(--s-5); }
.pm-ledger__list { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 1px solid var(--gold); }
.pm-ledger__list li { padding: 16px 0; border-bottom: 1px solid var(--line); font: 500 1.25rem/1.3 var(--f-serif); color: var(--ink); }
.pm-letter { padding: var(--s-6); border-left: 1px solid var(--gold); }
.pm-letter p { color: var(--ink-2); max-width: 36em; }

/* Growth feature cards: equal columns, content pushed to the bottom (no half-empty card) */
.feature-card { display: flex; flex-direction: column; }
.growth-two { align-items: start; }
/* dark theme: light example screenshots are dimmed a little so they do not glare on near-black */
[data-theme="dark"] .frame img, [data-theme="dark"] .sitemap img, [data-theme="dark"] .pagestrip img,
[data-theme="dark"] .arc__row img, [data-theme="dark"] .tier__visual img, [data-theme="dark"] .pages6 img { filter: brightness(.95); }
/* phones: the one primary action per view is full width */
@media (max-width: 559px) { .home-actions .btn--primary, .pm-actions .btn { width: 100%; justify-content: center; } }

.feature-card .frame img { aspect-ratio: 16 / 10; object-position: 50% 78%; }

/* at >= 1024 px the page rails sit 16 px in: the edge media ends exactly on the right rail instead of running under it */
.pm-hero4__media { z-index: 10; }
/* the back link and the tier kicker: stacked on wide screens, one meta row on phones */
.pm-hero4__meta { display: grid; justify-items: start; gap: var(--s-5); }
.pm-hero4__meta .kicker { display: flex; margin: 0; }
/* Premium Max on phones (operator decision 2026-09-26 §2): a tall cinematic visual, about 58 % of the screen, with
   an editorial sheet with the title, the lead, the price and the one action overlapping its lower part.
   The sheet runs the full width under a gold hairline; on phones the whole hero is one dark band in both themes
   (round M1: a cream sheet with a dark stub read as a theming bug, an inset sheet as clipped). The price sits on a
   dark stub that closes the sheet, not on a second card. The scrim is photographic only.
   Library: inset/overlap mobile hero (Waida Slateon), mobile degradation with the card under the H1 (Aureva P22),
   bottom-anchored cinematic hero with split corners (G6-P01), gradients only as photographic scrims (G6-P02). */
@media (max-width: 767px) {
  .pm-hero4__media { height: 58svh; min-height: 360px; max-height: 620px; border-bottom: 0; z-index: 1; }
  .pm-hero4__media img { object-position: 50% 62%; }
  .pm-hero4__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none;
    background: linear-gradient(rgba(12, 12, 15, 0), rgba(12, 12, 15, .55)); }
  .pm-hero4__cap { top: 12px; right: 12px; bottom: auto; left: auto; }
  .pm-hero4__grid { position: relative; z-index: 2; margin-top: -16svh; padding: 0; }
  .pm-hero4__text { background: var(--bg); padding: 16px var(--gutter) 0; border-top: 1px solid var(--gold); }
  .pm-hero4__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pm-hero4 .back { font-size: .9rem; }
  .pm-hero4 .pm-title { font-size: clamp(2.7rem, 1.9rem + 3.6vw, 3.5rem); margin: 10px 0 12px; }
  .pm-hero4 .lead { font-size: 1.0625rem; }
  .pm-ticket { margin: 22px calc(-1 * var(--gutter)) 0; padding: 20px var(--gutter) 26px; border: 0; border-radius: 0; gap: 16px;
    background-image: linear-gradient(rgba(220, 188, 126, .45), rgba(220, 188, 126, .45)); background-repeat: no-repeat;
    background-size: calc(100% - 2 * var(--gutter)) 1px; background-position: var(--gutter) 0; }  /* the rule is inset like every other rule (M5) */
  /* chapter 01 opens with the held still at full bleed, square, straight after the sheet */
  .pm-story { padding-top: var(--s-7); }
  .pm-story__stage { margin: 0 calc(-1 * var(--gutter)); }
  .pm-story__frame { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
  .pm-story__note { padding: 0 var(--gutter); }
}
/* Premium entries: an editorial grid of numbered chapters, not a hairline list */
.pm-items { border-top: 0; display: grid; gap: var(--s-6) var(--s-7); }
@media (min-width: 768px) { .pm-items { grid-template-columns: 1fr 1fr; } }
.pm-items li { display: block; padding: 0; border-bottom: 0; }
.pm-items .n { display: grid; grid-template-columns: 2.4em 36px; align-items: center; gap: 6px; font: 600 var(--t-meta)/1 var(--f-display); letter-spacing: .1em; color: var(--gold); margin-bottom: var(--s-3); font-variant-numeric: tabular-nums; }
.pm-items .n::after { content: ""; height: 1px; background: var(--gold); }

/* footer: identity line, site links and the motion toggle; links are 44 px targets */
.foot__id { margin: 0; max-width: 46em; }
.foot__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.foot .btn { min-height: 44px; }

/* Premium Max on phones, chapter 02: each example shown as it looks on a phone (two captured phone screens, the lead
   one larger, the second offset), instead of desktop screenshots shrunk to phone width */
.phones { display: none; }
@media (max-width: 767px) {
  .pm-band .spread .frame, .pm-band .spread .pages6 { display: none; }
  .phones { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; align-items: start; margin-top: var(--s-5); }
  .phone { margin: 0; }
  .phone img { width: 100%; height: auto; aspect-ratio: 390 / 780; object-fit: cover; object-position: top; border-radius: 22px;
    border: 1px solid rgba(220, 188, 126, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
  .phone:nth-child(2) { margin-top: 56px; }
  .phone figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
}

/* Premium Max on phones, rounds M1-M2: in the light theme the hero sheet and its price stub are light (one surface;
   M1 read a cream sheet with a dark stub as a bug, M2 read an all-dark hero as "light theme not applied"). Chapter 01
   entries get serif numerals without the dash and, after the second entry, a dark strip with two phone screens of the
   examples (round M3: a stock still there read as cheap); the chapter still carries a phone screen of the Glöd example,
   so the phone page shows the delivered websites, not only mood imagery. */
@media (max-width: 767px) {
  [data-theme="light"] .pm-hero4 .pm-ticket {
    --bg: #F4F1EB; --ink: #141317; --ink-2: #46424C; --ink-3: #55505B; --gold: #654810;
    --line: rgba(20, 19, 23, .16); --line-2: rgba(20, 19, 23, .07);
    color-scheme: light; background-color: var(--bg); color: var(--ink);
    background-image: linear-gradient(rgba(101, 72, 16, .45), rgba(101, 72, 16, .45));
  }
  /* round M4: a ruled register - a numeral column, gold rules between entries - broken twice by phone screens */
  .pm-items { gap: 0; }
  .pm-items li:not(.pm-break) { display: grid; grid-template-columns: 64px 1fr; column-gap: 8px; padding: 22px 0 20px;
    border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
  .pm-items li:not(.pm-break) > * { grid-column: 2; }
  .pm-items li:not(.pm-break) > .n { grid-column: 1; grid-row: 1 / span 2; }
  .pm-items .n { display: block; margin: 0; font: 600 2.6rem/.9 var(--f-serif); letter-spacing: 0; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
  .pm-items .n::after { display: none; }
  .pm-items h3 { margin-top: 2px; }
  .pm-items .pm-break { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; padding: var(--s-6) 0 var(--s-7);
    border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
  .pm-items .pm-break img { width: 100%; height: auto; aspect-ratio: 390 / 780; object-fit: cover; object-position: top; border-radius: 18px;
    border: 1px solid rgba(220, 188, 126, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
  .pm-items .pm-break img + img { margin-top: 48px; }
  .pm-story__phone { position: absolute; left: 50%; bottom: 7%; width: 44%; height: auto; transform: translateX(-50%); aspect-ratio: 390 / 780;
    object-fit: cover; object-position: top; border-radius: 18px; border: 1px solid rgba(220, 188, 126, .6); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
}
@media (min-width: 768px) { .pm-story__phone, .pm-items .pm-break { display: none; } }
/* spacing and alignment on phones (round M3): the link under a full-width button gets air; the three Growth batch
   figures keep one baseline for their labels */
@media (max-width: 559px) { .btn + .link { margin-top: 6px; } }
.batch span { display: block; min-height: 2.6em; line-height: 1.3; }
/* theme toggle shows the current state: sun in dark theme, moon in light theme */
.icon-btn .i-moon { display: none; }
[data-theme="light"] .icon-btn .i-sun { display: none; }
[data-theme="light"] .icon-btn .i-moon { display: block; }
/* Tone changes blend (David's review, 2026-09-26: "de linjerna ska inte finnas ... där de byter nyans ska de bländas fint").
   A band with its own tone fades into the page tone inside its own padding: no hairline, no hard edge. --page-bg is the
   page's tone and is not re-scoped by .band-dark, so a dark band in light theme fades to the cream around it. The fade
   stays inside the band's padding, so light text in a dark band never sits on a lightening background. Two neighbouring
   bands of the same tone (the Premium Max chapters) do not fade between each other. */
:root { --fade: 96px; --fade-dark: 48px; }
@media (min-width: 1024px) { :root { --fade: 140px; --fade-dark: 80px; } }
/* --fade (tinted bands, light closing band) may reach under text: it always fades towards the page tone, which raises the
   contrast of that band's text in both themes. --fade-dark (dark bands in light theme) must stay inside the padding. */
.growth-band { --band: var(--bg-2); }
.growth-band { border: 0; background: linear-gradient(180deg, var(--page-bg) 0, var(--band) var(--fade), var(--band) calc(100% - var(--fade)), var(--page-bg) 100%); }
.pm-band { border: 0; }
.pm-band.band-dark { --band: var(--bg-2); } .pm-compare.band-dark, .pm-cta.band-dark { --band: var(--bg); }
/* full-width dark bands (Premium Max chapters and closing band) */
.pm-band.band-dark, .pm-compare.band-dark, .pm-cta.band-dark {
  background: linear-gradient(180deg, var(--page-bg) 0, var(--band) var(--fade-dark), var(--band) calc(100% - var(--fade-dark)), var(--page-bg) 100%); }
.pm-band.band-dark:has(+ :is(.pm-band, .pm-compare, .pm-cta).band-dark), .pm-compare.band-dark:has(+ :is(.pm-band, .pm-compare, .pm-cta).band-dark) {
  background: linear-gradient(180deg, var(--page-bg) 0, var(--band) var(--fade-dark), var(--band) 100%); }
:is(.pm-band, .pm-compare).band-dark + :is(.pm-band, .pm-compare, .pm-cta).band-dark {
  background: linear-gradient(180deg, var(--band) 0, var(--band) calc(100% - var(--fade-dark)), var(--page-bg) 100%); }
:is(.pm-band, .pm-compare).band-dark + :is(.pm-band, .pm-compare).band-dark:has(+ :is(.pm-band, .pm-compare, .pm-cta).band-dark) { background: var(--band); }
/* the closing bands carry no divider lines; the footer line goes where a closing band already ends the page */
.cta-band { border-top: 0; }
/* two tinted neighbours blend straight into each other, never through the page tone (review: "den vita linjen ... ser inte
   bra ut"): the upper band keeps its tone to its edge and the lower one starts from it */
[data-theme="light"] .growth-band:has(+ :is(.cta-band, .cta-home)) {
  background: linear-gradient(180deg, var(--page-bg) 0, var(--band) var(--fade), var(--band) 100%); }
.pm-band.band-dark:has(+ :is(.pm-compare, .pm-cta).band-dark) {
  background: linear-gradient(180deg, var(--page-bg) 0, var(--band) var(--fade-dark), var(--band) calc(100% - var(--fade-dark)), var(--bg) 100%); }
/* sections are separated by space and tone, never by divider lines (lines inside content - lists, tables, FAQ - stay) */
.foot { border-top: 0; }
/* the Premium price sheet on phones (dark theme) rises from the page tone and sinks back into it; its gold rule stays */
@media (max-width: 767px) {
  .pm-hero4 .pm-ticket { background-image: linear-gradient(rgba(220, 188, 126, .45), rgba(220, 188, 126, .45)),
      linear-gradient(180deg, var(--page-bg) 0, #141419 22px, #141419 calc(100% - 30px), var(--page-bg) 100%);
    background-repeat: no-repeat; background-size: calc(100% - 2 * var(--gutter)) 1px, 100% 100%; background-position: var(--gutter) 0, 0 0; }
  [data-theme="light"] .pm-hero4 .pm-ticket { background-image: linear-gradient(rgba(101, 72, 16, .45), rgba(101, 72, 16, .45)); background-size: calc(100% - 2 * var(--gutter)) 1px; }
}
/* Growth cards: lighter shadow, neutral numerals and rules, so the violet stays the tier's one accent (kicker, rail)
   and the component reads as editorial, not as a dashboard (rounds M1-M2) */
[data-theme="light"] .list-cards li { box-shadow: 0 1px 2px rgba(20, 19, 23, .05); }
.list-cards .n { color: var(--ink-2); }
.batch div { border-top: 1px solid var(--ink-3); }

/* verification fixes (2026-09-26): a 44 px hit area for text links without changing the layout (inline padding does not
   move line boxes; flex items get it back through the negative margin) */
.link { padding-block: 11px; margin-block: -11px; }
.js:not(.no-motion) .pm-story__still { animation: none; }
.pm-hero4__media img.is-offscreen { animation-play-state: paused; }
.cta-alt { margin: 16px 0 0; }

/* RC3 WP-MENU-ZS */
html.sheet-open { overflow: hidden; }
@media (max-height: 520px) {
  .sheet { padding-top: 12px; padding-bottom: 20px; }
  .sheet__top { margin-bottom: var(--s-4); }
  .sheet ul { margin-bottom: var(--s-4); }
  .sheet li a { padding: 11px 0; font-size: 1.35rem; }
}
.sheet li a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }
.btn.nav__cta, .sheet .btn { transition: background .2s, border-color .2s, color .2s, transform .28s cubic-bezier(.2, .7, .2, 1); }
.sheet .btn { flex: none; height: auto; padding-block: 10px; line-height: 1.2; }   /* b6 fix60: a wrapped label (larger text) keeps its padding */
.btn.nav__cta:focus-visible, .sheet .btn:focus-visible { transform: scale(1.04); }
@media (hover: hover) { .btn.nav__cta:hover, .sheet .btn:hover { transform: scale(1.04); } }
.no-motion .btn.nav__cta, .no-motion .sheet .btn, .no-motion .btn.nav__cta:hover, .no-motion .sheet .btn:hover, .no-motion .btn.nav__cta:focus-visible, .no-motion .sheet .btn:focus-visible { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .btn.nav__cta, .sheet .btn, .btn.nav__cta:hover, .sheet .btn:hover, .btn.nav__cta:focus-visible, .sheet .btn:focus-visible { transition: none !important; transform: none !important; } }
@media (forced-colors: active) { :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } }

/* RC3 WP-MISC */
.nav__logo { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }

/* b6 G5 H7: footer identity line + cookie settings */
/* the identity line wraps between its parts; each part carries its leading dot, the dot of a part that starts a line sits in the clipped margin, so a separator never ends (or starts) a line */
.foot__id { overflow: hidden; }
.foot__idin { display: block; margin-left: -.62em; }
.foot__idin .fs { display: inline-block; vertical-align: top; position: relative; padding-left: .62em; }   /* b6 fix40: the dot's room is padding, so a wrapped line of a long part starts at the edge, not under the clipped margin */
.foot__idin .dt { position: absolute; left: 0; top: 0; width: .62em; white-space: pre; }
/* the cookie settings button the consent script appends: it lives in the footer link row, looking like its neighbours */
.foot__end .zs-cookie-settings { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; color: var(--ink-2); font: inherit; }

/* b6 fix84 skip link */
/* a focused skip link never gets wider than the window minus its gutters (its focus ring was clipped at 320 px with larger text) */
.skip:focus { max-width: calc(100vw - 2 * var(--gutter)); font-size: min(1.0625rem, 8vw); }

/* b6 fix93 footer link ring */
/* the footer clips its identity line (the separator dots hang outside): the e-mail link's focus ring is drawn inside its own box */
.foot__id a:focus-visible { outline: 2px solid var(--accent, var(--gold, currentColor)); outline-offset: -2px; box-shadow: none; }

/* b6 fix95 nav */
/* b6 fix95: when the header CTA wraps to a second row (175-200 % text, 1024-1200 px) it hangs under the links on the right, not under the logo */
@media (min-width: 1024px) { .nav__in { justify-content: flex-end; } }