/* ==========================================================================
   Laydox — design system
   Palette is PROVISIONAL (ink / paper / process-blue, a CMYK-prepress nod).
   Swap the values in :root below to match the exact current-site brand colors.
   All color/type decisions flow from these tokens — no hardcoded colors elsewhere.
   ========================================================================== */

/* Logo font — IBM Plex Sans Medium (self-hosted) */
@font-face {
  font-family: "Laydox Logo";
  src: url("../fonts/IBMPlexSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Color: swap these to retint the whole site --- */
  --ink:        #14181F;   /* near-black, blue-tinted — primary text / dark surfaces */
  --ink-soft:   #444B57;   /* secondary text */
  --ink-mute:   #6B7280;   /* captions / meta */
  --paper:      #F4F4F0;   /* warm-neutral page background */
  --paper-pure: #FFFFFF;   /* cards-free light surfaces */
  --line:       #DCDBD3;   /* hairlines / dividers */
  --line-soft:  #E9E8E2;

  --accent:      #0E63C4;  /* process blue — primary accent (the "C" in CMYK) */
  --accent-deep: #0A4C97;  /* hover / pressed */
  --cyan:        #17A6C4;  /* registration/crop-mark motif, used sparingly */

  /* --- Type --- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

  /* --- Scale --- */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 3rem);
  --step-4:  clamp(2.6rem, 2rem + 3vw, 4.6rem);

  /* --- Space --- */
  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --maxw: 1200px;

  --radius: 4px;   /* prepress precision: minimal rounding */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
/* Inner-page hero sits directly above a bare content section — trim the stacked gap */
.section:has(+ .section--tight:not(.section)) { padding-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.75rem); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .eyebrow { color: var(--cyan); }
.stack > * + * { margin-top: 1rem; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: break-word; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { max-width: 62ch; }
.lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); font-weight: 400; }
strong { font-weight: 600; }

/* Eyebrow — mono, prepress spec label with a crop-mark tick */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: none; }   /* crop-mark tick before block labels removed */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  padding: 0.85em 1.5em;
  border-radius: var(--radius);
  border: 1.5px solid var(--ink);
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--copy .btn--copy__ico { flex: none; opacity: .75; }
.btn--copy.is-copied,
.btn--copy.is-copied:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.section--ink .btn--copy.is-copied,
.section--ink .btn--copy.is-copied:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.section--ink .btn--ghost { color: var(--paper); border-color: var(--paper); }
.section--ink .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1rem; }
.brand { font-family: "Laydox Logo", "IBM Plex Sans", system-ui, sans-serif; font-weight: 500; font-size: 1.3rem; letter-spacing: 0.01em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5rem; }
.brand .mark { display: none; }   /* logo square icon removed */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); transition: color .15s ease; }
.nav a:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--line); border-radius: var(--radius); width: 42px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: transform .2s ease; }
.nav-toggle span::before { position: absolute; top: -5px; }
.nav-toggle span::after { position: absolute; top: 5px; }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.25rem;
    transform: translateY(-120%); transition: transform .25s ease; visibility: hidden;
  }
  .nav[data-open="true"] { transform: translateY(0); visibility: visible; }
  .nav a { padding: 0.85rem 0; width: 100%; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; }
  .nav .btn { margin-top: 0.85rem; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 .accent { color: var(--accent); }
.hero .lead { margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__figure { position: relative; }
.hero__copy, .hero__figure { min-width: 0; }
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__figure { order: 0; max-width: 460px; }
}

/* ---------- Quick Quote (hero quiz) ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.quiz {
  position: relative;
  background: var(--paper-pure);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 var(--line), 14px 14px 0 -1px color-mix(in srgb, var(--accent) 12%, transparent);
}
/* crop-mark corners — prepress signature */
.quiz::before, .quiz::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
}
.quiz::before { top: -1.5px; left: -1.5px; border-top: 3px solid var(--accent); border-left: 3px solid var(--accent); }
.quiz::after  { bottom: -1.5px; right: -1.5px; border-bottom: 3px solid var(--accent); border-right: 3px solid var(--accent); }

.quiz__head { margin-bottom: 1.1rem; }
.quiz__eyebrow {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.5rem;
}
.quiz__title { font-size: var(--step-1); letter-spacing: -0.01em; margin: 0; }
.quiz__hint { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-mute); margin-top: 0.35rem; }

