/* Shared site styles, lifted verbatim from index.html's inline <style>
   blocks so the legal pages match the landing page exactly without
   duplicating ~560 lines twelve times. index.html keeps its inline copy;
   this file is what the legal pages link. */
/* Inter, self-hosted. No request leaves this origin for fonts. */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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;
}
  /* ---- pdfmundo token system (matched) ---- */
  :root {
    /* PALETTE — copied by hand from the mundo design SSOT,
       ~/pdfmundo/src/styles/tokens.css. lovelymundo is standalone HTML and
       deliberately does NOT import core; it OBSERVES core's design, so these
       are literal copies of core's values under lovelymundo's own token
       names. When core's palette moves, re-copy the hex here.
         lovelymundo name  ->  core token
         --ink-strong      ->  --text-primary
         --ink-body        ->  --text-secondary
         --ink-muted       ->  --text-muted
         --ink-faint       ->  --text-faint
         --accent-dark     ->  --accent-on-light-text  (small accent TEXT, AA-normal)
         --accent-soft     ->  --tile-coral
       Spacing / radius / type-scale are NOT core's numbers — see the note on
       the scale block below; that divergence is deliberate. */
    --bg-page: #FFFBF5;
    --bg-card: #FFFFFF;
    --bg-soft: #FFF1DD;
    --bg-hero: #FFF7EE;
    --ink-strong: #1A1F2E;
    --ink-body: #4A5568;
    --ink-muted: #6B7280;       /* 4.6:1 on cream — was #857C6E at 3.9:1, AA fail */
    --ink-faint: #9CA3AF;
    --accent: #FF6B6B;          /* core --accent — the mundo coral */
    --accent-hover: #FF5252;    /* core --accent-hover */
    --accent-deep: #D63B3B;     /* core --accent-deep — core's documented remedy
                                   wherever accent needs real contrast */
    --accent-on-light: #D85555; /* core --accent-on-light — the "mundo" wordmark */
    --accent-dark: #B91C1C;     /* core --accent-on-light-text — 6.2:1 on cream */
    --accent-soft: #FFE0D6;
    --border-light: #F0E5D5;
    --border-strong: #DAC8AC;
    /* SCALE — deliberately NOT core's numbers. core's spacing/radius/type
       scale is a DIFFERENT scale, not a drifted one: core has --space-7 and
       no --space-16/--space-20; lovelymundo has --space-16/--space-20 and no
       --space-7, and the shared names carry different values (core
       --space-12 = 96px, here 48px). Forcing core's values into these names
       would silently re-space all 18 pages — a redesign, not a drift fix.
       Brand consistency across the network is carried by the palette, the
       typeface and the wordmark, which ARE matched exactly. */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --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;
    --fs-fine: 13px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fs-3xl: 38px;
    --fs-4xl: 48px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --container-max: 1120px;
    --container-pad: 24px;
    --shadow-card: 0 1px 2px rgba(30,27,22,.04), 0 4px 16px rgba(30,27,22,.05);
    --shadow-card-hover: 0 2px 4px rgba(30,27,22,.06), 0 10px 28px rgba(30,27,22,.09);
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--ink-body);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3 { color: var(--ink-strong); line-height: 1.2; margin: 0; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }

  .container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }

  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink-strong); color: #fff; padding: var(--space-3) var(--space-5);
    border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
  }
  .skip-link:focus { left: 0; }

  /* ---- top nav ---- */
  .topnav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,251,245,.86);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-light);
  }
  /* Header bar geometry, matched to the core sites' TopNav (.nav-row there):
     FULL WIDTH with the brand pinned to the edge, not a centred 1120px column.
     This element also carries .container, so the cap and the container padding
     are overridden here — .container sets max-width:1120px and 24px padding,
     which put the brand 241px from the edge at 1568px while pdfmundo puts it at
     32px. The nav below is flex:1, so it takes the rest of the row and no
     justify-content is needed here.
     Edge padding matches core's token VALUES, not ours: core's --space-6 is
     32px where ours is 24px, so the 32px step here is --space-8. */
  .topnav__inner {
    display: flex; align-items: center; gap: var(--space-8);
    height: 64px;
    max-width: none;
    padding-left: var(--space-8); padding-right: var(--space-8);
  }
  /* Same breakpoint core narrows at (its @media max-width:1023px → --space-5 = 24px). */
  @media (max-width: 1023px) {
    .topnav__inner { padding-left: var(--space-6); padding-right: var(--space-6); }
  }
  /* Wordmark — core's Logo.astro treatment, copied by hand: the name renders
     at medium weight in --ink-strong with the "mundo" suffix at 700 in the
     accent. pdfmundo renders pdf+mundo, mdmundo md+mundo, this lovely+mundo,
     so the family reads as one system. (core .logo-text / .logo-text-mundo.) */
  .brand {
    display: flex; align-items: center; gap: var(--space-3);
    font-weight: var(--fw-medium); font-size: var(--fs-lg); color: var(--ink-strong);
    letter-spacing: -.01em;
  }
  /* One flex item, not two: .brand is display:flex with a gap, so a bare
     "lovely" text node beside the suffix span became a second item and the
     gap rendered the name as "lovely mundo". */
  .brand__name { display: inline; }
  .brand__suffix { color: var(--accent-on-light); font-weight: var(--fw-bold); }
  .brand__mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    display: grid; place-items: center; color: #fff; font-weight: var(--fw-bold); font-size: 15px;
    flex: none;
  }
  /* Grouping, matched to core's TopNav: the nav anchors belong WITH the logo on
     the left (core's .nav-left is logo + links), and the language control sits
     alone on the right (core's .nav-right). lovelymundo has one <nav> holding
     both, so the split is done here rather than by restructuring 54 pages of
     markup: the nav fills the row, its anchors stay next to the brand, and the
     picker is pushed to the far edge. Reads as core does —
     [logo  Products  How it works  Company] … [EN ▾]. */
  .topnav__links { display: flex; flex: 1; gap: var(--space-5); align-items: center; }
  .topnav__links > .langpick { margin-left: auto; }
  .topnav__links a { color: var(--ink-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
  .topnav__links a:hover { color: var(--ink-strong); }
  @media (max-width: 680px) { .topnav__links a.hide-sm { display: none; } }
  /* Below 560px the bar cannot hold brand + links + language picker: the
     brand is ~164px and the links ~214px against the ~327px a 390px
     viewport leaves, so the page scrolled sideways. Drop the plain nav
     anchors and keep the brand and the picker — Products / How it works /
     Company all appear in the footer, so nothing becomes unreachable, and
     language switching stays one tap away on a three-locale site.
     `> a` is direct-children only, so the picker's own links are safe. */
  @media (max-width: 560px) {
    .topnav__links > a { display: none; }
    .topnav__links { gap: var(--space-3); }
  }
  .langpick { position: relative; }
  .langpick summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    color: var(--ink-muted); padding: 5px 10px; border-radius: 8px;
    border: 1px solid var(--border-light);
  }
  .langpick summary::-webkit-details-marker { display: none; }
  .langpick summary::after { content: "\25BE"; font-size: 10px; opacity: .7; }
  .langpick summary:hover { color: var(--ink-strong); border-color: var(--border-strong); }
  .langpick[open] summary { color: var(--ink-strong); border-color: var(--border-strong); }
  .langpick__menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 10px; box-shadow: var(--shadow-card-hover);
    padding: 6px; min-width: 150px; z-index: 60;
    display: flex; flex-direction: column; gap: 2px;
  }
  .langpick__menu a {
    font-size: var(--fs-sm); color: var(--ink-body);
    padding: 8px 10px; border-radius: 7px;
  }
  .langpick__menu a:hover { background: var(--bg-soft); color: var(--ink-strong); }
  .langpick__menu a[aria-current="true"] { color: var(--accent-dark); font-weight: var(--fw-semibold); }

  /* ---- hero ---- */
  .hero {
    background: linear-gradient(180deg, var(--bg-hero) 0%, var(--bg-page) 100%);
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-20) 0 var(--space-16);
    text-align: center;
  }
  .eyebrow {
    display: inline-flex; gap: var(--space-2); align-items: center;
    font-size: var(--fs-fine); font-weight: var(--fw-semibold);
    color: var(--accent-dark); background: var(--accent-soft);
    padding: var(--space-2) var(--space-4); border-radius: 999px;
    margin-bottom: var(--space-6); letter-spacing: .02em;
  }
  .hero h1 { font-size: var(--fs-4xl); letter-spacing: -.02em; margin-bottom: var(--space-5); }
  .hero__sub { font-size: var(--fs-lg); color: var(--ink-muted); max-width: 620px; margin: 0 auto; }
  .hero__trust {
    display: flex; gap: var(--space-6); justify-content: center; flex-wrap: wrap;
    margin-top: var(--space-8); font-size: var(--fs-sm); color: var(--ink-muted); font-weight: var(--fw-medium);
  }
  .hero__trust span { display: inline-flex; gap: var(--space-2); align-items: center; }
  .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); flex: none; }
  @media (max-width: 680px) { .hero h1 { font-size: var(--fs-3xl); } .hero { padding: var(--space-16) 0 var(--space-12); } }

  /* ---- sections ---- */
  section.block { padding: var(--space-20) 0; }
  .section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
  .section-head .kicker {
    font-size: var(--fs-fine); font-weight: var(--fw-semibold); color: var(--accent-dark);
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-3);
  }
  .section-head h2 { font-size: var(--fs-3xl); letter-spacing: -.02em; margin-bottom: var(--space-4); }
  .section-head p { font-size: var(--fs-md); color: var(--ink-muted); }

  /* ---- tool grid (mirrors pdfmundo) ---- */
  .grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  }
  @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

  .card {
    position: relative;
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    min-height: 120px;
  }
  a.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-strong);
  }
  .card__top { display: flex; align-items: center; gap: var(--space-3); }
  .card__mark {
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    display: grid; place-items: center; color: #fff; font-weight: var(--fw-bold); font-size: 15px;
  }
  .card__mark svg { width: 21px; height: 21px; display: block; }
  /* Live products carry their SITE'S OWN favicon as the mark, so the card icon and the
     browser tab agree. The favicon ships its own rounded cream tile, so the gradient chip
     is switched off here — a coloured chip behind a cream favicon reads as a square inside
     a square. Gradient ids are per-product (lg-pdf / lg-md): both source favicons ship
     id="favicon-gradient", and two of those in one document means the first silently
     paints both marks. */
  .card__mark.is-favicon { background: none; }
  .card__mark.is-favicon svg { width: 38px; height: 38px; }
  .card__name { font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--ink-strong); }
  .card__desc { font-size: var(--fs-sm); color: var(--ink-muted); }
  .card__status {
    margin-top: auto; font-size: var(--fs-fine); font-weight: var(--fw-semibold);
    display: inline-flex; align-items: center; gap: var(--space-2);
  }
  .card__status.live { color: #2E7D46; }
  .card__status.live .dot { background: #38a169; }

  /* coming-soon: clearly readable, lightly distinguished as not-yet-live */
  .card.soon {
    background: var(--bg-soft);
    border-style: dashed;
    box-shadow: none;
    cursor: default;
  }
  .card.soon .card__top,
  .card.soon .card__desc {
    opacity: .9;
    user-select: none;
    pointer-events: none;
  }
  .card.soon .card__mark { opacity: .82; }
  .card.soon .card__badge {
    position: absolute; top: var(--space-4); right: var(--space-4);
    font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-muted);
    background: var(--bg-card); border: 1px solid var(--border-light);
    padding: 3px 9px; border-radius: 999px;
  }
  .card.soon .card__status { color: var(--ink-faint); filter: none; opacity: 1; }

  /* accent colors per product (from the roadmap) */
  .m-pdf   { background: linear-gradient(135deg,#E8552A,#C2431E); }
  .m-press { background: linear-gradient(135deg,#3FA53E,#2E7A2D); }
  .m-md    { background: linear-gradient(135deg,#4E6BEA,#3A50B8); }
  .m-ocr   { background: linear-gradient(135deg,#7A4EEA,#5C3AB8); }
  .m-pix   { background: linear-gradient(135deg,#EA4E9C,#B83A78); }
  .m-font  { background: linear-gradient(135deg,#0E9F9A,#0B7C78); }
  .m-json  { background: linear-gradient(135deg,#E8A33A,#C2841E); }
  .m-data  { background: linear-gradient(135deg,#4E9FEA,#3A78B8); }
  .m-color { background: linear-gradient(135deg,#B247E8,#8A34B8); }
  .m-qr    { background: linear-gradient(135deg,#2E2E2E,#1A1A1A); }
  .m-voice { background: linear-gradient(135deg,#E24B6B,#BC3752); }
  .m-diff  { background: linear-gradient(135deg,#5B7089,#3F4F63); }
  .m-svg   { background: linear-gradient(135deg,#16B5C4,#0E8A96); }

  /* ---- steps ---- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  @media (max-width: 780px) { .steps { grid-template-columns: 1fr; gap: var(--space-6); } }
  .step__num {
    font-size: var(--fs-fine); font-weight: var(--fw-semibold); color: var(--accent-dark);
    letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-3);
  }
  .step h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
  .step p { font-size: var(--fs-sm); color: var(--ink-muted); }

  /* ---- company / KYB block ---- */
  /* --bg-page, not --bg-soft: this band sat a shade darker than the body and
     the footer, reading as a stripe across the page. The hairline borders stay
     — they're how the footer separates itself too. */
  .company {
    background: var(--bg-page);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  .company__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: start; }
  @media (max-width: 780px) { .company__grid { grid-template-columns: 1fr; gap: var(--space-8); } }
  .company h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-4); }
  .company p { color: var(--ink-body); margin-bottom: var(--space-4); }
  .facts {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-md); padding: var(--space-8); box-shadow: var(--shadow-card);
  }
  .facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-6); }
  .facts dt { font-size: var(--fs-fine); font-weight: var(--fw-semibold); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
  .facts dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-strong); font-weight: var(--fw-medium); }
  .facts dd a { color: var(--accent-dark); }

  /* ---- footer ---- */
  footer.site {
    background: var(--bg-page); border-top: 1px solid var(--border-light);
    padding: var(--space-16) 0 var(--space-10);
  }
  .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-10); }
  @media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); } }
  .footer__brand p { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--space-3); max-width: 320px; }
  .footer__col h4 { font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin-bottom: var(--space-4); }
  .footer__col a { display: block; font-size: var(--fs-sm); color: var(--ink-body); margin-bottom: var(--space-3); }
  .footer__col a:hover { color: var(--accent-dark); }
  .footer__base {
    margin-top: var(--space-12); padding-top: var(--space-6);
    border-top: 1px solid var(--border-light);
    font-size: var(--fs-fine); color: var(--ink-faint);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  }
  /* Nine locales do not fit one row on a phone: without wrapping this nav is
     571px wide at a 390px viewport and every page scrolls sideways. */
  .lang { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .lang a { color: var(--ink-muted); font-weight: var(--fw-medium); }
  .lang a:hover { color: var(--accent-dark); }
  .lang a[aria-current="true"] { color: var(--ink-strong); font-weight: var(--fw-semibold); }
/* --- legal pages ------------------------------------------------------- */
.legal{max-width:760px;margin:0 auto;padding:48px 0 72px}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;margin:0 0 8px}
.legal .meta{color:var(--muted,#6b7280);font-size:.92rem;margin:0 0 28px}
.legal h2{font-size:1.18rem;margin:34px 0 10px;line-height:1.3}
.legal p,.legal li{line-height:1.72;margin:0 0 12px}
.legal ul{padding-left:22px;margin:0 0 14px}
.legal a{text-decoration:underline;text-underline-offset:2px}
.legal .lede{font-size:1.06rem}
.legal table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.95rem}
.legal th,.legal td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(0,0,0,.09);vertical-align:top}
.legal th{font-weight:600}

/* --- redeem page (universe activation router) --------------------------- */
.redeem{max-width:680px;margin:0 auto;padding:var(--space-16) 0 var(--space-20)}
.redeem__kicker{font-size:var(--fs-fine);font-weight:var(--fw-semibold);color:var(--accent-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3)}
.redeem__title{font-size:var(--fs-3xl);letter-spacing:-.02em;margin-bottom:var(--space-4)}
.redeem__lede{font-size:var(--fs-lg);color:var(--ink-muted);margin-bottom:var(--space-10)}

.redeem__keyrow{display:flex;gap:var(--space-3);align-items:stretch;flex-wrap:wrap}
.redeem__key{flex:1 1 320px;min-width:0;overflow-wrap:anywhere;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-sm);color:var(--ink-strong)}
.redeem__copy{flex:none;cursor:pointer;background:var(--bg-soft);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 var(--space-5);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-body);min-height:46px}
.redeem__copy:hover{border-color:var(--ink-faint);color:var(--ink-strong)}
.redeem__hint{font-size:var(--fs-sm);color:var(--ink-muted);margin-top:var(--space-3)}

.redeem__h2{font-size:var(--fs-xl);margin:var(--space-12) 0 var(--space-5)}
.redeem__sites{display:grid;gap:var(--space-4)}
.redeem__site{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-1) var(--space-5);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-card);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.redeem__site:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.redeem__sitename{grid-column:1;font-weight:var(--fw-semibold);font-size:var(--fs-lg);color:var(--ink-strong)}
.redeem__sitedesc{grid-column:1;font-size:var(--fs-sm);color:var(--ink-muted)}
.redeem__go{grid-row:1 / span 2;grid-column:2;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--accent-dark);white-space:nowrap}
.redeem__note{font-size:var(--fs-sm);color:var(--ink-muted);margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--border-light)}

.redeem__form{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5)}
.redeem__input{flex:1 1 300px;min-width:0;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-sm);color:var(--ink-strong)}
.redeem__input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* Solid --accent-deep, not core's --accent -> --accent-hover CTA gradient.
   Same coral family, but this label is 14px semibold: white on --accent is
   ~2.8:1 and on the gradient ~3.2:1, both AA fails at this size. core itself
   documents --accent-deep as the remedy "any time an accent-colored text
   link appears on bg-page/bg-card/bg-hero" (global.css .link-accent);
   white on #D63B3B is ~5.0:1, AA-normal pass. */
.redeem__btn{flex:none;cursor:pointer;background:var(--accent-deep);border:1px solid var(--accent-deep);color:#fff;border-radius:var(--radius-sm);padding:0 var(--space-6);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);min-height:46px}
.redeem__btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.redeem__error{margin-top:var(--space-4);font-size:var(--fs-sm);color:#B3261E;font-weight:var(--fw-medium)}

@media (max-width:680px){
  .redeem{padding:var(--space-12) 0 var(--space-16)}
  .redeem__title{font-size:var(--fs-2xl)}
  .redeem__lede{font-size:var(--fs-md);margin-bottom:var(--space-8)}
  .redeem__site{grid-template-columns:1fr}
  .redeem__go{grid-row:auto;grid-column:1;margin-top:var(--space-2)}
}