/* Layout: a product site that breathes. One idea per section, wide white (or black) space between
   them, and the real product always shown the same way: as frosted glass over Forma's own
   paintings or film stills. One heading face (Newsreader) everywhere; Instrument Sans for the rest. */
:root {
  --green: #013220;                                            /* Forma green */
  --green-ink: color-mix(in oklab, var(--green) 72%, #000);     /* painted grounds */
  --green-wash: color-mix(in oklab, var(--green) 6%, #fff);     /* the Forma column, faint fills */
  --signal: color-mix(in oklch, var(--green) 38%, #3EF7A8);    /* the live dot */
  --paper: #ffffff;
  --night: #000000;
  --ink: #111412; --ink-2: #565b58; --ink-3: #8a8f8c;
  --line: rgba(17, 20, 18, .1); --hair: rgba(17, 20, 18, .07);
  --on-dark: #ffffff; --on-dark-2: rgba(255, 255, 255, .64); --on-dark-line: rgba(255, 255, 255, .14);
  --glass: rgba(255, 255, 255, .6);
  --c-error: #E5484D; --c-lang: #2F6BD6; --c-forward: #E0A011; --c-strength: #2FA45C;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Hedvig Letters Serif', 'Newsreader', Georgia, serif;   /* the heading face (the user, 2026-10-18: Inter "lite tråkig", Plex Serif "för tunn"; Hedvig, with only its biggest headings thinned below) */
  --logo-face: 'Newsreader', 'Iowan Old Style', Georgia, serif;   /* the wordmark keeps Newsreader ("the logo i still want newsreader") */
  /* The rhombus in the lockup, from the serif's baseline to its cap height. Each face below gets its own,
     measured from the rendered logo so the tips sit where the user approved them with Newsreader. */
  --mk-w: .528em; --mk-h: .742em; --mk-y: -.087em;
  --max: 1736px; --pad: 16px;                                  /* 1680 px of content, as gradr.se */
  --gap: clamp(140px, 13vw, 232px);                             /* the space between sections */
  --ez: cubic-bezier(.40, 0, .10, 1); --rise: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
  interpolate-size: allow-keywords;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

* { box-sizing: border-box; }
@media (min-width: 768px) { :root { --pad: 24px; } }
@media (min-width: 1024px) { :root { --pad: 28px; } }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.sec { margin-top: var(--gap); }
.hd { font-family: var(--serif); font-weight: 300; letter-spacing: -0.014em; line-height: 1.08; text-wrap: balance; }
.dim { color: var(--ink-3); }
.mark { display: block; width: 18px; height: 18px; }
.star { display: block; width: 100%; height: 100%; }

.pill { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform .6s var(--rise), background-color .3s, color .3s; }
.pill.sm { height: 36px; padding: 0 15px 0 13px; font-size: 13.5px; }
.pill.white { background: var(--paper); color: var(--night); }
.pill.black { background: var(--night); color: var(--paper); }
.pill.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pill:hover { transform: translateY(-1px); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); position: relative; flex: none; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--signal); opacity: .6; animation: pulse 2.4s var(--ez) infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }
.more { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; text-decoration: none; }
.more span { transition: transform .5s var(--rise); } .more:hover span { transform: translateX(4px); }

/* The product as glass: a transparent capture of the real component on a blurred white pane whose
   corners match the component's own (r / w and r / h as percentages, so they scale with it). */
.glass { position: relative; width: 100%; max-width: min(100%, calc(var(--w) * 1px)); aspect-ratio: var(--w) / var(--h); overflow: hidden;
  border-radius: calc(var(--r) / var(--w) * 100%) / calc(var(--r) / var(--h) * 100%);
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 50px 100px -40px rgba(0, 0, 0, .55); }
.glass > img { width: 100%; height: 100%; }

/* Forma's paintings: the original canvas, toned to the green and deepened. */
.painted { position: relative; isolation: isolate; overflow: hidden; background: var(--green-ink); }
.painted > .paint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.painted > .tone { position: absolute; inset: 0; z-index: -2; background: var(--green); mix-blend-mode: color; }
.painted > .deep { position: absolute; inset: 0; z-index: -1; background: var(--green-ink); mix-blend-mode: multiply; opacity: .66; }
[data-parallax] { will-change: transform; transform: scale(1.14); }

/* ---------- header ---------- */
.nav { --h: rgba(255, 255, 255, .18); position: fixed; z-index: 60; inset: 0 0 auto 0; height: calc(68px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-inline: var(--pad); color: var(--on-dark);
  border-bottom: 1px solid transparent; transition: background-color .4s, color .4s, border-color .4s; }
.nav.on-dark.scrolled { background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-color: rgba(255, 255, 255, .08); }
.nav.on-light { --h: rgba(17, 20, 18, .1); color: var(--ink); background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-color: var(--hair); }
.nav-left { display: flex; align-items: center; gap: 2px; justify-self: start; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer; font-size: 14px; color: inherit; opacity: .86; text-decoration: none; white-space: nowrap; }
.nav-item > *:hover, .nav-item.open > button { opacity: 1; }
.nav-item .car { display: inline-block; width: 6px; height: 6px; margin: 0 1px 0 3px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .75; transition: transform .4s var(--ez); }
.nav-item.open .car { transform: translateY(1px) rotate(225deg); }
/* The dropdowns: frosted glass with a bright rim, a soft drop, and items that rise in one after another. */
.menu { position: absolute; z-index: 2; top: calc(100% + 12px); left: -10px; padding: 8px; border-radius: 22px; color: var(--ink);
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), inset 0 1px 0 rgba(255, 255, 255, .95), 0 34px 80px -24px rgba(6, 18, 12, .42), 0 2px 10px rgba(6, 18, 12, .06);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: 30px 0; filter: blur(3px);
  transition: opacity .22s var(--ez), transform .55s var(--rise), filter .35s var(--ez), visibility 0s .55s; }
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item.open .menu { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.nav.on-light .menu { background: rgba(255, 255, 255, .9); }
.menu.list { min-width: 300px; display: grid; gap: 2px; }
.menu .li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 15px; text-decoration: none; transition: background-color .25s; }
.menu .li b, .menu .mi b { font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em; }
.menu .li small, .menu .mi small { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.menu .li:hover, .menu .mi:hover, .menu a:focus-visible { background: rgba(255, 255, 255, .82); }
.menu.mega { width: 590px; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
/* under the four: a wide strip, Uppgiftsworkspace in its middle, on the user's own picture (the marble bust) */
.mega-ws { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; text-align: center; min-height: 72px; margin: 6px 2px 2px; padding: 12px 64px; border-radius: 15px; color: #fff; text-decoration: none; }
.mega-ws img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; transition: transform .9s var(--rise); }
.mega-ws::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 6, 4, .42); }
.mega-ws span { display: grid; gap: 3px; }
.mega-ws b { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -0.01em; }
.mega-ws small { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .84); }
.mega-ws i { position: absolute; right: 14px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); color: #fff; transition: transform .5s var(--rise), background-color .3s; }
.mega-ws i svg { width: 15px; height: 15px; }
.mega-ws:hover img { transform: scale(1.04); } .mega-ws:hover i { transform: translateX(3px); background: rgba(255, 255, 255, .26); }
.menu .mi { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 17px; text-decoration: none; transition: background-color .25s; }
.menu .mi img { width: 58px; height: 58px; flex: none; border-radius: 13px; object-fit: cover; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55); transition: transform .6s var(--rise); }
.menu .mi:hover img { transform: scale(1.06); }
.menu .mi span { display: grid; gap: 3px; min-width: 0; }
.mega-foot { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px 2px; padding: 13px 16px; border-radius: 15px; background: rgba(1, 50, 32, .06); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background-color .25s; }
.mega-foot:hover { background: rgba(1, 50, 32, .11); }
.mega-foot i { font-style: normal; transition: transform .6s var(--rise); } .mega-foot:hover i { transform: translateX(4px); }
.nav-item.open .menu :is(.mi, .li, .mega-foot, .mega-ws) { animation: menuIn .6s var(--rise) both; }
.nav-item.open .menu :is(.mi, .li):nth-child(2) { animation-delay: .035s; } .nav-item.open .menu :is(.mi, .li):nth-child(3) { animation-delay: .07s; }
.nav-item.open .menu :is(.mi, .li):nth-child(4) { animation-delay: .105s; } .nav-item.open .menu :is(.mega-foot, .mega-ws) { animation-delay: .14s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(7px); } }
.logo { display: inline-flex; align-items: center; gap: .26em; font-family: var(--logo-face); font-weight: 400; font-size: 27px; letter-spacing: -0.012em; line-height: 1; text-decoration: none; white-space: nowrap; justify-self: center; }
.glogo { display: block; height: .89em; aspect-ratio: 4043 / 1166; background: currentColor; -webkit-mask: url(../logo/gradr-logo.png) center / contain no-repeat; mask: url(../logo/gradr-logo.png) center / contain no-repeat; }   /* gradr.se's logo, in the colour of the text around it */
.smk { display: inline-block; vertical-align: middle; } .smk > svg, .smk > .gmark { display: block; width: 100%; height: 100%; }
.ttile.centre .smk { width: 54px; height: 54px; } .ftile .fstar .smk, .filmhero .marks .fm .s .smk { width: 100%; height: 100%; }
@media (max-width: 720px) { .ttile.centre .smk { width: 34px; height: 34px; } }
.filmhero .marks .fm .glogo { height: .9em; }
.gmark { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: url(../img/gradr/mark.png) center / contain no-repeat; mask: url(../img/gradr/mark.png) center / contain no-repeat; }
.logo .s { width: var(--mk-w); height: var(--mk-h); transform: translateY(var(--mk-y)); }   /* the rhombus (64 × 90 box) from baseline to cap height,
   tips a hair past both as pointed shapes need; centring on the line box alone left it 3 px low */
