/* ==========================================================================
   VAYRA — PARLIAMONE global reusable modal
   VAYRA_PARLIAMONE_GLOBAL_REUSABLE_MODAL_CLAUDE.md

   Fully self-contained (own scoped custom properties, own font-family
   fallback stacks) so this exact same file works unmodified on every
   page that loads it — the full site, Coming Soon, and any future
   page — regardless of which of that page's own stylesheets/tokens
   happen to be loaded. Reuses the *interaction philosophy* of
   03_FEATURED_WORK's immersive viewer (fixed overlay, translucent+
   blurred backdrop, centered rounded frame, opacity+scale transition)
   without touching or depending on that component's own CSS.
   ========================================================================== */

.parliamone-modal {
  --pm-black: #0a0b0b;
  --pm-ivory: #F2F0EA;
  --pm-dark-green: #0a1613;
  --pm-line: rgba(242, 240, 234, 0.22);
  --pm-green: #a9d8c1; /* same approved accent green as tokens.css --color-green, redeclared here for portability */
  --pm-font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --pm-font-serif-italic: "Libre Bodoni", "Bodoni MT", Georgia, serif;
  /* Unità di misura del modulo (v2): non dipende dalla pagina che lo ospita
     (Coming Soon o presentazioni) e non scende sotto una misura leggibile. */
  --pm-u: clamp(8.6px, calc(100vw / 150), 10px);

  position: fixed;
  inset: 0;
  z-index: 300; /* above Featured Work's immersive viewer (200) — the two are never open together, but this stays the higher of the site's two overlays */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 2vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s 320ms;
  font-family: var(--pm-font-sans);
  color: var(--pm-ivory);
}
.parliamone-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease;
}

