/* =====================================================================
   LAAS · Ring-Lock
   A light product page with one real 3D lock fixed behind it. It opens on
   the logo laser-marked on the lock, steps back to the whole ring, then
   stops at four things: Keyless, Find My, Varefakta and Will it fit. It
   ends on buying. Every chapter is a full screen and the scroll stops at
   each one. LAAS Brand Design v1.0:

   Chalk #ECECEA is the page · Ink #202F30 carries the type
   Deep Teal #1D5F63 is the one filled button · Pale Teal #9BCDD0 is the small accent
   Poppins for display · Inter for everything that is read
   ===================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/inter-400-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/inter-400-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/poppins-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper:    #ECECEA;   /* Chalk: the page */
  --card:     #FFFFFF;   /* what sits on the page */
  --ink:      #202F30;   /* all type */
  --ink-2:    #213D35;   /* long copy */
  --muted:    #606A74;   /* the second tone */
  --line:     rgba(32, 47, 48, .2);   /* dashed hairlines: Ink, thin */
  --line-2:   rgba(32, 47, 48, .13);
  --green:    #1D5F63;   /* Deep Teal: the one filled button */
  --green-hi: #458A8E;
  --heather:  #9BCDD0;   /* Pale Teal: small accents only */
  --heather-2:#ECECEA;
  --copper:   #B07249;
  --stop:     #B07249;   /* the one 'no' on the page */

  --display: 'Poppins', system-ui, sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --fs-display: clamp(44px, 6vw, 96px);
  --fs-heading: clamp(38px, 4.4vw, 70px);
  --fs-body:    clamp(18px, 1.35vw, 21px);
  --fs-label:   12px;

  --gutter: clamp(16px, 2.2vw, 32px);
  --r-card: 20px;
  --r-pill: 36px;
  --r-ghost: 22.5px;
  --dash: 1px dashed var(--line);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --shadow: 0 1px 1px rgba(32, 47, 48, .04), 0 10px 24px -8px rgba(32, 47, 48, .14), 0 34px 70px -24px rgba(32, 47, 48, .22);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
@property --bg { syntax: '<color>'; inherits: true; initial-value: #ECECEA; }
html { background: var(--bg); transition: --bg .9s var(--ease); -webkit-text-size-adjust: 100%; }
/* every chapter is a stop: the scroll lands on it and cannot skip it */
/* the page steps from chapter to chapter itself (darkroom.js), so CSS snapping is off */
html.is-loaded { scroll-snap-type: none; overscroll-behavior-y: none; }
/* through the opening the ground follows the scroll itself */
html.bg-live { transition: none; }
html.is-loading { overflow: hidden; }
body {
  margin: 0; background: transparent; color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; text-rendering: optimizeLegibility;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--heather); color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--gutter); top: -60px; z-index: 120; padding: 10px 16px; border-radius: var(--r-ghost); background: var(--ink); color: var(--paper); }
.skip:focus { top: var(--gutter); }

/* --------------------------------------------------------- the voices */
.label { font: 500 var(--fs-label)/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.display, .heading { font-family: var(--display); font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: .92; }
.heading { font-size: var(--fs-heading); line-height: .98; }
.body { font: 400 var(--fs-body)/1.38 var(--body); letter-spacing: -0.012em; color: var(--ink-2); text-wrap: pretty; max-width: 26em; }
.fine { font: 400 15px/1.5 var(--body); color: var(--muted); max-width: 32em; }
.link { color: var(--ink); border-bottom: 1px dashed var(--green); transition: color .2s; }
.link:hover { color: var(--green); }

/* headlines arrive a word at a time, scrubbed by the scroll (--r, 0 to 1) */
.split .w { text-indent: 0; display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin: 0 -.02em -.14em; }
.split .w > span {
  display: inline-block;
  transform: translate3d(0, calc((1 - clamp(0, (var(--r, 1) * (1 + var(--n, 4) * .06) - var(--i) * .06) * 2.6, 1)) * 108%), 0);
}

/* --------------------------------------------------------------- loader */
html:not(.is-loading):not(.is-loaded) .loader { display: none; }
html:not(.is-loading):not(.is-loaded) .rise, html:not(.is-loading):not(.is-loaded) .rise-late { clip-path: none; transform: none; opacity: 1; translate: none; }
.loader { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; color: var(--ink); transition: visibility 0s linear 1.1s; }
.loader::before { content: ""; position: absolute; inset: 0; background: var(--paper); transition: opacity .8s linear .2s; }
.loader > * { position: relative; z-index: 1; }
.loader > .loader__mark, .loader > .loader__text, .loader > .loader__pct { position: absolute; }
.loader__mark { left: var(--gutter); top: calc(var(--gutter) + 6px); width: 76px; fill: var(--ink); }
.loader > .loader__mark { position: relative; left: auto; top: auto; width: 160px; fill: var(--ink); }
.is-loaded .loader { visibility: hidden; pointer-events: none; }
.is-loaded .loader::before { opacity: 0; }
.is-loaded .loader__mark { opacity: 0; transition: opacity .3s; }

/* -------------------------------------------------------- fixed chrome */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: center; padding: calc(12px + env(safe-area-inset-top, 0px)) calc(var(--gutter) - 12px) 0; pointer-events: none; }
.nav__shell {
  pointer-events: auto; position: relative; width: 100%; max-width: 100%; height: 64px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px;
  border-radius: 20px; border: 1px solid transparent;
  transition: max-width .5s cubic-bezier(.34, 1.32, .5, 1), height .38s cubic-bezier(.34, 1.2, .5, 1), background-color .4s, border-color .4s, box-shadow .4s, padding .4s;
}
/* floating: a glass capsule */
html.nav-float .nav__shell { max-width: 1180px; height: 60px; padding: 0 8px 0 20px; background: color-mix(in srgb, var(--paper) 74%, transparent); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); border-color: rgba(32, 47, 48, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 40px -20px rgba(32, 47, 48, .45); }
/* scrolling down it narrows to the essentials; scrolling up brings the links back */
html.nav-float.nav-compact .nav__shell { max-width: 560px; height: 54px; }
.nav__logo { width: 120px; justify-self: start; position: relative; }
.nav__logo::after { content: ""; position: absolute; inset: 50% -8px auto; height: 44px; translate: 0 -50%; }   /* a 44 px target round the mark */
.nav__logo svg { width: 100%; height: auto; fill: var(--ink); transition: fill .4s; }
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; height: 100%; max-width: 620px; overflow: visible; transition: max-width .45s var(--ease), opacity .3s; }
html.nav-float.nav-compact .nav__links { max-width: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.nav__links a { position: relative; z-index: 1; padding: 10px 14px; border-radius: 12px; color: var(--ink-2); white-space: nowrap; transition: color .25s; }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--ink); }
/* one pill slides to whichever link is under the pointer */
.nav__hover { position: absolute; z-index: 0; top: 50%; left: var(--hx, 0px); width: var(--hw, 0px); height: 38px; translate: 0 -50%; border-radius: 12px; background: rgba(155, 205, 208, .6);
  opacity: var(--ho, 0); scale: calc(.85 + var(--ho, 0) * .15); transition: left .46s cubic-bezier(.34, 1.56, .64, 1), width .46s cubic-bezier(.34, 1.56, .64, 1), opacity .25s, scale .25s; }
/* a copper lamp over the chapter you are in */
.nav__lamp { position: absolute; z-index: 2; top: 0; left: var(--lmx, 0px); width: 30px; height: 3px; translate: -50% 0; border-radius: 0 0 4px 4px; background: var(--copper);
  box-shadow: 0 0 10px 1px rgba(176, 114, 73, .55), 0 8px 18px 2px rgba(176, 114, 73, .28); opacity: var(--lmo, 0); transition: left .38s cubic-bezier(.34, 1.4, .64, 1), opacity .3s; }
.nav__end { justify-self: end; display: flex; gap: 10px; }
.nav__buy { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 40px; background: var(--green); color: var(--paper); transition: background-color .25s; }
.nav__buy:hover { background: var(--green-hi); }
.nav__price { padding: 8px 12px; border-radius: 30px; background: rgba(239, 239, 236, .16); }
/* reading progress along the capsule's top edge */
/* (the reading-progress line was removed) */
.nav__progress { display: none; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); opacity: 0; transition: opacity .4s; }
html.nav-float .nav__progress { opacity: .8; }
.nav .nav__menu { display: none; }

.ghost {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 9px 16px; border-radius: var(--r-ghost);
  border: 1px solid rgba(32, 47, 48, .22); background: transparent;
  transition: border-color .25s, background-color .25s, color .25s;
}
.ghost:hover { border-color: var(--ink); background: rgba(32, 47, 48, .04); }

/* the chapter rail */
.rail { position: fixed; right: calc(var(--gutter) - 8px); top: 50%; z-index: 40; translate: 0 -50%; display: grid; gap: 2px; padding: 8px; border-radius: 20px; background: rgba(250, 250, 248, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .06); font-size: 11px; opacity: var(--ro, 0); transition: opacity .5s; pointer-events: none; }
.rail a { pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: center; width: 16px; height: 24px; color: var(--muted); }
.rail span { position: absolute; right: calc(100% + 14px); padding: 6px 10px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); }
.rail i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--muted); transition: background-color .3s, border-color .3s, scale .4s var(--ease); }
.rail span { opacity: 0; translate: 6px 0; transition: opacity .3s, translate .4s var(--ease); white-space: nowrap; }
.rail a:hover span { opacity: 1; translate: 0 0; }
.rail a[aria-current="true"] { color: var(--ink); }
.rail a[aria-current="true"] i { background: var(--ink); border-color: var(--ink); scale: 1.25; }

.menu {
  position: fixed; inset: 0; z-index: 49; background: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 104px var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu nav { display: grid; }
.menu .menu__buy { margin: auto 0 20px; }
.menu nav a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: var(--dash); font-size: clamp(40px, 11vw, 60px); }
.menu nav a .label { flex: none; width: 28px; color: var(--muted); font-size: 11px; letter-spacing: .14em; transform: translateY(-1.1em); }
.menu nav a { opacity: 0; translate: 0 24px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.menu.is-open nav a { opacity: 1; translate: 0 0; }
.menu.is-open nav a:nth-child(2) { transition-delay: .06s; } .menu.is-open nav a:nth-child(3) { transition-delay: .12s; } .menu.is-open nav a:nth-child(4) { transition-delay: .18s; }
.menu nav a[aria-current="true"] { color: var(--green); }
.menu__foot { display: flex; justify-content: space-between; color: var(--muted); }
.menu__foot a[href^="mailto"] { text-transform: none; letter-spacing: .04em; }

/* ------------------------------------------------- the stage (the lock) */
.stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.stage canvas { z-index: 1; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .2s linear; }
/* a soft shadow on the floor under the ring */
.stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none;
  width: calc(var(--lr, 200px) * 1.5 * var(--sw, 1)); height: calc(var(--lr, 200px) * .16);
  transform: translate(calc(-50% + var(--lx, 0px)), var(--fy, calc(var(--ly, 0px) + var(--lr, 200px) * 1.08)));
  background: radial-gradient(closest-side, rgba(32, 47, 48, .34), transparent); filter: blur(14px);
  opacity: var(--sh, 0);
}
/* every drawing in the stage is centred on the lock and sized by it */
.orbit, .seal, .radar, .fitg, .click {
  position: absolute; left: 50%; top: 50%;
  translate: calc(-50% + var(--lx, 0px)) calc(-50% + var(--ly, 0px));
}
.click { width: calc(var(--lr, 200px) * 2.3); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--green); opacity: 0; scale: .82; z-index: 2; }
.click.is-on { animation: click .9s var(--ease) forwards; }
@keyframes click { 0% { opacity: .9; scale: .82; } 100% { opacity: 0; scale: 1.03; } }

/* the reveal: the chapters written around the ring */
.orbit { width: calc(var(--lr, 200px) * 2.56); height: auto; overflow: visible; opacity: var(--orbit, 0); scale: calc(.92 + var(--orbit, 0) * .08); }
.orbit text { font: 600 13px var(--body); letter-spacing: .2em; fill: var(--ink); }
.orbit__dash { fill: none; stroke: var(--line); stroke-dasharray: 2 6; }
.orbit__spin { transform-origin: 200px 200px; animation: spin 60s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* varefakta: a seal around the ring */
.seal { width: calc(var(--lr, 200px) * 2.9); height: auto; overflow: visible; opacity: var(--seal, 0); scale: calc(.9 + var(--seal, 0) * .1); }
.seal__outer { fill: var(--card); stroke: var(--ink); stroke-width: 1.4; }
.seal__ticks { fill: none; stroke: var(--ink); stroke-width: 6; stroke-dasharray: .4 2.6; opacity: .55; }
.seal__inner { fill: none; stroke: var(--line); stroke-dasharray: 3 5; }
.seal text { font: 600 14.5px var(--body); letter-spacing: .22em; fill: var(--green); }
.seal__spin { transform-origin: 200px 200px; rotate: calc(var(--seal, 0) * 40deg - 40deg); }

/* find my: rings on the map */
.radar { --s: calc(var(--lr, 120px) * 3.4); width: var(--s); height: var(--s); opacity: clamp(0, (var(--radar, 0) - .55) * 2.3, 1); z-index: 0; }
.radar__rings { position: absolute; inset: 0; }
.radar i, .radar__ping { position: absolute; border-radius: 50%; inset: 0; margin: auto; }
.radar i { border: 1.5px dashed rgba(29, 95, 99, .3); }
.radar i:nth-child(1) { width: 100%; height: 100%; }
.radar i:nth-child(2) { width: 62%; height: 62%; }
.radar__ping { width: 100%; height: 100%; border: 2px solid #458A8E; background: radial-gradient(closest-side, rgba(69, 138, 142, 0) 55%, rgba(69, 138, 142, .16)); opacity: 0; animation: ping 3.4s var(--ease) infinite; }
.radar__ping + .radar__ping { animation-delay: 1.7s; }
@keyframes ping { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.04); opacity: 0; } }

