/*-----------------------------------------------------------------------------------

    CookieMi — public site stylesheet

    Visual language: heavy ink outlines with hard offset shadows, generous
    rounding, pastel section blocks, uppercase eyebrow labels above section
    titles, bordered cards — all on the CookieMi palette so the public site and
    the admin panel read as one product. Every component that used to need a
    third-party library (carousel, lightbox, icon font, DOM library) was dropped;
    icons are inline SVG.

    Loaded after assets/css/bootstrap.min.css (grid + a few utilities only).
    No external request: the font is self-hosted, there is no @import.

    [Table of contents]
      1.  Font face + wordmark
      2.  Design tokens
      3.  Base
      4.  Utilities (section rhythm, headings, buttons, notes)
      5.  Header + navigation
      6.  Hero
      7.  Newsletter form + messages
      8.  Cos'è un banner cookie
      9.  Come funziona (steps + snippet)
      10. Funzionalità (cards)
      11. Perché conta
      12. Domande frequenti (accordion)
      13. Newsletter section
      14. Footer
      15. Decorative shapes
      16. Responsive
      17. Motion / print
      18. Shared component system (SPEC-V5 §4) — also in admin.css

-----------------------------------------------------------------------------------*/

/* 1. Font face + wordmark ------------------------------------------------- */
/* Same declarations as admin/assets/font.css, same files: one download for the
   whole product. Paths are relative to this file (assets/css/). */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-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: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-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;
}

/* Wordmark: the plain word "CookieMi", one solid colour, tight tracking.
   Identical treatment on every surface (panel, login, setup, public site). */
.cmi-wordmark {
  font-family: var(--cmi-font);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cmi-ink);
  white-space: nowrap;
}

/* 2. Design tokens -------------------------------------------------------- */

/* --- SHARED TOKENS — SPEC-V5 §4.1 -----------------------------------------
   This block is duplicated verbatim in admin/assets/admin.css. The panel and
   the public site never load the same stylesheet, so the tokens have to be
   declared twice; the two blocks must stay identical. Change one, change both.

   Measured contrast (WCAG 2.x, sRGB), so nobody has to guess:
     ink          #2A2521 on white .......... 15.16:1
     body         #5C534C on white ........... 7.52:1   on cream 7.01:1
     muted        #6E635B on white ........... 5.87:1   on cream 5.47:1
     primary      #B4531F on white ........... 5.00:1   white label on it 5.00:1
                          on cream ........... 4.66:1
                          on sand/mint/sky/lilac  4.29 / 4.49 / 4.35 / 4.26:1
     primary-dark #8E3F14 on white ........... 7.35:1   on any pastel >= 6.27:1
   Terracotta is therefore a FILL colour, and a text colour only on white or
   cream. On the pastel blocks eyebrows and links switch to primary-dark:
   at 15px/800 an eyebrow is not "large text", so it owes the full 4.5:1.
--------------------------------------------------------------------------- */

:root {
  /* Palette */
  --cmi-ink: #2A2521;
  --cmi-primary: #B4531F;
  --cmi-primary-dark: #8E3F14;
  --cmi-body: #5C534C;
  --cmi-cream: #FDF6EE;
  --cmi-sand: #F6EDE4;
  --cmi-mint: #EAF6EF;
  --cmi-sky: #EAF1F8;
  --cmi-lilac: #F1ECF8;
  --cmi-white: #FFFFFF;

  /* Signature geometry */
  --cmi-line: 2px solid var(--cmi-ink);
  --cmi-line-w: 2px;                    /* where only the width is wanted */
  --cmi-shadow: 4px 4px 0 var(--cmi-ink);
  --cmi-radius: 14px;

  /* The same signature at other scales */
  --cmi-shadow-sm: 3px 3px 0 var(--cmi-ink);
  --cmi-shadow-md: 6px 6px 0 var(--cmi-ink);
  --cmi-shadow-lg: 10px 10px 0 var(--cmi-ink);
  --cmi-radius-xs: 10px;
  --cmi-radius-lg: 24px;
  --cmi-pill: 999px;

  /* Quiet surfaces — tables, field borders, dividers (SPEC-V5 §4.3) */
  --cmi-muted: #6E635B;
  --cmi-hairline: #E9E1D8;
  --cmi-hairline-strong: #D9CEC2;

  /* Status: a text colour and its pastel fill, every pair >= 4.5:1 */
  --cmi-ok: #1E7B3C;    --cmi-ok-bg: #EAF6EF;    /* 4.77:1 */
  --cmi-warn: #8A6116;  --cmi-warn-bg: #FBF1DC;  /* 4.91:1 */
  --cmi-error: #B3261E; --cmi-error-bg: #FBE7E2; /* 5.44:1 */

  --cmi-font: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cmi-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* --- Local to the public site --------------------------------------------- */

:root {
  --cmi-header-h: 78px;
}

/* 3. Base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--cmi-font);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--cmi-body);
  background: var(--cmi-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--cmi-ink);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--cmi-primary);
  text-decoration: none;
  transition: color .2s ease-in-out;
}
a:hover { color: var(--cmi-primary-dark); text-decoration: underline; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

strong, b { font-weight: 700; color: var(--cmi-ink); }

/* Same treatment as the panel; also neutralises Bootstrap's pink <code>. */
code {
  font-family: var(--cmi-mono);
  font-size: .88em;
  color: var(--cmi-primary-dark);
  background: #F4ECE4;
  padding: 1px 6px;
  border-radius: 5px;
  overflow-wrap: break-word;
}

[hidden] { display: none !important; }

/* Focus: always visible, never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cmi-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-header a:focus-visible,
.hero-visual a:focus-visible { outline-color: var(--cmi-ink); }
/* bootstrap.min.css is loaded first and carries `.btn:focus{outline:0}`, whose
   (0,2,0) specificity beats `button:focus-visible` (0,1,1) whatever the source
   order — without this the homepage CTA and the two newsletter buttons keep
   only their hover styling as a focus cue, which a mouse click triggers too.
   The ring is ink, not terracotta: a terracotta ring around a terracotta fill
   would read as part of the button. */
.btn:focus-visible {
  outline: 3px solid var(--cmi-ink);
  outline-offset: 3px;
  border-radius: var(--cmi-pill);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--cmi-ink);
  color: var(--cmi-white);
  padding: 12px 18px;
  border-radius: 0 0 var(--cmi-radius) 0;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
  color: var(--cmi-white);
  text-decoration: none;
}

