/*
Theme Name: Kalniņa SEO aģentūra
Theme URI: https://seoagentura.lv
Author: SIA "SEO Eksperts"
Description: Hand-coded theme for seoagentura.lv (LV) / textbookseo.com (EN, WPML domain-per-language).
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: seoagentura
*/

/* TOKENS - values are verbatim from the locked design export.
   Nothing is merged here: near-duplicates get -alt names and are listed as
   merge candidates in ../../DESIGN-SYSTEM.md (merging = a design change = app only). */
:root {
  --t-hover: 0.07s ease-out; /* CANONICAL hover/press feedback timing - every hover uses this */
  --accent-surface: rgb(232, 222, 252);
  --surface-tint-2: rgb(241, 240, 244);   /* the single light tint (merged 2026-09-23) */
  --surface-alt: rgb(247, 247, 249);
  --border: rgb(230, 229, 233);
  --ink-2: rgb(39, 38, 47);
  --black: rgb(0, 0, 0);
  --accent-hover: rgb(94, 53, 216);
  --r-bubble: 14px 14px 4px;

  /* platform brand colors (per-channel marks, outside the brand palette) */
  --brand-google: rgb(66, 133, 244);
  --brand-chatgpt: rgb(15, 157, 122);
  --brand-bing: rgb(11, 122, 212);
  --brand-perplexity: rgb(32, 128, 141);
  --brand-gemini: rgb(78, 139, 245);
  --brand-ddg: rgb(222, 88, 51);
  --brand-claude: rgb(217, 119, 87);
  --brand-whatsapp: rgb(37, 211, 102);       /* WhatsApp brand green - header CTA */
  --brand-whatsapp-hover: rgb(29, 168, 81);
  --r-xs: 4px;
  --ink: rgb(28, 28, 35);
  --r-2-alt: 2.1px;
  --fs-logo: 22px; /* was 34px; logo re-set 2026-09-18 (option A) */
  --fs-logo-scrolled: 16px; /* shrunk header: 22 x 0.72, snapped */
  --ls-stat: -0.06em;
  --lh-tight: 1;
  --fs-logo-sub: 10.6px;
  --text-muted: rgb(108, 107, 118);
  --ls-logo: 0.493px;
  --r-lg: 14px;
  --ink-3: rgb(59, 56, 68);
  --r-sm: 8px;
  --lh-snug: 1.4;
  --surface: rgb(255, 255, 255);
  --r-md: 12px;
  --ls-kicker: 0.1em;
  --lh-body: 1.6;
  --r-2: 2px;
  --fs-h1: clamp(52px, 5.05vw, 74px);
  --lh-h1: 1.15;
  --accent: rgb(112, 71, 235);
  --r-xl: 18px;
  --lh-loose: 1.75;
  --fs-body-alt: 15px;
  --fs-stat-l: 44px;
  --fs-meta: 13px;
  --fs-h3-lg: 20px;
  --ls-display-alt: -0.05em;
  --text-muted-alt-2: rgb(140, 137, 148);
  --r-round: 50%;
  --r-pill: 100px;
  --r-10: 10px;
  --r-3: 3px;
  --text-on-dark: rgb(164, 161, 174);
  --fs-h2: clamp(36px, 3.45vw, 50px);
  --fs-h2-alt: 32px;   /* the step between the 20px Title and the H2 - card and panel headings */
  --fs-h1-sm: 44px;   /* mobile title of posts and single-content pages - between the 52px H1 and the 36px H2 (Mikelis, 2026-10-02) */
  --ls-display: -0.055em;
  --lh-h2: 1.2;
  --fs-body: 16px;
  --accent-light: rgb(196, 173, 255);
  --fs-pct: 0.7em;
  --fs-lead: 18px;
  --fs-sm: 14px;
  --fs-caption: 12px;
  --ls-h3: -0.035em;
  --lh-snug-alt: 1.35;
  --text-muted-alt: rgb(115, 97, 135);
}

/* TOKENS - values are verbatim from the locked design export.
   Nothing is merged here: near-duplicates get -alt names and are listed as
   merge candidates in ../../DESIGN-SYSTEM.md (merging = a design change = app only). */
:root {
  --r-md: 12px;
  --ls-kicker: 0.1em;
  --lh-body: 1.6;
  --text-muted-alt: rgb(115, 97, 135);
  --accent: rgb(112, 71, 235);
  --lh-loose: 1.75;
  --fs-body: 16px;
  --r-lg: 14px;
  --r-sm: 8px;
  --lh-snug: 1.4;
  --surface: rgb(255, 255, 255);
  --fs-meta: 13px;
}

/* PORTED from the locked Claude Design export - design-v2/port/page.css.
   Classes are generated (section-tag-n); values are verbatim from the design.
   Tokenization pass pending: see ../../DESIGN-SYSTEM.md. */

@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/DMSans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('assets/fonts/DMSans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fonts/DMSans-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fonts/DMSans-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/Manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-style: normal; font-display: swap; src: url('assets/fonts/Manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fonts/Manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fonts/Manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 800; font-style: normal; font-display: swap; src: url('assets/fonts/Manrope-800.woff2') format('woff2'); }

@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; font-family: 'DM Sans', Arial, sans-serif; color: var(--ink); background: var(--surface); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
img { max-width: 100%; display: block; }
p, h1, h2, h3 { margin: 0; }
::selection { background: var(--accent-light); color: var(--ink); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--surface); padding: 12px 16px; border-radius: var(--r-xs); }

.dc-root-div-1 {
  width: 100%;
  overflow-x: clip;
}

.hdr-header-1 {
  height: 100px;
  background: rgba(255, 255, 255, 0.93);
  border-bottom: 1px solid rgb(230, 229, 233);
  position: sticky;
  top: 0px;
  z-index: 40;
  backdrop-filter: blur(16px);
}

.hdr-div-1 {
  width: min(1312px, 100% - 72px);
  margin: 0px auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hdr-a-1 {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  color: var(--ink);
}

.hdr-span-1 {
  display: flex;
  align-items: flex-end;
  gap: 3.7px;
  height: 44px;
  margin-top: 5.5px;
}

.hdr-i-1 {
  width: 8.4px;
  height: 15.8px;
  background: rgb(112, 71, 235);
  border-radius: var(--r-2-alt);
}

.hdr-i-2 {
  width: 8.4px;
  height: 29px;
  background: rgb(112, 71, 235);
  border-radius: var(--r-2-alt);
}

.hdr-i-3 {
  width: 8.4px;
  height: 44px;
  background: rgb(112, 71, 235);
  border-radius: var(--r-2-alt);
}

.hdr-span-2 {
  display: inline-grid;
  grid-template-columns: auto auto;
  font-family: Manrope, Arial, sans-serif;
  font-weight: 800;
  font-size: var(--fs-logo);
  letter-spacing: var(--ls-stat);
  line-height: var(--lh-tight);
}

.hdr-span-3 {
  grid-column: 1;
  white-space: nowrap;
  line-height: var(--lh-tight);
  font-size: var(--fs-logo-sub);
  margin-top: 6.9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--ls-logo);
  margin-right: -0.493px;
}

.hdr-nav-1 {
  display: flex;
  align-items: center;
  gap: 40px;   /* was the export's 34; one step up and onto the scale (Mikelis, 2026-09-28) */
  margin-left: auto;
  margin-right: 48px;
}

.hdr-a-2 {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: 500;
}

.hdr-a-3 {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 13px 19px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-sm);
  line-height: var(--lh-snug);
  background: rgb(28, 28, 35);
  color: var(--surface);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.hdr-svg-1 {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.sec1-section-1 {
  width: min(1312px, 100% - 72px);
  margin: 0px auto;
  display: grid;
  grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr);
  gap: 48px;
  align-items: center;
  padding: 64px 0px 66.6px;
  position: relative;
}

.sec1-div-1 {
  position: relative;
  z-index: 1;
}

.sec1-p-1 {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  line-height: var(--lh-body);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
}

.sec1-span-1 {
  height: 8px;
  width: 8px;
  background: rgb(112, 71, 235);
  border-radius: var(--r-2);
}

.sec1-h1-1 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--ls-stat);
  line-height: var(--lh-h1);
  margin-left: -0.08em;
}

.sec1-span-2 {
  color: var(--accent);
  display: inline-block;
}

.sec1-p-2 {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  margin-top: 24px;
  margin-left: -0.075em;
  color: var(--text-muted);
}

.sec1-div-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;   /* = the gap between the two header buttons (Mikelis, 2026-10-02; export 20) */
  margin-top: 36px;
}

.sec1-a-1 {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;   /* text left, arrow right, like every other site button - shows once full-width on mobile (Mikelis, 2026-10-02; export: center) */
  gap: 18px;
  padding: 17px 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-sm);
  line-height: var(--lh-snug);
  background: var(--ink);   /* ink like every other solid button; the purple went to the ChatGPT button (Mikelis, 2026-10-02; export: accent) */
  color: var(--surface);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.sec1-a-2 {
  font-size: var(--fs-body);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: var(--lh-snug);
}

.sec1-div-3 {
  margin-top: 48px;
  margin-left: -0.037em;
  display: flex;
  align-items: stretch;
  gap: 28px;
  flex-wrap: wrap;
}

.sec1-div-4 {
  border-left: 2px solid rgb(112, 71, 235);
  padding-left: 20px;
}

.sec1-span-3 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-stat-l);
  letter-spacing: var(--ls-stat);
  font-weight: 600;
  line-height: var(--lh-tight);
  display: block;
}

.sec1-span-4 {
  color: var(--accent);
  margin-left: 0.1em;
}

.sec1-p-3 {
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 9px 0px 0px;
}

.sec1-span-5 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-stat-l);
  letter-spacing: var(--ls-stat);
  font-weight: 600;
  line-height: var(--lh-tight);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec1-span-6 {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  color: var(--accent);
}

.sec1-svg-1 {
  width: 20px;
  height: 20px;
  fill: currentcolor;
}

.sec1-p-4 {
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 8px 0px 0px;
}

.sec1-div-5 {
  display: flex;
  flex-direction: column;
  gap: 36px;   /* chips -> card = the hero sub-line -> buttons gap (.sec1-div-2 margin-top 36); Mikelis 2026-10-10. Was 20 for the deck -> arrows. */
  position: relative;
}

.sec1-div-6 {
  display: grid;
  padding: 0 10%;   /* single card (option B): the approved mock's 10%, the 18% belonged to the ring (2026-10-10) */
  position: relative;
  z-index: 1;
  perspective: 800px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.sec1-div-7 {
  grid-area: 1 / 1;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  border: 1px solid var(--border);
  padding: 24px 26px 26px;
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: rgba(28, 28, 35, 0.07) 0px 14px 30px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translateX(0%) translateZ(0px);
  opacity: 1;
  cursor: default;
  pointer-events: auto;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.5, 0, 0.15, 1), opacity 1s;
}

.sec1-span-7 {
  position: absolute;
  inset: 0px;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 1s cubic-bezier(0.5, 0, 0.15, 1);
}

.sec1-div-8 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec1-span-8 {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-img-1 {
  width: 24px;
  height: 24px;
}

.sec1-span-9 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sec1-span-10 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h3-lg);
  font-weight: 700;
  letter-spacing: var(--ls-display-alt);
}

.sec1-span-11 {
  font-size: var(--fs-caption);
  color: var(--text-muted-alt-2);
  line-height: var(--lh-body);
}

.sec1-span-12 {
  margin-left: auto;
  display: flex;
  gap: 5px;
}

.sec1-i-1 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-round);
  background: rgb(232, 222, 252);
}

.sec1-div-9 {
  background: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  margin-top: 20px;
  padding: 16px;
  height: 262px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec1-div-10 {
  height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid rgb(230, 229, 233);
  display: flex;
  align-items: center;
  padding: 0px 14px;
  gap: 10px;
}

.sec1-span-13 {
  height: 7px;
  width: 38%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
}

.sec1-svg-2 {
  width: 15px;
  height: 15px;
  margin-left: auto;
  fill: none;
  stroke: var(--brand-google);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sec1-div-11 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-10);
  background: rgb(243, 240, 249);   /* the highlighted result row keeps its lavender fill (only the card surface went grey, 2026-10-10) */
  border: 1px solid rgb(112, 71, 235);
}

.sec1-span-14 {
  width: 22px;
  height: 22px;
  border-radius: var(--r-round);
  background: rgb(112, 71, 235);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-svg-3 {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--surface);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec1-span-15 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 0%;
}

.sec1-span-16 {
  height: 9px;
  width: 48%;
  background: rgb(112, 71, 235);
  border-radius: var(--r-xs);
}

.sec1-span-17 {
  height: 6px;
  width: 80%;
  background: rgb(196, 173, 255);
  border-radius: var(--r-3);
}

.sec1-span-18 {
  height: 6px;
  width: 64%;
  background: rgb(196, 173, 255);
  border-radius: var(--r-3);
}

.sec1-div-12 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 6px 12px;
}

.sec1-span-19 {
  height: 9px;
  width: 40%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
}

.sec1-span-20 {
  height: 6px;
  width: 72%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-3);
}

.sec1-span-21 {
  height: 9px;
  width: 52%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
}

.sec1-span-22 {
  height: 6px;
  width: 60%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-3);
}

.sec1-div-13 {
  background: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  margin-top: 20px;
  padding: 16px;
  height: 262px;
  display: none;
  flex-direction: column;
  gap: 12px;
}

