/* ConFido — sistema visivo condiviso
   Registro: editoriale caldo, mediterraneo, dignità. Anti AI-slop. */
@import url('./assets/fonts/fonts.css'); /* font in casa: niente Google Fonts */
/* Phosphor Icons (MIT) — icone di sistema a linea, stile rotondo caldo. Ereditate da tutte le schermate.
   SELF-HOSTED (2026-07-20): i font sono nel repo (assets/phosphor/), non più da CDN unpkg.
   Motivo: con il CDN + font-display:block, se i woff2 non arrivavano in un reload le icone
   restavano quadratini (tofu) mentre il testo — da Google Fonts con display:swap — restava leggibile. */
@import url('./assets/phosphor/regular/style.css');
@import url('./assets/phosphor/bold/style.css');
@import url('./assets/phosphor/fill/style.css');

:root{
  /* === PRIMITIVE (palette base, da non usare direttamente nei componenti) === */
  --paper:#EEF0F4;
  --paper-2:#E1E5EE;
  --ink:#14203A;
  --ink-soft:#44506A;
  --ink-faint:#5E6880;
  --terra:#2E5BFF;
  --terra-deep:#1E3FCC;
  --sage:#2FB6A3;
  --sage-soft:#5FC9BA;
  --ochre:#FFC631;
  --oro:#E8B84B;        /* l'oro della guida del valore (moodboard 8/9) */
  --magenta:#E0457B;
  --line:rgba(20,32,58,.12);
  --card:#FBFCFE;
  --shadow:0 1px 2px rgba(20,32,58,.04), 0 12px 32px -16px rgba(20,32,58,.28);
  --shadow-soft:0 1px 2px rgba(20,32,58,.04), 0 8px 22px -14px rgba(20,32,58,.22);

  /* === TOKENS SEMANTICI (allineati con DS Figma — 2026-05-28) === */
  /* Famiglia text-on-color (testo su fondi colorati) */
  --on-color:#FFFFFF;
  --on-brand:var(--on-color);
  --on-positive:var(--on-color);
  --on-warning:var(--ink);
  /* Tinte deep (per AA contrast su sfondo chiaro) */
  --positive-deep:#178069;
  --warning-deep:#8A6A10;
  /* Superficie scura */
  --bg-inverse:#14203A;
  /* Famiglia warm (toni mediterranei caldi) */
  --bg-page-warm:#F7F5ED;
  --bg-muted-warm:#F4ECDF;
  /* Famiglia soft (fondi tonali per landmark) */
  --bg-positive-soft-100:#ECF7F2;
  --bg-warning-soft-100:#FFF6DC;
  --bg-brand-soft-100:#EBF0FF;
  --bg-brand-soft-200:#DCE5FF;
  --bg-alert-soft-100:#FDE9F1;
  /* Stato presenza (alias di positive — separazione semantica) */
  --status-online:var(--sage);
  --alert:var(--magenta);
}
*{box-sizing:border-box;margin:0;padding:0}
:focus-visible{outline:3px solid var(--terra);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .anim{opacity:1!important;transform:none!important}
}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{
  /* Su iPhone si poteva trascinare la pagina ben oltre il contenuto e restare a guardare il
     vuoto sotto la barra: e' il rimbalzo elastico di Safari, che qui non serve a niente —
     non c'e' nessun «tira per aggiornare» da scoprire. */
  overscroll-behavior-y: none;
}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.5;
  display:flex;justify-content:center;
  padding:0;min-height:100vh;min-height:100dvh; /* dvh: su iPhone 100vh è più alto dello schermo e la pagina scorre «un po'» sempre — la barra del browser si apre/chiude e la nav balla */
  overscroll-behavior-y: none;
  background-image: none;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.screen{width:100%;max-width:452px;padding:calc(24px + env(safe-area-inset-top,0px)) 18px calc(140px + env(safe-area-inset-bottom,0px));   /* safe-area (19/10): nell'app per gli store e nella PWA a tutto schermo la testata non finisce sotto notch e Dynamic Island; nel browser normale env() vale 0 e non cambia niente. casa.css (.screen.hb) ha la sua testata */   /* 140: la barra e' alta ~86 piu' il margine, e l'ultima card non deve finirci sotto */ /* 24px in alto: una sola ricetta di testata per tutte le pagine (2026-09-05) */
  /* I due colori delle guide, in diagonale: il blu del tempo scende da sinistra in alto,
     l'oro del valore sale da destra in basso. Sta QUI e non sul body perché il body su
     desktop è largo quanto la finestra: il colore finirebbe agli angoli del monitor,
     lontano dalla colonna dove sta l'app. `fixed` lo tiene fermo mentre la pagina scorre. */
  min-height:100dvh;
  background-image:
    linear-gradient(158deg, rgba(46,91,255,.17) 0%, rgba(46,91,255,0) 42%),
    linear-gradient(158deg, rgba(232,184,75,0) 58%, rgba(232,184,75,.22) 100%);
  background-attachment: fixed, fixed;
  background-size: 452px 100dvh, 452px 100dvh;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat}

