/* ==========================================================================
   THE CSS PARTNER: Design System (tcp-design-system.css)
   --------------------------------------------------------------------------
   The reusable brand layer for thecsspartner.com. Tokens extracted from the
   official brand guidelines (The-CSS-Partner-Brand-Guidelines). Load this
   plus the Hanken Grotesk web font; every page inherits the brand from here.

   Palette: terracotta + sand + ink (warm, no blue, no gradients).
   Type: Hanken Grotesk. Spacing: 4px grid. Soft warm shadows.
   ========================================================================== */

/* Self-hosted brand fonts (A-19 perf2): replaces the render-blocking Google
   Fonts @import (est. -2.7s render-block on localized homes). Variable fonts
   (Hanken/Syne/DM Sans) => one woff2 per subset with a weight RANGE; Space Mono
   is static (400/700). Subsets: latin, latin-ext, greek (same subsets Google
   served => byte-identical glyphs, zero visual change). font-display: swap keeps
   text visible during load. Files: frontend/assets/fonts/*.woff2. The premium
   homepage maps --font-display/-body/-mono to Syne/DM Sans/Space Mono; inner
   pages key off --font-sans (Hanken). All families/weights below are used. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/hanken-grotesk-400-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/hanken-grotesk-400-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/syne-500-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/syne-500-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/syne-500-800-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/dm-sans-400-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/dm-sans-400-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Terracotta (brand primary) --- */
  --terracotta-700: #9C4222;
  --terracotta-600: #B14E2B;
  --terracotta-500: #C25A33;
  --terracotta-400: #D36B3F;
  --terracotta-300: #E0895E;
  --terracotta-200: #EFB89B;
  --terracotta-100: #F7DCCB;
  --terracotta-50:  #FBEEE4;

  /* --- Sand (warm neutrals / surfaces) --- */
  --sand-50:  #FBF7EE;
  --sand-100: #F6EDE0;
  --sand-200: #EFE7DA;
  --sand-300: #E4D8C6;
  --sand-400: #D6C7B0;

  /* --- Ink (text / dark surfaces) --- */
  --ink-900: #15120F;
  --ink-800: #241F1A;
  --ink-700: #3A332D;
  --ink-600: #564E45;
  --ink-500: #756B5F;
  --ink-400: #94897B;
  --white:   #FFFFFF;

  /* --- Status --- */
  /* Brand bans green site-wide (CLAUDE.md). The old "positive" green (#2F7D5B /
     #DCEFE5) fed --tg-positive in graphics.css and every .wow-obj / .pill / chip.
     Retarget it to terracotta so ALL pages (incl. the 26 localized homepages that
     use <main> not .lp) render warm, not mint. --terracotta-700 is AA on cream. */
  --positive-600: #9C4222;  /* = terracotta-700, AA on cream */
  --positive-100: #F7DCCB;  /* = terracotta-100, soft warm surface */
  --warning-500:  #D89A2E;
  --danger-500:   #CC3A24;

  /* --- Semantic surfaces / text / borders / actions --- */
  --bg-page:        var(--sand-100);
  --bg-page-warm:   var(--terracotta-50);
  --surface-card:   var(--sand-50);
  --surface-muted:  var(--sand-200);
  --surface-dark:   var(--ink-900);
  --surface-accent: var(--terracotta-600);

  --text-heading:   var(--ink-900);
  --text-body:      var(--ink-700);
  /* F-17: darkened for WCAG AA on cream. ink-500 (#756B5F) was only 4.5:1 and
     ink-400 (#94897B) only ~3:1; both failed/borderline. #5C5346 = 6.5:1 vs
     cream, still clearly lighter than body text (--ink-700, 10.7:1). */
  --text-muted:     #5C5346;
  --text-faint:     #5C5346;
  --text-on-dark:   var(--sand-50);
  --text-on-accent: #FFFFFF;
  /* C-01 (WCAG AA): terracotta-500 as a text/link colour is only 3.77:1 on
     cream / 4.02:1 on page cream, which fails. This token paints every <a> and
     blog-title link, so it must be the darker terracotta-700 (5.63:1 on cream,
     6.00:1 on page) to pass AA everywhere it lands. */
  --text-accent:    var(--terracotta-700);

  --border-subtle:  var(--sand-300);
  --border-strong:  var(--sand-400);
  --border-dark:    var(--ink-900);

  --action-primary:        var(--terracotta-500);
  --action-primary-hover:  var(--terracotta-600);
  --action-primary-active: var(--terracotta-700);
  --focus-ring:            var(--terracotta-400);

  /* --- Type --- */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display-2xl: 64px;
  --fs-display-xl:  52px;
  --fs-display-lg:  40px;
  --fs-display-md:  32px;
  --fs-heading:     24px;
  --fs-title:       20px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     13px;
  --fs-overline:    12px;

  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* --- Spacing (4px grid) --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-narrow: 760px;

  /* --- Radii --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Shadows (warm) --- */
  --shadow-xs: 0 1px 2px rgba(33, 22, 14, 0.06);
  --shadow-sm: 0 2px 6px rgba(33, 22, 14, 0.07);
  --shadow-card: 0 6px 20px rgba(33, 22, 14, 0.08);
  --shadow-lg: 0 16px 40px rgba(33, 22, 14, 0.12);
  --shadow-float: 0 24px 60px rgba(33, 22, 14, 0.16);
  --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* --- Motion --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ----------------------------------------------------------------------
     Legacy-token bridge.
     The landing pages were built against the original Gezar token names
     (--color-*, --font-*). Re-map them to the brand so existing markup
     adopts The CSS Partner identity without touching every rule.
     ---------------------------------------------------------------------- */
  --color-bg: var(--sand-100);
  /* A-31: --sand-200 (#EFE7DA) sat only ~7 rgb-points below cream, so the
     section alternation was invisible. Deepen the alt band to a clearly warmer
     sand so cream <-> alt-cream actually reads, while staying on-brand and
     premium (still a warm cream, not a grey). Contrast stays AA-safe: body text
     --color-text-muted #5C5346 = 5.9:1, ink-700 = 9.7:1. */
  --color-bg-alt: #EFE2CE;
  --color-text: var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-muted: #5C5346;  /* F-17: was ink-500 (4.5:1), now 6.5:1 on cream */
  /* F-21 (WCAG AA): terracotta-500 fails on buttons (white-on-bg 4.37:1, ghost
     text-on-cream 3.77:1). terracotta-600 = 5.26:1 (buttons) / 4.53:1 (ghost),
     both clear AA. One token change fixes every CTA + ghost button site-wide. */
  --color-accent: var(--terracotta-600);
  --color-accent-hover: var(--terracotta-700);
  /* F-17: terracotta-500 is only 3.77:1 on cream, so for accent-colored small
     body/table text use this darker terracotta (terracotta-700 = 5.63:1 AA). */
  --color-accent-text: var(--terracotta-700);
  --color-border: var(--sand-300);
  --color-dark: var(--ink-900);
  --color-light: var(--sand-50);

  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  /* --font-mono inherited above */

  --duration: var(--dur-base);
}

/* --------------------------------------------------------------------------
   Base element styles
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-snug);
}

a { color: var(--text-accent); }

img, svg { max-width: 100%; }

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

::selection {
  background: var(--terracotta-200);
  color: var(--ink-900);
}

/* F-20 merged :root layout tokens */
:root {
  /* F-20 consolidated layout tokens */
  --tcp-radius: 14px;
  --tcp-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 8px 24px rgba(26,26,26,0.06);
  --tcp-shadow-lg: 0 2px 6px rgba(26,26,26,0.05), 0 18px 48px rgba(26,26,26,0.10);
  --tcp-shadow-accent: 0 10px 34px rgba(194, 90, 51,0.18);
  --tcp-line: var(--color-border);
  --tcp-google-blue: #1a4ba0;
  --tcp-radius-sm: 10px;
  --section-y: clamp(56px, 7vw, 80px);
  --section-y-tight: clamp(40px, 5vw, 56px);
}

/* ==========================================================================
   F-20 CONSOLIDATED LAYOUT & COMPONENTS
   One container primitive, one section primitive. All page-type CSS that used
   to live in 6 per-page <style> blocks + FOOTER_NAV_CSS + WOW_CSS now lives
   here, once. Renamed: .tcp-sec / .lp-section -> .tcp-section ; .lp-container
   -> .tcp-container ; .tcp-narrow -> .tcp-container--narrow.
   ========================================================================== */

/* --- ONE container primitive --- */
.tcp-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
  box-sizing: border-box;
}
.tcp-container--narrow { max-width: var(--container-narrow); }

/* --- ONE section primitive (full-bleed bg, content inset via .tcp-container) --- */
.tcp-section { padding-block: var(--section-y); }
.tcp-section--alt { background: var(--color-bg-alt); }
.tcp-section--dark { background: var(--color-dark); color: var(--color-light); }
.tcp-section--dark h1, .tcp-section--dark h2, .tcp-section--dark h3 { color: var(--color-light); }
.tcp-section--dark p { color: rgba(250,248,245,0.84); }
.tcp-section--tight { padding-block: var(--section-y-tight); }

/* --- utilities (replace former inline styles) --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.u-center { text-align: center; }
.u-mx-auto { margin-inline: auto; }
.u-prose { max-width: var(--container-narrow); }

/* ---- consolidated component rules (deduped union) ---- */
.lp-header { border-bottom: 1px solid transparent; padding: 14px 0; position: sticky; top: 0; z-index: 30; background: rgba(248,245,240,0.82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); transition: box-shadow 0.2s, border-color 0.2s, background 0.2s; }
.lp-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-header__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.lp-header__wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.015em; color: var(--color-text); }
.lp-header__wordmark span { color: var(--color-accent); }
.lp-header__right { display: flex; align-items: center; gap: 14px; }
.lp-header__cta { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; background: var(--color-accent); color: var(--color-light); padding: 10px 20px; border-radius: 999px; border: 1px solid var(--color-accent); }
.tcp-breadcrumb { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-text-muted); padding: 20px 0 0; }
.tcp-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.tcp-breadcrumb a:hover { color: var(--color-accent); }
.cp { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 8vw, 96px); }
.cp__inner { max-width: 960px; margin: 0 auto; }
.cp__inner > p, .cp .cp__lead, .cp-sec > p, .cp-sec > ul, .cp h1, .cp__eyebrow, .cp-v1, .cp-sec > h2 { max-width: 720px; }
.cp-lead-graphic { margin: 0.5rem 0 2.4rem; }
.cp-lead-graphic .tcp-graphic, .cp-sec .tcp-graphic { margin-left: auto; margin-right: auto; }
.cp__hero { margin: 0 0 1.5rem; }
.cp__hero--split .cp-lead-graphic { margin: 1.5rem 0 0; }
.cp__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 1rem; }
.cp__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); display: inline-block; }
.cp h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 1.6rem; }
.cp-v1 { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 12px; display: inline-block; margin: 0 0 1.6rem; }
.cp-sec { margin: 2.4rem 0; }
.cp-sec h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 1.7rem); letter-spacing: -0.015em; margin: 0 0 0.9rem; }
.cp-sec p { font-size: 1.05rem; line-height: 1.75; color: var(--color-text-secondary); margin: 0 0 1.1rem; }
.cp-sec p strong { color: var(--color-text); }
.cp-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.cp-list li { position: relative; padding-left: 28px; margin-bottom: 10px; line-height: 1.65; color: var(--color-text-secondary); }
.cp-list li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; line-height: 19px; text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--color-accent); background: rgba(194,90,51,0.10); border-radius: 50%; }
.cp-table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.cp-table th { text-align: left; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); padding: 10px 14px; border-bottom: 2px solid var(--color-border); }
.cp-table td { padding: 11px 14px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.cp-table tbody tr:last-child td { border-bottom: 0; }
.cp-table td:last-child { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-accent-text); }
.cp-faq { margin-top: 1rem; }
.cp-faq__item { border-bottom: 1px solid var(--color-border); padding: 4px 0; }
.cp-faq__item summary { cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-text); padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; }
.cp-faq__item summary::-webkit-details-marker { display: none; }
.cp-faq__item summary::after { content: "+"; color: var(--color-accent); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.cp-faq__item[open] summary::after { content: "\2212"; }
.cp-faq__a p { font-size: 1.02rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 18px; }
.cp-cta { margin-top: 3rem; background: linear-gradient(150deg, #fbf9f5, #f1ebe1); border: 1px solid var(--color-border); border-radius: 18px; padding: clamp(32px, 5vw, 48px); text-align: center; }
.cp-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.cp-cta p { font-size: 1.04rem; color: var(--color-text-secondary); margin: 0 auto 1.6rem; max-width: 46ch; }
.cp-cta__guarantee { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-text-secondary); margin: 0 auto 1.2rem; max-width: 48ch; }
.cp-cta__guarantee svg { flex-shrink: 0; }
.cp-cta p.cp-cta__founder { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); border-radius: 999px; padding: 7px 16px; margin: 0 auto 1rem; max-width: 46ch; text-align: center; }
.cp-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cp-cta__alt { margin: 1rem 0 0; font-size: 0.92rem; }
.cp-cta__alt a { color: var(--color-text-secondary); text-decoration: underline; }
.cp-cta__alt a:hover { color: var(--color-accent); }
/* C-10: EU-ruling source citation link. Inherits colour so it reads as a subtle
   citation in prose and stays visually unchanged inside decorative EU seals. */
.eu-ruling-src { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.eu-ruling-src:hover { color: var(--color-accent); }
.cp-btn { font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-decoration: none; padding: 14px 28px; border-radius: 999px; border: 1px solid var(--color-accent); }
.cp-btn--primary { background: var(--color-accent); color: #fff; }
.cp-btn--ghost { background: transparent; color: var(--color-accent); border-color: var(--color-border); }
.lp-footer { border-top: 1px solid var(--color-border); padding: 32px 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); }
.lp-footer a { color: var(--color-text-muted); text-decoration: none; }
.lp-footer a:hover { color: var(--color-accent); }
.lp-footer__row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.cp--cont { padding-top: 0; }
.lp-nav { display: flex; align-items: center; }
.lp-nav__links { display: flex; align-items: center; gap: 28px; }
.lp-nav__links a { font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; text-decoration: none; color: var(--color-text-secondary); transition: color 0.15s; }
.lp-nav__links a:hover { color: var(--color-accent); }
.lp-langswitch { position: relative; }
.lp-langswitch__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 500; font-size: 0.86rem; color: var(--color-text-secondary); border: 1px solid var(--color-border); background: var(--color-light); padding: 7px 12px; border-radius: 999px; transition: border-color 0.15s, color 0.15s; }
.lp-langswitch__btn::-webkit-details-marker { display: none; }
.lp-langswitch__btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
.lp-langswitch__caret { transition: transform 0.18s; opacity: 0.7; }
.lp-langswitch[open] .lp-langswitch__caret { transform: rotate(180deg); }
.lp-langswitch__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px; background: var(--color-light); border: 1px solid var(--color-border); border-radius: var(--tcp-radius-sm, 10px); box-shadow: 0 12px 34px rgba(26,26,26,0.12); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 50; max-height: 70vh; overflow-y: auto; }
.lp-langswitch__opt { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-body); font-size: 0.9rem; text-decoration: none; color: var(--color-text-secondary); padding: 9px 12px; border-radius: 7px; transition: background 0.12s, color 0.12s; }
.lp-langswitch__opt:hover { background: var(--color-bg-alt); color: var(--color-accent); }
.lp-langswitch__opt.is-current { color: var(--color-accent); font-weight: 600; }
.lp-langswitch__opt.is-current::after { content: "\2713"; font-size: 0.82rem; }
.lp-burger { position: relative; display: none; }
.lp-burger__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); border: 1px solid var(--color-border); background: var(--color-light); width: 40px; height: 40px; border-radius: 999px; }
.lp-burger__btn::-webkit-details-marker { display: none; }
.lp-burger__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; background: var(--color-light); border: 1px solid var(--color-border); border-radius: var(--tcp-radius-sm, 10px); box-shadow: 0 12px 34px rgba(26,26,26,0.12); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 50; }
.lp-burger__menu a { font-family: var(--font-body); font-weight: 500; font-size: 0.96rem; text-decoration: none; color: var(--color-text-secondary); padding: 11px 12px; border-radius: 7px; }
.lp-burger__menu a:hover { background: var(--color-bg-alt); color: var(--color-accent); }
/* A-33: get-started CTA folded into the burger menu so the conversion path
   survives when the standalone header CTA is hidden on narrow phones. Rendered
   as the primary (terracotta) action, separated from the nav links above it. */