.quiz__step { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.quiz [hidden] { display: none !important; }

/* selectable option rows (act as chips) */
.quiz-opt {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 0.8rem 0.95rem; cursor: pointer;
  font-size: var(--step--1); color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.quiz-opt:hover { border-color: var(--ink-soft); }
.quiz-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* faux checkbox */
.quiz-opt span { position: relative; padding-left: 1.85rem; flex: 1; line-height: 1.3; }
.quiz-opt span::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 3px; background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.quiz-opt span::after {
  content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-60%) rotate(45deg) scale(0);
  transition: transform .15s ease;
}
.quiz-opt input:checked ~ span::before { background: var(--accent); border-color: var(--accent); }
.quiz-opt input:checked ~ span::after { transform: translateY(-60%) rotate(45deg) scale(1); }
.quiz-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.quiz-opt input:focus-visible ~ span::before { outline: 2px solid var(--accent); outline-offset: 2px; }

/* contact fields */
.quiz-field { display: flex; flex-direction: column; gap: 0.3rem; }
.quiz-field label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute);
}
.quiz-field .req { color: var(--accent); }
.quiz-field input {
  font-family: var(--font-body); font-size: var(--step--1); color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 0.7rem 0.85rem; width: 100%;
  transition: border-color .15s ease;
}
.quiz-field input:focus { outline: none; border-color: var(--accent); }
.quiz-field input::placeholder { color: color-mix(in srgb, var(--ink-mute) 70%, transparent); }
.quiz-field input[aria-invalid="true"] { border-color: #c0392b; }
.quiz-error { font-family: var(--font-mono); font-size: 0.7rem; color: #c0392b; }
.quiz-turnstile { margin-top: 0.2rem; min-height: 65px; }

/* success */
.quiz__done { text-align: center; padding: 1.5rem 0.5rem; }
.quiz__done-mark {
  width: 46px; height: 46px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 1.4rem; line-height: 46px;
}
.quiz__done p { font-size: var(--step--1); color: var(--ink-soft); margin: 0 auto; max-width: 34ch; }
.quiz__done a { color: var(--accent); text-decoration: underline; }

/* footer / nav */
.quiz__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.3rem; }
.quiz__foot .btn { padding: 0.75em 1.25em; }
.quiz__next, .quiz__submit { margin-left: auto; }
.quiz__progress {
  order: 10; width: 100%; text-align: center; margin-top: 0.3rem;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute);
}

/* ---------- Services list (no cards) ---------- */
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: baseline; gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0; border-bottom: 1px solid var(--line);
  transition: padding-left .2s ease;
}
.svc:hover { padding-left: 0.75rem; }
.svc__idx { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); padding-top: 0.4rem; }
.svc__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.01em; }
.svc__desc { display: block; color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.4rem; max-width: 60ch; }
.svc__go { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; transition: color .15s ease; }
.svc:hover .svc__go { color: var(--accent); }
@media (max-width: 620px) {
  .svc { grid-template-columns: 2.25rem 1fr; }
  .svc__go { display: none; }
}

/* ---------- Process (real sequence — numbering earns its place) ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: color-mix(in srgb, var(--paper) 20%, var(--ink)); border: 1px solid color-mix(in srgb, var(--paper) 20%, var(--ink)); }
.step { background: var(--ink); padding: clamp(1.5rem, 2.5vw, 2rem); }
.step__n { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--cyan); }
.step h3 { color: var(--paper); margin: 0.6rem 0 0.5rem; font-size: var(--step-0); }
.step p { color: color-mix(in srgb, var(--paper) 72%, transparent); font-size: var(--step--1); max-width: none; }

/* ---------- Feature rows ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.feature__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }
.feature h3 { margin-bottom: 0.5rem; }
.feature p { color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- Spec / tools block (mono) ---------- */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.spec__group h4 { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.spec__group ul { list-style: none; padding: 0; }
.spec__group li { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); padding: 0.28rem 0; }