.cmi-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Anchor targets must clear the sticky header. */
section[id] { scroll-margin-top: calc(var(--cmi-header-h) + 16px); }

/* 4. Utilities ------------------------------------------------------------ */

.gap { padding: 110px 0; }
.no-top { padding-top: 0; }
.no-bottom { padding-bottom: 0; }

/* Section colour blocks, all separated by the signature outline. */
.block-cream { background: var(--cmi-cream); }
.block-sand  { background: var(--cmi-sand); }
.block-mint  { background: var(--cmi-mint); }
.block-sky   { background: var(--cmi-sky); }
.block-lilac { background: var(--cmi-lilac); }
.block-white { background: var(--cmi-white); }
.rule-top    { border-top: var(--cmi-line); }
.rule-bottom { border-bottom: var(--cmi-line); }

/* Eyebrow + title pair (template's .heading). */
.heading { margin-bottom: 44px; }
.heading .eyebrow {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* The darker token: 15px bold is not "large text" for WCAG (that starts at
     18.66px bold), so the 4.5:1 threshold applies. --cmi-primary is only 4.32:1 on
     the sand block and 4.51:1 on the mint one; --cmi-primary-dark clears every
     section background this label is used on (6.32:1 on sand, 7.31:1 on white). */
  color: var(--cmi-primary-dark);
  margin-bottom: 10px;
}
.heading h2 { margin-bottom: 16px; }
.heading p { max-width: 62ch; font-size: 18px; }
.heading-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
}
.heading-center p { margin-left: auto; margin-right: auto; }

/* Buttons — the template's pill with the ink outline and hard shadow.
   Every property Bootstrap's .btn sets and we care about is restated, so the
   button keeps its shape even if bootstrap.min.css is not loaded. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 30px;
  border: var(--cmi-line);
  border-radius: var(--cmi-pill);
  background: var(--cmi-primary);
  color: var(--cmi-white);
  font-family: var(--cmi-font);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .2s ease-in-out, transform .2s ease-in-out, background-color .2s ease-in-out;
}
.btn:hover,
.btn:focus {
  background: var(--cmi-primary-dark);
  color: var(--cmi-white);
  text-decoration: none;
  transform: translate(-2px, -2px);
  box-shadow: var(--cmi-shadow-md);
}
.btn:active { transform: translate(0, 0); box-shadow: 3px 3px 0 0 var(--cmi-ink); }
.btn-ink { background: var(--cmi-ink); }
.btn-ink:hover, .btn-ink:focus { background: #17130F; }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn[disabled],
.btn[aria-disabled="true"] {
  background: #C9BEB4;
  border-color: #9C9088;
  color: #F7F2ED;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Small pill badge (hero "Disponibile a breve"). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: var(--cmi-line);
  border-radius: var(--cmi-pill);
  background: var(--cmi-white);
  color: var(--cmi-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pill .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cmi-primary);
  border: 1px solid var(--cmi-ink);
}

/* Outlined card, the workhorse of the page. */
.o-card {
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: var(--cmi-radius-lg);
  padding: 32px;
}
.o-card-hover { transition: box-shadow .2s ease-in-out, transform .2s ease-in-out; }
.o-card-hover:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--cmi-shadow-lg);
}

/* Discreet footnote (used for the "not legal advice" line). */
.note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px dashed #C7B8AA;
  border-radius: var(--cmi-radius);
  background: rgba(255, 255, 255, .55);
  font-size: 14.5px;
  line-height: 1.6;
  color: #6E635B;
}
.note svg { flex: 0 0 auto; margin-top: 3px; }

