/* rubailab, redesign scroll-craft.
   Grammatica: capitolato editoriale sul filo che si scioglie. Ogni capitolo atterra sul
   suo fondo con un taglio netto; il folio a margine sostituisce la barra; la
   bozza a margine e' la mossa firma (js/rl.js). Il motore scrollcraft non si
   tocca: qui solo token e markup della pagina. */

@font-face{font-family:'Overpass';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/overpass-700.woff2') format('woff2')}
@font-face{font-family:'Overpass';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/overpass-800.woff2') format('woff2')}
@font-face{font-family:'Overpass';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/overpass-900.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}

/* ------------------------------------------------------------ token -- */
:root{
  --sc-canvas:#17181C; --sc-surface:#202226;
  --sc-ink:#F4F5F6; --sc-ink-soft:#BFC3CC;
  --sc-accent:#E6FF4B; --sc-accent-ink:#12141F;
  --sc-font-display:'Overpass',system-ui,sans-serif;
  --sc-font-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sc-shadow-color:228 14% 4%;

  /* regola dei due punti (DESIGN.md): di notte il campo e' antracite e il segno e' lime, mai il blu */
  --rl-field:#202226; --rl-field-ink:#F4F5F6; --rl-field-soft:#C7CAD1; --rl-field-accent:#E6FF4B;
  --rl-deep:#0E0F12;
  --rl-paper:#2E3036; --rl-paper-ink:#F4F5F6; --rl-paper-soft:#C7CAD1; --rl-paper-mark:#E6FF4B; --rl-paper-mark-ink:#17181C; --rl-paper-mark-deep:#CFE63C; --rl-paper-line:#565A63;
  --rl-input:#202226; --rl-prefill:#3A3F2A; --rl-warn:#FF8A7A; --rl-paper-edge:rgba(255,255,255,.06);
  --rl-rail:11.5rem; --rl-sheet:17rem;
  --rl-radius:6px;
  color-scheme:dark;
}
html[data-theme="light"]{
  --sc-canvas:#F4F5F8; --sc-surface:#FFFFFF;
  --sc-ink:#12141F; --sc-ink-soft:#3C3F52;
  --sc-accent:#1D2AC2; --sc-accent-ink:#FFFFFF;
  --sc-shadow-color:230 30% 40%;
  /* di giorno il campo e' blu e il segno e' blu, mai il lime */
  --rl-field:#1D2AC2; --rl-field-ink:#FFFFFF; --rl-field-soft:#D9DDFF; --rl-field-accent:#FFFFFF;
  --rl-deep:#FFFFFF;
  --rl-paper:#FFFFFF; --rl-paper-ink:#12141F; --rl-paper-soft:#4A4F63; --rl-paper-mark:#1D2AC2; --rl-paper-mark-ink:#FFFFFF; --rl-paper-mark-deep:#141C8C; --rl-paper-line:#D7DCEF;
  --rl-input:#FFFFFF; --rl-prefill:#EEF1FC; --rl-warn:#B3241A; --rl-paper-edge:rgba(255,255,255,.6);
  color-scheme:light;
}

/* ------------------------------------------------------------- base -- */
html{background:var(--sc-canvas)}
body{
  margin:0;background:var(--sc-canvas);color:var(--sc-ink);
  font-family:var(--sc-font-text);font-size:var(--sc-t-base);line-height:1.65;
  letter-spacing:.003em;-webkit-font-smoothing:antialiased;
  transition:background-color .25s var(--sc-ease-out),color .25s var(--sc-ease-out);
}
h1,h2,h3{font-family:var(--sc-font-display);font-weight:800;margin:0;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--sc-accent);color:var(--sc-accent-ink)}
:focus-visible{outline:2.5px solid var(--sc-accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--sc-accent);color:var(--sc-accent-ink);padding:10px 14px;border-radius:var(--rl-radius);font:700 .875rem var(--sc-font-display);text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* link nel testo: sottolineatura tenue, piena all'hover */
.rl-prose a,.rl-link{
  color:var(--sc-accent);font-weight:500;text-decoration:underline;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  text-decoration-thickness:1.5px;text-underline-offset:.22em;
  transition:text-decoration-color .15s,text-decoration-thickness .15s;
}
.rl-prose a:hover,.rl-link:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}

/* la colonna di lettura lascia spazio a folio (sinistra) e bozza (destra) */
.rl-col{
  box-sizing:border-box;width:100%;
  padding-inline:var(--sc-gutter);
}
@media (min-width:1180px){
  .rl-col{
    padding-left:calc(var(--rl-rail) + 3.5rem);
    padding-right:calc(var(--rl-sheet) + 4rem);
    max-width:96rem;margin-inline:auto;
  }
  body.rl-inner .rl-col{padding-right:4rem}
  /* nei Contatti la bozza non c'e' piu': il modulo si prende anche il suo spazio */
  .rl-contact .rl-col{padding-right:4rem}
}

/* ------------------------------------------------------------ folio -- */
.rl-folio{
  position:fixed;z-index:40;left:0;top:0;bottom:0;width:var(--rl-rail);
  box-sizing:border-box;padding:28px 0 24px 28px;
  display:none;flex-direction:column;gap:28px;
  font-family:var(--sc-font-display);
  /* margine pieno: i pannelli a colore passano sotto senza coprire l'indice */
  background:var(--sc-canvas);border-right:1px solid var(--sc-hairline);
  transition:background-color .25s var(--sc-ease-out);
}
@media (min-width:1180px){.rl-folio{display:flex}}
.rl-folio__mark{display:block;width:118px}
.rl-folio__mark img{width:100%;height:auto}
html[data-theme="light"] .rl-folio__mark .on-dark,
html:not([data-theme="light"]) .rl-folio__mark .on-light{display:none}
.rl-folio__now{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sc-ink-soft);min-height:2.6em}
.rl-folio__now b{display:block;color:var(--sc-ink);font-size:1.6rem;letter-spacing:-.01em;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums}
.rl-index{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:ch}
.rl-index a{
  display:grid;grid-template-columns:2.1em 1fr;align-items:baseline;
  padding:6px 0;text-decoration:none;color:var(--sc-ink-soft);
  font-size:.8125rem;font-weight:700;line-height:1.25;letter-spacing:.01em;
  transition:color .15s var(--sc-ease-out);
}
.rl-index a span{font-variant-numeric:tabular-nums;opacity:.7}
.rl-index a:hover{color:var(--sc-ink)}
.rl-index a[aria-current="true"]{color:var(--sc-ink)}
.rl-index a[aria-current="true"] span{color:var(--sc-accent);opacity:1}
.rl-folio__pages{margin-top:auto;display:grid;gap:4px;font-size:.75rem;font-weight:700;letter-spacing:.02em}
.rl-folio__pages a{color:var(--sc-ink-soft);text-decoration:none;padding:3px 0}
.rl-folio__pages a:hover,.rl-folio__pages a[aria-current="page"]{color:var(--sc-ink)}
.rl-theme{
  margin-top:10px;justify-self:start;display:inline-flex;align-items:center;gap:8px;
  background:none;border:1.5px solid var(--sc-hairline-strong);color:var(--sc-ink);
  border-radius:var(--rl-radius);padding:6px 10px;cursor:pointer;
  font:700 .75rem var(--sc-font-display);letter-spacing:.04em;
  transition:border-color .15s var(--sc-ease-out),transform .12s var(--sc-ease-out);
}
.rl-theme:hover{border-color:var(--sc-ink)}
.rl-theme:active{transform:translateY(1px)}
.rl-theme svg{width:14px;height:14px}