.lp-burger__cta { margin-top: 6px; text-align: center; background: var(--color-accent); color: var(--color-light) !important; font-weight: 600 !important; }
.lp-burger__cta:hover { background: var(--color-accent-hover) !important; color: var(--color-light) !important; }
.lp-footer-nav { border-top: 1px solid var(--color-border); padding: 22px 0; font-family: var(--font-body); }
.lp-footer-nav__row { width: 100%; max-width: var(--container-max, 1120px); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; }
.lp-footer-nav__countries { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; color: var(--color-text-secondary); }
.lp-footer-nav__countries:hover { color: var(--color-accent); }
.lp-footer-nav__langwrap { display: inline-flex; }
.wow-sec { margin: clamp(40px, 7vw, 80px) 0; }
.wow-sec > .tcp-container, .wow-statband > .tcp-container, .wow-roi-home .tcp-container {
      max-width: var(--container-max, 1120px); margin-left: auto; margin-right: auto;
      padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); box-sizing: border-box; }
.wow-sec, .wow-roi-home {
      padding-left: clamp(24px, 4vw, 40px); padding-right: clamp(24px, 4vw, 40px); box-sizing: border-box; }
.wow-eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 0.8rem; }
.wow-statband { background: var(--ink-900, #15120f); color: #f6ede0; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px); margin: 0; }
.wow-statband__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.wow-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 3rem); letter-spacing: -0.03em; color: #E0895E; line-height: 1; }
.wow-stat span { display: block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(246,237,224,0.78); margin-top: 8px; }
.wow-roi { background: var(--ink-900, #15120f); color: #f6ede0; border-radius: 22px; padding: clamp(28px, 5vw, 56px); text-align: center; }
.wow-roi .wow-eyebrow { color: #E0895E; }
.wow-roi__q { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -0.02em; margin: 0 0 1.4rem; color: #f6ede0; }
.wow-roi__nums { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch; margin: 0 0 1.2rem; }
.wow-roi__num { background: rgba(246,237,224,0.06); border: 1px solid rgba(246,237,224,0.12); border-radius: 14px; padding: 18px 22px; min-width: 150px; }
.wow-roi__num b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); color: #E0895E; }
.wow-roi__num span { font-size: 0.82rem; color: rgba(246,237,224,0.72); }
.wow-roi__x { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -0.03em; color: #f6ede0; margin: 0.4rem 0; }
.wow-roi__x b { color: #E0895E; }
.wow-roi__note { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(246,237,224,0.5); margin: 0.6rem 0 0; }
.wow-eu { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; background: var(--surface-card, #fbf9f5); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 16px; padding: clamp(22px, 3vw, 32px); }
.wow-eu__seal { width: 124px; height: 124px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #1a4ba0, #0d2c61); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); box-shadow: var(--shadow-lg); border: 3px solid rgba(255,255,255,0.18); flex-shrink: 0; }
.wow-eu__seal b { font-size: 1.1rem; }
.wow-eu__seal span { font-size: 0.62rem; }
.wow-eu__case { font-family: var(--font-mono); font-size: 0.92rem; color: var(--color-text); font-weight: 600; }
.wow-eu__auth { font-size: 0.9rem; color: var(--color-text-secondary); margin: 2px 0; }
.wow-eu__line { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: -0.015em; color: var(--color-text); margin: 8px 0 4px; }
.wow-eu__verify { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-accent-text); }
.wow-proof { text-align: center; max-width: 640px; margin: 0 auto; }
.wow-proof__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; margin: 0.4rem 0 0.7rem; }
.wow-proof__b { font-size: 1.08rem; line-height: 1.65; color: var(--color-text-secondary); }
.wow-obj__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; margin: 0.4rem 0 1.4rem; }
.wow-obj__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.wow-obj__item { display: flex; align-items: center; gap: 11px; background: var(--positive-100, #DCEFE5); border-radius: 12px; padding: 15px 18px; font-size: 0.98rem; color: var(--ink-800, #241f1a); }
.wow-obj__check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--positive-600, #2F7D5B); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.wow-loss { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.6rem); letter-spacing: -0.015em; color: var(--color-accent-text); text-align: center; max-width: 640px; margin: 0 auto; line-height: 1.3; }
.wow-risk { display: inline-flex; align-items: center; gap: 12px; background: var(--positive-100, #DCEFE5); border: 1px solid var(--positive-600, #2F7D5B); border-radius: 999px; padding: 12px 24px; font-family: var(--font-mono); font-size: 0.9rem; color: var(--positive-600, #2F7D5B); font-weight: 600; }
.lp-header__badge { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.tcp-section--dark h2, .tcp-section--dark h3 { color: var(--color-light); }
.tcp-section--dark p { color: rgba(250,248,245,0.84); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 0.9rem; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); display: inline-block; }
.tcp-section--dark .eyebrow { color: #e8a48f; }
.tcp-section--dark .eyebrow::before { background: #e8a48f; }
.tcp-hero { padding: 64px 0 56px; }
.tcp-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1.1rem; max-width: 18ch; }
.tcp-hero p { font-size: 1.1rem; line-height: 1.65; color: var(--color-text-secondary); max-width: 620px; }
.tcp-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 1.2rem; }
.tcp-status--live { background: var(--positive-100); color: var(--positive-600); }
.tcp-status--launch { background: var(--terracotta-100); color: var(--terracotta-700); }
.tcp-section h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 1rem; }
.tcp-section h3 { font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.32rem); margin: 0 0 0.5rem; }
.tcp-section p { font-size: 1.04rem; line-height: 1.7; color: var(--color-text-secondary); max-width: 680px; }
.tcp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 1.8rem; }
.tcp-step { background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-xs); }
.tcp-step__n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-accent-text); }
.tcp-step__icon { margin-bottom: 12px; }
.tcp-guarantee { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.84rem; color: var(--color-text); margin: 1.4rem 0; }
.tcp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 1.4rem; }
.tcp-btn { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; text-decoration: none; padding: 13px 26px; border-radius: 999px; display: inline-block; transition: transform 0.1s, box-shadow 0.15s, background 0.15s; }
.tcp-btn--primary { background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); }
.tcp-btn--primary:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.tcp-btn--ghost { background: transparent; color: var(--color-accent); border: 1px solid var(--color-border); }
.tcp-or { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); }
.tcp-offer-note { background: var(--surface-card); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); padding: 24px; }
.tcp-explain { margin-top: 2rem; background: var(--surface-card); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); padding: 24px 26px; }
.tcp-explain h3 { margin: 0 0 0.5rem; }
.tcp-explain p:last-child { margin-bottom: 0; }
.tcp-hero__status { font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.6; color: var(--color-text); max-width: 680px; margin: 0.4rem 0 0; }
.tcp-hero__angle { font-size: 1.02rem; line-height: 1.65; color: var(--color-text-secondary); max-width: 680px; margin: 0.9rem 0 0; }
.tcp-local-example { margin: 1.6rem 0 0; background: var(--terracotta-50, #FBEEE4); border: 1px solid var(--terracotta-200, #EFB89B); border-radius: var(--radius-md); padding: 22px 26px; }
.tcp-local-example .eyebrow { color: var(--color-accent-text); margin: 0 0 0.5rem; }
.tcp-local-example p:last-child { font-size: 1.08rem; line-height: 1.7; color: var(--color-text); margin: 0; max-width: 680px; }
.tcp-faq__item { border-bottom: 1px solid var(--color-border); }
.tcp-faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-text); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tcp-faq__icon { color: var(--color-accent); font-weight: 400; font-size: 1.4rem; flex-shrink: 0; }
.tcp-faq__a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.tcp-faq__item.is-open .tcp-faq__a { max-height: 600px; }
.tcp-faq__item.is-open .tcp-faq__icon { transform: rotate(45deg); }
.tcp-faq__a p { padding: 0 0 20px; margin: 0; max-width: 700px; }
.sc { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 8vw, 96px); }
.sc__inner { max-width: 860px; margin: 0 auto; }
.sc__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 1rem; }
.sc__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); display: inline-block; }
.sc h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 1.2rem; }
.sc__intro { font-size: 1.08rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 2rem; max-width: 60ch; }
.sc-widget { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; background: linear-gradient(150deg, #fbf9f5, #f1ebe1); border: 1px solid var(--color-border); border-radius: 20px; padding: clamp(24px, 4vw, 40px); }
.sc-input label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 12px; color: var(--color-text); }
.sc-input__field { position: relative; display: flex; align-items: center; background: #fff; border: 2px solid var(--color-border); border-radius: 12px; padding: 0 16px; transition: border-color var(--duration); }
.sc-input__field:focus-within { border-color: var(--color-accent); }
.sc-input__cur { font-family: var(--font-mono); font-size: 1.1rem; color: var(--color-text-muted); font-weight: 600; }
.sc-input__field input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--color-text); padding: 16px 10px; width: 100%; min-width: 0; }
.sc-input__helper { font-size: 0.86rem; line-height: 1.55; color: var(--color-text-muted); margin: 12px 0 0; }
.sc-input__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.sc-chip { font-family: var(--font-mono); font-size: 0.78rem; background: rgba(194,90,51,0.08); color: var(--color-accent); border: 1px solid rgba(194,90,51,0.18); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.sc-chip:hover { background: rgba(194,90,51,0.16); }
.sc-result { background: var(--ink-900, #15120f); color: #f6ede0; border-radius: 14px; padding: clamp(20px, 3vw, 28px); }
.sc-result__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(246,237,224,0.12); }
.sc-result__row:last-of-type { border-bottom: 0; }
.sc-result__label { font-size: 0.92rem; color: rgba(246,237,224,0.72); line-height: 1.4; }
.sc-result__val { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.sc-result__row--net .sc-result__label { color: #f6ede0; font-weight: 600; }
.sc-result__row--net .sc-result__val { color: #E0895E; font-size: 1.5rem; }
.sc-result__row--sub .sc-result__val { color: rgba(246,237,224,0.6); font-weight: 500; font-size: 1rem; }
.sc-result__clicks { margin: 16px 0 0; padding: 14px 16px; background: rgba(224,137,94,0.14); border-radius: 10px; font-size: 0.95rem; line-height: 1.5; }
.sc-result__clicks b { color: #E0895E; }
.sc-result__roi { margin: 12px 0 0; font-size: 0.98rem; line-height: 1.5; font-weight: 600; }
.sc-result__roi b { color: #E0895E; }
.sc-result__note { font-size: 0.82rem; line-height: 1.5; color: rgba(246,237,224,0.6); margin: 14px 0 0; }
.sc-result__empty { font-size: 0.95rem; line-height: 1.55; color: rgba(246,237,224,0.7); }
.sc-helper { font-size: 0.86rem; line-height: 1.6; color: var(--color-text-muted); margin: 18px 0 0; max-width: 70ch; }
.sc-how { margin: 3rem 0 0; }
.sc-how h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 1.7rem); letter-spacing: -0.015em; margin: 0 0 1.4rem; }
.sc-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sc-how__item { background: var(--surface-card, #fbf9f5); border: 1px solid var(--color-border); border-radius: 14px; padding: 22px; }
.sc-how__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0 0 8px; color: var(--color-text); }
.sc-how__item p { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.sc-reassure { margin: 2.4rem 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--color-text-secondary); padding: 20px 24px; border-left: 3px solid var(--color-accent); background: rgba(194,90,51,0.05); border-radius: 0 12px 12px 0; }
.hub { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.hub__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 1rem; }
.hub__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); display: inline-block; }
.hub h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 1rem; max-width: 20ch; }
.hub__intro { font-size: 1.08rem; line-height: 1.7; color: var(--color-text-secondary); max-width: 680px; margin: 0 0 2.4rem; }
.hub__group { margin-top: 2.6rem; }
.hub__group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.hub__group-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; margin: 0; }
.hub__dot { width: 9px; height: 9px; border-radius: 50%; }
.hub__dot--live { background: var(--terracotta-500); box-shadow: 0 0 0 3px rgba(194,90,51,0.16); }
.hub__dot--soon { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(194,90,51,0.16); }
.hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 18px; }
.hub__grid a { font-family: var(--font-body); font-size: 0.96rem; line-height: 2; text-decoration: none; color: var(--color-text-secondary); border-bottom: 1px solid transparent; }
.hub__grid a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.cp__date { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 1.6rem; }
.cp__lead { font-size: 1.12rem; line-height: 1.7; color: var(--color-text); margin: 0 0 2rem; }
.cp-sec a { color: var(--color-accent); }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 2rem 0 0; }
.blog-card { display: flex; flex-direction: column; background: var(--surface-card, #fbf9f5); border: 1px solid var(--color-border); border-radius: 16px; padding: 24px; text-decoration: none; transition: border-color var(--duration), transform var(--duration); }
.blog-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.blog-card__date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-text-muted); margin: 0 0 10px; }
.blog-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--color-text); margin: 0 0 10px; }
.blog-card__desc { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 14px; flex: 1; }
.blog-card__more { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-accent-text); }
body { background-color: var(--color-bg); }
.lp-grain {
      position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.025;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
.lp { position: relative; z-index: 1; }
.lp-header.is-scrolled {
      border-bottom-color: var(--tcp-line);
      box-shadow: 0 6px 24px rgba(26,26,26,0.06);
      background: rgba(248,245,240,0.92);
    }
.lp-header__logo img { height: 26px; width: auto; }
.lp-header__cta:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: var(--tcp-shadow-accent); transform: translateY(-1px); }
.tcp-section h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 1rem; }
.tcp-section h3 { font-family: var(--font-display); font-size: clamp(1.12rem, 2.4vw, 1.4rem); margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.tcp-section p { font-size: 1.04rem; line-height: 1.7; color: var(--color-text-secondary); max-width: 660px; }
.section-head { max-width: 640px; margin-bottom: 2.6rem; }
.section-head p { margin-top: 0.6rem; }
.lp-hero { padding: 76px 0 84px; position: relative; overflow: hidden; }
.lp-hero::after {
      content: ""; position: absolute; top: -160px; right: -160px; width: 520px; height: 520px;
      background: radial-gradient(circle, rgba(194, 90, 51,0.10), rgba(194, 90, 51,0) 70%);
      pointer-events: none; z-index: 0;
    }
.lp-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.lp-hero h1 {
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(1.95rem, 3.9vw, 2.85rem); line-height: 1.02; letter-spacing: -0.025em;
      margin: 0 0 1.3rem; max-width: 16ch;
    }
.lp-hero h1 .accent { color: var(--color-accent); }
.lp-hero__sub { font-family: var(--font-body); font-size: clamp(1.04rem, 1.6vw, 1.18rem); line-height: 1.62; color: var(--color-text-secondary); max-width: 50ch; margin: 0 0 2rem; }
.lp-hero__cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lp-hero__note { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-text-muted); margin-top: 1.7rem; line-height: 1.6; max-width: 52ch; padding-left: 16px; border-left: 2px solid rgba(194, 90, 51,0.4); }
.lp-hero__reg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--tcp-line); background: var(--color-light); padding: 8px 14px; border-radius: 999px; margin-bottom: 1.5rem; box-shadow: var(--tcp-shadow); }
.lp-hero__reg b { color: var(--color-accent); }
.lp-hero__reg .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px rgba(194, 90, 51,0.16); }
.lp-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      font-family: var(--font-body); font-weight: 600;
      text-decoration: none; border: 1px solid var(--color-accent); cursor: pointer;
      padding: 14px 26px; font-size: 1rem; border-radius: 999px;
      transition: background-color 0.16s, color 0.16s, transform 0.12s, box-shadow 0.16s;
    }