/* Inline SVG icons inherit the text colour. */
.icon { display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 5. Header + navigation --------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cmi-white);
  border-bottom: var(--cmi-line);
  transition: box-shadow .2s ease-in-out;
}
/* Template signature: a pastel block bleeding in from the right. Below 992px the
   links collapse into the dropdown and the block simply sits behind the hamburger,
   so a percentage width is safe there. From 992px up the full link row is visible
   and a percentage would cut straight through the last link, so the block is
   anchored to the call-to-action instead (see the min-width rule below). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 40%;
  background: var(--cmi-sky);
  border-left: var(--cmi-line);
  z-index: 0;
}
.site-header.is-stuck { box-shadow: 0 6px 0 0 rgba(42, 37, 33, .08); }

@media (min-width: 992px) {
  /* `clip` contains the horizontal and vertical bleed of .nav-cta::before. At this
     width the dropdown — the only thing that must escape the header box — does not
     exist. An element's own box-shadow is never clipped by its overflow, so the
     stuck-header shadow is unaffected. */
  /* `hidden` first as the fallback: `clip` only shipped in Safari 16 / iOS 16, and
     where it is dropped the header would keep `overflow: visible` and paint the
     400px pseudo-element over the hero. Nothing here needs to escape the box. */
  .site-header { overflow: hidden; overflow: clip; }
  .site-header::before { display: none; }

  .nav-cta { position: relative; }
  .nav-cta::before {
    content: "";
    position: absolute;
    top: -400px;
    bottom: -400px;          /* taller than any header; clipped back to it */
    left: -12px;             /* inside the 24px minimum nav gap */
    right: -100vw;           /* bleeds off the right edge */
    background: var(--cmi-sky);
    border-left: var(--cmi-line);
    z-index: 0;
  }
  .nav-cta > .btn { position: relative; z-index: 1; }
}

.top-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--cmi-header-h);
  padding: 14px 0;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
}
.brand:hover { text-decoration: none; color: var(--cmi-ink); }
.brand .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cmi-primary);
  display: inline-block;
}

/* The gap was 34px before the language selector joined the bar (SPEC-V5 §3.3).
   With the selector in the row, the longest translated labels — Spanish
   "Preguntas frecuentes" + "Funcionalidades" — no longer fit at 1280 and the
   items wrapped onto a second line, pushing the call to action into the
   decorative block. 26px and nowrap labels leave room in all three languages. */
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
}
/* :not(.btn) everywhere — the last nav item is the primary call to action and
   must keep the button treatment. */
.site-nav a:not(.btn) {
  color: var(--cmi-ink);
  font-weight: 700;
  font-size: 16px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover {
  color: var(--cmi-primary);
  text-decoration: none;
  border-bottom-color: var(--cmi-primary);
}
.site-nav .btn { padding: 11px 22px; font-size: 15px; white-space: nowrap; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--cmi-ink);
}
.nav-toggle:hover { background: var(--cmi-sand); }
.nav-toggle .bars { display: block; }
.nav-toggle .close { display: none; }
.nav-toggle[aria-expanded="true"] .bars { display: none; }
.nav-toggle[aria-expanded="true"] .close { display: block; }

/* 6. Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  background: var(--cmi-cream);
  border-bottom: var(--cmi-line);
}
.hero-text { position: relative; z-index: 1; max-width: 620px; }
.hero-text .pill { margin-bottom: 22px; }
.hero-text h1 { margin-bottom: 20px; }
.hero-text h1 em {
  font-style: normal;
  color: var(--cmi-primary);
  /* underline drawn as a background so it never clips the descenders */
  background: linear-gradient(180deg, transparent 78%, rgba(180, 83, 31, .22) 78%);
}
.hero-text .lead { font-size: 19px; max-width: 56ch; }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cmi-ink);
}
.hero-points svg { color: var(--cmi-primary); flex: 0 0 auto; }

.hero-visual { position: relative; z-index: 1; }

/* 7. Newsletter form + messages -------------------------------------------- */

.signup-card {
  position: relative;
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: 32px;
  padding: 36px;
  box-shadow: 12px 12px 0 0 var(--cmi-ink);
}
.signup-card h2 {
  font-size: 27px;
  margin-bottom: 10px;
}
.signup-card .kicker {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cmi-primary);
  margin-bottom: 8px;
}
.signup-card p { font-size: 15.5px; }

.signup-form { margin-top: 22px; }
.signup-form label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--cmi-ink);
  margin-bottom: 8px;
}
.signup-field {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.signup-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  height: 56px;
  padding: 0 22px;
  font-family: var(--cmi-font);
  font-size: 16px;
  color: var(--cmi-ink);
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: var(--cmi-pill);
  outline: 0;
}
/* 4.94:1 on the field's white background: the example address has to stay readable
   in bright light, and a placeholder is text like any other (WCAG 1.4.3). */
