/*
 * Colour tokens come from the app's palettes, written in OKLCH with the app's hex value beside each one: dark is
 * the default, variant B "Terracotta" (android/app/src/main/kotlin/local/terminal/app/ui/Palette.kt,
 * Palettes.Terracotta), light is "Paper" (PaletteThemes.kt, PaletteThemes.Paper), chosen by the visitor's system
 * setting. Keep the names and values in step with those files so the site and the app change together;
 * tools/check_contrast.py reads both blocks from here and checks every pair the page uses.
 *
 * Type: Atkinson Hyperlegible for reading, JetBrains Mono (the app's font) for headings, prices and code. Both are
 * woff2 subsets of the fonts the app ships (site/README.md, "Czcionki").
 *
 * Motion is opt-in (prefers-reduced-motion: no-preference): one staged entrance in the hero, press feedback on
 * buttons and the FAQ marker turning. Everything is visible and usable without it.
 */
:root {
  --background: oklch(0.241 0.005 219.7); /* #1d2021 */
  --surface: oklch(0.277 0 89.9); /* #282828 */
  --surface-raised: oklch(0.311 0.003 48.6); /* #32302f */
  --border: oklch(0.344 0.007 48.5); /* #3c3836 */
  --text: oklch(0.958 0.05 97.4); /* #faf2cc */
  --text-muted: oklch(0.826 0.045 88.5); /* #d2c5a5 */
  /* The app's text-faint (#928374) is 4.47:1 on the background, just under AA for small text,
     so the site uses the app's idle tone for quiet text instead. */
  --text-quiet: oklch(0.69 0.035 76.3); /* #a89984 */
  --accent: oklch(0.831 0.139 85); /* #f1c050 */
  /* Hover tone of the accent: lighter in the dark theme, darker in the light one. */
  --accent-hover: oklch(0.88 0.115 88);
  --on-accent: oklch(0.241 0.005 219.7); /* #1d2021 */
  --accent-soft: oklch(0.316 0.029 77.5); /* #3a3021 */
  --success: oklch(0.749 0.091 127.9); /* #9db97a */
  --code-background: oklch(0.225 0.004 229); /* #1a1c1d */
  --code: oklch(0.895 0.039 90.7); /* #e6dcc0 */
  /* Band sections: one step between the background and the surface. */
  --band: oklch(0.259 0.003 200);
  /* Phone frame around the screenshots, darker than the page in both themes. */
  --device: oklch(0.189 0.004 229); /* #121415 */
  --header-background: oklch(0.241 0.005 219.7 / 0.88);

  /* Depth: a hairline ring instead of a border (dark surfaces show no drop shadow). */
  --ring: 0 0 0 1px oklch(1 0 0 / 0.08);
  --ring-strong: 0 0 0 1px oklch(1 0 0 / 0.14);
  --image-outline: oklch(1 0 0 / 0.1);
  --device-shadow: 0 0 0 1px oklch(1 0 0 / 0.07), 0 40px 80px -36px oklch(0 0 0 / 0.75);

  --font-text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. Headings descend h1 > h2 > h3; captions are the floor. */
  --text-caption: 0.8125rem;
  --text-small: 0.9375rem;
  --text-body: 1rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-h3: 1.0625rem;
  --text-h2: clamp(1.625rem, 1.15rem + 2.1vw, 2.5rem);
  --text-h1: clamp(2.125rem, 1.2rem + 4.3vw, 4.125rem);

  /* Spacing on a 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-small: 8px;
  --radius: 12px;
  --radius-large: 16px;
  --gutter: clamp(20px, 4vw, 32px);
  --max-width: 1160px;
  --measure: 36rem;
  --section-space: clamp(48px, 10vw, 112px);
  --header-height: 56px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
  scrollbar-gutter: stable;
  scroll-padding-block-start: calc(var(--header-height) + 16px);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Light theme: the app's "Paper" palette. text-quiet uses the app's idle tone, as in the dark theme. */
@media (prefers-color-scheme: light) {
  :root {
    --background: oklch(0.956 0.02 87.5); /* #f6f0e2 */
    --surface: oklch(0.986 0.015 86.4); /* #fffaef */
    --surface-raised: oklch(0.917 0.03 87.5); /* #ece3ce */
    --border: oklch(0.866 0.034 86.3); /* #ddd2ba */
    --text: oklch(0.272 0.013 72.3); /* #2b2620 */
    --text-muted: oklch(0.426 0.021 72.7); /* #564d42 */
    --text-quiet: oklch(0.455 0.024 74.4); /* #5f5548 */
    --accent: oklch(0.49 0.128 41.4); /* #9a421d */
    --accent-hover: oklch(0.42 0.115 41.4);
    --on-accent: oklch(0.956 0.02 87.5); /* #f6f0e2 */
    --accent-soft: oklch(0.874 0.035 61.7); /* #e7d1bf */
    --success: oklch(0.479 0.107 134.5); /* #426a26 */
    --code-background: oklch(0.929 0.027 87.9); /* #efe7d4 */
    --code: oklch(0.272 0.013 72.3); /* #2b2620 */
    --band: oklch(0.974 0.017 88); /* #fbf6ea */
    --device: oklch(0.241 0.005 219.7); /* #1d2021 */
    --header-background: oklch(0.956 0.02 87.5 / 0.92);

    --ring: 0 0 0 1px oklch(0 0 0 / 0.07), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04);
    --ring-strong: 0 0 0 1px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.08), 0 2px 4px 0 oklch(0 0 0 / 0.06);
    --image-outline: oklch(0 0 0 / 0.1);
    --device-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 40px 80px -40px oklch(0.27 0.013 72.3 / 0.45);

    color-scheme: light;
  }
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