.lp-btn:active { transform: translateY(1px); }
.lp-btn--primary { background-color: var(--color-accent); color: var(--color-light); box-shadow: var(--tcp-shadow-accent); }
.lp-btn--primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(194, 90, 51,0.26); }
.lp-btn--ghost { background: var(--color-light); color: var(--color-accent); border-color: var(--tcp-line); box-shadow: var(--tcp-shadow); }
.lp-btn--ghost:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--tcp-shadow-lg); }
.lp-btn--large { padding: 17px 34px; font-size: 1.06rem; }
.lp-btn--block { display: flex; width: 100%; }
.lp-btn--onlight { background: transparent; border-color: rgba(250,248,245,0.4); color: var(--color-light); box-shadow: none; }
.lp-btn--onlight:hover { background: var(--color-light); color: var(--color-text); border-color: var(--color-light); transform: translateY(-2px); }
.hero-visual { display: grid; gap: 18px; }
.biddingcard { border: 1px solid var(--tcp-line); background: var(--color-light); padding: 24px 24px 20px; border-radius: var(--tcp-radius); box-shadow: var(--tcp-shadow-lg); }
.biddingcard__title { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 20px; }
.bar { margin-bottom: 20px; }
.bar:last-of-type { margin-bottom: 0; }
.bar__label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--color-text); margin-bottom: 8px; }
.bar__label .cpc { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; color: var(--color-text-muted); }
.bar__track { height: 26px; background: #efe8db; border: 1px solid var(--tcp-line); border-radius: 999px; position: relative; overflow: hidden; }
.bar__fill { height: 100%; border-radius: 999px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; min-width: 60px; }
.bar__fill--muted { width: 68%; background: #cdbfa9; }
.bar__fill--accent { width: 100%; background: linear-gradient(90deg, var(--color-accent), #D36B3F); }
.bar__tag { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.96); letter-spacing: 0.02em; }
/* C-01 (WCAG AA): the de-emphasized "before" value on the muted (By Google) bar
   was #8a8273 on the #cdbfa9 fill = only 2.10:1. #504a3f = 4.86:1, still clearly
   muted against the bright accent bar but readable. */
.bar__fill--muted .bar__tag { color: #504a3f; }
.biddingcard__foot { font-family: var(--font-body); font-size: 0.85rem; color: var(--color-text-secondary); margin: 20px 0 0; line-height: 1.55; padding-top: 16px; border-top: 1px solid var(--tcp-line); }
.biddingcard__foot b { color: var(--color-accent); font-weight: 700; }
.serpcard { border: 1px solid var(--tcp-line); background: #fff; padding: 16px 18px; border-radius: var(--tcp-radius); box-shadow: var(--tcp-shadow); }
.serpcard__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.72rem; color: #5f6368; margin-bottom: 14px; }
.serpcard__sponsored { font-weight: 700; color: #202124; }
.serpcard__row { display: flex; gap: 14px; align-items: flex-start; }
.serpcard__thumb { width: 60px; height: 60px; flex: 0 0 60px; background: linear-gradient(135deg, #f4efe7, #e6dfd2); border-radius: var(--tcp-radius-sm); display: flex; align-items: center; justify-content: center; }
.serpcard__thumb svg { width: 30px; height: 30px; }
.serpcard__title { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--tcp-google-blue); line-height: 1.3; margin: 0 0 4px; }
.serpcard__price { font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; color: #202124; }
.serpcard__rating { font-family: var(--font-body); font-size: 0.76rem; color: #5f6368; margin-top: 4px; }
.serpcard__stars { color: #e8a33d; letter-spacing: -1px; }
.serpcard__store { font-family: var(--font-body); font-size: 0.8rem; color: #5f6368; margin-top: 4px; }
.serpcard__by { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-secondary); margin-top: 8px; background: rgba(194, 90, 51,0.08); padding: 3px 10px; border-radius: 999px; }
.serpcard__by b { color: var(--color-accent); }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.numbers__item { background: var(--color-bg); border: 1px solid var(--tcp-line); border-radius: var(--tcp-radius); padding: 30px 24px; text-align: left; box-shadow: var(--tcp-shadow); position: relative; }
.numbers__item::before { content: ""; position: absolute; top: 24px; left: 0; width: 3px; height: 26px; background: var(--color-border); }
.numbers__icon { width: 24px; height: 24px; display: block; margin-bottom: 14px; }
.numbers__value { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.15rem); color: var(--color-text); line-height: 1; letter-spacing: -0.01em; }
.numbers__label { font-family: var(--font-body); font-size: 0.86rem; color: var(--color-text-muted); margin-top: 12px; line-height: 1.4; }
.numbers__item--key { background: linear-gradient(150deg, #fbf3ef, #f7ece6); border-color: rgba(194, 90, 51,0.28); }
.numbers__item--key::before { background: var(--color-accent); }
.numbers__item--key .numbers__value { color: var(--color-accent); }
.numbers__item--key .numbers__label { color: var(--color-text-secondary); }
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.usp { border: 1px solid var(--tcp-line); background: var(--color-light); padding: 28px 26px; border-radius: var(--tcp-radius); box-shadow: var(--tcp-shadow); position: relative; transition: transform 0.16s, box-shadow 0.16s; overflow: hidden; }
.usp:hover { transform: translateY(-3px); box-shadow: var(--tcp-shadow-lg); }
.usp:hover::before { background: linear-gradient(90deg, var(--color-accent), transparent 75%); }
.usp::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-border); transition: background 0.16s; }
.usp__icon { width: 42px; height: 42px; border-radius: var(--tcp-radius-sm); background: rgba(194, 90, 51,0.10); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.usp__icon svg { width: 22px; height: 22px; }
.usp__num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--color-text-muted); position: absolute; top: 24px; right: 24px; }
.usp h3 { font-size: 1.1rem; margin: 0 0 9px; }
.usp p { font-size: 0.95rem; margin: 0; max-width: none; line-height: 1.6; }
.usp--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: center; background: var(--color-bg); border-color: rgba(194, 90, 51,0.28); box-shadow: var(--tcp-shadow-lg); }
.usp--wide::before { height: 4px; background: var(--color-accent); }
.usp__photo { width: 132px; height: 132px; object-fit: cover; border-radius: var(--tcp-radius); border: 1px solid var(--tcp-line); }
.usp__featured-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta-700, #9C4222); background: rgba(194, 90, 51,0.10); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.usp__sig { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-text-muted); margin-top: 12px; }
.realproof { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.realproof__card { background: linear-gradient(160deg, #fbf9f5, #f3eee5); border: 1px solid var(--tcp-line); padding: 30px; border-radius: var(--tcp-radius); box-shadow: var(--tcp-shadow-lg); }
.realproof__serp { font-family: var(--font-body); background: #fff; border: 1px solid var(--tcp-line); border-radius: var(--tcp-radius-sm); padding: 20px; box-shadow: var(--tcp-shadow); }
.realproof__sponsored { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.74rem; color: #5f6368; margin-bottom: 14px; }
.realproof__sponsored b { color: #202124; }
.realproof__product { display: flex; gap: 16px; align-items: flex-start; }
.realproof__thumb { width: 64px; height: 64px; flex: 0 0 64px; background: linear-gradient(135deg, #f4efe7, #e6dfd2); border-radius: var(--tcp-radius-sm); display: flex; align-items: center; justify-content: center; }
.realproof__thumb svg { width: 32px; height: 32px; }
.realproof__ptitle { font-family: var(--font-body); font-weight: 500; color: var(--tcp-google-blue); font-size: 1rem; line-height: 1.3; margin: 0 0 4px; }
.realproof__pprice { font-weight: 700; color: #202124; }
.realproof__rating { font-family: var(--font-body); font-size: 0.78rem; color: #5f6368; margin-top: 4px; }
.realproof__stars { color: #e8a33d; letter-spacing: -1px; }
.realproof__by { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--color-text-secondary); margin-top: 8px; background: rgba(194, 90, 51,0.08); padding: 4px 10px; border-radius: 999px; }
.realproof__by b { color: var(--color-accent); }
.realproof__caption { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-text-muted); margin-top: 18px; line-height: 1.6; text-align: center; }
.calc {
      background: var(--color-light); border: 1px solid var(--tcp-line);
      padding: 30px 28px; max-width: 600px; border-radius: var(--tcp-radius); box-shadow: var(--tcp-shadow-lg);
    }
.calc label { display: block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--color-text-muted); margin-bottom: 9px; }
.calc__input-wrap { display: flex; align-items: center; border: 1px solid var(--tcp-line); background: var(--color-bg); border-radius: var(--tcp-radius-sm); overflow: hidden; }
.calc__prefix { padding: 0 14px; font-family: var(--font-mono); color: var(--color-text-muted); border-right: 1px solid var(--tcp-line); align-self: stretch; display: flex; align-items: center; background: var(--color-bg-alt); }
.calc input[type="number"] { flex: 1; border: 0; background: transparent; padding: 14px 14px; font-family: var(--font-body); font-size: 1.12rem; color: var(--color-text); outline: none; -moz-appearance: textfield; appearance: textfield; }
.calc input[type="range"] { width: 100%; margin-top: 16px; accent-color: var(--color-accent); }
.calc__out { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--tcp-line); }
.calc__out-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; }
.calc__out-label { font-family: var(--font-body); color: var(--color-text-secondary); }
.calc__out-value { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--color-accent); }
.calc__assumption { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); margin-top: 16px; line-height: 1.6; }
.offer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
.offer-card { border: 1px solid var(--tcp-line); background: var(--color-light); padding: 32px 30px; position: relative; border-radius: var(--tcp-radius); box-shadow: var(--tcp-shadow); display: flex; flex-direction: column; }
.offer-card--alt { justify-content: center; }
.offer-card--primary { border: 2px solid var(--color-accent); box-shadow: var(--tcp-shadow-lg); }
.offer-card__badge { position: absolute; top: -13px; left: 30px; background: var(--color-accent); color: var(--color-light); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; box-shadow: var(--tcp-shadow-accent); }
.offer-card__name { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin: 6px 0 10px; }
.offer-card__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1; letter-spacing: -0.02em; }
.offer-card__price small { font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); font-family: var(--font-body); }
.offer-card__billing { font-family: var(--font-mono); font-size: 0.76rem; color: var(--color-text-muted); margin: 10px 0 20px; line-height: 1.6; }
.offer-card__list { list-style: none; padding: 0; margin: 0 0 24px; }
.offer-card__list li { position: relative; padding-left: 28px; margin-bottom: 12px; line-height: 1.5; font-size: 0.96rem; color: var(--color-text-secondary); }
.offer-card__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--color-accent); background: rgba(194, 90, 51,0.10); border-radius: 50%; }
.offer-card__micro { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); margin-top: 14px; line-height: 1.6; }
.guarantee { border: 1px solid rgba(194, 90, 51,0.3); background: rgba(194, 90, 51,0.05); padding: 22px 24px; margin-bottom: 26px; border-radius: var(--tcp-radius); display: flex; gap: 16px; align-items: flex-start; }
.guarantee__shield { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); color: var(--color-light); display: flex; align-items: center; justify-content: center; }
.guarantee__shield svg { width: 22px; height: 22px; }
.guarantee strong { color: var(--color-accent); }
.guarantee p { margin: 0; max-width: none; }
.guarantee__fine { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); margin-top: 10px; line-height: 1.6; }
.founder-counter { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text); margin: 16px 0 0; }
.founder-counter strong { color: var(--color-accent); }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 1.8rem; }
.access-box { border: 1px solid rgba(250,248,245,0.14); background: rgba(250,248,245,0.04); padding: 26px; border-radius: var(--tcp-radius); }
.access-box h3 { font-size: 1.02rem; margin-bottom: 14px; }
.access-box ul { list-style: none; padding: 0; margin: 0; }
.access-box li { padding-left: 26px; position: relative; margin-bottom: 10px; line-height: 1.5; font-size: 0.94rem; color: rgba(250,248,245,0.82); }
.access-box--yes li::before { content: "\2713"; position: absolute; left: 0; color: var(--terracotta-300); font-weight: 700; }
.access-box--no li::before { content: "\00d7"; position: absolute; left: 0; color: rgba(250,248,245,0.5); font-weight: 700; }
.nochange { list-style: none; padding: 0; margin: 1.4rem 0 0; max-width: 680px; }
.nochange li { position: relative; padding-left: 30px; margin-bottom: 12px; line-height: 1.6; color: var(--color-text-secondary); }
.nochange li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--color-accent); background: rgba(194, 90, 51,0.10); border-radius: 50%; }
.how-steps { list-style: none; padding: 0; margin: 1.6rem 0 0; max-width: 720px; display: grid; gap: 14px; }
.how-steps li { display: flex; gap: 16px; align-items: flex-start; }
.how-steps__icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--tcp-radius-sm); background: rgba(194, 90, 51,0.10); display: flex; align-items: center; justify-content: center; }
.how-steps__icon img { width: 22px; height: 22px; display: block; }
.how-steps__text { line-height: 1.65; color: var(--color-text-secondary); padding-top: 2px; }
.how-steps__text strong { color: var(--color-text); }
.faq { border: 1px solid var(--tcp-line); border-radius: var(--tcp-radius); background: var(--color-light); padding: 4px 24px; box-shadow: var(--tcp-shadow); }
.faq details { border-bottom: 1px solid var(--tcp-line); padding: 18px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); font-weight: 700; font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 14px 0 0; }
.finalcta { text-align: center; }
.finalcta__inner { background: linear-gradient(150deg, #fbf9f5, #f1ebe1); border: 1px solid var(--tcp-line); border-radius: 22px; padding: 64px 32px; box-shadow: var(--tcp-shadow-lg); position: relative; overflow: hidden; }
.finalcta__inner::before { content: ""; position: absolute; top: -120px; right: -100px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(194, 90, 51,0.12), transparent 70%); pointer-events: none; }
.finalcta h2 { max-width: 20ch; margin-left: auto; margin-right: auto; position: relative; }
.finalcta p { margin-left: auto; margin-right: auto; position: relative; }
.finalcta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 2rem; position: relative; }
.center { text-align: center; }
.mt-s { margin-top: 1rem; }
.lead-cta { margin-top: 2rem; }

/* ---- responsive @media / @keyframes (all kept, deduped) ---- */
@media (min-width: 980px) { .cp-sec .tcp-graphic { max-width: 880px; } }
@media (min-width: 980px) {
      .cp__hero--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
      .cp__hero--split .cp__hero-text { max-width: none; }
      .cp__hero--split .cp-lead-graphic { margin: 0; }
      .cp__hero--split .cp-lead-graphic .tcp-graphic { margin: 0; max-width: 100%; }
    }
@media (max-width: 860px) { .lp-nav { display: none; } }
@media (max-width: 860px) { .lp-burger { display: inline-block; } }
/* A-33: below 560px the header row (logo + language switcher + standalone CTA +
   burger) overflowed the viewport on long-nav markets (fr/bg/el/mk pushed the
   burger ~10-130px off-screen and forced a horizontal scrollbar on every page).
   Hide the standalone CTA here; the get-started action lives in the burger menu
   (.lp-burger__cta) from 560px down, so no conversion path is lost, and the row
   (logo + switcher + burger) fits at any width down to 320px, any nav length. */