.signup-form input[type="email"]::placeholder { color: #7A6E66; }
.signup-form input[type="email"]:focus-visible {
  outline: 3px solid var(--cmi-primary);
  outline-offset: 2px;
}
.signup-form input[type="email"]:disabled {
  background: #F4EFEA;
  border-color: #B7ABA1;
  color: #8B8078;
  cursor: not-allowed;
}
.signup-form .btn { flex: 0 0 auto; height: 56px; }
.signup-hint {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #7A6E66;
}
/* What is stored and for how long: quieter than the hint, still readable (4.94:1). */
.signup-privacy {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #7A6E66;
}

/* Honeypot: off-screen, never announced, never focusable. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Inline / server-rendered feedback. */
.msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 13px 16px;
  border: var(--cmi-line);
  border-radius: var(--cmi-radius);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--cmi-ink);
  background: var(--cmi-sand);
}
.msg svg { flex: 0 0 auto; margin-top: 3px; }
.msg-ok { background: var(--cmi-mint); }
.msg-error { background: #FBE7E2; }
.msg:empty { display: none; }

/* 8. Cos'è un banner cookie ------------------------------------------------- */

.what-grid { margin-top: 8px; }
.what-card {
  height: 100%;
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: var(--cmi-radius-lg);
  padding: 26px;
  transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
.what-card:hover { transform: translate(-3px, -3px); box-shadow: var(--cmi-shadow-md); }
.what-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.what-card p { font-size: 15.5px; margin: 0; }
.what-card .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 16px;
  border: var(--cmi-line);
  border-radius: 50%;
  background: var(--cmi-lilac);
  color: var(--cmi-ink);
}
/* Each card sits alone in its grid column, so the alternation has to be counted
   on the columns, not on the cards. */
.what-grid > [class*="col-"]:nth-child(2) .tag { background: var(--cmi-mint); }
.what-grid > [class*="col-"]:nth-child(3) .tag { background: var(--cmi-sky); }
.what-grid > [class*="col-"]:nth-child(4) .tag { background: var(--cmi-sand); }

.what-risk {
  margin-top: 34px;
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: var(--cmi-radius-lg);
  padding: 30px 32px;
}
.what-risk h3 { margin-bottom: 10px; }

/* 9. Come funziona --------------------------------------------------------- */

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: 34px;
  padding: 46px;
}
.step { flex: 1 1 240px; }
.step-num {
  position: relative;
  width: 92px; height: 92px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--cmi-line);
  border-radius: 50%;
  background: var(--cmi-sand);
  color: var(--cmi-ink);
}
.step:nth-child(2) .step-num { background: var(--cmi-mint); }
.step:nth-child(3) .step-num { background: var(--cmi-sky); }
.step-num b {
  position: absolute;
  right: -6px; bottom: -6px;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--cmi-line);
  border-radius: 50%;
  background: var(--cmi-primary);
  color: var(--cmi-white);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 15.5px; margin: 0; }

.snippet-wrap { margin-top: 40px; }
.snippet-wrap h3 { font-size: 19px; margin-bottom: 6px; }
.snippet-wrap > p { font-size: 15.5px; }
.snippet {
  margin: 16px 0 0;
  padding: 20px 22px;
  background: var(--cmi-ink);
  border: var(--cmi-line);
  border-radius: var(--cmi-radius);
  overflow-x: auto;
}
.snippet code {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--cmi-mono);
  font-size: 14px;
  line-height: 1.7;
  color: #F3E7DA;
  white-space: pre;
}
.snippet .c { color: #A79A8C; }
.snippet .k { color: #F0B27A; }
.snippet .s { color: #A8D8B9; }

/* 10. Funzionalità --------------------------------------------------------- */

.feature {
  height: 100%;
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: var(--cmi-radius-lg);
  padding: 32px 30px;
  transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
.feature:hover { transform: translate(-3px, -3px); box-shadow: var(--cmi-shadow-lg); }
.feature i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px; height: 66px;
  margin-bottom: 20px;
  border: var(--cmi-line);
  border-radius: 50%;
  background: var(--cmi-sand);
  color: var(--cmi-ink);
}
.features-row > [class*="col-"]:nth-child(2) .feature i { background: var(--cmi-mint); }
.features-row > [class*="col-"]:nth-child(3) .feature i { background: var(--cmi-sky); }
.features-row > [class*="col-"]:nth-child(4) .feature i { background: var(--cmi-lilac); }
.features-row > [class*="col-"]:nth-child(5) .feature i { background: var(--cmi-cream); }
.features-row > [class*="col-"]:nth-child(6) .feature i { background: #F7E3D6; }
.feature h3 { font-size: 20px; margin-bottom: 10px; }
.feature p { font-size: 15.5px; margin: 0; }

/* 11. Perché conta --------------------------------------------------------- */

.why-list { margin-top: 6px; }
.why-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid rgba(42, 37, 33, .14);
}
.why-item:last-child { border-bottom: 0; padding-bottom: 0; }
.why-item i {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: var(--cmi-line);
  border-radius: 14px;
  background: var(--cmi-white);
  color: var(--cmi-primary);
}
.why-item h3 { font-size: 19px; margin-bottom: 4px; }
.why-item p { font-size: 15.5px; margin: 0; }

.why-aside {
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: var(--cmi-radius-lg);
  padding: 30px;
  box-shadow: var(--cmi-shadow-md);
}
.why-aside h3 { font-size: 19px; margin-bottom: 12px; }
.why-aside ul li {
  position: relative;
  padding: 0 0 10px 24px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cmi-ink);
}
.why-aside ul li:last-child { padding-bottom: 0; }
.why-aside ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 12px;
  border: var(--cmi-line);
  border-radius: 50%;
  background: var(--cmi-primary);
}

/* 12. Domande frequenti ---------------------------------------------------- */

.faq {
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: 30px;
  padding: 22px;
}
.faq-item {
  border: 1px solid #D9CEC2;
  border-radius: 18px;
  margin-bottom: 14px;
  background: var(--cmi-white);
  overflow: hidden;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item.is-open {
  background: var(--cmi-cream);
  border-color: var(--cmi-ink);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 20px 22px;
  background: transparent;
  border: 0;
  font-family: var(--cmi-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--cmi-ink);
  text-align: left;
  cursor: pointer;
}
.faq-q:hover { color: var(--cmi-primary); }
.faq-q .sign {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1px solid var(--cmi-ink);
  border-radius: 50%;
  background: var(--cmi-primary);
  transition: background-color .2s ease-in-out;
}
.faq-q .sign::before,
.faq-q .sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 3px;
  background: var(--cmi-white);
  transform: translate(-50%, -50%);
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.faq-q .sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .sign { background: var(--cmi-ink); }
.faq-q[aria-expanded="true"] .sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.faq-panel { padding: 0 22px 22px; }
.faq-panel p { font-size: 16px; margin-bottom: 12px; }
.faq-panel p:last-child { margin-bottom: 0; }

/* Collapsed by default only when JS can reopen them. */
.js .faq-panel { display: none; }
.js .faq-item.is-open .faq-panel { display: block; }

/* 13. Newsletter section --------------------------------------------------- */

.newsletter { position: relative; overflow: hidden; }
.newsletter .signup-card { box-shadow: var(--cmi-shadow-lg); }
.newsletter-lead { font-size: 18px; }

/* 14. Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--cmi-ink);
  color: #C9BEB4;
  border-top: var(--cmi-line);
  padding: 56px 0 34px;
}
.site-footer .cmi-wordmark { color: var(--cmi-white); font-size: 26px; }
.site-footer p { color: #C9BEB4; font-size: 15.5px; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer-top > div:first-child { max-width: 46ch; }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.footer-nav a { color: #E7DED6; font-weight: 700; font-size: 15px; }
.footer-nav a:hover { color: var(--cmi-white); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 14px;
  color: #A1958C;
}
.site-footer a:focus-visible { outline-color: var(--cmi-white); }

/* 15. Decorative shapes ---------------------------------------------------- */

.shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--cmi-ink);
  opacity: .55;
}
.shape-1 { right: 4%;  top: 12%;  animation: cmi-float 18s ease-in-out infinite; }
.shape-2 { left: -30px; bottom: 8%; animation: cmi-float 22s ease-in-out infinite; }
.shape-3 { left: 4%;   bottom: 10%; animation: cmi-float 20s ease-in-out infinite; }