.sec1-div-14 {
  align-self: flex-end;
  background: rgb(241, 240, 244);
  border-radius: var(--r-bubble);
  padding: 11px 14px;
  width: 58%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sec1-span-23 {
  height: 7px;
  width: 80%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
}

.sec1-span-24 {
  height: 7px;
  width: 50%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
}

.sec1-div-15 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sec1-span-25 {
  width: 26px;
  height: 26px;
  border-radius: var(--r-round);
  background: rgb(232, 240, 254);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-img-2 {
  width: 14px;
  height: 14px;
}

.sec1-div-16 {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 6px;
}

.sec1-span-26 {
  height: 7px;
  width: 92%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
}

.sec1-span-27 {
  height: 7px;
  width: 84%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
}

.sec1-span-28 {
  height: 7px;
  width: 60%;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
}

.sec1-div-17 {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sec1-span-29 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  background: rgb(112, 71, 235);
  color: var(--surface);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.sec1-i-2 {
  width: 14px;
  height: 14px;
  border-radius: var(--r-round);
  background: rgb(255, 255, 255);
  display: inline-grid;
  place-items: center;
}

.sec1-svg-4 {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec1-span-30 {
  height: 7px;
  width: 58px;
  background: rgb(255, 255, 255);
  border-radius: var(--r-xs);
  display: inline-block;
}

.sec1-span-31 {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  background: rgb(241, 240, 244);
}

.sec1-span-32 {
  height: 7px;
  width: 42px;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
  display: inline-block;
}

.sec1-span-33 {
  height: 7px;
  width: 34px;
  background: rgb(230, 229, 233);
  border-radius: var(--r-xs);
  display: inline-block;
}

.sec1-div-18 {
  grid-area: 1 / 1;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  border: 1px solid var(--border);
  padding: 24px 26px 26px;
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: rgba(28, 28, 35, 0.07) 0px 14px 30px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translateX(32%) translateZ(-200px);
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.5, 0, 0.15, 1), opacity 1s;
}

.sec1-span-34 {
  position: absolute;
  inset: 0px;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  opacity: 0.35;
  pointer-events: none;
  z-index: 2;
  transition: opacity 1s cubic-bezier(0.5, 0, 0.15, 1);
}

.sec1-svg-5 {
  width: 15px;
  height: 15px;
  margin-left: auto;
  fill: none;
  stroke: var(--brand-chatgpt);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sec1-span-35 {
  width: 26px;
  height: 26px;
  border-radius: var(--r-round);
  background: rgb(227, 244, 239);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-div-19 {
  grid-area: 1 / 1;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  border: 1px solid var(--border);
  padding: 24px 26px 26px;
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: rgba(28, 28, 35, 0.07) 0px 14px 30px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translateX(63%) translateZ(-430px);
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.5, 0, 0.15, 1), opacity 1s;
}

.sec1-span-36 {
  position: absolute;
  inset: 0px;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  transition: opacity 1s cubic-bezier(0.5, 0, 0.15, 1);
}

.sec1-svg-6 {
  width: 15px;
  height: 15px;
  margin-left: auto;
  fill: none;
  stroke: var(--brand-bing);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sec1-span-37 {
  width: 26px;
  height: 26px;
  border-radius: var(--r-round);
  background: rgb(227, 241, 252);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-div-20 {
  grid-area: 1 / 1;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  border: 1px solid var(--border);
  padding: 24px 26px 26px;
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: rgba(28, 28, 35, 0.07) 0px 14px 30px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translateX(90%) translateZ(-900px);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.5, 0, 0.15, 1), opacity 1s;
}

.sec1-span-38 {
  position: absolute;
  inset: 0px;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  opacity: 0.6;
  pointer-events: none;
  z-index: 2;
  transition: opacity 1s cubic-bezier(0.5, 0, 0.15, 1);
}

.sec1-svg-7 {
  width: 15px;
  height: 15px;
  margin-left: auto;
  fill: none;
  stroke: var(--brand-perplexity);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sec1-span-39 {
  width: 26px;
  height: 26px;
  border-radius: var(--r-round);
  background: rgb(226, 242, 244);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-div-21 {
  grid-area: 1 / 1;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  border: 1px solid var(--border);
  padding: 24px 26px 26px;
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: rgba(28, 28, 35, 0.07) 0px 14px 30px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translateX(-90%) translateZ(-900px);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.5, 0, 0.15, 1), opacity 1s;
}

.sec1-svg-8 {
  width: 15px;
  height: 15px;
  margin-left: auto;
  fill: none;
  stroke: var(--brand-gemini);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sec1-span-40 {
  width: 26px;
  height: 26px;
  border-radius: var(--r-round);
  background: rgb(233, 239, 254);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-div-22 {
  grid-area: 1 / 1;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  border: 1px solid var(--border);
  padding: 24px 26px 26px;
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: rgba(28, 28, 35, 0.07) 0px 14px 30px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translateX(-63%) translateZ(-430px);
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.5, 0, 0.15, 1), opacity 1s;
}

.sec1-svg-9 {
  width: 15px;
  height: 15px;
  margin-left: auto;
  fill: none;
  stroke: var(--brand-ddg);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sec1-span-41 {
  width: 26px;
  height: 26px;
  border-radius: var(--r-round);
  background: rgb(253, 236, 230);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-div-23 {
  grid-area: 1 / 1;
  background: var(--surface-tint-2);   /* deck card: the site grey - final after trying lavender tints (Mikelis, 2026-10-10 'grey was the best') */
  border: 1px solid var(--border);
  padding: 24px 26px 26px;
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: rgba(28, 28, 35, 0.07) 0px 14px 30px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translateX(-32%) translateZ(-200px);
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.5, 0, 0.15, 1), opacity 1s;
}

.sec1-svg-10 {
  width: 15px;
  height: 15px;
  margin-left: auto;
  fill: none;
  stroke: var(--brand-claude);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sec1-span-42 {
  width: 26px;
  height: 26px;
  border-radius: var(--r-round);
  background: rgb(251, 238, 232);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sec1-div-24 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 6px 0px;
}

.sec1-div-25 {
  display: flex;
  gap: 10px;
}

.sec1-button-1 {
  background: none;
  border: 1px solid rgb(196, 173, 255);
  border-radius: var(--r-round);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.sec1-svg-11 {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec2-section-1 {
  width: min(1312px, 100% - 72px);
  margin: 0px auto;
  border-top: 1px solid rgb(230, 229, 233);
  padding: 40px 0px;
}

.sec2-div-1 {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 12%, rgb(0, 0, 0) 88%, transparent);
}

.sec2-div-2 {
  display: flex;
  align-items: center;
  gap: 96px;
  width: max-content;
  padding-right: 96px;
  animation: 230s linear 0s infinite normal none running logo-marquee; /* export 115s; 2x slower everywhere (Mikelis, 2026-09-20). The rAF drive reads this duration. */
}

.sec2-img-1 {
  height: 40px;
  width: auto;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
  flex-shrink: 0;
}

.sec2-img-2 {
  height: 20px;
  width: auto;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
  flex-shrink: 0;
}

.sec2-img-3 {
  height: 22px;
  width: auto;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
  flex-shrink: 0;
}

.sec2-img-4 {
  height: 36px;
  width: auto;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
  flex-shrink: 0;
}

.sec2-img-5 {
  height: 28px;
  width: auto;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
  flex-shrink: 0;
}

.sec2-img-6 {
  height: 24px;
  width: auto;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
  flex-shrink: 0;
}

.sec2-img-7 {
  height: 34px;
  width: auto;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
  flex-shrink: 0;
}

.sec2-img-8 {
  height: 52px;
  width: auto;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
  flex-shrink: 0;
}

.rezultati-section-1 {
  background: rgb(28, 28, 35);
  color: var(--surface);
  padding: 112px 0px 113.4px;
}

.rezultati-div-1 {
  width: min(1312px, 100% - 72px);
  margin: 0px auto;
}

.rezultati-div-2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 70px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.rezultati-p-1 {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  line-height: var(--lh-body);
  color: var(--text-on-dark);
  margin-bottom: 28px;
  margin-left: -0.046em;
}

.rezultati-h2-1 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h2);
  margin-left: -0.07em;
}

.rezultati-span-1 {
  color: var(--text-on-dark);
}

.rezultati-a-1 {
  font-size: var(--fs-body); /* was --fs-body-alt 15px; the token does no distinct job (Mikelis, 2026-09-22) */
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: var(--lh-snug);
  color: var(--surface);
  white-space: nowrap;
  margin-bottom: 2px;
}

.rezultati-div-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px;
}

.rezultati-a-2 {
  display: block;
  background: rgb(39, 38, 47);
  border: 1px solid rgb(59, 56, 68);
  border-radius: var(--r-md);
  padding: 24px 28px 26px;
  transition: background var(--t-hover), border-color var(--t-hover);
  color: var(--surface);
}

.rezultati-div-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  /* the two sit on one line, so they align on the BASELINE - centring their boxes left the
     13px industry label riding ~1.5px high against the 16px name (Mikelis, 2026-09-23) */
  align-items: baseline;
}

.rezultati-span-2 {
  font-size: var(--fs-body);
  font-weight: 500;
  margin-left: -0.051em;
}

.rezultati-span-3 {
  font-size: var(--fs-meta); /* was --fs-caption 12px: the industry tag and the growth label sit
                                in the same card and must share one size (Mikelis, 2026-09-22) */
  color: var(--text-on-dark);
  line-height: var(--lh-body);
}

.page-hero + .rezultati-section-1 .rezultati-div-5 { margin-bottom: 0; }
.rezultati-div-5 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2-alt);
  font-weight: 600;
  letter-spacing: var(--ls-display-alt);
  line-height: var(--lh-tight);
  margin: 32px 0px 39.5px -0.05em;
  color: var(--accent-light);
}

.rez-sign { margin-right: 0.05em; }   /* the number's -0.055em tracking closes this gap up */

.rezultati-span-4 {
  font-size: var(--fs-pct);
  margin-left: 3px;
}

.rezultati-div-6 {
  border-top: 1px solid rgb(59, 56, 68);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.rezultati-p-2 {
  font-size: var(--fs-meta);
  color: var(--text-on-dark);
  line-height: var(--lh-body);
}

.rezultati-span-5 {
  border: 1px solid rgb(59, 56, 68);
  border-radius: var(--r-round);
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}

.rezultati-svg-1 {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rezultati-p-3 {
  font-size: var(--fs-meta);
  color: var(--text-on-dark);
  line-height: var(--lh-body);
  margin-top: 51.5px;
  margin-left: -0.075em;
}

.par-mums-section-1 {
  padding: 112px 0px;
}

.par-mums-div-1 {
  width: min(1312px, 100% - 72px);
  margin: 0px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 96px;
  align-items: center;
}

.par-mums-div-2 {
  min-width: 0px;
}

.par-mums-div-3 {
  min-height: 453px;
  aspect-ratio: 1.155 / 1;
  border-radius: var(--r-lg);
  position: relative;
}

.par-mums-img-1 {
  position: absolute;
  bottom: 25.4px;
  left: 0px;
  width: 100%;
  height: calc(100% - 21.4px);
  object-fit: contain;
  object-position: center bottom;
}

.par-mums-div-4 {
  padding: 29px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgb(230, 229, 233);
}

.par-mums-strong-1 {
  font-size: var(--fs-body);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  margin-left: -0.071em;
}

.par-mums-span-1 {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.par-mums-span-2 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}

.par-mums-i-1 {
  width: 6px;
  height: 12px;
  background: rgb(112, 71, 235);
  border-radius: var(--r-2);
}

.par-mums-i-2 {
  width: 6px;
  height: 22px;
  background: rgb(112, 71, 235);
  border-radius: var(--r-2);
}

.par-mums-i-3 {
  width: 6px;
  height: 34px;
  background: rgb(112, 71, 235);
  border-radius: var(--r-2);
}

.par-mums-p-1 {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin-bottom: 28px;
  margin-left: -0.046em;
}

.par-mums-h2-1 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h2);
  margin-bottom: 25.2px;
  margin-left: -0.036em;
}

.par-mums-p-2 {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  margin-bottom: 16px;
  max-width: 440px;
}

.par-mums-p-3 {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-width: 440px;
}

.par-mums-a-1 {
  margin-top: 32px;
  font-size: var(--fs-body); /* was --fs-body-alt 15px */
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: var(--lh-snug);
}

.ka-stradajam-section-1 {
  background: rgb(247, 247, 249);
  padding: 112px 0px 111.3px;
}

.ka-stradajam-div-1 {
  display: flex;
  flex-direction: column;
  gap: 25.4px;
  margin-bottom: 56px;
}

.ka-stradajam-h2-1 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h2);
  margin-left: -0.036em;
}

.ka-stradajam-p-1 {
  max-width: 520px;
  line-height: var(--lh-loose);
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.ka-stradajam-div-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 32px;
}

.ka-stradajam-span-1 {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 24px;
}

.ka-stradajam-span-2 {
  height: 1px;
  background: rgb(230, 229, 233);
  flex: 1 1 0%;
}

.ka-stradajam-h3-1 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h3-lg);
  letter-spacing: var(--ls-h3);
  font-weight: 600;
  line-height: var(--lh-snug-alt);
  margin-bottom: 16px;
}

.ka-stradajam-p-2 {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.sec6-section-1 {
  width: min(1312px, 100% - 72px);
  margin: 0px auto;
  padding: 112px 0px 116.3px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 96px;
}

.sec6-h2-1 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h2);
}

.sec6-span-1 {
  color: var(--accent);
  margin-left: -0.08em;
  display: inline-block;
}

.sec6-div-1 {
  border-top: 1px solid rgb(230, 229, 233);
  margin-top: 3.1px;
}

.sec6-div-2 {
  border-bottom: 1px solid rgb(230, 229, 233);
}