/* Desktop trackpads: keep the sticky header from being dragged past the page edge. */
@media (hover: hover) and (pointer: fine) {
  :root {
    overscroll-behavior-y: none;
  }
}

body {
  margin: 0;
  min-block-size: 100svh;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--font-mono);
  font-weight: 700;
  text-wrap: balance;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

p,
li {
  text-wrap: pretty;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a,
button,
summary {
  touch-action: manipulation;
}

a {
  color: var(--accent);
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}

@media (hover: hover) {
  a:hover {
    color: var(--text);
  }
}

/* Touch screens: links inside running text get a hit area of at least 44px from vertical padding, which an inline
   box paints and hit-tests without moving the lines around it. */
@media (pointer: coarse) {
  main :is(p, li) > a:not([class]) {
    padding-block: 14px;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

code,
pre {
  font-family: var(--font-mono);
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

.wrap {
  inline-size: 100%;
  max-inline-size: var(--max-width);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: -64px;
  z-index: 10;
  padding-block: 10px;
  padding-inline: 14px;
  border-radius: var(--radius-small);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.skip:focus {
  inset-block-start: 12px;
}

.icon {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Header */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  padding-block-start: env(safe-area-inset-top);
  background: var(--header-background);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand__mark {
  inline-size: 28px;
  block-size: 28px;
  flex: none;
}

.brand__mark rect {
  fill: var(--surface-raised);
}

.brand__mark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-small);
}

/* The links stay small on screen but get a 44px tall hit area. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--text-muted);
  text-decoration: none;
}

.site-nav .site-nav__get {
  min-block-size: 36px;
  padding-inline: 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

/* The pill is 36px tall; its hit area stays 44px. */
.site-nav__get {
  position: relative;
}

.site-nav__get::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--text);
  }

  .site-nav .site-nav__get:hover {
    background: var(--accent);
    color: var(--on-accent);
  }
}

/* Mobile drawer: native top-layer popover, with a usable inline-nav fallback in older browsers. */
.mobile-nav-toggle,
.mobile-drawer {
  display: none;
}

.mobile-nav-toggle {
  align-items: center;
  justify-content: center;
  flex: none;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  inline-size: min(20rem, calc(100% - var(--space-7)));
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  padding-block: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-bottom));
  padding-inline: var(--space-5) max(var(--space-5), env(safe-area-inset-right));
  border: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--ring-strong);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-drawer::backdrop {
  background: color-mix(in oklch, var(--device) 65%, transparent);
}

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.mobile-drawer__title {
  font-family: var(--font-mono);
  font-weight: 700;
}