@keyframes cmi-float {
  0%   { transform: translateY(0) rotate(8deg); }
  50%  { transform: translateY(18px) rotate(-4deg); }
  100% { transform: translateY(0) rotate(8deg); }
}

/* 16. Responsive ----------------------------------------------------------- */

@media (max-width: 1400px) {
  .gap { padding: 96px 0; }
  .signup-card { padding: 32px; box-shadow: 10px 10px 0 0 var(--cmi-ink); }
  .steps { padding: 40px; }
  .step-num { width: 84px; height: 84px; }
}

@media (max-width: 1199.98px) {
  body { font-size: 16px; }
  .gap { padding: 84px 0; }
  .site-nav ul { gap: 18px; }
  .site-nav a { font-size: 15px; }
  .site-nav .btn { padding: 10px 18px; font-size: 14.5px; }
  /* The language selector (SPEC-V5 §3.3) took the room the header call to
     action used to have: below 1200 the longest translated labels (Spanish
     "Preguntas frecuentes" + "Funcionalidades") plus the selector plus the
     button no longer fit on one line, and the button was pushed out of the
     bar. It is dropped here on purpose — the hero's signup form is on screen
     at this width, and the mobile menu below 992 brings the button back. */
  .site-nav > ul > .nav-cta { display: none; }
  .btn { padding: 12px 24px; font-size: 15px; }
  .hero { padding: 60px 0 70px; }
  .hero-text .lead { font-size: 18px; }
  .heading { margin-bottom: 36px; }
  .steps { gap: 20px; padding: 34px; }
  .feature { padding: 26px 24px; }
}

