/* Pacchetto Ristorante — standalone "Richiedi la tua demo" modulo.
   The exact demo-splash background (deep navy radial) so the funnel feels like
   one continuous thing, with white email-style panels — one per section,
   compartmentalised — and the gold of the splash "DEMO" wordmark as the accent. */

@font-face { font-family:'Plus Jakarta Sans'; font-weight:400; font-style:normal; font-display:swap;
  src:url("../../home/fonts/plus-jakarta-sans-v12-latin-regular.503e7cbdb484.woff2") format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:600; font-style:normal; font-display:swap;
  src:url("../../home/fonts/plus-jakarta-sans-v12-latin-600.79e62f3332cd.woff2") format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:700; font-style:normal; font-display:swap;
  src:url("../../home/fonts/plus-jakarta-sans-v12-latin-700.5b629bd8abb4.woff2") format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:800; font-style:normal; font-display:swap;
  src:url("../../home/fonts/plus-jakarta-sans-v12-latin-800.408ecc6630e8.woff2") format('woff2'); }

:root{
  --pr-ink:#1c1726; --pr-ink-soft:#4a4458; --pr-muted:#8a83a0; --pr-faint:#9a93ad;
  --pr-gold:#c8a15a; --pr-gold-ink:#1a1206;
  --pr-panel:#ffffff; --pr-border:#e7e0f4; --pr-field:#ddd5ec;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }

.pr-body{
  min-height:100vh;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:#ece9e2;
  background-color:#0c0e13;
  background-image:radial-gradient(1200px 720px at 50% 34%, #1a2030 0%, #0c0e13 62%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center;
  padding:84px 18px 60px;   /* top room for the fixed Arrow bar */
}
.pr-wrap{ width:100%; max-width:600px; }

/* Logo — bigger, present, on the dark splash */
.pr-logo{ display:block; width:224px; margin:0 auto 30px; }
.pr-logo img{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 26px rgba(0,0,0,0.45)); }

/* Top Arrow bar (dark glass) + drop-down menu — matches the funnel/site */
.pr-topbar{ position:fixed; top:0; left:0; right:0; z-index:120; height:60px; border:0; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,14,19,.66); -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.06); }
.pr-topbar img{ height:28px; width:auto; display:block; filter:drop-shadow(0 4px 14px rgba(0,0,0,0.5)); }
.pr-topbar-glow{ position:absolute; left:0; right:0; bottom:0; height:2px; opacity:.9;
  background:linear-gradient(100deg,#7b2ff7,#d81b8c,#e8451e,#f2a800,#4fb03a,#1ca9e0); }

.nav-backdrop{ position:fixed; inset:0; z-index:115; background:rgba(6,5,12,.5);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.nav-backdrop.open{ opacity:1; visibility:visible; }
.nav-sheet{ position:fixed; top:0; left:0; right:0; z-index:118; background:#0c0816;
  border-bottom-left-radius:22px; border-bottom-right-radius:22px;
  box-shadow:0 26px 60px rgba(0,0,0,.5); padding:74px 16px 20px;
  transform:translateY(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  max-height:90dvh; overflow-y:auto; }
.nav-sheet.open{ transform:translateY(0); }
.nav-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:520px; margin:0 auto; }
.nav-grid a{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#e9e6f2;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:11px 12px; font-size:13px; font-weight:600; transition:background .12s, border-color .12s; }
.nav-grid a:hover{ background:rgba(255,255,255,.08); border-color:rgba(200,161,90,.5); }
.nav-grid .nav-ico{ width:18px; height:18px; flex:0 0 auto; color:var(--pr-gold); }
.nav-grid a span{ min-width:0; }
/* Section labels + the gold «Iniziamo» bar — this sheet is a STANDALONE copy of
   home/style.css's nav (brief pages don't load style.css): keep the two in step
   or the labels collapse into plain grid cells and shuffle the columns. */
.nav-grid .nav-sec{ grid-column:1 / -1; margin:14px 0 2px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.09); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--pr-gold); }
.nav-grid .nav-sec:first-of-type{ margin-top:6px; }
.nav-grid a.nav-start{ grid-column:1 / -1; justify-content:center; background:var(--pr-gold);
  border-color:transparent; color:var(--pr-gold-ink); font-weight:800; letter-spacing:.06em; }
.nav-grid a.nav-start .nav-ico{ color:var(--pr-gold-ink); }
.nav-grid a.nav-start:hover{ background:var(--pr-gold); filter:brightness(1.06); }
.sheet-lang{ display:flex; gap:8px; justify-content:center; margin:14px auto 0; }
.sheet-lang a{ text-decoration:none; font-size:12px; font-weight:700; color:var(--pr-muted);
  border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:6px 12px; }
.sheet-lang a.active{ background:var(--pr-gold); color:var(--pr-gold-ink); border-color:var(--pr-gold); }
@media (max-width:520px){ .nav-grid{ grid-template-columns:1fr; } }

/* Splash header — light text on the deep background, centered */
.pr-head{ text-align:center; margin-bottom:30px; }
.pr-eyebrow{ display:block; font-size:11px; font-weight:700; letter-spacing:2.6px;
  text-transform:uppercase; color:var(--pr-gold); margin-bottom:14px; }
.pr-title{ margin:0; font-size:31px; line-height:1.16; font-weight:800; color:#f1ede5;
  letter-spacing:-0.01em; }
.pr-sub{ margin:13px auto 0; max-width:33rem; font-size:15.5px; line-height:1.65; color:#bdb7c6; }
@media (max-width:560px){ .pr-title{ font-size:26px; } }

/* Gate — the splash CTA before the modulo */
.pr-gate{ text-align:center; padding:4px 0 2px; }
.pr-gate-note{ margin:14px 0 0; font-size:13px; color:#8f8a9e; }

/* Soft reveal of the modulo on "Inizia →" — matches the funnel chi-sei fade
   (opacity + 6px slide, .26s, the liked cubic-bezier easing). The class is added
   by brief.js reveal(); it is NOT present on a server-side validation reload, so
   the form never re-animates after an error. */
.pr-panel-wrap.is-revealing{ animation:pr-reveal .26s cubic-bezier(.4,0,.2,1) both; }
@keyframes pr-reveal{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pr-panel-wrap.is-revealing{ animation:none; } }

/* Health (art.9) upload guard — a clear "no patient data" callout. Dark ink on a
   warm gold tint (the note sits inside a WHITE .pr-panel, not on the dark body). */
.pr-art9-note{ margin:0 0 14px; padding:12px 14px; font-size:13px; line-height:1.55;
  color:var(--pr-ink); background:rgba(200,161,90,.14);
  border:1px solid rgba(200,161,90,.55); border-left-width:3px; border-radius:10px; }
.pr-art9-note strong{ color:var(--pr-ink); }

/* Buttons — gold, like the splash "DEMO" / retry */
.pr-btn{ display:inline-block; border:0; cursor:pointer; font:inherit; font-weight:700;
  color:var(--pr-gold-ink); background:var(--pr-gold); border-radius:11px; padding:15px 36px;
  box-shadow:0 10px 26px rgba(200,161,90,0.30); transition:transform .12s ease, box-shadow .12s ease; }
.pr-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(200,161,90,0.42); }
.pr-btn-lg{ font-size:16px; }

/* Submit splash — full-screen "siamo al lavoro" overlay shown the instant a valid
   modulo is sent. Invia is a full-page POST that uploads materials + processes for
   a few seconds; without feedback the page looks frozen/bugged. Mirrors the deep-navy
   demo-splash + the gold arrow-dust logo wipe (same look as the Rose offer splash). */
.pr-splash{
  position:fixed; inset:0; z-index:9999;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:24px;
  background-color:#0c0e13;
  background-image:radial-gradient(1200px 720px at 50% 40%, #1a2030 0%, #0c0e13 64%);
  opacity:0; transition:opacity .2s ease;
}
.pr-splash.is-open{ display:flex; opacity:1; }
.pr-splash-logo{
  width:150px; height:auto; display:block;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,0.45));
  animation:pr-dust 1.4s ease-in-out infinite alternate;
}
@keyframes pr-dust{
  0%{ clip-path:inset(0 100% 0 0); opacity:.3; }
  100%{ clip-path:inset(0 0% 0 0); opacity:1; }
}
.pr-splash-msg{
  margin:0; font-size:14.5px; font-weight:600; letter-spacing:.02em; color:#bdb7c6;
}
.pr-splash-msg::after{
  content:''; animation:pr-splash-dots 1.4s steps(1,end) infinite;
}
@keyframes pr-splash-dots{
  0%,20%{ content:''; } 40%{ content:'.'; } 60%{ content:'..'; } 80%,100%{ content:'...'; }
}

/* Email-style white panels — one per section, compartmentalised */
.pr-panel{ background:var(--pr-panel); border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,0.40); padding:26px 28px; margin-bottom:18px; }
.pr-panel:last-child{ margin-bottom:0; }
@media (max-width:560px){ .pr-panel{ padding:22px 18px; } }

.pr-section{ font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--pr-faint); margin:0 0 15px; }
.pr-section .opt{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--pr-muted); }

