/* Fabrizia Lellero, The Art of Healthy Living.
   Quiet luxury botanico: circa 70% avorio e neutri, 20% toni naturali, 10% accenti floreali.
   Layout: app a una schermata, allineata a sinistra, con molto respiro.
   Ogni sezione ha la sua luce: una tinta della palette, schiarita sull'avorio, che sfuma dall'alto.
   La peonia è il dettaglio identitario: la fotografia della moodboard nella Home e nel ritratto,
   il disegno con i petali in Oggi e nel Percorso. Il resto è tipografia e filetti. */

@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: italic; font-display: swap; font-weight: 300 700;
  src: url(fonts/cormorant-garamond-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Solo per la firma sotto il manifesto. */
@font-face {
  font-family: 'Herr Von Muellerhoff';
  font-style: normal; font-display: block; font-weight: 400;
  src: url(fonts/herr-von-muellerhoff-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext:start */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(fonts/cormorant-garamond-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin-ext:end */

:root {
  /* La palette del brand */
  --ivory: #F5F1E9;      /* fondo principale */
  --champagne: #E7DCCB;  /* fondi secondari e dettagli */
  --taupe: #A99B8A;      /* elementi secondari */
  --stone: #C8BFB2;      /* superfici e filetti */
  --cocoa: #66564C;      /* testi, azioni, contrasti */
  --sage: #A5AA91;       /* accenti botanici */
  --rose: #C9AAA4;       /* accenti floreali, uso misurato */
  /* Derivati, solo per leggibilità e per l'aiuto */
  --quiet: #776759;      /* testo secondario: il taupe non ha contrasto sufficiente per il testo */
  --surface: #FBF9F4;    /* campi e schede */
  --care: #8E4F4A;       /* aiuto e crisi: mai come decorazione */
  /* Verde bosco e oro: la barra in basso e i dettagli preziosi */
  --forest: #3F513F;     /* verde bosco: la barra delle sezioni */
  --forest-deep: #2F3D30;
  --gold: #B8964F;       /* oro antico: filetti, cornici, segni */
  --gold-light: #DCC38C; /* oro sul verde bosco: testo della scheda aperta */
  --gold-soft: #EFE4C9;  /* oro schiarito: fondi */
  --gold-deep: #7D6229;  /* oro scurito: testo piccolo sull'avorio */
  --sage-deep: #6E7559;  /* salvia scurita: segni sottili */
  --rose-deep: #9A6E66;  /* rosa scurito: segni sottili */
  --wash-gold: #F1E8D3;  /* Videoconsulenze */
  --wash-cocoa: #E6DED6; /* Area professionista */
  /* Le tinte delle sezioni: i colori della palette schiariti sull'avorio.
     Su tutte il testo cacao resta sopra 5:1; il testo secondario (--quiet) no, e lì non si usa. */
  --cream: #FBEEE1;           /* il fondo della peonia nella moodboard: Home e ritratto */
  --wash-champagne: #EAE0D1;  /* Oggi: 80% Soft Champagne */
  --wash-rose: #EADFD7;       /* Percorso: 26% Dusty Rose */
  --wash-taupe: #E3DCD2;      /* Ascolto: 24% Taupe */
  --wash-sage: #E0DFD2;       /* Casa: 26% Botanical Sage */
  --wash-stone: #E8E2D8;      /* Altro: 30% Warm Stone */
  /* Valori di partenza: ogni sezione li cambia più sotto. */
  --tone: var(--champagne);   /* il colore pieno della sezione: filetti e segni */
  --wash: var(--ivory);       /* la sua tinta di fondo */
  --line: var(--champagne);   /* i filetti tra le righe */
  --font-display: 'Cormorant Garamond Variable', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Manrope Variable', Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--cocoa);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

button, select, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 2px; }
p { margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.quiet { color: var(--quiet); }

h1, h2, h3 { margin: 0; font-weight: 500; }
h1 { font-family: var(--font-display); font-size: 2.15rem; line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; }
h2 { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; }
h3 { font-size: 0.98rem; font-weight: 700; }
h4 { margin: 0; font-size: 0.98rem; font-weight: 700; }

/* ---------- Le tinte delle sezioni ---------- */
/* Circa 70% chiari e neutri (avorio, champagne, pietra), 20% naturali (taupe, salvia), 10% floreali (rosa cipria). */

.app[data-view="oggi"], #view-oggi, #breath { --tone: var(--champagne); --wash: var(--wash-champagne); --line: #DBCFBE; }
.app[data-view="percorso"], #view-percorso, #exercise { --tone: var(--rose); --wash: var(--wash-rose); --line: #DFCEC7; }
.app[data-view="ascolto"], #view-ascolto, #listen { --tone: var(--taupe); --wash: var(--wash-taupe); --line: #D3CABE; }
.app[data-view="casa"], #view-casa, #space { --tone: var(--sage); --wash: var(--wash-sage); --line: #CDCEBD; }
.app[data-view="luce"], #view-luce { --tone: var(--champagne); --wash: var(--surface); --line: var(--champagne); }
.app[data-view="altro"], #view-altro, #intake { --tone: var(--stone); --wash: var(--wash-stone); --line: #DAD3C8; }
.app[data-view="home"] { --tone: transparent; }
.app[data-view="nutrizione"], #view-nutrizione { --tone: var(--sage); --wash: var(--wash-sage); --line: #CDCEBD; }
.app[data-view="coaching"], #view-coaching { --tone: var(--rose); --wash: var(--wash-rose); --line: #DFCEC7; }
.app[data-view="lifestyle"], #view-lifestyle { --tone: var(--gold); --wash: var(--wash-gold); --line: #E2D5B6; }
.app[data-view="percorsi"], #view-percorsi { --tone: var(--gold); --wash: var(--wash-gold); --line: #E2D5B6; }
.app[data-view="paziente"], #view-paziente { --tone: var(--rose); --wash: var(--wash-rose); --line: #DFCEC7; }
.app[data-view="monitor"], #view-monitor { --tone: var(--sage); --wash: var(--wash-sage); --line: #CDCEBD; }
.app[data-view="video"], #view-video { --tone: var(--gold); --wash: var(--wash-gold); --line: #E2D5B6; }
.app[data-view="pro"], #view-pro { --tone: var(--cocoa); --wash: var(--wash-cocoa); --line: #D8CEC4; }
#panel[data-tone="rose"] { --wash: var(--wash-rose); --line: #DFCEC7; --tone: var(--rose); }
#panel[data-tone="sage"] { --wash: var(--wash-sage); --line: #CDCEBD; --tone: var(--sage); }
#panel[data-tone="gold"] { --wash: var(--wash-gold); --line: #E2D5B6; --tone: var(--gold); }
#panel[data-tone="cocoa"] { --wash: var(--wash-cocoa); --line: #D8CEC4; --tone: var(--cocoa); }
#about { --wash: var(--cream); --line: #DFCEC7; }

/* ---------- Cornice ---------- */

.app {
  height: var(--vvh, 100%);
  max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.bar {
  grid-row: 1; grid-column: 1; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 10px max(24px, env(safe-area-inset-left));
  border-bottom: 2px solid var(--tone);
}

/* Il nome, con «Dott.ssa» in piccolo sotto la parola Fabrizia, a sinistra.
   Nel codice il titolo viene prima del nome, così si legge «Dott.ssa Fabrizia Lellero». */
.wordmark, .lockup-name {
  display: inline-flex; flex-direction: column-reverse; align-items: flex-start;
  font-family: var(--font-display); font-weight: 500; line-height: 1.1;
}
.brand-name { text-transform: uppercase; letter-spacing: 0.2em; }
.brand-title { font-style: italic; letter-spacing: 0.02em; line-height: 1; color: var(--quiet); }
.wordmark { min-height: 40px; justify-content: center; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.wordmark .brand-name { font-size: 1.02rem; }
.wordmark .brand-title { margin-top: 3px; font-size: 0.8rem; }

/* Nella Home il nome è già grande nella pagina: in alto resta solo l'aiuto, sopra la peonia. */
.app[data-view="home"] .bar { border-bottom-color: transparent; pointer-events: none; }
.app[data-view="home"] .bar > * { pointer-events: auto; }
.app[data-view="home"] .wordmark { visibility: hidden; }
.app[data-view="home"] .help-btn,
.app[data-view="home"] .flag-btn,
.app[data-view="home"] .menu-btn { background: rgba(251, 249, 244, 0.92); }
.app[data-view="home"] .views { grid-row: 1 / 3; }
.app[data-view="home"].is-scrolled .bar { background: var(--ivory); border-bottom-color: var(--champagne); pointer-events: auto; }
.app[data-view="home"].is-scrolled .wordmark { visibility: visible; }

.bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.flag-btn, .menu-btn {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--stone); border-radius: 50%; background: transparent; color: var(--cocoa);
}
.flag-btn .flag { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(60, 48, 40, 0.18); }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-btn[aria-expanded="true"] { border-color: var(--gold); background: var(--gold-soft); }
@media (max-width: 370px) { .help-btn { padding: 6px 10px; } .bar-actions { gap: 6px; } }
.help-btn {
  flex: none; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--care); border-radius: 6px;
  background: transparent; color: var(--care);
  font-weight: 700; font-size: 0.86rem;
}

.views { grid-row: 2; grid-column: 1; min-height: 0; position: relative; }
.view { height: 100%; }
.view-page { position: relative; isolation: isolate; overflow-y: auto; padding: 26px 24px 40px; display: flex; flex-direction: column; gap: 18px; }
/* In una colonna che scorre, nessun blocco deve restringersi: altrimenti un pulsante su due righe viene tagliato. */
.view-page > * { flex-shrink: 0; }
/* La luce della sezione: la sua tinta in alto, che sfuma nell'avorio e scorre con la pagina. */
.view-page::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 250px;
  background: linear-gradient(to bottom, var(--wash) 0, var(--wash) 36%, var(--ivory) 100%);
  pointer-events: none;
}
/* Sopra una tinta il testo secondario non avrebbe contrasto sufficiente: l'introduzione è in cacao. */
.lede { color: var(--cocoa); }

/* ---------- Pulsanti e campi ---------- */

.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.primary, .quiet-btn {
  min-height: 46px; padding: 11px 22px; border-radius: 6px;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
}
.primary { border: 1px solid var(--cocoa); background: var(--cocoa); color: var(--ivory); }
.primary:disabled { border-color: var(--stone); background: var(--stone); color: var(--ivory); }
.primary.is-care { border-color: var(--care); background: var(--care); }
.primary.wide { width: 100%; text-align: left; }
.quiet-btn { border: 1px solid var(--stone); background: transparent; }
.quiet-btn.is-care { border-color: var(--care); color: var(--care); }
.quiet-btn.is-small { min-height: 36px; padding: 5px 12px; font-size: 0.84rem; }

input[type="text"], textarea, select {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--stone); border-radius: 6px;
  background: var(--surface);
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--taupe); opacity: 1; }
label, .field-label { font-weight: 600; font-size: 0.92rem; }
.hint { color: var(--quiet); font-size: 0.86rem; }
.saved { color: var(--quiet); font-size: 0.86rem; }

/* ---------- Home ---------- */
/* Dalla moodboard: la peonia in alto a sinistra, il nome, il payoff. Poi l'app, Fabrizia, il manifesto e la firma. */

.view-home { padding: 0; gap: 0; }
.view-home::before { content: none; }
/* La Home come una cartolina antica: fondo salvia, un ovale color crema con cornice d'oro, le peonie agli angoli. */
.hero.floral {
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(70px + env(safe-area-inset-top)) 22px 56px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(239, 232, 214, 0.55) 0, rgba(239, 232, 214, 0) 62%),
    radial-gradient(circle at 12% 88%, rgba(201, 170, 164, 0.28) 0, rgba(201, 170, 164, 0) 40%),
    radial-gradient(circle at 92% 10%, rgba(201, 170, 164, 0.22) 0, rgba(201, 170, 164, 0) 36%),
    linear-gradient(160deg, #C3C8B2 0%, #B2B99F 55%, #A7AF94 100%);
}
.hero.floral::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, rgba(245, 241, 233, 0), var(--ivory)); z-index: 1; }
.bloom-corner { position: absolute; z-index: 2; width: 50%; max-width: 250px; height: auto; pointer-events: none; filter: saturate(1.05); }
.bloom-corner { -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 58%, transparent 100%); }
.bloom-corner.is-top { z-index: 4; top: -6%; left: -20%; transform: rotate(-12deg); }
.bloom-corner.is-bottom { bottom: -14%; right: -20%; width: 42%; transform: rotate(172deg); }
.cameo {
  position: relative; z-index: 3; margin: 0 auto; width: min(80%, 340px); aspect-ratio: 5 / 6;
  display: grid; place-content: center; justify-items: center; gap: 16px; padding: 28px 26px; text-align: center;
  border-radius: 50%; border: 1.5px solid var(--gold);
  background: radial-gradient(ellipse at 50% 40%, #FCF6EC 0, #F5EBDB 70%, #EEE1CB 100%);
  box-shadow: 0 0 0 7px #F2E7D4, 0 0 0 8.5px var(--gold), 0 14px 34px rgba(47, 61, 48, 0.25);
}
.cameo .lockup { margin: 0; display: grid; justify-items: center; }
.cameo .lockup-name { align-items: center; }
.cameo .lockup-payoff { color: var(--gold-deep); }
.cameo .lockup-payoff::before { content: ""; flex: 1; height: 1px; background: var(--gold); }
.cameo .lockup-payoff::after { background: var(--gold); }
.cameo-line { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.2; color: var(--cocoa); }
@media (max-width: 380px) { .cameo .lockup-name .brand-name { font-size: 1.22rem; } .cameo { padding: 26px 20px; } }
.lockup-fields { margin-top: 8px; font-family: var(--font-display); font-style: italic; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.home-body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 6px 24px 44px; }
.home-lede { font-size: 1.06rem; }
.home-about { display: grid; gap: 12px; justify-items: start; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--stone); }
.manifesto-block { align-self: stretch; display: grid; gap: 4px; margin: 10px 0 0; padding-top: 24px; border-top: 1px solid var(--gold); }
.manifesto { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.36rem; line-height: 1.4; }
/* La firma, come scritta a mano, in basso a destra. */
.signature {
  justify-self: end; margin: 6px 4px 0 0;
  font-family: 'Herr Von Muellerhoff', 'Snell Roundhand', 'Apple Chancery', cursive;
  font-size: 3.1rem; line-height: 1.15; white-space: nowrap;
  transform: rotate(-3deg); transform-origin: right bottom;
}

