/* ZS R3 stream S (r3x-rest.css): the hub (/exempel) and the rest pages (kontakt, om, process, the four hemsida-*-goteborg landing pages, villkor,
   cookiepolicy, integritetspolicy, 404). ZS's own code. Loaded AFTER r3-tokens.css and r3-graft-press.css; it only ADDS r3x-s-* classes and never redefines
   an r3-, r3p- or r3a- class. These pages no longer load zs-pages.css / zs-motion.css: every rule they needed from there is rewritten below.

   CONTENTS  0 frame (hero, ask, footer plane, helpers)   1 hub: arc + caption + selector   2 hub: sticky deck of sheets   3 hub: compare + limits + prices
             4 kontakt (prompt ledger + giant e-mail)     5 om (statement, triad, honest ledger)   6 process (sticky numeral + beats)
             7 landing pages (hemsida-*)                   8 legal document (villkor, cookiepolicy, integritetspolicy)   9 404   10 reduced motion + light theme

   Rules kept: no divider line between sections (space and tone only; lines only INSIDE a ledger / table / FAQ row), hidden start states hang on html.lib-on,
   html.no-motion and no-JS show the composed page, every svh has a vh fallback, planes are flat colours first, tone elements paint their own background. */

/* ================================ 0. FRAME ================================ */
.r3x-s { --r3x-measure: 1320px; }
/* phones: the plane rhythm is the biggest cost of a long page (96 px blend + 56 px foot per plane); the foot goes to 36 px, the blend stays 96 px (tone rule) */
@media (min-width: 768px) { .r3x-s { --r3-sec: 56px; } }
@media (min-width: 1100px) { .r3x-s { --r3-sec: 64px; } }
@media (max-width: 767px) { .r3x-s { --r3-sec: 36px; } }
.r3x-s--land .r3x-s-ask__prices { display: none; }   /* b6 KO-04: the ledger above already shows the three prices; the ask keeps lead, button and mail line (as on phones) */
.r3x-s main { display: block; }
/* FIRST-SCREEN TEXT DOES NOT WAIT FOR SCRIPTS (panel 2 / FXF 6). The foundation draws the h1, label, lead and ask of a first plane by a CSS animation; the rest of the hero copy of these pages (the button row,
   kontakt's prompt ledger, the 404 copy) and the arc stage use the same CSS-only entrance here: the same rise (distance, duration, easing, stagger from the tier), no dependency on r3-core.js.
   Reduced motion and the motion toggle force the rest state (r3-tokens section 20). */
@keyframes r3x-hero-in { from { opacity: 0; transform: translateY(var(--r3-rise, 14px)); } }
@keyframes r3x-stage-in { from { opacity: 0; transform: translateY(2.5rem); } }
.lib-on .r3x-s-hero .r3-rise, .lib-on .r3x-s-nf .r3-rise { opacity: 1; transform: none; transition: none; animation: r3x-hero-in var(--r3-d-reveal, .8s) var(--r3-ease) calc(var(--i, 0) * var(--r3-stagger, 70ms)) backwards; }
.lib-on .r3x-s-hero .r3-stage-in { opacity: 1; transform: none; transition: none; animation: r3x-stage-in .7s var(--r3-ease-out) .2s backwards; }
.r3-plane.r3x-s-hero { padding-top: clamp(44px, 6.4vw, 104px); padding-bottom: clamp(16px, 2.4vw, 36px); }
.r3x-s-hero .r3-label { display: block; margin: 0 0 clamp(14px, 1.6vw, 26px); color: var(--ink-2); }
.r3x-s-h1 { margin: 0; max-width: 13em; text-wrap: balance; }
.r3x-s-hero .r3-lead { margin-top: clamp(16px, 2vw, 28px); }
/* the numeral of a tier mark: ink-2 at 600 (ink-3 at 500 measured 4.2-4.8 : 1 on small glyphs, pixel QA) */
.r3x-s .r3-tier .r3-n { color: var(--ink-2); font-weight: 600; }
.r3x-s-acts { margin-top: clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.r3x-s-acts .r3-link { display: inline-flex; align-items: center; min-height: 44px; }
/* the closing plane (graphite in both themes): the ask, then the price ledger, nothing after it but the footer */
.r3x-s-ask__q { max-width: 15em; margin: 0 0 clamp(14px, 1.6vw, 22px); }
.r3x-s-ask .r3-lead { margin-bottom: clamp(24px, 3vw, 36px); }
.r3x-s-ask__alt { margin: 18px 0 0; }
.r3x-s-ask__alt a { color: var(--ink); }
.r3x-s-ask__grid { display: grid; gap: clamp(32px, 4vw, 64px); }
/* LC-R3 round 3b-1 (length, P4-042): the ask used to wrap its question into three lines inside the left column (237 px of headline at 1440 on every page that closes with it, the price ledger
   hanging alone in the right column) and, below 1000 px, stacked the copy and the ledger into one long column (805 px at 768). From 760 px the question runs across the whole plane in two balanced
   lines, the way LC-R2 set it, and the copy (lead, button, e-mail line) and the price ledger share the row below it: same words, same prices, 40-190 px shorter. The wrapper div of the copy
   dissolves (display: contents) so label / question / lead / button / line are grid items. Up to 1199 px the half-width ledger puts each figure over its unit (the phone layout of the foundation). */
@media (min-width: 760px) {
  .r3x-s-ask__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: clamp(32px, 4vw, 64px); row-gap: 0; align-items: start; }
  .r3x-s-ask__grid > div:first-child { display: contents; }
  .r3x-s-ask__grid .r3-label { grid-column: 1 / -1; grid-row: 1; }
  .r3x-s-ask__grid .r3x-s-ask__q { grid-column: 1 / -1; grid-row: 2; max-width: 17em; margin-bottom: clamp(18px, 2vw, 30px); }
  .r3x-s-ask__grid .r3-lead { grid-column: 1; grid-row: 3; margin-bottom: clamp(18px, 2vw, 26px); align-self: start; }
  .r3x-s-ask__grid .r3-actions { grid-column: 1; grid-row: 4; }
  .r3x-s-ask__grid .r3x-s-ask__alt { grid-column: 1; grid-row: 5; }
  .r3x-s-ask__grid > div:last-child { grid-column: 2; grid-row: 3 / 7; align-self: start; }   /* the ledger spans the copy rows plus one empty flexible row, so a taller ledger never stretches the gaps between lead, button and line */
}
@media (min-width: 760px) and (max-width: 1099px) { .r3x-s-ask__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .r3x-s-ask__grid .r3-btn--xl { --px: 26px; } }
@media (min-width: 760px) { .r3x-s--land .r3x-s-ask__grid { grid-template-columns: minmax(0, 1fr); } .r3x-s--land .r3x-s-ask__grid > div:last-child { display: none; } }   /* b6 fix66: the hemsida pages hide the ledger, so the grid no longer reserves its empty column */
@media (min-width: 760px) and (max-width: 1199px) {
  .r3x-s-ask__prices a { grid-template-columns: 2.1rem minmax(0, 1fr) auto; column-gap: 10px; }
  .r3x-s-ask__prices .r3-price { flex-direction: column; align-items: flex-end; gap: 0; }
  .r3x-s-ask__prices .r3-price__u { font-size: .875rem; }
}
/* the footer is a plane: it blends from the plane above (the page tone), no hairline */
.r3x-s .foot.r3-plane { padding-top: clamp(64px, 7vw, 92px); padding-bottom: 40px; }
.r3x-s .foot .foot__nav a { min-height: 44px; }
/* a plain section label that sits above a block (replaces the old kicker + trailing rule) */
.r3x-s-lab { display: flex; align-items: baseline; gap: 12px; margin: 0 0 clamp(14px, 1.6vw, 22px); }
.r3x-s-lab .r3-n { color: var(--ink-3); }
.r3x-s-h2 { font: 500 var(--r3-t-h2)/1.08 var(--r3-f-display); letter-spacing: var(--r3-ls-h2); margin: 0; text-wrap: balance; }
.r3x-s-hang { display: grid; gap: clamp(18px, 2.4vw, 36px); }
@media (min-width: 1024px) { .r3x-s-hang { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 96px); align-items: start; } .r3x-s-hang > :first-child { position: sticky; top: calc(var(--nav-h, 68px) + 32px); } }
.r3x-s-hang + .r3x-s-hang { margin-top: clamp(56px, 6vw, 88px); }
/* LC-R3 round 3b-1 (P4-042, length): two blocks that sit on the SAME tone share one plane. A second plane of the same tone cost 140 px of blend + 64 px of padding for no visible change of
   tone (page and lift differ by 9 levels of 255); the space between the blocks is now the block gap. A nested <section> keeps its own label (aria-labelledby). */
.r3x-s-after { margin-top: clamp(56px, 6vw, 88px); }
/* a plane that follows a plane of the SAME tone has no seam to blend: its 140 px blend padding would be plain empty space, so it opens with a block gap instead (the tone rule is unchanged: every
   real change of tone, e.g. into the graphite ask, keeps its full fade) */
.r3-plane.r3x-s-same { padding-top: clamp(64px, 6.5vw, 104px); }
/* two blocks side by side (>= 700 px), each with its own heading: the landing pages carried a heading in the left column and ONE block in the right, three times in a row, so about 40 % of every
   section was empty. The duo fills the row with two blocks (each keeps its own heading, order and words: the DOM order is the reading order) and stacks below 700 px. */
.r3x-s-duo { display: grid; gap: clamp(56px, 11vw, 72px); }
@media (min-width: 760px) { .r3x-s-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 40px) clamp(32px, 5.4vw, 104px); align-items: start; } }
.r3x-s-duo > * { min-width: 0; }
/* the price ledger inside a half-width column (760-1099 px: about 340-480 px): the figure sits over its unit (the phone layout of the foundation) and the numeral column is narrower, so the row
   never has to squeeze the tier name or overflow */
