/* ClubScope website. A, «Produktsiden» (Benjamin 28/10). Measured from the Swift drawing (SiteKit.swift, SiteA.swift):
   three tones, ink never under 0.85 on reading text, 600 on headings, filled blue is the action, no hover effects.
   Font: the system font on Apple (SF Pro, as the app), Inter on Windows, Android and Linux (as the desktop app on Windows). */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --natt: #000;
  --kull: #111111;
  --grafitt: #1d1d1f;
  --ink: #f5f5f7;
  --body: rgba(245, 245, 247, 0.85);
  --action: #0a84ff;
  --link: #0a84ff;
  --hair: rgba(255, 255, 255, 0.12);
  --dot: rgba(255, 255, 255, 0.14);
  --nav: rgba(28, 28, 30, 0.72);
  --glass: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --g: 90px;
  --h1: 64px;
  --h2: 48px;
  --lead: 21px;
  --band: 120px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --natt: #fff;
    --kull: #f5f5f7;
    --grafitt: #e8e8ed;
    --ink: #1d1d1f;
    --body: rgba(29, 29, 31, 0.85);
    --action: #0071e3;
    --link: #0066cc;
    --hair: #d2d2d7;
    --dot: rgba(0, 0, 0, 0.12);
    --nav: rgba(255, 255, 255, 0.72);
    --glass: rgba(0, 0, 0, 0.05);
    --glass-edge: rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 833px) {
  :root { --g: 24px; --h1: 40px; --h2: 32px; --lead: 17px; --band: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--natt);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--link); text-decoration: none; }
a:focus-visible, .pill:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 6px; }
p { margin: 0; color: var(--body); }
/* Links inside running text are underlined, so they are not told apart by colour alone (WCAG 1.4.1). */
p a, td a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
h1, h2, h3, .h3-l, .h3-m, .h3-s, .display, .eyebrow, .bet-line {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.17;
}
h1 { font-size: var(--h1); letter-spacing: -0.009em; }
h2 { font-size: var(--h2); letter-spacing: -0.003em; }
h3 { font-size: 24px; letter-spacing: 0.009em; }
.display { font-size: 80px; letter-spacing: -0.015em; }
.h3-l { font-size: 32px; letter-spacing: 0.004em; }
.h3-m { font-size: 28px; letter-spacing: 0.007em; }
.h3-s { font-size: 21px; letter-spacing: 0.011em; }
.lead { font-size: var(--lead); letter-spacing: 0.011em; }
.small, .help { font-size: 15px; letter-spacing: -0.016em; }
.meta, .version { font-size: 12px; letter-spacing: 0; color: var(--body); line-height: 1.4; }
.measure-520 { max-width: 520px; } .measure-640 { max-width: 640px; } .measure-720 { max-width: 720px; }
.measure-760 { max-width: 760px; } .measure-820 { max-width: 820px; }
@media (max-width: 833px) {
  h3 { font-size: 24px; }
  .display { font-size: 40px; }
  .h3-l { font-size: 24px; }
  .h3-m { font-size: 24px; }
  .lead { letter-spacing: -0.022em; }
}

.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--action); color: #fff; padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 16px; }

