/* ZS R3 STREAM P / ENG, PREMIUM MAX PAGE (r3x-premium.css), round 3a. ZS's own code. Loaded by /paket/premium-max only, after r3-tokens.css, r3-graft-press.css, r3-graft-held.css and r3-stage.css.
   Page classes are r3x-p-*; the engine is r3s-* (r3-stage.css / r3-stage.js), the foundation r3-*, the held graft r3p-*, the press graft r3a-*.
   ROUND 3a: the page is SCENES. Opening = the clean-plate hero (alive now), then ONE living-plate scene (aperture -> the seven promises as states over the Gloed and Atelier Norr worlds -> zoom-out to the examples),
   the two examples (Proof Stage), the comparison, the ask as a FREE living plate, the colophon. Static (reduced motion / no JS): every scene is a composed block (plate band + ledger).
   RULES: tone planes blend (no divider lines between sections), motion = transform / opacity / clip-path only, every hidden start state hangs on html.lib-on / .is-live, html.no-motion and no-JS show the
   complete composed page (both examples, the whole ledger, the films as stills), svh always has a vh fallback.
   CONTENTS  0 helpers  1 hero  2 THE SCENE (static ledger, live copy, accessories)  3 chapter 02 two examples  4 chapter 03 compare + limits  5 the ask  6 colophon  7 dock + short windows  8 LIGHT THEME */

.tier-premium { --r3x-nav: var(--nav-h, 68px); --r3x-gold: #DCBC7E; --r3x-hinge: clamp(6.4rem, 3rem + 10vw, 12.5rem); }

/* ================================ 1. HERO (clean plate, from r3-graft-held.css) ================================ */
/* the three-dash tier marker stays (panel: keep it), set inside the tracked serif kicker */
.r3x-p-bar { display: inline-grid; grid-auto-flow: column; gap: 3px; margin-right: 1.15em; vertical-align: .24em; letter-spacing: 0; }
.r3x-p-bar i { display: block; width: 15px; height: 4px; border-radius: 2px; background: var(--r3p-gold); }
/* OVERRIDE of r3-graft-held.css section 2 (line-height .9): at .9 the tail of the g in "egen" runs into the ll of "visuell" (looked at 1440x900 at 2x). 1.04 clears it by about .07 em;
   the clean-plate geometry is re-verified with verify_clean_plate.cjs (evidence/r3/final/P/clean_plate_page_verify.json). */
.r3p-hero__h1 { line-height: 1.04; }
/* the image caption ("Bild: Glöd – påhittat designexempel.") is an opaque pill: under the photograph when stacked, in the floor's bottom corner when the stage overlays */
.r3x-p-hcap { order: 4; align-self: flex-end; position: relative; z-index: 2; margin: -46px var(--gutter, 16px) 0 auto; max-width: calc(100% - 2 * var(--gutter, 16px)); }   /* stacked: the pill sits in the plate's melted floor, so the lead rises above the phone dock (the third lead line was under it at 390x844) */
@media (min-width: 1024px), (max-height: 520px) and (orientation: landscape) and (min-width: 560px) {
  .r3x-p-hcap { position: absolute; right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.2); margin: 0; order: 0; }
}
@media (max-height: 520px) and (orientation: landscape) { .r3x-p-hcap { display: none; } }
/* OVERRIDE of r3-graft-held.css section 2 (portrait phones): the plate is the 4:5 master cropped to 10:11, which cuts the table at the bottom edge = a hard photo edge against the floor.
   Its foot dissolves into the floor tone here (the baked floor is the page ink, so the melt is invisible where there is no object). */
@media (max-width: 767px) and (orientation: portrait) {
  .r3p-hero__plate { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%); }
}
/* TALL PORTRAIT PHONES: the phone dock shows from the first paint while the hero ask is below the fold, and on a screen taller than about 810 px the in-flow price card's top edge and the
   tops of its big digits showed ABOVE the dock ("2 490 printed twice, one ghosted", panel 2: four judges). The card now starts below the dock's top edge on every tall screen (42svh - 305px:
   0 at 726 px, 49 px at 844, 86 px at 932). The photograph keeps the first screen; shorter phones are untouched (the card is under the dock there, nothing peeks). */
@media (max-width: 767px) and (orientation: portrait) {
  .r3p-hero__ticket { margin-top: calc(18px + max(0px, 42vh - 305px)); }
}
@supports (height: 1svh) { @media (max-width: 767px) and (orientation: portrait) { .r3p-hero__ticket { margin-top: calc(18px + max(0px, 42svh - 305px)); } } }
/* the pinned clean-plate beat sits UNDER the sticky header (the foundation pins at 0: the first 68 px of the copy would slide under the bar) */
@media (min-width: 1024px) and (min-height: 600px) { html.lib-on .r3x-p-clear.is-live > .r3p-hero { top: var(--r3x-nav); } }
/* FIX ROUND 2, F-27 (panel 3 skeptic + static: "about 40 percent of the fold is empty black, the photograph is small and flat, the price card is small against the poster headline").
   Measured first: the headline cannot grow (its second line already ends at x 45 % of the stage, the candles stand at 48.5 %) and the lead cannot drop (the table's rim starts at y 53 %),
   so the type zone is fixed by the photograph. What changes is the photograph and the card. (1) The plate is enlarged 1.12x about a point 76 % down (the left glass of the table stays 1.5 % below the headline's glyph boxes: 1.14x about the foot put its rim in the "värld." box at 1680 and 1920, found by verify_clean_plate) (the source is the 2560 px master, drawn at
   <= 1.9x its CSS width, so nothing is enlarged past the file): the table now reaches the lower corners and the candles rise toward the headline's band; the sides stay faded by the plate's mask.
   (2) The ticket becomes a real card: 35u wide (was 29u), roomier, the XL button (64 px), a larger link. Everything stays in units of the stage width, so the clean-plate geometry holds at every size
   (verify_clean_plate.cjs, evidence/r3/final4/P/clean_plate_hero_verify.json). */
@media (min-width: 1024px) {
  .r3x-p-clear .r3p-hero__plate { overflow: hidden; }
  .r3x-p-clear .r3p-hero__plate img { transform: scale(1.12); transform-origin: 50% 76%; }
  .r3x-p-clear .r3p-hero__ticket { width: max(calc(var(--u) * 35), 360px); gap: calc(var(--u) * 1.15); padding: clamp(18px, calc(var(--u) * 2.1), 30px) clamp(18px, calc(var(--u) * 2.3), 32px) clamp(18px, calc(var(--u) * 2.3), 32px); border-radius: clamp(18px, calc(var(--u) * 1.7), 26px); }
  .r3x-p-clear .r3p-ticket .r3-btn { --h: clamp(54px, calc(var(--u) * 4.7), 64px); --fs: clamp(1.0625rem, calc(var(--u) * 1.4), 1.1875rem); --px: clamp(16px, calc(var(--u) * 2), 34px); }   /* grows with the stage; the full label is never clipped (1366x620: stage 930 px, card 360 px) */
  .r3x-p-clear .r3p-ticket .r3-price__note { font-size: max(.9375rem, calc(var(--u) * 1.15)); }
  .r3x-p-clear .r3p-ticket .r3-link { font-size: max(1rem, calc(var(--u) * 1.2)); }
}

/* FIX ROUND 2, F-31 (panel 3 mobile: "at 768x1024 the candle poster floats small on black margins; LC-R2 opened on a tall split photograph"). From 700 px (tablet portrait, narrow desktop
   windows; NOT the landscape-phone overlay, which keeps its own layout) the stacked hero becomes a SPLIT: the headline runs across the top, below it the lead and the price card stand in the
   left column and the portrait master of the candle table (4:5, the table fills the frame) is a full-bleed column that runs off the right edge of the window. Its left side melts into the
   floor (mask, no edge); its black top and foot are baked. The whole hero, price and ask included, now sits in the first screen at 768x1024 (before: the card was cut by the fold). */