/* Mobile navigation kicks in with the template's 992px breakpoint. */
@media (max-width: 991.98px) {
  .nav-toggle { display: inline-flex; }
  .top-bar { gap: 12px; }
  /* Inside the drop-down menu there is a full line for it again. */
  .site-nav > ul > .nav-cta { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: 20;
    background: var(--cmi-white);
    border-bottom: var(--cmi-line);
    box-shadow: 0 12px 24px rgba(42, 37, 33, .12);
    padding: 12px 0 20px;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    display: block;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 12px;
  }
  .site-nav li { border-bottom: 1px solid #EDE4DB; }
  .site-nav li:last-child { border-bottom: 0; padding-top: 14px; }
  .site-nav a:not(.btn) { display: block; padding: 14px 4px; font-size: 17px; border-bottom: 0; }
  .site-nav .btn { display: flex; width: 100%; padding: 13px 22px; font-size: 16px; }

  /* No JS: no toggle, the links simply stack under the wordmark. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { display: block; position: static; box-shadow: none; border-bottom: 0; padding: 0 0 10px; }
  html:not(.js) .site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 0; }
  html:not(.js) .site-nav li { border-bottom: 0; padding-top: 0; }
  html:not(.js) .site-nav a:not(.btn) { padding: 6px 0; font-size: 15px; }
  html:not(.js) .site-nav .btn { display: inline-flex; width: auto; padding: 10px 20px; font-size: 14px; }
  html:not(.js) .top-bar { flex-wrap: wrap; }

  .hero { padding: 44px 0 60px; }
  .hero-text { max-width: none; }
  .hero-visual { margin-top: 40px; }
  .signup-card { border-radius: 28px; }
  .steps { padding: 30px; }
  .step { flex: 1 1 100%; }
  .why-aside { margin-top: 28px; }
  .shape-1, .shape-3 { display: none; }
}

@media (max-width: 767.98px) {
  .gap { padding: 64px 0; }
  .heading { margin-bottom: 30px; }
  .heading p { font-size: 16.5px; }
  .signup-card { padding: 26px; border-radius: 24px; box-shadow: 8px 8px 0 0 var(--cmi-ink); }
  .signup-card h2 { font-size: 24px; }
  .faq { padding: 16px; border-radius: 24px; }
  .faq-q { font-size: 16.5px; padding: 16px 16px; gap: 12px; }
  .faq-panel { padding: 0 16px 18px; }
  .faq-panel p { font-size: 15.5px; }
  .what-risk { padding: 24px; }
  .site-footer { padding: 44px 0 28px; }
  .snippet { padding: 16px; }
  .snippet code { font-size: 13px; }
}

@media (max-width: 575.98px) {
  .gap { padding: 52px 0; }
  .site-header::before { display: none; }
  .hero { padding: 34px 0 48px; }
  .hero-points { gap: 8px 16px; }
  /* Stacked: the flex-basis would otherwise become a 220px tall field. */
  .signup-field { flex-direction: column; }
  .signup-form input[type="email"] { flex: 0 0 auto; width: 100%; }
  .signup-form .btn { width: 100%; }
  .steps { padding: 24px; border-radius: 26px; }
  .step-num { width: 74px; height: 74px; }
  .feature { padding: 22px 20px; }
  .feature i { width: 58px; height: 58px; }
  .o-card { padding: 24px; }
  .shape-2 { display: none; }
}

/* 360px safety: nothing may overflow the viewport. */
@media (max-width: 400px) {
  body { font-size: 15.5px; }
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  .brand { font-size: 22px; }
  .pill { font-size: 11.5px; letter-spacing: .08em; padding: 6px 12px; }
  .signup-card { padding: 20px; border-radius: 20px; box-shadow: 6px 6px 0 0 var(--cmi-ink); }
  .signup-form input[type="email"] { height: 52px; padding: 0 16px; font-size: 15px; }
  .signup-form .btn { height: 52px; }
  .steps { padding: 18px; }
  .faq-q { font-size: 15.5px; padding: 14px 12px; }
  .faq-q .sign { width: 30px; height: 30px; }
  .faq-panel { padding: 0 12px 16px; }
  .snippet code { font-size: 12px; }
  .what-card, .feature { padding: 18px; }
}

/* 17. Motion / print ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .nav-toggle, .signup-card, .shape { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .js .faq-panel { display: block !important; }
}

/* 18. Shared component system --------------------------------------------- */
/* SPEC-V5 §4. The same components exist in admin/assets/admin.css, driven by
   the same tokens, so a fragment of markup renders identically on either
   surface. The panel copy additionally aliases the pre-v5 class names
   (.card, .btn, .badge, .tabs, .table); those names never existed here, so
   this copy carries the .cmi-* names only.

   The public site's own components (.o-card, .btn, .pill, .heading .eyebrow)
   are untouched: they already are this design language, and rewriting the
   homepage markup is not part of this round. */

/* --- Eyebrow: uppercase coral label above a heading ---------------------- */

.cmi-eyebrow {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Not "large text" at this size, so it owes the full 4.5:1 on every pastel
     block it can land on: primary-dark clears them all, primary does not. */
  color: var(--cmi-primary-dark);
}

/* --- Card: the signature outlined panel ---------------------------------- */

.cmi-card {
  background: var(--cmi-white);
  border: var(--cmi-line);
  border-radius: var(--cmi-radius);
  box-shadow: var(--cmi-shadow);
  padding: 22px;
  margin-bottom: 20px;
}
.cmi-card > :first-child { margin-top: 0; }
.cmi-card > :last-child { margin-bottom: 0; }

/* Dense data surfaces keep the outline and drop the shadow (§4.3): a table is
   not a poster. The tighter padding lets the cells own the breathing room. */
.cmi-card-quiet {
  box-shadow: none;
  padding: 10px 14px;
}

/* --- Buttons ------------------------------------------------------------- */

.cmi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border: var(--cmi-line);
  border-radius: var(--cmi-pill);
  background: var(--cmi-white);
  color: var(--cmi-ink);
  font-family: var(--cmi-font);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--cmi-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.cmi-btn:hover {
  text-decoration: none;
  transform: translate(-1px, -1px);
  box-shadow: var(--cmi-shadow);
}
/* The shadow collapses under the press, as on the homepage. */
.cmi-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--cmi-ink);
}