/* motion */
.anim{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque';font-weight:600;font-size:1.1875rem;letter-spacing:-.01em}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--terra);display:grid;place-items:center;color:var(--paper);box-shadow:0 4px 10px -3px rgba(46,91,255,.6)}
.iconbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink-soft);cursor:pointer}

/* badges */
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);padding:9px 12px;border-radius:13px;font-size:0.9062rem;font-weight:600;color:var(--ink-soft)}
.badge.v{color:var(--sage);border-color:rgba(47,182,163,.32);background:rgba(47,182,163,.07)}

/* section heading */
.sec{margin-top:30px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 14px}
.sec-h h2{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.375rem;letter-spacing:-.01em}
.sec-h .kicker{font-size:0.8438rem;color:var(--terra);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sec-h a{font-size:0.9375rem;color:var(--ink-faint);text-decoration:none;font-weight:600}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;z-index:50;
  background:linear-gradient(180deg,rgba(244,236,223,0),var(--paper) 36%);padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px))}
.nav .inner{width:100%;max-width:452px;background:var(--ink);border-radius:20px;display:flex;justify-content:space-around;padding:11px 8px;box-shadow:0 14px 30px -12px rgba(20,32,58,.6)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(244,236,223,.55);text-decoration:none;font-size:0.7188rem;font-weight:600;padding:3px 6px;border-radius:12px;flex:1 1 0;min-width:0}
.nav a .lbl{white-space:nowrap}
/* testo del telefono grande: le 5 etichette non ci stanno più e la barra sbordava a destra.
   nav.js misura e, se serve, passa a sole icone (aria-label resta): il testo non si rimpicciolisce mai */
.nav.compact a{padding:8px 6px;gap:0}
.nav.compact a .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav a.on{color:var(--paper)}
.nav a.on i{color:var(--ochre)}
.nav a i{font-size:1.4375rem;line-height:1}

/* primary button */
.btn{border:none;cursor:pointer;background:var(--terra);color:var(--paper);font-family:'Hanken Grotesk';font-weight:700;font-size:1.0625rem;padding:17px;border-radius:16px;box-shadow:0 10px 24px -8px rgba(46,91,255,.7);display:flex;align-items:center;justify-content:center;gap:9px}
.btn:active{transform:translateY(1px)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px rgba(47,182,163,.22)}

/* ============================================================
   COMPONENTI DS (sync da Figma 2026-05-28)
   ============================================================ */

/* === UP services card === landmark brand della Home (azzurra brand-soft + mascotte + 4 tile colorate) */
/* La card delle guide porta i due colori come le guide stesse: azzurro dove sta quella
   del tempo (a sinistra), giallo dove sta quella del valore (a destra). Tenuto chiaro:
   sopra ci vanno tessere bianche e testo scuro, e devono restare leggibili. */