@media (min-width: 760px) and (max-width: 1099px) {
  .r3x-s-duo .r3a-pricelg a { grid-template-columns: 2.1rem minmax(0, 1fr) auto; column-gap: 10px; }
  .r3x-s-duo .r3a-pricelg .r3-price { flex-direction: column; align-items: flex-end; gap: 0; }
  .r3x-s-duo .r3a-pricelg .r3-price__u { font-size: .875rem; }
}
.r3x-s-duo h2 { font: 500 var(--r3-t-h3)/1.12 var(--r3-f-display); letter-spacing: -.02em; margin: 0 0 clamp(18px, 2.2vw, 30px); text-wrap: balance; }
.r3x-s-duo .r3x-s-lead2 { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }
.r3x-s-duo .r3x-s-faq details p { font-size: 1rem; }
.r3x-s-hang h2 { font: 500 var(--r3-t-h3)/1.12 var(--r3-f-display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.r3x-s-hang h2 .r3-n { display: block; margin-bottom: .9em; }

/* ================================ 1. HUB: ARC + CAPTION + SELECTOR ================================ */
/* G-56 (template 56 Carousel): a bowl of tilted cards on a stage glow, the outer cards soft. G-28: the soft state is a pre-blurred 40 px derivative laid over the
   sharp card (opacity only, no CSS blur, nothing paints on a filter). Slots: -2 .. 2 visible, +-3 parked (opacity 0). Measured geometry of the reference board
   (live52_56/56_Carousel_s01.jpg): seven portrait cards, centre sharp, step about one card width, outer cards cut by the frame, glow under the bowl. */
.r3x-s-hero--c { text-align: center; }
.r3-plane.r3x-s-hero--c { padding-top: clamp(26px, 3.2vw, 48px); }
.r3x-s-hero--c .r3-label { margin-bottom: clamp(10px, 1.1vw, 16px); }
.r3x-s-hero--c .r3x-s-h1 { margin-inline: auto; font-size: clamp(2.4rem, min(1.1rem + 3.9vw, 8.6vh), 4.25rem); line-height: .99; letter-spacing: -.036em; }
.r3x-s-hero--c .r3-lead { margin-inline: auto; max-width: 56em; margin-top: clamp(12px, 1.4vw, 20px); }
@supports (height: 1svh) { .r3x-s-hero--c .r3x-s-h1 { font-size: clamp(min(2.4rem, 12vw), min(1.1rem + 3.9vw, 8.6svh), 4.25rem); } }
.r3x-s-stage { --cw: clamp(150px, min(16.4vw, 27vh), 244px); position: relative; margin-top: clamp(18px, 2.4vw, 34px); }
@supports (height: 1svh) { .r3x-s-stage { --cw: clamp(150px, min(16.4vw, 27svh), 244px); } }
.r3x-s-arc { position: relative; height: calc(var(--cw) * 1.25 + 18px); perspective: 1500px; perspective-origin: 50% 38%; }
.r3x-s-arc::before { content: ""; position: absolute; left: 50%; bottom: -16%; width: 86%; height: 70%; translate: -50% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--r3x-gr, 216), var(--r3x-gg, 210), var(--r3x-gb, 198), var(--r3x-ga, .24)), rgba(var(--r3x-gr, 216), var(--r3x-gg, 210), var(--r3x-gb, 198), 0)); }
/* the glow under the bowl takes the tier of the card in the middle (neutral stone / violet / gold; the script sets data-tier on the stage); the three channels are registered so the colour glides */
@property --r3x-gr { syntax: "<number>"; inherits: true; initial-value: 216; }
@property --r3x-gg { syntax: "<number>"; inherits: true; initial-value: 210; }
@property --r3x-gb { syntax: "<number>"; inherits: true; initial-value: 198; }
.r3x-s-stage { transition: --r3x-gr var(--r3-d-glide, .6s) var(--r3-ease, ease), --r3x-gg var(--r3-d-glide, .6s) var(--r3-ease, ease), --r3x-gb var(--r3-d-glide, .6s) var(--r3-ease, ease); }
.r3x-s-stage[data-tier="starter"] { --r3x-gr: 216; --r3x-gg: 210; --r3x-gb: 198; }
.r3x-s-stage[data-tier="growth"] { --r3x-gr: 148; --r3x-gg: 126; --r3x-gb: 255; --r3x-ga: .27; }
.r3x-s-stage[data-tier="premium"] { --r3x-gr: 220; --r3x-gg: 176; --r3x-gb: 96; --r3x-ga: .3; }
.no-motion .r3x-s-stage { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .r3x-s-stage { transition: none !important; } }
.r3x-s-arc__c { --k: 0; position: absolute; left: 50%; top: 0; width: var(--cw); margin-left: calc(var(--cw) / -2); display: block; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden; background: #1A1A21;
  aspect-ratio: 4 / 5; isolation: isolate;
  transform: translate3d(calc(var(--k) * var(--cw) * 1.04), calc(var(--k) * var(--k) * 18px), calc(var(--k) * var(--k) * -70px)) rotateY(calc(var(--k) * -12deg));
  opacity: min(1, max(0, calc(1.22 - (var(--k) * var(--k) - 1) * .2))); z-index: calc(10 - var(--k) * var(--k));
  box-shadow: 0 0 0 1px var(--r3x-ring, rgba(243, 240, 234, .14)), 0 40px 70px -30px rgba(0, 0, 0, .8); }
/* LC-R3 round 3b-1 (P4-004, P4-036): slots +-1 are sharp and opaque, slots +-2 dissolve INTO THE PAGE TONE by opacity (.62), not into a pale pane: a light site such as Salong Lumen or Studio Alina
   used to sit at slot 2 fully opaque under a 39 % haze and read as a white veil on the dark page, a dark site (Glöd) as a black cut-out. Fading to the tone the card stands on works on ink and
   on cream alike. The hairline of a card carries its tier in the dark theme (stone / violet / gold), so the dark Premium Max cards keep a visible edge on the dark page. */
:root:not([data-theme="light"]) .r3x-s-arc__c.tier-starter { --r3x-ring: rgba(216, 210, 198, .22); }
:root:not([data-theme="light"]) .r3x-s-arc__c.tier-growth { --r3x-ring: rgba(164, 143, 255, .38); }
:root:not([data-theme="light"]) .r3x-s-arc__c.tier-premium { --r3x-ring: rgba(220, 188, 126, .5); }
.r3x-s-arc.is-live .r3x-s-arc__c { transition: transform var(--r3-d-glide) var(--r3-ease), opacity var(--r3-d-glide) var(--r3-ease); }
.r3x-s-arc__img { position: absolute; inset: 0; display: block; }
.r3x-s-arc__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* F-52 (panel 3): the outer cards (slot +-2) read as pale ghost veils. Cause: the pre-blurred derivative was laid over the sharp card at .78 (a light site such as Salong Lumen turned into a
   frosted grey pane) and the card was dimmed by only 20 %. The depth of field now needs a lighter hand: the blur covers about 40 % at slot +-2 (the sharp type still reads through, the card
   is clearly a page and not a pane of glass) and the receding cards sink toward the stage by shade (.32 at +-2, .08 at +-1) instead of by haze. */
.r3x-s-soft { position: absolute; inset: 0; opacity: min(1, max(0, calc((var(--k) * var(--k) - 1) * .13))); }
.r3x-s-arc.is-live .r3x-s-soft { transition: opacity var(--r3-d-glide) var(--r3-ease); }
.r3x-s-soft { image-rendering: auto; }
.r3x-s-arc__c::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #0C0C0F; pointer-events: none; opacity: calc(var(--k) * var(--k) * .1); }
.r3x-s-arc.is-live .r3x-s-arc__c::after { transition: opacity var(--r3-d-glide) var(--r3-ease); }
.r3x-s-arc__c:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }
.r3x-s-arc__c { scroll-margin-top: 24px; }   /* the bowl tilts its outer cards up by a few px: a focused card is brought clear of the sticky header (scroll-padding + this) */
/* the label plate is for the phone rail (no blur, no hover): solid fill, so contrast never depends on the picture */
.r3x-s-arc__lab { display: none; }
/* caption of the card in the middle: tier, name, the existing caption line, price, the two links. Panels share one grid cell and crossfade. */
.r3x-s-caps { display: grid; width: min(1120px, calc(100% - 2 * var(--gutter, 16px))); margin: clamp(16px, 2vw, 28px) auto 0; text-align: left; }
.r3x-s-cap { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(min(14em, 100%), 1fr) auto; gap: 10px clamp(28px, 5vw, 80px); align-items: end; opacity: 0; visibility: hidden;
  transition: opacity .12s var(--r3-ease-io), visibility 0s .12s; }   /* b6 fix66: the outgoing caption is gone before the incoming one appears (two captions were printed over each other for ~190 ms) */
.r3x-s-cap.is-on { opacity: 1; visibility: visible; transition: opacity .23s var(--r3-ease-in) .12s, visibility 0s 0s; }
.r3x-s-cap__id { display: grid; gap: 8px; min-width: 0; }
.r3x-s-cap__name { margin: 0; font: 500 clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem)/1.05 var(--r3-f-display); letter-spacing: -.028em; color: var(--ink); }
.tier-premium .r3x-s-cap__name, .tier-premium .r3x-s-sheet__name { font-family: var(--r3-f-serif); font-weight: 600; letter-spacing: -.014em; }
.r3x-s-cap__t { margin: 0; color: var(--ink-2); font: 400 var(--r3-t-small)/1.45 var(--r3-f-text); }
.r3x-s-cap__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 22px; }
.r3x-s-cap__buy .r3-price { flex: none; }
.r3x-s-cap__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.r3x-s-cap__acts .r3-link { display: inline-flex; align-items: center; min-height: 44px; }
/* selector: the six names, the one in the middle lit; prev / next / Pausa on the same row */
.r3x-s-sel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin-top: clamp(10px, 1.2vw, 18px); }
.r3x-s-sel__b { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 .9375rem/1 var(--r3-f-text); cursor: pointer;
  transition: background var(--r3-d-ui) var(--r3-ease-out), color var(--r3-d-ui) var(--r3-ease-out); }