@media (max-width: 560px) { .lp-header__cta { display: none; } }
@media (min-width: 561px) { .lp-burger__cta { display: none; } }
/* A-33: on very narrow phones (<=400px) the logo + language switcher + burger can
   still exceed the viewport on the longest endonyms (mk "Македонски", bg). Tighten
   the header gaps and cap the switcher label with an ellipsis so the row fits at
   any width down to 320px for any language. The full endonym stays in the button's
   aria-label (a11y intact) and in the dropdown, so nothing is lost. */
@media (max-width: 400px) {
  .lp-header__inner { gap: 10px; padding-inline: 16px; }
  .lp-header__right { gap: 8px; }
  .lp-langswitch__btn { padding-inline: 9px; max-width: 30vw; }
  .lp-langswitch__btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}
@media (min-width: 768px) { .lp-footer-nav__row { padding: 0 40px; } }
@media (max-width: 720px) { .wow-statband__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; } }
@media (max-width: 620px) { .wow-eu { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .lp-header__badge { display: none; } }
@media (max-width: 720px) { .sc-widget { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .sc-how__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .blog-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) {
      .tcp-container { padding-left: 40px; padding-right: 40px; }
    }
@media (max-width: 720px) { .lp-header__badge { display: none; } }
@media (max-width: 940px) { .lp-hero__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 760px) { .numbers { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 920px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .usp-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .usp--wide { grid-template-columns: 1fr; gap: 18px; text-align: center; } }
@media (max-width: 600px) { .usp__photo { margin: 0 auto; } }
@media (max-width: 820px) { .realproof { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 820px) { .offer-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .access-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
      .lp-btn, .usp, .lp-header__cta { transition: none; }
      .lp-btn:hover, .usp:hover, .lp-header__cta:hover { transform: none; }
    }

/* F-20 utilities replacing former page-layout inline styles */
.lp-footer__gezar { color: inherit; }
.gtm-hidden { display: none; visibility: hidden; }
.tcp-mt-sm { margin-top: 1.1rem; }
.wow-risk-wrap { text-align: center; margin-top: 1.6rem; }

/* F-20 homepage classes replacing former inline styles */
.home-proof__inner { max-width: 920px; margin-inline: auto; text-align: center; }
.home-proof__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.home-proof__p { font-size: 1.05rem; line-height: 1.7; color: var(--color-text-secondary); max-width: 60ch; margin: 0 auto 1.8rem; }
.numbers__note { font-family: var(--font-body); font-size: 0.92rem; color: var(--color-text-muted); margin: 1.6rem auto 0; max-width: 60ch; line-height: 1.6; text-align: center; }
.eyebrow--center { justify-content: center; }
.nochange { margin-top: 1.2rem; }
.how-steps { margin-top: 1.6rem; }
.faq { margin-top: 1.4rem; max-width: 760px; }

/* F-20 static-page components (contact/terms/privacy/velkommen) + brand grain */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body > * { position: relative; z-index: 1; }
@media (min-width: 768px) { .tcp-container { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 720px) { .lp-header__badge { display: none; } }
.doc { padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); }
.doc__inner { max-width: 760px; margin: 0 auto; }
.doc__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 1rem; }
.doc__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); display: inline-block; }
.doc h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 1rem; }
.doc__lead { font-size: 1.08rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 2.4rem; max-width: 56ch; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border: 1px solid var(--tcp-line); background: var(--color-light); border-radius: var(--tcp-radius); box-shadow: var(--tcp-shadow); padding: 24px 26px; }
.contact-card__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 8px; }
.contact-card__value { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0; }
.contact-card__value a { color: var(--color-text); text-decoration: none; }
.contact-card__value a:hover { color: var(--color-accent); }
.contact-card--cta { grid-column: 1 / -1; background: linear-gradient(150deg, #FBEEE4, #F6EDE0); border-color: rgba(194,90,51,0.28); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.contact-card--cta p { margin: 0; font-size: 1rem; color: var(--color-text-secondary); }
.contact-card--cta strong { color: var(--color-text); }
.contact-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2.2rem; line-height: 1.7; }
@media (max-width: 860px) { .lp-nav { display: none; } }
@media (max-width: 860px) { .lp-burger { display: inline-block; } }
@media (min-width: 768px) { .lp-footer-nav__row { padding: 0 40px; } }
.doc h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 0.8rem; }
.doc__meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 2.6rem; }
.doc h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.6rem); letter-spacing: -0.015em; margin: 2.6rem 0 0.9rem; }
.doc p { font-size: 1.02rem; line-height: 1.75; color: var(--color-text-secondary); margin: 0 0 1.1rem; }
.doc ul { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.doc li { position: relative; padding-left: 26px; margin-bottom: 0.65rem; line-height: 1.65; color: var(--color-text-secondary); }
.doc li::before { content: ""; position: absolute; left: 4px; top: 0.7rem; width: 7px; height: 7px; background: var(--color-accent); border-radius: 50%; }
.doc a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.doc strong { color: var(--color-text); }
.doc h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 1.8rem 0 0.6rem; }
.doc__card { border: 1px solid var(--tcp-line); background: var(--color-light); border-radius: var(--tcp-radius); box-shadow: var(--tcp-shadow); padding: 22px 24px; margin: 1.4rem 0; }
.doc__table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; border: 1px solid var(--tcp-line); border-radius: var(--tcp-radius); overflow: hidden; }
.doc__table th { text-align: left; padding: 12px 16px; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-bg-alt); border-bottom: 1px solid var(--tcp-line); }
.doc__table td { padding: 12px 16px; border-bottom: 1px solid var(--tcp-line); font-size: 0.95rem; color: var(--color-text-secondary); }
.doc__table tr:last-child td { border-bottom: 0; }
.ob-container {
      width: 100%;
      max-width: 760px;
      margin-inline: auto;
      padding-inline: 24px;
    }
@media (min-width: 768px) { .ob-container { padding-inline: 40px; } }
.ob-header {
      border-bottom: 1px solid var(--tcp-line);
      padding: 14px 0;
      background: rgba(248,245,240,0.86);
      backdrop-filter: saturate(160%) blur(12px);
      -webkit-backdrop-filter: saturate(160%) blur(12px);
      position: sticky; top: 0; z-index: 30;
    }
.ob-header__inner {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
    }
.ob-header__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.ob-header__logo img { height: 26px; width: auto; display: block; }
.ob-header__wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.015em; color: var(--color-text); }
.ob-header__wordmark span { color: var(--color-accent); }
.ob-header__badge { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
@media (max-width: 560px) { .ob-header__badge { display: none; } }
.ob-main {
      padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
    }
.ob-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-accent);
      font-weight: 700;
      margin-bottom: 0.85rem;
    }
.ob-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); display: inline-block; }
.ob-h1 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(1.85rem, 4.6vw, 2.7rem);
      line-height: 1.06;
      letter-spacing: -0.02em;
      margin: 0 0 1.1rem;
    }
.ob-lead {
      font-family: var(--font-body);
      font-size: 1.075rem;
      line-height: 1.7;
      color: var(--color-text-secondary);
      margin: 0 0 1.6rem;
    }
.ob-pricebox {
      border: 1px solid rgba(194, 90, 51,0.28);
      background: linear-gradient(150deg, #fbf3ef, #f7ece6);
      padding: 1.4rem 1.6rem;
      margin: 0 0 3rem;
      border-radius: var(--tcp-radius);
      box-shadow: var(--tcp-shadow);
      position: relative; overflow: hidden;
    }
.ob-pricebox::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--color-accent); }
.ob-pricebox p { margin: 0; font-size: 1.04rem; line-height: 1.6; }
.ob-pricebox strong { color: var(--color-accent); }
.ob-section { margin-top: clamp(2.75rem, 5vw, 3.75rem); }
.ob-section__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.3rem, 3.2vw, 1.65rem);
      letter-spacing: -0.015em;
      margin: 0 0 1.25rem;
    }
.ob-section__intro { margin-bottom: 1.9rem; }
.ob-steps { list-style: none; margin: 0; padding: 0; counter-reset: ob-step; display: grid; gap: 14px; }
.ob-steps > li {
      position: relative;
      padding: 22px 24px 22px 4.25rem;
      counter-increment: ob-step;
      background: var(--color-light);
      border: 1px solid var(--tcp-line);
      border-radius: var(--tcp-radius);
      box-shadow: var(--tcp-shadow);
    }
.ob-steps > li::before {
      content: counter(ob-step);
      position: absolute;
      left: 22px;
      top: 22px;
      width: 2.35rem;
      height: 2.35rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-accent);
      color: var(--color-light);
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 0.95rem;
      border-radius: 50%;
      box-shadow: var(--tcp-shadow-accent);
    }
.ob-steps__head {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.08rem;
      letter-spacing: -0.01em;
      margin: 0.15rem 0 0.45rem;
    }
.ob-steps p { font-size: 0.97rem; line-height: 1.65; color: var(--color-text-secondary); margin: 0; }
.ob-idbox {
      border: 1px solid var(--tcp-line);
      border-left: 3px solid var(--color-accent);
      background: var(--color-bg-alt);
      padding: 1.1rem 1.3rem;
      margin: 1.6rem 0 0;
      border-radius: var(--tcp-radius-sm);
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--color-text-secondary);
    }
.ob-idbox strong { color: var(--color-text); }
.ob-idbox code {
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--color-accent);
      letter-spacing: 0.04em;
      background: rgba(194, 90, 51,0.08);
      padding: 2px 7px;
      border-radius: 6px;
    }
.ob-mcid {
      display: none;
      margin-top: 0.85rem;
      font-family: var(--font-mono);
      font-size: 0.85rem;
      color: var(--color-text);
      background: var(--color-bg-alt);
      border: 1px solid var(--tcp-line);
      border-radius: var(--tcp-radius-sm);
      padding: 0.7rem 1rem;
    }
.ob-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ob-next li {
      position: relative;
      padding: 0 0 0 1.85rem;
      font-size: 0.98rem;
      line-height: 1.6;
      color: var(--color-text-secondary);
    }
.ob-next li::before {
      content: "\2713";
      position: absolute;
      left: 0;
      top: 0;
      width: 1.3rem; height: 1.3rem;
      line-height: 1.3rem; text-align: center;
      font-size: 0.7rem; font-weight: 700;
      color: var(--color-accent);
      background: rgba(194, 90, 51,0.10);
      border-radius: 50%;
    }
.ob-reassure {
      border: 1px solid var(--tcp-line);
      background: var(--color-light);
      padding: 1.5rem 1.6rem;
      margin-top: clamp(2.75rem, 5vw, 3.75rem);
      border-radius: var(--tcp-radius);
      box-shadow: var(--tcp-shadow);
    }
.ob-reassure p { font-size: 0.98rem; line-height: 1.65; color: var(--color-text-secondary); margin: 0 0 0.8rem; }
.ob-reassure p:last-child { margin-bottom: 0; }
.ob-reassure strong { color: var(--color-text); }
.ob-contact a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.ob-footer {
      border-top: 1px solid var(--tcp-line);
      padding: 2rem 0;
      font-family: var(--font-mono);
      font-size: 0.74rem;
      letter-spacing: 0.02em;
      color: var(--color-text-muted);
    }
.ob-footer a { color: var(--color-text-muted); text-decoration: none; }
.ob-footer a:hover { color: var(--color-accent); }

/* F-20 small utilities for static-page residual inline styles */
.u-m0 { margin: 0; }
.u-hidden { display: none; }
.is-collapsed { display: none; margin-top: 0; }

.flex-col-center-gap24 { display: flex; flex-direction: column; gap: 24px; width: 100%; align-items: center; }

.tcp-strong { color: var(--ink-700); font-weight: 700; }

/* F-23: pricing value-prop as green-checkmark benefit cards (was a grey 2-col
   "Included/Inkluderet" table). Responsive 2-column grid of benefit items. */
.cp-benefits { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
@media (max-width: 620px) { .cp-benefits { grid-template-columns: 1fr; } }
.cp-benefits li { position: relative; padding: 12px 16px 12px 44px; background: var(--surface-card, #fbf9f5); border: 1px solid var(--color-border); border-radius: 12px; font-size: 0.96rem; line-height: 1.4; color: var(--color-text); }
.cp-benefits li::before { content: "\2713"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 0.74rem; font-weight: 700; color: #fff; background: var(--positive-600, #2F7D5B); border-radius: 50%; }

/* ==========================================================================
   PREMIUM REDESIGN LAYER (forside showcase) , spec 2026-07-01
   --------------------------------------------------------------------------
   Implements the premium design-system tokens (type scale 1.333, 3-step
   elevation, 8px spacing, warm color depth) and the homepage art-direction.
   Visual overrides are scoped to `.lp` (the homepage wrapper) so the 20+
   inner pages keep their current look until the system is rolled out to them.
   Appended last so it wins the cascade over the legacy homepage rules above.
   ========================================================================== */
:root {
  /* --- Premium color tokens --- */
  --cream:            #f8f5f0;
  --cream-raised:     #fffdfb;
  --cream-sunken:     #f1ece4;
  --charcoal:         #1a1a1a;
  --charcoal-2:       #222222;
  --charcoal-3:       #151515;
  --terra:            #c04a2d;
  --terra-tint:       #f3e3dc;
  --terra-deep:       #a83e24;

  --ink-strong:       #1a1a1a;
  --ink-read:         #2a2a2a;
  --ink-soft:         rgba(26,26,26,.60);
  --on-dark:          #f8f5f0;
  --on-dark-soft:     rgba(248,245,240,.62);
  --on-terra:         #fdf3ee;

  --line-hair:        rgba(26,26,26,.08);
  --line-terra:       rgba(192,74,45,.14);
  --line-on-dark:     rgba(255,255,255,.08);

  /* --- Elevation (charcoal-based, never pure black) --- */
  --elev-1: 0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.06);
  --elev-2: 0 2px 4px rgba(26,26,26,.05), 0 16px 48px rgba(26,26,26,.10);
  --elev-3: 0 4px 8px rgba(26,26,26,.06), 0 32px 80px rgba(26,26,26,.14);
  --elev-dark: 0 2px 4px rgba(0,0,0,.20), 0 24px 64px rgba(0,0,0,.35);
  --inset-top: inset 0 1px 0 rgba(255,255,255,.6);

  /* --- Type scale (modular 1.333) --- */
  --font-syne: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-dm:   "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-space: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-hero: 72px;
  --t-display: 88px;
  --t-display-text: 56px;
  --t-h2: 40px;
  --t-h2-sub: 30px;
  --t-h3: 22px;
  --t-lead: 20px;
  --t-body-p: 17px;
  --t-stat: 56px;
  --t-stat-key: 72px;
  --t-label: 13px;
  --t-caption: 12px;

  /* --- Spacing (8px baseline) --- */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px;  --s-6: 64px;  --s-7: 96px;  --s-8: 120px;
  --s-9: 160px; --s-10: 240px;

  /* --- Radius --- */
  --r-card: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* --- Grid --- */
  --pr-container: 1200px;
}

/* ---- Grain overlay: warmer, per-spec opacity .03 ---- */
.lp-grain { opacity: .03; }
/* full-bleed breakouts must not create a horizontal scrollbar */
html:has(.lp), body:has(.lp) { overflow-x: hidden; }

/* ==========================================================================
   HOMEPAGE TYPE SYSTEM (5-step hierarchy)
   ========================================================================== */
.lp { color: var(--ink-read); font-family: var(--font-dm); }
.lp p { font-family: var(--font-dm); color: var(--ink-read); }
.lp h1, .lp h2, .lp h3 { font-family: var(--font-syne); color: var(--ink-strong); }
/* A-27 (design panel): display headings never hyphenate mid-word ("Shopping-
   budget" must not break inside the word), and balance line lengths so a short
   H1 lands on 3-4 even lines instead of one long ragged line. */
.lp h1, .lp h2, .lp h3, .lp .home-proof__h, .lp .wow-obj__h, .lp .wow-roi__q {
  hyphens: none; -webkit-hyphens: none; text-wrap: balance; overflow-wrap: break-word;
}

/* eyebrow / mono labels */
.lp .eyebrow, .lp .wow-eyebrow {
  font-family: var(--font-space); font-weight: 400;
  font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terra-deep); margin: 0 0 var(--s-3);  /* A-17: AA on cream (4.98:1) */
}
.lp .eyebrow::before, .lp .wow-eyebrow::before {
  content: ""; width: 24px; height: 2px; background: var(--terra);
  display: inline-block; vertical-align: middle; margin-right: 12px;
}
.lp .wow-eyebrow::before { margin-right: 12px; }

/* H2 tiers */
.lp .tcp-section h2, .lp .finalcta h2 {
  font-family: var(--font-syne); font-weight: 700;
  font-size: clamp(30px, 4vw, var(--t-h2)); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ink-strong); margin: 0 0 var(--s-2); max-width: 20ch;
}
.lp .tcp-section h3 {
  font-family: var(--font-syne); font-weight: 600;
  font-size: clamp(20px, 2.4vw, var(--t-h3)); line-height: 1.2; letter-spacing: -0.01em;
}
/* body copy discipline */
.lp .tcp-section p {
  font-family: var(--font-dm); font-size: var(--t-body-p); line-height: 1.6;
  color: var(--ink-read); max-width: 62ch;
}
.lp .tcp-section h2 + p, .lp .eyebrow + h2 { margin-top: 0; }

/* ==========================================================================
   HERO (spec 2 , 88vh split, warm glow, two-price-card anchor)
   ========================================================================== */
/* A-31: the hero carries .tcp-section, so the generic `.lp .tcp-section`
   padding-block (clamp up to 120px) used to clobber the hero's own padding and
   push the whole block past 100vh (measured 1058px on a 900px viewport). The
   .lp-hero.tcp-section selector (specificity 0,3,0) reclaims the hero rhythm and
   keeps it compact so the price chip + primary CTA sit above the fold. */
.lp .lp-hero.tcp-section {
  min-height: min(84vh, 720px); display: flex; align-items: center;
  padding-block: clamp(36px, 4.4vh, 56px); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 75% 15%, rgba(192,74,45,.08), rgba(248,245,240,0) 60%);
}
.lp .lp-hero::after { display: none; }
.lp .lp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  gap: var(--s-6); align-items: center;
}
.lp .lp-hero__grid > * { min-width: 0; }
/* keep the whole left column (through the CTA) within the first fold and let the
   price-card payoff sit at the same optical height */