.parliamone-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Near-black base with a soft, low-saturation petrol-green hint toward
   the bottom — reuses the home's own ambient-teal color values (same
   rgba stops as .final-cta__ambient-teal/.ambient-field__teal in
   sections.css) rather than inventing new ones, adapted to a static
   radial gradient anchored to this small fixed frame instead of the
   home's scroll-driven full-section blobs (no scroll progress to drive
   here). background-attachment stays the default ("scroll", i.e. fixed
   to the element's own box) so this doesn't move when the frame's own
   content overflows/scrolls internally. Respects the frame's own
   border-radius automatically (background-clip defaults to border-box). */
.parliamone-modal__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(calc(72 * var(--pm-u)), 92vw);
  max-height: 88vh;
  /* Fallback scroll owner for every step that ISN'T internally split into
     its own scrollable body (every step except Step 03 — see
     .parliamone-service-step__body and `.parliamone-step[data-step="3"]`
     below, VAYRA_PARLIAMONE_HOSPITALITY_SERVICE_STEP_GRAPHICS_CLAUDE.md
     Part 1): if one of those steps' own content ever exceeds this
     frame's max-height, this still lets it scroll exactly as before —
     `display:flex` above doesn't disable a flex container's own
     overflow. Step 03 shouldn't ever actually need this (it's sized to
     fit via flex + its own internal scroll instead), but it costs
     nothing to leave as a safety net. */
  overflow-y: auto;
  border-radius: calc(2 * var(--pm-u));
  background:
    radial-gradient(ellipse 75% 55% at 50% 100%, rgba(21, 76, 73, 0.24) 0%, rgba(14, 57, 55, 0.13) 40%, rgba(10, 11, 11, 0) 75%),
    var(--pm-black);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  padding: calc(5.6 * var(--pm-u)) calc(4.8 * var(--pm-u)) calc(4.8 * var(--pm-u));
  transform: scale(0.94);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.parliamone-modal.is-open .parliamone-modal__frame {
  transform: scale(1);
}

/* Discreet at rest (no filled circle, dimmer glyph) — same calc(4 * var(--pm-u)) hit area
   as before, so the click/tap target doesn't shrink, only its visual
   weight does. Gains the same subtle background only on hover/focus. */
.parliamone-modal__close {
  position: absolute;
  top: calc(1.6 * var(--pm-u));
  right: calc(1.6 * var(--pm-u));
  z-index: 1;
  width: calc(4 * var(--pm-u));
  height: calc(4 * var(--pm-u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 240, 234, 0.6);
  font-size: calc(1.8 * var(--pm-u));
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.parliamone-modal__close:hover,
.parliamone-modal__close:focus-visible {
  background: rgba(242, 240, 234, 0.1);
  color: var(--pm-ivory);
}

.parliamone-modal__progress {
  height: 2px;
  width: 100%;
  background: var(--pm-line);
  border-radius: 999px;
  margin-bottom: calc(3.2 * var(--pm-u));
  overflow: hidden;
}
.parliamone-modal__progress-bar {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--pm-ivory);
  border-radius: inherit;
  transition: width 320ms ease;
}

/* ---- Step chrome ---- */

.parliamone-step__label {
  margin: 0 0 calc(1 * var(--pm-u));
  font-size: calc(1.3 * var(--pm-u));
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(242, 240, 234, 0.65);
}
.parliamone-step__title {
  margin: 0 0 calc(2.8 * var(--pm-u));
  font-size: calc(3.2 * var(--pm-u));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.parliamone-step__title:focus {
  outline: none; /* programmatic focus target for a11y, not a visible focus ring on a heading */
}
.parliamone-step__title-italic {
  display: block;
  margin-top: calc(0.4 * var(--pm-u));
  font-family: var(--pm-font-serif-italic);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.7em;
}
/* Inline variant — bold + italic share one line (e.g. "PARLIAMO DEL
   tuo progetto"), matching the home's own "ONE shared vision." pattern,
   instead of the stacked block default above (still used unchanged by
   Step 04/Success, e.g. "PARLIAMONE. / Tell us where you want to go.").
   Compound selector, not source order, is what makes this reliably win —
   same reasoning as .parliamone-btn.parliamone-intro__choice above.

   font-size: 1.26em (not the base rule's 0.7em) is a measured value, not
   a guess — a canvas measureText() probe on the real self-hosted fonts
   showed Libre Bodoni Italic's "t" ascender reaches only ~79% of Poppins
   Bold's cap-height at equal font-size (actualBoundingBoxAscent: 18.0px
   italic vs 22.8px bold @ 32px), so the italic needs to be ~1.265× the
   bold's size, not the same size, for the two to read as the same visual
   height — scoped to this modifier only, so Step 04/Success's own
   already-approved 0.7em ratio is untouched. */
.parliamone-step__title-italic.parliamone-step__title-italic--inline {
  display: inline;
  margin-top: 0;
  font-size: 1.26em;
}

/* ---- Step 00 intro choice (call vs. form) ----
   VAYRA_PARLIAMONE_HOME_CONSISTENCY_CLAUDE.md: deliberately reuses the
   modal's own existing lightweight card language (same border/background/
   radius/padding as .parliamone-option/.parliamone-package below, same
   .parliamone-option__title/__desc text treatment) instead of a filled
   block — lighter, and consistent with both the home's thin-border
   buttons and this modal's own established conventions. */

.parliamone-intro__text {
  margin: 0 0 calc(2.4 * var(--pm-u));
  max-width: calc(46 * var(--pm-u));
  font-size: calc(1.5 * var(--pm-u));
  line-height: 1.5;
  color: rgba(242, 240, 234, 0.75);
}
.parliamone-intro__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(1.2 * var(--pm-u));
}
.parliamone-intro__choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.5 * var(--pm-u));
  width: 100%;
  text-align: left;
  padding: calc(1.8 * var(--pm-u)) calc(2 * var(--pm-u));
  border: 1px solid var(--pm-line);
  border-radius: calc(1.2 * var(--pm-u));
  background: rgba(242, 240, 234, 0.03);
  color: var(--pm-ivory);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.parliamone-intro__choice:hover,
.parliamone-intro__choice:focus-visible {
  border-color: rgba(242, 240, 234, 0.5);
  background: rgba(242, 240, 234, 0.07);
}
/* The call stays recognizable as the first/primary action through
   position (always first, both in source order and grid placement) and
   a moderate border emphasis — full-strength ivory instead of the
   faint shared line color — never a filled block. */
.parliamone-intro__choice--call {
  border-color: var(--pm-ivory);
}

/* ---- Single-choice option cards ---- */

.parliamone-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(1.2 * var(--pm-u));
  margin-bottom: calc(3.2 * var(--pm-u));
}
.parliamone-option {
  text-align: left;
  padding: calc(1.8 * var(--pm-u)) calc(2 * var(--pm-u));
  border: 1px solid var(--pm-line);
  border-radius: calc(1.2 * var(--pm-u));
  background: rgba(242, 240, 234, 0.03);
  color: var(--pm-ivory);
  font-family: var(--pm-font-sans);
  font-size: calc(1.6 * var(--pm-u));
  font-weight: 500;
  letter-spacing: -0.01em;
  outline: none; /* replaced by the explicit :focus-visible ring below — the browser's own default focus ring was layering a second (orange/white) ring on top of the border/background change here */
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.parliamone-option:hover,
.parliamone-option:focus-visible {
  border-color: rgba(242, 240, 234, 0.5);
  background: rgba(242, 240, 234, 0.07);
}
/* Keyboard-only focus ring — a thin beige outline held off the card by a
   small dark gap (outline-offset), independent of the fill/border-color
   change above so it stays visible on any state, including selected.
   outline never affects box size/position, so this can never shift or
   resize the card. */
.parliamone-option:focus-visible {
  outline: 1px solid var(--pm-ivory);
  outline-offset: 3px;
}
.parliamone-option.is-selected {
  border-color: var(--pm-ivory);
  background: var(--pm-ivory);
  color: var(--pm-black);
}

/* ---- Step 01 role options — unified with Step 02's selected look ----
   VAYRA_PARLIAMONE_SELECTION_UNIFY_CLAUDE.md: an earlier round gave role
   options their own lightened-selection + dot-indicator treatment; this
   one removes it in favor of reusing the exact same shared rule Step 02
   already relied on (see ".parliamone-options .parliamone-package.is-selected"
   below, which used to be scoped to ".parliamone-options--sector" only —
   now generalized to match here too, rather than duplicating values).
   ".parliamone-option--role" now exists only to keep "ALTRO" (a
   .parliamone-package, since it hosts a real <input> — invalid inside
   <button>) visually sized like its plain-button siblings, not for any
   selection-state styling. */
.parliamone-option--role.parliamone-package .parliamone-package__name {
  font-size: calc(1.6 * var(--pm-u));
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---- Step 02 sector options: title + description ---- */
/* (VAYRA_PARLIAMONE_DYNAMIC_BRANCHING_CLAUDE.md). Step 03's own cards —
   Corporate, Hospitality and the neutral custom-project option alike —
   are all .parliamone-package cards now (VAYRA_PARLIAMONE_SERVICE_STEP_
   REDESIGN_CLAUDE.md / VAYRA_PARLIAMONE_HOSPITALITY_SERVICE_STEP_UNIFY_
   CLAUDE.md), not .parliamone-option buttons, so this rule only needs to
   reach Step 02's sector cards. */

.parliamone-option--sector {
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--pm-u));
}
.parliamone-option__title {
  font-size: calc(1.6 * var(--pm-u));
  font-weight: 600;
  letter-spacing: -0.01em;
}
.parliamone-option__desc {
  font-size: calc(1.25 * var(--pm-u));
  font-weight: 400;
  line-height: 1.4;
  color: rgba(242, 240, 234, 0.6);
}
.parliamone-option.is-selected .parliamone-option__desc {
  color: rgba(10, 11, 11, 0.7);
}
/* Step 01/02's ALTRO cards are .parliamone-package (they need to host a
   required input/textarea — invalid nested inside a <button>), sitting
   among plain .parliamone-option buttons in the same .parliamone-options
   group. Match their selected state to their siblings' full-ivory-invert
   look for visual consistency, rather than the green package-card accent
   used in Step 03 (whose cards live in .parliamone-packages, a different
   container class, so this rule never reaches them). Scoped to the
   shared .parliamone-options container class — not "--sector" specifically
   — so Step 01's role-Altro gets the exact same rule Step 02 already
   used, instead of a duplicated copy. */