.sec6-button-1 {
  color-scheme: unset;
  forced-color-adjust: unset;
  math-depth: unset;
  position: unset;
  position-anchor: unset;
  text-size-adjust: unset;
  appearance: unset;
  font-feature-settings: unset;
  font-kerning: unset;
  font-language-override: unset;
  font-optical-sizing: unset;
  font-palette: unset;
  font-size-adjust: unset;
  font-stretch: unset;
  font-style: unset;
  font-synthesis: unset;
  font-variant: unset;
  font-variation-settings: unset;
  position-area: unset;
  text-orientation: unset;
  text-rendering: unset;
  text-spacing-trim: unset;
  -webkit-font-smoothing: unset;
  -webkit-locale: unset;
  -webkit-text-orientation: unset;
  -webkit-writing-mode: unset;
  writing-mode: unset;
  zoom: unset;
  accent-color: unset;
  align-content: unset;
  place-self: unset;
  alignment-baseline: unset;
  anchor-name: unset;
  anchor-scope: unset;
  animation-composition: unset;
  animation: unset;
  animation-trigger: unset;
  app-region: unset;
  aspect-ratio: unset;
  backdrop-filter: unset;
  backface-visibility: unset;
  background: unset;
  background-blend-mode: unset;
  baseline-shift: unset;
  baseline-source: unset;
  block-size: unset;
  border-block: unset;
  border: unset;
  border-radius: unset;
  border-collapse: unset;
  border-end-end-radius: unset;
  border-end-start-radius: unset;
  border-inline: unset;
  border-shape: unset;
  border-start-end-radius: unset;
  border-start-start-radius: unset;
  inset: unset;
  box-decoration-break: unset;
  box-shadow: unset;
  break-after: unset;
  break-before: unset;
  break-inside: unset;
  buffered-rendering: unset;
  caption-side: unset;
  caret-animation: unset;
  caret-color: unset;
  caret-shape: unset;
  clear: unset;
  clip: unset;
  clip-path: unset;
  clip-rule: unset;
  color-interpolation: unset;
  color-interpolation-filters: unset;
  color-rendering: unset;
  columns: unset;
  column-fill: unset;
  rule-break: unset;
  rule: unset;
  rule-inset: unset;
  rule-visibility-items: unset;
  column-span: unset;
  contain: unset;
  contain-intrinsic-block-size: unset;
  contain-intrinsic-size: unset;
  contain-intrinsic-inline-size: unset;
  container: unset;
  content: unset;
  content-visibility: unset;
  corner-shape: unset;
  corner-block-end-shape: unset;
  corner-block-start-shape: unset;
  counter-increment: unset;
  counter-reset: unset;
  counter-set: unset;
  cx: unset;
  cy: unset;
  d: unset;
  dominant-baseline: unset;
  dynamic-range-limit: unset;
  empty-cells: unset;
  field-sizing: unset;
  fill: unset;
  fill-opacity: unset;
  fill-rule: unset;
  filter: unset;
  flex: unset;
  flex-flow: unset;
  flex-line-count: unset;
  float: unset;
  flood-color: unset;
  flood-opacity: unset;
  grid: unset;
  grid-area: unset;
  height: unset;
  hyphenate-character: unset;
  hyphenate-limit-chars: unset;
  hyphens: unset;
  image-orientation: unset;
  image-rendering: unset;
  initial-letter: unset;
  inline-size: unset;
  inset-block: unset;
  inset-inline: unset;
  interactivity: unset;
  interest-delay: unset;
  interpolate-size: unset;
  isolation: unset;
  justify-items: unset;
  letter-spacing: unset;
  lighting-color: unset;
  line-break: unset;
  list-style: unset;
  margin-block: unset;
  margin: unset;
  margin-inline: unset;
  marker: unset;
  mask: unset;
  mask-type: unset;
  math-shift: unset;
  math-style: unset;
  max-block-size: unset;
  max-height: unset;
  max-inline-size: unset;
  max-width: unset;
  min-block-size: unset;
  min-height: unset;
  min-inline-size: unset;
  min-width: unset;
  mix-blend-mode: unset;
  object-fit: unset;
  object-position: unset;
  object-view-box: unset;
  offset: unset;
  opacity: unset;
  order: unset;
  orphans: unset;
  outline: unset;
  outline-offset: unset;
  overflow-anchor: unset;
  overflow-block: unset;
  overflow-clip-margin: unset;
  overflow-inline: unset;
  overflow-wrap: unset;
  overflow: unset;
  overlay: unset;
  overscroll-behavior-block: unset;
  overscroll-behavior-inline: unset;
  overscroll-behavior: unset;
  padding-block: unset;
  padding-inline: unset;
  page: unset;
  page-margin-safety: unset;
  page-orientation: unset;
  paint-order: unset;
  perspective: unset;
  perspective-origin: unset;
  pointer-events: unset;
  position-try: unset;
  position-visibility: unset;
  print-color-adjust: unset;
  quotes: unset;
  r: unset;
  reading-flow: unset;
  reading-order: unset;
  resize: unset;
  rotate: unset;
  ruby-align: unset;
  ruby-overhang: unset;
  ruby-position: unset;
  rule-overlap: unset;
  rx: unset;
  ry: unset;
  scale: unset;
  scroll-axis-lock: unset;
  scroll-behavior: unset;
  scroll-initial-target: unset;
  scroll-margin-block: unset;
  scroll-margin: unset;
  scroll-margin-inline: unset;
  scroll-marker-group: unset;
  scroll-padding-block: unset;
  scroll-padding: unset;
  scroll-padding-inline: unset;
  scroll-snap-align: unset;
  scroll-snap-stop: unset;
  scroll-snap-type: unset;
  scroll-target-group: unset;
  scroll-timeline: unset;
  scrollbar-color: unset;
  scrollbar-gutter: unset;
  scrollbar-width: unset;
  shape-image-threshold: unset;
  shape-margin: unset;
  shape-outside: unset;
  shape-rendering: unset;
  size: unset;
  speak: unset;
  stop-color: unset;
  stop-opacity: unset;
  stroke: unset;
  stroke-dasharray: unset;
  stroke-dashoffset: unset;
  stroke-linecap: unset;
  stroke-linejoin: unset;
  stroke-miterlimit: unset;
  stroke-opacity: unset;
  stroke-width: unset;
  tab-size: unset;
  table-layout: unset;
  text-align: unset;
  text-align-last: unset;
  text-anchor: unset;
  text-autospace: unset;
  text-box: unset;
  text-combine-upright: unset;
  text-decoration: unset;
  text-decoration-skip-ink: unset;
  text-emphasis: unset;
  text-emphasis-position: unset;
  text-fit: unset;
  text-indent: unset;
  text-justify: unset;
  text-overflow: unset;
  text-shadow: unset;
  text-transform: unset;
  text-underline-offset: unset;
  text-underline-position: unset;
  text-wrap: unset;
  timeline-scope: unset;
  timeline-trigger: unset;
  touch-action: unset;
  transform: unset;
  transform-box: unset;
  transform-origin: unset;
  transform-style: unset;
  transition: unset;
  translate: unset;
  trigger-scope: unset;
  user-select: unset;
  vector-effect: unset;
  vertical-align: unset;
  view-timeline: unset;
  view-transition-class: unset;
  view-transition-group: unset;
  view-transition-name: unset;
  view-transition-scope: unset;
  visibility: unset;
  border-spacing: unset;
  -webkit-box-align: unset;
  -webkit-box-decoration-break: unset;
  -webkit-box-direction: unset;
  -webkit-box-flex: unset;
  -webkit-box-ordinal-group: unset;
  -webkit-box-orient: unset;
  -webkit-box-pack: unset;
  -webkit-box-reflect: unset;
  -webkit-line-break: unset;
  -webkit-line-clamp: unset;
  -webkit-mask-box-image: unset;
  -webkit-rtl-ordering: unset;
  -webkit-ruby-position: unset;
  -webkit-tap-highlight-color: unset;
  -webkit-text-combine: unset;
  -webkit-text-decorations-in-effect: unset;
  -webkit-text-fill-color: unset;
  -webkit-text-security: unset;
  -webkit-text-stroke: unset;
  -webkit-user-drag: unset;
  white-space-collapse: unset;
  widows: unset;
  will-change: unset;
  window-drag: unset;
  word-break: unset;
  word-spacing: unset;
  x: unset;
  y: unset;
  z-index: unset;
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-snug);
  padding: 28.3px 0px 28.9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  cursor: pointer;
  color: var(--ink);
}

.sec6-svg-1 {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transform: none;
  transition: transform 0.2s;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.kontakti-section-1 {
  background: rgb(232, 222, 252);
  padding: 112px 0px 111.3px;
}

.kontakti-div-1 {
  width: min(760px, 100% - 72px);
  margin: 0px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kontakti-p-1 {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  line-height: var(--lh-body);
  color: var(--text-muted-alt);
  margin-bottom: 27.1px;
  margin-left: -0.071em;
}

.kontakti-span-1 {
  color: var(--accent);
}

.kontakti-p-2 {
  margin-top: 33.5px;
  line-height: var(--lh-loose);
  font-size: var(--fs-body);
  color: var(--text-muted-alt);
}

.kontakti-div-2 {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.kontakti-a-1 {
  font-family: "DM Sans", Arial, sans-serif;   /* a <button> does not inherit it (2026-09-27) */
  min-width: 283px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  font-size: var(--fs-sm);   /* was var(--r-lg): a radius token that happens to be 14px (export port slip, fixed 2026-09-23) */
  font-weight: 600;
  border-radius: var(--r-sm);
  line-height: var(--lh-snug);
  background: rgb(28, 28, 35);
  color: var(--surface);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.kontakti-span-2 {
  font-size: var(--fs-meta);
  color: var(--text-muted-alt);
  line-height: var(--lh-body);
  margin-top: 8.9px;
}

.kontakti-a-2 {
  margin-top: 4.3px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fs-body);
  font-weight: 500;
  border-bottom: 1px solid rgb(115, 97, 135);
  padding-bottom: 8px;
}

.ftr-footer-1 {
  width: min(1312px, 100% - 72px);
  margin: 0px auto;
  padding: 42.4px 0px 31.7px;
}

.ftr-div-1 {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.ftr-nav-1 {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: var(--fs-meta);
  font-weight: 500;
  flex-wrap: wrap;
}

.ftr-div-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28.5px;
  border-top: 1px solid rgb(230, 229, 233);
  font-size: var(--fs-caption);
  color: var(--text-muted-alt-2);
  line-height: var(--lh-body);
  flex-wrap: wrap;
}

.ftr-span-1 {
  margin-left: -0.051em;
}

.ftr-a-1 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* two legal links share the old single link's slot (Mikelis, 2026-09-27) */
.ftr-legal { display: inline-flex; flex-wrap: wrap; gap: 24px; }

.ftr-svg-1 {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ==========================================================================
   INTERACTION STATES
   Values captured from the locked design export (open FAQ + hover probes),
   not invented - see wp-test/capture-states.mjs and design-v2/port/states.json.
   ========================================================================== */

/* FAQ: question is an h3 wrapping the button (semantics), styling unchanged */
.faq-q { margin: 0; font: inherit; letter-spacing: inherit; }

.faq-panel {
  margin-top: -8.1px;
  padding: 0 40px 30.4px 0;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: 24.2px;
}
.faq-panel[hidden] { display: none; }

.faq-answer {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.faq-link {
  font-size: var(--fs-meta);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: var(--lh-body);
  color: var(--text-muted);
  align-self: flex-start;
}
.faq-link-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* open state: accent question + rotated plus */
.sec6-button-1[aria-expanded="true"] { color: var(--accent); }
.sec6-button-1[aria-expanded="true"] .sec6-svg-1 {
  color: var(--accent);
  transform: rotate(45deg);
}

/* hover states - captured element-by-element from the locked design
   (wp-test/capture-hovers.mjs -> design-v2/port/hovers.json), not invented. */
.hdr-a-2:hover { color: var(--accent); }                       /* header nav links */
.hdr-a-3:hover { background: var(--ink-3); }                   /* header CTA "Parunāsim" */
.sec1-a-1:hover { background: var(--ink-3); }                  /* hero primary CTA (ink since 2026-10-02) */
.hero-ask:hover { background: var(--accent-hover); }           /* the purple ChatGPT button */
.sec1-a-2:hover { color: var(--accent); }                      /* hero secondary CTA */
.sec1-button-1:hover { color: var(--accent); border-color: var(--accent); }  /* carousel arrows */
.rezultati-a-1:hover { color: var(--accent-light); }           /* "Visi klientu rezultāti" (on dark) */
/* result cards are not links any more (Mikelis, 2026-09-22) - no hover feedback */
.par-mums-a-1:hover { color: var(--accent); }                  /* "Iepazīsimies" */
.sec6-button-1:hover { color: var(--accent); }                 /* FAQ questions */
.kontakti-a-1:hover { background: var(--ink-3); }              /* closing CTA */
.kontakti-a-2:hover { color: var(--accent); }                  /* email link */
.ftr-a-1:hover { color: var(--accent); }                       /* "Sīkdatņu politika" */
.ftr-nav-1 a:hover { color: var(--accent); }                   /* footer nav links */
/* INFERRED (element is inside a closed panel, so it could not be probed in the
   mock): the FAQ answer link follows the same accent-hover as every other link. */
.faq-link:hover { color: var(--accent); }

/* carousel: cards keep their slot classes; JS rotates the classes between them */
[data-channel] { cursor: pointer; }
[data-channel][data-slot="0"] { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  [data-channel] { transition: none; }
  [data-channel-dim] { transition: none; }
}

/* ==========================================================================
   THEME-SIDE DEVIATIONS from the locked export
   Each one is a deliberate change Mikelis asked for AFTER the port. They must
   be mirrored in the Claude Design app, or the next re-port will drop them.
   ========================================================================== */

/* FAQ list starts exactly on the container midpoint (Mikelis, 2026-09-16).
   The export used a 96px grid gap, which pushed the right column 48px past
   centre. Column gap is now 0 and the breathing room moved into the heading
   column, so the list's left edge lands on 50%. */
.sec6-section-1 {
  column-gap: 0;
  row-gap: 96px;
}
.sec6-section-1 > :first-child {
  padding-right: 96px;
}
@media (max-width: 760px) {
  .sec6-section-1 > :first-child { padding-right: 0; }
}

/* Trust bar: full-bleed band (pink 09-17, purple --accent since 09-18), no top divider
   (Mikelis, 2026-09-17). The pink band is full-bleed; the logo belt itself stays
   container-width, so the container constraint moves down to the inner element. */
.sec2-section-1 {
  width: 100%;
  border-top: 0;
  background: var(--accent-surface); /* the site pink, same as NĀKAMAIS SOLIS (Mikelis, 2026-09-18, purple audit) */
}
.sec2-div-1 {
  width: min(1312px, 100% - 72px);
  margin: 0 auto;
}

/* Trust logos: white on the band (Mikelis 09-17 wanted them lighter on pink;
   on the purple band they are knocked out to pure white). The export darkened
   them (brightness .55) for a white background. */
.sec2-div-2 img {
  /* marks in --accent purple on the pink band (purple audit, 2026-09-18): a
     solved filter chain maps any colour to rgb(112,71,234) - within 1/255 of
     --accent, verified on a rendered pixel (shots/tablet/filter-solve.mjs).
     If --accent ever changes, re-solve. (White tried 15:40, reverted.) */
  filter: brightness(0) saturate(100%) invert(20.6%) sepia(100%) saturate(1665%) hue-rotate(242.3deg) brightness(116.4%) contrast(94.9%);
  opacity: 1;
}

/* Hero bottom gap = hero top gap, measured OPTICALLY (Mikelis, 2026-09-18):
   header hairline -> badge ink is 66px; stats ink -> pink band was 67px. The
   export's 66.6px bottom padding is a drag artifact; 65.8px lands the band
   exactly one row earlier. Verified with optical-gaps.py. */
.sec1-section-1 {
  padding-bottom: 65.8px;
}

/* Hero bottom gap = hero top gap, measured OPTICALLY on the reference edges
   Mikelis uses: header hairline -> badge dot = 70px; stat purple bar -> pink
   band was 66px. +3px on the export's 66.6px bottom padding (Mikelis, 2026-09-18). */
.sec1-section-1 {
  padding-bottom: 69.6px;
}

/* Button + link hover motion (Mikelis, 2026-09-18). The export already declared
   `transition: background .2s, transform .2s, box-shadow .2s` on the solid
   buttons but never used transform/shadow - this completes that intent. */
.hdr-a-3 svg, .sec1-a-1 svg, .kontakti-a-1 svg,
.sec1-a-2 svg, .par-mums-a-1 svg, .rezultati-a-1 svg, .kontakti-a-2 svg, .faq-link svg {
  transition: transform 0.2s;
}
/* solid buttons: lift + shadow, arrow nudges up-right, press on click */
.hero-ask:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(112, 71, 235, 0.28); }
.hdr-a-3:hover, .hdr-a-4:hover, .sec1-a-1:hover, .kontakti-a-1:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28, 28, 35, 0.22); }
.hdr-a-3:hover svg, .hdr-a-4:hover svg, .sec1-a-1:hover svg, .kontakti-a-1:hover svg { transform: translate(2px, -2px); }
.hdr-a-3:active, .hdr-a-4:active, .sec1-a-1:active, .kontakti-a-1:active { transform: translateY(0) scale(0.98); box-shadow: none; }
/* text links: arrow travels in its own direction */
.sec1-a-2:hover svg { transform: translateX(4px); }
.par-mums-a-1:hover svg, .rezultati-a-1:hover svg, .kontakti-a-2:hover svg, .faq-link:hover svg { transform: translate(3px, -3px); }
/* keyboard focus ring (hover has no keyboard equivalent) */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hdr-a-3, .sec1-a-1, .kontakti-a-1, .hdr-a-3 svg, .sec1-a-1 svg, .kontakti-a-1 svg,
  .sec1-a-2 svg, .par-mums-a-1 svg, .rezultati-a-1 svg, .kontakti-a-2 svg, .faq-link svg { transition: none; }
  .hdr-a-3:hover, .hdr-a-4:hover, .sec1-a-1:hover, .kontakti-a-1:hover { transform: none; }
  .hdr-a-3:hover svg, .hdr-a-4:hover svg, .sec1-a-1:hover svg, .kontakti-a-1:hover svg, .sec1-a-2:hover svg,
  .par-mums-a-1:hover svg, .rezultati-a-1:hover svg, .kontakti-a-2:hover svg, .faq-link:hover svg { transform: none; }
}

/* Solid buttons keep white text on hover/active (Mikelis, 2026-09-18). The
   export's base `a:hover { color: inherit }` outranks the button classes and
   flipped the text to ink; the app runtime had masked this with inline styles. */
.hdr-a-3:hover, .hdr-a-4:hover, .sec1-a-1:hover, .kontakti-a-1:hover,
.hdr-a-3:active, .hdr-a-4:active, .sec1-a-1:active, .kontakti-a-1:active { color: var(--surface); }

/* Snappier hover response (Mikelis, 2026-09-18): the export's 0.2s linear-ish
   transitions read as lag on pointer-enter. 70ms ease-out feels immediate. */
.hdr-a-3, .hdr-a-4, .sec1-a-1, .kontakti-a-1 {
  transition: background var(--t-hover), color var(--t-hover), transform var(--t-hover), box-shadow var(--t-hover);
}
.hdr-a-3 svg, .sec1-a-1 svg, .kontakti-a-1 svg,
.sec1-a-2 svg, .par-mums-a-1 svg, .rezultati-a-1 svg, .kontakti-a-2 svg, .faq-link svg {
  transition: transform var(--t-hover);
}

/* CANONICAL HOVER TIMING (Mikelis, 2026-09-18): every hover/press feedback on
   the site uses var(--t-hover). Slow deliberate motion (carousel 1s, marquee
   ease) is macro-motion and exempt. */
.hdr-a-2, .sec1-a-2, .par-mums-a-1, .rezultati-a-1, .kontakti-a-2,
.ftr-a-1, .ftr-nav-1 a, .faq-link, .sec6-button-1 {
  transition: color var(--t-hover);
}
.sec1-button-1 { transition: border-color var(--t-hover), color var(--t-hover); }

.sec6-svg-1 { transition: transform var(--t-hover), color var(--t-hover); }

/* Footer legal row follows the 13px meta canonical (Mikelis, 2026-09-18):
   the export set it at 12px while the footer nav above sits at 13px. */
.ftr-div-2, .ftr-span-1, .ftr-a-1 {
  font-size: var(--fs-meta);
  color: var(--text-muted); /* the muted-text canon (108/107/118); export had the lighter --text-muted-alt-2 (Mikelis, 2026-09-18) */
}

/* ==========================================================================
   BURGER + OFF-CANVAS MENU (tablet + narrow desktop + mobile, <=1200px) - Mikelis, 2026-09-18.
   Not in the design export (desktop-only). Corsax mechanics (slide in from
   the right, backdrop, Esc/backdrop/link closes), styled to the seoagentura
   canon: ink panel (the results-section dark), white links, purple CTA.
   Breakpoint 1200: below it the WhatsApp button + LV/EN pill + 5 nav items + the
   ink logo block cannot share the row (raised from 1100 on 2026-09-18).
   Panel slide (.3s) is macro-motion like the carousel; hovers use --t-hover.
   ========================================================================== */
.nav-burger, .mobile-panel, .nav-backdrop { display: none; }

@media (max-width: 1200px) {
  .hdr-nav-1, .hdr-a-3 { display: none; }

  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px; /* bigger burger (Mikelis, 2026-09-18): 30x3px lines, 7px apart, 56px hit area */
    width: 56px;
    height: 56px;
    margin-left: auto;
    margin-right: -13px; /* icon ink lands on the container edge, not the hit area */
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    transition: color var(--t-hover);
  }
  .nav-burger span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 0 auto;
    background: currentcolor;
    border-radius: var(--r-2);
  }
  .nav-burger:hover { color: var(--accent); }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 35, 0.45);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }

  .mobile-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(380px, 86vw);
    padding: 84px 36px 40px; /* list starts right under the close button (108 read as too low, Mikelis 2026-09-20) */
    background: var(--ink);
    color: var(--surface);
    z-index: 60;
    transform: translateX(100%);
    visibility: hidden; /* off-screen shadow otherwise bleeds onto the page edge; also untabbable when closed */
    transition: transform 0.3s ease, visibility 0.3s;
    box-shadow: -18px 0 44px rgba(28, 28, 35, 0.25);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-panel.open { transform: translateX(0); visibility: visible; }

  .mobile-panel-close {
    position: absolute;
    top: 27px; /* centred on the 100px header row, same as the burger */
    right: 24px;
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--surface);
    transition: color var(--t-hover);
  }
  .mobile-panel-close svg { width: 24px; height: 24px; }
  .mobile-panel-close:hover { color: var(--accent-light); }

  .mobile-links { display: flex; flex-direction: column; }
  .mobile-links a {
    font-family: Manrope, Arial, sans-serif;
    font-size: var(--fs-h3-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: var(--lh-snug);
    color: var(--surface);
    padding: 10px 0; /* 33px of ink between items, no dividers - the e-mail -> language-pill gap (Mikelis, 2026-10-02) */
    transition: color var(--t-hover);
  }
  .mobile-links a:hover { color: var(--accent-light); }

  .mobile-cta { margin-top: 32px; }
  .mobile-cta:hover { color: var(--surface); }

  .mobile-email {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--surface);
    transition: color var(--t-hover);
  }
  .mobile-email:hover { color: var(--accent-light); }
  .mobile-email svg { transition: transform var(--t-hover); }
  .mobile-email:hover svg { transform: translate(3px, -3px); }

  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-panel, .nav-backdrop { transition: none; }
}