.r3x-s-sel__b:hover { color: var(--ink); }
.r3x-s-sel__b[aria-current="true"] { background: var(--r3-wash); color: var(--ink); }
.r3x-s-sel__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.r3x-s-sel__b .r3-tier__bar i { width: 9px; height: 3px; }
.r3x-s-ctl { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 .8125rem/1 var(--r3-f-text); cursor: pointer; }
.r3x-s-ctl:hover { border-color: var(--ink-2); }
.r3x-s-ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.r3x-s-ctl[hidden] { display: none; }
/* below 1100 px: no 3D, a scroll-snap rail (G-56 phone answer); each card carries its own label plate */
@media (max-width: 1099px) {
  .r3x-s-stage { --cw: min(64vw, 250px); margin-top: 28px; }
  .r3x-s-arc { height: auto; perspective: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 16px); padding: 4px var(--gutter, 16px) 18px; scrollbar-width: none; text-align: left; overscroll-behavior-x: contain; }
  .r3x-s-arc::-webkit-scrollbar, .r3x-s-arc::before { display: none; }
  /* the rail dissolves into the page tone at both ends (edge bleed, G-78): no card content ever meets the window edge */
  .r3x-s-arc { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent calc(100% - 12px)); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent calc(100% - 12px)); }
  .r3x-s-arc__c { position: relative; left: auto; top: auto; margin: 0; flex: 0 0 var(--cw); width: var(--cw); aspect-ratio: auto; transform: none !important; opacity: 1 !important; scroll-snap-align: start; z-index: auto; display: flex; flex-direction: column; background: var(--r3x-plate, #17171D); }
  /* F-52 root cause on tablets and phones: this rule used to read ".r3x-s-soft { display: none }" (specificity 0,1,0) and lost to ".r3x-s-arc__img img { display: block }" (0,1,1), so the arc's
     blurred depth-of-field copy stayed ON in the rail, at the opacity of the card's (hidden) bowl slot: Gloed (slot 2) hazy, Studio Alina (slot 3, parked) wiped out completely and Salong Lumen
     (slot -2) hazy, a pale frosted pane instead of a site, on every phone and tablet rail. It is a desktop-bowl device only: out of the rail, with a selector that wins. */
  .r3x-s-arc__c::after, .r3x-s-arc__img .r3x-s-soft { display: none; }
  .r3x-s-arc__img { position: relative; inset: auto; aspect-ratio: 4 / 5; flex: none; }
  .r3x-s-arc__lab { display: grid; gap: 6px; padding: 14px 14px 16px; background: var(--r3x-plate, #17171D); color: #F3F0EA; --ink: #F3F0EA; --ink-2: #CFCAC1; --ink-3: #A7A298; --line: rgba(243, 240, 234, .18); --accent: #A48FFF; --gold: #DCBC7E; --stone: #D8D2C6; }
  .tier-starter .r3x-s-arc__lab { --tier: #D8D2C6; } .tier-growth .r3x-s-arc__lab { --tier: #A48FFF; } .tier-premium .r3x-s-arc__lab { --tier: #DCBC7E; }
  .r3x-s-arc__lab b { font: 500 1.3rem/1.1 var(--r3-f-display); letter-spacing: -.02em; }
  .tier-premium .r3x-s-arc__lab b { font-family: var(--r3-f-serif); font-weight: 600; letter-spacing: -.01em; }
  .r3x-s-arc__lab .r3-tier { font-size: .8125rem; color: #CFCAC1; }
  .r3x-s-arc__lab .r3-price__n { font-size: 1.9rem; color: #F3F0EA; }
  .r3x-s-arc__lab .r3-price__u { color: #CFCAC1; font-size: .875rem; }
  .r3x-s-caps, .r3x-s-sel { display: none; }
}

/* LC-R3 round 3b-1 (P4-102): on tablets (600-1099 px) the rail used a fixed 250 px card, so the window cut the third card (768) or the fourth (1024) through the middle of its price ("kr/mån exkl. mom")
   with no cue. Now whole cards fit and the next card peeks by a deliberate sliver that the edge fade dissolves (the cue that the strip moves): 2 cards at 600-759 px, 3 at 760-959, 4 at 960-1099
   (the three tiers of one trade are the first three cards, so the ladder is visible whole at 768). cw = (window - left gutter - the gaps - the 40 px sliver) / the number of whole cards. */
@media (min-width: 600px) and (max-width: 1099px) { .r3x-s-stage { --r3x-peek: 40px; --r3x-gap: 12px; } }
@media (min-width: 600px) and (max-width: 759px) { .r3x-s-stage { --cw: calc((100vw - var(--gutter, 16px) - 2 * var(--r3x-gap) - var(--r3x-peek)) / 2); } }
@media (min-width: 760px) and (max-width: 959px) { .r3x-s-stage { --cw: calc((100vw - var(--gutter, 16px) - 3 * var(--r3x-gap) - var(--r3x-peek)) / 3); } }
@media (min-width: 960px) and (max-width: 1099px) { .r3x-s-stage { --cw: calc((100vw - var(--gutter, 16px) - 4 * var(--r3x-gap) - var(--r3x-peek)) / 4); } }

/* short windows: a desktop window 620 px high keeps the caption (price + link) inside the first screen; a portrait phone 664 px high gets a smaller rail card; a landscape phone puts the text and the rail side by side */
@media (min-width: 1100px) and (max-height: 700px) {
  .r3-plane.r3x-s-hero--c { padding-top: 10px; }
  .r3x-s-hero--c .r3-label { margin-bottom: 6px; }
  .r3x-s-hero--c .r3-lead { margin-top: 8px; font-size: 1.0625rem; }
  .r3x-s-stage { --cw: clamp(118px, 23vh, 190px); margin-top: 10px; }
  .r3x-s-caps { margin-top: 8px; } .r3x-s-sel { margin-top: 4px; }
  .r3x-s-cap__name { font-size: 1.7rem; }
}
@media (max-width: 1099px) and (min-height: 521px) and (max-height: 700px) { .r3x-s-stage { --cw: min(50vw, 190px); margin-top: 18px; } .r3x-s-hero--c .r3-lead { font-size: 1.0625rem; } }
@media (max-width: 1099px) and (max-height: 520px) and (orientation: landscape) {
  .r3-plane.r3x-s-hero--c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; column-gap: 8px; padding-top: 10px; padding-bottom: 12px; text-align: left; }
  .r3x-s-hero--c .wrap { padding-right: 8px; }
  .r3x-s-hero--c .r3x-s-h1 { margin-inline: 0; font-size: 2rem; }
  .r3x-s-hero--c .r3-lead { margin-inline: 0; font-size: 1rem; }
  .r3x-s-stage { --cw: min(24vw, 150px); margin-top: 0; min-width: 0; }
  .r3x-s-arc { margin-inline: 0; padding-inline: 0 var(--gutter, 16px); padding-top: 0; padding-bottom: 6px; }
}

/* ================================ 2. HUB: THE SIX EXAMPLES AS A 3 x 2 GRID ================================ */
/* Panel 2: six identical stacked sheets made the page 75 % longer than LC-R2 and took 3.5 screens to compare six examples. Back to the LC-R2 shape, built better: one row of three per
   trade, Starter | Growth | Premium Max side by side (so "same trade, three tiers" is true at a glance), each card in its tier tone (paper / graphite / walnut) with the browser frame, the name,
   the existing caption, the three facts, the price and the two links. The three cards of a row share one subgrid, so every fact, price and button sits on one line. There is no sticky
   stack any more: nothing can cover a keyboard-focused link. Phones keep the compact card (thumbnail beside the name); 700-999 px keeps the wide card (frame left, facts right). */
.r3x-s-dkh { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(22px, 2.8vw, 40px); }
.r3x-s-dkh .r3x-s-h2 .r3-n { margin-right: .35em; }
.r3x-s-grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.r3x-s-sheet { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0;
  padding: 0 clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 24px); border-radius: 20px; background-color: var(--r3-c); color: var(--ink);
  box-shadow: 0 26px 56px -34px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-2); }
.r3x-s-sheet__tab { display: flex; align-items: center; gap: 12px; min-height: 26px; padding-top: 18px; margin-bottom: clamp(12px, 1.2vw, 18px); }
.r3x-s-sheet__tab .r3-tier { font-size: .8125rem; letter-spacing: 0; }
.r3x-s-sheet__tab .r3-tier__bar i { width: 13px; height: 3px; }
.r3x-s-sheet .r3-dev { align-self: start; }
.r3x-s-sheet .r3-dev__view { aspect-ratio: 16 / 10; }
.r3x-s-sheet .r3-dev__page { position: relative; transform: none; }
.r3x-s-devlink { display: block; border-radius: var(--r3-radius); text-decoration: none; color: inherit; }
.r3x-s-devlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; box-shadow: none; }
@media (hover: hover) { .r3x-s-devlink .r3-dev { transition: transform .5s var(--r3-ease-out), box-shadow .5s var(--r3-ease-out); } .r3x-s-devlink:hover .r3-dev { transform: translateY(-4px); } }
.r3x-s-sheet__body { display: grid; gap: 14px; align-content: start; min-width: 0; padding-top: 18px; }
.r3x-s-sheet__name { margin: 0; font: 500 clamp(1.7rem, 1.2rem + 1.3vw, 2.5rem)/1.04 var(--r3-f-display); letter-spacing: -.03em; text-wrap: balance; }
.r3x-s-sheet__cap { margin: 0; color: var(--ink-2); font: 400 var(--r3-t-small)/1.5 var(--r3-f-text); }
.r3x-s-sheet .r3-spec { padding: 12px 0 4px; grid-template-columns: minmax(6.2rem, auto) 1fr; gap: 6px 16px; }
.r3x-s-sheet .r3-price { margin: 2px 0 0; }
.r3x-s-sheet .r3-price__n { font-size: clamp(2.9rem, 2.2rem + 1.7vw, 4.1rem); }
.r3x-s-sheet__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.r3x-s-sheet__acts .r3-link { display: inline-flex; align-items: center; min-height: 44px; }
.r3x-s-between { display: flex; justify-content: center; margin: clamp(26px, 3vw, 44px) 0 0; }
.r3x-s-sheet__thumb { display: none; }
/* the paper card carries a light device shadow (the dark one reads as a smudge on cream) */
.r3-tone-paper .r3x-s-sheet .r3-dev, .r3x-s-sheet.r3-tone-paper .r3-dev { box-shadow: 0 0 0 1px rgba(20, 19, 23, .16), 0 22px 40px -26px rgba(20, 19, 23, .5); }
/* wide (>= 1000 px): three cards per trade on one subgrid. The card's rows are: tier mark, frame, name, caption, facts, price, links; the body wrapper dissolves so its children join the grid */
@media (min-width: 1000px) {
  .r3x-s-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .r3x-s-sheet__body { display: contents; }
  .r3x-s-sheet__name { margin-top: 20px; }
  .r3x-s-sheet__cap { margin-top: 8px; }
  .r3x-s-sheet .r3-spec { margin-top: 10px; }
  .r3x-s-sheet .r3-price { margin-top: 8px; }
  .r3x-s-sheet__acts { margin-top: 6px; flex-direction: column; align-items: flex-start; align-self: end; }
  .r3x-s-sheet__acts .r3-btn { max-width: 100%; }
}
@supports (grid-template-rows: subgrid) { @media (min-width: 1000px) { .r3x-s-grid > .r3x-s-sheet { grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; } } }
@media (min-width: 700px) and (max-width: 999px) {
  .r3x-s-sheet { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 26px; align-content: stretch; }
  .r3x-s-sheet__tab { grid-column: 1 / -1; }
  .r3x-s-sheet__body { align-content: center; padding-top: 0; }
}
/* phones: the line-up above already shows each site as a phone sees it, so a card is compact: a phone thumbnail beside the name, then the facts, price and links */
@media (max-width: 699px) {
  .r3x-s-devlink { display: none; }
  .r3x-s-sheet { padding-bottom: 20px; border-radius: 18px; }
  .r3x-s-sheet__tab { padding-top: 16px; margin-bottom: 4px; }
  .r3x-s-sheet__body { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; padding-top: 4px; align-content: start; }
  .r3x-s-sheet__thumb { display: block; grid-row: 1 / span 2; width: 84px; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
  .r3x-s-sheet__name { align-self: end; font-size: 1.8rem; }
  .r3x-s-sheet__cap { align-self: start; grid-column: 2; }
  .r3x-s-sheet__body > .r3-spec, .r3x-s-sheet__body > .r3-price, .r3x-s-sheet__body > .r3x-s-sheet__acts { grid-column: 1 / -1; }
  .r3x-s-sheet .r3-spec { padding: 4px 0; gap: 6px 18px; }
  .r3x-s-sheet .r3-price { margin: 2px 0 0; }
  .r3x-s-sheet .r3-price__n { font-size: clamp(2.6rem, 2.2rem + 1.5vw, 3.4rem); }
}

/* ================================ 3. HUB: COMPARE + LIMITS + PRICES ================================ */
.r3x-s-cmp { width: 100%; }
.r3x-s-cmp thead th { vertical-align: bottom; }
.r3x-s-cmp thead th:first-child { width: 22%; }
.r3x-s-th { display: grid; gap: 10px; }
.r3x-s-th .r3-tier { font-size: 1rem; }
.r3x-s-th .r3-price__n { font-size: 2.2rem; }
.r3x-s-th .r3-price__u { font-size: .875rem; }
.r3x-s-cmp td { font-size: .9375rem; line-height: 1.5; }
@media (min-width: 768px) { .r3x-s-cmp tbody td.r3x-s-ptint { background: var(--r3-wash); } .r3x-s-cmp .r3x-s-ptint, .r3x-s-cmp thead th:last-child { padding-left: 18px; } }
@media (max-width: 767px) {
  .r3x-s-cmp tbody tr { gap: 1px; padding: 14px 0; }
  .r3x-s-cmp tbody th { font: 600 .9375rem/1.3 var(--r3-f-display); color: var(--ink); padding-bottom: 4px; }
  .r3x-s-cmp td[data-l] { display: grid; grid-template-columns: max(min(6.6rem, 105.6px), 3.6rem) minmax(0, 1fr); gap: 8px; padding: 4px 10px; border-radius: 8px; color: var(--ink); }
  .r3x-s-cmp td[data-l]::before { display: block; font: 600 .8125rem/1.7 var(--r3-f-text); color: var(--ink-2); }
  .r3x-s-cmp td[data-l="Premium Max"] { background: var(--r3-wash); }
}
.r3x-s-cmpnote { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px 32px; margin-top: clamp(28px, 3vw, 44px); }
.r3x-s-cmpnote .r3-limits { display: block; max-width: none; flex: 1 1 40em; }   /* one running sentence, as in LC-R2 */
.r3-limits > strong { margin-right: 4px; }
/* the foundation's separator dot hangs OUTSIDE the left edge when an item wraps to a new line (FOUNDATION_REQUEST in the report). Here the line is LC-R2's own sentence again, with its real
   colon, commas and full stop ("Ingår inte i något paket: e-handel, eget bokningssystem, ... på plats."), so there is no separator to draw. */
.r3-limits > span + span::before { content: none; }

.r3x-s-cmpnote .r3-link { display: inline-flex; align-items: center; min-height: 44px; flex: none; }

/* ================================ 4. KONTAKT ================================ */
/* W-90: the least exciting page gets art direction. A numbered prompt ledger (the three things to write, from the one existing sentence), the address as the largest
   element on the page (W-85 scale), the existing button. No form (no backend): the rows are prompts, not inputs. */
.r3x-s-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); }
@media (min-width: 1024px) { .r3x-s-contact { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(48px, 6vw, 112px); align-items: start; } }
.r3x-s-prompt { display: grid; gap: 6px; }
.r3x-s-prompt__h { margin: 0 0 clamp(8px, 1vw, 16px); font: 500 var(--r3-t-h3)/1.12 var(--r3-f-display); letter-spacing: -.02em; }
.r3x-s-prompt__w { margin: 0; font: 400 clamp(3.4rem, 2rem + 5.4vw, 6.6rem)/.92 var(--r3-f-serif); letter-spacing: -.034em; color: var(--ink); }
.r3x-s-prompt .r3a-ledger { margin-top: clamp(14px, 1.6vw, 24px); }
.r3x-s-prompt .r3a-ledger__t { font: 500 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.15 var(--r3-f-display); letter-spacing: -.02em; }
.r3x-s-prompt .r3a-ledger > li { padding-block: clamp(14px, 1rem + .5vw, 22px); }
.r3x-s-prompt__end { margin: clamp(16px, 2vw, 26px) 0 0; color: var(--ink-2); max-width: 30em; }
.r3x-s-spread { position: relative; isolation: isolate; overflow: clip; padding-bottom: clamp(40px, 6vw, 80px); }
.r3x-s-spread__lab { display: block; margin-bottom: clamp(10px, 1.2vw, 18px); }
.r3x-s-spread .r3a-signoff { overflow: visible; padding-bottom: 0; }
.r3x-s-spread .r3a-signoff__mail { font-size: var(--r3-t-mail); line-height: 1.15; text-decoration-color: var(--line); text-underline-offset: .14em; text-decoration-thickness: 2px; }
.r3x-s-spread .r3a-signoff__mail:hover, .r3x-s-spread .r3a-signoff__mail:focus-visible { text-decoration-color: var(--gold); }
.r3x-s-spread__cols { display: grid; gap: 18px clamp(32px, 5vw, 96px); margin-top: clamp(28px, 4vw, 56px); max-width: 66rem; }
@media (min-width: 900px) { .r3x-s-spread__cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.r3x-s-spread__cols p { margin: 0; font: 400 clamp(1.0625rem, 1rem + .3vw, 1.2rem)/1.5 var(--r3-f-text); color: var(--ink-2); }
/* F-39 (panel 3): the ghost word "Göteborg" that lay behind the two body paragraphs and the e-mail is gone (a ghost behind body copy costs contrast and repeats a house-style device that four
   example sites and the home page also use). The giant e-mail address stays the one large element of the page. */
.r3x-s-flow { font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.55 var(--r3-f-text); color: var(--ink-2); max-width: 36em; }
.r3x-s-flow p { margin: 0 0 1em; }
.r3x-s-flow a { color: var(--ink); }

/* ================================ 5. OM ================================ */
.r3x-s-statement { position: relative; isolation: isolate; }
.r3x-s-statement .r3-ink { font-size: clamp(1.75rem, 1.05rem + 2.9vw, 3.6rem); max-width: 22em; }
.r3x-s-statement .r3-ink p { margin: 0 0 .7em; }
/* names inside the scroll-ink statement: bold + a gold underline (a gold WORD measured 2.8 : 1 in the dimmed ink state, pixel QA; the underline is decoration) */
.r3x-s-statement .r3-ink b { font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .14em; }
.r3x-s-statement .r3-ink .w { transition: opacity .15s linear; }
/* F-39 (panel 3): the ghost word "Hantverk" under the statement is gone; the room it needed (up to 190 px of extra bottom padding) goes with it, the plane keeps the foundation's own rhythm. */
.r3x-s-statement .r3x-s-lab { margin-bottom: clamp(20px, 2.4vw, 36px); }
.r3x-s-triad .r3a-triad__t { font-size: min(clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem), 16cqi); }
.r3x-s-triad .r3a-triad__d { font-size: 1rem; max-width: 24em; }
.r3x-s-triad { margin-top: clamp(24px, 3vw, 40px); }
.r3x-s-honest { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); counter-reset: h; }
.r3x-s-honest > li { display: grid; grid-template-columns: min(3.4rem, 54px) minmax(0, 1fr); column-gap: 10px; padding: clamp(16px, 1.05rem + .6vw, 24px) 0; border-bottom: 1px solid var(--line-2); font: 400 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1.4 var(--r3-f-display); letter-spacing: -.012em; color: var(--ink); }
.r3x-s-honest > li > .r3-n { padding-top: .5em; }

/* ================================ 6. PROCESS ================================ */
/* W-99 / W-15: the numeral of the step being read sits pinned on the left (odometer, one --i from r3-core's beat sync), the six steps scroll on the right.
   Phones: no pin, the beats are a numbered ledger. The pin is --i driven, so a static page shows step 01 and every step is on the page. */
/* the steps follow the hero on the SAME tone (page): there is no seam to blend, so the plane does not need its 140 px blend as padding - the first screen shows the hero AND the first steps (it showed one step and 170 px of black) */
.r3-plane.r3x-s-flush { padding-top: clamp(20px, 3vw, 44px); }
.r3x-s-proc { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 1100px) { .r3x-s-proc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 110px); align-items: start; } }
.r3x-s-proc__side { display: grid; gap: 22px; align-content: start; }
.r3x-s-proc__side h2 { margin: 0; font: 500 var(--r3-t-h3)/1.12 var(--r3-f-display); letter-spacing: -.02em; }
.r3x-s-proc__pin { display: none; }
@media (min-width: 1100px) {
  .r3x-s-proc__side { position: sticky; top: calc(var(--nav-h, 68px) + 40px); }
  .r3x-s-proc__pin { display: grid; gap: 14px; }
}
.r3x-s-odo { --r3x-fs: clamp(7rem, 4rem + 9vw, 13rem); height: var(--r3x-fs); overflow: hidden; font: 400 var(--r3x-fs)/1 var(--r3-f-serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; color: var(--ink); }
.r3x-s-odo > span { display: block; height: var(--r3x-fs); transform: translateY(calc(var(--i, 0) * var(--r3x-fs) * -1)); transition: transform .6s var(--r3-ease); }
.r3x-s-odo > span > span { display: block; height: var(--r3x-fs); }
.r3x-s-proc__rail { display: flex; align-items: center; gap: 14px; font: 500 .9375rem/1 var(--r3-f-display); letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: lining-nums proportional-nums; }
.r3x-s-proc__rail i { position: relative; width: clamp(80px, 12vw, 160px); height: 2px; background: var(--line); }
.r3x-s-proc__rail i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(calc((var(--i, 0) + 1) / var(--n, 6))); transition: transform .6s var(--r3-ease); }
.r3x-s-proc .r3-beats { counter-reset: none; }
.r3x-s-proc .r3-beat { padding: clamp(22px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--line-2); }
.r3x-s-proc .r3-beat:first-child { border-top: 1px solid var(--line); }
.r3x-s-proc .r3-beat h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); }
.r3x-s-proc .r3-beat p { font-size: 1.0625rem; color: var(--ink-2); max-width: 30em; }
.r3x-s-proc .r3-beat::before { background: var(--gold); }
@media (min-width: 1100px) { .r3x-s-proc .r3-beat { min-height: 27vh; align-content: center; } .r3x-s-proc .r3-beats { padding-bottom: 14vh; } }
/* LC-R3 round 3b-1 (panel 4: P4-009, P4-042, P4-078). THE STATIC STATE OF THE PIN. Root cause of the 3530 px page: the six steps keep 27 vh each (+ 14 vh of runway at the end) so that the sticky
   numeral has time to count 01 -> 06, but with no motion (reduced motion, the motion toggle OFF, no script) the numeral never counts: it sits on "01" above an empty left column, and the 27 vh
   boxes are dead air (about 1500 px of the page). Without the pin there is nothing to wait for, so the static page lets each step carry its OWN numeral: a three-column ledger (two rows), the
   serif numeral of the odometer above each title, a quiet rule per step (a line INSIDE a list, allowed), the heading on its own row. The live page (motion on, >= 1100 px) is untouched. */