.nav-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.lang { display: inline-flex; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--h); }
.lang button { width: 34px; height: 28px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; opacity: .62; }
.lang button[aria-pressed="true"] { opacity: 1; background: color-mix(in srgb, currentColor 13%, transparent); }
.nav .login { height: 36px; padding: 0 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--h); display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; text-decoration: none; }
.nav .demo { height: 36px; white-space: nowrap; padding: 0 15px 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; text-decoration: none; background: var(--paper); color: var(--night); transition: background-color .4s, color .4s; }
.nav.on-light .demo { background: var(--night); color: var(--paper); }
.nav .replay { height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: none; color: inherit; box-shadow: inset 0 0 0 1px var(--h); display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .3s; }
.nav .replay svg { width: 10px; height: 10px; flex: none; }
.nav .replay:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.drawer .dreplay { display: inline-flex; align-items: center; gap: 9px; padding: 7px 0; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; cursor: pointer; }
.drawer .dreplay svg { width: 10px; height: 10px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.burger i, .burger i::before, .burger i::after { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; margin: auto; content: ""; }
.burger i::before { position: absolute; top: -6px; } .burger i::after { position: absolute; top: 6px; }
.drawer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; visibility: hidden; transition: visibility 0s .5s; }
.drawer .shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .3s; }
.drawer .panel { position: absolute; inset: 0 0 0 auto; width: min(340px, 88vw); padding: calc(22px + env(safe-area-inset-top, 0px)) 22px calc(30px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  background: var(--paper); color: var(--ink); display: flex; flex-direction: column; gap: 18px; transform: translateX(100%); transition: transform .5s var(--ez); }
.drawer.open { pointer-events: auto; visibility: visible; transition-delay: 0s; } .drawer.open .shade { opacity: 1; } .drawer.open .panel { transform: none; }
.drawer .top { display: flex; justify-content: space-between; align-items: center; }
.drawer .top .logo { font-size: 22px; justify-self: start; }
.drawer .top button { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; }
.drawer h4 { margin: 6px 0 2px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.drawer a { display: block; padding: 7px 0; font-size: 16px; text-decoration: none; }
.drawer .acts { margin-top: auto; display: grid; gap: 8px; }
.drawer .acts .pill { justify-content: center; height: 44px; }

/* ---------- 1 · hero: the man at the window, played once and held ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #0b0d0c; color: var(--on-dark); }
.hero .poster, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero video { opacity: 0; transition: opacity .9s; } .hero video.on { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .44), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, .52)); }
.hero .copy { position: absolute; z-index: 2; inset: 0; display: grid; align-content: end; justify-items: center; gap: 30px; text-align: center; padding: 120px var(--pad) clamp(40px, 7svh, 76px); }
.hero h1 { font-size: clamp(32px, 3.3vw, 54px); line-height: 1.04; max-width: 11em; }
@media (min-width: 721px) { .hero h1 { max-width: none; white-space: nowrap; } }   /* one line wherever it fits (the user, 2026-10-19) */
.hero h1 .w { display: inline-block; }
.js .hero h1 .w { animation: word 1.1s var(--rise) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
.js .hero .copy .pill { animation: word 1.1s var(--rise) both; animation-delay: 650ms; }
@keyframes word { from { opacity: 0; transform: translateY(.32em); } to { opacity: 1; transform: none; } }

/* ---------- 2 · schools ---------- */
.schools { border-bottom: 1px solid var(--line); }
.schools .row { display: flex; align-items: center; gap: 28px; height: 76px; }
.schools .label { flex: none; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.schools .run { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.belt { display: flex; gap: 56px; width: max-content; animation: belt 64s linear infinite; font-family: var(--serif); font-size: 19px; color: #3a3e3c; white-space: nowrap; }
.belt > div { display: flex; gap: 56px; }
@keyframes belt { to { transform: translateX(calc(-50% - 28px)); } }

/* ---------- 3 · intro ---------- */
.intro { display: grid; justify-items: center; gap: 28px; text-align: center; padding-block: clamp(16px, 2vw, 40px) clamp(60px, 7vw, 130px); }   /* room around the statement, a little higher (the user, 2026-10-19) */
.intro .mark { color: var(--night); }
.intro p { font-size: clamp(30px, 3.5vw, 54px); line-height: 1.14; max-width: 21em; }

/* ---------- 4 · the workspace: tabs, one real screen at a time ---------- */
.ws .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 48px; margin-bottom: 40px; }
.ws h2 { font-size: clamp(34px, 3.6vw, 56px); max-width: 13em; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #f1f3f2; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; flex: none; border: 0; background: none; cursor: pointer; padding: 10px 18px; border-radius: 999px; font-size: 14px; color: var(--ink-2); overflow: hidden; transition: color .3s, background-color .3s, box-shadow .3s; }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.tabs button i { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; opacity: 0; }
.tabs button[aria-selected="true"] i { opacity: .5; }
.ws .stage { position: relative; aspect-ratio: 16 / 9.4; container-type: size; overflow: hidden; background: #2a2622; }
.ws .stage > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws .duo { position: relative; }
.ws .duo.agent { width: min(76cqw, calc(60cqh * 1616 / 641)); }
.ws .duo.agent .review { width: 100%; }
.ws .duo.agent .ask { position: absolute; z-index: 2; width: 27%; left: -5%; bottom: -16%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 50px 100px -30px rgba(0, 0, 0, .7); }
.ws .duo.exit { width: min(70cqw, calc(72cqh * 1.61)); aspect-ratio: 1.61; }
.ws .duo.exit .make { position: absolute; left: 0; top: 0; width: 52%; }
.ws .duo.exit .lock { position: absolute; z-index: 2; right: 0; bottom: 0; width: 56%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 50px 100px -30px rgba(0, 0, 0, .7); }
.ws .pane { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .7s var(--ez), transform 1s var(--rise), visibility 0s .7s; }
.ws .pane.on { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.ws .pane .glass { width: min(74cqw, calc(72cqh * var(--w) / var(--h))); }
.ws .under { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 22px; }
.ws .under .go { flex: none; }
.ws .under .go span { transition: transform .5s var(--rise); } .ws .under .go:hover span { transform: translateX(3px); }
.ws .cap { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.28; letter-spacing: -0.01em; color: var(--ink); max-width: 30em; }


/* ---------- 6 · feedback: the kinds as tabs, the real window beside them ---------- */
.fb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.fb .left { display: grid; gap: 34px; align-content: center; }
.fb h2 { font-size: clamp(36px, 4vw, 62px); }
.kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.kinds button { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px 0 13px; border-radius: 999px; border: 0; background: none; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-size: 14px; color: var(--ink-2); transition: background-color .35s, color .35s, box-shadow .35s; }
.kinds button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: .45; transition: opacity .35s; }
.kinds button:hover { color: var(--ink); }
.kinds button[aria-selected="true"] { background: var(--night); color: var(--paper); box-shadow: none; }
.kinds button[aria-selected="true"] i { opacity: 1; }
.fb .say { display: grid; }
.fb .say p { grid-area: 1 / 1; font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.24; letter-spacing: -0.01em; max-width: 19em; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ez), transform .7s var(--rise); }
.fb .say p.on { opacity: 1; transform: none; transition-delay: .1s; }
.fb .stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; container-type: size; }
.fb .stage > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb .pane { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .6s var(--ez), transform .9s var(--rise), visibility 0s .6s; }
.fb .pane.on { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.fb .pane .glass { width: min(64cqw, calc(80cqh * var(--w) / var(--h))); }

/* ---------- 7 · four parts, four canvases ---------- */
.parts h2 { font-size: clamp(36px, 4vw, 62px); margin-bottom: 44px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1 / 1; color: var(--on-dark); text-decoration: none; background: var(--green-ink); }
.card > .paint { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ez); }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, .54) 18%, rgba(0, 0, 0, .28) 34%, rgba(0, 0, 0, .06) 48%, rgba(0, 0, 0, 0) 56%); }
.card .t { text-shadow: 0 1px 22px rgba(0, 0, 0, .35); }
.card .t { position: absolute; left: clamp(22px, 2.6vw, 36px); right: clamp(22px, 2.6vw, 36px); top: clamp(22px, 2.6vw, 34px); display: grid; gap: 10px; }
.card h3 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.04; }
.card .t p { font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.45; color: rgba(255, 255, 255, .92); max-width: 17em; }
.card .glass { position: absolute; left: 7%; bottom: 7%; width: min(72%, 480px); transition: transform 1s var(--rise); }
.card .glass.bleed { width: 96%; left: 14%; }
@media (min-width: 1600px) { .card { aspect-ratio: 6 / 5; } .card .glass.bleed { width: 82%; } }
.card .go { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .6s var(--rise); }
.card:hover > .paint { transform: scale(1.05); }
.card:hover .glass { transform: translateY(-8px); }
.card:hover .go, .card:focus-visible .go { opacity: 1; transform: none; }

/* ---------- 8 · stories ---------- */
.stories .quotes { display: grid; }
.stories figure { grid-area: 1 / 1; display: grid; gap: 30px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .7s var(--ez), transform 1s var(--rise), visibility 0s .7s; }
.stories figure.on { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.stories blockquote { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.14; max-width: 21em; }
.stories figcaption { font-size: 15px; color: var(--ink-2); }
.stories figcaption b { font-weight: 500; color: var(--ink); }
.who { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.who button { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 20px 20px 0 0; border: 0; background: none; cursor: pointer; color: var(--ink-3); transition: color .3s; }
.who button + button { padding-left: 20px; }
.who button b { font-weight: 500; font-size: 15px; } .who button span { font-size: 13.5px; }
.who button::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ez); }
.who button + button::before { left: 20px; }
.who button[aria-selected="true"] { color: var(--ink); }
.who button[aria-selected="true"]::before { transform: scaleX(1); }
.who button:hover { color: var(--ink); }

/* ---------- 10 · from task to feedback: four steps, one real panel each, on warm stone ---------- */
.flow4 .head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(40px, 4vw, 64px); }
.flow4 h2 { font-size: clamp(34px, 3.6vw, 56px); max-width: 14em; }
.flow4 .head p { justify-self: end; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 30em; }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 14px; margin: 0; padding: 0; list-style: none; }
.steps4 li { display: grid; gap: 10px; align-content: start; }
.steps4 .tile { position: relative; aspect-ratio: 5 / 4; overflow: hidden; display: grid; place-items: center; padding: 9%; background: var(--stone); container-type: size; }
.steps4 .tile .glass { width: min(100cqw, calc(100cqh * var(--w) / var(--h))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 24px 48px -28px rgba(0, 0, 0, .28); }
.steps4 h3 { margin-top: 12px; font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -0.01em; }
.steps4 p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 26em; }
@media (max-width: 1100px) { .flow4 .head { grid-template-columns: minmax(0, 1fr); } .flow4 .head p { justify-self: start; } .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .steps4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 9 · the painting ---------- */
.band { min-height: clamp(520px, 78svh, 820px); display: grid; place-items: center; text-align: center; color: var(--on-dark); }
.band .copy { display: grid; justify-items: center; gap: 28px; padding-inline: var(--pad); }
.band .mark { width: 20px; height: 20px; color: var(--on-dark); }
.band p { font-size: clamp(34px, 4vw, 62px); line-height: 1.1; max-width: 15em; }

/* ---------- 10 · data and security, always black ---------- */
.trust { background: var(--night); color: var(--on-dark); padding-block: clamp(120px, 12vw, 190px); }
.trust .q { font-size: 14.5px; color: var(--on-dark-2); }
.trust h2 { margin-top: 18px; font-size: clamp(48px, 7.4vw, 118px); line-height: .98; letter-spacing: -0.022em; }
.trust .facts { margin-top: clamp(72px, 8vw, 120px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--on-dark-line); }
.trust .facts > div { padding: 24px 22px 0 0; display: grid; gap: 10px; align-content: start; }
.trust .facts > div + div { padding-left: 22px; border-left: 1px solid var(--on-dark-line); }
.trust dt { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.6vw, 25px); line-height: 1.15; letter-spacing: -0.01em; }
.trust dd { font-size: 14.5px; line-height: 1.5; color: var(--on-dark-2); }
.trust .more { margin-top: 56px; color: var(--on-dark); }

/* ---------- 11 · comparison ---------- */
.compare h2 { font-size: clamp(36px, 4vw, 62px); max-width: 11em; }
.compare .tbl { position: relative; margin-top: 48px; overflow-x: auto; -webkit-overflow-scrolling: touch; }  /* relative: keeps the cells' screen-reader text inside the scroller */
.compare table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14.5px; }
.compare th, .compare td { padding: 15px 12px; border-bottom: 1px solid var(--line); }
.compare thead th { font-weight: 500; font-size: 13.5px; color: var(--ink-2); text-align: center; vertical-align: bottom; padding-top: 0; white-space: nowrap; }
.compare thead th.us { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--ink); }
.compare tbody th { text-align: left; font-weight: 400; padding-left: 0; width: 38%; }
.compare tr.grp th { padding: 34px 0 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.compare td { text-align: center; }
.compare .us { background: var(--green-wash); }
.compare tr.grp .us { background: none; }
.lv { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.lv.y { background: var(--ink); }
.lv.p { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lv.n { box-shadow: inset 0 0 0 1.5px rgba(17, 20, 18, .22); }
.us .lv.y { background: var(--green); } .us .lv.p { background: linear-gradient(90deg, var(--green) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--green); }
.compare .key { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--ink-2); }
.compare .key span { display: inline-flex; align-items: center; gap: 8px; }
.compare .src { margin-top: 10px; font-size: 13px; color: var(--ink-3); max-width: 60em; }

/* ---------- 12 · questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.faq h2 { font-size: clamp(36px, 4vw, 62px); position: sticky; top: 110px; }
.faq .list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.2; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, box-shadow .3s; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .5s var(--ez); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm { background: var(--night); color: var(--paper); box-shadow: none; }
.faq details[open] summary .pm::after { transform: rotate(0deg); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .6s var(--ez), content-visibility .6s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .a { padding: 0 64px 28px 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 44em; }

/* ---------- 13 · the end ---------- */
.cta .card2 { min-height: clamp(300px, 30vw, 420px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; padding: clamp(28px, 4vw, 60px); color: var(--on-dark); }
.cta h2 { font-size: clamp(34px, 3.6vw, 56px); max-width: 12em; }
.cta .card2 .pill { justify-self: start; }
.cta p { margin-top: 14px; font-size: 16px; color: rgba(255, 255, 255, .78); }

/* ---------- footer, green ---------- */
.foot { margin-top: clamp(96px, 9vw, 140px); background: var(--green); color: rgba(255, 255, 255, .76); padding-block: 72px calc(30px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.foot .grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot .brand { display: grid; gap: 14px; align-content: start; }
.foot .brand .logo { display: inline-flex; padding: 0; justify-self: start; font-size: 26px; color: var(--on-dark); }
.foot .brand .live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.foot h4 { margin: 0 0 12px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .46); }
.foot a { display: block; padding: 4px 0; text-decoration: none; }
.foot a:hover { color: var(--on-dark); }
.foot .base { margin-top: 56px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 12.5px; color: rgba(255, 255, 255, .46); }

/* ---------- the school's systems: a film between the painting and the black band ---------- */
.flowband { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: #0d0f0e; min-height: clamp(640px, 94svh, 980px); display: grid; align-items: center; padding-block: clamp(110px, 10vw, 160px); }
.flowband > .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.flowband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .28) 52%, rgba(0, 0, 0, .12)), linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .7)); }
.flowband .inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); align-items: center; width: 100%; }
.flowband .txt { display: grid; gap: 22px; align-content: center; }
.flowband h2 { font-size: clamp(36px, 4.2vw, 64px); max-width: 10em; }
.flowband p { font-size: clamp(16px, 1.2vw, 19px); color: rgba(255, 255, 255, .84); max-width: 26em; }
.flowband .more { color: var(--on-dark); }
.flowband .pair { position: relative; height: clamp(440px, 38vw, 580px); }
.flowband .pair .glass { position: absolute; width: min(440px, 76%); }
.flowband .pair .login { left: 0; top: 0; }
.flowband .pair .publish { right: 0; bottom: 0; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 60px 110px -30px rgba(0, 0, 0, .85); }

/* ---------- page to page: a quiet cross-fade with a small rise (same-origin navigations) ---------- */
::view-transition-old(root) { animation: vtOut .35s var(--ez) both; }
::view-transition-new(root) { animation: vtIn .7s var(--rise) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }

/* ================= subpages: images and film first ================= */
/* Page hero: the picture or the film fills the screen; the title sits low; the product may rise in as glass. */
.phero { position: relative; isolation: isolate; overflow: hidden; min-height: 560px; height: 100vh; height: 100svh; color: var(--on-dark); background: #0b0d0c; display: grid; align-items: end; }
.phero > .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .62)); }
.phero .copy { position: relative; z-index: 2; display: grid; gap: 22px; align-content: end; padding-block: 140px clamp(56px, 10svh, 120px); width: 100%; }
.phero h1 { font-size: clamp(44px, 6vw, 96px); line-height: 1; max-width: 10.5em; }
.phero .lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 30em; }
.phero .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.phero .acts .more { color: var(--on-dark); }
.phero.shot .copy { padding-bottom: clamp(56px, 12svh, 140px); }
.phero .shotbox { position: absolute; z-index: 1; right: max(-6vw, -90px); bottom: calc(-1 * clamp(60px, 9vw, 140px)); }
.phero .shotbox .glass { width: min(52vw, 960px, calc(64svh * var(--w) / var(--h))); }
.phero.shot h1 { font-size: clamp(40px, 4.8vw, 76px); max-width: 9.5em; }
.phero.shot .copy > * { max-width: min(44vw, 640px); }
.js .phero h1, .js .phero .lede, .js .phero .acts { animation: word 1.2s var(--rise) both; }
.js .phero .lede { animation-delay: .12s; } .js .phero .acts { animation-delay: .24s; }
.js .phero .shotbox { animation: rise 1.4s var(--rise) .2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } }

/* Statement under a hero (the page in one or two sentences, for people and for search). */
.say1 { display: grid; justify-items: center; gap: 26px; text-align: center; }
.say1 p { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.2vw, 50px); line-height: 1.16; letter-spacing: -0.014em; max-width: 22em; text-wrap: balance; }

/* Split: a large picture or film with the product on it as glass, beside one heading and a few lines. */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.rev .media { order: 2; }
.split .media { position: relative; overflow: hidden; aspect-ratio: 6 / 5; container-type: size; background: #1a1d1b; }
.split .media.tall { aspect-ratio: 4 / 5; }
.split .media > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split .media .on-it { position: absolute; inset: 0; display: grid; place-items: center; padding: 7%; }
.split .media .on-it .glass { width: min(86cqw, calc(80cqh * var(--w) / var(--h))); }
.split .media .on-it.bleed { place-items: start; padding: 12% 0 0 9%; }
.split .media .on-it.bleed .glass { width: 128cqw; }
.split .txt { display: grid; gap: 20px; align-content: center; }
.split h2 { font-size: clamp(32px, 3.4vw, 52px); max-width: 12em; }
.split .txt > p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.ticks { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.ticks li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ticks li b { font-weight: 500; }

/* Wide: a full-bleed film or photo with the product centred on it as glass. */
.wide { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: #0d0f0e; padding-block: clamp(110px, 10vw, 170px); }
.wide > .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.wide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .18) 34%, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, .55)); }
.wide .head { display: grid; gap: 18px; margin-bottom: clamp(48px, 5vw, 80px); }
.wide h2 { font-size: clamp(36px, 4.2vw, 64px); max-width: 12em; }
.wide .head p { font-size: clamp(16px, 1.2vw, 19px); color: rgba(255, 255, 255, .84); max-width: 32em; }
.wide .shot { margin-inline: auto; width: min(100%, 1180px); }

/* Drag row (bbf): cards of product steps on photos; grab and throw. */
.dragsec .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; margin-bottom: 40px; }
.dragsec h2 { font-size: clamp(34px, 3.6vw, 56px); max-width: 12em; }
.drag { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.drag.grabbing { cursor: grabbing; }
.drag .track { display: flex; gap: 14px; width: max-content; padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); will-change: transform; }
.dcard { width: clamp(280px, 30vw, 420px); flex: none; display: grid; gap: 16px; }
.dcard .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 5; container-type: size; background: #1a1d1b; }
.dcard .ph > img.bgi, .dcard .ph > video.bgi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.dcard .ph .on-it { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; }
.dcard .ph .on-it .glass { width: 88cqw; }
.dcard .ph .on-it img { pointer-events: none; -webkit-user-drag: none; }
.dcard .cap { display: grid; gap: 4px; }
.dcard .cap b { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.7vw, 26px); letter-spacing: -0.01em; line-height: 1.15; }
.dcard .cap span { font-size: 14.5px; color: var(--ink-2); max-width: 26em; }
.dcard .cap i { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3); letter-spacing: .06em; }
.ctl { display: flex; align-items: center; gap: 10px; }
.ctl button { width: 44px; height: 44px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); cursor: pointer; font-size: 16px; transition: background-color .3s, color .3s; }
.ctl button:hover { background: var(--night); color: var(--paper); }

/* One quote, large. */
.quote1 { display: grid; gap: 30px; }
.quote1 blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.14; letter-spacing: -0.014em; max-width: 21em; text-wrap: balance; }
.quote1 figcaption { font-size: 15px; color: var(--ink-2); } .quote1 figcaption b { font-weight: 500; color: var(--ink); }

/* Facts in columns (security, numbers). */
.cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cols > div { padding: 26px 26px 0 0; display: grid; gap: 10px; align-content: start; }
.cols > div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.cols dt, .cols h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -0.01em; }
.cols dd, .cols p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.on-black .cols { border-color: var(--on-dark-line); } .on-black .cols > div + div { border-color: var(--on-dark-line); } .on-black .cols dd, .on-black .cols p { color: var(--on-dark-2); }
.cols .big-n, .big-n { font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }

/* Simple data table (sub-processors and similar). */
.dtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtable th, .dtable td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.dtable thead th { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.on-black .dtable th, .on-black .dtable td { border-color: var(--on-dark-line); } .on-black .dtable thead th { color: var(--on-dark-2); }

/* Kunskapsbank: filters, a featured story, and a grid of covers. */
.kb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-bottom: 44px; }
.kb-head h2 { font-size: clamp(34px, 3.6vw, 56px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: none; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-size: 14px; color: var(--ink-2); transition: background-color .3s, color .3s, box-shadow .3s; }
.filters button[aria-pressed="true"] { background: var(--night); color: var(--paper); box-shadow: none; }
.kb-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; text-decoration: none; margin-bottom: clamp(56px, 6vw, 96px); }
.kb-feature .ph { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #1a1d1b; }
.kb-feature .ph > img, .kb-feature .ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ez); }
.kb-feature:hover .ph > img, .kb-feature:hover .ph > video { transform: scale(1.03); }
.kb-feature .t { display: grid; gap: 16px; }
.kb-feature h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3vw, 46px); line-height: 1.1; letter-spacing: -0.014em; text-wrap: balance; }
.kb-feature p { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 32em; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-3); }
.meta b { font-weight: 500; color: var(--green); }
.kb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 18px; }
.kb-card { display: grid; gap: 14px; align-content: start; text-decoration: none; }
.kb-card[hidden] { display: none; }
.kb-card .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #e8ebe9; }
.kb-card .ph > img, .kb-card .ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ez); }
.kb-card:hover .ph > img, .kb-card:hover .ph > video { transform: scale(1.04); }
.kb-card .ph .ph-note { position: absolute; inset: 0; display: grid; place-items: center; padding: 18%; text-align: center; font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.2; color: var(--ink-2); }
.kb-card h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.6vw, 25px); line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
.kb-card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* Team. */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 14px; }
.person { display: grid; gap: 12px; align-content: start; }
.person .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #e8ebe9; }
.person .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter .8s var(--ez), transform 1.4s var(--ez); }
.person:hover .ph img { filter: none; transform: scale(1.03); }
.person b { font-weight: 500; font-size: 16px; } .person span { font-size: 14px; color: var(--ink-2); }

/* Contact. */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.contact .ways { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contact .ways > div { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact .ways small { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.contact .ways span, .contact .ways a { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); letter-spacing: -0.01em; text-decoration: none; user-select: all; }
.formbox { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 40px); background: #1a1d1b; }
.formbox > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.formbox form { position: relative; display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 32px); border-radius: 22px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 40px 90px -40px rgba(0, 0, 0, .6); }
.formbox label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.formbox input, .formbox textarea, .formbox select { font: inherit; font-size: 15px; color: var(--ink); padding: 12px 14px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(17, 20, 18, .1); }
.formbox textarea { min-height: 110px; resize: vertical; }
.formbox .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formbox .note { font-size: 13.5px; color: var(--ink-2); }

/* Black page section (security). */
.on-black { background: var(--night); color: var(--on-dark); }

@media (max-width: 1100px) {
  .split, .split.rev, .kb-feature, .contact { grid-template-columns: minmax(0, 1fr); }
  .split.rev .media { order: 0; }
  .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; border-top: 0; }
  .cols > div, .cols > div + div { padding: 22px 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .on-black .cols > div { border-color: var(--on-dark-line); }
  .phero .shotbox { right: -12vw; bottom: -6vw; opacity: .95; } .phero .shotbox .glass { width: min(86vw, calc(40svh * var(--w) / var(--h))); }
  .phero.shot .copy > * { max-width: none; } .phero.shot .copy { padding-bottom: clamp(56px, 30svh, 300px); }
}
@media (max-width: 720px) {
  .kb-grid, .team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 12px; }
  .kb-grid { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .formbox .row2 { grid-template-columns: minmax(0, 1fr); }
  .phero .shotbox { display: none; }
  .split .media { aspect-ratio: 4 / 5; }
}

/* ---------- subpage extras ---------- */
.sec-h { font-size: clamp(34px, 3.6vw, 56px); margin-bottom: clamp(36px, 4vw, 56px); max-width: 13em; }
.sec-h .dim, .say1 .dim { color: var(--ink-3); }
.split .media .on-it .duo-exit { position: relative; width: min(92cqw, calc(86cqh * 1.61)); aspect-ratio: 1.61; }
.split .media .on-it .duo-exit .make { position: absolute; left: 0; top: 0; width: 56%; }
.split .media .on-it .duo-exit .lock { position: absolute; right: 0; bottom: 0; width: 60%; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 50px 100px -30px rgba(0, 0, 0, .7); }

/* voices: teachers' own words with a small portrait or initials */
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.voice { display: grid; gap: 22px; align-content: space-between; padding: clamp(24px, 2.6vw, 36px); background: var(--green-wash); border-radius: 4px; }
.voice blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.3; letter-spacing: -0.008em; }
.voice figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.voice figcaption img, .voice figcaption .ini { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.voice figcaption .ini { display: grid; place-items: center; background: var(--green); color: var(--paper); font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.voice figcaption span { display: grid; gap: 1px; } .voice figcaption b { font-weight: 500; color: var(--ink); }

/* questions teachers ask */
.qcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.qcols > div { padding: 26px 26px 0 0; } .qcols > div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.qcols h3 { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.qcols ul { display: grid; gap: 14px; } .qcols li { font-family: var(--serif); font-weight: 300; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; letter-spacing: -0.006em; }

.trustline { display: grid; gap: 24px; justify-items: start; }
.trustline h2 { font-size: clamp(30px, 3vw, 46px); }
.trustline .ticks { min-width: min(100%, 520px); }

/* photo band: a full-bleed photograph carrying one statement */
.photoband { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: #111; min-height: clamp(560px, 86svh, 920px); display: grid; align-items: end; }
.photoband > .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photoband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .7)); }
.photoband .copy { display: grid; gap: 20px; padding-block: 120px clamp(56px, 8vw, 110px); }
.photoband h2 { font-size: clamp(36px, 4.4vw, 68px); max-width: 13em; }
.photoband h2 .dim { color: rgba(255, 255, 255, .55); }
.photoband p { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .84); max-width: 34em; }

/* two photographs side by side, no text */
.pics { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: end; }
.pics figure { position: relative; overflow: hidden; background: #e8ebe9; }
.pics figure:first-child { aspect-ratio: 3 / 4; } .pics figure:last-child { aspect-ratio: 4 / 3; }
.pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the team as a list of names */
.names { border-top: 1px solid var(--line); margin-top: 8px; }
.names li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.names li span { color: var(--ink-2); }

/* a sticky row of section links (Kunskapsbank) */
.subnav { position: sticky; z-index: 30; top: calc(78px + env(safe-area-inset-top, 0px)); margin-top: clamp(40px, 5vw, 64px); }
.subnav .wrap { display: flex; justify-content: center; }
.subnav nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(17, 20, 18, .07), 0 12px 30px -16px rgba(0, 0, 0, .3); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.subnav nav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 9px 16px; border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--ink-2); transition: background-color .3s, color .3s; }
.subnav a:hover, .subnav a.on { background: var(--night); color: var(--paper); }
.kb-sec { scroll-margin-top: 150px; }

/* partners */
.partners { border-top: 1px solid var(--line); }
.partners > div { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.partners img, .partners .plus { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); padding: 8px; }
.partners .plus { display: grid; place-items: center; font-size: 26px; font-weight: 300; color: var(--ink-2); }
.partners b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); letter-spacing: -0.01em; }
.partners small { display: block; margin: 2px 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.partners p { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 40em; }

/* the EU list on black */
.eu { padding-block: clamp(110px, 11vw, 180px); }
.eu h2 { font-size: clamp(40px, 5vw, 80px); line-height: 1; max-width: 12em; }
.eu .lede { margin-top: 24px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: var(--on-dark-2); max-width: 36em; }
.eu ul { margin-top: clamp(56px, 6vw, 90px); border-top: 1px solid var(--on-dark-line); }
.eu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--on-dark-line); }
.eu li b { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.012em; }
.eu li span { font-size: 15px; color: var(--on-dark-2); display: inline-flex; align-items: center; gap: 10px; }
.eu li span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.eu .note { margin-top: 22px; font-size: 14px; color: var(--on-dark-2); }

/* two captioned photo cards (with / without) */
.duo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.duo-cards figure { display: grid; gap: 16px; }
.duo-cards .ph { position: relative; overflow: hidden; aspect-ratio: 16 / 11; background: #e8ebe9; }
.duo-cards .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo-cards figcaption b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); letter-spacing: -0.01em; }
.duo-cards figcaption span { font-size: 15px; color: var(--ink-2); }

.copybtn { margin-left: 10px; height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: none; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; cursor: pointer; vertical-align: middle; font-family: var(--sans); }
.kb-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kb-topics > div { padding: 26px; background: var(--green-wash); border-radius: 4px; display: grid; gap: 8px; }
.kb-topics b { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.7vw, 26px); letter-spacing: -0.01em; }
.kb-topics span { font-size: 14px; color: var(--ink-2); }