.mobile-drawer__sections,
.mobile-drawer__pages {
  display: grid;
  gap: var(--space-1);
}

.mobile-drawer__pages {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
}

.mobile-drawer__link {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.mobile-drawer__link--get {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

@media (hover: hover) {
  .mobile-nav-toggle:hover,
  .mobile-drawer__link:hover {
    background: var(--surface-raised);
    color: var(--text);
  }

  .mobile-drawer__link--get:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
  }
}

@supports selector(:popover-open) {
  @media (width < 40rem) {
    .site-nav {
      display: none;
    }

    .mobile-nav-toggle {
      display: inline-flex;
    }

    .mobile-drawer:popover-open {
      display: block;
    }

    /* Keyboard focus that leaves the open drawer would land on links hidden under it. Without a script the
       popover stays open, so step it out of the way until focus comes back or the menu is closed. The menu
       button is exempt: it keeps focus while the drawer opens, and hiding then would stop the autofocus. */
    body:has(:focus-visible:not(.mobile-drawer, .mobile-drawer *, .mobile-nav-toggle)) .mobile-drawer:popover-open {
      display: none;
    }
  }
}

/* No popover support: keep every section reachable rather than clipping Features. */
@supports not selector(:popover-open) {
  @media (width < 40rem) {
    .site-header__row {
      flex-wrap: wrap;
    }

    .site-nav {
      flex-wrap: wrap;
    }
  }
}

/* Shared section pieces */

.section {
  padding-block: var(--section-space);
}

.section--band {
  background: var(--band);
  box-shadow: 0 -1px 0 var(--border), 0 1px 0 var(--border);
}

.section__title {
  max-inline-size: 22ch;
  margin-block-end: var(--space-6);
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.lead {
  max-inline-size: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-lead);
  line-height: 1.55;
}

.section__intro {
  margin-block: calc(-1 * var(--space-4)) var(--space-7);
}

/* Store badges: the official files, unaltered (templates/store-buttons.html, docs/brand-marks.md). Both show
   48px high, above Apple's 40px and Google's 28px minimums; the gap keeps a quarter of the height clear between them.
   Google's PNG carries its own clear space of 41/168 of the badge height on every side, trimmed with a negative
   margin so both badges line up at the same visible size. */

.cta-row {
  --badge-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--badge-height) / 4);
}

.store {
  display: inline-flex;
  flex: none;
  border-radius: calc(var(--badge-height) / 5);
}

.store__badge {
  inline-size: auto;
  max-inline-size: none;
  block-size: var(--badge-height);
}

.store--google-play .store__badge {
  block-size: calc(var(--badge-height) * 250 / 168);
  margin: calc(var(--badge-height) * -41 / 168);
}

/* Hero */

.hero {
  padding-block: clamp(40px, 7vw, 88px) var(--section-space);
}

.hero__grid {
  display: grid;
  gap: var(--space-7);
}

.hero__kicker {
  margin-block-end: var(--space-4);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 700;
}