/* will it fit: the wheel goes through the ring */
.fitg { --tw: .4; --ir: calc(var(--lr, 200px) * .66); width: calc(var(--lr, 200px) * 3); height: calc(var(--lr, 200px) * 3.4); opacity: var(--fit, 0); z-index: 0; }
.fitg__tyre, .fitg__stay { -webkit-mask-image: radial-gradient(ellipse 50% 48% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 50% 48% at 50% 50%, #000 70%, transparent 100%); }
.fitg__hole { position: absolute; left: 50%; top: 50%; width: calc(var(--ir) * 2); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(closest-side, rgba(155, 205, 208, .25), rgba(155, 205, 208, .8)); clip-path: circle(46% at 50% 50%); opacity: .7; transition: background .4s; }
.fitg[data-state="maybe"] .fitg__hole { background: radial-gradient(closest-side, rgba(176, 114, 73, .1), rgba(176, 114, 73, .45)); }
.fitg[data-state="no"] .fitg__hole { background: radial-gradient(closest-side, rgba(176, 114, 73, .12), rgba(176, 114, 73, .5)); }
.fitg__tyre {
  position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--ir) * 2 * var(--tw)); translate: -50% 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(10, 16, 16, .32) 9px 15px) left top / 50.5% 100% no-repeat,
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(10, 16, 16, .32) 9px 15px) right top / 50.5% 100% no-repeat,
    #202F30;
  border-radius: 40px; transition: width .7s var(--ease);
}
.fitg__stay { position: absolute; top: 0; bottom: 0; width: 9px; border-radius: 8px; background: #1D5F63; box-shadow: 0 0 0 1px rgba(32, 47, 48, .1); }
.fitg__stay--l { left: calc(50% - var(--lr) * .56 - 4px); rotate: -3deg; }
.fitg__stay--r { left: calc(50% + var(--lr) * .56 - 4px); rotate: 3deg; }
/* dimension lines, drawn like a technical sheet */
.fitg__dim { position: absolute; left: 50%; translate: -50% 0; margin: 0; height: 14px; border: solid #1D5F63; border-width: 0 1.5px; display: grid; place-items: center; transition: width .7s var(--ease); }
.fitg__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid #1D5F63; }
.fitg__dim span { position: absolute; left: 50%; translate: -50% 0; top: calc(100% + 4px); padding: 4px 9px; border-radius: 10px; background: #ECECEA; color: #1D5F63; font-size: 11px; white-space: nowrap; }
.fitg__dim--ring { width: calc(var(--ir) * 2 * 63 / 105); top: calc(50% - var(--lr) * 1.36); }
.fitg__dim--ring span { top: auto; bottom: calc(100% + 4px); }
.fitg__dim--tyre { width: calc(var(--ir) * 2 * var(--tw)); top: calc(50% + var(--lr) * 1.12); min-width: 2px; }
.fitg[data-state="no"] .fitg__dim--tyre { border-color: var(--stop); }
.fitg[data-state="no"] .fitg__dim--tyre::before { border-color: var(--stop); }
.fitg[data-state="no"] .fitg__dim--tyre span { background: var(--stop); color: #fff; }

/* ------------------------------------------- 0 · the macro */
/* the opening: the wordmark in pixels on Ink. --hp runs 0 → 1 as the pixels are pulled into the lock, --hd as the hero leaves */
.hero { position: relative; height: 200vh; height: 200svh; scroll-snap-align: start; }
.hero__pin { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; pointer-events: none; }
.hero__pin a { pointer-events: auto; }
/* the pixels sit over the 3D stage, so they can land on the lock */
.px { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: var(--pxo, 1); }
html:not(.is-loaded) .px { opacity: 0; }
/* a backer on his bike: five frames, crossfading slowly, graded dark (the grade is baked into the files) */
.hero__shots { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); opacity: calc(1 - var(--hp, 0) * 1.6); }
.hero__shot { position: absolute; inset: 0; opacity: 0; animation: shot 30s linear infinite; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; animation: hero-drift 30s linear infinite; }
.hero__shot:nth-child(2), .hero__shot:nth-child(2) img { animation-delay: 6s; }
.hero__shot:nth-child(3), .hero__shot:nth-child(3) img { animation-delay: 12s; }
.hero__shot:nth-child(4), .hero__shot:nth-child(4) img { animation-delay: 18s; }
.hero__shot:nth-child(5), .hero__shot:nth-child(5) img { animation-delay: 24s; }
.hero__shot:first-child { opacity: 1; animation-delay: -1.5s; }
.hero__shot:first-child img { animation-delay: -1.5s; }
@keyframes shot { 0% { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-drift { 0% { scale: 1.08; } 25% { scale: 1; } 100% { scale: 1; } }
.hero__shots::after { content: ""; position: absolute; inset: 0; background: rgba(32, 47, 48, .35); }
@media (prefers-reduced-motion: reduce) { .hero__shot, .hero__shot img { animation: none; } }

/* --------------------------------------------- dark chapters (hero, buy, footer) */
html { --chalk-hi: #ECECEA; }
html[data-tone="dark"] .nav__logo svg { fill: #ECECEA; }
html[data-tone="dark"].nav-float .nav__shell { background: color-mix(in srgb, #202F30 55%, transparent); border-color: rgba(236, 236, 234, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 40px -20px rgba(0, 0, 0, .6); }
html[data-tone="dark"] .nav__hover { background: rgba(236, 236, 234, .14); }
html[data-tone="dark"] .nav__progress { background: #9BCDD0; }
html[data-tone="dark"] .nav__links a { color: rgba(236, 236, 234, .78); }
html[data-tone="dark"] .nav__links a:hover, html[data-tone="dark"] .nav__links a[aria-current="true"] { color: #ECECEA; }
html[data-tone="dark"] .nav__buy { background: #9BCDD0; color: var(--ink); }
html[data-tone="dark"] .nav__buy .nav__price { background: rgba(32, 47, 48, .12); }
html[data-tone="dark"] .rail { background: rgba(236, 236, 234, .1); }
html[data-tone="dark"] .rail i { border-color: #ECECEA; }
html[data-tone="dark"] .rail a[aria-current="true"] i { background: #ECECEA; }
html[data-tone="dark"] .nav .nav__menu { color: #ECECEA; border-color: rgba(236, 236, 234, .35); background: rgba(32, 47, 48, .2); }
.nav__buy, .nav__menu { transition: background-color .4s, color .4s, box-shadow .4s, border-color .4s; }
.void--seal { --ink: #ECECEA; --ink-2: #ECECEA; --muted: #9BCDD0; --line: rgba(236, 236, 234, .25); --card: rgba(236, 236, 234, .08); color: var(--ink); }
.stage[data-tone="dark"]::after { background: radial-gradient(closest-side, rgba(5, 15, 16, .55), transparent); }
/* varefakta: on green, the ring at the centre of a paper seal, the certificate behind it */
.seal__outer { fill: #ECECEA; stroke: #ECECEA; }
.seal__ticks { stroke: #1D5F63; opacity: .6; }
.seal__inner { stroke: rgba(29, 95, 99, .35); }
.seal text { fill: #1D5F63; }
.void.void--seal { z-index: auto; }
.void--seal .void__left { z-index: 5; }
.vf { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.vf__mark { flex: none; width: 92px; height: 92px; border-radius: 18px; padding: 8px; background: #fff; object-fit: contain; }
.vf .cert { margin-top: 0; }
.vf-slot { display: grid; place-items: center; }
.paper { position: relative; z-index: 0; width: min(21vw, 300px); aspect-ratio: 1 / 1.3; padding: clamp(20px, 2vw, 30px); border-radius: 10px; background: #FFFFFF; color: #202F30;
  display: flex; flex-direction: column; }
.paper__head { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1.5px solid #202F30; }
.paper__head .label { color: #1D5F63; font-size: 11px; }
.paper__head span:last-child { font: 600 22px/1 var(--display); letter-spacing: -0.02em; }
.paper__rows { margin-top: 14px; display: grid; gap: 0; }
.paper__rows div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed rgba(32, 47, 48, .2); font-size: 13px; }
.paper__rows dt { color: #606A74; }
.paper__rows dd { font-weight: 600; }
.paper__sign { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 11px; color: #606A74; }
.paper__sign i { width: 54px; height: 22px; border-bottom: 1.5px solid #202F30; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 22'%3E%3Cpath d='M2 16c6-10 9-12 11-6s3 7 7-1 6-4 8 2 5 4 9-3 6-3 13 2' fill='none' stroke='%231D5F63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }


/* the load-in: lines rise out of a mask */
.rise { display: inline-block; clip-path: inset(-10% -4% 100% -4%); transform: translateY(40%); transition: clip-path 1.3s var(--ease) .5s, transform 1.3s var(--ease) .5s; }
.is-loaded .rise { clip-path: inset(-10% -4% -14% -4%); transform: none; }
.rise-late { opacity: 0; translate: 0 18px; transition: opacity 1s var(--ease) 1.1s, translate 1s var(--ease) 1.1s; }
.is-loaded .rise-late { opacity: 1; translate: 0 0; }

/* ------------------------------------------------- the chapters */
.void {
  position: relative; z-index: 5; height: 100vh; height: 100svh;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr);
  column-gap: 18px; align-items: center;
  padding: 120px var(--gutter) 72px;
}
.void__left, .void__right { position: relative; z-index: 2; }
.void__left { grid-column: 1; }
.slot { grid-column: 2; align-self: stretch; position: relative; }
.void__right { grid-column: 3; }
.void__left, .void__right { opacity: calc(1 - var(--x, 0)); transform: translate3d(0, calc(var(--x, 0) * -40px), 0); }
.void__index, .void__right > *, .void__left > :not(.void__index):not(.heading) {
  opacity: clamp(0, (var(--r, 1) - .3) * 2.4, 1);
  translate: 0 calc((1 - clamp(0, (var(--r, 1) - .3) * 2.4, 1)) * 26px);
}
.void__index { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; color: var(--muted); }
.void__index::after { content: ""; width: 80px; border-top: var(--dash); }
.void__index b { color: var(--ink); font-weight: 600; }
.void__left .heading + .body { margin-top: 26px; }
.void__left .body + .fine { margin-top: 18px; }

/* the reveal: a poster. Two big words bracket the ring, the four things run along the bottom */
.void--intro { grid-template-rows: minmax(0, 1fr) auto; row-gap: 3vh; padding-bottom: 40px; }
.void--intro .void__left { align-self: center; }
.void--intro .void__right { align-self: center; justify-self: end; text-align: right; display: grid; justify-items: end; }
.void--intro .void__index { margin-bottom: 4vh; }
.intro__word { font: 600 clamp(64px, 8.4vw, 150px)/.86 var(--display); letter-spacing: -0.055em; width: min-content; color: var(--ink); }
.void--intro .void__right .body { margin-top: 4vh; max-width: 16em; font-size: clamp(16px, 1.15vw, 19px); }
.specs { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--dash); position: relative; z-index: 2; }
.specs li { opacity: clamp(0, (var(--r, 1) - .45 - var(--k) * .05) * 3, 1); translate: 0 calc((1 - clamp(0, (var(--r, 1) - .45 - var(--k) * .05) * 3, 1)) * 22px); }
.specs li:nth-child(1) { --k: 0; } .specs li:nth-child(2) { --k: 1; } .specs li:nth-child(3) { --k: 2; } .specs li:nth-child(4) { --k: 3; }
.specs li + li { border-left: var(--dash); }
.specs a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; align-items: center; padding: 20px 20px 4px; height: 100%; transition: color .2s; }
.specs li:first-child a { padding-left: 0; }
.specs svg { grid-row: 1 / 3; width: 40px; height: 40px; padding: 7px; border-radius: 50%; background: var(--card); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: background .3s var(--ease), color .3s; }
.specs svg .fill { fill: currentColor; stroke: none; }
.specs .label { color: var(--muted); font-size: 11px; align-self: end; }
.specs b { font: 600 clamp(15px, 1.15vw, 19px)/1.15 var(--display); letter-spacing: -0.02em; align-self: start; text-wrap: balance; }
.specs a:hover { color: var(--green); }
.specs a:hover svg { background: var(--green); color: #fff; }

/* keyless: copy left, a drawn phone, the ring cropped on the right */
.void--macro { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); }
.void--macro .void__left { grid-column: 1; }
.void--macro .void__right { grid-column: 2; justify-self: center; display: grid; gap: 28px; justify-items: center; }
.void--macro .slot { grid-column: 3; }
.phone { width: clamp(200px, 15vw, 236px); max-height: calc(100svh - 190px); aspect-ratio: 9 / 18.5; padding: 9px; border-radius: 42px; background: var(--ink); }
.phone__screen { position: relative; height: 100%; border-radius: 34px; background: #FFFFFF; display: grid; grid-template-rows: auto 1fr auto; padding: 38px 18px 22px; overflow: hidden; }
.phone__screen::before { content: ""; position: absolute; left: 50%; top: 10px; width: 74px; height: 20px; border-radius: 12px; background: var(--ink); translate: -50% 0; }
.phone__top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink); }
.phone__ble { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.phone__ble i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.phone__foot { font-size: 11px; color: var(--muted); text-align: center; }
.unlock { align-self: center; justify-self: center; display: grid; justify-items: center; gap: 12px; }
.unlock__ring { position: relative; width: clamp(112px, 8.6vw, 132px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--paper); transition: background-color .4s, scale .3s var(--ease); }
.unlock:active .unlock__ring { scale: .95; }
.unlock__ring::before, .unlock__ring::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid var(--green); opacity: 0; }
.unlock.is-nudge .unlock__ring::before { animation: nudge 2s var(--ease) infinite; }
.unlock.is-nudge .unlock__ring::after { animation: nudge 2s var(--ease) 1s infinite; }
@keyframes nudge { 0% { scale: .85; opacity: .7; } 100% { scale: 1.35; opacity: 0; } }
.unlock__icon { width: 44%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; overflow: visible; }
.unlock__shackle { transition: transform .45s var(--ease); transform-origin: 16px 11px; }
.unlock__state { font-size: 11px; color: var(--muted); }
.unlock__cta { font: 600 17px/1 var(--display); letter-spacing: -0.02em; min-width: 7.2em; text-align: center; }
.unlock.is-open .unlock__ring { background: var(--card); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.unlock.is-open .unlock__state { color: var(--green); }
.unlock.is-open .unlock__shackle { transform: translateY(-2.5px) rotate(28deg); }
.facts { display: flex; gap: 22px; font-size: 11px; color: var(--muted); }
.facts li { display: grid; gap: 6px; justify-items: center; text-align: center; max-width: 7em; line-height: 1.3; }
.facts b { font: 600 34px/1 var(--display); letter-spacing: -0.04em; color: var(--ink); }

/* find my: a map of our own, behind the lock */
/* find my: the bike on a drawn iPhone, lying on the map, seen from above */
.void--map { z-index: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.void--map .void__left { grid-column: 1; z-index: 5; }
.void--map .slot { grid-column: 2; display: grid; place-items: center; }
.void--map .fine { margin-top: 22px; }
/* the phone sits under the lock (no z-index on its ancestors, so the canvas draws over it) */
.fmp, .fm-ghost { --h: min(76vh, 700px); height: var(--h); aspect-ratio: 9 / 19.2; }
/* the phone lives in the stage: it is placed so the end of the route sits exactly under the lock, and moves with it */
.fmp {
  position: absolute; left: 50%; top: 50%; z-index: 0; border-radius: calc(var(--h) * .075);
  translate: calc(var(--lx, 0px) - var(--fpx, 0px)) calc(var(--ly, 0px) - var(--fpy, 0px)); transform-origin: var(--fpx, 50%) var(--fpy, 30%);
  rotate: -4deg; scale: calc(.9 + var(--radar, 0) * .1); opacity: clamp(0, (var(--radar, 0) - .55) * 2.3, 1); transform: perspective(1000px) rotateX(var(--ft, 0deg));
  padding: calc(var(--h) * .016); background: #202F30; box-shadow: var(--shadow), 0 50px 90px -40px rgba(32, 47, 48, .5), inset 0 0 0 1.5px #213D35;
}
.radar { z-index: 1; transform: perspective(1000px) rotateX(var(--ft, 0deg)); }
.fmp > * { position: absolute; }
.fmp .map { inset: calc(var(--h) * .016); width: calc(100% - var(--h) * .032); height: calc(100% - var(--h) * .032); border-radius: calc(var(--h) * .062); }
.fmp::after { content: ""; position: absolute; left: 50%; top: calc(var(--h) * .03); width: 30%; height: calc(var(--h) * .038); border-radius: 30px; background: var(--ink); translate: -50% 0; z-index: 2; }
.fmp__sheet {
  left: calc(var(--h) * .016); right: calc(var(--h) * .016); bottom: calc(var(--h) * .016); z-index: 2;
  padding: calc(var(--h) * .014) calc(var(--h) * .026) calc(var(--h) * .03); border-radius: calc(var(--h) * .04) calc(var(--h) * .04) calc(var(--h) * .062) calc(var(--h) * .062);
  background: rgba(250, 250, 248, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -10px 30px -12px rgba(32, 47, 48, .25);
}
.fmp__grab { display: block; width: 14%; height: 4px; border-radius: 4px; background: rgba(32, 47, 48, .2); margin: 0 auto calc(var(--h) * .016); }
.fmp__item { display: flex; align-items: center; gap: calc(var(--h) * .016); margin-top: calc(var(--h) * .01); }
.fmp__icon { flex: none; width: calc(var(--h) * .062); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #B07249; }
.fmp__icon svg { width: 58%; fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; }
.fmp__name { flex: 1; display: grid; gap: 2px; font-size: calc(var(--h) * .019); color: var(--muted); }
.fmp__name b { font: 600 calc(var(--h) * .026)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.map { pointer-events: none; }
.map__water { fill: #9BCDD0; }
.map__park { fill: rgba(69, 138, 142, .22); }
.map__streets path { fill: none; stroke: #FFFFFF; stroke-width: 22; stroke-linecap: round; }
.map__minor path { fill: none; stroke: #FFFFFF; stroke-width: 9; stroke-linecap: round; }
.map__bridge { stroke: #FFFFFF; stroke-width: 16; }
.map__route { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - clamp(0, (var(--radar, 0) - .4) * 1.8, 1)); }
.map__you { fill: var(--green); stroke: #fff; stroke-width: 5; }
.map__you-halo { fill: rgba(29, 95, 99, .18); }

/* varefakta */
.void--seal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.void--seal .slot { grid-column: 2; }
.void--seal .heading { font-size: clamp(36px, 3.9vw, 62px); max-width: 11em; }
.cert { width: max-content; max-width: 100%; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-top: 30px; border-top: var(--dash); border-bottom: var(--dash); }
.cert div { padding: 16px 26px 16px 0; }
.cert div + div { padding-left: 26px; border-left: var(--dash); }
.cert dt { color: var(--muted); font-size: 11px; }
.cert dd { margin-top: 8px; font: 600 clamp(20px, 1.7vw, 26px)/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.void--seal .fine { margin-top: 22px; }

/* will it fit */
.void--fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.void--fit .slot { grid-column: 2; }
.pickrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 30px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .1); font-size: 15px; transition: background-color .25s, color .25s, box-shadow .25s; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.verdict { margin-top: 26px; max-width: 28em; }
.verdict__head { display: flex; align-items: center; gap: 12px; font: 600 clamp(24px, 2.2vw, 34px)/1.05 var(--display); letter-spacing: -0.03em; }
.verdict__mark { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.4 3.4L15 7' fill='none' stroke='%23EFEFEC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.verdict[data-state="no"] .verdict__mark { background: var(--stop) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23EFEFEC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.verdict__body { margin-top: 10px; color: var(--ink-2); font-size: 17px; line-height: 1.45; }
.fit__fine { margin-top: 26px; }
.verdict.is-swap .verdict__head, .verdict.is-swap .verdict__body { animation: swapin .5s var(--ease); }
@keyframes swapin { from { opacity: 0; translate: 0 8px; } }

/* buy */
.void--product { padding-bottom: 56px; }
.finishes { display: flex; flex-wrap: wrap; gap: 8px; position: relative; margin-bottom: 30px; }
.finishes::after { content: ""; position: absolute; left: var(--fx, 0); top: var(--fy, 0); width: var(--fw, 0); height: var(--fh, 0); border: 1.5px solid var(--ink); border-radius: var(--r-ghost); pointer-events: none; transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease); }
.finishes.has-ind .ghost[aria-checked="true"] { border-color: transparent; }
.finishes .ghost { padding: 8px 16px 8px 9px; background: var(--card); }
.finishes i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
#buy-label { display: inline-block; transition: opacity .2s, translate .25s var(--ease); }
#buy-label.is-out { opacity: 0; translate: 0 -8px; }
.product__sub { max-width: 18em; }
#h5 .w { transition: opacity .5s var(--ease); display: block; width: max-content; }
[data-metal="steel"] #h5 .w:not(:nth-child(2)), [data-metal="copper"] #h5 .w:not(:nth-child(3)), [data-metal="black"] #h5 .w:not(:nth-child(4)) { opacity: .34; }
.slot--drag { pointer-events: auto; touch-action: none; display: grid; align-items: end; justify-items: center; padding-bottom: 5vh; cursor: grab; user-select: none; -webkit-user-select: none; }
.slot--drag:active { cursor: grabbing; }
.slot--drag:focus-visible { outline-offset: -12px; border-radius: 24px; }
.slot__turn { display: inline-flex; align-items: center; gap: 14px; }
.turn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; background: var(--card); }
.turn svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.slot__hint { color: var(--muted); font-size: 11px; display: inline-flex; gap: 10px; align-items: center; }
.slot__hint::before, .slot__hint::after { content: ""; width: 28px; border-top: var(--dash); }
.price__label { color: var(--muted); font-size: 11px; }
.price { display: flex; align-items: baseline; gap: 16px; margin-top: 10px; }
.price strong { font: 600 clamp(60px, 5.6vw, 92px)/.9 var(--display); letter-spacing: -0.05em; }
.price s { color: var(--muted); font-size: 20px; text-decoration-thickness: 1px; }
.pill {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 24px; width: 100%;
  padding: 19px 22px 19px 28px; border-radius: var(--r-pill); background: var(--green); color: var(--paper);
  font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; text-transform: none;
  position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 16px 30px -14px rgba(29, 95, 99, .7);
  transition: box-shadow .3s;
}
.pill svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; box-sizing: content-box; padding: 11px; margin: -11px -10px -11px 0; border-radius: 50%; transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green-hi); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.pill:hover::before { transform: scaleX(1); }
.pill:hover svg { transform: translateX(4px); background: var(--paper); color: var(--green); }
.assure { margin-top: 24px; display: grid; gap: 10px; }
.assure li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.assure svg { flex: none; width: 20px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.assure b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ footer */
/* a slim dark band: the mark, three words, how to reach us, a block to buy; the fine print under a hairline */
.foot { position: relative; z-index: 5; scroll-snap-align: end; padding: 36px var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px)); background: #202F30; color: #ECECEA; }
.foot__grid { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 20px 48px; padding-bottom: 28px; border-bottom: 1px solid rgba(236, 236, 234, .14); }
.foot__logo { width: 88px; fill: #ECECEA; }
.foot__links { display: flex; gap: 28px; font-size: 11px; }
.foot__links a, .foot__contact a { color: rgba(236, 236, 234, .62); transition: color .2s; }
.foot__links a:hover, .foot__contact a:hover { color: #ECECEA; }
.foot__contact { display: flex; gap: 24px; font-size: 13px; }
.foot__contact a { min-height: 44px; display: inline-flex; align-items: center; }
.foot :focus-visible { outline-color: #ECECEA; }
.foot__contact a[href^="mailto"] { text-transform: none; }
.foot__buy { display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; background: #ECECEA; color: #202F30; font-size: 11px; transition: background-color .25s; }
.foot__buy span + span { padding-left: 14px; border-left: 1px solid rgba(32, 47, 48, .25); }
.foot__buy:hover { background: #9BCDD0; }
.foot__legal { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 18px; font-size: 11px; color: rgba(236, 236, 234, .5); }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr auto; } .foot__links, .foot__contact { grid-column: 1 / -1; flex-wrap: wrap; gap: 14px 24px; } .foot__buy { grid-row: 1; grid-column: 2; } }
.legal { color: rgba(236, 236, 234, .62); }
.legal { font: 400 11px/1.5 var(--body); letter-spacing: .02em; color: var(--muted); max-width: 72ch; }

/* ------------------------------------------------------- mid widths */
@media (max-width: 1100px) {
  .nav__links a { padding: 10px 12px; }
  .rail { display: none; }
  .void--macro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .9fr); }
}

/* ------------------------------------------------------------ phones */
@media (max-width: 760px) {
  :root { --fs-heading: clamp(34px, 9.6vw, 44px); --fs-display: clamp(40px, 11.6vw, 56px); --fs-body: 17px; }
  .nav__shell { grid-template-columns: 1fr auto; }
  html.nav-float .nav__shell { padding: 0 6px 0 16px; }
  .nav__links { display: none; }
  .nav .nav__menu { display: inline-flex; min-height: 44px; }
  .nav__buy { padding-left: 14px; }

  .paper { display: none; }
  .vf { flex-wrap: wrap; }
  .vf .cert { width: auto; }
  .fitg__dim { display: none; }
  .vf { gap: 14px; margin-top: 18px; }
  .vf__mark { width: 64px; height: 64px; border-radius: 12px; padding: 5px; }

  .void { display: flex; flex-direction: column; height: auto; min-height: 100svh; padding: 92px var(--gutter) 40px; }
  .void .slot { flex: 1 0 34svh; min-height: 34svh; }
  .void__index { margin-bottom: 14px; }
  .void__left .heading + .body { margin-top: 14px; }

  .void--intro { justify-content: flex-end; }
  .void--intro { height: 100svh; min-height: 0; }
  .void--intro .void__left { order: -2; }
  .void--intro .void__index { display: none; }
  .void--intro .slot { order: -1; flex: 1 1 auto; min-height: 180px; }
  .void--intro .void__right { justify-self: auto; }
  .intro__word { font-size: clamp(46px, 13.4vw, 72px); }
  .void--intro .void__right .body { margin-top: 12px; font-size: 15px; }
  .specs { grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .specs li:nth-child(3) { border-left: 0; }
  .specs li:nth-child(n+3) { border-top: var(--dash); }
  .specs a, .specs li:first-child a { padding: 12px 8px 12px 0; column-gap: 10px; }
  .specs li:nth-child(even) a { padding-left: 12px; }
  .specs svg { width: 34px; height: 34px; padding: 6px; }
  .specs .label { display: none; }
  .specs b { grid-row: 1 / 3; align-self: center; font-size: 14px; }

  .void--macro .slot { order: 1; flex: 0 0 30svh; min-height: 30svh; }
  .void--macro .void__right { order: 2; margin-top: 4px; }
  /* on a phone the drawn phone becomes a plain white card: no dark bezel round it */
  .phone { width: auto; aspect-ratio: auto; border-radius: 28px; padding: 0; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .08), 0 18px 40px -22px rgba(32, 47, 48, .3); }
  .unlock__cta { min-width: 0; text-align: left; }
  .phone__screen { border-radius: 25px; padding: 14px 16px; grid-template-rows: auto; grid-template-columns: 1fr; gap: 0; }
  .phone__screen::before, .phone__foot { display: none; }
  .phone__top { display: none; }
  .unlock { grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; column-gap: 16px; row-gap: 2px; text-align: left; align-items: center; }
  .unlock__ring { grid-row: 1 / 3; width: 62px; }
  .unlock__state { align-self: end; }
  .unlock__cta { align-self: start; }
  .void--macro .void__right { justify-items: stretch; }
  .facts { display: none; }

  .void--map .fine, .void--map .body { display: none; }
  .void--map .slot { order: 1; flex: 1 0 auto; min-height: 0; margin-top: 18px; }
  .fmp, .fm-ghost { --h: min(62svh, 560px); }

  .void--seal .slot, .void--fit .slot { order: -1; flex: 0 0 38svh; min-height: 38svh; margin-top: 18px; }
  .cert dd { font-size: 18px; }
  .cert div { padding: 12px 14px 12px 0; }
  .cert div + div { padding-left: 14px; }
  .void--seal .body { font-size: 16px; }
  .void--fit .slot { flex-basis: 30svh; min-height: 30svh; }
  .chip { padding: 9px 14px; font-size: 14px; }
  .pickrow { margin-top: 16px; gap: 6px; }
  .verdict { margin-top: 16px; }
  .verdict__head { font-size: 22px; }
  .verdict__body { font-size: 15px; margin-top: 6px; }
  .fit__fine { display: none; }

  .void--product .slot { order: 0; flex: 0 0 34svh; min-height: 34svh; padding-bottom: 0; }
  .slot__hint { display: none; }
  .slot__turn { width: 100%; justify-content: space-between; translate: 0 -40%; }
  .void--product .void__right { margin-top: 12px; }
  .void--product .void__left { align-self: stretch; text-align: left; }
  .void--product .product__sub { display: none; }
  .finishes { justify-content: center; margin-bottom: 20px; }
  .price strong { font-size: 56px; }
  .assure { display: none; }
  .finishes .ghost { min-height: 44px; }
  .click { width: min(calc(var(--lr, 200px) * 2.3), 94vw); }
  .menu__foot { font-size: 13px; letter-spacing: .06em; }
  /* the drawings stay inside the lock's window */
  /* will it fit, on a phone: the tyre and the stays stay inside the drawing's own window, clear of the heading */
  .fitg { height: calc(var(--lr, 150px) * 3.1); }
  .fitg__tyre, .fitg__stay { -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 50%, #000 55%, transparent 96%); mask-image: radial-gradient(ellipse 50% 46% at 50% 50%, #000 55%, transparent 96%); }
  .void--fit .slot { margin-bottom: 14px; }
  .void--fit .pickrow { flex-wrap: nowrap; gap: 5px; }
  .void--fit .chip { flex: 1 1 auto; min-height: 44px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
  .seal { width: min(calc(var(--lr, 150px) * 2.9), 90vw); }
  .void--intro .void__index { display: none; }
  .orbit { width: min(calc(var(--lr, 150px) * 2.56), 98vw); }
  .orbit text { font-size: 15px; }
}

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .split .w > span, .rise, .void__index, .void__right > *, .void__left > *, .void__left, .void__right { transform: none !important; translate: none !important; }
  .rise { clip-path: none; }
  .radar__ping, .hero__scroll path, .unlock.is-nudge .unlock__ring::before, .unlock.is-nudge .unlock__ring::after, .orbit__spin { animation: none; }
  .menu { transition: none; }
}

/* short screens (a laptop pane, a phone held sideways) */
@media (max-height: 600px) {
  .fitg__dim { display: none; }
  .fmp, .fm-ghost { --h: min(58svh, 520px); }
  .paper { display: none; }
  .void--fit .slot { margin-bottom: 28px; }
}

/* the footer ends on the wordmark, huge and quiet, cut by the bottom edge (after 21st.dev's Large Name Footer) */
/* the nav and the rail step aside: the footer has its own */
html.in-foot .nav, html.in-hero .nav { translate: 0 -130%; opacity: 0; pointer-events: none; }
.nav { transition: translate .45s var(--ease), opacity .3s; }
/* a compact capsule opens again under the pointer */
@media (hover: hover) {
  html.nav-float.nav-compact .nav__shell:hover { max-width: 1180px; height: 60px; }
  html.nav-float.nav-compact .nav__shell:hover .nav__links { max-width: 620px; opacity: 1; pointer-events: auto; overflow: visible; }
}

/* the hero has two scroll stops of its own: the pixel wordmark, and the logo on the lock */
.hero__stop { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
.hero__stop--a { top: 0; }
/* buy, on a light ground: a white card holds the choice */
.void--product .void__right { padding: clamp(24px, 2.4vw, 36px); border-radius: 28px; background: #fff; box-shadow: 0 1px 1px rgba(32, 47, 48, .04), 0 24px 60px -30px rgba(32, 47, 48, .35); }
.void--product .finishes .ghost { background: #ECECEA; }

/* language switch */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .14); font-size: 11px; }
.lang a { padding: 7px 10px; border-radius: 20px; color: var(--muted); transition: background-color .25s, color .25s; }
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }
html[data-tone="dark"] .lang { box-shadow: inset 0 0 0 1px rgba(236, 236, 234, .3); }
html[data-tone="dark"] .lang a { color: rgba(236, 236, 234, .7); }
html[data-tone="dark"] .lang a[aria-current="true"] { background: #ECECEA; color: #202F30; }
.nav__end { align-items: center; }
.lang--menu { margin: 24px 0 0; align-self: flex-start; font-size: 12px; }
.nav .lang { display: inline-flex; }
@media (max-width: 760px) { .nav .lang { display: none; } }
@media (min-width: 761px) { .lang--menu { display: none; } }
/* the caption in the opening card */
/* FAQ */
.void--faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; }
.void--faq .void__right { grid-column: 2; }
.qa { border-bottom: 1px solid rgba(32, 47, 48, .12); }
.qa:first-child { border-top: 1px solid rgba(32, 47, 48, .12); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font: 600 clamp(18px, 1.45vw, 22px)/1.25 var(--display); letter-spacing: -0.02em; transition: color .2s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--green); }
.qa summary i { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .12); transition: background-color .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate .4s var(--ease); }
.qa summary i::after { rotate: 90deg; }
.qa[open] summary i { box-shadow: inset 0 0 0 1.5px var(--ink); }
.qa[open] summary i::after { rotate: 0deg; }
:root { interpolate-size: allow-keywords; }
.qa::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
.qa[open]::details-content { height: auto; }
.qa p { padding: 0 0 22px; max-width: 56ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) { .void--faq .void__right { margin-top: 18px; } .qa summary { padding: 16px 0; font-size: 17px; } }

/* ------------------------------------------------- chrome, after the Brand Guidelines (4 Sep 2026)
   One calm bar: the wordmark at its minimum digital size (120 px), five short words, the language, one pill to buy.
   Poppins Medium on links and buttons, Deep Teal as the action colour. No rail. */
.rail { display: none; }
.nav__shell { height: 68px; }
html.nav-float .nav__shell { max-width: 1240px; height: 64px; padding: 0 8px 0 22px; }
html.nav-float.nav-compact .nav__shell { max-width: 1240px; height: 64px; }
html.nav-float.nav-compact .nav__links { max-width: 620px; opacity: 1; pointer-events: auto; overflow: visible; }
.nav__lamp { display: none; }
.nav__links a { font: 500 14px/1 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.nav__hover { background: rgba(155, 205, 208, .45); }
.nav__end { align-items: center; gap: 12px; }
.lang a { font: 500 12px/1 var(--display); letter-spacing: .04em; }
.nav__buy { height: 48px; padding: 0 6px 0 20px; gap: 12px; font: 500 15px/1 var(--display); letter-spacing: 0; text-transform: none; background: var(--green); color: #FFFFFF; }
.nav__buy:hover { background: var(--ink); }
.nav__price { padding: 10px 12px; background: rgba(255, 255, 255, .16); }
html[data-tone="dark"] .nav__links a { color: rgba(236, 236, 234, .78); }
html[data-tone="dark"] .nav__buy { background: #ECECEA; color: var(--ink); }
html[data-tone="dark"] .nav__buy .nav__price { background: rgba(32, 47, 48, .1); }
.ghost.nav__menu { font: 500 14px/1 var(--display); letter-spacing: 0; text-transform: none; }
/* the menu: four words and the pill */
.menu nav a { font-weight: 500; }
.menu nav a .label { font-weight: 500; letter-spacing: .06em; }
.menu .menu__buy { display: flex; justify-content: space-between; align-items: center; margin: auto 0 16px; height: 60px; padding: 0 26px; border-radius: var(--r-pill); background: var(--green); color: #FFFFFF; font: 500 17px/1 var(--display); letter-spacing: 0; text-transform: none; }
.lang--menu { margin: 0; }
@media (max-width: 760px) { .nav__shell, html.nav-float .nav__shell { height: 60px; } .nav__buy { height: 44px; } }
.lang i { display: none; }
/* footer: the wordmark at 120 px, pill to buy, fine print in Inter */
.foot__logo { width: 120px; }
.foot__buy { height: 48px; padding: 0 6px 0 22px; border-radius: var(--r-pill); font: 500 15px/1 var(--display); letter-spacing: 0; text-transform: none; }
.foot__buy span + span { padding: 10px 12px; border-left: 0; border-radius: 30px; background: rgba(32, 47, 48, .1); }
.foot__buy:hover { background: #FFFFFF; }
.foot__legal { font: 400 12px/1.6 var(--body); letter-spacing: 0; text-transform: none; color: rgba(236, 236, 234, .62); }
/* the opening is the wordmark alone: one quiet line says what to do */
.hero__hint { position: fixed; z-index: 4; left: 50%; bottom: calc(var(--gutter) + 10px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(236, 236, 234, .78); font-size: 11px; white-space: nowrap;
  opacity: calc(1 - var(--hp, 0) * 5); transition: opacity .6s; }
html:not(.is-loaded) .hero__hint { opacity: 0; }
.hero__hint i { position: relative; width: 1px; height: 36px; overflow: hidden; background: rgba(236, 236, 234, .18); }
.hero__hint i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: #ECECEA; animation: hint-drop 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes hint-drop { from { translate: 0 -14px; } to { translate: 0 36px; } }
@media (prefers-reduced-motion: reduce) { .hero__hint i::after { animation: none; translate: 0 11px; } }
/* the ring of words round the lock is gone (owner, 9 Oct): the lock stands on its own */
.orbit { display: none; }

/* buy, on a phone: the three finishes on one line, in the heading and in the picker, and a tighter card */
@media (max-width: 760px) {
  #h5 { font-size: clamp(30px, 8.6vw, 36px); }
  #h5 .w { display: inline-block; width: auto; }
  .void--product { padding-bottom: 28px; }
  .void--product .slot { flex: 1 0 30svh; min-height: 30svh; }
  .void--product .void__right { margin-top: 8px; padding: 20px; border-radius: 24px; }
  .finishes { flex-wrap: nowrap; gap: 6px; margin-bottom: 18px; }
  .finishes .ghost { flex: 1 1 0; justify-content: center; gap: 7px; min-height: 44px; padding: 0 8px; font-size: 11px; letter-spacing: .08em; }
  .finishes i { width: 15px; height: 15px; }
  .price { margin-top: 4px; }
  .price strong { font-size: 50px; }
  .pill { margin-top: 18px; padding: 16px 20px 16px 24px; font-size: 16px; }
}

/* the bar on a phone: slim, the wordmark small, one quiet buy pill */
@media (max-width: 760px) {
  .nav { padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0; }
  .nav__shell, html.nav-float .nav__shell, html.nav-float.nav-compact .nav__shell { height: 58px; padding: 0 6px 0 14px; border-radius: 18px; }
  .nav__end { gap: 6px; }
  /* the 120 px wordmark needs the room: the pill says Buy, the price is on the page */
  /* Buy and Menu: the same pill, the same height; the price sits in the pill as plain text */
  .nav__buy { height: 44px; padding: 0 16px; gap: 6px; font-size: 15px; border-radius: 999px; }
  .nav__price { padding: 0; background: none !important; font-size: 15px; }
  .nav__price::before { content: "· "; }
  /* with the bag in the bar as well, the price steps out so the 120 px wordmark keeps its room */
  .nav__end:has(.nav__bag:not([hidden])) .nav__price { display: none; }
  .ghost.nav__menu { min-height: 44px; height: 44px; padding: 0 14px; font-size: 15px; }
}
/* chips: a tight ring for the keyboard, nothing for a tap */
.chip:focus-visible { outline-offset: 2px; border-radius: 30px; }
.chip:focus:not(:focus-visible) { outline: none; }
@media (max-width: 760px) { .void--intro .void__left, .void--intro .void__right { align-self: stretch; } }

/* keyless card on a phone: one fixed size whether locked or open, with a clear edge */
@media (max-width: 760px) {
  .void--macro .void__right { justify-items: center; }
  .phone { width: min(300px, 100%); box-shadow: 0 0 0 1px rgba(32, 47, 48, .16), 0 18px 40px -22px rgba(32, 47, 48, .35); }
  .phone__screen { height: 96px; padding: 16px 20px; align-content: center; }
  .unlock { width: 100%; grid-template-columns: 62px 1fr; column-gap: 18px; }
  .unlock__cta { min-width: 0; white-space: nowrap; }
}
@media (max-width: 760px) {
  .phone { width: 300px; max-width: 100%; border: 1px solid rgba(32, 47, 48, .14); box-shadow: 0 10px 28px -18px rgba(32, 47, 48, .3); }
  .phone__screen { border-radius: 27px; }
  .unlock__ring { box-shadow: none; }
  .unlock.is-open .unlock__ring { box-shadow: inset 0 0 0 2px var(--green); }
}

/* find my: our own map card, flat, in the palette: a glyph disc, the name, the place (no copy of Apple's interface) */
.fmp__sheet { background: rgba(255, 255, 255, .96); }
.fmp__item { gap: calc(var(--h) * .014); }
.fmp__icon { width: calc(var(--h) * .058); background: #ECECEA; }
.fmp__icon svg { width: 62%; stroke: #202F30; stroke-width: 2.4; }
.fmp__name { gap: 3px; font: 400 calc(var(--h) * .0175)/1.2 var(--body); color: #606A74; letter-spacing: 0; }
.fmp__name b { font: 600 calc(var(--h) * .028)/1.05 var(--display); letter-spacing: -0.02em; }
.fmp__name em { font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------------- buy: António's block from the scenes ending (laas.css .qty-row, .trust-row, .stock, .paywall) */
.void--product .void__right { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.void--product .void__right > * { margin: 0; }
.finishes { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; margin: 0 0 0 -8px; }
.finishes::after { content: none; }
/* a 44 px target for the thumb; the dot inside it stays 28 px */
.finishes button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; transition: transform .2s ease; }
.finishes button::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.finishes button::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink); opacity: 0; transition: opacity .2s ease; }
.finishes button:hover { transform: scale(1.08); }
.finishes button[aria-checked="true"]::after { opacity: 1; }
.finishes button:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.finishes__name { margin-left: 4px; font-size: 11px; letter-spacing: .24em; color: var(--muted); }
.qty-row { display: flex; gap: 12px; align-items: stretch; width: min(100%, 440px); }
.qty { display: inline-flex; align-items: center; background: #FFFFFF; border-radius: 999px; box-shadow: 0 0 0 1px var(--line-2); padding: 4px; }
.qty button { width: 46px; height: 46px; border-radius: 999px; font: 500 22px/1 var(--display); color: var(--ink); transition: background-color .2s; }
.qty button:hover { background: #ECECEA; }
.qty span { min-width: 28px; text-align: center; font: 600 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.buy-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border-radius: 999px; background: var(--green); color: #FFFFFF; font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; white-space: nowrap; transition: background-color .25s; }
.buy-btn:hover { background: var(--ink); }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
.trust-row li { display: flex; align-items: center; gap: 7px; }
.trust-row svg { width: 16px; height: 16px; flex: none; color: var(--green); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stock { display: flex; align-items: center; gap: 8px; margin-top: -10px !important; font-size: 14px; color: var(--muted); }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--green); }
.paywall { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -6px !important; }
.paywall li { box-sizing: border-box; width: 48px; height: 32px; padding: 6px 7px; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: 6px; }
.paywall img { width: 100%; height: 100%; object-fit: contain; }
.paywall li:has(img[alt="Klarna"]) { background: #FFB3C7; border-color: #FFB3C7; padding-inline: 5px; }
@media (max-width: 760px) {
  .void--product .void__right { gap: 16px; align-items: stretch; }
  .finishes { justify-content: flex-start; }
  .finishes .ghost { all: unset; }
  .qty-row { width: 100%; }
  .qty button { width: 44px; height: 44px; }
  .buy-btn { min-height: 50px; font-size: 16px; }
  .trust-row { gap: 6px 14px; font-size: 13px; }
  .paywall li { width: 42px; height: 28px; }
}
.lang--menu { margin-top: auto !important; }
#buy-label.buy-btn { display: inline-flex; }
#buy-label.is-added { background: var(--ink); }   /* Added, for a beat, before it says Check out (as on buy.html) */

/* ---------------- find my, closer to the real app: a slimmer titanium-dark bezel, the map buttons top right,
   the bike as a pin where the route ends (the 3D lock steps aside here), a cleaner sheet */
.fmp { padding: calc(var(--h) * .012); background: #202F30; box-shadow: none; }
.fmp .map { inset: calc(var(--h) * .012); width: calc(100% - var(--h) * .024); height: calc(100% - var(--h) * .024); border-radius: calc(var(--h) * .064); }
.fmp::after { width: 28%; height: calc(var(--h) * .036); top: calc(var(--h) * .026); background: #202F30; }
.map__route { stroke-width: 9; stroke-dasharray: 1 1; opacity: .9; }
/* the pin: a white disc with the bike in it, a small point below, sitting on the end of the route */
.fmp__pin { position: absolute; z-index: 1; left: var(--fpx, 50%); top: var(--fpy, 30%); translate: -50% -100%; display: grid; justify-items: center;
  scale: calc(.6 + var(--radar, 0) * .4); opacity: clamp(0, (var(--radar, 0) - .6) * 3, 1); transform-origin: 50% 100%; }
.fmp__pin i { display: grid; place-items: center; width: calc(var(--h) * .082); aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 calc(var(--h) * .004) #FFFFFF; position: relative; }
.fmp__pin i::before { content: ""; position: absolute; inset: calc(var(--h) * .006); border-radius: 50%; background: #1D5F63; }
.fmp__pin svg { position: relative; width: 66%; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fmp__pin::after { content: ""; width: calc(var(--h) * .016); height: calc(var(--h) * .012); margin-top: -1px; background: #FFFFFF; clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* the radar rings ring the pin, not a lock */
.radar { translate: calc(-50% + var(--lx, 0px)) calc(-50% + var(--ly, 0px) - var(--h, 600px) * .05); --s: calc(var(--h, 600px) * .3); }
/* the sheet: a real bottom sheet, rounder, with a soft lift */
.fmp__sheet { border-radius: calc(var(--h) * .032) calc(var(--h) * .032) calc(var(--h) * .064) calc(var(--h) * .064); box-shadow: 0 -1px 0 rgba(32, 47, 48, .08); padding-bottom: calc(var(--h) * .026); -webkit-backdrop-filter: none; backdrop-filter: none; }
.radar { --h: min(76vh, 700px); }
@media (max-width: 760px) { .radar { --h: min(62svh, 560px); } }
@media (max-height: 600px) { .radar { --h: min(58svh, 520px); } }
/* find my on a phone: the line that says what Find My is stays (not everyone knows the app) */
@media (max-width: 760px) { .void--map .body { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; } .fmp, .fm-ghost { --h: min(54svh, 500px); } .radar { --h: min(54svh, 500px); } }

/* buy, desktop: the card gets the room it needs and never runs off the right edge */
@media (min-width: 761px) {
  .void--product { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(340px, .95fr); padding-right: calc(var(--gutter) + 8px); }
  .void--product .void__right { width: 100%; max-width: 420px; justify-self: end; }
  .qty-row { width: 100%; }
  .buy-btn { min-width: 0; padding: 0 18px; }
}
/* keyless, desktop: the drawn phone always fits between the nav and the bottom edge */
@media (min-width: 761px) { .phone { width: auto; height: min(calc(100svh - 240px), 470px); max-height: none; } }

/* the bag in the nav, with the count */
.nav__bag { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--ink); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .14); transition: background-color .25s; }
.nav__bag:hover { background: #FFFFFF; }
.nav__bag[hidden] { display: none; }
.nav__bag svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.nav__bag b { position: absolute; right: -2px; top: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 20px; display: grid; place-items: center; background: var(--green); color: #FFFFFF; font: 600 11px/1 var(--display); }
.nav__bag b[hidden] { display: none; }
html[data-tone="dark"] .nav__bag { color: #ECECEA; background: rgba(236, 236, 234, .1); box-shadow: inset 0 0 0 1px rgba(236, 236, 234, .3); }
@media (max-width: 760px) { .nav__bag { width: 44px; height: 44px; } .nav__bag svg { width: 20px; } }

/* keyless on a phone: the lock gets the room, the card sits low with air round it, and its pulse stays small */
@media (max-width: 760px) {
  .void--macro { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .void--macro .slot { flex: 1 0 34svh; }
  .void--macro .void__right { margin-top: 18px; margin-bottom: 2svh; }
  .unlock__ring::before, .unlock__ring::after { inset: -5px; }
  @keyframes nudge { 0% { scale: .92; opacity: .55; } 100% { scale: 1.16; opacity: 0; } }
}

/* will it fit, on a phone: one clean picture (the ring, a plain tyre through it), air round everything */
@media (max-width: 760px) {
  .void--fit { justify-content: space-between; padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  .void--fit .slot { order: -1; flex: 1 0 36svh; min-height: 36svh; margin: 8px 0 26px; }
  .fitg__stay { display: none; }
  .fitg__tyre { border-radius: 999px; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
  .fitg__hole { opacity: .45; }
  .void--fit .void__index { margin-bottom: 12px; }
  .void--fit .pickrow { margin-top: 22px; }
  .void--fit .verdict { margin-top: 22px; }
  .verdict__head { font-size: 24px; }
  .verdict__body { font-size: 16px; margin-top: 8px; color: var(--muted); }
}

/* the intro price above the buy button: €129, €149 struck, until 31 Dec 2026 */
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 18px 0 14px; }
.price-line strong { font: 600 clamp(26px, 2.2vw, 34px)/1 var(--display); letter-spacing: -0.04em; }
.price-line s { color: var(--muted); font-size: 15px; text-decoration-thickness: 1px; }
.price-line .label { align-self: center; padding: 6px 10px; border-radius: 20px; background: rgba(155, 205, 208, .55); color: var(--ink); font-size: 11px; }

/* added to the cart: a small card where you are (cart-nav.js), Check out one tap away */
.added { position: fixed; right: 24px; top: 88px; z-index: 60; width: min(360px, calc(100vw - 32px)); display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 14px; align-items: center; padding: 16px; border-radius: 24px; background: #FFFFFF; color: #202F30; box-shadow: var(--shadow); opacity: 0; translate: 0 -10px; transition: opacity .3s var(--ease), translate .4s var(--ease); }
.added.is-on { opacity: 1; translate: 0 0; }
.added[hidden] { display: none; }
.added__pic { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; }
.added__h { margin: 0; font: 600 15px/1.2 var(--display); letter-spacing: -0.01em; }
.added__p { margin: 3px 0 0; font-size: 13px; color: #606A74; }
.added__x { align-self: start; width: 44px; height: 44px; margin: -6px -6px 0 0; border-radius: 50%; position: relative; }   /* 44 px to hit, the cross as before */
.added__x::before, .added__x::after { content: ""; position: absolute; left: 15px; right: 15px; top: 50%; border-top: 1.5px solid #202F30; rotate: 45deg; }
.added__x::after { rotate: -45deg; }
.added__x:hover { background: #ECECEA; }
.added__btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 12px; }
.added__go.buy-btn { min-height: 48px; font-size: 15px; }
.added__cart { padding: 0 14px; min-height: 48px; display: inline-flex; align-items: center; font: 600 14px/1 var(--display); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .added { left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; translate: 0 12px; } }
.nav__bag.is-bump { animation: bag-bump .5s var(--ease); }
@keyframes bag-bump { 30% { scale: 1.18; } 100% { scale: 1; } }

/* in the buy chapter the nav has no Buy pill: the button is right there on the page */
html.in-buy .nav__buy { display: none; }

/* ---------------- the footer, after 21st.dev "Footer section 1": centred mark, a row of links with a pill that grows
   under the pointer, the ways to reach us, a slow hatched band, the legal lines. Ink ground, Chalk type. */
.foot:has(.foot2) { padding: 56px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot2__top { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 var(--gutter) 40px; text-align: center; }
.foot2__logo { width: 120px; height: auto; fill: #ECECEA; display: block; }
/* Liz's line under the mark (landing page) */
.foot2__intro { margin: -12px 0 0; max-width: 28em; font-size: 15px; line-height: 1.5; color: rgba(236, 236, 234, .72); }
@media (min-width: 561px) { .foot2__intro { margin-top: -28px; } }
.foot2__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
/* a phone: Liz's nine footer links as an even grid, the long ones on a row of their own */
@media (max-width: 560px) {
  .foot2__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 0; width: 100%; max-width: 340px; }
  .foot2__nav a[href$="#trial"], .foot2__nav a[href$="#keep-moving"], .foot2__nav a[href^="tel:"] { grid-column: 1 / -1; }
  .foot2__nav a { justify-content: center; }
}
@media (max-width: 560px) { .foot2__nav a[href$="#trial"] { padding-inline: 0; white-space: nowrap; font-size: 14px; } }
.foot2__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: 500 15px/1 var(--display); color: #ECECEA; isolation: isolate; transition: color .25s; }
.foot2__nav a::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: 999px; background: rgba(236, 236, 234, .1); scale: 0; opacity: 0; transition: scale .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; }
.foot2__nav a:hover::before, .foot2__nav a:focus-visible::before { scale: 1; opacity: 1; }
.foot2__nav a:active { scale: .96; }
.foot2__reach { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.foot2__reach a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 400 14px/1 var(--body); color: rgba(236, 236, 234, .72); transition: color .2s; }
.foot2__reach a:hover { color: #ECECEA; }
.foot2__reach svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.foot2__band { display: block; height: 44px; border-block: 1px solid rgba(236, 236, 234, .1); background: repeating-linear-gradient(315deg, rgba(236, 236, 234, .1) 0 1px, transparent 0 50%) 0 0 / 10px 10px; }
.foot2.is-in .foot2__band { animation: foot2-band 20s linear forwards; }
@keyframes foot2-band { to { background-position-x: 100%; } }
.foot2__legal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px var(--gutter) 0; text-align: center; font: 400 12px/1.6 var(--body); color: rgba(236, 236, 234, .55); }
/* the entrance: the parts rise in one after another as the footer comes into view */
.foot2.is-ready .foot2__top > *, .foot2.is-ready .foot2__band, .foot2.is-ready .foot2__legal { opacity: 0; translate: 0 20px; transition: opacity .5s ease, translate .6s cubic-bezier(.34, 1.4, .64, 1); }
.foot2.is-in .foot2__top > *, .foot2.is-in .foot2__band, .foot2.is-in .foot2__legal { opacity: 1; translate: 0 0; }
.foot2.is-in .foot2__top > :nth-child(2) { transition-delay: .1s; } .foot2.is-in .foot2__top > :nth-child(3) { transition-delay: .2s; }
.foot2.is-in .foot2__band { transition-delay: .45s; translate: 0 0; } .foot2.is-in .foot2__legal { transition-delay: .55s; }
@media (prefers-reduced-motion: reduce) { .foot2.is-ready * { opacity: 1 !important; translate: none !important; transition: none !important; animation: none !important; } }
@media (max-width: 560px) { .foot:has(.foot2) { padding-top: 44px; } .foot2__top { gap: 20px; padding-bottom: 32px; } .foot2__nav a { padding: 0 11px; font-size: 14px; } }

/* footer, closer to the 21st.dev original: a bigger mark, big airy links, the socials, a wider band */
.foot:has(.foot2) { padding: 88px 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.foot2__top { gap: 44px; padding-bottom: 64px; }
.foot2__logo { width: 168px; }
.foot2__nav { gap: 6px 26px; }
.foot2__nav a { min-height: 48px; padding: 0 16px; font: 500 19px/1 var(--display); letter-spacing: -0.01em; }
.foot2__social { display: flex; justify-content: center; gap: 10px; }
.foot2__social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #ECECEA; transition: background-color .25s, scale .25s; }
.foot2__social a:hover { background: rgba(236, 236, 234, .1); scale: 1.08; }
.foot2__social svg { width: 26px; height: 26px; fill: currentColor; }
.foot2__band { height: 64px; border-block-color: rgba(236, 236, 234, .14); background-image: repeating-linear-gradient(315deg, rgba(236, 236, 234, .16) 0 1px, transparent 0 50%); }
.foot2__legal { gap: 10px; padding-top: 32px; }
.foot2__legal span { font: 400 16px/1.4 var(--body); color: rgba(236, 236, 234, .78); }
.foot2__legal small { max-width: 52em; font-size: 12px; line-height: 1.6; color: rgba(236, 236, 234, .5); }
.foot2__legal a { color: inherit; }
.foot2.is-in .foot2__top > :nth-child(3) { transition-delay: .2s; }
@media (max-width: 560px) {
  .foot:has(.foot2) { padding-top: 64px; }
  .foot2__top { gap: 32px; padding-bottom: 48px; }
  .foot2__logo { width: 132px; }
  .foot2__nav { gap: 0 4px; }
  .foot2__nav a { font-size: 16px; padding: 0 12px; }
  .foot2__band { height: 48px; }
  .foot2__legal span { font-size: 14px; }
}

.added__pic { background: none; padding: 0; }

/* will it fit: the tinted disc sits true in the ring's hole (v8 model: hole radius 52.7 mm against the 78.5 mm
   outer radius, its centre 4 mm below the model's centre), and a lighter tyre so the dark, floor-lit shackle reads */
.fitg__hole { width: calc(var(--lr, 200px) * 2 * 52.7 / 78.5); top: calc(50% + var(--lr, 200px) * 4 / 78.5); clip-path: none; opacity: .8; }
.fitg__tyre { background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(32, 47, 48, .14) 9px 15px) left top / 50.5% 100% no-repeat,
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(32, 47, 48, .14) 9px 15px) right top / 50.5% 100% no-repeat,
    rgba(32, 47, 48, .45); }
@media (max-width: 760px) { .fitg__tyre { background: rgba(32, 47, 48, .45); } }

/* ---------------- after the full review (10 Oct 2026) */
/* the finishes are shown as the lock itself, never as a flat colour (guide p. 56: finish colours only in renders) */
.finishes button::before, .pick button::before { background: center / contain no-repeat; box-shadow: none; border-radius: 0; }
.finishes button::before { inset: 5px; }
.finishes button[data-finish="steel"]::before, .pick button[data-pick="steel"]::before { background-image: url("images/scenes/thumb-steel.webp"); }
.finishes button[data-finish="copper"]::before, .pick button[data-pick="copper"]::before { background-image: url("images/scenes/thumb-copper.webp"); }
.finishes button[data-finish="black"]::before, .pick button[data-pick="black"]::before { background-image: url("images/scenes/thumb-black.webp"); }

/* the opening says what this is, under the pixel wordmark, before the first scroll */
.hero__tag { position: fixed; z-index: 4; left: 50%; bottom: calc(var(--gutter) + 92px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; margin: 0; width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  font: 500 clamp(17px, 1.5vw, 22px)/1.3 var(--display); letter-spacing: -0.01em; color: #ECECEA; text-align: center; pointer-events: none;
  opacity: calc(1 - var(--hp, 0) * 5); transition: opacity .6s; }
html:not(.is-loaded) .hero__tag { opacity: 0; }

/* varefakta: the certificate stands upright beside the seal, whole, flat */
.vf-slot { place-items: center end; }
.paper { translate: 18% 0; }

/* keyboard and touch: a press answers; hover growth only where there is a pointer that hovers */
.buy-btn:active, .pill-btn:active, .nav__buy:active, .chip:active, .qty button:active, .turn:active, .addon__btn:active, .item__go:active { scale: .97; }
.qty button:disabled { opacity: .35; cursor: default; }
@media (hover: none) {
  .finishes button:hover, .foot2__social a:hover { transform: none; scale: 1; }
  .pill:hover::before { transform: scaleX(0); }
}
/* the glass bar over the moving 3D on a phone costs frames: solid Chalk there */
@media (max-width: 760px) {
  html.nav-float .nav__shell { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--paper) 96%, transparent); }
  html[data-tone="dark"].nav-float .nav__shell { background: color-mix(in srgb, #1D5F63 96%, transparent); }
}
/* reduced motion: no loop runs for ever */
@media (prefers-reduced-motion: reduce) {
  .phone__ble i, .hero__hint i::after, .radar__ping, .foot2__band { animation: none !important; }
}

/* a closed menu is gone for the keyboard too (display: flex would otherwise beat [hidden]) */
.menu[hidden] { display: none; }
/* focus rings that show on every ground: Chalk on the green and Ink chapters */
.void--seal :focus-visible, .hero :focus-visible, .foot :focus-visible { outline-color: #ECECEA; }
/* the small print in the footer reads at 4.5:1 or better */
.foot2__legal small { color: rgba(236, 236, 234, .66); }
/* the narrowest phones: the one long word in the Varefakta heading still fits */
@media (max-width: 360px) { .void--seal .heading { font-size: 30px; } }
/* low computer screens (a 720 px laptop): a chapter grows with its content instead of spilling into the next */
@media (min-width: 761px) and (max-height: 760px) { .void { height: auto; min-height: 100vh; min-height: 100svh; padding-top: 104px; } }
/* without the 3D engine (no WebGL, the CDN down, scripts off) the green chapter keeps its own ground, so its text stays readable */
html.no-engine .void--seal, html:not(.is-loading):not(.is-loaded) .void--seal { background: #1D5F63; }

/* the finish dots need no caption: the renders say which finish, the heading marks the chosen one (owner, 10 Oct) */
.finishes__name, .pick__name { display: none !important; }
/* no "Drag to turn" between the arrows: the arrows and the lock itself say it (owner, 10 Oct) */
.slot__hint, .lock3d__hint { display: none !important; }

/* the three promises under the buy button: 57 days to try it, Keep you moving, the reviews on Trustpilot.
   Poppins, Ink, one Copper rule (the guide's accent); Trustpilot keeps its own green star. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 18px; margin-top: 2px !important; border-top: 1px dashed var(--line); width: 100%; }
.badge { display: grid; justify-items: start; margin: 0; color: var(--ink); font-family: var(--display); line-height: 1; text-transform: uppercase; }
.badge--57 { grid-template-columns: auto; }
.badge--57 b { font-size: 40px; font-weight: 600; letter-spacing: -0.05em; }
.badge--57 span { margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.badge--kym b { max-width: 7.2em; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.02; }
.badge--kym i { width: 100%; height: 3px; margin: 6px 0 5px; border-radius: 2px; background: var(--copper); }
.badge--kym span { font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.badge--tp { gap: 4px; text-transform: none; transition: opacity .2s; }
.badge--tp:hover { opacity: .75; }
.badge__tp { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.badge__tp svg { width: 20px; height: 20px; padding: 2px; border-radius: 3px; background: #00B67A; fill: #FFFFFF; }
.badge--tp > span:last-child { font: 400 12px/1.2 var(--body); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .badges { gap: 10px 18px; padding-top: 14px; } .badge--57 b { font-size: 34px; } }
@media (max-width: 760px) {
  .badges { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; }
  .badge--57 b { font-size: 30px; } .badge--57 span, .badge--kym span { font-size: 11px; }
  .badge--kym b { font-size: 13px; }
  .badge__tp { font-size: 14px; gap: 5px; } .badge__tp svg { width: 17px; height: 17px; }
  .badge--tp { justify-self: end; }
}

/* no "Steel. Copper. Black." heading over the buy block (owner, 10 Oct): it stays for screen readers only */
#h5, .pdp__fins { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* the buy chapter has no words on the left: the lock and the card are enough (owner, 10 Oct) */
#buy .void__index, #buy .product__sub { display: none !important; }

/* the lock: the studio renders (v8), two layers that cross-fade between views; placed by darkroom.js */
.lockimg { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; }
.lockimg img { position: absolute; left: 0; top: 0; width: 0; height: 0; max-width: none; object-fit: contain; opacity: 0; will-change: transform; transition: opacity .25s linear; user-select: none; -webkit-user-select: none; }
/* will it fit: the hole of the render (its radius 0.72 of the rim's, its centre 0.058 of the radius lower) */
.fitg__hole { width: calc(var(--lr, 200px) * 2 * .722); top: calc(50% + var(--lr, 200px) * .058); }

/* buy chapter: the chapter label at the top, as in the others; no line of copy under it (owner, 10 Oct) */
#buy .void__index { display: flex !important; }
#buy .product__sub { display: none !important; }
@media (min-width: 761px) { #buy .void__left { align-self: start; padding-top: 4px; } }
/* the drawn certificate needs a wide screen beside the seal; narrower, the seal stands alone */
@media (max-width: 1199px) { .paper { display: none; } }

/* ---------------- the buy card, tidied (index #buy and buy.html .buybox): one rhythm, one column, even rows */
.void--product .void__right, .buybox { gap: 18px !important; }
.void--product .void__right > *, .buybox > * { width: 100%; }
/* the finishes, the price and its tag on one baseline */
.finishes { margin: 0 0 0 -6px !important; }
.price-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0 !important; }
.price-line strong { font-size: clamp(28px, 2.4vw, 34px); }
.price-line .label { padding: 6px 10px; font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
/* quantity and Buy: the same height, the button takes the rest */
.qty-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; width: 100% !important; }
.qty { height: 54px; padding: 0 4px; }
.qty button { width: 42px; height: 42px; }
.buy-btn { min-height: 54px; }
.trust-row { justify-content: flex-start; font-size: 14px; }
/* the ways to pay: one row of equal tiles */
.paywall { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 !important; }
.paywall li { width: auto !important; height: 34px !important; display: grid; place-items: center; padding: 6px !important; }
/* the three promises: three equal columns, each centred, a hairline between */
.badges { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 0 !important; padding-top: 18px; }
.badges > .badge { justify-items: center; justify-self: stretch; text-align: center; padding: 0 8px; }
.badges > .badge + .badge { border-left: 1px dashed var(--line); }
.badge--57 b { font-size: 34px; }
.badge--kym b { max-width: none; font-size: 13px; }
.badge--kym i { width: 56px; margin: 6px auto 5px; }
.badge--tp { align-content: center; }
.badge__tp { font-size: 14px; }
.badge--tp > span:last-child { font-size: 11.5px; }
@media (max-width: 760px) {
  .badges { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .badge--tp { justify-self: stretch !important; }
  .price-line .label { font-size: 11px; }
}
.badges { grid-template-columns: .8fr 1fr 1.25fr !important; }
.badge__tp svg { flex: none; }
.badge__tp, .badge--tp > span:last-child { white-space: nowrap; }
.paywall img { max-height: 18px; width: auto !important; max-width: 100%; }
/* find my: the map stays inside the screen of the drawn phone (its round street ends no longer spill over the bezel) */
.fmp .map { overflow: hidden; clip-path: inset(0 round calc(var(--h) * .064)); }
.fmp__sheet { overflow: hidden; }

/* apple find my: the required compatibility line, small and quiet */
.fm__fine { font-size: 12px; max-width: 30em; }

/* find my: the drawn sheet sits exactly on the screen, so nothing of the map shows round its corners */
.fmp__sheet { left: calc(var(--h) * .012); right: calc(var(--h) * .012); bottom: calc(var(--h) * .012); border-bottom-left-radius: calc(var(--h) * .064); border-bottom-right-radius: calc(var(--h) * .064); }
/* find my: Apple's own badge, small, under the copy, with clear space round it (guidelines: >= 30px, 0.25x clear space) */
.fm__badge { display: block; height: 40px; width: auto; margin: 26px 0 10px; }

/* keyless: the drawn phone shows the LAAS app as it looks: a list of your locks as cards, a teal Unlock pill, a + below
   (on every screen; on a phone it sits quietly behind the lock) */
@media all {
  .phone__screen { background: #F7F5F4; grid-template-rows: auto 1fr auto; padding: 46px 12px 14px; gap: 14px; }
  .app__bar { display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; color: var(--ink); }
  .app__bar svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
  .app__bar b { font: 500 14px/1 var(--display); text-align: center; letter-spacing: -0.01em; }
  .app__head i, .app__bar i { justify-self: end; width: 14px; height: 4px; background: radial-gradient(circle, var(--muted) 1.4px, transparent 1.6px) 0 0 / 5px 4px repeat-x; }
  .app__list { display: grid; align-content: start; gap: 10px; }
  .app__card { display: grid; gap: 4px; width: 100%; padding: 12px 12px 12px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(32, 47, 48, .06), 0 6px 16px -10px rgba(32, 47, 48, .25); text-align: left; justify-items: stretch; }
  .app__head { display: flex; justify-content: space-between; align-items: center; }
  .app__head b { font: 500 14px/1.1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
  .app__meta { display: block; font: 400 11px/1.3 var(--body); color: var(--muted); }
  .app__meta .phone__ble { gap: 5px; }
  .unlock.app__card { align-self: start; justify-self: stretch; gap: 4px; }
  .unlock .unlock__ring { display: none; }
  .unlock__state { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
  .unlock__cta { margin-top: 8px; min-width: 0; height: 36px; border-radius: 18px; display: grid; place-items: center; background: var(--green); color: #FFFFFF; font: 500 13px/1 var(--display); letter-spacing: 0; transition: background-color .3s, color .3s, scale .3s var(--ease); }
  .unlock:active .unlock__cta { scale: .97; }
  .unlock.is-nudge .unlock__cta { animation: pill-nudge 2s var(--ease) infinite; }
  .unlock.is-open .unlock__cta { background: #FFFFFF; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
  .unlock.is-open .unlock__state { color: var(--green); }
  .app__card--far { opacity: .7; }
  .app__seek { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
  .app__seek i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); animation: blink 1.4s ease-in-out infinite; }
  .app__seek i:nth-child(2) { animation-delay: .2s; } .app__seek i:nth-child(3) { animation-delay: .4s; }
  .app__tabs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--muted); padding: 0 6px; }
  .app__tabs > svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .app__tabs > svg:last-child { justify-self: end; }
  .app__add { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); }
  .app__add svg { width: 18px; fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; }
  .phone__foot { display: none; }
}
@keyframes pill-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(29, 95, 99, .35); } 50% { box-shadow: 0 0 0 6px rgba(29, 95, 99, 0); } }
@media (prefers-reduced-motion: reduce) { .unlock.is-nudge .unlock__cta, .app__seek i { animation: none; } }
/* on a phone the card stays the compact one: the lock button, its state, the action */

/* reviews: a quiet band of real Trustpilot reviews between buy and the questions, drifting right */
.tpb { display: block; position: relative; z-index: 2; overflow: hidden; padding: 22px 0; background: #FFFFFF; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); color: var(--ink);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tpb__list { display: flex; align-items: center; gap: 56px; width: max-content; padding-right: 56px; animation: tpb-drift 55s linear infinite; }
.tpb:hover .tpb__list, .tpb:focus-visible .tpb__list { animation-play-state: paused; }
@keyframes tpb-drift { from { translate: -50% 0; } to { translate: 0 0; } }
.tpb__list li { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 15px; }
.tpb__stars { display: inline-flex; gap: 2px; }
.tpb__stars svg { width: 18px; height: 18px; }
.tpb__stars rect { fill: #00B67A; } .tpb__stars svg.off rect { fill: rgba(32, 47, 48, .16); }
.tpb__stars path { fill: #FFFFFF; }
.tpb__logo { display: inline-flex; align-items: center; gap: 5px; font: 600 16px/1 var(--display); letter-spacing: -0.01em; }
.tpb__logo svg { width: 20px; height: 20px; } .tpb__logo path { fill: #00B67A; }
.tpb__sum b { font: 600 16px/1 var(--display); }
.tpb__sum > span:last-child { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.tpb__q q { color: var(--ink); quotes: "“" "”"; }
.tpb__q > span:last-child { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .tpb { padding: 16px 0; } .tpb__list { gap: 36px; padding-right: 36px; } .tpb__list li { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .tpb { overflow-x: auto; } .tpb__list { animation: none; } }

/* the band sits at the very bottom of the buy chapter, edge to edge, so it is seen with the price */
#buy > .tpb { position: absolute; left: 0; right: 0; bottom: 0; }
#buy { padding-bottom: 96px; }
#buy > .tpb { background: transparent; border-color: transparent; }

/* will it fit: two plain questions, numbered, then the answer */
.fit__lede { margin-top: 14px; max-width: 30em; color: var(--ink-2); }
.fitq { margin-top: 26px; }
.fitq + .fitq { margin-top: 20px; }
.fitq__h { display: flex; align-items: center; gap: 10px; font: 500 16px/1.2 var(--display); color: var(--ink); }
.fitq__h b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font: 600 12px/1 var(--display); }
.fitq .pickrow { margin-top: 12px; }
.fitq__hint { margin-top: 8px; max-width: 32em; font-size: 13px; line-height: 1.45; color: var(--muted); }
.void--fit .verdict { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
@media (max-width: 760px) {
  .fit__lede { display: none; }
  .fitq { margin-top: 14px; } .fitq + .fitq { margin-top: 12px; }
  .fitq .pickrow { margin-top: 8px; }
  .fitq__h { font-size: 15px; }
  .fitq__hint { font-size: 12px; margin-top: 6px; }
  .void--fit .verdict { margin-top: 14px; padding-top: 14px; }
}
.fitq .chip { min-height: 40px; padding: 0 14px; font-size: 14px; }
.fitq .pickrow { flex-wrap: nowrap; gap: 6px; }
@media (max-width: 760px) { .fitq .chip { flex: 1 1 auto; padding: 0 6px; font-size: 13px; white-space: nowrap; } .fitq .pickrow { gap: 5px; } #holes .chip { flex: 0 0 72px; } }
@media (min-width: 761px) and (max-width: 1100px) { .fitq .pickrow { flex-wrap: wrap; } }
@media (max-width: 760px) { #fq2 ~ .fitq__hint { display: none; } .void--fit .slot { flex: 1 0 24svh; min-height: 24svh; margin-bottom: 14px; } .void--fit .verdict { border-top: 0; padding-top: 0; } }

/* mobile nav, lighter: logo, a slimmer Buy, and the menu as a round icon (the word stays for screen readers) */
@media (max-width: 760px) {
  .nav__shell, html.nav-float .nav__shell, html.nav-float.nav-compact .nav__shell { height: 56px; padding: 0 6px 0 14px; }
  .nav__end { gap: 6px; }
  .nav__buy { height: 40px; padding: 0 14px; gap: 5px; font-size: 14px; }
  .nav__price, .nav__buy .nav__price { font-size: 14px; }
  .nav__price::before { content: ""; }
  .ghost.nav__menu { position: relative; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 0; color: transparent; }
  .ghost.nav__menu::before, .ghost.nav__menu::after { content: ""; position: absolute; left: 50%; width: 16px; height: 1.5px; border-radius: 2px; background: var(--ink); translate: -50% 0; transition: rotate .3s var(--ease), top .3s var(--ease); }
  .ghost.nav__menu::before { top: calc(50% - 3.5px); }
  .ghost.nav__menu::after { top: calc(50% + 2.5px); }
  .ghost.nav__menu[aria-expanded="true"]::before { top: calc(50% - .75px); rotate: 45deg; }
  .ghost.nav__menu[aria-expanded="true"]::after { top: calc(50% - .75px); rotate: -45deg; }
  html[data-tone="dark"] .nav .nav__menu { color: transparent; }
  html[data-tone="dark"] .ghost.nav__menu::before, html[data-tone="dark"] .ghost.nav__menu::after { background: #ECECEA; }
}
/* varefakta on a phone: the seal takes the spare room, so nothing hangs empty under the text */
@media (max-width: 760px) { .void--seal .slot { flex: 1 0 38svh; } .void--seal { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 760px) { .fitq__more { display: none; } }

/* the Flex Mount question, before the cart */
.flex-ask { width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 24px; background: #FFFFFF; color: var(--ink); overflow: auto; box-shadow: 0 40px 90px -30px rgba(32, 47, 48, .55); }
.flex-ask::backdrop { background: rgba(32, 47, 48, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.flex-ask[open] { animation: flex-in .35s var(--ease); }
@keyframes flex-in { from { opacity: 0; translate: 0 16px; scale: .98; } }
.flex-ask form { position: relative; }
.flex-ask img { width: 100%; aspect-ratio: 680 / 360; object-fit: cover; }
.flex-ask__body { display: grid; gap: 12px; padding: 22px 24px 24px; }
.flex-ask__kicker { color: var(--muted); font-size: 11px; }
.flex-ask h2 { margin: 0; font: 600 clamp(22px, 6vw, 26px)/1.1 var(--display); letter-spacing: -0.02em; }
.flex-ask p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.flex-ask .buy-btn { margin-top: 8px; width: 100%; border: 0; cursor: pointer; }
.flex-ask__no { min-height: 50px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(32, 47, 48, .25); font: 600 16px/1 var(--display); color: var(--ink); transition: box-shadow .2s; }
.flex-ask__no:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.flex-ask__x { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 12px -4px rgba(32, 47, 48, .3); }
.flex-ask__x::before, .flex-ask__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: var(--ink); translate: -50% -50%; rotate: 45deg; }
.flex-ask__x::after { rotate: -45deg; }

/* the stepper, once this finish is in the cart: at 1 the minus is a bin, and takes it out */
.qty button.is-trash { display: inline-grid; place-items: center; font-size: 0; }
.qty button.is-trash::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V4.5h5V7M6.5 7l.9 12a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.9-12M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V4.5h5V7M6.5 7l.9 12a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.9-12M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.qty-row.is-cart .qty { box-shadow: inset 0 0 0 1.5px var(--green); }
.flex-ask img { aspect-ratio: 680 / 411; }
.flex-ask .buy-btn { white-space: normal; text-align: center; line-height: 1.2; }
.flex-ask .buy-btn { gap: .3em; }

/* keyless on a phone: no card to tap; the app is drawn quietly behind the lock, as a hint of how it opens */
@media (max-width: 760px) {
  .void--macro { z-index: 0; }
  .void--macro .void__right { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; margin: 0; opacity: .38; pointer-events: none; }
  .void--macro .slot { flex: 1 0 40svh; }
  .phone { width: auto; height: min(54svh, 430px); aspect-ratio: 9 / 18.5; padding: 8px; border: 0; border-radius: 38px; background: var(--ink); box-shadow: none; }
  .phone__screen { height: 100%; border-radius: 31px; background: #F7F5F4; display: grid; grid-template-columns: none; grid-template-rows: auto 1fr auto; align-content: stretch; padding: 40px 10px 12px; gap: 12px; }
  .phone__screen::before { display: block; }
  .unlock { display: grid; grid-template-columns: none; grid-template-rows: none; justify-items: stretch; text-align: left; column-gap: 0; row-gap: 4px; width: 100%; }
  .unlock__cta { min-width: 0; text-align: center; }
}

/* the turn arrows: just the chevron, no circle (owner, 10 Oct); the 44 px hit area and a focus ring stay */
.turn, .ghost.turn { min-width: 44px; min-height: 44px; background: transparent !important; box-shadow: none !important; border: 0 !important; color: var(--ink); transition: translate .25s var(--ease), opacity .2s; }
.turn svg { width: 16px; stroke-width: 1.6; }
.turn:hover { box-shadow: none !important; opacity: .7; }
.turn[data-turn="-1"]:hover, .turn:first-child:hover { translate: -2px 0; }
.turn[data-turn="1"]:hover, .turn:last-child:hover { translate: 2px 0; }
.turn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 12px; }

/* hero → intro: the light page rises as one sheet, rounded at the top, behind the lock (stage) and the text */
.sheet { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; clip-path: inset(var(--st, 100vh) 0 0 0 round 28px 28px 0 0); }
.sheet.is-on { display: block; }
@media (prefers-reduced-motion: reduce) { .sheet { display: none !important; } }
/* keyless on a phone, composed: the lock above, the app rising from the bottom edge under it (top half, fading out) */
@media (max-width: 760px) {
  .void--macro { overflow: hidden; }
  .void--macro .slot { flex: 1 0 30svh; margin-bottom: 30svh; }
  .void--macro .void__right { bottom: calc(-1 * (min(54svh, 430px) - 31svh)); opacity: .9;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 62%); mask-image: linear-gradient(to bottom, #000 30%, transparent 62%); }
}
@media (max-width: 760px) { .void--macro .void__right { pointer-events: auto; } }
/* the app's lower half is cut by its own box, not by running past the section (that made the chapter a screen taller) */
@media (max-width: 760px) {
  .void--macro .void__right { bottom: 0; height: 31svh; overflow: hidden; align-content: start; }
}
@media (max-width: 760px) {
  .void--macro .void__right { height: 36svh; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .void--macro .slot { margin-bottom: 34svh; }
}
@media (max-width: 760px) { .void--macro .slot { flex: 1 1 auto; min-height: 22svh; margin-bottom: 33svh; } .void--macro .void__right { height: 35svh; } }

/* the promise badges are links to promises.html */
a.badge--57, a.badge--kym { text-decoration: none; transition: opacity .2s; }
a.badge--57:hover, a.badge--kym:hover { opacity: .7; }

/* the cart preview under the bag (hover, desktop) */
.minicart { position: fixed; z-index: 70; width: 340px; padding: 18px; border-radius: 22px; background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 0 rgba(32, 47, 48, .05), 0 24px 60px -24px rgba(32, 47, 48, .45); opacity: 0; translate: 0 -8px; transition: opacity .25s var(--ease), translate .3s var(--ease); }
.minicart.is-on { opacity: 1; translate: 0 0; }
.minicart[hidden] { display: none; }
.minicart::before { content: ""; position: absolute; right: 22px; top: -6px; width: 14px; height: 14px; background: #FFFFFF; rotate: 45deg; border-radius: 3px 0 0 0; }
.minicart__h { margin: 0 0 10px; font: 600 16px/1.2 var(--display); letter-spacing: -0.01em; }
.minicart__h span { margin-left: 6px; font: 400 13px/1 var(--body); color: var(--muted); }
.minicart__empty { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.minicart__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.minicart__lines li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.minicart__lines img { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: #ECECEA; }
.minicart__lines b { display: block; font: 600 14px/1.2 var(--display); }
.minicart__lines small { font-size: 12px; color: var(--muted); }
.minicart__lines em { font-style: normal; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.minicart__sub { display: flex; justify-content: space-between; margin: 12px 0 6px; font-size: 14px; }
.minicart__sub b { font: 600 15px/1 var(--display); }
.minicart__ship { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.minicart__ship i { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--green) calc(var(--p) * 100%), #ECECEA 0); }
.minicart__btns { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.minicart__go { width: 100%; height: 46px; justify-content: center; font-size: 15px; }
.minicart__view { font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .minicart { transition: none; } }
/* the preview's lines: − qty + (a bin at 1) */
.minicart__lines li { grid-template-columns: 48px 1fr auto; }
.minicart__lines span em { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.minicart__qty { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.minicart__qty b { min-width: 20px; text-align: center; font: 600 13px/1 var(--display); }
.minicart__qty button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 500 16px/1 var(--display); color: var(--ink); transition: background-color .2s; }
.minicart__qty button:hover { background: #ECECEA; }
.minicart__qty button.is-bin::before { content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V4.5h5V7M6.5 7l.9 12a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.9-12M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V4.5h5V7M6.5 7l.9 12a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.9-12M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* a bridge over the gap between the bag and the preview, so moving the mouse down never closes it */
.minicart::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
/* the bin sits dead centre in its round button */
.qty button.is-trash { position: relative; }
.qty button.is-trash::before { position: absolute; inset: 0; margin: auto; }
/* drawings that are not on screen are taken out of the page (no work while the lock or the mouse moves) */
.stage.off-orbit .orbit, .stage.off-seal .seal, .stage.off-fit .fitg, .stage.off-radar .radar, .stage.off-radar .fmp { display: none; }

/* the nav pill just says Buy (the price is on the page): sized to its short word and to the round controls beside
   it, 44 px like the bag and the menu button, the nav links' type (owner, 10 Oct) */
.nav__buy { height: 34px; padding: 0 16px; gap: 0; font: 500 13px/1 var(--display); letter-spacing: .02em; }
.nav__bag { width: 44px; height: 44px; }
@media (max-width: 760px) { .nav__buy { height: 44px; padding: 0 16px; font-size: 14px; } }

/* wide: the phone spans both grid rows (it sat in a second row, which made the chapter 897 px tall on a 720 px laptop) */
@media (min-width: 761px) { .void--macro .void__right { grid-row: 1 / span 2; align-self: end; } .void--macro .void__left { align-self: start; } }
/* the Near dot breathes with a small ring */
.phone__ble i { position: relative; animation: none; }
.phone__ble i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); opacity: 0; animation: near-ping 2.7s ease-out infinite; animation-play-state: paused; }
.void--macro.is-live .phone__ble i::after { animation-play-state: running; }
@keyframes near-ping { 0% { opacity: .45; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }
@media (prefers-reduced-motion: reduce) { .phone__ble i::after { animation: none; } }

/* fit, on a phone: the text block calm and aligned (owner, 10 Oct). The column takes the full width between the
   16 px gutters (it shrank to the chip row before), five equal bike chips, Yes/No in the same style, an even rhythm,
   and a quieter verdict with its mark on the first line */
@media (max-width: 760px) {
  .void--fit .void__left { align-self: stretch; width: 100%; }
  .void--fit .void__index { margin-bottom: 10px; }
  .void--fit .heading { font-size: clamp(28px, 8.4vw, 34px); line-height: 1.05; }
  .void--fit .fitq { margin-top: 18px; }
  .void--fit .fitq + .fitq { margin-top: 16px; }
  .void--fit .fitq__h { gap: 10px; font: 500 15px/1.2 var(--display); }
  .void--fit .fitq__h b { width: 22px; height: 22px; font-size: 11px; }
  .void--fit .fitq .pickrow { margin-top: 10px; gap: 6px; flex-wrap: nowrap; }
  .void--fit .fitq .chip { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px; font-size: 13px; white-space: nowrap; }
  .void--fit #holes .chip { flex: 0 0 calc((100% - 24px) / 5); }
  .void--fit .fitq__hint { margin-top: 8px; font-size: 12px; line-height: 1.4; }
  .void--fit .verdict { margin-top: 18px; padding-top: 0; border-top: 0; }
  .void--fit .verdict__head { align-items: flex-start; gap: 10px; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; }
  .void--fit .verdict__mark { width: 22px; height: 22px; margin-top: 1px; background-size: 14px !important; }
  .void--fit .verdict__body { margin-top: 4px; padding-left: 32px; font-size: 14px; line-height: 1.45; color: var(--muted); }
}

/* buy chapter on a phone: one screen (it was 902 px on a 375×812 phone, an extra snap stop). The payment marks step
   out here (they are in the cart and the checkout), the card's rhythm is a little tighter, the band keeps its room */
@media (max-width: 760px) {
  #buy .void__right .paywall { display: none !important; }
  #buy .void__right { gap: 14px !important; }
  #buy.void--product { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  #buy.void--product { height: 100vh; height: 100svh; }
  #buy .slot { flex: 1 1 30svh; min-height: 22svh; }
}

/* low computer screens (a 720 px laptop): Fit and Find My stay one screen each (they ran 63 and 3 px over: an extra
   snap stop). Fit drops its one-line lede (the two questions say it) and takes a little less room per step */
@media (min-width: 761px) and (max-height: 760px) {
  .void--fit .fit__lede { display: none; }
  .void--fit .heading { font-size: clamp(34px, 3.4vw, 44px); }
  .void--fit .fitq { margin-top: 18px; }
  .void--fit .verdict { margin-top: 18px; padding-top: 16px; }
  .void--map { padding-bottom: 56px; }
}

/* ---------------- Fit, polished (owner, 10 Oct): a crisp flat tyre that changes width with a transform, the 63 mm
   lane it must pass through, brackets that draw in, a number that counts, a gliding chip pill and a result card */
.fitg__stay { display: none; }
.fitg__tyre { width: calc(var(--ir) * 2); top: 6%; bottom: 6%; border-radius: 999px; transform: scaleX(var(--tw)); transition: transform .7s var(--ease), background-color .4s;
  background: #8B9396 repeating-linear-gradient(to bottom, transparent 0 12px, rgba(255, 255, 255, .22) 12px 20px) center / 22% 100% no-repeat; }
.fitg[data-state="no"] .fitg__tyre { background-color: #B8957E; }
@media (min-width: 761px) { .fitg__tyre { -webkit-mask-image: none; mask-image: none; } }
.fitg__lane { position: absolute; top: calc(50% + var(--lr, 200px) * 4 / 78.5 - var(--lr, 200px) * .62); height: calc(var(--lr, 200px) * 1.24); width: 0; border-left: 1.5px dashed var(--green); opacity: .75; transition: border-color .4s; z-index: 1; }
.fitg__lane--l { left: calc(50% - var(--ir) * 63 / 105); }
.fitg__lane--r { left: calc(50% + var(--ir) * 63 / 105 - 1.5px); }
.fitg[data-state="no"] .fitg__lane { border-color: var(--stop); opacity: 1; }
/* the tyre's bracket: a fixed box; the line scales and the two ticks slide, so nothing is laid out again */
.fitg__dim--tyre { width: calc(var(--ir) * 2); border-width: 0; transition: none; }
.fitg__dim--tyre::before { transform: scaleX(var(--tw)); transition: transform .7s var(--ease), border-color .4s; }
.fitg__t { position: absolute; left: 50%; top: 0; width: 1.5px; height: 14px; margin-left: -.75px; background: #1D5F63; transition: transform .7s var(--ease), background-color .4s; }
.fitg__t--l { transform: translateX(calc(var(--ir) * var(--tw) * -1)); }
.fitg__t--r { transform: translateX(calc(var(--ir) * var(--tw))); }
.fitg[data-state="no"] .fitg__t { background: var(--stop); }
.fitg__dim span { font-variant-numeric: tabular-nums; transition: background-color .4s, color .4s; }
/* each time the drawing shows (the stage takes it out of the page when it is away), the brackets draw in */
.fitg__dim::before { animation: fit-draw .8s var(--ease) .25s both; }
.fitg__t, .fitg__dim--ring { animation: fit-fade .5s ease .2s both; }
.fitg__dim span { animation: fit-fade .5s ease .7s both; }
.fitg__lane { animation: fit-lane .7s var(--ease) .1s both; }
@keyframes fit-draw { from { scale: 0 1; } }
@keyframes fit-fade { from { opacity: 0; } }
@keyframes fit-lane { from { opacity: 0; scale: 1 .4; } }

/* the chips: one dark pill glides under the picked one; a press gives a little */
.pickrow.has-pill { position: relative; isolation: isolate; }
.pickrow__pill { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 30px; background: var(--ink); pointer-events: none; }
.pickrow.is-ready .pickrow__pill { transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), width .45s cubic-bezier(.34, 1.3, .64, 1); }
.pickrow.has-pill .chip[aria-checked="true"] { background: transparent; color: var(--paper); box-shadow: none; }
.pickrow.has-pill .chip { background: transparent; transition: color .3s, box-shadow .25s; }

/* the answer: a result card under the questions, its mark drawn in on every change */
.verdict__mark { display: grid; place-items: center; background-image: none !important; }
.verdict__mark svg { width: 62%; height: 62%; fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.verdict__yes { stroke-dasharray: 16; } .verdict__no { stroke-dasharray: 20; display: none; }
.verdict[data-state="no"] .verdict__yes { display: none; } .verdict[data-state="no"] .verdict__no { display: inline; }
.verdict.is-swap .verdict__yes { animation: fit-tick .5s var(--ease) .12s both; }
.verdict.is-swap .verdict__no { animation: fit-cross .5s var(--ease) .12s both; }
.verdict.is-swap .verdict__mark { animation: fit-pop .45s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes fit-tick { from { stroke-dashoffset: 16; } }
@keyframes fit-cross { from { stroke-dashoffset: 20; } }
@keyframes fit-pop { from { transform: scale(.6); } }
.verdict { transition: background-color .4s, box-shadow .4s; }
@media (min-width: 761px) {
  .void--fit .verdict { max-width: 34em; margin-top: 24px; padding: 16px 18px; border-top: 0; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-2); }
  .void--fit .verdict[data-state="no"] { background: #F6EEE8; box-shadow: inset 0 0 0 1px rgba(176, 114, 73, .35); }
  .void--fit .verdict__head { align-items: center; gap: 12px; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
  .void--fit .verdict__mark { width: 28px; height: 28px; }
  .void--fit .verdict__body { margin-top: 6px; padding-left: 40px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
  .void--fit .fitq__hint { max-width: 46em; }
}
@media (min-width: 761px) and (max-height: 760px) { .void--fit .verdict { margin-top: 16px; padding: 12px 16px; } }

/* the steps come in one after the other, once */
.void--fit.fit-armed .fit__lede, .void--fit.fit-armed .fitq, .void--fit.fit-armed .verdict { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.void--fit.fit-armed.fit-in .fit__lede, .void--fit.fit-armed.fit-in .fitq, .void--fit.fit-armed.fit-in .verdict { opacity: 1; transform: none; }
.void--fit.fit-in .fitq { transition-delay: .12s; } .void--fit.fit-in .fitq + .fitq { transition-delay: .22s; } .void--fit.fit-in .verdict { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .fitg__tyre, .fitg__dim--tyre::before, .fitg__t, .pickrow.is-ready .pickrow__pill { transition: none !important; }
  .fitg__dim::before, .fitg__t, .fitg__dim--ring, .fitg__dim span, .fitg__lane, .verdict.is-swap *, .verdict.is-swap .verdict__mark { animation: none !important; }
}

/* spec row icons keep their round shape: long Danish words (Forsikringsgodkendt) used to squeeze the icon
   column into an oval (owner, 10 Oct) */
.specs a { grid-template-columns: 40px minmax(0, 1fr); }
.specs svg { min-width: 40px; aspect-ratio: 1; }
.specs b { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 760px) {
  .specs a { grid-template-columns: 34px minmax(0, 1fr); }
  .specs svg { min-width: 34px; }
}

/* ---------------- loop round 1 (10 Oct, evening) */
/* a phone number never breaks across two lines */
a[href^="tel:"] { white-space: nowrap; }
/* varefakta: the drawn certificate stays inside the screen (it ran 20 px off the right edge at 1440 px) */
.paper { translate: 0 0; width: min(19vw, 280px); }
/* apple find my: the compatibility line is required, so phones show it too, small and quiet under the copy */
@media (max-width: 760px) { .void--map .fm__fine { display: block; margin-top: 10px; font-size: 11px; line-height: 1.45; } }
/* the Flex Mount question: two photos side by side (the frame-lock hole, ringed in Copper; the Flex Mount on a frame
   without), a word on each, then the question and the two answers. No paragraph. */
.flex-ask__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #FFFFFF; }
.flex-ask__pics figure { position: relative; margin: 0; overflow: hidden; }
.flex-ask .flex-ask__pics img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.flex-ask__pics figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 999px; background: #FFFFFF; color: var(--ink); font: 600 12px/1.2 var(--display); }
.flex-ask__ring { position: absolute; left: 51%; top: 50%; width: 34%; translate: -50% -50%; overflow: visible; pointer-events: none; }
.flex-ask__ring circle { fill: none; stroke: var(--copper); stroke-width: 3.5; vector-effect: non-scaling-stroke; }
.flex-ask[open] .flex-ask__ring { animation: ask-ring .7s .25s var(--ease) both; }
@keyframes ask-ring { from { opacity: 0; scale: 1.5; } }
.flex-ask__x { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .flex-ask[open] .flex-ask__ring { animation: none; } }

/* ------------------------------------------- added 12 Oct: how it works, the everyday, why a Ring-Lock
   Three chapters with no lock in them ({"hide":1}): the story the landing page lacked next to Marcus's draft */
.nav__price { margin-left: 8px; padding: 6px 10px; border-radius: 30px; background: rgba(236, 236, 234, .18); font-weight: 600; }
html[data-tone="dark"] .nav__price { background: rgba(32, 47, 48, .12); }

.void--how, .void--moved, .void--compare { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); column-gap: clamp(32px, 5vw, 90px); }
.void--how .void__left, .void--moved .void__left, .void--compare .void__left { grid-column: 1; }

.how { grid-column: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.how li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-content: start; padding: 24px; border-radius: var(--r-card); background: var(--card);
  opacity: clamp(0, (var(--r, 1) - .3) * 2.4, 1); translate: 0 calc((1 - clamp(0, (var(--r, 1) - .3) * 2.4, 1)) * 26px); }
.how li:nth-child(2) { transition-delay: .06s; }
.how__ic { grid-row: 1 / 4; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); }
.how__ic svg { width: 24px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.how .label { color: var(--muted); }
.how b { margin-top: 6px; font: 500 clamp(19px, 1.5vw, 23px)/1.2 var(--display); letter-spacing: -0.02em; }
.how p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

.moved { grid-column: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-self: center; }
.moved li { position: relative; aspect-ratio: 3 / 4.2; border-radius: var(--r-card); overflow: hidden; background: var(--paper);
  opacity: clamp(0, (var(--r, 1) - .3) * 2.4, 1); translate: 0 calc((1 - clamp(0, (var(--r, 1) - .3) * 2.4, 1)) * 40px); }
.moved li:nth-child(2) { translate: 0 calc((1 - clamp(0, (var(--r, 1) - .38) * 2.4, 1)) * 60px); }
.moved li:nth-child(3) { translate: 0 calc((1 - clamp(0, (var(--r, 1) - .46) * 2.4, 1)) * 80px); }
.moved picture { display: block; height: 100%; }
.moved img { width: 100%; height: 100%; object-fit: cover; }
.moved li:nth-child(1) img { object-position: 52% 40%; }
.moved li:nth-child(2) img { object-position: 30% 50%; }
.moved li:nth-child(3) img { object-position: 38% 50%; }
.moved span { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(236, 236, 234, .92); font: 500 15px/1.2 var(--display); color: #202F30; }

.cmp { grid-column: 2; border-radius: var(--r-card); background: #FFFFFF; padding: 8px 0 0; overflow: hidden;
  opacity: clamp(0, (var(--r, 1) - .3) * 2.4, 1); translate: 0 calc((1 - clamp(0, (var(--r, 1) - .3) * 2.4, 1)) * 26px); }
.cmp__row { display: grid; grid-template-columns: 1fr 112px 112px; align-items: center; gap: 8px; padding: 15px 28px; border-top: 1px solid rgba(32, 47, 48, .08); font-size: 16px; color: var(--ink-2); }
.cmp__row:nth-child(2) { border-top: 0; }
.cmp__head { border-top: 0; padding-top: 18px; padding-bottom: 14px; font: 600 14px/1.2 var(--display); color: var(--muted); }
.cmp__head span { text-align: center; }
.cmp__head .cmp__us { justify-self: center; padding: 8px 14px; border-radius: 30px; background: #202F30; color: #ECECEA; }
.cmp__c { display: grid; place-items: center; }
.cmp__c svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp__c.is-yes svg { background: #1D5F63; stroke: #FFFFFF; }
.cmp__c.is-no svg { background: transparent; stroke: #9AA1A6; box-shadow: inset 0 0 0 1.5px rgba(32, 47, 48, .14); }
.cmp__row > span:nth-child(2) { background: rgba(29, 95, 99, .05); align-self: stretch; margin: -15px 0; }
.cmp__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px 22px; background: #202F30; color: #ECECEA; }
.cmp__foot p { font-size: 14px; opacity: .85; }
.cmp__foot b { font-weight: 600; margin-right: 6px; }
.cmp__buy { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 14px 22px; border-radius: 40px; background: #ECECEA; color: #202F30; font: 600 16px/1 var(--display); transition: background-color .25s; }
.cmp__buy:hover { background: #FFFFFF; }

@media (max-width: 760px) {
  .nav__price { display: none; }
  .void--how .void__left, .void--moved .void__left, .void--compare .void__left { margin-bottom: 18px; }
  .how { grid-template-columns: 1fr; gap: 10px; }
  .how li { padding: 16px 18px; }
  .how p { font-size: 14px; }
  .moved { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  .moved::-webkit-scrollbar { display: none; }
  .moved li { flex: 0 0 72%; scroll-snap-align: start; }
  .cmp__row { grid-template-columns: 1fr 64px 64px; padding: 13px 16px; font-size: 14px; }
  .cmp__row > span:nth-child(2) { margin: -13px 0; }
  .cmp__head { font-size: 12px; }
  .cmp__head .cmp__us { padding: 6px 9px; }
  .cmp__c svg { width: 24px; height: 24px; }
  .cmp__foot { flex-wrap: wrap; padding: 16px; }
  .cmp__buy { flex: 1 0 100%; }
}
/* tablets and narrow laptop windows: the text above, the cards full width below */
@media (min-width: 761px) and (max-width: 1100px) {
  .void--how, .void--moved, .void--compare { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; row-gap: 40px; }
  .how, .moved, .cmp { grid-column: 1; }
  .void--how .void__left .body, .void--moved .void__left .body, .void--compare .void__left .body { max-width: 34em; }
}

/* 3 · the everyday, as a story: a pinned stage, three full-screen frames, one headline each */
.tale { position: relative; z-index: 5; height: 100vh; height: 100svh; scroll-snap-align: start; background: #202F30; }
.tale__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: #ECECEA; }
.tale__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s var(--ease); }
.tale__shot.is-on { opacity: 1; }
.tale__shot picture { display: block; height: 100%; }
.tale__shot img { width: 100%; height: 100%; object-fit: cover; scale: 1.06; transition: scale 7s linear; }
.tale__shot.is-on img { scale: 1; }
.tale__shot[data-i="0"] img { object-position: 50% 62%; }
.tale__shot[data-i="1"] img { object-position: 50% 40%; }
.tale__shot[data-i="2"] img { object-position: 50% 40%; }
.tale__shot[data-i="3"] img { object-position: 50% 45%; }
.tale__shot[data-i="4"] img { object-position: 50% 45%; }
.tale__shot[data-i="5"] img { object-position: 50% 55%; }
/* the first frame: the lock sits low in the picture, so the words go to the top */
.tale__copy { transition: opacity .3s; }
.tale__pin::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(32, 47, 48, .7) 0%, rgba(32, 47, 48, .25) 45%, rgba(32, 47, 48, 0) 70%), linear-gradient(0deg, rgba(32, 47, 48, .45) 0%, rgba(32, 47, 48, 0) 35%); }
.tale__copy { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(56px, 11vh, 120px); width: min(760px, 80vw); }
.tale__index { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; color: #9BCDD0; }
.tale__index b { color: #ECECEA; font-weight: 600; }
.tale__index::after { content: ""; width: 80px; border-top: 1px dashed rgba(236, 236, 234, .35); }
.tale__line { grid-area: 2 / 1; align-self: end; margin: 0; font: 600 clamp(48px, 6.4vw, 110px)/.98 var(--display); letter-spacing: -0.045em;
  opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.tale__line.is-on { opacity: 1; translate: 0 0; transition-delay: .15s; }
.tale__line span { display: block; margin-top: .18em; font-weight: 500; font-size: .5em; letter-spacing: -0.03em; color: #9BCDD0; }
.tale__copy { display: grid; }
.tale__index { grid-area: 1 / 1; margin-bottom: 26px; }
.tale__dots { position: absolute; z-index: 2; right: var(--gutter); top: 50%; translate: 0 -50%; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tale__dots li { display: grid; place-items: center; }
.tale__dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.tale__dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(236, 236, 234, .4); transition: background-color .3s, scale .3s; }
.tale__dots li.is-on button::before { background: #ECECEA; scale: 1.4; }

@media (max-width: 760px) {
  .tale__pin::after { background: linear-gradient(0deg, rgba(32, 47, 48, .78) 0%, rgba(32, 47, 48, .1) 55%); }
  .tale__copy { bottom: 64px; width: auto; right: var(--gutter); }
  .tale__line { font-size: clamp(40px, 11.5vw, 56px); }
  .tale__dots { top: auto; bottom: 24px; right: 50%; translate: 50% 0; grid-auto-flow: column; }
}
@media (max-width: 760px) {
  /* on a phone every frame reads the same way: the words at the bottom, the picture above them */
  .tale__shot img { object-position: 50% 40% !important; }
  .tale__shot[data-i="1"] img { object-position: 32% 50% !important; }
  .tale__shot[data-i="2"] img { object-position: 30% 50% !important; }
  .tale__index { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tale__shot, .tale__shot img, .tale__line { transition: none; } }
/* the story frames: the nav lets go of its capsule, so only the white logo and the controls float over the photo */
html.in-tale.nav-float .nav__shell { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.in-tale .nav__logo svg { fill: #FFFFFF; }
html.in-tale .nav__links a, html.in-tale .lang a, html.in-tale .lang i { color: rgba(255, 255, 255, .86); }
html.in-tale .nav__buy { background: #ECECEA; color: #202F30; }
html.in-tale .nav__price { background: rgba(32, 47, 48, .1); }
html.in-tale .nav__bag, html.in-tale .nav .nav__menu { color: #FFFFFF; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.in-tale .nav__bag svg { stroke: #FFFFFF; }
html.in-tale .lang { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
html.in-tale .lang a[aria-current="true"] { background: #ECECEA; color: #202F30; }
/* a soft shade from the top keeps the logo readable on a bright photo */
.tale__pin::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 200px; pointer-events: none; background: linear-gradient(180deg, rgba(32, 47, 48, .5) 0%, rgba(32, 47, 48, 0) 100%); }

/* the story plays itself: a thin bar fills over each frame */
.tale__bar { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 22px; height: 2px; background: rgba(236, 236, 234, .2); border-radius: 2px; overflow: hidden; }
.tale__bar i { display: block; height: 100%; width: 100%; background: #ECECEA; transform-origin: left; transform: scaleX(0); }
.tale.is-playing .tale__bar i { animation: tale-bar var(--tale-ms, 3200ms) linear; }
@keyframes tale-bar { to { transform: scaleX(1); } }
.tale__dots { gap: 2px; }
@media (max-width: 760px) { .tale__copy { bottom: 74px; } .tale__dots { bottom: 34px; } .tale__bar { bottom: 18px; } }
/* headings in the new chapters: a little more air between the lines (long Danish words) */
.void--how .heading, .void--compare .heading { line-height: 1.04; }
@media (max-width: 760px) { .void--how .heading, .void--compare .heading { font-size: clamp(32px, 8.6vw, 40px); } }
/* Apple's compatibility line, kept (required) but set as a quiet footnote */
.fm__fine { margin-top: 30px !important; padding-top: 12px; border-top: var(--dash); max-width: 32em; font-size: 11px; line-height: 1.45; color: var(--muted); opacity: .8; }
.cmp .cmp__head > span.cmp__us { margin: 0; align-self: center; background: #202F30; color: #ECECEA; white-space: nowrap; }
@media (max-width: 760px) {
  .cmp__row { grid-template-columns: 1fr 76px 70px; }
  .cmp .cmp__head > span.cmp__us { padding: 6px 8px; font-size: 11px; }
  .cmp__head { font-size: 11px; }
}

/* 2 · how it works, v2: a stepper instead of four cards (after 21st.dev's Feature Steps): a line with the icons on it,
   one step lit at a time, the line filling as it plays; only the lit step shows its line of text */
.how { position: relative; display: block; grid-template-columns: none; gap: 0; --how-p: 0; }
.how::before, .how::after { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; background: rgba(32, 47, 48, .1); }
.how::after { background: #1D5F63; transform-origin: top; transform: scaleY(var(--how-p)); transition: transform .8s var(--ease); }
.how li { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: 10px 0; border-radius: 0; background: none; cursor: pointer; }
.how li + li { margin-top: 6px; }
.how__ic { grid-row: 1 / 3; align-self: start; width: 44px; height: 44px; background: #FFFFFF; box-shadow: 0 0 0 6px #ECECEA; transition: background-color .4s, transform .4s var(--ease); }
.how__ic svg { stroke: #606A74; transition: stroke .4s; }
.how .label { display: none; }
.how b { margin: 0; font: 500 clamp(20px, 1.6vw, 26px)/1.15 var(--display); letter-spacing: -0.02em; color: rgba(32, 47, 48, .4); transition: color .4s; }
.how p { grid-column: 2; margin: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: 16px; transition: max-height .5s var(--ease), opacity .4s, margin .5s var(--ease); }
.how li.is-on .how__ic { background: #1D5F63; transform: scale(1.08); }
.how li.is-on .how__ic svg { stroke: #FFFFFF; }
.how li.is-on b { color: #202F30; }
.how li.is-on p { max-height: 4em; opacity: 1; margin-top: 6px; }
.how li:hover b { color: #202F30; }
@media (max-width: 760px) {
  .how { margin-top: 6px; }
  .how li { padding: 8px 0; background: none; }
  .how b { font-size: 19px; }
  .how p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .how p { max-height: none; opacity: 1; margin-top: 6px; }
  .how b { color: #202F30; }
}
.how { align-self: center; width: 100%; max-width: 560px; }
@media (max-width: 760px) { .void--how { align-items: stretch; } .void--how .void__left { align-self: stretch; } }

/* ------------------------------------------- the smart header (all pages)
   Clear while nothing sits under it: only the logo and the controls show. The glass capsule fades in the moment text or a
   picture scrolls in beneath it (cart-nav.js decides, html.nav-clear). The Buy pill keeps its fill, always. */
.nav__shell { transition: max-width .55s var(--ease), height .55s var(--ease), padding .4s var(--ease), background-color .35s, border-color .35s, box-shadow .35s, -webkit-backdrop-filter .35s, backdrop-filter .35s; }
@media (prefers-reduced-motion: reduce) { .nav__shell { transition: background-color .2s, border-color .2s, box-shadow .2s; } }
/* the open menu is paper: the bar shows ink on it whatever the chapter */
html:has(#menu:not([hidden])) .nav__logo svg { fill: #202F30 !important; }
html.nav-clear .nav__shell, html.nav-clear.nav-float .nav__shell, html.nav-clear.nav-float.nav-compact .nav__shell {
  background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.nav-clear .nav__bag, html.nav-clear .nav .nav__menu { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.nav-clear[data-tone="dark"] .nav__bag, html.nav-clear[data-tone="dark"] .nav .nav__menu { background: rgba(255, 255, 255, .12); }
/* the landing page: while the bar is clear, the logo and the controls sit on the chapters' own gutter */
html.nav-clear:has(#stage) .nav__shell, html.nav-clear.nav-float:has(#stage) .nav__shell, html.nav-clear.nav-float.nav-compact:has(#stage) .nav__shell { max-width: 100%; padding-left: 12px; padding-right: 12px; }

/* desktop: a portrait photo is shown whole, as a tall panel on the right, over a blurred, darkened copy of itself */
@media (min-width: 761px) {
  .tale__shot--tall::before { content: ""; position: absolute; inset: -60px; background: var(--bg) center / cover; filter: blur(38px) brightness(.42) saturate(1.1); }
  .tale__shot--tall picture { position: absolute; top: 92px; bottom: 44px; right: calc(var(--gutter) + 40px); width: calc((100vh - 136px) * .667); width: calc((100svh - 136px) * .667); height: auto; border-radius: 26px; overflow: hidden; }
  .tale__shot--tall img { object-position: 50% 50% !important; }
  .tale__copy { width: min(760px, calc(100vw - (100svh - 136px) * .667 - 3 * var(--gutter) - 80px)); }
}

/* ------------------------------------------- mobile QA pass, 12 Oct (kept last so it wins) */
@media (max-width: 760px) {
  /* 04 Find My: the phone no longer reaches into the text above it */
  .void--map .fm__fine { margin-top: 16px !important; font-size: 12px; }
  .void--map .slot { margin-top: 32px; }
  .fmp { rotate: 0deg; }
  .fmp, .fm-ghost, .radar { --h: min(50svh, 460px); }
  .fmp__name { font-size: 10px; }
  .fmp__name b { font-size: 13px; }
  /* the logo lines up with the text edge */
  .nav__shell, html.nav-float .nav__shell, html.nav-float.nav-compact .nav__shell { padding: 0 6px; }
  /* one heading size for every chapter */
  .void .heading, .void--how .heading, .void--compare .heading, .void--fit .heading, .void--seal .heading { font-size: 34px; line-height: 1.02; }
  /* one body size */
  .void .void__left .body, .void--map .body, .void--seal .body { font-size: 16px; line-height: 1.45; }
  /* 02: the stepper takes the room it has */
  .how { margin-top: 28px; }
  .how li { padding: 14px 0; }
  .how li + li { margin-top: 10px; }
  /* intro: an even left edge under "No cable." */
  .void--intro .void__right .body { text-align: left; max-width: 16.5em; margin-left: auto; }
  .tale__bar { right: calc(var(--gutter) + 56px); }
}
@media (max-width: 360px) { .void--seal .heading { font-size: 30px; } }
/* contrast */
.how b { color: #606A74; }
.how li.is-on b { color: #202F30; }
.void--seal .void__index, .void--seal .cert dt { color: rgba(236, 236, 234, .78); }
.void--seal .void__index b { color: #ECECEA; }
.fm__fine { opacity: 1; color: #606A74; }
.cmp__c.is-no svg { stroke: #6B747A; box-shadow: inset 0 0 0 1.5px rgba(32, 47, 48, .28); }
/* story: bigger dots, and a pause button (autoplay must be stoppable) */
.tale__dots { gap: 0; }
.tale__dots button { width: 32px; height: 32px; }
.tale__pause { position: absolute; z-index: 3; right: var(--gutter); bottom: 6px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tale__pause svg { width: 16px; height: 16px; fill: currentColor; }
.tale__pause .i-play { display: none; }
.tale__pause[aria-pressed="true"] .i-play { display: block; }
.tale__pause[aria-pressed="true"] .i-pause { display: none; }
@media (min-width: 761px) { .tale__bar { right: calc(var(--gutter) + 60px); } .tale__pause { bottom: 2px; } }

/* 9 · who we are: a warm, human chapter. A collage of the founder, the workshop and a prototype; a few honest lines; a backer's words */
.void--us { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); column-gap: clamp(32px, 6vw, 110px); }
.us__pics { grid-column: 1; grid-row: 1; align-self: center; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: min(72svh, 700px);
  opacity: clamp(0, (var(--r, 1) - .3) * 2.4, 1); translate: 0 calc((1 - clamp(0, (var(--r, 1) - .3) * 2.4, 1)) * 30px); }
.us__photo, .us__tile { margin: 0; border-radius: var(--r-card); overflow: hidden; background: #DADAD6; min-height: 0; }
.us__photo { grid-row: 1 / 3; }
.us__photo picture, .us__tile picture { display: block; height: 100%; }
.us__photo img, .us__tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.us__tile:nth-child(2) img { object-position: 50% 45%; }
@media (hover: hover) { .us__photo:hover img, .us__tile:hover img { scale: 1.04; } }
.void--us .void__left { grid-column: 2; grid-row: 1; }
.void--us .body + .body { margin-top: 14px; }
.us__quote { margin: 26px 0 0; padding: 18px 22px; border-radius: var(--r-card); background: #FFFFFF; border-left: 3px solid #458A8E; }
.us__quote p { margin: 0; font: 500 19px/1.35 var(--display); letter-spacing: -0.01em; color: #202F30; }
.us__quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: #606A74; }
.us__mail { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
@media (min-width: 761px) and (max-width: 1100px) { .void--us { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .us__pics { grid-template-columns: 1fr; grid-template-rows: 1fr; } .us__tile { display: none; } .us__photo { grid-row: auto; } }
@media (max-width: 760px) {
  .us__pics { order: -1; height: 34svh; margin-bottom: 20px; gap: 8px; grid-template-columns: 1.2fr 1fr; }
  .us__photo img { object-position: 50% 30%; }
  .us__quote { margin-top: 18px; padding: 14px 16px; }
  .us__quote p { font-size: 17px; }
}

/* 7 · a real ride beside the table, so the comparison has a person in it */
.cmp__photo { margin: 28px 0 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3 / 2; max-width: 30em; background: #DADAD6; }
.cmp__photo picture { display: block; height: 100%; }
.cmp__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@media (max-width: 1100px) { .cmp__photo { display: none; } }

/* intro: our own photo (Marcus under the cherry blossom) behind the lock, darkened so the steel and the words carry.
   It sits under the stage and is cut to the intro's rectangle by darkroom.js (--bt / --bb) */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; overflow: hidden; background: #202F30;
  clip-path: inset(var(--bt, 100vh) 0 var(--bb, 0px) 0); }
.backdrop.is-on { display: block; }
.backdrop::before { content: ""; position: absolute; inset: -2%; background: url(images/story/intro-bg.webp) 50% 45% / cover no-repeat;
  filter: saturate(1.1) brightness(.92); animation: drift 26s ease-in-out infinite alternate; }
.backdrop::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(20, 32, 33, .25), transparent 70%),
              linear-gradient(180deg, rgba(20, 32, 33, .72) 0%, rgba(20, 32, 33, .5) 45%, rgba(20, 32, 33, .82) 100%),
              linear-gradient(90deg, rgba(29, 95, 99, .35), transparent 35%, transparent 65%, rgba(29, 95, 99, .35)); }
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.2%, -1%); } }
@media (max-width: 760px) { .backdrop::before { background-image: url(images/story/intro-bg-m.webp?v=2); background-position: 50% 40%; } }
@media (prefers-reduced-motion: reduce) { .backdrop::before { animation: none; } }
.void--intro { --ink: #ECECEA; --ink-2: rgba(236, 236, 234, .86); --muted: rgba(236, 236, 234, .66); --line: rgba(236, 236, 234, .28); --card: rgba(236, 236, 234, .14); --dash: 1px dashed rgba(236, 236, 234, .28); }
.void--intro .intro__word { color: #ECECEA; text-shadow: 0 2px 30px rgba(10, 20, 21, .35); }
.void--intro .void__right .body { color: rgba(236, 236, 234, .88); }
.void--intro .specs a { color: #ECECEA; }
.void--intro .specs svg { background: rgba(236, 236, 234, .14); color: #ECECEA; }
.void--intro .specs a:hover { color: #9BCDD0; }
.void--intro .specs a:hover svg { background: #9BCDD0; color: #202F30; }


/* buy card: his trial line, quiet, under the badges */
.buy__love { margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: #606A74; text-align: center; }
/* Liz's line under the finishes */
.buy__polish { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #606A74; }
.buy__love a { color: inherit; text-decoration: none; }
.buy__love a:hover { color: #1D5F63; text-decoration: underline; }
.us__team { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.us__quote p { font-size: 17px; }
/* nine of his questions on a phone: a touch tighter so they fit one screen */
@media (max-width: 760px) { .void--faq .qa summary { padding: 13px 0; font-size: 16px; } .void--faq .void__right { margin-top: 12px; } }
@media (max-width: 760px) { .us__pics { height: 24svh; margin-bottom: 14px; } .void--us .body { font-size: 15px; line-height: 1.42; } .void--us .body + .body { margin-top: 8px; } .us__quote { margin-top: 14px; padding: 12px 14px; } .us__quote p { font-size: 15px; } .us__team { margin-top: 12px; font-size: 14px; } }
.price-line strong, .price-line s { white-space: nowrap; }

/* 11 · help & guides: Marcus's /help/ list in our type — big rows with an arrow, the manual on a pale-teal card, a person to call */
.void--help { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); column-gap: clamp(32px, 5vw, 90px); }
.void--help .void__left { grid-column: 1; }
.help { grid-column: 2; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(32, 47, 48, .14); }
.help li { border-bottom: 1px solid rgba(32, 47, 48, .14); }
.help a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 18px; padding: clamp(18px, 2.6vh, 28px) 4px; color: #202F30; text-decoration: none; }
.help b { font: 500 clamp(22px, 2.1vw, 34px)/1.1 var(--display); letter-spacing: -0.03em; transition: color .25s; }
.help__go { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .35s var(--ease); grid-column: 3; }
.help a:hover b { color: #1D5F63; }
.help a:hover .help__go { translate: 6px 0; }
.help__kym { grid-column: 2; padding: 5px 10px; border-radius: 20px; background: rgba(155, 205, 208, .55); font: 600 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.help__manual { margin-top: 14px; border-bottom: 0 !important; }
.help__manual a { padding: clamp(18px, 2.6vh, 28px) 22px; border-radius: var(--r-card); background: rgba(155, 205, 208, .4); }
.help__sub { grid-column: 1; grid-row: 2; font-size: 15px; color: #3C4A4B; }
.help__manual .help__go { grid-row: 1 / 3; }
.help__talk { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; max-width: 360px; }
.help__talk a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: #FFFFFF; color: #202F30; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .08); transition: box-shadow .2s; }
.help__talk a:hover { box-shadow: inset 0 0 0 1px #202F30; }
.help__talk svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #1D5F63; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.help__talk span { display: grid; gap: 2px; font: 500 15px/1.2 var(--display); }
.help__talk small { font: 400 12px/1.2 var(--body); color: #606A74; }
@media (min-width: 761px) and (max-width: 1100px) { .void--help { grid-template-columns: 1fr; align-content: center; row-gap: 32px; } .help { grid-column: 1; } }
@media (max-width: 760px) {
  .void--help { grid-template-columns: 1fr; align-content: center; row-gap: 22px; }
  .help { grid-column: 1; }
  .help a { padding: 15px 2px; gap: 2px 12px; }
  .help b { font-size: 20px; }
  .help__kym { font-size: 9px; padding: 4px 8px; }
  .help__manual a { padding: 16px 16px; }
  .help__sub { font-size: 13px; }
  .help__talk { margin-top: 18px; grid-template-columns: 1fr; max-width: none; gap: 8px; }
  .help__talk a { padding: 10px 12px; gap: 10px; }
  .help__talk span { font-size: 14px; display: flex; gap: 10px; align-items: baseline; } .help__talk small { font-size: 12px; }
}

/* ---------------- review round 1 (legal, UI, psych) */
/* intro: a calm, heavily blurred harbour (L1150695, blur baked into the file) under a soft teal-dark tone, so the lock reads sharp */
.backdrop::before { background: url(images/story/intro-calm.webp?v=1) 50% 60% / cover no-repeat; filter: none; animation: drift 40s ease-in-out infinite alternate; }
@media (max-width: 760px) { .backdrop::before { background-image: url(images/story/intro-calm-m.webp?v=1); background-position: 50% 55%; } }
.backdrop::after { background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(20, 32, 33, .10), transparent 70%),
  linear-gradient(180deg, rgba(20, 32, 33, .62) 0%, rgba(29, 95, 99, .42) 50%, rgba(20, 32, 33, .78) 100%); }
/* the buy card never grows wider than the screen: the price tag wraps under the price when it must */
.price-line { flex-wrap: wrap; row-gap: 8px; }
.void--product .void__right, .buybox { min-width: 0; max-width: 100%; }
.price-line .label { white-space: nowrap; }
@media (max-width: 760px) { .price-line .label { flex-basis: 100%; width: max-content; max-width: 100%; white-space: normal; } }
/* the comparison: plain words where a chain or D-lock is not simply yes or no */
.cmp__c.is-txt { font: 500 13px/1.2 var(--body); color: #3C4A4B; text-align: center; }
@media (max-width: 760px) { .cmp__c.is-txt { font-size: 12px; } }
/* how the reviews are shown */
.tpb__note { display: block; margin: 0; padding: 12px var(--gutter) 0; font-size: 12px; line-height: 1.45; color: #606A74; text-align: center; }
.rv__note { margin: 18px 0 0; font-size: 12px; line-height: 1.45; color: #606A74; }
/* varefakta: the certificate clear of the seal */
.paper { translate: 0 0; width: min(17vw, 250px); }
/* the story's second frame: a deeper shade where the words sit on a light photo */
.tale__pin::after { background: linear-gradient(90deg, rgba(32, 47, 48, .78) 0%, rgba(32, 47, 48, .4) 40%, rgba(32, 47, 48, 0) 68%), linear-gradient(0deg, rgba(32, 47, 48, .6) 0%, rgba(32, 47, 48, 0) 40%); }
.tale__line { text-shadow: 0 2px 24px rgba(20, 32, 33, .45); }
@media (max-width: 760px) { .tale__pin::after { background: linear-gradient(0deg, rgba(32, 47, 48, .9) 0%, rgba(32, 47, 48, .72) 24%, rgba(32, 47, 48, .1) 55%); } }
/* how it works: room for the longer Danish steps */
.how li.is-on p { max-height: 8em; }
/* the footer's legal links look like links */
.foot2__legal a { color: #ECECEA; text-decoration: underline; text-decoration-color: rgba(236, 236, 234, .4); text-underline-offset: 2px; }
.foot2__legal a:hover { color: #9BCDD0; }
/* find my and the comparison fit one phone screen */
@media (max-width: 760px) {
  .void--map .fm-slot { flex: 0 0 34svh; min-height: 0; }
  .void--map .fm__fine { font-size: 11px; margin-top: 10px !important; }
  .void--compare .cmp td, .void--compare .cmp th, .void--compare .cmp__row { padding-block: 9px; }
  .void--compare .cmp__row > span:nth-child(2) { margin-block: -9px; }
  .void--compare .heading { font-size: 30px; }
}
.cmp__head > span:nth-child(3) { hyphens: none; }
/* the Pre-order question: two equal answers, the free one first */
.flex-ask h2 + .flex-ask__no { margin-top: 8px; }
.flex-ask__hint { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.flex-ask__hint + .flex-ask__no { margin-top: 8px; }
.flex-ask__no { padding: 10px 18px; white-space: normal; text-align: center; line-height: 1.25; cursor: pointer; }
/* on a phone the review note shares the bottom with the band: tighter, and the trial line (the same promise as the 57 badge above it) steps aside */
@media (max-width: 760px) {
  #buy > .tpb { padding: 8px 0 6px; }
  .tpb__note { padding-top: 4px; font-size: 10.5px; line-height: 1.3; }
  #buy .buy__love { display: none; }
}
/* the calm intro needs no shadow behind the big words (it was clipped to a box by the word reveal) */
.void--intro .intro__word { text-shadow: none; }
.nav__buy, .cmp__buy { white-space: nowrap; }
/* the struck price says what it is, in plain sight: the price from 1 Jan 2027 */
.price-was { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; color: var(--muted); }
.price-was small { font-size: 12px; }
/* a phone: the logo leaves room for the Pre-order pill (it touched it in Danish) */
@media (max-width: 760px) { .nav__logo { width: 92px; } .nav__end { margin-left: 12px; } }
/* a phone: the buy card ends above the review band (it ran 24–44 px under it) */
@media (max-width: 760px) {
  #buy.void--product { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  #buy .slot { flex: 1 1 18svh; min-height: 15svh; }
  #buy .tpb__note { font-size: 11px; line-height: 1.35; }
}
/* the Pre-order question: a quiet way out for anyone who does not know yet */
.flex-ask__unsure { margin-top: 10px; padding: 6px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.flex-ask__unsure:hover { color: var(--ink); }
/* how it works: a real ride fills the empty right side on wide screens */
.how__shot { display: none; }
@media (min-width: 1101px) {
  .void--how { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, .8fr); }
  .how__shot { display: block; grid-column: 3; align-self: center; margin: 0; aspect-ratio: 4 / 5; max-height: 72vh; border-radius: 24px; overflow: hidden; }
  .how__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
}
.foot2__legal small, .foot small { text-wrap: balance; }
/* a short phone (667 px): the buy chapter grows a little rather than letting the review band cover the card */
@media (max-width: 760px) and (max-height: 700px) { #buy.void--product { height: auto; min-height: 100svh; } }

/* ------------------------------------------- round 4 (12 Oct) */
/* portrait tablet: the story's tall photo sits centred at the top, the words full width under it, as on a phone */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .tale__shot--tall picture { top: 92px; bottom: auto; height: 56svh; width: calc(56svh * .667); left: 50%; right: auto; translate: -50% 0; }
  .tale__copy { width: auto; right: var(--gutter); bottom: clamp(56px, 8vh, 96px); }
  .tale__line { font-size: clamp(44px, 7vw, 64px); }
  .tale__pin::after { background: linear-gradient(0deg, rgba(32, 47, 48, .9) 0%, rgba(32, 47, 48, .6) 28%, rgba(32, 47, 48, .1) 55%); }
}
/* tablet: air between the nav links and the language toggle */
@media (min-width: 761px) and (max-width: 1100px) {
  .nav__shell { column-gap: 16px; }
  .nav__links a { padding-inline: 8px; }
}
/* the cart count stays visible on the teal and dark chapters */
html[data-tone="dark"] .nav__bag b, html.in-tale .nav__bag b { background: #ECECEA; color: #1D5F63; }

/* ------------------------------------------- round 5 (12 Oct) */
/* find my scene: a plain LAAS location chip on the drawn map, in brand teal on Chalk (not a copy of any app's sheet) */
.fmp__sheet.fmp__chip {
  left: 50%; right: auto; bottom: calc(var(--h) * .05); translate: -50% 0; width: max-content; max-width: 86%;
  padding: calc(var(--h) * .013) calc(var(--h) * .024); border-radius: calc(var(--h) * .024);
  background: #ECECEA; border: 1px solid rgba(29, 95, 99, .2); box-shadow: 0 10px 26px -12px rgba(32, 47, 48, .4);
}
.fmp__chip .fmp__name { display: flex; align-items: baseline; gap: .45em; white-space: nowrap; color: #1D5F63; }
.fmp__chip .fmp__name b { color: #1D5F63; }
.fmp__chip .fmp__name b::after { content: " ·"; font-weight: 400; }
@media (max-width: 760px) { .fmp__sheet.fmp__chip { max-width: 94%; padding: 5px 9px; } .fmp__chip .fmp__name { gap: .3em; font-size: 10px; } .fmp__chip .fmp__name b { font-size: 12px; } }
/* how it works: the lock on a rear wheel under the blossom stays in the 4:5 crop */
@media (min-width: 1101px) { .how__shot img { object-position: 62% 50%; } }
/* portrait tablet: the buy chapter's label floats, so the lock gets the whole left side next to the card */
@media (min-width: 761px) and (max-width: 1100px) {
  #buy.void--product { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  #buy .void__left { position: absolute; top: 120px; left: var(--gutter); }
  #buy .slot { grid-column: 1; grid-row: 1; }
  #buy .void__right { grid-column: 2; grid-row: 1; }
}

/* 1 · the story, page one: every frame full-bleed, a big line, a counter, and story-style segments that fill as it plays */
.tale__shot img { scale: 1.12; transition: scale calc(var(--tale-ms, 4200ms) * 1.6) cubic-bezier(.2, .6, .2, 1), opacity 1s; }
.tale__shot.is-on img { scale: 1; }
.tale__shot[data-i="0"] img { object-position: 50% 50%; }
.tale__shot[data-i="1"] img { object-position: 85% 50%; }
.tale__shot[data-i="2"] img { object-position: 85% 50%; }
.tale__shot[data-i="3"] img { object-position: 50% 65%; }
.tale__pin::after { background: linear-gradient(90deg, rgba(20, 32, 33, .82) 0%, rgba(20, 32, 33, .45) 38%, rgba(20, 32, 33, 0) 66%), linear-gradient(0deg, rgba(20, 32, 33, .7) 0%, rgba(20, 32, 33, 0) 42%); }
.tale__copy { width: min(900px, 70vw); bottom: clamp(84px, 13vh, 150px); }
.tale__line { font-size: clamp(56px, 7vw, 128px); line-height: .96; letter-spacing: -0.05em; text-wrap: balance; }
.tale__line span { font-size: .36em; margin-top: .32em; letter-spacing: -0.02em; color: #ECECEA; opacity: .88; }
.tale__index { color: #9BCDD0; margin-bottom: 22px; }
.tale__count { font-variant-numeric: tabular-nums; color: rgba(236, 236, 234, .7); }
.tale__count b { color: #ECECEA; }
.tale__bar { display: none; }
.tale__dots { top: auto; bottom: 30px; left: var(--gutter); right: calc(var(--gutter) + 64px); translate: none; display: flex; gap: 8px; grid-auto-flow: unset; }
.tale__dots li { flex: 1; display: block; }
.tale__dots button { position: relative; width: 100%; height: 22px; display: block; }
.tale__dots button::before, .tale__dots li.is-on button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; width: auto; margin-top: -1.5px; border-radius: 3px; background: rgba(236, 236, 234, .28); scale: 1; }
.tale__dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: #ECECEA; transform-origin: left; transform: scaleX(0); }
.tale__dots li:has(~ li.is-on) button::after, .tale__dots li.is-on button::after { transform: scaleX(1); }
.tale.is-playing .tale__dots li.is-on button::after { animation: tale-bar var(--tale-ms, 4200ms) linear; }
@keyframes tale-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tale__dots button:hover::before { background: rgba(236, 236, 234, .5); }
.tale__pause { bottom: 19px; }
@media (max-width: 760px) {
  .tale__copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: 78px; }
  .tale__line { font-size: clamp(40px, 11.5vw, 54px); }
  .tale__line span { font-size: .42em; }
  .tale__pin::after { background: linear-gradient(0deg, rgba(20, 32, 33, .92) 0%, rgba(20, 32, 33, .6) 30%, rgba(20, 32, 33, 0) 58%); }
  .tale__dots { bottom: 28px; right: calc(var(--gutter) + 56px); gap: 5px; }
  .tale__pause { bottom: 17px; }
  .tale__shot[data-i="2"] img { object-position: 30% 50% !important; }
}
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) { .tale__copy { width: auto; right: var(--gutter); } .tale__line { font-size: clamp(54px, 9vw, 84px); } }
@media (min-width: 1101px) { .tale__pin::after { background: linear-gradient(90deg, rgba(20, 32, 33, .72) 0%, rgba(20, 32, 33, .3) 30%, rgba(20, 32, 33, 0) 46%), linear-gradient(0deg, rgba(20, 32, 33, .55) 0%, rgba(20, 32, 33, 0) 32%); } .tale__copy { width: min(620px, 36vw); } .tale__line { font-size: clamp(52px, 6vw, 112px); } }

/* 04 · Find My: the phone shows the Find My Items screen (Ring-Lock first) instead of the drawn map */
.fmp .fmp__screen { position: absolute; z-index: 3; inset: calc(var(--h) * .012); width: calc(100% - var(--h) * .024); height: calc(100% - var(--h) * .024); object-fit: cover; border-radius: calc(var(--h) * .064); }
.fmp .map, .fmp .fmp__pin, .fmp .fmp__sheet { visibility: hidden; }
.fmp::after { z-index: 4; }
.radar { display: none !important; }

/* frames 2 and 3 are the photos as they are (no fill): the phone sits left, so on wide screens their line sits right */
@media (min-width: 1101px) {
  .tale__copy { left: var(--gutter); right: calc(var(--gutter) + 72px); width: auto; }
  .tale__line { max-width: min(620px, 36vw); justify-self: end; text-align: right; }
  .tale__index { justify-self: end; }
  .tale__pin::after { background: linear-gradient(270deg, rgba(20, 32, 33, .72) 0%, rgba(20, 32, 33, .3) 30%, rgba(20, 32, 33, 0) 46%), linear-gradient(0deg, rgba(20, 32, 33, .55) 0%, rgba(20, 32, 33, 0) 32%); }
  .tale__shot[data-i="1"] img, .tale__shot[data-i="2"] img { object-position: 50% 50%; }
}

/* the story's photos on phones: keep the subject in frame */
@media (max-width: 760px) {
  .tale__shot[data-i="0"] img { object-position: 44% 50% !important; }
  .tale__shot[data-i="3"] img { object-position: 40% 50% !important; }
}

/* find my: the latest render fills the whole screen behind the text (the drawn phone and its rings stay off) */
.fmp, .radar { display: none !important; }
.void--map { --ink: #ECECEA; --ink-2: #ECECEA; --muted: #C9D3D3; --line: rgba(236, 236, 234, .25); color: var(--ink); overflow: hidden; }
.fm-bg { position: absolute; inset: 0; margin: 0; z-index: 0; background: #2B3133; }
.fm-bg picture, .fm-bg img { display: block; width: 100%; height: 100%; }
.fm-bg img { object-fit: cover; object-position: 30% 50%; }
.fm-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(32, 47, 48, .7) 0%, rgba(32, 47, 48, .45) 30%, rgba(32, 47, 48, 0) 50%); }
.void--map .void__left { z-index: 5; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .fm-bg { top: auto; height: 62%; }
  .fm-bg img { object-position: 45% 30%; }
  .fm-bg::after { background: linear-gradient(180deg, #2B3133 0%, rgba(43, 49, 51, 0) 22%); }
}

/* 06 fit, phones: the five bike types in a 3 + 2 grid, so every label fits its chip */
@media (max-width: 760px) {
  .void--fit #tyre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .void--fit #tyre .chip { min-width: 0; min-height: 40px; padding: 0 6px; font-size: 14px; }
}

/* the story on wide screens: the photo fills the right two thirds and fades into a dark band on the left,
   where the words sit, left-aligned and low (14 Oct: replaces the right-aligned lines) */
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .tale__pin { background: #141F20; }
  .tale__shot picture { position: absolute; top: 0; bottom: 0; right: 0; left: 30vw; width: auto; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
  .tale__shot img { width: 100%; height: 100%; }
  .tale__shot[data-i="0"] img { object-position: 50% 50%; }
  .tale__shot[data-i="1"] img, .tale__shot[data-i="2"] img { object-position: 28% 50%; }
  .tale__shot[data-i="3"] img { object-position: 45% 50%; }
  .tale__pin::after { background: linear-gradient(0deg, rgba(20, 32, 33, .5) 0%, rgba(20, 32, 33, 0) 28%); }
  .tale__copy { left: var(--gutter); right: auto; width: min(560px, 34vw); bottom: clamp(96px, 16vh, 170px); }
  .tale__line { max-width: none; justify-self: start; text-align: left; font-size: clamp(52px, 5.4vw, 96px); }
  .tale__index { justify-self: start; }
}

/* 02 how it works, wide screens (14 Oct): the real Steel Ring-Lock on a wheel instead of the blossom photo;
   three even columns, the photo as tall as the steps and flush with the right gutter */
@media (min-width: 1101px) {
  .void--how { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
  .void--how .how { justify-self: center; max-width: 420px; }
  .how__shot { justify-self: end; width: 100%; max-width: 460px; height: auto; max-height: min(64vh, 560px); aspect-ratio: 4 / 5; border-radius: 24px; box-shadow: 0 40px 80px -48px rgba(32, 47, 48, .45); }
  .how__shot img { object-position: 58% 50%; }
}

/* =====================================================================================================================
   The rebuild (14 Oct): the photo opening with the same header as every chapter, the story with films in frames 3
   and 4, sharing, a plain fit chapter, insurance in depth and the step films. Everything below overrides the old
   opening (pixel wordmark) and the chapters that left the page.
   ===================================================================================================================== */

/* the opening: the backer on his bike, the words low left, the nav as everywhere else */
.hero.hero--photo { height: 100vh; height: 100svh; }
.hero--photo .hero__pin { position: relative; height: 100%; overflow: hidden; pointer-events: auto; color: #ECECEA; background: #202F30; }
.hero--photo .hero__shots { opacity: 1; }
/* the shots were graded dark for the old pixel wordmark: lift them back to daylight */
.hero--photo .hero__shot img { filter: brightness(1.16) contrast(1.14) saturate(1.1); }
.hero--photo .hero__shots::after { background:
  linear-gradient(90deg, rgba(20, 32, 33, .66) 0%, rgba(20, 32, 33, .2) 42%, rgba(20, 32, 33, 0) 58%),
  linear-gradient(0deg, rgba(20, 32, 33, .42) 0%, rgba(20, 32, 33, 0) 36%),
  linear-gradient(180deg, rgba(20, 32, 33, .42) 0%, rgba(20, 32, 33, 0) 120px); }
.hero__copy { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(84px, 13vh, 150px); width: min(900px, 72vw); }
.hero__kicker { display: flex; gap: 14px; align-items: center; margin: 0 0 26px; color: #9BCDD0; }
.hero__kicker::after { content: ""; width: 80px; border-top: 1px dashed rgba(236, 236, 234, .35); }
.hero__title { margin: 0; font: 600 clamp(58px, 7.2vw, 132px)/.94 var(--display); letter-spacing: -0.05em; color: #ECECEA; text-wrap: balance; text-shadow: 0 2px 24px rgba(20, 32, 33, .4); }
.hero__title span { display: block; margin-top: .2em; font-weight: 500; font-size: .46em; letter-spacing: -0.03em; color: #9BCDD0; }
.hero__sub { margin: 24px 0 0; max-width: 24em; font: 400 clamp(17px, 1.3vw, 21px)/1.4 var(--body); letter-spacing: -0.012em; color: rgba(236, 236, 234, .88); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.hero__buy { display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 8px 0 26px; border-radius: 999px; background: #ECECEA; color: #202F30; font: 600 17px/1 var(--display); letter-spacing: -0.01em; transition: background-color .25s, translate .3s var(--ease); }
.hero__buy:hover { background: #FFFFFF; translate: 0 -2px; }
.hero__price { padding: 11px 15px; border-radius: 999px; background: rgba(32, 47, 48, .1); font-weight: 500; }
.hero__more { padding-bottom: 4px; border-bottom: 1px dashed rgba(236, 236, 234, .55); color: #ECECEA; font: 500 16px/1 var(--display); transition: border-color .25s; }
.hero__more:hover { border-bottom-color: #ECECEA; }
.hero__down { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(24px, 4vh, 40px); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; }
.hero__down i { position: relative; width: 1px; height: 18px; overflow: hidden; background: rgba(236, 236, 234, .25); }
.hero__down i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 8px; background: #ECECEA; animation: hint-drop 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
/* the words arrive once the page has loaded */
.hero__copy > * { transition: opacity .9s var(--ease), translate .9s var(--ease); }
/* the headline is painted at once (it is what the page is measured by, LCP); it only rises into place */
html:not(.is-loaded) .hero__copy > * { translate: 0 22px; }
html:not(.is-loaded) .hero__copy > :not(.hero__title) { opacity: 0; }
.hero__copy > :nth-child(2) { transition-delay: .08s; } .hero__copy > :nth-child(3) { transition-delay: .16s; } .hero__copy > :nth-child(4) { transition-delay: .24s; }
@media (max-width: 760px) {
  .hero--photo .hero__shot img { object-position: 50% 30%; }
  .hero--photo .hero__shots::after { background: linear-gradient(0deg, rgba(20, 32, 33, .92) 0%, rgba(20, 32, 33, .66) 30%, rgba(20, 32, 33, 0) 62%), linear-gradient(180deg, rgba(20, 32, 33, .5) 0%, rgba(20, 32, 33, 0) 20%); }
  .hero__copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .hero__kicker { margin-bottom: 16px; }
  .hero__title { font-size: clamp(50px, 14vw, 66px); }
  .hero__sub { margin-top: 16px; font-size: 16px; }
  .hero__cta { margin-top: 22px; gap: 14px 20px; }
  .hero__buy { height: 52px; }
  .hero__down { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero__down i::after { animation: none; translate: 0 5px; } .hero__copy > * { transition: none; } }

/* the story's films: frames 3 and 4 fill the frame as the photos do */
.tale__film { position: absolute; inset: 0; background: #141F20; }
.tale__film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .tale__film video { object-position: 58% 50%; } }
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .tale__shot .tale__film { left: 30vw; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
  .tale__film video { object-position: 50% 30%; }
}
/* the Apple badge, only with the Find My frame (Marcus's size: about 150 px on a phone, 180 on a desktop) */
.tale__badge { grid-area: 3 / 1; justify-self: start; display: block; width: clamp(160px, 13vw, 210px); height: auto; margin-top: 28px; opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease), translate .6s var(--ease); }
.tale__badge.is-on { opacity: 1; translate: 0 0; transition-delay: .35s; }
@media (max-width: 760px) { .tale__badge { margin-top: 16px; width: 150px; } }

/* what comes in with the scroll, as the chapter text does */
.share__film, .fit2__photo, .ins__side, .how__media {
  opacity: clamp(0, (var(--r, 1) - .3) * 2.4, 1);
  translate: 0 calc((1 - clamp(0, (var(--r, 1) - .3) * 2.4, 1)) * 26px);
}

/* 02 sharing */
.void--share { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 90px); }
.void--share .void__left { grid-column: 1; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 30px 0 0; max-width: 30em; }
.roles div { padding: 16px 18px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .06); }
.roles dt { font: 600 18px/1.1 var(--display); letter-spacing: -0.02em; color: #1D5F63; }
.roles dd { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.share__note { margin: 18px 0 0; max-width: 30em; font-size: 15px; line-height: 1.45; color: var(--muted); }
.share__film { grid-column: 2; justify-self: center; position: relative; margin: 0; width: min(100%, 62vh, 580px); aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: #DADAD6; box-shadow: 0 40px 80px -48px rgba(32, 47, 48, .5); }
.share__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a little Varefakta, in the corner */
.vf-corner { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #FFFFFF; color: #202F30; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .08); font: 500 13px/1.15 var(--display); letter-spacing: -0.005em; transition: box-shadow .2s; }
.vf-corner:hover { box-shadow: inset 0 0 0 1px #202F30; }
.vf-corner img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
#share > .tpb { position: absolute; left: 0; right: 0; bottom: 0; }
@media (max-width: 760px) {
  .void--share .heading { font-size: clamp(36px, 10vw, 46px); }
  .roles { margin-top: 18px; }
  .roles div { padding: 12px 14px; border-radius: 14px; }
  .roles dt { font-size: 16px; }
  .roles dd { font-size: 14px; }
  .share__note { margin-top: 12px; font-size: 14px; }
  .share__film { order: 2; margin-top: 18px; width: 100%; max-width: 420px; max-height: 40svh; aspect-ratio: auto; height: 40svh; align-self: center; border-radius: 22px; }
  .vf-corner { left: 10px; bottom: 10px; padding-right: 12px; font-size: 12px; }
  .vf-corner img { width: 30px; height: 30px; }
}

/* 04 will it fit: plain words and Marcus's photo */
.void--fit2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(32px, 5vw, 90px); }
.void--fit2 .void__left { grid-column: 1; }
.fit2__try { display: flex; align-items: center; gap: 22px; margin-top: 30px; max-width: 30em; padding: 20px 26px 20px 22px; border-radius: 22px; background: #ECECEA; }
.fit2__days { flex: none; font: 600 clamp(54px, 4.6vw, 72px)/.85 var(--display); letter-spacing: -0.05em; color: #1D5F63; }
.fit2__try p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.fit2__photo { grid-column: 2; justify-self: end; margin: 0; width: 100%; max-width: 760px; aspect-ratio: 4 / 3; max-height: 68vh; border-radius: 28px; overflow: hidden; background: #DADAD6; box-shadow: 0 40px 80px -48px rgba(32, 47, 48, .45); }
.fit2__photo picture { display: block; height: 100%; }
.fit2__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
@media (max-width: 760px) {
  .void--fit2 .heading { font-size: clamp(36px, 10vw, 46px); }
  .fit2__try { margin-top: 18px; padding: 14px 16px; gap: 14px; border-radius: 16px; }
  .fit2__days { font-size: 46px; }
  .fit2__try p { font-size: 14px; }
  .fit2__photo { margin-top: 20px; aspect-ratio: auto; height: 34svh; border-radius: 22px; }
}

/* 05 insurance, on Deep Teal: the mark, what it means, and the lab film */
.void--ins { --ink: #ECECEA; --ink-2: #ECECEA; --muted: #9BCDD0; --line: rgba(236, 236, 234, .25); --dash: 1px dashed rgba(236, 236, 234, .28); color: var(--ink);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(32px, 5vw, 90px); }
.void--ins .void__left { grid-column: 1; }
.void--ins .heading { font-size: clamp(36px, 3.9vw, 62px); max-width: 11em; }
.void--ins .body { color: rgba(236, 236, 234, .9); }
.void--ins .link { color: #ECECEA; border-bottom-color: #9BCDD0; }
.void--ins .link:hover { color: #9BCDD0; }
.ins__facts { list-style: none; margin: 28px 0 0; padding: 0; max-width: 34em; }
.ins__facts li { display: grid; gap: 4px; padding: 14px 0; border-top: var(--dash); }
.ins__facts b { font: 600 clamp(17px, 1.3vw, 20px)/1.2 var(--display); letter-spacing: -0.02em; }
.ins__facts span { font-size: 15px; line-height: 1.45; color: rgba(236, 236, 234, .82); }
.ins__cert { margin-top: 10px; }
.ins__side { grid-column: 2; display: flex; align-items: center; justify-content: center; }
.ins__seal { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.ins__mark { flex: none; width: clamp(64px, 5.4vw, 84px); height: auto; }
.ins__seal .ins__cert { margin-top: 0; }
.ins__film { position: relative; margin: 0; height: min(70vh, 640px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #163F42; box-shadow: 0 40px 80px -40px rgba(10, 20, 21, .6); }
.ins__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ins__film figcaption { position: absolute; left: 12px; bottom: 12px; padding: 8px 12px; border-radius: 999px; background: rgba(20, 32, 33, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FFFFFF; font-size: 12px; letter-spacing: .08em; }
.ins__replay { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: #ECECEA; color: #202F30; font: 500 13px/1 var(--display); cursor: pointer; }
.ins__replay[hidden] { display: none; }
.ins__replay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.void--ins :focus-visible { outline-color: #ECECEA; }
@media (min-width: 761px) and (max-width: 1100px) { .ins__film { height: min(60vh, 520px); } }
@media (max-width: 760px) {
  .void--ins .heading { font-size: clamp(34px, 9.4vw, 44px); }
  .void--ins .body { font-size: 16px; }
  .ins__facts { margin-top: 16px; }
  .ins__facts li { padding: 10px 0; }
  .ins__facts span { font-size: 14px; }
  .ins__side { order: 2; margin-top: 20px; justify-content: flex-start; gap: 18px; }
  .ins__mark { width: 52px; }
  .ins__seal { gap: 14px; margin-top: 16px; }
  .ins__film { height: 46svh; border-radius: 20px; }
}

/* 06 how it works: each step shows its own film (Marcus's help films, cut and without captions) */
.how__media { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: #DADAD6; box-shadow: 0 40px 80px -48px rgba(32, 47, 48, .45); }
.how__m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.how__m.is-on { opacity: 1; }
img.how__m { object-position: 50% 0; background: #FFFFFF; }
@media (min-width: 1101px) {
  .how__media { grid-column: 3; justify-self: end; width: 100%; max-width: 400px; aspect-ratio: 540 / 740; max-height: min(66vh, 560px); }
}
@media (max-width: 1100px) {
  .void--how { row-gap: 26px; }
  .how__media { grid-column: 1; justify-self: center; width: auto; height: min(40svh, 380px); aspect-ratio: 540 / 740; }
}
@media (max-width: 760px) { .how__media { order: 3; margin-top: 18px; height: 34svh; border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .how__m { transition: none; } }

/* review round 1 (14 Oct) */
/* the story fades through dark: the old frame goes first, the new one follows, never two pictures at once */
.tale__shot { transition: opacity .45s var(--ease); }
.tale__shot.is-on { transition: opacity .8s var(--ease) .3s; }
.tale__line span { margin-top: .34em; }
/* the steps not in view stay readable */
.how b { color: rgba(32, 47, 48, .58); }
/* fit: Marcus's photo, closer on the lock by the rear wheel */
.fit2__photo img { object-position: 78% 60%; scale: 1.3; transform-origin: 80% 60%; }
@media (prefers-reduced-motion: reduce) { .tale__shot, .tale__shot.is-on { transition: none; } }

/* review round 2 (14 Oct): desktop art direction */
/* every chapter fits its stop on a short laptop */
@media (min-width: 1101px) and (max-height: 780px) {
  .void { padding-top: 104px; padding-bottom: 44px; }
  .void--ins .heading { font-size: clamp(36px, 3.4vw, 50px); }
  .void--ins .body { font-size: 17px; }
  .ins__facts { margin-top: 18px; }
  .ins__facts li { padding: 9px 0; }
  .ins__facts span { font-size: 14px; }
  .ins__seal { margin-top: 14px; }
  .ins__mark { width: 56px; }
  .ins__film { height: min(66vh, 560px); }
}
/* landscape tablets keep two columns */
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .void--how { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); grid-template-rows: auto auto; align-content: center; column-gap: 40px; row-gap: 22px; }
  .void--how .void__left { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .void--how .how { grid-column: 1; grid-row: 2; }
  .how__media { grid-column: 2; grid-row: 1 / span 2; justify-self: end; height: min(62svh, 460px); }
  .void--help { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-content: normal; column-gap: 40px; }
  .help { grid-column: 2; }
}
/* one shared edge on wide screens */
@media (min-width: 1600px) { :root { --gutter: max(32px, calc((100vw - 1536px) / 2)); } }
@media (min-width: 1101px) {
  /* the media share one right edge */
  .share__film { justify-self: end; }
  .ins__side { justify-content: flex-end; }
  /* the shop: the lock gets the left, the card is quieter (the review band sits right below it) */
  #buy.void--product { grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); column-gap: clamp(32px, 5vw, 90px); }
  #buy .void__left { position: absolute; top: 120px; left: var(--gutter); }
  #buy .slot { grid-column: 1; grid-row: 1; }
  #buy .void__right { grid-column: 2; grid-row: 1; }
  #buy .badge--tp, #buy .buy__love { display: none; }
  /* Pale Teal only as an accent */
  .help__manual a { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .08); transition: box-shadow .2s; }
  .help__manual a:hover { box-shadow: inset 0 0 0 1px #202F30; }
  /* one card radius, one media radius */
  .roles div, .fit2__try, .help__talk a { border-radius: var(--r-card); }
  .share__film, .fit2__photo, .ins__film, .how__media, .void--product .void__right { border-radius: 28px; }
  .tale__line span { margin-top: .45em; }
  /* the whole phone screen in the set-up step */
  img.how__m { object-fit: contain; object-position: 50% 0; }
  .hero__down i { background: rgba(236, 236, 234, .5); }
  .foot2__band { display: none; }
}

/* the story on wide screens (Eric, 14 Oct: no dark band on the left): every photo and film fills the whole screen,
   the words sit low left on a soft shade */
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .tale__shot picture, .tale__shot .tale__film { left: 0; -webkit-mask-image: none; mask-image: none; }
  .tale__pin::after { background:
    linear-gradient(90deg, rgba(20, 32, 33, .58) 0%, rgba(20, 32, 33, .2) 34%, rgba(20, 32, 33, 0) 56%),
    linear-gradient(0deg, rgba(20, 32, 33, .55) 0%, rgba(20, 32, 33, 0) 44%); }
  /* the Find My photo: the phone moves right, clear of the words */
  .tale__shot[data-i="1"] picture { transform: scale(1.38); transform-origin: 0 50%; }
  .tale__shot[data-i="1"] img { object-position: 0 50%; }
  .tale__film video { object-position: 50% 32%; }
}

/* review round 2 (14 Oct): phones. Every chapter is exactly one screen (Eric: "denna är 2 sidor"): the words keep their
   size, the picture or film takes whatever height is left */
@media (max-width: 760px) {
  .void--share, .void--fit2, .void--ins, .void--how { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
  .share__film { flex: 1 1 0; min-height: 96px; height: auto; max-height: none; max-width: none; width: 100%; }
  .fit2__photo { flex: 1 1 0; min-height: 96px; height: auto; max-height: none; }
  .ins__side { flex: 1 1 0; min-height: 96px; margin-top: 14px; align-self: stretch; }
  .ins__film { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 20px; }
  .ins__film video { object-position: 50% 55%; }
  .void--how { row-gap: 10px; }
  .void--how .how li { padding: 2px 0; }
  .void--how .how li + li { margin-top: 2px; }
  .how__media { flex: 1 1 0; min-height: 96px; height: auto; width: 100%; aspect-ratio: auto; margin-top: 10px; }
  img.how__m { object-fit: cover; object-position: 50% 8%; }
  .void--ins .body { font-size: 15px; line-height: 1.45; }
  .ins__facts { margin-top: 12px; }
  .ins__facts li { padding: 8px 0; gap: 2px; }
  .ins__facts b { font-size: 16px; }
  .ins__facts span { font-size: 13.5px; line-height: 1.4; }
  .ins__seal { margin-top: 12px; }
  /* the story films sit in the top of the screen and fade into Ink, so the words never cover the lock */
  .tale__film { bottom: 30%; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
  .tale__film video { object-position: 50% 0; }
  /* the review band clears the home bar */
  #buy > .tpb { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* tap targets */
  .hero__more { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; border-bottom: 0; text-decoration: underline dashed rgba(236, 236, 234, .55); text-underline-offset: 6px; }
  .tale__dots button { height: 44px; margin-block: -11px; }
  .void--ins .link { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .foot2__legal a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
  .qty button { width: 44px; height: 44px; }
}
/* short screens (a phone held sideways, a small window): quieter words so the chapter still fits */
@media (max-width: 760px) and (max-height: 780px) {
  .void { padding-top: 84px; padding-bottom: 24px; }
  .void .heading { font-size: clamp(28px, 7.4vw, 36px); }
  .void__index { margin-bottom: 10px; }
  .void .body { font-size: 14px; }
  .void__left .heading + .body { margin-top: 10px; }
  .share__note, .void--how .void__left .body { display: none; }
  .roles { margin-top: 12px; }
  .roles dd { font-size: 13px; }
  .fit2__try { margin-top: 12px; }
  .ins__facts span { display: none; }
  .ins__facts li { padding: 6px 0; }
  .ins__seal { margin-top: 8px; }
  .ins__mark { width: 40px; }
  .ins__seal .cert dd { font-size: 16px; }
  .void--how .how b { font-size: 16px; }
}
@media (max-width: 760px) and (max-height: 520px) {
  .void .heading { font-size: 26px; }
  .roles, .ins__facts { display: none; }
}
/* touch tablets: nav targets of 44 px */
@media (min-width: 761px) and (max-width: 1100px) and (pointer: coarse) {
  .nav__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .lang a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; }
  .nav__buy { min-height: 44px; }
}
@media (max-width: 760px) and (max-height: 520px) { .how__media { display: none; } }
/* the shop on phones: the review band sits right below the card, so the card drops its own Trustpilot badge and the
   repeated 57-day line; on short screens the badge row goes too, so the shop is one screen */
@media (max-width: 760px) { #buy .badge--tp, #buy .buy__love { display: none; } }
@media (max-width: 760px) and (max-height: 780px) { #buy .badges { display: none; } }
@media (max-width: 760px) and (max-height: 780px) {
  #buy .void__right .badges { display: none !important; }
  #buy.void--product { padding-bottom: 64px; }
  #buy .slot { flex: 1 0 80px; min-height: 80px; }
  #buy .void__right { gap: 12px; }
  #buy .trust-row { gap: 2px 12px; font-size: 12.5px; }
}
@media (max-width: 760px) and (max-height: 620px) {
  #buy.void--product { padding-top: 76px; }
  #buy .slot { flex-basis: 56px; min-height: 56px; }
  #buy .void__right { padding: 16px; gap: 10px; }
  #buy .trust-row li:nth-child(2) { display: none; }
}

/* review round 2 (14 Oct): performance and accessibility */
.is-away, .is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }
[data-tone="dark"] :focus-visible { outline-color: #ECECEA; }
[tabindex="-1"]:focus-visible { outline: none; }
.how b { color: rgba(32, 47, 48, .7); }

/* 04 fit, rebuilt (Eric 14 Oct: Marcus's words, a tidier page): the words left, Marcus's photo filling the right half */
.void--fit3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 90px); padding-right: 0; }
.void--fit3 .void__left { grid-column: 1; max-width: 560px; }
.void--fit3 .heading { line-height: .98; }
.fit3__yes { margin: 28px 0 0; max-width: 22em; font: 500 clamp(20px, 1.7vw, 26px)/1.3 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.fit3__not { margin: 10px 0 0; font-size: 16px; color: var(--muted); }
.fit3__try { display: flex; align-items: center; gap: 18px; margin: 34px 0 0; padding-top: 24px; border-top: var(--dash); max-width: 30em; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.fit3__days { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #1D5F63; color: #ECECEA; text-align: center; }
.fit3__days b { font: 600 26px/1 var(--display); letter-spacing: -0.03em; }
.fit3__days small { margin-top: -6px; font: 500 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.fit3__photo { grid-column: 2; align-self: stretch; position: relative; margin: -120px 0 -72px; overflow: hidden; background: #DADAD6; }
.fit3__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 84% 52%; }
.fit3__photo { opacity: clamp(0, (var(--r, 1) - .3) * 2.4, 1); }
@media (min-width: 1101px) and (max-height: 780px) { .fit3__photo { margin: -104px 0 -44px; } }
@media (max-width: 760px) {
  .void--fit3 { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; padding-right: var(--gutter); }
  .void--fit3 .heading { font-size: clamp(34px, 9.6vw, 44px); }
  .fit3__yes { margin-top: 14px; font-size: 18px; }
  .fit3__not { margin-top: 6px; font-size: 14px; }
  .fit3__try { margin-top: 14px; padding-top: 14px; gap: 14px; font-size: 14px; }
  .fit3__days { width: 56px; height: 56px; }
  .fit3__days b { font-size: 20px; }
  .fit3__days small { font-size: 9px; }
  .fit3__photo { flex: 1 1 0; min-height: 96px; margin: 18px calc(-1 * var(--gutter)) -24px; }
}
@media (max-width: 760px) and (max-height: 780px) { .fit3__try { margin-top: 10px; padding-top: 10px; font-size: 13px; } .fit3__days { width: 44px; height: 44px; } .fit3__days b { font-size: 16px; } .fit3__days small { display: none; } .fit3__photo { margin-top: 12px; } }
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .void--fit3 { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-right: var(--gutter); row-gap: 28px; }
  .fit3__photo { grid-column: 1; margin: 0 calc(-1 * var(--gutter)) -72px; }
}

/* 05 insurance, rebuilt (Eric 14 Oct: less text): the mark, the claim, the film */
.void--ins2 { --ink: #ECECEA; --ink-2: #ECECEA; --muted: #9BCDD0; --line: rgba(236, 236, 234, .25); color: var(--ink);
  grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 6vw, 120px); }
.void--ins2 .void__left { grid-column: 1; }
.ins2__mark { display: block; width: clamp(96px, 9vw, 140px); height: auto; margin-bottom: clamp(28px, 5vh, 56px); }
.void--ins2 .heading { font-size: clamp(44px, 5.4vw, 92px); max-width: 9em; line-height: .96; }
.ins2__vk { margin: 28px 0 0; color: #ECECEA; opacity: .75; }
.void--ins2 .ins__film { grid-column: 2; height: min(72vh, 680px); }
.void--ins2 :focus-visible { outline-color: #ECECEA; }
@media (max-width: 760px) {
  .void--ins2 { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
  .ins2__mark { width: 64px; margin-bottom: 18px; }
  .void--ins2 .heading { font-size: clamp(38px, 11vw, 50px); }
  .ins2__vk { margin-top: 14px; }
  .void--ins2 .ins__film { flex: 1 1 0; min-height: 120px; height: auto; width: auto; aspect-ratio: 9 / 16; align-self: center; margin-top: 20px; }
}
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .void--ins2 { grid-template-columns: 1fr; row-gap: 28px; align-content: center; }
  .void--ins2 .ins__film { grid-column: 1; justify-self: start; height: 46vh; }
}

/* 06 how it works: the films are shown whole (9:16, nothing cropped), so the phone and the lock are always in view */
.how__media { aspect-ratio: 9 / 16 !important; background: #FFFFFF; }
.how__m { object-fit: contain !important; object-position: 50% 50% !important; }
@media (min-width: 1101px) { .how__media { width: auto; height: min(70vh, 620px); max-height: none; max-width: none; } }
@media (max-width: 1100px) { .how__media { width: auto !important; } }
@media (max-width: 760px) { .how__media { align-self: center; } }
@media (max-width: 760px) {
  .void--ins2 .void__left { align-self: stretch; }
  .void--ins2 .heading { font-size: clamp(30px, 8.6vw, 42px); }
  .void--ins2 .ins__film figcaption { left: 8px; right: 8px; bottom: 8px; padding: 6px 9px; font-size: 9px; letter-spacing: .06em; text-align: center; }
}
@media (max-width: 760px) and (max-height: 780px) { .void--ins2 .ins__film figcaption { display: none; } .ins2__mark { width: 52px; margin-bottom: 12px; } }
/* 04 fit on phones (Eric 14 Oct: "ser konstigt ut"): the photo is a calm rounded card inside the margins, showing the
   rear wheel and the lock, not a giant edge-to-edge crop */
@media (max-width: 760px) {
  .fit3__photo { flex: 1 1 0; min-height: 120px; max-height: 46svh; margin: 18px 0 0; border-radius: 22px; box-shadow: 0 30px 60px -40px rgba(32, 47, 48, .45); }
  .fit3__photo img { object-position: 80% 58%; }
}
@media (max-width: 760px) and (max-height: 780px) { .fit3__photo { margin-top: 12px; border-radius: 18px; } }
/* 04 fit: the product photo (the Ring-Lock round the rear wheel of a city bike) */
.fit3__photo picture { position: absolute; inset: 0; }
.fit3__photo img { object-position: 52% 45%; }
@media (max-width: 760px) { .fit3__photo img { object-position: 50% 42%; } }
/* the 57 days badge: number and word centred as one block */
.fit3__days { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.fit3__days b { display: block; line-height: .9; }
.fit3__days small { display: block; margin: 0; line-height: 1; }

/* polish pass (14 Oct) */
/* the shop: the eyebrow sits on the same left edge as every other chapter (it was placed inside the lock's grid area,
   so it started a gutter too far in) */
@media (min-width: 1101px) { #buy .void__left { grid-area: auto; } }
/* the shop: "from 1 Jan 2027" already says when the price changes, so the extra "Price until" pill goes */
#buy .price-line > .label { display: none; }
/* the shop: with the Trustpilot badge moved to the band below, the two remaining badges share the card's width, centred */
@media (min-width: 1101px), (max-width: 760px) {
  #buy .badges { grid-template-columns: 1fr 1fr !important; }
}
/* support on phones: the list and the contact cards use the full column, on the same edge as the other chapters */
@media (max-width: 760px) {
  .void--help { align-items: stretch; }
  .void--help .void__left, .void--help .help { width: 100%; }
}
/* how it works (owner: "konstigt"): no boxy focus rectangle round a tapped step; keyboard focus is a soft ring on the
   step's circle. Every circle sits exactly on the connector, which runs from the first circle's centre to the last one's
   (measured in darkroom.js), so nothing sticks out below; the current circle no longer grows */
.how li { -webkit-tap-highlight-color: transparent; }
.how li:focus, .how li:focus-visible { outline: none; }
.how li:focus-visible .how__ic { box-shadow: 0 0 0 4px #ECECEA, 0 0 0 6px #458A8E; }
.how::before, .how::after { left: 21px; width: 2px; top: var(--how-a, 30px); bottom: var(--how-z, 30px); }
.how__ic { position: relative; z-index: 1; box-sizing: border-box; }
.how li.is-on .how__ic { transform: none; }
/* 02 sharing (owner 14 Oct): the sharing film is the whole chapter. The lock sits left of centre in the film, so the
   words sit right on a soft shade, never over the lock */
.void--share { --ink: #ECECEA; --ink-2: #ECECEA; --muted: #9BCDD0; --line: rgba(236, 236, 234, .25); color: #ECECEA; background: #202F30; overflow: hidden; isolation: isolate; }
.void--share :focus-visible { outline-color: #ECECEA; }
.void--share .share__film { grid-area: auto; justify-self: stretch; align-self: stretch; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; max-width: none; max-height: none; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #202F30; }
.void--share .share__film video { width: 100%; height: 100%; object-fit: cover; }
.void--share .share__film::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.void--share .void__index b { color: #ECECEA; }
.void--share .heading { color: #ECECEA; }
.void--share .body { color: #ECECEA; }
.void--share .roles div { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.void--share .roles dt { color: #ECECEA; }
.void--share .roles dd { color: rgba(236, 236, 234, .85); }
.void--share .share__note { color: rgba(236, 236, 234, .8); }
@media (min-width: 761px) {
  .void--share { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
  .void--share .void__left { grid-column: 2; grid-row: 1; justify-self: end; width: 100%; max-width: 460px; }
  .void--share .share__film::after { background:
    linear-gradient(270deg, rgba(20, 32, 33, .8) 0%, rgba(20, 32, 33, .38) 38%, rgba(20, 32, 33, 0) 60%),
    linear-gradient(0deg, rgba(20, 32, 33, .4) 0%, rgba(20, 32, 33, 0) 30%); }
  /* the Varefakta pill: bottom right, on the words' side, clear of the lock */
  .void--share .vf-corner { left: auto; right: var(--gutter); bottom: clamp(20px, 4vh, 40px); }
}
/* phones: the film fills the top of the screen and fades into Ink, the words sit below it */
@media (max-width: 760px) {
  .void--share { justify-content: flex-start; align-items: stretch; padding-top: 0; row-gap: 0; }
  .void--share .share__film { position: relative; inset: auto; z-index: 0; order: -1; flex: 1 1 0; min-height: 160px; width: auto; margin: 0 calc(-1 * var(--gutter)); border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent); mask-image: linear-gradient(180deg, #000 74%, transparent); }
  .void--share .share__film video { object-position: 50% 40%; }
  .void--share .void__left { position: relative; z-index: 1; margin-top: -28px; }
  .void--share .vf-corner { left: var(--gutter); bottom: 40px; }
}
@media (min-width: 761px) { .void--share .void__left { max-width: min(460px, 34vw); } .void--share { grid-template-columns: minmax(0, 1fr) min(460px, 34vw); } }
/* the opening on phones (owner 14 Oct: the photo was soft): only the three portrait shots, sharp files, an 18 s cycle */
@media (max-width: 760px) {
  .hero__shot:nth-child(1), .hero__shot:nth-child(5) { display: none; }
  .hero__shot { animation-name: hero-shot3; animation-duration: 18s; }
  .hero__shot img { animation-name: hero-drift3; animation-duration: 18s; }
  .hero__shot:nth-child(2), .hero__shot:nth-child(2) img { opacity: 1; animation-delay: -1.1s; }
  .hero__shot:nth-child(2) img { opacity: 1; }
  .hero__shot:nth-child(3), .hero__shot:nth-child(3) img { animation-delay: 4.9s; }
  .hero__shot:nth-child(4), .hero__shot:nth-child(4) img { animation-delay: 10.9s; }
}
@keyframes hero-shot3 { 0% { opacity: 0; } 6% { opacity: 1; } 33% { opacity: 1; } 39% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-drift3 { 0% { scale: 1.08; } 39% { scale: 1; } 100% { scale: 1; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .hero__shot, .hero__shot img { animation: none; } }
/* the footer links stay on one row on the narrowest phones */
@media (max-width: 400px) { .foot2__nav { gap: 4px 0; } .foot2__nav a { padding: 0 10px; } }
/* sharing: the Varefakta pill is a quiet line in the words' column, under the note, in the same glass as the role cards */
.void--share .vf-corner { position: static; display: inline-flex; width: max-content; max-width: 100%; margin-top: 18px; gap: 8px; padding: 4px 12px 4px 4px; font: 500 12.5px/1.2 var(--display); color: #ECECEA; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.void--share .vf-corner:hover { box-shadow: inset 0 0 0 1px #ECECEA; }
.void--share .vf-corner img { width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; }
@media (max-width: 760px) { .void--share .vf-corner { margin-top: 14px; font-size: 12px; } }
@media (max-width: 760px) and (max-height: 600px) { .void--share .vf-corner { display: none; } }
/* the shop card's badges: 57 days | Keep You Moving | the Varefakta mark, three even columns (Trustpilot lives in the band) */
#buy .badges { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#buy .badge--tp { display: none !important; }
.badge--vf { display: flex; align-items: center; justify-content: center; align-self: stretch; transition: opacity .2s; }
.badge--vf:hover { opacity: .75; }
.badge--vf img { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: contain; background: #FFFFFF; }
@media (max-width: 760px) { .badge--vf img { width: 44px; height: 44px; } }
/* the review band reads as Trustpilot: a fixed label on the left, the reviews drift in under its soft edge */
#buy > .tpb { border-top: 1px solid rgba(32, 47, 48, .1); }
.tpb__pin { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 0 20px 0 var(--gutter); background: #ECECEA; white-space: nowrap; font-size: 15px; }
.tpb__pin::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 48px; background: linear-gradient(90deg, #ECECEA, rgba(236, 236, 234, 0)); pointer-events: none; }
.tpb__pin b { font: 600 16px/1 var(--display); }
.tpb__n { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .tpb__pin { gap: 8px; padding-right: 12px; font-size: 14px; }
  .tpb__pin::after { width: 32px; }
  .tpb__pin .tpb__stars, .tpb__pin .tpb__n { display: none; }
}
/* chapters without eyebrows (owner 14 Oct): the story keeps only its progress bar */
.tale__copy { row-gap: 0; }
/* the Trustpilot label as a small white widget, pinned left; the reviews drift in under its soft edge */
.tpb__pin { gap: 0; padding: 0 0 0 var(--gutter); background: #ECECEA; }
.tpb__chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 6px 18px -10px rgba(32, 47, 48, .35), inset 0 0 0 1px rgba(32, 47, 48, .08); color: #202F30; }
.tpb__chip .tpb__logo { gap: 5px; font: 600 15px/1 var(--display); color: #202F30; }
.tpb__chip .tpb__logo svg { width: 19px; height: 19px; }
.tpb__chip .tpb__stars { gap: 2px; }
.tpb__chip .tpb__stars svg { width: 17px; height: 17px; }
.tpb__chip .tpb__stars svg.off { background: linear-gradient(90deg, #00B67A 80%, #DCDCE6 80%); border-radius: 1px; }
.tpb__chip .tpb__stars svg.off rect { fill: transparent; }
.tpb__chip b { font: 600 15px/1 var(--display); }
.tpb__chip .tpb__n { margin-left: -4px; font: 400 13px/1 var(--body); color: #606A74; text-decoration: none; }
.tpb__chip .tpb__n::before { content: "· "; }
.tpb__pin::after { width: 40px; }
@media (max-width: 760px) {
  .tpb__pin { padding-right: 0; }
  .tpb__chip { gap: 8px; padding: 6px 12px; }
  .tpb__chip .tpb__logo { font-size: 14px; }
  .tpb__chip .tpb__stars svg { width: 15px; height: 15px; }
  .tpb__pin .tpb__stars { display: inline-flex; }
  .tpb__pin .tpb__n { display: none; }
}
/* sharing: Guest and Owner as two calm rows on hairlines, one column with the words above */
.void--share .void__left > * { max-width: none; }
.void--share .roles { display: block; margin-top: 26px; border-top: 1px solid rgba(236, 236, 234, .18); }
.void--share .roles div { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: baseline; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(236, 236, 234, .18); border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.void--share .roles dt { font: 600 16px/1.3 var(--display); color: #ECECEA; }
.void--share .roles dd { margin: 0; font-size: 15px; line-height: 1.4; color: rgba(236, 236, 234, .8); }
.void--share .share__note { margin-top: 16px; }
@media (max-width: 760px) {
  .void--share .roles { margin-top: 16px; }
  .void--share .roles div { padding: 9px 0; grid-template-columns: 64px minmax(0, 1fr); }
  .void--share .roles dt { font-size: 15px; }
  .void--share .roles dd { font-size: 14px; }
}
@media (max-width: 760px) and (max-height: 520px) { .void--share .roles { display: none; } }
/* the review band (owner 14 Oct, final): the reviews drift full width; a small Trustpilot caption sits just above the band */
#buy > .tpb { overflow: visible; overflow-x: clip; overflow-y: visible; }
.tpb__cap { position: absolute; left: var(--gutter); bottom: calc(100% + 8px); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.tpb__cap .tpb__logo { gap: 4px; font: 600 13px/1 var(--display); color: #202F30; }
.tpb__cap .tpb__logo svg { width: 14px; height: 14px; }
.tpb__score { display: inline-flex; gap: 4px; font: 400 12.5px/1 var(--body); color: #606A74; }
.tpb__score b { font: inherit; color: inherit; }
.tpb__score .tpb__n { text-decoration: none; }
.tpb__score .tpb__n::before { content: "· "; }
.tpb:hover .tpb__cap .tpb__logo { text-decoration: underline; text-underline-offset: 3px; }
/* the band's soft edges as overlays (a mask would also hide the caption above it) */
#buy > .tpb { -webkit-mask-image: none; mask-image: none; }
#buy > .tpb::before, #buy > .tpb::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 8%; pointer-events: none; }
#buy > .tpb::before { left: 0; background: linear-gradient(90deg, #ECECEA, rgba(236, 236, 234, 0)); }
#buy > .tpb::after { right: 0; background: linear-gradient(270deg, #ECECEA, rgba(236, 236, 234, 0)); }
.tpb__cap { z-index: 2; }
/* how it works (owner 14 Oct: "samma animationer"): every step changes the same way. All four pictures fill the same
   9:16 card; each comes in with one shared crossfade and settle, the still screen drifts slowly like the films move */
.how__m { object-fit: cover !important; object-position: 50% 50% !important; transform: scale(1.04); transition: opacity .6s var(--ease), transform .6s var(--ease); background: #FFFFFF; }
img.how__m { object-position: 50% 0 !important; transform-origin: 50% 0; }
.how__m.is-on { transform: none; }
img.how__m.is-on { animation: how-kb 9s ease-out .6s forwards; }
@keyframes how-kb { from { scale: 1; } to { scale: 1.06; } }
.how.is-pointer li:focus-visible .how__ic { box-shadow: 0 0 0 6px #ECECEA; }
@media (prefers-reduced-motion: reduce) { .how__m { transform: none; transition: none; } img.how__m.is-on { animation: none; } }
/* 04 fit (owner 14 Oct): the photo is the whole chapter under a soft dark filter, the words in Chalk. The lock is moved
   right of centre on wide screens and into the top half on phones, so the words never sit on it */
.void--fit3 { --ink: #ECECEA; --ink-2: rgba(236, 236, 234, .85); --muted: #9BCDD0; --line: rgba(236, 236, 234, .25); --dash: 1px dashed rgba(236, 236, 234, .25);
  color: #ECECEA; background: #202F30; overflow: hidden; isolation: isolate; }
.void--fit3 .heading, .void--fit3 .fit3__yes { color: #ECECEA; }
.void--fit3 .fit3__try { color: rgba(236, 236, 234, .85); border-top: 1px dashed rgba(236, 236, 234, .25); }
.void--fit3 .fit3__days { background: #ECECEA; color: #1D5F63; }
.void--fit3 :focus-visible { outline-color: #ECECEA; }
.void--fit3 .fit3__photo { grid-area: auto; justify-self: stretch; align-self: stretch; position: absolute; inset: 0; z-index: -1; margin: 0; max-height: none; min-height: 0; border-radius: 0; box-shadow: none; opacity: 1; background: #202F30; }
.void--fit3 .fit3__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 761px) {
  .void--fit3 { padding-right: var(--gutter); }
  .void--fit3 .fit3__photo img { object-fit: cover; object-position: 0 50%; transform: scale(1.3); transform-origin: 0 50%; }
  .void--fit3 .fit3__photo::after { background: linear-gradient(90deg, rgba(20, 32, 33, .75) 0%, rgba(20, 32, 33, .35) 34%, rgba(20, 32, 33, 0) 55%), rgba(20, 32, 33, .25); }
}
@media (max-width: 760px) {
  .void--fit3 { justify-content: flex-start; align-items: stretch; padding-top: 0; row-gap: 0; }
  .void--fit3 .fit3__photo { position: relative; inset: auto; z-index: 0; order: -1; flex: 1 1 0; min-height: 160px; margin: 0 calc(-1 * var(--gutter)) -72px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .void--fit3 .fit3__photo img { object-fit: cover; object-position: 50% 48%; }
  .void--fit3 .fit3__photo::after { background: rgba(20, 32, 33, .22); }
  .void--fit3 .void__left { position: relative; z-index: 1; }
}
@media (max-width: 760px) and (min-aspect-ratio: 3/4) { .void--fit3 .fit3__photo img { object-position: 50% 62%; } }

/* the review strip (owner 14 Oct, redo): no moving band. One hairline under the card; the Trustpilot score on the left,
   one real review at a time on the right. On a phone the two stack, centred */
#buy { padding-bottom: 96px; }
.tpr { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(32, 47, 48, .1); color: #202F30; text-decoration: none; }
.tpr__score { display: inline-flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
.tpr__logo { display: inline-flex; align-items: center; gap: 5px; font: 600 16px/1 var(--display); letter-spacing: -0.01em; }
.tpr__logo svg { width: 20px; height: 20px; } .tpr__logo path { fill: #00B67A; }
.tpr__stars { display: inline-flex; gap: 2px; }
.tpr__stars svg { width: 18px; height: 18px; border-radius: 1px; }
.tpr__stars rect { fill: #00B67A; } .tpr__stars path { fill: #FFFFFF; }
.tpr__stars svg.part { background: linear-gradient(90deg, #00B67A 80%, #DCDCE6 80%); } .tpr__stars svg.part rect { fill: transparent; }
.tpr__n { font-size: 14px; color: #606A74; } .tpr__n b { font: 600 15px/1 var(--display); color: #202F30; }
.tpr__quotes { position: relative; display: grid; min-width: 0; padding-left: 28px; border-left: 1px solid rgba(32, 47, 48, .14); }
.tpr__quotes q { grid-area: 1 / 1; font-size: 15px; line-height: 1.35; color: #3C4A4B; font-style: italic; quotes: "“" "”"; opacity: 0; translate: 0 6px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.tpr__quotes q.is-on { opacity: 1; translate: 0 0; }
.tpr:hover .tpr__logo { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .tpr { flex-direction: column; gap: 6px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  .tpr__score { gap: 8px; } .tpr__logo { font-size: 14px; } .tpr__logo svg { width: 16px; height: 16px; }
  .tpr__stars svg { width: 15px; height: 15px; } .tpr__n { font-size: 12.5px; } .tpr__n b { font-size: 13px; }
  .tpr__quotes { padding-left: 0; border-left: 0; justify-items: center; }
  .tpr__quotes q { font-size: 13px; }
}
/* the unlock into the ride off: a quicker dissolve between the two films, so they read as one */
.tale__shot--film { transition-duration: .8s; }

/* the trial as words in the badge row, until its logo is approved */
.badge--trial { display: grid; align-content: center; gap: 3px; text-transform: none; color: var(--ink); }
.badge--trial span:first-child { font: 600 14px/1.1 var(--display); letter-spacing: -0.01em; }
.badge--trial span:last-child { font: 500 11.5px/1.25 var(--body); color: var(--muted); }
.badge--trial:hover span:first-child { color: #1D5F63; }
.badges:has(> .badge--trial) { grid-template-columns: 1.45fr 1fr .7fr !important; }
.badges:has(> .badge--trial) > .badge--trial { justify-items: start; text-align: left; padding-left: 0; }

/* the opening (16 Oct): the lock in focus. The product photos are graded already, so no lift; each is framed on the lock */
.hero--photo .hero__shot--lock img { filter: none; }
.hero--photo .hero__shot--bike img { object-position: 46% 40%; }
.hero--photo .hero__shot--steel img { object-position: 58% 46%; }
.hero--photo .hero__shot--hand img { object-position: 52% 55%; }
.hero--photo .hero__shot--black img { object-position: 44% 40%; }
/* full screen under a dark filter (owner, 16 Oct). On a computer the words sit low left, so each lock picture is drawn a
   little larger from its left edge: the lock moves right, clear of the headline, and the files stay sharp */
.hero--photo .hero__shot--lock::after { content: ""; position: absolute; inset: 0; background: rgba(20, 32, 33, .38); pointer-events: none; }
@media (min-width: 761px) {
  .hero--photo .hero__shot--bike { transform: scale(1.28); transform-origin: 0% 42%; }
  .hero--photo .hero__shot--steel { transform: scale(1.32); transform-origin: 0% 50%; }
  .hero--photo .hero__shot--black { transform: scale(1.32); transform-origin: 0% 36%; }
  .hero--photo .hero__shot--bike img { object-position: 0% 40%; }
  .hero--photo .hero__shot--steel img { object-position: 50% 50%; }
  .hero--photo .hero__shot--black img { object-position: 50% 34%; }
  .hero--photo .hero__shot--hand img { object-position: 50% 58%; }
}
@media (max-width: 760px) {
  .hero--photo .hero__shot--steel img { object-position: 56% 40%; }
  .hero--photo .hero__shot--hand img { object-position: 50% 50%; }
  .hero--photo .hero__shot--black img { object-position: 46% 34%; }
}

/* ------------------------------------------- the steady header (17 Oct, kept last so it wins)
   The bar never changes size or place. Floating, clear or over a photo it keeps one shape; only its glass fades in and
   out, on a layer of its own (opacity only), so a change of state never re-lays-out the bar or makes it jump. */
.nav__shell, html.nav-float .nav__shell, html.nav-float.nav-compact .nav__shell {
  max-width: 1240px !important; height: 64px !important; padding: 0 8px 0 22px !important;
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  isolation: isolate; transition: none !important;
}
.nav__shell::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(32, 47, 48, .1);
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 40px -20px rgba(32, 47, 48, .45);
  opacity: 0; transition: opacity .35s var(--ease), background-color .4s, border-color .4s;
}
html.nav-float:not(.nav-clear):not(.in-tale) .nav__shell::before { opacity: 1; }
html[data-tone="dark"] .nav__shell::before { background: color-mix(in srgb, #202F30 55%, transparent); border-color: rgba(236, 236, 234, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 40px -20px rgba(0, 0, 0, .6); }
/* a phone: the same slim bar as before, solid instead of glass (glass over the moving lock costs frames there) */
@media (max-width: 760px) {
  .nav__shell, html.nav-float .nav__shell, html.nav-float.nav-compact .nav__shell { height: 56px !important; padding: 0 6px !important; }
  .nav__shell::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--paper) 96%, transparent); }
  html[data-tone="dark"] .nav__shell::before { background: color-mix(in srgb, #1D5F63 96%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .nav__shell::before { transition: none; } }

/* ------------------------------------------- how it works, the same for all four steps (17 Oct, kept last so it wins)
   One window for every step (the films are cut to 540 × 760, without their captions or title cards), one crossfade
   with the same soft settle, and no slow zoom on the still: the four steps now move the same way. */
.how__media { aspect-ratio: 540 / 760 !important; }
.how__m, img.how__m { object-fit: cover !important; object-position: 50% 0 !important; transform: scale(1.03); transform-origin: 50% 50%; animation: none !important; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.how__m.is-on, img.how__m.is-on { transform: none; }
@media (prefers-reduced-motion: reduce) { .how__m, img.how__m { transform: none; transition: none; } }

/* ------------------------------------------- the footer on a phone (17 Oct, kept last so it wins)
   Tighter, so the whole footer fits on one screen of a common phone: the logo, the line, the links, the socials and the
   fine print together. On a shorter phone the page stops at the footer's top first (darkroom.js), then at its end. */
@media (max-width: 560px) {
  .foot:has(.foot2) { padding-top: 40px; }
  .foot2__top { gap: 18px; padding-bottom: 26px; }
  .foot2__logo { width: 120px; }
  .foot2__intro { margin-top: -4px; font-size: 14px; }
  .foot2__nav { gap: 0; }
  .foot2__nav a { min-height: 38px; }
  .foot2__social a { width: 44px; height: 44px; }
  .foot2__band { display: none; }
  .foot2__legal { gap: 8px; padding-top: 20px; border-top: 1px solid rgba(236, 236, 234, .12); margin-inline: var(--gutter); padding-inline: 0; }
  .foot2__legal span { font-size: 13px; }
  .foot2__legal small { font-size: 11px; line-height: 1.55; }
}

/* ---------------------------------------------- readability (SEO round, 17 Oct)
   Price and trust copy at least 14 px, everything else at least 12 px; every tap target at least 44 px high.
   The bigger tap areas grow by padding with the same negative margin, so nothing moves. */
.price-was small, .price-line .label, .badge--tp > span:last-child, .rv__note, .trust-row { font-size: 14px; }
.tale__dots button { height: 44px; margin-block: -11px; }
/* the switch keeps its look; an invisible area above and below makes it 44 px to tap */
.lang a { position: relative; }
.lang a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; translate: 0 -50%; }
/* the FAQ link keeps its own look; an invisible area makes it 44 px to tap (::after is its arrow) */
.pdp-faq__all { position: relative; }
.pdp-faq__all::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; translate: 0 -50%; }
@media (max-width: 760px) { .price-line .label { font-size: 13px; } }
@media (max-width: 760px) {
  #buy .trust-row { font-size: 14px; }
}

/* the Varefakta link in the insurance chapter */
.ins2__vk { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 14px 0 0; font-size: 14px; }
.ins2__vk a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* footer on a phone: Returns and Call LAAS share the last row, so no link is left alone on one side;
   the intro, the copyright line and the trademark line wrap evenly, no word left alone on a line */
@media (max-width: 560px) {
  .foot2__nav a[href^="tel:"] { grid-column: auto; }
}
.foot2__intro, .foot2__legal span, .foot2__legal small { text-wrap: balance; }

/* the hero: the descenders of the headline (the y in "keys") never touch the line below it */
.hero__title span { margin-top: .48em; line-height: 1.08; }

/* the open menu is light (Chalk) on every page: the bar above it and the language switch inside it use the
   light colours too, also over a dark chapter or the story, so the logo, the close button, the bag and the
   inactive language stay visible */
html:has(#menu:not([hidden])) .nav__logo svg { fill: #202F30; }
html:has(#menu:not([hidden])) .nav .nav__menu, html:has(#menu:not([hidden])) .nav__bag { color: #202F30; background: rgba(255, 255, 255, .6); border-color: rgba(32, 47, 48, .2); box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .14); }
html:has(#menu:not([hidden])) .nav__bag svg { stroke: #202F30; }
html:has(#menu:not([hidden])) .nav__shell { background: transparent; border-color: transparent; box-shadow: none; }
.menu .lang, html[data-tone="dark"] .menu .lang, html.in-tale .menu .lang { box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .14); }
.menu .lang a, html[data-tone="dark"] .menu .lang a, html.in-tale .menu .lang a, html.in-tale .menu .lang i { color: #606A74; }
.menu .lang a[aria-current="true"], html[data-tone="dark"] .menu .lang a[aria-current="true"], html.in-tale .menu .lang a[aria-current="true"] { background: #202F30; color: #ECECEA; }

/* the shop on wide screens (audit, 17 Oct) */
/* the cart and checkout column keeps a normal inner padding on very wide screens (the page gutter grows to
   192 px at 1920 and squeezed the 520 px column to 136 px of content) */
@media (min-width: 1600px) { body.buy-page main { --gutter: 32px; } }
/* the four numbers on the buy page fit their cards in every language and at every width */
.dnum b { font-size: clamp(18px, 1.35vw, 23px); }
.dnum li { min-width: 0; }
.dnum span, .dbox li { overflow-wrap: anywhere; hyphens: auto; }
/* the buy page's first screen: the product sits in the middle of the screen, not at the top with an empty band below */
@media (min-width: 1025px) { .pdp--v2 { align-content: center; } }

/* audit round 2 (17 Oct) */
/* the Varefakta link in the insurance chapter costs the phone layout almost nothing: the lab film keeps its size */
/* on every screen: one slim line, with a 44 px tap area that takes no layout space */
.ins2__vk { margin-top: 10px; }
.ins2__vk a { min-height: 0; padding-block: 12px; margin-block: -12px; }
@media (max-width: 760px) {
  .ins2__vk { margin-top: 6px; }
  .void--ins2 .heading { font-size: clamp(27px, 8.6vw, 42px); }
}
.ins__film figcaption { text-wrap: balance; }
/* the Varefakta mark is shown whole: no circle crop over its letters, no white square behind it */
.badge--vf img { border-radius: 0; background: transparent; }
/* portrait tablets: the photos crop to the lock, not to the seat tube */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .hero--photo .hero__shot--bike { transform: none; }
  .hero--photo .hero__shot--bike img { object-position: 55% 40%; }
  .void--fit3 .fit3__photo img { transform: none; object-position: 55% 45%; }
}
/* the long Danish trial link in the phone footer wraps instead of running off the screen */
@media (max-width: 560px) {
  :lang(da) .foot2__nav a[href$="#trial"] { white-space: normal; text-align: center; line-height: 1.25; padding: 6px 12px; }
}
/* the smallest phones: two footer links side by side always fit on one line each */
@media (max-width: 380px) {
  .foot2__nav a { padding-inline: 6px; font-size: 13.5px; white-space: nowrap; }
  :lang(da) .foot2__nav a[href$="#trial"] { white-space: normal; }
}
/* very wide screens: the buy page's product lines up with the logo and the bag in the bar */
@media (min-width: 1600px) { body.buy-page .pdp--v2, body.buy-page main > .details, body.buy-page main > .rv { max-width: 1240px; padding-left: 23px; padding-right: 23px; } }

/* audit round 3 (17 Oct): states */
/* narrow tablets (761-860 px): the bar fits; the price leaves the Pre-order pill and About LAAS leaves the bar (it is in the menu) */
@media (min-width: 761px) and (max-width: 860px) {
  .nav__price { display: none; }
  .nav__shell:has(.nav__buy) .nav__links a[href$="about.html"] { display: none; }
}
/* the floating bar keeps its glass over the story photos, so its white text never sits on a white sky */
html.in-tale.nav-float .nav__shell::before { opacity: 1; }
/* a hidden bar shows itself when the keyboard reaches it */
html.in-foot .nav:focus-within, html.in-hero .nav:focus-within { translate: 0 0; opacity: 1; pointer-events: auto; }
/* the language switch's focus ring sits on the bubble, not on the pill's border */
.lang a:focus-visible { outline-offset: 0; }
/* touch tablets: the language pill is as tall as the Pre-order pill; its 44 px tap area is the invisible ::after */
@media (min-width: 761px) and (max-width: 1100px) and (pointer: coarse) { .lang a { min-height: 0; } }
/* the smallest phones: the long trial link wraps in English too, so the footer never touches the edges */
@media (max-width: 380px) { .foot2__nav a[href$="#trial"] { white-space: normal; text-align: center; line-height: 1.3; padding-block: 6px; } }
/* portrait tablets: the insurance chapter clears the bar (the mark sat right under it) */
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .void--ins2 { padding-top: 104px; padding-bottom: 40px; row-gap: 24px; }
  .void--ins2 .ins__film { height: 38vh; }
}
/* phones: the manual card's title stays on one line, its line of text goes below it */
@media (max-width: 760px) {
  .help__manual a { grid-template-columns: 1fr auto; row-gap: 4px; }
  .help__manual b { white-space: nowrap; }
  .help__manual small { grid-column: 1; grid-row: 2; font-size: 14px; color: #3C4A4B; }
  .help__manual .help__go { grid-column: 2; grid-row: 1 / 3; }
}

/* ===================================================================== design pass: chrome (18 Oct, round 2)
   One bar, one menu and one footer on every page (the help centre wears the same, help-static/laas-skin.css).
   The bar: logo · Every last detail · About LAAS · FAQ · Help & Guides · EN/DA · Pre-order €129 · the bag. */
/* the bag is on every page now, beside the pill */
.nav__end { flex-wrap: nowrap; }
/* narrow tablets (761-900 px): all four links stay in the bar (no Menu button there), a little smaller; the price
   leaves the pill first */
@media (min-width: 761px) and (max-width: 900px) {
  .nav__shell, html.nav-float .nav__shell { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; padding-inline: 10px 6px; }
  .nav__links { justify-self: center; }
  .nav__logo { width: 96px; }
  .nav__links a { padding: 10px 6px; font-size: 13px; }
  .nav__shell:has(.nav__buy) .nav__links a[href$="about.html"] { display: inline-block; }
  .nav__end { gap: 8px; }
  .nav__price { display: none; }
  .nav__buy { padding-inline: 16px; }
}
/* the open menu is Chalk on every page, also over the home page's dark first chapters: the pill stays Deep Teal
   with white type, and the close cross is Ink */
html:has(#menu:not([hidden])) .nav__buy, html[data-tone="dark"]:has(#menu:not([hidden])) .nav__buy { background: var(--green); color: #FFFFFF; }
html:has(#menu:not([hidden])) .nav__buy .nav__price { background: rgba(239, 239, 236, .16); color: #FFFFFF; }
html:has(#menu:not([hidden])) .ghost.nav__menu::before, html:has(#menu:not([hidden])) .ghost.nav__menu::after,
html[data-tone="dark"]:has(#menu:not([hidden])) .ghost.nav__menu::before, html[data-tone="dark"]:has(#menu:not([hidden])) .ghost.nav__menu::after,
html.in-tale:has(#menu:not([hidden])) .ghost.nav__menu::before, html.in-tale:has(#menu:not([hidden])) .ghost.nav__menu::after { background: #202F30; }
html:has(#menu:not([hidden])) .nav__bag b { background: var(--green); color: #FFFFFF; }
/* the menu's six items come in one after the other */
.menu.is-open nav a:nth-child(5) { transition-delay: .24s; } .menu.is-open nav a:nth-child(6) { transition-delay: .3s; }
/* six items on a short phone: a little tighter so the language switch stays on the screen */
@media (max-width: 760px) and (max-height: 760px) { .menu nav a { padding: 10px 0; font-size: clamp(34px, 9.6vw, 48px); } }
/* the narrowest phones (up to 360 px): logo, Pre-order, the bag and the menu button fit side by side */
@media (max-width: 360px) {
  .nav__logo { width: 80px; }
  .nav__end { gap: 4px; margin-left: 8px; }
  .nav__buy { padding: 0 12px; font-size: 13px; }
}
/* the narrowest phones: the menu's words stay on one line */
@media (max-width: 360px) { .menu nav a { font-size: clamp(28px, 8.8vw, 34px); white-space: nowrap; } }
/* the glass hides what scrolls under it: denser on a computer (text behind the links never reads through) */
@media (min-width: 761px) {
  html.nav-float:not(.nav-clear) .nav__shell::before { background: color-mix(in srgb, var(--paper) 88%, transparent); }
  html[data-tone="dark"].nav-float:not(.nav-clear) .nav__shell::before { background: color-mix(in srgb, #202F30 78%, transparent); }
}
/* the footer's legal line on a phone: each link's tap area stays on its own line (the Danish line wraps between
   the phone number and the links) */
@media (max-width: 760px) {
  .foot2__legal small { line-height: 2.1; }
  .foot2__legal a { padding: 4px 4px; margin: -4px -4px; }
}
/* computers (1024 px and up): the bar spans the page's own measure, so the logo starts on the titles' edge and
   the bag ends on the content's right edge (the logo sits 23 px inside the shell, the bag 9 px), at rest and floating */
@media (min-width: 1024px) {
  .nav { padding-left: calc(var(--gutter) - 23px); padding-right: calc(var(--gutter) - 9px); }
  .nav__shell, html.nav-float .nav__shell, html.nav-float.nav-compact .nav__shell { max-width: none !important; }
}
/* phone centring (18 Oct): the hero's Pre-order pill spans the column on a phone (label left, price right, as in
   the menu), so it sits evenly inset under the left-set title instead of stopping a third of the way across */
@media (max-width: 760px) {
  .hero__buy { width: 100%; justify-content: space-between; }
}
/* tablets (761-1023 px): the floating bar keeps the phone's 10 px from the screen's edge, and its inside padding
   takes the rest of the gutter, so the logo starts on the titles' edge and the bag ends on the content's right edge */
@media (min-width: 761px) and (max-width: 1023px) {
  .nav { padding-left: 10px; padding-right: 10px; }
  .nav__shell, html.nav-float .nav__shell, html.nav-float.nav-compact .nav__shell { max-width: none !important; padding-left: calc(var(--gutter) - 11px) !important; padding-right: calc(var(--gutter) - 11px) !important; }
}
/* ===================================================================== end of design pass: chrome */