@media (max-width: 1100px) {
  .vgrid, .duo-cards, .kb-topics { grid-template-columns: minmax(0, 1fr); }
  .qcols { grid-template-columns: minmax(0, 1fr); } .qcols > div, .qcols > div + div { padding: 24px 0 0; border-left: 0; } .qcols > div + div { border-top: 1px solid var(--line); margin-top: 24px; }
  .pics { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .partners > div { grid-template-columns: 56px minmax(0, 1fr); } .partners > div > :last-child:not(:nth-child(2)) { grid-column: 2; }
  .eu li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

.lead2 { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.split-note { margin-top: clamp(40px, 4vw, 64px); display: grid; gap: 12px; max-width: 46em; }
.split-note h3 { font-size: clamp(24px, 2vw, 30px); } .split-note p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.sec2 { margin-top: clamp(48px, 5vw, 80px); }
.cols dd b, .cols p b { font-weight: 500; color: var(--ink); }
.split .media .on-it:empty { display: none; }

/* ---------- a page that is always black (Data och säkerhet) ---------- */
body:has(main.black) { background: var(--night); }
main.black { --ink: #ffffff; --ink-2: rgba(255, 255, 255, .66); --ink-3: rgba(255, 255, 255, .46); --line: rgba(255, 255, 255, .14); --hair: rgba(255, 255, 255, .1); --green-wash: rgba(255, 255, 255, .06);
  background: var(--night); color: var(--ink); padding-bottom: clamp(96px, 9vw, 140px); }   /* black space between the painted band and the painted footer */
main.black .ticks li::before { background: var(--signal); }
main.black .split .media { background: #111; }
main.black .faq details[open] summary .pm { background: var(--paper); color: var(--night); }
main.black .eu { padding-block: clamp(80px, 8vw, 130px) 0; }
main.black .cta .card2 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
main.black + .foot { margin-top: 0; }
/* Data och säkerhet: the footer on the blue painting, as on gradr.se/trust (the painting under a navy veil),
   with black space between it and the painted band above */
body:has(main.black) .foot { position: relative; isolation: isolate; overflow: hidden; background: #07101f; }
body:has(main.black) .foot::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/paint-trust-hero-horizon.jpg") center top / cover no-repeat; }
body:has(main.black) .foot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(7, 16, 31, .62), rgba(7, 16, 31, .76) 55%, rgba(7, 16, 31, .7)); }
body:has(main.black) .foot .base { border-top-color: rgba(255, 255, 255, .16); }

/* ================= editorial subpages (the Mannheimer Swartling feel) =================
   A centred serif title on the page itself (no picture hero), a quiet column of text with the
   group's pages on the left and a demo card on the right, then pictures inside the page with a
   caption, hairlines between sections, a warm band for key figures and one for "Läs mer". */
:root { --stone: #efebe4; --page: #ffffff; }
main.black { --stone: #0d0f0e; --page: #000000; }
main.ed { padding-top: calc(68px + env(safe-area-inset-top, 0px)); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 22px; font-size: 12.5px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.crumbs i { font-style: normal; opacity: .6; }
.ptitle { text-align: center; padding-block: clamp(56px, 7vw, 112px) clamp(44px, 5vw, 80px); }
.ptitle h1 { font-size: clamp(44px, 5vw, 80px); line-height: 1.02; max-width: 14em; margin-inline: auto; }
.pbody { display: grid; grid-template-columns: 210px minmax(0, 1fr) 270px; gap: clamp(28px, 4vw, 72px); align-items: start; padding-bottom: clamp(72px, 7vw, 120px); }
.side { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); display: grid; gap: 1px; font-size: 13.5px; }
.side a { padding: 6px 0; color: var(--ink-2); text-decoration: none; transition: color .25s; }
.side a:hover { color: var(--ink); } .side a[aria-current="page"], .side a.on { color: var(--ink); font-weight: 500; }
.col { display: grid; gap: 20px; max-width: 700px; }
.col .lead { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.36; letter-spacing: -0.006em; color: var(--ink); }
.col > p { font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.col .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 8px; }
.aside-card { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ink); font-size: 14px; }
.aside-card small { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.aside-card b { font-family: var(--serif); font-weight: 300; font-size: 24px; letter-spacing: -0.01em; }
.aside-card p { color: var(--ink-2); line-height: 1.55; }
.aside-card .btn, .aside-card .pill { justify-self: start; margin-top: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .35s var(--ez), color .35s var(--ez); }
.btn:hover { background: var(--ink); color: var(--page); }

.bigpic { padding-bottom: clamp(72px, 7vw, 120px); }
.bigpic .frame { position: relative; overflow: hidden; aspect-ratio: 16 / 8.6; background: #1a1d1b; container-type: size; }
.bigpic .frame > img, .bigpic .frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bigpic .frame .on-it { position: absolute; inset: 0; display: grid; place-items: center; padding: 5%; }
.bigpic .frame .on-it .glass { width: min(68cqw, calc(72cqh * var(--w) / var(--h))); }
.bigpic .frame .on-it.left { place-items: center start; padding-left: 6%; }
.bigpic .frame .on-it.left .glass { width: min(44cqw, calc(64cqh * var(--w) / var(--h))); }
@media (max-width: 720px) { .bigpic .frame .on-it.left { place-items: end center; padding: 6%; } .bigpic .frame .on-it.left .glass { width: 88cqw; } }
.bigpic figcaption { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

.csec { display: grid; justify-items: center; gap: 22px; text-align: center; padding-block: clamp(80px, 8vw, 130px); border-top: 1px solid var(--line); }
.csec h2 { font-size: clamp(32px, 3.2vw, 50px); max-width: 16em; }
.csec > p { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); max-width: 40em; }
.csec .ticks { text-align: left; width: min(100%, 620px); }

.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-block: clamp(80px, 8vw, 130px); border-top: 1px solid var(--line); }
.split2.rev > .ph { order: 2; }
.split2 > .ph { position: relative; overflow: hidden; aspect-ratio: 5 / 4; background: #1a1d1b; container-type: size; }
.split2 > .ph.tall { aspect-ratio: 4 / 5; }
.split2 > .ph > img, .split2 > .ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split2 > .ph .on-it { position: absolute; inset: 0; display: grid; place-items: center; padding: 7%; }
.split2 > .ph .on-it .glass { width: min(76cqw, calc(74cqh * var(--w) / var(--h))); }
.split2 > .ph .on-it .duo-exit { position: relative; width: min(84cqw, calc(76cqh * 1.61)); aspect-ratio: 1.61; }
.split2 > .ph .on-it .duo-exit .make { position: absolute; left: 0; top: 0; width: 56%; }
.split2 > .ph .on-it .duo-exit .lock { position: absolute; right: 0; bottom: 0; width: 60%; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 50px 100px -30px rgba(0, 0, 0, .7); }
.split2 .t { display: grid; gap: 18px; max-width: 32em; }
.split2 h2 { font-size: clamp(28px, 2.6vw, 42px); }
.split2 .t > p { font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.split2 .t .btn, .split2 .t .pill { justify-self: start; margin-top: 6px; }

.figures { background: var(--stone); padding-block: clamp(80px, 8vw, 130px); }
.figures .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.figures h2 { font-size: clamp(22px, 1.8vw, 28px); }
.figures dl > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 16px 0 18px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.figures dt { font-family: var(--serif); font-weight: 300; font-size: clamp(60px, 7.4vw, 124px); line-height: .92; letter-spacing: -0.035em; }
.figures dd { margin: 0; font-size: 15px; color: var(--ink-2); }

.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.grid4 > * { display: grid; gap: 12px; align-content: start; padding: 28px 20px 0; border-left: 1px solid var(--line); text-decoration: none; }
.grid4 > :first-child { border-left: 0; padding-left: 0; } .grid4 > :last-child { padding-right: 0; }
.grid4 .ph { position: relative; overflow: hidden; height: clamp(300px, 28vw, 520px); background: #1a1d1b; container-type: size; }   /* one height for all four, whatever each column's width */
.grid4 .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grid4 .ph .on-it { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; }
.grid4 .ph .on-it .glass { width: min(84cqw, calc(80cqh * var(--w) / var(--h))); }   /* inside the 8% padding, so every panel sits centred */
.grid4 h3 { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; margin-top: 6px; }
.grid4 p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
/* cards of equal width, the panel centred in each square picture */
.grid4.eq { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; }
.grid4.eq > *, .grid4.eq > :first-child, .grid4.eq > :last-child { padding: 28px 0 0; border-left: 0; }
.grid4.eq .ph { aspect-ratio: 1 / 1; }
.grid4.eq .ph .on-it { padding: 6%; }
.grid4.eq .ph .on-it .glass { width: min(88cqw, calc(var(--w) / 1210 * 88cqw), calc(84cqh * var(--w) / var(--h))); }   /* one scale for every panel, so their text reads the same size */
@media (max-width: 1100px) { .grid4.eq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid4.eq { grid-template-columns: minmax(0, 1fr); } }
.sec3 { padding-block: clamp(80px, 8vw, 130px); border-top: 1px solid var(--line); }
.sec3 > h2 { text-align: center; font-size: clamp(32px, 3.2vw, 50px); margin-bottom: clamp(40px, 4vw, 64px); }

.readmore { background: var(--stone); padding-block: clamp(72px, 7vw, 116px); text-align: center; }
.readmore h2 { font-size: clamp(26px, 2.4vw, 36px); margin-bottom: 30px; }
.readmore .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 760px; margin-inline: auto; }
.readmore .links a { display: inline-flex; align-items: center; height: 46px; padding: 0 30px; border-radius: 999px; border: 1px solid var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background-color .35s var(--ez), color .35s var(--ez); }
.readmore .links a:first-child, .readmore .links a:hover { background: var(--ink); color: var(--page); }

/* people and their words, alternating like a staff page */
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: 44px; }
.prow:nth-child(even) { grid-template-columns: 240px minmax(0, 1fr); } .prow:nth-child(even) > .face { order: -1; }
.prow .face { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--stone); }
.prow .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prow b { display: block; font-size: 15px; font-weight: 600; } .prow small { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
.prow blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.3; letter-spacing: -0.008em; }
.qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.qgrid > figure { display: grid; gap: 18px; align-content: space-between; padding: 30px 26px 34px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qgrid > figure:nth-child(3n + 1) { border-left: 0; padding-left: 0; } .qgrid > figure:nth-child(3n) { padding-right: 0; }
.qgrid blockquote { font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1.36; }
.qgrid figcaption { font-size: 13.5px; color: var(--ink-2); } .qgrid figcaption b { display: block; font-weight: 600; color: var(--ink); }

/* news grid with hairlines, filters on underlines */
.nfilters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.nfilters input, .nfilters select { width: 100%; height: 44px; border: 0; border-bottom: 1px solid var(--ink); background: none; font: inherit; font-size: 14.5px; color: var(--ink); border-radius: 0; padding: 0 2px; }
.nfilters select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 20px, calc(100% - 7px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.newsgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nitem { display: grid; gap: 10px; align-content: start; padding: 0 18px 46px; border-left: 1px solid var(--line); text-decoration: none; }
.nitem[hidden] { display: none; }
.newsgrid > .nitem:nth-child(4n + 1) { border-left: 0; padding-left: 0; } .newsgrid > .nitem:nth-child(4n) { padding-right: 0; }
.nitem .ph { position: relative; overflow: hidden; background: #e8ebe9; }
.nitem .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ez); }
.nitem:hover .ph img { transform: scale(1.04); }
.nitem .ph .ph-note { position: absolute; inset: 0; display: grid; place-items: center; padding: 14%; text-align: center; font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.2; color: var(--ink-2); }
.nitem h3 { font-size: 16.5px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; margin-top: 6px; }
.nitem .cat { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.nitem .date { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nempty { text-align: center; color: var(--ink-2); padding: 40px 0; }

/* list rows (devlog, articles) */
.lrows > a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: 40px; border-top: 1px solid var(--line); text-decoration: none; }
.lrows > a:last-child { border-bottom: 1px solid var(--line); }
.lrows .ph { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #1a1d1b; }
.lrows .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ez); }
.lrows > a:hover .ph img { transform: scale(1.03); }
.lrows .t { display: grid; gap: 12px; }
.lrows h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
.lrows p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 36em; }

/* contact form on underlines */
.uform { display: grid; gap: 22px; max-width: 760px; margin-inline: auto; text-align: left; width: 100%; }
.uform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.uform label { display: grid; gap: 4px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.uform input, .uform select, .uform textarea { border: 0; border-bottom: 1px solid var(--ink); background: none; font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); padding: 10px 2px; border-radius: 0; }
.uform textarea { min-height: 120px; resize: vertical; }
.uform .note { font-size: 14px; color: var(--ink-2); text-transform: none; letter-spacing: 0; }

/* hairlines between sections run the width of the text column, not the screen */
.csec, .split2, .sec3, .csec2 { position: relative; border-top: 0; }
.csec::before, .split2::before, .sec3::before, .csec2::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.csec2 { padding-block: clamp(80px, 8vw, 130px); }
.first { padding-top: 0 !important; } .first::before, :is(.figures, .readmore) + :is(.csec, .split2, .sec3, .csec2)::before { display: none; }
.lrows .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lrows .meta b { font-weight: 500; color: var(--ink-2); }
.lrows .more { margin-top: 4px; font-size: 13.5px; color: var(--ink); }
.lrows > a:hover .more span { transform: translate(2px, -2px); }
main.ed .compare h2 { text-align: center; margin-inline: auto; }
main.black .readmore .links a:first-child, main.black .readmore .links a:hover, main.black .btn:hover { color: var(--page); }
main.black .crumbs a:hover { color: var(--ink); }

/* ================= motion: the star (intro + page to page) ================= */
.veil { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; }
.veil .bg { position: absolute; inset: 0; background: var(--paper); }
.veil .fly { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; color: var(--night); }
.veil .word { position: absolute; top: 50%; right: calc(50% + 56px); transform: translateY(-50%); font-family: var(--serif); font-weight: 300; font-size: 22px; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; }
html.star-intro .veil, html.star-arrive .veil { visibility: visible; animation: veilSafety 0s linear 9s forwards; }
@keyframes veilSafety { to { visibility: hidden; } }
html.star-intro .hero h1 .w, html.star-intro .hero .copy .pill, html.star-arrive .hero h1 .w, html.star-arrive .hero .copy .pill { animation-play-state: paused; }

/* the rebrand story: "Tack för N dagar med Gradr …" → gradr rolls over into Forma (first visit, and the header's play button) */
html.telling { overflow: hidden; }
.veil .tale { position: absolute; inset: 0; color: var(--ink); }
.tale .dust { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.tale > div { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding-inline: var(--pad); text-align: center; }
.tale p, .tale .gr { opacity: 0; will-change: transform, opacity; }
.tale .lead { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.9vw, 44px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-2); }
.tale .cap { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tale .s1 .cap { margin-top: 10px; }
.tale .num { display: flex; font-family: var(--serif); font-weight: 300; font-size: clamp(104px, 16vw, 232px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.tale .num span { display: block; height: 1.2em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.tale .num i { display: block; font-style: normal; will-change: transform; }
.tale .num b { display: block; height: 1.2em; line-height: 1.2; font-weight: inherit; }
.tale .say { max-width: 17ch; font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.8vw, 76px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.tale .say em { font-style: italic; }   /* "format": the word the new name comes out of */
.tale .s2 { gap: 22px; }
.tale .s2 .say { max-width: 24ch; }
.tale .s3 .say { max-width: 28ch; }
.tale .s4 { gap: 26px; }
.tale .s4 .gr { position: relative; height: clamp(72px, 11vw, 160px); aspect-ratio: 4043 / 1166; }
.tale .gr img { position: absolute; top: 0; height: 100%; display: block; max-width: none; will-change: transform, opacity, filter; }
.tale .gr img:first-child { transform-origin: 50.6% 47.3%; }   /* the swirl's own centre (543.5, 551 in its 1074 × 1166 cut) */
.tale .s5 { color: #fff; gap: 10px; justify-content: stretch; }   /* a full-width track, so the star's frame does not move when the line above grows */
.tale .s5 .lead { color: rgba(255, 255, 255, .64); }
.tale .s6 .say { color: #fff; }
.tale .lw { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: pre; width: 0; opacity: 0; }   /* " formativt." opens at the end of the line as "tivt" falls */
/* the light behind the name: wide, blurred and eased in many small steps so it never shows an edge or a band */
.tale .glow { position: absolute; left: 50%; top: 50%; width: min(150vw, 1600px); aspect-ratio: 16 / 10; translate: -50% -50%; opacity: 0; pointer-events: none; filter: blur(28px);
  background: radial-gradient(closest-side, rgba(200, 255, 226, .15), rgba(200, 255, 226, .128) 14%, rgba(200, 255, 226, .1) 28%, rgba(200, 255, 226, .07) 42%,
    rgba(200, 255, 226, .044) 56%, rgba(200, 255, 226, .023) 70%, rgba(200, 255, 226, .009) 84%, rgba(200, 255, 226, 0)); }
.tale .swap { position: relative; width: 100%; height: 1.36em; font-size: clamp(72px, 11vw, 168px); }
.tale .fo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: .26em; font-family: var(--logo-face); font-weight: 400; letter-spacing: -0.012em; line-height: 1; white-space: nowrap; color: #fff; will-change: transform; }
.tale .fo .s { width: 0; margin-right: -.26em; height: var(--mk-h); transform: translateY(var(--mk-y)); }   /* the header logo's lockup, so the flight lands exactly; it opens when the rhombus comes */
.tale .fo.ghost { visibility: hidden; }
.tale .fo.ghost .s { width: var(--mk-w); margin-right: 0; }   /* the finished lockup, measured so the star knows where to land */
.tale .fo .s svg { opacity: 0; }
.tale .fw { position: relative; display: inline-flex; }
.tale .fo:not(.ghost) .fw > i { display: inline-block; font-style: normal; opacity: 0; will-change: transform, opacity; }
.tale .fw .ff { position: relative; }
.tale .fw .ff b { display: inline-block; font-weight: inherit; }
.tale .fw .ff b + b { position: absolute; left: 0; top: 0; opacity: 0; }
/* light running across the name once it stands: a glowing copy shown only through a moving band */
.tale .fw.sheen::after { content: attr(data-t); position: absolute; left: 0; top: 0; color: #fff; pointer-events: none;
  text-shadow: 0 0 .16em rgba(206, 255, 228, .9), 0 0 .5em rgba(170, 255, 210, .4);
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: fsheen 2.1s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes fsheen { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
/* the small star in the dark: a rhombus with a halo and a thin cross of light; it later grows into the mark */
.tale .twinkle { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tale .lift { position: absolute; left: 0; top: 0; }
.tale .twinkle svg { position: absolute; left: 0; top: 0; color: #fff; opacity: 0; transform-origin: 50% 50%; }
.tale .spark { position: absolute; left: 0; top: 0; opacity: 0; }
.tale .spark b { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(closest-side, rgba(220, 255, 236, .5), rgba(220, 255, 236, .16) 45%, rgba(220, 255, 236, 0)); }
.tale .spark i::before, .tale .spark i::after { content: ""; position: absolute; }
.tale .spark i::before { left: -34px; top: -.5px; width: 68px; height: 1px; background: linear-gradient(90deg, rgba(235, 255, 245, 0), rgba(235, 255, 245, .9), rgba(235, 255, 245, 0)); }
.tale .spark i::after { left: -.5px; top: -34px; width: 1px; height: 68px; background: linear-gradient(180deg, rgba(235, 255, 245, 0), rgba(235, 255, 245, .9), rgba(235, 255, 245, 0)); }
.vskip { position: fixed; z-index: 301; right: var(--pad); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); height: 34px; padding: 0 15px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px rgba(17, 20, 18, .14); color: var(--ink-2); font-family: var(--sans); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .3s, box-shadow .3s; }
.vskip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(17, 20, 18, .4); }
.vskip.night { color: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.vskip.night:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }

@media (max-width: 1100px) {
  .pbody { grid-template-columns: minmax(0, 1fr); } .side { position: static; display: flex; flex-wrap: wrap; gap: 4px 18px; } .aside-card { max-width: 420px; }
  .split2, .split2.rev { grid-template-columns: minmax(0, 1fr); } .split2.rev > .ph { order: 0; }
  .figures .wrap { grid-template-columns: minmax(0, 1fr); }
  .grid4, .newsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid4 > *, .grid4 > :first-child, .grid4 > :last-child { padding: 28px 0 0; border-left: 0; }
  .grid4 { gap: 0 18px; }
  .newsgrid > .nitem, .newsgrid > .nitem:nth-child(4n + 1), .newsgrid > .nitem:nth-child(4n) { border-left: 0; padding: 0 0 40px; } .newsgrid { gap: 0 18px; }
  .nfilters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nfilters .search { grid-column: 1 / -1; }
  .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qgrid > figure, .qgrid > figure:nth-child(3n + 1), .qgrid > figure:nth-child(3n) { border-left: 0; padding: 26px 0 30px; } .qgrid { gap: 0 24px; }
  .prow, .prow:nth-child(even) { grid-template-columns: minmax(0, 1fr) 180px; } .prow:nth-child(even) > .face { order: 0; }
  .lrows > a { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .grid4, .newsgrid, .qgrid { grid-template-columns: minmax(0, 1fr); }
  .prow, .prow:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .prow .face { max-width: 220px; }
  .uform .row2 { grid-template-columns: minmax(0, 1fr); }
  .nfilters { grid-template-columns: minmax(0, 1fr); }
  .veil .word { right: auto; left: 50%; top: calc(50% + 56px); transform: translateX(-50%); }
}
@media (max-width: 480px) { .nav .replay { display: none; } }   /* on a phone the play button lives in the menu panel */
@media (prefers-reduced-motion: reduce) { html:not(.telling) .veil { display: none !important; } }   /* the play button still tells the story, in fades */

/* ================= v11: what the user liked on gradr.se, in Forma's hand =================
   The film heroes that play the whole film (Integrationer, Nyheter), the login panel, the four
   steps and the tiles from the integrations page, the trust page with the blue paintings, the
   devlog's particle field, the news cards, the teachers' carousel, the form on the painting. */

/* larger pictures on the product pages: a full-bleed picture and splits that give the photo more room */
.bigpic.full { padding-inline: 0; max-width: none; }
.bigpic.full .frame { aspect-ratio: 16 / 8.2; }
.bigpic.full figcaption { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.split2.big { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split2.big.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split2.big > .ph { aspect-ratio: 6 / 5; } .split2.big > .ph.tall { aspect-ratio: 1 / 1; }
.split2.big > .ph .on-it .glass { width: min(70cqw, calc(70cqh * var(--w) / var(--h))); }
.cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); text-align: left; width: 100%; }
.cols4 > div { padding: 26px 22px 0 0; display: grid; gap: 10px; align-content: start; }
.cols4 > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.cols4 h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; }
.cols4 p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.cols4.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qsmall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.qsmall > figure { display: grid; gap: 22px; align-content: space-between; padding: 30px 26px 34px; border-left: 1px solid var(--line); }
.qsmall > figure:first-child { border-left: 0; padding-left: 0; } .qsmall > figure:last-child { padding-right: 0; }
.qsmall blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.34; }
.who2 { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.who2 img, .who2 .ini { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; }
.who2 .ini { display: grid; place-items: center; background: #e7e4dd; font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.who2 b { display: block; font-weight: 600; color: var(--ink); }

/* questions and answers, open on the page: each question a heading, each answer a short direct paragraph
   (what generative search engines quote), mirrored in FAQPage JSON-LD */
.kick4 { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--green) 70%, var(--signal)); }
.qa { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 112px); align-items: start; padding-block: clamp(80px, 8vw, 130px); }
.qa::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.qa .qa-head { position: sticky; top: calc(104px + env(safe-area-inset-top, 0px)); }
.qa h2 { margin-top: 14px; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.04; }
.qa-list { border-top: 1px solid var(--line); }
.qa-item { padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
.qa-item h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.8vw, 27px); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.qa-item p { margin-top: 12px; max-width: 40em; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
@media (max-width: 1100px) { .qa { grid-template-columns: minmax(0, 1fr); } .qa .qa-head { position: static; } }

/* a statement on a full-bleed photo (Om oss: the marble bust in the library, the user's own picture) */
.photoline { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(540px, 82svh, 900px); padding-block: 96px; color: #fff; background: #120d0a; }
.photoline > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; }
.photoline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 7, 5, .7) 0%, rgba(10, 7, 5, .42) 36%, rgba(10, 7, 5, 0) 60%); }
.photoline .wrap { width: 100%; }
.photoline p { max-width: 12em; font-size: clamp(30px, 3.2vw, 50px); line-height: 1.12; color: #fff; text-shadow: 0 1px 30px rgba(0, 0, 0, .3); }
@media (max-width: 720px) {
  .photoline { align-items: end; min-height: 78svh; padding-block: 0 48px; }
  .photoline > img { object-position: 64% 30%; }
  .photoline::before { background: linear-gradient(0deg, rgba(10, 7, 5, .82) 0%, rgba(10, 7, 5, .45) 45%, rgba(10, 7, 5, 0) 70%); }
}

/* the film hero: the opener loops silently; "Spela filmen" plays the whole film with sound in the same frame */
.filmhero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: #000; color: #fff; }
.filmhero > .poster, .filmhero > video.loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.filmhero.news > .poster, .filmhero.news > video.loop { object-position: 60% 45%; transform: scale(1.06); }
.filmhero > .shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, transparent 20%), linear-gradient(0deg, rgba(0, 0, 0, .66) 0%, transparent 48%); transition: opacity .5s; }
.filmhero .playwrap { position: absolute; left: 0; right: 0; top: 0; height: 84%; display: grid; place-items: center; pointer-events: none; transition: opacity .5s; }
.glassplay { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 6px 20px 6px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); color: #fff; font: 500 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: transform .45s var(--rise), background-color .3s; }
.glassplay:hover { transform: scale(1.03); background: rgba(255, 255, 255, .2); }
.glassplay .pi { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #000; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .45); }
.glassplay .pi svg { width: 14px; height: 14px; transform: translateX(1px); }
.glassplay .len { font-weight: 400; color: rgba(255, 255, 255, .7); }
.filmhero .copy { position: absolute; left: 0; right: 0; bottom: clamp(36px, 6svh, 56px); transition: opacity .5s; }
.filmhero .copy .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px 40px; }
.filmhero h1 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; max-width: 13em; color: #fff; }
.filmhero h1 .dim { color: rgba(255, 255, 255, .55); }
.filmhero .lead2 { margin-top: 22px; max-width: 33em; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.filmhero .acts { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.filmhero .ulink { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .32); text-underline-offset: 4px; }
.filmhero .ulink:hover { text-decoration-color: #fff; }
.filmhero .ulink { white-space: nowrap; } .filmhero .ulink svg { width: 14px; height: 14px; flex: none; }
.filmhero .marks { display: flex; align-items: center; gap: 16px; padding-bottom: 4px; }
.filmhero .marks .fm { display: inline-flex; align-items: center; gap: 8px; font-family: var(--logo-face); font-size: 25px; line-height: 1; color: #fff; }
.filmhero .marks .fm .s { width: var(--mk-w); height: var(--mk-h); transform: translateY(var(--mk-y)); }
.filmhero .marks .x { font-weight: 300; font-size: 18px; color: rgba(255, 255, 255, .7); }
.filmhero .marks .ss { display: inline-flex; align-items: center; gap: 8px; }
.filmhero .marks .ss img:first-child { width: 24px; height: 24px; border-radius: 50%; }
.filmhero .marks .ss img + img { height: 16.5px; width: auto; filter: brightness(0) invert(1); }
.filmhero > video.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s; }
.filmhero.playing > video.film { opacity: 1; pointer-events: auto; }
.filmhero.playing > .shade, .filmhero.playing .playwrap, .filmhero.playing .copy { opacity: 0; pointer-events: none; }
.filmhero .film-close { position: absolute; z-index: 3; right: var(--pad); top: calc(84px + env(safe-area-inset-top, 0px)); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .42); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.filmhero .film-close svg { width: 16px; height: 16px; }
.filmhero .film-fallback { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(0, 0, 0, .66); color: #fff; font-size: 13.5px; text-decoration: none; white-space: nowrap; }

/* "Logga in en gång. Allt finns där." (IntegrationsLoginSection): the ask on the left, the school's
   platform on a tall panel of frosted glass over the photo; every size in --u, one px of a 923 px photo */
.login2 { display: grid; grid-template-columns: minmax(0, 1fr) 66.3%; gap: 24px; padding-block: clamp(72px, 7vw, 110px); }
.login2 .lask { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-top: 10%; }
.kick2 { font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.kick2 span { text-transform: none; letter-spacing: 0; color: var(--ink); }
.login2 h2 { margin-top: 30px; max-width: 8.5em; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.02; }
.login2 .lfoot p { max-width: 24em; font-size: 15px; line-height: 1.45; }
.chip2 { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 999px; background: rgba(17, 20, 18, .06); font-size: 13px; text-decoration: none; transition: background-color .3s; }
.chip2:hover { background: rgba(17, 20, 18, .1); }
.chip2 img { width: 20px; height: 20px; border-radius: 50%; }
.chip2 i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.chip2 i svg { width: 12px; height: 12px; }
.lstage { position: relative; aspect-ratio: 923 / 834; overflow: hidden; container-type: inline-size; --u: calc(100cqw / 923); --x: calc(var(--u) * 166); background: #cfd3d6; }
.lstage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lpanel { position: absolute; bottom: 0; left: var(--x); top: calc(var(--u) * 80); width: calc(var(--u) * 600); overflow: hidden; padding: calc(var(--u) * 16) calc(var(--u) * 20) 0; border-radius: calc(var(--u) * 44) calc(var(--u) * 44) 0 0; background-color: rgb(186 212 255 / .3); border: 1px solid rgb(255 255 255 / .5); border-bottom: 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 40px 90px -30px rgb(0 0 0 / .35); -webkit-backdrop-filter: blur(calc(var(--u) * 26)) saturate(1.35); backdrop-filter: blur(calc(var(--u) * 26)) saturate(1.35); color: #1d1d1b; font-family: var(--sans); }
.lpanel .ltop { display: flex; align-items: center; justify-content: space-between; }
.lpanel .lchip { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 5) calc(var(--u) * 10) calc(var(--u) * 5) calc(var(--u) * 5); font-size: calc(var(--u) * 19); }
.lpanel .lchip img { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; }
.lpanel .lchip svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: rgb(29 29 27 / .6); }
.lpanel .lavatar { display: grid; place-items: center; width: calc(var(--u) * 52); height: calc(var(--u) * 52); border-radius: 50%; background: rgb(255 255 255 / .7); border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 4px 14px -6px rgb(0 0 0 / .3); font-size: calc(var(--u) * 20); font-weight: 500; }
.lpanel .lhead { margin-top: calc(var(--u) * 92); display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 16); }
.lpanel .lname { font-size: calc(var(--u) * 40); line-height: 1.15; letter-spacing: -0.02em; }
.lpanel .lwhen { flex: none; font-size: calc(var(--u) * 15); color: rgb(29 29 27 / .55); }
.lpanel .lcard { margin-top: calc(var(--u) * 120); display: flex; flex-direction: column; gap: calc(var(--u) * 12); padding: calc(var(--u) * 26); border-radius: calc(var(--u) * 26); background: rgb(255 255 255 / .55); border: 1px solid rgb(255 255 255 / .7); box-shadow: 0 20px 50px -24px rgb(0 0 0 / .3); -webkit-backdrop-filter: blur(calc(var(--u) * 18)); backdrop-filter: blur(calc(var(--u) * 18)); }
.lpanel .llabel { font-size: calc(var(--u) * 15); color: rgb(29 29 27 / .55); }
.lpanel .ldesc { font-size: calc(var(--u) * 16); line-height: 1.5; color: rgb(29 29 27 / .7); }
.lpanel .lopen { margin-top: calc(var(--u) * 8); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 54); border-radius: 999px; background: #161613; color: #fff; font-size: calc(var(--u) * 18); transition: transform .2s ease, box-shadow .2s ease; }
.lpanel .lopen svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.lpanel .lopen.pressed { transform: scale(.97); box-shadow: 0 0 0 calc(var(--u) * 5) color-mix(in srgb, var(--signal) 45%, transparent); }

/* "Från inloggning till vårdnadshavare, sömlöst." (IntegrationsStepsSection): the line on the left, two
   columns of square photo cards, one piece of Forma on each in frosted glass; sizes in --u of a 446 px card */
.steps2 { display: grid; grid-template-columns: minmax(0, 1fr) 32% 32%; column-gap: 2.95%; row-gap: 64px; padding-block: clamp(72px, 7vw, 110px); }
.steps2 > h2 { grid-row: span 2; max-width: 9em; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.14; }
.steps2 figure { margin: 0; }
.scard { position: relative; aspect-ratio: 1; overflow: hidden; container-type: inline-size; --u: calc(100cqw / 446); background: #e7e4dd; font-family: var(--sans); }
.scard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glass-light { position: absolute; background: rgb(255 255 255 / .55); border: 1px solid rgb(255 255 255 / .7); box-shadow: 0 20px 50px -24px rgb(0 0 0 / .3); -webkit-backdrop-filter: blur(calc(var(--u) * 18)); backdrop-filter: blur(calc(var(--u) * 18)); color: #1d1d1b; }
.scard .opill { left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: calc(var(--u) * 14) calc(var(--u) * 34) calc(var(--u) * 15); font-size: calc(var(--u) * 24); line-height: 1; white-space: nowrap; }
.scard .pointer { position: absolute; left: calc(50% + var(--u) * 86); top: calc(50% + var(--u) * 14); width: calc(var(--u) * 34); height: calc(var(--u) * 34); filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 6) rgb(0 0 0 / .3)); }
.scard .write { left: calc(var(--u) * 96); right: calc(var(--u) * -40); top: calc(var(--u) * 78); padding: calc(var(--u) * 20) calc(var(--u) * 16) calc(var(--u) * 16); border-radius: calc(var(--u) * 24); border-right: 0; }
.scard .question { display: block; padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 16); color: rgb(29 29 27 / .7); }
.scard .answer { margin-top: calc(var(--u) * 14); min-height: calc(var(--u) * 196); padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 14); background: rgb(255 255 255 / .75); font-size: calc(var(--u) * 18); line-height: 1.5; }
.scard .caret { display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 19); margin-left: 1px; vertical-align: text-bottom; background: #1d1d1b; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.scard .comment { left: calc(var(--u) * 52); right: calc(var(--u) * 52); top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 11) calc(var(--u) * 20); border-radius: 999px; border: calc(var(--u) * 3) dashed #2fa45c; }
.scard .ctext { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(var(--u) * 18); color: #2a2f3a; }
.scard .dot { flex: none; display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; color: #fff; }
.scard .dot svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.scard .publish { left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--u) * 250); height: calc(var(--u) * 250); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 28); border-radius: calc(var(--u) * 36); font-size: calc(var(--u) * 18); line-height: 1.3; }
.scard .tick { display: grid; place-items: center; width: calc(var(--u) * 56); height: calc(var(--u) * 56); border-radius: 50%; background: #2fa45c; color: #fff; }
.scard .tick svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.steps2 figcaption { margin-top: 26px; }
.steps2 figcaption h3 { font-size: 16px; font-weight: 500; }
.steps2 figcaption p { margin-top: 12px; max-width: 430px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* "Där skolan redan är." (IntegrationsConnectSection): glass tiles on a grey square rise, open out, turn
   a full circle while each moves one place round, and settle with a new tile on top */
@property --spread { syntax: '<number>'; inherits: true; initial-value: 1; }
.connect { display: grid; grid-template-columns: 48.6% minmax(0, 1fr); gap: 40px clamp(40px, 5vw, 80px); padding-block: clamp(72px, 7vw, 110px); }
.cstage { position: relative; aspect-ratio: 1; overflow: hidden; container-type: inline-size; display: grid; place-items: center; background: linear-gradient(to bottom, #cbcbcb, #ececec 70%, #efefef); }
.formation { position: relative; width: 0; height: 0; transition: --spread .7s cubic-bezier(.45, 0, .55, 1), translate .7s cubic-bezier(.45, 0, .55, 1); }
.formation.raised { --spread: 1.25; translate: 0 -3cqw; }
.formation.spun { animation: fturn 1.6s cubic-bezier(.65, 0, .35, 1) both; }
.formation .ftile { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 16cqw; height: 16cqw; translate: calc(-50% + var(--x) * var(--spread) * 1cqw) calc(-50% + var(--y) * var(--spread) * 1cqw); border-radius: 4.2cqw; background: linear-gradient(to bottom, rgb(255 255 255 / .55), rgb(255 255 255 / .3)); border: 1px solid rgb(255 255 255 / .85); box-shadow: inset 0 1px 1px rgb(255 255 255 / .9), inset 0 -2px 2px rgb(0 0 0 / .14), 0 1.2cqw 3.5cqw -1.2cqw rgb(0 0 0 / .2); -webkit-backdrop-filter: blur(1.2cqw) saturate(1.3); backdrop-filter: blur(1.2cqw) saturate(1.3); }
.formation.spun .ftile { animation: funturn 1.6s cubic-bezier(.65, 0, .35, 1) both; }
.formation.moving .ftile { transition: translate 1.6s cubic-bezier(.65, 0, .35, 1); }
.formation .ftile img { width: 62%; height: 62%; object-fit: contain; border-radius: 999px; filter: drop-shadow(0 .4cqw .8cqw rgb(0 0 0 / .12)); }
.formation .ftile img.g { width: 54%; height: 54%; border-radius: 0; filter: none; }
.formation .ftile svg { width: 54%; height: 54%; }
.formation .ftile .fstar { display: grid; place-items: center; width: 56%; height: 56%; color: var(--green); }
.formation .ftile .fstar svg { width: 100%; height: 100%; }
@keyframes fturn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes funturn { from { rotate: 0deg; } to { rotate: -360deg; } }
.connect h2 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.14; }
.connect .sub { margin-top: 20px; font-size: 15px; }
.connect .txt > p.small { margin-top: 30px; max-width: 30em; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.connect dl { margin-top: 44px; max-width: 560px; border-bottom: 1px solid var(--line); }
.connect dl > div { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.connect dl img, .connect dl .plus2 { width: 28px; height: 28px; flex: none; margin-top: 2px; border-radius: 50%; }
.connect dl .plus2 { display: grid; place-items: center; background: var(--signal); color: #0c1a13; }
.connect dl .plus2 svg { width: 15px; height: 15px; }
.connect dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; font-weight: 500; }
.connect dt small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.connect dd { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.connect dd a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--ink); text-underline-offset: 4px; }
.connect dd a svg { width: 14px; height: 14px; }

/* the trust page (gradr.se/trust), black, with the blue paintings in place of the flag and the film */
.thero { padding-top: calc(132px + env(safe-area-inset-top, 0px)); }
.thero .top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.thero .kick3 { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.thero .kick3 b { font-weight: 400; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.thero h1 { margin-top: 18px; font-size: clamp(46px, 5.4vw, 84px); line-height: .98; letter-spacing: -0.02em; }
.thero .side3 { justify-self: end; width: min(100%, 27em); }
.thero .side3 p { max-width: 27em; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.pillw { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 15px; border-radius: 999px; background: #fff; color: #111; font-size: 13px; text-decoration: none; transition: background-color .3s; }
.pillw:hover { background: rgba(255, 255, 255, .86); }
.pillw i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #111; color: #fff; }
.pillw i svg { width: 12px; height: 12px; }
.tpaint { position: relative; margin-top: clamp(48px, 5vw, 72px); aspect-ratio: 2 / 1; overflow: hidden; background: #0b1530; }
.tpaint > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ttiles { position: absolute; left: 50%; top: 70%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 36px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); box-shadow: 0 30px 70px -30px rgba(10, 20, 50, .55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.ttile { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 26px; }
.ttile.side { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .88); }
.ttile.side svg { width: 38px; height: 38px; }
.ttile.centre { background: #f4f2ec; color: var(--green); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); }
.ttile.centre svg { width: 54px; height: 54px; }
.tfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 28px; padding-block: clamp(64px, 7vw, 100px) clamp(100px, 11vw, 176px); }
.tfacts dt { font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 5.2vw, 80px); line-height: 1; letter-spacing: -0.035em; }
.tfacts .lab { display: block; margin-top: 18px; font-size: 15.5px; color: #fff; }
.tfacts dd { margin: 12px 0 0; max-width: 25em; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .55); }
.tsec { padding-block: clamp(64px, 7vw, 110px); }
.tkick { text-align: center; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.th2c { margin: 16px auto 0; max-width: 21em; text-align: center; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.2; }
.tgrid { margin-top: clamp(56px, 6vw, 84px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1); }
.tgrid > li { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 340px; padding: 22px; background: #000; }
.tgrid.tall > li { justify-content: flex-start; gap: 18px; min-height: 0; }
.tgrid h3 { font-size: 15px; font-weight: 500; }
.tgrid p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .58); }
.tgrid .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .82); }
.tgrid .ic svg { width: 18px; height: 18px; }
.tgrid .ic.emb svg { width: 30px; height: 30px; }
.tgrid dl { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.tgrid dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; }
.tgrid dl dt { color: rgba(255, 255, 255, .58); } .tgrid dl dd { margin: 0; text-align: right; white-space: nowrap; }
.tgrid .fine { margin-top: 12px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .42); }
.tgrid .links3 { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .58); } .tgrid .links3 a { color: #fff; }
.trows > .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; padding-block: clamp(48px, 5vw, 72px); border-top: 1px solid rgba(255, 255, 255, .12); }
.trows h2 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; }
.trows .body > p { max-width: 46em; font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.trows ul { margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.trows li { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.trows li h3 { font-size: 14.5px; font-weight: 500; }
.trows li p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .58); }
.tsov { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(560px, 80svh, 860px); display: grid; align-items: center; padding-block: clamp(80px, 9vw, 140px); background: #0b1530; }
.tsov > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tsov::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, .05)); }
.tsov .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; width: 100%; }
.tsov .kick3 { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.tsov h2 { margin-top: 14px; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.04; }
.tsov .wrap > div > p { margin-top: 20px; max-width: 30em; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .84); }
.tsov ul { justify-self: end; width: min(100%, 460px); padding: 8px 22px; border-radius: 24px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); }
.tsov li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); font-size: 15px; }
.tsov li:last-child { border-bottom: 0; }
.tsov li span { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.tsov li span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent); }
.tsov .note3 { margin-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.tpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; padding-block: clamp(56px, 6vw, 96px); }
.tpair + .tpair { border-top: 1px solid rgba(255, 255, 255, .12); }
.tpair h2 { font-size: clamp(28px, 2.6vw, 40px); }
.tpair .body > p { max-width: 46em; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .72); }
.tpair .dtable { margin-top: 20px; width: 100%; }
.tpaintcta { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(360px, 42vw, 520px); display: grid; align-items: end; padding-block: clamp(48px, 5vw, 72px); background: #0b1530; }
.tpaintcta > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tpaintcta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 60%); }
.tpaintcta .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; width: 100%; }
.tpaintcta h2 { font-size: clamp(36px, 4vw, 62px); line-height: 1.04; max-width: 12em; color: #fff; }

/* the devlog: the particle field behind the title (ParticleField.svelte), three entries to a row, the careers card */
.devfield { position: relative; }
.devfield > .surface, .devfield > canvas { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 380px; pointer-events: none; }
.devfield > .surface { background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 68%, transparent 100%); }
.devfield > .inner { position: relative; }
.devhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; padding-top: calc(68px + clamp(64px, 6vw, 96px)); padding-bottom: clamp(40px, 4vw, 56px); }
.devhead h1 { font-size: clamp(48px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.03em; }
.devhead p { max-width: 420px; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-align: right; }
.devgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; padding-bottom: 32px; }
.devgrid > a { display: flex; flex-direction: column; text-decoration: none; }
.devgrid .ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0d100f; }
.devgrid .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ez); }
.devgrid > a:hover .ph img { transform: scale(1.03); }
.devgrid .meta2 { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }
.devgrid .meta2 i { font-style: normal; margin: 0 6px; opacity: .5; }
.devgrid h3 { margin-top: 8px; font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.22; letter-spacing: -0.01em; transition: color .3s; }
.devgrid > a:hover h3 { color: color-mix(in srgb, var(--green) 70%, var(--signal)); }
.devgrid p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.careers { padding-block: clamp(64px, 7vw, 110px); }
.careers .box { max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px; border-radius: 16px; overflow: hidden; background: var(--green-ink); }
.careers .l { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 420px; padding: clamp(24px, 3vw, 36px); color: #fff; }
.careers h2 { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.08; }
.careers .l p { margin-top: 18px; max-width: 24em; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .66); }
.careers .r { position: relative; border-radius: 10px; overflow: hidden; min-height: 300px; }
.careers .r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pillgo { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .3s; }
.pillgo:hover { background: rgba(255, 255, 255, .86); }
.pillgo i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; }
.pillgo i svg { width: 13px; height: 13px; }