.hero__title {
  max-inline-size: 16ch;
  margin-block-end: var(--space-5);
  font-size: var(--text-h1);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.hero__copy .cta-row {
  margin-block-start: var(--space-6);
}

.hero__price {
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* Phones: headline, badges and one short line, centred with room around them; the longer lead stays on wider
   screens where it sits beside the phone. */
@media (width < 40rem) {
  .hero {
    padding-block-start: var(--space-7);
  }

  .hero__grid {
    gap: var(--space-8);
  }

  .hero__copy {
    text-align: center;
  }

  .hero__title {
    max-inline-size: 13ch;
    margin-inline: auto;
    margin-block-end: 0;
  }

  .hero__lead {
    display: none;
  }

  .hero__copy .cta-row {
    justify-content: center;
    margin-block-start: var(--space-7);
  }

  .hero__price {
    margin-block-start: var(--space-6);
  }
}

.hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* Phone frame around a real screenshot. Concentric corners: screen radius = frame radius - padding. */

.device {
  --device-radius: 46px;
  --device-padding: 9px;
  inline-size: min(100%, 290px);
  padding: var(--device-padding);
  border-radius: var(--device-radius);
  background: var(--device);
  box-shadow: var(--device-shadow);
}

.device__screen {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 2; /* Full Android capture, including its system bars. */
  border-radius: calc(var(--device-radius) - var(--device-padding));
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
  background: var(--background);
}

/* Walkthroughs use full captures: no cropping, overlays or altered app controls. */
.capture-note {
  max-inline-size: var(--measure);
  margin-block-start: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block: var(--space-6);
}

.guide-nav a, .extra__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

.walkthrough {
  padding-block: var(--space-7);
  border-block-start: 1px solid var(--border);
}

.walkthrough h2 {
  margin-block-end: var(--space-4);
  font-size: var(--text-h2);
}

.walkthrough > p {
  max-inline-size: var(--measure);
  color: var(--text-muted);
}

.walkthrough__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-7) var(--space-5);
  margin-block-start: var(--space-6);
  list-style: none;
}

.walkthrough__steps figure {
  max-inline-size: 240px;
  margin-inline: auto;
}

.walkthrough__steps a {
  display: block;
  border-radius: var(--radius-large);
}

.walkthrough__steps img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 2;
  border-radius: var(--radius-large);
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}

.walkthrough__steps .capture--iphone {
  aspect-ratio: 240 / 521;
}

.walkthrough__steps figcaption {
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* Agents bar under the hero: wraps on narrow screens, no motion. */

.agents {
  margin-block-start: clamp(56px, 9vw, 96px);
  text-align: center;
}

.agents__label {
  color: var(--text-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.agents__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: safe center;
  gap: 10px;
  margin-block-start: var(--space-5);
}

.agent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding-block: 6px;
  padding-inline: 14px 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--ring);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.screens-nav a * {
  cursor: inherit;
}

.agent__glyph {
  flex: none;
  inline-size: 1.2em;
  color: var(--accent);
  text-align: center;
}

.agent__mark {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  object-fit: contain;
}

.agent picture {
  display: contents;
}

/* One-colour marks without a vendor variant for the other background: black ones (Codex, Copilot, Qoder) turn white on the
   dark theme and the white one (Grok) turns black on the light theme, as in the app. Marks with vendor variants switch
   files through <picture>. */
.agent__mark--black {
  filter: invert(1);
}

@media (prefers-color-scheme: light) {
  .agent__mark--black {
    filter: none;
  }

  .agent__mark--white {
    filter: invert(1);
  }
}

.agent--more {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--success) 55%, transparent);
  color: var(--success);
  font-weight: 700;
}