.parliamone-options .parliamone-package.is-selected {
  border-color: var(--pm-ivory);
  background: var(--pm-ivory);
  color: var(--pm-black);
}
.parliamone-options .parliamone-package.is-selected .parliamone-package__tagline {
  color: rgba(10, 11, 11, 0.7);
}

/* ---- Step 03 dynamic package/service cards (corporate + Collection) ---- */

.parliamone-packages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(1.2 * var(--pm-u));
  margin-bottom: calc(3.2 * var(--pm-u));
}
/* .parliamone-packages' own `display: grid` has the same specificity as
   the browser default `[hidden] { display: none }` and is declared
   later (author stylesheet vs. UA stylesheet), so without this it wins
   and silently shows the panel anyway — this restores `hidden`. */
.parliamone-packages[hidden] {
  display: none;
}
/* Shared full-width modifier — Collection and ALTRO in Hospitality, and
   the single neutral custom-project card, all occupy the full row
   rather than leaving an empty half-column beside them. */
.parliamone-package--full {
  grid-column: 1 / -1;
}

.parliamone-package {
  text-align: left;
  padding: calc(1.8 * var(--pm-u)) calc(2 * var(--pm-u));
  border: 1px solid var(--pm-line);
  border-radius: calc(1.2 * var(--pm-u));
  background: rgba(242, 240, 234, 0.03);
  color: var(--pm-ivory);
  font-family: var(--pm-font-sans);
  cursor: pointer;
  outline: none; /* replaced by the explicit :focus-visible ring below — same reasoning as .parliamone-option */
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.parliamone-package:hover,
.parliamone-package:focus-visible {
  border-color: rgba(242, 240, 234, 0.5);
  background: rgba(242, 240, 234, 0.07);
}
.parliamone-package:focus-visible {
  outline: 1px solid var(--pm-ivory);
  outline-offset: 3px;
}
.parliamone-package.is-selected {
  border-color: var(--pm-green);
  background: rgba(169, 216, 193, 0.07);
}

.parliamone-package__head {
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--pm-u));
}
.parliamone-package__name {
  font-size: calc(1.7 * var(--pm-u));
  font-weight: 700;
  letter-spacing: 0.01em;
}
.parliamone-package__badge {
  display: inline-block;
  margin-left: calc(0.9 * var(--pm-u));
  padding: calc(0.3 * var(--pm-u)) calc(0.9 * var(--pm-u));
  border-radius: 999px;
  background: rgba(169, 216, 193, 0.14);
  color: var(--pm-green);
  font-size: calc(1 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.09em;
  vertical-align: middle;
}
.parliamone-package__label-small {
  display: block;
  margin-bottom: calc(0.2 * var(--pm-u));
  font-size: calc(1.1 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--pm-green);
}
.parliamone-package__tagline {
  margin: 0;
  font-size: calc(1.35 * var(--pm-u));
  font-weight: 400;
  line-height: 1.4;
  color: rgba(242, 240, 234, 0.7);
}

.parliamone-package__details {
  display: none;
  margin-top: calc(1.6 * var(--pm-u));
  padding-top: calc(1.6 * var(--pm-u));
  border-top: 1px solid var(--pm-line);
}
/* VAYRA_PARLIAMONE_FINAL_UX_FIXES_CLAUDE.md Part 1/3: selecting a card
   must NEVER open/close its details — only the dedicated SCOPRI/
   NASCONDI button (which toggles .is-open) controls this panel. */
.parliamone-package.is-open .parliamone-package__details {
  display: block;
}
/* ALTRO's minimal "Da definire" detail has no SCOPRI control (Part 2
   names only Essential/Signature/Continuum) — it stays plainly visible
   at all times instead of being gated behind selection or discovery. */
.parliamone-package__plain-details {
  margin-top: calc(1.6 * var(--pm-u));
  padding-top: calc(1.6 * var(--pm-u));
  border-top: 1px solid var(--pm-line);
}
.parliamone-package__group + .parliamone-package__group {
  margin-top: calc(1.4 * var(--pm-u));
}
.parliamone-package__group-title {
  margin: 0 0 calc(0.8 * var(--pm-u));
  font-size: calc(1.1 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(242, 240, 234, 0.55);
}
.parliamone-package__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(0.7 * var(--pm-u));
}
.parliamone-package__list li {
  display: flex;
  flex-direction: column;
  font-size: calc(1.3 * var(--pm-u));
  line-height: 1.35;
}
.parliamone-package__list li strong {
  font-weight: 500;
}
.parliamone-package__list li span {
  font-size: calc(1.15 * var(--pm-u));
  color: rgba(242, 240, 234, 0.6);
}
.parliamone-package__consegna {
  margin: 0;
  font-size: calc(1.3 * var(--pm-u));
  line-height: 1.4;
}
.parliamone-package__desc-full {
  margin: 0 0 calc(1.6 * var(--pm-u));
  font-size: calc(1.25 * var(--pm-u));
  line-height: 1.55;
  color: rgba(242, 240, 234, 0.75);
}

.parliamone-package__discover {
  align-self: flex-start;
  margin-top: calc(0.2 * var(--pm-u));
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--pm-font-sans);
  font-size: calc(1.1 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--pm-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.parliamone-package__discover:hover,
.parliamone-package__discover:focus-visible {
  opacity: 0.8;
}

.parliamone-package__foot {
  margin-top: calc(1.6 * var(--pm-u));
}
.parliamone-package__cta {
  display: inline-block;
  font-size: calc(1.1 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(242, 240, 234, 0.5);
}
.parliamone-package__cta--selected {
  display: none;
  color: var(--pm-green);
}
.parliamone-package.is-selected .parliamone-package__cta--select { display: none; }
.parliamone-package.is-selected .parliamone-package__cta--selected { display: inline-block; }

/* ---- Step 03 — compact cards + one shared details panel ----
   VAYRA_PARLIAMONE_SERVICE_STEP_REDESIGN_CLAUDE.md (Corporate), extended
   to Hospitality by VAYRA_PARLIAMONE_HOSPITALITY_SERVICE_STEP_UNIFY_
   CLAUDE.md — Collection was the last card using the old per-card SCOPRI/
   inline-expansion pattern (.parliamone-package__discover/__details
   above); every "Vedi dettagli" across every branch now opens the one
   shared panel below instead, so those two classes have no current user
   left, but stay defined/untouched in case a future card needs that
   simpler inline pattern again. .parliamone-package__head is still used
   by the neutral branch's own plain (non-expanding) card. */

/* ---- Step 03 layout split — scrollable body + a real (not sticky)
   footer — VAYRA_PARLIAMONE_HOSPITALITY_SERVICE_STEP_GRAPHICS_CLAUDE.md
   Part 1. An earlier round made INDIETRO/CONTINUA `position:sticky` so
   they'd stay reachable without scrolling past Hospitality's six cards
   — reachable, but it needed an opaque background to hide whatever
   scrolled underneath it, and that background painted as a flat black
   rectangle cutting across the frame's own dark-green gradient. Rather
   than trying to repaint that gradient a second time inside a smaller
   box (measured live: the same gradient formula in a shorter box shows
   as a visibly smaller/mismatched blob, not a seamless continuation),
   this splits Step 03 itself into two real flex children instead of one
   sticky-over-scrolling-content trick: `.parliamone-service-step__body`
   (everything except INDIETRO/CONTINUA) scrolls on its own, and the
   actions row sits after it as an ordinary sibling with its own real
   space in the layout — never overlapped by anything, so it needs no
   background of its own at all, and the frame's existing gradient (see
   .parliamone-modal__frame above, a shared ancestor) just shows through
   it uninterrupted. Relies on .parliamone-modal__frame already being
   `display:flex;flex-direction:column` (declared there) — this step,
   when active, sizes itself to the frame's own remaining space via
   flex-grow/shrink, and its inner body absorbs any actual overflow via
   its own scrollbar; other steps are untouched (no flex-grow/shrink of
   their own, so they keep sizing to their natural content height exactly
   as before, still safety-netted by the frame's own overflow-y:auto). */
.parliamone-step[data-step="3"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* Same specificity gotcha as .parliamone-packages[hidden] and
   .parliamone-other-field[hidden] elsewhere in this file — and the one
   actually responsible for the "intro and Step 03 both visible at once"
   bug reported live: `.parliamone-step[data-step="3"]` (one class + one
   attribute selector) is MORE specific than the browser's own built-in
   `[hidden] { display: none }` (one attribute selector), so without this
   override Step 03 kept rendering as `display:flex` even while it
   carried the `hidden` attribute — confirmed live via getComputedStyle
   (`display: "flex"` with `hidden` still `true`) whenever a different
   step (e.g. the Step 00 intro) was the one actually meant to be shown.
   Every other step relies on the browser's own default here and was
   never affected — this rule ever having its own `display` at all is
   what's new and specific to Step 03's layout-split rule above. */
.parliamone-step[data-step="3"][hidden] {
  display: none;
}
.parliamone-service-step__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.parliamone-step__intro {
  margin: calc(-1.6 * var(--pm-u)) 0 calc(2.4 * var(--pm-u));
  font-size: calc(1.4 * var(--pm-u));
  line-height: 1.5;
  color: rgba(242, 240, 234, 0.7);
}

/* Non-interactive layout wrapper — owns the card's visible border/radius
   so the nested .parliamone-package (the actual role="radio" selection
   surface) and the sibling "Vedi dettagli" <button> can be two genuinely
   separate, non-nested controls (never a <button> inside another
   interactive control) while still reading as one card. */
.parliamone-service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pm-line);
  border-radius: calc(1.2 * var(--pm-u));
  overflow: hidden; /* clips the selected fill to these rounded corners even though the inner surface itself is square */
  transition: border-color 0.2s ease;
}
/* display:flex;flex-direction:column turns name/tagline/foot into a
   coherent internal structure (VAYRA_PARLIAMONE_HOSPITALITY_SERVICE_STEP_
   GRAPHICS_CLAUDE.md Part 2) rather than three independently-flowing
   block children — needed so .parliamone-package__foot below can be
   pushed to the true bottom of this box. flex:1 1 auto (already here)
   already makes this box fill its .parliamone-service-card's full
   height, which the grid above stretches to match the tallest card in
   its row — so "bottom of this box" now means the same thing for every
   card in a row regardless of how many lines its own tagline wraps to. */
.parliamone-service-card .parliamone-package {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: rgba(242, 240, 234, 0.03);
}
.parliamone-service-card .parliamone-package:hover,
.parliamone-service-card .parliamone-package:focus-visible {
  border: none; /* the base .parliamone-package:hover would otherwise re-draw its own border here */
}
/* Pushes SELEZIONA/SELEZIONATO to the bottom of the (now row-height-
   equalized) card above, instead of sitting wherever the tagline's own
   wrapped length happens to leave it — "allinea Seleziona/Selezionato
   nella parte inferiore dell'area principale delle schede della stessa
   riga". margin-top:auto claims any extra height a shorter card has
   versus its row's tallest sibling; padding-top keeps the base rule's
   calc(1.6 * var(--pm-u)) breathing room as a genuine minimum even for that tallest card
   itself, where auto margin has no extra space left to claim (auto
   alone would collapse to 0 there — padding is a separate, always-
   respected box-model property, so this doesn't depend on it). Scoped
   to cards inside a .parliamone-service-card specifically — the neutral
   branch's single standalone card, and every Step 01/02 ALTRO card,
   keep the base rule's plain fixed margin (they were never part of a
   same-row alignment problem to begin with). */
.parliamone-service-card .parliamone-package__foot {
  margin-top: auto;
  padding-top: calc(1.6 * var(--pm-u));
}
/* Beige fill on selection, matching Step 01/02 — not the green package
   accent the base .parliamone-package.is-selected rule still uses (still
   relevant to the neutral branch's own single custom-project card, the
   only .parliamone-package left outside a .parliamone-service-card
   wrapper). Specificity (0,3,0) beats that plain rule (0,2,0) regardless
   of declaration order. */
.parliamone-service-card .parliamone-package.is-selected {
  background: var(--pm-ivory);
  color: var(--pm-black);
}
.parliamone-service-card .parliamone-package__tagline {
  color: rgba(242, 240, 234, 0.7);
}
.parliamone-service-card .parliamone-package.is-selected .parliamone-package__tagline {
  color: rgba(10, 11, 11, 0.7);
}
.parliamone-service-card .parliamone-package__cta--selected {
  color: var(--pm-black);
}

/* "Vedi dettagli" — a plain sibling, not nested inside the radio surface
   above. Deliberately quiet (text-only, no border/fill of its own) so it
   never competes with "Seleziona" for visual weight, per the brief's own
   "troppo piccolo e poco riconoscibile" complaint being about SELEZIONA,
   not this. */
.parliamone-service-card__details-btn {
  padding: calc(1.2 * var(--pm-u)) calc(2 * var(--pm-u));
  border: 0;
  border-top: 1px solid var(--pm-line);
  background: rgba(242, 240, 234, 0.02);
  font-family: var(--pm-font-sans);
  font-size: calc(1.2 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(242, 240, 234, 0.75);
  text-align: left;
  outline: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.parliamone-service-card__details-btn:hover,
.parliamone-service-card__details-btn:focus-visible {
  color: var(--pm-ivory);
  background: rgba(242, 240, 234, 0.06);
}
.parliamone-service-card__details-btn:focus-visible {
  outline: 1px solid var(--pm-ivory);
  outline-offset: -3px; /* inset, since this button sits flush against the shared card border with no room for an outset ring */
}

/* Single shared details panel, below the whole grid — shows exactly one
   of its three .parliamone-service-details__panel children at a time. */
.parliamone-service-details {
  margin-top: calc(1.6 * var(--pm-u));
  padding: calc(2.4 * var(--pm-u)) calc(2.6 * var(--pm-u));
  border: 1px solid var(--pm-line);
  border-radius: calc(1.2 * var(--pm-u));
  background: rgba(242, 240, 234, 0.04);
}
.parliamone-service-details[hidden] {
  display: none;
}
.parliamone-service-details:focus {
  outline: none; /* programmatic scroll/focus target on open, not a visible ring on the panel itself */
}
.parliamone-service-details__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.6 * var(--pm-u));
  margin-bottom: calc(2 * var(--pm-u));
  padding-bottom: calc(1.6 * var(--pm-u));
  border-bottom: 1px solid var(--pm-line);
}
.parliamone-service-details__heading {
  display: flex;
  align-items: baseline;
  gap: calc(1.2 * var(--pm-u));
  flex-wrap: wrap;
}
.parliamone-service-details__title {
  margin: 0;
  font-family: var(--pm-font-sans);
  font-size: calc(1.9 * var(--pm-u));
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* Discreet confirmation, replacing the old "Seleziona {Nome}" button —
   redundant now that opening details always selects the same package
   (see js/parliamone-modal.js). Shown only when genuinely true, even
   though that's now always the case whenever the panel is open at all —
   still computed from state rather than hardcoded, in case that
   invariant ever needs to loosen later. */
.parliamone-service-details__badge {
  font-family: var(--pm-font-sans);
  font-size: calc(1.1 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-green);
}
.parliamone-service-details__close {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--pm-font-sans);
  font-size: calc(1.15 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(242, 240, 234, 0.65);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  outline: none;
  transition: color 0.2s ease;
}
.parliamone-service-details__close:hover,
.parliamone-service-details__close:focus-visible {
  color: var(--pm-ivory);
}
.parliamone-service-details__close:focus-visible {
  outline: 1px solid var(--pm-ivory);
  outline-offset: 3px;
}
.parliamone-service-details__panel {
  display: flex;
  gap: calc(3.2 * var(--pm-u));
}
.parliamone-service-details__panel[hidden] {
  display: none;
}
.parliamone-service-details__col {
  flex: 1 1 0;
  min-width: 0;
}
.parliamone-service-details__col .parliamone-package__group + .parliamone-package__group {
  margin-top: calc(2 * var(--pm-u));
}
/* Bottom navigation zone, Step 03 only — VAYRA_PARLIAMONE_SERVICE_STEP_
   SYNC_CLAUDE.md Part 2. Two earlier rounds tried to keep INDIETRO/
   CONTINUA reachable without scrolling past Hospitality's six cards: a
   plain margin (not enough — they could still end up below the fold on
   short windows), then `position:sticky` with an opaque background
   (reachable, but painted a flat black rectangle over the frame's own
   gradient — see the .parliamone-step[data-step="3"] flex rule above
   for the fix that made a sticky/opaque trick unnecessary in the first
   place: this row is now a genuine flex sibling AFTER
   .parliamone-service-step__body's own scrollable area, not a
   position:sticky overlay on top of it, so it's neither cut off nor
   ever painted over anything — no background needed at all here, the
   frame's own gradient (a shared ancestor) just continues through
   unbroken). `flex: 0 0 auto` keeps this row at its natural size,
   letting the body above it (flex: 1 1 auto) absorb all the
   growing/shrinking instead. Desktop spacing unchanged from the
   sticky-era rule: 32px above (content → buttons) and 28px below
   (buttons → frame edge, this row's own padding-bottom, on top of
   living inside the frame's own padded column — same total gap as
   before, just no longer painted black). Scoped to `[data-step="3"]`
   specifically, not the shared .parliamone-step__actions base rule
   every other step also uses — those steps weren't part of this brief
   and keep their existing layout untouched. */
.parliamone-step[data-step="3"] .parliamone-step__actions {
  flex: 0 0 auto;
  margin-top: calc(3.2 * var(--pm-u));
  padding-bottom: calc(2.8 * var(--pm-u));
}

/* Corporate ALTRO's field now sits below the whole grid (a standalone
   block, not nested inside a card) — give it its own full border/box
   instead of the shared .parliamone-other-field's border-top-only
   divider look, which assumed being nested inside another bordered card. */
.parliamone-service-other {
  margin-top: calc(1.6 * var(--pm-u));
  padding: calc(2 * var(--pm-u)) calc(2.2 * var(--pm-u));
  border: 1px solid var(--pm-line);
  border-radius: calc(1.2 * var(--pm-u));
}

/* ---- Required "ALTRO" custom-text field (sector Step 02, every
   service ALTRO in Step 03) — VAYRA_PARLIAMONE_FINAL_UX_FIXES_CLAUDE.md
   Part 8. Shown only while its own card is selected; independent from
   the SCOPRI/NASCONDI expansion system above. ---- */

.parliamone-other-field {
  margin-top: calc(1.4 * var(--pm-u));
  padding-top: calc(1.4 * var(--pm-u));
  border-top: 1px solid var(--pm-line);
  display: flex;
  flex-direction: column;
  gap: calc(0.6 * var(--pm-u));
}
/* Same specificity gotcha as .parliamone-packages[hidden] above — this
   class sets its own `display`, so it needs an explicit override to
   actually respect the `hidden` attribute. */
.parliamone-other-field[hidden] {
  display: none;
}
.parliamone-other-field__label {
  font-size: calc(1.1 * var(--pm-u));
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(242, 240, 234, 0.7);
}
.parliamone-other-field__input {
  font: inherit;
  font-family: var(--pm-font-sans);
  font-size: calc(1.4 * var(--pm-u));
  font-weight: 400;
  color: var(--pm-ivory);
  background: rgba(242, 240, 234, 0.05);
  border: 1px solid var(--pm-line);
  border-radius: calc(0.8 * var(--pm-u));
  padding: calc(1 * var(--pm-u)) calc(1.2 * var(--pm-u));
  resize: vertical;
}
.parliamone-other-field__input:focus-visible {
  outline: none;
  border-color: var(--pm-green);
}
.parliamone-other-field__hint {
  margin: 0;
  font-size: calc(1.15 * var(--pm-u));
  color: rgba(242, 240, 234, 0.55);
}
.parliamone-other-field__error {
  margin: 0;
  font-size: calc(1.15 * var(--pm-u));
  color: #e2a3a3;
}
/* Selected package cards invert to ivory (Step 01/02) or tint green
   (Step 03) — keep the nested field's own contrast correct in both.
   Shared across Step 01/02 (see the .parliamone-options generalization
   above) rather than duplicated per step. */
.parliamone-options .parliamone-package.is-selected .parliamone-other-field {
  border-top-color: rgba(10, 11, 11, 0.18);
}
.parliamone-options .parliamone-package.is-selected .parliamone-other-field__label {
  color: rgba(10, 11, 11, 0.65);
}
.parliamone-options .parliamone-package.is-selected .parliamone-other-field__hint {
  color: rgba(10, 11, 11, 0.55);
}
.parliamone-options .parliamone-package.is-selected .parliamone-other-field__input {
  color: var(--pm-black);
  background: rgba(10, 11, 11, 0.05);
  border-color: rgba(10, 11, 11, 0.2);
}

/* ---- Buttons ---- */

.parliamone-step__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.6 * var(--pm-u));
}
.parliamone-step__actions--center { justify-content: center; }

.parliamone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: calc(1.6 * var(--pm-u)) calc(3.2 * var(--pm-u));
  font-family: var(--pm-font-sans);
  font-weight: 500;
  font-size: calc(1.5 * var(--pm-u));
  letter-spacing: 0.08em;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.parliamone-btn--primary {
  border: 1px solid var(--pm-ivory);
  background: var(--pm-ivory);
  color: var(--pm-black);
}
.parliamone-btn--primary:hover,
.parliamone-btn--primary:focus-visible {
  background: transparent;
  color: var(--pm-ivory);
}
.parliamone-btn--primary:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.parliamone-btn--ghost {
  border: 1px solid var(--pm-line);
  background: transparent;
  color: var(--pm-ivory);
}
.parliamone-btn--ghost:hover,
.parliamone-btn--ghost:focus-visible {
  border-color: var(--pm-ivory);
}

/* ---- Step 4 summary ---- */

.parliamone-summary {
  display: grid;
  gap: calc(1.2 * var(--pm-u));
  margin: 0 0 calc(3.2 * var(--pm-u));
  padding: calc(2 * var(--pm-u)) calc(2.2 * var(--pm-u));
  border: 1px solid var(--pm-line);
  border-radius: calc(1.2 * var(--pm-u));
  background: rgba(242, 240, 234, 0.03);
}
.parliamone-summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.2 * var(--pm-u));
}
.parliamone-summary__item + .parliamone-summary__item {
  padding-top: calc(1.2 * var(--pm-u));
  border-top: 1px solid var(--pm-line);
}
.parliamone-summary__text dt {
  font-size: calc(1.1 * var(--pm-u));
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(242, 240, 234, 0.6);
}
.parliamone-summary__text dd {
  margin: calc(0.2 * var(--pm-u)) 0 0;
  font-size: calc(1.6 * var(--pm-u));
  font-weight: 500;
}
.parliamone-summary__other {
  font-size: calc(1.3 * var(--pm-u));
  font-weight: 400;
  line-height: 1.4;
  color: rgba(242, 240, 234, 0.7);
}
.parliamone-summary__edit {
  /* This is a real <button>, so without an explicit reset the browser's
     default button chrome (filled background, border, padding) was
     showing through underneath the intended text-only underlined
     link style below — VAYRA_PARLIAMONE_MODIFICA_NO_BACKGROUND_CLAUDE.md. */
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  font: inherit;
  font-family: var(--pm-font-sans);
  font-size: calc(1.2 * var(--pm-u));
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--pm-ivory);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.parliamone-summary__edit:hover,
.parliamone-summary__edit:focus-visible {
  opacity: 1;
}

