/* GlassDock — glassdock.site
   The page is a desktop. The dock is real (see dock.js). */

:root {
  --hue: 288;
  --bg:      oklch(96.5% 0.008 var(--hue));
  --bg-2:    oklch(92.5% 0.014 var(--hue));
  --fg:      oklch(22% 0.03 var(--hue));
  --fg-2:    oklch(46% 0.03 var(--hue));
  --fg-3:    oklch(62% 0.025 var(--hue));
  --line:    oklch(84% 0.016 var(--hue));
  --accent:  oklch(50% 0.17 var(--hue));
  --glass:   oklch(99% 0.004 var(--hue) / .62);
  --glass-line: oklch(100% 0 0 / .75);
  --glass-shadow: 0 24px 60px oklch(30% 0.05 var(--hue) / .22), 0 2px 6px oklch(30% 0.05 var(--hue) / .12);
  --dock-fg: oklch(20% 0.03 var(--hue));
  --dock-fg-2: oklch(45% 0.03 var(--hue));

  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --space-5xl: 96px;

  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --text: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif;

  --measure: 62ch;
  --gutter: clamp(16px, 4vw, 48px);
  --dock-h: 92px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      oklch(19% 0.02 var(--hue));
    --bg-2:    oklch(24% 0.025 var(--hue));
    --fg:      oklch(95% 0.01 var(--hue));
    --fg-2:    oklch(74% 0.02 var(--hue));
    --fg-3:    oklch(58% 0.02 var(--hue));
    --line:    oklch(32% 0.02 var(--hue));
    --accent:  oklch(80% 0.11 var(--hue));
    --glass:   oklch(32% 0.02 var(--hue) / .55);
    --glass-line: oklch(100% 0 0 / .18);
    --glass-shadow: 0 24px 60px oklch(0% 0 0 / .5), 0 2px 6px oklch(0% 0 0 / .3);
    --dock-fg: oklch(96% 0.01 var(--hue));
    --dock-fg-2: oklch(72% 0.02 var(--hue));
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--dock-h) + 48px);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; margin: 0; line-height: 1.02; text-wrap: balance; font-variation-settings: "opsz" 96; }
p { margin: 0; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.muted { color: var(--fg-2); }
.small { font-size: 14px; }
.label { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-variation-settings: "opsz" 12; }

/* ——— header ——— */
.top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-xl); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--fg); text-decoration: none; }
.wordmark img { width: 26px; height: 26px; border-radius: 7px; }
.top nav { display: flex; gap: var(--space-xl); font-size: 15px; }
.top nav a { color: var(--fg-2); text-decoration: none; }
.top nav a:hover { color: var(--fg); }

/* ——— hero ——— */
.hero { padding-block: clamp(48px, 9vw, 128px) clamp(56px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl) var(--space-5xl); align-items: end; }
.hero h1 { font-size: clamp(52px, 9.5vw, 132px); font-weight: 700; letter-spacing: -0.045em; font-variation-settings: "opsz" 96, "wdth" 92; margin-left: -0.04em; }
.hero h1 em { font-style: normal; font-weight: 300; font-variation-settings: "opsz" 96, "wdth" 100; }
.hero-side { display: grid; gap: var(--space-xl); max-width: 44ch; padding-bottom: .5em; }
.hero-side p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; }
.cta { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.cta img { height: 48px; width: auto; }
.cta a:hover img { opacity: .85; }
.cta .small { color: var(--fg-3); }
.hero-hint { color: var(--fg-3); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.hero-hint::before { content: ""; width: 24px; height: 1px; background: currentColor; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; align-items: start; } .hero-side { padding-bottom: 0; } }

/* ——— sections ——— */
.section { padding-block: clamp(56px, 8vw, 112px); border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-lg); align-items: baseline; margin-bottom: clamp(32px, 5vw, 64px); }
.num { font-family: var(--display); font-size: 14px; color: var(--fg-3); font-variation-settings: "opsz" 12; letter-spacing: .04em; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 56px); }
.section-head p { margin-top: var(--space-md); color: var(--fg-2); font-size: 18px; max-width: var(--measure); }
@media (max-width: 640px) { .section-head { grid-template-columns: 1fr; gap: var(--space-xs); } }