/* ---------- Oggi ---------- */

.bloom-row { display: flex; align-items: center; gap: 20px; }
.bloom-row .quiet { color: var(--cocoa); }
.bloom { flex: none; width: 104px; aspect-ratio: 1; }
.bloom.is-title { width: 84px; margin: -16px 0; }
.title-row { display: flex; align-items: center; gap: 12px; }
.peony { display: block; width: 100%; height: 100%; overflow: visible; }
.petal { fill: none; stroke: var(--taupe); stroke-width: 0.7; stroke-dasharray: 1.5 3; transition: fill 0.8s ease; }
/* Accanto al titolo del Percorso il fiore è disegnato per intero: i petali si colorano man mano che si aprono. */
.bloom.is-title .petal { stroke-dasharray: none; fill: rgba(251, 249, 244, 0.6); }
.petal.is-open { stroke: var(--taupe); stroke-dasharray: none; }
.p-outer.is-open { fill: #FDFBF7; }
.p-mid.is-open { fill: var(--champagne); }
.p-inner.is-open { fill: var(--rose); }
.peony .heart { fill: var(--sage); }
.peony .leaf { fill: var(--sage); opacity: 0.6; }

.quote {
  margin: 6px 0; padding: 4px 0 4px 18px;
  border-left: 2px solid var(--tone);
  font-family: var(--font-display); font-style: italic; font-size: 1.36rem; line-height: 1.35;
}

.signals { display: grid; }
.signal, .check { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-weight: 400; font-size: 1rem; cursor: pointer; }
.signal input, .check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--cocoa); }
.signal strong { display: block; }
.signal span span { color: var(--quiet); }