/* ---- Step 4 form ---- */

.parliamone-form__hint {
  margin: calc(-1 * var(--pm-u)) 0 calc(1.6 * var(--pm-u));
  font-size: calc(1.2 * var(--pm-u));
  color: rgba(242, 240, 234, 0.55);
}
.parliamone-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(2 * var(--pm-u)) calc(2 * var(--pm-u));
}
.parliamone-field {
  display: flex;
  flex-direction: column;
  gap: calc(0.6 * var(--pm-u));
  font-size: calc(1.3 * var(--pm-u));
  font-weight: 500;
  letter-spacing: 0.04em;
}
.parliamone-field--full { grid-column: 1 / -1; }
.parliamone-field input,
.parliamone-field textarea {
  font: inherit;
  font-family: var(--pm-font-sans);
  font-size: calc(1.6 * var(--pm-u));
  font-weight: 400;
  letter-spacing: 0;
  color: var(--pm-ivory);
  background: rgba(242, 240, 234, 0.03);
  border: 1px solid var(--pm-line);
  border-radius: calc(0.8 * var(--pm-u));
  padding: calc(1.2 * var(--pm-u)) calc(1.4 * var(--pm-u));
  resize: vertical;
}
.parliamone-field input:focus-visible,
.parliamone-field textarea:focus-visible {
  outline: none;
  border-color: var(--pm-ivory);
}
/* Per-field inline error — Italian, right under the field it belongs to,
   never a native browser validation bubble (which isn't guaranteed to be
   in Italian and isn't styleable). Hidden by default; JS toggles it. */
