/* Pavel Portfolio v3. Prototype A's light editorial look (Newsreader +
   Schibsted Grotesk, paper/ink/green), with prototype B's project card. */

@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-latin.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --paper: #edf0ec;
  --paper-2: #e1e5df;
  --card: #f9faf8;
  --white: #ffffff;
  --ink: #1b1a17;
  --ink-2: #4f4b44;
  --ink-3: #66625a;
  --line: #d2d8d1;
  --line-2: #e2e7e1;

  --before: #959b94;
  --after: #178060;
  --after-ink: #0f5c45;
  --after-wash: #e1efe7;
  --s2: #3d63c7;
  --s3: #9a5b13;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
  --r-sm: 8px;
  --max: 1160px;
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p, ul, ol, dl, dd { margin: 0; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 520px) { .wrap { padding: 0 16px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--after); outline-offset: 3px; border-radius: 4px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.top-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }
.mark { font-family: var(--serif); font-size: 21px; text-decoration: none; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.nav a, .dd-btn { color: var(--ink-2); text-decoration: none; transition: color .15s; }
.nav a:hover, .dd-btn:hover, .nav a[aria-current="page"] { color: var(--ink); }
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 10px 0; cursor: pointer; font-size: 15px; }
.dd-btn .chev { transition: transform .2s var(--ease); }
.dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dd-list { display: none; position: absolute; top: 100%; left: -14px; min-width: 220px; list-style: none; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -20px rgba(27, 26, 23, .35); }
.dd:hover .dd-list, .dd:focus-within .dd-list, .dd-btn[aria-expanded="true"] + .dd-list { display: block; }
.dd-list a { display: block; padding: 9px 12px; border-radius: 8px; }
.dd-list a:hover { background: var(--paper); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; font-size: 12.5px; letter-spacing: .03em; }
.lang a, .lang span { padding: 3px 9px; border-radius: 999px; }
.lang [aria-current] { background: var(--ink); color: var(--paper); }
.nav .nav-cta { color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 7px 15px; white-space: nowrap; transition: background .15s, color .15s; }
.nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] { background: var(--ink); color: var(--paper); }
.menu-btn { display: none; }

@media (max-width: 920px) {
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s var(--ease), opacity .2s; }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  .top[data-menu="open"] .menu-icon { background: transparent; }
  .top[data-menu="open"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .top[data-menu="open"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

  .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 16px 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -24px rgba(27, 26, 23, .4); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .top[data-menu="closed"] .nav { display: none; }
  .nav > a, .dd-btn { padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--line-2); }
  .dd-btn { width: 100%; pointer-events: none; color: var(--ink-3); font-size: 14px; padding-bottom: 6px; border-bottom: 0; }
  .dd-btn .chev { display: none; }
  .dd-list { display: block; position: static; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; box-shadow: none; background: none; min-width: 0; }
  .dd-list a { padding: 9px 0 9px 14px; font-size: 17px; color: var(--ink-2); }
  .dd-list a:hover { background: none; color: var(--ink); }
  .lang { align-self: flex-start; margin: 16px 0 4px; font-size: 14px; }
  .lang a, .lang span { padding: 6px 14px; }
  .nav .nav-cta { margin-top: 14px; text-align: center; padding: 12px 15px; border-bottom: 1px solid var(--ink); }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 500; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--after-ink); }
