/* Pirkoo — styles for pirkoo.com's single card (copied from tvarkom.com's on 10 Nov 2026: keep the look in step). Mobile-first: base rules target phones,
   min-width media queries layer on tablet (≥720px) and desktop (≥1100px). */

/* Fonts: Geist and Geist Mono (SIL Open Font License, assets/fonts/OFL.txt), served from
   this site so no visitor data goes to a font CDN. One variable file per family. */
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ink: #1C1D1B;
  --paper: #F8F8F4;
  --surface: #FFFFFF;
  --line: #E0E0D8;
  --muted: #585A55;
  --green: #00FF41;
  --green-dark: #00992E;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --gutter: 20px;
  --max: 1200px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; background: var(--paper); color: var(--ink); overflow-x: hidden; }
a { color: inherit; }
h1, p { margin: 0; }
:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section__title { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }

/* Button */

/* The card: the name, the rule and the description, with the Privacy Policy and support address under it */
.why__inner { display: flex; flex-direction: column; gap: 16px; max-width: calc(460px + 2 * var(--gutter)); }
.definition { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.definition__word { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; font-size: inherit; font-weight: inherit; }
.definition__word strong { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.definition__word span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.definition__rule { height: 3px; width: 48px; background: var(--green); }
.definition__list { margin: 0; padding: 0; list-style: none; font-size: 18px; line-height: 1.55; counter-reset: def; }
.definition__list li { counter-increment: def; }
.definition__list li::before { content: counter(def) "."; font-family: var(--mono); color: var(--muted); margin-right: 8px; }
.definition__text { margin: 0; font-size: 18px; line-height: 1.55; }
.why__links { padding: 0 4px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.why__links a { color: var(--muted); text-decoration-color: var(--line); text-underline-offset: 3px; }

/* The page: phones from the top; tablet and desktop centred in the window */
.single { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: 56px 0; }

/* ≥720px: tablet */
@media (min-width: 720px) {
  :root { --gutter: 40px; }
  .single { justify-content: center; }
  .section__title { font-size: 44px; }
}

/* ≥1100px: desktop */
@media (min-width: 1100px) {
  .definition { padding: 40px; }
  .definition__word strong { font-size: 44px; }
  .definition__list { font-size: 22px; }
  .definition__text { font-size: 22px; }
  .section__title { font-size: 52px; }
}

/* The privacy page (/privacy/, generated by cmd/legalpage from the plugin's policy) */
.legal { padding: 56px 0 72px; }
.legal__inner { max-width: calc(760px + 2 * var(--gutter)); display: flex; flex-direction: column; gap: 16px; }
.legal__home { font-family: var(--mono); font-size: 13px; }
.legal__home a { color: var(--muted); text-decoration-color: var(--line); text-underline-offset: 3px; }
.legal__product { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.legal h2 { margin: 24px 0 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.legal p, .legal li { color: var(--muted); overflow-wrap: anywhere; }
.legal a { color: var(--ink); text-decoration-color: var(--green-dark); text-underline-offset: 3px; }
@media (min-width: 720px) { .legal h2 { font-size: 26px; } }