/* Results: when the auto-fit grid drops to two columns (viewport 592-861px, i.e.
   tablet portrait), show only two cards instead of a 2+1 orphan (Mikelis,
   2026-09-18). Thresholds derive from the export's grid: 3 x 250px + 2 x 20px
   gap = 790px container = 862px viewport; 2 cols need 520px = 592px viewport. */
@media (min-width: 592px) and (max-width: 861px) {
  .rezultati-div-3 > :nth-child(3) { display: none; }
}

/* Process steps: 2 per row wherever the auto-fit grid would give 3+1 (viewport
   504-967px; 4 x 200px + 3 x 32px gap = 896px container = 968px viewport), so
   tablet reads 2 and 2 (Mikelis, 2026-09-18). */
@media (min-width: 504px) and (max-width: 967px) {
  .ka-stradajam-div-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } /* rows 48 apart (the export's 32 is the column gap; gap audit 2026-09-18) */
}

/* Par mums: when the two columns stack (viewport < 888px; 2 x 360px + 96px gap),
   the photo + caption block goes AFTER the text block (Mikelis, 2026-09-18). */
@media (max-width: 887px) {
  .par-mums-div-2 { order: 2; }
}

/* Language switcher pill next to Parunāsim (Mikelis, 2026-09-18; reference: a
   grey pill, active language as a dark capsule). Header: left of the
   button, 16px from it (container gap is 40, hence the -24). Hidden with the CTA at <=1200px and
   repeated at the bottom of the drawer in a dark-panel variant. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  gap: 2px;
  border-radius: var(--r-pill);
  background: var(--surface-tint-2);
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: var(--lh-tight);
  color: var(--text-muted);
  transition: color var(--t-hover), background var(--t-hover);
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-active, .lang-switch a.is-active:hover {
  background: var(--ink);
  color: var(--surface);
}
.hdr-lang { margin-right: 0; } /* spacing is all spacers now (equal gaps) */
.mobile-lang { display: none; }
@media (max-width: 1200px) {
  .hdr-lang { display: none; }
  .mobile-lang {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 32px;
    background: rgba(255, 255, 255, 0.1);
  }
  .mobile-lang a { color: var(--accent-light); }
  .mobile-lang a:hover { color: var(--surface); }
  .mobile-lang a.is-active, .mobile-lang a.is-active:hover {
    background: var(--surface);
    color: var(--ink);
  }
}

/* Header logo side = ink block, white logo, no divider line under the header
   (Mikelis, 2026-09-18). The block's right edge is ALWAYS the midpoint between
   the logo and the menu (nav on desktop, burger below 1200px): a flex spacer
   between the logo and the menu takes all free space, and the block is painted
   from the spacer's midpoint 100vw to the left (clipped at the screen edge).
   Follows the shrink state and every viewport with no measured numbers. */
.hdr-header-1 { border-bottom: 0; }
.hdr-spacer { flex: 1 1 0; align-self: stretch; position: relative; min-width: 0; }
/* Menu items centred between the logo and the LV/EN pill (Mikelis, 2026-09-18): a
   second, unpainted spacer after the nav splits the free space equally on both sides
   of the nav; the export's fixed 48px nav margin and the pill's -36px are dropped. */
.hdr-div-1 > .hdr-spacer-2, .hdr-div-1 > .hdr-spacer-3 { flex: 1 1 0; }
.hdr-spacer.hdr-spacer-2::before, .hdr-spacer.hdr-spacer-3::before { content: none; } /* must outrank .hdr-spacer::before, declared below */
.hdr-nav-1 { margin-left: 0; margin-right: 0; }
.hdr-lang { margin-left: 0; margin-right: 0; }
/* EQUAL GAPS (Mikelis, 2026-09-18): logo->block edge = edge->first item = last
   item->pill = pill->button, all from the viewport width. Container gap 0; the
   three spacers share the free space 2:1:1 (the first is split in two by the
   block edge), so every gap = free / 4. */
.hdr-div-1 { gap: 0; }
.hdr-div-1 > .hdr-spacer { flex: 2 1 0; } /* the block-edge spacer; outranks the base .hdr-spacer rule */
.hdr-div-1 > .hdr-spacer-2, .hdr-div-1 > .hdr-spacer-3 { flex: 1 1 0; }
@media (max-width: 1200px) { .hdr-spacer-2, .hdr-spacer-3 { display: none; } } /* burger mode: block edge stays logo-burger midpoint */
.hdr-spacer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 50%;
  width: 100vw;
  background: var(--ink);
  z-index: -1; /* above the header's white, below the logo */
}
.hdr-div-1 { position: relative; }
/* scoped to the header: the footer reuses the same logo classes and stays ink/purple */
.hdr-header-1 .hdr-i-1, .hdr-header-1 .hdr-i-2, .hdr-header-1 .hdr-i-3 { background: var(--surface); }
.hdr-header-1 .hdr-span-2, .hdr-header-1 .hdr-span-3 { color: var(--surface); }

/* Header shrinks on scroll: 100px -> 72px once the page is scrolled past 24px
   (Mikelis, 2026-09-18). State class set in js/main.js (initShrink). The ink
   block and its diagonal follow the height automatically. */
/* The shrink must not change the document height: shrinking a sticky header
   in flow shifts everything below it up by 28px, the browser re-anchors the
   scroll position, the threshold flips back, and the header flaps (Mikelis,
   2026-09-18). So the bar shrinks to 72px and a 28px margin keeps the in-flow
   footprint at 100px. */
/* 17:33 fix: the margin-bottom version left a 28px TRANSPARENT strip under the
   shrunk bar through which page content (hairlines etc.) showed. Now the header
   keeps its 100px box and simply slides up 28px; the inner row bottom-aligns
   into the visible 72px. Document height never changes, nothing shows through. */
/* padding, not a child margin - a child margin-top collapses through the header
   and pushes the whole page down 28px instead */
/* 2026-10-04: the slide is the sticky offset, not a transform. A transform moved the box off
   its in-flow area and, on the way back at the top of the page, exposed the white body under
   the pink logo side for a few frames (Mikelis). With `top: -28px` the header can only be
   pulled up by sticking, i.e. once the page is scrolled past it - at the top it sits on its
   own box, so there is never an uncovered strip. Visible height when stuck is still 72. */
.hdr-header-1 { transition: top 0.2s ease, padding-top 0.2s ease; }
.hdr-header-1.is-scrolled { top: -28px; height: 100px; padding-top: 28px; } /* border-box: 100 total = 28 hidden + 72 visible */
@media (prefers-reduced-motion: reduce) { .hdr-header-1 { transition: none; } }

/* Tablet/mobile (<=1200px, burger mode): the corsax auto-hide instead of the shrink -
   the sticky bar slides out when scrolling down and back in when scrolling up; at the
   top it sits in normal flow. State class set in js/main.js (initShrink). */
@media (max-width: 1200px) {
  .hdr-header-1 { transition: transform 0.3s ease; will-change: transform; }
  .hdr-header-1.is-hidden { transform: translateY(-100%); }
  body.nav-open .hdr-header-1 { transform: none; }
}

/* Logo bars 1px longer (all three +1, container +1) so their bottom edge sits
   1px below the "SEO aģentūra" baseline - reads aligned on Mikelis's screen
   where fractional metrics rounded the text lower (Mikelis, 2026-09-18). */
.hdr-span-1 { height: 45px; }
.hdr-i-1 { height: 16.8px; }
.hdr-i-2 { height: 30px; }
.hdr-i-3 { height: 45px; }

/* Logo squeezes with the header on scroll (Mikelis, 2026-09-18): scaled from
   its left-centre so the ink block and the diagonal stay put. */
/* Optical centring (Mikelis, 2026-09-18): equal gap header-edge -> logo ink top
   and bars bottom -> header-edge, in both states. Measured at 4x with
   shots/tablet/logo-gaps.mjs. Re-measured for the option-A lockup (2026-09-18):
   the 44px bars centre themselves - 28.25 / 28.25 at top, 20.25 / 20.25 scrolled -
   so no nudge is needed any more (was -1.9 / -1.25 for the old lockup). */
.hdr-header-1 .hdr-a-1 { transform: translateY(0); transform-origin: left center; transition: transform 0.2s ease; }
.hdr-header-1.is-scrolled .hdr-a-1 { transform: translateY(0) scale(0.72); }
@media (prefers-reduced-motion: reduce) { .hdr-header-1 .hdr-a-1 { transition: none; } }

/* Header CTA = "Rakstīt WhatsApp" in WhatsApp green (Mikelis, 2026-09-18),
   replacing the ink "Parunāsim". Same button geometry; WhatsApp glyph instead
   of the arrow; the lift shadow is tinted green. The drawer repeats it. */
.hdr-a-3, .hdr-a-3:hover, .hdr-a-3:active { background: var(--brand-whatsapp); }
.hdr-a-3:hover { background: var(--brand-whatsapp-hover); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35); }
.hdr-svg-wa { width: 20px; height: 20px; fill: currentcolor; flex-shrink: 0; }
.hdr-a-3:hover .hdr-svg-wa { transform: none; }
.mobile-cta { margin-top: 32px; }
@media (max-width: 1200px) { .mobile-cta { display: inline-flex; } }
/* Header consultation button (Mikelis, 2026-09-27): the header CTA's original ink look (.hdr-a-3
   before it went WhatsApp green), same metrics, paired tight against the WhatsApp button. */
.hdr-a-4 {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;   /* label to arrow, as on the WhatsApp button beside it */
  margin-right: 12px;
  padding: 13px 19px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--surface);
  white-space: nowrap;
  transition: background var(--t-hover);
}
.hdr-a-4:hover { background: var(--ink-3); color: var(--surface); }
/* lift, shadow, arrow nudge and press come from the shared solid-button rules above (joined 2026-10-04) */
.mobile-consult { display: none; }
@media (max-width: 1200px) {
  .hdr-div-1 > .hdr-a-4 { display: none; }   /* burger mode: it moves into the drawer */
  /* the menu ends on its last word, not on a rule: no hairline or padding under the last item,
     and the button sits the same 33px below "Blogs" that the pill sits below the e-mail
     (Mikelis, 2026-10-02) */
  .mobile-links a:last-child { padding-bottom: 0; }
  .mobile-consult { display: inline-flex; margin: 31px 0 0; }
  .mobile-consult + .mobile-cta { margin-top: 12px; }
  .mobile-panel .mobile-email { margin-top: 32px; }   /* was 28, off the scale */
}

/* Hero on tablet and below (<=1200px) - Mikelis, 2026-09-18:
   1. The channel carousel shows side cards on the RIGHT only (left slots -1/-2
      hidden), and the stack slides to the column's left edge so the centre card
      gets the room the left peeks used to take.
   2. The whole cards element (stack + arrows) is centred vertically against the
      text part only - kicker to "Skatīt rezultātus" - not the stats below.
      Done by turning the text column into grid rows (display: contents) and
      spanning the cards over rows 1-4; the stats sit in row 5. Row-gap 0 so the
      elements' own margins keep the exact text rhythm.
   3. Columns 1:1 (export 5:7) so the H1 holds its two lines. */
