/* The punch mockups, shared: faces, reset, the phone, the header and footer skeletons, the version switch.
   Each direction (skylt.css, djup.css) sets the colours and the voice on top of this. */
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/home/fonts/FamiljenGrotesk.woff2") format("woff2"); }
@font-face { font-family: "Castoro"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/Castoro%5Bwght%5D.woff2") format("woff2"); }
@font-face { font-family: "Castoro"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/Castoro-Italic%5Bwght%5D.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/AtkinsonHyperlegibleNext%5Bwght%5D.woff2") format("woff2"); }

:root {
  --deep: #24384C; --deep2: #1C2D3E; --deep3: #2C4359; --havre: #ECDFD0; --havre2: #C4B8AC;
  --white: #FFFFFF; --lugn: #4E7356; --prod: #4A6A8A; --flode: #B8909E; --sky: #ACC8E3; --ljung: #DCC0C8;
  --onflode: #16222E; --slab: #1C2733;
  --gut: clamp(20px, 4.2vw, 64px); --max: 1360px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fam: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --atk: "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
  --cas: "Castoro", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 18px/1.55 var(--atk); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.d { font-family: var(--fam); font-weight: 600; letter-spacing: -.034em; line-height: .93; }
.tn { font-variant-numeric: tabular-nums; }
.it { font-family: var(--cas); font-style: italic; font-weight: 400; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
sup.fn { font-size: .62em; line-height: 0; margin-left: .1em; }
sup.fn a { text-decoration: none; }

/* buttons: the shape is shared, the colours are each direction's */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; padding: 0 28px; font: 600 17px/1 var(--atk);
  text-decoration: none; border: 2px solid transparent; border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn.sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* header */
.hd { position: sticky; top: 0; z-index: 50; }
.hd .row { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 500 25px/1 var(--atk); letter-spacing: -.012em; }
.logo svg { width: 27px; height: 27px; }
.hd nav { display: flex; gap: 24px; margin-left: 14px; }
.hd nav a { text-decoration: none; font-size: 16px; font-weight: 500; padding: 8px 0 6px; border-bottom: 2.5px solid transparent; }
.hd nav a[aria-current] { border-bottom-color: currentColor; }
.hd nav .nav-dl { display: none; }
.hd .sp { flex: 1; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 10px; cursor: pointer; }
.burger svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
@media (max-width: 1000px) {
  .hd nav { display: none; }
  .burger { display: block; margin-right: -10px; }
  .hd .btn.sm { display: none; }
  .hd.open nav { display: flex; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gut) 20px; }
  .hd.open nav a { padding: 14px 0; font-size: 20px; border-bottom: 0; }
  .hd.open nav .nav-dl { display: inline-flex; align-self: flex-start; margin-top: 12px; padding: 0 24px; min-height: 52px; align-items: center; border-radius: 6px; font-weight: 600; background: var(--havre); color: var(--deep); }
}

/* the wave under a footer: the mark's own surface, one period over the width (VISUAL-SYSTEM.md §7.3) */
.wave { line-height: 0; margin-bottom: -1px; position: relative; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wave svg { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 150; }

/* footer skeleton */
.ft { padding: 24px 0 40px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-bottom: 56px; }
.ft h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1; letter-spacing: -.03em; max-width: 15em; }
.mail { display: flex; gap: 10px; margin-top: 26px; max-width: 560px; }
.mail input { flex: 1; min-width: 0; height: 56px; padding: 0 18px; font-size: 16px; border-radius: 6px; border: 2px solid transparent; outline: none; }
.consent { font-size: 13px; line-height: 1.5; margin-top: 14px; max-width: 560px; }
.sig { font-size: clamp(26px, 2.6vw, 34px); white-space: nowrap; }
.ft .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 18px 32px; padding-top: 28px; }
.ft .cols div { display: flex; flex-direction: column; gap: 10px; }
.ft .cols a { text-decoration: none; font-size: 15px; }
.ft .cols a:hover { text-decoration: underline; }
.ft address { font-style: normal; font-size: 13px; line-height: 1.6; }
.ft .legal { font-size: 12.5px; margin-top: 36px; }
@media (max-width: 860px) {
  .ft-top { grid-template-columns: 1fr; align-items: start; }
  .mail { flex-direction: column; }
  .mail .btn { width: 100%; }
  .mail input { flex: none; height: 56px; }   /* in a column, flex 1 had collapsed the field to its text */
  .ft .cols { grid-template-columns: 1fr 1fr; }
  .ft address { grid-column: 1 / -1; }
}

/* the phone, drawn by /how-it-works/phone.js (the films' own glyphs and order) */
.ph { width: var(--pw, 300px); background: var(--slab); border-radius: calc(var(--pw, 300px) * .147); padding: calc(var(--pw, 300px) * .027);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 90px -40px rgba(8, 16, 24, .6), 0 14px 28px -14px rgba(8, 16, 24, .45); }
.scr { position: relative; container-type: inline-size; aspect-ratio: 532 / 1152; border-radius: calc(var(--pw, 300px) * .12); overflow: hidden; background: var(--scr, #F6F5F3); color: #24302E; transition: background-color .6s; }
.sb { position: absolute; left: 8.3cqw; right: 6.5cqw; top: 4.2cqw; display: flex; justify-content: space-between; align-items: center; font-size: 4.9cqw; font-weight: 500; font-variant-numeric: tabular-nums; }
.sb .sbi { width: 12cqw; fill: currentColor; }
.tray { position: absolute; left: 4.5cqw; width: 91cqw; top: 183.5cqw; height: 24.8cqw; border-radius: 7.5cqw; background: rgba(36, 48, 46, .07); }
.app { position: absolute; left: calc(8.27cqw + var(--c) * 22.56cqw); top: calc(21.05cqw + var(--r) * 28.95cqw); width: 18.05cqw; text-align: center; --col: var(--lugn); transition: opacity .4s ease-out; }
.app.dock { top: 186.9cqw; }
.app[data-l="b"] { --col: var(--prod); } .app[data-l="r"] { --col: var(--flode); }
.ic { position: relative; width: 18.05cqw; aspect-ratio: 1; border-radius: 4.14cqw; background: var(--col); display: grid; place-items: center;
  transition: background-color .4s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.ic svg { width: 9.8cqw; height: 9.8cqw; fill: none; stroke: #F6F5F3; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: opacity .4s; }
.app span { display: block; font-size: 3.76cqw; color: rgba(36, 48, 46, .8); margin: 1.2cqw -4cqw 0; white-space: nowrap; transition: opacity .4s; }
.ic .x { position: absolute; right: -2.2cqw; top: -2.2cqw; width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: var(--col); box-shadow: 0 0 0 .8cqw #FFFFFF; opacity: 0; transition: opacity .4s; }
.ic .x::after { content: ""; position: absolute; left: 24%; right: 24%; top: calc(50% - .45cqw); height: .9cqw; border-radius: 1cqw; background: #FFFFFF; }
.app.closed .ic { background: color-mix(in srgb, var(--col) 38%, var(--scr, #F6F5F3)); }
.app.closed .ic svg { opacity: .7; } .app.closed span { opacity: .45; } .app.closed .x { opacity: 1; }
.ph.focus .app { opacity: .28; } .ph.focus .app.me { opacity: 1; }
.quiet, .wid { position: absolute; left: 6cqw; right: 6cqw; top: 22cqw; }
.qt { font-family: var(--cas); font-size: 8.6cqw; line-height: 1; display: flex; align-items: center; gap: 2.4cqw; }
.dots { display: inline-flex; gap: 1.2cqw; } .dots i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; display: block; }
.dots .g { background: var(--lugn); } .dots .b { background: var(--prod); } .dots .r { background: var(--flode); }
.quiet ul, .wid ul { list-style: none; padding: 0; margin: 8cqw 0 0; font-size: 4.8cqw; font-weight: 500; }
.quiet li { padding: 3.2cqw 0; }
.scr.night { background: var(--deep); color: #FCFCFC; }
.scr.night .qt { color: var(--havre); }
.scr.night .dots { background: #F6F5F3; padding: 1.5cqw 2cqw; border-radius: 99px; }
.wid { top: 18cqw; bottom: 46cqw; background: #FFFFFF; border-radius: 8cqw; padding: 7cqw 6.5cqw; box-shadow: inset 0 0 0 .35cqw rgba(36, 48, 46, .10); left: 4.5cqw; right: 4.5cqw; }
.wid .until { font-size: 4.4cqw; color: #596D62; margin-top: 2cqw; }
.wid ul { margin-top: 5cqw; } .wid li { padding: 3cqw 0; border-top: .3cqw solid rgba(36, 48, 46, .08); }
.shut { position: absolute; left: 7cqw; right: 7cqw; top: 54cqw; text-align: center; color: var(--havre); }
.scr.night .dots.big { background: none; padding: 0; }
.dots.big { gap: 3cqw; } .dots.big i { position: relative; width: 6.4cqw; height: 6.4cqw; }
.dots.big .x::after { content: ""; position: absolute; left: 22%; right: 22%; top: calc(50% - .5cqw); height: 1cqw; border-radius: 1cqw; background: #FFFFFF; }
.shut .w { font-size: 7.4cqw; font-weight: 500; margin-top: 5cqw; }
.shut .l { font-size: 4.5cqw; line-height: 1.45; margin-top: 3cqw; opacity: .85; }
.scr .ok { position: absolute; left: 6cqw; right: 6cqw; bottom: 8.5cqw; height: 13cqw; border-radius: 99px; background: var(--havre); color: var(--deep); font-size: 4.3cqw; font-weight: 500; display: grid; place-items: center; }

/* the layer dots of the cards: filled is open, the bar across is closed */
.ld { display: inline-flex; gap: 6px; vertical-align: middle; }
.ld i { position: relative; width: 16px; height: 16px; border-radius: 50%; display: block; background: currentColor; }
.ld i.x::after { content: ""; position: absolute; left: 22%; right: 22%; top: calc(50% - 1.25px); height: 2.5px; border-radius: 2px; background: var(--ldx, #fff); }

/* the bamboo cards: transparent corners, so the shadow follows the card */
.hand { position: relative; aspect-ratio: 2.05; }
.hand img { position: absolute; width: 44%; }
.hand img:nth-child(1) { left: 0; top: 15%; transform: rotate(-8deg); }
.hand img:nth-child(2) { left: 28%; top: 3%; transform: rotate(-1deg); z-index: 2; }
.hand img:nth-child(3) { left: 56%; top: 17%; transform: rotate(7deg); z-index: 3; }
.card-img { border-radius: 3.14% / 4.98%; box-shadow: 0 24px 36px -14px rgba(6, 12, 20, .42), 0 6px 10px -4px rgba(6, 12, 20, .28); }   /* the card's own corner, measured on the pictures (43 px of 1370 x 864); a box-shadow, because a filter flickered inside the turning card */

/* the version switch, for the review only */
.vs { position: fixed; right: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 2px; padding: 4px; background: #101B25; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font: 600 12px/1 var(--atk); }
.vs a { color: #ECDFD0; text-decoration: none; padding: 9px 10px; border-radius: 7px; opacity: .72; }
.vs a:hover { opacity: 1; }
.vs a.on { background: #ECDFD0; color: #101B25; opacity: 1; }
.vs i { width: 1px; height: 18px; background: #34485A; margin: 0 4px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* 9 October: 600 for titles, as in the app; 700 only for the very large lines */
h1.d, .lg-intro h2, .lg-claims h2, .lg-close p, .once p, .dj-spec .once, .big-num, .day .steps .when, .dj-clock .time, .yn .big,
.manual li::before, .dj-manual li::before, .lg-manual li::before { font-weight: 700; }

/* the forms' trap field: off-screen for people, there for bots (as in web/assets/base.css) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }   /* a form's own display rule had kept it visible after sending (13 October) */

/* C · Lagom. Jérémie's picks from A and B, 8 October 2026: two grounds only, sand F1EBE5 for paper and the deep blue,
   with the three layer colours at full strength. Havre stays the warm ink on the deep blue and leaves the grounds
   (Havre on sand is 1.11:1, two creams side by side read as a mistake). Bamboo reads on both grounds. */
body.lagom { --paper: #F1EBE5; --ink: var(--deep); --soft: #4F5E6D; --hair: rgba(36, 56, 76, .18); --scr: #FFFFFF; background: var(--paper); color: var(--ink); }
.lagom .lede { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.45; max-width: 29em; }
.lagom .fine { font-size: 15px; color: var(--soft); margin-top: 14px; }
.lagom .link { font-weight: 600; text-decoration-thickness: 2px; }
.lagom .on-deep { background: var(--deep); color: var(--havre); }
.lagom .on-deep .fine { color: var(--havre2); }

/* header: the deep band, as on today's site */
.lagom .hd { background: var(--deep); color: var(--havre); border-bottom: 1.5px solid rgba(236, 223, 208, .16); }
.lagom .logo { color: var(--havre); --lockup: var(--havre); }
.lagom .hd.open nav { background: var(--deep); }

/* buttons: on sand deep, on the deep blue Havre */
.lagom .btn { background: var(--deep); color: var(--havre); }
.lagom .btn:hover { background: #172636; }
.lagom .btn.ghost { background: transparent; color: var(--deep); border-color: var(--deep); }
.lagom .btn.ghost:hover { background: var(--deep); color: var(--havre); }
.lagom .btn.light, .lagom .hd .btn { background: var(--havre); color: var(--deep); }
.lagom .btn.light:hover, .lagom .hd .btn:hover { background: #FFFFFF; }
.lagom .btn.line-light { background: transparent; color: var(--havre); border-color: var(--havre); }
.lagom .btn.line-light:hover { background: var(--havre); color: var(--deep); }

/* ---------- Startsidan ---------- */
.dj-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(calc(100svh - 74px), 860px); padding: 48px 0 72px; }
.dj-hero .grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 32px; align-items: center; width: 100%; }
.dj-hero h1 { font-size: clamp(74px, 11.4vw, 176px); line-height: .88; }
.dj-hero .lede { margin-top: 32px; max-width: 26em; }
.dj-hero .ctas { margin-top: 36px; }
.bigmark { justify-self: end; width: min(46vw, 640px); aspect-ratio: 1; margin-right: calc(-1 * var(--gut)); }   /* to the wrap's edge, never past the window */
.bigmark svg { width: 100%; height: 100%; overflow: visible; }

.lg-intro { padding-top: clamp(72px, 8vw, 128px); padding-bottom: clamp(40px, 4vw, 64px); }
.lg-intro h2 { font-size: clamp(52px, 8vw, 128px); max-width: 9em; }
.lg-intro .lede { margin-top: 28px; }

.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tri .col { display: flex; flex-direction: column; min-height: clamp(520px, 44vw, 640px); padding: clamp(30px, 3.2vw, 50px) clamp(22px, 2.6vw, 44px) clamp(28px, 3vw, 44px); color: #FFFFFF; }
.tri .lugn { background: var(--lugn); } .tri .prod { background: var(--prod); } .tri .flode { background: var(--flode); color: var(--onflode); }
.tri .k { font-size: 15px; font-weight: 600; opacity: .9; }
.tri h3 { font-size: clamp(56px, 6.2vw, 96px); margin-top: 12px; }
.tri .tag { font: 600 clamp(20px, 1.7vw, 25px)/1.15 var(--fam); letter-spacing: -.015em; margin-top: 16px; max-width: 14em; }
.tri .pics { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.4vw, 20px); margin-top: auto; padding-top: 40px; }
.tri .pics svg { width: clamp(34px, 3.2vw, 46px); height: clamp(34px, 3.2vw, 46px); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tri .apps { font-size: 16px; line-height: 1.5; padding-top: 22px; max-width: 24em; min-height: calc(3em + 22px); }
.plate { display: inline-block; align-self: flex-start; font: 600 clamp(22px, 2vw, 30px)/1 var(--fam); letter-spacing: -.02em; border: 2.5px solid currentColor; border-radius: 6px; padding: 10px 15px 9px; margin-top: 20px; font-variant-numeric: tabular-nums; }
.after-tri { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 18px; font-size: 15px; color: var(--soft); }

.lg-claims { padding-top: clamp(72px, 8vw, 124px); padding-bottom: clamp(56px, 6vw, 96px); }
.lg-claims .g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
.lg-claims .f { border-top: 2.5px solid var(--deep); padding: clamp(16px, 1.6vw, 24px) 0 clamp(36px, 3.6vw, 56px); }
.lg-claims .f .d { font-size: clamp(48px, 6.2vw, 96px); }
.lg-claims .f p:last-child { font-size: clamp(18px, 1.4vw, 21px); margin-top: 18px; max-width: 24em; }

.lg-cards { padding: clamp(80px, 9vw, 140px) 0; overflow: hidden; }
.lg-cards .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.lg-cards h2 { font-size: clamp(46px, 5.4vw, 84px); }
.lg-cards .txt { font-size: clamp(18px, 1.4vw, 21px); margin-top: 26px; max-width: 26em; }
.lg-cards .ctas { margin-top: 34px; }

.lg-research { padding-top: clamp(72px, 8vw, 124px); padding-bottom: clamp(88px, 9vw, 150px); }
.lg-research .top { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-top: 2.5px solid var(--ink); padding-top: 22px; }
.lg-research h2 { font-size: clamp(32px, 3.2vw, 48px); }
.lg-research .top p { font-size: 17px; color: var(--soft); max-width: 26em; }
.lg-research .grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px 64px; margin-top: 52px; align-items: start; }
.big-num { font-size: clamp(110px, 15vw, 236px); line-height: .8; letter-spacing: -.05em; }
.big-num small { display: block; font-size: .24em; letter-spacing: -.02em; line-height: 1.05; margin-top: .4em; max-width: 9em; }
.quote { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.5; }
.src { font-size: 14px; color: var(--soft); margin-top: 16px; line-height: 1.5; }
.lg-research .ctas { margin-top: 30px; }

/* footer: the wave from the sand into the deep blue */
.lagom .wave { background: var(--paper); } .lagom .wave path { fill: var(--deep); }
.lagom .ft { background: var(--deep); color: var(--havre); }
.lagom .mail input { background: var(--paper); color: var(--deep); }
.lagom .mail input::placeholder { color: var(--deep); opacity: 1; }
.lagom .mail .btn { background: transparent; color: var(--havre); border-color: var(--havre); }
.lagom .mail .btn:hover { background: var(--havre); color: var(--deep); }
.lagom .consent, .lagom .ft address, .lagom .ft .legal { color: var(--havre2); }
.lagom .ft .cols { border-top: 1.5px solid rgba(236, 223, 208, .22); }

/* ---------- Appen ---------- */
.ab-hero { padding: clamp(56px, 7vw, 112px) 0 clamp(56px, 6vw, 96px); }
.ab-hero h1 { font-size: clamp(56px, 9.4vw, 140px); }
.ab-hero h1 .p { display: inline-block; width: .2em; height: .2em; border-radius: 50%; margin-left: .04em; background: var(--c); }
.ab-hero .lede { margin-top: 30px; }
.ab-hero .down { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; font: 600 20px/1 var(--fam); text-decoration: none; letter-spacing: -.01em; }
.ab-hero .down svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.lg-three { padding-top: clamp(72px, 8vw, 124px); padding-bottom: clamp(72px, 8vw, 124px); }
.lg-three h2 { font-size: clamp(48px, 6vw, 96px); }
.lg-three .sub { font-size: 19px; margin-top: 16px; max-width: 32em; }
.lg-three .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.lg-three .cols > div { border-top: 2.5px solid var(--deep); padding-top: 22px; }
.lg-three .orb { display: block; width: 84px; height: 84px; border-radius: 50%; background: var(--c); }
.lg-three h3 { font-size: clamp(44px, 4.4vw, 68px); margin-top: 24px; }
.lg-three .tag { font: 600 22px/1.12 var(--fam); letter-spacing: -.015em; margin-top: 12px; }
.lg-three .cols p.b { font-size: 16px; margin-top: 14px; }
.lg-three .plate { font-size: 22px; }

.day { position: relative; background: var(--bgc, var(--deep)); color: var(--fgc, var(--havre)); transition: background-color .9s var(--ease), color .9s var(--ease); }
.day .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.day .stage { grid-column: 2; grid-row: 1; position: sticky; top: 74px; align-self: start; height: calc(100svh - 74px); display: grid; place-items: center; }
.day .steps { grid-column: 1; grid-row: 1; padding: 4svh 0 12svh; }
.day .steps li { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; opacity: .22; transition: opacity .5s; }
.day .steps li.on { opacity: 1; }
.day .steps .when { font-size: clamp(96px, 12.5vw, 196px); line-height: .82; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.day h3 { font: 600 clamp(32px, 3.4vw, 52px)/1 var(--fam); letter-spacing: -.028em; margin-top: 22px; }
.day .steps p { font-size: clamp(18px, 1.4vw, 21px); max-width: 25em; margin-top: 16px; }
.pw { position: relative; --pw: clamp(230px, 22vw, 310px); perspective: 1600px; }
.pw .flipper { position: relative; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.pw.down .flipper { transform: rotateY(180deg) rotateZ(-4deg); }
.pw .front { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pw .back { position: absolute; inset: 0; border-radius: calc(var(--pw) * .147); transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(150deg, #33465A 0%, #1C2733 46%, #141D27 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 50px 90px -40px rgba(8, 16, 24, .6); }
.day-card { position: absolute; width: 92%; left: 52%; bottom: -4%; opacity: 0; transform: translate(40%, 30%) rotate(20deg); transition: transform .9s var(--ease), opacity .6s; pointer-events: none; }
.pw.card .day-card { opacity: 1; transform: translate(0, 0) rotate(-10deg); }

.lg-akort { padding-top: clamp(72px, 8vw, 124px); padding-bottom: clamp(56px, 6vw, 96px); }
.lg-akort .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.lg-akort h2 { font-size: clamp(44px, 5.2vw, 80px); }
.lg-akort .txt p { font-size: 18px; margin-top: 18px; max-width: 32em; }
.lg-akort .ctas { margin-top: 32px; }

.notes { padding-top: 8px; padding-bottom: 80px; }
.notes h2 { font: 600 22px/1 var(--fam); letter-spacing: -.01em; margin-bottom: 20px; border-top: 2.5px solid var(--ink); padding-top: 22px; }
.notes ol { columns: 2; column-gap: 48px; counter-reset: n; }
.notes li { position: relative; break-inside: avoid; font-size: 13.5px; line-height: 1.5; color: var(--soft); margin-bottom: 12px; padding-left: 24px; }
.notes li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; font-weight: 700; color: var(--ink); }

/* ---------- Köp kort ---------- */
.kh { padding: clamp(44px, 5vw, 80px) 0 clamp(36px, 4vw, 64px); }
.kh .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.kh h1 { font-size: clamp(50px, 7vw, 110px); }
.kh .lede { margin-top: 26px; }
.kh .facts-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.kh .facts-row span { font: 600 17px/1 var(--fam); letter-spacing: -.01em; border: 2px solid var(--ink); border-radius: 5px; padding: 9px 12px 8px; }
.kh .note { margin-top: 30px; font-size: 16px; color: var(--soft); max-width: 30em; }
.kh .note .stamp { margin-right: 10px; color: var(--ink); }
.panel { background: var(--deep); color: var(--havre); border-radius: 6px; padding: clamp(40px, 5vw, 76px) clamp(28px, 4vw, 64px) clamp(28px, 3vw, 40px); }
.panel .flip { transform: rotate(-6deg); }
.hint { font-size: 14px; color: var(--havre2); margin-top: 28px; text-align: center; }
.stamp { display: inline-block; font: 600 17px/1 var(--fam); letter-spacing: -.005em; border: 2.5px solid currentColor; border-radius: 4px; padding: 8px 11px 7px; transform: rotate(-4deg); }

.flip { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.flip .face { display: block; width: 100%; transition: transform .26s cubic-bezier(.4, 0, .6, 1); }
.flip.turning .face { transform: scaleX(0); }
.flip:focus-visible { outline: 3px solid currentColor; outline-offset: 8px; border-radius: 14px; }

.pl { padding-top: clamp(36px, 4vw, 64px); padding-bottom: clamp(72px, 8vw, 120px); }
.pl-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: 16px; border-bottom: 2.5px solid var(--ink); }
.pl-head h2 { font-size: clamp(44px, 5.4vw, 84px); }
.pl-head p { font-size: 16px; color: var(--soft); max-width: 22em; text-align: right; }
.pl-row { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto minmax(0, 340px); gap: 18px 40px; align-items: center; padding: 30px 0; border-bottom: 1.5px solid var(--hair); }
.pl-row .pic { position: relative; }
.pl-row .pic.trio { height: 150px; }
.pl-row .pic.trio img { position: absolute; width: 74%; }
.pl-row .pic.trio img:nth-child(1) { left: 0; top: 12%; transform: rotate(-8deg); }
.pl-row .pic.trio img:nth-child(2) { left: 13%; top: 2%; z-index: 2; }
.pl-row .pic.trio img:nth-child(3) { left: 26%; top: 14%; transform: rotate(7deg); z-index: 3; }
.pl-row .pic .turn { display: block; font-size: 13px; color: var(--soft); margin-top: 10px; text-align: center; }
.pl-row h3 { font-size: clamp(36px, 3.3vw, 52px); }
.pl-row .what { font-size: 17px; margin-top: 10px; max-width: 24em; }
.pl-row .legend { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--soft); margin-top: 12px; }
.pl-row .ld { color: var(--ink); --ldx: var(--paper); }
.pl-row .price { font-size: clamp(40px, 3.8vw, 58px); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-row .price small { display: block; font: 600 15px/1.2 var(--atk); letter-spacing: 0; margin-top: 10px; }
.pl-row .buy { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mini { display: flex; gap: 8px; width: 100%; }
.mini input { flex: 1; min-width: 0; height: 48px; border: 2px solid var(--ink); border-radius: 6px; padding: 0 14px; font-size: 16px; background: #FFFFFF; color: var(--ink); outline: none; }
.mini input::placeholder { color: var(--ink); opacity: 1; }
.mini .btn { min-height: 48px; padding: 0 16px; font-size: 15px; }
.pl-foot { font-size: 14px; color: var(--soft); margin-top: 16px; }

.lg-manual { padding: clamp(72px, 8vw, 124px) 0; }
.lg-manual h2 { font-size: clamp(48px, 6vw, 96px); }
.lg-manual .sub { font-size: 18px; margin-top: 14px; color: var(--havre2); }
.lg-manual ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; margin-top: 52px; counter-reset: s; }
.lg-manual li { border-top: 2.5px solid var(--havre); padding-top: 18px; }
.lg-manual li::before { counter-increment: s; content: counter(s); display: block; font: 600 clamp(84px, 8vw, 128px)/.82 var(--fam); letter-spacing: -.05em; margin-bottom: 20px; }
.lg-manual h3 { font: 600 clamp(24px, 2.1vw, 30px)/1.05 var(--fam); letter-spacing: -.02em; }
.lg-manual li p { margin-top: 10px; font-size: 17px; color: var(--havre2); }

.once { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(56px, 6vw, 96px); }
.once p { font-size: clamp(48px, 7vw, 112px); max-width: 12em; }
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding-bottom: clamp(72px, 8vw, 120px); }
.spec section { border-top: 2.5px solid var(--ink); padding-top: 18px; }
.spec h3 { font: 600 28px/1.05 var(--fam); letter-spacing: -.02em; }
.spec p { font-size: 16px; margin-top: 12px; color: var(--soft); }
.tbc { color: #8B8F94; font-style: italic; }

/* ---------- phone width ---------- */
@media (max-width: 900px) {
  .dj-hero { min-height: 0; padding-top: 36px; }
  .dj-hero .grid, .lg-cards .grid, .lg-research .grid, .lg-akort .grid, .kh .grid { grid-template-columns: 1fr; }
  .bigmark { order: -1; justify-self: center; width: 78vw; margin: 0 0 8px; }
  .tri { grid-template-columns: 1fr; }
  .tri .col { min-height: 0; }
  .tri .pics { margin-top: 0; padding-top: 28px; }
  .after-tri { flex-direction: column; }
  .lg-claims .g { grid-template-columns: 1fr; }
  .lg-research .top { flex-direction: column; align-items: start; }
  .lg-three .cols, .lg-manual ol, .spec { grid-template-columns: 1fr; }
  .day .grid { grid-template-columns: 1fr; gap: 0; }
  .day .stage { grid-column: 1; grid-row: 1; height: 50svh; z-index: 2; background: var(--bgc, var(--deep)); transition: background-color .9s var(--ease); padding-top: 10px; }
  .day .steps { grid-column: 1; grid-row: 2; padding-top: 0; }
  .day .steps li { min-height: 46svh; justify-content: center; padding: 0; }
  .pw { --pw: min(36vw, 170px); }
  .day .steps .when { font-size: 84px; }
  .pl-head { flex-direction: column; align-items: start; } .pl-head p { text-align: left; }
  .pl-row { grid-template-columns: 1fr auto; }
  .pl-row .pic { grid-column: 1 / -1; max-width: 320px; }
  .pl-row .buy { grid-column: 1 / -1; }
  .pl-row .price { align-self: start; }
  .notes ol { columns: 1; }
}
/* the coloured full stops on the deep blue: a Havre ring, so Lugn and Produktiv read (2.2:1 without it) */
.ab-hero.on-deep h1 .p { box-shadow: 0 0 0 .022em var(--havre); margin-left: .06em; }
/* 9 October: the claims under a title that states the company's stance; a closing line before the footer */
.lg-claims h2 { font-size: clamp(48px, 6.6vw, 104px); margin-bottom: clamp(32px, 3.6vw, 56px); }
.lg-close { padding-top: clamp(24px, 3vw, 48px); padding-bottom: clamp(72px, 8vw, 120px); }
.lg-close p { font-size: clamp(44px, 6vw, 96px); max-width: 13em; }
/* 10 October: the layers' line centred; the three layers about square; titles balanced so no word stands alone */
.lagom .d { text-wrap: balance; }
.lg-intro { text-align: center; }
.lg-intro h2 { margin-left: auto; margin-right: auto; }
.lg-intro .lede { margin-left: auto; margin-right: auto; }
.tri .col { min-height: clamp(400px, 33vw, 500px); }
.lg-close { text-align: center; padding-top: clamp(48px, 6vw, 96px); }
.lg-close p { margin: 0 auto; max-width: 14em; font-size: clamp(40px, 5.4vw, 84px); }
/* 10 October, phone width: the headline on the first screen, the starter pack clear of its title */
@media (max-width: 900px) {
  .bigmark { width: 52vw; margin: 0 0 4px; }
  .dj-hero h1 { font-size: clamp(60px, 17vw, 84px); }
  .pl-row .pic.trio { height: 196px; }
  .lg-close p { font-size: clamp(34px, 9vw, 48px); }
}
@media (max-width: 900px) { .lg-three .orb { width: 48px; height: 48px; } .lg-three h3 { margin-top: 16px; } }
/* ---------- the plain pages: FAQ, policies, versions (10 October) ---------- */
.doc { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(56px, 6vw, 96px); }
.doc:not(.faqgrid) > * { max-width: 820px; }   /* the reading column on the header's left edge */
.doc h1 { font-size: clamp(44px, 6.4vw, 88px); }
.doc .draft { display: inline-block; margin-top: 20px; font: 600 14px/1 var(--atk); border: 2px solid var(--deep); border-radius: 5px; padding: 7px 10px 6px; }
.doc h2 { font: 600 clamp(26px, 2.6vw, 34px)/1.1 var(--fam); letter-spacing: -.02em; margin: 52px 0 0; padding-top: 18px; border-top: 2.5px solid var(--deep); }
.doc h3 { font: 600 21px/1.2 var(--fam); letter-spacing: -.01em; margin: 30px 0 0; }
.doc p, .doc li { font-size: 18px; line-height: 1.6; max-width: 38em; }
.doc p { margin: 14px 0 0; }
.doc ul, .doc ol { margin: 14px 0 0; padding-left: 1.3em; }
.doc ul { list-style: disc; } .doc ol { list-style: decimal; }
.doc li + li { margin-top: 6px; }
.doc table { border-collapse: collapse; margin: 18px 0 0; font-size: 16px; width: 100%; }
.doc th, .doc td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1.5px solid var(--hair); vertical-align: top; }
.doc th { font: 600 15px/1.3 var(--atk); }
.doc details { border-bottom: 1.5px solid var(--hair); }
.doc h2 + details { margin-top: 6px; }
.doc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 600 20px/1.25 var(--fam); letter-spacing: -.01em; }
.doc summary h3 { font: inherit; letter-spacing: inherit; margin: 0; }   /* the question is a heading for machines and screen readers, and looks as before */
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: "+"; font: 400 26px/1 var(--atk); }
.doc details[open] summary::after { content: "–"; }
.doc details > :last-child { margin-bottom: 20px; }
.doc .todo { color: #8B8F94; font-style: italic; }
.doc code { font-size: .9em; background: rgba(36, 56, 76, .07); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 900px) { .doc p, .doc li { font-size: 17px; } .doc table { font-size: 14.5px; } }
/* ---------- the day's phone, 10 October: the app's own screens in the new look, the back of a phone ---------- */
.a-scr { background: #F1EBE5; color: #24384C; font-family: var(--atk); }
.a-scr.night { background: #24384C; color: #ECDFD0; }
.a-lock { position: absolute; left: 6.4cqw; top: 18.5cqw; display: flex; align-items: center; gap: 2.2cqw; font: 500 6cqw/1 var(--atk); color: #24384C; }   /* the app's lockup on Sand is deep blue, 24 pt (10 October) */
.a-scr.night .a-lock { color: #ECDFD0; }
.a-lock svg { width: 6.7cqw; height: 6.7cqw; }
.a-title { position: absolute; left: 6.4cqw; top: 30cqw; display: flex; align-items: center; gap: 3.2cqw; font: 600 8.6cqw/1 var(--fam); letter-spacing: -.02em; }
.a-dots { display: inline-flex; gap: 1.6cqw; }
.a-dots i { position: relative; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; display: block; box-shadow: 0 0 0 .5cqw #ECDFD0; }
.a-dots .g { background: var(--lugn); } .a-dots .b { background: var(--prod); } .a-dots .r { background: #B8909E; }
.a-dots i.x::after { content: ""; position: absolute; left: 15%; right: 15%; top: calc(50% - .35cqw); height: .7cqw; border-radius: 1cqw; background: #FFF; }
.a-bricks { position: absolute; left: 5.1cqw; right: 5.1cqw; top: 44cqw; display: flex; flex-direction: column; gap: 2.6cqw; }
.a-brick { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.2cqw 3cqw; padding: 5.4cqw 5.8cqw; min-height: 30cqw; border-radius: 1.9cqw; color: #FFF; }
.a-brick.lugn { background: var(--lugn); } .a-brick.prod { background: var(--prod); } .a-brick.flode { background: #8C6571; }
.a-brick b { font: 600 7.4cqw/1 var(--fam); letter-spacing: -.02em; }
.a-brick .st { font: 600 4.3cqw/1.2 var(--atk); text-align: right; }
.a-brick .ln { grid-column: 1 / -1; font-size: 3.85cqw; line-height: 1.4; opacity: .85; padding-right: 5cqw; }
.a-brick i { position: absolute; right: 5cqw; bottom: 5cqw; font-style: normal; font-size: 6cqw; line-height: 1; }
.a-scr.night .a-brick.closed { color: #ECDFD0; } .a-scr.night .a-brick.closed.prod { background: #2F475F; } .a-scr.night .a-brick.closed.flode { background: #474759; }
.a-cta { position: absolute; left: 6.4cqw; right: 6.4cqw; bottom: 16cqw; height: 13.5cqw; border-radius: 2.6cqw; display: grid; place-items: center; font: 600 4.5cqw/1 var(--atk); background: #24384C; color: #ECDFD0; transition: transform .15s, background-color .15s; }
.a-scr.night .a-cta { background: #ECDFD0; color: #24384C; }
.a-cta.pressed { transform: scale(.96); background: #172636; }
.a-note { position: absolute; left: 6cqw; right: 6cqw; bottom: 7cqw; text-align: center; font-size: 3.6cqw; opacity: .8; }
.a-x { position: absolute; right: 6cqw; top: 15cqw; width: 9cqw; height: 9cqw; border-radius: 50%; border: .35cqw solid rgba(36, 56, 76, .2); display: grid; place-items: center; font-size: 6cqw; line-height: 1; }
.a-h { position: absolute; left: 6.4cqw; right: 6.4cqw; top: 28cqw; font: 600 8cqw/1.05 var(--fam); letter-spacing: -.02em; }
.a-p { position: relative; margin: 0; padding: 0 6.4cqw; font-size: 4.3cqw; line-height: 1.45; }
.a-h + .a-p { margin-top: 50cqw; }
.a-p + .a-p { margin-top: 3cqw; opacity: .85; }
.a-box { margin: 6cqw 6.4cqw 0; background: #FCF9F6; border-radius: 1.9cqw; padding: 5cqw; }
.a-box b { display: block; font: 600 4.6cqw/1.35 var(--atk); }
.a-type { display: block; margin-top: 4cqw; min-height: 6cqw; border-bottom: .35cqw solid rgba(36, 56, 76, .25); font-size: 4.6cqw; padding-bottom: 1.5cqw; }
.a-caret { display: inline-block; width: .5cqw; height: 5cqw; background: #24384C; vertical-align: -.8cqw; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* the back of a phone: the slab, a soft edge, one round camera in the middle at the top (no recognisable model) */
.pw .back { background: radial-gradient(120% 60% at 30% 0%, #3A4E63 0%, #1C2733 55%, #141D27 100%); }
.pw .back::before { content: ""; position: absolute; left: 50%; top: 7%; width: 22%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0B1118 0 30%, #2C3D50 31% 38%, #1A2531 39% 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .35); }
.pw .back::after { content: ""; position: absolute; inset: 2.6%; border-radius: calc(var(--pw) * .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.scr .ok { border-radius: 2.6cqw; }
.lagom p { text-wrap: pretty; }
/* ---------- the live site's pages in C's look, for the preview (10 October): research, guides, contact, privacy ----------
   Their own stylesheets stay; these lines give them C's grounds, faces and ink. Tokens set on the body win over the
   :root values (and the dark ones) of those stylesheets. */
body.reskin { --bg: #F1EBE5; --card: #FCF9F6; --line: rgba(36, 56, 76, .18); --ink: #24384C; --prose: #24384C; --soft: #4F5E6D;
  --moss: #24384C; --mark: #486042; --lockup: #24384C; --btn: #E6DED6; --accent: #24384C; background: #F1EBE5; color: #24384C; }
.reskin main { color: var(--ink); }
.reskin main h1, .reskin main h2, .reskin main h3 { font-family: var(--fam); font-weight: 600; letter-spacing: -.02em; color: var(--deep); }
.reskin main h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: .95; letter-spacing: -.034em; margin: 0 0 22px; text-wrap: balance; }
.reskin main h1::after { display: none !important; }
.reskin main p, .reskin main li { line-height: 1.6; }
.reskin main a { color: var(--deep); }
.reskin main ul, .reskin main ol { padding-left: 1.3em; } .reskin main ul { list-style: disc; } .reskin main ol { list-style: decimal; }
.reskin main input, .reskin main textarea, .reskin main select { font: inherit; color: var(--deep); background: #FFF; border: 2px solid var(--deep); border-radius: 6px; padding: 12px 14px; }
.reskin main button { font: 600 16px/1 var(--atk); border-radius: 6px; }
.reskin main button[type="submit"], .reskin main .btn { background: var(--deep); color: var(--havre); border: 0; min-height: 52px; padding: 0 24px; cursor: pointer; }
/* ---------- 10 October, evening: the FAQ's section list, the research in three columns, the guides as tiles ---------- */
.faqgrid { max-width: var(--max); display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
.faqhead { grid-column: 1 / -1; margin-bottom: 8px; }
.toc { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; margin-top: 52px; max-height: calc(100vh - 120px); overflow-y: auto; }
.toc p { font: 600 14px/1 var(--atk); color: var(--soft); margin: 0 0 10px; }
.toc a { text-decoration: none; font-size: 15px; line-height: 1.3; padding: 7px 0 7px 12px; border-left: 2.5px solid var(--hair); color: var(--deep); }
.toc a:hover { border-left-color: rgba(36, 56, 76, .45); }
.toc a.on { border-left-color: var(--deep); font-weight: 600; }
.faqbody { min-width: 0; }
.faqbody h2, .faqbody details { scroll-margin-top: 96px; }
@media (max-width: 900px) {
  .faqgrid { display: block; }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 24px; max-height: none; }
  .toc p { width: 100%; }
  .toc a { border: 2px solid var(--deep); border-radius: 6px; padding: 7px 10px; font-size: 14px; }
}
.reskin.page-research main { max-width: 1240px; }
.reskin.page-research main .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.reskin.page-research main .card { border-radius: 6px; border-top-width: 3px; }
@media (max-width: 1000px) { .reskin.page-research main .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reskin.page-research main .cards { grid-template-columns: 1fr; } }
.reskin.page-tutorials main.wrap { max-width: 1240px; }
.reskin.page-tutorials .lede { font-size: clamp(19px, 1.55vw, 23px); max-width: 30em; }
.reskin main .guide-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 32px; }
.reskin main .guide-list li { margin: 0; }
.reskin main .guide-card { display: flex; flex-direction: column; height: 100%; min-height: 300px; padding: 28px 26px 24px; border-radius: 6px; background: var(--deep); color: var(--havre); text-decoration: none; border: 0; transition: background-color .2s; }
.reskin main .guide-card:hover { background: #2C4359; }
.reskin main .guide-card .t { font: 600 clamp(24px, 2.2vw, 30px)/1.08 var(--fam); letter-spacing: -.02em; color: var(--havre); margin: 0; }
.reskin main .guide-card .d { font-size: 16px; line-height: 1.5; color: var(--havre2); margin-top: 14px; }
.reskin main .guide-card .m { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font: 600 15px/1 var(--atk); color: var(--havre); }
.reskin main .guide-card .m::after { content: "›"; font-size: 26px; line-height: 1; }
@media (max-width: 900px) { .reskin main .guide-list { grid-template-columns: 1fr; } .reskin main .guide-card { min-height: 0; } }
.reskin main .step-node { border-color: var(--deep); color: var(--deep); }
.reskin main .progress-fill { background: var(--deep); }
.reskin main button:not(.chip):not(.sort) { background: var(--deep); color: var(--havre); border: 0; border-radius: 8px; min-height: 44px; padding: 0 18px; font: 600 15px/1 var(--atk); cursor: pointer; }
/* ---------- 10 October, night: Kontakt in two columns, the intro's words as a list, the form on the deep blue ---------- */
.reskin.page-contact main { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 6vw, 110px); align-items: start; padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(64px, 7vw, 120px); }
.reskin.page-contact main > * { max-width: none; }
.reskin.page-contact main > h1 { grid-column: 1; grid-row: 1; margin-bottom: 26px; }
.reskin.page-contact .ct-side { grid-column: 1; grid-row: 2; }
.reskin.page-contact main > form, .reskin.page-contact main > .thanks { grid-column: 2; grid-row: 1 / span 3; }
.reskin.page-contact main > .fail { grid-column: 2; grid-row: 4; margin-top: 16px; font: 600 16px/1.4 var(--atk); color: var(--deep); }
.reskin.page-contact .ct-side .intro { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: var(--prose); margin: 0; }
.reskin.page-contact .ct-list { list-style: none; padding: 0; margin: 22px 0 0; }
.reskin.page-contact .ct-list li { margin: 0; padding: 15px 0 16px; border-top: 2.5px solid var(--deep); font: 600 clamp(22px, 2vw, 28px)/1.15 var(--fam); letter-spacing: -.015em; }
.reskin.page-contact .ct-big { margin-top: clamp(34px, 4vw, 56px); font: 700 clamp(44px, 5vw, 72px)/.95 var(--fam); letter-spacing: -.034em; color: var(--deep); }
.reskin.page-contact main form { background: var(--deep); color: var(--havre); border-radius: 6px; padding: clamp(28px, 3.4vw, 52px); gap: 22px; }
.reskin.page-contact main label { font: 600 17px/1.2 var(--fam); letter-spacing: -.005em; color: var(--havre); gap: 10px; }
.reskin.page-contact main input[type="text"], .reskin.page-contact main input[type="email"], .reskin.page-contact main textarea {
  height: 56px; padding: 0 16px; border: 0; border-radius: 6px; background: #F1EBE5; color: var(--deep); font: 400 17px/1.4 var(--atk); }
.reskin.page-contact main textarea { height: auto; min-height: 180px; padding: 14px 16px; }
.reskin.page-contact main input::placeholder { color: #6B7785; opacity: 1; }
.reskin.page-contact main input:focus-visible, .reskin.page-contact main textarea:focus-visible { outline: 3px solid var(--havre); outline-offset: 2px; }
.reskin.page-contact main label.row { flex-direction: row; align-items: center; gap: 12px; font: 400 16px/1.4 var(--atk); cursor: pointer; }
.reskin.page-contact main label.row input { appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0; padding: 0; border: 2px solid var(--havre); border-radius: 5px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.reskin.page-contact main label.row input:checked { background: var(--havre); }
.reskin.page-contact main label.row input:checked::after { content: ""; width: 7px; height: 13px; border: solid var(--deep); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.reskin.page-contact main label.row input:focus-visible { outline: 3px solid var(--havre); outline-offset: 3px; }
.reskin.page-contact main button[type="submit"] { align-self: stretch; min-height: 58px; margin-top: 4px; border-radius: 6px; background: var(--havre); color: var(--deep); font: 600 17px/1 var(--atk); }
.reskin.page-contact main button[type="submit"]:hover { background: #FFFFFF; }
.reskin.page-contact main .note { font-size: 13.5px; line-height: 1.55; color: rgba(236, 223, 208, .8); }
.reskin.page-contact main .note a { color: var(--havre); }
.reskin.page-contact main .thanks { background: var(--deep); color: var(--havre); border-radius: 6px; padding: clamp(28px, 3.4vw, 52px); font: 700 clamp(30px, 3vw, 44px)/1.05 var(--fam); letter-spacing: -.025em; font-style: normal; }
@media (max-width: 900px) {
  .reskin.page-contact main { display: block; }
  .reskin.page-contact .ct-side { margin-bottom: 36px; }
  .reskin.page-contact main > .fail { margin-top: 14px; }
}
/* the guides: tints from the palette that belong to no layer (Jérémie: the layer colours would say the guides are about
   the layers), turning in this order: Sky, Clay, Parchment; deep blue text on all three */
.reskin main .guide-list li:nth-child(3n+1) .guide-card { background: #ACC8E3; }
.reskin main .guide-list li:nth-child(3n+2) .guide-card { background: #C8A894; }
.reskin main .guide-list li:nth-child(3n) .guide-card { background: #E4DBBE; }
.reskin main .guide-card:hover { filter: brightness(1.04); }
.reskin main .guide-card .t, .reskin main .guide-card .m { color: var(--deep); }
.reskin main .guide-card .d { font: 400 16px/1.5 var(--atk); color: var(--deep); }
/* research: each card carries its theme as a band in a palette tint; the filter buttons carry the same tint, so the
   code is learnt without a legend */
.reskin.page-research main .card { padding-top: 0; border: 0; border-radius: 6px; overflow: hidden; background: #FCF9F6; }
.reskin.page-research main .card .tagrow { margin: 0 -22px 8px; padding: 12px 22px 11px; background: var(--tint, #E9E3D8); align-items: center; }
.reskin.page-research main .card .tag { border: 0; border-radius: 0; padding: 0; font: 600 12.5px/1 var(--atk); letter-spacing: .07em; color: var(--deep); }
.reskin.page-research main .card .year { font: 600 13px/1 var(--atk); color: var(--deep); opacity: .72; }
.reskin.page-research main [data-tema="somn"] { --tint: #ACC8E3; }
.reskin.page-research main [data-tema="fokus"] { --tint: #E4DBBE; }
.reskin.page-research main [data-tema="maende"] { --tint: #DCC0C8; }
.reskin.page-research main [data-tema="utveckling"] { --tint: #CBD6BA; }
.reskin.page-research main [data-tema="vanor"] { --tint: #C8A894; }
.reskin.page-research main .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 2px solid var(--deep); border-radius: 6px; background: transparent; color: var(--deep); font: 600 14.5px/1 var(--atk); }
.reskin.page-research main .chip:not([data-tema="alla"])::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--tint); box-shadow: inset 0 0 0 1px rgba(36, 56, 76, .18); }
.reskin.page-research main .chip.on { background: var(--deep); color: var(--havre); }
.reskin.page-research main .sort { color: var(--deep); font: 600 14.5px/1 var(--atk); border-bottom: 2px solid var(--deep); }
/* "Designad och kodad i Sverige" (Jérémie, 10 October): the signature under the homepage's first text, and in the footer */
.lagom .made { font: italic 400 clamp(19px, 1.5vw, 22px)/1.3 "Castoro", Georgia, serif; margin-top: 18px; }
.lagom .on-deep .made { color: var(--havre); }
.lagom .ft .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; }
.lagom .ft .legal .made-ft { font-weight: 600; color: var(--havre); }
/* ---------- 10 October, night: the style audit's fixes. Every column on the header's left edge; the day's sideways
   overflow clipped; the guides' steps as titles rather than bars; corners at 6 px; the app's screens in the guides in the
   app's own faces ---------- */
body.reskin main { max-width: var(--max); padding-left: var(--gut); padding-right: var(--gut); }
.reskin.page-research main, .reskin.page-tutorials main.wrap, .reskin.page-contact main { max-width: var(--max); }
.day { overflow-x: clip; }
.reskin main button:not(.chip):not(.sort) { line-height: 1.25; }
.reskin main .step-head { background: none; color: var(--deep); min-height: 0; padding: 3px 0 0; border-radius: 0; text-align: left; font: 600 18px/1.3 var(--fam); letter-spacing: -.01em; }
.reskin main .step-h { font: 600 18px/1.3 var(--fam); letter-spacing: -.01em; }
.reskin main .step-node { background: var(--bg); font: 600 14px/1 var(--atk); }
.reskin main .step.is-done .step-node { background: var(--deep); border-color: var(--deep); color: var(--havre); }
.reskin main .step.is-done .step-head, .js-steps main .step-head:hover { color: var(--deep); }
.reskin main .step-line { background: rgba(36, 56, 76, .2); }
.reskin main .progress { background: rgba(36, 56, 76, .15); border-radius: 0; }
.reskin main .step-state, .reskin main .steps-count { color: var(--soft); }
.reskin main .step-next { min-height: 44px; padding: 0 18px; border-radius: 6px; background: var(--deep); color: var(--havre); font: 600 15px/1 var(--atk); }
.reskin main .illu, .reskin.page-privacy main .summary { border-radius: 6px; }
.reskin[class*="page-tutorials"] main .note { background: #FCF9F6; border-left: 3px solid var(--deep); border-radius: 6px; color: var(--deep); }   /* the guides' notes, not Kontakt's consent line */
.reskin main .en h2 { font: 600 13px/1 var(--atk); letter-spacing: .07em; color: var(--deep); }
.reskin.page-tutorials-lugn-hemskarm main .illu svg text[font-family^="Castoro"],
.reskin.page-tutorials-egna-nfc-kort main .illu svg text[font-family^="Georgia"] { font-family: var(--fam); font-weight: 600; }
.reskin.page-tutorials-egna-nfc-kort main .illu svg text[font-family="sans-serif"] { font-family: var(--atk); }
.reskin.page-privacy main th, .reskin.page-privacy main td { overflow-wrap: anywhere; hyphens: auto; }
.doc blockquote { margin: 18px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--deep); }
.doc blockquote p { margin: 0 0 8px; }
.doc hr { border: 0; border-top: 1.5px solid var(--hair); margin: 36px 0; }
/* ---------- 11 October: the waiting list's answers, the confirmation note ---------- */
.form-msg { margin: 12px 0 0; font: 600 15.5px/1.4 var(--atk); }
.form-msg.ok::before { content: "✓ "; }
.lagom .ft .form-msg { color: var(--havre); }
.mini + .form-msg { font-size: 14.5px; margin-top: 8px; color: var(--deep); }
.lagom .on-deep .form-msg { color: var(--havre); }
.toast { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 6px;
  background: var(--deep); color: var(--havre); font: 600 16px/1.35 var(--atk); box-shadow: 0 18px 40px -16px rgba(6, 12, 20, .5); transition: opacity .5s, transform .5s; }
.toast.gone { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.lagom #vantelista { scroll-margin-top: 96px; }
.reskin.page-contact .ct-sig { margin-top: 14px; font: 400 clamp(17px, 1.4vw, 19px)/1.45 var(--atk); color: var(--soft); max-width: 26em; }

/* 11 October, round 3 (Jérémie's review) */
.lg-intro { padding-bottom: clamp(72px, 8vw, 128px); }   /* as much air below as above: the section sits centred */
.lg-close { background: var(--sky); color: var(--deep); padding-top: clamp(72px, 8vw, 128px); padding-bottom: clamp(72px, 8vw, 128px); }
.ab-hero h1 .h1-sub { display: block; font-size: .42em; line-height: 1.05; letter-spacing: -.025em; margin-top: .3em; }
.lg-three .down { display: inline-flex; align-items: center; gap: 12px; margin-top: 56px; font: 600 20px/1 var(--fam); text-decoration: none; letter-spacing: -.01em; color: var(--deep); }
.lg-three .down svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.4s var(--ease) infinite; }
.day .steps-col { grid-column: 1; grid-row: 1; }
.day .steps-col .steps { grid-column: auto; grid-row: auto; }
.day .day-note { padding-top: 6svh; font-size: 15px; max-width: 26em; opacity: .8; }
.day .steps .aside { display: block; margin-top: 14px; font-size: 14px; font-style: italic; opacity: .8; }
@media (max-width: 900px) { .day .steps-col { grid-column: 1; grid-row: 2; } .day .day-note { padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .lg-three .down svg { animation: none; } }
/* Kontakt, round 3: the list as light text, and the WhatsApp box (the link is our own /whatsapp/, a redirect set when the account exists) */
.reskin.page-contact .ct-list { margin-top: 14px; }
.reskin.page-contact .ct-list li { border-top: 0; padding: 4px 0 4px 22px; position: relative; font: 400 clamp(18px, 1.4vw, 20px)/1.45 var(--atk); letter-spacing: 0; color: var(--prose); }
.reskin.page-contact .ct-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--deep); opacity: .55; }
.reskin.page-contact .ct-wa { display: flex; flex-direction: column; gap: 6px; margin-top: clamp(28px, 3vw, 44px); padding: 22px 24px; border-radius: 6px; background: var(--ljung); color: var(--deep); text-decoration: none; max-width: 26em; }
.reskin.page-contact .ct-wa:hover { background: #E6D0D6; }
.reskin.page-contact .ct-wa:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.reskin.page-contact .ct-wa-t { font: 600 clamp(22px, 2vw, 28px)/1.1 var(--fam); letter-spacing: -.015em; }
.reskin.page-contact .ct-wa-t::after { content: " →"; }
.reskin.page-contact .ct-wa-s { font: 400 15px/1.45 var(--atk); color: var(--soft); }
.lagom main:has(> .lg-close:last-child) + .wave { background: var(--sky); }   /* the closing band runs into the footer wave */

/* ---------- 13 October: Jérémie's review on a phone, and the site in three languages ---------- */
.lagom .hd { border-bottom: 0; }
/* the header's language switch: small, on the right, before the button */
.hd .langs { display: flex; gap: 2px; }
.hd .langs a { text-decoration: none; font: 600 13px/1 var(--atk); letter-spacing: .04em; padding: 7px 7px 6px; border-radius: 4px; opacity: .65; }
.hd .langs a[aria-current] { opacity: 1; box-shadow: inset 0 0 0 1.5px currentColor; }
.hd .langs a:hover { opacity: 1; }
.hd nav .langs { display: none; }
.hd nav .grp { display: contents; }
.hd nav .gl { display: none; }
/* the phone menu: a sheet of sand under the header, the links in three groups, so it reads as a menu and not as more blue */
.burger path { transition: transform .25s var(--ease), opacity .2s; transform-origin: 12px 12px; }
.hd.open .burger .b1 { transform: translateY(5px) rotate(45deg); }
.hd.open .burger .b2 { opacity: 0; }
.hd.open .burger .b3 { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1000px) {   /* the same breakpoint as the burger in base.css (14 October) */
  .hd .langs.top { display: none; }
  .lagom .hd.open nav { position: fixed; left: 0; right: 0; top: 72px; bottom: 0; overflow-y: auto; background: var(--paper); color: var(--deep);
    padding: 12px var(--gut) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0;
    box-shadow: 0 -1px 0 rgba(36, 56, 76, .08); animation: sheet .28s var(--ease) both; }
  .lagom .hd.open nav .grp { display: flex; flex-direction: column; padding: 14px 0 12px; border-bottom: 1.5px solid var(--hair); }
  .lagom .hd.open nav .gl { display: block; margin: 0 0 4px; font: 600 12px/1 var(--atk); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
  .lagom .hd.open nav .grp a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font: 600 28px/1.1 var(--fam); letter-spacing: -.02em; color: var(--deep); border: 0; }
  .lagom .hd.open nav .grp a::after { content: "→"; font: 400 22px/1 var(--atk); opacity: .45; }
  .lagom .hd.open nav .grp a[aria-current] { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 6px; }
  .lagom .hd.open nav .nav-dl { align-self: stretch; justify-content: center; margin-top: 22px; background: var(--deep); color: var(--havre); font-size: 17px; min-height: 56px; }
  .lagom .hd.open nav .langs { display: flex; gap: 8px; margin-top: 20px; }
  .lagom .hd.open nav .langs a { color: var(--deep); font-size: 15px; padding: 10px 14px; opacity: .7; }
  .lagom .hd.open nav .langs a[aria-current] { opacity: 1; }
  body.menu-open { overflow: hidden; }
}
@keyframes sheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* the big mark as a bar's neon sign: two tubes, a white-hot core in a coloured glow, the glass faintly visible when
   unlit, light spilling on the blue (the script sets each tube's state) */
.bigmark { position: relative; color: var(--havre); --spill: 1; }
.bigmark::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(241, 228, 211, .16), rgba(241, 228, 211, .05) 55%, transparent 72%); opacity: var(--spill); transition: opacity .06s; }
.bigmark svg { position: relative; }
.bigmark .ring { stroke: var(--n, #ECDFD0); }
.bigmark .water { fill: var(--n, #ECDFD0); }
.bigmark [data-s] { filter: drop-shadow(0 0 1.2px var(--core)) drop-shadow(0 0 5px var(--glow)) drop-shadow(0 0 16px var(--glow)) drop-shadow(0 0 40px var(--glow2)); }
.bigmark [data-s="off"] { --n: #34495E; filter: none; }
.bigmark [data-s="pink"] { --n: #F6CFDB; --core: #FFF4F8; --glow: rgba(240, 168, 196, .85); --glow2: rgba(240, 168, 196, .45); }
.bigmark [data-s="pinkdim"] { --n: #B98E9E; --core: rgba(255, 244, 248, .4); --glow: rgba(240, 168, 196, .35); --glow2: transparent; }
.bigmark [data-s="sky"] { --n: #CFE3F7; --core: #F4FAFF; --glow: rgba(150, 196, 240, .85); --glow2: rgba(150, 196, 240, .45); }
.bigmark [data-s="skydim"] { --n: #8FA5BB; --core: rgba(244, 250, 255, .4); --glow: rgba(150, 196, 240, .35); --glow2: transparent; }
.bigmark [data-s="havre"] { --n: #F4E9DA; --core: #FFFBF4; --glow: rgba(244, 216, 172, .7); --glow2: rgba(244, 216, 172, .32); }
.bigmark [data-s="havredim"] { --n: #C9B9A6; --core: rgba(255, 250, 242, .35); --glow: rgba(240, 214, 176, .2); --glow2: transparent; }

/* the sticker over the four claims, like a price sticker of the 1990s, turned a little */
.lg-claims { position: relative; }
.lg-claims .sticker { position: absolute; z-index: 2; left: calc(var(--gut) - 22px); top: clamp(28px, 4vw, 64px); width: clamp(128px, 12vw, 176px); aspect-ratio: 1;
  display: grid; place-items: center; text-align: center; transform: rotate(-12deg); margin: 0; color: var(--deep);
  background: var(--ljung); clip-path: polygon(50% 0%, 59% 9%, 71% 4%, 75% 16%, 88% 15%, 87% 28%, 98% 34%, 92% 45%, 100% 55%, 90% 62%, 94% 75%, 81% 78%, 79% 91%, 66% 89%, 59% 100%, 50% 92%, 41% 100%, 34% 89%, 21% 91%, 19% 78%, 6% 75%, 10% 62%, 0% 55%, 8% 45%, 2% 34%, 13% 28%, 12% 15%, 25% 16%, 29% 4%, 41% 9%); }
.lg-claims .sticker span { display: block; max-width: 6.2em; font: 700 clamp(18px, 1.7vw, 24px)/.98 var(--fam); letter-spacing: -.02em; text-transform: uppercase; }
.lg-claims .g { padding-top: clamp(40px, 4vw, 64px); }
@media (max-width: 900px) { .lg-claims .sticker { left: calc(var(--gut) - 8px); top: 22px; width: 112px; } .lg-claims .sticker span { font-size: 16px; } .lg-claims .g { padding-top: 64px; } }

/* no rule above "Fakta, med källor" */
.lg-research .top { border-top: 0; padding-top: 0; }
/* the closing line comes out of the sand into the sky, and the sky runs into the footer's wave */
.lg-close { background: linear-gradient(var(--paper), var(--sky) 70%); }
/* the footer covers the last row of the wave, so no hairline shows between them */
.lagom .ft { position: relative; margin-top: -2px; }
@media (max-width: 900px) { .ft-top .sig { justify-self: end; } }
.ft address a { color: inherit; }

/* 21:40: the countdown under the sentence to copy */
.a-count { position: absolute; left: 6.4cqw; right: 6.4cqw; bottom: 48cqw; display: flex; align-items: center; gap: 4cqw; }
.a-count svg { width: 15cqw; height: 15cqw; transform: rotate(-90deg); flex: none; }
.a-count circle { fill: none; stroke-width: 3.2; }
.a-count .trk { stroke: rgba(36, 56, 76, .14); }
.a-count .arc { stroke: #24384C; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 0; }
.a-count.run .arc { transition: stroke-dashoffset 1.6s linear; stroke-dashoffset: 3; }
.a-count b { font: 700 10cqw/1 var(--fam); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.a-count span { font-size: 3.6cqw; line-height: 1.2; opacity: .7; }

/* the 404 page */
.nf { padding-top: clamp(64px, 9vw, 140px); padding-bottom: clamp(80px, 10vw, 160px); }
.nf .nf-code { font-size: clamp(110px, 18vw, 260px); line-height: .8; letter-spacing: -.05em; color: var(--sky); -webkit-text-stroke: 2.5px var(--deep); }
.nf h1 { font-size: clamp(40px, 5.4vw, 80px); margin-top: 24px; }
.nf .lede { margin-top: 18px; max-width: 26em; }
.nf .nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }

/* the policies and the privacy policy read like the FAQ: the sections at the left, the same type */
.doc.policy p, .doc.policy li, .doc.privacy p, .doc.privacy li { font-size: 17px; }
.doc .tablewrap { overflow-x: auto; margin-top: 18px; }
.doc .tablewrap table { margin-top: 0; min-width: 560px; }
.doc table td:first-child { font-weight: 600; white-space: nowrap; padding-right: 22px; }
.doc .summary { font-size: 19px; }
.doc .updated, .doc .faqhead > p strong { color: var(--soft); font-weight: 400; }

/* Kontakt on a phone: the form first after the list; "En människa svarar" and WhatsApp below it */
.reskin.page-contact .ct-after { grid-column: 1; grid-row: 3; }
@media (max-width: 900px) { .reskin.page-contact .ct-after { margin-top: 40px; } }
.hd nav a { white-space: nowrap; }
/* Kontakt: the company's signature under the WhatsApp box, its values written by a script */
.reskin.page-contact .ct-id { margin-top: 28px; max-width: 26em; font: 400 15px/1.6 var(--atk); color: var(--soft); }
.reskin.page-contact .ct-id p { margin: 0; }
.reskin.page-contact .ct-id b { font-weight: 600; color: var(--deep); }
.reskin.page-contact .ct-id a { color: inherit; text-decoration: none; }
.reskin.page-contact .ct-id a:hover { text-decoration: underline; }
canvas.ob { display: inline-block; vertical-align: middle; max-width: 100%; }
canvas.ob[role="link"]:hover { opacity: .75; }
canvas.ob:focus-visible { outline: 2.5px solid var(--deep); outline-offset: 3px; border-radius: 2px; }
.doc td canvas.ob { font: 400 17px/1.45 var(--atk); color: var(--prose); }
.reskin main canvas.ob { font: inherit; color: inherit; }
/* /k/: a card held to a phone without the app */
.kc .kc-k { font: 600 14px/1 var(--atk); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin: 0 0 14px; }
.kc .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.kc .fine { margin-top: 16px; font-size: 15px; color: var(--soft); }
.kc .kc-img { display: block; width: min(100%, 420px); margin: 0 auto; transform: rotate(-6deg); }

/* 14 October: the day's fixes. (1) The phone's front no longer shows through its back while it turns: the face hides
   itself at the half-turn, whatever the browser does with backface-visibility on its children. (2) The phone's stage
   paints the section's own colour, inherited frame by frame, so no square of another tint can show around the phone
   while the colour changes (the stage is a separate layer in some browsers). */
.pw .front { transition: visibility 0s .5s; }
.pw.down .front { visibility: hidden; transition: visibility 0s .48s; }
.pw .back { visibility: hidden; transition: visibility 0s .48s; }
.pw.down .back { visibility: visible; transition: visibility 0s .5s; }
.day > .grid, .day .stage { background-color: inherit; }   /* inherited through the grid, frame by frame */
@media (max-width: 900px) { .day .stage { background: none; background-color: inherit; transition: none; } }
.card-img { height: auto; }

/* 14 October, the code review's decisions: focus shows in the waiting-list fields; jumps land below the sticky header;
   the footer's question is a paragraph styled as before, so each page's headings are its own */
.mail input:focus-visible, .mini input:focus-visible { outline: 3px solid var(--havre); outline-offset: 2px; }
.mini input:focus-visible { outline-color: var(--deep); }
[id] { scroll-margin-top: 88px; }
.ft .ft-h { font-size: clamp(30px, 3.6vw, 48px); line-height: 1; letter-spacing: -.03em; max-width: 15em; margin: 0; }
.hd .logo, .hd .logo svg { flex: none; }   /* a long French menu had squeezed the mark to nothing at about 1024 px (19 October) */

/* 19 October, the English and French layout: the hero's title is longer than "Lugn, med flit." in both, so it takes a
   smaller size and keeps its two lines; the sticker sits over the gap between the two columns, as a seal on all four
   claims, rather than half off the first one */
html:not([lang="sv"]) .dj-hero h1 { font-size: clamp(60px, 8.4vw, 128px); }
@media (max-width: 900px) { html:not([lang="sv"]) .dj-hero h1 { font-size: clamp(48px, 13.5vw, 72px); } }
.lg-claims .sticker { left: 50%; margin-left: calc(clamp(128px, 12vw, 176px) / -2); top: clamp(24px, 3vw, 44px); }
.lg-claims .g { padding-top: clamp(96px, 9vw, 132px); }
@media (max-width: 900px) {
  .lg-claims .sticker { left: auto; right: var(--gut); margin-left: 0; top: 18px; }
  .lg-claims .g { padding-top: 92px; }
}
/* the seal sits on the line of the first two claims, across the gap between them */
.lg-claims .sticker { top: calc(clamp(72px, 8vw, 124px) + 56px - clamp(128px, 12vw, 176px) / 2); }
.lg-claims .g { padding-top: 56px; }
@media (max-width: 900px) { .lg-claims .sticker { top: 10px; } .lg-claims .g { padding-top: 84px; } }
/* tables on a phone: they scroll sideways inside the page instead of widening it, and the first column may wrap */
@media (max-width: 900px) {
  .doc table { display: block; overflow-x: auto; max-width: 100%; }
  .doc table td:first-child { white-space: normal; min-width: 7em; }
}
@media (max-width: 900px) { .doc td, .doc th { overflow-wrap: anywhere; } .doc table td:first-child { min-width: 0; } }
html, body { overflow-x: clip; }   /* nothing may widen the page on the narrowest phones (320 px) */