@charset "UTF-8";
/* Kilowatka site base. Tokens mirror the app (src/Assets.xcassets, KWColors.swift),
   written as OKLCH through light-dark(): the system setting picks the scheme.
   No url(), no @import, no inline styles (the pages carry a strict CSP). */

:root {
  color-scheme: dark light;
  --bg: light-dark(oklch(96.9% .004 286), oklch(14.6% .011 268));
  --card: light-dark(oklch(100% 0 0), oklch(20% .014 268));
  --card-2: light-dark(oklch(100% 0 0), oklch(22.4% .016 268));
  --ink: light-dark(oklch(20.5% .016 268), oklch(97.2% .005 268));
  --text-2: light-dark(oklch(44% .017 268), oklch(80% .015 268));
  --hairline: light-dark(oklch(0% 0 0 / .08), oklch(100% 0 0 / .09));
  --hairline-strong: light-dark(oklch(0% 0 0 / .14), oklch(100% 0 0 / .15));
  --accent: light-dark(oklch(52% .21 285), oklch(69% .165 285));
  --accent-soft: light-dark(oklch(52% .21 285 / .11), oklch(69% .165 285 / .17));
  --on-accent: light-dark(oklch(100% 0 0), oklch(21% .09 285));
  --violet: oklch(47% .25 293);
  --green: light-dark(oklch(73.5% .19 148), oklch(77.5% .205 147));
  --green-text: light-dark(oklch(49% .14 150), oklch(80% .19 148));
  --on-green: oklch(22% .06 150);
  --orange: light-dark(oklch(75% .18 63), oklch(77% .18 64));
  --red: light-dark(oklch(63% .23 28), oklch(66% .22 27));
  --glass: light-dark(oklch(96.9% .004 286 / .78), oklch(14.6% .011 268 / .74));
  --draft: light-dark(oklch(95% .07 95), oklch(31% .045 90));
  --draft-ink: light-dark(oklch(34% .07 80), oklch(92% .09 95));
  --shadow: 0 30px 80px -30px light-dark(oklch(22% .02 268 / .45), oklch(0% 0 0 / .8));
  --radius-card: 18px;
  --radius-row: 12px;
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  --header-h: 60px;
}

/* Browsers without light-dark(): the same tokens as plain colours. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #0B0D12; --card: #14171F; --card-2: #171B24; --ink: #F5F6FA; --text-2: #B8BDC9;
    --hairline: rgb(255 255 255 / .09); --hairline-strong: rgb(255 255 255 / .15);
    --accent: #8A7BFF; --accent-soft: rgb(138 123 255 / .17); --on-accent: #14103A;
    --green: #30D158; --green-text: #30D158; --orange: #FF9F0A; --red: #FF453A;
    --glass: rgb(11 13 18 / .74); --draft: #3A3113; --draft-ink: #FFE6A0;
    --shadow: 0 30px 80px -30px rgb(0 0 0 / .8);
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #F2F2F7; --card: #FFFFFF; --card-2: #FFFFFF; --ink: #14171F; --text-2: #565A66;
      --hairline: rgb(0 0 0 / .08); --hairline-strong: rgb(0 0 0 / .14);
      --accent: #6F5BE8; --accent-soft: rgb(111 91 232 / .11); --on-accent: #FFFFFF;
      --green: #34C759; --green-text: #1B7F36; --orange: #FF9500; --red: #FF3B30;
      --glass: rgb(242 242 247 / .78); --draft: #FFF0B9; --draft-ink: #4B3900;
      --shadow: 0 30px 70px -34px rgb(20 23 31 / .45);
    }
  }
}

@media (prefers-contrast: more) {
  :root {
    --accent: light-dark(oklch(45% .21 285), oklch(76% .13 285));
    --hairline: light-dark(oklch(0% 0 0 / .24), oklch(100% 0 0 / .24));
    --text-2: light-dark(oklch(33% .017 268), oklch(88% .012 268));
  }
}

/* Cross-document view transitions between the story, its translations and
   the legal pages, only when motion is welcome. The header stays put; the
   page content cross-fades. */