@media (max-width: 1200px) {
  .sec1-section-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 0; }
  .sec1-div-1 { display: contents; }
  .sec1-p-1, .sec1-h1-1, .sec1-p-2, .sec1-div-2, .sec1-div-3 { grid-column: 1; }
  /* height 0 + centred overflow: the cards contribute no height to the rows, so the
     text rhythm is untouched and the cards' visual centre = the text part's centre */
  .sec1-div-5 { grid-column: 2; grid-row: 1 / 5; align-self: center; height: 0; justify-content: center; padding-top: 0; }
  /* the WHOLE element (cards + arrows) centres on the text part (Mikelis, 18:35 - earlier
     the stack alone was the anchor via a 72px padding-top; that sat too low) */
  /* right peek card ended 8.4% of the column short of the edge (measured 834/768/1024).
     The peeks sit at translateZ(-430px) under an 800px perspective, so a shift of the
     stack moves them only x0.65 on screen: 8.4% / 0.65 = 12.9% shift lands the +2 card
     flush on the container's right edge. Total padding stays 30% = same card width. */
  .sec1-div-6 { padding: 0 4%; }   /* single card: centred and wide; the 17.1/12.9 split placed the ring's right peek (2026-10-10) */
  .sec1-div-22, .sec1-div-23 { opacity: 0; pointer-events: none; }
  .sec1-div-24 { padding-left: 12.9%; padding-right: 17.1%; } /* arrows centred under the centre card; the export's 20px top padding stays */
}

/* Cards shorter on tablet and below (Mikelis, 2026-09-18): the export's 262px
   inner panel leaves ~45px of empty space under the last row; 236px holds the
   content (217px) plus the 16px bottom padding. Card 382 -> 356px. */
@media (max-width: 1200px) {
  .sec1-div-9 { height: 236px; }
}

/* ==========================================================================
   LOGO LOCKUP re-set (Mikelis, 2026-09-18, "option A"): the export's logo was
   the only Manrope 800 on the page (everything else is 600 / -0.06em) and its
   10.6px sub-line floated under the ņ tail. New lockup = the page's H1 idiom:
   two lines, same size, Manrope 600, -0.06em, line-height 1.15, second line in
   the accent on white (footer); --accent-light on the ink header. Bars pixel-snapped (8 / 4 / 16-30-44 / r2). Markup simplified to
   "Kalniņa" + one sub span (header.php + footer.php).
   ========================================================================== */
.hdr-a-1 { align-items: center; gap: 12px; }
.hdr-span-1 { gap: 4px; height: 44px; margin-top: 0; }
.hdr-i-1, .hdr-i-2, .hdr-i-3 { width: 8px; border-radius: var(--r-2); }
.hdr-i-1 { height: 16px; }
.hdr-i-2 { height: 30px; }
.hdr-i-3 { height: 44px; }
.hdr-span-2 {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: var(--fs-logo);
  letter-spacing: var(--ls-stat);
  line-height: var(--lh-h1);
  white-space: nowrap;
}
.hdr-span-3 {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  color: var(--accent);
}
.hdr-header-1 .hdr-span-2 { color: var(--surface); }
.hdr-header-1 .hdr-span-3 { color: var(--accent-light); } /* light purple line on the ink block (all-white and full accent both tried 2026-09-18, reverted) */

/* ==========================================================================
   INVERTED HEADER (Mikelis, 2026-09-18 15:30): logo side WHITE, everything
   right of the logo-menu midpoint on the ink block. The block is painted from
   the same spacer midpoint, just to the right. Logo = footer colours; nav, pill
   and burger take their on-ink variants; WhatsApp stays green.
   Delete this block to go back to the ink-left header.
   ========================================================================== */
.hdr-spacer::before { right: auto; left: 50%; }
.hdr-header-1 .hdr-i-1, .hdr-header-1 .hdr-i-2, .hdr-header-1 .hdr-i-3 { background: var(--accent); }
.hdr-header-1 .hdr-span-2 { color: var(--ink); }
.hdr-header-1 .hdr-span-3 { color: var(--accent); }
.hdr-a-2 { color: var(--surface); }
.hdr-a-2:hover { color: var(--accent-light); }
.hdr-lang { background: rgba(255, 255, 255, 0.1); }
.hdr-lang a { color: var(--surface); } /* inactive language white (Mikelis) */
.hdr-lang a:hover { color: var(--accent-light); }
.hdr-lang a.is-active, .hdr-lang a.is-active:hover { background: var(--surface); color: var(--ink); }
@media (max-width: 1200px) {
  .nav-burger { color: var(--surface); }
  .nav-burger:hover { color: var(--accent-light); }
}

/* Scrolled logo shrinks in LAYOUT, not by transform (Mikelis, 2026-09-18): a
   transform leaves the flex spacers where they were, so the ink edge did not
   follow the smaller logo. Now the type and the bars change size, the spacers
   re-split the free width and the edge tracks the logo. 0.72 ratio, snapped. */
.hdr-header-1 .hdr-a-1 { transition: gap 0.2s ease; }
.hdr-header-1.is-scrolled .hdr-a-1 { transform: none; gap: 9px; }
.hdr-header-1 .hdr-span-2 { transition: font-size 0.2s ease; }
.hdr-header-1.is-scrolled .hdr-span-2 { font-size: var(--fs-logo-scrolled); }
.hdr-header-1 .hdr-span-1 { transition: height 0.2s ease, gap 0.2s ease; }
.hdr-header-1 .hdr-i-1, .hdr-header-1 .hdr-i-2, .hdr-header-1 .hdr-i-3 { transition: height 0.2s ease, width 0.2s ease; }
.hdr-header-1.is-scrolled .hdr-span-1 { height: 32px; gap: 3px; }
.hdr-header-1.is-scrolled .hdr-i-1, .hdr-header-1.is-scrolled .hdr-i-2, .hdr-header-1.is-scrolled .hdr-i-3 { width: 6px; }
.hdr-header-1.is-scrolled .hdr-i-1 { height: 12px; }
.hdr-header-1.is-scrolled .hdr-i-2 { height: 22px; }
.hdr-header-1.is-scrolled .hdr-i-3 { height: 32px; }
@media (prefers-reduced-motion: reduce) {
  .hdr-header-1 .hdr-a-1, .hdr-header-1 .hdr-span-2, .hdr-header-1 .hdr-span-1, .hdr-header-1 .hdr-i-1, .hdr-header-1 .hdr-i-2, .hdr-header-1 .hdr-i-3 { transition: none; }
}

/* Trust band tighter with ONE logo height (Mikelis, 2026-09-18): every mark
   24px tall, widths auto; band padding 40 -> 28px, so the band is 80px instead
   of 132. Overrides the export's per-logo heights (.sec2-img-1..8, 20-52px). */
.sec2-section-1 { padding: 28px 0; }
.sec2-div-2 img { height: 24px; width: auto; }

/* Header background solid white, no translucency/blur when content scrolls
   under it (Mikelis, 2026-09-18). The export had rgba(255,255,255,.93) +
   backdrop-filter blur. */
.hdr-header-1 { background: var(--accent-surface); backdrop-filter: none; } /* logo side in the site pink (Mikelis, 2026-09-18 20:00; was white) */

/* The inverted header's ink block is painted 100vw to the RIGHT of the spacer
   midpoint, which spilled past the viewport and made the page scroll sideways
   on phones/tablets (Mikelis, 2026-09-18 17:30). Clip the header's overflow -
   `clip` keeps position: sticky working (overflow: hidden would not). */
.hdr-header-1 { overflow-x: hidden; overflow-x: clip; } /* hidden = fallback for browsers without `clip` (iOS < 16): the ink block would otherwise spill and the page scrolls sideways; hidden on the sticky element itself keeps sticky working */

/* Par mums photo: the export's min-height 453px + aspect-ratio 1.155 forced the
   box to 523px wide on phones (523 > the 318px column) - the only horizontal
   overflow on the page. Where the columns stack, the width drives the height. */
@media (max-width: 887px) {
  .par-mums-div-3 { min-height: 0; }
}

/* Tablet/mobile (<=1200px): the white part just boxes the logo - the ink block
   starts one container margin (36px) after the logo, so the white gap right of
   the logo equals the white gap left of it (Mikelis, 2026-09-18). */
@media (max-width: 1200px) {
  .hdr-spacer::before { left: 36px; }
}

/* Hero stats on ONE line on tablet (Mikelis, 2026-09-18): the stats row spans
   both hero columns (the cards column is empty at that row), so both stat
   blocks fit side by side without wrapping their captions. */
@media (max-width: 1200px) {
  .sec1-div-3 { grid-column: 1 / -1; flex-wrap: nowrap; }
}

/* Hero button + "Skatīt rezultātus" wrap on tablet: the vertical gap follows the
   hero's rhythm (48px = the buttons -> stats step) instead of the 20px horizontal gap
   (Mikelis, 2026-09-18). Desktop stays side by side with the export's 20px. */
@media (max-width: 1200px) {
  .sec1-div-2 { row-gap: 12px; } /* was 48 for the old text link (removed); two buttons keep the desktop 12 = header button gap (2026-10-02) */
}

/* Tablet: carousel arrows closer to the cards - 20px instead of the export's 40
   (20 gap + 20 padding-top); the cards are smaller here (Mikelis, 2026-09-18). */
@media (max-width: 1200px) {
  .sec1-div-24 { padding-top: 0; }
}

/* Par mums on tablet (700-1200px): keep TWO columns, text left, photo RIGHT
   (Mikelis, 2026-09-18). The export's auto-fit stacked them below 888px and had
   the photo on the left above that; the photo box's min-height is dropped so it
   never outgrows its column. */
@media (min-width: 700px) and (max-width: 1200px) {
  .par-mums-div-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .par-mums-div-2 { order: 0; } /* photo LEFT like desktop (Mikelis 18:58; right was tried) */
  /* the portrait photo (1106x1219) was height-limited inside the export's landscape 1.155 box
     (242px wide in a 333px column); a portrait box lets it fill the column width */
  .par-mums-div-3 { min-height: 0; aspect-ratio: 0.95 / 1; }
}

/* Footer logo smaller on tablet (<=1200px) so logo + footer nav share one row
   (Mikelis, 2026-09-18): same sizes as the scrolled header logo. */
@media (max-width: 1200px) {
  .ftr-footer-1 .hdr-a-1, footer .hdr-a-1 { gap: 9px; }
  .ftr-footer-1 .hdr-span-2, footer .hdr-span-2 { font-size: var(--fs-logo-scrolled); }
  .ftr-footer-1 .hdr-span-1, footer .hdr-span-1 { height: 32px; gap: 3px; }
  .ftr-footer-1 .hdr-i-1, .ftr-footer-1 .hdr-i-2, .ftr-footer-1 .hdr-i-3, footer .hdr-i-1, footer .hdr-i-2, footer .hdr-i-3 { width: 6px; }
  .ftr-footer-1 .hdr-i-1, footer .hdr-i-1 { height: 12px; }
  .ftr-footer-1 .hdr-i-2, footer .hdr-i-2 { height: 22px; }
  .ftr-footer-1 .hdr-i-3, footer .hdr-i-3 { height: 32px; }
}

/* Footer top/bottom gaps equal OPTICALLY (Mikelis, 2026-09-18): band -> logo ink
   was 45.5px (42.4 padding + 3.1 of line leading), logo ink -> divider was 51.3
   (48 margin + 3.3 below the bars). Now 48 / 48 on the ink: padding-top 45,
   row margin-bottom 48.5 (49.5 on tablet), both set from re-measurement. Applies to every width (same lockup everywhere). */
.ftr-footer-1 { padding-top: 45px; }
.ftr-div-1 { margin-bottom: 48.5px; } /* measured: ink ends 0.5px above the box */
@media (max-width: 1200px) { .ftr-div-1 { margin-bottom: 49.5px; } } /* smaller tablet logo: ink ends 1.5px above */

/* ==========================================================================
   MOBILE (<=700px) - Mikelis, 2026-09-18. Hero stacks: kicker, H1, lead,
   buttons, cards, stats - one column. Cards element becomes a normal block
   (no zero-height centring), card 80% of the column with the right-side peeks.
   ========================================================================== */
@media (max-width: 700px) {
  .sec1-section-1 { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 64px; } /* header -> kicker ink = kicker -> H1 ink, 42px; stats -> next section 64 - 48 (= arrows -> stats) read too tight against the full-bleed band (Mikelis, 2026-10-02) */
  .sec1-p-1, .sec1-h1-1, .sec1-p-2, .sec1-div-2, .sec1-div-3, .sec1-div-5 { grid-column: 1; }
  .sec1-div-5 { grid-row: 5; height: auto; padding-top: 0; align-self: auto; margin-top: 48px; gap: 48px; }   /* phone: buttons -> chips = chips -> card = card -> stats = 48 (Mikelis, 2026-10-10) */
  .sec1-div-3 { grid-row: 6; margin-top: 64px; }   /* phone: card -> stats = stats -> partner band (the 64 hero padding-bottom); Mikelis 2026-10-10 */
  .sec1-div-6 { padding: 0; }   /* single card: full width under the chips; the 20% right hole was for the peeking stack (Mikelis saw it, 2026-10-10) */
  .sec1-div-24 { padding-left: 0; padding-right: 0; } /* arrows centred in the column, not under the card (Mikelis) */
  .par-mums-div-3 { aspect-ratio: 0.85 / 1; } /* box taller than the photo's 0.907 ratio so the photo fills the full column width (Mikelis: larger) */
}

/* Mobile (<=700px): the two hero stat blocks stack one after the other (Mikelis,
   2026-09-18; also cures the 320px overflow). 28px between them = the export's gap. */
@media (max-width: 700px) {
  .sec1-div-3 { flex-direction: column; flex-wrap: nowrap; }
}

/* MOBILE header + gutter like corsax (Mikelis, 2026-09-18): header 68px, side
   gutter 24px (containers 100% - 48px), logo at the small size, ink block boxes
   the logo with 24px gaps, burger stays. (.sec2-section-1 is the full-bleed band
   and stays 100%.) */
@media (max-width: 700px) {
  .ftr-footer-1, .hdr-div-1, .par-mums-div-1, .rezultati-div-1, .sec1-section-1, .sec2-div-1, .sec6-section-1 { width: calc(100% - 48px); }
  .hdr-header-1 { height: 68px; }
  .hdr-spacer::before { left: 24px; }
  .hdr-header-1 .hdr-a-1 { gap: 9px; }
  .hdr-header-1 .hdr-span-2 { font-size: var(--fs-logo-scrolled); }
  .hdr-header-1 .hdr-span-1 { height: 32px; gap: 3px; }
  .hdr-header-1 .hdr-i-1, .hdr-header-1 .hdr-i-2, .hdr-header-1 .hdr-i-3 { width: 6px; }
  .hdr-header-1 .hdr-i-1 { height: 12px; }
  .hdr-header-1 .hdr-i-2 { height: 22px; }
  .hdr-header-1 .hdr-i-3 { height: 32px; }
}

/* Results header on mobile: "Visi klientu rezultāti" wraps under the H2 and the
   export's 70px flex gap became a 70px ROW gap (Mikelis, 2026-09-18). Row gap
   24px (the H1 -> lead step); the 56px to the cards stays. */
@media (max-width: 700px) {
  .rezultati-div-2 { row-gap: 24px; }
}

/* Results on mobile: "Visi klientu rezultāti" moves BELOW the cards (after the
   disclaimer), closing the section (Mikelis, 2026-09-18). The header row is
   dissolved (display: contents) so the link can be re-ordered; the 56px
   header -> cards distance moves onto the cards. */
@media (max-width: 700px) {
  .rezultati-div-1 { display: flex; flex-direction: column; align-items: stretch; }
  .rezultati-div-2 { display: contents; }
  .rezultati-div-3 { margin-top: 56px; }
  .rezultati-a-1 { order: 10; align-self: flex-start; margin-top: 36px; }
}