.btn-quiet { border-color: var(--line); background: transparent; color: var(--ink); }
.btn-quiet:hover { border-color: var(--ink-3); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.arrow { display: inline-block; transition: transform .2s var(--ease); }
.btn:hover .arrow, .sec-link:hover .arrow, .svc-card:hover .arrow { transform: translateX(3px); }

/* ---------- sections ---------- */
.sec { padding: 80px 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 28px; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.sec-link { color: var(--ink-2); text-decoration: none; font-size: 15.5px; }
.sec-link:hover { color: var(--ink); }
@media (min-width: 900px) {
  .sec-split .wrap { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
  .sec-split .sec-head { margin: 0; }
}
@media (max-width: 700px) { .sec { padding: 56px 0; } }

/* ---------- hero ---------- */
.hero { padding: 72px 0 80px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -0.025em; max-width: 13ch; }
.hero .lead { margin-top: 20px; font-size: 19px; color: var(--ink-2); max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.checks { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--ink-2); }
.checks li { display: inline-flex; align-items: center; gap: 8px; }
.ck { flex: none; color: var(--after); }

.hero-visual { position: relative; aspect-ratio: 16 / 12.6; }
.hv { position: absolute; width: 80%; }
.hv .browser { box-shadow: 0 24px 50px -28px rgba(27, 26, 23, .45); }
.n1 .hv-0 { width: 100%; top: 10%; }
.hv-0 { left: 0; bottom: 0; }
.hv-1 { left: 10%; bottom: 13%; }
.hv-2 { left: 20%; bottom: 26%; }
.hv-1 .browser-screen, .hv-2 .browser-screen { filter: saturate(.9); }
@media (max-width: 900px) {
  .hero { padding: 40px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { aspect-ratio: 16 / 11.5; }
}
@media (max-width: 560px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .checks { flex-direction: column; gap: 8px; }
}

/* ---------- project cards (prototype B's card, light) ---------- */
.cards { list-style: none; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.card { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .2s; }
.card:hover { border-color: var(--ink-3); }
.card-visual { position: relative; padding: 20px 20px 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.browser { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
.card-visual .browser { border-bottom: 0; border-radius: 10px 10px 0 0; }
.browser-bar { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; background: var(--card); border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); }
.dots { display: inline-flex; gap: 5px; flex: none; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--paper); border-radius: 6px; padding: 2px 10px; color: var(--ink-2); }
.browser-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.browser-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card .browser-screen img { transition: transform .5s var(--ease); }
.card:hover .browser-screen img { transform: scale(1.015); }
/* a picture that opens full size (blocks.zoomable + js/zoom.js) */
.zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: zoom-in; }
.browser-screen > .zoom { height: 100%; }
.zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.zoom-hint { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(27, 26, 23, .78); color: #fff; opacity: 0; transition: opacity .2s; pointer-events: none; }
.zoom:hover .zoom-hint, .zoom:focus-visible .zoom-hint { opacity: 1; }
/* touch screens have no hover, so the hint stays visible there */
@media (hover: none) { .browser-screen .zoom-hint { opacity: 1; } }
.shot-old .zoom-hint { display: none; }
.shot-old { position: absolute; left: 10px; bottom: 10px; width: 34%; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); box-shadow: 0 12px 28px -6px rgba(27, 26, 23, .45); }
.tag-mini { position: absolute; left: 6px; top: 6px; font-size: 11px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; padding: 5px 7px; border-radius: 4px; background: rgba(27, 26, 23, .86); color: #fff; }

.card-body { padding: 22px; display: grid; align-content: start; }
.card-body > * + * { margin-top: 16px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card h2, .card h3 { font-size: clamp(22px, 2.3vw, 28px); }
.card .meta { color: var(--ink-3); font-size: 14.5px; margin-top: 4px; }
.kind { flex: none; margin-top: 4px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-2); white-space: nowrap; }
.kind-own { background: var(--after-wash); border-color: #b9d7c7; color: var(--after-ink); }
/* "Uusi sivusto" has to be noticed (Pavel, 2026-10-08): a tint in the charts'
   blue, not green, which already means "own site" and every result number,
   plus a dot. Text on the tint is 6.9:1. */
.kind-new { display: inline-flex; align-items: center; gap: 6px; background: #e5ebf9; border-color: #bccbee; color: #2a4a9c; font-weight: 600; }
.kind-new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s2); }

.deltas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* each tile draws its right and bottom hairline; the box clips the outer ones */
.deltas > * { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin: 0 -1px -1px 0; }
/* the number sits at the tile's foot, so a row of tiles keeps its numbers
   on one line however many lines each label takes */
.delta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.delta dt { font-size: 13px; color: var(--ink-2); line-height: 1.35; hyphens: auto; overflow-wrap: break-word; } /* a long Finnish compound in a keyword label breaks instead of spilling past the tile */
.delta dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 7px; margin-top: auto; }
.delta .from { color: var(--ink-3); font-size: 16px; font-variant-numeric: lining-nums; }
.delta .arr { color: var(--ink-3); font-size: 14px; }
.delta .to { font-family: var(--serif); font-size: 32px; line-height: 1.05; color: var(--after-ink); font-variant-numeric: lining-nums; }
/* 13px lets "not in top 100 → 5." stay on one line in a card's tile */
.delta .nr { font-family: var(--sans); }
.unit { font-family: var(--sans); font-size: .5em; color: var(--ink-2); }
.delta .from .unit { font-size: .85em; color: inherit; }
.note-mark { color: var(--ink-3); font-size: 13px; align-self: flex-start; }
.footnote { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: -6px; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.card-actions .btn-primary { flex: 1 1 220px; }
.link-out { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-2); font-size: 15px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.link-out:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
@media (max-width: 719px) {
  .deltas { grid-template-columns: 1fr 1fr; }
  .deltas > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* cards side by side share rows (subgrid), so their metric tables and
   buttons line up even when one card's labels wrap more. Every card has the
   same four parts for this (a test checks): picture, head, numbers, buttons.
   Cards carry no footnotes; one note made an empty row in its neighbour.
   With an odd count only the full-width first card is left out: the pairs
   after it need the rows too (the third card, 2026-10-07, sat 35px off). */
.cards:not(.odd) > li, .cards.odd > li + li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.cards:not(.odd) .card, .cards.odd > li + li .card { grid-row: 1 / -1; grid-template-rows: subgrid; }
.cards:not(.odd) .card-body, .cards.odd > li + li .card-body { grid-row: 2 / -1; grid-template-rows: subgrid; row-gap: 0; }
/* odd number of cards: the first one runs full width, side by side */
.cards.odd > li:first-child { grid-column: 1 / -1; }
/* About: the projects not shown as a big card, as slim link rows. Rows in
   a line share name/meta lines (subgrid), like the big cards do. */
.others { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.others > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.other { grid-row: 1 / -1; display: grid; grid-template-columns: clamp(88px, 22%, 120px) minmax(0, 1fr) auto; grid-template-rows: subgrid; column-gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.other:hover { border-color: var(--ink-3); }
.other:hover .arrow { transform: translateX(3px); }
.other-shot { grid-row: 1 / -1; display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.other-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.other-name { grid-column: 2; align-self: end; font-size: 19px; line-height: 1.25; }
.other-meta { grid-column: 2; align-self: start; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.other-meta span { display: block; }
.other-go { grid-column: 3; grid-row: 1 / -1; color: var(--ink-2); }
@media (min-width: 960px) {
  .cards.odd > li:first-child .card { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: none; }
  .cards.odd > li:first-child .card-visual { display: flex; align-items: flex-end; padding: 32px 0 0 32px; border-bottom: 0; border-right: 1px solid var(--line); }
  .cards.odd > li:first-child .card-visual .browser { width: 100%; border-right: 0; border-top-right-radius: 0; }
  .cards.odd > li:first-child .card-body { padding: 32px; align-content: center; }
  .cards.odd > li:first-child .card-actions .btn-primary { flex: 0 1 280px; }
}

/* ---------- services ---------- */
.svc-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; transition: border-color .2s; }
.svc-card:hover { border-color: var(--ink-3); }
.svc-card h2, .svc-card h3 { font-size: 27px; }
.svc-card p { color: var(--ink-2); font-size: 15.5px; }
.svc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 15px; }
.svc-foot .price { font-weight: 600; }
.svc-foot .more { color: var(--ink-2); }
@media (max-width: 860px) { .svc-cards { grid-template-columns: 1fr; } }

/* ---------- process ---------- */
.steps-row { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: step; }
.steps-row li { counter-increment: step; padding: 20px 22px 0 0; border-top: 2px solid var(--line); position: relative; }
.steps-row li::before { content: counter(step); display: block; margin-bottom: 12px; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--after); }
.steps-row li:first-child { border-top-color: var(--after); }
.steps-row h2, .steps-row h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.steps-row p { color: var(--ink-2); font-size: 15px; }
/* number, heading and text rows shared across the steps, so a heading that
   wraps doesn't push only its own text down */
@media (min-width: 961px) { .steps-row li { display: grid; grid-row: span 3; grid-template-rows: subgrid; } }
@media (max-width: 960px) {
  .steps-row { grid-template-columns: 1fr; }
  .steps-row li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-top-width: 1px; }
  .steps-row li::before { grid-row: span 2; margin: 0; font-size: 32px; }
  .steps-row li:first-child { border-top-width: 2px; }
}

/* ---------- prices ---------- */
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* the three boxes share rows (subgrid): names, prices, dividers and lists
   line up despite the badge and the missing "plus" line in the first box */
.pk { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 14px; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.pk h2, .pk h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.pk-price { font-family: var(--serif); font-size: 52px; line-height: 1; margin-top: -4px; font-variant-numeric: lining-nums; }
.pk-pages { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.pk-inc { font-size: 14px; color: var(--ink-3); padding-top: 12px; border-top: 1px solid var(--line-2); }
.pk-list { list-style: none; padding: 0; display: grid; gap: 10px; align-content: start; font-size: 15.5px; }
.pk-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.pk-list .ck { margin-top: 3px; }
/* a line with an explanation: the summary is laid out like a plain line,
   "Lue lisää" sits after the text, and the explanation opens under it */
.pk-list li.has-more { display: block; }
.pk-list summary { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; list-style: none; }
.pk-list summary::-webkit-details-marker { display: none; }
/* both labels sit in one grid cell, so the toggle is always as wide as the
   longer one: "Lue lisää" turning into "Näytä vähemmän" never re-wraps the
   line (that made the box jump a line on click) */
.pk-more { display: inline-grid; white-space: nowrap; font-size: 13.5px; color: var(--ink-3); vertical-align: baseline; }
.pk-more > span { grid-area: 1 / 1; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.pk-list summary:hover .pk-more { color: var(--ink); }
.pk-list summary:hover .pk-more > span { text-decoration-color: var(--ink-3); }
.pk-list summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.pk-more .m-close, details[open] .pk-more .m-open { visibility: hidden; }
details[open] .pk-more .m-close { visibility: visible; }
.pk-list { position: relative; }
.pk-list details p, .pk-probe { margin: 0; padding: 6px 0 4px 28px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
/* every explanation opens to the tallest one's height (--more-h, measured by
   js/prices.js), so switching lines never resizes the box */
.pk-list details p { min-height: var(--more-h, 0); }
.pk-probe { position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; pointer-events: none; }
/* opening and closing slide to that height. When one line in a box opens and
   the other closes, both move at the same pace, so the box keeps its size
   the whole time. Browsers without ::details-content just open instantly. */
.pk-list details::details-content { block-size: 0; overflow-y: clip; transition: block-size .26s var(--ease), content-visibility .26s allow-discrete; }
.pk-list details[open]::details-content { block-size: var(--more-h, auto); }
.pk-list details p { opacity: 0; transition: opacity .26s var(--ease); }
.pk-list details[open] p { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pk-list details::details-content, .pk-list details p { transition: none; }
}
.pk .btn { margin-top: auto; }
.pk-maint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; padding: 16px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-2); font-size: 15.5px; }
.pk-maint b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .pk-grid { grid-template-columns: 1fr; } }

.pk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; background: var(--after-ink); color: #fff; white-space: nowrap; }
.pk-rec { border-color: var(--after); box-shadow: 0 0 0 1px var(--after), 0 20px 40px -28px rgba(15, 92, 69, .45); }

/* package comparison table (Nettisivut page) */
.pk-table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.pk-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.pk-table th, .pk-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); text-align: center; vertical-align: middle; }
.pk-table tbody th { text-align: left; font-weight: 400; color: var(--ink-2); }
.pk-table thead th { vertical-align: bottom; padding-top: 22px; border-bottom: 1px solid var(--line); }
/* equal package columns, so one long cell can't squeeze its neighbours */
.pk-table thead th:not(.t-feat) { width: 20%; }
.pk-table .t-feat { text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.pk-table .t-name { display: block; font-weight: 600; font-size: 15px; }
.pk-table .t-price { display: block; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; margin: 2px 0 6px; font-variant-numeric: lining-nums; }
.pk-table thead .badge { margin-bottom: 6px; }
.pk-table .rec { background: color-mix(in srgb, var(--after-wash) 55%, transparent); }
.pk-table .ck { display: inline-block; color: var(--after); }
.pk-table .t-pages { font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.35; }
/* the table is the detailed view: a line's explanation shows under it */
.pk-table .t-item { display: block; color: var(--ink); }
.pk-table .t-desc { display: block; margin-top: 4px; max-width: 62ch; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.pk-table tbody th { padding-top: 15px; padding-bottom: 15px; }
.pk-table .t-no { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--line); vertical-align: middle; }
.pk-table tfoot td { border-bottom: 0; padding-top: 18px; padding-bottom: 20px; }
.pk-table tfoot .btn { width: 100%; padding: 0 12px; }
/* phone: each feature on its own line, the three ticks under it lined up
   with the package names, so long Finnish words never squeeze the columns */
@media (max-width: 700px) {
  .pk-table-wrap { overflow: visible; }
  .pk-table, .pk-table thead, .pk-table tbody, .pk-table tfoot { display: block; }
  .pk-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pk-table .t-feat, .pk-table .t-blank { display: none; }
  .pk-table th, .pk-table td { padding: 8px 6px; border-bottom: 0; }
  .pk-table thead th { padding-top: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .pk-table thead tr { position: sticky; top: var(--header-h); z-index: 1; background: var(--card); border-radius: 18px 18px 0 0; }
  .pk-table tbody tr { border-bottom: 1px solid var(--line-2); }
  .pk-table tbody th { grid-column: 1 / -1; padding: 12px 14px 0; font-size: 14.5px; }
  .pk-table .t-desc { font-size: 13.5px; }
  .pk-table tbody td { padding: 6px 4px 12px; }
  .pk-table .t-price { font-size: 24px; }
  .pk-table .badge { font-size: 10.5px; padding: 2px 7px; }
  /* grid items ignore vertical-align: sit each cell on the row's bottom so the names
     and prices still share a line under the recommended column's badge */
  .pk-table thead th { align-self: end; }
  .pk-table thead th:not(.t-feat) { width: auto; }
  .pk-table tfoot td { padding: 16px 5px 18px; }
  .pk-table tfoot .btn { font-size: 13px; min-height: 42px; padding: 0 6px; white-space: normal; line-height: 1.2; }
}
.cta-text { color: #e6e9e3; font-size: 16px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; position: relative; padding: 18px 44px 18px 0; cursor: pointer; font-size: 18px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--ink-3); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--after-ink); }
.faq details p { padding: 0 44px 20px 0; color: var(--ink-2); max-width: 64ch; }

/* ---------- CTA band + footer ---------- */
.cta-band { padding: 88px 0; background: var(--ink); color: var(--paper); }
.cta-band h2 { color: #fff; font-size: clamp(32px, 4vw, 50px); max-width: 18ch; }
.cta-band p { color: #cfd3cc; margin: 14px 0 28px; font-size: 18px; max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.cta-link { color: #e6e9e3; font-size: 16px; text-decoration: underline; text-decoration-color: #5d5f58; text-underline-offset: 4px; overflow-wrap: anywhere; }
.cta-link:hover { text-decoration-color: #e6e9e3; }
.foot { background: var(--ink); color: #a3a89f; font-size: 14.5px; border-top: 1px solid #2e2f2b; }
.foot a { color: #d5d9d2; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 40px; }
.foot-brand .mark { color: #fff; }
.foot-brand p { margin-top: 10px; max-width: 30ch; }
.foot .soc { display: inline-flex; align-items: center; gap: 8px; }
.soc-ic { flex: none; }
.foot-h { color: #fff; font-weight: 600; margin-bottom: 10px; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 18px; padding-bottom: 28px; border-top: 1px solid #2e2f2b; font-size: 13px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- inner pages ---------- */
.page-hero { padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.03; letter-spacing: -0.022em; max-width: 16ch; }
.page-hero .lead { margin-top: 18px; font-size: 19px; color: var(--ink-2); max-width: 52ch; }
.page-hero .hero-text { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.page-hero + .sec { border-top: 0; }
.sec-tight { padding-top: 40px; }
@media (max-width: 700px) { .page-hero { padding: 40px 0 40px; } }

.features { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.features li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.features .ck { margin-top: 4px; }
/* points beside each other share their heading and text rows, so a heading
   that wraps (maintenance's first point at 1024-1100) doesn't push only its
   own text down */
.features li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.features li > .ck { grid-row: 1; }
.features li > div { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
.features h2, .features h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; margin-bottom: 4px; }
.features p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
/* same weight as .features and before the phone rule, so phones still get one column */
.features-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.features-2 p { max-width: 58ch; }
/* two to a row only while a heading fits on one line; narrower, they'd wrap
   differently and the texts beside each other would start at different heights */
@media (max-width: 900px) { .features-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* Google page: a fix, the number it moved, the project it moved it on. Two to
   a row on subgrid, so a heading or text that wraps in one box doesn't push
   only that box's number down */
.fixes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.fix { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.fix h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.fix p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 16px; }
.fix .deltas { margin-bottom: 14px; }
.fix { position: relative; transition: border-color .2s; }
.fix:hover { border-color: var(--ink-3); }
.fix .sec-link { justify-self: start; }
/* the whole card is the link; the visible link text stays the accessible name */
.fix-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.fix-link:focus-visible { outline: none; }
.fix:has(.fix-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 760px) { .fixes { grid-template-columns: 1fr; } }
.steps-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .steps-row.n4 { grid-template-columns: 1fr; } }

.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cat-filter button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 14.5px; cursor: pointer; }
.cat-filter button:hover { border-color: var(--ink-3); color: var(--ink); }
.cat-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cat-filter .n, .cat-h .n { font-size: 12.5px; opacity: .7; margin-left: 4px; }
.cat + .cat { margin-top: 48px; }
.cat-h { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }

/* the line under About's tools list: the three named ones aren't all of them */
.tools-more { margin-top: 14px; padding-left: 28px; color: var(--ink-3); font-size: 15.5px; }
.price-note { font-size: 19px; color: var(--ink-2); max-width: 52ch; }
.price-note p + p { margin-top: 12px; }
.price-note a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.price-note a span { text-decoration: underline; text-underline-offset: 3px; }
.price-note a:hover .arrow { transform: translateX(3px); }
.price-badge { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 26px; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.price-badge b { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; }
.price-badge span { color: var(--ink-3); font-size: 15px; }
.self-list { font-size: 17px; gap: 12px; }
.tool-p { display: block; font-size: 15.5px; color: var(--ink-2); margin-top: 2px; }
.follow-p { max-width: 60ch; font-size: 17px; color: var(--ink-2); }
.follow-p + .hero-actions { margin-top: 20px; }

/* ---------- about, contact, privacy, 404 ---------- */

.contact-grid { display: grid; gap: 40px; max-width: 760px; }
.contact-grid.with-form { max-width: none; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .contact-grid.with-form { grid-template-columns: 1fr; } }
.direct { display: grid; gap: 14px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 28px; }
.direct p { display: grid; gap: 2px; }
.direct span { font-size: 13.5px; color: var(--ink-3); }
.direct a { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.direct a:hover { color: var(--after-ink); }
.contact-aside h2 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; margin-bottom: 12px; }

.cform { display: grid; gap: 16px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.cform h2 { font-size: 30px; margin-bottom: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } .cform { padding: 20px; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 14.5px; font-weight: 500; }
.field .opt { color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--after); outline-offset: 0; border-color: var(--after); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.err { color: #b3261e; font-size: 13.5px; }
.hp { position: absolute; left: -9999px; }
.fine { font-size: 13.5px; color: var(--ink-3); }
.cform .btn { justify-self: start; }
.status:empty { display: none; }
.status { font-size: 15px; padding: 10px 14px; border-radius: 10px; background: var(--paper); }
.status.ok { background: var(--after-wash); color: var(--after-ink); }
.status.bad { background: #fbe9e7; color: #8c1d18; }

.prose { max-width: 68ch; }
.prose h2 { font-size: 24px; margin: 32px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); }

.nf { margin-top: 22px; display: grid; gap: 10px; justify-items: start; }
.nf + .nf { padding-top: 22px; border-top: 1px solid var(--line); }
.nf-h { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.nf p:not(.nf-h) { color: var(--ink-2); }

/* ---------- case page ---------- */
.case { padding-bottom: 88px; }
.back { display: inline-flex; gap: 6px; margin-top: 28px; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.back:hover { color: var(--ink); }
.case-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; padding: 18px 0 30px; }
.case-head h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.02em; }
.case-head .meta { color: var(--ink-3); margin-top: 8px; }
.own-note { margin-top: 10px; display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--after-wash); color: var(--after-ink); font-size: 14.5px; }
.deltas.kpis .delta { padding: 18px 20px 20px; }
.deltas.kpis .delta dt { font-size: 14px; }
.deltas.kpis .delta .to { font-size: 46px; }
.deltas.kpis .delta .from { font-size: 18px; }
.deltas.kpis + .footnote { margin-top: 8px; }
/* five tiles in a row between the phone layout and ~1000px are ~150px wide:
   "#100+ → #4" at full size didn't fit and the "from" wrapped above the number */
@media (min-width: 720px) and (max-width: 999px) {
  .deltas.kpis .delta { padding: 16px 12px 18px; }
  .deltas.kpis .delta .to { font-size: 38px; }
  .deltas.kpis .delta .from { font-size: 16px; }
}

.block { padding-top: 64px; }
.block-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 16px; }
.block-h h2 { font-size: clamp(26px, 3vw, 34px); }
.rank-note { margin-top: 10px; }
/* keywords on Google's first page: a card beside the rankings chart */
.now { grid-column: 1 / -1; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px 6px; }
.now-h { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.now-list { list-style: none; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.now-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; }
.now-list li:first-child { border-top: 0; }
.now-list b { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--after-ink); }

.rank { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
.rank.wide-side { grid-template-columns: minmax(0, 1fr) 330px; }
.rank.wide-side .side { align-content: stretch; }
.rank.no-side { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .rank, .rank.wide-side { grid-template-columns: 1fr; } }
.chart { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 10px 6px; position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart text { font-family: var(--sans); font-size: 12px; fill: var(--ink-3); }
.chart .grid line { stroke: var(--line-2); }
.chart .lbl { font-size: 13px; font-weight: 600; fill: var(--ink); }
.chart .ev line { stroke: var(--ink); stroke-dasharray: 3 4; }
.chart .ev text { fill: var(--ink); font-size: 12px; }
.chart .cross { stroke: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); padding: 6px 8px 4px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.rank-table-wrap { overflow-x: auto; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rank-table th, .rank-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
.rank-table thead th { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.rank-table tbody th { font-weight: 400; }
.side { display: grid; gap: 10px; align-content: start; }
@media (max-width: 860px) { .side { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .side { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; }
.stat .k { font-size: 13px; color: var(--ink-3); }
.stat .v { font-family: var(--serif); font-size: 28px; line-height: 1.15; margin-top: 2px; white-space: nowrap; font-variant-numeric: lining-nums; }
.stat .v small { font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
.stat .v .f { font-family: var(--sans); font-size: 16px; color: var(--ink-3); }
.stat .v .ar { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin: 0 6px; }
.stat .v .t { color: var(--after-ink); }
.stat .d { font-size: 12px; color: var(--ink-3); }

.seg { display: inline-flex; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: 14px; cursor: pointer; color: var(--ink-2); min-height: 34px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* Search Console running totals: two charts side by side, stacked on phones */
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .totals { grid-template-columns: 1fr; } }
.total { padding: 14px 12px 6px; }
.total-h { padding: 0 6px 8px; }
.total-h .k { font-size: 13px; color: var(--ink-3); }
.total-h .v { font-family: var(--serif); font-size: 34px; line-height: 1.15; font-variant-numeric: lining-nums; }
.total-h .v .t { color: var(--after-ink); }
.total-h .v small { font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
.total-h .d { font-size: 12px; color: var(--ink-3); }
.chart .area { fill: var(--after-wash); }
/* a site too new for Search Console numbers: the same cards, empty on
   purpose (gridlines and the launch day, no line, no value) */
.block-lead { max-width: 62ch; margin: -6px 0 18px; color: var(--ink-2); }
.total.pending .v .soon { font-family: var(--sans); font-size: 18px; color: var(--ink-3); }
.empty-plot { display: block; overflow: visible; }
.empty-plot .grid line { stroke: var(--line-2); stroke-dasharray: 2 5; }
.empty-plot .base { stroke: var(--line); }
.empty-plot .launch { fill: var(--after); stroke: var(--white); stroke-width: 2; }
.empty-plot text { font-family: var(--sans); font-size: 12px; fill: var(--ink-3); }

/* phone screenshots in a row (one site in three languages); three columns
   even on a phone, where they work as thumbnails that open full size */
.gallery { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3vw, 32px); max-width: 880px; }
.phone-shot { display: grid; gap: 12px; justify-items: center; }
/* 390/680 ends in the gap under the "don't know my level" link in all three
   languages; 720 cut the small line below it in half */
.phone-shot img { width: 100%; height: auto; aspect-ratio: 390 / 680; object-fit: cover; object-position: top; border-radius: clamp(10px, 2.4vw, 24px); box-shadow: 0 0 0 clamp(3px, .8vw, 6px) #1b1a17; }
.phone-shot .cap { font-size: 14px; color: var(--ink-2); }
.phone-shot .zoom-hint { top: 14px; right: 14px; }

/* who can read the site: a checklist card beside the rings */
.access-stat { display: grid; gap: 8px; align-content: start; }
.access { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.access li { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); }
.access .ck { flex: none; color: var(--after-ink); }
.compare { position: relative; border-radius: 12px; overflow: hidden; background: #ddd; user-select: none; touch-action: pan-y; box-shadow: 0 0 0 1px var(--line); --pos: 50%; }
.compare > img { width: 100%; height: auto; }
.compare .c-old { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare .c-old img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.compare .c-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.compare .c-knob { position: absolute; top: 50%; left: var(--pos); width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); display: grid; place-items: center; pointer-events: none; font-size: 15px; }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; touch-action: pan-y; }
.compare input[type=range]:focus-visible ~ .c-knob { outline: 2px solid var(--after); outline-offset: 2px; }
.c-tag { position: absolute; top: 10px; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(20,18,15,.78); color: #fff; pointer-events: none; }
.c-tag.l { left: 10px; }
.c-tag.r { right: 10px; background: var(--after-ink); }
.compare.phone { max-width: 320px; margin: 0 auto; border-radius: 28px; box-shadow: 0 0 0 7px #1b1a17; aspect-ratio: 390 / 720; }
.compare.phone > img { height: 100%; object-fit: cover; object-position: top; }

.health { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }

/* 0-100 scores as rings, before/after counts as paired bars */
.ring-stat { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 16px 14px 14px; }
.ring { position: relative; width: 72px; height: 72px; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .track { stroke: var(--line-2); }
.ring .val { stroke-linecap: round; }
.ring.good .val { stroke: #1a9a5c; }
.ring.ok .val { stroke: #d98a00; }
.ring.bad .val { stroke: #d13b2e; }
.ring-v { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 26px; color: var(--ink); font-variant-numeric: lining-nums; }
.bars-stat { display: grid; gap: 8px; align-content: start; }
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.bar-row b { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.bar-row.after b { color: var(--after-ink); }
.bar-track { height: 8px; border-radius: 99px; background: var(--paper); overflow: hidden; }
.bar { display: block; height: 100%; border-radius: 99px; background: var(--before); }
.bar-row.after .bar { background: var(--after); }

.sources { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 16px; }
.sources li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--line); margin-right: 8px; vertical-align: 2px; }

.done { list-style: none; padding: 0; columns: 2; column-gap: 32px; }
@media (max-width: 700px) { .done { columns: 1; } }
.done li { break-inside: avoid; padding: 9px 0 9px 20px; border-bottom: 1px solid var(--line-2); position: relative; color: var(--ink-2); }
.done li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 7px; height: 7px; border-radius: 2px; background: var(--after); }

.proofs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.proof { display: grid; gap: 8px; width: 100%; padding: 10px; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 12px; cursor: zoom-in; transition: border-color .2s; }
.proof:hover { border-color: var(--ink-3); }
.proof img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 6px; border: 1px solid var(--line-2); }
.proof span { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

.story-cta { margin-top: 64px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.story-cta h2 { font-size: 26px; }
.story-cta p { color: var(--ink-3); font-size: 15px; margin-top: 4px; }
.story-cta .btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.chev { transition: transform .25s var(--ease); }
.story { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.story[data-open="true"] { grid-template-rows: 1fr; }
.story > .clip { overflow: hidden; min-height: 0; }
.story.settled > .clip { overflow: visible; }
.story-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; padding-top: 24px; }
.steps { list-style: none; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 0; width: 2px; background: var(--line); }
.step { padding: 0 0 0 26px; min-height: 44vh; position: relative; opacity: .45; transition: opacity .3s; }
.step:last-child { min-height: 30vh; }
.step.on { opacity: 1; }
.step::before { content: ""; position: absolute; left: -5px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--before); }
.step.on::before { border-color: var(--after); background: var(--after); }
.step.measure::before { border-radius: 3px; }
.step time { font-size: 13px; color: var(--ink-3); }
.step h3 { font-size: 24px; margin: 2px 0 6px; }
.step p { color: var(--ink-2); max-width: 38ch; }
.step .mini { display: none; }
.stage { position: sticky; top: 88px; align-self: start; }
.frame { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: var(--paper-2); aspect-ratio: 1440 / 900; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame img.fit-contain, .step .mini img.fit-contain { object-fit: contain; object-position: center; background: #fff; padding: 12px; }
.step .mini img.fit-contain { max-height: 360px; width: 100%; }
.frame .tag { position: absolute; left: 10px; bottom: 10px; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(20,18,15,.8); color: #fff; }
.read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.read .stat { padding: 10px 12px; transition: background .3s, border-color .3s; }
.read .stat .v { font-size: 24px; }
.read .stat.empty .v { color: var(--line); }
.read .stat.fresh { background: var(--after-wash); border-color: #b9d7c7; }
@media (max-width: 860px) {
  .story-in { grid-template-columns: 1fr; gap: 0; }
  .stage { display: none; }
  .step { min-height: 0; opacity: 1; padding-bottom: 26px; }
  .step::before { border-color: var(--after); }
  .step .mini { display: block; margin-top: 12px; }
  .step .mini img { border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
}

/* chart hover card. Pavel (2026-10-07): it was too small, and "not in top
   100" broke onto two lines. The value never wraps; a long keyword may */
.tip { position: fixed; z-index: 80; pointer-events: none; background: rgba(27, 26, 23, .88); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #f1f3ef; border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; width: max-content; max-width: min(440px, calc(100vw - 24px)); box-shadow: 0 12px 32px -10px rgba(0,0,0,.45); }
.tip b { font-weight: 600; }
.tip > b:first-child { display: inline-block; margin-bottom: 4px; }
.tip .muted { color: #b9bfb6; }
.tip .row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 2px 0; }
.tip .row > span { min-width: 0; }
.tip .row > b { flex: none; white-space: nowrap; }
.tip .sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 8px; vertical-align: 4px; }
.lightbox { border: 0; border-radius: 14px; padding: 16px; max-width: min(1100px, 94vw); background: var(--card); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.lightbox::backdrop { background: rgba(20,18,15,.6); }
.lightbox figure { margin: 0; }
.lightbox img { max-height: 78vh; width: min(960px, 86vw); object-fit: contain; margin: 0 auto; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; }
.lightbox figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.lightbox form { text-align: right; margin-bottom: 8px; }
.lb-close { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 14px; }
.lb-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.lb-nav button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.lb-nav button:hover { border-color: var(--ink-3); }
.lb-count { min-width: 3.5em; text-align: center; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lightbox.single .lb-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* a fix card on the Google page links to this proof: outline it for a moment */
.landed { border-radius: 12px; animation: landed 2.6s ease-out 1; }
@keyframes landed { 0%, 40% { box-shadow: 0 0 0 3px var(--after); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .landed { animation: none; box-shadow: 0 0 0 3px var(--after); } }