.upservices{margin-top:20px;background:linear-gradient(145deg, #3e67d3c4 0%, #E2E9FF 28%, #F7E3B4 90%, #F3D68F 100%);border-radius:20px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px}
.upservices .header{display:flex;align-items:center;gap:12px}
.upservices .mascot{width:64px;height:64px;border-radius:12px;overflow:hidden;flex:none;background:var(--card);position:relative}
/* mascotte up-front.png è 271×793 (cane intero verticale). La testa sta nel primo ~33%.
   object-fit cover + ancora in alto = ritratto testa ben inquadrato (come Figma 463:1455), senza zoom forzato. */
.upservices .mascot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.upservices .title-box{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.upservices .title-box .t{font-family:'Bricolage Grotesque';font-weight:600;font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.upservices .title-box .s{font-family:'Hanken Grotesk';font-weight:600;font-size:0.8438rem;color:var(--ink-soft)}
.upservices .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.upservices .tile{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;cursor:pointer;text-decoration:none;color:inherit;border:none}
.upservices .tile.tile-default{background:var(--card)}
.upservices .tile.tile-positive{background:var(--bg-positive-soft-100)}
.upservices .tile.tile-warning{background:var(--bg-warning-soft-100)}
.upservices .tile.tile-alert{background:var(--bg-alert-soft-100)}
.upservices .tile .ic-thumb{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;color:var(--terra)}
.upservices .tile .ic-thumb i{font-size:1.5rem;line-height:1}
.upservices .tile .ic-thumb .counter{position:absolute;top:-6px;right:-6px;background:var(--alert);color:var(--on-color);font-size:0.75rem;font-weight:700;line-height:1;padding:3px 6px;border-radius:100px;min-width:18px;text-align:center}
.upservices .tile .label{font-family:'Hanken Grotesk';font-weight:600;font-size:0.875rem;color:var(--ink);flex:1;min-width:0}

/* === Recent service tile === slider ultimi servizi (Avatar + nome + skill + status) */
.recent-services{margin-top:20px}
.recent-services .kicker{font-family:'Hanken Grotesk';font-weight:700;font-size:0.8438rem;color:var(--ink-soft);letter-spacing:.09em;text-transform:uppercase;margin:0 2px 12px}
.recent-services .slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
.recent-services .slider::-webkit-scrollbar{display:none}
.rec-tile{flex:0 0 180px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;cursor:pointer}
.rec-tile .thumb{position:relative;width:46px;height:46px;flex:none}
.rec-tile .thumb img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rec-tile .thumb .sdot{position:absolute;top:-2px;right:-2px;width:13px;height:13px;border-radius:50%;background:var(--status-online);border:2px solid var(--card)}
.rec-tile .thumb .sdot.off{background:var(--ink-faint)}
.rec-tile .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rec-tile .info .nm{font-family:'Hanken Grotesk';font-weight:700;font-size:0.9375rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-tile .info .skill{font-family:'Hanken Grotesk';font-weight:400;font-size:0.8438rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-tile .info .status-row{display:flex;align-items:center;gap:5px;margin-top:2px}
.rec-tile .info .status-row .dot-mini{width:8px;height:8px;border-radius:50%;background:var(--status-online);flex:none}
.rec-tile .info .status-row .dot-mini.off{background:var(--ink-faint)}
.rec-tile .info .status-row .status{font-family:'Hanken Grotesk';font-weight:600;font-size:0.7812rem;color:var(--status-online);white-space:nowrap}
.rec-tile .info .status-row .status.off{color:var(--ink-soft)}

/* === Card vicino: stato Online (border verde 1.5px) === */
.neigh.neigh-online{border:1.5px solid var(--status-online)}

/* === Chip stato Prezzo (positive-deep) e Selezionato (ink) === */
.chip.chip-prezzo{background:var(--positive-deep);border-color:var(--positive-deep);color:var(--on-color)}
.chip.chip-prezzo i{color:var(--on-color)}
.chip.chip-selected{background:var(--bg-inverse);border-color:var(--bg-inverse);color:var(--on-color)}
.chip.chip-selected i{color:var(--on-color)}

/* === Header Home === logo canonico + saldi (pill unico) + campanello + avatar.
   Tre azioni a destra tutte alte 36px, allineate alla stessa baseline. */
.header-home{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border-radius:20px;padding:11px 13px;margin-bottom:8px}
/* --- logo: identico al brand mark usato in index/onboarding: handshake in quadrato blu pieno --- */
.header-home .brand-box{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none}
.header-home .brand-mark{width:38px;height:36px;display:grid;place-items:center} /* marchio ConFido (2026-09-06): niente più quadrato con le mani */
.header-home .brand-mark img{width:38px;height:auto;display:block}
/* La campanella sta nella testata di TUTTE E DUE le home (13/9): «cerco» e «do una mano»
   sono la stessa persona, e prima la seconda non ce l'aveva. Stava inline in home.html. */
.bellbtn{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink-soft);text-decoration:none;flex:none}
.bellbadge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:999px;background:#E0457B;color:#fff;font-size:0.6562rem;font-weight:800;display:grid;place-items:center;padding:0 4px;border:2px solid var(--paper);box-sizing:content-box;font-family:'Hanken Grotesk'}
.header-home .brand-name{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.375rem;letter-spacing:-.02em;line-height:1;color:var(--ink)}
/* --- cluster azioni a destra: saldi + campanello + avatar, tutti 36px --- */
.header-home .header-actions{display:flex;align-items:center;gap:8px;min-width:0}
/* saldi: UN solo pill orizzontale, due segmenti (€ · ore) separati da un divisore */
.header-home .wallet-pill{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);text-decoration:none;flex:none}
.header-home .wallet-pill .wp-seg{display:inline-flex;align-items:center;gap:5px;font-family:'Bricolage Grotesque';font-weight:600;font-size:0.875rem;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.header-home .wallet-pill .wp-seg i{font-size:0.9375rem;flex:none}
.header-home .wallet-pill .wp-seg.euro{color:#9A7112}
.header-home .wallet-pill .wp-seg.hours{color:var(--terra-deep)}
.header-home .wallet-pill .wp-div{width:1px;height:17px;background:var(--line);flex:none}
/* campanello: cerchio coerente con l'avatar (stesso diametro) */
.header-home .hbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink-soft);text-decoration:none;flex:none;position:relative}
.header-home .hbtn i{font-size:1.125rem}
.header-home .avatar-home{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;display:block}
/* schermi stretti: la riga logo+saldi+campanella+avatar sfora e l'avatar esce dal
   viewport (iPhone 390). Si comprime: nome brand più piccolo, pill più asciutta. */
@media (max-width:420px){
  .header-home{gap:6px;padding:11px 10px}
  .header-home .brand-box{gap:6px}
  .header-home .brand-mark{width:34px;height:32px}
  .header-home .brand-mark img{width:34px}
  .header-home .brand-name{font-size:1.125rem}
  .header-home .header-actions{gap:6px}
  .header-home .wallet-pill{padding:0 9px;gap:6px;height:34px}
  .header-home .wallet-pill .wp-seg{font-size:0.8125rem;gap:4px}
  .header-home .wallet-pill .wp-seg i{display:none}  /* nella pill contano i numeri */
}
/* Testo ingrandito (2026-09-02): la testata sfora per lo stesso motivo per cui sfora
   su schermo stretto — solo che qui a crescere è il testo, non a stringersi lo schermo.
   Stessa strategia della media query qui sopra, applicata sul livello scelto: prima
   cadono le icone dentro la pill (contano i numeri), poi il nome del brand (resta il
   roundel). Non si rimpicciolisce mai il testo: annullerebbe la scelta dell'utente. */
html[data-testo-eff="grande"] .header-home .wallet-pill .wp-seg i,
html[data-testo-eff="grandissimo"] .header-home .wallet-pill .wp-seg i{display:none}
html[data-testo-eff="grande"] .header-home .wallet-pill,
html[data-testo-eff="grandissimo"] .header-home .wallet-pill{padding:0 10px;gap:7px}
html[data-testo-eff="grandissimo"] .header-home .brand-name{display:none}
html[data-testo-eff="grandissimo"] .header-home{gap:6px;padding:11px 10px}
html[data-testo-eff="grandissimo"] .header-home .header-actions{gap:6px}
/* Misurato da testo.js. La scala di sacrificio conta: prima spariscono le PAROLE
   (il nome accanto al logo, le icone dentro la pill), e solo se ancora non ci sta
   le ore. Nascondere il tempo per tenere gli euro, in un'app che si chiama «tempo e
   valore insieme», è la scelta sbagliata — ed è quella che c'era. */
.header-home.stretta-1 .brand-name{display:none}
.header-home.stretta-2 .brand-name{display:none}
.header-home.stretta-2 .wallet-pill .wp-seg i{display:none}
.header-home.stretta-2 .wallet-pill{padding:0 10px;gap:7px}
.header-home.stretta .brand-name{display:none}
.header-home.stretta .wallet-pill .wp-seg i{display:none}
.header-home.stretta .wallet-pill .wp-div,.header-home.stretta .wallet-pill .wp-seg.hours{display:none}
.header-home.stretta .wallet-pill{padding:0 8px}

/* sotto i 385px il nome non ci sta proprio (misurato col saldo demo più largo):
   resta il roundel, mai l'avatar tagliato */
@media (max-width:385px){
  .header-home .brand-name{display:none}
}

/* === Card vicino (.neigh) — componente DS condiviso (home, cerca, tracking) ===
   Allineato a Figma Card vicino 490:128. La home ha una copia inline (priorità sua);
   cerca/tracking usano questa. Footer DS: status dot + distanza + chat 40×40 + CTA "Chiedi a lui". */
.neigh{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px;display:block;text-decoration:none;color:inherit}
.neigh.neigh-online{border:1.5px solid var(--status-online)}
.neigh .top{display:flex;gap:14px;padding:16px 16px 14px;align-items:flex-start}
.neigh .thumb{flex:none}
.neigh .thumb img{width:58px;height:58px;border-radius:16px;object-fit:cover}
.neigh .thumb .on{display:none}
/* presenza: pallino grigio = non visto nell'ultima ora (il verde è il default di .sdot) */
.neigh .foot .sdot.off,.metas .sdot.off{background:#B8BEC9;box-shadow:0 0 0 3px rgba(184,190,201,.18)}
.status .dot.off{background:#B8BEC9}
.neigh .info{flex:1;min-width:0}
.neigh .info .nm{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.1875rem;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.neigh .info .nm .bk{color:var(--terra);flex:none}
.neigh .info .rt{margin-top:3px;font-size:0.875rem;color:var(--ink-faint);font-weight:500}
.neigh .info .rt .star{color:var(--ochre);font-weight:700}
.neigh .info .sk{margin-top:11px;display:flex;gap:6px;flex-wrap:wrap}
.neigh .info .sk span{font-size:0.8438rem;font-weight:600;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);padding:4px 9px;border-radius:8px}
.neigh .foot{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:13px 16px;border-top:1px solid var(--line)}
/* zona info (distanza · prezzo · assicurato): resta su una riga, ogni voce non si spezza */
.neigh .foot .metas{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.neigh .foot .metas>span{white-space:nowrap}
/* zona azioni (chat + chiedi): restano insieme, a destra; scendono sotto se non c'è spazio */
.neigh .foot .acts{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.neigh .foot .sdot{width:9px;height:9px;border-radius:50%;background:var(--status-online);flex:none;box-shadow:0 0 0 3px rgba(47,182,163,.18)}
.neigh .foot .sdot.off{background:var(--ink-faint);box-shadow:none}
.neigh .foot .dist{font-size:0.875rem;color:var(--ink-soft);font-weight:600}
.neigh .foot .av{font-size:0.875rem;color:var(--ink-faint);font-weight:500}
.neigh .foot .price{font-size:0.875rem;color:var(--ink);font-weight:700}
.neigh .foot .chatbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--terra-deep);cursor:pointer;flex:none;text-decoration:none}
.neigh .foot .ask{border:none;cursor:pointer;background:var(--terra);color:var(--on-color);font-family:'Hanken Grotesk';font-weight:700;font-size:0.9062rem;padding:11px 18px;border-radius:12px;box-shadow:0 8px 18px -8px rgba(46,91,255,.7);text-decoration:none;white-space:nowrap}
/* fallback per card non ancora ristrutturate (es. tracking): niente accapo interno alle voci */
.neigh .foot>.dist,.neigh .foot>.av,.neigh .foot>.price{white-space:nowrap}
.neigh .foot>.chatbtn{margin-left:auto}

/* === Badge livello (.lvlbadge) — stili DS reali (Badge livello 19:11) ===
   base="Fiducia" brand-soft · t3="Riferimento" sage · t4="Pilastro" gradient gold. */
.lvlbadge{display:inline-flex;align-items:center;gap:5px;font-size:0.7812rem;font-weight:700;padding:4px 9px;border-radius:8px;margin-top:8px;font-family:'Hanken Grotesk';background:var(--bg-brand-soft-100);color:var(--terra-deep);border:1px solid rgba(46,91,255,.2)}
.lvlbadge.t3{background:rgba(47,182,163,.12);color:var(--positive-deep);border-color:rgba(47,182,163,.3)}
.lvlbadge.t4{background:linear-gradient(90deg,var(--terra),var(--sage));color:var(--on-color);border:1px solid var(--sage-soft)}
.lvlbadge i{flex:none}

/* === List Row componente DS (iconbox 40×40 thumb + titolo + sub + chevron) === */
.list-row{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px 16px;text-decoration:none;color:inherit;cursor:pointer}
.list-row .iconbox{width:40px;height:40px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center;color:var(--terra);flex:none}
.list-row .iconbox i{font-size:1.25rem}
.list-row .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.list-row .txt .t{font-family:'Hanken Grotesk';font-weight:600;font-size:1rem;color:var(--ink)}
.list-row .txt .s{font-family:'Hanken Grotesk';font-weight:400;font-size:0.875rem;color:var(--ink-faint)}
.list-row .chev{color:var(--ink-faint);flex:none}

/* ====== Blocchi FIDUCIA (tema badge): due assi separati ======
   Asse 1 = Garanzie (sicurezza/tutele, binario). Asse 2 = Reputazione (esperienza, cresce).
   Tenuti visivamente distinti per sciogliere il nodo "verificato != bravo". */
.fid{margin-top:18px}
.fid .fid-eye{display:inline-flex;align-items:center;gap:6px;font-size:0.7812rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0 2px 9px}
.fid .fid-eye i{font-size:0.9375rem}
.fid.fid-safe .fid-eye{color:var(--sage)}
.fid.fid-rep  .fid-eye{color:var(--terra)}
/* sigillo garanzie: una tessera tappabile, accento menta */
.seal{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:rgba(47,182,163,.07);border:1px solid rgba(47,182,163,.30);border-radius:18px;padding:14px 15px;color:inherit;font-family:inherit}
.seal:active{transform:translateY(1px)}
.seal .seal-ic{flex:none;width:44px;height:44px;border-radius:13px;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:1.5rem;box-shadow:0 6px 16px -8px rgba(47,182,163,.9)}
.seal .seal-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.seal .seal-tx b{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.0312rem;letter-spacing:-.01em;color:var(--ink)}
.seal .seal-tx span{font-size:0.875rem;color:var(--ink-faint);font-weight:500;line-height:1.35}
.seal .seal-go{flex:none;color:var(--sage);font-size:1.125rem}
/* card livello reputazione: tappabile, con barra di progresso */
.lvlcard{display:block;width:100%;text-align:left;cursor:pointer;margin-top:12px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px 16px;color:inherit;font-family:inherit;box-shadow:var(--shadow-soft)}
.lvlcard:active{transform:translateY(1px)}
.lvlcard .lc-top{display:flex;align-items:center;gap:10px}
.lvlcard .lc-medal{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(46,91,255,.10);color:var(--terra);display:grid;place-items:center;font-size:1.1875rem}
.lvlcard .lc-nm{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink);flex:1}
.lvlcard .lc-go{flex:none;color:var(--ink-faint);font-size:0.875rem;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.lvlcard .lc-bar{height:8px;border-radius:999px;background:var(--paper-2);margin-top:12px;overflow:hidden}
.lvlcard .lc-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--terra),var(--sage))}
.lvlcard .lc-hint{margin-top:9px;font-size:0.875rem;color:var(--ink-soft);font-weight:500}
.lvlcard .lc-hint b{color:var(--ink)}

/* ── Interruttore di fase: in Fase 1 pura il denaro sparisce dalla vista ── */
/* La versione «in ore» di una frase o di un prezzo sta nel markup accanto a quella in
   euro, e fuori dalla Fase 1 NON si vede: senza questa regola le pagine mostrerebbero
   tutte e due le versioni insieme, che è peggio di qualunque fase sbagliata.
   ⚠️ Si scrive `html:not(.fase1)` con !important, e NON `[data-time-only]{display:none}`
   + `display:revert` in fase1: `.nm span{display:block}` e simili (specificità più alta)
   vincevano sul `none`, e in fase mista comparivano le DUE versioni — visto su index e
   come-funziona. Così invece in Fase 1 non resta nessuna regola nostra, e l'elemento torna
   al display che gli dà la sua pagina. */
html:not(.fase1) [data-time-only]{ display:none !important; }
html.fase1 [data-money]{ display:none !important; }

/* ── Titolo per chi naviga con lo screen reader, senza toccare il disegno ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Area tattile dei bottoni piccoli: il disegno resta 34px, il dito ne trova 44 ──
   Solo sui chiudi-sheet, che stanno in alto a destra e non hanno nulla sotto:
   allargare l'area di bottoni immersi in una lista ruberebbe i tocchi ai vicini. */
.sh-x{position:relative}
.sh-x::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}

/* ── hidden vuol dire nascosto ──
   Un display: dichiarato in pagina vince sull'attributo: in profilo e provider-home
   il messaggio d'errore "crea servizio" restava a schermo come barra rosa vuota.
   Verificato che nessuna pagina mostra un elemento hidden via style.display. */
[hidden]{display:none !important}

/* ---- scintille sopra la guida del tempo ----
   I pallini dorati e azzurri accanto alla guida seduta sono disegnati DENTRO il PNG: quelli
   non si muovono. Questi sono veri, stanno sopra l'immagine nella stessa zona e continuano
   il gesto — la sabbia della clessidra che sale invece di cadere. Salgono, si allargano un
   po' e svaniscono, con partenze sfasate perché non sembri un battito solo.
   Chi ha chiesto meno movimento al sistema non li vede muoversi: restano fermi e visibili. */
.scintille{position:absolute;pointer-events:none;z-index:1}
.scintille i{position:absolute;display:block;border-radius:50%;opacity:0;
  /* appena accennate: sfumate ai bordi, mai un punto netto. Il blur le fa leggere come
     pulviscolo di luce invece che come pallini disegnati male. */
  filter:blur(2.5px);
  animation:scintilla 3.9s ease-in-out infinite}
.scintille i:nth-child(1){width:9px;height:9px;background:#FFD772;right:34px;bottom:52px;animation-delay:0s}
.scintille i:nth-child(2){width:5px;height:5px;background:#9FC0FF;right:16px;bottom:64px;animation-delay:.5s}
.scintille i:nth-child(3){width:11px;height:11px;background:#FFC631;right:52px;bottom:38px;animation-delay:1.1s}
.scintille i:nth-child(4){width:4px;height:4px;background:#CFE0FF;right:26px;bottom:80px;animation-delay:1.7s}
.scintille i:nth-child(5){width:8px;height:8px;background:#FFD772;right:8px;bottom:44px;animation-delay:2.3s}
@keyframes scintilla{
  0%{opacity:0;transform:translateY(6px) scale(.6)}
  25%{opacity:.5;transform:translateY(0) scale(1)}
  70%{opacity:.26;transform:translateY(-16px) scale(.9)}
  100%{opacity:0;transform:translateY(-26px) scale(.5)}
}
/* Su fondo CHIARO i pallini pallidi spariscono: stessa animazione, colori pieni.
   Il blu è quello della guida del tempo, l'oro quello della guida del valore. */
.scintille.chiare i:nth-child(1){background:#E8B84B}
.scintille.chiare i:nth-child(2){background:#2E5BFF}
.scintille.chiare i:nth-child(3){background:#D9A72F}
.scintille.chiare i:nth-child(4){background:#5B83FF}
.scintille.chiare i:nth-child(5){background:#E8B84B}
@media (prefers-reduced-motion:reduce){
  .scintille i{animation:none;opacity:.42;transform:none}
}
/* la card delle guide fa da riferimento alle scintille appoggiate nel suo angolo */
.upservices{position:relative}

/* ══════════════════════════════════════════════════════════════════════════
   LE GUIDE CHE SI MUOVONO — onboarding e home, senza un solo video

   Sono i PNG di assets/guide/ mossi in CSS e SVG. Sostituiscono i sette mp4
   dell'onboarding (11 MB, e ci recitava ancora il cane) e l'immagine ferma
   della home. Ogni percentuale qui dentro è un pixel del PNG: per questo ogni
   scena porta l'aspect-ratio del suo file, e le due mezze figure della prima
   slide hanno l'aspect-ratio della loro tavola. Se si cambia un PNG, si
   rimisurano le coordinate sul render — non a occhio sul file.

   Le animazioni partono solo con la classe .on sulla scena: nell'onboarding
   la mette lo script sulla slide che si sta guardando, così non ne girano
   sette insieme.
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --gv:1.75; }          /* quanto vanno svelte: 1 = com'erano pensate */

.gscena{position:relative;width:100%;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 12%,#EBF0FF 0%,#F7F5ED 60%,#FBF3E0 100%)}
.gscena.g-front {aspect-ratio:462/496}
.gscena.g-stand {aspect-ratio:4/3}
.gscena.g-seduta{aspect-ratio:402/464}
.gscena.g-oriz  {aspect-ratio:760/486}
.gscena.g-aiuola{aspect-ratio:760/584}
.gcorpo{position:absolute;inset:0;transform-origin:50% 100%}
.gcorpo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.gscena svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.grimpicciolita .gcorpo img{transform:scale(.87)}   /* o lo scudo passa addosso alle figure */

/* il respiro: tutta la figura, origine in basso o sembra che levitino */
.gscena.on .gcorpo{animation:g-respiro calc(4.4s / var(--gv)) ease-in-out infinite}
.gscena.on .gcorpo.lento{animation-duration:calc(6.2s / var(--gv))}
@keyframes g-respiro{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-0.55%) scale(1.006)}
}

/* la sabbia che scende: un filo dal collo della clessidra al mucchietto */
.gsabbia,.gmucchio{position:absolute;transform:translateX(-50%);opacity:0;pointer-events:none}
.gsabbia{width:0.95%;border-radius:2px;filter:blur(.3px);background-size:100% 46%;
  background-image:linear-gradient(180deg,rgba(239,217,174,0) 0%,#EFD9AE 22%,#EFD9AE 58%,rgba(239,217,174,0) 100%)}
.gmucchio{background:radial-gradient(60% 100% at 50% 100%,#EFD9AE 0%,rgba(239,217,174,0) 100%)}
.gscena.on .gsabbia {opacity:.8;animation:g-cola calc(1.15s / var(--gv)) linear infinite}
.gscena.on .gmucchio{opacity:.75;animation:g-posa calc(4.4s / var(--gv)) ease-in-out infinite}
@keyframes g-cola{ from{background-position:0 -46%} to{background-position:0 100%} }
@keyframes g-posa{ 0%,100%{transform:translateX(-50%) scaleY(1)} 50%{transform:translateX(-50%) scaleY(1.14)} }
.gs-front  .gsabbia {left:27.8%;top:75.4%;height:6.0%}
.gs-front  .gmucchio{left:27.8%;top:80.6%;width:6.2%;height:2.2%}
.gs-seduta .gsabbia {left:22.5%;top:84.0%;height:5.4%}
.gs-seduta .gmucchio{left:22.5%;top:88.6%;width:8.4%;height:2.4%}
.gs-saluto .gsabbia {left:73%;top:75.7%;height:7.3%}
.gs-saluto .gmucchio{left:73%;top:82.6%;width:8.6%;height:2.4%}
.gs-aiuola .gsabbia {left:38.9%;top:77.9%;height:7.1%}
.gs-aiuola .gmucchio{left:38.9%;top:84.6%;width:6%;height:2.0%}

/* le due guide come file separati: respirano sfasate, come due persone */
.gduo{position:absolute;inset:0}
.gduo .gmezza{position:absolute;bottom:2%;height:92%;aspect-ratio:326/520;width:auto;
  transform-origin:50% 100%}
.gduo .gmezza img{width:100%;height:100%;object-fit:contain;display:block}
.gduo .gblu{left:3%}
.gduo .goro{right:3%;height:84%}     /* sta mezzo passo indietro */
.gscena.on .gduo .gmezza{animation:g-respiro calc(4.4s / var(--gv)) ease-in-out infinite}
.gscena.on .gduo .goro{animation-duration:calc(5.1s / var(--gv));animation-delay:-1.3s}

/* lo sbattito di palpebre: il secondo disegno, mostrato per un attimo dietro due
   ovali sfumati sugli occhi. Con un bordo netto si vedrebbe lo scalino: le due
   tavole hanno tinte appena diverse. */
.gchiusi{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  -webkit-mask-image:radial-gradient(ellipse 15% 8.5% at 37.9% 30.5%,#000 72%,transparent 100%),
                     radial-gradient(ellipse 14% 8% at 72.9% 33.8%,#000 72%,transparent 100%);
          mask-image:radial-gradient(ellipse 15% 8.5% at 37.9% 30.5%,#000 72%,transparent 100%),
                     radial-gradient(ellipse 14% 8% at 72.9% 33.8%,#000 72%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.gscena.on .gchiusi{animation:g-blink calc(6.6s / var(--gv)) steps(1,end) infinite}
@keyframes g-blink{ 0%,90%{opacity:0} 91.4%,94.4%{opacity:1} 95.8%,100%{opacity:0} }

/* le ore che salgono: cerchi identici uno all'altro, come vuole «un'ora vale un'ora» */
.gore i{position:absolute;display:block;border-radius:50%;opacity:0;filter:blur(.6px);
  width:3.4%;aspect-ratio:1}
.gscena.on .gore i{animation:g-sale calc(5.2s / var(--gv)) ease-out infinite}
@keyframes g-sale{
  0%  {opacity:0;transform:translateY(0) scale(.5)}
  18% {opacity:.85;transform:translateY(-18%) scale(1)}
  72% {opacity:.6;transform:translateY(-72%) scale(1)}
  100%{opacity:0;transform:translateY(-104%) scale(.7)}
}

/* i tracciati che si disegnano da soli: lo scudo, le linee fra i tetti */
.gtraccia{fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.gscena.on .gtraccia{animation:g-disegna calc(5.6s / var(--gv)) ease-in-out infinite}
@keyframes g-disegna{
  0%{stroke-dashoffset:var(--len);opacity:.15}
  38%{stroke-dashoffset:0;opacity:1}
  74%{stroke-dashoffset:0;opacity:1}
  94%,100%{stroke-dashoffset:0;opacity:0}
}

/* la sabbia che passa di mano: grani che corrono lungo un tracciato */
.ggrano{opacity:0;offset-rotate:0deg}
.gscena.on .ggrano{animation:g-corri calc(3.2s / var(--gv)) cubic-bezier(.5,0,.5,1) infinite}
@keyframes g-corri{
  0%{offset-distance:0%;opacity:0} 12%{opacity:.95}
  84%{opacity:.9} 100%{offset-distance:100%;opacity:0}
}

/* la casa che risponde: le onde del bussare, poi la finestra si accende */
.gonda{fill:none;stroke:#2E5BFF;stroke-width:2;opacity:0}
.gscena.on .gonda{animation:g-bussa calc(4.6s / var(--gv)) ease-out infinite}
@keyframes g-bussa{
  0%,4%{opacity:0;transform:scale(.35)} 10%{opacity:.55;transform:scale(.6)}
  28%{opacity:0;transform:scale(1.6)} 100%{opacity:0;transform:scale(1.6)}
}
.gfinestra{fill:#C9D3E6}
.gscena.on .gfinestra{animation:g-accendi calc(4.6s / var(--gv)) ease-in-out infinite}
@keyframes g-accendi{ 0%,28%{fill:#C9D3E6} 42%,72%{fill:#FFD772} 90%,100%{fill:#C9D3E6} }
.galone{fill:#FFD772;opacity:0;filter:blur(5px)}
.gscena.on .galone{animation:g-alone calc(4.6s / var(--gv)) ease-in-out infinite}
@keyframes g-alone{ 0%,28%{opacity:0} 46%,70%{opacity:.6} 90%,100%{opacity:0} }

/* l'alone che respira accanto ai raggi già disegnati nel PNG */
.gbagliore{fill:#FFD772;opacity:0}
.gscena.on .gbagliore{animation:g-pulsa calc(3.4s / var(--gv)) ease-in-out infinite}
@keyframes g-pulsa{ 0%,100%{opacity:.16;transform:scale(.9)} 50%{opacity:.46;transform:scale(1.08)} }

@media (prefers-reduced-motion:reduce){
  .gscena.on *{animation:none !important}
}

/* due misure che dipendono da dove sta la scena, non dall'animazione */
.gscena .scintille{right:6%;bottom:8%;width:30%;height:34%}
.g-casa .gcorpo{right:auto;width:46%;left:2%}   /* la figura lascia posto alla casa */

/* La scelta della lingua prima di iscriversi (11/09/2026). Due lettere, non una
   bandiera: una bandiera dice il PAESE, non la lingua, e l'inglese non è di un
   paese solo. Resta piccola: è un'uscita di sicurezza per chi non capisce la
   pagina, non una decisione da prendere adesso. */
[data-scelta-lingua]{display:inline-flex;gap:2px;background:var(--paper-2,#F7F8FB);
  border:1px solid var(--line,#E3E7F0);border-radius:999px;padding:2px}
[data-scelta-lingua] button{border:none;background:none;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:0.75rem;letter-spacing:.04em;
  color:var(--ink-faint,#8A93A8);padding:5px 11px;border-radius:999px;line-height:1}
[data-scelta-lingua] button[aria-pressed="true"]{background:var(--terra,#2E5BFF);color:#fff}