/* ---------- Proof / landmark ---------- */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.proof__item { border-left: 2px solid var(--accent); padding-left: 1.25rem; }
.proof__item .yr { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-mute); }
.proof__item p { font-size: var(--step-0); margin-top: 0.4rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
.faq summary { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); cursor: pointer; list-style: none; padding: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 1.3rem; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); font-size: var(--step--1); padding-bottom: 1.1rem; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p { margin: 0 auto 2rem; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.cta-band .hero__cta { justify-content: center; }
.cta-band .contact-line { font-family: var(--font-mono); font-size: var(--step--1); margin-top: 1.75rem; color: color-mix(in srgb, var(--paper) 65%, transparent); }
.cta-band .contact-line a { color: var(--cyan); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 4vw, 4rem); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer__legal-entity { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); margin-top: 1.1rem; letter-spacing: 0.02em; max-width: 40ch; }
.footer__brand .brand { margin-bottom: 0.75rem; }
.footer__brand p { font-size: var(--step--1); color: var(--ink-mute); max-width: 40ch; }
.footer h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.9rem; }
.footer ul { list-style: none; padding: 0; }
.footer li { padding: 0.3rem 0; }
.footer li a { font-size: var(--step--1); color: var(--ink-soft); }
.footer li a:hover { color: var(--accent); }
.footer__legal { margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); }
.eu-badge { display: inline-flex; align-items: center; gap: 0.5rem; }
.eu-badge::before { content: "★"; color: var(--accent); }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Breadcrumb (inner pages) ---------- */
.crumb { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-mute); padding-block: 1.5rem 0; }
.crumb a:hover { color: var(--accent); }
.crumb span { color: var(--ink); }

/* ---------- Prose (inner pages) ---------- */
.prose { max-width: var(--maxw); }
.prose > * { max-width: 760px; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3 { margin-top: 1.75rem; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); }
.prose ul { margin: 0 0 1.25rem 1.1rem; color: var(--ink-soft); }
.prose li { padding: 0.2rem 0; }

/* ---------- Insights: listing ---------- */
.post-list { border-top: 1px solid var(--line); }
.post { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1.25rem; align-items: baseline; padding: clamp(1.1rem,2vw,1.6rem) 0; border-bottom: 1px solid var(--line); transition: padding-left .2s ease; }
.post:hover { padding-left: .6rem; }
.post__date { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-mute); padding-top: .3rem; white-space: nowrap; }
.post__cat { display: inline-block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
.post__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; }
.post__excerpt { color: var(--ink-soft); font-size: var(--step--1); margin-top: .4rem; max-width: 66ch; }
.post__go { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); white-space: nowrap; padding-top: .3rem; }
.post:hover .post__go { color: var(--accent); }
@media (max-width: 640px) { .post { grid-template-columns: 1fr; } .post__date { padding-top: 0; } .post__go { display: none; } }

/* ---------- Insights: article ---------- */
.article__meta { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-mute); letter-spacing: .04em; margin-bottom: 1.25rem; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.article__meta .cat { color: var(--accent); }
.takeaways { border-left: 2px solid var(--accent); padding-left: 1.25rem; margin: 2.25rem 0; }
.takeaways h3 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; }
.takeaways ul { margin: 0 0 0 1.1rem; color: var(--ink-soft); }
.takeaways li { padding: .25rem 0; font-size: var(--step--1); }
.related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.related h3 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .85rem; }
.related a { display: inline-block; font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .85rem; margin: 0 .45rem .45rem 0; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.related a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Rates ---------- */
.rate-baseline { max-width: 860px; margin: 0 0 2.75rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--paper-pure); font-size: var(--step-0); color: var(--ink-soft); }
.rate-baseline strong { color: var(--ink); }
.notice { margin: 0 0 2.25rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--paper-pure); font-size: var(--step-0); color: var(--ink-soft); }
.notice strong { color: var(--ink); }
.rate-group { margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 860px; }
.rate-group > h2 { font-size: var(--step-2); margin-bottom: .35rem; max-width: 26ch; }
.rate-group__sub { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin: 1.35rem 0 .25rem; }
.rate-table { width: 100%; border-collapse: collapse; margin: .35rem 0 1rem; }
.rate-table th { text-align: left; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.rate-table th:last-child { text-align: right; }
.rate-table td { padding: .7rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; }
.rate-table td.tier { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); }
.rate-table td.price { font-family: var(--font-mono); font-size: var(--step-0); color: var(--accent); text-align: right; white-space: nowrap; }
.rate-note { font-size: var(--step--1); color: var(--ink-soft); max-width: 72ch; margin-top: .35rem; }
.rate-note ul { margin: .45rem 0 0 1.1rem; }
.rate-note li { padding: .15rem 0; }
.rate-urgent { border-left: 2px solid var(--accent); padding-left: 1.25rem; margin: 2.5rem 0 0; max-width: 860px; }
.rate-urgent .tag { font-family: var(--font-mono); font-size: var(--step-1); color: var(--accent); }