.pr-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
@media (max-width:560px){ .pr-grid{ grid-template-columns:1fr; } }

.pr-form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--pr-ink); }
.pr-form label.full{ margin-top:14px; }
/* Caption = one flex child (name + inline hint), so the hint never drops onto its
   own row and knocks the inputs out of alignment. */
.pr-form .pr-cap{ display:block; line-height:1.35; }
.pr-form .hint{ font-weight:500; color:var(--pr-muted); }
/* In the 2-col grid, anchor inputs to the bottom so a wrapped caption in one
   cell still leaves both inputs on the same line. */
.pr-grid label > input{ margin-top:auto; }

.pr-form input[type=text], .pr-form input[type=email], .pr-form input[type=url],
.pr-form input[type=tel], .pr-form input[type=number], .pr-form textarea, .pr-form select{
  /* 16px keeps iOS Safari from auto-zooming (and breaking layout) on focus. */
  font:inherit; font-weight:400; font-size:16px; color:var(--pr-ink);
  padding:11px 13px; border:1px solid var(--pr-field); border-radius:10px; background:#fbfaff;
  width:100%; }
.pr-form input:focus, .pr-form textarea:focus{ outline:none; border-color:var(--pr-gold);
  background:#fff; box-shadow:0 0 0 3px rgba(200,161,90,0.16); }
.pr-form textarea{ min-height:90px; resize:vertical; }

/* Upload slots — branded custom file control */
.pr-uploads{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:560px){ .pr-uploads{ grid-template-columns:1fr; } }
.pr-slot{ border:1px solid var(--pr-border); border-radius:12px; padding:14px; background:#faf8fd;
  position:relative; cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease; }
.pr-slot:focus-within{ border-color:var(--pr-gold); box-shadow:0 0 0 3px rgba(200,161,90,0.16); }
.pr-slot-title{ display:block; font-size:13px; font-weight:700; color:var(--pr-ink); }
.pr-slot-hint{ display:block; font-size:11.5px; color:var(--pr-muted); margin:2px 0 9px; }
/* Hide the native input but keep it focusable — opacity:0 + zero-size + absolute
   (NOT clip/clip-path, which double-fires the picker on some WebKit builds). */
.pr-file{ position:absolute; top:0; left:0; width:0.1px; height:0.1px; opacity:0; overflow:hidden; z-index:-1; }
.pr-file-row{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.pr-file-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  font-weight:700; line-height:1; color:var(--pr-gold-ink); background:var(--pr-gold);
  border-radius:8px; padding:9px 14px; white-space:nowrap; transition:transform .12s ease, box-shadow .12s ease; }
.pr-slot:hover .pr-file-btn{ box-shadow:0 6px 16px rgba(200,161,90,0.30); transform:translateY(-1px); }
/* Keyboard focus on the hidden input → ring on the visible pill. :focus too (not
   only :focus-visible) so Safari < 15.4 in the field still shows it. */
.pr-file:focus + .pr-file-row .pr-file-btn,
.pr-file:focus-visible + .pr-file-row .pr-file-btn{ outline:2px solid var(--pr-gold-ink); outline-offset:2px; }
.pr-file-name{ min-width:0; flex:1 1 auto; font-size:12px; font-weight:500; color:var(--pr-ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-file.has-files ~ .pr-file-row .pr-file-name{ color:var(--pr-ink); font-weight:600; }

/* Consent — native checkbox recoloured gold (appearance:none + white tick for
   contrast on the gold fill). Wide support: Chrome 83+, Safari/iOS 15.4+, FF 80+. */
.pr-consent{ display:flex; flex-direction:column; gap:10px; }
/* .pr-form .pr-check (0,2,0) must out-specify .pr-form label (0,1,1), which would
   otherwise force flex-direction:column and stack the box ON TOP of the text. */
.pr-form .pr-check{ display:flex; flex-direction:row; align-items:flex-start; gap:10px;
  font-size:13px; line-height:1.5; font-weight:500; color:var(--pr-ink-soft); cursor:pointer; }
/* Box sits on the FIRST text line: line-height:1.5 (19.5px) gives a line box
   taller than the 18px box, and margin-top centers it within that line. */
.pr-check input[type=checkbox]{ flex:0 0 auto; appearance:none; -webkit-appearance:none;
  width:18px; height:18px; margin:1px 0 0; border:1.5px solid var(--pr-field); border-radius:5px;
  background:#fbfaff; display:inline-grid; place-content:center; cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease; }
.pr-check input[type=checkbox]::before{ content:""; width:11px; height:11px; transform:scale(0);
  transform-origin:center; transition:transform .12s ease; background:#fff;
  clip-path:polygon(14% 47%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 39% 70%); }
.pr-check input[type=checkbox]:checked{ background:var(--pr-gold); border-color:var(--pr-gold); }
.pr-check input[type=checkbox]:checked::before{ transform:scale(1); }
.pr-check input[type=checkbox]:focus-visible{ outline:2px solid var(--pr-gold); outline-offset:2px; }
.pr-check a{ color:#a06b1f; }

/* FIPE offer — collapsed FAQ-style disclosure (ristorante only). The opt-in
   checkbox is hidden until the client opens the dropdown; closed = offerta standard. */
.pr-disclosure{ border:1px solid var(--pr-border); border-radius:12px; background:#fbfaff; }
.pr-disclosure-summary{ list-style:none; cursor:pointer; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:14px; font-weight:600; color:var(--pr-ink-soft); }
.pr-disclosure-summary::-webkit-details-marker{ display:none; }
.pr-disclosure-summary::after{ content:""; flex:0 0 auto; width:9px; height:9px;
  margin-right:3px; border-right:2px solid var(--pr-muted); border-bottom:2px solid var(--pr-muted);
  transform:rotate(45deg); transition:transform .18s ease; }
.pr-disclosure[open] .pr-disclosure-summary::after{ transform:rotate(225deg); }
.pr-disclosure-summary:focus-visible{ outline:2px solid var(--pr-gold); outline-offset:2px; border-radius:12px; }
.pr-disclosure-body{ padding:2px 16px 16px; }
@media (prefers-reduced-motion:reduce){ .pr-disclosure-summary::after{ transition:none; } }

/* The 48h + offer-documents promise */
.pr-promise{ margin:18px 0 0; padding:14px 16px; border-radius:12px;
  background:#fdf9f0; border:1px solid #efe3c9; border-left:3px solid var(--pr-gold);
  font-size:13px; line-height:1.65; color:var(--pr-ink-soft); }
.pr-promise strong{ color:var(--pr-ink); }

/* Reassurance: kept on-device until sent */
.pr-saved-note{ margin:14px 0 0; font-size:12px; line-height:1.55; color:var(--pr-muted); text-align:center; }

.pr-submit{ display:block; width:100%; margin-top:18px; }

/* Server-rendered errors */
.pr-error, .pr-form ul.errorlist{ color:#c0392b; font-size:12px; font-weight:600; list-style:none;
  margin:6px 0 0; padding:0; }

/* Inline (client-side) invalid state — same brick-red, gold-theme-consistent ring */
.pr-form input.pr-invalid, .pr-form textarea.pr-invalid{ border-color:#c0392b; background:#fff7f6; }
.pr-form input.pr-invalid:focus, .pr-form textarea.pr-invalid:focus{ border-color:#c0392b;
  box-shadow:0 0 0 3px rgba(192,57,43,0.15); }
.pr-field-error{ display:block; color:#c0392b; font-size:12px; font-weight:600; margin-top:6px; line-height:1.4; }
.pr-field-error:empty{ display:none; }

/* Footer — on the dark background, below the panels */
.pr-foot{ text-align:center; margin-top:28px; font-size:11.5px; line-height:1.7; color:#8f899c; }
.pr-foot a{ color:var(--pr-gold); text-decoration:none; }
.pr-foot a:hover{ text-decoration:underline; }

/* ── Product briefs (pacchetto-mondrian / -reams / -comanda) ─────────────
   Small additions over the shared pr- system: product mark slot, stat chips
   on the hero, prose inside panels, numbered after-send steps, confirmation. */
.pr-mark{ display:block; margin:0 auto 18px; }
.pr-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; list-style:none;
  padding:0; margin:18px 0 0; }
.pr-chip{ min-width:132px; text-align:left; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16); border-radius:12px; padding:10px 14px;
  font-size:12.5px; line-height:1.45; color:#bdb7c6; }
.pr-chip b{ display:block; font-size:15px; color:var(--pr-gold); margin-bottom:2px; }
.pr-panel > p{ font-size:14px; line-height:1.65; color:var(--pr-ink-soft); margin:0 0 12px; }
.pr-panel > p:last-child{ margin-bottom:0; }
.pr-panel h3{ font-size:15px; font-weight:700; color:var(--pr-ink); margin:0 0 6px; }
.pr-steps{ list-style:none; counter-reset:prstep; padding:0; margin:0; }
.pr-steps li{ counter-increment:prstep; position:relative; padding:0 0 16px 40px; }
.pr-steps li:last-child{ padding-bottom:0; }
.pr-steps li::before{ content:counter(prstep); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:13px;
  color:var(--pr-gold-ink); background:var(--pr-gold); }
.pr-steps h3{ margin:2px 0 4px; }
.pr-steps p{ font-size:14px; line-height:1.6; color:var(--pr-ink-soft); margin:0; }
.pr-done{ text-align:center; padding:28px 0 8px; }
.pr-done-badge{ display:inline-flex; width:56px; height:56px; border-radius:50%;
  align-items:center; justify-content:center; background:var(--pr-gold);
  color:var(--pr-gold-ink); margin-bottom:18px; }
.pr-done-badge svg{ width:26px; height:26px; }

/* ── Product-brief density pass: structure + air ─────────────────────────
   Hints on their own line under the caption; legends styled like captions;
   more space between fields, panels and the big section headers. */
.pr-form .hint{ display:block; margin-top:3px; }
.pr-form legend.pr-cap{ font-size:12.5px; font-weight:600; color:var(--pr-ink);
  margin:0 0 8px; padding:0; line-height:1.35; }
.pr-form fieldset{ margin:20px 0 0; }
.pr-form fieldset .pr-check{ margin-top:8px; }
.pr-form label.full{ margin-top:20px; }
.pr-grid{ gap:18px 18px; }
.pr-panel{ padding:26px 24px 28px; }
.pr-panel + .pr-panel{ margin-top:18px; }
.pr-gate + .pr-head, .pr-panel-wrap + .pr-head, section + .pr-head{ margin-top:44px; }
.pr-uploads{ margin-top:20px; }