@media (min-width: 1100px) {
  .no-motion .r3x-s-proc, html:not(.js) .r3x-s-proc { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.4vw, 36px); align-items: start; }
  .no-motion .r3x-s-proc__side, html:not(.js) .r3x-s-proc__side { position: static; }
  .no-motion .r3x-s-proc__pin, html:not(.js) .r3x-s-proc__pin { display: none; }
  .no-motion .r3x-s-proc .r3-beats, html:not(.js) .r3x-s-proc .r3-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4.4vw, 80px); row-gap: clamp(8px, 1.4vw, 24px); padding-bottom: 0; }
  .no-motion .r3x-s-proc .r3-beat, html:not(.js) .r3x-s-proc .r3-beat { display: block; min-height: 0; padding: clamp(18px, 1.8vw, 28px) 0 clamp(22px, 2.2vw, 34px); border-bottom: 0; border-top: 1px solid var(--line-2); align-content: normal; }
  .no-motion .r3x-s-proc .r3-beat:first-child, html:not(.js) .r3x-s-proc .r3-beat:first-child { border-top: 1px solid var(--line-2); }
  .no-motion .r3x-s-proc .r3-beat::before, html:not(.js) .r3x-s-proc .r3-beat::before { display: none; }
  .no-motion .r3x-s-proc .r3-beat > .r3-n, html:not(.js) .r3x-s-proc .r3-beat > .r3-n { display: block; padding: 0; margin: 0 0 clamp(10px, 1vw, 16px); color: var(--ink); font: 400 clamp(3.6rem, 2.2rem + 3.4vw, 5.2rem)/.9 var(--r3-f-serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
  .no-motion .r3x-s-proc .r3-beat h3, html:not(.js) .r3x-s-proc .r3-beat h3 { margin-bottom: 10px; }
  .no-motion .r3x-s-proc .r3-beat p, html:not(.js) .r3x-s-proc .r3-beat p { max-width: 24em; }
}
.r3x-s-prom { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.r3x-s-prom .r3-ink { max-width: 24em; }

/* ================================ 7. LANDING PAGES (hemsida-*-goteborg) ================================ */
.r3x-s-lhero { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 1024px) { .r3x-s-lhero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); } }
.r3x-s-lhero .r3x-s-h1 { max-width: 11.5em; font-size: clamp(min(2.4rem, 12vw), min(1.2rem + 4.2vw, 9.6vh, calc((100vw - 2 * var(--gutter) - 15px) / 7)), 4.6rem); line-height: 1; letter-spacing: -.034em; }
@supports (height: 1svh) { .r3x-s-lhero .r3x-s-h1 { font-size: clamp(min(2.4rem, 12vw), min(1.2rem + 4.2vw, 9.6svh, calc((100vw - 2 * var(--gutter) - 15px) / 7)), 4.6rem); } }
.r3x-s-lproof { margin: 0; position: relative; }
.r3x-s-lproof .r3-dev { box-shadow: 0 0 0 1px rgba(243, 240, 234, .14), 0 50px 90px -40px rgba(0, 0, 0, .75), 0 30px 100px -34px rgba(var(--r3-glow, 216, 210, 198), .26); }
.r3x-s-lproof .r3-dev__page { position: relative; transform: none; }
.r3x-s-lproof .r3-dev__view { aspect-ratio: 16 / 10; }
/* tablets (the frame is as wide as the text column, 700-1023 px): the screenshot is the first screen of the example, its lower tenth is below the hero text, so a 16:9 window costs 46 px less of the 946 px hero */
@media (min-width: 700px) and (max-width: 1023px) { .r3x-s-lproof .r3-dev__view { aspect-ratio: 16 / 9; } }
.r3x-s-lproof__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 22px; margin-top: 16px; }
.r3x-s-lproof__cap .r3-cap { margin: 0; flex: 1 1 14em; }
.r3x-s-lproof__id { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.r3x-s-lproof__id .r3-price__n { font-size: 1.9rem; }
.r3x-s-lead2 { margin: 0; font: 400 clamp(1.0625rem, 1rem + .4vw, 1.375rem)/1.5 var(--r3-f-text); letter-spacing: -.01em; color: var(--ink); max-width: 30em; text-wrap: pretty; }
.r3x-s-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); display: grid; }
@media (min-width: 700px) { .r3x-s-checks { grid-template-columns: repeat(auto-fit, minmax(max(14rem, calc((100% - 64px) / 2)), 1fr)); column-gap: clamp(28px, 4vw, 64px); } }
.r3x-s-checks > li { display: grid; grid-template-columns: min(3rem, 48px) minmax(0, 1fr); column-gap: 8px; padding: clamp(16px, 1rem + .6vw, 24px) 0; border-bottom: 1px solid var(--line-2); font: 500 clamp(1.05rem, 1rem + .35vw, 1.3rem)/1.35 var(--r3-f-display); letter-spacing: -.012em; color: var(--ink); }
.r3x-s-checks > li, .r3x-s-solve > li { align-items: first baseline; }
.r3x-s-paket { display: grid; gap: clamp(28px, 3.4vw, 48px); }
.r3x-s-paket p { margin: 0; }
.r3x-s-paket .r3x-s-prose { font: 400 clamp(1.05rem, 1rem + .4vw, 1.3rem)/1.55 var(--r3-f-text); color: var(--ink-2); max-width: 36em; }
.r3x-s-paket .r3x-s-prose a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--line); }
.r3x-s-paket .r3x-s-prose a:hover { text-decoration-color: currentColor; }
/* hantverkare: the "Paket" block as a heading over two columns (the ledger and the price sentence | the prose, the link and the promise) instead of a heading in a 40 % column beside one tall block */
.r3x-s-duoh > h2 { font: 500 var(--r3-t-h3)/1.12 var(--r3-f-display); letter-spacing: -.02em; margin: 0 0 clamp(18px, 2.2vw, 30px); text-wrap: balance; }
.r3x-s-paket--duo > * { min-width: 0; display: grid; gap: clamp(22px, 2.6vw, 36px); align-content: start; }
@media (min-width: 760px) { .r3x-s-paket--duo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 104px); align-items: start; } }
@media (min-width: 760px) and (max-width: 1099px) {
  .r3x-s-paket--duo .r3a-pricelg a { grid-template-columns: 2.1rem minmax(0, 1fr) auto; column-gap: 10px; }
  .r3x-s-paket--duo .r3a-pricelg .r3-price { flex-direction: column; align-items: flex-end; gap: 0; }
  .r3x-s-paket--duo .r3a-pricelg .r3-price__u { font-size: .875rem; }
}
.r3x-s-faq { border-top: 1px solid var(--line); }
.r3x-s-faq details { border-bottom: 1px solid var(--line-2); }
.r3x-s-faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: clamp(18px, 1.2rem + .5vw, 26px) 0; font: 500 clamp(1.15rem, 1.05rem + .5vw, 1.5rem)/1.3 var(--r3-f-display); letter-spacing: -.014em; color: var(--ink); min-height: 44px; }
.r3x-s-faq summary::-webkit-details-marker { display: none; }
.r3x-s-faq summary::after { content: "+"; flex: none; font: 400 1.6rem/1 var(--r3-f-text); color: var(--ink-2); transition: transform .2s var(--r3-ease-out); }
.r3x-s-faq details[open] summary::after { transform: rotate(45deg); }
.r3x-s-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; border-radius: 6px; }
.r3x-s-faq details p { margin: 0 0 clamp(18px, 2vw, 28px); color: var(--ink-2); max-width: 40em; font-size: 1.0625rem; }
.r3x-s-promise { margin: clamp(26px, 3vw, 40px) 0 0; color: var(--ink-2); max-width: 40em; font: 400 1.0625rem/1.55 var(--r3-f-text); }
.r3x-s-solve { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.r3x-s-solve > li { display: grid; grid-template-columns: min(3.4rem, 54px) minmax(0, 1fr); column-gap: 10px; padding: clamp(18px, 1.2rem + .6vw, 26px) 0; border-bottom: 1px solid var(--line-2); font: 500 clamp(1.125rem, 1rem + .5vw, 1.5rem)/1.3 var(--r3-f-display); letter-spacing: -.018em; color: var(--ink); }

.r3x-s-pricenote { margin-top: 14px; font: 400 var(--r3-t-small)/1.5 var(--r3-f-text); color: var(--ink-2); max-width: 40em; }

/* landscape phones: copy and the example side by side so the ask is inside the first screen (667 x 375, 844 x 390) */
@media (max-width: 1099px) and (max-height: 520px) and (orientation: landscape) {
  .r3-plane.r3x-s-hero { padding-top: 12px; }
  .r3x-s-lhero { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; align-items: start; }
  .r3x-s-lhero .r3x-s-h1 { font-size: 1.85rem; max-width: none; }
  .r3x-s-lhero .r3-lead { font-size: .9375rem; margin-top: 8px; }
  .r3x-s-lhero .r3-label { margin-bottom: 6px; }
  .r3x-s-lhero .r3x-s-acts { margin-top: 12px; gap: 4px 14px; }
  .r3x-s-lhero .r3x-s-acts .r3-link { min-height: 40px; }
  .r3x-s-lproof__cap { margin-top: 8px; gap: 4px 12px; } .r3x-s-lproof__id .r3-price__n { font-size: 1.5rem; }
}

/* ================================ 8. LEGAL DOCUMENT ================================ */
/* the text stays exactly as it was: only its frame changes. A quiet index of the document's own headings (built by r3x-rest.js; with no JS the document simply reads
   top to bottom), numbered headings by CSS counter, boxes kept as boxes (the Art. 21.4 notice must stay a separate, visible box). No lines between sections. */
.r3-plane.r3x-s-hero--doc { padding-bottom: 8px; min-height: 250px; }
.r3-plane.r3x-s-docplane { padding-top: clamp(28px, 4vw, 56px); }
.r3x-s-hero--doc .r3x-s-h1 { font: 500 clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem)/1.02 var(--r3-f-display); letter-spacing: -.034em; max-width: 14em; }
.r3x-s-doc { display: grid; gap: clamp(28px, 4vw, 56px); counter-reset: dsec; }
@media (min-width: 1100px) { .r3x-s-doc { grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: clamp(48px, 6vw, 112px); align-items: start; } }
.r3x-s-doc__toc { display: none; }
@media (min-width: 1100px) {
  .r3x-s-doc__toc { display: block; position: sticky; top: calc(var(--nav-h, 68px) + 32px); max-height: calc(100vh - var(--nav-h, 68px) - 64px); overflow: auto; scrollbar-width: thin; padding: 2px 0 8px; }
}
.r3x-s-doc__toc p { margin: 0 0 14px; }
.r3x-s-doc__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.r3x-s-doc__toc li { counter-increment: toc; }
.r3x-s-doc__toc a { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 4px; padding: 7px 0; color: var(--ink-3); text-decoration: none; font: 400 .9375rem/1.35 var(--r3-f-text); transition: color var(--r3-d-ui) var(--r3-ease-out); }
.r3x-s-doc__toc a::before { content: counter(toc, decimal-leading-zero); font: 500 .8125rem/1.65 var(--r3-f-display); letter-spacing: .03em; font-variant-numeric: lining-nums proportional-nums; }
.r3x-s-doc__toc a:hover, .r3x-s-doc__toc a[aria-current="true"] { color: var(--ink); }
.r3x-s-doc__toc a[aria-current="true"]::before { color: var(--gold); }
.r3x-s-doc__toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; border-radius: 4px; }
.r3x-s-doc__body { min-width: 0; max-width: 46rem; }
.r3x-s-doc__body > * + * { margin-top: 0; }
.r3x-s-doc__body h2 { counter-increment: dsec; scroll-margin-top: calc(var(--nav-h, 68px) + 28px); font: 500 clamp(1.45rem, 1.2rem + 1vw, 2rem)/1.15 var(--r3-f-display); letter-spacing: -.02em; color: var(--ink); margin: clamp(48px, 6vw, 80px) 0 clamp(14px, 1.6vw, 22px); }
.r3x-s-doc__body h2::before { content: counter(dsec, decimal-leading-zero); display: block; margin-bottom: .55em; font: 500 .875rem/1 var(--r3-f-display); letter-spacing: .04em; font-variant-numeric: lining-nums proportional-nums; color: var(--gold); }
.r3x-s-doc__body > h2:first-child, .r3x-s-doc__body > .box:first-child { margin-top: 0; }
.r3x-s-doc__body > .box:first-child h2 { margin-top: 0; }
.r3x-s-doc__body p, .r3x-s-doc__body li { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.65; }
.r3x-s-doc__body p { margin: 0 0 1.05em; }
.r3x-s-doc__body ul, .r3x-s-doc__body ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.r3x-s-doc__body li { margin: 0 0 .7em; padding-left: 4px; }
.r3x-s-doc__body li::marker { color: var(--gold); }
.r3x-s-doc__body b, .r3x-s-doc__body strong { color: var(--ink); font-weight: 600; }
.r3x-s-doc__body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line); }
.r3x-s-doc__body a:hover { text-decoration-color: currentColor; }
.r3x-s-doc__body a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.r3x-s-doc__body .mut { font-size: .9375rem; color: var(--ink-3); }
/* villkor: its sections are separate blocks in the old markup */
.r3x-s-doc__body > section { margin: 0; }
.r3x-s-doc__body > section + section { margin-top: 0; }
.r3x-s-doc__body > section > h2 { margin-top: clamp(48px, 6vw, 80px); }
.r3x-s-doc__body > section:first-child > h2 { margin-top: 0; }
.r3x-s-doc__body .note { font-size: .9375rem; color: var(--ink-2); padding: 16px 18px; border-radius: 12px; background: var(--r3-wash); border: 0; margin-top: 8px; }
/* the boxes: lines inside content are fine, so a box keeps its edge; the notice stays a box of its own */
.r3x-s-doc__body .box { border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 2.4vw, 32px); margin: clamp(30px, 3.6vw, 48px) 0; background: var(--r3-wash); }
.r3x-s-doc__body .box > :last-child { margin-bottom: 0; }
.r3x-s-doc__body .box h2 { margin-top: 0; }
.r3x-s-doc__body .box:first-child { margin-top: 0; }