/* folio compatto sotto i 1180px: una targhetta fissa che apre l'indice */
.rl-chip{
  position:fixed;z-index:60;left:12px;top:12px;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--sc-surface);color:var(--sc-ink);border:1.5px solid var(--sc-hairline-strong);
  border-radius:var(--rl-radius);padding:9px 12px 8px;min-height:44px;box-sizing:border-box;
  font:800 .8125rem var(--sc-font-display);letter-spacing:.02em;cursor:pointer;
  box-shadow:var(--sc-e2);
}
.rl-chip b{color:var(--sc-accent);font-variant-numeric:tabular-nums}
.rl-chip svg{width:16px;height:16px}
@media (min-width:1180px){.rl-chip{display:none}}
.rl-drawer{
  position:fixed;z-index:70;inset:0;display:grid;grid-template-columns:min(22rem,88vw) 1fr;
  visibility:hidden;
}
.rl-drawer[data-open]{visibility:visible}
.rl-drawer__panel{
  background:var(--sc-canvas);border-right:1px solid var(--sc-hairline-strong);
  padding:22px 24px 28px;overflow:auto;display:flex;flex-direction:column;gap:22px;
  transform:translateX(-102%);transition:transform .28s var(--sc-ease-out);
  font-family:var(--sc-font-display);
}
.rl-drawer[data-open] .rl-drawer__panel{transform:none}
.rl-drawer__scrim{background:hsl(var(--sc-shadow-color) / .55);opacity:0;transition:opacity .28s var(--sc-ease-out);border:0;padding:0;cursor:pointer}
.rl-drawer[data-open] .rl-drawer__scrim{opacity:1}
.rl-drawer__head{display:flex;justify-content:space-between;align-items:center}
.rl-drawer__close{background:none;border:0;color:var(--sc-ink);font:800 .8125rem var(--sc-font-display);padding:10px;margin:-10px;cursor:pointer;min-height:44px}
.rl-drawer .rl-index a{font-size:1rem;padding:10px 0}
.rl-drawer .rl-folio__pages{margin-top:0;font-size:.9375rem}
.rl-drawer .rl-folio__pages a{padding:8px 0}

/* ------------------------------------------------------------ bozza -- */
.rl-sheet{
  position:fixed;z-index:45;right:28px;top:28px;width:var(--rl-sheet);
  box-sizing:border-box;max-height:calc(100vh - 56px);overflow:auto;
  background:var(--rl-paper);color:var(--rl-paper-ink);
  border-radius:4px;padding:18px 20px 16px;
  font-size:.8125rem;line-height:1.5;
  box-shadow:0 1px 0 var(--rl-paper-edge) inset,var(--sc-e3);
  transform-origin:top left;
  display:none;
}
@media (min-width:1180px){body.rl-home .rl-sheet{display:block}}
/* schermi bassi: piu' compatta, e se serve scorre dentro invece di uscire dallo schermo */
@media (max-height:860px){.rl-sheet{top:20px;right:20px;max-height:calc(100vh - 40px);padding:14px 16px 12px;font-size:.75rem;line-height:1.45}.rl-sheet h3{margin:10px 0 4px}.rl-sheet__foot{margin-top:10px;padding-top:10px}.rl-sheet__cta{min-height:40px}}
.rl-sheet{scrollbar-width:thin}
/* titolo su una riga, data sotto: niente a capo forzati in 17rem */
.rl-sheet__head{display:grid;gap:3px;border-bottom:1.5px solid var(--rl-paper-ink);padding-bottom:9px;margin-bottom:12px}
.rl-sheet__head h2{font-size:.9375rem;letter-spacing:.01em;white-space:nowrap}
.rl-sheet__head time{font:700 .6875rem var(--sc-font-display);color:var(--rl-paper-soft);letter-spacing:.04em}
.rl-sheet h3{font:800 .6875rem var(--sc-font-display);letter-spacing:.09em;text-transform:uppercase;color:var(--rl-paper-soft);margin:14px 0 6px}
.rl-sheet h3:first-of-type{margin-top:0}
.rl-sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rl-sheet li{display:grid;grid-template-columns:14px 1fr;gap:7px;align-items:start}
/* spunta al posto del pallino, centrata sulla prima riga */
.rl-sheet li::before{content:"";width:13px;height:13px;align-self:start;margin-top:calc((1lh - 13px) / 2);background:var(--rl-paper-mark);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l2.9 2.9 6.1-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l2.9 2.9 6.1-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.rl-sheet li.is-new{animation:rl-ink .5s var(--sc-ease-out)}
.rl-sheet .rl-sheet__empty{display:block;color:var(--rl-paper-soft);font-style:italic}
.rl-sheet .rl-sheet__empty::before{display:none}
.rl-sheet__foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rl-paper-line)}
/* pulsante pieno, stesso stile dell'invio del modulo */
.rl-sheet__cta{display:flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:10px 14px;border-radius:4px;
  background:var(--rl-paper-mark);color:var(--rl-paper-mark-ink);font:800 .875rem var(--sc-font-display);letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  transition:background-color .15s var(--sc-ease-out),transform .12s var(--sc-ease-out)}
.rl-sheet__cta:hover{background:var(--rl-paper-mark-deep)}
.rl-sheet__cta:active{transform:scale(.985)}
.rl-sheet__cta:focus-visible{outline:2.5px solid var(--rl-paper-mark);outline-offset:2px}
@keyframes rl-ink{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* pulsante "Contattami": telefono, tablet e pagine interne. Pillola color accento, l'azione principale della pagina */
.rl-tab{
  position:fixed;z-index:50;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  display:none;align-items:center;gap:10px;min-height:52px;box-sizing:border-box;
  background:var(--sc-accent);color:var(--sc-accent-ink);border:0;border-radius:999px;
  padding:12px 20px 12px 16px;font:800 .9375rem var(--sc-font-display);letter-spacing:.01em;text-decoration:none;
  box-shadow:0 14px 30px -12px hsl(var(--sc-shadow-color) / .75),0 0 0 1px color-mix(in srgb,var(--sc-accent-ink) 10%,transparent);
  transition:transform .2s var(--sc-ease-out),opacity .2s var(--sc-ease-out),box-shadow .2s var(--sc-ease-out);
}
.rl-tab svg{width:22px;height:22px;flex:none}
.rl-tab:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px hsl(var(--sc-shadow-color) / .8),0 0 0 1px color-mix(in srgb,var(--sc-accent-ink) 10%,transparent)}
.rl-tab:active{transform:scale(.97)}
.rl-tab:focus-visible{outline:3px solid var(--sc-ink);outline-offset:3px}
.rl-tab b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:var(--sc-accent-ink);color:var(--sc-accent);font-size:.75rem;font-variant-numeric:tabular-nums}
@media (min-width:600px){.rl-tab{right:24px;bottom:24px;min-height:56px;padding:14px 24px 14px 20px;font-size:1rem}}
.rl-tab[data-show]{display:inline-flex}
@media (min-width:1180px){body.rl-home .rl-tab{display:none!important}}
.rl-tab[data-hide]{opacity:0;transform:translateY(12px);pointer-events:none}
.rl-tab b[hidden]{display:none}
/* in fondo alla pagina la linguetta non copre il footer */
@media (max-width:1179px){.rl-colophon{padding-bottom:calc(clamp(2rem,5vh,3rem) + 88px)}}