.lp .lp-hero__grid > div:first-child { align-self: center; }
/* eyebrow already styled; hero variant */
.lp .lp-hero__reg {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--font-space); font-weight: 400; font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra);
  border: 0; background: transparent; padding: 0; box-shadow: none; border-radius: 0;
  margin: 0 0 var(--s-3);
}
.lp .lp-hero__reg::before {
  content: ""; width: 24px; height: 2px; background: var(--terra);
  display: inline-block; margin-right: 12px;
}
.lp .lp-hero__reg .dot { display: none; }
.lp .lp-hero__reg b { color: var(--terra); font-weight: 700; }

.lp .lp-hero h1 {
  font-family: var(--font-syne); font-weight: 700;
  /* A-31: cap the desktop H1 at 60px (was 66px) and let it use more of the
     column width (was 15ch) so long-copy markets (es/pl/fr) wrap to fewer lines
     and the hero stays closer to 100vh. da/de/en stay large and premium. */
  font-size: clamp(40px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink-strong); margin: 0 0 var(--s-3); max-width: 20ch;
}
.lp .lp-hero h1 .hl-now { color: var(--terra); display: block; }
.lp .lp-hero h1 .hl-wasted {
  text-decoration: underline; text-decoration-color: var(--terra);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.lp .lp-hero__sub {
  font-family: var(--font-dm); font-size: var(--t-lead); line-height: 1.6;
  color: var(--ink-read); max-width: 46ch; margin: 0 0 var(--s-4);
}
.lp .lp-hero__cta-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
}
.lp .lp-hero__note {
  font-family: var(--font-space); font-size: var(--t-label); letter-spacing: 0.02em;
  color: var(--ink-soft); margin: var(--s-4) 0 0; line-height: 1.5;
  max-width: none; padding: 0; border: 0;
}
.lp .lp-hero__note strong { color: var(--ink-read); font-weight: 400; }

/* ---- ONE dominant CTA + text link ---- */
.lp .lp-btn {
  font-family: var(--font-dm); font-weight: 500; font-size: 17px;
  border-radius: var(--r-pill);
}
.lp .lp-btn--primary {
  background: var(--terra); border-color: var(--terra); color: #fff;
  box-shadow: var(--elev-1); padding: 18px 26px; min-height: 56px;
}
.lp .lp-btn--primary:hover {
  background: var(--terra-deep); border-color: var(--terra-deep);
  transform: translateY(-2px); box-shadow: var(--elev-2);
}
/* hero secondary = text link, not a competing button */
.lp .lp-hero__cta-row .lp-btn--ghost {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  color: var(--charcoal); font-family: var(--font-dm); font-weight: 500; font-size: 16px;
  text-decoration: none; min-height: 0;
}
.lp .lp-hero__cta-row .lp-btn--ghost:hover {
  text-decoration: underline; text-decoration-color: var(--terra);
  text-underline-offset: 4px; transform: none; box-shadow: none;
}
/* nav CTA de-emphasised (outline) so hero primary owns the strongest terracotta */
.lp .lp-header__cta {
  background: transparent; color: var(--terra); border: 1px solid var(--terra);
  font-family: var(--font-dm); font-weight: 600; white-space: nowrap;
}
.lp .lp-header__cta:hover {
  background: var(--terra); color: #fff; border-color: var(--terra);
  box-shadow: none; transform: none;
}

/* ==========================================================================
   HERO VISUAL , two price cards side-by-side (the real anchor)
   ========================================================================== */
.lp .hero-visual { display: block; align-self: center; }
/* A-18: the visual column must not stretch to the (often very tall on long-H1
   languages) left column height, or the price cards elongate with a big empty
   gap. Center it at natural height. */
.lp .lp-hero__grid > .hero-visual { align-self: center; }
.lp .hero-pricecompare {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  align-items: start;
}
.lp .pcard {
  background: var(--cream-raised); border: 1px solid var(--line-hair);
  border-radius: var(--r-card); padding: var(--s-3) var(--s-3) var(--s-4);
  box-shadow: var(--elev-2); position: relative; display: flex; flex-direction: column;
  min-width: 0;
}
.lp .pcard--partner {
  box-shadow: var(--elev-3); border-color: var(--line-terra);
  border-top: 3px solid var(--terra);
}
.lp .pcard--partner::before { box-shadow: var(--inset-top); }
.lp .pcard__provider {
  font-family: var(--font-space); font-weight: 700; font-size: var(--t-caption);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 var(--s-2); min-height: 2.6em; line-height: 1.3;
}
.lp .pcard--partner .pcard__provider { color: var(--terra); }
.lp .pcard__shot {
  background: var(--cream-sunken); border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04); padding: 14px;
  display: flex; align-items: center; justify-content: center; margin: 0 0 var(--s-2);
  aspect-ratio: 1 / 1;
  /* A-18: never let a flex-stretch (on long-H1 language heroes) blow the square
     shot up vertically , keep it its natural aspect-ratio height. */
  flex: 0 0 auto; max-height: 220px;
}
.lp .pcard__shot img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lp .pcard__label {
  font-family: var(--font-space); font-size: var(--t-caption); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px;
}
.lp .pcard__cpc {
  font-family: var(--font-space); font-weight: 700; font-size: 30px; line-height: 1;
  color: var(--charcoal); letter-spacing: -0.01em;
}
.lp .pcard--partner .pcard__cpc { color: var(--terra); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp .pcard__pill {
  font-family: var(--font-space); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
  background: var(--terra); padding: 4px 9px; border-radius: var(--r-pill);
  box-shadow: var(--elev-1); line-height: 1;
}
.lp .hero-saved {
  margin: var(--s-2) 0 0; text-align: center;
  font-family: var(--font-dm); font-size: 14px; color: var(--ink-soft);
  letter-spacing: 0;
}
.lp .hero-saved b { color: var(--terra); font-weight: 700; font-size: 15px; font-family: var(--font-space); }

/* ==========================================================================
   CHAPTER RHYTHM , breakouts + section tempo
   ========================================================================== */
.breakout { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* charcoal breakout (stat band / dark chapters) */
.lp .ch-charcoal {
  background: linear-gradient(180deg, var(--charcoal-2) 0%, var(--charcoal-3) 100%);
  color: var(--on-dark); border-top: 1px solid var(--line-on-dark);
  box-shadow: var(--elev-dark); position: relative; overflow: hidden;
}
.lp .ch-charcoal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 20%, rgba(192,74,45,.16), transparent 70%);
}
.lp .ch-charcoal h2, .lp .ch-charcoal h3 { color: var(--on-dark); }
.lp .ch-charcoal p { color: var(--on-dark-soft); }
.lp .ch-charcoal .eyebrow, .lp .ch-charcoal .wow-eyebrow { color: #e8a48f; }
.lp .ch-charcoal .eyebrow::before, .lp .ch-charcoal .wow-eyebrow::before { background: #e8a48f; }

/* terracotta immersion */
.lp .ch-terra {
  background: linear-gradient(160deg, var(--terra) 0%, var(--terra-deep) 100%);
  color: var(--on-terra); position: relative; overflow: hidden;
}
.lp .ch-terra h2 { color: #fff; }
.lp .ch-terra p { color: rgba(253,243,238,.88); }
.lp .ch-terra .eyebrow, .lp .ch-terra .wow-eyebrow { color: rgba(255,255,255,.9); }
.lp .ch-terra .eyebrow::before, .lp .ch-terra .wow-eyebrow::before { background: rgba(255,255,255,.8); }

/* full-bleed dark/terracotta chapters honour the 80px outer margin at wide viewports */
.lp .ch-charcoal > .tcp-container,
.lp .ch-terra > .tcp-container,
.lp .wow-statband > .tcp-container,
.lp .finalcta > .tcp-container { padding-inline: clamp(24px, 6vw, 80px); }

/* section tempo: standard homepage cream sections breathe at 120px (spec 1.4),
   not the legacy 80px cap, so the page stops reading as a uniform generator stack */
.lp .tcp-section { padding-block: clamp(72px, 9vw, 120px); }
.lp .wow-sec { margin-block: clamp(72px, 9vw, 120px); }

/* A-26 gap-fix: two adjacent full-bleed colour chapters (e.g. the terracotta
   ROI "regnestykket" meeting the charcoal EU AT.39740 block) must butt together,
   not float apart with a cream page-background band between them. Collapse the
   seam: drop the lower chapter's top margin and the upper chapter's bottom
   margin whenever two .breakout chapters are directly adjacent. Their own
   .pad-* padding still gives internal breathing room, and the margins ABOVE the
   first and BELOW the last chapter are untouched. */
.lp .wow-sec.breakout + .wow-sec.breakout { margin-top: 0; }
.lp .wow-sec.breakout:has(+ .wow-sec.breakout) { margin-bottom: 0; }

/* section tempo utilities (bevidst variation 96/120/240) */
.lp .pad-96  { padding-block: var(--s-7)  !important; }
.lp .pad-120 { padding-block: var(--s-8)  !important; }
.lp .pad-160 { padding-block: var(--s-9)  !important; }
.lp .pad-240 { padding-block: clamp(120px, 20vw, var(--s-10)) !important; }

/* the big "breath" statement , one flagship line alone with 240px of air */
.lp .breath { text-align: center; }
.lp .breath .wow-eyebrow, .lp .breath .eyebrow { justify-content: center; display: inline-flex; }
.lp .breath__statement, .lp .breath .wow-obj__h {
  font-family: var(--font-syne); font-weight: 700;
  font-size: clamp(34px, 5vw, var(--t-display-text)); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink-strong); max-width: 18ch;
  margin: 0 auto var(--s-6); text-align: center;
}
.lp .breath__statement .accent, .lp .breath .wow-obj__h .accent { color: var(--terra); }
/* the checklist under a breath statement sits centered, roomy */
.lp .breath .wow-obj__grid { max-width: 900px; margin: 0 auto; justify-content: center; }

/* ==========================================================================
   ELEVATION + CARD SYSTEM applied to existing homepage components
   ========================================================================== */
/* stat band -> charcoal breakout, big terracotta-keyed numerals */
.lp .wow-statband {
  background: linear-gradient(180deg, var(--charcoal-2) 0%, var(--charcoal-3) 100%);
  color: var(--on-dark); border-top: 1px solid var(--line-on-dark);
  box-shadow: var(--elev-dark); padding-block: var(--s-8); position: relative; overflow: hidden;
}
.lp .wow-statband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 10%, rgba(192,74,45,.18), transparent 70%);
}
.lp .wow-statband__grid { position: relative; }
.lp .wow-stat b {
  font-family: var(--font-space); font-weight: 700; font-size: clamp(40px, 5vw, var(--t-stat));
  letter-spacing: -0.01em; color: var(--on-dark); line-height: 1;
}
.lp .wow-stat:first-child b { font-size: clamp(48px, 6vw, var(--t-stat-key)); color: var(--terra); }
.lp .wow-stat span {
  font-family: var(--font-space); font-size: var(--t-caption); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--on-dark-soft); margin-top: var(--s-1);
}