.parliamone-field__error {
  margin: 0;
  font-size: calc(1.2 * var(--pm-u));
  line-height: 1.4;
  color: #e2a3a3;
}
/* JS-driven (matches every other state class in this modal — is-selected,
   is-open, etc. — rather than relying on native :invalid, which optional
   fields like phone/website would otherwise trip even when empty). */
.parliamone-field--error input,
.parliamone-field--error textarea {
  border-color: #e2a3a3;
}
.parliamone-checkbox {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--pm-u));
  padding-block: calc(0.2 * var(--pm-u));
  font-size: calc(1.3 * var(--pm-u));
  line-height: 1.5;
  color: rgba(242, 240, 234, 0.85);
  cursor: pointer;
}
.parliamone-checkbox input {
  flex: 0 0 auto;
  width: calc(1.8 * var(--pm-u));
  height: calc(1.8 * var(--pm-u));
  accent-color: var(--pm-ivory);
}
.parliamone-checkbox__link {
  color: var(--pm-ivory);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  outline: none;
}
.parliamone-checkbox__link:hover {
  color: var(--pm-green);
}
.parliamone-checkbox__link:focus-visible {
  outline: 1px solid var(--pm-ivory);
  outline-offset: 3px;
  border-radius: calc(0.2 * var(--pm-u));
}
.parliamone-field__error--checkbox {
  grid-column: 1 / -1;
  margin-top: calc(-1 * var(--pm-u));
}
.parliamone-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: calc(1.3 * var(--pm-u));
  color: #e2a3a3;
}
/* Reuses .parliamone-form__hint's own font-size/color (the same muted
   support-text style already used for "* Campi obbligatori") — this
   modifier only replaces the negative top margin (tuned for that
   element's original position right after the summary block, before
   the form) with spacing that fits sitting inside the form's own grid,
   directly above the submit actions. */