@media (min-width: 700px) and (max-width: 1023px) and (min-height: 521px) {
  .r3x-p-clear .r3p-hero__stage { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: auto auto auto 1fr auto 1fr; align-items: start; padding-bottom: 0; }
  .r3x-p-clear .r3p-hero__back { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .r3x-p-clear .r3p-hero .r3a-kicker { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .r3x-p-clear .r3p-hero__h1 { grid-column: 1 / -1; grid-row: 3; font-size: clamp(4rem, 2rem + 8vw, 6.4rem); }
  .r3x-p-clear .r3p-hero__lead--flow { grid-column: 1; grid-row: 4; align-self: end; margin: 18px 20px 0 var(--gutter, 24px); font-size: 1.125rem; line-height: 1.55; }   /* lead + card are ONE group, centred on the photograph's band */
  .r3x-p-clear .r3p-hero__ticket { grid-column: 1; grid-row: 5; align-self: start; max-width: none; margin: 22px 20px 0 var(--gutter, 24px); padding: 20px 20px 22px; }
  .r3x-p-clear .r3p-ticket .r3-btn { --fs: .9375rem; --px: 14px; }
  .r3x-p-clear .r3p-hero__plate { grid-column: 2; grid-row: 4 / 7; align-self: stretch; margin: -6px 0 0; min-height: min(62vh, 700px); min-height: min(62svh, 700px); height: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 10%, #000 24%), linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 10%, #000 24%), linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .r3x-p-clear .r3p-hero__plate img { width: 100%; height: 100%; min-height: inherit; aspect-ratio: auto; max-height: none; object-fit: cover; object-position: 38% 62%; }
  .r3x-p-clear .r3x-p-hcap { grid-column: 2; grid-row: 6; align-self: end; justify-self: end; order: 0; position: relative; margin: 0 var(--gutter, 24px) 14px 0; max-width: calc(100% - 2 * var(--gutter, 24px)); }
}

/* ---- hero ambient (round 3a): the candle table lives. The plate is a wrapper now (picture + candle flames + a light pool inside .r3s-push, dust canvas over it); the engine places the flames on the picture ---- */
.r3s-push { height: 100%; }
.r3p-hero__plate canvas.r3s__cv { z-index: 2; display: block; }
html.no-motion .r3p-hero__plate canvas { display: none; }

/* ================================ 2. THE SCENE: aperture -> seven promises over two worlds -> zoom-out to the examples ================================ */
.r3x-p-scene { --r3s-glow: 132, 81, 105; }
.r3x-p-num { margin: 0; font: 600 clamp(5rem, 2.4rem + 7.2vw, 9rem)/.92 var(--r3-f-serif); letter-spacing: -.03em; font-variant-numeric: lining-nums; color: var(--gold, var(--r3p-gold)); }
.r3x-p-cap { display: block; margin: 8px 0 0; font: 400 .8125rem/1.4 var(--r3-f-text); color: var(--ink-2); }

/* ---- STATIC: world A = plate band (the headline "Filmiskt bildspråk" on its foot), the intro, rows 1-3; world B = rows 4-7 beside a photograph ---- */
.r3s:not(.is-live) .r3x-p-intro, .r3s:not(.is-live) .r3x-p-list { width: 100%; max-width: calc(var(--wrap, 1320px) + 2 * var(--gutter, 16px)); margin-inline: auto; padding-inline: var(--gutter, 16px); }
.r3s:not(.is-live) .r3x-p-intro { padding-top: clamp(14px, 3vw, 40px); padding-bottom: clamp(26px, 3.4vw, 48px); }
.r3s:not(.is-live) .r3x-p-intro .r3a-kicker { color: var(--r3p-gold); margin: .5em 0 1.1em; }
.r3s:not(.is-live) .r3x-p-intro .r3a-poster--h2 { max-width: 15em; }
.r3s:not(.is-live) .r3x-p-tail { margin: 0; max-width: 15em; font: 600 var(--r3-t-h2)/1 var(--r3-f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; text-wrap: balance; color: var(--ink-3); }
@media (max-width: 1099px) { .r3s:not(.is-live) .r3x-p-intro .r3a-poster--h2, .r3s:not(.is-live) .r3x-p-tail { max-width: 11em; } }
@media (max-width: 767px) { .r3s:not(.is-live) .r3x-p-tail { margin-top: 18px; font: 400 1.1875rem/1.55 var(--r3-f-text); letter-spacing: 0; color: var(--ink-2); max-width: 28em; text-wrap: pretty; } }
.r3s:not(.is-live) .r3x-p-pr { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: clamp(18px, 1.2rem + .8vw, 30px); border-top: 1px solid var(--line); }
.r3s:not(.is-live) .r3x-p-pr:last-child { border-bottom: 1px solid var(--line); }
.r3s:not(.is-live) .r3x-p-pr .r3s__t { margin: 0 0 .35em; font: 600 clamp(1.6rem, 1.1rem + 1.3vw, 2.25rem)/1.04 var(--r3-f-serif); letter-spacing: -.012em; font-variant-numeric: lining-nums; color: var(--ink); }
.r3s:not(.is-live) .r3x-p-pr .r3s__d { color: var(--ink-2); max-width: 32em; font-size: 1rem; line-height: 1.55; }
.r3s:not(.is-live) .r3x-p-acc { grid-column: 1 / -1; margin: 18px 0 0; max-width: 640px; }
.r3s:not(.is-live) .r3x-p-acc img { width: 100%; }
.r3s:not(.is-live) .r3x-p-acc--phones { max-width: 520px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.r3s:not(.is-live) .r3x-p-acc--phones img { aspect-ratio: 9 / 12.4; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); height: auto; }
.r3s:not(.is-live) .r3x-p-acc--medal .r3x-p-acc__row { display: grid; grid-template-columns: 1.3fr 1fr .74fr; gap: 8px; aspect-ratio: 16 / 7.6; border-radius: 14px; overflow: hidden; }
.r3s:not(.is-live) .r3x-p-acc--medal img { height: 100%; object-fit: cover; }
.r3s:not(.is-live) .r3x-p-acc--medal img:nth-child(1) { object-position: 58% 50%; }
.r3s:not(.is-live) .r3x-p-acc--pair .r3x-p-acc__row { position: relative; display: block; padding-bottom: 8%; }
.r3s:not(.is-live) .r3x-p-acc__b { display: block; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.r3s:not(.is-live) .r3x-p-acc__p { position: absolute; right: 4%; bottom: 0; width: 24% !important; height: auto; border-radius: 12px; box-shadow: 0 0 0 3px #0C0C0F, 0 14px 30px rgba(0, 0, 0, .5); }
.r3s:not(.is-live) .r3x-p-acc--pair { max-width: 480px; }
@media (min-width: 900px) {
  .r3s:not(.is-live) .r3x-p-pr { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr); column-gap: clamp(20px, 3vw, 56px); align-items: baseline; }
  .r3s:not(.is-live) .r3x-p-pr .r3s__t { margin: 0; }
  .r3s:not(.is-live) .r3x-p-pr > .r3x-p-acc { grid-column: 2; max-width: 440px; }
  .r3s:not(.is-live) .r3x-p-pr > .r3x-p-acc--medal { grid-column: 1 / -1; max-width: none; margin-top: 26px; }
  .r3s:not(.is-live) .r3x-p-acc--medal .r3x-p-acc__row { aspect-ratio: 21 / 6; gap: 10px; }
}
@media (min-width: 1100px) {
  .r3s:not(.is-live) .r3x-p-pr { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.05fr); align-items: start; }
  .r3s:not(.is-live) .r3x-p-pr > .r3s__t, .r3s:not(.is-live) .r3x-p-pr > .r3s__d { grid-row: 1; }
  .r3s:not(.is-live) .r3x-p-pr > .r3s__t { grid-column: 1; align-self: baseline; }
  .r3s:not(.is-live) .r3x-p-pr > .r3s__d { grid-column: 2; align-self: baseline; }
  .r3s:not(.is-live) .r3x-p-pr > .r3x-p-acc--phones, .r3s:not(.is-live) .r3x-p-pr > .r3x-p-acc--pair { grid-column: 3; grid-row: 1; margin: 2px 0 0; max-width: none; align-self: start; }
  .r3s:not(.is-live) .r3x-p-pr > .r3x-p-acc--phones { max-width: 400px; }
  .r3s:not(.is-live) .r3x-p-pr > .r3x-p-acc--medal { grid-row: 2; }
}
/* world A static: the band, the headline on its foot (the grid puts both in one cell) */
.r3s:not(.is-live) .r3s__world[data-world="a"] > .r3s__plate .r3s__media img { object-position: 50% 62%; }
.r3s:not(.is-live) .r3s__world[data-world="a"] > .r3s__plate { margin-bottom: calc(var(--r3-fade, 96px) * -.3); }
.r3s:not(.is-live) .r3s__meta { position: absolute; }
/* world B static: rows beside a photograph (>= 900), a 4:5 band above the rows on phones and tablets */
.r3s:not(.is-live) .r3s__world[data-world="b"] > .r3s__plate { aspect-ratio: 4 / 5; max-height: 76svh; }
.r3s:not(.is-live) .r3s__world[data-world="b"] > .r3s__plate .r3s__media img { object-position: var(--fxs, 60%) var(--fys, 38%); }
@media (min-width: 700px) and (max-width: 899px) { .r3s:not(.is-live) .r3s__world[data-world="b"] > .r3s__plate { aspect-ratio: 16 / 9; max-height: none; } }
@media (min-width: 900px) {
  .r3s:not(.is-live) .r3s__world[data-world="b"] { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; max-width: none; padding-left: max(var(--gutter, 24px), calc((100vw - var(--wrap, 1320px)) / 2)); }
  .r3s:not(.is-live) .r3s__world[data-world="b"] > .r3s__plate { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; max-height: none; align-self: stretch; height: 100%; min-height: 560px; }
  /* the mask is on the picture and its ambient layers, never on the plate: the caption pill stays opaque (ENG2, caption AA) */
  .r3s:not(.is-live) .r3s__world[data-world="b"] > .r3s__plate > .r3s__media, .r3s:not(.is-live) .r3s__world[data-world="b"] > .r3s__plate > .r3s__ambient {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .r3s:not(.is-live) .r3s__world[data-world="b"] > .r3s__states { display: contents; }
  .r3s:not(.is-live) .r3s__world[data-world="b"] .r3x-p-list { grid-column: 1; grid-row: 1; padding-inline: 0; max-width: none; margin: 0; }
}
@media (min-width: 900px) and (max-width: 1099px) { .r3s:not(.is-live) .r3s__world[data-world="b"] .r3x-p-pr { grid-template-columns: minmax(0, 1fr); } .r3s:not(.is-live) .r3s__world[data-world="b"] .r3x-p-pr > .r3x-p-acc { grid-column: 1; margin-top: 16px; } }
@media (min-width: 1100px) { .r3s:not(.is-live) .r3s__world[data-world="b"] .r3x-p-pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .r3s:not(.is-live) .r3s__world[data-world="b"] .r3x-p-pr > .r3x-p-acc--pair { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; } }
@media (max-width: 899px) { .r3s:not(.is-live) .r3s__world[data-world="a"] > .r3s__open { margin-bottom: calc(var(--r3-fade, 96px) * .46 + 62px + (1rem - 16px) * 6); } }   /* the headline stands above the caption pill on phones and tablets (b6 fix54c: the pill grows with the text size) */
/* the plate's caption sits on its own plate (one pill, one anchor: bottom right of the band; panel P4-019) */
.r3s:not(.is-live) .r3s__world .r3s__meta { right: var(--gutter, 16px); bottom: calc(var(--r3-fade, 96px) * .46); }
@media (min-width: 900px) { .r3s:not(.is-live) .r3s__world[data-world="b"] .r3s__meta { right: max(var(--gutter, 24px), calc((100vw - var(--wrap, 1320px)) / 2)); bottom: 36px; } }

/* ---- LIVE: the copy over the plate (landscape: the left safe zone; portrait: the top zone) ---- */
.r3s.is-live .r3x-p-intro, .r3s.is-live .r3x-p-pr { padding: 0; border: 0; max-width: none; }
.r3s.is-live .r3x-p-num { font-size: clamp(4.6rem, min(15vh, 9vw), 10.5rem); margin: 0 0 .08em -.04em; }
.r3s.is-live .r3x-p-intro .r3a-kicker { margin: 0 0 .9em; color: var(--r3p-gold); }
.r3s.is-live .r3x-p-intro .r3s__t { margin: 0; font: 600 clamp(2.3rem, min(5vw, 9vh), 5.6rem)/1 var(--r3-f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; max-width: 9em; text-wrap: balance; color: var(--r3s-ink); }
.r3s.is-live .r3x-p-tail { margin: .8em 0 0; font: 600 clamp(1.4rem, min(2.5vw, 4.8vh), 2.4rem)/1.12 var(--r3-f-serif); letter-spacing: -.012em; font-variant-numeric: lining-nums; color: var(--ink-3); max-width: 14em; text-wrap: balance; }
.r3s.is-live .r3x-p-pr .r3s__t { margin: 0 0 .42em; font: 600 clamp(2.2rem, min(4.5vw, 8.2vh), 5.4rem)/1.02 var(--r3-f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; max-width: 9.5em; text-wrap: balance; color: var(--r3s-ink); }
.r3s.is-live .r3x-p-pr .r3s__d { margin: 0; font: 400 clamp(1.0625rem, calc(min(1.4vw, 2.7vh) + .3rem), 1.45rem)/1.55 var(--r3-f-text); color: var(--r3s-ink2); max-width: 24em; text-wrap: pretty; }
.r3s.is-live .r3x-p-acc { margin: clamp(16px, 3.2vh, 34px) 0 0; max-width: none; }
.r3s.is-live .r3x-p-acc--phones { display: grid; grid-template-columns: repeat(3, clamp(66px, 7.2vw, 108px)); gap: 10px; }
.r3s.is-live .r3x-p-acc--phones img { width: 100%; height: auto; aspect-ratio: 9 / 12.4; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 0 0 1px rgba(243, 240, 234, .2), 0 18px 36px -14px rgba(0, 0, 0, .7); }
.r3s.is-live .r3x-p-acc--phones img:nth-child(2) { transform: translateY(-10px); }
.r3s.is-live .r3x-p-acc--medal .r3x-p-acc__row { display: flex; gap: clamp(12px, 1.4vw, 20px); }
.r3s.is-live .r3x-p-acc--medal img { width: clamp(62px, 7.4vw, 112px); height: clamp(62px, 7.4vw, 112px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(220, 188, 126, .6), 0 0 0 7px var(--r3s-floor), 0 0 0 8px rgba(243, 240, 234, .22); }
.r3s.is-live .r3x-p-acc--pair .r3x-p-acc__row { position: relative; display: block; width: clamp(240px, 24vw, 380px); padding-bottom: 12%; }
.r3s.is-live .r3x-p-acc__b { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(243, 240, 234, .2), 0 24px 48px -18px rgba(0, 0, 0, .75); }
.r3s.is-live .r3x-p-acc__p { position: absolute; right: -6%; bottom: 0; width: 25%; height: auto; border-radius: 10px; box-shadow: 0 0 0 3px #0C0C0F, 0 16px 32px rgba(0, 0, 0, .55); }
.r3s.is-live .r3x-p-cap { margin-top: 10px; }
/* COMPOSITIONS (ENG2, CRIT-MOTION: "one title-plus-sentence slide repeated eight times"): the same words in four layouts of the safe zone. data-comp on a promise:
     poster   a short title at poster scale (5+ sidor), the sentence small under it
     tracked  the title is a small tracked word in gold, the sentence is the large serif line (Mythos00's tracked word over a bigger element)
     low / high  the block sits lower / higher in the zone (the subject moves in the frame, so does the copy)
   Only layout and type size change; every word stays in its element in reading order. Static state: none of this applies (.is-live only). */
.r3s.is-live .r3x-p-pr[data-comp="poster"] .r3s__t { font-size: clamp(3.6rem, min(8.6vw, 16vh), 9.5rem); line-height: .9; letter-spacing: -.035em; max-width: 7em; margin-bottom: .2em; }
.r3s.is-live .r3x-p-pr[data-comp="poster"] .r3s__d { font-size: clamp(1rem, calc(min(1.15vw, 2.2vh) + .3rem), 1.25rem); }
.r3s.is-live .r3x-p-pr[data-comp="tracked"] .r3s__t { font: 600 clamp(.95rem, min(1.25vw, 2.3vh), 1.25rem)/1.4 var(--r3-f-display, "Space Grotesk", sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--r3p-gold); margin: 0 0 1.1em; max-width: none; }
.r3s.is-live .r3x-p-pr[data-comp="tracked"] .r3s__d { font: 600 clamp(1.7rem, min(3.3vw, 6vh), 3.4rem)/1.12 var(--r3-f-serif); letter-spacing: -.015em; font-variant-numeric: lining-nums; color: var(--r3s-ink); max-width: 11em; text-wrap: balance; }
@media (orientation: landscape) {
  .r3s.is-live .r3x-p-pr[data-comp="low"] { top: 64%; }
  .r3s.is-live .r3x-p-pr[data-comp="high"] { top: 38%; }
}
@media (orientation: portrait) {
  .r3s.is-live .r3x-p-pr[data-comp="poster"] .r3s__t { font-size: clamp(3.2rem, min(21vw, 8vh), 5.6rem); max-width: none; }
  .r3s.is-live .r3x-p-pr[data-comp="tracked"] .r3s__t { font-size: clamp(.85rem, 3.6vw, 1.1rem); max-width: none; }
  .r3s.is-live .r3x-p-pr[data-comp="tracked"] .r3s__d { font-size: clamp(1.6rem, min(7.6vw, 4.6vh), 2.3rem); max-width: 12em; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .r3s.is-live .r3x-p-pr[data-comp="poster"] .r3s__t { font-size: clamp(2.6rem, 13vh, 3.6rem); }
  .r3s.is-live .r3x-p-pr[data-comp="tracked"] .r3s__d { font-size: clamp(1.3rem, 7vh, 1.8rem); }
  .r3s.is-live .r3x-p-pr[data-comp="low"], .r3s.is-live .r3x-p-pr[data-comp="high"] { top: 50%; }
}
/* portrait + landscape-phone windows: the copy is smaller, the accessories keep to what fits (a picture never pushes the sentence out of its zone) */
@media (orientation: portrait) {
  .r3s.is-live .r3x-p-num { font-size: clamp(3.6rem, min(9.5vh, 19vw), 6rem); }
  .r3s.is-live .r3x-p-intro .r3s__t { font-size: clamp(2.1rem, min(9.4vw, 5.2vh), 3.2rem); }
  .r3s.is-live .r3x-p-tail { font-size: clamp(1.15rem, 5.6vw, 1.5rem); max-width: none; }
  .r3s.is-live .r3x-p-pr .r3s__t { font-size: clamp(2rem, min(9vw, 5vh), 3rem); max-width: none; }
  .r3s.is-live .r3x-p-pr .r3s__d { font-size: clamp(1rem, 4.3vw, 1.2rem); max-width: 30em; }
  .r3s.is-live .r3x-p-acc--phones { grid-template-columns: repeat(3, clamp(54px, 15vw, 84px)); gap: 8px; }
  .r3s.is-live .r3x-p-acc--medal img { width: clamp(52px, 14vw, 74px); height: clamp(52px, 14vw, 74px); }
  .r3s.is-live .r3x-p-acc--pair .r3x-p-acc__row { width: min(64vw, 280px); }
}
@media (orientation: portrait) { .r3s.is-live .r3x-p-acc--pair { display: none; } }   /* the booking pair would lie over the face in the portrait plate: the copy stays in its zone, the picture stays whole */
@media (orientation: portrait) and (max-height: 700px) { .r3s.is-live .r3x-p-acc, .r3s.is-live .r3x-p-intro .r3x-p-tail { display: none; } .r3s.is-live .r3x-p-num { font-size: 3.2rem; } }
@media (max-height: 520px) and (orientation: landscape) {
  .r3s.is-live .r3x-p-num { font-size: 3.4rem; }
  .r3s.is-live .r3x-p-intro .r3s__t { font-size: clamp(1.7rem, 7.4vh, 2.4rem); }
  .r3s.is-live .r3x-p-tail { font-size: 1.1rem; }
  .r3s.is-live .r3x-p-pr .r3s__t { font-size: clamp(1.6rem, 7.4vh, 2.3rem); margin-bottom: .3em; }
  .r3s.is-live .r3x-p-pr .r3s__d { font-size: .9375rem; line-height: 1.45; }
  .r3s.is-live .r3x-p-acc { display: none; }
}
@media (min-height: 560px) and (max-height: 760px) and (orientation: landscape) { .r3s.is-live .r3x-p-acc { margin-top: 12px; } .r3s.is-live .r3x-p-num { font-size: clamp(3.6rem, 11vh, 5.4rem); } }
/* SVH FALLBACK (panel P4-144): a window without svh units keeps the pin at 100vh through the token chain in r3-stage.css (--r3s-vh) */

/* ENG3F (round 3c fix pass, David's red flag, critics MAJOR): world A in every PORTRAIT window = the whole flame in its own 3:2 frame, with air around it.
   The picture is now the 3:2 window of the flame (r3-g-flame-a-*.webp, r3-flame-a-960.mp4: the pan complete, the flames on both sides, the stove below), engine option data-fit="air all" (r3-stage.css section 12).
   Phones, portrait tablets (768x1024 included): the caption and the pause control stand in the strip UNDER the picture, on the floor above the dock, never on the base of the flames. */
/* the frame of world A (engine data-fit="air all"): the lift above the foot, the melt of its top and of its foot. Landscape tablets (4:3) keep the values they always had (16:9 window, 56 px above the foot). */
@media (orientation: landscape) { .r3s__world[data-world="a"] { --r3s-air-b: calc(56px + env(safe-area-inset-bottom, 0px)); --r3s-air-f: 28%; } }
@media (orientation: portrait) { .r3s__world[data-world="a"] { --r3s-air-b: calc(146px + env(safe-area-inset-bottom, 0px)); --r3s-air-f: 34%; --r3s-air-fb: 16%; } }
@media (orientation: portrait) {
  .r3s.is-live .r3s__world[data-world="a"] .r3s__meta { left: var(--gutter, 16px); right: var(--gutter, 16px); bottom: calc(98px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 8px; }
  .r3s.is-live .r3s__world[data-world="a"] .r3s__meta .r3p-credit { flex: 0 1 auto; min-width: 0; max-width: 13.2em; padding: 6px 13px; border-radius: 20px; font-size: .8125rem; line-height: 1.25; }
  .r3s.is-live .r3s__world[data-world="a"] .r3s__meta .r3p-film__btn { flex: none; }
}
@media (orientation: portrait) and (min-width: 600px) { .r3s.is-live .r3s__world[data-world="a"] .r3s__meta .r3p-credit { max-width: none; } }
/* portrait tablets (600 px and wider, 800 px and taller; 768x1024, 810x1080, 820x1180): the copy was set for a phone and stood small in a wide window; one step up, the same words in the same compositions */
@media (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .r3s.is-live .r3x-p-intro .r3s__t { font-size: clamp(2.8rem, 6.2vw, 4.4rem); }
  .r3s.is-live .r3x-p-tail { font-size: clamp(1.5rem, 3.3vw, 2.2rem); }
  .r3s.is-live .r3x-p-pr .r3s__t { font-size: clamp(2.6rem, 5.8vw, 4.2rem); }
  .r3s.is-live .r3x-p-pr .r3s__d { font-size: clamp(1.2rem, 2.3vw, 1.6rem); }
  .r3s.is-live .r3x-p-pr[data-comp="poster"] .r3s__t { font-size: clamp(5rem, 13vw, 8.4rem); }
  .r3s.is-live .r3x-p-pr[data-comp="tracked"] .r3s__t { font-size: clamp(1rem, 1.7vw, 1.3rem); }
  .r3s.is-live .r3x-p-pr[data-comp="tracked"] .r3s__d { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
  .r3s.is-live .r3x-p-acc--phones { grid-template-columns: repeat(3, clamp(84px, 11vw, 132px)); gap: 12px; }
  .r3s.is-live .r3x-p-acc--medal img { width: clamp(72px, 10vw, 104px); height: clamp(72px, 10vw, 104px); }
}
/* the static band on phones (reduced motion, no JS): the picture is the whole 3:2 window on top of the band, melted into the floor; the headline stands on the floor under it */
@media (orientation: portrait) and (max-width: 699px) {
  .r3s:not(.is-live) .r3s__world[data-world="a"] > .r3s__plate { aspect-ratio: 5 / 6; max-height: none; }
  .r3s:not(.is-live) .r3s__world[data-world="a"] > .r3s__plate > .r3s__media { inset: 0 0 auto 0; height: auto; aspect-ratio: 3 / 2; }
  .r3s:not(.is-live) .r3s__world[data-world="a"] > .r3s__plate .r3s__media img { object-position: 50% 50%; }
}


/* ================================ 3. CHAPTER 02: two examples, one stage (Proof Stage on a photographic atmosphere) ================================ */
/* ================================ 4. CHAPTER 02: two examples, one stage (Proof Stage on a photographic atmosphere) ================================ */
.r3x-p-s2 { padding-bottom: 112px; }   /* the atmosphere fades out >= 110 px above the next plane's blend (boundary_check: no lighter-then-darker band across the join) */
.r3x-p-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; margin-bottom: clamp(22px, 3vw, 40px); }
.r3x-p-head .r3-n { margin: 0 0 10px; }
.r3x-p-head .r3-lead { max-width: 23em; }
/* FIX ROUND 2, F-47 (panel 3 static: "the '02' sits directly behind 'Två exempel' and makes double letterforms"). Root cause: the foundation anchors the ghost numeral at -.34em of ITS OWN size (448 px at
   1440), so more than half of the digit's height lies behind the heading's first line. Here the numeral is offset: 0.42 of the foundation size and its foot ends 26 px ABOVE the heading's top edge
   (clear of the small "02" label too), so it stands over the title, not behind it. It must also stay inside its own plane (the held sheet above paints over anything that pokes up: the first try, 0.62 / 46 px,
   was cut in half at chapter 02), so size + offset fit the plane's top padding (fade 140 / 120 / 96 px + the label) at 1440, 1024 and 390. Same for 03. Still decorative, aria-hidden, 6 % ink. */
.r3x-p-s2 [data-r3a-ghost]::before, .r3x-p-s3 [data-r3a-ghost]::before { font-size: calc(var(--r3-t-ghost) * .42); left: -.05em; top: calc(-.74em - 26px); }
/* the example names are the tabs: two large serif words, the lit one in ink with a short gold bar (W-72 grammar on W-94's crossfade) */
.r3x-p-tabs { display: flex; gap: clamp(22px, 4vw, 64px); padding: 0; background: none; border-radius: 0; overflow: visible; margin-bottom: clamp(22px, 3.2vw, 44px); }
.r3x-p-tabs .r3x-p-tab { position: relative; min-height: 48px; padding: 4px 0 14px; border-radius: 0; background: none; color: var(--ink-3); font: 600 clamp(2.1rem, 1.1rem + 3.5vw, 4.5rem)/1 var(--r3-f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.r3x-p-tabs .r3x-p-tab[aria-selected="true"] { background: none; color: var(--ink); }
.r3x-p-tabs .r3x-p-tab::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.4rem; height: 3px; border-radius: 2px; background: var(--r3x-gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--r3-ease); }
.r3x-p-tabs .r3x-p-tab[aria-selected="true"]::after { transform: none; }
.r3x-p-tabs .r3x-p-tab:hover { color: var(--ink-2); }
.r3x-p-tabs .r3x-p-tab[aria-selected="true"]:hover { color: var(--ink); }
.r3x-p-tabs .r3x-p-tab:focus-visible { outline: 2px solid var(--r3x-gold); outline-offset: 6px; box-shadow: none; border-radius: 6px; }
.r3x-p-sites { position: relative; }
.r3x-p-ex { position: relative; min-width: 0; }
.r3x-p-ex__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 56px; }
.r3x-p-ex__grid > * { min-width: 0; }
/* the photographic atmosphere of THIS example (a blurred photograph of the same project, 480 px, scaled; no live blur): full-bleed behind the panel, its top and bottom dissolve into the void */
.r3x-p-atmos { position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: -9%; bottom: 22px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 62%, transparent 100%); }
.r3x-p-atmos img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
/* ENG2 (CRIT-MOTION: the examples scene was a still, motion energy 0.00): the photographic atmosphere drifts very slowly and the stage glow breathes (transform / opacity only, nothing under reduced motion) */
html:not(.no-motion) .r3x-p-atmos img { animation: r3x-atmos 52s ease-in-out infinite alternate; }
html:not(.no-motion) .r3x-p-stage__glow { animation: r3x-glow 9s ease-in-out infinite alternate; }
@keyframes r3x-atmos { from { transform: scale(1.12) translate3d(-1.6%, 0, 0); } to { transform: scale(1.2) translate3d(1.6%, -1.2%, 0); } }
@keyframes r3x-glow { from { opacity: .7; } to { opacity: 1; } }
.r3x-p-atmos::after { content: ""; position: absolute; inset: 0; background: rgba(12, 12, 15, var(--r3x-atmos-dim, .46)); }   /* .38 -> .46: the glow behind the aside reached (102,61,32); labels need AA over its brightest pixel */
.r3x-p-stage { position: relative; isolation: isolate; }
.r3x-p-stage__glow { position: absolute; inset: -10% -6% -16%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--r3-glow), .28), rgba(var(--r3-glow), 0)); }
.r3x-p-pair { --r3-pp: 1; }
.r3x-p-browser { --r3-bar: 36px; }
.r3x-p-pair > .r3-dev--phone .r3-dev__page { height: 100%; }
.r3x-p-pair > .r3-dev--phone .r3-dev__shot { height: 100%; object-fit: fill; }   /* the capture fills the screen edge to edge (3 % taller than its source, not visible): nothing is cropped at the sides, no gap at the foot */
.r3x-p-pair > .r3-dev--phone .r3-dev__view::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; background: linear-gradient(180deg, rgba(12, 12, 15, 0), rgba(12, 12, 15, .5) 36%, rgba(12, 12, 15, .97) 74%, #0C0C0F 100%); }
.r3x-p-pages > .r3-panel { display: grid; align-content: start; }
.r3x-p-wait .r3-pair { opacity: 0; }
.r3x-p-pages > .r3-panel .r3-pair { transition: opacity .35s var(--r3-ease-in); }
.r3x-p-chips { display: flex; gap: 12px; padding: 14px 2px 6px; }
.r3x-p-chips .r3-chip--page { flex: 1 1 0; width: auto; min-width: 84px; gap: 10px; }
.r3x-p-chips .r3-chip--page .r3-chip__img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: #1A1A21; }
.r3x-p-chips .r3-chip { font-size: .8125rem; color: var(--ink-2); }
.r3x-p-chips .r3-chip[aria-selected="true"] { color: var(--ink); }
.r3x-p-chips .r3-chip[aria-selected="true"] .r3-chip__img { box-shadow: 0 0 0 2px var(--r3x-gold), 0 10px 26px rgba(0, 0, 0, .35); }
.r3x-p-chips .r3-chip:focus-visible { outline: 2px solid var(--r3x-gold); outline-offset: 3px; }
.r3x-p-aside { display: grid; gap: 14px; align-content: start; }
.r3x-p-aside .r3-h3 { font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); line-height: 1; }
.r3x-p-aside .r3-spec { margin-top: 6px; gap: 10px 22px; }
/* spec labels: the foundation's ink-3 (#A7A298) measured 3.39:1 ("Bokning") and 4.49:1 ("Rörligt") over the warm Glöd glow (panel 2, engineer). The stage is dark in both themes; the labels take a light warm grey */
.r3x-p-aside .r3-spec dt { color: #D6D0C3; }
.r3x-p-aside .r3-small { color: var(--ink-2); }
.r3x-p-aside .r3-link { display: inline-block; }
.r3x-p-aside__ask { display: grid; gap: 16px; margin-top: 14px; justify-items: start; }
.r3x-p-aside__ask .r3-btn { max-width: 100%; }
@media (min-width: 1100px) {
  .r3x-p-ex__grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 33vw, 460px); align-items: start; }   /* the stage is the flexible column (824 px at 1440; was 886: the two stacked examples were 120 px taller) */
  .r3x-p-aside { position: sticky; top: calc(var(--r3x-nav) + 28px); padding-top: 8px; }
}
/* FIX ROUND 2, the 1024x768 height (8321 -> <= 7960): between 900 and 1099 px the facts column stands BESIDE the stage (it only did from 1100 px), so the two stacked examples of the static page no longer
   carry a full-width browser frame (549 px tall at 1024) plus a block of facts under it each. The stage keeps the flexible column. */
@media (min-width: 900px) and (max-width: 1099px) {
  .r3x-p-ex__grid { grid-template-columns: minmax(0, 1fr) clamp(290px, 31vw, 330px); gap: 24px 28px; align-items: start; }
  .r3x-p-aside { padding-top: 4px; }
  .r3x-p-aside .r3-h3 { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.4rem); }
  .r3x-p-aside .r3-spec { gap: 8px 16px; }
  .r3x-p-aside__ask .r3-btn { --h: 52px; --fs: .9375rem; --px: 18px; width: 100%; }   /* the full label is never clipped */
}
@media (max-width: 767px) {
  .r3x-p-aside__ask { display: none; }
  .r3x-p-solo > .r3-dev { display: block !important; }
  .r3x-p-pages > .r3-panel { align-content: center; }
  .r3x-p-chips .r3-chip--page { flex: 0 0 104px; }
  .r3x-p-ex__grid { gap: 22px; }
}
/* STATIC (no motion, or no JavaScript): BOTH examples are on the page, one under the other, each with its own atmosphere, stage, chips and facts (panel finding 4) */
html.no-motion .r3x-p-tabs, html:not(.js) .r3x-p-tabs { display: none; }
html.no-motion .r3x-p-sites > .r3-panel { grid-area: auto; opacity: 1; visibility: visible; scale: 1; pointer-events: auto; transition: none; }
html.no-motion .r3x-p-sites > .r3-panel + .r3-panel, html:not(.js) .r3x-p-sites > .r3-panel + .r3-panel { margin-top: clamp(36px, 3.2vw, 46px); }
/* no JavaScript: the six page thumbnails cannot switch anything, so they are a picture strip, not buttons */
html:not(.js) .r3x-p-chips { pointer-events: none; }
html:not(.js) .r3x-p-pages > .r3-panel:not(:first-child) { display: none; }
html:not(.js) .r3x-p-pages > .r3-panel { margin-bottom: 0; }
html:not(.js) .r3x-p-sites > .r3-panel { margin-bottom: 0; }

/* ================================ 4. CHAPTER 03: the comparison + the limits line BEFORE the ask ================================ */
/* ================================ 5. CHAPTER 03: the comparison + the limits line BEFORE the ask ================================ */
.r3x-p-s3 { padding-bottom: 24px; }   /* the ask plane's own blend (--r3-fade) follows; no extra air needed */
.r3x-p-s3__head { margin-bottom: clamp(20px, 2.4vw, 32px); }
.r3x-p-s3__head .r3-n { display: block; margin: 0 0 10px; }
.r3x-p-s3 .r3a-poster--h2 { max-width: 12em; }
.r3x-p-vs { margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font: 400 1.0625rem/1.5 var(--r3-f-text); }
.r3x-p-vs th, .r3x-p-vs td { padding: 18px 24px 18px 0; vertical-align: baseline; }
.r3x-p-vs thead th { padding-block: 18px 16px; font: 600 .9375rem/1.3 var(--r3-f-display); color: var(--ink-3); border-bottom: 1px solid var(--line); }
.r3x-p-vs thead th .r3-tier__bar { display: inline-grid; vertical-align: middle; margin-right: 10px; transform: translateY(-1px); }
.r3x-p-vs thead th .r3-tier__bar i { width: 13px; }
.r3x-p-th--g .r3-tier__bar i:nth-child(-n+2) { background: var(--accent); }
.r3x-p-th--p .r3-tier__bar i { background: var(--gold); }
.r3x-p-vs tbody th { width: 24%; font: 500 .9375rem/1.5 var(--r3-f-text); color: var(--ink-3); }
.r3x-p-vs td { width: 30%; color: var(--ink-2); }
.r3x-p-vs thead th[data-current] { color: var(--gold); }
.r3x-p-vs [data-current] { padding-left: 28px; padding-right: 28px; background: var(--r3-wash); }
@supports (color: color-mix(in srgb, red 10%, blue)) { .r3x-p-vs [data-current] { background: color-mix(in srgb, var(--gold) 11%, transparent); } }
.r3x-p-vs thead th[data-current] { border-radius: 20px 20px 0 0; border-bottom-color: var(--line); }
.r3x-p-vs tbody tr:last-child td[data-current] { border-radius: 0 0 20px 20px; }
.r3x-p-vs td.r3-prem { font: 600 clamp(1.45rem, 1.05rem + 1vw, 2.15rem)/1.12 var(--r3-f-serif); font-variant-numeric: lining-nums; letter-spacing: -.01em; color: var(--ink); }   /* the font shorthand resets the variant: lining figures again */
.r3x-p-vs td .r3-price__u { color: var(--ink-2); }
.r3x-p-vs td .r3-price__n { color: var(--ink); }
.r3x-p-vs tbody tr:last-child th, .r3x-p-vs tbody tr:last-child td { border-bottom: 0; }
/* the limits BEFORE the ask (panel finding 3). FIX ROUND 2, F-45 (buyer: "'Ingår inte i något paket' is a small strip, harder to scan than LC-R2's chip rows"): the label stands on its own line in the
   serif, the five items under it are CHIPS (16 px / 500, 44 px tall, a soft wash, no rules), then the LC-R2 sentence at body size. Same words as LC-R2's "Gränser" block. Chips wrap, so 320 px
   shows them two or three to a row and 1440 shows all five on one line. */
.r3x-p-limits { display: block; margin-top: clamp(40px, 5vw, 72px); max-width: none; color: var(--ink-2); }
.r3x-p-limits__t { margin: 0 0 clamp(14px, 1.6vw, 22px); font: 600 clamp(1.45rem, 1.1rem + 1vw, 2rem)/1.1 var(--r3-f-serif); letter-spacing: -.012em; font-variant-numeric: lining-nums; color: var(--ink); }
.r3x-p-limits__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.r3x-p-limits__l > li { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border-radius: 999px; background: var(--r3-wash); font: 500 1rem/1.3 var(--r3-f-text); color: var(--ink); }
.r3x-p-limits__note { margin: 18px 0 0; max-width: 40em; font: 400 1rem/1.5 var(--r3-f-text); color: var(--ink-2); }
@media (max-width: 480px) { .r3x-p-limits__l { gap: 8px; } .r3x-p-limits__l > li { min-height: 40px; padding: 6px 15px; font-size: .9375rem; } }   /* 15 px: two chips to a row at 390 */
/* phones: stacked cards, Premium rows tinted, never behind a plus (panel finding 5) */
@media (max-width: 767px) {
  .r3x-p-vs { margin-top: 4px; }
  .r3x-p-vs thead { display: none; }
  .r3x-p-vs tbody tr { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
  .r3x-p-vs tbody tr:last-child { border-bottom: 0; }
  .r3x-p-vs th, .r3x-p-vs td { display: block; width: auto !important; border: 0 !important; padding: 2px 0; }
  .r3x-p-vs tbody th { font-size: .9375rem; padding-bottom: 6px; }
  .r3x-p-vs td[data-l]::before { content: attr(data-l); display: block; font: 500 .8125rem/1.6 var(--r3-f-text); color: var(--ink-3); }
  .r3x-p-vs td[data-current] { margin-top: 8px; padding: 12px 14px 14px; border-radius: 14px !important; }
  .r3x-p-vs td.r3-prem { font-size: 1.5rem; }
  .r3x-p-vs td[data-current]::before { color: var(--gold); }
}
/* b6 fix94: the same stacked cards by the width of the table region (rem) */
@container r3tbl (max-width: 28rem) {
  .r3-tblscroll > .r3-table.r3x-p-vs { min-width: 0; }
  .r3x-p-vs { margin-top: 4px; }
  .r3x-p-vs thead { display: none; }
  .r3x-p-vs tbody tr { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
  .r3x-p-vs tbody tr:last-child { border-bottom: 0; }
  .r3x-p-vs th, .r3x-p-vs td { display: block; width: auto !important; border: 0 !important; padding: 2px 0; }
  .r3x-p-vs tbody th { font-size: .9375rem; padding-bottom: 6px; }
  .r3x-p-vs td[data-l]::before { content: attr(data-l); display: block; font: 500 .8125rem/1.6 var(--r3-f-text); color: var(--ink-3); }
  .r3x-p-vs td[data-current] { margin-top: 8px; padding: 12px 14px 14px; border-radius: 14px !important; }
  .r3x-p-vs td.r3-prem { font-size: 1.5rem; }
  .r3x-p-vs td[data-current]::before { color: var(--gold); }
}

/* ================================ 5. THE ASK: a FREE living plate (the dessert of Glöd; media first, then the question, the price, the gold button) ================================ */
/* G-45 media-first build-in + G-113 clean plate: the photograph settles first (engine: .r3s--free.is-on), then the words arrive one by one. Phones: copy and ask first, the photograph after it.
   The plate's own black is the page floor, its edges dissolve (mask), a warm light breathes over it and warm dust drifts in the dark. */
.r3x-p-s4 { padding-bottom: 0; background-color: var(--r3-floor); color: var(--r3p-ink); overflow-x: clip; }
.r3x-p-ask.r3s { background: transparent; }
.r3x-p-s4__stage { position: relative; width: 100%; max-width: calc(var(--wrap, 1320px) + 2 * var(--gutter, 16px)); margin-inline: auto; padding: 0 var(--gutter, 16px) clamp(8px, 3vw, 32px); display: flex; flex-direction: column; }
.r3x-p-s4__copy { position: relative; z-index: 2; min-width: 0; }
.r3x-p-s4__copy .r3-label { color: var(--r3p-gold); margin-bottom: 14px; }
.r3x-p-s4__q { margin: 0; font: 600 clamp(2.7rem, 1.6rem + 4.4vw, 4.5rem)/.94 var(--r3-f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; text-wrap: balance; color: var(--r3p-ink); }
.r3x-p-s4__lead { margin: 16px 0 0; color: var(--r3p-ink-2); max-width: 30em; }
.r3x-p-s4__ask { margin: 28px 0 0; display: grid; gap: 18px; justify-items: start; }
.r3x-p-s4__ask .r3-price__n { color: var(--r3p-ink); } .r3x-p-s4__ask .r3-price__u { color: var(--r3p-ink-2); }
.r3x-p-s4__alt { margin: 0; color: var(--r3p-ink-2); }
.r3x-p-s4__alt .r3-link { color: var(--r3p-ink); text-decoration-color: rgba(243, 240, 234, .4); }
.r3x-p-s4__plate.r3s__plate { position: relative; z-index: 1; margin: 30px calc(-1 * var(--gutter, 16px)) 0; width: auto; aspect-ratio: 1 / 1.06; max-height: none; background: transparent; }   /* ENG2: width auto, so the negative margins really carry the photograph to the window edges (the engine's width:100% kept it inside the gutters: a 32 px black strip and a hard right edge on the phone, 60 px at 1440) */
/* ENG2: the dissolve is on the picture and its light/dust, the caption pill is NOT in it (it measured 3.5:1 where the plate mask faded it) */
.r3x-p-s4__plate.r3s__plate > .r3s__media, .r3x-p-s4__plate.r3s__plate > .r3s__ambient { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%); }
.r3x-p-s4__plate .r3s__ambient { display: block; }
.r3x-p-s4__plate .r3s__cv { display: block; }
.r3x-p-s4__plate .r3s__media img { object-position: 50% 60%; }
.r3x-p-s4__glow { background: radial-gradient(40% 46% at 50% 54%, rgba(255, 170, 90, .22), rgba(255, 150, 70, 0) 72%) !important; }
.r3x-p-s4__plate .r3-plate-cap { position: absolute; z-index: 6; left: auto; right: var(--gutter, 16px); bottom: 12px; }
@media (min-width: 700px) {
  .r3x-p-s4__stage { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 72px); align-items: center; padding-bottom: clamp(24px, 3vw, 40px); }
  .r3x-p-s4__ask .r3-btn { --h: 58px; --fs: 1.0625rem; }
  .r3x-p-s4__plate.r3s__plate { margin: 0 calc(-1 * max(var(--gutter, 24px), (100vw - var(--wrap, 1320px)) / 2)) 0 0; aspect-ratio: auto; height: clamp(520px, 44vw, 660px); }
  .r3x-p-s4__plate.r3s__plate > .r3s__media, .r3x-p-s4__plate.r3s__plate > .r3s__ambient {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .45) 26%, #000 48%), linear-gradient(180deg, transparent 0, #000 20%, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .45) 26%, #000 48%), linear-gradient(180deg, transparent 0, #000 20%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .r3x-p-s4__plate .r3s__media img { object-position: 50% 56%; }
  .r3x-p-s4__plate .r3-plate-cap { bottom: 38px; }
}
@media (min-width: 1100px) { .r3x-p-s4__ask .r3-btn { --h: 64px; --fs: 1.1875rem; } }
html.no-motion .r3x-p-s4__plate .r3s__ambient { display: none; }


/* ================================ 6. COLOPHON: the terms, after the ask, quiet ================================ */
/* ================================ 7. COLOPHON: the terms, after the ask, quiet ================================ */
.r3x-p-s5 { padding-top: calc(var(--r3-fade) + 8px); padding-bottom: clamp(48px, 6vw, 72px); }
.r3x-p-s5c { display: grid; gap: 18px clamp(32px, 6vw, 96px); align-items: start; }
.r3x-p-s5c .r3-h3 { font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.6rem); }
.r3x-p-s5c .r3-body { max-width: 40em; }
.r3x-p-s5c__s { margin-top: 14px; max-width: 40em; }
.r3x-p-s5c__l { margin: 16px 0 0; }
@media (min-width: 900px) { .r3x-p-s5c { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); } }

/* ================================ 8. DOCK + SHORT WINDOWS ================================ */
/* OVERRIDE of r3-tokens.css section 3 (FOUNDATION_REQUEST): the <= 340 px rule that lets a rolling label wrap sits BEFORE the base .r3-roll rules in the file, so the base height:1.2em wins and a
   wrapped second line is clipped: at 320 px the hero button read "Be om en kostnadsfri" (looked at 320x568 at 2x). The same rules, after the base, here: the full label is never clipped. */
@media (max-width: 340px) {
  .r3-roll .r3-btn__t { height: auto; flex-direction: row; }
  .r3-roll .r3-btn__t > span { height: auto; }
  .r3-roll .r3-btn__t > span + span { display: none; }
}
@media (max-width: 1099px) { .r3x-p-s2 .r3x-p-head { margin-bottom: 18px; } }
@media (min-width: 1100px) and (max-height: 700px) {
  .r3x-p-chips { padding-top: 12px; }
  .r3x-p-tabs .r3x-p-tab { font-size: clamp(2rem, 1rem + 3vw, 3.4rem); }
}
/* ENG2 (CRIT-TECH MAJOR/MINOR, focus drawn mid-reveal): a keyboard visitor who tabs to a control inside a reveal that has not played yet (the colophon link, the facts, the ask) gets it at once, in full */
html.lib-on .tier-premium .r3-rise:focus-within { opacity: 1 !important; transform: none !important; transition: none !important; }
/* reduced motion: nothing here animates on scroll; the hover and tab transitions are removed */
html.no-motion .r3x-p-tabs .r3x-p-tab::after, html.no-motion .r3x-p-led > li, html.no-motion .r3x-p-led > li::after, html.no-motion .r3x-p-led .r3a-ledger__t, html.no-motion .r3x-p-led .r3a-ledger__d,
html.no-motion .r3x-p-deck > .r3x-p-l, html.no-motion .r3x-p-pages > .r3-panel .r3-pair { transition: none !important; }
html.no-motion .r3x-p-dim { opacity: 0; }
/* the dock is DARK in both themes on this page: it floats over dark planes almost everywhere (hero, film, chapters, examples); the foundation's cream dock in the light theme put a cream
   fade over the hero's light lead text (pixel QA: 4.01:1 FAIL at 390, light, y 0). The gold ask is the same gold on it in both themes. */
.r3p-dock { --bg: #0C0C0F; --ink: #F3F0EA; --ink-2: #CFCAC1; --ink-3: #A7A298; }
[data-theme="light"] .r3p-dock .r3-btn { background: #DCBC7E; color: #141317; }
[data-theme="light"] .r3p-dock .r3-btn:hover { background: #E7CB93; }
/* dock: the unit is 12 px (the foundation's 11 px measured 4.91:1 in the light theme under the dock's fade) and full ink */
.r3p-dock .r3-price__u { font-size: .8125rem; color: var(--ink); }

/* ================================ 8. LIGHT THEME (panel P4-079: no dark rounded cards with a crisp edge on the cream page) ================================ */
/* The dark scenes of this page (hero, the living-plate scene, the two examples, the ask) are FULL-BLEED bands that blend into the cream neighbours over the foundation fade (140 px desktop / 120 tablet /
   96 phone) through the warm bloom (r3-tokens.css: .r3-plane + .r3-bloom-l); there is no slab, no radius, no cast shadow. The old slab rules of r3-light.css name classes this page no longer uses. */
[data-theme="light"] main#innehall.tier-premium .r3x-p-s2 { --r3-from: var(--r3-c-void); --r3-bloom-on: 0; }
[data-theme="light"] main#innehall.tier-premium .r3x-p-s3 { --r3-from: var(--r3-c-void); --r3-bloom-on: 1; }
[data-theme="light"] main#innehall.tier-premium .r3x-p-s4 { --r3-from: var(--r3-c-lift); --r3-bloom-on: 1; }
[data-theme="light"] main#innehall.tier-premium .r3x-p-s5 { --r3-from: var(--r3-c-void); --r3-bloom-on: 1; }
/* the dark bands re-scope the print / device mats of the foundation (they are written for a LIGHT ground) */
[data-theme="light"] :is(.r3x-p-s2, .r3x-p-s4, .r3s) .r3-print { background: #26262E; box-shadow: 0 0 0 1px rgba(243, 240, 234, .16), inset 0 1px 0 rgba(255, 255, 255, .14), 0 6.4px 11.5px rgba(0, 0, 0, .16), 0 46px 80px -30px rgba(var(--r3-glow), .30); }
[data-theme="light"] :is(.r3x-p-s2, .r3x-p-s4, .r3s) .r3-dev { box-shadow: 0 0 0 1px rgba(243, 240, 234, .14), inset 0 1px 0 rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(0, 0, 0, .75), 0 30px 100px -34px rgba(var(--r3-glow), .30); }

/* portrait: the grey second clause of the intro is lighter (the plate under it is a little brighter with the smaller shift): AA with margin */
@media (orientation: portrait) { .r3s.is-live .r3x-p-tail { color: var(--ink-2); } }

/* ================================ 10. GLÖD PHONE MOCK (panel P4-133) ================================ */
/* the Glöd start capture is 420 x 1047 (taller than the phone frame, 9 : 19.5): it was squeezed to fit and ended in about 120 px of empty dark screen. Now a slightly taller frame and an undistorted crop from the top:
   the capture ends inside its content (the opening hours), nothing is stretched. */
#m2-glod .r3x-p-pair > .r3-dev--phone { aspect-ratio: 9 / 18.5; }
#m2-glod .r3x-p-pair > .r3-dev--phone .r3-dev__view::after { height: 9%; }
#m2-glod .r3x-p-pair > .r3-dev--phone .r3-dev__shot { object-fit: cover; object-position: 50% 0; }

/* b6 G1 M-07: plate caption clears the dashes */
@media (orientation: portrait) {
  .r3s.is-live .r3s__world[data-world="a"] .r3s__meta { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .r3s.is-live .r3s__world[data-world="b"] .r3s__meta { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); justify-content: flex-end; }
  .r3s.is-live .r3s__world[data-world="b"] .r3s__meta .r3p-credit { flex: 0 1 auto; min-width: 0; max-width: 14.2em; padding: 6px 13px; border-radius: 20px; font-size: .8125rem; line-height: 1.25; }
}
@media (orientation: portrait) and (min-width: 600px) {
  .r3s.is-live .r3s__world[data-world="b"] .r3s__meta .r3p-credit { max-width: none; }
}

/* b6 G7 M-09: plate left edge */
@media (min-width: 1100px) {
  .r3x-p-s4__plate.r3s__plate > .r3s__media, .r3x-p-s4__plate.r3s__plate > .r3s__ambient {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .45) 26%, #000 48%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .45) 26%, #000 48%);
  }
}

/* b6 long30: long words break at the edge */
.r3x-p-s5c h2, .r3x-p-s5c p, .r3x-p-s5c li { overflow-wrap: anywhere; }

/* b6 fix1 TYP-10: premium lead */
.r3p-hero__lead { text-wrap: balance; }

/* b6 fix89 premium */
/* b6 fix89 premium: the comparison row header has room for 'Revideringar' at 150 % text */
@media (min-width: 768px) { .r3x-p-vs tbody th { padding-right: 10px; } }

/* b6 fix94 premium */
/* b6 fix94 premium: the aside is a size container; under 10 rem (320 px at 200 %) the spec list puts each label above its value ('Restauran|g') */
.r3x-p-aside{container:r3asd / inline-size}
/* the table region is a container now, so the table's 4 px top margin (phones) no longer collapses through it: the region carries it */
@media (max-width:767px){.r3-tblscroll > .r3x-p-vs{margin-top:0}.r3-tblscroll:has(> .r3x-p-vs){margin-top:4px}}
@container r3asd (max-width:10rem){.r3x-p-aside .r3-spec{grid-template-columns:minmax(0,1fr);gap:0}.r3x-p-aside .r3-spec dd{margin-bottom:6px}}