.brand { view-transition-name: brand; }
.lang { view-transition-name: lang; }
.site-nav { view-transition-name: site-nav; }
main h1 { view-transition-name: page-title; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 180ms cubic-bezier(.4, 0, 1, 1) both vt-out; }
  ::view-transition-new(root) { animation: 320ms cubic-bezier(0, 0, .2, 1) 60ms both vt-in; }
  ::view-transition-group(page-title) { animation-duration: 380ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, summary { font-family: var(--round); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.num, .price { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Header: the only glass surface, as in the app (chrome only). */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .bar { max-width: var(--max); margin: 0 auto; height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 19px/1 var(--round); letter-spacing: -.02em; min-height: 44px; }
.brand svg { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a { color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 12px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a:hover { color: var(--ink); background: var(--hairline); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hairline); margin-left: 8px; }
.lang a { color: var(--text-2); text-decoration: none; font: 700 13px/1 var(--text); letter-spacing: .04em; padding: 0 10px; min-width: 44px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.lang a[aria-current="true"] { background: var(--card-2); color: var(--ink); box-shadow: 0 1px 0 var(--hairline-strong); }
@media (max-width: 720px) {
  .site-nav .nav-legal { display: none; }
  .site-header .bar { gap: 8px; }
  .lang { margin-left: 2px; }
  .lang a { padding: 0 6px; min-width: 40px; }
  .site-nav a { padding: 10px 8px; }
}
@media (max-width: 380px) {
  .brand span { display: none; }
}

/* Draft notice, required while data-publication="draft". */
.draft-note { max-width: var(--max); margin: 16px auto 0; padding: 0 var(--gutter); }
.draft-note p { margin: 0; padding: 10px 14px; border-radius: var(--radius-row); background: var(--draft); color: var(--draft-ink); font-size: 14px; line-height: 1.5; }
.draft-note strong { letter-spacing: .06em; font-size: 12px; margin-right: 6px; }

/* Legal and support pages. */
.doc { max-width: 760px; margin: 0 auto; padding: 32px var(--gutter) 72px; }
.doc .intro { padding: 36px 0 20px; }
.eyebrow { margin: 0 0 12px; color: var(--text-2); font: 700 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.doc h1 { font-size: clamp(38px, 6vw, 60px); margin: 0 0 16px; }
.doc .date { color: var(--text-2); font-size: 15px; margin: 0; }
.doc section { padding: 26px 0; border-top: 1px solid var(--hairline); }
.doc h2 { font-size: 23px; margin: 0 0 12px; }
.doc p { margin: 0 0 14px; }
.doc section p:last-child, .doc section ul:last-child { margin-bottom: 0; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc .card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 18px 20px; }
.placeholder { display: inline; padding: 1px 6px; border-radius: 6px; background: var(--draft); color: var(--draft-ink); font-size: .92em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.doc dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.doc dt { color: var(--text-2); }
.doc dd { margin: 0; }
@media (max-width: 560px) { .doc dl { grid-template-columns: 1fr; gap: 2px; } .doc dd { margin-bottom: 10px; } }

/* Footer. */
.site-footer { border-top: 1px solid var(--hairline); margin-top: 24px; }
.site-footer .inner { max-width: var(--max); margin: 0 auto; padding: 36px var(--gutter) 48px; display: grid; gap: 24px; grid-template-columns: 1.4fr 1fr 1fr; color: var(--text-2); font-size: 15px; }
.site-footer p { margin: 0 0 8px; }
.site-footer strong { color: var(--ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; min-height: 36px; align-items: center; color: var(--text-2); text-decoration: none; }
.site-footer li a:hover { color: var(--ink); }
.site-footer .promise { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) { .site-footer .inner { grid-template-columns: 1fr 1fr; } .site-footer .who { grid-column: 1 / -1; } }

/* 404. */
.lost { max-width: 640px; margin: 0 auto; padding: 18vh var(--gutter) 20vh; text-align: center; }
.lost h1 { font-size: clamp(40px, 7vw, 72px); margin: 0 0 16px; }
.lost p { color: var(--text-2); }
.lost .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.pill-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-weight: 700; }
.pill-link.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }

@media print {
  .site-header, .skip, .lang, .site-footer ul { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* Legal page lede, summary card and anchors. */
.doc .lede { font-size: 19px; color: var(--text-2); margin: 0 0 14px; max-width: 36em; }
.doc section.card { border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--card); padding: 20px 22px; margin: 8px 0 16px; }
.doc section.card h2 { font-size: 19px; }
.doc section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc .toc { padding-left: 0; margin-bottom: 0; }
.doc .toc li { margin: 0; }