/* 01 — walkthrough keyed to the live dock */
.walk { display: grid; grid-template-columns: 5rem 1fr; gap: 0 var(--space-lg); }
.walk ol { grid-column: 2; list-style: none; margin: 0; padding: 0; counter-reset: w; max-width: 70ch; }
.walk li { counter-increment: w; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-lg); padding-block: var(--space-xl); border-top: 1px solid var(--line); cursor: default; transition: padding-left .35s var(--ease-out); }
.walk li:last-child { border-bottom: 1px solid var(--line); }
.walk li::before { content: counter(w); font-family: var(--display); font-size: 14px; color: var(--fg-3); font-variation-settings: "opsz" 12; padding-top: .45em; }
.walk h3 { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: var(--space-xs); }
.walk p { color: var(--fg-2); max-width: 58ch; }
.walk li:hover, .walk li.is-hot { padding-left: 6px; }
.walk li:hover h3, .walk li.is-hot h3 { color: var(--accent); }
@media (max-width: 640px) { .walk { grid-template-columns: 1fr; } .walk ol { grid-column: 1; } }

/* 02 — widget index */
.index { columns: 2; column-gap: var(--space-4xl); }
.index-group { break-inside: avoid; margin-bottom: var(--space-3xl); }
.index-group .label { display: block; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line); }
.index dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-sm) var(--space-xl); }
.index dt { font-family: var(--display); font-weight: 600; font-size: 17px; font-variation-settings: "opsz" 24; }
.index dd { margin: 0; color: var(--fg-2); font-size: 15.5px; }
.index dd i { font-style: normal; color: var(--fg-3); }
@media (max-width: 720px) { .index { columns: 1; } }

/* 03 — figures */
.figs { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-2xl) var(--space-xl); }
.figs figure { margin: 0; }
.figs .f1 { grid-column: 1 / 10; }
.figs .f2 { grid-column: 3 / 9; }
.figs .f3 { grid-column: 9 / 13; align-self: end; }
.figs img { border-radius: 10px; background: var(--bg-2); box-shadow: 0 1px 0 var(--line), 0 20px 50px oklch(30% 0.04 var(--hue) / .14); }
.figs figcaption { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-md); margin-top: var(--space-md); font-size: 14.5px; color: var(--fg-2); }
.figs figcaption b { font-family: var(--display); font-weight: 600; color: var(--fg-3); font-variation-settings: "opsz" 12; letter-spacing: .04em; }
@media (max-width: 720px) { .figs .f2, .figs .f3 { grid-column: 1 / 13; } }
.figs + .note { margin-top: var(--space-2xl); color: var(--fg-2); max-width: var(--measure); }

/* 04 — privacy */
.privacy { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl) var(--space-lg); }
.privacy .num { grid-column: 1; }
.privacy .statement { grid-column: 2; }
.privacy .statement h2 { font-size: clamp(34px, 5vw, 64px); max-width: 12ch; }
.privacy .statement p { margin-top: var(--space-xl); font-size: 18px; color: var(--fg-2); max-width: 40ch; }
.privacy dl { grid-column: 3; margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-md) var(--space-xl); align-content: start; font-size: 15.5px; }
.privacy dt { font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 24; }
.privacy dd { margin: 0; color: var(--fg-2); }
.privacy dl .label { grid-column: 1 / -1; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .privacy { grid-template-columns: 5rem 1fr; } .privacy dl { grid-column: 2; } }
@media (max-width: 640px) { .privacy { grid-template-columns: 1fr; } .privacy .statement, .privacy dl { grid-column: 1; } }