/* MOBILE audit fixes (Mikelis "yep", 2026-09-18):
   1. section padding 112 -> 80 (corsax mobile canon); hero and band untouched
   2. FAQ heading -> list 96 (grid column gap gone vertical) -> 56, like H2 -> cards
   3. Par mums text -> photo 96 -> 56, same reason
   4. process steps stacked 32 -> 48, as the tablet rows
   5. touch targets: carousel arrows 44px hit area (32px circle drawn inside),
      footer nav + legal links 12px vertical padding
   6. hero + Nākamais solis buttons full width */
@media (max-width: 700px) {
  .rezultati-section-1, .par-mums-section-1, .ka-stradajam-section-1, .sec6-section-1, .kontakti-section-1 { padding-top: 80px; padding-bottom: 80px; }
  .sec6-section-1 { row-gap: 56px; }
  .par-mums-div-1 { row-gap: 30px; } /* 36 optical: the photo PNG carries a 6px transparent margin (Mikelis: 56 was too much air) */
  .ka-stradajam-div-2 { row-gap: 48px; }
  /* bigger arrow buttons on touch (Mikelis, 2026-09-18): 44px circles, icon scaled with them */
  .sec1-button-1 { width: 44px; height: 44px; }
  .sec1-button-1 svg { width: 22px; height: 22px; }
  .sec1-div-25 { gap: 16px; }
  .ftr-nav-1 a, .ftr-a-1 { padding: 12px 0; }
  .sec1-a-1, .kontakti-a-1 { width: 100%; }
}
@media (max-width: 700px) {
  /* audit follow-ups: the CTA button's wrapper is a centred fit-content column - stretch it;
     the FAQ list carried a 3px top offset from the export, absorbed so heading -> list = 56 */
  .kontakti-div-1 { width: calc(100% - 48px); } /* the CTA's own 760px container also gets the 24px gutter */
  .kontakti-div-2 { width: 100%; align-items: stretch; }
  .kontakti-div-2 .kontakti-a-2 { align-self: center; }
  .sec6-div-1 { margin-top: 0; padding-top: 0; }
}

/* Page-level sideways-scroll guard (2026-09-18): the export's `.dc-root-div-1
   { overflow-x: clip }` wrapper never made it into the markup, so nothing clipped
   the page. `main` holds every section (header + drawer + footer are outside, so
   the sticky header is unaffected). hidden first = fallback where `clip` is
   unsupported (iOS Safari < 16). */
main { overflow-x: hidden; overflow-x: clip; }

/* Band on mobile: at least 2.5 logos in view at once (Mikelis, 2026-09-18) -
   belt runs edge to edge, logos 18px tall, 40px apart (desktop: container
   belt, 24px, 96px apart). */
@media (max-width: 700px) {
  .sec2-div-1 { width: 100%; }
  .sec2-div-2 { gap: 40px; padding-right: 40px; }
  .sec2-div-2 img { height: 18px; }
}

/* Band on mobile runs 2x (Mikelis, 2026-09-18): the JS drive reads
   animation-duration at init; 115s -> 30s per half-loop (about 4x). */
@media (max-width: 700px) {
  .sec2-div-2 { animation-duration: 128s; } /* ~11 px/s (64s = 22 px/s, then 2x slower everywhere). The earlier "slow" was the loop-length bug (measured before images loaded), not the duration; 30s became 47 px/s once fixed */
}

/* Results cards stacked on mobile: the export's 20px column gap became the
   vertical gap; rows 24px apart (Mikelis, 2026-09-18). */
@media (max-width: 700px) {
  .rezultati-div-3 { row-gap: 24px; }
}

/* Footer on mobile (Mikelis, 2026-09-18: the wrapped nav left huge holes):
   logo, then the five links as a single-column list (10px tap padding, no row
   gaps), then the legal items stacked left. Row -> divider keeps 48 optical
   (38 margin + the last link's 10px padding). */
@media (max-width: 700px) {
  .ftr-div-1 { flex-direction: column; align-items: flex-start; gap: 36.5px; margin-bottom: 38px; } /* logo ink -> first menu ink 51, like the other footer gaps */
  .ftr-footer-1 { padding-top: 49px; } /* band -> logo ink 51 */
  .ftr-nav-1 { flex-direction: column; align-items: flex-start; gap: 0; margin-left: 0; } /* export pushed the nav right with margin-left auto */
  .ftr-nav-1 a { padding: 10px 0; font-size: var(--fs-body); } /* 16px on the phone (13 read too small); the 20px white between rows stays */
  .ftr-div-2 { flex-direction: column; align-items: flex-start; gap: 0; }
  .ftr-div-2 > * { padding: 8px 0; } /* 21px line + 16 = the nav's 37px row pitch (Mikelis: same rhythm) */
  .ftr-div-2 { padding-top: 40px; } /* divider -> first legal line 48 = the last menu line -> divider (Mikelis: match above) */
  .ftr-footer-1 { padding-bottom: 40px; } /* last legal line -> page end 48 (32 + the item's 8px padding), same as the divider gaps */
  .ftr-a-1 { padding: 8px 0; }
}

/* Hero stat figures on mobile: 44 -> the H2 size (36 here) so they stop rivalling
   the 52px H1 (type audit, Mikelis "ok", 2026-09-18). Lead stays 18. */
@media (max-width: 700px) {
  .sec1-span-3, .sec1-span-4, .sec1-span-5 { font-size: var(--fs-h2); }
}

/* Smallest type on the phone: --fs-caption 12 -> 13px at <=700px (kickers, card
   category labels, mock labels). Desktop keeps 12 (locked). Mikelis 2026-09-18. */
@media (max-width: 700px) {
  :root { --fs-caption: 13px; }
}

/* Nākamais solis left-aligned on mobile like every other section (Mikelis,
   2026-09-18); the export centres it at all widths. */
@media (max-width: 700px) {
  .kontakti-div-1 { text-align: left; align-items: flex-start; }
  .kontakti-div-2 { align-items: stretch; }
  .kontakti-div-2 .kontakti-a-2 { align-self: flex-start; }
  .kontakti-p-1 { justify-content: flex-start; }
}

/* Desktop (>1200px, no burger): the right part of the header is WHITE, not
   ink (Mikelis, 2026-09-20). Logo side stays pink. Nav, pill and hovers go
   back to their on-white colours; WhatsApp stays green. Burger widths keep
   the ink block. */
/* 2026-09-20 10:55: also white on tablet/mobile - block, nav, pill and burger all on-white now */
.hdr-spacer::before { background: var(--surface); }
.nav-burger { color: var(--ink); }
.nav-burger:hover { color: var(--accent); }
@media (min-width: 1201px) {
  .hdr-a-2 { color: var(--ink-3); }
  .hdr-a-2:hover { color: var(--accent); }
  .hdr-lang { background: var(--surface-tint-2); }
  .hdr-lang a { color: var(--text-muted); }
  .hdr-lang a:hover { color: var(--ink); }
  .hdr-lang a.is-active, .hdr-lang a.is-active:hover { background: var(--ink); color: var(--surface); }
}

/* Drawer in the site pink (Mikelis, 2026-09-20): panel --accent-surface, ink
   links with the accent hover, --border hairlines, ink close X, white LV/EN
   pill with the ink active capsule, WhatsApp green as is. */
@media (max-width: 1200px) {
  .mobile-panel { background: var(--accent-surface); color: var(--ink); box-shadow: -18px 0 44px rgba(28, 28, 35, 0.18); }
  .mobile-panel-close { color: var(--ink); }
  .mobile-panel-close:hover { color: var(--accent); }
  .mobile-links a { color: var(--ink); }
  .mobile-links a:hover { color: var(--accent); }
  .mobile-email { color: var(--ink); }
  .mobile-email:hover { color: var(--accent); }
  .mobile-lang { background: var(--surface); }
  .mobile-lang a { color: var(--text-muted); }
  .mobile-lang a:hover { color: var(--ink); }
  .mobile-lang a.is-active, .mobile-lang a.is-active:hover { background: var(--ink); color: var(--surface); }
}

/* Drawer close X = the burger's size and position (Mikelis, 2026-09-20): 56px
   box, 30px icon, sitting exactly where the burger sits in the header, so the
   toggle stays under the thumb. */
@media (max-width: 1200px) {
  .mobile-panel-close { width: 56px; height: 56px; top: 22px; right: 23px; }
  .mobile-panel-close svg { width: 30px; height: 30px; stroke-width: 2.4; }
}
@media (max-width: 700px) {
  .mobile-panel-close { top: 6px; right: 11px; }
}

/* Footer on mobile: no divider; menu's last line -> first legal line = 48
   (Mikelis, 2026-09-20). 30 margin + 10 link padding + 8 legal padding. */
@media (max-width: 700px) {
  .ftr-div-2 { border-top: 0; padding-top: 0; }
  .ftr-div-1 { margin-bottom: 24px; } /* ink-to-ink 51 = the last legal line -> page end, measured at 4x */
}

/* ADK is a compact framed mark - at the uniform 24px it read small next to the
   wordmarks; 32px on desktop/tablet, 24px on mobile (Mikelis, 2026-09-20). */
.sec2-div-2 img[src*="logo-adk"] { height: 32px; }
@media (max-width: 700px) {
  .sec2-div-2 img[src*="logo-adk"] { height: 24px; }
}
/* keep the band's height as it was with 24px logos (80 / 74 on mobile): the 32px
   ADK sets the row height, so the padding gives back the 8 / 6 it added */
.sec2-section-1 { padding: 24px 0; }
@media (max-width: 700px) {
  .sec2-section-1 { padding: 25px 0; }
}

/* Band is draggable (main.js): keep vertical page scrolling on touch, block image
   ghost-drags and text selection while dragging. */
.sec2-section-1 { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sec2-div-2 img { pointer-events: none; }

/* ==========================================================================
   Shared page hero (breadcrumbs, H1, lead) - every inner page starts with it.
   Same type and gaps as the homepage hero. (2026-09-22)
   ========================================================================== */
.page-hero {
  width: min(1312px, 100% - 72px);
  margin: 0 auto;
  padding: 64px 0 0;
}
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin-bottom: 25px;
}
.crumbs a { color: var(--text-muted); transition: color var(--t-hover); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }
.crumbs-sep { color: var(--text-muted-alt-2); }
.page-h1 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--ls-stat);
  line-height: var(--lh-h1);
  margin-left: -0.08em;
}
.page-h1-accent { color: var(--accent); }   /* inline: the phrase wraps with the rest of the line instead of dropping whole (Mikelis, 2026-09-23) */
.page-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  margin-top: 24px;
  margin-left: -0.075em;
  color: var(--text-muted);
  max-width: 720px;
}
.page-lead strong { font-weight: 600; color: var(--ink); }

@media (max-width: 700px) {
  .page-hero { width: calc(100% - 48px); padding-top: 40px; }   /* header -> crumbs ink = crumbs -> H1 ink, 44.5 - the homepage's mobile header -> kicker treatment (Mikelis, 2026-10-02) */
}

/* /sasniegtie-seo-rezultati/ - the wall reuses the homepage's result cards as they are
   (.rezultati-*); the only page-level rule is the gap to the hero above. (2026-09-22) */
.page-hero + .rezultati-section-1 { margin-top: 96px; }
/* the homepage grid is auto-fit/250px - fine for three cards, but eight of them pack
   four per row; this page keeps the homepage's three-up rhythm (Mikelis, 2026-09-22) */
.page-hero + .rezultati-section-1 .rezultati-div-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* card = name row, the client's own Analytics screenshot, then a chin with the label on the
   label on the left and the number on the right (Mikelis, 2026-09-22) */
/* chin: the number on the left, a circled arrow on the right - the old card's own anatomy
   (Mikelis, 2026-09-23). 32 = the card's canonical block gap, no divider. */
.rezultati-div-6 { align-items: flex-end; justify-content: space-between; border-top: 0; padding-top: 32px; }
/* the curve's real span, read off the client's own Analytics screenshot. There are no y
   values to show: Analytics hid the Users numbers in those exports (Mikelis, 2026-09-23). */
.rez-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-on-dark);
}
/* the arrow alone - the ring read too loud against the card (Mikelis, 2026-09-23) */
.rez-go {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--text-on-dark);
  transition: color var(--t-hover);
}
.rez-go svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rez-card:hover .rez-go { color: var(--surface); }

.rezultati-a-2 .rezultati-div-5 { margin: 0 -0.06em 0 0; line-height: var(--lh-tight); color: var(--surface); } /* white: the purple now belongs to the curve (Mikelis, 2026-09-23) */
/* the wall closes on an "and more" card - the old site ended its list with a literal "..." */
.rez-more {
  display: flex;
  align-items: center;
  justify-content: center;
  /* the "there is more" slot is not a card - just the dots in the grid cell
     (Mikelis, 2026-09-23) */
  background: none;
  border-color: transparent;
}
.rez-more-dots {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--ls-stat);
  line-height: var(--lh-tight);
  color: var(--accent-light);
  transform: translateY(-22.8px); /* the glyph's ink sits on the baseline; re-measured at this size */
}
/* the client's curve, redrawn in the site's own palette on the dark card
   (traced from the old site's Analytics screenshots, research/current-site/graphs) */
.rez-shot { margin: 32px 0 0; }
.g-svg { width: 100%; height: 140px; display: block; overflow: visible; }
.g-grid { stroke: var(--ink-3); stroke-width: 1; }
.g-base { stroke: var(--ink-3); stroke-width: 1; }
.g-line { fill: none; stroke: var(--accent-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.g-stop-a { stop-color: var(--accent-light); stop-opacity: 0.22; }
.g-stop-b { stop-color: var(--accent-light); stop-opacity: 0; }
@media (max-width: 1200px) {
  .page-hero + .rezultati-section-1 .rezultati-div-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .page-hero + .rezultati-section-1 { margin-top: 64px; }
  .page-hero + .rezultati-section-1 .rezultati-div-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Result cards open the client's graph in a lightbox (Mikelis, 2026-09-22). */
.rez-card { cursor: pointer; }
.rez-card:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
/* only the clickable cards answer the pointer, and they do it the way the card was already
   built for it - surface and border, no motion (Mikelis, 2026-09-23) */
.rez-card:hover { border-color: var(--surface); }   /* border only - lifting the surface washed the card out */

.rez-lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.rez-lb[hidden] { display: none; }
.rez-lb-backdrop {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0.82;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.rez-lb-frame {
  position: relative;
  width: min(820px, 100%);
}
.rez-lb-panel {
  width: 100%;
  max-height: calc(100vh - 140px);
  overflow: auto;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-md);
  padding: 24px 28px 26px;
  color: var(--surface);
  animation: lb-in 0.18s ease-out;
}
@keyframes lb-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.rez-lb-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* same as the card head row: one line means one BASELINE, not two centred boxes */
  align-items: baseline;
  gap: 10px;
}
.rez-lb-name { font-size: var(--fs-body); font-weight: 500; }
.rez-lb-cat { font-size: var(--fs-meta); color: var(--text-on-dark); line-height: var(--lh-body); }
.rez-lb-shot { margin: 32px 0 0; }
.rez-lb-shot .g-svg { height: 280px; }
.rez-lb-chin {
  display: flex;
  justify-content: center;   /* the number centred in the enlarged view (Mikelis, 2026-09-28) */
  align-items: flex-end;
  gap: 12px;
  padding-top: 32px;
}
.rez-lb-label { font-size: var(--fs-meta); color: var(--text-on-dark); line-height: var(--lh-body); white-space: nowrap; }
.rez-lb-num {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2-alt);
  font-weight: 600;
  letter-spacing: var(--ls-display-alt);
  line-height: var(--lh-tight);
  color: var(--surface);
  margin-right: 0;
}
/* the close button sits outside the panel, on the diagonal off its top-right corner:
   44px box, so top/right -46 puts its centre 24px out along both axes (the card's own
   small-gap step: 24 / 32 / 40) */
.rez-lb-close {
  position: absolute;
  top: -46px;
  right: -46px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-on-dark);
  transition: color var(--t-hover);
}
.rez-lb-close:hover { color: var(--surface); }
.rez-lb-close svg { width: 26px; height: 26px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; }
body.lb-open { overflow: hidden; }