/* The wordmark: Club bold, Scope regular, one word. */
.wordmark { font-weight: 400; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.wordmark b { font-weight: 700; }

/* The top bar: 64 high, glass (Benjamin 29/10: larger than Apple's 52). */
.nav {
  position: sticky; top: 0; z-index: 10;
  height: 64px;
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--g);
  background: var(--nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.nav .home { font-size: 25px; color: var(--ink); }
.nav .spacer { flex: 1; }
.nav .links { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.nav .links a, .nav .signin { font-size: 14px; letter-spacing: 0; color: var(--ink); opacity: 0.88; line-height: 64px; display: block; }
.nav .pill-s { height: 34px; padding: 0 18px; font-size: 14px; }
.nav .links a[aria-current="page"] { opacity: 1; font-weight: 600; }
@media (max-width: 833px) {
  .nav { gap: 16px; }
  .nav .home { font-size: 22px; }
  .nav .links, .nav .signin { display: none; }
}

/* Pills: filled blue is the action; glass is the other. 44 high on the page, 28 in the bar. */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 600; white-space: nowrap; letter-spacing: -0.022em;
}
.pill-l { height: 44px; padding: 0 22px; font-size: 17px; }
.pill-s { height: 28px; padding: 0 14px; font-size: 12px; letter-spacing: 0; }
.pill-primary { background: var(--action); color: #fff; }
.pill-glass {
  color: var(--ink); background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pill-pair { display: flex; gap: 12px; flex-wrap: wrap; }
.pill-pair.center { justify-content: center; }
@media (max-width: 833px) {
  .pill-pair { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pill-pair.center { align-items: center; }
}
.link { font-size: 17px; }
.lead-link { font-size: var(--lead); display: inline-block; margin-top: 6px; }

/* The dots (brand book 3.2): pitch 22, 0.14 white on dark and 0.12 black on light, strongest at the bottom. */
.dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 11px 11px, var(--dot) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  background-position: left bottom;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.82) 40%, rgba(0, 0, 0, 0.1) 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.82) 40%, rgba(0, 0, 0, 0.1) 100%);
}
.dots-dark { --dot: rgba(255, 255, 255, 0.14); }

/* Bands: night and charcoal take turns. */
.band { position: relative; padding: var(--band) var(--g); }
.natt { background: var(--natt); }
.kull { background: var(--kull); }
.band > h2 + .lead, .band > h2 + p { margin-top: 12px; }
.band > .lead + .lead { margin-top: 16px; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; margin-top: 40px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2.plain { gap: 48px; margin-top: 16px; }
.grid-2.plain h2 + .lead { margin-top: 12px; }
.grid-2.plain .lead + .lead { margin-top: 16px; }
@media (max-width: 833px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-2.plain { gap: 32px; }
}

/* Tiles: radius 18 on the other tone. */
.tile { position: relative; border-radius: 18px; padding: 28px; overflow: hidden; background: var(--natt); }
.kull .tile { background: var(--natt); }
.natt .tile { background: var(--kull); }
.tile h3 + p, .tile h2 + p { margin-top: 10px; }
.tile p { font-size: 17px; }
.text-tile { min-height: 220px; }
@media (max-width: 833px) { .text-tile { min-height: 0; } }

.window { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); }
.window img { width: 100%; }

/* MARK: Home */
.hero { position: relative; height: 820px; background: #000; overflow: hidden; color: #f5f5f7; }
.hero-dots { top: auto; height: 420px; }
.hero-window { position: absolute; top: 56px; left: 50%; width: 1180px; transform: translateX(-50%); }
.hero-window img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 440px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 40%, #000 100%); }
.hero-text { position: absolute; left: var(--g); right: var(--g); bottom: 56px; }
.hero-text .eyebrow { font-size: 28px; letter-spacing: 0.007em; color: #f5f5f7; }
.hero-text h1 { margin-top: 8px; max-width: 820px; color: #f5f5f7; }
.hero-under { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 40px var(--g); }
.hero-under .lead { max-width: 560px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hero-call { padding: 24px var(--g) 120px; font-size: 32px; font-weight: 600; letter-spacing: 0.004em; line-height: 1.17; color: var(--ink); }
@media (max-width: 833px) {
  .hero { height: 640px; }
  .hero-dots { height: 300px; }
  .hero-window { top: 40px; left: 24px; width: 560px; transform: none; }
  .hero-window img { border-radius: 8px; }
  .hero-fade { height: 300px; }
  .hero-text { bottom: 32px; }
  .hero-text .eyebrow { font-size: 21px; }
  .hero-under { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px var(--g); }
  .hero-actions { align-items: flex-start; }
  .hero-call { font-size: 24px; padding: 12px var(--g) 72px; }
}

.pillar { display: flex; flex-direction: column; min-height: 520px; padding: 28px 0 0 28px; }
.pillar h3, .pillar p { padding-right: 28px; }
.pillar-shot { margin-top: auto; padding-top: 16px; margin-right: -30px; }
.pillar-shot img { border-radius: 10px 10px 0 0; }
@media (max-width: 833px) { .pillar { min-height: 0; } }
/* The Session and The Player (Benjamin 29/10): the whole window from ClubScope, set in the tile's corner and cut by the
   card's right and bottom edge. */
.pillar-shot.corner { margin-right: 0; }
.pillar-shot.corner picture { display: block; aspect-ratio: 1670 / 900; overflow: hidden; border-radius: 10px 0 0 0; }
.pillar-shot.corner img { display: block; width: 108%; max-width: none; height: auto; border-radius: 10px 0 0 0; }
/* The Match: the whole pitch and the eleven drawn by the page (src/lineup.mjs lineupFull), in the same corner frame
   as The Session and The Player, cut by the card's edges (Benjamin 29/10). */
.pillar-shot.lineup-shot .lineup-frame { aspect-ratio: 1670 / 900; overflow: hidden; border-radius: 10px 0 0 0; }
.pillar-shot.lineup-shot .lineup { width: 100%; height: 100%; }
/* The whole pitch, 1.8 times the frame's width from its top left corner: the card shows the top left of it (Benjamin 29/10). */
.pillar-shot.lineup-shot .lineup-full { width: 180%; max-width: none; height: auto; }
.lineup { display: block; width: 100%; height: auto; }
.lineup text { font-family: var(--font); }
.lineup .lu-num { fill: #FFFFFF; font-weight: 700; font-variant-numeric: tabular-nums; }
.lineup .lu-name { fill: #111114; font-weight: 600; }

.split { display: flex; align-items: center; gap: 56px; }
.split-text { flex: 0 1 520px; display: flex; flex-direction: column; gap: 14px; }
.split-text h2 + .lead { margin-top: 0; }
.squad-art { position: relative; flex: 0 1 820px; padding-bottom: 60px; min-width: 0; }
.squad .split-text { flex: 1 1 0; max-width: 520px; }
.squad-window { width: 700px; max-width: calc(100% - 120px); margin-left: 120px; }
.phone {
  position: relative; width: 200px; padding: 7px; border-radius: 33px; background: #1d1d1f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.phone img { border-radius: 28px; width: 100%; }
.squad-phone { position: absolute; left: 0; bottom: 0; }
@media (max-width: 833px) {
  .split { flex-direction: column; align-items: stretch; gap: 32px; }
  .split-text, .squad .split-text { flex-basis: auto; max-width: none; }
  .squad-art { flex-basis: auto; }
  .squad-art { padding-bottom: 30px; }
  .squad-window { width: 270px; margin-left: 70px; max-width: none; }
  .squad-phone { width: 110px; padding: 4px; border-radius: 18px; }
  .squad-phone img { border-radius: 15px; }
}

.aegis { align-items: center; }
.aegis-text { flex: 0 1 600px; }
.aegis-points { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-top: 20px; }
.aegis-points h3 { font-size: 17px; letter-spacing: -0.022em; line-height: 1.3; }
.aegis-points p { font-size: 15px; letter-spacing: -0.016em; margin-top: 6px; }
.aegis-shot { flex: 0 1 560px; border-radius: 14px; margin-left: auto; }
@media (max-width: 833px) {
  .aegis-points { grid-template-columns: 1fr; }
  .aegis-shot { margin-left: 0; }
}

.statement { position: relative; display: flex; align-items: center; justify-content: center; height: 640px; overflow: hidden; }
.statement-text { position: relative; text-align: center; padding: 0 var(--g); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.statement-text .lead { max-width: 680px; }
.statement-text.left { text-align: left; align-items: flex-start; width: 100%; }
@media (max-width: 833px) { .statement { height: 520px; } }

.art-tile { display: flex; flex-direction: column; gap: 12px; min-height: 480px; }
.art-tile h3 + p { margin-top: 0; }
.art-tile .art { margin-top: auto; padding-top: 12px; }
.art-tile .art img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; }
@media (max-width: 833px) { .art-tile { min-height: 0; } .art-tile .art img { height: 160px; } }

.close { padding: 140px var(--g); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
@media (max-width: 833px) { .close { padding: 90px var(--g); } }

/* MARK: Page heads (download, coaches, clubs, security, support) */
.page-head { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 360px; padding: 64px var(--g); }
.page-head-text { position: relative; display: flex; flex-direction: column; gap: 14px; }
.page-head-text.center { align-items: center; text-align: center; margin: 0 auto; }
.page-head-text.center .lead { max-width: 560px; }
@media (max-width: 833px) { .page-head { min-height: 300px; padding: 48px var(--g); } }
.legal-head { min-height: 260px; }

/* MARK: Download */
.platforms-band { margin-top: -80px; padding-top: calc(var(--band) - 40px); }
.platforms-band .grid-2 { margin-top: 0; }
.platform { display: flex; flex-direction: column; gap: 12px; padding: 32px 0 0 28px; background: var(--kull); }
.natt .platform { background: var(--kull); }
.platform > :not(.platform-shot) { margin-right: 28px; }
.platform .pill { align-self: flex-start; margin-top: 8px; }
.platform-shot { margin-top: auto; padding-top: 24px; }
.platform-shot img { border-radius: 10px 0 0 0; }
.platforms-band .version { margin-top: 20px; text-align: center; }
@media (max-width: 833px) { .platforms-band { margin-top: -48px; } }
.steps { list-style: none; padding: 0; }
.step { display: flex; flex-direction: column; gap: 16px; min-height: 430px; padding: 24px; }
.step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--grafitt); display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--ink); }
.step-art { margin-top: auto; }
@media (max-width: 833px) { .step { min-height: 0; } }
.after { margin-top: 28px; font-size: 17px; }
.edge-keep { background: var(--grafitt); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; letter-spacing: 0; color: var(--ink); line-height: 1.3; }
.edge-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.edge-row.end { justify-content: flex-end; }
.edge-more, .edge-btn { border: 2px solid var(--ink); border-radius: 6px; padding: 2px 10px; font-weight: 600; }
.smartscreen {
  aspect-ratio: 5 / 3; border-radius: 10px; padding: 18px; color: #fff; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(20deg, #060d27 0%, #0a60d8 100%); font-size: 12px; letter-spacing: 0; line-height: 1.35;
}
.smartscreen p { color: #fff; }
.ss-title { font-size: 19px; font-weight: 600; }
.ss-body { opacity: 0.9; }
.ss-more { align-self: flex-start; text-decoration: underline; border: 2px solid #fff; border-radius: 6px; padding: 3px 6px; }
.ss-buttons { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; }
.ss-btn { width: 92px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.45); }
.ss-btn.on { border: 2px solid #fff; }
.player-split { gap: 48px; }
.dl-phone { width: 180px; flex: 0 0 auto; }
.help { margin-top: 20px; }
@media (max-width: 833px) { .dl-phone { width: 140px; padding: 5px; border-radius: 24px; } .dl-phone img { border-radius: 20px; } }

/* MARK: Coaches */
.row { display: flex; align-items: center; gap: 64px; }
.row.flip { flex-direction: row-reverse; }
.row-text { flex: 0 0 360px; display: flex; flex-direction: column; gap: 12px; }
.row-shot { flex: 1 1 auto; min-width: 0; }
@media (max-width: 833px) {
  .row, .row.flip { flex-direction: column; align-items: stretch; gap: 28px; }
  .row-text { flex-basis: auto; }
}

/* MARK: Clubs and players */
.clubs-shot { flex: 1 1 640px; min-width: 0; }
.actions { margin-top: 28px; }
.players-head { overflow: hidden; }
.players-head .split { position: relative; justify-content: space-between; }
.players-phone { width: 260px; flex: 0 0 auto; margin-right: 60px; }
.players-phone img { border-radius: 36px; }
.players-phone { padding: 9px; border-radius: 43px; }
@media (max-width: 833px) { .players-phone { width: 200px; margin: 0 auto; padding: 7px; border-radius: 33px; } .players-phone img { border-radius: 28px; } }

/* MARK: About */
.about-hero { position: relative; height: 640px; background: #000; overflow: hidden; }
.about-hero-art, .about-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.about-hero-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000 100%); }
.about-hero-text { position: absolute; left: var(--g); right: var(--g); bottom: 64px; display: flex; flex-direction: column; gap: 14px; }
.about-hero-text h1 { color: #f5f5f7; }
.about-hero-text .lead { color: rgba(245, 245, 247, 0.9); max-width: 720px; }
@media (max-width: 833px) { .about-hero { height: 520px; } .about-hero-text { bottom: 36px; } }
.belief { padding: 32px; min-height: 220px; }
@media (max-width: 833px) { .belief { min-height: 0; } }
.about-band { padding-top: 110px; padding-bottom: 110px; }
@media (max-width: 833px) { .about-band { padding-top: 64px; padding-bottom: 64px; } }
.story { align-items: flex-start; gap: 80px; }
.story .split-text { flex: 1 1 0; }
.story .h3-s { font-size: 24px; letter-spacing: 0.009em; }
@media (max-width: 833px) { .story { gap: 24px; } .story .h3-s { font-size: 21px; } }
.look { gap: 20px; }
.look-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; min-height: 400px; }
.look-card p { font-size: 15px; letter-spacing: -0.016em; }
.look-art-box { margin-top: auto; padding-top: 16px; }
.look-art-box > div { position: relative; height: 170px; border-radius: 12px; overflow: hidden; }
.look-tones { display: flex; box-shadow: inset 0 0 0 1px var(--hair); }
.look-tones span { flex: 1; } .look-tones span:nth-child(1) { background: #000; } .look-tones span:nth-child(2) { background: #111; } .look-tones span:nth-child(3) { background: #1d1d1f; }
.look-dots { background: #000; }
.look-word { display: grid; place-items: center; }
.wm-xl { position: relative; font-size: 40px; color: #f5f5f7; }
.look-art { background: #1d1d1f; display: grid; place-items: center; padding: 12px; }
.look-art img { max-height: 146px; width: auto; }
.look-crop img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 833px) { .look-card { min-height: 0; } .look-art-box > div { height: 140px; } .wm-xl { font-size: 32px; } }
.drawing { background: #1d1d1f; border-radius: 18px; height: 240px; padding: 20px; display: grid; place-items: center; }
.drawing img { max-height: 200px; width: auto; }
@media (max-width: 833px) { .drawing { height: 150px; padding: 12px; } .drawing img { max-height: 126px; } }
.bet { height: auto; padding: 120px 0; }
.bet .h3-s { font-size: 21px; }
.bet-line { font-size: 40px; letter-spacing: -0.005em; max-width: 980px; }
@media (max-width: 833px) { .bet { padding: 72px 0; } .bet .h3-s { font-size: 17px; } .bet-line { font-size: 28px; } }

/* MARK: Support and legal */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.faq-group { display: flex; flex-direction: column; gap: 28px; }
.qa p { margin-top: 8px; }
@media (max-width: 833px) { .faq { grid-template-columns: 1fr; gap: 56px; } }
.legal { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 64px; align-items: start; }
.toc { position: sticky; top: 76px; }
.toc ol { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; letter-spacing: -0.016em; }
.legal-body section + section { margin-top: 48px; }
.legal-body h2 { margin-bottom: 16px; }
.legal-body p + p { margin-top: 14px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.table-wrap { overflow-x: auto; margin: 20px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; letter-spacing: -0.016em; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--body); }
th { color: var(--ink); font-weight: 600; }
@media (max-width: 833px) { .legal { grid-template-columns: 1fr; gap: 40px; } .toc { position: static; } }

/* MARK: Footer */
.footer { background: var(--kull); padding: 24px var(--g) 48px; }
.footer.on-natt { background: var(--natt); }
.footer-cols { display: flex; gap: 96px; margin-top: 28px; align-items: flex-start; }
.footer-cols .wordmark { font-size: 17px; }
.footer h2 { font-size: 13px; font-weight: 600; letter-spacing: -0.006em; line-height: 1.3; }
.footer ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.footer ul a { font-size: 13px; letter-spacing: -0.006em; color: var(--body); line-height: 1.3; }
.footer-lines { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; }
.footer-lines p { font-size: 12px; letter-spacing: 0; line-height: 1.4; }
@media (max-width: 833px) { .footer-cols { flex-direction: column; gap: 24px; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* The drill builder, large (Benjamin 28/10: «øvelsesbyggeren bør i hvert fall fram og shine»). */
.showcase { display: flex; flex-direction: column; gap: 48px; }
.showcase-text { display: flex; flex-direction: column; gap: 16px; }
.showcase-shot { width: 100%; box-shadow: 0 0 0 1px var(--hair), 0 40px 120px rgba(0, 0, 0, 0.45); }
.showcase-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.showcase-pair figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.showcase-pair figcaption { color: var(--body); font-size: 15px; }
@media (max-width: 833px) { .showcase { gap: 28px; } .showcase-pair { grid-template-columns: 1fr; } }

/* The hero «paper round the Mac» (src/heropaper.mjs, behind config.heroPaper; Benjamin 29/10). The drawing is a 2880
   square in pixels with the Mac's centre in the middle (1:1 on desktop, 0.45 on a phone); the anchor is that centre.
   .hp-paper carries the profile's two masks (RippleHero, glass-lab web/src/app/profile/index.tsx): a circle half the
   hero's width round the figure, 0.9 at 50 % and gone at 100 %, and the fade from 82 % of the hero's height. */
.hero-paper { position: relative; height: 860px; overflow: hidden; background: var(--natt); }
.hp-paper { position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle 720px at 68% 330px, #000 0%, rgba(0, 0, 0, 0.9) 50%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: radial-gradient(circle 720px at 68% 330px, #000 0%, rgba(0, 0, 0, 0.9) 50%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hp-anchor { position: absolute; left: 68%; top: 330px; width: 0; height: 0; }
.hp-art { position: absolute; display: block; width: 2880px; height: 2880px; left: -1440px; top: -1440px; max-width: none; }
.hp-light { display: none; }
@media (prefers-color-scheme: light) { .hp-dark { display: none; } .hp-light { display: block; } }
/* B in the profile's blue (Benjamin 29/10): the page under the paper is the profile's calm room, Ramp.club outer to
   edge, in both drakter (the profile has only one), the words in white; the band ends in the page's own surface. */
.hp-blue { background: linear-gradient(to bottom, #0f2f72, #0a1f4a); color: #f5f5f7; }
.hp-blue .hp-text .eyebrow, .hp-blue .hp-text h1 { color: #f5f5f7; }
.hp-end { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, rgba(10, 31, 74, 0), var(--natt)); pointer-events: none; }
.hp-text { position: absolute; left: var(--g); right: var(--g); bottom: 56px; }
.hp-text .eyebrow { font-size: 28px; letter-spacing: 0.007em; }
.hp-text h1 { margin-top: 8px; max-width: 820px; }
@media (max-width: 833px) {
  .hero-paper { height: 600px; }
  .hp-paper {
    -webkit-mask-image: radial-gradient(circle 50vw at calc(50% + 12px) 430px, #000 0%, rgba(0, 0, 0, 0.9) 50%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: radial-gradient(circle 50vw at calc(50% + 12px) 430px, #000 0%, rgba(0, 0, 0, 0.9) 50%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .hp-anchor { left: calc(50% + 12px); top: 430px; }
  .hp-art { width: 1296px; height: 1296px; left: -648px; top: -648px; }
  .hp-text { top: 32px; bottom: auto; }
  .hp-text .eyebrow { font-size: 21px; }
}

/* The Mac further down (Benjamin 29/10): Draw the Drill in the hero's Mac with a calmer paper, in a tile cut round it;
   The Squad Reports in the Mac alone. src/heropaper.mjs macScene. */
.mac-scene { display: block; width: 100%; height: auto; }
.mac-scene .hp-light { display: none; }
@media (prefers-color-scheme: light) { .mac-scene .hp-dark { display: none; } .mac-scene .hp-light { display: inline; } }
.mac-tile { border-radius: 18px; overflow: hidden; }
.squad-mac { overflow: visible; }
@media (max-width: 833px) { .mac-tile { border-radius: 12px; } .squad-window.squad-mac { width: 300px; margin-left: 50px; } }

/* The footer in the middle (Benjamin 29/10). */
.footer-cols { justify-content: center; flex-wrap: wrap; row-gap: 20px; }
.footer-cols > .wordmark { flex-basis: 100%; text-align: center; }
.footer-cols nav { text-align: center; }
.footer-lines { align-items: center; text-align: center; }
@media (max-width: 833px) { .footer-cols { align-items: center; } }

/* Draw the Drill, round 2 (Benjamin 29/10: «Veldig rolig. Tekst og skjerm … ganske balansert»): five columns of text,
   seven of Mac, centred on each other; the paper three faint sheets; light paper in light. */
.showcase-mac { display: grid; grid-template-columns: 5fr 7fr; column-gap: 48px; align-items: center; }
.showcase-mac .mac-tile { border-radius: 18px; }
@media (max-width: 833px) { .showcase-mac { grid-template-columns: 1fr; row-gap: 28px; } }

/* The paper as the room (Benjamin 29/10: «Ikke lås kunsten eller papiret inni en boks»): the section is the room, the
   paper is drawn round the Mac's centre past every edge and clipped only by the section, which has no frame. The
   drawing is 2880 wide in the Mac's own units; the Mac's frame is 880, so the room is 2880 / 880 of the Mac's width. */
.showcase-mac { position: relative; overflow: hidden; isolation: isolate; }
.drill-mac { position: relative; }
.drill-mac .mac-scene { position: relative; z-index: 1; }
.room { position: absolute; left: 50%; top: 50%; width: calc(100% * 2880 / 880); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; }
.room-art { display: block; width: 100%; height: 100%; }
.room .hp-light { display: none; }
@media (prefers-color-scheme: light) { .room .hp-dark { display: none; } .room .hp-light { display: block; } }
.showcase-mac .showcase-text { position: relative; z-index: 2; }
/* The hero's room goes up under the top bar, as the profile's paper does (Benjamin 29/10: «papiret er rommet»). */
.hero-paper { margin-top: -64px; height: 924px; }
.hero-paper .hp-anchor { top: 394px; }
.hero-paper .hp-paper {
  -webkit-mask-image: radial-gradient(circle 720px at 68% 394px, #000 0%, rgba(0, 0, 0, 0.9) 50%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: radial-gradient(circle 720px at 68% 394px, #000 0%, rgba(0, 0, 0, 0.9) 50%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
}
@media (max-width: 833px) {
  .hero-paper { height: 664px; }
  .hero-paper .hp-anchor { top: 494px; }
  .hero-paper .hp-text { top: 96px; }
  .hero-paper .hp-paper {
    -webkit-mask-image: radial-gradient(circle 50vw at calc(50% + 12px) 494px, #000 0%, rgba(0, 0, 0, 0.9) 50%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: radial-gradient(circle 50vw at calc(50% + 12px) 494px, #000 0%, rgba(0, 0, 0, 0.9) 50%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
  }
}