/* ═══════════════════════════════════════════════════════════
   christophercorte.it — CSS Completo
   Layer 1: Tailwind Utilities (generated)
   Layer 2: Design System & Custom Styles
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   TAILWIND PREFLIGHT — Normalizzazione browser (mancante dal CDN)
   Fonte: tailwindcss/src/css/preflight.css adattato
   ══════════════════════════════════════════════════════════════ */

/* 1. Base box-sizing e font inheritance */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

/* 2. HTML base */
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
}

/* 3. Body */
body {
  margin: 0;
  line-height: inherit;
}

/* 4. HR */
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

/* 5. Headings */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* 6. Links */
a {
  color: inherit;
  text-decoration: inherit;
}

/* 7. Strong/b */
b, strong { font-weight: bolder; }

/* 8. Code */
code, kbd, samp, pre {
  font-family: 'DM Mono', monospace;
  font-size: 1em;
}

/* 9. Small */
small { font-size: 80%; }

/* 10. Sub/sup */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* 11. Tabella */
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

/* ══════════════════════════════════════════════════════════════
   BUTTON RESET — critico per burger e carousel
   ══════════════════════════════════════════════════════════════ */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* Reset appearance: fondamentale per rimuovere stile nativo */
button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}

/* Rimuove stile outline Firefox */
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }

/* 12. Progress */
progress { vertical-align: baseline; }

/* 13. Input number arrows */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height: auto; }

/* 14. Search */
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }

/* 15. File upload */
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

/* 16. Summary */
summary { display: list-item; }

/* 17. Hidden */
[hidden] { display: none; }

/* 18. List reset */
ol, ul, menu { list-style: none; margin: 0; padding: 0; }

/* 19. Img, video, canvas, audio, iframe, embed, object */
img, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}
img, video { max-width: 100%; height: auto; }

/* 20. Border reset (Tailwind Preflight) */
*, ::before, ::after {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}

/* ══════════════════════════════════════════════════════════════
   MOB-BAR — Burger menu lines (fix esplicito)
   ══════════════════════════════════════════════════════════════ */

/* Reset base del bottone burger */
#mob-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0.5rem;              /* p-2 esplicito */
  cursor: pointer;
  display: flex;                /* flex esplicito */
  flex-direction: column;       /* flex-col */
  gap: 0.375rem;                /* gap-1.5 = 6px */
  align-items: flex-start;
  line-height: 0;
  vertical-align: middle;
}

/* Le tre linee orizzontali */
.mob-bar {
  display: block;
  height: 1px;
  background-color: #F2EDE4;   /* bg-paper default */
  transform-origin: center center;
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

/* Prima e seconda barra: larghezza piena */
.mob-bar:nth-child(1),
.mob-bar:nth-child(2),
.mob-bar:nth-child(3) {
  width: 1.25rem;               /* w-5 = 20px — tutte uguali */
  background-color: #F2EDE4;   /* paper — colore uniforme */
}

/* ══════════════════════════════════════════════════════════════
   CAROUSEL BUTTONS — reset esplicito + sizing
   ══════════════════════════════════════════════════════════════ */

/* Bottoni prev/next carosello */
#cs-prev,
#cs-next,
#pmi-cs-prev,
#pmi-cs-next {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid #2A2926;   /* border border-wire */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;               /* w-11 = 44px */
  height: 2.75rem;              /* h-11 = 44px */
  color: #A09A94;               /* text-muted */
  font-family: 'DM Mono', monospace;
  font-size: 0.875rem;          /* text-sm */
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  padding: 0;
  /* Centratura precisa del carattere ← → */
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#cs-prev:hover,
#cs-next:hover,
#pmi-cs-prev:hover,
#pmi-cs-next:hover {
  border-color: #F2EDE4;        /* hover:border-paper */
  color: #F2EDE4;               /* hover:text-paper */
}

#cs-prev:focus-visible,
#cs-next:focus-visible,
#pmi-cs-prev:focus-visible,
#pmi-cs-next:focus-visible {
  outline: 2px solid #D4F000;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   MODAL CLOSE BUTTON — stesso reset
   ══════════════════════════════════════════════════════════════ */
#modal-x {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   UTILITY: cursor-pointer su tutti i button senza classe
   ══════════════════════════════════════════════════════════════ */