.cmi-btn-primary { background: var(--cmi-primary); color: var(--cmi-white); }        /* 5.00:1 */
.cmi-btn-primary:hover { background: var(--cmi-primary-dark); color: var(--cmi-white); } /* 7.35:1 */
.cmi-btn-secondary { background: var(--cmi-white); color: var(--cmi-ink); }          /* 15.16:1 */
.cmi-btn-secondary:hover { background: var(--cmi-sand); color: var(--cmi-ink); }
.cmi-btn-danger { background: var(--cmi-error); color: var(--cmi-white); }           /* 6.53:1 */
.cmi-btn-danger:hover { background: #96201A; color: var(--cmi-white); }              /* 8.34:1 */

/* Ghost: for the third action in a dense row. Deliberately without the
   outline and the shadow — three of those side by side is noise. */
.cmi-btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--cmi-body);
  font-weight: 600;
}
.cmi-btn-ghost:hover,
.cmi-btn-ghost:active {
  background: var(--cmi-sand);
  color: var(--cmi-ink);
  transform: none;
  box-shadow: none;
}

.cmi-btn-sm { padding: 5px 12px; font-size: 13px; box-shadow: 2px 2px 0 var(--cmi-ink); }
.cmi-btn-sm:hover { box-shadow: var(--cmi-shadow-sm); }
.cmi-btn-sm.cmi-btn-ghost { box-shadow: none; }
.cmi-btn-lg { padding: 13px 28px; font-size: 16px; font-weight: 800; }