/* ================================ 9. 404 ================================ */
.r3-plane.r3x-s-nf { min-height: calc(100vh - 69px - 176px); display: grid; align-content: center; padding-top: clamp(48px, 7vw, 100px); padding-bottom: clamp(48px, 7vw, 100px); overflow: clip; }
@supports (height: 1svh) { .r3-plane.r3x-s-nf { min-height: calc(100svh - 69px - 176px); } }
.r3x-s-nf__in { position: relative; isolation: isolate; }
.r3x-s-nf__ghost { position: absolute; z-index: -1; right: -.04em; top: 50%; transform: translateY(-52%); font: 400 min(54vw, 40rem)/.8 var(--r3-f-serif); letter-spacing: -.05em; font-variant-numeric: lining-nums; color: var(--ink); opacity: .06; pointer-events: none; user-select: none; white-space: nowrap; }
.r3x-s-nf .r3-label { position: relative; }
/* The numeral sits UNDER the copy, in room of its own, on phones and on every portrait window (a 6 % numeral behind the heading and the links is the F-39 defect: on 320 x 568 and 390 x 664 it ran
   through the link row). The section reserves the numeral's height as bottom padding (46vw = the glyph height of a 66vw numeral); the absolute numeral then lies in that room. */
@media (max-width: 699px), (orientation: portrait) {
  .r3x-s-nf__ghost { right: auto; left: 50%; top: auto; bottom: -.05em; transform: translateX(-50%); font-size: 66vw; opacity: .07; }
  .r3-plane.r3x-s-nf { align-content: start; padding-bottom: calc(46vw + 28px); }
  .r3x-s-nf__in { position: static; }
}
/* Fix round 2 (same cause as F-39, a ghost numeral lying behind the copy): on every LANDSCAPE window (laptop, landscape phone and tablet) the big "404" sat behind the heading and the three
   links (at 667 x 375 it drew double letterforms through all of them). It is now a second column beside the copy (the copy column shrinks and its links wrap before the numeral ever
   covers them); on a PORTRAIT tablet it takes the phone's place under the copy. The numeral is still decoration only (aria-hidden, 6 %). */