.ritual { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.ritual p { color: var(--quiet); }

/* ---------- Percorso ---------- */

.week { padding-top: 18px; border-top: 1px solid var(--stone); }
.week-kicker { display: flex; align-items: center; gap: 9px; color: var(--quiet); font-size: 0.86rem; }
/* Un petalo per settimana, ognuno con un colore della palette. */
.week-kicker::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--petal, var(--stone)); }
.week:nth-child(1) { --petal: var(--stone); }
.week:nth-child(2) { --petal: var(--sage); }
.week:nth-child(3) { --petal: var(--taupe); }
.week:nth-child(4) { --petal: var(--rose); }
.week .aim { color: var(--quiet); margin-bottom: 8px; }
.ex {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; padding: 15px 0; text-align: left;
  border: 0; border-top: 1px solid var(--line); background: none;
}
.ex-name { font-weight: 600; }
.ex-state { flex: none; color: var(--quiet); font-size: 0.84rem; }
.ex.is-done .ex-state { color: var(--cocoa); font-weight: 600; }

#ex-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.wheel-chart { width: 100%; max-width: 300px; margin: 0 auto; display: block; overflow: visible; }
.wheel-chart .grid { fill: none; stroke: var(--champagne); stroke-width: 1; }
.wheel-chart .then { fill: none; stroke: var(--taupe); stroke-width: 1; stroke-dasharray: 3 3; }
.wheel-chart .now { fill: rgba(165, 170, 145, 0.3); stroke: var(--cocoa); stroke-width: 1.4; }
.wheel-chart text { fill: var(--quiet); font-size: 7px; font-family: var(--font-ui); }
.scale-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.scale-row label { grid-column: 1 / -1; }
.scale-row input[type="range"] { width: 100%; accent-color: var(--cocoa); min-height: 32px; }
.scale-row output { min-width: 2ch; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.days { display: flex; flex-wrap: wrap; gap: 8px; }
.day { position: relative; }
.day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day span { display: grid; place-items: center; min-width: 46px; min-height: 42px; padding: 0 10px; border: 1px solid var(--stone); border-radius: 6px; font-weight: 600; font-size: 0.88rem; }
.day input:checked + span { border-color: var(--cocoa); background: var(--cocoa); color: var(--ivory); }
.day input:focus-visible + span { outline: 2px solid var(--cocoa); outline-offset: 2px; }

/* ---------- Ascolto ---------- */

.listen { padding-top: 18px; border-top: 1px solid var(--stone); }
.listen-when { color: var(--quiet); font-size: 0.86rem; }
.listen .aim { color: var(--quiet); margin-bottom: 8px; }
.listen-open, .row-open {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; padding: 15px 0; text-align: left;
  border: 0; border-top: 1px solid var(--line); background: none;
}

.key { font-family: var(--font-display); font-style: italic; font-size: 1.36rem; line-height: 1.35; }
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.steps li::marker { color: var(--quiet); font-weight: 600; }
.tracks { list-style: none; margin: 0; padding: 0; }
.track { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.track:last-child { border-bottom: 1px solid var(--line); }
.track-kind { color: var(--quiet); font-size: 0.84rem; }
.track-title { font-weight: 600; }
.track-note { color: var(--quiet); }
.track .row-actions { margin-top: 8px; gap: 10px 18px; }
a.quiet-btn { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.text-link { display: inline-flex; align-items: center; min-height: 36px; color: var(--cocoa); font-weight: 600; font-size: 0.9rem; text-underline-offset: 3px; }

/* YouTube chiede un player di almeno 200 x 200 px. */
.player { display: grid; gap: 10px; }
.player-frame { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; border-radius: 8px; background: var(--cocoa); }
.player-note { color: var(--quiet); font-size: 0.86rem; }
.consent { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--stone); border-radius: 8px; background: var(--surface); }
.research summary { padding: 10px 0; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.research p { color: var(--quiet); font-size: 0.92rem; }

/* ---------- Spazi ---------- */

.kicker { font-size: 0.86rem; margin-bottom: 6px; }
.tip-text { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; color: var(--cocoa); }
.ritual .tip-text { color: var(--cocoa); }
.quiet-btn[aria-pressed="true"] { border-color: var(--cocoa); background: var(--champagne); }
.space-body { display: grid; gap: 14px; }
.space-body .signals { border-bottom: 1px solid var(--line); }
.tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--sage); border-radius: 999px; color: var(--quiet); font-size: 0.74rem; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.swatch-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.swatch { flex: none; width: 40px; height: 40px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--stone); }
.swatch-text { display: grid; gap: 3px; }
.swatch-text .recalls { color: var(--quiet); }
.swatch-text .how { font-size: 0.94rem; }
.words { margin: 0; display: grid; gap: 8px; }
.words div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; }
.words dt { font-weight: 700; }
.words dd { margin: 0; color: var(--quiet); }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-slot { display: grid; gap: 8px; align-content: start; }
.photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--stone); background: var(--surface); }
.photo-empty { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--stone); border-radius: 8px; color: var(--quiet); font-size: 0.86rem; }
.file-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-align: center; }
.file-btn:focus-within { outline: 2px solid var(--cocoa); outline-offset: 2px; }
.fav-row { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }

/* ---------- Casa: le due aree, Spazi e Materiali ---------- */

.segments { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--tone); border-radius: 8px; background: var(--ivory); }
.segment { min-height: 44px; padding: 6px 10px; border: 0; border-radius: 5px; background: none; color: var(--quiet); font-weight: 600; font-size: 0.92rem; }
.segment[aria-pressed="true"], .segment[aria-selected="true"] { background: var(--cocoa); color: var(--ivory); }
.segments:has(> :nth-child(3)) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
.segments.pro-tabs { display: flex; flex-wrap: wrap; }
.segments.pro-tabs .segment { flex: 1 1 30%; }
.panel { display: flex; flex-direction: column; gap: 18px; }
.panel > * { flex-shrink: 0; }

/* ---------- Materiali ---------- */