.cmi-btn[disabled],
.cmi-btn.disabled,
.cmi-btn[aria-disabled="true"] {
  background: #E4DBD2;
  border-color: var(--cmi-hairline-strong);
  color: #554C46;                      /* 6.05:1 on the fill */
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Badges / status chips ----------------------------------------------- */

.cmi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: var(--cmi-line);
  border-radius: var(--cmi-pill);
  background: var(--cmi-white);
  color: var(--cmi-ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
  vertical-align: middle;
}
a.cmi-badge { text-decoration: none; }
a.cmi-badge:hover { text-decoration: none; box-shadow: 2px 2px 0 var(--cmi-ink); }
.cmi-badge.is-ok    { background: var(--cmi-ok-bg);    color: var(--cmi-ok); }
.cmi-badge.is-warn  { background: var(--cmi-warn-bg);  color: var(--cmi-warn); }
.cmi-badge.is-error { background: var(--cmi-error-bg); color: var(--cmi-error); }
.cmi-badge.is-muted { background: var(--cmi-sand);     color: var(--cmi-body); }
.cmi-badge-sm { font-size: 11px; padding: 0 7px; border-width: 1px; font-weight: 700; }

/* --- Callouts and empty states ------------------------------------------- */

.cmi-callout {
  padding: 14px 18px;
  border: var(--cmi-line);
  border-radius: var(--cmi-radius);
  background: var(--cmi-cream);
  color: var(--cmi-ink);
  line-height: 1.6;
  margin-bottom: 18px;
}
.cmi-callout > :first-child { margin-top: 0; }
.cmi-callout > :last-child { margin-bottom: 0; }
/* Terracotta is below 4.5:1 on every pastel fill: links inside a callout take
   the dark tone (>= 6.27:1) and keep their underline. A link styled as a BUTTON
   is excluded: it already carries its own accessible pairing, and this
   descendant selector would otherwise outrank .cmi-btn-primary and repaint the
   label dark terracotta on terracotta (see the matching note in admin.css). */
.cmi-callout a:not(.cmi-btn):not(.btn) { color: var(--cmi-primary-dark); text-decoration: underline; }
.cmi-callout code { background: rgba(255, 255, 255, .74); color: var(--cmi-primary-dark); }
.cmi-callout.tone-mint  { background: var(--cmi-mint); }
.cmi-callout.tone-sky   { background: var(--cmi-sky); }
.cmi-callout.tone-lilac { background: var(--cmi-lilac); }
.cmi-callout.tone-sand  { background: var(--cmi-sand); }

/* --- Tabs ---------------------------------------------------------------- */

.cmi-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 20px;
  /* Bottom padding leaves room for the active chip's offset shadow, which the
     horizontal scroll container would otherwise clip. */
  padding: 2px 2px 8px;
  border-bottom: var(--cmi-line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cmi-tabs::-webkit-scrollbar { display: none; }

.cmi-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: var(--cmi-line-w) solid transparent;
  border-radius: var(--cmi-pill);
  background: transparent;
  color: var(--cmi-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
}
.cmi-tab:hover { background: var(--cmi-sand); color: var(--cmi-ink); text-decoration: none; }
/* .active and aria-selected are what admin.js writes; .is-active is what the
   server renders. All three mean the same chip. */
.cmi-tab.is-active,
.cmi-tab.active,
.cmi-tab[aria-selected="true"] {
  background: var(--cmi-white);
  border: var(--cmi-line);
  color: var(--cmi-ink);
  box-shadow: var(--cmi-shadow-sm);
}

/* --- Tables: quiet on purpose (§4.3) ------------------------------------- */

/* `overflow-x` so a wide table scrolls inside its own box instead of widening
   the page — the sub-processor table on /azienda has four columns and does not
   fit a phone. The bottom margin is the same 18px a <p> carries: headings are
   `margin: 0` on this site and take their air from the block above them, so
   without it the heading that follows a table (both on /azienda and in the
   privacy policy) sits flush on the last row. */
.cmi-table-wrap { overflow-x: auto; margin-bottom: 18px; }
.cmi-table-wrap:last-child { margin-bottom: 0; }
.cmi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cmi-table th {
  padding: 10px 12px;
  text-align: left;
  color: var(--cmi-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: var(--cmi-line);
}
.cmi-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--cmi-hairline);
  vertical-align: middle;
}
.cmi-table tbody tr:last-child td { border-bottom: 0; }
.cmi-table tbody tr:hover { background: var(--cmi-cream); }

/* --- Form field ---------------------------------------------------------- */
/* A 1px border at rest; on focus a 2px ink border plus the ring. The second
   pixel is drawn with an inset shadow instead of a wider border so the field
   does not change size and the row below does not jump. */

.cmi-field { min-width: 0; }
.cmi-field > label {
  display: block;
  margin-bottom: 6px;
  color: var(--cmi-ink);
  font-size: 13.5px;
  font-weight: 700;
}
.cmi-field > label.check { margin-bottom: 0; }
.cmi-field input[type="text"],
.cmi-field input[type="email"],
.cmi-field input[type="password"],
.cmi-field input[type="number"],
.cmi-field input[type="url"],
.cmi-field input[type="date"],
.cmi-field input[type="search"],
.cmi-field select,
.cmi-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cmi-hairline-strong);
  border-radius: var(--cmi-radius-xs);
  background: var(--cmi-white);
  color: var(--cmi-ink);
  font-family: var(--cmi-font);
  font-size: 15px;
  line-height: 1.5;
}
.cmi-field input:focus,
.cmi-field select:focus,
.cmi-field textarea:focus {
  outline: none;
  border-color: var(--cmi-ink);
  box-shadow: inset 0 0 0 1px var(--cmi-ink), 0 0 0 3px rgba(180, 83, 31, .28);
}
.cmi-field .help {
  margin: 6px 0 0;
  color: var(--cmi-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
}

/* --- Language selector (SPEC-V5 §3.3) ------------------------------------ */
/* Markup comes from cmi_locale_selector(): a wrapper with three items, the
   current one a <span>. Plain links, no JavaScript, tab-reachable as is. */

.cmi-langsel {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 3px;
  border: var(--cmi-line);
  border-radius: var(--cmi-pill);
  background: var(--cmi-white);
  line-height: 1;
}
/* min-height, not padding: the items sit 2px apart, so the WCAG 2.2 SC 2.5.8
   spacing exception does not apply and the target itself has to reach 24x24 CSS
   px. It must survive the 400px override at the bottom of this file. */
.cmi-langsel-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 24px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--cmi-pill);
  color: var(--cmi-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
}
.cmi-langsel-item:hover { background: var(--cmi-sand); color: var(--cmi-ink); text-decoration: none; }
.cmi-langsel-current,
.cmi-langsel-current:hover { background: var(--cmi-ink); color: var(--cmi-white); cursor: default; }
/* The code carries the meaning visually; the full name stays in the
   accessibility tree so a screen reader announces "EN, English". */
.cmi-langsel-name {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Inside the public header nav the generic link rules would repaint the items
   (16px, ink, underline on hover): these selectors outrank them, including the
   no-JS variant, which is why `html` is part of the chain. */
html .site-nav .cmi-langsel a.cmi-langsel-item {
  display: inline-flex;
  padding: 5px 9px;
  border-bottom: 0;
  color: var(--cmi-body);
  font-size: 12.5px;
  font-weight: 800;
}
html .site-nav .cmi-langsel a.cmi-langsel-item:hover {
  background: var(--cmi-sand);
  border-bottom: 0;
  color: var(--cmi-ink);
  text-decoration: none;
}
.site-nav .cmi-langsel { margin: 4px 0; }
.site-nav li:has(> .cmi-langsel) { border-bottom: 0; }

@media (max-width: 991.98px) {
  .site-nav .cmi-langsel { margin: 12px 4px; }
}

/* --- 360px safety for the shared components ------------------------------ */

@media (max-width: 400px) {
  .cmi-card { padding: 16px; }
  .cmi-card-quiet { padding: 8px 10px; }
  .cmi-callout { padding: 12px 14px; }
  .cmi-btn { padding: 8px 14px; font-size: 14px; }
  .cmi-btn-lg { padding: 11px 20px; font-size: 15px; }
  .cmi-tab { padding: 6px 11px; font-size: 13.5px; }
  .cmi-table { font-size: 13px; }
  .cmi-table th, .cmi-table td { padding: 9px 8px; }
  .cmi-langsel-item { min-width: 28px; padding: 5px 7px; font-size: 12px; }
}