@media (min-width: 560px) and (orientation: landscape) {
  .r3-plane.r3x-s-nf { align-content: center; padding-bottom: clamp(48px, 7vw, 100px); }
  .r3x-s-nf__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, 3vw, 56px); align-items: center; position: relative; }
  .r3x-s-nf__in > .r3-label, .r3x-s-nf__in > .r3x-s-h1, .r3x-s-nf__in > .r3x-s-nf__links { grid-column: 1; }
  .r3x-s-nf__ghost { position: static; grid-column: 2; grid-row: 1 / span 3; align-self: center; transform: none; right: auto; left: auto; bottom: auto; z-index: auto; font-size: min(22vw, 20rem, 64vh); font-size: min(22vw, 20rem, 64svh); opacity: .06; }
}
.r3x-s-nf .r3x-s-h1 { font-size: clamp(2.7rem, min(1.4rem + 5.6vw, 12svh), 6.2rem); line-height: .98; letter-spacing: -.038em; }
.r3x-s-nf__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(26px, 3.4vw, 44px); }
.r3x-s-nf__links .r3-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ================================ 10. REDUCED MOTION, NO-JS AND THEME NOTES ================================ */
/* no-JS: the arc is its composed bowl (the inline --k on each card is the rest state), the first caption is shown, every sheet is a normal block */
html:not(.js) .r3x-s-arc__c { transition: none; }
html:not(.js) .r3x-s-arc__c[style*="--k:3"] { visibility: hidden; }   /* the one parked card (slot 3, opacity 0) is not a tab stop when no script can manage it; its link is also in the grid below */
html:not(.js) .r3x-s-sel, html:not(.js) .r3x-s-proc__pin { display: none; }
.no-motion .r3x-s-arc__c, .no-motion .r3x-s-arc__c::after, .no-motion .r3x-s-soft, .no-motion .r3x-s-cap, .no-motion .r3x-s-sel__b, .no-motion .r3x-s-odo > span, .no-motion .r3x-s-proc__rail i::after { transition: none !important; }
.no-motion .r3x-s-devlink .r3-dev { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .r3x-s-arc__c, .r3x-s-arc__c::after, .r3x-s-soft, .r3x-s-cap, .r3x-s-sel__b, .r3x-s-odo > span, .r3x-s-proc__rail i::after { transition: none !important; }
}
/* light theme: the dark sheets and the dark ask keep their own tokens (re-scoped by the tone classes); the arc sits on the page tone, its glow is the warm neutral */
[data-theme="light"] .r3x-s-arc::before { background: radial-gradient(closest-side, rgba(var(--r3x-lr, 120), var(--r3x-lg, 96), var(--r3x-lb, 64), .20), rgba(var(--r3x-lr, 120), var(--r3x-lg, 96), var(--r3x-lb, 64), 0)); }
[data-theme="light"] .r3x-s-stage[data-tier="growth"] { --r3x-lr: 104; --r3x-lg: 84; --r3x-lb: 196; }
[data-theme="light"] .r3x-s-stage[data-tier="premium"] { --r3x-lr: 160; --r3x-lg: 116; --r3x-lb: 44; }
/* the receding cards sink toward the tone they stand on: on cream the shade is the page cream, not a dark smoke */
[data-theme="light"] .r3x-s-arc__c::after { background: var(--r3-c-page, #F4F1EB); opacity: calc(var(--k) * var(--k) * .07); }
[data-theme="light"] .r3x-s-arc__c { box-shadow: 0 0 0 1px rgba(20, 19, 23, .12), 0 36px 60px -30px rgba(20, 19, 23, .5); }
[data-theme="light"] .r3x-s-sheet.r3-tone-paper { box-shadow: 0 0 0 1px rgba(20, 19, 23, .08), 0 34px 60px -38px rgba(20, 19, 23, .35); }
/* r3 copy: caption under cross-industry examples (David 2026-10-06): own row under the disclosure + price line */
.r3x-s-lproof__cap .r3x-s-lproof__note { order: 3; flex: 1 1 100%; max-width: 38rem; margin: 2px 0 0; }

/* RC2 (David N005-N008): the four trade pages no longer show an unrelated example in the hero: one text column, a readable measure */
.r3x-s-lhero.r3x-s-lhero--solo { grid-template-columns: minmax(0, 1fr); }
.r3x-s-lhero--solo .r3-lead { max-width: 38em; }
@media (max-height: 520px) and (orientation: landscape) { .r3x-s-lhero.r3x-s-lhero--solo { grid-template-columns: minmax(0, 1fr); } }

/* RC2 N011/N012 (David): /kontakt and /om, calmer and more structured. Reach columns, fact list, link list; the scroll-ink statements are lighter and smaller everywhere they are used (/process too). */
.r3x-s-reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(20px, 3vw, 40px); }
.r3x-s-reach .r3-label { margin: 0 0 10px; color: var(--ink-3); }
.r3x-s-reach p { margin: 0; }
.r3x-s-reach .r3a-signoff__mail { display: inline-block; margin: 0 0 10px; }
.r3x-s-reach > :first-child { container-type: inline-size; }   /* b6 fix66: the address is sized to its column (it was cut as "david@zsstudio.s / e" at 200 % text) */
.r3x-s-reach .r3a-signoff__mail { font-size: min(var(--r3-t-mail), 14.5cqi); overflow-wrap: normal; }
@media (max-width: 860px) { .r3x-s-reach { grid-template-columns: 1fr; gap: 28px; } }
.r3x-s-facts { margin: 28px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.r3x-s-facts > div { display: contents; }
.r3x-s-facts dt { color: var(--ink-3); font-size: var(--r3-t-small); letter-spacing: .08em; text-transform: uppercase; align-self: baseline; }
.r3x-s-facts dd { margin: 0; align-self: baseline; }
@media (max-width: 520px) { .r3x-s-facts { grid-template-columns: 1fr; gap: 2px 0; } .r3x-s-facts dd { margin-bottom: 12px; } }
.r3x-s-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.r3x-s-links li { display: grid; grid-template-columns: minmax(10em, max-content) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; }
.r3x-s-links li > span { color: var(--ink-2); }
@media (max-width: 640px) { .r3x-s-links li { grid-template-columns: 1fr; } }
.r3x-s-statement .r3-ink, .r3x-s-prom .r3-ink { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem); line-height: 1.35; letter-spacing: -.015em; }
/* RC2 calm H1: the two information pages (kontakt, om) open with a quieter headline than the sales pages */
.r3x-s-calm .r3x-s-h1 { font-size: min(clamp(2.25rem, 1.3rem + 2.9vw, 3.5rem), 13.5vw); line-height: 1.08; letter-spacing: -.03em; }
.r3x-s-reach .r3-label { display: block; }

/* RC3 WP-TYPO */
/* the calm information pages: an H2 never rivals the H1, the 'honest' statements are running text in the text face (N012: not thick, not display-sized) */
.r3x-s-calm .r3x-s-h2 { font-size: var(--r3-t-h3); }
.r3x-s-calm .r3x-s-honest > li { font: 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.45 var(--r3-f-text); letter-spacing: 0; }

/* RC3 WP-MISC */
.r3x-s-hero--c .r3-lead { max-width: 38em; text-wrap: balance; }
.r3x-s-lhero--solo .r3x-s-h1 { max-width: 16em; }
.r3x-s-reach .r3a-signoff__mail { padding-block: 10px; }
/* RC3 SALJMOTE (build #5): the "Fler branscher" line on the four trade pages */
.r3x-s-also{margin-top:12px}

/* b6 G5: kontakt */
/* KO-08: the contact facts ("Så når du oss": e-mail, support hours, place) sit in the first screen: a shorter tone blend between the hero and the graphite plane */
.r3-plane.r3x-s-spread { --r3-fade: 64px; }
/* KO-09: the four hints are prompts, not links: no hover wash; the small descriptions read at 1 rem */
.r3x-s-prompt .r3a-ledger > li::before { display: none; }
.r3x-s-prompt .r3a-ledger__d { font-size: 1rem; }

/* b6 G8: /exempel note */
.r3x-s-note { max-width: 30em; margin: clamp(10px, 1.4vw, 18px) auto 0; text-align: center; }

/* b6 ARC-TIER-WRAP */
.r3x-s-arc__lab .r3-tier{flex-wrap:wrap;row-gap:4px;max-width:100%}

/* b6 SHEET-SPEC-200 */
.r3x-s-sheet .r3-spec { grid-template-columns: fit-content(42%) minmax(0, 1fr); } .r3x-s-sheet .r3-spec dd { overflow-wrap: anywhere; }

/* b6 fix2 KO-08 */
.r3x-s-heromail { margin: 14px 0 0; font: 400 var(--r3-t-body)/1.5 var(--r3-f-text); color: var(--ink-2); }
.r3x-s-heromail .r3-link { overflow-wrap: anywhere; }

/* b6 fix9 KO-08 first screen */
@media (min-width: 900px) { .r3-plane.r3x-s-hero { padding-bottom: 0; } .r3x-s-heromail { padding-bottom: 16px; } .r3-plane.r3x-s-spread { --r3-fade: 40px; padding-top: 44px; } }

/* b6 fix66 process rows and example sheets */
/* b6 fix66 process rows: a narrow number column (the h3 'Publicering' was cut at 200 % text on a phone) */
.r3x-s-proc .r3-beat { grid-template-columns: min(3rem, 48px) minmax(0, 1fr); }
/* b6 fix66 example sheets stack when their card is narrower than ~12 em (words were cut at 150-200 % text on a 320 px phone) */
@media (max-width: 699px) {
  .r3x-s-sheet { container-type: inline-size; }
  @container (max-width: 12em) {
    .r3x-s-sheet__body { grid-template-columns: minmax(0, 1fr); }
    .r3x-s-sheet__thumb { grid-row: auto; width: 56px; }
    .r3x-s-sheet__name { align-self: start; }
    .r3x-s-sheet__cap { grid-column: 1; }
    .r3x-s-sheet .r3-spec { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .r3x-s-sheet .r3-spec dd { margin-bottom: 8px; }
  }
}

/* b6 fix84 agency */
/* b6 fix84 agency pages */
.r3x-s-hang { container-type: inline-size; }
.r3x-s-hang h2 { font-size: min(var(--r3-t-h3), 9.6vw); }
@media (min-width: 1024px) { .r3x-s-hang h2 { font-size: var(--r3-t-h3); } }
/* the four landing pages carry 19-letter words in their hang H2: those keep the column caps */
main:has(.r3x-s-lhero) .r3x-s-hang h2 { font-size: min(var(--r3-t-h3), 9.6cqi); }
@media (min-width: 1024px) { main:has(.r3x-s-lhero) .r3x-s-hang h2 { font-size: min(var(--r3-t-h3), calc((100cqi - clamp(40px, 5vw, 96px)) * .043)); } }
.r3x-s-ask .r3-btn--xl { text-wrap: balance; }
.r3x-s-proc .r3-beat > div { container-type: inline-size; }
.r3x-s-proc .r3-beat p { font-size: min(1.0625rem, 9.7cqi); }

/* b6 fix88 exempel */
/* b6 fix88 exempel */
@media (max-width: 1180px) { .r3x-s-th .r3-price { display: grid; justify-items: start; } }
@media (min-width: 768px) and (max-width: 1010px) { .r3x-s-th .r3-tier { white-space: nowrap; } .r3x-s-cmp .r3x-s-ptint, .r3x-s-cmp thead th:last-child { padding-left: 8px; } }
@media (min-width: 600px) and (max-width: 1099px) { .r3x-s-arc__lab .r3-price { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* b6 fix90 agency */
/* b6 fix90 agency pages */
@media (min-width: 900px) { .r3-plane.r3x-s-hero:has(.r3x-s-lhero--solo) { padding-bottom: clamp(16px, 2.4vw, 36px); } }
.r3x-s-checks > li { font-size: min(clamp(1.05rem, 1rem + .35vw, 1.3rem), max(8.5vw, 20.8px)); }
.r3x-s-solve > li { font-size: min(clamp(1.125rem, 1rem + .5vw, 1.5rem), max(8.5vw, 24px)); }
.r3x-s-faq summary { font-size: min(clamp(1.15rem, 1.05rem + .5vw, 1.5rem), max(8vw, 24px)); }

/* b6 fix93 rest */
/* b6 fix93: the stacked comparison cells put the label over the value when the cell is narrow (14 em container) */
@media (max-width: 767px) {
  .r3x-s-cmp tbody tr { container-type: inline-size; }
  @container (max-width: 15em) { .r3x-s-cmp td[data-l] { grid-template-columns: minmax(0, 1fr); gap: 0; } }
}
/* the closing ask button label follows the window at 200 % on phones (one line), 100 % unchanged */
@media (max-width: 559px) { .r3x-s-ask .r3-btn--xl { --fs: min(1.0625rem, 8vw); } }
@media (max-width: 380px) { .r3x-s-ask .r3-btn--xl { --fs: min(1rem, 8vw); } }
/* the other H2s of /om /kontakt /process follow the same window cap as the hang H2s (mixed H2 sizes at 200 %) */
.r3x-s-calm :is(.r3x-s-h2, .r3x-s-proc__side h2, .r3x-s-prompt__h) { font-size: min(var(--r3-t-h3), 9.6vw); }
.r3x-s-proc .r3-beat h3 { font-size: min(clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem), 9.6vw); }

/* b6 fix94 exempel table stack */
/* b6 fix94: the /exempel comparison table stacks like on a phone when its own region is under 38 rem (its nowrap price headers need about 35-37 rem at 125-150 % text: 35 px of the Premium column were scrolled away at 768 px, 'kalendermanad' was cut at 175-200 %); the same rules as the phone block above (inside a 768 px media query so the 14 em label-over-value rule of the phone block keeps winning there) */
@media (min-width: 768px) {
@container r3tbl (max-width: 38rem) {
  .r3-tblscroll > .r3-table.r3x-s-cmp { min-width: 0; }
  .r3x-s-cmp thead { display: none; }
  .r3x-s-cmp tr { display: grid; }
  .r3x-s-cmp th, .r3x-s-cmp td { border: 0; padding: 3px 0; width: auto !important; }
  .r3x-s-cmp td[data-l]::before { content: attr(data-l); }
  .r3x-s-cmp tbody tr { gap: 1px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
  .r3x-s-cmp tbody th { font: 600 .9375rem/1.3 var(--r3-f-display); color: var(--ink); padding-bottom: 4px; }
  .r3x-s-cmp td[data-l] { display: grid; grid-template-columns: max(min(6.6rem, 105.6px), 3.6rem) minmax(0, 1fr); gap: 8px; padding: 4px 10px; border-radius: 8px; color: var(--ink); }
  .r3x-s-cmp td[data-l]::before { display: block; font: 600 .8125rem/1.7 var(--r3-f-text); color: var(--ink-2); }
  .r3x-s-cmp td[data-l="Premium Max"] { background: var(--r3-wash); }
}
}

/* b6 fix95 agency */
/* b6 fix95 agency (verify7): one heading hierarchy at 200 % on phones (triad titles, ledger titles and the closing question never exceed the page's H1 step), the link list of /kontakt stacks its label over the description when its own column is narrow */
.r3x-s-triad .r3a-triad__t { font-size: min(clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem), 16cqi, 9.6vw); }
.r3a-ledger__t { font-size: min(var(--r3-t-h3), 9.6vw); }
.r3-ask__q { font-size: min(clamp(2.2rem, 1.3rem + 2.2vw, 3.1rem), 13.5vw); }
.r3x-s-links { container-type: inline-size; }
@container (max-width: 20em) { .r3x-s-links li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* /exempel header: the unit sits under the number whenever the table region is narrower than 56 rem (125-175 % text on 1184-1920 px windows) */
@container r3tbl (max-width: 56rem) { .r3x-s-th .r3-price { display: grid; justify-items: start; } }
/* /exempel rail cards, 600-1099 px: the tier line stays on one row and follows its card (the three cards line up at 125-150 % text) */
@media (min-width: 600px) and (max-width: 1099px) { .r3x-s-arc__lab { container-type: inline-size; } .r3x-s-arc__lab .r3-tier { flex-wrap: nowrap; font-size: min(.8125rem, 7.4cqi); } }

/* b6 fix95 exempel rail narrow */
/* b6 fix95: a rail label narrower than 160 px keeps the 13 px tier line (wrapping to two rows) */
@media (min-width: 600px) and (max-width: 1099px) { @container (max-width: 159px) { .r3x-s-arc__lab .r3-tier { flex-wrap: wrap; font-size: .8125rem; } } }
/* /kontakt: the ledger titles follow the window like the other headings (the generic rule lost to .r3x-s-prompt .r3a-ledger__t) */
.r3x-s-prompt .r3a-ledger__t { font-size: min(clamp(1.2rem, 1.05rem + .6vw, 1.5rem), 9.6vw); }
/* the four landing pages: every H2 except the hang H2 and the closing question follows the window at 200 % on phones (the H1 is 39 px there) */
main:has(.r3x-s-lhero) h2:not(.r3-ask__q):not(.r3x-s-hang h2) { font-size: min(var(--r3-t-h3), 9.6vw); }

/* b6 fix96 hemsida ask */
/* b6 fix96 (verify9): on the four job-type landing pages the closing question follows the page H1 (12 vw cap; 100 % unchanged) */
main:has(.r3x-s-lhero) .r3-ask__q { font-size: min(clamp(2.2rem, 1.3rem + 2.2vw, 3.1rem), 12vw); }

/* R-7 (D): Smula card on /exempel - the action row is a column at every width, so the "read more" link sits under the "Upplev" button in ALL cards (a wrapping row put it beside the button only on the card with the shortest button label) */
.r3x-s-sheet__acts{flex-direction:column;align-items:flex-start}