/* ------------------------------------------------- frontespizio home -- */
.rl-title{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.rl-title__inner{position:relative;z-index:3;padding-block:clamp(5.5rem,14vh,9rem) clamp(3rem,9vh,6rem)}
.rl-mast{position:absolute;z-index:3;top:22px;right:var(--sc-gutter)}
@media (min-width:1180px){.rl-mast{display:none}}
.rl-mast img{width:112px;height:auto}
html[data-theme="light"] .rl-mast .on-dark,html:not([data-theme="light"]) .rl-mast .on-light{display:none}
.rl-h1{
  font-weight:900;font-size:clamp(2.6rem,1.4rem + 4.4vw,5.25rem);
  line-height:.98;letter-spacing:-.035em;max-width:17ch;
}
.rl-h1 em{font-style:normal;color:var(--sc-accent)}
.rl-sub{margin-top:clamp(20px,3vh,32px);max-width:44ch;color:var(--sc-ink-soft);font-size:var(--sc-t-lg);line-height:1.55}
.rl-run{margin-top:22px;font-size:var(--sc-t-base);color:var(--sc-ink-soft)}
.rl-run a{color:var(--sc-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--sc-accent);text-decoration-thickness:3px;text-underline-offset:.28em}
.rl-run a:hover{color:var(--sc-accent)}

/* piani del frontespizio: cartellino appeso (lontano), matassa (medio) */
.rl-plane{position:absolute;pointer-events:none}
.rl-plane--knot{inset:0;z-index:1;color:var(--sc-ink-soft)}
@media (min-width:1180px){.rl-plane--knot{left:var(--rl-rail)}}
.rl-plane--knot svg{position:absolute;left:0;top:4%;width:100%;height:70%;overflow:visible}
.rl-plane--knot path{stroke:currentColor;stroke-width:1.25;opacity:.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.rl-plane--knot path.is-lead{stroke:var(--sc-ink);stroke-width:1.75;opacity:.9}
.rl-plane--sign{z-index:2;pointer-events:auto;right:clamp(-4rem,-2vw,0rem);top:clamp(4rem,9vh,6.5rem)}
@media (min-width:1180px){.rl-plane--sign{right:calc(var(--rl-sheet) + 3rem)}}
.rl-sign{
  --tx:0px;--ty:0px;
  position:relative;width:clamp(17rem,26vw,22rem);
  background:var(--rl-field);color:var(--rl-field-ink);border-radius:6px;
  padding:14px;box-shadow:var(--sc-e3);
  translate:var(--tx) var(--ty);transition:translate .6s var(--sc-ease-out);
}
/* cartellino: foro in alto e filo che sale fino al bordo della pagina */
.rl-sign::before{content:"";position:absolute;z-index:1;left:50%;top:12px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--sc-canvas);box-shadow:inset 0 0 0 1.5px var(--rl-field-soft)}
.rl-sign::after{content:"";position:absolute;z-index:2;left:50%;bottom:calc(100% - 18px);width:1.5px;height:60vh;margin-left:-.75px;background:var(--sc-ink-soft)}
.rl-sign__in{padding:clamp(22px,2.6vw,30px) clamp(8px,1vw,12px) clamp(6px,1vw,10px)}
.rl-sign__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.rl-sign__head span{font:800 .75rem var(--sc-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--rl-field-soft)}
.rl-sign__arrow{width:44px;height:44px;flex:none}
.rl-sign ul{list-style:none;margin:0;padding:0}
.rl-sign li + li{border-top:1.5px solid color-mix(in srgb,var(--rl-field-ink) 35%,transparent)}
.rl-sign a{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 0;color:var(--rl-field-ink);text-decoration:none;
  font:800 clamp(1.05rem,.9rem + .55vw,1.4rem) var(--sc-font-display);letter-spacing:-.005em;line-height:1.15;
}
/* capo del filo: tratto con un nodo in fondo, si allunga al passaggio */
.rl-sign a i{position:relative;flex:none;width:18px;height:1.5px;background:var(--rl-field-accent);transition:width .18s var(--sc-ease-out)}
.rl-sign a i::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--rl-field-accent)}
@media (hover:hover) and (pointer:fine){.rl-sign a:hover i{width:28px}}
.rl-sign a:focus-visible{outline-color:var(--rl-field-accent)}

@media (max-width:860px){
  .rl-plane--sign{position:relative;right:auto;top:auto;margin:84px var(--sc-gutter) 0 auto;width:min(19rem,82vw)}
  .rl-sign{width:100%}
  .rl-title__inner{padding-top:28px}
  .rl-h1{font-size:clamp(2.35rem,9.6vw,3.4rem)}
  .rl-plane--knot svg{top:0;height:46%}
}

/* --------------------------------------------------- intertitoli -- */
.rl-inter{
  position:relative;background:var(--rl-field);color:var(--rl-field-ink);
  padding-block:clamp(3.5rem,11vh,7.5rem) clamp(2.5rem,7vh,4.5rem);
}
.rl-inter__wipe{position:absolute;inset:0;background:var(--rl-field)}
.rl-inter .rl-col{position:relative}
.rl-plate{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  font:800 .75rem var(--sc-font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--rl-field-soft);
}
.rl-plate b{
  display:inline-grid;place-items:center;min-width:2.1em;height:2.1em;padding:0 .35em;box-sizing:border-box;
  border:2px solid var(--rl-field-ink);border-radius:5px;color:var(--rl-field-ink);font-size:1rem;letter-spacing:0;
}
.rl-inter h2{font-weight:900;font-size:clamp(2.1rem,1.3rem + 3.6vw,4.6rem);line-height:1;letter-spacing:-.03em}
.rl-inter p{margin-top:18px;max-width:52ch;color:var(--rl-field-soft);font-size:var(--sc-t-lg);line-height:1.55}
.rl-inter a{color:var(--rl-field-ink)}

/* --------------------------------------------- capitolo I: aree -- */
.rl-spread{padding-block:clamp(3rem,8vh,5.5rem) clamp(4rem,10vh,7rem)}
.rl-ledger{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--sc-ink)}
.rl-area{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);column-gap:clamp(24px,4vw,56px);row-gap:14px;
  padding:clamp(22px,3.4vh,34px) 0;border-bottom:1px solid var(--sc-hairline-strong);
}
.rl-area__k{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.rl-area__n{font:800 .75rem var(--sc-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--sc-ink-soft)}
.rl-area h3{font-size:clamp(1.45rem,1.1rem + 1.2vw,2.1rem);line-height:1.05;letter-spacing:-.02em}
.rl-area p{color:var(--sc-ink-soft);max-width:60ch}
.rl-area ul{margin:12px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 22px;font-size:.9375rem}
.rl-area li{position:relative;padding-left:16px}
.rl-area li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--sc-accent)}
.rl-area__more{display:inline-block;margin-top:12px}
.rl-pick{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;
  background:transparent;color:var(--sc-ink);border:1.5px solid var(--sc-hairline-strong);
  border-radius:var(--rl-radius);padding:8px 14px 7px;cursor:pointer;
  font:800 .8125rem var(--sc-font-display);letter-spacing:.03em;
  transition:background-color .15s var(--sc-ease-out),border-color .15s var(--sc-ease-out),color .15s var(--sc-ease-out),transform .12s var(--sc-ease-out);
}
.rl-pick svg{width:16px;height:16px}
.rl-pick .rl-pick__on{display:none}
.rl-pick[aria-pressed="true"]{background:var(--sc-accent);color:var(--sc-accent-ink);border-color:var(--sc-accent)}
.rl-pick[aria-pressed="true"] .rl-pick__on{display:block}
.rl-pick[aria-pressed="true"] .rl-pick__off{display:none}
@media (hover:hover) and (pointer:fine){.rl-pick:hover{border-color:var(--sc-ink)}.rl-pick[aria-pressed="true"]:hover{border-color:var(--sc-accent)}}
.rl-pick:active{transform:scale(.97)}
@media (max-width:760px){
  .rl-area{grid-template-columns:1fr}
  .rl-area ul{grid-template-columns:1fr}
}