/* 05 — requirements & faq */
.faq { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-lg); }
.faq > div { grid-column: 2; max-width: 70ch; }
.req { display: flex; gap: var(--space-md) var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-2xl); font-size: 15px; color: var(--fg-2); }
.req span::before { content: "·"; margin-right: var(--space-md); color: var(--fg-3); }
.req span:first-child::before { content: none; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); font-family: var(--display); font-weight: 600; font-size: 18px; font-variation-settings: "opsz" 24; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fg-3); font-weight: 400; transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--fg-2); padding-bottom: var(--space-xl); max-width: 60ch; }
@media (max-width: 640px) { .faq { grid-template-columns: 1fr; } .faq > div { grid-column: 1; } }

/* ——— closing ——— */
.closing { padding-block: clamp(56px, 8vw, 112px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-lg); }
.closing > div { grid-column: 2; }
.closing h2 { font-size: clamp(34px, 5vw, 64px); max-width: 16ch; }
.closing .cta { margin-top: var(--space-2xl); }
@media (max-width: 640px) { .closing { grid-template-columns: 1fr; } .closing > div { grid-column: 1; } }

footer { padding-block: var(--space-2xl); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); justify-content: space-between; font-size: 14px; color: var(--fg-3); }
footer nav { display: flex; gap: var(--space-xl); }
footer a { color: var(--fg-2); text-decoration: none; }
footer a:hover { color: var(--fg); }