/* ROI regnestykke -> charcoal card, key number bigger + terracotta */
.lp .wow-roi {
  background: linear-gradient(180deg, var(--charcoal-2) 0%, var(--charcoal-3) 100%);
  border-radius: var(--r-card); padding: clamp(40px, 5vw, var(--s-7));
  box-shadow: var(--elev-dark); border: 1px solid var(--line-on-dark);
}
.lp .wow-roi__q { font-family: var(--font-syne); font-weight: 700; color: var(--on-dark); }
.lp .wow-roi__num { background: rgba(248,245,240,.05); border-color: rgba(248,245,240,.12); border-radius: var(--r-sm); }
.lp .wow-roi__num b { font-family: var(--font-space); font-weight: 700; color: var(--on-dark); }
.lp .wow-roi__num:nth-child(2) b { color: var(--terra); font-size: clamp(2rem, 4vw, 2.6rem); }
.lp .wow-roi__num span { font-family: var(--font-space); font-size: var(--t-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
.lp .wow-roi__note { font-family: var(--font-space); color: rgba(248,245,240,.5); }

/* ROI on the terracotta immersion chapter: transparent card, glass inner cells,
   key number in cream so it reads on the warm ground */
.lp .wow-roi--terra {
  background: transparent; box-shadow: none; border: 0; padding: 0;
}
.lp .wow-roi--terra .wow-eyebrow { color: rgba(255,255,255,.9); }
.lp .wow-roi--terra .wow-roi__q { color: #fff; }
.lp .wow-roi--terra .wow-roi__num { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.lp .wow-roi--terra .wow-roi__num b { color: #fff; }
.lp .wow-roi--terra .wow-roi__num:nth-child(2) b { color: #fff; }
.lp .wow-roi--terra .wow-roi__num:nth-child(2) { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); }
.lp .wow-roi--terra .wow-roi__num span { color: rgba(253,243,238,.82); }
.lp .wow-roi--terra .wow-roi__note { color: rgba(253,243,238,.6); }

/* EU-dom -> own charcoal breakout feel, terracotta seal (no blue) */
.lp .wow-eu {
  background: var(--cream-raised); border: 1px solid var(--line-terra);
  border-left: 3px solid var(--terra); border-radius: var(--r-card);
  box-shadow: var(--elev-2); padding: clamp(28px, 4vw, 40px);
}
.lp .wow-eu__seal {
  background: linear-gradient(150deg, var(--terra), var(--terra-deep));
  border: 3px solid rgba(255,255,255,.18); box-shadow: var(--elev-2);
  font-family: var(--font-space);
}
.lp .wow-eu__seal b { font-size: 1.15rem; }
.lp .wow-eu__seal span { font-size: 0.6rem; letter-spacing: 0.06em; }
/* the EU card is a cream card that may float on the charcoal chapter, so force its
   own text dark (beats .ch-charcoal p / h2 light-text cascade) */
.lp .wow-eu p, .lp .ch-charcoal .wow-eu p { color: var(--ink-read); }
.lp .wow-eu .wow-eu__case, .lp .ch-charcoal .wow-eu .wow-eu__case { font-family: var(--font-space); color: var(--ink-strong); }
.lp .wow-eu .wow-eu__auth, .lp .ch-charcoal .wow-eu .wow-eu__auth { color: var(--ink-soft); }
.lp .wow-eu .wow-eu__line, .lp .ch-charcoal .wow-eu .wow-eu__line { font-family: var(--font-syne); font-weight: 700; font-size: clamp(22px, 3vw, var(--t-h2-sub)); color: var(--ink-strong); }
.lp .wow-eu .wow-eu__verify, .lp .ch-charcoal .wow-eu .wow-eu__verify { font-family: var(--font-space); color: var(--terra); }

/* objection grid: green mint -> warm terracotta-tint, terracotta checks */
.lp .wow-obj__h { font-family: var(--font-syne); font-weight: 700; }
.lp .wow-obj__item {
  background: var(--terra-tint); color: var(--ink-strong);
  border-radius: var(--r-sm); font-family: var(--font-dm);
}
.lp .wow-obj__check {
  background: var(--terra); color: #fff;
}

/* numbers grid -> card system, primary number terracotta + bigger */
.lp .numbers { gap: var(--s-2); }
.lp .numbers__item {
  background: var(--cream-raised); border: 1px solid var(--line-hair);
  border-radius: var(--r-card); box-shadow: var(--elev-1); padding: var(--s-4) var(--s-3);
}
.lp .numbers__item::before { background: var(--line-hair); }
.lp .numbers__value {
  font-family: var(--font-space); font-weight: 700;
  font-size: clamp(40px, 4vw, var(--t-stat)); color: var(--charcoal); line-height: 1;
}
.lp .numbers__label {
  font-family: var(--font-space); font-size: var(--t-caption); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.lp .numbers__item--key {
  background: var(--cream-raised); border-color: var(--line-terra);
  border-top: 3px solid var(--terra); box-shadow: var(--elev-2);
}
.lp .numbers__item--key::before { display: none; }
.lp .numbers__item--key .numbers__value { color: var(--terra); font-size: clamp(48px, 5vw, var(--t-stat-key)); }
/* qualifier ("op til") is a small mono label above the big number, not part of it,
   so the 72px key stat never wraps to 3 lines */
.lp .numbers__pre {
  display: block; font-family: var(--font-space); font-weight: 400;
  font-size: var(--t-caption); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 4px;
}
.lp .numbers__item--key .numbers__pre { color: var(--terra); opacity: .85; }
.lp .numbers__note { font-family: var(--font-dm); font-size: 15px; color: var(--ink-soft); max-width: 62ch; }

/* biddingcard + calc + faq + realproof cards -> elevation recipe + 48px large-card padding */
.lp .biddingcard, .lp .calc, .lp .faq, .lp .realproof__card {
  background: var(--cream-raised); border: 1px solid var(--line-hair);
  border-radius: var(--r-card); box-shadow: var(--elev-2);
}
.lp .biddingcard, .lp .realproof__card { padding: var(--s-5); }
.lp .calc { padding: var(--s-5); max-width: 640px; }
.lp .faq { padding: 8px var(--s-5); }
.lp .numbers__item { padding: var(--s-5) var(--s-4); }
.lp .home-explain-card { padding: var(--s-5); }
/* descriptive captions read in DM Sans, not monospaced prose (spec: Mono = numbers/labels only) */
.lp .realproof__caption { font-family: var(--font-dm); font-size: 13px; color: var(--ink-soft); }
.lp .biddingcard__title, .lp .calc label { font-family: var(--font-space); }
.lp .bar__fill--accent { background: linear-gradient(90deg, var(--terra), var(--terra-deep)); }
/* Space Mono is for numerals/labels only, never running words: keep the calc
   OUTPUT value mono, but the biddingcard footer emphasis stays DM Sans (words) */
.lp .calc__out-value { color: var(--terra); font-family: var(--font-space); }
.lp .biddingcard__foot b { color: var(--terra); font-weight: 700; }
.lp .calc input[type="range"] { accent-color: var(--terra); }
.lp .faq summary { font-family: var(--font-syne); font-weight: 600; }
.lp .faq summary::after { color: var(--terra); }

/* GREEN ELIMINATION at the source: retarget the graphics green tokens to terracotta
   at homepage scope so every graphic consumer (chips, fills, deltas, budget badge,
   product cards) reads terracotta, not mint. One place, covers all latent green. */
.lp .tcp-graphic {
  /* A11y (A-17): use terra-DEEP (#a83e24 = 4.98:1 on cream/tint) not --terra
     (#c04a2d = 3.95:1) so every graphic terracotta text/chip clears WCAG AA. */
  --tg-positive: var(--terra-deep);
  --tg-positive-100: var(--terra-tint);
  --tg-positive-deep: var(--terra-deep);
  --tg-accent: var(--terra-deep);
  --tg-accent-ink: var(--terra-deep);
}
/* live A/B proof: mint chip fill+border -> warm terracotta, DEEP for AA contrast */
.lp .tcp-graphic .chip.good { background: var(--terra-tint); border-color: var(--line-terra); color: var(--terra-deep); }
.lp .tcp-graphic .chip.good .v, .lp .tcp-graphic .chip.good .vtag { color: var(--terra-deep); }
.lp .tcp-graphic .budgetbar .same { background: var(--terra-tint); border-color: var(--line-terra); color: var(--terra-deep); font-family: var(--font-space); }
.lp .tcp-graphic .budgetbar .note em { color: var(--terra-deep); }
.lp .budgetbar .same svg path { stroke: var(--terra-deep); }
.lp .budgetbar .val { font-family: var(--font-space); font-weight: 700; color: var(--terra-deep); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.lp figcaption b, .lp .tg-cap b { font-family: var(--font-syne); }

/* final CTA -> dark climax */
.lp .finalcta__inner {
  background: linear-gradient(160deg, var(--charcoal-2), var(--charcoal-3));
  border: 1px solid var(--line-on-dark); box-shadow: var(--elev-dark);
  padding: clamp(64px, 8vw, 96px) var(--s-4);
}
.lp .finalcta__inner::before {
  background: radial-gradient(circle, rgba(192,74,45,.20), transparent 70%);
}
.lp .finalcta h2 { color: var(--on-dark); }
.lp .finalcta p { color: var(--on-dark-soft); }
.lp .finalcta .eyebrow { color: #e8a48f; }
.lp .finalcta .eyebrow::before { background: #e8a48f; }
.lp .finalcta .lp-btn--ghost {
  background: transparent; color: var(--on-dark); border: 1px solid rgba(248,245,240,.4);
}
.lp .finalcta .lp-btn--ghost:hover { background: var(--on-dark); color: var(--charcoal); border-color: var(--on-dark); }

/* home-explain card + serpcard -> elevation recipe */
.lp .home-explain-card, .lp .serpcard {
  background: var(--cream-raised); border: 1px solid var(--line-hair);
  border-radius: var(--r-card); box-shadow: var(--elev-1);
}

/* ==========================================================================
   FOUNDER TRUST SECTION (real social proof)
   ========================================================================== */
.lp .founder {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--s-5); align-items: center;
  background: var(--cream-raised); border: 1px solid var(--line-terra);
  border-top: 3px solid var(--terra); border-radius: var(--r-card);
  box-shadow: var(--elev-2); padding: var(--s-5);
}
.lp .founder__photo {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r-sm);
  box-shadow: var(--elev-1); background: var(--cream-sunken);
}
.lp .founder__tag {
  font-family: var(--font-space); font-size: var(--t-label); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--terra); margin: 0 0 var(--s-2);
}
.lp .founder__quote {
  font-family: var(--font-dm); font-size: var(--t-lead); line-height: 1.6;
  color: var(--ink-read); margin: 0 0 var(--s-2); max-width: 62ch;
}
.lp .founder__quote p { margin: 0 0 var(--s-2); font-size: var(--t-lead); }
.lp .founder__quote p:last-child { margin-bottom: 0; }
.lp .founder__name {
  font-family: var(--font-syne); font-weight: 700; font-size: 18px;
  color: var(--ink-strong); margin: var(--s-2) 0 0;
}
.lp .founder__name span { font-family: var(--font-space); font-weight: 400; font-size: 13px; color: var(--ink-soft); display: block; margin-top: 4px; letter-spacing: 0.04em; }

/* short trust line near hero/CTA */
.lp .trustline {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-dm); font-size: 15px; line-height: 1.5; color: var(--ink-read);
  max-width: 52ch; margin: var(--s-3) 0 0;
}
.lp .trustline__avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px;
  box-shadow: var(--elev-1); background: var(--cream-sunken);
}
.lp .trustline b { color: var(--ink-strong); font-weight: 600; }

/* explain-card caption row (01 / Kun afsenderen): graphics.css only styles these
   inside .tcp-graphic, so restyle them for the homepage explain card here */
.lp .home-explain-card .tg-cap-row { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-2); }
.lp .home-explain-card .tg-no {
  font-family: var(--font-space); font-weight: 700; font-size: var(--t-caption);
  color: #fff; background: var(--terra); border-radius: var(--r-pill);
  padding: 3px 9px; letter-spacing: 0.04em;
}
.lp .home-explain-card .tg-tag {
  font-family: var(--font-space); font-size: var(--t-caption); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.lp .home-explain-card b { font-family: var(--font-syne); font-weight: 600; font-size: var(--t-h3); display: block; margin: 0 0 var(--s-2); color: var(--ink-strong); }
.lp .home-explain-card .tg-d { font-family: var(--font-dm); font-size: var(--t-body-p); line-height: 1.6; color: var(--ink-read); }

/* ==========================================================================
   MOBILE (<= 480) , hero + grids per spec 2.6 / 9
   ========================================================================== */
/* tablet: keep the split but give the visual room + shrink the price cards */
@media (max-width: 1120px) and (min-width: 941px) {
  .lp .lp-hero__grid { grid-template-columns: minmax(0, 54%) minmax(0, 46%); gap: var(--s-4); }
  .lp .lp-hero h1 { font-size: clamp(40px, 5.4vw, 60px); }
  .lp .pcard { padding: var(--s-2) var(--s-2) var(--s-3); }
  .lp .pcard__cpc { font-size: 24px; }
  .lp .pcard__shot { padding: 10px; }
}
@media (max-width: 940px) {
  .lp .lp-hero__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  /* A-31: match the .lp-hero.tcp-section specificity so the stacked-hero rhythm
     wins over the compact desktop base rule below this breakpoint. */
  .lp .lp-hero.tcp-section { min-height: auto; padding-block: clamp(56px, 8vw, 72px); }
  .lp .hero-pricecompare { max-width: 520px; }
  .lp .founder { grid-template-columns: 1fr; gap: var(--s-3); text-align: left; }
  .lp .founder__photo { max-width: 160px; }
}
@media (max-width: 480px) {
  .lp .lp-hero h1 { font-size: 40px; }
  .lp .lp-hero__sub { font-size: 17px; }
  .lp .hero-pricecompare { gap: var(--s-1); }
  .lp .pcard { padding: var(--s-2) var(--s-2) var(--s-3); }
  .lp .pcard__cpc { font-size: 24px; }
  .lp .lp-btn--primary { width: 100%; }
  .lp .lp-hero__cta-row { align-items: stretch; }
  .lp .lp-hero__cta-row .lp-btn--ghost { text-align: center; padding: 14px 0; min-height: 48px; display: flex; align-items: center; justify-content: center; }
  /* keep the wordmark on one line so the logo lockup never breaks into 3 rows */
  .lp .lp-header__wordmark { white-space: nowrap; font-size: 0.98rem; }
}

/* ==========================================================================
   PREMIUM INNER-PAGE LAYER (A-13) , pricing / get-started / for-webshops /
   how-it-works. Activated by class="lp" on <body> for those slugs. Mirrors the
   forside design-system (Syne/DM Sans/Space Mono, elevation, terracotta
   atmosphere, section rhythm) onto the .cp content structure. Copy untouched.
   ========================================================================== */

/* type foundation on the inner page body */
.lp .cp, .lp .cp-sec, .lp .cp__inner { font-family: var(--font-dm); }
.lp .cp h1, .lp .cp-sec h2, .lp .cp-cta h2, .lp .cp-faq__item summary { font-family: var(--font-syne); }

/* wider, more generous column + section rhythm */
.lp .cp { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 10vw, 140px); }
.lp .cp__inner { max-width: 1000px; }
.lp .cp-sec { margin: clamp(48px, 7vw, 88px) 0; }

/* eyebrow -> mono terracotta with streg (matches forside) */
.lp .cp__eyebrow {
  font-family: var(--font-space); font-weight: 400; font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin: 0 0 var(--s-3);
}
.lp .cp__eyebrow::before { width: 24px; height: 2px; background: var(--terra); margin-right: 4px; }

/* H1 -> Syne premium scale */
.lp .cp h1 {
  font-family: var(--font-syne); font-weight: 700;
  font-size: clamp(40px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink-strong); margin: 0 0 var(--s-4); max-width: 18ch;
}
/* H2 tier -> Syne 40 */
.lp .cp-sec h2 {
  font-family: var(--font-syne); font-weight: 700;
  font-size: clamp(28px, 3.4vw, var(--t-h2)); line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ink-strong); margin: 0 0 var(--s-3);
}
/* body copy discipline */
.lp .cp-sec p, .lp .cp__inner > p {
  font-family: var(--font-dm); font-size: var(--t-body-p); line-height: 1.6;
  color: var(--ink-read); max-width: 62ch;
}
.lp .cp-sec p strong { color: var(--ink-strong); }
.lp .cp-v1 { font-family: var(--font-space); }

/* lists -> terracotta checks (already terracotta via --color-accent; harmonise) */
.lp .cp-list li { color: var(--ink-read); line-height: 1.65; }
.lp .cp-list li::before { color: var(--terra); background: var(--terra-tint); }

/* benefit chips -> warm card recipe */
.lp .cp-benefits li {
  background: var(--cream-raised); border: 1px solid var(--line-hair);
  border-radius: var(--r-sm); box-shadow: var(--elev-1);
  font-family: var(--font-dm); font-size: 16px; color: var(--ink-strong);
  padding: 14px 16px 14px 44px;
}
.lp .cp-benefits li::before { color: #fff; background: var(--terra); }

/* comparison / spec tables -> premium (mono numerals, hairlines, roomy rows) */
.lp .cp-table { font-family: var(--font-dm); }
.lp .cp-table th {
  font-family: var(--font-space); font-size: var(--t-caption); letter-spacing: 0.08em;
  color: var(--ink-read); padding: 14px; border-bottom: 2px solid var(--line-hair);  /* A-17: AA */
}
/* graphics: darken the muted "Google" ROAS/compare greys to clear AA (large text 3:1) */
.lp .tcp-graphic .rval.g { color: #5f6368; }
.lp .cp-table td { padding: 16px 14px; border-bottom: 1px solid var(--line-hair); color: var(--ink-read); font-size: 16px; }
.lp .cp-table td:last-child { font-family: var(--font-space); color: var(--terra-deep); }

/* FAQ -> premium card (matches forside .faq) */
.lp .cp-faq {
  background: var(--cream-raised); border: 1px solid var(--line-hair);
  border-radius: var(--r-card); box-shadow: var(--elev-1); padding: 8px var(--s-5); margin-top: var(--s-4);
}
.lp .cp-faq__item { border-bottom: 1px solid var(--line-hair); }
.lp .cp-faq__item summary { font-family: var(--font-syne); font-weight: 600; font-size: var(--t-h3); color: var(--ink-strong); }
.lp .cp-faq__item summary::after { color: var(--terra); }
.lp .cp-faq__a p { font-family: var(--font-dm); font-size: 16px; line-height: 1.6; color: var(--ink-read); }

/* final CTA -> charcoal climax (matches forside finalcta) */
.lp .cp-cta {
  background: linear-gradient(160deg, var(--charcoal-2), var(--charcoal-3));
  border: 1px solid var(--line-on-dark); border-radius: var(--r-card);
  box-shadow: var(--elev-dark); padding: clamp(48px, 7vw, 80px) var(--s-4);
  margin-top: clamp(64px, 9vw, 120px); position: relative; overflow: hidden;
}
.lp .cp-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 15%, rgba(192,74,45,.20), transparent 70%);
}
.lp .cp-cta h2 { font-family: var(--font-syne); font-weight: 700; color: var(--on-dark); position: relative; }
.lp .cp-cta p { color: var(--on-dark-soft); position: relative; }
.lp .cp-cta__guarantee { font-family: var(--font-space); color: var(--on-dark-soft); position: relative; }
.lp .cp-cta__guarantee svg path { stroke: #e8a48f; }
.lp .cp-cta__row { position: relative; }
.lp .cp-cta__alt { position: relative; }
.lp .cp-cta__alt a { color: var(--on-dark-soft); }
.lp .cp-cta__alt a:hover { color: #fff; }

/* buttons -> forside recipe (one dominant terracotta primary + ghost) */
.lp .cp-btn {
  font-family: var(--font-dm); font-weight: 500; font-size: 17px;
  border-radius: var(--r-pill); padding: 16px 26px; transition: background .16s, transform .12s, box-shadow .16s;
}
.lp .cp-btn--primary { background: var(--terra); border-color: var(--terra); color: #fff; box-shadow: var(--elev-1); }
.lp .cp-btn--primary:hover { background: var(--terra-deep); border-color: var(--terra-deep); transform: translateY(-2px); box-shadow: var(--elev-2); }
.lp .cp-cta .cp-btn--ghost { background: transparent; color: var(--on-dark); border: 1px solid rgba(248,245,240,.4); }
.lp .cp-cta .cp-btn--ghost:hover { background: var(--on-dark); color: var(--charcoal); border-color: var(--on-dark); }

/* breadcrumb -> mono */
.lp .tcp-breadcrumb { font-family: var(--font-space); color: var(--ink-soft); }

/* WOW sections on inner pages inherit the forside treatment (they already carry
   .wow-* classes; scope the key colour rules to .lp so they read terracotta here too) */
.lp .wow-obj__item { background: var(--terra-tint); color: var(--ink-strong); }
.lp .wow-obj__check { background: var(--terra); color: #fff; }
.lp .wow-risk { background: var(--terra-tint); border-color: var(--line-terra); color: var(--terra-deep); }
.lp .wow-obj__h { font-family: var(--font-syne); font-weight: 700; }

/* dark-panel guard: inner-page CTA is dark, so keep header CTA readable */
.lp .cp-cta .icon, .lp .cp-cta svg { color: #e8a48f; }

/* wide proof-graphics on inner pages must not force page-width on mobile:
   let them scroll inside their own section instead of the document. */
.lp .cp-sec .tcp-graphic { max-width: 100%; }
.lp .cp-sec .tcp-graphic .tile { max-width: 100%; }
@media (max-width: 640px) {
  .lp .cp-sec .tcp-graphic { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lp .cp-sec .tcp-graphic > * { min-width: 0; }
}
/* belt-and-suspenders: clip any residual horizontal spill on the inner-page body */
body.lp { overflow-x: clip; }

/* ==========================================================================
   PREMIUM POLISH PASS (A-15) , ~86 -> ~92 finish. CSS-only, scoped to .lp so it
   only touches premium pages. Lifts comparison widgets to the card recipe +
   a micro-finish pass (hover/focus, rhythm, type detail, curated glow).
   ========================================================================== */

/* ---- Comparison widgets: budkraft-bars (retire hardcoded warm-greys) ---- */
.lp .biddingcard { padding: var(--s-5); box-shadow: var(--elev-2); border-color: var(--line-hair); }
.lp .biddingcard__title { font-family: var(--font-space); letter-spacing: 0.1em; color: var(--ink-soft); }
.lp .bar { margin-bottom: var(--s-3); }
.lp .bar__label { font-family: var(--font-dm); font-weight: 600; color: var(--ink-strong); }
.lp .bar__label .cpc { font-family: var(--font-space); color: var(--ink-soft); }
.lp .bar__track {
  height: 28px; background: var(--cream-sunken); border: 1px solid var(--line-hair);
  border-radius: var(--r-pill); box-shadow: inset 0 1px 2px rgba(26,26,26,.05);
}
.lp .bar__fill { border-radius: var(--r-pill); }
.lp .bar__fill--muted { background: linear-gradient(90deg, var(--sand-300), var(--sand-400)); }
.lp .bar__fill--accent { background: linear-gradient(90deg, var(--terra), var(--terra-deep)); box-shadow: var(--elev-1); }
.lp .bar__tag { font-family: var(--font-space); font-weight: 700; }
.lp .bar__fill--muted .bar__tag { color: var(--ink-read); }
.lp .biddingcard__foot { font-family: var(--font-dm); color: var(--ink-read); border-top: 1px solid var(--line-hair); padding-top: var(--s-3); }
.lp .biddingcard__foot b { color: var(--terra); }

/* ---- Comparison widget: savings calculator (premium input + slider) ---- */
.lp .calc { padding: var(--s-5); box-shadow: var(--elev-2); border-color: var(--line-hair); }
.lp .calc label { font-family: var(--font-space); letter-spacing: 0.08em; color: var(--ink-soft); }
.lp .calc__input-wrap {
  border: 1px solid var(--line-hair); background: var(--cream-raised);
  border-radius: var(--r-sm); transition: border-color .15s, box-shadow .15s;
}
.lp .calc__input-wrap:focus-within { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(192,74,45,.14); }
.lp .calc__prefix {
  font-family: var(--font-space); color: var(--terra-deep); background: var(--terra-tint);
  border-right: 1px solid var(--line-terra);
}
.lp .calc input[type="number"] { font-family: var(--font-space); font-weight: 700; color: var(--ink-strong); font-size: 1.15rem; }
.lp .calc__out { border-top: 1px solid var(--line-hair); }
.lp .calc__out-label { font-family: var(--font-dm); color: var(--ink-read); }
.lp .calc__out-value { font-family: var(--font-space); font-weight: 700; color: var(--terra); }
.lp .calc__assumption { font-family: var(--font-space); color: var(--ink-soft); }

/* premium range slider (spec 1.7): 6px track, terracotta thumb + ring */
.lp .calc input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; background: transparent; margin-top: var(--s-3); }
.lp .calc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--terra) 0 var(--range-fill, 20%), var(--cream-sunken) var(--range-fill, 20%)); }
.lp .calc input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--cream-sunken); }
.lp .calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--terra); }
.lp .calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--terra); box-shadow: var(--elev-1); cursor: pointer; transition: transform .12s, box-shadow .15s; }
.lp .calc input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--terra); box-shadow: var(--elev-1); cursor: pointer; }
.lp .calc input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); box-shadow: var(--elev-2); }
.lp .calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(192,74,45,.20); }