@media (max-width: 700px) {
  .rez-lb { padding: 16px; }
  .rez-lb-panel { padding: 20px 20px 22px; max-height: calc(100vh - 96px); }
  .rez-lb-close { top: -48px; right: 0; } /* the phone has no room outside the panel */
  .rez-lb-shot { margin-top: 24px; }
  .rez-lb-chin { padding-top: 24px; }
  .rez-lb-label { white-space: normal; } /* one line is a desktop luxury - it overflows the phone */
}
@media (prefers-reduced-motion: reduce) {
  .rez-lb-panel { animation: none; }
}

/* ==========================================================================
   Funnel page (/bezmaksas-seo-konsultacija/, 2026-09-23): no header, no footer, the site's
   pink for the whole canvas, everything centred in the article's own 760px measure.
   ========================================================================== */
.is-funnel { background: var(--accent-surface); }
.funnel { display: block; padding: 96px 0 112px; }
.funnel-wrap { width: min(760px, 100% - 72px); margin: 0 auto; }   /* the column is centred on the page, its content sits on the left edge (Mikelis, 2026-09-23) */
.funnel-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--text-muted-alt);
  transition: color var(--t-hover);
}
.funnel-back:hover { color: var(--accent); }
.funnel-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* confirmation screen: the same canvas, with the tick standing where the back link sits on
   the form page (Mikelis, 2026-09-27) */
.funnel-mark {
  display: grid;
  place-items: center;
  width: 96px;   /* 56 read as a bullet, not a confirmation (Mikelis, 2026-09-27) */
  height: 96px;
  border-radius: var(--r-round);
  background: var(--accent);
}
.funnel-mark svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--surface);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.funnel-home { margin-top: 43.5px; }   /* 48px of ink under the lead - the text-to-button gap of the site's CTA block (Mikelis, 2026-09-27) */
/* the confirmation sits dead centre of the screen, both ways (Mikelis, 2026-09-27) */
.funnel.is-done {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 48px 0;
  box-sizing: border-box;
}
.funnel.is-done .funnel-wrap { text-align: center; }
/* 404: the same centred block between the real header and footer - centred in the viewport
   left under the 100px header; the mark carries the number instead of the tick */
.funnel.is-404 { min-height: calc(100svh - 100px); background: var(--accent-surface); }   /* the pink sits on the block, not the body: the footer's white band must stay white */
.funnel-mark-404 {   /* the number in the mark instead of an icon (Mikelis, 2026-10-04): the Sub-heading role (32px), white - 20 read too small */
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2-alt);
  font-weight: 600;
  letter-spacing: var(--ls-display-alt);
  line-height: 1;
  color: var(--surface);
}
@media (max-width: 700px) { .funnel.is-404 { min-height: calc(100svh - 68px); } }
.funnel.is-done .funnel-mark { margin: 0 auto; }
.funnel.is-done .page-h1 { margin-left: 0; }   /* the optical -0.08em is for flush-left headlines */
.funnel.is-done .page-lead { margin-left: auto; margin-right: auto; }   /* its max-width box centres too */
.funnel-mark + .funnel-h1 { margin-top: 33px; }   /* 44.5px of ink below the tick (the crumbs -> H1 gap), as the back link keeps on the form; re-tuned for the H2 role 2026-10-02 */
.funnel-h1 { max-width: none; margin-top: 20px; }   /* 44.5px of ink below the back link - the crumbs-to-H1 gap on every other page (Mikelis, 2026-09-25) */
.funnel-lead { color: var(--text-muted-alt); }
/* The confirmation screen is styled as the site's NĀKAMAIS SOLIS block (Mikelis, 2026-10-02):
   headline in the H2 role, lead in the block's 16px body, and its gaps (33.5 / 44). */
.funnel.is-done .funnel-h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-display); }
.funnel.is-done .funnel-lead { font-size: var(--fs-body); line-height: var(--lh-loose); margin-top: 33.5px; max-width: none; }
.funnel.is-done .funnel-home { margin-top: 44px; }
/* tick -> headline ink 44.5 on mobile too (the 36px H2 carries less leading); the button keeps its
   283px desktop slab instead of the mobile full-width stretch (Mikelis, 2026-10-02) */
@media (max-width: 700px) {
  .funnel.is-done .funnel-mark + .funnel-h1 { margin-top: 36px; }
  .funnel.is-done .funnel-home { width: auto; }
}
.lead-error {   /* validation message above the form (2026-10-03): body size, accent colour, sits in the lead -> form gap */
  margin-top: 24px;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--accent);
}
.lead-error + .lead-form { margin-top: 24px; }
/* own validation bubble (2026-10-11): replaces the browser's native one, which cannot be styled
   (orange icon) and speaks the browser's language - ink box under the first invalid field,
   gone as soon as the visitor types */
.lead-form { position: relative; }
.lead-tip {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - 8px);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--surface);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.lead-tip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 20px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  transform: rotate(45deg);
}
.lead-tip.is-on { opacity: 1; transform: none; }
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 59.5px;   /* 64px of visible space, as the lead keeps above the card walls */
}
/* on desktop two pairs share a row: name + e-mail, phone + budget (Mikelis, 2026-09-27) */
.lead-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lead-field { display: block; }
/* the field name lives in the placeholder (Mikelis, 2026-09-23); the label stays in the
   markup for screen readers and for the browser's own validation messages */
.lead-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lead-field input,
.lead-field select,
.lead-field textarea {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  transition: border-color var(--t-hover);
}
.lead-field textarea { height: auto; padding: 16px 20px; resize: vertical; }
/* the browser parks its own arrow a few px off the edge; ours sits on the field's own
   20px gutter (Mikelis, 2026-09-25) */
.lead-field select {
  appearance: none;
  padding-right: 52px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C6B76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15.5px center;   /* the glyph is inset 4.5px inside its 18px box */
  background-size: 18px 18px;
}

.lead-field input::placeholder,
.lead-field textarea::placeholder { color: var(--text-muted); }
.lead-field select:invalid { color: var(--text-muted); }
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus { outline: none; border-color: var(--accent); }
/* consent tick: the site has no checkbox anywhere else, so it is built from the same parts
   as everything else - --r-xs box, --border hairline, accent fill when checked
   (Mikelis, 2026-09-27) */
.lead-consent {
  display: flex;
  align-items: center;   /* the text sits on the box's centre line */
  gap: 12px;
  margin-top: 7px;
  cursor: pointer;
}
.lead-consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.lead-consent-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
  transition: background var(--t-hover), border-color var(--t-hover);
}
.lead-consent-box svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--surface);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--t-hover);
}
.lead-consent input:checked + .lead-consent-box { background: var(--accent); border-color: var(--accent); }
.lead-consent input:checked + .lead-consent-box svg { opacity: 1; }
.lead-consent input:focus-visible + .lead-consent-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead-consent-text {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--text-muted-alt);
}
.lead-consent-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lead-submit {
  margin-top: 12px;   /* with the consent row's 4px, the tick sits midway between the textarea and the button */
  justify-content: center;
  border: 0;
  cursor: pointer;
}
.funnel-h1 { margin-top: 24.5px; }   /* the back link lost its inline line-box leading above (display: flex), so the box margin grows to keep 44.5px of ink to the H1 */
@media (max-width: 700px) { .funnel-h1 { margin-top: 28.5px; } }
@media (max-width: 700px) {
  .lead-form-row { grid-template-columns: minmax(0, 1fr); }
  .funnel { padding: 48px 0 80px; }
  .funnel-wrap { width: calc(100% - 48px); }
  .lead-form { margin-top: 57px; }   /* lead -> form ink 64 on mobile too (the lead ends on a line without descenders here), as results/blog (Mikelis, 2026-10-02; was 48) */
}

/* ==========================================================================
   Blog (2026-09-23): the archive is a wall of post cards on the site's light
   ground; the single post is a hero + one measure of body copy.
   ========================================================================== */
/* the wall opens at the canonical section distance - the same 112px every section keeps
   between its content and its edge (Mikelis, 2026-09-23) */
/* the wall opens at the same distance the header keeps above the breadcrumbs (64px of
   visible space; the lead's line box carries 4.5 of it). At the bottom the pager sits centred between the
   last card's "Lasīt" and the footer logo: 64px above, 80px below - the logo block reads
   heavier than a 13px link, so an equal measure looks short. The footer brings 45 of the 80
   itself (Mikelis, 2026-09-23) */
.blog-section { padding: 59.5px 0 35px; }
.blog-wrap { width: min(1312px, 100% - 72px); margin: 0 auto; }
/* Archive layout: the post wall keeps the three-column card rhythm, the third column is
   the sidebar - search + the consultation card, sticky while the wall scrolls. Carried
   over from the old site's third column (Mikelis, 2026-09-23). */
.blog-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.blog-main { grid-column: span 2; min-width: 0; }
/* the sticky child only travels inside its own box, so the column has to span the row */
.blog-aside { align-self: stretch; }
.blog-aside-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;   /* so the sticky card can travel the whole column */
}
.blog-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  background: var(--surface-tint-2);   /* the same grey as the LV/EN pill */
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: border-color var(--t-hover);
}
.blog-search:focus-within { border-color: var(--accent); }
.blog-search-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
}
.blog-search input {
  width: 100%;
  border: 0;
  background: none;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
/* the browser's own clear glyph cannot be recoloured, so it is replaced by our own -
   which also returns the reader to the archive they searched from (Mikelis, 2026-09-23) */
.blog-search input::-webkit-search-cancel-button { appearance: none; }
.blog-search-clear {
  display: inline-flex;
  flex: none;
  color: var(--text-muted);
  transition: color var(--t-hover);
}
.blog-search-clear:hover { color: var(--accent); }
.blog-search-clear svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.blog-search input:focus { outline: none; }
.blog-search input::placeholder { color: var(--text-muted); }
/* the card sits on the site's grey, same tint as the search field above it; the muted text
   goes neutral with it (Mikelis, 2026-09-23) */
.blog-cta {
  position: sticky;
  top: 124px;   /* header 100 + the grid gap; only the card follows, the search scrolls away */
  background: var(--surface-tint-2);
  border-radius: var(--r-md);
  padding: 41px 40px 49px;   /* ink to the top and bottom edge = the note-to-button gap, 50px
                               (Mikelis, 2026-09-23); the heading's cap sits 9.5px below its
                               line box at 32/1.35, hence 41 rather than 50 */
  text-align: center;   /* everything centred in the card (Mikelis, 2026-09-23) */
}
/* sized to its label, centred by the card - not the section CTA's 283px slab */
.blog-cta .kontakti-a-1 { justify-content: center; min-width: 0; gap: 16px; }
.blog-cta-note {
  margin-top: 29.5px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}
.blog-cta-title {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2-alt);
  font-weight: 600;
  line-height: var(--lh-snug-alt);
  letter-spacing: var(--ls-display-alt);
  color: var(--ink);
}
/* the card keeps the closing CTA block's own rhythm, measured ink to ink on the
   homepage: heading -> text 33px, text -> button 48px (Mikelis, 2026-09-23) */
.blog-cta .kontakti-a-1 { margin-top: 44px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 24px;   /* column gap on the same step as the result cards */
}
.blog-card { display: flex; flex-direction: column; color: inherit; }
.blog-card-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  background: var(--surface-tint-2);
  margin-bottom: 24px;
}
/* white arrow in the image's top-right corner, same mark as the result cards
   (Mikelis, 2026-09-23) */
.blog-card-go {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  color: var(--surface);
}
.blog-card-go svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-hover); }
.blog-card:hover .blog-card-media img { transform: scale(1.02); }
.blog-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin-bottom: 12px;
}
.blog-card-cat { color: var(--accent); font-weight: 600; }
.blog-card-title {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h3-lg);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug-alt);
  color: var(--ink);
  transition: color var(--t-hover);
}
.blog-card:hover .blog-card-title { color: var(--accent); }
/* same link as "Iepazīsimies" on the homepage: 16px DM Sans 600 in ink, 12px to the arrow
   (Mikelis, 2026-09-23) */
.blog-card-more {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.blog-card:hover .blog-card-more { color: var(--accent); }
.blog-empty { font-size: var(--fs-body); color: var(--text-muted); }   /* archive with no posts at all */

/* "Jautā ChatGPT par izlasīto rakstu" under the post body (Mikelis, 2026-10-02): a quiet grey
   tint block - option D of four, at its label's width - so it reads as part of the article, not
   a CTA. Body text size, regular weight, muted colour, arrow; hover: ink text. Square, on the
   text's left edge. */
.post-ask { width: min(760px, 100% - 72px); margin: 60.5px auto 0; }   /* paragraph -> block ink 66 = paragraph -> H2 ink (Mikelis, 2026-10-02) */
@media (max-width: 700px) { .post-ask { width: calc(100% - 48px); margin-top: 45.5px; } }   /* 51 of ink, the mobile paragraph -> H2 */
.post-ask-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text-muted);
  background: var(--surface-tint-2);
  transition: color var(--t-hover);
}
.post-ask-link svg { width: 16px; height: 16px; stroke: currentcolor; fill: none; stroke-width: 2; }
.post-ask-link:hover { color: var(--ink); }
.post-ask { margin-bottom: 112px; }   /* the body's former bottom padding moves below the button */
@media (max-width: 700px) { .post-ask { margin-bottom: 80px; } }
/* legal pages share .post-body but have no ask button - they keep the padding themselves */
.is-legal .post-body { padding-bottom: 112px; }
@media (max-width: 700px) { .is-legal .post-body { padding-bottom: 80px; } }

/* Hero "Jautā ChatGPT par Kalniņa SEO aģentūru" (Mikelis, 2026-10-02): the hero button's
   geometry in accent purple, a white shimmer sweeping across it continuously (3.2s per pass), a star before the label.
   Sits under the consultation button (the flex group wraps it onto its own line). */
.hero-ask { background: var(--accent); position: relative; overflow: hidden; }   /* purple = the AI thing; the consultation button is ink (Mikelis, 2026-10-02) */
.hero-ask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -160%;
  width: 480%;
  /* a 60%-wide soft band repeating every 160% of the button: the next band's leading edge
     enters on the left exactly as the previous one's trailing edge leaves on the right -
     never none, never two, no cut at the loop point (Mikelis, 2026-10-02). Three periods
     of 160% tile the 480% strip; the loop moves it by one period. */
  background: linear-gradient(90deg,
    transparent 10.4%, rgba(255, 255, 255, 0.55) 16.67%, transparent 22.9%,
    transparent 43.75%, rgba(255, 255, 255, 0.55) 50%, transparent 56.25%,
    transparent 77.1%, rgba(255, 255, 255, 0.55) 83.33%, transparent 89.6%);
  transform: skewX(-20deg);
  animation: hero-ask-sweep 8.8s linear infinite;   /* same speed as before: 160% of the button per cycle */
  pointer-events: none;
}
@keyframes hero-ask-sweep {
  0% { transform: translateX(-33.333%) skewX(-20deg); }
  100% { transform: translateX(0) skewX(-20deg); }
}
/* 2026-10-10: the star is gone - the button carries the same arrow (.hdr-svg-1) and hover nudge as every other button (Mikelis) */
.hero-ask-short { display: none; }
@media (max-width: 1200px) {   /* the full label wraps to two lines on a phone AND on tablets (EN "Ask ChatGPT about Textbook SEO agency" wrapped at 834, Mikelis 2026-10-04); the short one fits - was 700 */
  .hero-ask-full { display: none; }
  .hero-ask-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .hero-ask::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .hero-chip-ind, .sec1-div-6 [data-channel] { transition: none; } }