/* ——— prose pages (privacy, support) ——— */
.prose { max-width: 68ch; padding-block: clamp(32px, 5vw, 64px) var(--space-4xl); }
.prose h1 { font-size: clamp(36px, 5.5vw, 64px); margin-bottom: var(--space-md); }
.prose .date { color: var(--fg-3); font-size: 15px; margin-bottom: var(--space-3xl); }
.prose h2 { font-size: 24px; margin: var(--space-3xl) 0 var(--space-md); }
.prose p, .prose li { color: var(--fg-2); }
.prose p + p { margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-left: 1.2em; margin: var(--space-md) 0 0; }
.prose li { margin-bottom: var(--space-sm); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose .contact { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; color: var(--fg); margin-top: var(--space-md); }
.prose .faq { display: block; }
.prose .faq > div { max-width: none; }

/* ═══════════ THE DOCK ═══════════ */
.dock-wrap { position: fixed; inset-inline: 0; bottom: 14px; z-index: 50; display: flex; justify-content: center; padding-inline: 12px; pointer-events: none; }
.dock {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  height: var(--dock-h); padding-inline: 18px;
  max-width: 100%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow);
  color: var(--dock-fg);
  font-family: var(--text);
  animation: dock-in .9s var(--ease-out) both;
}
@keyframes dock-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.dock .sep { width: 1px; align-self: stretch; margin-block: 16px; background: oklch(50% 0.02 var(--hue) / .35); flex: none; }
.dk { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; transition: background .25s var(--ease-out), transform .35s var(--ease-out); flex: none; }
.dk.is-hot, .dk:hover { background: oklch(100% 0 0 / .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dk.is-hot, :root:not([data-theme="light"]) .dk:hover { background: oklch(100% 0 0 / .1); } }
.dk b { display: block; font-weight: 600; font-size: 14px; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }
.dk small { display: block; font-size: 11px; color: var(--dock-fg-2); line-height: 1.2; white-space: nowrap; }

.dk-focus b { font-family: var(--display); font-size: 19px; font-variation-settings: "opsz" 24, "wdth" 96; font-variant-numeric: tabular-nums; }
.play { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid oklch(70% 0.18 45); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; color: oklch(60% 0.19 45); transition: transform .2s var(--ease-out), background .2s; }
.play:hover { transform: scale(1.06); }
.play svg { width: 11px; height: 11px; margin-left: 1px; }
.play.is-on { background: oklch(60% 0.19 45); color: white; }
.play.is-on svg { margin-left: 0; }
.play .ico-pause { display: none; }
.play.is-on .ico-play { display: none; }
.play.is-on .ico-pause { display: block; }

.dk-cal .date { text-align: center; line-height: 1; }
.dk-cal .date small { font-size: 9px; font-weight: 700; color: oklch(58% 0.2 25); letter-spacing: .04em; }
.dk-cal .date b { font-family: var(--display); font-size: 19px; font-variation-settings: "opsz" 24; }

.dk-stock small:first-child { font-weight: 700; letter-spacing: .04em; font-size: 10px; }
.dk-stock b { font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; }
.dk-stock .neg { color: oklch(58% 0.2 25); }
.dk-stock svg { width: 76px; height: 28px; overflow: visible; }
.dk-stock svg path { fill: none; stroke: oklch(58% 0.2 25); stroke-width: 1.5; stroke-linejoin: round; }

.apps { display: flex; gap: 14px; padding-inline: 4px; }
.app { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; position: relative; transition: transform .35s var(--ease-out); box-shadow: 0 1px 2px oklch(0% 0 0 / .18), inset 0 0 0 .5px oklch(100% 0 0 / .4); }
.app:hover { transform: translateY(-6px) scale(1.06); }
.app svg { width: 26px; height: 26px; }
.app.is-run::after { content: ""; position: absolute; bottom: -9px; width: 4px; height: 4px; border-radius: 50%; background: var(--dock-fg-2); }
.a-files { background: linear-gradient(oklch(72% 0.14 240), oklch(58% 0.17 250)); }
.a-mail { background: linear-gradient(oklch(78% 0.13 235), oklch(62% 0.17 245)); }
.a-cal { background: oklch(98% 0 0); overflow: hidden; }
.a-cal .bar { position: absolute; top: 0; inset-inline: 0; height: 12px; background: oklch(58% 0.2 25); }
.a-cal b { font-family: var(--display); font-size: 20px; font-weight: 500; color: oklch(20% 0 0); margin-top: 10px; line-height: 1; }
.a-notes { background: oklch(98% 0.01 90); overflow: hidden; }
.a-notes .bar { position: absolute; top: 0; inset-inline: 0; height: 11px; background: oklch(88% 0.16 95); }
.a-notes i { position: absolute; left: 9px; right: 9px; height: 1.5px; background: oklch(80% 0.01 90); }
.a-music { background: linear-gradient(oklch(68% 0.2 20), oklch(58% 0.22 15)); }
.a-msg { background: linear-gradient(oklch(80% 0.2 145), oklch(65% 0.2 145)); }

.dk-music .art { width: 42px; height: 42px; border-radius: 8px; background: conic-gradient(from 210deg, oklch(35% 0.08 60), oklch(70% 0.14 80), oklch(25% 0.05 40), oklch(35% 0.08 60)); flex: none; box-shadow: inset 0 0 0 .5px oklch(100% 0 0 / .3); }
.dk-music .info { min-width: 120px; }
.dk-music .bar { margin-top: 5px; height: 3px; border-radius: 2px; background: oklch(50% 0.02 var(--hue) / .3); overflow: hidden; }
.dk-music .bar i { display: block; height: 100%; width: 8%; background: var(--dock-fg); transition: width 1s linear; }
.ctl { display: flex; gap: 6px; }
.ctl button { background: none; border: 0; padding: 4px; color: var(--dock-fg); cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.ctl button:hover { background: oklch(100% 0 0 / .35); }
.ctl svg { width: 14px; height: 14px; fill: currentColor; }

.dk-trash svg { width: 30px; height: 30px; color: var(--dock-fg-2); }

@media (max-width: 1000px) { .dk-stock, .dk-stock + .sep { display: none; } .dk-music .info { min-width: 100px; } }
@media (max-width: 760px) { .dk-music, .dk-music + .sep { display: none; } .apps .app:nth-child(n+5) { display: none; } }
@media (max-width: 480px) { :root { --dock-h: 74px; } .dock { gap: 8px; padding-inline: 10px; border-radius: 20px; } .dk-cal .info { display: none; } .app { width: 40px; height: 40px; } .dk-trash, .dk-trash-sep { display: none; } }