button:not([disabled]) {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Tailwind Utility Layer ── generated from used classes ── */
.block           { display: block }
.inline-block    { display: inline-block }
.inline-flex     { display: inline-flex }
.flex            { display: flex }
.grid            { display: grid }
.hidden          { display: none !important }
.static   { position: static }
.fixed    { position: fixed }
.absolute { position: absolute }
.relative { position: relative }
.sticky   { position: sticky }
.inset-0  { inset: 0px }
.top-0    { top: 0px }
.right-0  { right: 0px }
.bottom-0 { bottom: 0px }
.left-0   { left: 0px }
.top-1\/2  { top: 50% }
.left-1\/3 { left: 33.333333% }
.left-2\/3 { left: 66.666667% }
.overflow-hidden { overflow: hidden }
.overflow-auto   { overflow: auto }
.z-10 { z-index: 10 }
.z-20 { z-index: 20 }
.z-30 { z-index: 30 }
.z-40 { z-index: 40 }
.z-50 { z-index: 50 }
.flex-1        { flex: 1 1 0% }
.flex-auto     { flex: 1 1 auto }
.flex-none     { flex: none }
.flex-col      { flex-direction: column }
.flex-row      { flex-direction: row }
.flex-wrap     { flex-wrap: wrap }
.flex-nowrap   { flex-wrap: nowrap }
.flex-shrink-0 { flex-shrink: 0 }
.shrink-0      { flex-shrink: 0 }
.grow          { flex-grow: 1 }
.items-start   { align-items: flex-start }
.items-center  { align-items: center }
.items-end     { align-items: flex-end }
.justify-start   { justify-content: flex-start }
.justify-center  { justify-content: center }
.justify-end     { justify-content: flex-end }
.justify-between { justify-content: space-between }
.self-start    { align-self: flex-start }
.self-center   { align-self: center }
.self-end      { align-self: flex-end }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.grid-cols-none { grid-template-columns: none }
.gap-0   { gap: 0px }
.gap-x-0 { column-gap: 0px }
.gap-y-0 { row-gap: 0px }
.gap-0.5   { gap: 0.125rem }
.gap-x-0.5 { column-gap: 0.125rem }
.gap-y-0.5 { row-gap: 0.125rem }
.gap-1   { gap: 0.25rem }
.gap-x-1 { column-gap: 0.25rem }
.gap-y-1 { row-gap: 0.25rem }
.gap-1.5   { gap: 0.375rem }
.gap-x-1.5 { column-gap: 0.375rem }
.gap-y-1.5 { row-gap: 0.375rem }
.gap-2   { gap: 0.5rem }
.gap-x-2 { column-gap: 0.5rem }
.gap-y-2 { row-gap: 0.5rem }
.gap-2.5   { gap: 0.625rem }
.gap-x-2.5 { column-gap: 0.625rem }
.gap-y-2.5 { row-gap: 0.625rem }
.gap-3   { gap: 0.75rem }
.gap-x-3 { column-gap: 0.75rem }
.gap-y-3 { row-gap: 0.75rem }
.gap-3.5   { gap: 0.875rem }
.gap-x-3.5 { column-gap: 0.875rem }
.gap-y-3.5 { row-gap: 0.875rem }
.gap-4   { gap: 1rem }
.gap-x-4 { column-gap: 1rem }
.gap-y-4 { row-gap: 1rem }
.gap-5   { gap: 1.25rem }
.gap-x-5 { column-gap: 1.25rem }
.gap-y-5 { row-gap: 1.25rem }
.gap-6   { gap: 1.5rem }
.gap-x-6 { column-gap: 1.5rem }
.gap-y-6 { row-gap: 1.5rem }
.gap-7   { gap: 1.75rem }
.gap-x-7 { column-gap: 1.75rem }
.gap-y-7 { row-gap: 1.75rem }
.gap-8   { gap: 2rem }
.gap-x-8 { column-gap: 2rem }
.gap-y-8 { row-gap: 2rem }
.gap-9   { gap: 2.25rem }
.gap-x-9 { column-gap: 2.25rem }
.gap-y-9 { row-gap: 2.25rem }
.gap-10   { gap: 2.5rem }
.gap-x-10 { column-gap: 2.5rem }
.gap-y-10 { row-gap: 2.5rem }
.gap-11   { gap: 2.75rem }
.gap-x-11 { column-gap: 2.75rem }
.gap-y-11 { row-gap: 2.75rem }
.gap-12   { gap: 3rem }
.gap-x-12 { column-gap: 3rem }
.gap-y-12 { row-gap: 3rem }
.gap-14   { gap: 3.5rem }
.gap-x-14 { column-gap: 3.5rem }
.gap-y-14 { row-gap: 3.5rem }
.gap-16   { gap: 4rem }
.gap-x-16 { column-gap: 4rem }
.gap-y-16 { row-gap: 4rem }
.gap-20   { gap: 5rem }
.gap-x-20 { column-gap: 5rem }
.gap-y-20 { row-gap: 5rem }
.gap-24   { gap: 6rem }
.gap-x-24 { column-gap: 6rem }
.gap-y-24 { row-gap: 6rem }
.gap-28   { gap: 7rem }
.gap-x-28 { column-gap: 7rem }
.gap-y-28 { row-gap: 7rem }
.gap-32   { gap: 8rem }
.gap-x-32 { column-gap: 8rem }
.gap-y-32 { row-gap: 8rem }
.gap-36   { gap: 9rem }
.gap-x-36 { column-gap: 9rem }
.gap-y-36 { row-gap: 9rem }
.gap-40   { gap: 10rem }
.gap-x-40 { column-gap: 10rem }
.gap-y-40 { row-gap: 10rem }
.m-0   { margin: 0px }
.mx-0  { margin-left: 0px; margin-right: 0px }
.my-0  { margin-top: 0px; margin-bottom: 0px }
.mt-0  { margin-top: 0px }
.mr-0  { margin-right: 0px }
.mb-0  { margin-bottom: 0px }
.ml-0  { margin-left: 0px }
.m-0.5   { margin: 0.125rem }
.mx-0.5  { margin-left: 0.125rem; margin-right: 0.125rem }
.my-0.5  { margin-top: 0.125rem; margin-bottom: 0.125rem }
.mt-0.5  { margin-top: 0.125rem }
.mr-0.5  { margin-right: 0.125rem }
.mb-0.5  { margin-bottom: 0.125rem }
.ml-0.5  { margin-left: 0.125rem }
.m-1   { margin: 0.25rem }
.mx-1  { margin-left: 0.25rem; margin-right: 0.25rem }
.my-1  { margin-top: 0.25rem; margin-bottom: 0.25rem }
.mt-1  { margin-top: 0.25rem }
.mr-1  { margin-right: 0.25rem }
.mb-1  { margin-bottom: 0.25rem }
.ml-1  { margin-left: 0.25rem }
.m-1.5   { margin: 0.375rem }
.mx-1.5  { margin-left: 0.375rem; margin-right: 0.375rem }
.my-1.5  { margin-top: 0.375rem; margin-bottom: 0.375rem }
.mt-1.5  { margin-top: 0.375rem }
.mr-1.5  { margin-right: 0.375rem }
.mb-1.5  { margin-bottom: 0.375rem }
.ml-1.5  { margin-left: 0.375rem }
.m-2   { margin: 0.5rem }
.mx-2  { margin-left: 0.5rem; margin-right: 0.5rem }
.my-2  { margin-top: 0.5rem; margin-bottom: 0.5rem }
.mt-2  { margin-top: 0.5rem }
.mr-2  { margin-right: 0.5rem }
.mb-2  { margin-bottom: 0.5rem }
.ml-2  { margin-left: 0.5rem }
.m-2.5   { margin: 0.625rem }
.mx-2.5  { margin-left: 0.625rem; margin-right: 0.625rem }
.my-2.5  { margin-top: 0.625rem; margin-bottom: 0.625rem }
.mt-2.5  { margin-top: 0.625rem }
.mr-2.5  { margin-right: 0.625rem }
.mb-2.5  { margin-bottom: 0.625rem }
.ml-2.5  { margin-left: 0.625rem }
.m-3   { margin: 0.75rem }
.mx-3  { margin-left: 0.75rem; margin-right: 0.75rem }
.my-3  { margin-top: 0.75rem; margin-bottom: 0.75rem }
.mt-3  { margin-top: 0.75rem }
.mr-3  { margin-right: 0.75rem }
.mb-3  { margin-bottom: 0.75rem }
.ml-3  { margin-left: 0.75rem }
.m-3.5   { margin: 0.875rem }
.mx-3.5  { margin-left: 0.875rem; margin-right: 0.875rem }
.my-3.5  { margin-top: 0.875rem; margin-bottom: 0.875rem }
.mt-3.5  { margin-top: 0.875rem }
.mr-3.5  { margin-right: 0.875rem }
.mb-3.5  { margin-bottom: 0.875rem }
.ml-3.5  { margin-left: 0.875rem }
.m-4   { margin: 1rem }
.mx-4  { margin-left: 1rem; margin-right: 1rem }
.my-4  { margin-top: 1rem; margin-bottom: 1rem }
.mt-4  { margin-top: 1rem }
.mr-4  { margin-right: 1rem }
.mb-4  { margin-bottom: 1rem }
.ml-4  { margin-left: 1rem }
.m-5   { margin: 1.25rem }
.mx-5  { margin-left: 1.25rem; margin-right: 1.25rem }
.my-5  { margin-top: 1.25rem; margin-bottom: 1.25rem }
.mt-5  { margin-top: 1.25rem }
.mr-5  { margin-right: 1.25rem }
.mb-5  { margin-bottom: 1.25rem }
.ml-5  { margin-left: 1.25rem }
.m-6   { margin: 1.5rem }
.mx-6  { margin-left: 1.5rem; margin-right: 1.5rem }
.my-6  { margin-top: 1.5rem; margin-bottom: 1.5rem }
.mt-6  { margin-top: 1.5rem }
.mr-6  { margin-right: 1.5rem }
.mb-6  { margin-bottom: 1.5rem }
.ml-6  { margin-left: 1.5rem }
.m-7   { margin: 1.75rem }
.mx-7  { margin-left: 1.75rem; margin-right: 1.75rem }
.my-7  { margin-top: 1.75rem; margin-bottom: 1.75rem }
.mt-7  { margin-top: 1.75rem }
.mr-7  { margin-right: 1.75rem }
.mb-7  { margin-bottom: 1.75rem }
.ml-7  { margin-left: 1.75rem }
.m-8   { margin: 2rem }
.mx-8  { margin-left: 2rem; margin-right: 2rem }
.my-8  { margin-top: 2rem; margin-bottom: 2rem }
.mt-8  { margin-top: 2rem }
.mr-8  { margin-right: 2rem }
.mb-8  { margin-bottom: 2rem }
.ml-8  { margin-left: 2rem }
.m-9   { margin: 2.25rem }
.mx-9  { margin-left: 2.25rem; margin-right: 2.25rem }
.my-9  { margin-top: 2.25rem; margin-bottom: 2.25rem }
.mt-9  { margin-top: 2.25rem }
.mr-9  { margin-right: 2.25rem }
.mb-9  { margin-bottom: 2.25rem }
.ml-9  { margin-left: 2.25rem }
.m-10   { margin: 2.5rem }
.mx-10  { margin-left: 2.5rem; margin-right: 2.5rem }
.my-10  { margin-top: 2.5rem; margin-bottom: 2.5rem }
.mt-10  { margin-top: 2.5rem }
.mr-10  { margin-right: 2.5rem }
.mb-10  { margin-bottom: 2.5rem }
.ml-10  { margin-left: 2.5rem }
.m-11   { margin: 2.75rem }
.mx-11  { margin-left: 2.75rem; margin-right: 2.75rem }
.my-11  { margin-top: 2.75rem; margin-bottom: 2.75rem }
.mt-11  { margin-top: 2.75rem }
.mr-11  { margin-right: 2.75rem }
.mb-11  { margin-bottom: 2.75rem }
.ml-11  { margin-left: 2.75rem }
.m-12   { margin: 3rem }
.mx-12  { margin-left: 3rem; margin-right: 3rem }
.my-12  { margin-top: 3rem; margin-bottom: 3rem }
.mt-12  { margin-top: 3rem }
.mr-12  { margin-right: 3rem }
.mb-12  { margin-bottom: 3rem }
.ml-12  { margin-left: 3rem }
.m-14   { margin: 3.5rem }
.mx-14  { margin-left: 3.5rem; margin-right: 3.5rem }
.my-14  { margin-top: 3.5rem; margin-bottom: 3.5rem }
.mt-14  { margin-top: 3.5rem }
.mr-14  { margin-right: 3.5rem }
.mb-14  { margin-bottom: 3.5rem }
.ml-14  { margin-left: 3.5rem }
.m-16   { margin: 4rem }
.mx-16  { margin-left: 4rem; margin-right: 4rem }
.my-16  { margin-top: 4rem; margin-bottom: 4rem }
.mt-16  { margin-top: 4rem }
.mr-16  { margin-right: 4rem }
.mb-16  { margin-bottom: 4rem }
.ml-16  { margin-left: 4rem }
.m-20   { margin: 5rem }
.mx-20  { margin-left: 5rem; margin-right: 5rem }
.my-20  { margin-top: 5rem; margin-bottom: 5rem }
.mt-20  { margin-top: 5rem }
.mr-20  { margin-right: 5rem }
.mb-20  { margin-bottom: 5rem }
.ml-20  { margin-left: 5rem }
.m-24   { margin: 6rem }
.mx-24  { margin-left: 6rem; margin-right: 6rem }
.my-24  { margin-top: 6rem; margin-bottom: 6rem }
.mt-24  { margin-top: 6rem }
.mr-24  { margin-right: 6rem }
.mb-24  { margin-bottom: 6rem }
.ml-24  { margin-left: 6rem }
.m-28   { margin: 7rem }
.mx-28  { margin-left: 7rem; margin-right: 7rem }
.my-28  { margin-top: 7rem; margin-bottom: 7rem }
.mt-28  { margin-top: 7rem }
.mr-28  { margin-right: 7rem }
.mb-28  { margin-bottom: 7rem }
.ml-28  { margin-left: 7rem }
.m-32   { margin: 8rem }
.mx-32  { margin-left: 8rem; margin-right: 8rem }
.my-32  { margin-top: 8rem; margin-bottom: 8rem }
.mt-32  { margin-top: 8rem }
.mr-32  { margin-right: 8rem }
.mb-32  { margin-bottom: 8rem }
.ml-32  { margin-left: 8rem }
.m-36   { margin: 9rem }
.mx-36  { margin-left: 9rem; margin-right: 9rem }
.my-36  { margin-top: 9rem; margin-bottom: 9rem }
.mt-36  { margin-top: 9rem }
.mr-36  { margin-right: 9rem }
.mb-36  { margin-bottom: 9rem }
.ml-36  { margin-left: 9rem }
.m-40   { margin: 10rem }
.mx-40  { margin-left: 10rem; margin-right: 10rem }
.my-40  { margin-top: 10rem; margin-bottom: 10rem }
.mt-40  { margin-top: 10rem }
.mr-40  { margin-right: 10rem }
.mb-40  { margin-bottom: 10rem }
.ml-40  { margin-left: 10rem }
.mx-auto { margin-left: auto; margin-right: auto }
.my-auto { margin-top: auto; margin-bottom: auto }
.p-0   { padding: 0px }
.px-0  { padding-left: 0px; padding-right: 0px }
.py-0  { padding-top: 0px; padding-bottom: 0px }
.pt-0  { padding-top: 0px }
.pr-0  { padding-right: 0px }
.pb-0  { padding-bottom: 0px }
.pl-0  { padding-left: 0px }
.p-0.5   { padding: 0.125rem }
.px-0.5  { padding-left: 0.125rem; padding-right: 0.125rem }
.py-0.5  { padding-top: 0.125rem; padding-bottom: 0.125rem }
.pt-0.5  { padding-top: 0.125rem }
.pr-0.5  { padding-right: 0.125rem }
.pb-0.5  { padding-bottom: 0.125rem }
.pl-0.5  { padding-left: 0.125rem }
.p-1   { padding: 0.25rem }
.px-1  { padding-left: 0.25rem; padding-right: 0.25rem }
.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem }
.pt-1  { padding-top: 0.25rem }
.pr-1  { padding-right: 0.25rem }
.pb-1  { padding-bottom: 0.25rem }
.pl-1  { padding-left: 0.25rem }
.p-1.5   { padding: 0.375rem }
.px-1.5  { padding-left: 0.375rem; padding-right: 0.375rem }
.py-1.5  { padding-top: 0.375rem; padding-bottom: 0.375rem }
.pt-1.5  { padding-top: 0.375rem }
.pr-1.5  { padding-right: 0.375rem }
.pb-1.5  { padding-bottom: 0.375rem }
.pl-1.5  { padding-left: 0.375rem }
.p-2   { padding: 0.5rem }
.px-2  { padding-left: 0.5rem; padding-right: 0.5rem }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem }
.pt-2  { padding-top: 0.5rem }
.pr-2  { padding-right: 0.5rem }
.pb-2  { padding-bottom: 0.5rem }
.pl-2  { padding-left: 0.5rem }
.p-2.5   { padding: 0.625rem }
.px-2.5  { padding-left: 0.625rem; padding-right: 0.625rem }
.py-2.5  { padding-top: 0.625rem; padding-bottom: 0.625rem }
.pt-2.5  { padding-top: 0.625rem }
.pr-2.5  { padding-right: 0.625rem }
.pb-2.5  { padding-bottom: 0.625rem }
.pl-2.5  { padding-left: 0.625rem }
.p-3   { padding: 0.75rem }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem }
.pt-3  { padding-top: 0.75rem }
.pr-3  { padding-right: 0.75rem }
.pb-3  { padding-bottom: 0.75rem }
.pl-3  { padding-left: 0.75rem }
.p-3.5   { padding: 0.875rem }
.px-3.5  { padding-left: 0.875rem; padding-right: 0.875rem }
.py-3.5  { padding-top: 0.875rem; padding-bottom: 0.875rem }
.pt-3.5  { padding-top: 0.875rem }
.pr-3.5  { padding-right: 0.875rem }
.pb-3.5  { padding-bottom: 0.875rem }
.pl-3.5  { padding-left: 0.875rem }
.p-4   { padding: 1rem }
.px-4  { padding-left: 1rem; padding-right: 1rem }
.py-4  { padding-top: 1rem; padding-bottom: 1rem }
.pt-4  { padding-top: 1rem }
.pr-4  { padding-right: 1rem }
.pb-4  { padding-bottom: 1rem }
.pl-4  { padding-left: 1rem }
.p-5   { padding: 1.25rem }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem }
.pt-5  { padding-top: 1.25rem }
.pr-5  { padding-right: 1.25rem }
.pb-5  { padding-bottom: 1.25rem }
.pl-5  { padding-left: 1.25rem }
.p-6   { padding: 1.5rem }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem }
.py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem }
.pt-6  { padding-top: 1.5rem }
.pr-6  { padding-right: 1.5rem }
.pb-6  { padding-bottom: 1.5rem }
.pl-6  { padding-left: 1.5rem }
.p-7   { padding: 1.75rem }
.px-7  { padding-left: 1.75rem; padding-right: 1.75rem }
.py-7  { padding-top: 1.75rem; padding-bottom: 1.75rem }
.pt-7  { padding-top: 1.75rem }
.pr-7  { padding-right: 1.75rem }
.pb-7  { padding-bottom: 1.75rem }
.pl-7  { padding-left: 1.75rem }
.p-8   { padding: 2rem }
.px-8  { padding-left: 2rem; padding-right: 2rem }
.py-8  { padding-top: 2rem; padding-bottom: 2rem }
.pt-8  { padding-top: 2rem }
.pr-8  { padding-right: 2rem }
.pb-8  { padding-bottom: 2rem }
.pl-8  { padding-left: 2rem }
.p-9   { padding: 2.25rem }
.px-9  { padding-left: 2.25rem; padding-right: 2.25rem }
.py-9  { padding-top: 2.25rem; padding-bottom: 2.25rem }
.pt-9  { padding-top: 2.25rem }
.pr-9  { padding-right: 2.25rem }
.pb-9  { padding-bottom: 2.25rem }
.pl-9  { padding-left: 2.25rem }
.p-10   { padding: 2.5rem }
.px-10  { padding-left: 2.5rem; padding-right: 2.5rem }
.py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem }
.pt-10  { padding-top: 2.5rem }
.pr-10  { padding-right: 2.5rem }
.pb-10  { padding-bottom: 2.5rem }
.pl-10  { padding-left: 2.5rem }
.p-11   { padding: 2.75rem }
.px-11  { padding-left: 2.75rem; padding-right: 2.75rem }
.py-11  { padding-top: 2.75rem; padding-bottom: 2.75rem }
.pt-11  { padding-top: 2.75rem }
.pr-11  { padding-right: 2.75rem }
.pb-11  { padding-bottom: 2.75rem }
.pl-11  { padding-left: 2.75rem }
.p-12   { padding: 3rem }
.px-12  { padding-left: 3rem; padding-right: 3rem }
.py-12  { padding-top: 3rem; padding-bottom: 3rem }
.pt-12  { padding-top: 3rem }
.pr-12  { padding-right: 3rem }
.pb-12  { padding-bottom: 3rem }
.pl-12  { padding-left: 3rem }
.p-14   { padding: 3.5rem }
.px-14  { padding-left: 3.5rem; padding-right: 3.5rem }
.py-14  { padding-top: 3.5rem; padding-bottom: 3.5rem }
.pt-14  { padding-top: 3.5rem }
.pr-14  { padding-right: 3.5rem }
.pb-14  { padding-bottom: 3.5rem }
.pl-14  { padding-left: 3.5rem }
.p-16   { padding: 4rem }
.px-16  { padding-left: 4rem; padding-right: 4rem }
.py-16  { padding-top: 4rem; padding-bottom: 4rem }
.pt-16  { padding-top: 4rem }
.pr-16  { padding-right: 4rem }
.pb-16  { padding-bottom: 4rem }
.pl-16  { padding-left: 4rem }
.p-20   { padding: 5rem }
.px-20  { padding-left: 5rem; padding-right: 5rem }
.py-20  { padding-top: 5rem; padding-bottom: 5rem }
.pt-20  { padding-top: 5rem }
.pr-20  { padding-right: 5rem }
.pb-20  { padding-bottom: 5rem }
.pl-20  { padding-left: 5rem }
.p-24   { padding: 6rem }
.px-24  { padding-left: 6rem; padding-right: 6rem }
.py-24  { padding-top: 6rem; padding-bottom: 6rem }
.pt-24  { padding-top: 6rem }
.pr-24  { padding-right: 6rem }
.pb-24  { padding-bottom: 6rem }
.pl-24  { padding-left: 6rem }
.p-28   { padding: 7rem }
.px-28  { padding-left: 7rem; padding-right: 7rem }
.py-28  { padding-top: 7rem; padding-bottom: 7rem }
.pt-28  { padding-top: 7rem }
.pr-28  { padding-right: 7rem }
.pb-28  { padding-bottom: 7rem }
.pl-28  { padding-left: 7rem }
.p-32   { padding: 8rem }
.px-32  { padding-left: 8rem; padding-right: 8rem }
.py-32  { padding-top: 8rem; padding-bottom: 8rem }
.pt-32  { padding-top: 8rem }
.pr-32  { padding-right: 8rem }
.pb-32  { padding-bottom: 8rem }
.pl-32  { padding-left: 8rem }
.p-36   { padding: 9rem }
.px-36  { padding-left: 9rem; padding-right: 9rem }
.py-36  { padding-top: 9rem; padding-bottom: 9rem }
.pt-36  { padding-top: 9rem }
.pr-36  { padding-right: 9rem }
.pb-36  { padding-bottom: 9rem }
.pl-36  { padding-left: 9rem }
.p-40   { padding: 10rem }
.px-40  { padding-left: 10rem; padding-right: 10rem }
.py-40  { padding-top: 10rem; padding-bottom: 10rem }
.pt-40  { padding-top: 10rem }
.pr-40  { padding-right: 10rem }
.pb-40  { padding-bottom: 10rem }
.pl-40  { padding-left: 10rem }
.w-full   { width: 100% }
.w-auto   { width: auto }
.h-full   { height: 100% }
.h-auto   { height: auto }
.h-px     { height: 1px }
.h-screen { height: 100vh }
.w-screen { width: 100vw }
.min-h-screen { min-height: 100vh }
.min-w-0      { min-width: 0px }
.min-w-full   { min-width: 100% }
.max-w-none   { max-width: none }
.max-w-full   { max-width: 100% }
.w-0 { width: 0px }
.h-0 { height: 0px }
.w-0.5 { width: 0.125rem }
.h-0.5 { height: 0.125rem }
.w-1 { width: 0.25rem }
.h-1 { height: 0.25rem }
.w-1.5 { width: 0.375rem }
.h-1.5 { height: 0.375rem }
.w-2 { width: 0.5rem }
.h-2 { height: 0.5rem }
.w-2.5 { width: 0.625rem }
.h-2.5 { height: 0.625rem }
.w-3 { width: 0.75rem }
.h-3 { height: 0.75rem }
.w-3.5 { width: 0.875rem }
.h-3.5 { height: 0.875rem }
.w-4 { width: 1rem }
.h-4 { height: 1rem }
.w-5 { width: 1.25rem }
.h-5 { height: 1.25rem }
.w-6 { width: 1.5rem }
.h-6 { height: 1.5rem }
.w-7 { width: 1.75rem }
.h-7 { height: 1.75rem }
.w-8 { width: 2rem }
.h-8 { height: 2rem }
.w-9 { width: 2.25rem }
.h-9 { height: 2.25rem }
.w-10 { width: 2.5rem }
.h-10 { height: 2.5rem }
.w-11 { width: 2.75rem }
.h-11 { height: 2.75rem }
.w-12 { width: 3rem }
.h-12 { height: 3rem }
.w-14 { width: 3.5rem }
.h-14 { height: 3.5rem }
.w-16 { width: 4rem }
.h-16 { height: 4rem }
.w-20 { width: 5rem }
.h-20 { height: 5rem }
.w-24 { width: 6rem }
.h-24 { height: 6rem }
.w-28 { width: 7rem }
.h-28 { height: 7rem }
.w-32 { width: 8rem }
.h-32 { height: 8rem }
.w-36 { width: 9rem }
.h-36 { height: 9rem }
.w-40 { width: 10rem }
.h-40 { height: 10rem }
.max-w-xs { max-width: 20rem }
.max-w-sm { max-width: 24rem }
.max-w-md { max-width: 28rem }
.max-w-lg { max-width: 32rem }
.max-w-xl { max-width: 36rem }
.max-w-2xl { max-width: 42rem }
.max-w-3xl { max-width: 48rem }
.max-w-screen-xl { max-width: 1280px }
.bg-ink { background-color: #0B0B0B }
.bg-paper { background-color: #F2EDE4 }
.bg-acid { background-color: #D4F000 }
.bg-muted { background-color: #A09A94 }
.bg-wire { background-color: #2A2926 }
.bg-mid { background-color: #4A4440 }
.bg-\[\#0C0C0B\] { background-color: #0C0C0B }
.bg-\[\#0B0B0B\] { background-color: #0B0B0B }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)) }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) }
/* gradient vars */
:root { --tw-gradient-from: transparent; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }
.to-transparent   { --tw-gradient-to: transparent }
.via-\[\#D4F000\] { --tw-gradient-stops: var(--tw-gradient-from), #D4F000, var(--tw-gradient-to) }
.text-ink { color: #0B0B0B }
.text-paper { color: #F2EDE4 }
.text-acid { color: #D4F000 }
.text-muted { color: #A09A94 }
.text-wire { color: #2A2926 }
.text-mid { color: #7A7470 }
.border-ink { border-color: #0B0B0B }
.border-paper { border-color: #F2EDE4 }
.border-acid { border-color: #D4F000 }
.border-muted { border-color: #A09A94 }
.border-wire { border-color: #2A2926 }
.border-mid { border-color: #4A4440 }
.text-xs { font-size: 0.75rem; line-height: 1rem }
.text-sm { font-size: 0.875rem; line-height: 1.25rem }
.text-base { font-size: 1rem; line-height: 1.5rem }
.text-lg { font-size: 1.125rem; line-height: 1.75rem }
.text-xl { font-size: 1.25rem; line-height: 1.75rem }
.text-2xl { font-size: 1.5rem; line-height: 2rem }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem }
.text-left   { text-align: left }
.text-center { text-align: center }
.text-right  { text-align: right }
.font-thin       { font-weight: 100 }
.font-extralight { font-weight: 200 }
.font-light      { font-weight: 300 } /* ⚠ a11y: usare solo su display text ad alto contrasto */
.font-normal     { font-weight: 400 }
.font-medium     { font-weight: 500 }
.font-semibold   { font-weight: 600 }
.font-bold       { font-weight: 700 }
.leading-none    { line-height: 1 }
.leading-tight   { line-height: 1.25 }
.leading-snug    { line-height: 1.375 }
.leading-normal  { line-height: 1.5 }
.leading-relaxed { line-height: 1.625 }
.leading-loose   { line-height: 2 }
.tracking-tighter  { letter-spacing: -0.05em }
.tracking-tight    { letter-spacing: -0.025em }
.tracking-normal   { letter-spacing: 0em }
.tracking-wide     { letter-spacing: 0.025em }
.tracking-wider    { letter-spacing: 0.05em }
.tracking-widest   { letter-spacing: 0.1em }
.uppercase   { text-transform: uppercase }
.lowercase   { text-transform: lowercase }
.capitalize  { text-transform: capitalize }
.normal-case { text-transform: none }
.underline     { text-decoration-line: underline }
.no-underline  { text-decoration-line: none }
.whitespace-nowrap  { white-space: nowrap }
.whitespace-normal  { white-space: normal }
.break-words  { overflow-wrap: break-word }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
.tabular-nums { font-variant-numeric: tabular-nums }
.list-none    { list-style-type: none }
.border   { border-width: 1px; border-style: solid }
.border-0 { border-width: 0px }
.border-2 { border-width: 2px }
.border-t { border-top-width: 1px; border-top-style: solid }
.border-b { border-bottom-width: 1px; border-bottom-style: solid }
.border-l { border-left-width: 1px; border-left-style: solid }
.border-r { border-right-width: 1px; border-right-style: solid }
.border-y { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid }
.border-x { border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid }
.border-solid   { border-style: solid }
.border-dashed  { border-style: dashed }
.border-dotted  { border-style: dotted }
.rounded    { border-radius: 0.25rem }
.rounded-md { border-radius: 0.375rem }
.rounded-lg { border-radius: 0.5rem }
.rounded-xl { border-radius: 0.75rem }
.rounded-full { border-radius: 9999px }
.rounded-none { border-radius: 0px }
:root { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; }
.transform { transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) }
.-translate-x-3  { --tw-translate-x: -0.75rem; transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) }
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) }
.translate-y-0 { --tw-translate-y: 0px }
.transition-none      { transition-property: none }
.transition-all       { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms }
.transition-colors    { transition-property: color,background-color,border-color,text-decoration-color,fill,stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms }
.transition-opacity   { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms }
.duration-75  { transition-duration: 75ms }
.duration-100 { transition-duration: 100ms }
.duration-150 { transition-duration: 150ms }
.duration-200 { transition-duration: 200ms }
.duration-300 { transition-duration: 300ms }
.duration-500 { transition-duration: 500ms }
.duration-700 { transition-duration: 700ms }
.duration-1000 { transition-duration: 1000ms }
.ease-\[cubic-bezier\(0\.4\,0\,0\.2\,1\)\] { transition-timing-function: cubic-bezier(0.4,0,0.2,1) }
.ease-linear { transition-timing-function: linear }
.ease-in     { transition-timing-function: cubic-bezier(0.4,0,0,1) }
.ease-out    { transition-timing-function: cubic-bezier(0,0,0.2,1) }
.ease-in-out { transition-timing-function: cubic-bezier(0.4,0,0.2,1) }
.pointer-events-none { pointer-events: none }
.pointer-events-auto { pointer-events: auto }
.select-none  { user-select: none; -webkit-user-select: none }
.select-text  { user-select: text }
.select-all   { user-select: all }
.cursor-pointer { cursor: pointer }
.cursor-default { cursor: default }
.cursor-not-allowed { cursor: not-allowed }
.opacity-0   { opacity: 0 }
.opacity-50  { opacity: 0.5 }
.opacity-75  { opacity: 0.75 }
.opacity-100 { opacity: 1 }
.shadow      { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1) }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1) }
.shadow-none { box-shadow: none }
.outline-none { outline: 2px solid transparent; outline-offset: 2px }
.space-y-0   > * + * { margin-top: 0px }
.space-y-3   > * + * { margin-top: 0.75rem }
.space-y-4   > * + * { margin-top: 1rem }
.space-y-6   > * + * { margin-top: 1.5rem }
.space-y-8   > * + * { margin-top: 2rem }
.space-x-4   > * + * { margin-left: 1rem }
.aspect-video { aspect-ratio: 16/9 }
.aspect-square { aspect-ratio: 1/1 }
.scroll-smooth { scroll-behavior: smooth }
.object-cover  { object-fit: cover }
.object-contain { object-fit: contain }
.group  {}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0 }
.not-sr-only { position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal }

/* ── Hover variants ── */
.hover\:text-ink:hover { color: #0B0B0B }
.hover\:bg-ink:hover { background-color: #0B0B0B }
.hover\:border-ink:hover { border-color: #0B0B0B }
.hover\:text-paper:hover { color: #F2EDE4 }
.hover\:bg-paper:hover { background-color: #F2EDE4 }
.hover\:border-paper:hover { border-color: #F2EDE4 }
.hover\:text-acid:hover { color: #D4F000 }
.hover\:bg-acid:hover { background-color: #D4F000 }
.hover\:border-acid:hover { border-color: #D4F000 }
.hover\:text-muted:hover { color: #A09A94 }
.hover\:bg-muted:hover { background-color: #A09A94 }
.hover\:border-muted:hover { border-color: #A09A94 }
.hover\:text-wire:hover { color: #2A2926 }
.hover\:bg-wire:hover { background-color: #2A2926 }
.hover\:border-wire:hover { border-color: #2A2926 }
.hover\:text-mid:hover { color: #7A7470 }
.hover\:bg-mid:hover { background-color: #4A4440 }
.hover\:border-mid:hover { border-color: #4A4440 }
.hover\:opacity-80:hover { opacity: 0.8 }
.hover\:opacity-100:hover { opacity: 1 }
.hover\:underline:hover { text-decoration-line: underline }
.hover\:no-underline:hover { text-decoration-line: none }

/* ── Focus variants ── */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px }
.focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px #D4F000 }

/* ── Group-hover ── */
.group:hover .group-hover\:text-ink { color: #0B0B0B }
.group:hover .group-hover\:bg-ink { background-color: #0B0B0B }
.group:hover .group-hover\:text-paper { color: #F2EDE4 }
.group:hover .group-hover\:bg-paper { background-color: #F2EDE4 }
.group:hover .group-hover\:text-acid { color: #D4F000 }
.group:hover .group-hover\:bg-acid { background-color: #D4F000 }
.group:hover .group-hover\:text-muted { color: #A09A94 }
.group:hover .group-hover\:bg-muted { background-color: #A09A94 }
.group:hover .group-hover\:text-wire { color: #2A2926 }
.group:hover .group-hover\:bg-wire { background-color: #2A2926 }
.group:hover .group-hover\:text-mid { color: #7A7470 }
.group:hover .group-hover\:bg-mid { background-color: #4A4440 }

/* ── @sm (>= 640px) ── */
@media (min-width: 640px) {
  .sm\:block { display: block }
  .sm\:flex { display: flex }
  .sm\:grid { display: grid }
  .sm\:hidden { display: none }
  .sm\:inline-flex { display: inline-flex }
  .sm\:inline-block { display: inline-block }
  .sm\:flex-row { flex-direction: row }
  .sm\:flex-col { flex-direction: column }
  .sm\:flex-wrap { flex-wrap: wrap }
  .sm\:items-center { align-items: center }
  .sm\:items-start { align-items: flex-start }
  .sm\:items-end { align-items: flex-end }
  .sm\:justify-between { justify-content: space-between }
  .sm\:justify-center { justify-content: center }
  .sm\:w-auto { width: auto }
  .sm\:w-full { width: 100% }
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .sm\:px-0 { padding-left: 0px; padding-right: 0px }
  .sm\:py-0 { padding-top: 0px; padding-bottom: 0px }
  .sm\:pb-0 { padding-bottom: 0px }
  .sm\:pt-0 { padding-top: 0px }
  .sm\:pl-0 { padding-left: 0px }
  .sm\:pr-0 { padding-right: 0px }
  .sm\:mt-0 { margin-top: 0px }
  .sm\:mb-0 { margin-bottom: 0px }
  .sm\:ml-0 { margin-left: 0px }
  .sm\:mr-0 { margin-right: 0px }
  .sm\:gap-0 { gap: 0px }
  .sm\:px-0.5 { padding-left: 0.125rem; padding-right: 0.125rem }
  .sm\:py-0.5 { padding-top: 0.125rem; padding-bottom: 0.125rem }
  .sm\:pb-0.5 { padding-bottom: 0.125rem }
  .sm\:pt-0.5 { padding-top: 0.125rem }
  .sm\:pl-0.5 { padding-left: 0.125rem }
  .sm\:pr-0.5 { padding-right: 0.125rem }
  .sm\:mt-0.5 { margin-top: 0.125rem }
  .sm\:mb-0.5 { margin-bottom: 0.125rem }
  .sm\:ml-0.5 { margin-left: 0.125rem }
  .sm\:mr-0.5 { margin-right: 0.125rem }
  .sm\:gap-0.5 { gap: 0.125rem }
  .sm\:px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
  .sm\:py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
  .sm\:pb-1 { padding-bottom: 0.25rem }
  .sm\:pt-1 { padding-top: 0.25rem }
  .sm\:pl-1 { padding-left: 0.25rem }
  .sm\:pr-1 { padding-right: 0.25rem }
  .sm\:mt-1 { margin-top: 0.25rem }
  .sm\:mb-1 { margin-bottom: 0.25rem }
  .sm\:ml-1 { margin-left: 0.25rem }
  .sm\:mr-1 { margin-right: 0.25rem }
  .sm\:gap-1 { gap: 0.25rem }
  .sm\:px-1.5 { padding-left: 0.375rem; padding-right: 0.375rem }
  .sm\:py-1.5 { padding-top: 0.375rem; padding-bottom: 0.375rem }
  .sm\:pb-1.5 { padding-bottom: 0.375rem }
  .sm\:pt-1.5 { padding-top: 0.375rem }
  .sm\:pl-1.5 { padding-left: 0.375rem }
  .sm\:pr-1.5 { padding-right: 0.375rem }
  .sm\:mt-1.5 { margin-top: 0.375rem }
  .sm\:mb-1.5 { margin-bottom: 0.375rem }
  .sm\:ml-1.5 { margin-left: 0.375rem }
  .sm\:mr-1.5 { margin-right: 0.375rem }
  .sm\:gap-1.5 { gap: 0.375rem }
  .sm\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
  .sm\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
  .sm\:pb-2 { padding-bottom: 0.5rem }
  .sm\:pt-2 { padding-top: 0.5rem }
  .sm\:pl-2 { padding-left: 0.5rem }
  .sm\:pr-2 { padding-right: 0.5rem }
  .sm\:mt-2 { margin-top: 0.5rem }
  .sm\:mb-2 { margin-bottom: 0.5rem }
  .sm\:ml-2 { margin-left: 0.5rem }
  .sm\:mr-2 { margin-right: 0.5rem }
  .sm\:gap-2 { gap: 0.5rem }
  .sm\:px-2.5 { padding-left: 0.625rem; padding-right: 0.625rem }
  .sm\:py-2.5 { padding-top: 0.625rem; padding-bottom: 0.625rem }
  .sm\:pb-2.5 { padding-bottom: 0.625rem }
  .sm\:pt-2.5 { padding-top: 0.625rem }
  .sm\:pl-2.5 { padding-left: 0.625rem }
  .sm\:pr-2.5 { padding-right: 0.625rem }
  .sm\:mt-2.5 { margin-top: 0.625rem }
  .sm\:mb-2.5 { margin-bottom: 0.625rem }
  .sm\:ml-2.5 { margin-left: 0.625rem }
  .sm\:mr-2.5 { margin-right: 0.625rem }
  .sm\:gap-2.5 { gap: 0.625rem }
  .sm\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
  .sm\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem }
  .sm\:pb-3 { padding-bottom: 0.75rem }
  .sm\:pt-3 { padding-top: 0.75rem }
  .sm\:pl-3 { padding-left: 0.75rem }
  .sm\:pr-3 { padding-right: 0.75rem }
  .sm\:mt-3 { margin-top: 0.75rem }
  .sm\:mb-3 { margin-bottom: 0.75rem }
  .sm\:ml-3 { margin-left: 0.75rem }
  .sm\:mr-3 { margin-right: 0.75rem }
  .sm\:gap-3 { gap: 0.75rem }
  .sm\:px-3.5 { padding-left: 0.875rem; padding-right: 0.875rem }
  .sm\:py-3.5 { padding-top: 0.875rem; padding-bottom: 0.875rem }
  .sm\:pb-3.5 { padding-bottom: 0.875rem }
  .sm\:pt-3.5 { padding-top: 0.875rem }
  .sm\:pl-3.5 { padding-left: 0.875rem }
  .sm\:pr-3.5 { padding-right: 0.875rem }
  .sm\:mt-3.5 { margin-top: 0.875rem }
  .sm\:mb-3.5 { margin-bottom: 0.875rem }
  .sm\:ml-3.5 { margin-left: 0.875rem }
  .sm\:mr-3.5 { margin-right: 0.875rem }
  .sm\:gap-3.5 { gap: 0.875rem }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem }
  .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem }
  .sm\:pb-4 { padding-bottom: 1rem }
  .sm\:pt-4 { padding-top: 1rem }
  .sm\:pl-4 { padding-left: 1rem }
  .sm\:pr-4 { padding-right: 1rem }
  .sm\:mt-4 { margin-top: 1rem }
  .sm\:mb-4 { margin-bottom: 1rem }
  .sm\:ml-4 { margin-left: 1rem }
  .sm\:mr-4 { margin-right: 1rem }
  .sm\:gap-4 { gap: 1rem }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem }
  .sm\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
  .sm\:pb-5 { padding-bottom: 1.25rem }
  .sm\:pt-5 { padding-top: 1.25rem }
  .sm\:pl-5 { padding-left: 1.25rem }
  .sm\:pr-5 { padding-right: 1.25rem }
  .sm\:mt-5 { margin-top: 1.25rem }
  .sm\:mb-5 { margin-bottom: 1.25rem }
  .sm\:ml-5 { margin-left: 1.25rem }
  .sm\:mr-5 { margin-right: 1.25rem }
  .sm\:gap-5 { gap: 1.25rem }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
  .sm\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
  .sm\:pb-6 { padding-bottom: 1.5rem }
  .sm\:pt-6 { padding-top: 1.5rem }
  .sm\:pl-6 { padding-left: 1.5rem }
  .sm\:pr-6 { padding-right: 1.5rem }
  .sm\:mt-6 { margin-top: 1.5rem }
  .sm\:mb-6 { margin-bottom: 1.5rem }
  .sm\:ml-6 { margin-left: 1.5rem }
  .sm\:mr-6 { margin-right: 1.5rem }
  .sm\:gap-6 { gap: 1.5rem }
  .sm\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
  .sm\:py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
  .sm\:pb-7 { padding-bottom: 1.75rem }
  .sm\:pt-7 { padding-top: 1.75rem }
  .sm\:pl-7 { padding-left: 1.75rem }
  .sm\:pr-7 { padding-right: 1.75rem }
  .sm\:mt-7 { margin-top: 1.75rem }
  .sm\:mb-7 { margin-bottom: 1.75rem }
  .sm\:ml-7 { margin-left: 1.75rem }
  .sm\:mr-7 { margin-right: 1.75rem }
  .sm\:gap-7 { gap: 1.75rem }
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem }
  .sm\:py-8 { padding-top: 2rem; padding-bottom: 2rem }
  .sm\:pb-8 { padding-bottom: 2rem }
  .sm\:pt-8 { padding-top: 2rem }
  .sm\:pl-8 { padding-left: 2rem }
  .sm\:pr-8 { padding-right: 2rem }
  .sm\:mt-8 { margin-top: 2rem }
  .sm\:mb-8 { margin-bottom: 2rem }
  .sm\:ml-8 { margin-left: 2rem }
  .sm\:mr-8 { margin-right: 2rem }
  .sm\:gap-8 { gap: 2rem }
  .sm\:px-9 { padding-left: 2.25rem; padding-right: 2.25rem }
  .sm\:py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem }
  .sm\:pb-9 { padding-bottom: 2.25rem }
  .sm\:pt-9 { padding-top: 2.25rem }
  .sm\:pl-9 { padding-left: 2.25rem }
  .sm\:pr-9 { padding-right: 2.25rem }
  .sm\:mt-9 { margin-top: 2.25rem }
  .sm\:mb-9 { margin-bottom: 2.25rem }
  .sm\:ml-9 { margin-left: 2.25rem }
  .sm\:mr-9 { margin-right: 2.25rem }
  .sm\:gap-9 { gap: 2.25rem }
  .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
  .sm\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
  .sm\:pb-10 { padding-bottom: 2.5rem }
  .sm\:pt-10 { padding-top: 2.5rem }
  .sm\:pl-10 { padding-left: 2.5rem }
  .sm\:pr-10 { padding-right: 2.5rem }
  .sm\:mt-10 { margin-top: 2.5rem }
  .sm\:mb-10 { margin-bottom: 2.5rem }
  .sm\:ml-10 { margin-left: 2.5rem }
  .sm\:mr-10 { margin-right: 2.5rem }
  .sm\:gap-10 { gap: 2.5rem }
  .sm\:px-11 { padding-left: 2.75rem; padding-right: 2.75rem }
  .sm\:py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem }
  .sm\:pb-11 { padding-bottom: 2.75rem }
  .sm\:pt-11 { padding-top: 2.75rem }
  .sm\:pl-11 { padding-left: 2.75rem }
  .sm\:pr-11 { padding-right: 2.75rem }
  .sm\:mt-11 { margin-top: 2.75rem }
  .sm\:mb-11 { margin-bottom: 2.75rem }
  .sm\:ml-11 { margin-left: 2.75rem }
  .sm\:mr-11 { margin-right: 2.75rem }
  .sm\:gap-11 { gap: 2.75rem }
  .sm\:px-12 { padding-left: 3rem; padding-right: 3rem }
  .sm\:py-12 { padding-top: 3rem; padding-bottom: 3rem }
  .sm\:pb-12 { padding-bottom: 3rem }
  .sm\:pt-12 { padding-top: 3rem }
  .sm\:pl-12 { padding-left: 3rem }
  .sm\:pr-12 { padding-right: 3rem }
  .sm\:mt-12 { margin-top: 3rem }
  .sm\:mb-12 { margin-bottom: 3rem }
  .sm\:ml-12 { margin-left: 3rem }
  .sm\:mr-12 { margin-right: 3rem }
  .sm\:gap-12 { gap: 3rem }
  .sm\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem }
  .sm\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem }
  .sm\:pb-14 { padding-bottom: 3.5rem }
  .sm\:pt-14 { padding-top: 3.5rem }
  .sm\:pl-14 { padding-left: 3.5rem }
  .sm\:pr-14 { padding-right: 3.5rem }
  .sm\:mt-14 { margin-top: 3.5rem }
  .sm\:mb-14 { margin-bottom: 3.5rem }
  .sm\:ml-14 { margin-left: 3.5rem }
  .sm\:mr-14 { margin-right: 3.5rem }
  .sm\:gap-14 { gap: 3.5rem }
  .sm\:px-16 { padding-left: 4rem; padding-right: 4rem }
  .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem }
  .sm\:pb-16 { padding-bottom: 4rem }
  .sm\:pt-16 { padding-top: 4rem }
  .sm\:pl-16 { padding-left: 4rem }
  .sm\:pr-16 { padding-right: 4rem }
  .sm\:mt-16 { margin-top: 4rem }
  .sm\:mb-16 { margin-bottom: 4rem }
  .sm\:ml-16 { margin-left: 4rem }
  .sm\:mr-16 { margin-right: 4rem }
  .sm\:gap-16 { gap: 4rem }
  .sm\:px-20 { padding-left: 5rem; padding-right: 5rem }
  .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem }
  .sm\:pb-20 { padding-bottom: 5rem }
  .sm\:pt-20 { padding-top: 5rem }
  .sm\:pl-20 { padding-left: 5rem }
  .sm\:pr-20 { padding-right: 5rem }
  .sm\:mt-20 { margin-top: 5rem }
  .sm\:mb-20 { margin-bottom: 5rem }
  .sm\:ml-20 { margin-left: 5rem }
  .sm\:mr-20 { margin-right: 5rem }
  .sm\:gap-20 { gap: 5rem }
  .sm\:px-24 { padding-left: 6rem; padding-right: 6rem }
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem }
  .sm\:pb-24 { padding-bottom: 6rem }
  .sm\:pt-24 { padding-top: 6rem }
  .sm\:pl-24 { padding-left: 6rem }
  .sm\:pr-24 { padding-right: 6rem }
  .sm\:mt-24 { margin-top: 6rem }
  .sm\:mb-24 { margin-bottom: 6rem }
  .sm\:ml-24 { margin-left: 6rem }
  .sm\:mr-24 { margin-right: 6rem }
  .sm\:gap-24 { gap: 6rem }
  .sm\:px-28 { padding-left: 7rem; padding-right: 7rem }
  .sm\:py-28 { padding-top: 7rem; padding-bottom: 7rem }
  .sm\:pb-28 { padding-bottom: 7rem }
  .sm\:pt-28 { padding-top: 7rem }
  .sm\:pl-28 { padding-left: 7rem }
  .sm\:pr-28 { padding-right: 7rem }
  .sm\:mt-28 { margin-top: 7rem }
  .sm\:mb-28 { margin-bottom: 7rem }
  .sm\:ml-28 { margin-left: 7rem }
  .sm\:mr-28 { margin-right: 7rem }
  .sm\:gap-28 { gap: 7rem }
  .sm\:px-32 { padding-left: 8rem; padding-right: 8rem }
  .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem }
  .sm\:pb-32 { padding-bottom: 8rem }
  .sm\:pt-32 { padding-top: 8rem }
  .sm\:pl-32 { padding-left: 8rem }
  .sm\:pr-32 { padding-right: 8rem }
  .sm\:mt-32 { margin-top: 8rem }
  .sm\:mb-32 { margin-bottom: 8rem }
  .sm\:ml-32 { margin-left: 8rem }
  .sm\:mr-32 { margin-right: 8rem }
  .sm\:gap-32 { gap: 8rem }
  .sm\:px-36 { padding-left: 9rem; padding-right: 9rem }
  .sm\:py-36 { padding-top: 9rem; padding-bottom: 9rem }
  .sm\:pb-36 { padding-bottom: 9rem }
  .sm\:pt-36 { padding-top: 9rem }
  .sm\:pl-36 { padding-left: 9rem }
  .sm\:pr-36 { padding-right: 9rem }
  .sm\:mt-36 { margin-top: 9rem }
  .sm\:mb-36 { margin-bottom: 9rem }
  .sm\:ml-36 { margin-left: 9rem }
  .sm\:mr-36 { margin-right: 9rem }
  .sm\:gap-36 { gap: 9rem }
  .sm\:px-40 { padding-left: 10rem; padding-right: 10rem }
  .sm\:py-40 { padding-top: 10rem; padding-bottom: 10rem }
  .sm\:pb-40 { padding-bottom: 10rem }
  .sm\:pt-40 { padding-top: 10rem }
  .sm\:pl-40 { padding-left: 10rem }
  .sm\:pr-40 { padding-right: 10rem }
  .sm\:mt-40 { margin-top: 10rem }
  .sm\:mb-40 { margin-bottom: 10rem }
  .sm\:ml-40 { margin-left: 10rem }
  .sm\:mr-40 { margin-right: 10rem }
  .sm\:gap-40 { gap: 10rem }
  .sm\:text-xs { font-size: 0.75rem; line-height: 1rem }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem }
  .sm\:text-left { text-align: left }
  .sm\:text-center { text-align: center }
  .sm\:text-right { text-align: right }
  .sm\:max-w-xs { max-width: 20rem }
  .sm\:max-w-sm { max-width: 24rem }
  .sm\:max-w-md { max-width: 28rem }
  .sm\:max-w-lg { max-width: 32rem }
  .sm\:max-w-xl { max-width: 36rem }
  .sm\:max-w-2xl { max-width: 42rem }
  .sm\:max-w-3xl { max-width: 48rem }
  .sm\:max-w-screen-xl { max-width: 1280px }
  .sm\:text-ink { color: #0B0B0B }
  .sm\:bg-ink { background-color: #0B0B0B }
  .sm\:border-ink { border-color: #0B0B0B }
  .sm\:text-paper { color: #F2EDE4 }
  .sm\:bg-paper { background-color: #F2EDE4 }
  .sm\:border-paper { border-color: #F2EDE4 }
  .sm\:text-acid { color: #D4F000 }
  .sm\:bg-acid { background-color: #D4F000 }
  .sm\:border-acid { border-color: #D4F000 }
  .sm\:text-muted { color: #A09A94 }
  .sm\:bg-muted { background-color: #A09A94 }
  .sm\:border-muted { border-color: #A09A94 }
  .sm\:text-wire { color: #2A2926 }
  .sm\:bg-wire { background-color: #2A2926 }
  .sm\:border-wire { border-color: #2A2926 }
  .sm\:text-mid { color: #4A4440 }
  .sm\:bg-mid { background-color: #4A4440 }
  .sm\:border-mid { border-color: #4A4440 }
  .sm\:border-l { border-left-width: 1px; border-left-style: solid }
  .sm\:border-0 { border-width: 0px }
  .sm\:py-0 { padding-top: 0; padding-bottom: 0 }
}

/* ── @md (>= 768px) ── */
@media (min-width: 768px) {
  .md\:block { display: block }
  .md\:flex { display: flex }
  .md\:grid { display: grid }
  .md\:hidden { display: none !important }
  .md\:inline-flex { display: inline-flex }
  .md\:inline-block { display: inline-block }
  .md\:flex-row { flex-direction: row }
  .md\:flex-col { flex-direction: column }
  .md\:flex-wrap { flex-wrap: wrap }
  .md\:items-center { align-items: center }
  .md\:items-start { align-items: flex-start }
  .md\:items-end { align-items: flex-end }
  .md\:justify-between { justify-content: space-between }
  .md\:justify-center { justify-content: center }
  .md\:w-auto { width: auto }
  .md\:w-full { width: 100% }
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .md\:px-0 { padding-left: 0px; padding-right: 0px }
  .md\:py-0 { padding-top: 0px; padding-bottom: 0px }
  .md\:pb-0 { padding-bottom: 0px }
  .md\:pt-0 { padding-top: 0px }
  .md\:pl-0 { padding-left: 0px }
  .md\:pr-0 { padding-right: 0px }
  .md\:mt-0 { margin-top: 0px }
  .md\:mb-0 { margin-bottom: 0px }
  .md\:ml-0 { margin-left: 0px }
  .md\:mr-0 { margin-right: 0px }
  .md\:gap-0 { gap: 0px }
  .md\:px-0.5 { padding-left: 0.125rem; padding-right: 0.125rem }
  .md\:py-0.5 { padding-top: 0.125rem; padding-bottom: 0.125rem }
  .md\:pb-0.5 { padding-bottom: 0.125rem }
  .md\:pt-0.5 { padding-top: 0.125rem }
  .md\:pl-0.5 { padding-left: 0.125rem }
  .md\:pr-0.5 { padding-right: 0.125rem }
  .md\:mt-0.5 { margin-top: 0.125rem }
  .md\:mb-0.5 { margin-bottom: 0.125rem }
  .md\:ml-0.5 { margin-left: 0.125rem }
  .md\:mr-0.5 { margin-right: 0.125rem }
  .md\:gap-0.5 { gap: 0.125rem }
  .md\:px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
  .md\:py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
  .md\:pb-1 { padding-bottom: 0.25rem }
  .md\:pt-1 { padding-top: 0.25rem }
  .md\:pl-1 { padding-left: 0.25rem }
  .md\:pr-1 { padding-right: 0.25rem }
  .md\:mt-1 { margin-top: 0.25rem }
  .md\:mb-1 { margin-bottom: 0.25rem }
  .md\:ml-1 { margin-left: 0.25rem }
  .md\:mr-1 { margin-right: 0.25rem }
  .md\:gap-1 { gap: 0.25rem }
  .md\:px-1.5 { padding-left: 0.375rem; padding-right: 0.375rem }
  .md\:py-1.5 { padding-top: 0.375rem; padding-bottom: 0.375rem }
  .md\:pb-1.5 { padding-bottom: 0.375rem }
  .md\:pt-1.5 { padding-top: 0.375rem }
  .md\:pl-1.5 { padding-left: 0.375rem }
  .md\:pr-1.5 { padding-right: 0.375rem }
  .md\:mt-1.5 { margin-top: 0.375rem }
  .md\:mb-1.5 { margin-bottom: 0.375rem }
  .md\:ml-1.5 { margin-left: 0.375rem }
  .md\:mr-1.5 { margin-right: 0.375rem }
  .md\:gap-1.5 { gap: 0.375rem }
  .md\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
  .md\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
  .md\:pb-2 { padding-bottom: 0.5rem }
  .md\:pt-2 { padding-top: 0.5rem }
  .md\:pl-2 { padding-left: 0.5rem }
  .md\:pr-2 { padding-right: 0.5rem }
  .md\:mt-2 { margin-top: 0.5rem }
  .md\:mb-2 { margin-bottom: 0.5rem }
  .md\:ml-2 { margin-left: 0.5rem }
  .md\:mr-2 { margin-right: 0.5rem }
  .md\:gap-2 { gap: 0.5rem }
  .md\:px-2.5 { padding-left: 0.625rem; padding-right: 0.625rem }
  .md\:py-2.5 { padding-top: 0.625rem; padding-bottom: 0.625rem }
  .md\:pb-2.5 { padding-bottom: 0.625rem }
  .md\:pt-2.5 { padding-top: 0.625rem }
  .md\:pl-2.5 { padding-left: 0.625rem }
  .md\:pr-2.5 { padding-right: 0.625rem }
  .md\:mt-2.5 { margin-top: 0.625rem }
  .md\:mb-2.5 { margin-bottom: 0.625rem }
  .md\:ml-2.5 { margin-left: 0.625rem }
  .md\:mr-2.5 { margin-right: 0.625rem }
  .md\:gap-2.5 { gap: 0.625rem }
  .md\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
  .md\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem }
  .md\:pb-3 { padding-bottom: 0.75rem }
  .md\:pt-3 { padding-top: 0.75rem }
  .md\:pl-3 { padding-left: 0.75rem }
  .md\:pr-3 { padding-right: 0.75rem }
  .md\:mt-3 { margin-top: 0.75rem }
  .md\:mb-3 { margin-bottom: 0.75rem }
  .md\:ml-3 { margin-left: 0.75rem }
  .md\:mr-3 { margin-right: 0.75rem }
  .md\:gap-3 { gap: 0.75rem }
  .md\:px-3.5 { padding-left: 0.875rem; padding-right: 0.875rem }
  .md\:py-3.5 { padding-top: 0.875rem; padding-bottom: 0.875rem }
  .md\:pb-3.5 { padding-bottom: 0.875rem }
  .md\:pt-3.5 { padding-top: 0.875rem }
  .md\:pl-3.5 { padding-left: 0.875rem }
  .md\:pr-3.5 { padding-right: 0.875rem }
  .md\:mt-3.5 { margin-top: 0.875rem }
  .md\:mb-3.5 { margin-bottom: 0.875rem }
  .md\:ml-3.5 { margin-left: 0.875rem }
  .md\:mr-3.5 { margin-right: 0.875rem }
  .md\:gap-3.5 { gap: 0.875rem }
  .md\:px-4 { padding-left: 1rem; padding-right: 1rem }
  .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem }
  .md\:pb-4 { padding-bottom: 1rem }
  .md\:pt-4 { padding-top: 1rem }
  .md\:pl-4 { padding-left: 1rem }
  .md\:pr-4 { padding-right: 1rem }
  .md\:mt-4 { margin-top: 1rem }
  .md\:mb-4 { margin-bottom: 1rem }
  .md\:ml-4 { margin-left: 1rem }
  .md\:mr-4 { margin-right: 1rem }
  .md\:gap-4 { gap: 1rem }
  .md\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem }
  .md\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
  .md\:pb-5 { padding-bottom: 1.25rem }
  .md\:pt-5 { padding-top: 1.25rem }
  .md\:pl-5 { padding-left: 1.25rem }
  .md\:pr-5 { padding-right: 1.25rem }
  .md\:mt-5 { margin-top: 1.25rem }
  .md\:mb-5 { margin-bottom: 1.25rem }
  .md\:ml-5 { margin-left: 1.25rem }
  .md\:mr-5 { margin-right: 1.25rem }
  .md\:gap-5 { gap: 1.25rem }
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
  .md\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
  .md\:pb-6 { padding-bottom: 1.5rem }
  .md\:pt-6 { padding-top: 1.5rem }
  .md\:pl-6 { padding-left: 1.5rem }
  .md\:pr-6 { padding-right: 1.5rem }
  .md\:mt-6 { margin-top: 1.5rem }
  .md\:mb-6 { margin-bottom: 1.5rem }
  .md\:ml-6 { margin-left: 1.5rem }
  .md\:mr-6 { margin-right: 1.5rem }
  .md\:gap-6 { gap: 1.5rem }
  .md\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
  .md\:py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
  .md\:pb-7 { padding-bottom: 1.75rem }
  .md\:pt-7 { padding-top: 1.75rem }
  .md\:pl-7 { padding-left: 1.75rem }
  .md\:pr-7 { padding-right: 1.75rem }
  .md\:mt-7 { margin-top: 1.75rem }
  .md\:mb-7 { margin-bottom: 1.75rem }
  .md\:ml-7 { margin-left: 1.75rem }
  .md\:mr-7 { margin-right: 1.75rem }
  .md\:gap-7 { gap: 1.75rem }
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem }
  .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem }
  .md\:pb-8 { padding-bottom: 2rem }
  .md\:pt-8 { padding-top: 2rem }
  .md\:pl-8 { padding-left: 2rem }
  .md\:pr-8 { padding-right: 2rem }
  .md\:mt-8 { margin-top: 2rem }
  .md\:mb-8 { margin-bottom: 2rem }
  .md\:ml-8 { margin-left: 2rem }
  .md\:mr-8 { margin-right: 2rem }
  .md\:gap-8 { gap: 2rem }
  .md\:px-9 { padding-left: 2.25rem; padding-right: 2.25rem }
  .md\:py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem }
  .md\:pb-9 { padding-bottom: 2.25rem }
  .md\:pt-9 { padding-top: 2.25rem }
  .md\:pl-9 { padding-left: 2.25rem }
  .md\:pr-9 { padding-right: 2.25rem }
  .md\:mt-9 { margin-top: 2.25rem }
  .md\:mb-9 { margin-bottom: 2.25rem }
  .md\:ml-9 { margin-left: 2.25rem }
  .md\:mr-9 { margin-right: 2.25rem }
  .md\:gap-9 { gap: 2.25rem }
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
  .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
  .md\:pb-10 { padding-bottom: 2.5rem }
  .md\:pt-10 { padding-top: 2.5rem }
  .md\:pl-10 { padding-left: 2.5rem }
  .md\:pr-10 { padding-right: 2.5rem }
  .md\:mt-10 { margin-top: 2.5rem }
  .md\:mb-10 { margin-bottom: 2.5rem }
  .md\:ml-10 { margin-left: 2.5rem }
  .md\:mr-10 { margin-right: 2.5rem }
  .md\:gap-10 { gap: 2.5rem }
  .md\:px-11 { padding-left: 2.75rem; padding-right: 2.75rem }
  .md\:py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem }
  .md\:pb-11 { padding-bottom: 2.75rem }
  .md\:pt-11 { padding-top: 2.75rem }
  .md\:pl-11 { padding-left: 2.75rem }
  .md\:pr-11 { padding-right: 2.75rem }
  .md\:mt-11 { margin-top: 2.75rem }
  .md\:mb-11 { margin-bottom: 2.75rem }
  .md\:ml-11 { margin-left: 2.75rem }
  .md\:mr-11 { margin-right: 2.75rem }
  .md\:gap-11 { gap: 2.75rem }
  .md\:px-12 { padding-left: 3rem; padding-right: 3rem }
  .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem }
  .md\:pb-12 { padding-bottom: 3rem }
  .md\:pt-12 { padding-top: 3rem }
  .md\:pl-12 { padding-left: 3rem }
  .md\:pr-12 { padding-right: 3rem }
  .md\:mt-12 { margin-top: 3rem }
  .md\:mb-12 { margin-bottom: 3rem }
  .md\:ml-12 { margin-left: 3rem }
  .md\:mr-12 { margin-right: 3rem }
  .md\:gap-12 { gap: 3rem }
  .md\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem }
  .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem }
  .md\:pb-14 { padding-bottom: 3.5rem }
  .md\:pt-14 { padding-top: 3.5rem }
  .md\:pl-14 { padding-left: 3.5rem }
  .md\:pr-14 { padding-right: 3.5rem }
  .md\:mt-14 { margin-top: 3.5rem }
  .md\:mb-14 { margin-bottom: 3.5rem }
  .md\:ml-14 { margin-left: 3.5rem }
  .md\:mr-14 { margin-right: 3.5rem }
  .md\:gap-14 { gap: 3.5rem }
  .md\:px-16 { padding-left: 4rem; padding-right: 4rem }
  .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem }
  .md\:pb-16 { padding-bottom: 4rem }
  .md\:pt-16 { padding-top: 4rem }
  .md\:pl-16 { padding-left: 4rem }
  .md\:pr-16 { padding-right: 4rem }
  .md\:mt-16 { margin-top: 4rem }
  .md\:mb-16 { margin-bottom: 4rem }
  .md\:ml-16 { margin-left: 4rem }
  .md\:mr-16 { margin-right: 4rem }
  .md\:gap-16 { gap: 4rem }
  .md\:px-20 { padding-left: 5rem; padding-right: 5rem }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem }
  .md\:pb-20 { padding-bottom: 5rem }
  .md\:pt-20 { padding-top: 5rem }
  .md\:pl-20 { padding-left: 5rem }
  .md\:pr-20 { padding-right: 5rem }
  .md\:mt-20 { margin-top: 5rem }
  .md\:mb-20 { margin-bottom: 5rem }
  .md\:ml-20 { margin-left: 5rem }
  .md\:mr-20 { margin-right: 5rem }
  .md\:gap-20 { gap: 5rem }
  .md\:px-24 { padding-left: 6rem; padding-right: 6rem }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem }
  .md\:pb-24 { padding-bottom: 6rem }
  .md\:pt-24 { padding-top: 6rem }
  .md\:pl-24 { padding-left: 6rem }
  .md\:pr-24 { padding-right: 6rem }
  .md\:mt-24 { margin-top: 6rem }
  .md\:mb-24 { margin-bottom: 6rem }
  .md\:ml-24 { margin-left: 6rem }
  .md\:mr-24 { margin-right: 6rem }
  .md\:gap-24 { gap: 6rem }
  .md\:px-28 { padding-left: 7rem; padding-right: 7rem }
  .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem }
  .md\:pb-28 { padding-bottom: 7rem }
  .md\:pt-28 { padding-top: 7rem }
  .md\:pl-28 { padding-left: 7rem }
  .md\:pr-28 { padding-right: 7rem }
  .md\:mt-28 { margin-top: 7rem }
  .md\:mb-28 { margin-bottom: 7rem }
  .md\:ml-28 { margin-left: 7rem }
  .md\:mr-28 { margin-right: 7rem }
  .md\:gap-28 { gap: 7rem }
  .md\:px-32 { padding-left: 8rem; padding-right: 8rem }
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem }
  .md\:pb-32 { padding-bottom: 8rem }
  .md\:pt-32 { padding-top: 8rem }
  .md\:pl-32 { padding-left: 8rem }
  .md\:pr-32 { padding-right: 8rem }
  .md\:mt-32 { margin-top: 8rem }
  .md\:mb-32 { margin-bottom: 8rem }
  .md\:ml-32 { margin-left: 8rem }
  .md\:mr-32 { margin-right: 8rem }
  .md\:gap-32 { gap: 8rem }
  .md\:px-36 { padding-left: 9rem; padding-right: 9rem }
  .md\:py-36 { padding-top: 9rem; padding-bottom: 9rem }
  .md\:pb-36 { padding-bottom: 9rem }
  .md\:pt-36 { padding-top: 9rem }
  .md\:pl-36 { padding-left: 9rem }
  .md\:pr-36 { padding-right: 9rem }
  .md\:mt-36 { margin-top: 9rem }
  .md\:mb-36 { margin-bottom: 9rem }
  .md\:ml-36 { margin-left: 9rem }
  .md\:mr-36 { margin-right: 9rem }
  .md\:gap-36 { gap: 9rem }
  .md\:px-40 { padding-left: 10rem; padding-right: 10rem }
  .md\:py-40 { padding-top: 10rem; padding-bottom: 10rem }
  .md\:pb-40 { padding-bottom: 10rem }
  .md\:pt-40 { padding-top: 10rem }
  .md\:pl-40 { padding-left: 10rem }
  .md\:pr-40 { padding-right: 10rem }
  .md\:mt-40 { margin-top: 10rem }
  .md\:mb-40 { margin-bottom: 10rem }
  .md\:ml-40 { margin-left: 10rem }
  .md\:mr-40 { margin-right: 10rem }
  .md\:gap-40 { gap: 10rem }
  .md\:text-xs { font-size: 0.75rem; line-height: 1rem }
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
  .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem }
  .md\:text-left { text-align: left }
  .md\:text-center { text-align: center }
  .md\:text-right { text-align: right }
  .md\:max-w-xs { max-width: 20rem }
  .md\:max-w-sm { max-width: 24rem }
  .md\:max-w-md { max-width: 28rem }
  .md\:max-w-lg { max-width: 32rem }
  .md\:max-w-xl { max-width: 36rem }
  .md\:max-w-2xl { max-width: 42rem }
  .md\:max-w-3xl { max-width: 48rem }
  .md\:max-w-screen-xl { max-width: 1280px }
  .md\:text-ink { color: #0B0B0B }
  .md\:bg-ink { background-color: #0B0B0B }
  .md\:border-ink { border-color: #0B0B0B }
  .md\:text-paper { color: #F2EDE4 }
  .md\:bg-paper { background-color: #F2EDE4 }
  .md\:border-paper { border-color: #F2EDE4 }
  .md\:text-acid { color: #D4F000 }
  .md\:bg-acid { background-color: #D4F000 }
  .md\:border-acid { border-color: #D4F000 }
  .md\:text-muted { color: #A09A94 }
  .md\:bg-muted { background-color: #A09A94 }
  .md\:border-muted { border-color: #A09A94 }
  .md\:text-wire { color: #2A2926 }
  .md\:bg-wire { background-color: #2A2926 }
  .md\:border-wire { border-color: #2A2926 }
  .md\:text-mid { color: #4A4440 }
  .md\:bg-mid { background-color: #4A4440 }
  .md\:border-mid { border-color: #4A4440 }
  .md\:border-l { border-left-width: 1px; border-left-style: solid }
  .md\:border-0 { border-width: 0px }
  .md\:py-0 { padding-top: 0; padding-bottom: 0 }
}

/* ── @lg (>= 1024px) ── */
@media (min-width: 1024px) {
  .lg\:block { display: block }
  .lg\:flex { display: flex }
  .lg\:grid { display: grid }
  .lg\:hidden { display: none }
  .lg\:inline-flex { display: inline-flex }
  .lg\:inline-block { display: inline-block }
  .lg\:flex-row { flex-direction: row }
  .lg\:flex-col { flex-direction: column }
  .lg\:flex-wrap { flex-wrap: wrap }
  .lg\:items-center { align-items: center }
  .lg\:items-start { align-items: flex-start }
  .lg\:items-end { align-items: flex-end }
  .lg\:justify-between { justify-content: space-between }
  .lg\:justify-center { justify-content: center }
  .lg\:w-auto { width: auto }
  .lg\:w-full { width: 100% }
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .lg\:px-0 { padding-left: 0px; padding-right: 0px }
  .lg\:py-0 { padding-top: 0px; padding-bottom: 0px }
  .lg\:pb-0 { padding-bottom: 0px }
  .lg\:pt-0 { padding-top: 0px }
  .lg\:pl-0 { padding-left: 0px }
  .lg\:pr-0 { padding-right: 0px }
  .lg\:mt-0 { margin-top: 0px }
  .lg\:mb-0 { margin-bottom: 0px }
  .lg\:ml-0 { margin-left: 0px }
  .lg\:mr-0 { margin-right: 0px }
  .lg\:gap-0 { gap: 0px }
  .lg\:px-0.5 { padding-left: 0.125rem; padding-right: 0.125rem }
  .lg\:py-0.5 { padding-top: 0.125rem; padding-bottom: 0.125rem }
  .lg\:pb-0.5 { padding-bottom: 0.125rem }
  .lg\:pt-0.5 { padding-top: 0.125rem }
  .lg\:pl-0.5 { padding-left: 0.125rem }
  .lg\:pr-0.5 { padding-right: 0.125rem }
  .lg\:mt-0.5 { margin-top: 0.125rem }
  .lg\:mb-0.5 { margin-bottom: 0.125rem }
  .lg\:ml-0.5 { margin-left: 0.125rem }
  .lg\:mr-0.5 { margin-right: 0.125rem }
  .lg\:gap-0.5 { gap: 0.125rem }
  .lg\:px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
  .lg\:py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
  .lg\:pb-1 { padding-bottom: 0.25rem }
  .lg\:pt-1 { padding-top: 0.25rem }
  .lg\:pl-1 { padding-left: 0.25rem }
  .lg\:pr-1 { padding-right: 0.25rem }
  .lg\:mt-1 { margin-top: 0.25rem }
  .lg\:mb-1 { margin-bottom: 0.25rem }
  .lg\:ml-1 { margin-left: 0.25rem }
  .lg\:mr-1 { margin-right: 0.25rem }
  .lg\:gap-1 { gap: 0.25rem }
  .lg\:px-1.5 { padding-left: 0.375rem; padding-right: 0.375rem }
  .lg\:py-1.5 { padding-top: 0.375rem; padding-bottom: 0.375rem }
  .lg\:pb-1.5 { padding-bottom: 0.375rem }
  .lg\:pt-1.5 { padding-top: 0.375rem }
  .lg\:pl-1.5 { padding-left: 0.375rem }
  .lg\:pr-1.5 { padding-right: 0.375rem }
  .lg\:mt-1.5 { margin-top: 0.375rem }
  .lg\:mb-1.5 { margin-bottom: 0.375rem }
  .lg\:ml-1.5 { margin-left: 0.375rem }
  .lg\:mr-1.5 { margin-right: 0.375rem }
  .lg\:gap-1.5 { gap: 0.375rem }
  .lg\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
  .lg\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
  .lg\:pb-2 { padding-bottom: 0.5rem }
  .lg\:pt-2 { padding-top: 0.5rem }
  .lg\:pl-2 { padding-left: 0.5rem }
  .lg\:pr-2 { padding-right: 0.5rem }
  .lg\:mt-2 { margin-top: 0.5rem }
  .lg\:mb-2 { margin-bottom: 0.5rem }
  .lg\:ml-2 { margin-left: 0.5rem }
  .lg\:mr-2 { margin-right: 0.5rem }
  .lg\:gap-2 { gap: 0.5rem }
  .lg\:px-2.5 { padding-left: 0.625rem; padding-right: 0.625rem }
  .lg\:py-2.5 { padding-top: 0.625rem; padding-bottom: 0.625rem }
  .lg\:pb-2.5 { padding-bottom: 0.625rem }
  .lg\:pt-2.5 { padding-top: 0.625rem }
  .lg\:pl-2.5 { padding-left: 0.625rem }
  .lg\:pr-2.5 { padding-right: 0.625rem }
  .lg\:mt-2.5 { margin-top: 0.625rem }
  .lg\:mb-2.5 { margin-bottom: 0.625rem }
  .lg\:ml-2.5 { margin-left: 0.625rem }
  .lg\:mr-2.5 { margin-right: 0.625rem }
  .lg\:gap-2.5 { gap: 0.625rem }
  .lg\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
  .lg\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem }
  .lg\:pb-3 { padding-bottom: 0.75rem }
  .lg\:pt-3 { padding-top: 0.75rem }
  .lg\:pl-3 { padding-left: 0.75rem }
  .lg\:pr-3 { padding-right: 0.75rem }
  .lg\:mt-3 { margin-top: 0.75rem }
  .lg\:mb-3 { margin-bottom: 0.75rem }
  .lg\:ml-3 { margin-left: 0.75rem }
  .lg\:mr-3 { margin-right: 0.75rem }
  .lg\:gap-3 { gap: 0.75rem }
  .lg\:px-3.5 { padding-left: 0.875rem; padding-right: 0.875rem }
  .lg\:py-3.5 { padding-top: 0.875rem; padding-bottom: 0.875rem }
  .lg\:pb-3.5 { padding-bottom: 0.875rem }
  .lg\:pt-3.5 { padding-top: 0.875rem }
  .lg\:pl-3.5 { padding-left: 0.875rem }
  .lg\:pr-3.5 { padding-right: 0.875rem }
  .lg\:mt-3.5 { margin-top: 0.875rem }
  .lg\:mb-3.5 { margin-bottom: 0.875rem }
  .lg\:ml-3.5 { margin-left: 0.875rem }
  .lg\:mr-3.5 { margin-right: 0.875rem }
  .lg\:gap-3.5 { gap: 0.875rem }
  .lg\:px-4 { padding-left: 1rem; padding-right: 1rem }
  .lg\:py-4 { padding-top: 1rem; padding-bottom: 1rem }
  .lg\:pb-4 { padding-bottom: 1rem }
  .lg\:pt-4 { padding-top: 1rem }
  .lg\:pl-4 { padding-left: 1rem }
  .lg\:pr-4 { padding-right: 1rem }
  .lg\:mt-4 { margin-top: 1rem }
  .lg\:mb-4 { margin-bottom: 1rem }
  .lg\:ml-4 { margin-left: 1rem }
  .lg\:mr-4 { margin-right: 1rem }
  .lg\:gap-4 { gap: 1rem }
  .lg\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem }
  .lg\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
  .lg\:pb-5 { padding-bottom: 1.25rem }
  .lg\:pt-5 { padding-top: 1.25rem }
  .lg\:pl-5 { padding-left: 1.25rem }
  .lg\:pr-5 { padding-right: 1.25rem }
  .lg\:mt-5 { margin-top: 1.25rem }
  .lg\:mb-5 { margin-bottom: 1.25rem }
  .lg\:ml-5 { margin-left: 1.25rem }
  .lg\:mr-5 { margin-right: 1.25rem }
  .lg\:gap-5 { gap: 1.25rem }
  .lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
  .lg\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
  .lg\:pb-6 { padding-bottom: 1.5rem }
  .lg\:pt-6 { padding-top: 1.5rem }
  .lg\:pl-6 { padding-left: 1.5rem }
  .lg\:pr-6 { padding-right: 1.5rem }
  .lg\:mt-6 { margin-top: 1.5rem }
  .lg\:mb-6 { margin-bottom: 1.5rem }
  .lg\:ml-6 { margin-left: 1.5rem }
  .lg\:mr-6 { margin-right: 1.5rem }
  .lg\:gap-6 { gap: 1.5rem }
  .lg\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
  .lg\:py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
  .lg\:pb-7 { padding-bottom: 1.75rem }
  .lg\:pt-7 { padding-top: 1.75rem }
  .lg\:pl-7 { padding-left: 1.75rem }
  .lg\:pr-7 { padding-right: 1.75rem }
  .lg\:mt-7 { margin-top: 1.75rem }
  .lg\:mb-7 { margin-bottom: 1.75rem }
  .lg\:ml-7 { margin-left: 1.75rem }
  .lg\:mr-7 { margin-right: 1.75rem }
  .lg\:gap-7 { gap: 1.75rem }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem }
  .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem }
  .lg\:pb-8 { padding-bottom: 2rem }
  .lg\:pt-8 { padding-top: 2rem }
  .lg\:pl-8 { padding-left: 2rem }
  .lg\:pr-8 { padding-right: 2rem }
  .lg\:mt-8 { margin-top: 2rem }
  .lg\:mb-8 { margin-bottom: 2rem }
  .lg\:ml-8 { margin-left: 2rem }
  .lg\:mr-8 { margin-right: 2rem }
  .lg\:gap-8 { gap: 2rem }
  .lg\:px-9 { padding-left: 2.25rem; padding-right: 2.25rem }
  .lg\:py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem }
  .lg\:pb-9 { padding-bottom: 2.25rem }
  .lg\:pt-9 { padding-top: 2.25rem }
  .lg\:pl-9 { padding-left: 2.25rem }
  .lg\:pr-9 { padding-right: 2.25rem }
  .lg\:mt-9 { margin-top: 2.25rem }
  .lg\:mb-9 { margin-bottom: 2.25rem }
  .lg\:ml-9 { margin-left: 2.25rem }
  .lg\:mr-9 { margin-right: 2.25rem }
  .lg\:gap-9 { gap: 2.25rem }
  .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
  .lg\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
  .lg\:pb-10 { padding-bottom: 2.5rem }
  .lg\:pt-10 { padding-top: 2.5rem }
  .lg\:pl-10 { padding-left: 2.5rem }
  .lg\:pr-10 { padding-right: 2.5rem }
  .lg\:mt-10 { margin-top: 2.5rem }
  .lg\:mb-10 { margin-bottom: 2.5rem }
  .lg\:ml-10 { margin-left: 2.5rem }
  .lg\:mr-10 { margin-right: 2.5rem }
  .lg\:gap-10 { gap: 2.5rem }
  .lg\:px-11 { padding-left: 2.75rem; padding-right: 2.75rem }
  .lg\:py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem }
  .lg\:pb-11 { padding-bottom: 2.75rem }
  .lg\:pt-11 { padding-top: 2.75rem }
  .lg\:pl-11 { padding-left: 2.75rem }
  .lg\:pr-11 { padding-right: 2.75rem }
  .lg\:mt-11 { margin-top: 2.75rem }
  .lg\:mb-11 { margin-bottom: 2.75rem }
  .lg\:ml-11 { margin-left: 2.75rem }
  .lg\:mr-11 { margin-right: 2.75rem }
  .lg\:gap-11 { gap: 2.75rem }
  .lg\:px-12 { padding-left: 3rem; padding-right: 3rem }
  .lg\:py-12 { padding-top: 3rem; padding-bottom: 3rem }
  .lg\:pb-12 { padding-bottom: 3rem }
  .lg\:pt-12 { padding-top: 3rem }
  .lg\:pl-12 { padding-left: 3rem }
  .lg\:pr-12 { padding-right: 3rem }
  .lg\:mt-12 { margin-top: 3rem }
  .lg\:mb-12 { margin-bottom: 3rem }
  .lg\:ml-12 { margin-left: 3rem }
  .lg\:mr-12 { margin-right: 3rem }
  .lg\:gap-12 { gap: 3rem }
  .lg\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem }
  .lg\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem }
  .lg\:pb-14 { padding-bottom: 3.5rem }
  .lg\:pt-14 { padding-top: 3.5rem }
  .lg\:pl-14 { padding-left: 3.5rem }
  .lg\:pr-14 { padding-right: 3.5rem }
  .lg\:mt-14 { margin-top: 3.5rem }
  .lg\:mb-14 { margin-bottom: 3.5rem }
  .lg\:ml-14 { margin-left: 3.5rem }
  .lg\:mr-14 { margin-right: 3.5rem }
  .lg\:gap-14 { gap: 3.5rem }
  .lg\:px-16 { padding-left: 4rem; padding-right: 4rem }
  .lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem }
  .lg\:pb-16 { padding-bottom: 4rem }
  .lg\:pt-16 { padding-top: 4rem }
  .lg\:pl-16 { padding-left: 4rem }
  .lg\:pr-16 { padding-right: 4rem }
  .lg\:mt-16 { margin-top: 4rem }
  .lg\:mb-16 { margin-bottom: 4rem }
  .lg\:ml-16 { margin-left: 4rem }
  .lg\:mr-16 { margin-right: 4rem }
  .lg\:gap-16 { gap: 4rem }
  .lg\:px-20 { padding-left: 5rem; padding-right: 5rem }
  .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem }
  .lg\:pb-20 { padding-bottom: 5rem }
  .lg\:pt-20 { padding-top: 5rem }
  .lg\:pl-20 { padding-left: 5rem }
  .lg\:pr-20 { padding-right: 5rem }
  .lg\:mt-20 { margin-top: 5rem }
  .lg\:mb-20 { margin-bottom: 5rem }
  .lg\:ml-20 { margin-left: 5rem }
  .lg\:mr-20 { margin-right: 5rem }
  .lg\:gap-20 { gap: 5rem }
  .lg\:px-24 { padding-left: 6rem; padding-right: 6rem }
  .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem }
  .lg\:pb-24 { padding-bottom: 6rem }
  .lg\:pt-24 { padding-top: 6rem }
  .lg\:pl-24 { padding-left: 6rem }
  .lg\:pr-24 { padding-right: 6rem }
  .lg\:mt-24 { margin-top: 6rem }
  .lg\:mb-24 { margin-bottom: 6rem }
  .lg\:ml-24 { margin-left: 6rem }
  .lg\:mr-24 { margin-right: 6rem }
  .lg\:gap-24 { gap: 6rem }
  .lg\:px-28 { padding-left: 7rem; padding-right: 7rem }
  .lg\:py-28 { padding-top: 7rem; padding-bottom: 7rem }
  .lg\:pb-28 { padding-bottom: 7rem }
  .lg\:pt-28 { padding-top: 7rem }
  .lg\:pl-28 { padding-left: 7rem }
  .lg\:pr-28 { padding-right: 7rem }
  .lg\:mt-28 { margin-top: 7rem }
  .lg\:mb-28 { margin-bottom: 7rem }
  .lg\:ml-28 { margin-left: 7rem }
  .lg\:mr-28 { margin-right: 7rem }
  .lg\:gap-28 { gap: 7rem }
  .lg\:px-32 { padding-left: 8rem; padding-right: 8rem }
  .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem }
  .lg\:pb-32 { padding-bottom: 8rem }
  .lg\:pt-32 { padding-top: 8rem }
  .lg\:pl-32 { padding-left: 8rem }
  .lg\:pr-32 { padding-right: 8rem }
  .lg\:mt-32 { margin-top: 8rem }
  .lg\:mb-32 { margin-bottom: 8rem }
  .lg\:ml-32 { margin-left: 8rem }
  .lg\:mr-32 { margin-right: 8rem }
  .lg\:gap-32 { gap: 8rem }
  .lg\:px-36 { padding-left: 9rem; padding-right: 9rem }
  .lg\:py-36 { padding-top: 9rem; padding-bottom: 9rem }
  .lg\:pb-36 { padding-bottom: 9rem }
  .lg\:pt-36 { padding-top: 9rem }
  .lg\:pl-36 { padding-left: 9rem }
  .lg\:pr-36 { padding-right: 9rem }
  .lg\:mt-36 { margin-top: 9rem }
  .lg\:mb-36 { margin-bottom: 9rem }
  .lg\:ml-36 { margin-left: 9rem }
  .lg\:mr-36 { margin-right: 9rem }
  .lg\:gap-36 { gap: 9rem }
  .lg\:px-40 { padding-left: 10rem; padding-right: 10rem }
  .lg\:py-40 { padding-top: 10rem; padding-bottom: 10rem }
  .lg\:pb-40 { padding-bottom: 10rem }
  .lg\:pt-40 { padding-top: 10rem }
  .lg\:pl-40 { padding-left: 10rem }
  .lg\:pr-40 { padding-right: 10rem }
  .lg\:mt-40 { margin-top: 10rem }
  .lg\:mb-40 { margin-bottom: 10rem }
  .lg\:ml-40 { margin-left: 10rem }
  .lg\:mr-40 { margin-right: 10rem }
  .lg\:gap-40 { gap: 10rem }
  .lg\:text-xs { font-size: 0.75rem; line-height: 1rem }
  .lg\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
  .lg\:text-base { font-size: 1rem; line-height: 1.5rem }
  .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
  .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
  .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
  .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem }
  .lg\:text-left { text-align: left }
  .lg\:text-center { text-align: center }
  .lg\:text-right { text-align: right }
  .lg\:max-w-xs { max-width: 20rem }
  .lg\:max-w-sm { max-width: 24rem }
  .lg\:max-w-md { max-width: 28rem }
  .lg\:max-w-lg { max-width: 32rem }
  .lg\:max-w-xl { max-width: 36rem }
  .lg\:max-w-2xl { max-width: 42rem }
  .lg\:max-w-3xl { max-width: 48rem }
  .lg\:max-w-screen-xl { max-width: 1280px }
  .lg\:text-ink { color: #0B0B0B }
  .lg\:bg-ink { background-color: #0B0B0B }
  .lg\:border-ink { border-color: #0B0B0B }
  .lg\:text-paper { color: #F2EDE4 }
  .lg\:bg-paper { background-color: #F2EDE4 }
  .lg\:border-paper { border-color: #F2EDE4 }
  .lg\:text-acid { color: #D4F000 }
  .lg\:bg-acid { background-color: #D4F000 }
  .lg\:border-acid { border-color: #D4F000 }
  .lg\:text-muted { color: #A09A94 }
  .lg\:bg-muted { background-color: #A09A94 }
  .lg\:border-muted { border-color: #A09A94 }
  .lg\:text-wire { color: #2A2926 }
  .lg\:bg-wire { background-color: #2A2926 }
  .lg\:border-wire { border-color: #2A2926 }
  .lg\:text-mid { color: #4A4440 }
  .lg\:bg-mid { background-color: #4A4440 }
  .lg\:border-mid { border-color: #4A4440 }
  .lg\:border-l { border-left-width: 1px; border-left-style: solid }
  .lg\:border-0 { border-width: 0px }
  .lg\:py-0 { padding-top: 0; padding-bottom: 0 }
}

/* ── @xl (>= 1280px) ── */
@media (min-width: 1280px) {
  .xl\:block { display: block }
  .xl\:flex { display: flex }
  .xl\:grid { display: grid }
  .xl\:hidden { display: none }
  .xl\:inline-flex { display: inline-flex }
  .xl\:inline-block { display: inline-block }
  .xl\:flex-row { flex-direction: row }
  .xl\:flex-col { flex-direction: column }
  .xl\:flex-wrap { flex-wrap: wrap }
  .xl\:items-center { align-items: center }
  .xl\:items-start { align-items: flex-start }
  .xl\:items-end { align-items: flex-end }
  .xl\:justify-between { justify-content: space-between }
  .xl\:justify-center { justify-content: center }
  .xl\:w-auto { width: auto }
  .xl\:w-full { width: 100% }
  .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .xl\:px-0 { padding-left: 0px; padding-right: 0px }
  .xl\:py-0 { padding-top: 0px; padding-bottom: 0px }
  .xl\:pb-0 { padding-bottom: 0px }
  .xl\:pt-0 { padding-top: 0px }
  .xl\:pl-0 { padding-left: 0px }
  .xl\:pr-0 { padding-right: 0px }
  .xl\:mt-0 { margin-top: 0px }
  .xl\:mb-0 { margin-bottom: 0px }
  .xl\:ml-0 { margin-left: 0px }
  .xl\:mr-0 { margin-right: 0px }
  .xl\:gap-0 { gap: 0px }
  .xl\:px-0.5 { padding-left: 0.125rem; padding-right: 0.125rem }
  .xl\:py-0.5 { padding-top: 0.125rem; padding-bottom: 0.125rem }
  .xl\:pb-0.5 { padding-bottom: 0.125rem }
  .xl\:pt-0.5 { padding-top: 0.125rem }
  .xl\:pl-0.5 { padding-left: 0.125rem }
  .xl\:pr-0.5 { padding-right: 0.125rem }
  .xl\:mt-0.5 { margin-top: 0.125rem }
  .xl\:mb-0.5 { margin-bottom: 0.125rem }
  .xl\:ml-0.5 { margin-left: 0.125rem }
  .xl\:mr-0.5 { margin-right: 0.125rem }
  .xl\:gap-0.5 { gap: 0.125rem }
  .xl\:px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
  .xl\:py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
  .xl\:pb-1 { padding-bottom: 0.25rem }
  .xl\:pt-1 { padding-top: 0.25rem }
  .xl\:pl-1 { padding-left: 0.25rem }
  .xl\:pr-1 { padding-right: 0.25rem }
  .xl\:mt-1 { margin-top: 0.25rem }
  .xl\:mb-1 { margin-bottom: 0.25rem }
  .xl\:ml-1 { margin-left: 0.25rem }
  .xl\:mr-1 { margin-right: 0.25rem }
  .xl\:gap-1 { gap: 0.25rem }
  .xl\:px-1.5 { padding-left: 0.375rem; padding-right: 0.375rem }
  .xl\:py-1.5 { padding-top: 0.375rem; padding-bottom: 0.375rem }
  .xl\:pb-1.5 { padding-bottom: 0.375rem }
  .xl\:pt-1.5 { padding-top: 0.375rem }
  .xl\:pl-1.5 { padding-left: 0.375rem }
  .xl\:pr-1.5 { padding-right: 0.375rem }
  .xl\:mt-1.5 { margin-top: 0.375rem }
  .xl\:mb-1.5 { margin-bottom: 0.375rem }
  .xl\:ml-1.5 { margin-left: 0.375rem }
  .xl\:mr-1.5 { margin-right: 0.375rem }
  .xl\:gap-1.5 { gap: 0.375rem }
  .xl\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
  .xl\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
  .xl\:pb-2 { padding-bottom: 0.5rem }
  .xl\:pt-2 { padding-top: 0.5rem }
  .xl\:pl-2 { padding-left: 0.5rem }
  .xl\:pr-2 { padding-right: 0.5rem }
  .xl\:mt-2 { margin-top: 0.5rem }
  .xl\:mb-2 { margin-bottom: 0.5rem }
  .xl\:ml-2 { margin-left: 0.5rem }
  .xl\:mr-2 { margin-right: 0.5rem }
  .xl\:gap-2 { gap: 0.5rem }
  .xl\:px-2.5 { padding-left: 0.625rem; padding-right: 0.625rem }
  .xl\:py-2.5 { padding-top: 0.625rem; padding-bottom: 0.625rem }
  .xl\:pb-2.5 { padding-bottom: 0.625rem }
  .xl\:pt-2.5 { padding-top: 0.625rem }
  .xl\:pl-2.5 { padding-left: 0.625rem }
  .xl\:pr-2.5 { padding-right: 0.625rem }
  .xl\:mt-2.5 { margin-top: 0.625rem }
  .xl\:mb-2.5 { margin-bottom: 0.625rem }
  .xl\:ml-2.5 { margin-left: 0.625rem }
  .xl\:mr-2.5 { margin-right: 0.625rem }
  .xl\:gap-2.5 { gap: 0.625rem }
  .xl\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
  .xl\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem }
  .xl\:pb-3 { padding-bottom: 0.75rem }
  .xl\:pt-3 { padding-top: 0.75rem }
  .xl\:pl-3 { padding-left: 0.75rem }
  .xl\:pr-3 { padding-right: 0.75rem }
  .xl\:mt-3 { margin-top: 0.75rem }
  .xl\:mb-3 { margin-bottom: 0.75rem }
  .xl\:ml-3 { margin-left: 0.75rem }
  .xl\:mr-3 { margin-right: 0.75rem }
  .xl\:gap-3 { gap: 0.75rem }
  .xl\:px-3.5 { padding-left: 0.875rem; padding-right: 0.875rem }
  .xl\:py-3.5 { padding-top: 0.875rem; padding-bottom: 0.875rem }
  .xl\:pb-3.5 { padding-bottom: 0.875rem }
  .xl\:pt-3.5 { padding-top: 0.875rem }
  .xl\:pl-3.5 { padding-left: 0.875rem }
  .xl\:pr-3.5 { padding-right: 0.875rem }
  .xl\:mt-3.5 { margin-top: 0.875rem }
  .xl\:mb-3.5 { margin-bottom: 0.875rem }
  .xl\:ml-3.5 { margin-left: 0.875rem }
  .xl\:mr-3.5 { margin-right: 0.875rem }
  .xl\:gap-3.5 { gap: 0.875rem }
  .xl\:px-4 { padding-left: 1rem; padding-right: 1rem }
  .xl\:py-4 { padding-top: 1rem; padding-bottom: 1rem }
  .xl\:pb-4 { padding-bottom: 1rem }
  .xl\:pt-4 { padding-top: 1rem }
  .xl\:pl-4 { padding-left: 1rem }
  .xl\:pr-4 { padding-right: 1rem }
  .xl\:mt-4 { margin-top: 1rem }
  .xl\:mb-4 { margin-bottom: 1rem }
  .xl\:ml-4 { margin-left: 1rem }
  .xl\:mr-4 { margin-right: 1rem }
  .xl\:gap-4 { gap: 1rem }
  .xl\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem }
  .xl\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
  .xl\:pb-5 { padding-bottom: 1.25rem }
  .xl\:pt-5 { padding-top: 1.25rem }
  .xl\:pl-5 { padding-left: 1.25rem }
  .xl\:pr-5 { padding-right: 1.25rem }
  .xl\:mt-5 { margin-top: 1.25rem }
  .xl\:mb-5 { margin-bottom: 1.25rem }
  .xl\:ml-5 { margin-left: 1.25rem }
  .xl\:mr-5 { margin-right: 1.25rem }
  .xl\:gap-5 { gap: 1.25rem }
  .xl\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
  .xl\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
  .xl\:pb-6 { padding-bottom: 1.5rem }
  .xl\:pt-6 { padding-top: 1.5rem }
  .xl\:pl-6 { padding-left: 1.5rem }
  .xl\:pr-6 { padding-right: 1.5rem }
  .xl\:mt-6 { margin-top: 1.5rem }
  .xl\:mb-6 { margin-bottom: 1.5rem }
  .xl\:ml-6 { margin-left: 1.5rem }
  .xl\:mr-6 { margin-right: 1.5rem }
  .xl\:gap-6 { gap: 1.5rem }
  .xl\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
  .xl\:py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
  .xl\:pb-7 { padding-bottom: 1.75rem }
  .xl\:pt-7 { padding-top: 1.75rem }
  .xl\:pl-7 { padding-left: 1.75rem }
  .xl\:pr-7 { padding-right: 1.75rem }
  .xl\:mt-7 { margin-top: 1.75rem }
  .xl\:mb-7 { margin-bottom: 1.75rem }
  .xl\:ml-7 { margin-left: 1.75rem }
  .xl\:mr-7 { margin-right: 1.75rem }
  .xl\:gap-7 { gap: 1.75rem }
  .xl\:px-8 { padding-left: 2rem; padding-right: 2rem }
  .xl\:py-8 { padding-top: 2rem; padding-bottom: 2rem }
  .xl\:pb-8 { padding-bottom: 2rem }
  .xl\:pt-8 { padding-top: 2rem }
  .xl\:pl-8 { padding-left: 2rem }
  .xl\:pr-8 { padding-right: 2rem }
  .xl\:mt-8 { margin-top: 2rem }
  .xl\:mb-8 { margin-bottom: 2rem }
  .xl\:ml-8 { margin-left: 2rem }
  .xl\:mr-8 { margin-right: 2rem }
  .xl\:gap-8 { gap: 2rem }
  .xl\:px-9 { padding-left: 2.25rem; padding-right: 2.25rem }
  .xl\:py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem }
  .xl\:pb-9 { padding-bottom: 2.25rem }
  .xl\:pt-9 { padding-top: 2.25rem }
  .xl\:pl-9 { padding-left: 2.25rem }
  .xl\:pr-9 { padding-right: 2.25rem }
  .xl\:mt-9 { margin-top: 2.25rem }
  .xl\:mb-9 { margin-bottom: 2.25rem }
  .xl\:ml-9 { margin-left: 2.25rem }
  .xl\:mr-9 { margin-right: 2.25rem }
  .xl\:gap-9 { gap: 2.25rem }
  .xl\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
  .xl\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
  .xl\:pb-10 { padding-bottom: 2.5rem }
  .xl\:pt-10 { padding-top: 2.5rem }
  .xl\:pl-10 { padding-left: 2.5rem }
  .xl\:pr-10 { padding-right: 2.5rem }
  .xl\:mt-10 { margin-top: 2.5rem }
  .xl\:mb-10 { margin-bottom: 2.5rem }
  .xl\:ml-10 { margin-left: 2.5rem }
  .xl\:mr-10 { margin-right: 2.5rem }
  .xl\:gap-10 { gap: 2.5rem }
  .xl\:px-11 { padding-left: 2.75rem; padding-right: 2.75rem }
  .xl\:py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem }
  .xl\:pb-11 { padding-bottom: 2.75rem }
  .xl\:pt-11 { padding-top: 2.75rem }
  .xl\:pl-11 { padding-left: 2.75rem }
  .xl\:pr-11 { padding-right: 2.75rem }
  .xl\:mt-11 { margin-top: 2.75rem }
  .xl\:mb-11 { margin-bottom: 2.75rem }
  .xl\:ml-11 { margin-left: 2.75rem }
  .xl\:mr-11 { margin-right: 2.75rem }
  .xl\:gap-11 { gap: 2.75rem }
  .xl\:px-12 { padding-left: 3rem; padding-right: 3rem }
  .xl\:py-12 { padding-top: 3rem; padding-bottom: 3rem }
  .xl\:pb-12 { padding-bottom: 3rem }
  .xl\:pt-12 { padding-top: 3rem }
  .xl\:pl-12 { padding-left: 3rem }
  .xl\:pr-12 { padding-right: 3rem }
  .xl\:mt-12 { margin-top: 3rem }
  .xl\:mb-12 { margin-bottom: 3rem }
  .xl\:ml-12 { margin-left: 3rem }
  .xl\:mr-12 { margin-right: 3rem }
  .xl\:gap-12 { gap: 3rem }
  .xl\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem }
  .xl\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem }
  .xl\:pb-14 { padding-bottom: 3.5rem }
  .xl\:pt-14 { padding-top: 3.5rem }
  .xl\:pl-14 { padding-left: 3.5rem }
  .xl\:pr-14 { padding-right: 3.5rem }
  .xl\:mt-14 { margin-top: 3.5rem }
  .xl\:mb-14 { margin-bottom: 3.5rem }
  .xl\:ml-14 { margin-left: 3.5rem }
  .xl\:mr-14 { margin-right: 3.5rem }
  .xl\:gap-14 { gap: 3.5rem }
  .xl\:px-16 { padding-left: 4rem; padding-right: 4rem }
  .xl\:py-16 { padding-top: 4rem; padding-bottom: 4rem }
  .xl\:pb-16 { padding-bottom: 4rem }
  .xl\:pt-16 { padding-top: 4rem }
  .xl\:pl-16 { padding-left: 4rem }
  .xl\:pr-16 { padding-right: 4rem }
  .xl\:mt-16 { margin-top: 4rem }
  .xl\:mb-16 { margin-bottom: 4rem }
  .xl\:ml-16 { margin-left: 4rem }
  .xl\:mr-16 { margin-right: 4rem }
  .xl\:gap-16 { gap: 4rem }
  .xl\:px-20 { padding-left: 5rem; padding-right: 5rem }
  .xl\:py-20 { padding-top: 5rem; padding-bottom: 5rem }
  .xl\:pb-20 { padding-bottom: 5rem }
  .xl\:pt-20 { padding-top: 5rem }
  .xl\:pl-20 { padding-left: 5rem }
  .xl\:pr-20 { padding-right: 5rem }
  .xl\:mt-20 { margin-top: 5rem }
  .xl\:mb-20 { margin-bottom: 5rem }
  .xl\:ml-20 { margin-left: 5rem }
  .xl\:mr-20 { margin-right: 5rem }
  .xl\:gap-20 { gap: 5rem }
  .xl\:px-24 { padding-left: 6rem; padding-right: 6rem }
  .xl\:py-24 { padding-top: 6rem; padding-bottom: 6rem }
  .xl\:pb-24 { padding-bottom: 6rem }
  .xl\:pt-24 { padding-top: 6rem }
  .xl\:pl-24 { padding-left: 6rem }
  .xl\:pr-24 { padding-right: 6rem }
  .xl\:mt-24 { margin-top: 6rem }
  .xl\:mb-24 { margin-bottom: 6rem }
  .xl\:ml-24 { margin-left: 6rem }
  .xl\:mr-24 { margin-right: 6rem }
  .xl\:gap-24 { gap: 6rem }
  .xl\:px-28 { padding-left: 7rem; padding-right: 7rem }
  .xl\:py-28 { padding-top: 7rem; padding-bottom: 7rem }
  .xl\:pb-28 { padding-bottom: 7rem }
  .xl\:pt-28 { padding-top: 7rem }
  .xl\:pl-28 { padding-left: 7rem }
  .xl\:pr-28 { padding-right: 7rem }
  .xl\:mt-28 { margin-top: 7rem }
  .xl\:mb-28 { margin-bottom: 7rem }
  .xl\:ml-28 { margin-left: 7rem }
  .xl\:mr-28 { margin-right: 7rem }
  .xl\:gap-28 { gap: 7rem }
  .xl\:px-32 { padding-left: 8rem; padding-right: 8rem }
  .xl\:py-32 { padding-top: 8rem; padding-bottom: 8rem }
  .xl\:pb-32 { padding-bottom: 8rem }
  .xl\:pt-32 { padding-top: 8rem }
  .xl\:pl-32 { padding-left: 8rem }
  .xl\:pr-32 { padding-right: 8rem }
  .xl\:mt-32 { margin-top: 8rem }
  .xl\:mb-32 { margin-bottom: 8rem }
  .xl\:ml-32 { margin-left: 8rem }
  .xl\:mr-32 { margin-right: 8rem }
  .xl\:gap-32 { gap: 8rem }
  .xl\:px-36 { padding-left: 9rem; padding-right: 9rem }
  .xl\:py-36 { padding-top: 9rem; padding-bottom: 9rem }
  .xl\:pb-36 { padding-bottom: 9rem }
  .xl\:pt-36 { padding-top: 9rem }
  .xl\:pl-36 { padding-left: 9rem }
  .xl\:pr-36 { padding-right: 9rem }
  .xl\:mt-36 { margin-top: 9rem }
  .xl\:mb-36 { margin-bottom: 9rem }
  .xl\:ml-36 { margin-left: 9rem }
  .xl\:mr-36 { margin-right: 9rem }
  .xl\:gap-36 { gap: 9rem }
  .xl\:px-40 { padding-left: 10rem; padding-right: 10rem }
  .xl\:py-40 { padding-top: 10rem; padding-bottom: 10rem }
  .xl\:pb-40 { padding-bottom: 10rem }
  .xl\:pt-40 { padding-top: 10rem }
  .xl\:pl-40 { padding-left: 10rem }
  .xl\:pr-40 { padding-right: 10rem }
  .xl\:mt-40 { margin-top: 10rem }
  .xl\:mb-40 { margin-bottom: 10rem }
  .xl\:ml-40 { margin-left: 10rem }
  .xl\:mr-40 { margin-right: 10rem }
  .xl\:gap-40 { gap: 10rem }
  .xl\:text-xs { font-size: 0.75rem; line-height: 1rem }
  .xl\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
  .xl\:text-base { font-size: 1rem; line-height: 1.5rem }
  .xl\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
  .xl\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
  .xl\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .xl\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
  .xl\:text-4xl { font-size: 2.25rem; line-height: 2.5rem }
  .xl\:text-left { text-align: left }
  .xl\:text-center { text-align: center }
  .xl\:text-right { text-align: right }
  .xl\:max-w-xs { max-width: 20rem }
  .xl\:max-w-sm { max-width: 24rem }
  .xl\:max-w-md { max-width: 28rem }
  .xl\:max-w-lg { max-width: 32rem }
  .xl\:max-w-xl { max-width: 36rem }
  .xl\:max-w-2xl { max-width: 42rem }
  .xl\:max-w-3xl { max-width: 48rem }
  .xl\:max-w-screen-xl { max-width: 1280px }
  .xl\:text-ink { color: #0B0B0B }
  .xl\:bg-ink { background-color: #0B0B0B }
  .xl\:border-ink { border-color: #0B0B0B }
  .xl\:text-paper { color: #F2EDE4 }
  .xl\:bg-paper { background-color: #F2EDE4 }
  .xl\:border-paper { border-color: #F2EDE4 }
  .xl\:text-acid { color: #D4F000 }
  .xl\:bg-acid { background-color: #D4F000 }
  .xl\:border-acid { border-color: #D4F000 }
  .xl\:text-muted { color: #A09A94 }
  .xl\:bg-muted { background-color: #A09A94 }
  .xl\:border-muted { border-color: #A09A94 }
  .xl\:text-wire { color: #2A2926 }
  .xl\:bg-wire { background-color: #2A2926 }
  .xl\:border-wire { border-color: #2A2926 }
  .xl\:text-mid { color: #4A4440 }
  .xl\:bg-mid { background-color: #4A4440 }
  .xl\:border-mid { border-color: #4A4440 }
  .xl\:border-l { border-left-width: 1px; border-left-style: solid }
  .xl\:border-0 { border-width: 0px }
  .xl\:py-0 { padding-top: 0; padding-bottom: 0 }
}

/* ── @2xl (>= 1536px) ── */
@media (min-width: 1536px) {
  .2xl\:block { display: block }
  .2xl\:flex { display: flex }
  .2xl\:grid { display: grid }
  .2xl\:hidden { display: none }
  .2xl\:inline-flex { display: inline-flex }
  .2xl\:inline-block { display: inline-block }
  .2xl\:flex-row { flex-direction: row }
  .2xl\:flex-col { flex-direction: column }
  .2xl\:flex-wrap { flex-wrap: wrap }
  .2xl\:items-center { align-items: center }
  .2xl\:items-start { align-items: flex-start }
  .2xl\:items-end { align-items: flex-end }
  .2xl\:justify-between { justify-content: space-between }
  .2xl\:justify-center { justify-content: center }
  .2xl\:w-auto { width: auto }
  .2xl\:w-full { width: 100% }
  .2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
  .2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .2xl\:px-0 { padding-left: 0px; padding-right: 0px }
  .2xl\:py-0 { padding-top: 0px; padding-bottom: 0px }
  .2xl\:pb-0 { padding-bottom: 0px }
  .2xl\:pt-0 { padding-top: 0px }
  .2xl\:pl-0 { padding-left: 0px }
  .2xl\:pr-0 { padding-right: 0px }
  .2xl\:mt-0 { margin-top: 0px }
  .2xl\:mb-0 { margin-bottom: 0px }
  .2xl\:ml-0 { margin-left: 0px }
  .2xl\:mr-0 { margin-right: 0px }
  .2xl\:gap-0 { gap: 0px }
  .2xl\:px-0.5 { padding-left: 0.125rem; padding-right: 0.125rem }
  .2xl\:py-0.5 { padding-top: 0.125rem; padding-bottom: 0.125rem }
  .2xl\:pb-0.5 { padding-bottom: 0.125rem }
  .2xl\:pt-0.5 { padding-top: 0.125rem }
  .2xl\:pl-0.5 { padding-left: 0.125rem }
  .2xl\:pr-0.5 { padding-right: 0.125rem }
  .2xl\:mt-0.5 { margin-top: 0.125rem }
  .2xl\:mb-0.5 { margin-bottom: 0.125rem }
  .2xl\:ml-0.5 { margin-left: 0.125rem }
  .2xl\:mr-0.5 { margin-right: 0.125rem }
  .2xl\:gap-0.5 { gap: 0.125rem }
  .2xl\:px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
  .2xl\:py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
  .2xl\:pb-1 { padding-bottom: 0.25rem }
  .2xl\:pt-1 { padding-top: 0.25rem }
  .2xl\:pl-1 { padding-left: 0.25rem }
  .2xl\:pr-1 { padding-right: 0.25rem }
  .2xl\:mt-1 { margin-top: 0.25rem }
  .2xl\:mb-1 { margin-bottom: 0.25rem }
  .2xl\:ml-1 { margin-left: 0.25rem }
  .2xl\:mr-1 { margin-right: 0.25rem }
  .2xl\:gap-1 { gap: 0.25rem }
  .2xl\:px-1.5 { padding-left: 0.375rem; padding-right: 0.375rem }
  .2xl\:py-1.5 { padding-top: 0.375rem; padding-bottom: 0.375rem }
  .2xl\:pb-1.5 { padding-bottom: 0.375rem }
  .2xl\:pt-1.5 { padding-top: 0.375rem }
  .2xl\:pl-1.5 { padding-left: 0.375rem }
  .2xl\:pr-1.5 { padding-right: 0.375rem }
  .2xl\:mt-1.5 { margin-top: 0.375rem }
  .2xl\:mb-1.5 { margin-bottom: 0.375rem }
  .2xl\:ml-1.5 { margin-left: 0.375rem }
  .2xl\:mr-1.5 { margin-right: 0.375rem }
  .2xl\:gap-1.5 { gap: 0.375rem }
  .2xl\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
  .2xl\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
  .2xl\:pb-2 { padding-bottom: 0.5rem }
  .2xl\:pt-2 { padding-top: 0.5rem }
  .2xl\:pl-2 { padding-left: 0.5rem }
  .2xl\:pr-2 { padding-right: 0.5rem }
  .2xl\:mt-2 { margin-top: 0.5rem }
  .2xl\:mb-2 { margin-bottom: 0.5rem }
  .2xl\:ml-2 { margin-left: 0.5rem }
  .2xl\:mr-2 { margin-right: 0.5rem }
  .2xl\:gap-2 { gap: 0.5rem }
  .2xl\:px-2.5 { padding-left: 0.625rem; padding-right: 0.625rem }
  .2xl\:py-2.5 { padding-top: 0.625rem; padding-bottom: 0.625rem }
  .2xl\:pb-2.5 { padding-bottom: 0.625rem }
  .2xl\:pt-2.5 { padding-top: 0.625rem }
  .2xl\:pl-2.5 { padding-left: 0.625rem }
  .2xl\:pr-2.5 { padding-right: 0.625rem }
  .2xl\:mt-2.5 { margin-top: 0.625rem }
  .2xl\:mb-2.5 { margin-bottom: 0.625rem }
  .2xl\:ml-2.5 { margin-left: 0.625rem }
  .2xl\:mr-2.5 { margin-right: 0.625rem }
  .2xl\:gap-2.5 { gap: 0.625rem }
  .2xl\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
  .2xl\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem }
  .2xl\:pb-3 { padding-bottom: 0.75rem }
  .2xl\:pt-3 { padding-top: 0.75rem }
  .2xl\:pl-3 { padding-left: 0.75rem }
  .2xl\:pr-3 { padding-right: 0.75rem }
  .2xl\:mt-3 { margin-top: 0.75rem }
  .2xl\:mb-3 { margin-bottom: 0.75rem }
  .2xl\:ml-3 { margin-left: 0.75rem }
  .2xl\:mr-3 { margin-right: 0.75rem }
  .2xl\:gap-3 { gap: 0.75rem }
  .2xl\:px-3.5 { padding-left: 0.875rem; padding-right: 0.875rem }
  .2xl\:py-3.5 { padding-top: 0.875rem; padding-bottom: 0.875rem }
  .2xl\:pb-3.5 { padding-bottom: 0.875rem }
  .2xl\:pt-3.5 { padding-top: 0.875rem }
  .2xl\:pl-3.5 { padding-left: 0.875rem }
  .2xl\:pr-3.5 { padding-right: 0.875rem }
  .2xl\:mt-3.5 { margin-top: 0.875rem }
  .2xl\:mb-3.5 { margin-bottom: 0.875rem }
  .2xl\:ml-3.5 { margin-left: 0.875rem }
  .2xl\:mr-3.5 { margin-right: 0.875rem }
  .2xl\:gap-3.5 { gap: 0.875rem }
  .2xl\:px-4 { padding-left: 1rem; padding-right: 1rem }
  .2xl\:py-4 { padding-top: 1rem; padding-bottom: 1rem }
  .2xl\:pb-4 { padding-bottom: 1rem }
  .2xl\:pt-4 { padding-top: 1rem }
  .2xl\:pl-4 { padding-left: 1rem }
  .2xl\:pr-4 { padding-right: 1rem }
  .2xl\:mt-4 { margin-top: 1rem }
  .2xl\:mb-4 { margin-bottom: 1rem }
  .2xl\:ml-4 { margin-left: 1rem }
  .2xl\:mr-4 { margin-right: 1rem }
  .2xl\:gap-4 { gap: 1rem }
  .2xl\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem }
  .2xl\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
  .2xl\:pb-5 { padding-bottom: 1.25rem }
  .2xl\:pt-5 { padding-top: 1.25rem }
  .2xl\:pl-5 { padding-left: 1.25rem }
  .2xl\:pr-5 { padding-right: 1.25rem }
  .2xl\:mt-5 { margin-top: 1.25rem }
  .2xl\:mb-5 { margin-bottom: 1.25rem }
  .2xl\:ml-5 { margin-left: 1.25rem }
  .2xl\:mr-5 { margin-right: 1.25rem }
  .2xl\:gap-5 { gap: 1.25rem }
  .2xl\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
  .2xl\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
  .2xl\:pb-6 { padding-bottom: 1.5rem }
  .2xl\:pt-6 { padding-top: 1.5rem }
  .2xl\:pl-6 { padding-left: 1.5rem }
  .2xl\:pr-6 { padding-right: 1.5rem }
  .2xl\:mt-6 { margin-top: 1.5rem }
  .2xl\:mb-6 { margin-bottom: 1.5rem }
  .2xl\:ml-6 { margin-left: 1.5rem }
  .2xl\:mr-6 { margin-right: 1.5rem }
  .2xl\:gap-6 { gap: 1.5rem }
  .2xl\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
  .2xl\:py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
  .2xl\:pb-7 { padding-bottom: 1.75rem }
  .2xl\:pt-7 { padding-top: 1.75rem }
  .2xl\:pl-7 { padding-left: 1.75rem }
  .2xl\:pr-7 { padding-right: 1.75rem }
  .2xl\:mt-7 { margin-top: 1.75rem }
  .2xl\:mb-7 { margin-bottom: 1.75rem }
  .2xl\:ml-7 { margin-left: 1.75rem }
  .2xl\:mr-7 { margin-right: 1.75rem }
  .2xl\:gap-7 { gap: 1.75rem }
  .2xl\:px-8 { padding-left: 2rem; padding-right: 2rem }
  .2xl\:py-8 { padding-top: 2rem; padding-bottom: 2rem }
  .2xl\:pb-8 { padding-bottom: 2rem }
  .2xl\:pt-8 { padding-top: 2rem }
  .2xl\:pl-8 { padding-left: 2rem }
  .2xl\:pr-8 { padding-right: 2rem }
  .2xl\:mt-8 { margin-top: 2rem }
  .2xl\:mb-8 { margin-bottom: 2rem }
  .2xl\:ml-8 { margin-left: 2rem }
  .2xl\:mr-8 { margin-right: 2rem }
  .2xl\:gap-8 { gap: 2rem }
  .2xl\:px-9 { padding-left: 2.25rem; padding-right: 2.25rem }
  .2xl\:py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem }
  .2xl\:pb-9 { padding-bottom: 2.25rem }
  .2xl\:pt-9 { padding-top: 2.25rem }
  .2xl\:pl-9 { padding-left: 2.25rem }
  .2xl\:pr-9 { padding-right: 2.25rem }
  .2xl\:mt-9 { margin-top: 2.25rem }
  .2xl\:mb-9 { margin-bottom: 2.25rem }
  .2xl\:ml-9 { margin-left: 2.25rem }
  .2xl\:mr-9 { margin-right: 2.25rem }
  .2xl\:gap-9 { gap: 2.25rem }
  .2xl\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
  .2xl\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
  .2xl\:pb-10 { padding-bottom: 2.5rem }
  .2xl\:pt-10 { padding-top: 2.5rem }
  .2xl\:pl-10 { padding-left: 2.5rem }
  .2xl\:pr-10 { padding-right: 2.5rem }
  .2xl\:mt-10 { margin-top: 2.5rem }
  .2xl\:mb-10 { margin-bottom: 2.5rem }
  .2xl\:ml-10 { margin-left: 2.5rem }
  .2xl\:mr-10 { margin-right: 2.5rem }
  .2xl\:gap-10 { gap: 2.5rem }
  .2xl\:px-11 { padding-left: 2.75rem; padding-right: 2.75rem }
  .2xl\:py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem }
  .2xl\:pb-11 { padding-bottom: 2.75rem }
  .2xl\:pt-11 { padding-top: 2.75rem }
  .2xl\:pl-11 { padding-left: 2.75rem }
  .2xl\:pr-11 { padding-right: 2.75rem }
  .2xl\:mt-11 { margin-top: 2.75rem }
  .2xl\:mb-11 { margin-bottom: 2.75rem }
  .2xl\:ml-11 { margin-left: 2.75rem }
  .2xl\:mr-11 { margin-right: 2.75rem }
  .2xl\:gap-11 { gap: 2.75rem }
  .2xl\:px-12 { padding-left: 3rem; padding-right: 3rem }
  .2xl\:py-12 { padding-top: 3rem; padding-bottom: 3rem }
  .2xl\:pb-12 { padding-bottom: 3rem }
  .2xl\:pt-12 { padding-top: 3rem }
  .2xl\:pl-12 { padding-left: 3rem }
  .2xl\:pr-12 { padding-right: 3rem }
  .2xl\:mt-12 { margin-top: 3rem }
  .2xl\:mb-12 { margin-bottom: 3rem }
  .2xl\:ml-12 { margin-left: 3rem }
  .2xl\:mr-12 { margin-right: 3rem }
  .2xl\:gap-12 { gap: 3rem }
  .2xl\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem }
  .2xl\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem }
  .2xl\:pb-14 { padding-bottom: 3.5rem }
  .2xl\:pt-14 { padding-top: 3.5rem }
  .2xl\:pl-14 { padding-left: 3.5rem }
  .2xl\:pr-14 { padding-right: 3.5rem }
  .2xl\:mt-14 { margin-top: 3.5rem }
  .2xl\:mb-14 { margin-bottom: 3.5rem }
  .2xl\:ml-14 { margin-left: 3.5rem }
  .2xl\:mr-14 { margin-right: 3.5rem }
  .2xl\:gap-14 { gap: 3.5rem }
  .2xl\:px-16 { padding-left: 4rem; padding-right: 4rem }
  .2xl\:py-16 { padding-top: 4rem; padding-bottom: 4rem }
  .2xl\:pb-16 { padding-bottom: 4rem }
  .2xl\:pt-16 { padding-top: 4rem }
  .2xl\:pl-16 { padding-left: 4rem }
  .2xl\:pr-16 { padding-right: 4rem }
  .2xl\:mt-16 { margin-top: 4rem }
  .2xl\:mb-16 { margin-bottom: 4rem }
  .2xl\:ml-16 { margin-left: 4rem }
  .2xl\:mr-16 { margin-right: 4rem }
  .2xl\:gap-16 { gap: 4rem }
  .2xl\:px-20 { padding-left: 5rem; padding-right: 5rem }
  .2xl\:py-20 { padding-top: 5rem; padding-bottom: 5rem }
  .2xl\:pb-20 { padding-bottom: 5rem }
  .2xl\:pt-20 { padding-top: 5rem }
  .2xl\:pl-20 { padding-left: 5rem }
  .2xl\:pr-20 { padding-right: 5rem }
  .2xl\:mt-20 { margin-top: 5rem }
  .2xl\:mb-20 { margin-bottom: 5rem }
  .2xl\:ml-20 { margin-left: 5rem }
  .2xl\:mr-20 { margin-right: 5rem }
  .2xl\:gap-20 { gap: 5rem }
  .2xl\:px-24 { padding-left: 6rem; padding-right: 6rem }
  .2xl\:py-24 { padding-top: 6rem; padding-bottom: 6rem }
  .2xl\:pb-24 { padding-bottom: 6rem }
  .2xl\:pt-24 { padding-top: 6rem }
  .2xl\:pl-24 { padding-left: 6rem }
  .2xl\:pr-24 { padding-right: 6rem }
  .2xl\:mt-24 { margin-top: 6rem }
  .2xl\:mb-24 { margin-bottom: 6rem }
  .2xl\:ml-24 { margin-left: 6rem }
  .2xl\:mr-24 { margin-right: 6rem }
  .2xl\:gap-24 { gap: 6rem }
  .2xl\:px-28 { padding-left: 7rem; padding-right: 7rem }
  .2xl\:py-28 { padding-top: 7rem; padding-bottom: 7rem }
  .2xl\:pb-28 { padding-bottom: 7rem }
  .2xl\:pt-28 { padding-top: 7rem }
  .2xl\:pl-28 { padding-left: 7rem }
  .2xl\:pr-28 { padding-right: 7rem }
  .2xl\:mt-28 { margin-top: 7rem }
  .2xl\:mb-28 { margin-bottom: 7rem }
  .2xl\:ml-28 { margin-left: 7rem }
  .2xl\:mr-28 { margin-right: 7rem }
  .2xl\:gap-28 { gap: 7rem }
  .2xl\:px-32 { padding-left: 8rem; padding-right: 8rem }
  .2xl\:py-32 { padding-top: 8rem; padding-bottom: 8rem }
  .2xl\:pb-32 { padding-bottom: 8rem }
  .2xl\:pt-32 { padding-top: 8rem }
  .2xl\:pl-32 { padding-left: 8rem }
  .2xl\:pr-32 { padding-right: 8rem }
  .2xl\:mt-32 { margin-top: 8rem }
  .2xl\:mb-32 { margin-bottom: 8rem }
  .2xl\:ml-32 { margin-left: 8rem }
  .2xl\:mr-32 { margin-right: 8rem }
  .2xl\:gap-32 { gap: 8rem }
  .2xl\:px-36 { padding-left: 9rem; padding-right: 9rem }
  .2xl\:py-36 { padding-top: 9rem; padding-bottom: 9rem }
  .2xl\:pb-36 { padding-bottom: 9rem }
  .2xl\:pt-36 { padding-top: 9rem }
  .2xl\:pl-36 { padding-left: 9rem }
  .2xl\:pr-36 { padding-right: 9rem }
  .2xl\:mt-36 { margin-top: 9rem }
  .2xl\:mb-36 { margin-bottom: 9rem }
  .2xl\:ml-36 { margin-left: 9rem }
  .2xl\:mr-36 { margin-right: 9rem }
  .2xl\:gap-36 { gap: 9rem }
  .2xl\:px-40 { padding-left: 10rem; padding-right: 10rem }
  .2xl\:py-40 { padding-top: 10rem; padding-bottom: 10rem }
  .2xl\:pb-40 { padding-bottom: 10rem }
  .2xl\:pt-40 { padding-top: 10rem }
  .2xl\:pl-40 { padding-left: 10rem }
  .2xl\:pr-40 { padding-right: 10rem }
  .2xl\:mt-40 { margin-top: 10rem }
  .2xl\:mb-40 { margin-bottom: 10rem }
  .2xl\:ml-40 { margin-left: 10rem }
  .2xl\:mr-40 { margin-right: 10rem }
  .2xl\:gap-40 { gap: 10rem }
  .2xl\:text-xs { font-size: 0.75rem; line-height: 1rem }
  .2xl\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
  .2xl\:text-base { font-size: 1rem; line-height: 1.5rem }
  .2xl\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
  .2xl\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
  .2xl\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .2xl\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
  .2xl\:text-4xl { font-size: 2.25rem; line-height: 2.5rem }
  .2xl\:text-left { text-align: left }
  .2xl\:text-center { text-align: center }
  .2xl\:text-right { text-align: right }
  .2xl\:max-w-xs { max-width: 20rem }
  .2xl\:max-w-sm { max-width: 24rem }
  .2xl\:max-w-md { max-width: 28rem }
  .2xl\:max-w-lg { max-width: 32rem }
  .2xl\:max-w-xl { max-width: 36rem }
  .2xl\:max-w-2xl { max-width: 42rem }
  .2xl\:max-w-3xl { max-width: 48rem }
  .2xl\:max-w-screen-xl { max-width: 1280px }
  .2xl\:text-ink { color: #0B0B0B }
  .2xl\:bg-ink { background-color: #0B0B0B }
  .2xl\:border-ink { border-color: #0B0B0B }
  .2xl\:text-paper { color: #F2EDE4 }
  .2xl\:bg-paper { background-color: #F2EDE4 }
  .2xl\:border-paper { border-color: #F2EDE4 }
  .2xl\:text-acid { color: #D4F000 }
  .2xl\:bg-acid { background-color: #D4F000 }
  .2xl\:border-acid { border-color: #D4F000 }
  .2xl\:text-muted { color: #A09A94 }
  .2xl\:bg-muted { background-color: #A09A94 }
  .2xl\:border-muted { border-color: #A09A94 }
  .2xl\:text-wire { color: #2A2926 }
  .2xl\:bg-wire { background-color: #2A2926 }
  .2xl\:border-wire { border-color: #2A2926 }
  .2xl\:text-mid { color: #4A4440 }
  .2xl\:bg-mid { background-color: #4A4440 }
  .2xl\:border-mid { border-color: #4A4440 }
  .2xl\:border-l { border-left-width: 1px; border-left-style: solid }
  .2xl\:border-0 { border-width: 0px }
  .2xl\:py-0 { padding-top: 0; padding-bottom: 0 }
}

/* ══════════════════════════════════════════════════════════
   DESIGN SYSTEM — Custom Styles
   ══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   christophercorte.it — Design System & Custom Styles
   Generato da index.html · build con Tailwind CLI:
     npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
   ═══════════════════════════════════════════════════════════ */
/* ── Base Reset ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* .sr-only defined in utility layer */

    html {
      font-size: 16px;
      /* iOS Safari: quando overscroll rivela l'area sotto la navbar,
         mostra lo stesso colore del sito — nessun buco visibile */
      background-color: #0B0B0B;
    }
    body {
      background-color: #0B0B0B;
      color: #F2EDE4;
      font-family: 'Barlow', sans-serif;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip; /* clip ≠ hidden: non crea scroll container, preserva pull-to-refresh Safari iOS */
    }
    ::selection { background: #D4F000; color: #0B0B0B; }

    /* ── Grain overlay ──────────────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
      opacity: 0.4;
    }

    /* ── Noise texture on hero ──────────────────────────────── */
    .hero-noise {
      background-image:
        radial-gradient(ellipse 60% 50% at 80% 40%, rgba(212,240,0,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(212,240,0,0.02) 0%, transparent 70%);
    }

    /* ── Typography ─────────────────────────────────────────── */
    .font-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.01em; }
    .font-mono    { font-family: 'DM Mono', monospace; }
    .font-body    { font-family: 'Barlow', sans-serif; }

    /* ══ COLLABORAZIONI — logo strip ════════════════════════════ */
    .collab-strip {
      border-top: 1px solid #2A2926;
      border-bottom: 1px solid #2A2926;
      padding: 3rem 1.25rem;
    }
    .collab-eyebrow {
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem; letter-spacing: 0.16em;
      text-transform: uppercase; color: #7A7470;
      text-align: center; display: block; margin-bottom: 2.5rem;
    }
    .collab-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 100%;
    }
    @media (min-width: 768px) {
      .collab-grid { grid-template-columns: repeat(6, 1fr); }
    }
    .collab-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
      border-right: 1px solid #1A1918;
      border-bottom: 1px solid #1A1918;
      opacity: 0.42;
      transition: opacity 0.25s ease;
    }
    .collab-item:hover { opacity: 0.9; }
    @media (max-width: 767px) {
      .collab-item:nth-child(3n)  { border-right: none; }
      .collab-item:nth-child(n+4) { border-bottom: none; }
    }
    @media (min-width: 768px) {
      .collab-item:last-child     { border-right: none; }
      .collab-item:nth-child(n+4) { border-bottom: none; }
    }
    .collab-item img {
      width: 100%;
      height: auto;
      max-height: 36px;
      object-fit: contain;
      display: block;
    }

    /* ══ ACCESSIBILITÀ TIPOGRAFICA WCAG 2.2 ════════════════════ */
    .text-muted      { color: #A09A94 !important; }
    .font-body       { font-size: 1rem; line-height: 1.75; }
    .footer-link {
      font-family: 'DM Mono', monospace; font-size: 0.82rem;
      letter-spacing: 0.07em; text-transform: uppercase;
      color: #A09A94; text-decoration: none;
      transition: color 0.25s ease; position: relative;
    }
    .footer-link:hover,
    .footer-link:visited:hover { color: #F2EDE4; }
    .footer-link:visited { color: #A09A94; } /* override :visited browser default */

    /* ── Horizontal rule ────────────────────────────────────── */
    .rule { border-top: 1px solid #2A2926; }

    /* ── Marquee / scroll strip ─────────────────────────────────── */
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite;   will-change: transform;
}
    .marquee-track:hover { animation-play-state: paused; }

    /* ── Nav ────────────────────────────────────────────────── */
    #navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      background: #0B0B0B;
      border-bottom: 1px solid transparent;
      padding-top: env(safe-area-inset-top, 0px);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      /* GPU compositing — stabilizza position:fixed su iOS Safari
         durante scroll del toolbar e visual viewport changes */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    #navbar.scrolled {
      border-bottom: 1px solid #2A2926;
      box-shadow: 0 1px 32px rgba(0,0,0,0.55);
    }

    /* Scudo notch — elemento HTML dedicato, non pseudo-element.
       Copre fisicamente la safe area con il colore del sito.
       z-index > navbar per garantire che non ci sia mai bleed-through.
       Fallback 50px copre Dynamic Island (59px) in sicurezza su qualsiasi iPhone. */
    #notch-cover {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: env(safe-area-inset-top, 0px);
      min-height: 0;
      background: #0B0B0B;
      z-index: 1002;
      pointer-events: none;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    /* ── Pill tag ───────────────────────────────────────────── */
    .tag {
      display: inline-block;
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      border: 1px solid #3A3530;
      padding: 0.28rem 0.7rem;
      border-radius: 999px;
      color: #A09A94;
    }

    /* ── CTA Buttons ────────────────────────────────────────── */
    .btn-primary {
      display: inline-block;
      background: #D4F000;
      color: #0B0B0B;
      font-family: 'DM Mono', monospace;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.85rem 2rem;
      border: none;
      cursor: pointer;
      transition: background 0.18s, transform 0.15s;
      text-decoration: none;
      white-space: nowrap;
    }
    .btn-primary:hover { background: #BFD900; transform: translateY(-1px); }

    .btn-ghost {
      display: inline-block;
      background: transparent;
      color: #F2EDE4;
      font-family: 'DM Mono', monospace;
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.82rem 1.9rem;
      border: 1px solid #2A2926;
      cursor: pointer;
      transition: border-color 0.18s, color 0.18s, transform 0.15s;
      text-decoration: none;
      white-space: nowrap;
    }
    .btn-ghost:hover { border-color: #F2EDE4; transform: translateY(-1px); }

    .btn-sm {
      display: inline-block;
      background: #D4F000;
      color: #0B0B0B;
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      padding: 0.6rem 1.3rem;
      border: none;
      cursor: pointer;
      transition: background 0.18s;
      text-decoration: none;
    }
    .btn-sm:hover { background: #BFD900; }

    /* ── Metric Giant Number ────────────────────────────────── */
    .metric-number {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(4.5rem, 10vw, 8rem);
      line-height: 0.9;
      color: #D4F000;
      display: block;
    }

    /* Metrica descrittiva per case study PMI (testo multi-parola, non numero) */
    .metric-text {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      line-height: 1;
      color: #D4F000;
      display: block;
      letter-spacing: 0.02em;
    }

    /* ── Pillar card ────────────────────────────────────────── */
    .pillar {
      border-top: 2px solid #2A2926;
      padding-top: 2rem;
      padding-bottom: 2.5rem;
      transition: border-top-color 0.25s;
    }
    .pillar:hover { border-top-color: #D4F000; }
    @media (min-width: 768px) {
      .pillar { padding-bottom: 0; }
    }

    /* ── Case Study card ────────────────────────────────────── */
    .case-card {
      border: 1px solid #2A2926;
      padding: 1.5rem;
      transition: border-color 0.3s, background 0.3s;
    }
    @media (min-width: 768px) { .case-card { padding: 2.5rem; } }
    .case-card:hover { border-color: #3A3935; background: #111110; }

    /* ── Service card — elevated hover ─────────────────────── */
    .service-card {
      border: 1px solid #2A2926;
      padding: 1.25rem;
      transition: border-color 0.28s, box-shadow 0.28s, transform 0.28s;
      position: relative;
    }
    @media (min-width: 768px) { .service-card { padding: 2rem; } }
    .service-card:hover {
      border-color: #D4F000;
      box-shadow: 0 0 40px rgba(212,240,0,0.05), 0 12px 40px rgba(0,0,0,0.35);
      transform: translateY(-3px);
    }
    /* animated acid corner mark on service card hover */
    .service-card::after {
      content: '';
      position: absolute;
      top: -1px; right: -1px;
      width: 0; height: 0;
      border-top: 2px solid #D4F000;
      border-right: 2px solid #D4F000;
      transition: width 0.3s 0.05s, height 0.3s;
    }
    .service-card:hover::after { width: 28px; height: 28px; }

    /* ═══════════════════════════════════════════════════════════
       SERVICE CARD ANATOMY SYSTEM
       Cinque zone cognitive fisse — stesso ordine in ogni card.
       La card è un flex-column: la zona body cresce (flex:1)
       e spinge sempre il CTA al fondo, indipendentemente
       dalla lunghezza del contenuto.
    ═══════════════════════════════════════════════════════════ */

    /* Card container — flex column */
    .service-card {
      display: flex !important;
      flex-direction: column !important;
    }

    /* Zona 1a — Tag chip: riga autonoma sopra il titolo */
    .sc-tag-row { margin-bottom: 0.85rem; display: flex; align-items: center; }

    /* Zona 1b — Prezzo: riga autonoma sotto il titolo, mai in competizione */
    .sc-outcome {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      color: #D4F000;
      margin-bottom: 0.6rem;
      line-height: 1.4;
    }

    .sc-price-row {
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
      flex-wrap: wrap;
      margin-top: 0.55rem;
    }

    /* Zona 2 — Titolo servizio */
    .sc-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.5rem, 2.8vw, 2rem);
      line-height: 1.0;
      color: #F2EDE4;
      letter-spacing: 0.01em;
      margin-bottom: 0;
    }

    /* Nota prezzo (capacità, tipologia contratto, pacchetto) */
    .price-note {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      color: #A09A94;
    }
    .price-note.acid { color: #D4F000; }

    /* Separatore interno */
    .sc-divider {
      border: none;
      border-top: 1px solid #1E1D1A;
      margin: 1.25rem 0;
    }

    /* Zona 3+4 — Corpo: descrizione + feature list, cresce */
    .sc-body { flex: 1; }

    .sc-desc {
      font-family: 'Barlow', sans-serif;
      font-weight: 400;
      font-size: 1rem;       /* era 0.875rem — WCAG 1.4.4 min 16px */
      line-height: 1.75;     /* era 1.7 */
      color: #A09A94;
      margin-bottom: 0;
    }
    /* Se ci sono feature list, la desc ha un gap sotto */
    .sc-desc + .sc-features { margin-top: 1rem; }

    .sc-features {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .sc-features li {
      display: flex;
      gap: 0.65rem;
      align-items: baseline;
      font-family: 'Barlow', sans-serif;
      font-size: 0.9375rem;  /* era 0.8125rem — portato a 15px */
      font-weight: 400;
      color: #A09A94;
      padding: 0.5rem 0;
      border-top: 1px solid #1A1918;
    }
    .sc-features li:first-child { border-top: none; padding-top: 0; }
    .sc-features .feat-icon {
      color: #D4F000;
      flex-shrink: 0;
      font-size: 0.75rem;
      line-height: 1.5;
    }

    /* Zona 5 — CTA: sempre al fondo */
    .sc-cta {
      margin-top: auto;
      padding-top: 1.25rem;
      border-top: 1px solid #1E1D1A;
    }
    /* Su mobile il bottone occupa tutta la larghezza */
    @media (max-width: 767px) {
      .sc-cta .btn-sm { display: block; text-align: center; width: 100%; }
      .sc-cta .btn-primary { display: block; text-align: center; width: 100%; }
    }

    /* Card wide (Fractional, Workshop, ITS) — layout interno 2 colonne */
    .service-card-wide {
      border: 1px solid #2A2926;
      padding: 1.25rem;
      transition: border-color 0.28s, box-shadow 0.28s;
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .service-card-wide { padding: 2rem; grid-template-columns: 1fr 1fr; }
    }
    .service-card-wide:hover {
      border-color: #D4F000;
      box-shadow: 0 0 40px rgba(212,240,0,0.05), 0 12px 40px rgba(0,0,0,0.35);
    }
    .service-card-wide::after {
      content: '';
      position: absolute;
      top: -1px; right: -1px;
      width: 0; height: 0;
      border-top: 2px solid #D4F000;
      border-right: 2px solid #D4F000;
      transition: width 0.3s 0.05s, height 0.3s;
    }
    .service-card-wide:hover::after { width: 28px; height: 28px; }

    /* Colonna sinistra wide card — flex column con CTA al fondo */
    .sc-wide-main {
      display: flex;
      flex-direction: column;
    }
    /* Colonna destra wide card — contenuto supplementare */
    .sc-wide-aside {
      border-left: none;
      padding-left: 0;
    }
    @media (min-width: 768px) {
      .sc-wide-aside {
        border-left: 1px solid #1E1D1A;
        padding-left: 2rem;
      }
    }
    .sc-aside-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #A09A94;
      margin-bottom: 0.75rem;
    }

    /* ── Mobile-specific global spacing ─────────────────────── */
    @media (max-width: 767px) {
      /* Section padding on mobile */
      section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
      /* Service category label row */
      .service-cat-row { margin-bottom: 1.25rem; }
      /* Price header inside service card */
      .service-card .flex.justify-between { flex-direction: column; gap: 0.5rem; }
      /* Button full-width on mobile for easy tap */
      .service-card .btn-sm { display: block; text-align: center; width: 100%; }
      /* Workshop two-col internal grid — no overflow on mobile */
      .service-card .grid { gap: 1.5rem; }
      /* Pillar bottom separator breathing room */
      .pillar { padding-bottom: 2rem; }
    }

    /* ── SVG Orbit animations ───────────────────────────────── */
    @keyframes orbit-cw  { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
    @keyframes orbit-ccw { from { transform: rotate(0deg);   } to { transform: rotate(-360deg); } }
    @keyframes blink-dot {
      0%,100% { opacity: 1; }
      45%     { opacity: 0.08; }
    }
    @keyframes metric-breathe {
      0%,100% { opacity: 0.7;  transform: scale(1);    }
      50%      { opacity: 0.12; transform: scale(1.28); }
    }
    @keyframes scan-down {
      0%   { transform: translateY(-100%); opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { transform: translateY(100%);  opacity: 0; }
    }

    /* Velocità aumentate: 32s / 18s / 10s invece di 90s / 55s / 30s */
    .svg-cw-slow  { animation: orbit-cw   32s linear infinite; transform-box: fill-box; transform-origin: center;   will-change: transform;
}
    .svg-ccw-mid  { animation: orbit-ccw  18s linear infinite; transform-box: fill-box; transform-origin: center;   will-change: transform;
}
    .svg-cw-fast  { animation: orbit-cw   10s linear infinite; transform-box: fill-box; transform-origin: center;   will-change: transform;
}
    .svg-blink-a  { animation: blink-dot  2s ease-in-out       infinite;   will-change: opacity;
}
    .svg-blink-b  { animation: blink-dot  2s ease-in-out 0.65s infinite;   will-change: opacity;
}
    .svg-blink-c  { animation: blink-dot  2s ease-in-out 1.3s  infinite;   will-change: opacity;
}
    .svg-breathe  { animation: metric-breathe 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center;   will-change: transform, opacity;
}
    .svg-scan     { animation: scan-down  3s ease-in-out infinite;   will-change: transform;
}

    /* ══ SVG ILLUSTRATION ANIMATION SYSTEM ═══════════════════
       Ogni SVG illustrativo parte in stato "frozen" (paused).
       IntersectionObserver aggiunge .is-playing → le animazioni
       partono in sequenza grazie agli animation-delay per elemento.
    ══════════════════════════════════════════════════════════ */

    /* ── Keyframes ───────────────────────────────────────────── */
    @keyframes svg-draw     { to { stroke-dashoffset: 0; } }
    @keyframes svg-rise     { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes svg-fade-in  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes svg-pop-in   {
      from { opacity: 0; transform: scale(0.5); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes svg-flatline-pulse {
      0%,100% { stroke-opacity: 1;    stroke-width: 3; }
      50%     { stroke-opacity: 0.15; stroke-width: 1.5; }
    }
    @keyframes svg-glow-loop {
      0%,100% { filter: drop-shadow(0 0 0px #D4F000); }
      50%     { filter: drop-shadow(0 0 6px #D4F000); }
    }

    /* ── Stato iniziale (elementi nascosti) ─────────────────── */
    .svg-illus .a-draw     { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
    .svg-illus .a-draw-sm  { stroke-dasharray: 400;  stroke-dashoffset: 400; }
    .svg-illus .a-flatline { stroke-dasharray: 200;  stroke-dashoffset: 200; }
    .svg-illus .a-rise     { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
    .svg-illus .a-fade     { opacity: 0; }
    .svg-illus .a-pop      { opacity: 0; transform: scale(0.5); transform-box: fill-box; transform-origin: center; }

    /* ── Stato animato (.is-playing aggiunto da JS) ─────────── */
    .svg-illus.is-playing .a-draw {
      animation: svg-draw 1.2s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    .svg-illus.is-playing .a-draw-sm {
      animation: svg-draw 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    .svg-illus.is-playing .a-flatline {
      animation:
        svg-draw 0.5s cubic-bezier(0.22,1,0.36,1) forwards,
        svg-flatline-pulse 1.4s ease-in-out 0.55s infinite;
    }
    .svg-illus.is-playing .a-rise {
      animation: svg-rise 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .svg-illus.is-playing .a-fade {
      animation: svg-fade-in 0.45s ease forwards;
    }
    .svg-illus.is-playing .a-pop {
      animation: svg-pop-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    /* Glow loop sui dot acid dopo il reveal */
    .svg-illus.is-playing .a-glow {
      animation: svg-glow-loop 2s ease-in-out infinite;
    }

    /* ── Hero geometry container ────────────────────────────── */
    .hero-geo {
      position: absolute;
      top: 50%;
      right: -8vw;
      transform: translateY(-52%);
      width: clamp(280px, 38vw, 560px);
      opacity: 0.32;
      pointer-events: none;
      user-select: none;
      filter: drop-shadow(0 0 18px rgba(212,240,0,0.18));
    }
    @media (max-width: 1023px) { .hero-geo { display: none; } }

    /* Padding interno navbar: il top è già gestito da env(safe-area-inset-top)
       nel CSS. Il contenuto (logo + menu) ha solo padding orizzontale e bottom. */
    #navbar > .nav-inner {
      padding: 1.25rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    @media (min-width: 768px) {
      #navbar > .nav-inner { padding: 1.25rem 3rem; }
    }
    .nav-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      flex-shrink: 0;
    }
    .nav-logo .logo-mark path.mark-acid {
      transition: filter 0.3s ease;
    }
    .nav-logo:hover .logo-mark path.mark-acid {
      filter: drop-shadow(0 0 7px rgba(212,240,0,0.7));
    }
    .logo-words {
      display: flex;
      flex-direction: column;
      line-height: 1;
      gap: 1px;
    }
    .logo-surname {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.25rem;
      color: #F2EDE4;
      letter-spacing: 0.06em;
      line-height: 1;
    }
    .logo-given {
      font-family: 'DM Mono', monospace;
      font-size: 0.55rem;
      color: #A09A94;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      line-height: 1;
    }
    /* Separator line between mark and text */
    .logo-sep {
      width: 1px;
      height: 28px;
      background: #2A2926;
      flex-shrink: 0;
    }

    /* ── Logo — Bracket Precision Pong ─────────────────────────
       Bracket [ ] sharp square design. Ball 2×2px pixel-exact.
       Bounce coords: left inner x=16, right inner x=34 (36−2).
       4-point diamond: (16,4.5)→(34,21.5)→(16,13)→(34,4.5)→loop
    ──────────────────────────────────────────────────────────── */


    @keyframes logo-ball {
      0%   { transform: translate(0px,    0px);  }  /* left  inner, top    */
      25%  { transform: translate(18px,  17px);  }  /* right inner, bottom */
      50%  { transform: translate(0px,  8.5px);  }  /* left  inner, middle */
      75%  { transform: translate(18px,   0px);  }  /* right inner, top    */
      100% { transform: translate(0px,    0px);  }
    }
    /* Flash al contatto — bracket sinistro (t=0%, 50%) */
    @keyframes logo-hit-l {
      0%,  1%  { opacity: 1;    }
      2%, 48%  { opacity: 0.52; }
      50%, 51% { opacity: 1;    }
      52%, 99% { opacity: 0.52; }
      100%     { opacity: 1;    }
    }
    /* Flash al contatto — bracket destro (t=25%, 75%) */
    @keyframes logo-hit-r {
      0%,  23% { opacity: 0.48; }
      25%, 26% { opacity: 1;    }
      27%, 73% { opacity: 0.48; }
      75%, 76% { opacity: 1;    }
      77%, 100%{ opacity: 0.48; }
    }

    .logo-c-left  { animation: logo-hit-l 4.2s linear infinite; }
    .logo-c-right { animation: logo-hit-r 4.2s linear infinite; }
    .logo-ball-el {
      transform-box: fill-box;
      transform-origin: top left;
      animation: logo-ball 4.2s linear infinite;
      filter: drop-shadow(0 0 2.5px rgba(212,240,0,0.95));
    }
    @media (prefers-reduced-motion: reduce) {
      .logo-c-left, .logo-c-right, .logo-ball-el { animation: none; }
    }

    /* ── Section fade-in ────────────────────────────────────── */
    .fade-in {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* ── Footer link ────────────────────────────────────────── */
    /* Scrollspy active state — giallo neon quando la sezione è in vista */
    .footer-link.nav-active {
      color: #D4F000;
    }
    /* Underline indicator sotto il link attivo */
    .footer-link.nav-active::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #D4F000;
      animation: svg-fade-in 0.3s ease forwards;
    }

    /* ── Responsive hero headline ───────────────────────────── */
    .hero-hl {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3.8rem, 9.5vw, 9.5rem);
      line-height: 0.93;
      letter-spacing: 0.01em;
    }

    /* ── Responsive section headline ────────────────────────── */
    .section-hl {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.8rem, 6vw, 6rem);
      line-height: 0.95;
      letter-spacing: 0.01em;
    }

    /* ── Index label ────────────────────────────────────────── */
    .idx {
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #A09A94;
    }

    /* ── Price highlight ────────────────────────────────────── */
    .price {
      font-family: 'DM Mono', monospace;
      font-size: 1.05rem;
      font-weight: 500;
      color: #D4F000;
    }
    .price-old {
      font-family: 'DM Mono', monospace;
      font-size: 0.78rem;
      color: #A09A94;
      text-decoration: line-through;
    }

    /* ── Carousel card sizing ───────────────────────────────── */
    #cs-track { align-items: stretch; }
    .case-card {
      /* On desktop: show 2 cards; gap is 24px (gap-6) */
      width: calc(50% - 12px);
      min-width: calc(50% - 12px);
    }
    @media (max-width: 767px) {
      .case-card {
        width: calc(100% - 0px);
        min-width: calc(100% - 0px);
      }
    }

    /* ── Dot indicator ──────────────────────────────────────── */
    .cs-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #2A2926;
      transition: background 0.3s, width 0.3s;
      border: none; padding: 0; cursor: pointer;
    }
    .cs-dot.active {
      background: #D4F000;
      width: 22px;
      border-radius: 3px;
    }

    /* ── Autoplay progress bar ──────────────────────────────── */
    #cs-progressbar {
      height: 1px;
      background: #2A2926;
      position: relative;
      overflow: hidden;
    }
    #cs-progressbar::after {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      background: #D4F000;
      width: 0%;
      transition: width linear;
    }
    #cs-progressbar.running::after {
      width: 100%;
    }
    /* ═══════════════════════════════════════════════════════════
       MODAL SYSTEM — Booking + Quote flows
    ═══════════════════════════════════════════════════════════ */
    #modal-overlay {
      position: fixed; inset: 0;
      background: #0B0B0B; /* mobile: sfondo solido — nessun sito visibile sotto */
      z-index: 3000;
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
    }
    /* Tablet/desktop: sfondo semi-trasparente e layout centrato */
    @media (min-width: 600px) {
      #modal-overlay {
        background: rgba(0,0,0,0.88);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        align-items: center;
        padding: 1.5rem;
      }
    }
    #modal-overlay.is-open { opacity: 1; pointer-events: all; }

    #modal-sheet {
      background: #101010;
      border: none; /* mobile: nessun bordo — full viewport solido */
      border-bottom: none;
      width: 100%;
      /* Mobile: full screen con dynamic viewport height (esclude barra indirizzi iOS) */
      height: 100dvh;
      height: 100vh; /* fallback per browser senza dvh */
      max-height: 100dvh;
      overflow-y: auto; overflow-x: hidden;
      overscroll-behavior: none; /* confina lo scroll dentro il modal, no bounce */
      transform: translateY(100%); opacity: 0;
      transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
      scrollbar-width: thin; scrollbar-color: #2A2926 transparent;
      display: flex; flex-direction: column;
      /* Safe area iOS notch/Dynamic Island */
      padding-top: env(safe-area-inset-top, 0px);
    }
    /* Tablet/desktop: dimensioni ridotte, centrato, con bordo */
    @media (min-width: 600px) {
      #modal-sheet {
        height: auto;
        max-height: 90vh;
        max-width: 660px;
        border: 1px solid #2A2926; /* bordo riappare su desktop */
        border-bottom: 1px solid #2A2926;
        transform: translateY(28px);
        padding-top: 0;
      }
    }
    #modal-overlay.is-open #modal-sheet { transform: translateY(0); opacity: 1; }

    #modal-hdr {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; padding: 1rem 1.5rem;
      border-bottom: 1px solid #1A1918;
      position: sticky; top: 0; background: #101010; z-index: 10;
      flex-shrink: 0;
    }
    /* Scroll lock — overflow:hidden su html e body.
       Blocca lo scroll senza position:fixed, senza jump visivo al close del modal.
       Funziona su tutti i browser incluso iOS Safari (serve su entrambi html e body). */
    html.modal-open,
    html.modal-open body {
      overflow: hidden;
    }
    #modal-steps {
      display: flex; align-items: center; gap: 0.35rem;
      font-family: 'DM Mono', monospace; font-size: 0.6rem;
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .ms { color: #7A7470; }  /* era #6B6560 — contrast 3.3:1 su #101010 ✓ large text */
    .ms.act { color: #F2EDE4; }
    .ms.done { color: #D4F000; }
    .ms-sep { color: #7A7470; font-size: 0.65rem; }

    #modal-x {
      /* Min 44×44px touch target WCAG 2.5.5 */
      min-width: 44px; min-height: 44px;
      width: 44px; height: 44px;
      border: 1px solid #3A3530;
      background: transparent; color: #A09A94;
      font-size: 0.75rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.18s, color 0.18s;
      flex-shrink: 0; font-family: 'DM Mono', monospace;
    }
    #modal-x:hover { border-color: #F2EDE4; color: #F2EDE4; }
    #modal-x:focus-visible { outline: 2px solid #D4F000; outline-offset: 2px; }

    #modal-body {
      padding: 1.75rem 1.5rem 0;
      flex: 1; display: flex; flex-direction: column;
    }

    .mo-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.9rem, 5vw, 2.7rem);
      color: #F2EDE4; line-height: 1; margin-bottom: 0.25rem;
    }
    .mo-sub {
      font-family: 'DM Mono', monospace; font-size: 0.62rem;
      color: #A09A94; /* era #6B6560 — aumentato per WCAG AA */
      letter-spacing: 0.1em; text-transform: uppercase;
      margin-bottom: 0;
    }
    .mo-intro {
      font-family: 'Barlow', sans-serif; font-size: 0.875rem;
      color: #A09A94; line-height: 1.65;
      margin: 1rem 0 1.5rem;
      padding-top: 1rem; border-top: 1px solid #1A1918;
    }

    /* Panels */
    .mo-panel { display: none; }
    .mo-panel.act { display: block; }

    /* Package selector */
    .pkg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem; }
    @media (max-width: 440px) { .pkg-row { grid-template-columns: 1fr; } }
    .pkg-card {
      border: 1px solid #2A2926; padding: 1rem; cursor: pointer;
      position: relative; transition: border-color 0.18s;
    }
    .pkg-card:hover { border-color: #A09A94; }
    .pkg-card.sel { border-color: #D4F000; }
    .pkg-card.sel::after {
      content: '✓'; position: absolute; top: 0.6rem; right: 0.7rem;
      font-family: 'DM Mono', monospace; font-size: 0.6rem; color: #D4F000;
    }
    .pkg-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: #D4F000; line-height: 1; }
    .pkg-name { font-family: 'DM Mono', monospace; font-size: 0.6rem; color: #A09A94; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.2rem; }
    .pkg-note { font-family: 'Barlow', sans-serif; font-size: 0.72rem; color: #A09A94; margin-top: 0.25rem; line-height: 1.35; } /* era #6B6560 */

    /* Calendar */
    .cal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
    .cal-lbl { font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: #F2EDE4; }
    .cal-nb {
      /* Min 44×44px touch target WCAG 2.5.5 */
      min-width: 44px; min-height: 44px;
      width: 44px; height: 44px;
      border: 1px solid #3A3530;
      background: transparent; color: #A09A94; cursor: pointer;
      font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
      transition: border-color 0.18s, color 0.18s;
    }
    .cal-nb:hover:not(:disabled) { border-color: #F2EDE4; color: #F2EDE4; }
    .cal-nb:focus-visible { outline: 2px solid #D4F000; outline-offset: 2px; }
    .cal-nb:disabled { opacity: 0.25; cursor: not-allowed; }
    .cal-wds { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 3px; }
    .cal-wd { text-align: center; font-family: 'DM Mono', monospace; font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase; color: #7A7470; padding: 0.2rem 0; } /* era #6B6560 */
    .cal-wd.wk { color: #7A7470; } /* era #2A2926 */
    .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 1.25rem; }
    .cal-d {
      aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
      font-family: 'DM Mono', monospace; font-size: 0.68rem;
      border: 1px solid transparent; cursor: pointer; position: relative;
      color: #7A7470; transition: all 0.14s; /* era #6B6560 */
      min-height: 36px; /* touch target approssimativo */
    }
    .cal-d.avail { color: #F2EDE4; }
    .cal-d.avail:hover { border-color: #D4F000; color: #D4F000; }
    .cal-d.avail:focus-visible { outline: 2px solid #D4F000; outline-offset: 1px; }
    /* Specificità 3 classi — batte .cal-d.avail (2) e .cal-d.sel (2) senza ambiguità */
    .cal-d.avail.sel,
    .cal-d.sel { background: #D4F000 !important; color: #0B0B0B !important; border-color: #D4F000; }
    .cal-d.avail.sel:hover { background: #D4F000; color: #0B0B0B; }
    .cal-d.sel { background: #D4F000; color: #0B0B0B; border-color: #D4F000; }
    .cal-d.today:not(.dis)::after {
      content: ''; position: absolute; bottom: 3px; left: 50%;
      transform: translateX(-50%); width: 3px; height: 3px;
      border-radius: 50%; background: #D4F000;
    }
    .cal-d.sel.today::after { background: #0B0B0B; }
    .cal-d.dis { opacity: 0.5;  color: #6B6560; cursor: not-allowed; pointer-events: none; }
    .cal-d.emp { pointer-events: none; }

    /* Time slots */
    .slots-lbl { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: #A09A94; display: block; margin-bottom: 0.6rem; } /* era #6B6560 */
    .slots-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
    .slot-btn {
      font-family: 'DM Mono', monospace;
      font-size: 1rem; /* era 0.7rem — iOS safari zooma su font < 16px */
      letter-spacing: 0.04em; padding: 0.65rem 1rem;
      border: 1px solid #3A3530; background: transparent; color: #A09A94;
      cursor: pointer; transition: all 0.14s; min-height: 44px;
    }
    .slot-btn:hover { border-color: #D4F000; color: #D4F000; }
    .slot-btn:focus-visible { outline: 2px solid #D4F000; outline-offset: 2px; }
    .slot-btn.sel { background: #D4F000; color: #0B0B0B; border-color: #D4F000; }

    /* Booking summary bar */
    .bk-bar {
      background: #0C0B0B; border: 1px solid #2A2926;
      padding: 0.8rem 1rem; margin-bottom: 1.5rem;
      display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: center;
    }
    .bk-item { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: #A09A94; } /* era #6B6560 */
    .bk-item b { color: #F2EDE4; display: block; font-size: 0.7rem; }

    /* Form fields */
    .mo-form { display: flex; flex-direction: column; gap: 1.1rem; }
    .mo-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
    @media (max-width: 460px) { .mo-2col { grid-template-columns: 1fr; } }

    .fld { display: flex; flex-direction: column; gap: 0.3rem; }
    .fld.s2 { grid-column: 1 / -1; }
    .fld-l { font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #A09A94; }
    .fld-l .req { color: #D4F000; margin-left: 2px; }

    .fld-i {
      background: transparent; border: none; border-bottom: 1px solid #6B6560;
      color: #F2EDE4; font-family: 'Barlow', sans-serif;
      font-size: 1rem; /* era 0.875rem — iOS zooma su font < 16px */
      font-weight: 400; padding: 0.55rem 0; outline: none;
      transition: border-color 0.18s; width: 100%;
      min-height: 44px;
    }
    .fld-i:focus { border-color: #D4F000; }
    .fld-i:focus-visible { outline: none; border-color: #D4F000; }
    .fld-i::placeholder { color: #7A7470; }
    .fld-i.err { border-color: #cc4444; }

    select.fld-i {
      appearance: none; -webkit-appearance: none; cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6560' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 0 center;
      padding-right: 1.2rem;
    }
    select.fld-i option { background: #101010; color: #F2EDE4; }

    textarea.fld-i {
      resize: vertical; min-height: 80px; border: 1px solid #6B6560;
      padding: 0.55rem 0.7rem; line-height: 1.6;
      font-size: 1rem; /* era 0.85rem — iOS zooma su font < 16px */
    }
    textarea.fld-i:focus { border-color: #D4F000; }

    input[type="date"].fld-i { color-scheme: dark; }

    /* Radio / checkbox pills */
    .r-grp, .c-grp { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
    .r-pill input, .c-pill input { display: none; }
    .r-pill label, .c-pill label {
      display: inline-flex; align-items: center;
      font-family: 'DM Mono', monospace;
      font-size: 1rem; /* era 0.63rem — iOS zooma su font < 16px */
      letter-spacing: 0.02em; padding: 0.5rem 0.9rem;
      min-height: 44px;
      border: 1px solid #3A3530; color: #A09A94; cursor: pointer;
      transition: all 0.14s; user-select: none;
    }
    .r-pill input:checked + label,
    .c-pill input:checked + label { border-color: #D4F000; color: #D4F000; background: rgba(212,240,0,0.04); }
    .r-pill label:hover, .c-pill label:hover { border-color: #A09A94; color: #F2EDE4; }

    /* Privacy / GDPR consent */
    .privacy-wrap {
      display: flex; align-items: flex-start; gap: 0.75rem;
      padding: 1rem; border: 1px solid #2A2926;
      margin-top: 1.25rem; background: rgba(212,240,0,0.02);
    }
    .privacy-wrap.err-priv { border-color: #cc4444; }
    .privacy-cb {
      width: 14px; height: 14px; min-width: 14px;
      border: 1px solid #3A3530; background: transparent;
      appearance: none; -webkit-appearance: none;
      cursor: pointer; position: relative; margin-top: 2px;
      transition: border-color 0.18s;
    }
    .privacy-cb:checked { border-color: #D4F000; background: #D4F000; }
    .privacy-cb:checked::after {
      content: '✓'; position: absolute; top: -2px; left: 1px;
      font-size: 0.62rem; color: #0B0B0B; font-weight: 700;
    }
    .privacy-cb:focus-visible { outline: 1px solid #D4F000; outline-offset: 2px; }
    .privacy-text {
      font-family: 'Barlow', sans-serif; font-size: 0.75rem;
      font-weight: 400; color: #A09A94; line-height: 1.55;
    }
    .privacy-text a { color: #A09A94; text-decoration: underline; text-underline-offset: 2px; transition: color 0.18s; }
    .privacy-text a:hover { color: #F2EDE4; }

    /* Payment step */
    .pay-ctr { text-align: center; padding: 2rem 0 1rem; }
    .pay-amt { font-family: 'Bebas Neue', sans-serif; font-size: 5.5rem; color: #D4F000; line-height: 1; display: block; }
    .pay-lbl { font-family: 'DM Mono', monospace; font-size: 0.6rem; color: #A09A94; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-top: 0.2rem; } /* era #6B6560 */
    .pay-det { font-family: 'Barlow', sans-serif; font-size: 0.8rem; color: #A09A94; line-height: 1.65; margin: 1.25rem auto; max-width: 360px; }
    .pay-sec { display: flex; align-items: center; justify-content: center; gap: 0.35rem; font-family: 'DM Mono', monospace; font-size: 0.55rem; color: #7A7470; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.75rem; } /* era #6B6560 */

    /* Success state */
    .mo-ok { text-align: center; padding: 2.5rem 1rem; display: none; }
    .mo-ok.show { display: block; }
    .ok-icon {
      width: 50px; height: 50px; border: 1px solid #D4F000; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.25rem; color: #D4F000;
      font-family: 'DM Mono', monospace; font-size: 0.9rem;
    }
    .ok-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #F2EDE4; margin-bottom: 0.6rem; }
    .ok-text { font-family: 'Barlow', sans-serif; font-size: 0.875rem; color: #A09A94; line-height: 1.7; max-width: 380px; margin: 0 auto; }

    /* Modal footer (sticky) */
    .mo-foot {
      padding: 1rem 1.5rem; border-top: 1px solid #1A1918;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 0.75rem;
      position: sticky; bottom: 0; background: #101010; z-index: 10;
      margin-top: auto; flex-shrink: 0;
    }
    .mo-foot-note { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: #A09A94; letter-spacing: 0.05em; }
    .mo-foot-note a { color: #A09A94; text-decoration: underline; text-underline-offset: 3px; transition: color 0.18s; } /* era #3A3530 */
    .mo-foot-note a:hover { color: #F2EDE4; }

    /* Scrollbar in modal sheet */
    #modal-sheet::-webkit-scrollbar { width: 3px; }
    #modal-sheet::-webkit-scrollbar-track { background: transparent; }
    #modal-sheet::-webkit-scrollbar-thumb { background: #2A2926; }

    /* ── Scrollbar ─────────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: #0B0B0B; }
    ::-webkit-scrollbar-thumb { background: #2A2926; }

    /* ══ ACCESSIBILITÀ GLOBALE (WCAG 2.1 AA) ════════════════════
       Focus visibile su ogni elemento interattivo (SC 2.4.7)
       Outline acid giallo — massimo contrasto su sfondo scuro
    ═══════════════════════════════════════════════════════════ */
    :focus-visible {
      outline: 2px solid #D4F000;
      outline-offset: 3px;
    }
    /* Skip-to-main — accessibilità da tastiera (SC 2.4.1) */
    .skip-link {
      position: fixed;
      top: -100%; left: 0;
      background: #D4F000; color: #0B0B0B;
      padding: 0.75rem 1.25rem;
      font-family: 'DM Mono', monospace;
      font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
      text-decoration: none; z-index: 99999;
      transition: top 0.15s;
    }
    .skip-link:focus { top: 0; }

    /* Touch target 44px minimo (SC 2.5.5) — nav link */
    nav a.footer-link {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }
    /* Radio e checkbox pill — area tap ampliata */
    .r-pill label, .c-pill label {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    /* Privacy checkbox più grande */
    .privacy-cb { min-width: 20px; min-height: 20px; width: 20px; height: 20px; cursor: pointer; }

    /* ════════════════════════════════════════════════════════════
       TOOLTIP SYSTEM
       Icona ⓘ accanto al tag chip → apre spiegazione semplice.
       Hover su desktop, click su mobile (toggle .active via JS).
    ════════════════════════════════════════════════════════════ */

    /* Wrapper del tag + icona */
    .tooltip-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    /* Icona cerchio con "i" */
    .tooltip-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      border: 1px solid #3A3530;
      border-radius: 50%;
      flex-shrink: 0;
      cursor: pointer;
      color: #A09A94;
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      font-style: italic;
      font-weight: 400;
      line-height: 1;
      background: transparent;
      padding: 0;
      transition: border-color 0.2s, color 0.2s;
      -webkit-appearance: none;
      appearance: none;
    }
    .tooltip-icon:hover,
    .tooltip-wrap.active .tooltip-icon {
      border-color: #D4F000;
      color: #D4F000;
    }
    .tooltip-icon:focus-visible {
      outline: 1px solid #D4F000;
      outline-offset: 2px;
    }

    /* Tooltip box */
    .tooltip-box {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 0;
      width: min(240px, calc(100vw - 3rem));
      background: #161514;
      border: 1px solid #3A3530;
      border-radius: 2px;
      padding: 0.7rem 0.85rem;
      font-family: 'Barlow', sans-serif;
      font-weight: 400;
      font-size: 0.8rem;
      line-height: 1.55;
      color: #A09A94;
      z-index: 200;
      pointer-events: none;
      opacity: 0;
      transform: translateY(5px);
      transition: opacity 0.18s ease, transform 0.18s ease;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    /* Triangolino puntatore */
    .tooltip-box::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 12px;
      width: 8px;
      height: 8px;
      background: #161514;
      border-right: 1px solid #3A3530;
      border-bottom: 1px solid #3A3530;
      transform: rotate(45deg);
    }
    /* Su desktop basta hover; su touch gestisce JS (.active) */
    @media (hover: hover) {
      .tooltip-wrap:hover .tooltip-box { opacity: 1; transform: translateY(0); }
    }
    .tooltip-wrap.active .tooltip-box { opacity: 1; transform: translateY(0); }

    /* Se il tooltip rischia di andare fuori schermo a destra:
       classe .tip-right aggiunta via JS al mount */
    .tooltip-wrap.tip-right .tooltip-box {
      left: auto;
      right: 0;
    }
    .tooltip-wrap.tip-right .tooltip-box::after {
      left: auto;
      right: 12px;
    }
    /* ══ CONTACT PHOTO ══════════════════════════════════════════ */
    .contact-photo-wrap {
      position: relative;
      overflow: hidden;
    }
    /* Mobile-first: immagine intera, nessun crop */
    .contact-photo-wrap img {
      width: 100%;
      height: auto;
      display: block;
      filter: grayscale(100%) contrast(1.05);
      transition: filter 0.5s ease;
    }
    .contact-photo-wrap:hover img {
      filter: grayscale(85%) contrast(1.05);
    }
    /* Overlay sfumatura basso */
    .contact-photo-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 60%, #0B0B0B 100%);
      pointer-events: none;
    }
    /* Linea acid superiore */
    .contact-photo-wrap::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: #D4F000;
      z-index: 2;
    }
    /* Tablet: limita altezza ma mantiene il volto visibile */
    @media (min-width: 600px) and (max-width: 1023px) {
      .contact-photo-wrap {
        max-height: 480px;
      }
      .contact-photo-wrap img {
        height: 100%;
        object-fit: cover;
        object-position: center 18%;
      }
    }
    /* Desktop: altezza fissa, volto sempre centrato */
    @media (min-width: 1024px) {
      .contact-photo-wrap {
        height: 520px;
        min-height: 520px;
      }
      .contact-photo-wrap img {
        height: 100%;
        object-fit: cover;
        object-position: center 18%;
      }
    }

    /* ══ WHATSAPP WIDGET ════════════════════════════════════════ */
    #wa-widget {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.6rem;
    }
    #wa-bubble {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      background: #111F14;
      border: 1px solid #1A3A1E;
      padding: 0.75rem 1.1rem 0.75rem 0.85rem;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55);
      transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
      max-width: 230px;
    }
    #wa-bubble:hover {
      border-color: #25D366;
      box-shadow: 0 12px 40px rgba(37,211,102,0.15);
      transform: translateY(-2px);
    }
    /* Icona WhatsApp SVG */
    .wa-icon {
      width: 32px; height: 32px;
      background: #25D366;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      position: relative;
    }
    /* Pulsing dot (online indicator) */
    .wa-dot {
      position: absolute;
      top: -2px; right: -2px;
      width: 10px; height: 10px;
      background: #D4F000;
      border-radius: 50%;
      border: 2px solid #0B0B0B;
    }
    .wa-dot::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      border: 1.5px solid #D4F000;
      opacity: 0;
      animation: wa-pulse 2s ease-out infinite;
    }
    @keyframes wa-pulse {
      0%   { opacity: 0.8; transform: scale(0.8); }
      100% { opacity: 0;   transform: scale(2.2); }
    }
    .wa-text { display: flex; flex-direction: column; gap: 1px; }
    .wa-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.62rem; letter-spacing: 0.06em;
      text-transform: uppercase; color: #F2EDE4;
      white-space: nowrap;
    }
    .wa-sub {
      font-family: 'Barlow', sans-serif;
      font-size: 0.7rem; font-weight: 400;
      color: #7ABF8A; white-space: nowrap; /* era #4A6A4E — ora contrasto sufficiente */
    }
    @media (max-width: 480px) {
      #wa-widget { bottom: 1rem; right: 1rem; }
      #wa-bubble { padding: 0.65rem 0.9rem 0.65rem 0.75rem; }
      .wa-label { font-size: 0.58rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wa-dot::after { animation: none; }
    }

    /* ══ LOGO CAROUSEL ══════════════════════════════════════════ */
    .logo-strip {
      overflow: hidden;
      border-top: 1px solid #1A1918;
      border-bottom: 1px solid #1A1918;
      padding: 2.5rem 0;
      position: relative;
    }
    /* Fade edges */
    .logo-strip::before,
    .logo-strip::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 10vw;
      z-index: 2;
      pointer-events: none;
    }
    .logo-strip::before {
      left: 0;
      background: linear-gradient(to right, #0B0B0B, transparent);
    }
    .logo-strip::after {
      right: 0;
      background: linear-gradient(to left, #0B0B0B, transparent);
    }
    .logo-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0 0;
    }
    .logo-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 2.5rem;
      opacity: 0.4;
      transition: opacity 0.25s;
      flex-shrink: 0;
      border-right: 1px solid #1A1918;
    }
    .logo-item:last-child { border-right: none; }
    .logo-item:hover { opacity: 0.85; }
    .logo-item svg { height: 26px; width: auto; display: block; }
    @media (max-width: 767px) {
      .logo-item {
        padding: 0.75rem 1.5rem;
        border-right: none;
        border-bottom: 1px solid #1A1918;
        width: 50%;
      }
      .logo-item:nth-child(odd) { border-right: 1px solid #1A1918; }
      .logo-item:nth-last-child(-n+2) { border-bottom: none; }
    }

    /* ── Link "Scopri tutti i dettagli" sotto CTA service card ── */
    .sc-detail-link {
      display: block;
      margin-top: 1rem;
      padding: 0.4rem 0;
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #A09A94;
      text-decoration: underline;
      text-underline-offset: 4px;
      transition: color 0.18s;
    }
    .sc-detail-link:hover { color: #F2EDE4; }
    .sc-detail-link:focus-visible { outline: 2px solid #D4F000; outline-offset: 2px; }


/* ════════════════════════════════════════════════════════════════
   MOBILE-FIRST OVERHAUL — v1.2
   Fix: nav collision · touch targets · typography · spacing
   ════════════════════════════════════════════════════════════════ */

/* ── 1. NAV — visibilità mobile / desktop garantita con !important ── */

/* Mobile (<768px): mostra burger, nascondi nav links */
@media (max-width: 767px) {
  #navbar > .nav-inner > ul          { display: none !important; }
  #mob-toggle                        { display: flex !important; }
}

/* Desktop (≥768px): mostra nav links, nascondi burger */
@media (min-width: 768px) {
  #mob-toggle                        { display: none !important; }
  #navbar > .nav-inner > ul          { display: flex !important; }
}

/* ── 2. NAV-INNER — struttura mobile ottimizzata ── */
@media (max-width: 767px) {
  #navbar > .nav-inner {
    padding: 0 1.25rem;              /* Safe area laterale su mobile */
    height: 56px;                    /* Altezza fissa — no salto al scroll */
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;               /* Mai wrap — overflow nascosto */
    gap: 0;
    overflow: hidden;                /* Nessuna collision visibile */
  }
  
  /* Logo — "Christopher" visibile su mobile (font piccolo, spazio sufficiente) */
  .logo-given {
    display: block;
  }
  
  /* Logo-sep rimane per separare SVG da surname */
  .logo-sep {
    height: 20px;
  }
}

/* ── 3. MOB-TOGGLE — touch target 44×44px (WCAG 2.5.5) ── */
#mob-toggle {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;                          /* Spaziatura ottica tra le barre */
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Le barre del burger — dimensioni precise */
.mob-bar {
  display: block;
  height: 1.5px;                     /* Più visibili su display Retina */
  border-radius: 0;
  transform-origin: center center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.2s ease,
              width     0.2s ease;
  flex-shrink: 0;
  pointer-events: none;
}
.mob-bar:nth-child(1),
.mob-bar:nth-child(2),
.mob-bar:nth-child(3) {
  width: 20px;
  background-color: #F2EDE4;
}

/* ── 4. MOB-MENU — dropdown mobile ── */
#mob-menu {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 56px;                         /* Altezza navbar mobile */
  z-index: 999;
  background: #0B0B0B;
  border-bottom: 1px solid #2A2926;
  padding: 1.5rem 1.25rem 2rem;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  max-height: calc(100vh - 56px);
  -webkit-overflow-scrolling: touch;
}
#mob-menu.flex {
  display: flex;
}

/* Link nel mobile menu — touch target 44px */
#mob-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A09A94;
  text-decoration: none;
  border-bottom: 1px solid #1A1918;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
#mob-menu a:last-child {
  border-bottom: none;
}
#mob-menu a:hover,
#mob-menu a:active {
  color: #F2EDE4;
}
#mob-menu .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 1.25rem;
  border-bottom: none;
  border-radius: 0;
  width: 100%;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: #0B0B0B;
  text-transform: uppercase;
}

/* ── 5. NAVBAR HEIGHT — padding-top per body ── */
body {
  padding-top: 56px;                 /* Mobile: navbar 56px */
}
@media (min-width: 768px) {
  body {
    padding-top: 72px;               /* Desktop: navbar 72px */
  }
  #navbar > .nav-inner {
    height: 72px;
  }
}

/* ── 6. SECTION SAFE AREA — padding laterale garantito ── */
@media (max-width: 767px) {
  section,
  .section-wrap,
  [class*="px-6"],
  [class*="px-5"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  
  /* Padding verticale ridotto su mobile */
  [class*="py-24"] { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  [class*="py-32"] { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  [class*="py-16"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  [class*="pt-32"] { padding-top: 5rem !important; }
  [class*="pb-28"] { padding-bottom: 4rem !important; }
}

/* ── 7. TIPOGRAFIA MOBILE — anti-widow, font size responsive ── */

/* Titoli visivi principali */
.section-hl {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 11vw, 6rem);  /* 11vw = ~43px su 390px */
  line-height: 0.95;
  letter-spacing: 0.01em;
  word-break: break-word;            /* Anti-overflow su mobile */
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .section-hl {
    font-size: clamp(2.4rem, 10vw, 3.5rem); /* Ridotto su schermi molto piccoli */
  }
}

/* Page title spoke (hero title) */
.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.6rem, 10vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  word-break: break-word;
}

/* H2 sezioni — gerarchia */
.section-h2 {
  word-break: break-word;
  overflow-wrap: break-word;
  /* Anti-widow: orphans/widows CSS */
  orphans: 3;
  widows: 3;
}

@media (max-width: 767px) {
  .section-h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.4rem);
    line-height: 1.1;
  }
}

/* Price amount — spoke */
.price-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: 1;
  color: #F2EDE4;
}

/* ── 8. TOUCH TARGETS — 44×44px su tutti i link interattivi ── */

/* CTA btn-primary */
.btn-primary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* btn-ghost */
.btn-ghost {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* FAQ summary — accordion touch target */
summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0.5rem 0;
}

/* Links generici nel body */
a {
  -webkit-tap-highlight-color: transparent;
}

/* Footer links */
.footer-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── 9. CAROUSEL — centramento ottico bottoni ── */
#cs-prev, #cs-next,
#pmi-cs-prev, #pmi-cs-next {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #2A2926;
  color: #A09A94;
  font-family: 'DM Mono', monospace;
  font-size: 1rem;                   /* Leggermente più grande per i caratteri ←→ */
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
#cs-prev:hover, #cs-next:hover,
#pmi-cs-prev:hover, #pmi-cs-next:hover {
  border-color: #F2EDE4;
  color: #F2EDE4;
}

/* ── 10. SPOKE — hero sezione su mobile ── */
@media (max-width: 767px) {
  /* Sticky price bar */
  #cta-sticky {
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
  }
  .sticky-label {
    font-size: 0.7rem;
  }
  .sticky-price {
    font-size: 1.1rem;
  }
  
  /* Related services grid — 1 colonna su mobile */
  .related-card {
    min-width: 0;
  }
  
  /* D-card (deliverables) su mobile */
  .d-card {
    padding: 1.25rem;
  }
  
  /* FAQ — testo leggibile su mobile */
  .faq-body {
    font-size: 0.875rem;
    line-height: 1.7;
  }
  
  /* Intro paragraph */
  .text-lg, [class*="text-lg"] {
    font-size: 1rem !important;
    line-height: 1.65;
  }
}

/* ── 11. iOS SAFE AREA — notch e home indicator ── */
@supports (padding: env(safe-area-inset-bottom)) {
  #mob-menu {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── 12. SCROLL MOMENTUM — iOS native feel ── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* CRITICAL: hidden (non clip) perché Chrome non propaga 'clip' al viewport — solo 'hidden' blocca lo scroll orizzontale del documento */
  /* -webkit-overflow-scrolling: touch rimosso — deprecato da iOS 13.
     Il momentum scroll è default su tutti i dispositivi moderni.
     Applicato su html interferiva con il pull-to-refresh nativo di Safari. */
}

/* ── 13. FOCUS VISIBLE — accessibilità tastiera/voiceover ── */
:focus-visible {
  outline: 2px solid #D4F000;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 14. OVERFLOW — previene scrollbar orizzontale su mobile ── */
body {
  overflow-x: clip; /* clip ≠ hidden: non crea scroll container, preserva pull-to-refresh Safari iOS */
  max-width: 100vw;
}

/* ── 15. IMMAGINI E SVG — responsive su mobile ── */
svg {
  max-width: 100%;
}
.svg-illus {
  width: 100%;
  max-width: 100%;
}

/* ── 16. CARTE CASE STUDY — scroll orizzontale ottimizzato ── */
@media (max-width: 767px) {
  .case-card {
    width: calc(100vw - 3rem);       /* Full width meno padding container (px-6 × 2 = 3rem) */
    min-width: calc(100vw - 3rem);
    max-width: 420px;
  }
}

/* ── 17. SERVICE CARDS — full width su mobile ── */
@media (max-width: 767px) {
  .service-card,
  .svc-card {
    width: 100%;
  }
  .sc-cta {
    flex-direction: column;
    gap: 0.75rem;
  }
  .sc-cta .btn-primary,
  .sc-cta .btn-ghost {
    width: 100%;
    text-align: center;
  }
}

/* ── 18. ANTIALIASING — testo più nitido su mobile ── */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 19. HERO HUB — spacing mobile ── */
@media (max-width: 767px) {
  #hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: auto;
  }
  
  /* H1 hub su mobile */
  .hero-hl {
    font-size: clamp(3.5rem, 13vw, 5.5rem);
    line-height: 0.93;
    word-break: break-word;
  }
}

/* ── 20. BREADCRUMB — leggibile su mobile ── */
@media (max-width: 767px) {
  .breadcrumb {
    font-size: 0.72rem;
    padding: 0.75rem 0;
  }
}


/* ── NAV SPOKE — CTA solo su desktop ──────────────────────────── */
/* Le spoke usano: class="btn-primary hidden md:inline-flex"
   .hidden deve vincere su .btn-primary su mobile */
@media (max-width: 767px) {
  .nav-inner .btn-primary.hidden,
  .nav-inner a
  /* Assicura che il mob-toggle appaia se presente nelle spoke */
  .nav-inner #mob-toggle {
    display: flex !important;
  }
}
@media (min-width: 768px) {
  .nav-inner .btn-primary.hidden.md\:inline-flex {
    display: inline-flex !important;
  }
}

/* ── .md:inline-flex — override di .hidden su desktop ── */
@media (min-width: 768px) {
  .md\:inline-flex { display: inline-flex !important; }
  .md\:flex        { display: flex !important; }
  .md\:block       { display: block !important; }
}


/* ══ COOKIE BANNER — christophercorte.it ════════════════════════
   Non blocca navigazione. Design system: ink/acid/wire.
   Uguale prominenza Accetta/Rifiuta (Garante 2022).
════════════════════════════════════════════════════════════ */
#cc-overlay {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9998;
  /* visibilità gestita dalla classe .hidden — no display qui */
}
#cc-overlay

#cc-banner {
  background: #111110;
  border-top: 3px solid #D4F000;
  max-width: 100%; padding: 1.5rem 2rem;
  font-family: 'DM Mono', monospace;
  box-shadow: 0 -8px 40px rgba(0,0,0,.7);
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
}
@media (min-width: 768px) {
  #cc-banner { padding: 1.75rem 3rem; }
}

.cc-logo {
  font-size: .65rem; letter-spacing: .2em;
  text-transform: uppercase; color: #D4F000;
  margin-bottom: .875rem; display: block;
}
.cc-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem; color: #F2EDE4;
  margin-bottom: .5rem; line-height: 1.1;
}
.cc-text {
  font-size: .78rem; color: #A09A94;
  line-height: 1.65; margin-bottom: 1.25rem;
  max-width: 680px;
}
.cc-text a { color: #D4F000; text-decoration: underline; text-underline-offset: .2em; }
.cc-text a:hover { color: #F2EDE4; }

/* Toggle pannello */
.cc-prefs { display: none; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.cc-prefs.open { display: flex; }
.cc-pref-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .875rem 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid #2A2926;
}
.cc-pref-info { flex: 1; }
.cc-pref-name {
  font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: #F2EDE4; margin-bottom: .2rem;
}
.cc-pref-desc { font-size: .72rem; color: #A09A94; line-height: 1.5; }

/* Toggle switch */
.cc-toggle { flex-shrink: 0; margin-top: .1rem; }
.cc-toggle input { display: none; }
.cc-toggle label {
  display: block; width: 38px; height: 22px;
  background: #2A2926; border-radius: 11px;
  position: relative; cursor: pointer; transition: background .2s;
}
.cc-toggle label::after {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #A09A94; border-radius: 50%;
  transition: transform .2s, background .2s;
}
.cc-toggle input:checked + label { background: rgba(212,240,0,.3); }
.cc-toggle input:checked + label::after { transform: translateX(16px); background: #D4F000; }
.cc-toggle input:disabled + label { opacity: .45; cursor: not-allowed; }

/* Bottoni azione */
.cc-actions {
  display: flex; gap: .625rem; flex-wrap: wrap;
  align-items: center; justify-content: flex-end;
}
.cc-btn {
  font-family: 'DM Mono', monospace;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; border: none;
  padding: .75rem 1.25rem; min-height: 44px;
  transition: background .15s, color .15s, border-color .15s;
}
/* Uguale prominenza Accetta/Rifiuta — Garante 2022 */
.cc-btn-accept {
  background: #D4F000; color: #0B0B0B; font-weight: 700;
  flex: 1; min-width: 130px;
}
.cc-btn-accept:hover { background: #F2EDE4; }
.cc-btn-reject {
  background: transparent; color: #F2EDE4;
  border: 1px solid #2A2926;
  flex: 1; min-width: 130px;
}
.cc-btn-reject:hover { border-color: #A09A94; }
.cc-btn-manage {
  background: transparent; color: #A09A94;
  font-size: .65rem; padding: .75rem .875rem;
  text-decoration: underline; text-underline-offset: .2em;
}
.cc-btn-manage:hover { color: #F2EDE4; }
.cc-btn-save {
  background: #D4F000; color: #0B0B0B; font-weight: 700;
  padding: .75rem 1.5rem; min-height: 44px;
  font-family: 'DM Mono', monospace;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; border: none;
  transition: background .15s;
}
.cc-btn-save:hover { background: #F2EDE4; }

.cc-footer-note {
  font-size: .65rem; color: #7A7470;
  margin-top: .875rem; padding-top: .75rem;
  border-top: 1px solid #2A2926; line-height: 1.5;
}
.cc-footer-note a { color: #A09A94; text-decoration: underline; text-underline-offset: 2px; }

/* ══ PRIVACY MODAL ═══════════════════════════════════════════ */
#pp-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(11,11,11,.85);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
#pp-overlay
#pp-modal {
  background: #fff; color: #1A1815;
  max-width: 680px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  padding: 2.5rem 2.5rem 2rem;
  position: relative;
}
@media (max-width: 640px) { #pp-modal { padding: 1.75rem 1.5rem; } }
.pp-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.25rem; color: #7A7268; padding: .5rem;
}
.pp-close:hover { color: #1A1815; }
.pp-badge {
  display: inline-block; background: #0B0B0B; color: #D4F000;
  font-family: 'DM Mono', monospace; font-size: .62rem;
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: .3rem .75rem; margin-bottom: 1.25rem;
}
.pp-h1 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #0B0B0B; margin-bottom: .5rem; line-height: 1.1; }
.pp-date { font-family: 'DM Mono', monospace; font-size: .7rem; color: #7A7268; margin-bottom: 1.5rem; }
.pp-h2 { font-size: 1rem; font-weight: 700; color: #0B0B0B; margin: 1.75rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid #e8e4dc; }
.pp-h2:first-of-type { border-top: none; padding-top: 0; }
.pp-p { font-size: .875rem; color: #3C3830; line-height: 1.75; margin-bottom: .75rem; }


/* ── Form inputs: override .fi animation class ─ */
input.fi, textarea.fi { opacity: 1 !important; transform: none !important; }