/* -------------------------------------------- capitolo II: metodo -- */
.rl-method{background:var(--rl-deep)}
.rl-method .sc-stage{display:flex;flex-direction:column;justify-content:center;background:var(--rl-deep)}
.rl-method__head{max-width:40rem}
.rl-method__head .rl-plate{color:var(--sc-ink-soft)}
.rl-method__head .rl-plate b{border-color:var(--sc-ink);color:var(--sc-ink)}
.rl-method h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.6rem);letter-spacing:-.025em;line-height:1.02}
.rl-method__head p{margin-top:14px;color:var(--sc-ink-soft);max-width:52ch}
.rl-method__count{margin-left:auto;padding-left:14px;font:800 .75rem var(--sc-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--sc-ink-soft);font-variant-numeric:tabular-nums}
.rl-method__count em{font-style:normal;color:var(--sc-accent)}
.rl-method.is-flow .rl-method__count{display:none}
/* il filo va dal primo all'ultimo nodo: estremi misurati in js (--rl-a, --rl-len) */
.rl-road{--rl-a:11px;--rl-len:75%;position:relative;margin-top:clamp(36px,7vh,64px);padding-top:30px}
.rl-road__line,.rl-road__fill{position:absolute;top:10px;left:var(--rl-a);width:var(--rl-len);height:2px;border-radius:1px}
.rl-road__line{background:var(--sc-hairline-strong)}
.rl-road__fill{background:var(--sc-accent);transform-origin:left;transform:scaleX(var(--rl-road,0))}
/* la punta: l'ago che tira il filo */
.rl-road__tip{position:absolute;top:7px;left:var(--rl-a);width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--sc-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sc-accent) 22%,transparent);
  transform:translateX(calc(var(--rl-road,0) * var(--rl-len)));opacity:calc(var(--rl-road,0) * 40)}
.rl-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
/* tre stati: next (da fare), current (in corso), done (fatta) */
.rl-stop{position:relative;opacity:.62;transform:translateY(8px);transition:opacity .4s var(--sc-ease-out),transform .5s var(--sc-ease-out)}
.rl-stop[data-state="current"]{opacity:1;transform:none}
.rl-stop[data-state="done"]{opacity:.62;transform:none}
.rl-stop::before,.rl-stop::after{content:"";position:absolute;top:-30px;left:0;width:22px;height:22px;box-sizing:border-box;border-radius:50%}
.rl-stop::before{
  z-index:1;background:var(--rl-deep);border:2px solid var(--sc-hairline-strong);transform:scale(.82);
  transition:transform .35s var(--sc-ease-out),border-color .3s var(--sc-ease-out),box-shadow .3s var(--sc-ease-out);
}
/* nodo: l'anello si stringe attorno a un pieno quando il filo ci passa */
.rl-stop[data-state="current"]::before{transform:none;border-color:var(--sc-accent);box-shadow:inset 0 0 0 4px var(--rl-deep),inset 0 0 0 11px var(--sc-accent)}
.rl-stop[data-state="done"]::before{transform:none;border-color:var(--sc-ink-soft);box-shadow:inset 0 0 0 4px var(--rl-deep),inset 0 0 0 11px var(--sc-ink-soft)}
/* alone che si chiude una volta sola, quando il nodo diventa quello in corso */
.rl-stop::after{border:2px solid var(--sc-accent);opacity:0;pointer-events:none}
.rl-stop[data-state="current"]::after{animation:rl-cinch .7s var(--sc-ease-out)}
@keyframes rl-cinch{from{opacity:.9;transform:scale(2.2)}to{opacity:0;transform:scale(1)}}
.rl-stop[data-state="current"] b{color:var(--sc-accent)}
.rl-stop b{display:block;font:800 .75rem var(--sc-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--sc-ink-soft);margin:6px 0 6px;transition:color .3s var(--sc-ease-out)}
.rl-stop h3{font-size:clamp(1.2rem,1rem + .7vw,1.6rem)}
.rl-stop p{margin-top:8px;color:var(--sc-ink-soft);font-size:.9375rem;line-height:1.6}
.rl-method__more{margin-top:clamp(26px,5vh,44px);color:var(--sc-ink-soft);font-size:.9375rem}
/* versione senza pin (telefono): stessi stati, guidati dalla posizione delle fasi */
.rl-method.is-flow{padding-block:clamp(3.5rem,9vh,6rem)}
@media (max-width:860px){
  .rl-road{padding-top:0;padding-left:34px}
  .rl-road__line,.rl-road__fill{top:var(--rl-a);left:10px;width:2px;height:var(--rl-len)}
  .rl-road__fill{transform-origin:top;transform:scaleY(var(--rl-road,0))}
  .rl-road__tip{top:var(--rl-a);left:11px;transform:translateY(calc(var(--rl-road,0) * var(--rl-len) - 4px))}
  .rl-stops{grid-template-columns:1fr;gap:26px}
  .rl-stop::before,.rl-stop::after{top:2px;left:-34px}
}

/* ------------------------------------- capitolo III: indipendenza -- */
.rl-claim{background:var(--rl-field);color:var(--rl-field-ink);padding-block:clamp(4rem,12vh,8rem) clamp(3rem,8vh,5rem)}
.rl-claim h2{font-weight:900;font-size:clamp(2.3rem,1.2rem + 4.6vw,5.6rem);line-height:.98;letter-spacing:-.035em;max-width:14ch}
.rl-claim__body{margin-top:clamp(26px,5vh,44px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.rl-claim__body p{color:var(--rl-field-soft);font-size:var(--sc-t-lg);line-height:1.6;max-width:56ch}
.rl-claim__sig{font:800 .8125rem var(--sc-font-display);letter-spacing:.04em;color:var(--rl-field-ink);display:grid;gap:8px;border-left:1px solid color-mix(in srgb,var(--rl-field-ink) 40%,transparent);padding-left:clamp(16px,2vw,28px)}
.rl-claim__sig a{color:var(--rl-field-accent);text-underline-offset:.22em}
@media (max-width:760px){.rl-claim__body{grid-template-columns:1fr}.rl-claim__sig{border-left:0;padding-left:0}}

.rl-vows{padding-block:clamp(3rem,8vh,5rem) clamp(3.5rem,9vh,6rem)}
.rl-vows__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--sc-ink)}
.rl-vow{padding:22px clamp(14px,1.6vw,22px) 0 0}
.rl-vow + .rl-vow{padding-left:clamp(14px,1.6vw,22px);border-left:1px solid var(--sc-hairline)}
.rl-vow .rl-vow__n{font:900 clamp(2.6rem,1.6rem + 3vw,4.6rem) var(--sc-font-display);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--sc-ink)}
.rl-vow__n small{font-size:.42em;letter-spacing:0;margin-left:.06em;color:var(--sc-accent)}
.rl-vow p:not(.rl-vow__n){margin-top:10px;color:var(--sc-ink-soft);font-size:.9375rem;line-height:1.5;max-width:24ch}
.rl-vows__note{margin-top:22px;font-size:.8125rem;color:var(--sc-ink-soft);max-width:60ch}
.rl-values{margin-top:clamp(40px,7vh,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px clamp(24px,4vw,56px)}
.rl-values h3{font-size:1.25rem}
.rl-values p{margin-top:6px;color:var(--sc-ink-soft);font-size:.9375rem;max-width:52ch}
@media (max-width:860px){
  .rl-vows__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .rl-vow:nth-child(3){padding-left:0;border-left:0;grid-column:1/-1}
  .rl-values{grid-template-columns:1fr}
}

/* -------------------------------------------- capitolo IV: domande -- */
.rl-faq{padding-block:clamp(3.5rem,9vh,6rem)}
.rl-faq h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);letter-spacing:-.02em}
.rl-faq dl{margin:clamp(26px,5vh,40px) 0 0;border-top:1.5px solid var(--sc-ink)}
.rl-faq__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px clamp(24px,4vw,56px);padding:20px 0;border-bottom:1px solid var(--sc-hairline)}
.rl-faq dt{font:800 1.0625rem/1.3 var(--sc-font-display);letter-spacing:-.005em}
.rl-faq dd{margin:0;color:var(--sc-ink-soft);font-size:.9375rem;line-height:1.65}
.rl-faq dd + dd{margin-top:8px;font-size:.8125rem}
@media (max-width:760px){.rl-faq__row{grid-template-columns:1fr}}