.notice { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--stone); border-radius: 8px; background: var(--surface); }
.source-line { display: flex; flex-wrap: wrap; gap: 0 18px; }
.check strong { display: block; }
.check span span { color: var(--quiet); }
.entry { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.entry:last-child { border-bottom: 1px solid var(--line); }
.sources { list-style: none; margin: 0; padding: 0; }
.sources li { display: grid; gap: 2px; padding: 13px 0; border-top: 1px solid var(--line); }
.sources li:last-child { border-bottom: 1px solid var(--line); }
.sources a { color: var(--cocoa); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Il questionario prima della visita ---------- */

.intake-body { display: grid; gap: 16px; }
.intake-body progress { width: 100%; height: 6px; accent-color: var(--cocoa); }
.intake-heading { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; line-height: 1.2; text-wrap: balance; }
.intake-heading:focus { outline: none; }
.question { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--stone); }
.question-prompt { font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.opts { display: grid; }
.opts .check:first-child { border-top: 0; }
.scale { display: flex; flex-wrap: wrap; gap: 6px; }
.scale-chip { position: relative; }
.scale-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scale-chip span { display: grid; place-items: center; min-width: 40px; min-height: 42px; border: 1px solid var(--stone); border-radius: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.scale-chip input:checked + span { border-color: var(--cocoa); background: var(--cocoa); color: var(--ivory); }
.scale-chip input:focus-visible + span { outline: 2px solid var(--cocoa); outline-offset: 2px; }
.grid-rows { display: grid; gap: 10px; }
.grid-row { display: grid; gap: 4px; }
.grid-row label { font-weight: 500; }
@media (min-width: 500px) { .grid-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: 12px; } }
.intake-body .tool { justify-self: start; }
.template-banner.is-compact { justify-self: start; padding: 5px 12px; font-size: 0.84rem; }
.care-note { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--care); border-radius: 8px; background: var(--surface); }
.crisis-slot:empty { display: none; }
.aids { display: grid; gap: 10px; }
.aids[open] summary { margin-bottom: 4px; }
.plate { display: block; width: 168px; max-width: 60%; overflow: visible; }
.plate path { stroke: var(--cocoa); stroke-width: 0.8; }
.plate-veg { fill: rgba(165, 170, 145, 0.4); }
.plate-pro { fill: var(--surface); }
.plate-cer { fill: var(--champagne); }
.plate text { fill: var(--cocoa); font-size: 7px; font-family: var(--font-ui); }
.review-section { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--stone); }
.review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.review-item { display: grid; gap: 2px; }
.review-q { color: var(--quiet); font-size: 0.88rem; }
.review-item p { overflow-wrap: anywhere; }

/* Il riepilogo stampato: solo quello, in nero su bianco. */
.print-area { display: none; }
@media print {
  html.is-printing, html.is-printing body { height: auto; background: #FFFFFF; }
  html.is-printing body > *:not(.print-area) { display: none !important; }
  html.is-printing .print-area { display: block; color: #000000; font-size: 11pt; line-height: 1.4; }
  .print-area h1 { font-size: 20pt; margin: 4pt 0 8pt; }
  .print-area h2 { font-size: 14pt; margin: 16pt 0 4pt; break-after: avoid; }
  .print-area p { margin: 2pt 0; overflow-wrap: anywhere; }
  .print-item { margin-top: 7pt; break-inside: avoid; }
  .print-q, .print-kicker { font-size: 9.5pt; color: #444444; }
  .print-foot { margin-top: 18pt; }
}

/* ---------- Luce ---------- */

/* Luce è la stanza più luminosa: il fondo più chiaro della palette, con lo champagne per chi scrive. */
.view-talk { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--surface); }
.presence { display: flex; align-items: center; gap: 10px; padding: 14px 24px 12px; font-size: 0.92rem; border-bottom: 1px solid var(--champagne); }
.presence-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sage); }
.presence[data-mood="thinking"] .presence-dot,
.presence[data-mood="speaking"] .presence-dot,
.presence[data-mood="listening"] .presence-dot { animation: pulse 1.2s ease-in-out infinite; }
.presence[data-mood="caring"] .presence-dot { background: var(--rose); }
.presence-status { color: var(--quiet); }
@keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

.thread {
  list-style: none; margin: 0; padding: 16px 24px 18px;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 18px;
}
.msg { max-width: 34em; overflow-wrap: anywhere; }
.msg p { white-space: pre-wrap; }
.msg-luce > p:first-child { font-size: 1.04rem; line-height: 1.6; }
.msg-you { align-self: flex-end; max-width: 84%; padding: 10px 15px; background: var(--champagne); border-radius: 12px 12px 2px 12px; }
.msg-tools { display: flex; gap: 18px; margin-top: 4px; }
.tool { min-height: 34px; padding: 4px 0; border: 0; background: none; color: var(--quiet); font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips-label { margin-top: 14px; color: var(--quiet); font-size: 0.92rem; }
.chip { min-height: 40px; padding: 7px 14px; border: 1px solid var(--stone); border-radius: 6px; background: var(--ivory); font-size: 0.92rem; }
.msg-note { color: var(--quiet); font-size: 0.92rem; }
/* La proposta della voce naturale, una volta sola, sotto la risposta che si sta ascoltando. */
.voice-offer { display: grid; gap: 10px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--champagne); border-radius: 8px; background: var(--ivory); font-size: 0.92rem; }
.voice-offer .row-actions { margin: 0; }
.msg-note .row-actions { margin-top: 8px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--care); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.care-card { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--care); border-radius: 8px; background: var(--surface); }
.care-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
.care-card .who { font-weight: 700; }
.care-card .small { color: var(--quiet); font-size: 0.9rem; }
.call {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 18px; border-radius: 6px; border: 1px solid var(--care);
  background: var(--care); color: #FFFFFF; font-weight: 700; text-decoration: none;
}
.call.is-outline { background: transparent; color: var(--care); }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); }
.composer textarea { flex: 1; min-width: 0; resize: none; max-height: 132px; border-radius: 8px; line-height: 1.4; }
.icon-btn, .send { flex: none; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 8px; }
.icon-btn { border: 1px solid var(--stone); background: var(--surface); }
.icon-btn[aria-pressed="true"] { background: var(--care); border-color: var(--care); color: #FFFFFF; }
.send { border: 1px solid var(--cocoa); background: var(--cocoa); color: var(--ivory); }
.send:disabled { border-color: var(--stone); background: var(--stone); }
.icon-btn svg, .send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fineprint { padding: 0 24px 8px; color: var(--quiet); font-size: 0.76rem; }

/* ---------- Altro ---------- */

.group { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.links { display: flex; gap: 20px; }
.links a, .directory, .line-card a.web { color: var(--cocoa); text-underline-offset: 3px; }

/* I contatti di Fabrizia, ognuno con il suo simbolo. */
.contacts { list-style: none; margin: 0; padding: 0; display: grid; }
.contact { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 9px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.contacts li:last-child .contact { border-bottom: 1px solid var(--line); }
.contact-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--champagne); }
.contact[data-kind="telefono"] .contact-icon { background: #D2D4C8; }   /* salvia schiarita */
.contact[data-kind="instagram"] .contact-icon { background: #E4D4D0; }  /* rosa cipria schiarito */
.contact-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--cocoa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-text { display: grid; min-width: 0; }
.contact-label { color: var(--quiet); font-size: 0.82rem; }
.contact-value { font-weight: 600; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Chi è Fabrizia ---------- */

#about .sheet-head { position: relative; z-index: 1; justify-content: flex-end; }
#about .sheet-head .quiet-btn { background: rgba(251, 249, 244, 0.92); }
.about-peony { position: absolute; top: 0; left: 0; width: 56%; max-width: 250px; height: auto; pointer-events: none; }
.about-body { position: relative; display: grid; gap: 16px; padding-top: clamp(150px, 46vw, 216px); }
.about-body .lockup { margin: 0; }
.about-role { margin-top: 10px; font-weight: 600; }
.about-portrait { display: grid; gap: 14px; font-size: 1.04rem; }
.about-portrait p:first-child { font-family: var(--font-display); font-size: 1.42rem; line-height: 1.32; }
.about-body .quote { margin: 4px 0; border-left-color: var(--rose); }
.about-body h3 { margin-top: 6px; }
.voice-natural { display: grid; gap: 4px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font-weight: 500; font-size: 1rem; }
input[role="switch"] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: 50px; height: 28px; margin: 0; border-radius: 999px; background: var(--stone); cursor: pointer; transition: background 0.2s ease;
}
input[role="switch"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory); transition: transform 0.2s ease; }
input[role="switch"]:checked { background: var(--cocoa); }
input[role="switch"]:checked::before { transform: translateX(22px); }
input[role="switch"]:disabled { opacity: 0.5; cursor: default; }
.confirm { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--care); border-radius: 8px; }

/* ---------- Navigazione ---------- */

.tabs {
  grid-row: 3; grid-column: 1;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 0 2px env(safe-area-inset-bottom);
  border-top: 2px solid var(--gold);
  background: var(--forest);
}
/* Verde bosco con testo avorio; la scheda aperta in oro, con un tratto d'oro in alto. */
.tab { position: relative; min-height: 56px; padding: 0 1px; border: 0; background: none; color: #E9E4D8; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; }
.tab[aria-current="page"] { color: var(--gold-light); font-weight: 700; background: linear-gradient(to bottom, rgba(220, 195, 140, 0.16), transparent 80%); }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: -2px; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-light); }
.tab:focus-visible { outline-color: var(--gold-light); outline-offset: -4px; }
.tab.is-ai { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.ai-badge {
  display: inline-block; padding: 1px 6px 0; border-radius: 999px;
  background: var(--gold-light); color: var(--forest-deep);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.5; vertical-align: 2px;
}
.presence .ai-badge { background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--gold); }