/* every post as a story card (NewsStoriesSection + NewsCard): tabs, three tall cards to a row, nine at a time */
.nstories { padding-block: clamp(72px, 7vw, 110px); max-width: calc(1400px + 2 * var(--pad)); }
.nstories > h2 { font-size: clamp(26px, 2.2vw, 32px); }
.ntabs { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px; }
.ntabs button { padding: 7px 11px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: color .25s, background-color .25s; }
.ntabs button:hover { color: var(--ink); }
.ntabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ncards { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; }
.ncard { display: flex; flex-direction: column; text-decoration: none; }
.ncard[hidden] { display: none; }
.ncard .ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e7e4dd; }
.ncard .ph img, .ncard .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.03) saturate(1.02) sepia(.03); transition: transform .7s var(--ez); }
.ncard .ph video { transform: scale(1.04); }
.ncard:hover .ph img { transform: scale(1.03); }
.ncard .ph .nostar { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 30%, transparent); }
.ncard .ph .nostar .star { width: 36px; height: 36px; }
.ncard .chips { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ncard .chips span { padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #fff; font-size: 11.5px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ncard h3 { margin-top: 16px; font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.22; letter-spacing: -0.01em; }
.ncard p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nmore { margin-top: 48px; display: flex; justify-content: center; }
.nmore button { padding: 11px 22px; border: 0; border-radius: 8px; background: #ecebe6; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: background-color .25s; }
.nmore button:hover { background: #e2e0d9; }
.nmore button[hidden] { display: none; }

/* the teachers' words (NewsQuotesSection): school scenes hang from one top line, the current one large with
   its quote under it; the people quoted only as small headshots beside their names */
.qsec2 { padding-block: clamp(72px, 7vw, 110px) clamp(56px, 6vw, 96px); overflow: hidden; }
.qhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 20px 64px; align-items: end; margin-bottom: clamp(40px, 4vw, 60px); }
.qhead .kick4 { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--green) 70%, var(--signal)); }
.qhead h1, .qhead h2 { margin-top: 14px; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.02; }
.qhead p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.qrow { display: flex; align-items: flex-start; justify-content: center; gap: max(12px, 2vw); }
.qtile { position: relative; flex: none; width: 150px; aspect-ratio: 4 / 5; overflow: hidden; padding: 0; border: 0; background: #e7e4dd; cursor: pointer; transition: width .5s var(--ez); }
.qtile.cur { width: 340px; cursor: default; }
.qtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.03) saturate(1.02) sepia(.03); }
.qtile .chip3 { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #fff; font-size: 11.5px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.qtile .chip3[hidden] { display: none; }
.qnow { width: 340px; max-width: 100%; margin: 20px auto 0; }
.qnow .qm { display: block; font-family: var(--serif); font-size: 24px; line-height: 1; }
.qnow blockquote { margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.42; letter-spacing: -0.005em; }
.qnow figcaption { margin-top: 16px; }
.qnav { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; }
.qnav .arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; transition: background-color .25s; }
.qnav .arrow:hover { background: rgba(0, 0, 0, .05); }
.qnav .arrow svg { width: 15px; height: 15px; }
.qdots { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: #ecebe6; }
.qdots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(17, 20, 18, .25); cursor: pointer; transition: width .3s, background-color .3s; }
.qdots button.on { width: 16px; background: var(--ink); }
.qband { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.qband > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.03) saturate(1.02) sepia(.03); }
.qband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .52); }
.qband figure { max-width: 780px; min-height: clamp(380px, 44vw, 480px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; }
.qband blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; }
.qband figcaption { margin-top: 32px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.qband figcaption b { display: block; font-weight: 600; color: #fff; }

/* the form on the painting (Kontakt) */
.paintform { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-block: clamp(88px, 9vw, 150px); }
.paintform .inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(40px, 5vw, 88px); align-items: center; }
.paintform h2 { font-size: clamp(38px, 4vw, 62px); line-height: 1.04; }
.paintform .inner > div > p { margin-top: 20px; max-width: 26em; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.paintform .uform { justify-self: end; width: 100%; max-width: 720px; margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: rgba(255, 255, 255, .88); color: var(--ink); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }

@media (max-width: 1100px) {
  .split2.big, .split2.big.rev { grid-template-columns: minmax(0, 1fr); }
  .cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .cols4 > div + div { padding-left: 0; border-left: 0; } .cols4 > div { padding-right: 18px; }
  .qsmall { grid-template-columns: minmax(0, 1fr); } .qsmall > figure, .qsmall > figure:first-child { border-left: 0; padding: 26px 0 30px; border-bottom: 1px solid var(--line); }
  .login2, .connect { grid-template-columns: minmax(0, 1fr); } .login2 .lask { padding-top: 0; }
  .steps2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4%; } .steps2 > h2 { grid-row: auto; grid-column: 1 / -1; max-width: none; }
  .thero .top, .tsov .wrap, .tpair, .trows > .row { grid-template-columns: minmax(0, 1fr); } .tsov ul { justify-self: start; } .thero .side3 { justify-self: start; }
  .tfacts, .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .devgrid, .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .careers .box { grid-template-columns: minmax(0, 1fr); } .careers .l { min-height: 0; }
  .qhead, .paintform .inner { grid-template-columns: minmax(0, 1fr); }
  .qtile[data-o="3"], .qtile[data-o="-3"] { display: none; } .qtile { width: 130px; } .qtile.cur { width: 300px; } .qnow { width: 300px; }
}
@media (max-width: 720px) {
  .bigpic.full .frame { aspect-ratio: 4 / 3.4; }
  .cols4, .cols4.three { grid-template-columns: minmax(0, 1fr); }
  .steps2 { grid-template-columns: minmax(0, 1fr); }
  .lstage { aspect-ratio: 3 / 4; --u: calc(100cqw / 640); --x: calc(var(--u) * 20); }
  .tfacts, .tgrid { grid-template-columns: minmax(0, 1fr); } .tgrid > li { min-height: 0; }
  .tpaint { aspect-ratio: 4 / 3; } .ttile { width: 64px; height: 64px; border-radius: 18px; } .ttile.side svg { width: 26px; height: 26px; } .ttile.centre svg { width: 34px; height: 34px; } .ttiles { gap: 12px; padding: 12px; border-radius: 28px; }
  .devgrid, .ncards { grid-template-columns: minmax(0, 1fr); }
  .devhead p { text-align: left; }
  .filmhero .playwrap { height: 70%; }
  .qtile[data-o="2"], .qtile[data-o="-2"] { display: none; } .qtile { width: 24vw; } .qtile.cur { width: 62vw; } .qnow { width: 62vw; }
}
@media (prefers-reduced-motion: reduce) { .formation, .formation .ftile { animation: none !important; transition: none !important; } .scard .caret { animation: none; } }

/* ---------- the lab's own links (not part of the site) ---------- */
.labdock { position: fixed; z-index: 55; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 30px -10px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(17, 20, 18, .08); font-size: 12px; }
.labdock { transition: opacity .4s, transform .5s var(--rise); }
.labdock.away { opacity: 0; transform: translateY(8px); pointer-events: none; }
.labdock a { padding: 6px 11px; border-radius: 999px; text-decoration: none; color: var(--ink-2); }
.labdock a:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }

@media (max-width: 1280px) {
  .nav-left, .nav-right .lang, .nav-right .login { display: none; }
  .nav { grid-template-columns: auto 1fr auto; } .nav .logo { justify-self: start; } .burger { display: block; }
}
@media (max-width: 1100px) {
  .fb, .faq { grid-template-columns: minmax(0, 1fr); }
  .fb .stage { aspect-ratio: 5 / 4; } .fb .pane .glass { width: min(72cqw, calc(84cqh * var(--w) / var(--h))); }
  .faq h2 { position: static; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .trust .facts > div, .trust .facts > div + div { padding: 24px 22px 0 0; border-left: 0; border-top: 1px solid var(--on-dark-line); }
  .trust .facts { border-top: 0; }
  .foot .grid { grid-template-columns: 1fr 1fr; }
  .flowband .inner { grid-template-columns: minmax(0, 1fr); }
  .flowband .pair { height: auto; display: grid; gap: 16px; }
  .flowband .pair .glass { position: relative; inset: auto; width: min(440px, 100%); }
  .flowband .pair .publish { justify-self: end; }
}
@media (max-width: 720px) {
  .nav .demo { padding: 0 13px; }
  .nav .replay { width: 36px; padding: 0; justify-content: center; } .nav .replay span { display: none; }
  .schools .label { display: none; }
  .tabs { flex-wrap: wrap; border-radius: 22px; overflow: visible; }  /* all five parts of the message stay visible */
  .tabs button { padding: 9px 14px; }
  .ws .stage { aspect-ratio: 4 / 5; } .ws .pane .glass { width: min(92cqw, calc(86cqh * var(--w) / var(--h))); }
  .ws .under { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fb .stage { aspect-ratio: 4 / 5; } .fb .pane .glass { width: 88cqw; }
  .cards { grid-template-columns: minmax(0, 1fr); } .card { aspect-ratio: 4 / 5; }
  .who { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 24px; }
  .who button:nth-child(odd) { padding-left: 0; } .who button:nth-child(odd)::before { left: 0; }
  .who button:nth-child(even) { padding-left: 20px; }
  .trust .facts { grid-template-columns: minmax(0, 1fr); }
  .cta .card2 { grid-template-columns: minmax(0, 1fr); }
  .faq .a { padding-right: 0; }
  .foot .grid { grid-template-columns: 1fr; }
}
/* ================= v12: gradr.se's comment components, centred card panels, the pane fade ================= */

/* A frosted panel fades itself. When its parent fades instead, the parent becomes the panel's backdrop
   for as long as the fade runs, the blur has nothing behind it, and the glass shows clear until it
   snaps to frost at the end ("blir genomskinlig tills den snappar", the user, 2026-10-17). */
.ws .pane, .fb .pane { opacity: 1; transform: none; transition: visibility 0s .7s; }
.ws .pane.on, .fb .pane.on { transition-delay: 0s; }
.ws .pane .glass, .fb .pane .fbc { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ez), transform 1s var(--rise); }
.ws .pane.on .glass, .fb .pane.on .fbc { opacity: 1; transform: none; transition-delay: .12s; }
.ws .pane:not(.on) .glass, .fb .pane:not(.on) .fbc { transition-duration: .32s, .5s; }   /* the old one leaves quickly, so two never read on top of each other */
.ws .pane.on .glass, .fb .pane.on .fbc { transition-delay: .26s; }

/* The feedback-type window (gradr.se FeedbackTypesSection): the student's sentence with the passage
   marked in the comment's colour, and the suggestion as the one-line chip the grading view puts
   beside it, dashed while it waits for the teacher. Laid out at 440 px (27.5em) and scaled by its
   font size, so a small screen gets a small copy rather than a different layout. */
.fb .pane .fbc { translate: 1.5cqw 0; }   /* a little right of centre (the user, 2026-10-19) */
.fbc { width: 24.875em; font-size: min(20px, calc(88cqw / 24.875));   /* as wide as the suggestion plus its padding, so nothing leaves an empty right side */ padding: 1em; border-radius: 1.375em; text-align: left; color: #2A2F3A;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1.5em 3.75em -1.25em rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
.fbc .sub { display: block; font-size: .75em; font-weight: 500; color: #6b7280; }
.fbc .txt { margin-top: .5em; font-size: .9375em; line-height: 1.7; }
.fbc mark { color: inherit; background: color-mix(in srgb, var(--t) 20%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--t) 28%, transparent); padding: 1px 2px; border-radius: 4px; }
.fbc .chip { margin-top: .75em; display: flex; align-items: center; gap: .5em; width: 100%; border-radius: 999px; background: rgba(255, 255, 255, .55); padding: .375em .6875em; border: 1.5px dashed var(--t); }
.fbc .chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375em; }
.fbc .dot { flex: none; width: 1.3125em; height: 1.3125em; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.fbc .dot.y { background: #2FA45C; } .fbc .dot.n { background: #E5484D; }
.fbc .dot svg { width: .8em; height: .8em; display: block; }
.fbc .fix { margin-top: .75em; display: flex; align-items: center; gap: .5625em; border-radius: .5625em; background: #fff; padding: .625em .75em; }
.fbc .fix .m { flex: 1; min-width: 0; }
.fbc .fix .h { display: flex; align-items: center; gap: .44em; margin-bottom: .32em; font-size: .8125em; color: #6b7280; }
.fbc .fix .h svg { width: 1.15em; height: 1.15em; color: #c04b3f; flex: none; }
.fbc .fix .d { font-size: .75em; line-height: 1.4; color: #374151; } .fbc .fix .d b { color: #c0392b; font-weight: 600; }
.fbc .fix .bs { display: flex; gap: .375em; align-self: flex-start; }
.fbc .fix .bs i { width: 2em; height: 1.75em; border-radius: .4375em; display: grid; place-items: center; }
.fbc .fix .bs .ok { background: #c7ecd5; color: #15803D; } .fbc .fix .bs .no { background: #fbe0dc; color: #c0392b; }
.fbc .fix .bs svg { width: .95em; height: .95em; display: block; }

/* The approval window (gradr.se JourneyFeedbackPanel): the student's answer, Forma's suggestion dashed
   like a pending comment, and the black Godkänn the teacher presses. */
.cwin { width: 27.5em; max-width: 100%; overflow: hidden; border-radius: 1.25em; text-align: left; color: var(--ink); text-shadow: none;
  font-size: min(16px, calc(100cqw / 27.5), calc(100cqh / 21.5));
  background: var(--glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 50px 100px -40px rgba(0, 0, 0, .55);   /* frosted like every other panel */
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); transition: transform 1s var(--rise); }
.cwin .bar { display: flex; align-items: center; gap: .625em; padding: .75em 1.25em; border-bottom: 1px solid var(--hair); }
.cwin .bar i { flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--signal); }
.cwin .bar b { font-size: .875em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwin .body { padding: 1.25em 1.5em 1.4em; }
.cwin .ans { font-size: .9375em; line-height: 1.62; color: var(--ink-2); }
.cwin mark { color: var(--ink); background: color-mix(in srgb, var(--t) 20%, transparent); border-radius: 3px; padding: 0 .125em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cwin .sug { margin-top: 1.25em; border-radius: 1em; border: 1.5px dashed var(--t); background: rgba(255, 255, 255, .55); padding: 1em; }
.cwin .lab { display: flex; align-items: center; gap: .5em; font-size: .656em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.cwin .lab i { flex: none; width: .57em; height: .57em; border-radius: 50%; background: var(--t); }
.cwin .sug p { margin-top: .5em; font-size: .875em; line-height: 1.55; color: var(--ink); }
.cwin .acts { margin-top: 1em; display: flex; justify-content: flex-end; align-items: center; gap: .5em; }
.cwin .no { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.cwin .no svg { width: .875em; height: .875em; display: block; }
.cwin .ok { display: inline-flex; align-items: center; gap: .375em; padding: .375em .875em; border-radius: 999px; background: var(--night); color: #fff; font-size: .8125em; font-weight: 500; transition: background-color .5s, transform .18s var(--ez); }
.cwin .ok svg { width: 1.08em; height: 1.08em; display: block; }
.cwin .ok .y, .cwin.done .ok .n { display: none; } .cwin.done .ok .y { display: inline; }
.cwin.done .ok { background: #1E9E57; } .cwin.press .ok { transform: scale(.93); }

/* The student writing an answer (gradr.se StudentWritePanel, design width 1180 px = 73.75em), in its
   writing state: saved a moment ago, Lämna in still to press, the last sentence being typed. */
.swrite { width: 73.75em; font-size: min(16px, calc(100cqw / 73.75), calc(100cqh / 44)); overflow: hidden; border-radius: 1.375em; text-align: left; text-shadow: none; color: #1f2937;
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 50px 100px -40px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); transition: transform 1s var(--rise); }
.swrite svg { display: block; flex: none; }
.swrite .hd2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25em; padding: 1.25em 1.75em 1.375em; background: rgba(255, 255, 255, .4); border-bottom: 1px solid rgba(36, 53, 63, .08); }
.swrite .crumb { display: flex; align-items: center; gap: .44em; font-size: .84375em; color: #6b7280; } .swrite .crumb b { font-weight: 600; color: #24353F; } .swrite .crumb i { font-style: normal; color: #c1c5c2; }
.swrite .ttl { margin-top: .19em; font-size: 1.6875em; font-weight: 700; color: #111827; }
.swrite .swho { display: flex; flex-direction: column; align-items: flex-end; gap: .6875em; }
.swrite .swho .nm { font-size: 1em; color: #24353F; }
.swrite .swho .st { display: flex; align-items: center; gap: 1em; }
.swrite .saved { font-size: .84375em; color: #6b7280; }
.swrite .send { display: inline-flex; align-items: center; padding: .6em 1.33em; border-radius: .8em; background: #111827; color: #fff; font-size: .9375em; font-weight: 600; }
.swrite .row { display: flex; align-items: stretch; }
.swrite .rail { width: 16.75em; flex: none; padding: 1.25em 1.5em 1.875em; }
.swrite .time { display: flex; align-items: center; gap: .625em; color: #24353F; } .swrite .time svg { width: 1.0625em; height: 1.0625em; } .swrite .time b { font-size: 1.1875em; font-weight: 700; letter-spacing: -.01em; }
.swrite .qs { margin-top: 1.375em; display: flex; justify-content: space-between; align-items: center; font-size: .875em; color: #6b7280; } .swrite .qs svg { width: 1.07em; height: 1.07em; color: #9ca3af; }
.swrite .q1 { margin-top: .75em; display: flex; align-items: center; gap: .64em; padding: .857em 1.143em; border-radius: .857em; background: #7B1245; color: #fff; font-size: .875em; } .swrite .q1 b { font-weight: 700; } .swrite .q1 span { font-weight: 500; }
.swrite .ans { flex: 1; min-width: 0; padding: 1.25em 1.75em 1.875em 0; }
.swrite .sheet { background: rgba(255, 255, 255, .55); border-radius: 1em; padding: 1.625em 1.75em .25em; }
.swrite .qh { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 1.25em; } .swrite .qh b { font-size: 1.5em; font-weight: 700; color: #111827; } .swrite .qh span { font-size: .84375em; color: #6b7280; }
.swrite .prompt { display: flex; gap: .75em; margin-bottom: .875em; font-size: .9375em; line-height: 1.6; } .swrite .prompt i { font-style: normal; color: #9ca3af; }
.swrite .subq { display: flex; flex-direction: column; gap: .6em; font-size: .9375em; line-height: 1.4; color: #374151; }
.swrite .tools { margin-top: 1.375em; display: flex; align-items: center; gap: 1.125em; padding: .75em .25em; border-top: 1px solid #EDEEEC; border-bottom: 1px solid #EDEEEC; color: #4b5563; }
.swrite .tools svg { width: 1.0625em; height: 1.0625em; } .swrite .tools .sep { width: 1px; height: 1.125em; background: #E5E7EB; } .swrite .tools .om { font-size: 1em; font-weight: 600; }
.swrite .text { margin: 1.25em 0 1em; font-size: .9375em; line-height: 1.72; }
.swrite .caret { display: inline-block; width: .1em; height: 1.15em; margin-left: 1px; vertical-align: text-bottom; background: #1f2937; animation: blink 1s steps(1) infinite; }

/* Hedvig Letters Serif comes in one weight. The biggest headings (the user, 2026-10-18: "bara de här jävligt stora")
   are thinned by an SVG erode (partials/header.html #hthin): every stroke loses the same hair, the face stays the
   same. Not -webkit-text-stroke: the font's overlapping contours show as seams in t, e and k. */
/* Retina and phones only: the erode takes one device pixel, which on a 1x screen is twice as much and too thin. */
@media (min-resolution: 2dppx) { .hero h1, .trust h2, .thero h1 { filter: url(#hthin); } }
@media (min-resolution: 2dppx) and (max-width: 720px) { .hero h1, .trust h2, .thero h1 { filter: url(#hthin-s); } }

/* Comments floating over a photo (gradr.se ProductImpactSection, StudentFairnessSection): dark frosted pills,
   dashed and with accept/deny while they wait for the teacher, solid where they are approved or a highlight. */
.fchips { position: absolute; inset: 0; pointer-events: none; }
.fchip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; max-width: min(64%, 250px); padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--t); background: rgba(0, 0, 0, .5); box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); color: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 500; line-height: 1.3; }
.fchip.dash { border-style: dashed; }
.fchip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip i { flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.fchip i.y { background: #2FA45C; } .fchip i.n { background: #E5484D; } .fchip svg { width: 11px; height: 11px; display: block; }
@media (max-width: 640px) { .fchip.desk { display: none; } }

/* The case for frequent feedback, on black, with the photo of comments beside it (gradr.se ProductImpactSection). */
.impact { background: var(--night); color: #fff; padding-block: clamp(80px, 9vw, 140px); }
.impact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.impact h2 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.3; letter-spacing: -0.01em; max-width: 22em; }
.impact h2 .dim { color: rgba(255, 255, 255, .55); }
.impact ul { list-style: none; padding: 0; margin: 36px 0 0; }
.impact li { display: grid; gap: 6px; padding: 22px 0; }
.impact li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.impact li b { font-weight: 500; font-size: 16px; }
.impact li span { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .55); max-width: 34em; }
.impact .ph { position: relative; width: 100%; max-width: 680px; justify-self: end; aspect-ratio: 4 / 5; overflow: hidden; }
.impact .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .impact .wrap { grid-template-columns: minmax(0, 1fr); } .impact .ph { aspect-ratio: 1; justify-self: stretch; } }

/* The four parts: the text on top and the product centred in the picture under it. */
.card { display: flex; flex-direction: column; }
.card .t { position: relative; left: auto; right: auto; top: auto; padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 36px) 0; }
.card .pan { flex: 1; min-height: 0; display: grid; place-items: center; padding: 5% 8% 8%; container-type: size; }
.card .pan .glass { position: relative; left: auto; bottom: auto; width: min(100cqw, 480px, calc(100cqh * var(--w) / var(--h))); }
.card .pan .glass.xl { width: min(100cqw, 620px, calc(100cqh * var(--w) / var(--h))); }
.card:hover .pan > * { transform: translateY(-8px); }
.card .go svg { width: 18px; height: 18px; display: block; }

/* Forma's suggestions in the window beside the teacher (gradr.se HeroSection): dashed like pending
   comments, in dark frosted glass, arriving one by one after the heading. Wide screens only: on a
   phone he fills the frame and they would sit on him. */
.hchips { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
@media (min-width: 1024px) { .hchips { display: block; } }
.hchip { position: absolute; display: flex; align-items: center; border-radius: 999px; border: 1.5px dashed var(--t); color: rgba(255, 255, 255, .9);
  background: rgba(11, 15, 13, .45); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: hpop .7s var(--rise) var(--d, 0s) both; }
.hchip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hchip i { flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.hchip i.y { background: #2FA45C; } .hchip i.n { background: #E5484D; }
.hchip svg { display: block; }
.hchip.lg { max-width: min(320px, 26vw); gap: 10px; padding: 10px 20px; font-size: 15px; } .hchip.lg i { width: 24px; height: 24px; } .hchip.lg svg { width: 14px; height: 14px; }
.hchip.md { max-width: min(280px, 24vw); gap: 8px; padding: 8px 16px; font-size: 14px; } .hchip.md i { width: 20px; height: 20px; } .hchip.md svg { width: 12px; height: 12px; }
.hchip.sm { max-width: 220px; gap: 6px; padding: 6px 12px; font-size: 12px; } .hchip.sm i { width: 16px; height: 16px; } .hchip.sm svg { width: 10px; height: 10px; }
.hchip.roomy { display: none; } @media (min-width: 1280px) { .hchip.roomy { display: flex; } }   /* not "wide": .wide is a dark section style and its ::before shaded the glass */
@keyframes hpop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
html.star-intro .hchip, html.star-arrive .hchip, html.telling .hchip { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  [data-parallax] { transform: none; }
}