.parliamone-form__hint--submit {
  grid-column: 1 / -1;
  margin: calc(0.4 * var(--pm-u)) 0 0;
}
.parliamone-form .parliamone-step__actions {
  grid-column: 1 / -1;
  margin-top: calc(1 * var(--pm-u));
}

/* ---- Success state ---- */

.parliamone-step--success {
  text-align: center;
  padding-block: calc(2 * var(--pm-u));
}
.parliamone-success__text {
  max-width: calc(40 * var(--pm-u));
  margin: 0 auto calc(3.2 * var(--pm-u));
  font-size: calc(1.6 * var(--pm-u));
  line-height: 1.5;
  color: rgba(242, 240, 234, 0.85);
}

/* ---- Responsive (Part 12) ---- */

@media (max-width: 720px) {
  .parliamone-modal { padding: 0; }
  .parliamone-modal__frame {
    width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: calc(6.4 * var(--pm-u)) calc(2 * var(--pm-u)) calc(3.2 * var(--pm-u));
  }
  .parliamone-options,
  .parliamone-packages { grid-template-columns: 1fr; }
  /* Call stays first when stacked — it's already first in source order
     (grid-auto-flow default), so a single-column collapse preserves it
     without any extra ordering rule. */
  .parliamone-intro__actions { grid-template-columns: 1fr; }
  .parliamone-service-details { padding: calc(2 * var(--pm-u)); }
  .parliamone-service-details__panel { flex-direction: column; gap: calc(2 * var(--pm-u)); }
  /* Same reasoning as the desktop rule — a real flex sibling below its
     own scrollable body, not an overlay, so no background needed here
     either. Top gap is absolute px, not rem — see the desktop rule's own
     comment on why the fluid font-size scale can't express a real
     minimum gap here. Bottom also clears the device's own safe area
     (home indicator etc.) where present, on top of the ≥24px minimum,
     not instead of it. */
  .parliamone-step[data-step="3"] .parliamone-step__actions {
    margin-top: 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .parliamone-form { grid-template-columns: 1fr; }
  .parliamone-field--full { grid-column: auto; }
  .parliamone-step__title { font-size: calc(2.4 * var(--pm-u)); }
  .parliamone-step__actions { flex-wrap: wrap-reverse; }
  .parliamone-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .parliamone-modal,
  .parliamone-modal__frame,
  .parliamone-modal__progress-bar,
  .parliamone-option,
  .parliamone-btn {
    transition: none;
  }
}

/* ==========================================================================
   Modulo "Parliamone" v2 — passaggi con corpo che scorre e pulsanti sempre
   visibili, domande con errore, fasce di investimento.
   ========================================================================== */
html.parliamone-modal-open { overflow: hidden; }
.parliamone-modal [hidden] { display: none !important; }
.parliamone-modal *, .parliamone-modal *::before, .parliamone-modal *::after { box-sizing: border-box; }
:where(.parliamone-modal) button { font-family: inherit; cursor: pointer; }
:where(.parliamone-modal) :is(h2, h3, p, dl, dd) { margin-top: 0; }
.parliamone-modal__frame { line-height: 1.35; text-align: left; }
.parliamone-modal__close { border: 0; cursor: pointer; }

.parliamone-step--corpo:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.parliamone-step--corpo > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.parliamone-step__corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 4px 0; margin-right: -4px; }
.parliamone-step--corpo .parliamone-step__actions { flex: 0 0 auto; padding-top: calc(2.4 * var(--pm-u)); }