/* ==========================================================================
   MICRO-FINISH , the difference between 86 and 92
   ========================================================================== */

/* consistent, WCAG-visible focus ring on every interactive element */
.lp a:focus-visible, .lp button:focus-visible, .lp summary:focus-visible,
.lp input:focus-visible, .lp .lp-btn:focus-visible, .lp .cp-btn:focus-visible {
  outline: 3px solid var(--terra); outline-offset: 2px; border-radius: 4px;
}

/* card hover-lift (subtle elevation + warm border), 150ms ease */
.lp .numbers__item, .lp .cp-benefits li, .lp .home-explain-card,
.lp .biddingcard, .lp .calc, .lp .realproof__card, .lp .founder {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lp .numbers__item:hover, .lp .cp-benefits li:hover, .lp .home-explain-card:hover,
.lp .realproof__card:hover {
  transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--line-terra);
}
.lp .numbers__item--key:hover { box-shadow: var(--elev-3); }

/* text links: terracotta underline slide-in on hover */
.lp .cp-sec a, .lp .wow-eu__verify, .lp .cp-cta__alt a {
  text-underline-offset: 3px; transition: color .15s;
}
.lp .cp-sec a:hover { color: var(--terra); text-decoration-color: var(--terra); }

/* FAQ summary: hover accent + smooth marker */
.lp .cp-faq__item summary, .lp .faq summary { transition: color .15s; cursor: pointer; }
.lp .cp-faq__item summary:hover, .lp .faq summary:hover { color: var(--terra); }
.lp .cp-faq__item summary::after, .lp .faq summary::after { transition: transform .18s ease, color .15s; }
.lp .cp-faq__item[open] summary::after, .lp .faq details[open] summary::after { color: var(--terra); }

/* type detail: tighter tracking on the big Syne headlines, tabular numerals */
.lp .lp-hero h1, .lp .cp h1 { letter-spacing: -0.025em; }
.lp .breath__statement, .lp .wow-roi__q, .lp .home-proof__h { letter-spacing: -0.02em; }
.lp .numbers__value, .lp .wow-stat b, .lp .calc__out-value, .lp .pcard__cpc,
.lp .bar__tag, .lp .wow-roi__num b { font-variant-numeric: tabular-nums; }

/* curated terracotta glow: one soft warm halo behind the founder block only
   (atmosphere, not decoration) */
.lp .founder { position: relative; overflow: hidden; }
.lp .founder::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 88% 12%, rgba(192,74,45,.06), transparent 70%);
}

/* nav links: subtle terracotta hover */
.lp .lp-nav__links a { transition: color .15s; }
.lp .lp-nav__links a:hover { color: var(--terra); }

/* secondary/ghost buttons: consistent hover-lift transition */
.lp .lp-btn--ghost, .lp .cp-btn { transition: background .16s, color .16s, transform .12s, box-shadow .16s, border-color .16s; }

/* section rhythm harmoniser: kill "almost-equal" jumps between --alt and base
   cream sections on premium pages */
.lp .tcp-section, .lp .tcp-section--alt { padding-block: clamp(72px, 9vw, 120px); }
.lp .tcp-section--tight { padding-block: clamp(56px, 7vw, 88px); }

/* ==========================================================================
   A11y (A-17): row-header cells in comparison tables keep the body-cell look
   (scope="row" added for td-has-header). Left-aligned, normal weight.
   ========================================================================== */
.cp-table td, .cp-table th[scope="row"] { text-align: left; }
.cp-table th[scope="row"] { font-weight: 500; color: var(--color-text); }
.lp .cp-table th[scope="row"] { font-family: var(--font-dm); font-weight: 600; color: var(--ink-strong); font-size: 16px; padding: 16px 14px; border-bottom: 1px solid var(--line-hair); }

/* ==========================================================================
   A-21: Blog discovery , hub search + homepage "from the blog" section.
   ========================================================================== */
/* Blog-hub live search input (client-side filter; blog-search.js) */
.blog-search { position: relative; max-width: 460px; margin: 1.8rem 0 0.4rem; }
.blog-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; display: flex; }
.blog-search__input {
  width: 100%; box-sizing: border-box; font-family: var(--font-body, inherit); font-size: 1rem;
  color: var(--color-text); background: var(--surface-card, #fbf9f5);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 13px 18px 13px 46px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.blog-search__input::placeholder { color: var(--color-text-muted); }
.blog-search__input:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.blog-search__input:focus { outline: none; border-color: var(--color-accent); }
/* filtered-out cards collapse so the grid reflows with no gaps */
.blog-card[hidden] { display: none; }
.blog-noresults { font-family: var(--font-body, inherit); font-size: 1rem; color: var(--color-text-secondary); margin: 1.6rem 0 0; }

/* Homepage "from the blog" section (premium .lp look, matches .blog-card) */
.home-blog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 1.6rem; }
.home-blog__all { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--color-accent-text); text-decoration: none; white-space: nowrap; }
.home-blog__all:hover { color: var(--color-accent-hover, var(--color-accent)); text-decoration: underline; text-underline-offset: 3px; }
.home-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home-article {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--surface-card, #fbf9f5); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 24px; transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.home-article:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--elev-2, 0 16px 48px rgba(26,26,26,.10)); }
.home-article__date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-text-muted); margin: 0 0 10px; }
.home-article__title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.25; color: var(--color-text); margin: 0 0 10px; }
.home-article__desc { font-size: 0.94rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 16px; flex: 1; }
.home-article__more { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-accent-text); }
/* .lp premium: headings key off Syne, body off DM Sans (like the rest of the home) */
.lp .home-article__title { font-family: var(--font-syne); }
.lp .home-article__desc, .lp .blog-search__input, .lp .blog-noresults { font-family: var(--font-dm); }
@media (max-width: 900px) { .home-article-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   A-26 , wow + trust + intro-offer + PMax + animated CPC mechanism
   ========================================================================== */

/* --- Trust-bar (compact, premium, directly under hero) --- */
.lp .trustbar { border-block: 1px solid var(--line-terra); background: var(--cream-raised); }
.lp .trustbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 26px; padding: 18px clamp(20px, 4vw, 40px);
  font-family: var(--font-space); font-size: 0.82rem; letter-spacing: 0.02em;
  color: var(--ink-800, #241f1a);
}
.lp .trustbar__item { display: inline-flex; align-items: center; gap: 8px; }
.lp .trustbar__item svg { flex: 0 0 auto; color: var(--terra); }
.lp .trustbar__sep { width: 1px; height: 16px; background: var(--line-terra); }
@media (max-width: 720px) {
  .lp .trustbar__sep { display: none; }
  .lp .trustbar__inner { gap: 12px 20px; font-size: 0.78rem; }
}

/* --- Launch offer banner (LAUNCH30, honest scarcity cap=50) --- */
.lp .launchbanner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px; text-align: center;
  background: linear-gradient(150deg, var(--terra) 0%, var(--terra-deep) 100%);
  color: #fff; border-radius: var(--r-card); padding: 16px clamp(20px, 4vw, 32px);
  box-shadow: var(--elev-2);
}
.lp .launchbanner__tag {
  font-family: var(--font-space); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--r-pill); padding: 5px 12px;
}
.lp .launchbanner__txt { font-family: var(--font-syne); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.24rem); letter-spacing: -0.01em; }
.lp .launchbanner__sub { font-family: var(--font-space); font-size: 0.78rem; color: rgba(255,255,255,.86); }
.lp .launchbanner__wrap { max-width: var(--container-max, 1120px); margin: clamp(28px, 4vw, 40px) auto 0; padding-inline: clamp(20px, 4vw, 40px); box-sizing: border-box; }

/* --- PMax line/badge --- */
.lp .pmax-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-space); font-size: 0.86rem; color: var(--ink-800, #241f1a);
  background: var(--positive-100); border: 1px solid var(--line-terra);
  border-radius: var(--r-pill); padding: 9px 18px;
}
.lp .pmax-line b { color: var(--terra-deep); font-weight: 700; }
.lp .pmax-line svg { flex: 0 0 auto; color: var(--terra); }
.lp .pmax-wrap { margin-top: 1.4rem; text-align: center; }