/* ---------- Legal tables + inline link button ---------- */
.table-scroll { overflow-x: auto; margin: .5rem 0 1.75rem; }
.table-scroll .rate-table { min-width: 640px; }
.table-scroll .rate-table th:last-child { text-align: left; }
.table-scroll .rate-table td { vertical-align: top; padding-right: 1.5rem; }
.table-scroll .rate-table td:last-child { padding-right: 0; }
.prose code { font-family: var(--font-mono); font-size: .85em; background: var(--line-soft); padding: .12em .38em; border-radius: 5px; }
.link-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-mute); }
.link-btn:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 0 var(--gutter) 1rem; transform: translateY(130%); transition: transform .35s ease; pointer-events: none; }
.cookie-banner.is-in { transform: none; pointer-events: auto; }
.cookie-banner__inner { max-width: 760px; margin-inline: auto; background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 46px rgba(0,0,0,.16); padding: 1.1rem 1.25rem; display: flex; gap: .9rem 1.5rem; align-items: center; flex-wrap: wrap; }
.cookie-banner__text { font-size: var(--step--1); color: var(--ink-soft); margin: 0; flex: 1 1 320px; line-height: 1.5; }
.cookie-banner__text a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-mute); }
.cookie-banner__text a:hover { text-decoration-color: var(--ink); }
.cookie-banner__actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.cookie-banner .btn { padding: .7em 1.25em; }
@media (max-width: 560px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* Footer cookie-preferences link */
.footer__legal-sep { margin: 0 .5rem; color: var(--ink-mute); }

/* ============================================================
   DARK THEME — Vercel-style monochrome. Scoped to body.theme-dark.
   Applied to the homepage only (add the class to <body>).
   ============================================================ */
body.theme-dark {
  --ink:        #EDEDED;
  --ink-soft:   #A1A1A1;
  --ink-mute:   #888888;
  --paper:      #000000;
  --paper-pure: #0A0A0A;
  --line:       #1F1F1F;
  --line-soft:  #161616;
  --accent:      #EDEDED;   /* monochrome: emphasis = foreground white */
  --accent-deep: #FFFFFF;
  --cyan:        #A1A1A1;   /* de-emphasize to gray */
  --radius: 6px;
}
/* subtle gray labels */
.theme-dark .eyebrow { color: var(--ink-soft); }
/* dark "ink" sections become slightly-elevated panels (not inverted) */
.theme-dark .section--ink { background: #0A0A0A; color: var(--ink); }
.theme-dark .steps { background: var(--line); border-color: var(--line); }
.theme-dark .step { background: #0A0A0A; }
.theme-dark .step h3 { color: var(--ink); }
.theme-dark .step p { color: var(--ink-soft); }
.theme-dark #process .lead { color: var(--ink-soft) !important; }   /* fix inline paper-color lead */
.theme-dark .cta-band p, .theme-dark .cta-band .contact-line { color: var(--ink-soft); }
/* monochrome buttons: white primary with dark text (Vercel) */
.theme-dark .btn--primary { background: var(--ink); border-color: var(--ink); color: #0A0A0A; }
.theme-dark .btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0A0A0A; }
.theme-dark .btn--ghost { color: var(--ink); border-color: var(--line); }
.theme-dark .btn--ghost:hover { background: var(--ink); color: #0A0A0A; border-color: var(--ink); }
.theme-dark .section--ink .btn--ghost { color: var(--ink); border-color: var(--line); }
.theme-dark .section--ink .btn--ghost:hover { background: var(--ink); color: #0A0A0A; }
/* quiz card: subtle hairline instead of bright border */
.theme-dark .quiz { border-color: var(--line); box-shadow: 0 1px 0 var(--line); }
.theme-dark .quiz::before, .theme-dark .quiz::after { border-color: var(--ink-soft); }
.theme-dark .quiz-opt span::before { background: #0A0A0A; }
.theme-dark .quiz-opt input:checked ~ span::before { background: var(--ink); border-color: var(--ink); }
.theme-dark .quiz-opt input:checked ~ span::after { border-color: #0A0A0A; }
.theme-dark .quiz-opt:has(input:checked) { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--ink); }
.theme-dark .quiz-field input { background: #0A0A0A; color: var(--ink); }
.theme-dark .quiz__done-mark { background: var(--ink); color: #0A0A0A; }

/* ============================================================
   WORK.CO-STYLE THEME — light, editorial. Scoped to body.theme-work.
   White/black + red accent, serif body + big grotesque headlines.
   Used on the variant homepage index-v2.html.
   ============================================================ */
body.theme-work {
  --ink:        #000000;
  --ink-soft:   #656565;
  --ink-mute:   #8A8A8A;
  --paper:      #FFFFFF;
  --paper-pure: #FFFFFF;
  --line:       #E6E6E6;
  --line-soft:  #F1F1F1;
  --accent:      #DB2223;   /* work.co red (links/buttons) */
  --accent-deep: #B01A1B;
  --cyan:        #FF3029;   /* bright red accent, sparing */
  --radius: 0px;            /* sharp, editorial */
  /* type: serif body + grotesque display + sans UI labels */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* bigger, more editorial headline scale */
  --step-4: clamp(2.9rem, 1.6rem + 5.2vw, 6rem);
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --step-1: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
}
/* Helvetica-medium headlines with tight tracking (work.co) */
.theme-work h1, .theme-work h2, .theme-work h3, .theme-work h4 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
.theme-work h3 { font-weight: 600; }
/* serif body reads a touch larger */
.theme-work { font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem); }
.theme-work .lead { font-weight: 400; }
/* labels/nav/eyebrow: sans, not mono */
.theme-work .eyebrow { letter-spacing: 0.1em; }
.theme-work .nav a { font-weight: 500; }
/* red underlined links in prose (work.co signature) */
.theme-work .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* buttons: sharp; primary is solid red */
.theme-work .btn { font-weight: 500; letter-spacing: 0.02em; }

/* ============================================================
   MOBBIN-STYLE THEME — soft light-gray, monochrome, rounded.
   Scoped to body.theme-mobbin. Used on variant homepage index-v3.html.
   ============================================================ */
body.theme-mobbin {
  --ink:        #141414;
  --ink-soft:   #6B6B6B;
  --ink-mute:   #9A9A9A;
  --paper:      #F5F5F4;    /* soft light-gray page bg (mobbin feel) */
  --paper-pure: #FFFFFF;    /* white cards/surfaces */
  --line:       #E5E5E3;
  --line-soft:  #EEEEEC;
  --accent:      #141414;   /* monochrome: near-black actions */
  --accent-deep: #000000;
  --cyan:        #6B6B6B;
  --radius: 12px;           /* soft, rounded */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Inter", system-ui, -apple-system, sans-serif;
}
.theme-mobbin h1, .theme-mobbin h2, .theme-mobbin h3, .theme-mobbin h4 { font-weight: 600; letter-spacing: -0.022em; line-height: 1.05; }
.theme-mobbin .eyebrow { color: var(--ink-soft); font-weight: 500; letter-spacing: 0.06em; }
.theme-mobbin .nav a { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.92rem; }
.theme-mobbin .btn { border-radius: 100px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.theme-mobbin .btn--primary { color: #fff; }
.theme-mobbin .quiz { border-width: 1px; border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05); }
.theme-mobbin .quiz::before, .theme-mobbin .quiz::after { border-color: var(--ink-soft); }
.theme-mobbin .quiz-opt { border-radius: 10px; }
.theme-mobbin .quiz-field input { border-radius: 10px; }
.theme-mobbin .prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-mute); }
.theme-mobbin .prose a:hover { text-decoration-color: var(--ink); }
/* mobbin: primary button on dark sections gets a light outline (was blending into #141414) */
.theme-mobbin .section--ink .btn--primary { border-color: var(--paper); }

/* ---------- Language switcher ---------- */
.lang-switch { position: relative; display: inline-block; }
.lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: .34rem .7rem; user-select: none; white-space: nowrap; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::after { content: ""; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); opacity: .65; }
.lang-switch[open] > summary { color: var(--ink); border-color: var(--ink); }
.lang-switch__menu { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 168px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.10); padding: .35rem; list-style: none; margin: 0; z-index: 60; }
.lang-switch__menu li { padding: 0; }
.lang-switch__menu a { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .65rem; border-radius: 8px; font-size: .92rem; color: var(--ink-soft); }
.lang-switch__menu a:hover { background: var(--paper); color: var(--ink); }
.lang-switch__menu a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lang-switch__menu a .lang-code { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--ink-mute); text-transform: uppercase; }
@media (max-width: 820px) {
  .lang-switch { margin-top: .4rem; }
  .lang-switch__menu { right: auto; left: 0; }
}