/* ---------------------------------------------- silenzio prima del picco -- */
.rl-hush{background:var(--rl-field);color:var(--rl-field-ink);min-height:72vh;display:flex;align-items:flex-end}
.rl-hush .rl-col{padding-bottom:clamp(3rem,10vh,6rem)}
.rl-hush p{margin-left:auto;max-width:15ch;text-align:right;font:900 clamp(2.2rem,1.3rem + 3.8vw,4.8rem)/1 var(--sc-font-display);letter-spacing:-.035em}
.rl-hush p span{color:var(--rl-field-accent)}

/* ------------------------------------------- capitolo V: contatti (picco) -- */
.rl-contact .sc-stage{display:flex;align-items:center}
.rl-contact__grid{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:center}
.rl-contact .rl-slot{max-width:44rem;width:100%;justify-self:end}
.rl-contact h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.4rem);letter-spacing:-.025em;line-height:1.02}
.rl-contact__lead{margin-top:14px;color:var(--sc-ink-soft);max-width:44ch}
.rl-contact dl{margin:24px 0 0;display:grid;gap:10px;font-size:.9375rem}
.rl-contact dl div{display:grid;grid-template-columns:6.5rem 1fr;gap:12px;align-items:baseline}
.rl-contact dt{font:800 .75rem var(--sc-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--sc-ink-soft)}
.rl-contact dd{margin:0}
.rl-contact dd a{color:var(--sc-ink);font-weight:600;text-decoration-color:var(--sc-accent);text-decoration-thickness:2px;text-underline-offset:.22em}
/* lo slot del modulo: la bozza ci atterra dentro */
.rl-slot{position:relative}
.rl-form{
  position:relative;background:var(--rl-paper);color:var(--rl-paper-ink);border-radius:4px;
  padding:clamp(22px,3vw,44px);box-shadow:var(--sc-e3);
  opacity:var(--rl-form-o,1);
}
.rl-form__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1.5px solid var(--rl-paper-ink);padding-bottom:14px;margin-bottom:26px}
.rl-form__head h3{font-size:clamp(1.125rem,1rem + .5vw,1.4rem);line-height:1.2}
.rl-form__head span{font:700 .75rem var(--sc-font-display);color:var(--rl-paper-soft);letter-spacing:.04em;white-space:nowrap}
.rl-form fieldset{border:0;margin:0 0 22px;padding:0}
.rl-form legend,.rl-form label.rl-l{display:block;font:800 .6875rem var(--sc-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--rl-paper-soft);margin-bottom:8px}
.rl-chips{display:flex;flex-wrap:wrap;gap:8px}
.rl-chips label{position:relative}
.rl-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rl-chips span{
  display:inline-flex;align-items:center;min-height:42px;box-sizing:border-box;padding:8px 14px;border-radius:4px;
  border:1.5px solid var(--rl-paper-line);font:700 .8125rem var(--sc-font-display);color:var(--rl-paper-ink);
  transition:background-color .15s var(--sc-ease-out),border-color .15s var(--sc-ease-out),color .15s var(--sc-ease-out);
}
.rl-chips input:checked + span{background:var(--rl-paper-mark);border-color:var(--rl-paper-mark);color:var(--rl-paper-mark-ink)}
.rl-chips input:focus-visible + span{outline:2.5px solid var(--rl-paper-mark);outline-offset:2px}
.rl-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px}
.rl-field{display:flex;flex-direction:column}
.rl-field--wide{grid-column:1 / -1}
.rl-form input[type="text"],.rl-form input[type="email"],.rl-form input[type="tel"],.rl-form textarea{
  font:400 .9375rem/1.4 var(--sc-font-text);color:var(--rl-paper-ink);background:var(--rl-input);
  border:1.5px solid var(--rl-paper-line);border-radius:4px;padding:12px 14px;min-height:50px;box-sizing:border-box;width:100%;
  transition:border-color .15s var(--sc-ease-out);
}
.rl-form textarea{min-height:140px;resize:vertical}
.rl-form input:focus-visible,.rl-form textarea:focus-visible{outline:2.5px solid var(--rl-paper-mark);outline-offset:1px;border-color:var(--rl-paper-mark)}
.rl-form [aria-invalid="true"]{border-color:var(--rl-warn)}
.rl-err{min-height:0;color:var(--rl-warn);font-size:.75rem;font-weight:600;margin-top:4px}
.rl-err:empty{display:none}
.rl-privacy{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:.8125rem;color:var(--rl-paper-soft);line-height:1.45}
.rl-privacy input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--rl-paper-mark);flex:none}
.rl-privacy a{color:var(--rl-paper-mark)}
.rl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rl-send{
  margin-top:22px;width:100%;min-height:54px;border:0;border-radius:4px;cursor:pointer;
  background:var(--rl-paper-mark);color:var(--rl-paper-mark-ink);font:800 .9375rem var(--sc-font-display);letter-spacing:.02em;
  transition:background-color .15s var(--sc-ease-out),transform .12s var(--sc-ease-out);
}
.rl-send:hover{background:var(--rl-paper-mark-deep)}
.rl-send:active{transform:scale(.985)}
.rl-send:disabled{opacity:.6;cursor:progress}
.rl-status{margin-top:10px;font-size:.875rem;font-weight:600;color:var(--rl-paper-ink)}
.rl-status:empty{display:none}
.rl-status[data-warn]{color:var(--rl-warn)}
.rl-note{margin-top:14px;font-size:.8125rem;color:var(--rl-paper-soft)}
.rl-note a{color:var(--rl-paper-mark)}
.rl-prefill{background:var(--rl-prefill);transition:background-color 1.2s var(--sc-ease-out)}
@media (max-width:1100px){.rl-contact__grid{grid-template-columns:1fr}}
/* schermi bassi con il modulo affiancato: stessa aria in proporzione, ma deve stare tutto nello schermo */
@media (min-width:1101px) and (max-height:880px){.rl-form{padding:clamp(20px,2.4vw,30px)}.rl-form__head{margin-bottom:16px;padding-bottom:10px}.rl-form fieldset{margin-bottom:14px}.rl-fields{gap:12px 16px}.rl-form input[type="text"],.rl-form input[type="email"],.rl-form input[type="tel"],.rl-form textarea{min-height:44px;padding:10px 12px}.rl-form textarea{min-height:96px}.rl-chips span{min-height:38px;padding:6px 12px}.rl-send{margin-top:14px;min-height:48px}}
@media (max-width:560px){.rl-fields{grid-template-columns:1fr}}
.rl-contact.is-flow{padding-block:clamp(3.5rem,9vh,6rem)}