/* ---------- Benvenuto ---------- */

.welcome { position: fixed; inset: 0; z-index: 30; overflow-y: auto; display: grid; background: var(--ivory); }
.welcome-inner { width: 100%; max-width: 31em; margin: auto; padding: calc(30px + env(safe-area-inset-top)) 28px calc(34px + env(safe-area-inset-bottom)); }
.lockup { margin-bottom: 30px; }
.lockup-name .brand-name { font-size: 1.5rem; }
.lockup-name .brand-title { margin-top: 4px; font-size: 1.02rem; }
.lockup-payoff { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--quiet); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
.lockup-payoff::after { content: ""; flex: 1; height: 1px; background: var(--stone); }
.welcome-step { display: grid; gap: 18px; justify-items: start; }
.welcome h1:focus { outline: none; }
.welcome-step > p:not(.hint) { font-size: 1.06rem; }
.plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.plain li { padding-left: 20px; position: relative; }
.plain li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.check-row { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 500; font-size: 1rem; }
.check-row input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--cocoa); }

/* ---------- Fogli: aiuto, respiro, esercizio ---------- */

.sheet-wrap { --wash: var(--ivory); position: fixed; inset: 0; z-index: 40; display: grid; align-items: end; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(60, 48, 40, 0.45); }
.sheet {
  position: relative; width: 100%; max-width: 560px; max-height: 90%; margin: 0 auto;
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 14px; align-content: start;
  padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
  border-radius: 14px 14px 0 0;
  background: var(--ivory) linear-gradient(to bottom, var(--wash) 0, var(--ivory) 170px) no-repeat;
  animation: rise 0.26s ease-out;
}
.sheet.is-tall { max-height: 95%; }
.sheet:focus { outline: none; }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-head h2 { font-size: 1.8rem; text-wrap: balance; }
.help-lead { font-weight: 600; }
.emergency { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--care); border-radius: 8px; }
.emergency strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.emergency a { color: var(--cocoa); text-underline-offset: 4px; }
.help-lines { display: grid; gap: 12px; }
.line-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--stone); border-radius: 8px; background: var(--surface); }
.line-card .who { font-weight: 700; }
.line-card .number { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.line-card .small { color: var(--quiet); font-size: 0.9rem; }
.directory { display: block; padding: 12px 14px; border: 1px solid var(--stone); border-radius: 8px; font-weight: 700; }

.breath-stage { display: grid; place-items: center; height: 210px; }
.breath-stage span {
  width: 116px; height: 116px; border-radius: 50%;
  border: 1px solid var(--taupe); background: var(--champagne);
  transform: scale(1); transition: transform 0.8s ease;
}
.breath-stage[data-phase="in"] span { transform: scale(1.5); transition: transform 4s ease-in-out; }
.breath-stage[data-phase="out"] span { transform: scale(0.85); transition: transform 6s ease-in-out; }
.breath-cue { min-height: 1.4em; font-family: var(--font-display); font-style: italic; font-size: 1.6rem; line-height: 1.2; }
#breath .primary { justify-self: start; }

/* ---------- Le aree ---------- */

.home-areas { align-self: stretch; display: grid; gap: 14px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--gold); }
.area-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.area-card, .tool-card {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 12px; text-align: left;
  border: 1px solid var(--line, var(--stone)); border-radius: 14px; background: var(--card-wash, var(--surface));
  color: var(--cocoa); box-shadow: 0 1px 0 rgba(60, 48, 40, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.area-card:hover, .tool-card:hover { border-color: var(--card-tone, var(--gold)); box-shadow: 0 6px 18px rgba(60, 48, 40, 0.08); }
.area-card:active, .tool-card:active { transform: scale(0.99); }
.area-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card-tone, var(--champagne)); }
.area-icon .icon { width: 24px; height: 24px; fill: none; stroke: var(--card-ink, var(--cocoa)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.area-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.area-text strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.15; }
.area-text span { color: var(--quiet); font-size: 0.88rem; line-height: 1.4; }
.icon.chevron { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Un colore della palette per ogni area */
.c-rose { --card-tone: #E4CFC9; --card-wash: #F6EEEA; --card-ink: var(--rose-deep); }
.c-sage { --card-tone: #D3D6C5; --card-wash: #F1F1EA; --card-ink: var(--sage-deep); }
.c-gold { --card-tone: var(--gold-soft); --card-wash: #F8F2E4; --card-ink: var(--gold-deep); }
.c-cocoa { --card-tone: #DCD2C8; --card-wash: #F2EDE7; --card-ink: var(--cocoa); }
.c-champagne { --card-tone: var(--champagne); --card-wash: #F7F1E8; --card-ink: var(--cocoa); }
.c-forest { --card-tone: #CBD3C6; --card-wash: #EEF1EC; --card-ink: var(--forest); }
.c-taupe { --card-tone: #DDD5CB; --card-wash: #F3EFE9; --card-ink: var(--cocoa); }

.view-area { gap: 22px; }
.area-hero { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--gold); }
.kicker { color: var(--gold-deep); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.area-body { display: grid; gap: 26px; }
.area-section { display: grid; gap: 14px; scroll-margin-top: 12px; }
.area-section > h2 { display: flex; align-items: center; gap: 12px; }
.area-section > h2:focus { outline: none; }
.section-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold-soft); border: 1px solid var(--gold); }
.section-icon .icon { width: 19px; height: 19px; fill: none; stroke: var(--gold-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.area-section + .area-section { padding-top: 22px; border-top: 1px solid var(--line); }
.stack { display: grid; gap: 12px; }
.empty-note { color: var(--quiet); font-style: italic; }
.quiet-link { min-height: 40px; padding: 8px 4px; border: 0; background: none; color: var(--cocoa); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.quiet-link.is-care { color: var(--care); text-decoration-color: var(--care); }
a.primary, a.quiet-btn { display: inline-flex; align-items: center; text-decoration: none; }
a.primary { color: var(--ivory); }
a.quiet-btn { color: var(--cocoa); }
.primary.is-waiting { background: var(--forest); border-color: var(--forest); }
.draft-note { padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--cocoa); font-size: 0.88rem; }
.pre { white-space: pre-wrap; }

/* Salti dentro la pagina: pillole con i colori della sezione */
.jumps { display: flex; flex-wrap: wrap; gap: 8px; }
.jump {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--tone, var(--stone)); background: var(--surface); color: var(--cocoa);
  font-size: 0.86rem; font-weight: 600; text-decoration: none;
}
.jump:hover { background: var(--gold-soft); border-color: var(--gold); }

/* Consenso */
.consent-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--gold); border-radius: 14px; background: #FBF7EE; }
.consent-card.is-compact { margin: 10px 16px 0; padding: 14px; gap: 10px; font-size: 0.94rem; }
.consent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.consent-list li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }

/* Campi numerici */
.num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.num-field { display: grid; gap: 6px; }
.num-wrap { display: flex; align-items: center; gap: 8px; }
.num-wrap input, input[type="number"], input[type="date"], input[type="time"], input[type="url"], input[type="password"] {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--stone); border-radius: 6px; background: var(--surface);
}
.num-wrap input { max-width: 110px; }
.unit { color: var(--quiet); font-size: 0.84rem; }
.field { display: grid; gap: 6px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 0.95rem; }

/* Obiettivi */
.goal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.goal-open { width: 100%; display: grid; gap: 2px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--rose); border-radius: 10px; background: var(--surface); }
.goal.is-done .goal-open { border-left-color: var(--sage); }
.goal-meta { color: var(--quiet); font-size: 0.86rem; }
.letter { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--card-tone); color: var(--card-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.letter.c-forest { background: var(--forest); color: var(--ivory); }
.smart-field label { display: flex; align-items: center; gap: 6px; }
.figure { margin: 0; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.figure.is-small { padding: 8px 10px; }
.figure svg { display: block; width: 100%; height: auto; }
.smart-list { margin: 0; display: grid; gap: 4px; }
.smart-list dt { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 700; }
.smart-list dd { margin: 0 0 0 36px; display: grid; gap: 2px; }
.smart-list em { color: var(--quiet); font-size: 0.9rem; }
.ribbon.c-rose { fill: #C9AAA4; }
.ribbon.c-gold { fill: #C9A75F; }
.ribbon.c-champagne { fill: #E2D2BA; }
.ribbon.c-sage { fill: #A5AA91; }
.ribbon.c-forest { fill: #3F513F; }
.ribbon-letter { font-family: var(--font-display); font-size: 46px; font-weight: 600; fill: #FFFDF8; }
.ribbon-letter.is-dark { fill: var(--cocoa); }
.ribbon-word { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; fill: var(--cocoa); }

/* Piano d'azione */
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.week-label { font-weight: 700; text-align: center; }
.plan-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.plan-grid { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.plan-grid th, .plan-grid td { padding: 8px 2px; border-bottom: 1px solid var(--line); text-align: center; }
.plan-grid thead th { color: var(--quiet); font-weight: 600; font-size: 0.76rem; }
.plan-grid tbody th { text-align: left; font-weight: 600; padding-right: 8px; min-width: 120px; }
.plan-grid input { width: 22px; height: 22px; accent-color: var(--forest); }
.plan-time { display: block; color: var(--quiet); font-weight: 500; font-size: 0.78rem; }
.plan-off { color: var(--stone); }
.plan-title { font-family: var(--font-display); font-size: 1.25rem; }
.plan-progress { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.plan-progress .ring { width: 56px; height: 56px; }
.plan-row { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.day-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.day-pick { position: relative; }
.day-pick input { position: absolute; opacity: 0; inset: 0; }
.day-pick span { display: inline-grid; place-items: center; min-width: 40px; min-height: 36px; padding: 0 6px; border: 1px solid var(--stone); border-radius: 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.day-pick input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.day-pick input:focus-visible + span { outline: 2px solid var(--cocoa); outline-offset: 2px; }
.time-label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.88rem; }
.time-label input { width: auto; }
.row-list { list-style: none; margin: 0; padding: 0; display: grid; }
.row-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--line); }
.row-list li:last-child { border-bottom: 1px solid var(--line); }
.doc-name { display: grid; min-width: 0; overflow-wrap: anywhere; }

/* Grafici */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.ring { width: 72px; height: 72px; }
.ring .track { fill: none; stroke: #EDE6DA; stroke-width: 8; }
.ring .arc { fill: none; stroke: var(--chart, var(--gold)); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.ring-value { font-family: var(--font-ui); font-size: 15px; font-weight: 800; fill: var(--cocoa); }
.chart-card { margin: 0; display: grid; gap: 6px; padding: 12px 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.chart-card figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: #E6DED1; stroke-width: 1; }
.chart .tick { font-family: var(--font-ui); font-size: 9.5px; fill: var(--quiet); }
.chart .empty { font-family: var(--font-ui); font-size: 12px; fill: var(--quiet); font-style: italic; }
.chart .line { fill: none; stroke: var(--chart); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart .dot { fill: var(--chart); stroke: #FFFDF8; stroke-width: 1.2; }
.chart .bar { fill: var(--chart); }
.chart .track { fill: #F0EAE0; }
.c-rose { --chart: #B88E86; }
.c-sage { --chart: #848B6B; }
.c-gold { --chart: #B8964F; }
.c-champagne { --chart: #BFA585; }
.c-forest { --chart: #3F513F; }
.c-taupe { --chart: #8E7F6E; }
.report-lead { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; }
.report-table td { text-align: right; font-weight: 600; }
.report-table thead th { color: var(--quiet); font-size: 0.82rem; }

/* Videoconsulenze */
.next-card { display: grid; gap: 12px; padding: 18px; border-radius: 14px; border: 1px solid var(--gold); background: linear-gradient(135deg, #FBF6EA, #F3E9D2); }
.next-when { font-size: 1.05rem; }
.next-when strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; }
.calendar { display: grid; gap: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { text-align: center; color: var(--quiet); font-size: 0.74rem; font-weight: 700; padding-bottom: 4px; }
.cal-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; background: var(--surface); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.cal-cell.is-blank { background: none; }
.cal-cell.is-today { border-color: var(--gold); font-weight: 800; }
.cal-cell.has-appt { background: var(--forest); color: var(--ivory); font-weight: 700; }
.cal-cell.has-appt::after { content: ""; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); }

/* Percorso e pagamenti */
.plan-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 12px; background: var(--surface); }
.plan-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan-card-head strong { font-family: var(--font-display); font-size: 1.25rem; }
.price { color: var(--gold-deep); font-weight: 700; font-size: 0.9rem; }
.rate-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rate-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.rate-list li.is-paid strong { color: var(--sage-deep); text-decoration: line-through; text-decoration-color: var(--sage); }
.rate-list li.is-late span:first-child { color: var(--care); font-weight: 600; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.86rem; }
.check-inline input { width: 20px; height: 20px; accent-color: var(--forest); }
.pay-methods { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: #EEF1EC; font-size: 0.9rem; }
.path-status { padding: 10px 12px; border-radius: 10px; background: var(--surface); border-left: 4px solid var(--sage); }
.path-status.is-expiring { border-left-color: var(--gold); }
.path-status.is-expired { border-left-color: var(--care); }
.notice { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--stone); border-radius: 12px; background: var(--surface); }
.lang-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--stone); border-radius: 999px; background: var(--surface); font-weight: 600; }
.lang-btn[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.lang-btn .flag { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(60, 48, 40, 0.18); }

/* Coaching nel Percorso */
.coaching-block { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--gold); }
.tool-cards { display: grid; gap: 12px; }
.sleep-wheel { max-width: 300px; margin: 0 auto; }
.sleep-wheel .orbit { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 4; }
.sleep-wheel .core { fill: #EEF1EC; stroke: var(--sage); stroke-width: 1.2; }
.sleep-wheel .core-icon { fill: none; stroke: var(--forest); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sleep-wheel .badge { stroke: #FFFDF8; stroke-width: 2; }
.sleep-wheel .badge.c-sage { fill: #D3D6C5; }
.sleep-wheel .badge.c-rose { fill: #E4CFC9; }
.sleep-wheel .badge-icon { fill: none; stroke: var(--cocoa); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sleep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sleep-list li { display: flex; align-items: center; gap: 12px; }
.badge-sm { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--card-tone); }
.badge-sm .icon { width: 18px; height: 18px; fill: none; stroke: var(--cocoa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Area professionista */
.pro-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.locked, .unlocked { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.locked .icon, .unlocked .icon, .pro-tile-head .icon, .pay-methods .icon { width: 20px; height: 20px; fill: none; stroke: var(--gold-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pro-tiles { display: grid; gap: 10px; }
.pro-tile { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; background: var(--surface); }
.pro-tile-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pro-tile-head strong { margin-left: auto; font-family: var(--font-ui); font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1; color: var(--gold-deep); }
.plain.small { gap: 4px; font-size: 0.88rem; }
.client-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.client-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; }
.client-text { flex: 1; display: grid; min-width: 0; }
.client-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--forest); color: var(--gold-light); font-weight: 800; font-size: 0.9rem; }
.client-avatar.is-big { width: 56px; height: 56px; font-size: 1.15rem; }
.client-head { display: flex; align-items: center; gap: 14px; }
.demo-badge { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--gold-soft); border: 1px solid var(--gold); color: var(--gold-deep); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pro-tabs { flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.facts dt { color: var(--quiet); font-size: 0.88rem; }
.facts dd { margin: 0; font-weight: 600; }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note-list li { display: grid; gap: 4px; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 10px; border-left: 2px solid var(--gold); }
.timeline li { position: relative; display: grid; }
.timeline li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-light); border: 2px solid var(--gold); }
.panel-body { display: grid; gap: 14px; }

/* ---------- Pagine privacy e condizioni ---------- */

.doc { height: auto; }
.doc-page { max-width: 40em; margin: 0 auto; padding: 36px 24px 72px; display: grid; gap: 14px; }
.doc-page h2 { margin-top: 16px; }
.doc-page ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.doc-page a { color: var(--cocoa); text-underline-offset: 3px; }
.template-banner { padding: 14px 16px; border: 1px solid var(--care); border-radius: 8px; color: var(--care); font-weight: 600; }
.noscript { max-width: 30em; margin: 40px auto; padding: 0 24px; }

@media (min-width: 600px) { .app { border-inline: 1px solid var(--champagne); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ==========================================================================
   Modifiche 4: l'ingresso con la frase del giorno, la Home, le tre sezioni,
   i percorsi, i rituali olistici. Rifiniture in champagne e oro antico.
   ========================================================================== */

/* ---------- L'ingresso ---------- */
/* Una cartolina botanica: fondo salvia, un ovale color pergamena con doppia cornice d'oro,
   una ghirlanda di foglie e due sole peonie. Più verde che fiori: elegante, non leziosa. */
.splash {
  position: fixed; inset: 0; z-index: 40; overflow: hidden;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 42%, rgba(239, 232, 214, 0.5) 0, rgba(239, 232, 214, 0) 60%),
    radial-gradient(circle at 8% 92%, rgba(201, 170, 164, 0.22) 0, rgba(201, 170, 164, 0) 38%),
    linear-gradient(165deg, #BFC5AE 0%, #ABB398 55%, #9DA68A 100%);
  color: var(--cocoa);
}
.splash-stage { position: relative; align-self: center; width: min(88vw, 400px, calc((100dvh - 150px) * 0.78)); aspect-ratio: 360 / 460; }
.splash-garland { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-ring { fill: none; stroke: var(--gold); stroke-width: 1.6; }
.g-ring.is-thin { stroke-width: 0.8; stroke: #CDB27A; }
.g-bud { fill: #EAD7CC; stroke: #C9AAA4; stroke-width: 0.6; }
.g-bud-heart { fill: #D9B9AF; }
.g-berry { fill: var(--gold-light); }
.splash-oval {
  position: absolute; left: 10.5%; top: 8.3%; width: 79%; height: 83.4%;
  display: grid; place-content: center; justify-items: center; gap: 14px; padding: 12% 11%; text-align: center;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #FCF7EE 0, #F6ECDC 64%, #EEDFC6 100%);
  box-shadow: inset 0 0 0 1px rgba(184, 150, 79, 0.35), 0 16px 40px rgba(47, 61, 48, 0.28);
}
.splash-date { color: var(--gold-deep); font-family: var(--font-display); font-style: italic; font-size: 1rem; }
.splash-date::first-letter { text-transform: uppercase; }
.splash-phrase { font-family: var(--font-display); font-size: clamp(1.55rem, 7vw, 2.05rem); font-weight: 500; line-height: 1.22; text-wrap: balance; color: #4E4038; }
.splash-rule { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.splash-brand { color: var(--gold-deep); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; }
.splash-bloom { position: absolute; z-index: 1; height: auto; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 58%, transparent 100%); }
.splash-bloom.is-top { width: 40%; top: -9%; left: -14%; transform: rotate(-14deg); }
.splash-bloom.is-bottom { width: 34%; bottom: -8%; right: -10%; transform: rotate(168deg); }
.splash-foot { position: relative; width: min(100%, 420px); display: grid; justify-items: center; gap: 4px; padding-top: 4px; }
.splash-enter {
  grid-row: 2; min-width: 148px; min-height: 50px; padding: 0 30px; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--forest); color: var(--gold-light);
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  box-shadow: 0 0 0 4px rgba(239, 228, 201, 0.55), 0 10px 24px rgba(47, 61, 48, 0.3);
}
.splash-enter:focus-visible { outline: 2px solid var(--ivory); outline-offset: 5px; }
.splash-signature {
  grid-row: 1; justify-self: end; margin: 0 6px 4px 0;
  font-family: 'Herr Von Muellerhoff', 'Snell Roundhand', 'Apple Chancery', cursive;
  font-size: clamp(1.7rem, 7.4vw, 2.3rem); line-height: 1; white-space: nowrap; color: #3C342C;
  transform: rotate(-4deg); transform-origin: right bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .splash:not([hidden]) .splash-oval { animation: splash-in 0.9s ease both; }
  .splash:not([hidden]) .splash-phrase { animation: splash-in 1.1s 0.25s ease both; }
}
@keyframes splash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- La Home ---------- */
.home-hero {
  position: relative; display: grid; justify-items: center; gap: 22px; text-align: center;
  padding: calc(76px + env(safe-area-inset-top)) 26px 40px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(239, 228, 201, 0.9) 0, rgba(239, 228, 201, 0) 70%),
    linear-gradient(to bottom, #F3EBDD, var(--ivory));
}
.home-hero::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.home-hero .lockup { margin: 0; display: grid; justify-items: center; }
.home-hero .lockup-name { align-items: center; }
.home-hero .lockup-payoff { color: var(--gold-deep); }
.home-hero .lockup-fields { color: var(--quiet); }
/* Il titolo in corsivo elegante: l'unico gesto grande della Home. */
.script-title:focus { outline: none; }
.script-title {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(2.5rem, 11.5vw, 3.3rem); line-height: 1.04; letter-spacing: -0.01em; color: #4E4038;
}
.script-title::after { content: ""; display: block; width: 92px; height: 10px; margin: 14px auto 0; background:
  radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px) center / 10px 10px no-repeat,
  linear-gradient(var(--gold), var(--gold)) left center / 38px 1px no-repeat,
  linear-gradient(var(--gold), var(--gold)) right center / 38px 1px no-repeat; }
.primary.is-gold { border-color: var(--gold); background: var(--gold-deep); color: #FBF6EA; box-shadow: inset 0 0 0 1px rgba(239, 228, 201, 0.35); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.home-hero .primary.is-gold { max-width: 22em; min-height: 52px; padding: 13px 26px; border-radius: 999px; line-height: 1.3; }
.home-body .home-areas { padding-top: 22px; }
.hub-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/* La frase dell'app che si scrive da sola. */
.typed { align-self: stretch; display: grid; gap: 12px; padding: 4px 0 6px; cursor: default; }
.typed-p { font-size: 1.04rem; }
.typed-p.is-lead { font-family: var(--font-display); font-size: 1.62rem; line-height: 1.2; font-weight: 500; color: #4E4038; }
.typed-p.is-close { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--gold-deep); padding-top: 4px; }
.tw-word { white-space: nowrap; }
.tw { opacity: 0; animation: tw-in 0.12s ease-out forwards; }
.typed.is-done .tw { animation: none; opacity: 1; }
.tw-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--gold); opacity: 0; animation: tw-in 0.01s forwards, tw-blink 1s steps(2) infinite; }
.typed.is-done .tw-caret { animation: none; opacity: 0; }
@keyframes tw-in { to { opacity: 1; } }
@keyframes tw-blink { 50% { opacity: 0; } }

/* ---------- Le sezioni e le briciole ---------- */
.hub-hero { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--gold); }
.hub-hero h1 { font-size: 2.5rem; }
.hub-hero h1::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 10px; background: var(--gold); }
.crumb {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: -10px 0 -6px -4px; padding: 4px 12px 4px 8px;
  border: 1px solid transparent; border-radius: 999px; background: rgba(251, 249, 244, 0.7); color: var(--gold-deep); font-size: 0.86rem; font-weight: 700;
}
.crumb::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.crumb:hover { border-color: var(--gold); }

/* ---------- I percorsi ---------- */
.plan-offer { display: grid; gap: 12px; padding: 20px 18px; border: 1px solid var(--stone); border-radius: 16px; background: var(--surface); }
.plan-offer.is-featured { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.plan-offer h2 { font-size: 1.6rem; }
.plan-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-meta span { padding: 3px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-deep); font-size: 0.8rem; font-weight: 700; }
.plan-for { font-family: var(--font-display); font-style: italic; font-size: 1.12rem; }
.plan-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-includes li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; }
.plan-includes .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--sage-deep); stroke-width: 1.8; stroke-linecap: round; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.plan-price .quiet { font-family: var(--font-ui); font-size: 0.86rem; font-weight: 500; }

/* ---------- Rituali olistici ---------- */
.belief-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px; border: 1px solid var(--gold); border-radius: 14px; background: linear-gradient(135deg, #FBF6EA, var(--gold-soft)); }
.belief-card h2 { font-size: 1.2rem; margin-bottom: 2px; }
.belief-card p { font-size: 0.9rem; line-height: 1.5; }
.belief-card p + p { margin-top: 8px; }
.belief-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--gold); }
.belief-mark .icon { width: 20px; height: 20px; fill: none; stroke: var(--gold-deep); stroke-width: 1.6; stroke-linejoin: round; }
.segments.is-main { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
.segments.is-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; background: none; }
.segments.is-sub .segment { flex: 1 1 auto; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.segments.is-sub .segment[aria-pressed="true"] { border-color: var(--gold); background: var(--forest); color: var(--gold-light); }
#view-casa .panel { display: flex; flex-direction: column; gap: 18px; }
#view-casa .panel[hidden] { display: none; }

.stones { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stone { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.stone-figure { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #FFFFFF, #EFE8DC); box-shadow: inset 0 0 0 1px rgba(184, 150, 79, 0.25); }
.stone-art { width: 88%; height: auto; }
.stone-text { display: grid; gap: 6px; }
.stone-text h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.stone-color { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 700; color: var(--gold-deep); }
.swatch { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(60, 48, 40, 0.2); }
.stone-meaning { font-style: italic; color: var(--cocoa); }
.stone-text p:last-child { color: var(--quiet); font-size: 0.92rem; }

.colors { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.color-row { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.color-chip { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 4px var(--ivory), 0 0 0 5px var(--gold); }
.color-row h3 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; }
.color-rooms { font-size: 0.9rem; }

.device-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.device { display: grid; gap: 4px; padding: 14px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--surface); }
.device-names { color: var(--gold-deep); font-size: 0.84rem; font-weight: 700; }
.visit-form { padding: 18px 16px; border: 1px solid var(--gold); border-radius: 14px; background: #FBF6EA; }
.visit-form p { color: var(--cocoa); }
.cost-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--gold-soft); font-weight: 600; }
.cost-note .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--gold-deep); stroke-width: 1.7; stroke-linecap: round; }
.links { display: flex; flex-wrap: wrap; gap: 16px; }

/* Tocco champagne e oro antico sulle schede delle sezioni. */
.view-hub .area-card { border-color: var(--line); }
.view-hub .area-card .area-icon { box-shadow: 0 0 0 3px var(--card-wash, var(--surface)), 0 0 0 4px var(--gold-light); }


/* ==========================================================================
   Modifiche 6: cinque voci in basso, Explore con le foto, l'ispirazione di oggi.
   ========================================================================== */

.tab { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 60px; padding: 6px 1px; font-size: 0.72rem; }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tab.is-ai { display: grid; }
.tab-label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tab .ai-badge { font-size: 0.55rem; padding: 0 4px; }
.app[data-view="explore"], #view-explore, .app[data-view="rubrica"], #view-rubrica { --tone: var(--sage); --wash: var(--wash-sage); --line: #CDCEBD; }
.app[data-view="journey"], #view-journey { --tone: var(--rose); --wash: var(--wash-rose); --line: #DFCEC7; }

/* Le cinque rubriche: foto, nome breve, sottotitolo. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tile { width: 100%; display: grid; gap: 8px; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.tile-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 1px rgba(184, 150, 79, 0.25); }
.tiles li:last-child:nth-child(odd) .tile-img { aspect-ratio: 2 / 1; }
.tile-text { display: grid; gap: 1px; }
.tile-text strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.tile-text span { color: var(--quiet); font-size: 0.84rem; }
.tile:active .tile-img { transform: scale(0.99); }

.view-rubrica { gap: 18px; }
.rubric-hero { display: grid; gap: 10px; }
.rubric-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.rubric-n { color: var(--gold-deep); font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }
.rubric-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rubric-items .area-text strong { font-size: 1.2rem; }
.area-card.is-soon { opacity: 0.85; }
.soon { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-deep); font-style: normal; font-size: 0.72rem; font-weight: 700; }
#view-rubrica h1 { font-size: 2rem; }

/* L'ispirazione di oggi. */
.inspiration { align-self: stretch; overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--gold-light), 0 12px 28px rgba(60, 48, 40, 0.08); }
.insp-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.insp-text { display: grid; gap: 8px; padding: 16px 18px 18px; }
.insp-kicker { color: var(--sage-deep); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.insp-phrase { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; }
.insp-gesture { color: var(--quiet); font-size: 0.94rem; }
.insp-gesture span:first-child { font-weight: 700; color: var(--gold-deep); }

/* Gli articoli. */
.article-list { display: grid; gap: 12px; }
.article-card { width: 100%; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line, var(--stone)); border-radius: 14px; background: var(--surface); color: inherit; text-align: left; }
.article-img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.article-text { display: grid; gap: 3px; }
.article-text strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.article-rubric { color: var(--gold-deep); font-size: 0.74rem; font-weight: 700; }
.article-hero { width: 100%; border-radius: 14px; }
.info-card { display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tests { display: grid; gap: 10px; margin: 0; }
.tests div { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tests dt { font-weight: 700; }
.tests dd { margin: 2px 0 0; color: var(--quiet); }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.month-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; }
.season-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.big { font-family: var(--font-display); font-size: 2rem; font-weight: 500; }
.phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.phases li { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.phase-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-deep); font-family: var(--font-display); font-size: 1.1rem; }
.insp-img { object-position: 50% 40%; }