.agents__note {
  max-inline-size: 60ch;
  margin-block-start: var(--space-4);
  margin-inline: auto;
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* One stationary phone frame; images, captions and position numbers scroll together.
   No target-based current indicator: it would become stale after a swipe without JavaScript. */
.gallery-layout {
  display: grid;
  grid-template-areas: "nav" "gallery" "help";
  justify-items: center;
  gap: var(--space-5);
}

.gallery {
  grid-area: gallery;
  position: relative;
  inline-size: min(100%, 290px);
  container-type: inline-size;
}

.gallery__frame {
  position: absolute;
  inset: 0 0 auto;
  /* Screenshot ratio plus 9px bezel on each side. */
  block-size: calc((100cqi - 18px) * 2 + 18px); /* Android capture, 1080×2160. */
  border-radius: 46px;
  background: var(--device);
  box-shadow: var(--device-shadow);
  pointer-events: none;
}

.screens {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border-radius: 46px 46px 0 0;
}

.screens:focus-visible {
  outline-offset: 3px;
}

.screens__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

.screen {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* The root already reserves the sticky header; a second margin would hide the caption below the fold. */
}

.screen picture {
  display: block;
  padding: 9px;
}

.screen .device__screen {
  border-radius: 37px;
}

.screen__caption {
  padding: var(--space-5) 4px var(--space-4);
}

.screen__position {
  margin-block-end: var(--space-2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.screen__title {
  margin-block-end: var(--space-2);
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.screen__text,
.gallery-controls p {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.gallery-controls {
  grid-area: help;
  max-inline-size: 26rem;
}

.gallery-controls__title {
  margin-block-end: var(--space-3);
  font-size: var(--text-h3);
}

/* Phones: a two-by-two set of choices right above the frame. */
.screens-nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  inline-size: min(100%, 26rem);
}

.screens-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--ring);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.screens-nav a span {
  color: var(--accent);
  font-family: var(--font-mono);
}

.screens-nav a:focus-visible {
  background: var(--surface-raised);
}

@media (hover: hover) {
  .screens-nav a:hover {
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
}

/* Wider screens: the frame on the left, the instructions and a column of choices beside it. */
@media (min-width: 46rem) {
  .gallery-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "gallery ." "gallery help" "gallery nav" "gallery .";
    column-gap: var(--space-7);
    row-gap: 0;
  }

  .screens-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }

  .screens-nav a {
    gap: var(--space-4);
    min-block-size: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-body);
  }
}

/* Original outline icons and shipped features, not screenshot descriptions. */
.extras {
  display: grid;
  gap: var(--space-5);
}

.extra {
  padding: var(--space-5);
  border-radius: var(--radius-large);
  background: var(--surface);
  box-shadow: var(--ring);
}

.extra .icon {
  inline-size: 28px;
  block-size: 28px;
  margin-block-end: var(--space-4);
  color: var(--accent);
}

.extra__title {
  margin-block-end: var(--space-2);
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.extra__text {
  max-inline-size: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* Phones: the icon sits beside the title and the cards pack closer, with every title and description kept. */
@media (width < 40rem) {
  .extras {
    gap: var(--space-3);
  }

  .extra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
  }

  .extra .icon {
    inline-size: 24px;
    block-size: 24px;
    margin-block-end: 0;
  }

  .extra__title {
    margin-block-end: 0;
  }

  .extra__text {
    grid-column: 1 / -1;
    margin-block-start: var(--space-2);
  }
}

/* Card rows that scroll sideways on phones (carousel.js adds the progress bar and buttons). The viewport reaches the
   screen edges so the next card peeks in; from 40rem the list is the usual grid and nothing scrolls. */
@media (width < 40rem) {
  .carousel__viewport {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-block: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }

  .carousel--active .carousel__viewport {
    scrollbar-width: none;
  }

  .carousel--active .carousel__viewport::-webkit-scrollbar {
    display: none;
  }

  .carousel__viewport:focus-visible {
    outline-offset: -2px;
  }

  .carousel__viewport > :is(ul, ol) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 20rem);
    grid-template-columns: none;
    gap: var(--space-3);
  }

  .carousel__viewport > :is(ul, ol) > li {
    scroll-snap-align: start;
  }

  /* Steps are plain text on wider screens; as swipeable items they need a card edge. */
  .carousel__viewport > .steps > li {
    padding: var(--space-5);
    border-radius: var(--radius-large);
    background: var(--surface);
    box-shadow: var(--ring);
  }
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.carousel__controls[hidden] {
  display: none;
}

.carousel__progress {
  position: relative;
  flex: 1;
  block-size: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.carousel__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 25%;
  border-radius: inherit;
  background: var(--accent);
}

.carousel__button {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--ring-strong);
  color: var(--text);
  cursor: pointer;
}