.parliamone-domanda { margin-bottom: calc(2.8 * var(--pm-u)); }
.parliamone-domanda .parliamone-options { margin-bottom: 0; }
.parliamone-domanda__titolo {
  margin: calc(1.2 * var(--pm-u)) 0 calc(1.6 * var(--pm-u));
  font-family: var(--pm-font-serif-italic); font-style: italic; font-weight: 400;
  font-size: max(19px, calc(2.6 * var(--pm-u))); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--pm-ivory);
}
.parliamone-domanda__errore { margin: calc(1 * var(--pm-u)) 0 0; font-size: max(13px, calc(1.3 * var(--pm-u))); color: #e2a3a3; }
.parliamone-domanda--errore .parliamone-option:not(.is-selected) { border-color: rgba(226, 163, 163, 0.55); }
.parliamone-domanda--errore .parliamone-other-field__input { border-color: rgba(226, 163, 163, 0.8); }

.parliamone-campo { display: flex; flex-direction: column; gap: calc(0.7 * var(--pm-u)); margin-top: calc(1.4 * var(--pm-u)); }
.parliamone-domanda > .parliamone-campo:first-child { margin-top: 0; }
.parliamone-campo .parliamone-other-field__label { font-size: max(12px, calc(1.2 * var(--pm-u))); letter-spacing: 0.06em; text-transform: uppercase; }
.parliamone-campo .parliamone-other-field__input { width: 100%; font-size: max(15px, calc(1.5 * var(--pm-u))); }

.parliamone-options--ruoli { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.parliamone-options--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.parliamone-options--fasce { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.parliamone-options--fasce .parliamone-option:last-child:nth-child(odd) { grid-column: 1 / -1; }
.parliamone-option { font-size: max(14px, calc(1.6 * var(--pm-u))); }
.parliamone-option__title { font-size: max(15px, calc(1.6 * var(--pm-u))); }
.parliamone-option__desc { font-size: max(12.5px, calc(1.3 * var(--pm-u))); }
.parliamone-step__label { font-size: max(11px, calc(1.2 * var(--pm-u))); }
.parliamone-step__intro--soglia { margin-top: calc(-1.2 * var(--pm-u)); font-style: italic; }
.parliamone-intro__choice { cursor: pointer; text-align: left; }

.parliamone-summary--sei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(3.2 * var(--pm-u)); }
.parliamone-summary--sei .parliamone-summary__item + .parliamone-summary__item { margin-top: 0; }
.parliamone-summary--sei dd { overflow-wrap: anywhere; }
.parliamone-form .parliamone-field input, .parliamone-form .parliamone-field textarea { font-size: max(15px, calc(1.5 * var(--pm-u))); }
.parliamone-checkbox { grid-column: 1 / -1; }
.parliamone-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.parliamone-success__text { max-width: 36em; }

@media (max-width: 1024px) {
  .parliamone-options--ruoli { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .parliamone-options--ruoli, .parliamone-options--tre, .parliamone-options--fasce, .parliamone-summary--sei { grid-template-columns: 1fr; }
  .parliamone-options--ruoli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parliamone-options--ruoli .parliamone-option:last-child { grid-column: 1 / -1; }
  .parliamone-step__title { font-size: 24px; }
  .parliamone-modal__frame { padding-top: 56px; }
}