/* ---------------------------------------------------------- colophon -- */
.rl-colophon{background:var(--sc-surface);padding-block:clamp(3rem,8vh,5rem) clamp(2rem,5vh,3rem);font-size:.8125rem;color:var(--sc-ink-soft)}
.rl-colophon__run{font-size:var(--sc-t-base);color:var(--sc-ink);max-width:60ch;line-height:1.6}
.rl-colophon__run a{color:var(--sc-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--sc-accent);text-decoration-thickness:2px;text-underline-offset:.24em}
.rl-colophon__cols{margin-top:clamp(28px,5vh,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:22px 28px;border-top:1px solid var(--sc-hairline-strong);padding-top:22px}
.rl-colophon h2{font:800 .6875rem var(--sc-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--sc-ink);margin-bottom:10px}
.rl-colophon nav a,.rl-colophon address a{display:block;color:var(--sc-ink-soft);text-decoration:none;padding:3px 0}
.rl-colophon nav a:hover,.rl-colophon address a:hover{color:var(--sc-ink)}
.rl-colophon address{font-style:normal;line-height:1.7}
.rl-colophon__bot{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:center}
.rl-colophon__bot a{color:var(--sc-ink-soft)}
/* privacy, cookie e tema: separati dallo spazio, senza puntini */
.rl-colophon__links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
@media (max-width:860px){.rl-colophon__cols{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------- pagine interne -- */
.rl-ptitle{position:relative;overflow:hidden;min-height:min(86vh,52rem);display:flex;align-items:flex-end}
.rl-ptitle .rl-title__inner{padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.rl-crumb{display:flex;gap:8px;list-style:none;margin:0 0 22px;padding:0;font:700 .75rem var(--sc-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--sc-ink-soft)}
.rl-crumb a{color:var(--sc-ink-soft);text-decoration:none}
.rl-crumb a:hover{color:var(--sc-ink)}
.rl-crumb li + li::before{content:"/";margin-right:8px;opacity:.6}
.rl-ptitle h1{font-weight:900;font-size:clamp(2.3rem,1.3rem + 4vw,5rem);line-height:1;letter-spacing:-.035em;max-width:16ch}
.rl-ptitle .rl-sub{max-width:52ch}
.rl-meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px 18px;font:700 .75rem var(--sc-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--sc-ink-soft)}
.rl-meta span{display:inline-flex;align-items:center;gap:8px}
.rl-meta span::before{content:"";width:6px;height:6px;background:var(--sc-accent);border-radius:1px}
body.rl-inner .rl-plane--sign{right:clamp(1rem,4vw,4rem);top:clamp(4.5rem,13vh,8rem)}
body.rl-inner .rl-sign{width:clamp(16rem,26vw,22rem)}
body.rl-inner .rl-sign a{font-size:clamp(.95rem,.85rem + .35vw,1.125rem);padding:8px 0}
@media (min-width:1180px){body.rl-inner .rl-plane--sign{right:4rem}body.rl-inner .rl-has-sign .rl-title__inner{padding-right:calc(clamp(16rem,26vw,22rem) + 7rem)}}
@media (max-width:1180px){body.rl-inner .rl-plane--sign{display:none}}

.rl-chapter{padding-block:0 clamp(3.5rem,9vh,6rem)}
.rl-chapter__head{background:var(--rl-field);color:var(--rl-field-ink);padding-block:clamp(2.6rem,8vh,4.6rem) clamp(1.8rem,5vh,3rem);margin-bottom:clamp(2rem,5vh,3.2rem);position:relative}
.rl-chapter__head h2{font-weight:900;font-size:clamp(1.8rem,1.2rem + 2.4vw,3.3rem);line-height:1.02;letter-spacing:-.03em}
.rl-chapter__head .rl-plate{margin-bottom:14px}
.rl-chapter:nth-of-type(even) .rl-chapter__head{background:var(--sc-surface);color:var(--sc-ink)}
.rl-chapter:nth-of-type(even) .rl-plate{color:var(--sc-ink-soft)}
.rl-chapter:nth-of-type(even) .rl-plate b{border-color:var(--sc-ink);color:var(--sc-ink)}
.rl-intro{padding-block:clamp(2.5rem,6vh,4rem) clamp(3rem,7vh,4.5rem)}

.rl-prose{max-width:68ch;font-size:var(--sc-t-base);line-height:1.72}
/* link con freccia ripresi dalle pagine del sito: freccia in linea col testo, non a tutta larghezza */
.rl-prose .route-more{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.rl-prose .route-more svg{display:inline-block;width:1em;height:1em;flex:none;transition:transform .15s var(--sc-ease-out)}
.rl-prose .route-more:hover svg{transform:translateX(3px)}
.rl-prose > * + *{margin-top:1.05em}
.rl-prose h3{font-size:1.3rem;margin-top:1.8em;letter-spacing:-.01em}
.rl-prose .lead,.rl-prose p.lead{font-size:var(--sc-t-lg);color:var(--sc-ink);line-height:1.6}
.rl-prose p,.rl-prose li{color:var(--sc-ink-soft)}
.rl-prose strong{color:var(--sc-ink);font-weight:600}
.rl-prose ul,.rl-prose ol{padding-left:1.2em}
.rl-prose li + li{margin-top:.45em}
.rl-prose ul li::marker{color:var(--sc-accent)}
.rl-prose ol li::marker{color:var(--sc-accent);font-weight:700;font-family:var(--sc-font-display)}
.rl-prose table{width:100%;border-collapse:collapse;font-size:.875rem;margin-top:1.4em}
.rl-prose th,.rl-prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--sc-hairline-strong);vertical-align:top}
.rl-prose th{font:800 .75rem var(--sc-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--sc-ink)}
.rl-prose td{color:var(--sc-ink-soft)}
.rl-tablewrap{overflow-x:auto}
.rl-prose .panel{border-top:1.5px solid var(--sc-ink);border-bottom:1px solid var(--sc-hairline-strong);padding:18px 0;margin-top:1.6em}
.rl-prose .panel-label{display:block;font:800 .6875rem var(--sc-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--sc-ink);margin-bottom:8px}
.rl-prose .panel ul{list-style:none;padding:0}
.rl-prose blockquote{margin:1.6em 0;padding:0 0 0 18px;border-left:1px solid var(--sc-accent);color:var(--sc-ink)}
.rl-prose hr{border:0;border-top:1px solid var(--sc-hairline-strong);margin:2em 0}
.rl-prose .faq-src,.rl-prose small{font-size:.8125rem}
.rl-prose details{border-bottom:1px solid var(--sc-hairline);padding:12px 0}
.rl-prose summary{cursor:pointer;font:800 1rem var(--sc-font-display);color:var(--sc-ink)}

/* ------------------------------------- home: caos -> rubailab -> soluzioni -- */
.rl-title{flex-direction:column;align-items:stretch;justify-content:space-between}
.rl-title .rl-title__inner{padding-top:clamp(1.5rem,4vh,3rem)}
.rl-flux{
  position:relative;z-index:3;padding-top:clamp(4.5rem,11vh,7rem);
  display:grid;grid-template-columns:minmax(0,1.4fr) clamp(14.5rem,18vw,16.5rem) minmax(16rem,1fr);column-gap:clamp(18px,2.2vw,36px);align-items:center;align-items:stretch;
}
.rl-flux__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rl-flux__wires path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.rl-flux__wires .w-mess{stroke:var(--sc-ink-soft);stroke-width:1;opacity:.2}
.rl-flux__wires .w-warn{stroke:var(--rl-warn);stroke-width:1;opacity:.4;stroke-dasharray:2 6}
.rl-flux__wires .w-pull{stroke:var(--sc-accent);stroke-width:1.75}
/* nastro trasportatore dei problemi: tratteggio che scorre verso la macchina, acceso mentre trasporta */
/* connettore d'ingresso: canale cavo (bordo chiaro, interno scuro) con flangia color accento sul muro; si accende quando un problema ci passa */
.rl-flux__wires .w-chan{stroke:var(--sc-ink-soft);stroke-width:13;stroke-linecap:butt;opacity:.55;transition:stroke .25s var(--sc-ease-out),opacity .25s var(--sc-ease-out)}
.rl-flux__wires .w-chan.is-hot{stroke:var(--sc-accent);opacity:1}
.rl-flux__wires .w-chan-in{stroke:var(--sc-canvas);stroke-width:9;stroke-linecap:butt}
.rl-flux__wires .w-flange{stroke:var(--sc-accent);stroke-width:4;stroke-linecap:round}
.rl-flux__wires .w-out{stroke:var(--sc-accent);stroke-width:2;stroke-opacity:.45;transition:stroke-opacity .3s var(--sc-ease-out)}
.rl-flux__wires .w-out.is-hot{stroke-opacity:1}
@keyframes rl-flow{to{stroke-dashoffset:-16}}
.rl-flux__wires circle{fill:var(--sc-accent)}
.rl-flux__in,.rl-flux__hub,.rl-flux__out{position:relative}
/* legende del diagramma: stesso corpo, una per colonna */
.rl-flux__h{margin:0 0 14px;font:800 .6875rem var(--sc-font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--sc-ink-soft)}
.rl-flux__field{list-style:none;margin:0;padding:0;position:relative;height:clamp(13.5rem,30vh,17rem)}
/* l'azienda stilizzata: un edificio d'ufficio disegnato in SVG su misura del campo
   (js/rl.js, "facciata"): insegna, cornicione, piani, finestre, ingresso, terra. */
.rl-office{position:absolute;pointer-events:none;overflow:visible;max-width:none} /* sporge di 30px per lato: non va rimpicciolito */
.rl-office .of-wall{fill:color-mix(in srgb,var(--sc-surface) 55%,transparent);stroke:var(--sc-hairline-strong);stroke-width:1.5}
.rl-office .of-roof{fill:var(--sc-canvas);stroke:var(--sc-hairline-strong);stroke-width:1.5}
.rl-office .of-floor{stroke:var(--sc-hairline);stroke-width:1}
.rl-office .of-win{fill:color-mix(in srgb,var(--sc-ink) 3%,transparent);stroke:var(--sc-hairline-strong);stroke-width:1}
.rl-office .of-lit{fill:color-mix(in srgb,var(--rl-warn) 16%,transparent);stroke:color-mix(in srgb,var(--rl-warn) 45%,transparent)}
.rl-office .of-mull{stroke:var(--sc-hairline);stroke-width:1}
.rl-office .of-door{fill:color-mix(in srgb,var(--sc-ink) 5%,transparent);stroke:var(--sc-hairline-strong);stroke-width:1.5}
.rl-office .of-line{fill:none;stroke:var(--sc-hairline-strong);stroke-width:1.5;stroke-linecap:round}
.rl-office .of-ground{stroke:var(--sc-ink-soft);stroke-width:1.5;opacity:.5}
.rl-flux__in{padding-top:44px}
/* l'azienda un po' staccata dal margine sinistro, piu' vicina alla macchina */
@media (min-width:861px){.rl-flux__in{padding-left:clamp(28px,3.4vw,56px);padding-right:clamp(70px,6vw,110px)}} /* a destra: spazio per cornicione e terra, che sporgono di 30px, prima della macchina */
.rl-flux__in .rl-flux__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* problema: cartellino tinto d'allarme, ombra corta e morbida */
.rl-flux__chip{
  --warn-bg:color-mix(in srgb,var(--rl-warn) 9%,var(--sc-canvas));
  position:absolute;left:0;top:0;display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:7px 12px 6px 10px;border-radius:4px;background:var(--warn-bg);
  border:1px solid color-mix(in srgb,var(--rl-warn) 32%,var(--sc-hairline-strong));
  box-shadow:0 6px 16px -10px hsl(var(--sc-shadow-color) / .7);
  font:700 .78rem var(--sc-font-display);letter-spacing:.005em;color:var(--sc-ink);will-change:transform;
  opacity:0; /* li mostra js quando sono al loro posto */
  transition:border-color .25s var(--sc-ease-out),background-color .25s var(--sc-ease-out);
}
/* segnale d'allarme disegnato: triangolo pieno con punto esclamativo */
.rl-flux__chip i{width:12px;height:11px;flex:none;background:var(--rl-warn);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M6 .5 11.6 10.5H.4z' fill='%23fff'/%3E%3Crect x='5.3' y='3.6' width='1.4' height='3.6' rx='.5' fill='%23000'/%3E%3Ccircle cx='6' cy='8.6' r='.8' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M6 .5 11.6 10.5H.4z' fill='%23fff'/%3E%3Crect x='5.3' y='3.6' width='1.4' height='3.6' rx='.5' fill='%23000'/%3E%3Ccircle cx='6' cy='8.6' r='.8' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask-mode:luminance;mask-mode:luminance}
.rl-flux__chip.is-pulled{border-color:var(--sc-accent);background:color-mix(in srgb,var(--sc-accent) 10%,var(--sc-canvas))}
.rl-flux__chip.is-pulled i{background:var(--sc-accent)}
/* motore: la macchina rubailab. Barra con stato, display ingresso/uscita con barra di
   lavoro, quattro aree come moduli. Porte di ingresso e uscita sui fianchi. */
.rl-engine{position:relative;align-self:center;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;
  background-color:var(--sc-surface);
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--sc-ink) 9%,transparent) 1px,transparent 1.3px);background-size:12px 12px;
  border:1px solid var(--sc-hairline-strong);box-shadow:0 18px 40px -24px hsl(var(--sc-shadow-color) / .8);
  transition:border-color .4s var(--sc-ease-out)}
