/* ===== Photonico · pagine interne (26/09/2026) =====
   Le regole che le pagine del sito condividono. Le home (13009, 13012, home-v2) portano il loro
   stile inline e non lo usano; qui stanno solo i componenti che le pagine interne riprendono
   dalla Home (.ph-reel, .ph-list, .ph-2col, .ph-cta-riga, .ph-numeri) più i pochi nuovi:
   la testa di pagina (.ph-testa, sopra il mini-hero del tema), la sotto-navigazione delle
   pagine di Come funziona (.ph-sottonav), il numero grande delle Note (.ph-numero) e il
   legame fra note (.ph-note-nav). Si carica dopo photonico-ds.css (mu-plugin photonico-staging.php). */

/* --- ripresi dalla Home (identici) --- */
.ph-reel .wp-block-image{ margin:0 }
.ph-reel .wp-block-image img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block }
.ph-reel .kicker{ margin:10px 0 0 }
.ph-reel.ph-reel--alta .wp-block-image img{ aspect-ratio:4/5 }
.ph-reel.ph-reel--larga .wp-block-image img{ aspect-ratio:3/2 }
@media(max-width:980px){
  .wp-block-columns.ph-reel{ flex-wrap:wrap; gap:16px }
  .wp-block-columns.ph-reel>.wp-block-column{ flex-basis:calc(50% - 8px)!important; flex-grow:0 }
}
.ph-list{ margin:0; padding-left:1.1em }
.ph-list li{ margin:.55em 0; line-height:1.5 }
.porta .ph-list li{ color:var(--mute); max-width:46ch }
@media(min-width:981px){
  .leadcols .cols.ph-2col{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ph-numeri{ grid-template-columns:repeat(5,minmax(0,1fr)) }
  .ph-numeri--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
.ph-cta-riga{ margin-top:26px }
.ph-strip .kicker{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em }
.ph-strip .kicker b{ color:var(--ink) }

/* --- la testa di pagina: mini-hero scuro del tema, attaccato alla fascetta nera --- */
.ph-testa{ border-top:0; margin-top:0; padding:clamp(48px,6vw,84px) 0 clamp(44px,5.4vw,72px) }
.ph-testa .mh-crumb, .ph-testa .mh-crumb a{ color:#9a9893 }
.ph-testa .mh-crumb a:hover{ color:#fff }
.ph-testa .mh-eyebrow{ color:#b7b5af; font-family:var(--display); font-weight:500; letter-spacing:.12em; text-transform:uppercase }
.ph-testa h1{ color:var(--paper); font-weight:500; letter-spacing:-0.018em; line-height:1.06; max-width:22ch; font-size:clamp(34px,4.6vw,64px) }
.ph-testa h1 .hl-mark{ background:var(--paper); color:var(--ink); border-radius:3px; padding:.02em .22em }
.ph-testa .mh-lead{ color:#c8c6c2; max-width:62ch; font-size:var(--fs-lead); line-height:1.55; margin-top:18px }
.ph-testa .ph-sottonav{ margin:34px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#9a9893; line-height:2 }
.ph-testa .ph-sottonav a{ color:#fff; text-decoration:none; margin-right:18px }
.ph-testa .ph-sottonav a:hover{ text-decoration:underline; text-underline-offset:.2em }
.ph-testa .ph-sottonav a.is-qui{ color:#9a9893; pointer-events:none }

/* --- corpo delle pagine: colonna di lettura --- */
.ph-lettura p, .ph-lettura li{ max-width:66ch }
.ph-lettura h3{ margin-top:clamp(26px,3vw,40px); max-width:30ch }
.ph-lettura h3:first-child{ margin-top:0 }
.ph-lettura p + p{ margin-top:1em }
.ph-lettura .ph-chiusa{ margin-top:clamp(28px,3.4vw,44px); font-family:var(--display); font-weight:500; font-size:var(--fs-titolo-s); line-height:1.3; max-width:34ch }
.ph-lettura .ph-rimando{ font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-top:14px }
.ph-lettura .ph-rimando a{ text-decoration:none; border-bottom:1px solid currentColor }

/* immagine di apertura di una sezione, a fianco del testo */
.ph-figura .wp-block-column .wp-block-image{ margin:0 }
.ph-figura .wp-block-column .wp-block-image img{ width:100%; height:auto; display:block }
.ph-figura .kicker{ margin:10px 0 0 }
@media(min-width:782px){
  .ph-figura{ align-items:flex-start }
  /* la larghezza delle colonne sta qui e non nell'attributo width del blocco: così il wrapper non porta uno style inline */
  .ph-figura > .wp-block-column:first-child{ flex:0 0 33.33% }
  .ph-figura.ph-figura--meta > .wp-block-column:first-child{ flex:0 0 50% }
}

/* --- le Note dallo studio --- */
.ph-numero{ font-family:var(--display); font-weight:300; font-size:clamp(44px,7vw,104px); line-height:.95; letter-spacing:-0.02em; color:var(--ph-viola,#6E3A8E); margin:0 0 6px }
.ph-numero-cosa{ font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:0 0 clamp(26px,3vw,40px) }
.ph-note-nav{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:clamp(28px,3.4vw,44px); padding-top:22px; border-top:1px solid var(--rule); font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase }
.ph-note-nav a{ text-decoration:none; color:var(--ink) }
.ph-note-nav a:hover{ text-decoration:underline; text-underline-offset:.2em }
.benefit .ph-numero-piccolo{ font-family:var(--display); font-weight:300; font-size:clamp(30px,3vw,42px); line-height:1; color:var(--ph-viola,#6E3A8E); margin:0 0 10px }
.benefit .ph-leggi{ margin-top:auto; padding-top:14px; font-family:var(--display); font-weight:500; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase }
.benefit .ph-leggi a{ text-decoration:none; color:var(--ink); border-bottom:1px solid currentColor }

/* --- settori: lo stato in evidenza --- */
.ph-stato{ display:inline-block; font-family:var(--display); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:.5em .8em; border:1px solid var(--ink); border-radius:3px; margin:0 0 18px }
.ph-stato--misurato{ background:var(--ink); color:var(--paper) }

/* --- due colonne di testo (per chi è / per chi no; le due letture) --- */
@media(min-width:782px){ .ph-due{ gap:clamp(28px,4vw,64px) } }
.ph-due .ch{ margin-bottom:10px }

/* --- il modulo: stesso blocco della Home, senza il margine bianco sopra --- */
.sec-form-hs.ph-form{ border-top:0 }
.ph-form h2{ max-width:24ch }

/* ===== Come funziona · i cinque passi con la vista a destra (26/09/2026, sera) =====
   .biglist.ph-passi: la lista numerata del tema con una terza colonna (.ph-vista) per la carta.
   .row.ph-sotto: sotto-riga dello stesso passo (i posti e lo styling dentro il 02): niente numero,
   niente filetto a tutta larghezza; il titolo h4 porta un filetto solo sopra il testo.
   .ph-carta: la carta della colonna destra, con la riga del marchio in testa come le tessere (.feat).
   (.ph-kom, la carta su nero col marchio KOM, non c'è più dal 03/10 sera: la carta di KOM è come le altre.)
   .ph-giro: immagini impilate che si danno il cambio da sole, solo CSS, da 2 a 8 (.ph-giro--N);
   la forma la dà .ph-giro--ritratto (4:5) · --figura (2:3) · --quadrato (1:1). Si ferma sotto il mouse,
   e con «riduci movimento» resta la prima. La didascalia sta sotto la foto (niente veli sopra). */
.ph-passi .ph-vista{ align-self:start; min-width:0 }
.ph-passi .ph-passo-testo{ min-width:0 }
.ph-passi .ph-passo-testo > p + p{ margin-top:.85em }
.ph-passi .ph-passo-testo h4{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-lead); line-height:1.25; letter-spacing:-.005em; color:var(--ink); margin:clamp(24px,2.6vw,34px) 0 8px; padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--rule) }
.ph-passi .ph-sotto .ph-passo-testo h4:first-child{ margin-top:0 }
.ph-passi .ph-rimando{ margin-top:14px; font-family:var(--display); font-weight:var(--fw-etichetta); font-size:13px; letter-spacing:.08em; text-transform:uppercase }
.ph-passi .ph-rimando a{ color:var(--ink); text-decoration:none; border-bottom:1px solid currentColor }
@media(min-width:981px){
  .biglist.ph-passi .row{ grid-template-columns:110px minmax(0,1fr) minmax(0,400px); column-gap:clamp(32px,4vw,64px); padding:clamp(36px,4vw,56px) 0 }
  .biglist.ph-passi .row.ph-sotto{ border-top:0; padding-top:0 }
  .biglist.ph-passi .row.ph-sotto > .ph-passo-testo{ grid-column:2 }
  .biglist.ph-passi .row.ph-sotto > .ph-vista{ grid-column:3 }
}
@media(max-width:980px){
  .biglist.ph-passi .row > .ph-vista{ grid-column:1 / -1; margin-top:4px }
  .biglist.ph-passi .row.ph-sotto{ border-top:0; padding-top:0 }
  .biglist.ph-passi .row.ph-sotto > .ph-passo-testo{ grid-column:2 }
}
/* sul telefono il numero va sopra il testo: accanto, al testo restavano 187 px */
@media(max-width:600px){
  .biglist.ph-passi .row{ grid-template-columns:minmax(0,1fr); row-gap:12px }
  .biglist.ph-passi .row.ph-sotto > .ph-passo-testo{ grid-column:1 }
}

/* la carta */
.ph-carta{ position:relative; max-width:400px; background:var(--paper); border:1px solid var(--rule); padding:clamp(16px,1.5vw,22px) }
.ph-carta::before{ content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:3px; background:var(--ph-gradiente) }
.ph-passi .ph-carta-testa{ margin:2px 0 14px; max-width:none; font-family:var(--display); font-weight:var(--fw-etichetta); font-size:12px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--ink) }

/* la carta KOM: dal 03/10 sera bianca come le altre e senza il marchio (Dario); il testo è quello della pagina.
   Il prisma a contorno, le ultime due facce (il brief del casting) piene di nero. */
.ph-passi .ph-carta .ph-carta-etichetta{ margin:20px 0 10px; font-family:var(--display); font-weight:var(--fw-etichetta); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute) }
.ph-prisma{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.ph-prisma li{ margin:0; padding:.55em .8em; border:1px solid var(--rule); border-radius:3px; font-family:var(--display); font-weight:var(--fw-etichetta); font-size:12px; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; color:var(--ink) }
.ph-prisma li:nth-last-child(-n+2){ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.ph-passi .ph-carta .ph-carta-nota{ margin-top:12px; font-size:14px; color:var(--ink) }
.ph-passi .ph-carta .ph-rimando{ margin-top:18px }

/* il giro */
.ph-giro{ --t:3.6s; display:grid; counter-reset:giro 0 tot var(--n,1) }
/* ogni foto ha il fondo pieno: quella sopra copre del tutto quelle sotto, didascalie comprese */
.ph-giro > .wp-block-image{ grid-area:1 / 1; margin:0; min-width:0; opacity:0; background:var(--paper); counter-increment:giro;
  animation:var(--giro,none) calc(var(--n,1) * var(--t)) linear calc((var(--i,0) - var(--n,1)) * var(--t) - var(--t) / 4 - var(--off,0s)) infinite }
/* la didascalia non sfuma insieme alla foto: esce prima, poi entra la nuova (due testi sovrapposti non si leggono) */
.ph-giro > .wp-block-image figcaption{ animation:var(--giro-cap,none) calc(var(--n,1) * var(--t)) linear calc((var(--i,0) - var(--n,1)) * var(--t) - var(--t) / 4 - var(--off,0s)) infinite }
/* il giro parte un quarto di passo dentro la prima foto: se partisse sul cambio, all'apertura si vedrebbe
   l'ultima sfumare sopra la prima. Due carte vicine non cambiano nello stesso istante: le righe pari sono
   sfasate di 1,3 s (di più, la pari partirebbe già a metà di un cambio) */
.biglist.ph-passi > .row:nth-child(even) .ph-giro{ --off:1.3s }
.ph-giro > .wp-block-image:first-child{ opacity:1 }
.ph-giro > :nth-child(2){ --i:1 } .ph-giro > :nth-child(3){ --i:2 } .ph-giro > :nth-child(4){ --i:3 }
.ph-giro > :nth-child(5){ --i:4 } .ph-giro > :nth-child(6){ --i:5 } .ph-giro > :nth-child(7){ --i:6 } .ph-giro > :nth-child(8){ --i:7 }
.ph-giro--2{ --n:2; --giro:ph-giro-2; --giro-cap:ph-giro-cap-2 } .ph-giro--3{ --n:3; --giro:ph-giro-3; --giro-cap:ph-giro-cap-3 } .ph-giro--4{ --n:4; --giro:ph-giro-4; --giro-cap:ph-giro-cap-4 } .ph-giro--5{ --n:5; --giro:ph-giro-5; --giro-cap:ph-giro-cap-5 }
.ph-giro--6{ --n:6; --giro:ph-giro-6; --giro-cap:ph-giro-cap-6 } .ph-giro--7{ --n:7; --giro:ph-giro-7; --giro-cap:ph-giro-cap-7 } .ph-giro--8{ --n:8; --giro:ph-giro-8; --giro-cap:ph-giro-cap-8 }
/* ogni immagine resta piena per un passo (--t), poi sfuma in un quarto di passo sotto la successiva */
@keyframes ph-giro-2{ 0%{opacity:1} 50%{opacity:1} 62.5%{opacity:0} 87.5%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-3{ 0%{opacity:1} 33.333%{opacity:1} 41.667%{opacity:0} 91.667%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-4{ 0%{opacity:1} 25%{opacity:1} 31.25%{opacity:0} 93.75%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-5{ 0%{opacity:1} 20%{opacity:1} 25%{opacity:0} 95%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-6{ 0%{opacity:1} 16.667%{opacity:1} 20.833%{opacity:0} 95.833%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-7{ 0%{opacity:1} 14.286%{opacity:1} 17.857%{opacity:0} 96.429%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-8{ 0%{opacity:1} 12.5%{opacity:1} 15.625%{opacity:0} 96.875%{opacity:0} 100%{opacity:1} }
/* la didascalia: piena finché la foto è sola, via nella prima metà del cambio, dentro nella seconda */
@keyframes ph-giro-cap-2{ 0%{opacity:1} 37.5%{opacity:1} 43.75%{opacity:0} 93.75%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-cap-3{ 0%{opacity:1} 25%{opacity:1} 29.167%{opacity:0} 95.833%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-cap-4{ 0%{opacity:1} 18.75%{opacity:1} 21.875%{opacity:0} 96.875%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-cap-5{ 0%{opacity:1} 15%{opacity:1} 17.5%{opacity:0} 97.5%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-cap-6{ 0%{opacity:1} 12.5%{opacity:1} 14.583%{opacity:0} 97.917%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-cap-7{ 0%{opacity:1} 10.714%{opacity:1} 12.5%{opacity:0} 98.214%{opacity:0} 100%{opacity:1} }
@keyframes ph-giro-cap-8{ 0%{opacity:1} 9.375%{opacity:1} 10.938%{opacity:0} 98.438%{opacity:0} 100%{opacity:1} }
.ph-giro img{ display:block; width:100%; height:auto; aspect-ratio:var(--ar,4/5); object-fit:cover }
.ph-giro--ritratto{ --ar:4/5 } .ph-giro--ritratto img{ object-position:50% 26% }
.ph-giro--figura{ --ar:2/3 }
.ph-giro--quadrato{ --ar:1/1 }
.ph-giro .wp-block-image figcaption{ margin:12px 0 0; text-align:left; font-family:var(--display); font-weight:400; font-size:13px; line-height:1.5; letter-spacing:.02em; color:var(--mute) }
.ph-giro .wp-block-image figcaption strong{ color:var(--ink); font-weight:var(--fw-titolo) }
.ph-giro .wp-block-image figcaption::before{ content:counter(giro,decimal-leading-zero) " / " counter(tot,decimal-leading-zero); display:block; margin-bottom:3px; font-size:11px; font-weight:var(--fw-etichetta); letter-spacing:.14em; color:var(--ph-viola) }
.ph-giro:hover > .wp-block-image, .ph-giro:hover figcaption{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){
  .ph-giro > .wp-block-image, .ph-giro figcaption{ animation:none }
  .ph-giro > .wp-block-image:not(:first-child){ display:none }
}

/* le spunte sotto il giro del controllo */
.ph-spunte{ list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--rule) }
.ph-spunte li{ position:relative; margin:0; padding:9px 0 9px 24px; border-bottom:1px solid var(--rule); font-family:var(--read); font-size:14.5px; line-height:1.45; color:var(--ink) }
.ph-spunte li::before{ content:"✓"; position:absolute; left:2px; top:9px; font-weight:var(--fw-forte); color:var(--ph-viola) }

/* la porta verso la Regia fotografica, dentro il testo del 04 */
.ph-porta-regia{ margin-top:clamp(24px,2.6vw,34px); padding:clamp(18px,1.8vw,24px); max-width:560px; background:var(--paper); border:2px solid var(--ink) }
.ph-passi .ph-porta-regia p:not(.ph-carta-testa){ color:var(--ink); font-size:15.5px; line-height:1.6 }
.ph-porta-regia .wp-block-buttons{ margin-top:16px }

/* ===== 03/10/2026: due sezioni arrivate dalla home, con le regole che avevano nello stile di pagina della home =====
   «Non una piattaforma standard» (.ph-offerta) ora in Il servizio, «Conforme per costruzione» (.ph-conforme) in Conformità. */
.ph-offerta .why{ display:block }
.ph-offerta .ph-programma{ border-top:1px solid var(--rule); padding-top:22px; margin-top:8px }
.ph-offerta .ph-programma h3{ margin-top:0 }
.ph-conforme .benefits .benefit:nth-child(-n+2) h3{ font-size:1.12em }
.ph-conforme .benefits .benefit:nth-child(-n+2){ border-top:3px solid var(--ink) }

/* ===== 03/10/2026 · i candidati del cast (home e Il cast): «Vedi kit modello» sul ritratto, il kit a quattro viste
   che si apre sotto il mouse, la schedina Età · Fisico · Segno · Sguardo ===== */
.ph-cast-cand > .wp-block-column{ position:relative; cursor:pointer; }
.ph-cast-cand .ph-cand-vedi{ position:absolute; z-index:2; top:10px; left:10px; margin:0; padding:6px 10px; border-radius:99px; background:rgba(255,255,255,.92); color:#161514; font:500 10.5px/1 "DM Sans",var(--display),sans-serif; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 2px 8px rgba(0,0,0,.12); pointer-events:none; transition:opacity .2s; }
.ph-cast-cand .ph-cand-vedi::after{ content:" →"; }
.ph-cast-cand .wp-block-image.ph-cand-kit{ position:absolute; z-index:5; top:-8px; left:0; right:0; margin:0; padding:6px; background:#fff; border-radius:8px; box-shadow:0 26px 60px rgba(22,21,20,.28); opacity:0; visibility:hidden; transform:scale(.9); transform-origin:50% 0; transition:opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1), visibility .25s; pointer-events:none; }
.ph-cast-cand .wp-block-image.ph-cand-kit img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:4px; }
.ph-cast-cand > .wp-block-column:hover .ph-cand-kit{ opacity:1; visibility:visible; transform:scale(1.32); }
.ph-cast-cand > .wp-block-column:hover .ph-cand-vedi{ opacity:0; }
.ph-cast-cand > .wp-block-column:first-child .ph-cand-kit{ transform-origin:0 0; }
.ph-cast-cand > .wp-block-column:last-child .ph-cand-kit{ transform-origin:100% 0; }
@media (max-width:781px){ .ph-cast-cand > .wp-block-column:nth-child(odd) .ph-cand-kit{ transform-origin:0 0; } .ph-cast-cand > .wp-block-column:nth-child(even) .ph-cand-kit{ transform-origin:100% 0; } .ph-cast-cand > .wp-block-column:hover .ph-cand-kit{ transform:scale(1.6); } }
.ph-cast-cand .kicker{ color:#161514; font-weight:600; margin-top:12px; }
/* la schedina sotto il nome, e la stessa forma per i capi letti dello styling */
.ph-cast-cand .ph-cand-dati, .ph-dati{ margin:8px 0 0; padding-left:64px; font:400 11.5px/1.7 "DM Mono",ui-monospace,Menlo,monospace; letter-spacing:.02em; color:#66625E; }
.ph-cast-cand .ph-cand-dati strong, .ph-dati strong{ display:inline-block; width:64px; margin-left:-64px; font-weight:500; color:#9a958f; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.ph-dati{ padding-left:0; } .ph-dati strong{ display:block; width:auto; margin:0 0 2px; }

/* ===== 03/10/2026 · le card di styling e location della home: la riga di spiegazione, i sottotitoli, le foto ===== */
.ph-scelta .ph-scelta-lead{ margin:-6px 0 clamp(18px,2vw,26px); max-width:62ch; color:#4a4744; font-size:16px; line-height:1.55; }
.ph-scelta .ph-scelta-sotto{ margin:clamp(18px,2vw,26px) 0 12px; font:600 12px/1 "DM Sans",var(--display),sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#161514; }
.ph-scelta .ph-scelta-sotto:first-of-type{ margin-top:0; }
/* più specifiche della regola .ph-reel img (quadrata) che la home ha nel suo stile di pagina, che viene dopo */
.ph-scelta .ph-sty-capi .wp-block-image img{ aspect-ratio:2/3; object-fit:cover; object-position:50% 30%; width:100%; height:auto; }
.ph-scelta .ph-loc .wp-block-image img{ aspect-ratio:3/2; object-fit:cover; width:100%; height:auto; }

/* ===== 03/10/2026 · Il cast: il compositore, come si vede nell'app (finestra, i due tempi, le tavole) ===== */
.ph-comp{ margin:clamp(28px,3.4vw,44px) 0; background:#fff; border:1px solid #E2E0DD; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(22,21,20,.10); font-family:"DM Sans",var(--display),sans-serif; color:#161514; }
.ph-comp-bar{ display:flex; align-items:center; gap:14px; padding:11px 16px; background:#161514; color:#fff; font-size:12.5px; letter-spacing:.02em; }
.ph-comp-pallini{ display:inline-flex; gap:6px; } .ph-comp-pallini i{ width:10px; height:10px; border-radius:50%; background:#4a4744; display:block; }
.ph-comp-stato{ margin-left:auto; color:#9a958f; font-size:11.5px; }
.ph-comp-corpo{ padding:clamp(16px,2.4vw,28px); }
.ph-comp-tempo{ margin:0 0 12px; font:600 11px/1.2 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ph-viola,#6E3A8E); }
.ph-comp-tempo span{ margin-left:10px; color:#9a958f; font-weight:500; letter-spacing:.06em; text-transform:none; }
.ph-comp-chi{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 26px; }
.ph-comp-et{ margin:0 2px 0 12px; font-size:11.5px; color:#66625E; } .ph-comp-et:first-child{ margin-left:0; }
.ph-chip{ display:inline-block; padding:7px 12px; border:1px solid #D8D4CE; border-radius:99px; font-size:12.5px; line-height:1; color:#4a4744; background:#fff; }
.ph-chip.on{ background:#161514; border-color:#161514; color:#fff; }
.ph-comp-campo{ margin-top:18px; }
.ph-comp-nome{ display:flex; justify-content:space-between; margin:0 0 8px; font-size:12.5px; font-weight:600; }
.ph-comp-nome span{ font-weight:400; color:#9a958f; }
.ph-comp-striscia{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:#D8D4CE transparent; }
.ph-comp-card{ flex:0 0 96px; margin:0; border:1px solid #E2E0DD; border-radius:8px; overflow:hidden; background:#F6F4EE; }
.ph-comp-card img{ display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
.ph-comp-card figcaption{ margin:0; padding:6px 6px 7px; font-size:10.5px; line-height:1.3; color:#4a4744; min-height:2.6em; }
.ph-comp-card.on{ border:2px solid var(--ph-viola,#6E3A8E); box-shadow:0 0 0 3px rgba(110,58,142,.14); }
.ph-comp-card.on figcaption{ color:var(--ph-viola,#6E3A8E); font-weight:600; }
@media (max-width:600px){ .ph-comp-card{ flex-basis:84px; } }
/* Il cast: i quattro passi su quattro colonne, e le tavole del compositore su due colonne (03/10/2026) */
@media (min-width:1000px){ .ph-quattro .moments{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ph-comp-campi{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:32px; }
@media (min-width:1000px){ .ph-comp-campi{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

/* 03/10 sera · l'assaggio del compositore in Come funziona, al passo 02 (compositore_assaggio): una tavola sola,
   le card in quattro colonne uguali che non scorrono; dentro .ph-passi i paragrafi del tema vanno rimessi a misura */
.ph-comp.ph-comp--assaggio{ margin:22px 0 24px; max-width:520px; border-radius:12px; box-shadow:0 14px 36px rgba(22,21,20,.08) }
.ph-comp--assaggio .ph-comp-bar{ padding:9px 14px; font-size:12px }
.ph-comp--assaggio .ph-comp-corpo{ padding:14px 16px 16px }
.ph-comp--assaggio .ph-comp-campo{ margin-top:0 }
.ph-comp--assaggio .ph-comp-striscia{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; padding-bottom:0 }
.ph-comp--assaggio .ph-comp-card{ flex:none }
.ph-passi .ph-comp--assaggio p.ph-comp-nome{ max-width:none; margin:0 0 8px; font-size:12.5px; line-height:1.3; font-weight:600; color:#161514 }
.ph-passi .ph-passo-testo .wp-block-buttons{ margin-top:20px }
/* sul telefono la colonna del testo è larga 263 px: quattro card farebbero 51 px l'una, due per riga 116 */
@media (max-width:600px){ .ph-comp--assaggio .ph-comp-striscia{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
/* il bottone «Vedi come costruiamo il tuo modello» fa 341 px su una colonna di 263: sotto i 600 px va a capo */
@media (max-width:600px){ .ph-passi .ph-passo-testo .wp-block-button__link{ white-space:normal; line-height:1.4 } }
/* i candidati sul telefono: l'etichetta della schedina va sopra il valore (03/10/2026: a 375 px andava a capo una parola per riga) */
@media (max-width:781px){ .ph-cast-cand .ph-cand-dati{ padding-left:0; } .ph-cast-cand .ph-cand-dati strong{ display:block; width:auto; margin:6px 0 0; } }
/* i candidati sul telefono: una fila da scorrere col dito (a due per riga la colonna era larga 101 px), il kit si apre senza ingrandirsi */
@media (max-width:781px){ .wp-block-columns.ph-reel.ph-cast-cand{ flex-wrap:nowrap!important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:8px; scrollbar-width:thin; } .wp-block-columns.ph-reel.ph-cast-cand > .wp-block-column{ flex:0 0 80%!important; flex-basis:80%!important; scroll-snap-align:start; } .ph-cast-cand > .wp-block-column:nth-child(n):hover .ph-cand-kit{ transform:none; } .ph-cast-cand .wp-block-image.ph-cand-kit{ top:0; } }

/* 04/10 · lo styling sui manichini. Home (card_styling): i quattro manichini scelti, a 1:2 interi, testa e scarpe in
   campo. Come funziona (manichini_assaggio): le card dell'assaggio a 1:2. Lo styling: il foglio dei quattro manichini con
   i nomi delle varianti sotto ogni quarto, e il prompt vero scritto a macchina (prompt_macchina, PROMPT_MACCHINA_JS). */
.ph-scelta .ph-sty-man .wp-block-image img{ aspect-ratio:1/2; object-position:50% 50%; }
.ph-comp--manichini .ph-comp-card img{ aspect-ratio:1/2; }
.ph-man-foglio{ max-width:1080px; margin:0 auto clamp(28px,3.4vw,44px); }
.ph-man-foglio img{ display:block; width:100%; height:auto; border-radius:12px; }
.ph-man-foglio figcaption{ margin:0; }
.ph-man-varianti{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:12px 0 0; padding:0; list-style:none; }
.ph-man-varianti li{ margin:0; padding:0 6px; text-align:center; font:500 13px/1.35 "DM Sans",var(--display),sans-serif; color:#4a4744; }
.ph-man-varianti b{ display:block; margin:0 0 3px; font:600 11px/1 "DM Mono",ui-monospace,Menlo,monospace; letter-spacing:.12em; color:var(--ph-viola,#6E3A8E); }
.ph-prompt-riga{ align-items:flex-start; gap:clamp(24px,3.4vw,56px); }
.ph-comp.ph-prompt{ margin:0; border-radius:12px; box-shadow:0 14px 36px rgba(22,21,20,.08); }
.ph-prompt .ph-comp-bar{ padding:9px 14px; font-size:12px; }
.ph-prompt-testo{ margin:0; height:440px; overflow:auto; padding:16px 18px; background:#fff; border:0; border-radius:0;
  font:400 12px/1.65 "DM Mono",ui-monospace,Menlo,monospace; color:#3a3734; white-space:pre-wrap; overflow-wrap:anywhere;
  scrollbar-width:thin; scrollbar-color:#D8D4CE transparent; }
.ph-prompt-hl{ color:var(--ph-viola,#6E3A8E); font-weight:500; background:rgba(110,58,142,.07); }
.ph-prompt-cursore{ display:inline-block; width:.55em; height:1.1em; margin-left:1px; vertical-align:-.2em; background:#161514; animation:ph-cursore 1s steps(1) infinite; }
.ph-prompt.is-fatto .ph-prompt-cursore{ opacity:.35; }
@keyframes ph-cursore{ 50%{ opacity:0; } }
.ph-prompt-piede{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; border-top:1px solid #E2E0DD; background:#FAF9F6; }
.ph-prompt-nota{ font:400 11.5px/1.3 "DM Sans",var(--display),sans-serif; color:#66625E; }
.ph-prompt-tutto{ flex:none; padding:7px 12px; border:1px solid #161514; border-radius:999px; background:#fff; color:#161514; font:500 12px/1 "DM Sans",var(--display),sans-serif; cursor:pointer; }
.ph-prompt-tutto:hover{ background:#161514; color:#fff; }
.ph-prompt-tutto[hidden]{ display:none; }
@media (max-width:600px){ .ph-prompt-testo{ height:380px; } .ph-man-varianti li{ font-size:11.5px; padding:0 3px; } }
@media (prefers-reduced-motion:reduce){ .ph-prompt-cursore{ animation:none; } }

/* ===== 04/10 sera · Il prodotto, esatto: le foto della clutch e i loro ruoli (foto_ruoli), la scheda letta
   (scheda_letta), il metro con la testa come righello (metro_clutch). Le finestre sono le stesse .ph-comp del compositore.
   Lo stato delle foto lo danno le classi p1-p4 sulla finestra (nel markup ci sono tutte e quattro: senza script si vede
   l'ultimo stato, quello vero); lo script le toglie e le rimette una alla volta. ===== */
.ph-comp.ph-foto{ max-width:1080px; margin-left:auto; margin-right:auto; border-radius:14px; }
.ph-foto .ph-comp-corpo{ padding:clamp(14px,2.2vw,24px); }
.ph-foto-rivedi{ flex:none; margin-left:12px; padding:5px 11px; border:1px solid #6b6763; border-radius:999px; background:transparent; color:#fff; font:500 11.5px/1 "DM Sans",var(--display),sans-serif; cursor:pointer; }
.ph-foto-rivedi:hover{ background:#fff; color:#161514; }
.ph-foto-rivedi[hidden]{ display:none; }
.ph-foto-carte{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,16px); }
.ph-foto-carta{ margin:0; border:1px solid #E2E0DD; border-radius:12px; overflow:hidden; background:#fff; transition:border-color .45s, box-shadow .45s; }
.ph-foto-img{ position:relative; background:#EEEDEB; }
.ph-foto-img img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.ph-foto-bollo{ position:absolute; left:10px; bottom:10px; padding:6px 10px; border-radius:999px; font:600 11.5px/1 "DM Sans",var(--display),sans-serif; letter-spacing:.01em; color:#fff; opacity:0; transform:translateY(5px); transition:opacity .4s, transform .4s; }
.ph-foto-bollo.b-princ, .ph-foto-bollo.b-det{ background:var(--ph-viola,#6E3A8E); }
.ph-foto-bollo.b-letta{ background:#3b3936; }
.ph-foto.p3 .b-princ, .ph-foto.p2 .b-det, .ph-foto.p4 .b-letta{ opacity:1; transform:none; }
.ph-foto-num{ display:none; } .ph-foto.p4 .ph-foto-num{ display:inline; }
.ph-foto-int{ list-style:none; margin:0; padding:10px; display:grid; gap:6px; }
.ph-foto-int li{ display:flex; align-items:center; gap:9px; margin:0; padding:7px 10px; border:1px solid #E2E0DD; border-radius:8px; background:#F4F3F0; font:500 12.5px/1.2 "DM Sans",var(--display),sans-serif; color:#85807A; transition:background .4s, border-color .4s, color .4s; }
.ph-foto-int b{ width:1.1em; text-align:center; font-weight:700; }
.ph-foto-int em{ margin-left:auto; font-style:normal; font-size:11px; font-weight:400; }
.ph-foto-int em::after{ content:"no"; }
.ph-foto.p1 .i-l, .ph-foto.p2 [data-det] .i-d, .ph-foto.p3 [data-princ] .i-a, .ph-foto.p4 [data-det] .i-a{ background:rgba(110,58,142,.09); border-color:var(--ph-viola,#6E3A8E); color:var(--ph-viola,#6E3A8E); }
.ph-foto.p1 .i-l em::after, .ph-foto.p2 [data-det] .i-d em::after, .ph-foto.p3 [data-princ] .i-a em::after, .ph-foto.p4 [data-det] .i-a em::after{ content:"sì"; }
.ph-foto.p3 [data-princ], .ph-foto.p4 [data-det]{ border-color:var(--ph-viola,#6E3A8E); box-shadow:0 0 0 3px rgba(110,58,142,.13); }
.ph-foto-passi{ list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid #E2E0DD; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.8vw,24px); }
.ph-foto-passi li{ margin:0; padding:0; }
.ph-foto-passi button{ display:flex; gap:10px; width:100%; margin:0; padding:0; border:0; background:none; text-align:left; cursor:pointer; font:400 13px/1.45 "DM Sans",var(--display),sans-serif; color:#4a4744; transition:opacity .4s; }
.ph-foto-passi button:focus-visible{ outline:2px solid var(--ph-viola,#6E3A8E); outline-offset:4px; border-radius:4px; }
.ph-foto-passi button > b{ flex:none; display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--ph-viola,#6E3A8E); border-radius:50%; font:600 12px/1 "DM Sans",var(--display),sans-serif; color:var(--ph-viola,#6E3A8E); transition:background .4s, color .4s; }
.ph-foto-passi strong{ display:block; margin:2px 0 3px; font-weight:600; color:#161514; }
.ph-foto[data-ora] .ph-foto-passi button{ opacity:.38; }
.ph-foto[data-ora="1"] [data-passo="1"], .ph-foto[data-ora="2"] [data-passo="2"], .ph-foto[data-ora="3"] [data-passo="3"], .ph-foto[data-ora="4"] [data-passo="4"]{ opacity:1; }
.ph-foto[data-ora="1"] [data-passo="1"] > b, .ph-foto[data-ora="2"] [data-passo="2"] > b, .ph-foto[data-ora="3"] [data-passo="3"] > b, .ph-foto[data-ora="4"] [data-passo="4"] > b{ background:var(--ph-viola,#6E3A8E); color:#fff; }
.ph-foto.is-fatto .ph-foto-passi button{ opacity:1; }
@media (max-width:860px){ .ph-foto-carte{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ph-foto-passi{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .ph-foto-passi{ grid-template-columns:minmax(0,1fr); }
  /* a 375 px una carta è larga 110 px: «A allegata sì» ci sta solo così */
  .ph-foto-int{ padding:6px; gap:5px; } .ph-foto-int li{ gap:5px; padding:5px 6px; font-size:11px; } .ph-foto-int b{ width:.9em; } .ph-foto-int em{ font-size:10px; }
  .ph-foto-bollo{ left:6px; bottom:6px; font-size:10px; padding:4px 7px; }
  .ph-foto .ph-comp-pallini, .ph-foto .ph-comp-stato, .ph-scheda .ph-comp-pallini, .ph-scheda .ph-comp-stato{ display:none; } .ph-foto-rivedi{ margin-left:auto; } }

/* la scheda: testa (tipo, porto, misure), due colonne (ha / non ha), le righe, il piede */
@media (min-width:782px){ .ph-scheda-riga > .wp-block-column:first-child{ flex:0 0 38%; } }
.ph-comp.ph-scheda{ margin:0; border-radius:12px; box-shadow:0 14px 36px rgba(22,21,20,.08); }
.ph-scheda .ph-comp-bar{ padding:9px 14px; font-size:12px; }
.ph-scheda-testa{ display:flex; flex-wrap:wrap; gap:10px 30px; padding:14px 20px; border-bottom:1px solid #E2E0DD; background:#FAF9F6; }
.ph-scheda-et{ display:block; margin:0 0 3px; font:600 10.5px/1.2 "DM Sans",var(--display),sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#9a958f; }
.ph-scheda-testa b{ font:500 14px/1.3 "DM Sans",var(--display),sans-serif; color:#161514; }
.ph-scheda-due{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.ph-scheda-ha, .ph-scheda-nonha{ padding:16px 20px 18px; }
.ph-scheda-nonha{ border-left:1px solid #E2E0DD; }
p.ph-scheda-tit{ display:flex; justify-content:space-between; gap:8px; max-width:none; margin:0 0 8px; font:600 11px/1.2 "DM Sans",var(--display),sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ph-viola,#6E3A8E); }
.ph-scheda-tit span{ color:#9a958f; font-weight:500; letter-spacing:.06em; text-transform:none; }
.ph-scheda ol, .ph-scheda ul{ margin:0; padding:0; list-style:none; }
.ph-scheda li{ max-width:none; margin:0; padding:7px 0; border-top:1px solid #EEECE8; font:400 12.5px/1.45 "DM Sans",var(--display),sans-serif; color:#4a4744; }
.ph-scheda li:first-child{ border-top:0; padding-top:2px; }
.ph-scheda-ha li b{ font-weight:600; color:#161514; }
.ph-scheda-nonha li{ display:flex; gap:8px; color:#161514; }
.ph-scheda-nonha li::before{ content:"✕"; flex:none; font-weight:600; color:var(--ph-viola,#6E3A8E); }
.ph-fine{ display:inline-block; margin-left:4px; padding:1px 7px; border:1px solid #CFCBC5; border-radius:999px; font:500 10.5px/1.4 "DM Sans",var(--display),sans-serif; font-style:normal; letter-spacing:.03em; color:#66625E; vertical-align:1px; }
p.ph-scheda-legenda{ max-width:none; margin:10px 0 0; padding-top:10px; border-top:1px solid #EEECE8; font:400 11.5px/1.45 "DM Sans",var(--display),sans-serif; color:#85807A; }
.ph-scheda-righe{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 18px; margin:0; padding:14px 20px 16px; border-top:1px solid #E2E0DD; }
.ph-scheda-righe dt{ margin:0; font:600 10.5px/1.75 "DM Sans",var(--display),sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#9a958f; }
.ph-scheda-righe dd{ margin:0; font:400 12.5px/1.45 "DM Sans",var(--display),sans-serif; color:#161514; }
.ph-scheda-piede{ padding:9px 20px; border-top:1px solid #E2E0DD; background:#FAF9F6; font:400 11.5px/1.3 "DM Sans",var(--display),sans-serif; color:#66625E; }
@media (max-width:700px){ .ph-scheda-due{ grid-template-columns:minmax(0,1fr); } .ph-scheda-nonha{ border-left:0; border-top:1px solid #E2E0DD; } .ph-scheda-righe{ grid-template-columns:minmax(0,1fr); gap:2px; } .ph-scheda-righe dd{ margin-bottom:8px; } }

/* il metro: i riquadri sono quelli dell'app, in percentuale della foto (griglia 0-1000 / 10) */
.ph-metro2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.6vw,36px); max-width:920px; margin:0 auto; }
.ph-metro2-scatto{ margin:0; }
.ph-metro2-foto{ position:relative; overflow:hidden; border-radius:10px; }
.ph-metro2-foto img{ display:block; width:100%; height:auto; }
.ph-metro2-box{ position:absolute; box-sizing:border-box; border:2px solid; border-radius:2px; transition:opacity .5s, transform .5s; }
.ph-metro2-testa{ border-color:#1FC2F2; }
.ph-metro2-prod{ border-color:#FF8A1F; }
.ph-metro2-box i{ position:absolute; left:-2px; bottom:100%; margin-bottom:3px; padding:3px 7px; border-radius:2px; font:500 11px/1.1 "DM Mono",ui-monospace,Menlo,monospace; font-style:normal; white-space:nowrap; color:#0c0c0d; }
.ph-metro2-testa i{ background:#1FC2F2; }
.ph-metro2-prod i{ background:#FF8A1F; }
.ph-metro2-scatto figcaption{ margin:12px 0 0; font:400 12px/1.55 "DM Mono",ui-monospace,Menlo,monospace; color:#4a4744; transition:opacity .5s; }
.ph-metro2-scatto figcaption span{ display:block; }
.ph-metro2-esito{ display:block; margin:0 0 3px; font:600 14px/1.3 "DM Sans",var(--display),sans-serif; color:#161514; }
.is-ok .ph-metro2-esito{ color:var(--ph-viola,#6E3A8E); }
.is-ok .ph-metro2-esito::before{ content:"✓ "; }
.is-fuori .ph-metro2-esito::before{ content:"✕ "; }
p.ph-metro2-legenda{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 26px; max-width:920px; margin:18px auto clamp(26px,3.4vw,44px); font:400 12.5px/1.4 "DM Sans",var(--display),sans-serif; color:#66625E; }
.ph-metro2-legenda > span{ display:inline-flex; align-items:center; gap:9px; }
.ph-sw{ flex:none; display:inline-block; width:14px; height:10px; border:2px solid; border-radius:2px; }
.ph-sw-testa{ border-color:#1FC2F2; } .ph-sw-prod{ border-color:#FF8A1F; }
/* l'entrata: prima la testa, poi la clutch, poi il verdetto; la seconda foto mezzo secondo dopo la prima */
.ph-metro2.is-pronto .ph-metro2-box{ opacity:0; transform:scale(1.18); }
.ph-metro2.is-pronto .ph-metro2-scatto figcaption{ opacity:0; }
.ph-metro2.is-pronto.is-vista .ph-metro2-box{ opacity:1; transform:none; }
.ph-metro2.is-pronto.is-vista .ph-metro2-scatto figcaption{ opacity:1; }
.ph-metro2.is-vista .ph-metro2-scatto:nth-child(1) .ph-metro2-testa{ transition-delay:.3s; }
.ph-metro2.is-vista .ph-metro2-scatto:nth-child(1) .ph-metro2-prod{ transition-delay:.9s; }
.ph-metro2.is-vista .ph-metro2-scatto:nth-child(1) figcaption{ transition-delay:1.4s; }
.ph-metro2.is-vista .ph-metro2-scatto:nth-child(2) .ph-metro2-testa{ transition-delay:1.9s; }
.ph-metro2.is-vista .ph-metro2-scatto:nth-child(2) .ph-metro2-prod{ transition-delay:2.5s; }
.ph-metro2.is-vista .ph-metro2-scatto:nth-child(2) figcaption{ transition-delay:3s; }
/* al telefono una foto è larga 165 px: sull'etichetta restano i centimetri, il nome lo dice il colore (legenda) */
@media (max-width:600px){ .ph-metro2{ gap:12px; } .ph-metro2-box i{ font-size:9.5px; padding:2px 4px; } .ph-metro2-box i span{ display:none; } p.ph-metro2-legenda{ flex-direction:column; align-items:flex-start; } .ph-metro2-scatto figcaption{ font-size:10.5px; } .ph-metro2-esito{ font-size:12.5px; } }
/* la frase vera del prompt, dentro la colonna di lettura */
.ph-frase{ max-width:66ch; margin:16px 0 18px; }
.ph-frase blockquote{ margin:0; padding:14px 18px; border:0; border-left:3px solid var(--ph-viola,#6E3A8E); border-radius:0 8px 8px 0; background:#F4F3F0; font:400 13px/1.6 "DM Mono",ui-monospace,Menlo,monospace; color:#3a3734; }
.ph-frase figcaption{ margin:8px 0 0; font:400 12.5px/1.4 "DM Sans",var(--display),sans-serif; color:#66625E; }

/* ===== I rimandi alle pagine sono bottoni (10/10/2026) =====
   Dario, 9/10, sulla freccia «Scopri come ricreiamo il tuo prodotto →» di Come funziona: «i link interni me li devi fare
   dei bei bottoni visibili, quelli che mandano alle pagine specifiche». Prova a tre (IMAGE GENERATOR/photonico/
   prove-rimandi-bottoni/: contorno, pieno, contorno con la riga), il 10/10 «vai con b»: pieno nero su chiaro, bianco su
   nero, come «Vedi come» della home. Vale per ogni rimando() del generatore (<p class="ph-rimando"><a>… →</a></p>, 29 nel
   sito). «body» e la classe ripetuta battono le regole scritte nelle pagine (.ph-passi .ph-rimando a, .ph-domanda
   .ph-rimando a, div.ph-storia-kom > p.ph-rimando a, .ph-sv-prezzo .ph-rimando a…), che restano per il paragrafo. */
body p.ph-rimando.ph-rimando > a[href]{ display:inline-flex; align-items:center; gap:10px; padding:15px 22px 14px; border:1.5px solid var(--ink); border-radius:4px; background:var(--ink); color:#fff; text-decoration:none; font-family:var(--display); font-weight:500; font-size:13px; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; transition:background-color .2s, border-color .2s; }
body p.ph-rimando.ph-rimando > a[href]:hover{ background:#000; border-color:#000; color:#fff; text-decoration:none; }
body p.ph-rimando.ph-rimando > a[href]:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
body .has-dark p.ph-rimando.ph-rimando > a[href]{ background:#fff; border-color:#fff; color:var(--ink); }
body .has-dark p.ph-rimando.ph-rimando > a[href]:hover{ background:#e9e7e1; border-color:#e9e7e1; color:var(--ink); }
body .has-dark p.ph-rimando.ph-rimando > a[href]:focus-visible{ outline-color:#fff; }
body .ph-passi p.ph-rimando.ph-rimando, body .ph-domanda p.ph-rimando.ph-rimando{ margin-top:24px; }
@media (max-width:600px){ body p.ph-rimando.ph-rimando > a[href]{ display:flex; width:100%; box-sizing:border-box; } }
/* Il servizio, «Il prezzo»: il bottone della prova e «Come si paga» stanno affiancati (inline-block): al centro, non sulla base */
body .ph-sv-prezzo .ph-cta-riga, body .ph-sv-prezzo p.ph-rimando.ph-rimando{ vertical-align:middle; }

/* ===== I titoli di sezione sul telefono (10/10/2026) =====
   .sec-title prende --fs-titolo-l, 50 px a ogni larghezza (photonico-ds.css). A 375 px la colonna è 263 px e una parola
   lunga non ci sta: Dario, 10/10, «sistema il titolo di Prezzi» («Non è un abbonamento…», «abbonamento» usciva di 66 px e
   la pagina scorreva di lato). Lo stesso a 375 px in altri sei titoli: Domande «responsabilità» (77 px, anche lì la pagina
   scorreva), Il servizio «riconoscere», Regia «fotografo», Chi siamo «scientifico», Settori «Capospalla.», Prezzi «setup».
   Sotto i 500 px il titolo scende con lo schermo (10vw: 37,5 px a 375, 39 a 390, 48 a 480); da 500 px resta 50. La parola
   più lunga di oggi, «responsabilità», così sta nella colonna fino a 360 px; più stretto, va a capo invece di uscire.
   Solo i titoli: la variabile serve anche ai numeri grandi (i passi, gli anni di Chi siamo), che non cambiano. «body»
   lascia vincere le misure scritte apposta nelle pagine (.ph-… .sec-title). */
@media (max-width:499px){ body .sec-title{ font-size:clamp(30px,10vw,50px); overflow-wrap:break-word; } }

/* ===== Il «Rimando (bottone)» scelto dall'editor (11/10/2026) =====
   Lo stile del Paragrafo registrato da mu-plugins/photonico-staging.php (EDITABILITA-WP-analisi-2026-10-11.md, punto 1):
   un paragrafo con un link, con lo stile «Rimando (bottone)», è lo stesso bottone dei rimandi del generatore (qui sopra).
   Il link si mette col solito comando (Ctrl+K), la freccia «→» si scrive. */
body p.is-style-ph-rimando.is-style-ph-rimando{ margin-top:24px; }
body p.is-style-ph-rimando.is-style-ph-rimando > a[href]{ display:inline-flex; align-items:center; gap:10px; padding:15px 22px 14px; border:1.5px solid var(--ink); border-radius:4px; background:var(--ink); color:#fff; text-decoration:none; font-family:var(--display); font-weight:500; font-size:13px; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; transition:background-color .2s, border-color .2s; }
body p.is-style-ph-rimando.is-style-ph-rimando > a[href]:hover{ background:#000; border-color:#000; color:#fff; text-decoration:none; }
body p.is-style-ph-rimando.is-style-ph-rimando > a[href]:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
body .has-dark p.is-style-ph-rimando.is-style-ph-rimando > a[href]{ background:#fff; border-color:#fff; color:var(--ink); }
body .has-dark p.is-style-ph-rimando.is-style-ph-rimando > a[href]:hover{ background:#e9e7e1; border-color:#e9e7e1; color:var(--ink); }
body .has-dark p.is-style-ph-rimando.is-style-ph-rimando > a[href]:focus-visible{ outline-color:#fff; }
@media (max-width:600px){ body p.is-style-ph-rimando.is-style-ph-rimando > a[href]{ display:flex; width:100%; box-sizing:border-box; } }

/* ===== 15/10/2026 · Il risparmio (/risparmio/, pagina 14048) =====
   Lo stile stava in un blocco «HTML personalizzato» in cima alla pagina, insieme a passi, foto e tabella scritti in HTML:
   Dario non poteva cambiarne i testi. Ora la pagina è fatta di blocchi normali (gruppi, paragrafi, Immagine, Tabella) e lo
   stile sta qui, così l'editor la mostra come il sito. Le regole della sezione AI Act della home che il caso riprende
   (ph-ai2-*) sono scritte su .ph-risp-caso: la home ha le sue nel proprio stile e non le tocca. */

/* la testa */
.ph-risp-testa{ background:#F5F4F2; border-top:0; padding-block:clamp(56px,6.4vw,96px) clamp(40px,4.6vw,64px); }
.ph-risp-testa .sec-intro{ margin:0 0 18px; }
.ph-risp-testa h1{ margin:0 0 clamp(22px,2.4vw,32px); font-family:var(--display); font-weight:500; font-size:clamp(36px,4.4vw,64px); line-height:1.14; letter-spacing:-.018em; color:var(--ink,#161514); max-width:18ch; text-wrap:balance; }
.ph-risp-testa .ph-risp-lead{ margin:0 0 14px; max-width:62ch; font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--read-ink,#2b2926); }

/* il caso */
section.ph-risp-caso{ background:#fff; border-top:0; padding-block:clamp(56px,6.4vw,96px) clamp(72px,8vw,120px); }
section.ph-risp-caso .wrap > *{ margin-block-start:0; }
section.ph-risp-caso .ph-ai2-testa{ max-width:900px; }
section.ph-risp-caso .ph-ai2-testa > *{ margin-block-start:0; }
section.ph-risp-caso .ph-ai2-testa .sec-intro{ margin:0 0 18px; }
section.ph-risp-caso .ph-ai2-titolo{ text-wrap:balance; }
section.ph-risp-caso .ph-ai2-testa .ph-ai2-sotto{ margin:22px 0 0; font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--mute); max-width:56ch; }

/* i tre passi: tre colonne, una sotto l'altra sotto gli 860 px (come in home) */
section.ph-risp-caso .wrap > .ph-ai2-numeri{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-block-start:clamp(32px,3.6vw,52px); }
section.ph-risp-caso .ph-ai2-numeri > .ph-ai2-n{ margin-block-start:0; padding:6px clamp(20px,2.4vw,36px) 4px; border-left:1px solid var(--rule); }
section.ph-risp-caso .ph-ai2-numeri > .ph-ai2-n:first-child{ padding-left:0; border-left:0; }
section.ph-risp-caso .ph-ai2-n > p{ margin:0; }
section.ph-risp-caso .ph-ai2-n > .ph-ai2-n-big{ font-family:var(--display); font-weight:400; font-size:clamp(26px,2.5vw,34px); line-height:1.2; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
section.ph-risp-caso .ph-ai2-n > .ph-ai2-n-txt{ margin-top:14px; font-size:16px; line-height:1.5; color:var(--ink); max-width:34ch; }
@media (max-width:860px){
  section.ph-risp-caso .wrap > .ph-ai2-numeri{ grid-template-columns:minmax(0,1fr); }
  section.ph-risp-caso .ph-ai2-numeri > .ph-ai2-n{ padding:22px 0; border-left:0; border-top:1px solid var(--rule); }
  section.ph-risp-caso .ph-ai2-numeri > .ph-ai2-n:first-child{ padding-top:0; border-top:0; }
}

/* le quattro foto: blocchi Immagine dentro il gruppo .ph-risp-foto */
section.ph-risp-caso .wrap > .ph-risp-foto{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px); margin:clamp(36px,4vw,56px) 0 0; }
section.ph-risp-caso .ph-risp-foto > .wp-block-image.ph-risp-f{ margin:0; }
section.ph-risp-caso .ph-risp-f img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }
section.ph-risp-caso .ph-risp-f .wp-element-caption{ margin:8px 0 0; text-align:left; font:400 12.5px/1.45 "DM Sans",var(--display),sans-serif; color:var(--mute,#6b6863); }
@media (max-width:700px){ section.ph-risp-caso .wrap > .ph-risp-foto{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* la tabella: blocco Tabella con intestazione, corpo e piè (il totale) */
section.ph-risp-caso .wrap > .ph-risp-occhiello{ margin:clamp(48px,5.4vw,80px) 0 14px; font:500 11px/1.3 "DM Sans",var(--display),sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--mute,#6b6863); }
section.ph-risp-caso .wrap > .wp-block-table.ph-tab{ margin:0; overflow:visible; }
section.ph-risp-caso .ph-tab table{ display:block; width:100%; border-collapse:separate; border-spacing:0; border:0; border-top:2px solid var(--ink,#161514); }
section.ph-risp-caso .ph-tab thead, section.ph-risp-caso .ph-tab tbody, section.ph-risp-caso .ph-tab tfoot{ display:block; border:0; }
section.ph-risp-caso .ph-tab tr{ display:grid; grid-template-columns:1fr 1.3fr 1.7fr; gap:0 clamp(14px,1.8vw,30px); padding:15px 0; border:0; border-bottom:1px solid var(--rule,#e2e0dd); background:none; }
section.ph-risp-caso .ph-tab th, section.ph-risp-caso .ph-tab td{ display:block; padding:0; border:0; background:none; text-align:left; vertical-align:top; }
section.ph-risp-caso .ph-tab thead tr{ padding:12px 0; }
section.ph-risp-caso .ph-tab th{ font:500 10.5px/1.3 "DM Sans",var(--display),sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mute,#6b6863); }
section.ph-risp-caso .ph-tab th:nth-child(3){ color:var(--ink,#161514); }
section.ph-risp-caso .ph-tab td{ font-size:15.5px; line-height:1.45; color:var(--read-ink,#2b2926); }
section.ph-risp-caso .ph-tab td:first-child{ font-weight:500; color:var(--ink,#161514); }
section.ph-risp-caso .ph-tab td:nth-child(3){ color:var(--ink,#161514); }
section.ph-risp-caso .ph-tab tfoot tr{ border-bottom:2px solid var(--ink,#161514); background:#F6F4EE; margin:0 -14px; padding:18px 14px; }
section.ph-risp-caso .ph-tab tfoot td{ font-weight:600; }
section.ph-risp-caso .ph-tab tfoot td:nth-child(3){ font-family:var(--display); font-weight:500; font-size:clamp(19px,1.7vw,24px); line-height:1.25; }
section.ph-risp-caso .ph-tab tfoot td:nth-child(3)::after{ content:""; display:block; height:2px; width:44px; margin-top:8px; background:var(--ph-riga,linear-gradient(90deg,#6E3A8E,#C2318A,#E8553A,#F39A2B,#FBC61C,#3FA36B,#2F7FC1)); }
/* sul telefono: la voce a tutta riga, le due strade affiancate sotto i loro titoli (a sinistra lo shooting, a destra Photonico) */
@media (max-width:760px){
  section.ph-risp-caso .ph-tab tr{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 16px; padding:16px 0; }
  section.ph-risp-caso .ph-tab thead tr{ padding:12px 0; }
  section.ph-risp-caso .ph-tab th:first-child{ display:none; }
  section.ph-risp-caso .ph-tab td:first-child{ grid-column:1 / -1; font-size:17px; }
  section.ph-risp-caso .ph-tab tfoot tr{ margin:0; padding:18px 12px; }
}

section.ph-risp-caso .wrap > .ph-risp-chiusa{ margin:clamp(22px,2.4vw,32px) 0 0; max-width:62ch; font-size:clamp(16px,1.4vw,18px); line-height:1.5; color:var(--read-ink,#2b2926); }
section.ph-risp-caso .wrap > .ph-cta-riga{ margin-block-start:clamp(26px,2.8vw,36px); }