/* --- Zero-risk / "you own the account" strip (moved up from subpages) --- */
.lp .zerorisk { }
.lp .zerorisk__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; max-width: 980px; margin: 0 auto;
}
.lp .zerorisk__item {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--cream-raised); border: 1px solid var(--line-terra);
  border-radius: var(--r-sm); padding: 16px 18px;
  font-size: 0.96rem; line-height: 1.4; color: var(--ink-800, #241f1a);
}
.lp .zerorisk__check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--terra); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 0.78rem; font-weight: 700; margin-top: 1px;
}

/* --- Animated before/after CPC mechanism graphic (Task 7) ---
   Built on the A-22 .tcp-graphic scroll-trigger system: paused until .in-view.
   Honest illustration only (labelled "Eksempel"), never a claimed customer result. */
.lp .cpc-anim { max-width: 760px; margin: 0 auto; }
.lp .cpc-anim__frame {
  background: #fff; border: 1px solid var(--tg-gborder, #dcd7cf);
  border-radius: var(--r-card); box-shadow: var(--elev-2); overflow: hidden;
}
.lp .cpc-anim__bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  border-bottom: 1px solid var(--tg-gborder, #e5e0d8);
  font-family: var(--font-space); font-size: 0.78rem; color: #5f6368;
}
.lp .cpc-anim__dot { width: 10px; height: 10px; border-radius: 50%; background: #d9d4cc; }
.lp .cpc-anim__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.lp .cpc-anim__col { padding: clamp(20px, 3vw, 30px); }
.lp .cpc-anim__col--after { background: linear-gradient(180deg, rgba(192,74,45,.05), rgba(192,74,45,.02)); border-left: 1px solid var(--tg-gborder, #e5e0d8); }
.lp .cpc-anim__lab { font-family: var(--font-space); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8478; margin: 0 0 4px; }
.lp .cpc-anim__prov { font-family: var(--font-space); font-size: 0.82rem; color: #5f6368; margin: 0 0 16px; }
.lp .cpc-anim__prov b { color: var(--terra-deep); }
.lp .cpc-anim__metric { margin: 0 0 14px; }
.lp .cpc-anim__mlab { font-family: var(--font-space); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: #8a8478; margin: 0 0 3px; }
.lp .cpc-anim__val { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-syne); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1.05; }
.lp .cpc-anim__val .cpc-count { white-space: nowrap; }
.lp .cpc-anim__col--after .cpc-anim__val { color: var(--terra-deep); }
.lp .cpc-anim__pill {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-family: var(--font-space); font-weight: 700; font-size: 0.68rem;
  color: #fff; background: var(--terra); border-radius: var(--r-pill); padding: 3px 8px;
}
.lp .cpc-anim__foot {
  font-family: var(--font-space); font-size: 0.72rem; letter-spacing: 0.04em;
  color: #8a8478; text-align: center; padding: 12px 16px;
  border-top: 1px solid var(--tg-gborder, #e5e0d8); margin: 0;
}
@media (max-width: 560px) {
  .lp .cpc-anim__body { grid-template-columns: 1fr; }
  .lp .cpc-anim__col--after { border-left: 0; border-top: 1px solid var(--tg-gborder, #e5e0d8); }
}
/* A-28: the cpc number is a SINGLE .cpc-count span. a28-motion.js counts it from
   data-from to data-to (real odometer, no overlapping stacked spans). The static
   text is the final "after" value, so JS-off / reduced-motion shows the correct
   settled number with no motion. */
.lp .cpc-anim .cpc-count { display: inline-block; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   A-27 , design-panel Tier 1: above-fold price/offer, payment trust, CTA micro
   ========================================================================== */

/* --- Hero above-fold price + offer chips (pris/tilbud over folden, mobil) --- */
.lp .hero-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--s-4); }
.lp .hero-price {
  font-family: var(--font-space); font-weight: 700; font-size: 1rem; color: var(--ink-strong);
  background: var(--cream-raised); border: 1px solid var(--line-terra);
  border-radius: var(--r-pill); padding: 8px 16px;
}
.lp .hero-price b { color: var(--terra-deep); }
.lp .hero-offer__founding {
  font-family: var(--font-space); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.01em;
  color: #fff; background: var(--terra); border-radius: var(--r-pill); padding: 8px 14px;
}

/* --- CTA risk-remover micro-text (under hver primær CTA) --- */
.lp .cta-micro {
  font-family: var(--font-space); font-size: 0.8rem; letter-spacing: 0.01em;
  color: var(--ink-read); margin: 12px 0 0;
}
.lp .cta-micro__dot { color: var(--line-terra); margin: 0 6px; }

/* --- Payment / security trust row (under CTA + i footer) --- */
.lp .paytrust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 0; }
.lp .paytrust__lock { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-space); font-size: 0.78rem; color: var(--ink-read); }
.lp .paytrust__lock svg { color: var(--terra); flex: 0 0 auto; }
.lp .paytrust__marks { display: inline-flex; align-items: center; gap: 8px; }
.lp .paymark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 8px; border: 1px solid var(--line-terra);
  border-radius: 6px; background: #fff;
  font-family: var(--font-space); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.02em;
  color: var(--charcoal); white-space: nowrap;
}
.lp .paymark svg { display: block; }
/* the footer is a LIGHT/cream surface, so the payment row uses dark-on-light
   (matches the rest of the footer, and passes AA contrast). */
.lp .paytrust--footer { justify-content: flex-start; margin-top: 14px; }
.lp .paytrust--footer .paytrust__lock { color: var(--ink-read); }
.lp .paytrust--footer .paymark { background: #fff; border-color: var(--line-terra); }

/* --- Founding-framing launch banner: reuse .launchbanner, add founding note --- */
.lp .launchbanner__founding {
  font-family: var(--font-space); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--r-pill); padding: 5px 12px; color: #fff;
}

/* --- Promoted live-ad proof: full-bleed landmark treatment --- */
.lp .home-proof.is-landmark { }
.lp .home-proof.is-landmark .home-proof__h { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* --- header CTA promoted to filled primary (ét primært CTA, Task 5) --- */
.lp .lp-header__cta {
  background: var(--terra); color: #fff; border: 1px solid var(--terra);
}
.lp .lp-header__cta:hover { background: var(--terra-deep); border-color: var(--terra-deep); }

/* --- clickable EU verify link --- */
/* EU verify link: dark-terracotta by default (the wow-eu card is cream on the 26
   generated homes), light terracotta only inside the .ch-charcoal chapter used by
   the da/de/en verbatim homes. Both pass AA on their own ground. */
.lp .wow-eu__verify a, .lp a.wow-eu__verify { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 3px; }
.lp .wow-eu__verify a:hover { color: var(--terra); }
.lp .ch-charcoal .wow-eu__verify a { color: #e8a48f; }
.lp .ch-charcoal .wow-eu__verify a:hover { color: #fff; }
.lp .realproof__verify { margin: 14px 0 0; font-family: var(--font-space); font-size: 0.86rem; }
.lp .realproof__verify a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 3px; }
.lp .realproof__verify a:hover { color: var(--terra); }

/* ==========================================================================
   A-28 , design-panel Tier 2/3 craft: mobile hero, count-up, scroll-reveal,
   terracotta rationing, card consistency, micro-interactions, sticky CTA
   ========================================================================== */

/* --- Item 1: tighter mobile hero so price + primary CTA sit within the fold --- */
@media (max-width: 560px) {
  /* A-31: .tcp-section specificity so this beats the compact desktop base rule. */
  .lp .lp-hero.tcp-section { min-height: auto; padding-block: clamp(48px, 11vw, 64px); }
  .lp .lp-hero h1 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.05; margin: 0 0 var(--s-3); }
  .lp .lp-hero__sub { font-size: 1rem; line-height: 1.5; margin: 0 0 var(--s-3); max-width: 40ch; }
  .lp .lp-hero__reg { margin-bottom: var(--s-2); }
  .lp .hero-offer { margin-bottom: var(--s-3); gap: 8px; }
  .lp .lp-hero__cta-row { gap: var(--s-2); }
  .lp .cta-micro { margin-top: 10px; }
  .lp .paytrust { margin-top: 12px; }
  /* the price-card visual is decorative on mobile; let the text + CTA lead */
  .lp .lp-hero .hero-visual { margin-top: var(--s-3); }
}

/* --- Item 3/6: count-up target uses a single non-overlapping number span.
   The JS writes into .cpc-num / .stat-num directly; no crossfade of 2 stacked
   spans. Keep the layout stable so counting never shifts the row. --- */
.lp .cpc-num, .lp .stat-num { font-variant-numeric: tabular-nums; }

/* --- Item 6: one discrete, consistent scroll-reveal for section titles, list
   items and stat numbers (the "dead middle"). Paused until .reveal-in is added
   by graphics-anim.js (one-shot IntersectionObserver). Reduced-motion shows the
   final state instantly. --- */
.lp .reveal { opacity: 0; transform: translateY(12px); }
.lp .reveal.reveal-in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); }
.lp .reveal.reveal--d1.reveal-in { transition-delay: .06s; }
.lp .reveal.reveal--d2.reveal-in { transition-delay: .12s; }
.lp .reveal.reveal--d3.reveal-in { transition-delay: .18s; }
.lp .reveal.reveal--d4.reveal-in { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .lp .reveal { opacity: 1; transform: none; }
  .lp .reveal.reveal-in { transition: none; }
}

/* --- Item 4: terracotta rationing. Full terracotta stays on the primary CTA +
   one key number per section. Demote the supporting roles (eyebrow underline
   strokes, checklist checks, hero highlight underline) to a muted terracotta so
   nothing competes with the CTA + hero highlight. --- */
.lp .zerorisk__check { background: var(--terra-deep); }          /* was full --terra; deep = calmer */
.lp .wow-obj__check { background: var(--terra-deep); }
.lp .eyebrow::before, .lp .wow-eyebrow::before { background: var(--line-terra); }  /* stroke -> hairline */
.lp .lp-hero__reg::before { background: var(--terra-deep); }
.lp .pmax-line svg, .lp .trustbar__item svg { color: var(--terra-deep); }

/* --- Item 7: card consistency. One radius scale (card = --r-card 16px, small =
   --r-sm 12px, pill), one elevation ramp (--elev-1 resting, --elev-2 raised),
   one hairline border. Normalise the components that drifted to bespoke values. --- */
.lp .home-explain-card, .lp .biddingcard, .lp .serpcard, .lp .realproof__card,
.lp .calc, .lp .tcp-step, .lp .how-step { border-radius: var(--r-card); box-shadow: var(--elev-1); border: 1px solid var(--line-terra); }
.lp .cpc-anim__frame, .lp .zerorisk__item { box-shadow: var(--elev-1); }

/* Item 7: the skeuomorphic "browser dots" on the before/after frame , keep them
   but make them a single consistent, quiet token (they read as a browser chrome
   affordance, which is the point of the Google-Ads mockup). One size, one colour. */
.lp .cpc-anim__dot { width: 9px; height: 9px; background: var(--line-terra); }

/* --- Item 8: micro-interactions --- */
/* hover-lift on the side-by-side compare cards (the By TheCSSPartner card leads) */
.lp .tcp-graphic .gcard { transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .lp .tcp-graphic .compare .col:last-child .gcard:hover { transform: translateY(-4px); box-shadow: var(--elev-2); }
}
/* :active press-state on primary buttons */
.lp .lp-btn--primary:active { transform: translateY(1px) scale(.995); box-shadow: var(--elev-1); }
/* calculator output flash when the slider moves (JS toggles .is-flash) */
.lp .calc__out-value { transition: color .35s ease; }
.lp .calc__out-value.is-flash { color: var(--terra-deep); }

/* --- Item 9: mobile sticky bottom CTA bar (full-bleed, 56px tap target). Hidden
   on desktop; appears on scroll past the hero (JS toggles .is-visible). --- */
.lp-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(248,245,240,.94); backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line-terra); box-shadow: 0 -6px 20px rgba(33,22,14,.08);
  transform: translateY(100%); transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.lp-stickybar.is-visible { transform: none; }
/* A-28 verify-fix: the price must SHRINK (ellipsis) so a long localized string
   ("Fra 149 kr/md pr. shop") can never push the CTA off-screen at 320px; the CTA
   is fixed-size and always reachable (>=44px tap target). */
.lp-stickybar__price { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-space); font-weight: 700; font-size: 0.84rem; color: var(--ink-strong); }
.lp-stickybar__price b { color: var(--terra-deep); }
.lp-stickybar__cta {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center;
  background: var(--terra); color: #fff; border-radius: var(--r-pill); padding: 0 20px;
  font-family: var(--font-dm); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.lp-stickybar__cta:active { background: var(--terra-deep); }
/* reserve footer space for the bar incl. the notch safe-area (verify-fix: the bar
   can be ~64px + safe-area, so the reservation must include env() too). */
@media (max-width: 700px) { .lp-stickybar { display: flex; } .lp .lp-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .lp-stickybar { transition: none; } }

/* --- Item 10: founder + footer trust solidity --- */
.lp .founder__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-family: var(--font-space); font-size: 0.82rem; }
.lp .founder__meta a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 3px; }
.lp .founder__meta a:hover { color: var(--terra); }
.lp .lp-footer__contact { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--color-text-muted); }
.lp .lp-footer__contact a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.lp .lp-footer__contact a:hover { color: var(--terra-deep); }

/* ==========================================================================
   A-30 , CSS-partner pillar page block components (answer/highlight/trust/steps)
   ========================================================================== */
/* featured-snippet answer box , cream card, terracotta left rule */
.lp .cp-answer {
  background: var(--cream-raised); border: 1px solid var(--line-terra);
  border-left: 3px solid var(--terra); border-radius: var(--r-card);
  padding: clamp(18px, 3vw, 26px); margin: 0 0 var(--s-3);
  font-size: 1.05rem; line-height: 1.65; color: var(--ink-read); box-shadow: var(--elev-1);
}
.lp .cp-answer strong { color: var(--ink-strong); }
/* highlight / callout box , charcoal-tinted, quieter */
.lp .cp-highlight {
  background: color-mix(in srgb, var(--terra) 6%, var(--cream-raised));
  border: 1px solid var(--line-terra); border-radius: var(--r-card);
  padding: clamp(16px, 2.6vw, 22px); margin: var(--s-3) 0;
  font-family: var(--font-syne); font-weight: 600; font-size: 1.06rem;
  line-height: 1.5; color: var(--ink-strong);
}
.lp .cp-highlight strong { color: var(--terra-deep); }
/* trust strip , mono, small-caps row of tokens */
.lp .cp-trust-strip {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  margin: 0 0 var(--s-3); font-family: var(--font-space); font-size: 0.76rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-read);
}
.lp .cp-trust-strip span { display: inline-flex; align-items: center; }
.lp .cp-trust-strip span:not(:last-child)::after {
  content: "\00b7"; margin-left: 10px; color: var(--line-terra);
}
/* numbered process steps */
.lp .cp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: var(--s-3) 0; }
.lp .cp-step {
  background: var(--surface-card, var(--cream-raised)); border: 1px solid var(--line-terra);
  border-radius: var(--r-card); padding: 22px; box-shadow: var(--elev-1);
}
.lp .cp-step__n { font-family: var(--font-space); font-weight: 700; font-size: 0.8rem; color: var(--terra-deep); letter-spacing: 0.06em; }
.lp .cp-step h3 { font-family: var(--font-syne); font-weight: 700; font-size: 1.05rem; margin: 8px 0 6px; color: var(--ink-strong); }
.lp .cp-step p { font-size: 0.98rem; line-height: 1.55; color: var(--ink-read); margin: 0; }
/* inline anchor CTA */
.lp .cp-cta-inline { margin: var(--s-3) 0 0; font-family: var(--font-space); font-size: 0.9rem; }
.lp .cp-cta-inline a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.lp .cp-cta-inline a:hover { color: var(--terra); }