.carousel__button[aria-disabled="true"] {
  color: var(--text-quiet);
  cursor: default;
}

@media (hover: hover) {
  .carousel__button:not([aria-disabled="true"]):hover {
    box-shadow: inset 0 0 0 1px var(--accent);
  }
}

@media (min-width: 40rem) {
  .carousel__controls {
    display: none;
  }
}

/* Three steps: a real sequence, so numbered. */

.steps {
  display: grid;
  gap: var(--space-6);
}

.step__num {
  display: block;
  margin-block-end: var(--space-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.step__title {
  margin-block-end: var(--space-2);
  font-size: var(--text-h3);
  letter-spacing: -0.02em;
}

.step p {
  max-inline-size: var(--measure);
  color: var(--text-muted);
}

/* One line on the connection model under the steps, then the way to the FAQ page. */
.steps__note {
  max-inline-size: 70ch;
  margin-block-start: var(--space-6);
  color: var(--text-muted);
}

.steps__note strong {
  color: var(--text);
}

.steps__faq {
  margin-block-start: var(--space-4);
  color: var(--text-muted);
}

/* Comparison table */

.compare__title {
  max-inline-size: 34ch;
  margin-block: var(--space-8) var(--space-4);
  font-size: var(--text-h3);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.compare {
  border-radius: var(--radius-large);
  background: var(--surface);
  box-shadow: var(--ring);
  overflow: clip;
}

.compare table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.compare th,
.compare td {
  padding-block: 14px;
  padding-inline: var(--space-4);
  border-block-start: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}

.compare thead th {
  border-block-start: 0;
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.compare tbody th {
  color: var(--text-muted);
  font-weight: 400;
}

.compare td {
  color: var(--text);
}

.compare__note {
  max-inline-size: 72ch;
  margin-block-start: var(--space-3);
  color: var(--text-quiet);
  font-size: var(--text-caption);
}

/* Narrow screens: each row becomes a question with its answer under it. */
@media (max-width: 39.9375rem) {
  .compare thead {
    display: none;
  }

  /* Without the header row, each answer names its app. */
  .compare td::before {
    content: attr(data-label) ": ";
    color: var(--accent);
    font-weight: 700;
  }

  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }

  .compare tbody tr + tr {
    border-block-start: 1px solid var(--border);
  }

  .compare tbody th,
  .compare tbody td {
    border-block-start: 0;
  }

  .compare tbody th {
    padding-block-end: 4px;
  }

  .compare tbody td {
    padding-block-start: 0;
  }
}

/* Pricing */

.plans {
  display: grid;
  gap: var(--space-4);
}

.plan {
  padding: var(--space-5);
  border-radius: var(--radius-large);
  background: var(--surface);
  box-shadow: var(--ring);
}

.plan--featured {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.plan__name {
  color: var(--accent);
  font-size: var(--text-small);
}

.plan__price {
  margin-block: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.plan__unit {
  color: var(--text-muted);
  font-family: var(--font-text);
  font-size: var(--text-small);
  font-weight: 400;
  letter-spacing: 0;
}

.plan__line {
  color: var(--text);
  font-size: var(--text-small);
}

.plan__line + .plan__line {
  margin-block-start: 6px;
}

.plan__line--quiet {
  color: var(--text-muted);
}

.plans__note {
  max-inline-size: 64ch;
  margin-block-start: var(--space-5);
  color: var(--text-muted);
}

/* FAQ page: plain <details>, no script, then the comparison table. */

.faq-page {
  padding-block: clamp(48px, 8vw, 96px) var(--section-space);
}

.faq-page__title {
  margin-block-end: var(--space-6);
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.faq {
  max-inline-size: 760px;
  border-block-start: 1px solid var(--border);
}

.faq__item {
  border-block-end: 1px solid var(--border);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 56px;
  padding-block: var(--space-3);
  padding-inline: 2px;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary h3 {
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.45;
  letter-spacing: 0;
}

/* A plus drawn from two bars; it turns into a cross when the answer is open. */
.faq__item summary::after {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
}

.faq__item[open] summary::after {
  rotate: 45deg;
}

.faq__item p {
  max-inline-size: 62ch;
  padding-block-end: var(--space-5);
  padding-inline: 2px;
  color: var(--text-muted);
}

.faq__item .faq__source {
  margin-block-start: calc(-1 * var(--space-3));
  font-size: var(--text-caption);
}

.faq__more {
  margin-block-start: var(--space-5);
  color: var(--text-muted);
}

/* Closing call to action */

.section--cta {
  background: var(--band);
  box-shadow: 0 -1px 0 var(--border);
}

.download {
  display: grid;
  justify-items: center;
  text-align: center;
}

.download__mark {
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: var(--space-5);
}

.download__title {
  margin-block-end: var(--space-4);
}

.download__text {
  margin-block-end: var(--space-6);
}

.download .cta-row {
  inline-size: 100%;
  justify-content: center;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  font-weight: 700;
  text-decoration: none;
}

.more-link::after {
  content: "→";
}

.download__pricing {
  margin-block-start: var(--space-4);
}

/* Pricing page: the offer on its own, centred title, plans and the store badges. */

.pricing-page {
  padding-block: clamp(48px, 8vw, 96px) var(--section-space);
}

.pricing-page__kicker {
  margin-block-end: var(--space-4);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 700;
  text-align: center;
}

.pricing-page__title {
  max-inline-size: 24ch;
  margin-inline: auto;
  margin-block-end: var(--space-4);
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-align: center;
}

.pricing-page__lead {
  margin-inline: auto;
  margin-block-end: var(--space-7);
  text-align: center;
}

.pricing-page .plans__note {
  margin-inline: auto;
  text-align: center;
}

.pricing-page__cta {
  justify-content: center;
  margin-block-start: var(--space-6);
}

.pricing-page__more {
  margin-block-start: var(--space-6);
  color: var(--text-muted);
  text-align: center;
}

/* Footer */

.site-footer {
  padding-block: var(--space-7) max(var(--space-7), env(safe-area-inset-bottom));
  box-shadow: 0 -1px 0 var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
}

.brand--footer {
  margin-block-end: var(--space-2);
}

.site-footer__origin {
  max-inline-size: 40ch;
}

.site-footer__title {
  margin-block-end: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.site-footer__links a,
.site-footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
  font-size: var(--text-caption);
}

@media (hover: hover) {
  .site-footer__links a:hover {
    color: var(--accent);
  }
}

.site-footer__legal {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border);
  color: var(--text-quiet);
  font-size: var(--text-caption);
}

/* Wider screens: mobile is the base, these only change the layout. */

@media (min-width: 40rem) {
  .site-nav {
    gap: var(--space-5);
  }

  .extras,
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  :root {
    --text-body: 1.0625rem;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
  }

  .hero .device {
    inline-size: 320px;
  }

  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__grid {
    grid-template-columns: 1.3fr 0.8fr 0.8fr 0.8fr;
  }

  .extras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .extras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Motion: opt-in only. */

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }

  .mobile-drawer:popover-open {
    animation: drawer-enter 220ms var(--ease-out) both;
  }

  /* One staged entrance on first load, in reading order. */
  .reveal {
    animation: enter 520ms var(--ease-out) both;
  }

  .reveal--2 {
    animation-delay: 80ms;
  }

  .reveal--3 {
    animation-delay: 160ms;
  }

  .reveal--4 {
    animation-delay: 240ms;
  }

  .site-nav__get,
  .faq__item summary {
    transition-property: scale, background-color, color;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
  }

  .site-nav__get:active {
    scale: 0.96;
  }

  .faq__item summary::after {
    transition: rotate 200ms var(--ease-out);
  }
}

@keyframes drawer-enter {
  from {
    translate: 100% 0;
  }
}

@keyframes enter {
  from {
    opacity: 0;
    translate: 0 12px;
    filter: blur(4px);
  }
}

/* Windows High Contrast: shadows disappear, so give the shapes real borders. */
@media (forced-colors: active) {
  .plan,
  .compare,
  .extra,
  .screens-nav a,
  .agent,
  .site-nav .site-nav__get {
    border: 1px solid CanvasText;
  }
}

/* Cookie notice (templates/cookie-notice.html, cookie-notice.js, site/README.md "Ciasteczka"): an information banner
   with one OK button, not a consent form. Its sentence also stays in the footer legal notes for visitors without
   JavaScript. The script appends the banner after the footer and it sticks to the bottom of the window, so nothing
   above it moves when it appears and at the end of the page it sits below the footer instead of over it. While it
   shows, scrolling to a focused element keeps that element clear of it. */

.site-footer__cookies a {
  overflow-wrap: anywhere;
}

:root {
  scroll-padding-block-end: var(--cookie-banner-space, 0px);
}

.cookie-banner {
  position: sticky;
  inset-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  inline-size: min(40rem, calc(100% - 2 * var(--space-3)));
  margin: var(--space-3) auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--ring-strong), 0 12px 32px -12px oklch(0 0 0 / 0.45);
  color: var(--text);
  font-size: var(--text-small);
  line-height: 1.5;
}

.cookie-banner__text {
  flex: 1 1 auto;
}

.cookie-banner__ok {
  flex: none;
  min-block-size: 44px;
  min-inline-size: 64px;
  margin-inline-start: auto;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 var(--text-small) / 1 var(--font-text);
  cursor: pointer;
}

/* Phones: a bar across the bottom edge in the caption size, with OK beside the text, so it takes as little of the
   screen as the text allows. */
@media (width < 40rem) {
  .cookie-banner {
    inset-block-end: 0;
    gap: var(--space-3);
    inline-size: 100%;
    margin: var(--space-3) 0 0;
    padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    border-radius: 0;
    box-shadow: 0 -1px 0 var(--border), 0 -12px 32px -16px oklch(0 0 0 / 0.45);
    font-size: var(--text-caption);
    line-height: 1.45;
  }
}

@media (hover: hover) {
  .cookie-banner__ok:hover {
    background: var(--accent-hover);
  }
}

@media print {
  .cookie-banner {
    display: none;
  }
}

/* Text pages: privacy policy, terms of use, support, 404. */

.doc {
  padding-block: clamp(40px, 7vw, 72px) var(--section-space);
}

.doc__body {
  max-inline-size: 42rem;
}

.doc__title {
  margin-block-end: var(--space-3);
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.doc__meta {
  margin-block-end: var(--space-6);
  color: var(--text-quiet);
  font-size: var(--text-small);
}

.doc h2 {
  margin-block: var(--space-7) var(--space-3);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.doc h3 {
  margin-block: var(--space-5) var(--space-2);
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
}

.doc p,
.doc li {
  color: var(--text-muted);
}

.doc p + p {
  margin-block-start: var(--space-3);
}

.doc ul,
.doc ol {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-3);
  padding-inline-start: 1.4em;
  list-style: disc;
}

.doc ol {
  list-style: decimal;
}

.doc strong {
  color: var(--text);
}

.doc code {
  padding-inline: 4px;
  border-radius: 4px;
  background: var(--code-background);
  color: var(--code);
  font-size: 0.875em;
}

.doc pre {
  margin-block: var(--space-3);
  padding: 14px 16px;
  border-radius: var(--radius-small);
  background: var(--code-background);
  color: var(--code);
  font-size: var(--text-caption);
  overflow-x: auto;
}

.doc pre code {
  padding: 0;
  background: none;
}

.doc .cta-row {
  margin-block-start: var(--space-6);
}

.contact-card {
  margin-block: var(--space-2);
  padding: 20px 22px;
  border-radius: var(--radius-large);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.contact-card p {
  color: var(--text);
}

.contact-card a {
  font-weight: 700;
}