/* Fonty serwowane z tego serwera: strona nie laduje niczego z zewnatrz. */
  @font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 500 900; font-display: swap;
    src: url("/font/archivo.woff2") format("woff2");
  }
  @font-face {
    font-family: "Literata"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("/font/literata.woff2") format("woff2");
  }

  :root {
    --paper: oklch(96.5% 0.014 85);
    --paper-2: oklch(99% 0.008 85);
    --ink: oklch(26% 0.025 145);
    --ink-2: oklch(44% 0.02 145);
    --rule: oklch(86% 0.02 85);
    --rust: oklch(52% 0.14 48);
    --rust-ink: oklch(38% 0.11 48);
    --moss: oklch(46% 0.06 155);
    --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
    --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
    --panel-w: clamp(360px, 40vw, 560px);
    color-scheme: light;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    background: var(--paper); color: var(--ink);
    font-family: "Literata", Georgia, "Times New Roman", serif;
    font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
  }

  h1, h2, h3, .label, .brand, button, .lede {
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  }
  h1 {
    font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
    font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);
    margin: 0 0 var(--space-md);
    text-wrap: balance;
  }
  h2 {
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
    font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
    margin: 0 0 var(--space-sm);
  }
  h3 { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; margin: 0 0 var(--space-2xs); }
  p { margin: 0 0 var(--space-md); max-width: 68ch; }
  a { color: var(--rust-ink); text-underline-offset: 3px; }
  a:hover { color: var(--rust); }

  .label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--moss); margin: 0 0 var(--space-sm);
  }
  .lede { font-weight: 500; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.45; }

  .skip {
    position: absolute; left: var(--space-md); top: -4rem; z-index: 5;
    background: var(--paper-2); color: var(--ink); padding: var(--space-xs) var(--space-md);
    border: 2px solid var(--ink); border-radius: 6px; transition: top 120ms ease-out;
  }
  .skip:focus { top: var(--space-md); }

  /* Uklad: na duzym ekranie panel stoi, czyta sie prawa kolumne. */
  .shell { min-height: 100svh; }

  .panel {
    position: relative; isolation: isolate; color: oklch(97% 0.02 85);
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    background-image:
      linear-gradient(to bottom, oklch(20% 0.03 145 / 0.3) 0%, oklch(18% 0.03 145 / 0.62) 45%, oklch(14% 0.03 145 / 0.93) 100%),
      url("/img/hero.jpg");
    background-size: cover; background-position: 66% center;
  }
  .panel .brand { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-2xl); }
  .panel .brand img { width: 34px; height: 34px; border-radius: 8px; }
  .panel .brand span { font-weight: 800; letter-spacing: -0.01em; font-size: 1.1rem; }
  .panel .label { color: oklch(84% 0.1 70); }
  .panel h1 { color: oklch(98% 0.012 85); }
  .panel .lede { color: oklch(91% 0.015 85); max-width: 34ch; }

  .figure-note {
    margin-top: var(--space-xl); padding-top: var(--space-md);
    border-top: 1px solid oklch(100% 0 0 / 0.25);
    font-size: 0.92rem; color: oklch(88% 0.015 85); max-width: 40ch;
  }
  .figure-note b { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.6rem; display: block; line-height: 1.1; }

  .reading { padding: var(--space-xl) var(--space-lg) var(--space-3xl); }
  .reading > * + * { margin-top: var(--space-2xl); }
  .reading section { scroll-margin-top: var(--space-lg); }

  /* Arkusz: pozycja, przerywana linia, liczba. To jest motyw strony. */
  .sheet { border: 1px solid var(--rule); background: var(--paper-2); border-radius: 4px; }
  .sheet h2 { padding: var(--space-lg) var(--space-lg) 0; }
  .sheet ol { list-style: none; margin: var(--space-md) 0 0; padding: 0 var(--space-lg) var(--space-lg); counter-reset: row; }
  .sheet li {
    counter-increment: row; display: grid; grid-template-columns: 2.2rem 1fr;
    gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--rule);
  }
  .sheet li:first-child { border-top: 0; }
  .sheet li::before {
    content: counter(row, decimal-leading-zero);
    font-family: "Archivo", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--rust); font-size: 0.95rem; padding-top: 0.15rem;
  }

  .points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
  .points p { margin: 0; color: var(--ink-2); }

  .signup { background: var(--ink); color: oklch(96% 0.012 85); border-radius: 4px; padding: var(--space-lg); }
  .signup h2 { color: oklch(98% 0.012 85); }
  .signup p { color: oklch(87% 0.012 85); }
  form { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
  label { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.95rem; }
  input[type="email"] {
    font: inherit; padding: 0.7rem 0.8rem; border-radius: 4px;
    border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); width: 100%;
  }
  input[type="email"]:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
  button {
    font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em;
    background: var(--rust); color: oklch(99% 0.01 85); border: 0; border-radius: 4px;
    padding: 0.75rem 1.1rem; cursor: pointer; transition: transform 140ms cubic-bezier(0.22,1,0.36,1), background-color 140ms;
  }
  button:hover { background: var(--rust-ink); transform: translateY(-1px); }
  button:active { transform: translateY(0); }
  .fine { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
  .signup .fine { color: oklch(84% 0.012 85); }
  .signup a { color: oklch(83% 0.1 70); }
  .signup a:hover { color: oklch(90% 0.09 70); }

  figure.shot { margin: 0; border-radius: 4px; overflow: hidden; }
  figure.shot img { display: block; width: 100%; height: clamp(150px, 22vw, 240px); object-fit: cover; }
  figcaption { font-size: 0.85rem; color: var(--ink-2); padding-top: var(--space-xs); }

  details { border-top: 1px solid var(--rule); padding: var(--space-sm) 0; }
  summary { font-family: "Archivo", sans-serif; font-weight: 600; cursor: pointer; }
  details p, details ul { margin-top: var(--space-xs); }

  footer.site { border-top: 1px solid var(--rule); padding-top: var(--space-md); }

  @media (min-width: 64rem) {
    /* Strona stoi, przewija sie tylko kolumna z trescia. */
    body.split { height: 100svh; overflow: hidden; }
    body.split .shell { display: grid; grid-template-columns: var(--panel-w) 1fr; height: 100svh; }
    body.split .panel {
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: var(--space-2xl) var(--space-2xl) var(--space-2xl);
    }
    body.split .panel .brand { margin-bottom: auto; }
    body.split .reading {
      overflow-y: auto; overscroll-behavior: contain;
      padding: var(--space-3xl) clamp(var(--space-xl), 4vw, var(--space-3xl)) var(--space-3xl);
      scrollbar-color: var(--rule) transparent;
    }
    body.split .reading > .inner { max-width: 62ch; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }

  /* --- strony tresci (prices, memberships, worksheet) --- */
  .bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    padding: var(--space-md) clamp(var(--space-md), 4vw, var(--space-2xl));
    border-bottom: 1px solid var(--rule); background: var(--paper-2);
  }
  .bar .brand { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--ink); }
  .bar .brand span { font-family: "Archivo", sans-serif; font-weight: 800; }
  .bar nav { display: flex; gap: var(--space-md); flex-wrap: wrap; font-family: "Archivo", sans-serif; font-size: 0.95rem; }
  .bar nav a { color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
  .bar nav a:hover { color: var(--rust-ink); border-bottom-color: var(--rust); }

  .col { max-width: 70ch; margin: 0 auto; padding: var(--space-2xl) clamp(var(--space-md), 4vw, var(--space-2xl)) var(--space-3xl); }
  .col.wide { max-width: 100ch; }
  .col > section { margin-top: var(--space-2xl); }
  .col h1 { margin-bottom: var(--space-md); }
  .col .label a { color: var(--moss); text-decoration: none; }

  table { border-collapse: collapse; width: 100%; margin: var(--space-md) 0; font-size: 0.97rem; }
  caption { text-align: left; font-size: 0.88rem; color: var(--ink-2); padding-bottom: var(--space-xs); }
  th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
  thead th { font-family: "Archivo", sans-serif; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
  tbody th { font-weight: 600; }
  td.num, .num { font-variant-numeric: tabular-nums; }
  table.prices { font-size: 0.92rem; }
  .table-wrap { overflow-x: auto; }

  ul.watch { margin: 0; padding-left: 1.1rem; }
  ul.watch li { margin-bottom: var(--space-xs); }

  ul.cards { list-style: none; margin: var(--space-lg) 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  ul.cards a { display: block; height: 100%; padding: var(--space-md); border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-2); text-decoration: none; color: inherit; transition: transform 140ms cubic-bezier(0.22,1,0.36,1), border-color 140ms; }
  ul.cards a:hover { transform: translateY(-2px); border-color: var(--rust); }
  ul.cards h2 { font-size: 1.15rem; margin-bottom: var(--space-2xs); }
  ul.cards p { font-size: 0.95rem; color: var(--ink-2); margin-bottom: var(--space-xs); }
  ul.cards p.num strong { color: var(--rust-ink); }
  ul.cards.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  .qa h3 { font-size: 1.05rem; margin-top: var(--space-lg); }
  .qa p { color: var(--ink-2); }

  .cta { background: var(--ink); color: oklch(96% 0.012 85); border-radius: 4px; padding: var(--space-lg); }
  .cta h2, .cta p { color: inherit; }
  a.button {
    display: inline-block; font-family: "Archivo", sans-serif; font-weight: 800;
    background: var(--rust); color: oklch(99% 0.01 85); text-decoration: none;
    padding: 0.7rem 1.1rem; border-radius: 4px;
  }
  a.button:hover { background: var(--rust-ink); color: oklch(99% 0.01 85); }

  ol.steps { padding-left: 1.2rem; }
  ol.steps li { margin-bottom: var(--space-xs); }

  footer.site { border-top: 1px solid var(--rule); padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl)); }
  footer.site p { margin-bottom: var(--space-xs); }