.rl-engine:not([data-state="idle"]){border-color:color-mix(in srgb,var(--sc-accent) 55%,var(--sc-hairline-strong))}
.rl-engine::before,.rl-engine::after{content:"";position:absolute;top:50%;width:6px;height:28px;margin-top:-14px;border-radius:3px;
  background:var(--sc-canvas);border:1px solid var(--sc-hairline-strong);transition:background-color .3s var(--sc-ease-out),border-color .3s var(--sc-ease-out)}
.rl-engine::before{left:-4px}
/* fessura d'ingresso: piu' grande della porta d'uscita, color accento come la flangia; si illumina quando ci entra un problema e fa uno scatto */
.rl-engine::before{width:8px;height:40px;margin-top:-20px;left:-5px;border-radius:4px;background:var(--sc-accent);border:1.5px solid var(--sc-accent)}
.rl-engine.is-slot::before{border-color:var(--sc-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc-accent) 22%,transparent)}
.rl-engine.is-eat::before{animation:rl-clack .35s cubic-bezier(.16,1,.3,1)}
@keyframes rl-clack{0%{transform:scaleY(1)}40%{transform:scaleY(.82)}100%{transform:scaleY(1)}}
.rl-engine::after{right:-4px}
.rl-engine[data-state="out"]::after{background:var(--sc-accent);border-color:var(--sc-accent)}
.rl-engine__bar{display:flex;align-items:center;justify-content:center;padding:2px 2px 0;position:relative}
/* spinner sul bordo destro, alla stessa altezza del logo, mentre la macchina elabora */
.rl-engine__bar::after{content:"";position:absolute;top:50%;right:2px;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  border:2px solid var(--sc-hairline-strong);border-top-color:var(--sc-accent);opacity:0;transition:opacity .2s var(--sc-ease-out);animation:rl-spin .8s linear infinite}
.rl-engine[data-state="work"] .rl-engine__bar::after{opacity:1}
@keyframes rl-spin{to{transform:rotate(360deg)}}
.rl-flux__mark{display:block;width:18px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.rl-flux__mark img{display:block;width:100%;height:auto}
html[data-theme="light"] .rl-flux__mark .on-dark,html:not([data-theme="light"]) .rl-flux__mark .on-light{display:none}
.rl-engine.is-eat .rl-flux__mark{transform:scale(1.15)}
@keyframes rl-led{to{opacity:.35}}
.rl-engine__pillars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
/* pilastro: riga con icona ed etichetta; si accende e si "riempie" mentre lavora */
.rl-pillar{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:38px;box-sizing:border-box;
  padding:8px 11px;border-radius:6px;border:1px solid var(--sc-hairline-strong);background:var(--sc-canvas);color:var(--sc-ink-soft);text-decoration:none;
  transition:border-color .3s var(--sc-ease-out),color .3s var(--sc-ease-out);
}
.rl-pillar::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--sc-accent) 16%,transparent);transform:scaleX(0);transform-origin:left}
/* icona dell'area a tratto: fa anche da spia, si colora d'accento quando l'area lavora */
.rl-pillar__ico{position:relative;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:color .3s var(--sc-ease-out)}
.rl-pillar__label{position:relative;display:grid;gap:3px;font:800 .72rem/1.2 var(--sc-font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* parole chiave tecniche di ogni area: piccole, sotto il nome */
.rl-pillar__tags{font:700 .6875rem/1.2 var(--sc-font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--sc-ink-soft);opacity:.85}
.rl-pillar.is-on .rl-pillar__tags{opacity:1}
.rl-pillar.is-on,.rl-pillar:hover,.rl-pillar:focus-visible{border-color:var(--sc-accent);color:var(--sc-ink)}
.rl-pillar.is-on .rl-pillar__ico{color:var(--sc-accent)}
.rl-pillar.is-run::before{animation:rl-fill .6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rl-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rl-pillar:focus-visible{outline-offset:2px}
/* uscita: le soluzioni appena prodotte, l'ultima in alto */
.rl-flux__feed{list-style:none;margin:0;padding:0;display:grid;gap:6px}
/* soluzioni piu' compatte e staccate dalla macchina: il filo d'uscita ha spazio per farsi vedere */
@media (min-width:861px){.rl-flux__out{padding-left:clamp(36px,3.6vw,64px)}.rl-flux__feed{max-width:15rem}}
/* schermi medi (con indice e bozza ai lati): tre colonne non ci stanno.
   Le soluzioni scendono sotto la macchina e il filo d'uscita esce dal basso. */
@media (min-width:861px) and (max-width:1499px){
  .rl-flux{grid-template-columns:minmax(0,1fr) clamp(14.5rem,20vw,16.5rem);row-gap:56px}
  .rl-flux__out{grid-column:2;grid-row:2;padding-left:0}
  .rl-flux__feed{max-width:none}
  .rl-flux__in{grid-row:1}
  .rl-engine::after{top:auto;bottom:-4px;right:auto;left:50%;width:28px;height:6px;margin:0 0 0 -14px}
}
.rl-feed__item{display:flex;align-items:flex-start;gap:10px;padding:8px 11px;border-radius:8px;background:var(--sc-surface);border:1px solid var(--sc-hairline-strong);
  box-shadow:0 10px 24px -18px hsl(var(--sc-shadow-color) / .8)}
.rl-feed__item:nth-child(n+2){opacity:.62}
.rl-feed__item:nth-child(n+3){opacity:.4}
.rl-feed__item span{display:grid;gap:4px;min-width:0}
.rl-feed__item small{font:700 .6875rem var(--sc-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--sc-ink-soft)}
.rl-feed__item b{font:800 .8125rem/1.25 var(--sc-font-display);letter-spacing:-.005em;text-wrap:balance;color:var(--sc-ink)}
.rl-feed__item i{position:relative;width:15px;height:15px;flex:none;border-radius:50%;background:var(--sc-accent);margin-top:0}
/* spunta come maschera svg: centrata nel cerchio senza aggiustamenti a occhio */
.rl-feed__item i::after{content:"";position:absolute;inset:0;background:var(--sc-accent-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.rl-feed__item.is-new{border-color:var(--sc-accent);animation:rl-feed .55s cubic-bezier(.16,1,.3,1)}
.rl-feed__item.is-new i{animation:rl-pop .5s cubic-bezier(.16,1,.3,1)}
@keyframes rl-feed{from{opacity:0;transform:translateY(-10px);max-height:0;padding-block:0}to{max-height:6rem}}
@keyframes rl-pop{0%{scale:.4}60%{scale:1.2}100%{scale:1}}
.rl-feed__item{transition:opacity .4s var(--sc-ease-out),border-color .8s var(--sc-ease-out)}
@media (max-width:860px){
  .rl-flux{grid-template-columns:1fr;row-gap:clamp(48px,11vw,80px);padding-top:5.25rem} /* spazio per vedere i fili tra azienda, macchina e soluzioni */
  .rl-pillar{min-height:44px}
  /* su telefono il flusso e' verticale: porta d'ingresso in alto, d'uscita in basso */
  .rl-engine::before,.rl-engine::after{top:auto;left:50%;right:auto;width:28px;height:6px;margin:0 0 0 -14px}
  .rl-engine::before{top:-5px;width:40px;height:8px;margin-left:-20px}
  .rl-engine.is-eat::before{animation-name:rl-clack-h}
  @keyframes rl-clack-h{0%{transform:scaleX(1)}40%{transform:scaleX(.82)}100%{transform:scaleX(1)}}
  .rl-engine::after{bottom:-4px}
  .rl-flux__field{height:15rem}
  .rl-flux__chip{font-size:.75rem}
  /* su telefono i pilastri diventano tessere 2x2 */
  .rl-engine__pillars{grid-template-columns:1fr 1fr}
  /* sul telefono icona sopra l'etichetta, tutto centrato */
  .rl-pillar{padding:10px 8px;flex-direction:column;justify-content:center;gap:6px;text-align:center}
  .rl-pillar__label{font-size:.6875rem;justify-items:center}
}
@media (prefers-reduced-motion:reduce){.rl-feed__item,.rl-feed__item i,.rl-pillar::before{animation:none}.rl-engine.is-eat::before{animation:none}}

/* ------------------------------------------- suggerimento di scroll -- */
/* compare solo dove lo scroll non e' ovvio: in cima alla pagina e dentro gli atti fissati */
.rl-hint{
  position:fixed;z-index:44;left:50%;bottom:22px;margin:0;translate:-50% 12px;opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;padding:8px 14px 7px;border-radius:999px;
  background:var(--sc-surface);border:1px solid var(--sc-hairline-strong);box-shadow:var(--sc-e2);
  font:700 .75rem var(--sc-font-display);letter-spacing:.04em;color:var(--sc-ink);white-space:nowrap;
  transition:opacity .3s var(--sc-ease-out),translate .3s var(--sc-ease-out);
}
.rl-hint.is-on{opacity:1;translate:-50% 0}
/* solo icona: il testo resta nel markup ma non si mostra */
.rl-hint{padding:9px 12px}
.rl-hint span{display:none}
/* mouse con rotellina dove c'e' un puntatore, doppia freccia sui touch */
.rl-hint svg{width:14px;height:21px;flex:none;color:var(--sc-accent)}
.rl-hint__wheel{animation:rl-wheel 1.6s var(--sc-ease-out) infinite}
@keyframes rl-wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(6px);opacity:0}100%{transform:translateY(0);opacity:0}}
.rl-hint__swipe{animation:rl-bob 1.4s var(--sc-ease-out) infinite}
@keyframes rl-bob{0%,100%{translate:0 0}50%{translate:0 3px}}
.rl-hint__swipe{display:none}
@media (pointer:coarse){.rl-hint__mouse{display:none}.rl-hint__swipe{display:block}}
@media (max-width:860px){.rl-hint{left:16px;bottom:16px;translate:0 12px}.rl-hint.is-on{translate:0 0}}

/* --------------------------------------------------- movimento ridotto -- */
@media (prefers-reduced-motion:reduce){
  .rl-sign{transition:none;translate:none}
  .rl-sheet li.is-new{animation:none}
  .rl-stop,.rl-stop::before{transition:none}
  .rl-hint__wheel,.rl-hint__swipe{animation:none}
  .rl-stop[data-state="current"]::after{animation:none}
  .rl-drawer__panel,.rl-drawer__scrim{transition:none}
}
@media print{.rl-folio,.rl-chip,.rl-sheet,.rl-tab,.rl-plane{display:none!important}}