/* pagination */
.blog-wrap .navigation.pagination { margin-top: 64px; }   /* no hairline above the pager (Mikelis, 2026-09-23) */
.blog-wrap .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-meta); }
.blog-wrap .nav-links .page-numbers {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: color var(--t-hover), border-color var(--t-hover);
}
.blog-wrap .nav-links .page-numbers:hover { color: var(--accent); border-color: var(--accent); }
.blog-wrap .nav-links .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* single post */
/* the headline column comes from .page-hero .page-h1 (55%) - no second cap here */
/* On a post the hero sits in the article's own measure, so crumbs, headline and meta line
   up with the text below (Mikelis, 2026-09-23). */
.single .page-hero,
.is-legal .page-hero { width: min(760px, 100% - 72px); }
.single .page-hero .page-h1,
.is-legal .page-hero .page-h1 { max-width: none; }
@media (max-width: 700px) {
  .single .page-hero,
  .is-legal .page-hero { width: calc(100% - 48px); }   /* the mobile 24px gutter, like the body below (the 760px measure outranked it; Mikelis, 2026-10-02) */
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22.5px;   /* H1 -> meta ink = H1 -> lead ink on the results page, 25px (Mikelis, 2026-10-02; was 46 = the crumbs gap) */
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
/* Mobile: post and single-content-page titles (legal pages) take 44px - the 52px H1
   is too big for a long title there, the 36px H2 too small (Mikelis). Still <h1> tags (Mikelis, 2026-10-02). */
@media (max-width: 700px) {
  .post-h1 { font-size: var(--fs-h1-sm); line-height: var(--lh-h2); letter-spacing: var(--ls-display); margin-top: 30.5px; }   /* collapses with the crumbs' 25: +5.5 keeps crumbs -> H1 ink at 44.5 with the smaller leading */
  .post-meta { margin-top: 25.5px; }   /* the results page reads 28 there */
  /* mobile posts: header -> crumbs, crumbs -> title and title -> meta are one gap, 44.5 of ink
     measured baseline to cap (Mikelis, 2026-10-02; 33 tried and rejected as too small) */
  .single .post-meta { margin-top: 31px; }
  .post-body p + p { margin-top: 31.5px; }   /* paragraph -> paragraph ink 44.5 too, the mobile post gap (Mikelis, 2026-10-02; 24 box = 37 ink before) */
  body .post-body h2 { margin-top: 33px; }   /* outranks the later base rule; paragraph -> heading ink 51 = meta -> first paragraph ink (Mikelis, 2026-10-02; 48 box = 66 ink before) */
  body .post-body h3 { margin-top: 39px; }   /* same 51 of ink - the 20px heading carries less leading */
}
.post-cat { color: var(--accent); font-weight: 600; }
.post-body {
  /* the measure stays centred on the page - Mikelis prefers it over aligning to the hero
     (2026-09-23) */
  width: min(760px, 100% - 72px);
  margin: 56px auto 0;
  padding-bottom: 0;   /* the 112 sits under .post-ask since 2026-10-02 */
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--text-muted);   /* the site's running-text colour; --ink-3 was used nowhere else */
}
.post-body > * + * { margin-top: 24px; }
.post-body h2 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h2-alt);
  font-weight: 600;
  letter-spacing: var(--ls-display-alt);
  line-height: var(--lh-snug-alt);
  color: var(--ink);
  margin-top: 48px;
}
.post-body h3 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-h3-lg);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug-alt);
  color: var(--ink);
  margin-top: 40px;
}
.post-body h4 {
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug-alt);
  color: var(--ink);
  margin-top: 32px;
}
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--accent-hover); }
.post-body img { border-radius: var(--r-md); height: auto; }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li + li { margin-top: 10px; }
.post-body strong { color: var(--ink); }
.post-body blockquote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px;
  font-size: var(--fs-lead);
  color: var(--ink);
}

@media (max-width: 1200px) {
  /* the sidebar drops below the wall and stops sticking */
  .blog-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-main { grid-column: span 2; }
  .blog-aside { grid-column: span 2; max-width: 520px; }
  .blog-aside-inner { position: static; }
}
@media (max-width: 700px) {
  .blog-section { padding: 53px 0 0; }   /* lead -> first card ink 64, as on the mobile results page (Mikelis, 2026-10-02; read 75); no bottom padding - the CTA card -> footer logo gap is set below */
  .blog .ftr-footer-1, .search .ftr-footer-1 { padding-top: 46.5px; }   /* CTA card -> logo ink 50 = logo -> first footer link ink (Mikelis, 2026-10-02) */
  .blog-wrap { width: calc(100% - 48px); }
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }   /* card -> card 48, the desktop row gap (Mikelis, 2026-10-02; was 40) */
  .blog-layout { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }   /* pager -> sidebar 64 too (was the 24 column gap) */
  .search-no-results .blog-main { display: none; }   /* the empty results cell otherwise adds a 64 row gap above the sidebar (Mikelis, 2026-10-02) */
  .blog-aside-inner { gap: 48px; }   /* search box -> CTA card 48 = card -> card once the sidebar stacks (Mikelis, 2026-10-02; was the 24 column gap) */
  .blog-wrap .navigation.pagination { margin-top: 58px; }   /* the card's visible bottom sits 6.5px above its box: 58 reads 64.5, centring the pager between card and sidebar (Mikelis, 2026-10-02) */
  .blog-main, .blog-aside { grid-column: auto; }
  .post-body { width: calc(100% - 48px); margin-top: 40px; }
}

/* The full-bleed slabs (header block, hero, footer) are sized in 100vw, which counts the
   scrollbar - so on a real browser they hang ~15px past the content and the page picks up a
   horizontal scrollbar. Clipping the overhang costs nothing: they are background fills, and
   clip (unlike hidden) does not turn the root into a scroll container, so sticky still works.
   (Mikelis, 2026-09-23) */
html { overflow-x: clip; }

/* DARK TOP (results page, Mikelis, 2026-09-23): the ink of the results section runs all the
   way up behind the hero and the header, so the page opens on one slab instead of a white
   band above it. The hero paints full-bleed from its own box (it is a centred 1312px column),
   and the 96px gap to the section is folded into the hero's padding so there is no seam. */
/* hero and section are one slab now, so the section's own 112px is the whole gap -
   the hero adds none on top of it (Mikelis, 2026-09-23) */
.is-dark-top .page-hero { position: relative; padding-bottom: 0; }
.is-dark-top .page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--ink);
}
.is-dark-top .page-hero + .rezultati-section-1 { margin-top: 0; }
.is-dark-top .crumbs a { color: var(--text-on-dark); }
.is-dark-top .crumbs a:hover { color: var(--surface); }
.is-dark-top .crumbs, .is-dark-top .crumbs [aria-current] { color: var(--surface); }
/* The shrink adds 28px of padding-top to the header, which pushed the block (it hangs off
   the inner row) down and let the header's own pink show as a hairline across the top edge -
   visible while the header grows back. The block now starts above the row, and anything above
   the header's top edge is off-screen because it is sticky at 0. (Mikelis, 2026-09-23) */
.hdr-spacer::before { top: -48px; }

/* The footer relied on the body being white; make it explicit so a page can paint its own
   body background. It is a centred 1312px column, so the fill has to be full-bleed - same
   trick as the hero slab (Mikelis, 2026-09-23). */
.ftr-footer-1 { position: relative; }
.ftr-footer-1::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--surface);
}
/* Results page: the body itself is ink, so the strip behind the sticky header stays dark
   while the header shrinks and grows back - no white flash on the way up. */
.is-dark-top { background: var(--ink); }
/* the headline column caps at 55% of the hero in this hero type (Mikelis, 2026-09-23;
   45 -> 50 -> 55, each step to keep a headline on two lines: the results H1's first line
   needs 721px). The locked homepage hero keeps its H1 in a 527px column. */
.page-hero .page-h1 { max-width: 55%; }
/* Blog archive H1 breaks after "un" without a <br>: the column is sized in ch (so it scales
   with the fluid H1) between "citām tēmām" (9.6ch) and "Par SEO un citām" (12.2ch), so the
   browser has only one place to wrap (Mikelis, 2026-09-28). */
.page-hero .page-h1.blog-h1 { max-width: 11ch; }   /* outranks the tablet/mobile column caps below */
@media (max-width: 1024px) { .page-hero .page-h1 { max-width: 70%; } }
@media (max-width: 700px) { .page-hero .page-h1 { max-width: none; } }
/* the wall opens at the same distance the header keeps above the breadcrumbs (64px), and
   the note keeps that distance under the cards (Mikelis, 2026-09-23) */
.is-dark-top .rezultati-section-1 { padding-top: 59.5px; }
.is-dark-top .rezultati-p-3 { margin-top: 63px; }
/* Mobile results page: lead -> first card, last card -> dots and dots -> note all 64 of ink - the
   desktop lead -> card-wall gap (Mikelis, 2026-10-02; 48 tried first; read 126 / 65 / 125 before:
   the homepage's 56px grid margin stacked on the section padding, and the dots cell kept its
   card padding). */
@media (max-width: 700px) {
  .page-hero + .rezultati-section-1 .rezultati-div-3 { margin-top: 0; }
  .is-dark-top .rezultati-section-1 { padding-top: 53.5px; }
  .is-dark-top .rez-more { padding: 22.5px 0 0; }
  .is-dark-top .rezultati-p-3 { margin-top: 28px; text-align: center; margin-left: 0; }   /* the dots glyph is lifted 22.8px inside its line box, so the box reaches far below the ink; centred under the dots (Mikelis) */
}
.is-dark-top .page-h1 { color: var(--surface); }
.is-dark-top .page-h1-accent { color: var(--accent-light); }
.is-dark-top .page-lead { color: var(--text-on-dark); }

/* ==========================================================================
   COOKIE BAR (2026-10-04, Mikelis: like corsax) - bottom, white, hairline on top; informational
   (Sapratu / Uzzināt vairāk), like corsax. [hidden] must win over display:flex (the corsax
   "Sapratu bug"). Horizontal padding = the container margin so the text aligns with the page.
   ========================================================================== */
.cookie-bar[hidden] { display: none; }
.cookie-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 14px 36px;
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--border);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-body-alt);
  line-height: var(--lh-body);
  box-shadow: 0 -6px 24px rgb(28 28 35 / 8%);
}
.cookie-bar p { margin: 0; color: var(--ink); font-size: var(--fs-body-alt); line-height: var(--lh-body); }
.cookie-bar-actions { display: flex; align-items: center; gap: 12px; }
/* two buttons, one size, in the site's button idiom (ink / accent solids, --r-sm, DM Sans 600) at a
   smaller scale: 36px tall, --fs-meta - like corsax (Mikelis 2026-10-04) */
.cookie-ok, .cookie-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 122px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-sm);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--surface);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-hover);
}
.cookie-ok { background: var(--ink); }
.cookie-ok:hover { background: var(--ink-3); color: var(--surface); }
.cookie-more { background: var(--accent); }
.cookie-more:hover { background: var(--accent-hover); color: var(--surface); }
@media (max-width: 700px) {
  .cookie-bar { padding: 14px 24px; text-align: center; }
  .cookie-bar-actions { width: 100%; justify-content: center; flex-wrap: wrap; }
}

/* ---- Hero platform chips (option B, 2026-10-10): all seven platforms named at once; the deck shows
   one card, the chips (and the back cards' transitions) drive it. Arrows removed. ---- */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;   /* = the hero's button gap (Mikelis, 2026-10-10) */
  padding: 0 4%;
  position: relative;
}

/* segmented-control motion (Mikelis, 2026-10-10): one ink pill slides between the chips (FLIP, also
   across the wrapped rows); the card below crossfades with a short slide from the side the selection
   moved to. JS positions .hero-chip-ind; until then .is-active paints its own ink background. */
.hero-chip-ind {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: none;   /* the pill jumps, no slide (Mikelis, 2026-10-12) */
}

.hero-chips.has-ind .hero-chip-ind { opacity: 1; }
.hero-chips.has-ind .hero-chip.is-active,
.hero-chips.has-ind .hero-chip.is-active:hover { background: transparent; border-color: transparent; }

/* text and icon turn white in step with the arriving pill. (A pass-through variant - chips without fill, the
   pill lighting the chips it crosses - was tried 2026-10-10 and rejected: this one was better.) */
.hero-chips.has-ind .hero-chip { transition: background var(--t-hover); }   /* switch is instant; only the hover keeps its feedback timing */
.hero-chips.has-ind .hero-chip img { transition: none; }

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--border);   /* grey like the card - final (Mikelis, 2026-10-10) */
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--fs-meta) / var(--lh-tight) "DM Sans", sans-serif;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
  position: relative;
  z-index: 1;
}

.hero-chip img {
  width: 22px;
  height: 22px;
  display: block;
}

.hero-chip:hover {
  border-color: var(--accent);
}

.hero-chip.is-active,
.hero-chip.is-active:hover {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

/* active chip: logo in white on ink (Mikelis likes it). ChatGPT's icon is a filled tile, so a plain
   brightness(0) invert(1) flattened it to a white square - it gets invert-first so the tile goes
   light and the knot dark (2026-10-10). */
.hero-chip.is-active img {
  filter: brightness(0) invert(1);
}

.hero-chip--chatgpt.is-active img {
  filter: invert(1) grayscale(1) brightness(3);   /* 3x pushes the tile to pure white, the knot stays black */
}

/* card switch = POP (Mikelis, 2026-10-10: "something appear", no slide): the new card scales up from
   94% with a slight overshoot while fading in; the old one fades in place, then snaps back to the
   waiting size invisibly. The pill still slides between the chips. */
.sec1-div-6 [data-channel] {
  transform: none;
  transition: opacity 0.22s ease-out, transform 0.34s cubic-bezier(0.34, 1.4, 0.64, 1);   /* the 0.34s pop (a faster 0.2s try was rejected, Mikelis 2026-10-10) */
}

.sec1-div-6 [data-channel]:not([data-slot="0"]) {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
  transition: opacity 0.15s ease, transform 0s linear 0.15s;
}

@media (max-width: 760px) {
  .hero-chips { gap: 12px; padding: 0; }   /* same 12 as desktop and tablet (24 = result-card gap tried and reverted, Mikelis 2026-10-10) */
  .hero-chip { padding: 6px 10px 6px 6px; gap: 6px; font-size: var(--fs-caption); }
  .hero-chip img { width: 18px; height: 18px; }
}

/* Tablet (two-column hero, 761-1024): the named chips wrapped into four rows in the narrow right
   column (iPad, Mikelis 2026-10-10). Icon-only round chips in ONE row instead; the card header
   names the platform anyway. Phones (<=760, full-width column) keep the named chips. */
@media (min-width: 761px) and (max-width: 1024px) {
  .hero-chips { gap: 12px; padding: 0; max-width: calc(4 * 48px + 3 * 12px); margin: 0 auto; }   /* two rows, 4 + 3; gap 12 = the desktop chip gap (Mikelis, 2026-10-10) */
  .hero-chip { width: 48px; height: 48px; padding: 0; gap: 0; justify-content: center; border-radius: var(--r-round); }
  .hero-chip img { width: 24px; height: 24px; }
  .hero-chip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* label stays for screen readers */
}