/**
 * Crescita Studio — Diagnosi per la Crescita (lead-magnet page, 2026-08-25)
 * Loaded only on the Diagnosi page (functions.php: crescita_diagnosi_enqueue()).
 * Built on tokens.css / components.css / layout.css — does not duplicate
 * global rules; the page's own type scale is locally overridden per
 * DESIGN.md "Shape & Visual Language", same technique as home.css.
 * Source: .scratch/experience-redesign/prototype-diagnosi.html
 *
 * Fonts (Switzer/Satoshi) are already self-hosted and enqueued globally via
 * fonts.css — no @font-face here. The prototype's own header/footer rules
 * (`.crescita-head*`, `.site-foot*`) are dropped entirely: this page uses
 * the real site-wide header/footer (functions.php), not the prototype's own
 * markup, so those rules would be dead weight.
 */

/* ── Diagnosi type-scale override (matches home.css's own override —
   same clamp values, same source prototype family) ────────────────── */
.crescita-diagnosi-hero,
.crescita-diagnosi-section {
  --text-h1: clamp(2.625rem, 5.6vw, 4.25rem);
  --text-h2: clamp(2.125rem, 4.2vw, 3rem);
  --text-h3: clamp(1.5rem, 2.4vw, 1.875rem);
  --text-lede: clamp(1.0625rem, 1.6vw, 1.25rem);
  --text-body: 1.125rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.75rem;

  /* New page-only easing/reveal token — does not collide with any global name. */
  --crescita-diagnosi-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 640px) {
  .crescita-diagnosi-hero,
  .crescita-diagnosi-section {
    --space-section: 2.5rem;
  }
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
.crescita-diagnosi-hero,
.crescita-diagnosi-section {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--crescita-midnight);
  background: var(--crescita-sand);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--crescita-ocean); }
:focus-visible { outline: 2px solid var(--crescita-ocean); outline-offset: 2px; }
.crescita-diagnosi-s-dark :focus-visible { outline-color: var(--crescita-sand); }
ul[role="list"], ol[role="list"] { list-style: none; }

/* The prototype's container gutter, restored. layout.css uses a flat
   --space-md (24px); the prototype used this clamp (20px at 375px). The
   hero markers band bleeds edge-to-edge with a negative margin of exactly
   this clamp, so a mismatch left it inset instead of full-bleed. Scoped to
   this page's own sections so the shared header/footer container — which
   is not part of this port — keeps the site-wide gutter. */
.crescita-diagnosi-hero .crescita-container,
.crescita-diagnosi-section .crescita-container {
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

h1, h2, h3 { font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }
h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); font-weight: 600; }
h3 { font-size: var(--text-h3); }

.crescita-diagnosi-lede { font-size: var(--text-lede); color: var(--color-text-secondary); max-width: 42em; }
.crescita-diagnosi-s-dark .crescita-diagnosi-lede { color: var(--color-text-on-dark-secondary); }

.crescita-diagnosi-eyebrow {
  display: block;
  font-family: var(--font-secondary);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--crescita-ocean);
  margin-bottom: var(--space-sm);
}
.crescita-diagnosi-s-dark .crescita-diagnosi-eyebrow { color: var(--color-text-on-dark-secondary); }

.crescita-diagnosi-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-family: var(--font-primary);
  font-size: 1.0625rem; font-weight: 500;
  line-height: 1.2;
  padding: 1.05rem 2rem;
  border-radius: var(--radius-cta);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base),
              transform var(--transition-base), box-shadow var(--transition-base);
}
.crescita-diagnosi-btn:active { transform: scale(0.98); }
.crescita-diagnosi-btn-primary {
  background: var(--crescita-midnight); color: var(--crescita-sand);
  box-shadow: 0 10px 28px rgba(15, 23, 34, 0.16);
}
.crescita-diagnosi-btn-primary:hover,
.crescita-diagnosi-btn-primary:focus-visible { background: var(--crescita-ocean-bright); transform: translateY(-1px); color: #fff; box-shadow: var(--cta-lit); }
.crescita-diagnosi-s-dark .crescita-diagnosi-btn-primary { background: var(--crescita-sand); color: var(--crescita-midnight); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); }
.crescita-diagnosi-s-dark .crescita-diagnosi-btn-primary:hover,
.crescita-diagnosi-s-dark .crescita-diagnosi-btn-primary:focus-visible { background: #fff; box-shadow: var(--cta-lit-on-dark); }
.crescita-diagnosi-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

.crescita-diagnosi-cta-note { font-size: var(--text-small); color: var(--color-text-secondary); margin-top: var(--space-sm); white-space: nowrap; }
.crescita-diagnosi-s-dark .crescita-diagnosi-cta-note { color: var(--color-text-on-dark-secondary); }

/* Pulsing rule under section headings */
.crescita-diagnosi-h2-rule {
  display: block;
  width: 155px; height: 2px;
  margin: var(--space-sm) auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #9FC1E8, transparent);
  animation: crescita-diagnosi-h2-rule-pulse 2.6s ease-in-out infinite;
}
@keyframes crescita-diagnosi-h2-rule-pulse {
  0%, 100% { opacity: 0.3; transform: scaleX(0.7); }
  50%      { opacity: 1;   transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .crescita-diagnosi-h2-rule { animation: none; opacity: 0.75; }
}

/* Button gloss sweep animation */
.crescita-diagnosi-btn-primary::after, .crescita-diagnosi-sticky-cta .crescita-diagnosi-btn::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg,
    transparent 0%, rgba(159, 193, 232, 0) 20%,
    rgba(159, 193, 232, 0.5) 50%,
    rgba(159, 193, 232, 0) 80%, transparent 100%);
  transform: skewX(-18deg);
  animation: crescita-diagnosi-btn-gloss-sweep 6s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}
@keyframes crescita-diagnosi-btn-gloss-sweep {
  from { left: -60%; }
  to   { left: 140%; }
}
body.crescita-diagnosi-seq-btn .crescita-diagnosi-btn-primary::after,
body.crescita-diagnosi-seq-btn .crescita-diagnosi-sticky-cta .crescita-diagnosi-btn::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .crescita-diagnosi-btn-primary::after, .crescita-diagnosi-sticky-cta .crescita-diagnosi-btn::after { animation: none; content: none; }
}

.crescita-diagnosi-glass {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-card);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 40px rgba(15, 23, 34, 0.07);
}
.crescita-diagnosi-s-dark .crescita-diagnosi-glass {
  background: rgba(247, 245, 240, 0.05);
  border-color: rgba(247, 245, 240, 0.13);
  box-shadow: inset 0 1px 0 rgba(247, 245, 240, 0.1), 0 14px 40px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-transparency: reduce) {
  .crescita-diagnosi-glass { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .crescita-diagnosi-s-dark .crescita-diagnosi-glass { background: rgba(247, 245, 240, 0.08); }
}

.crescita-diagnosi-section { padding-block: var(--space-section); }
.crescita-diagnosi-s-dark { background: var(--crescita-midnight); color: var(--color-text-on-dark); position: relative; overflow: hidden; }
.crescita-diagnosi-s-dark h1, .crescita-diagnosi-s-dark h2, .crescita-diagnosi-s-dark h3 { color: var(--color-text-on-dark); }
.crescita-diagnosi-s-dark::before {
  content: ""; position: absolute; pointer-events: none;
  width: min(820px, 110vw); height: min(820px, 110vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 90, 143, 0.22) 0%, transparent 66%);
  top: -22%; right: -14%;
}
.crescita-diagnosi-section-head { max-width: var(--width-text); margin: 0 auto var(--space-lg); text-align: center; }
.crescita-diagnosi-section-head .crescita-diagnosi-lede { margin-top: var(--space-md); }

.crescita-diagnosi-reveal { opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--crescita-diagnosi-reveal-ease), transform 0.7s var(--crescita-diagnosi-reveal-ease); }
.crescita-diagnosi-reveal.crescita-diagnosi-visible { opacity: 1; transform: translateY(0); }
.crescita-diagnosi-rd1 { transition-delay: 0.08s } .crescita-diagnosi-rd2 { transition-delay: 0.16s }
.crescita-diagnosi-rd3 { transition-delay: 0.24s } .crescita-diagnosi-rd4 { transition-delay: 0.32s }

/* Hero — the tool itself */
.crescita-diagnosi-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--space-section); text-align: center; }
.crescita-diagnosi-hero-glow {
  position: absolute; left: 50%; top: 62%;
  width: min(720px, 100vw); height: min(720px, 100vw);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(30, 58, 95, 0.14) 0%, transparent 68%);
  transform: translate(-50%, -50%);
  animation: crescita-diagnosi-pulse-glow 7s ease-in-out infinite;
}
@keyframes crescita-diagnosi-pulse-glow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
/* Hero H1 gloss sweep — animated gradient text, sequenced with the CTA glow */
.crescita-diagnosi-hero h1 {
  background-image: var(--h1-sweep);
  background-size: 200% 100%;
  background-position: 143% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: crescita-diagnosi-h1-gloss-sweep 6s linear infinite;
  animation-play-state: paused;
}
body.crescita-diagnosi-seq-h1 .crescita-diagnosi-hero.crescita-diagnosi-in-view h1 { animation-play-state: running; }
@keyframes crescita-diagnosi-h1-gloss-sweep {
  from { background-position: 143% 0; }
  to   { background-position: -57% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crescita-diagnosi-hero-glow { animation: none; opacity: 0.6; }
  .crescita-diagnosi-hero h1 { animation: none; background: none; color: var(--crescita-midnight); -webkit-text-fill-color: var(--crescita-midnight); }
}
.crescita-diagnosi-hero .crescita-container { position: relative; max-width: 860px; }
.crescita-diagnosi-hero h1 { margin-inline: auto; max-width: 16em; }
.crescita-diagnosi-hero .crescita-diagnosi-lede { margin: var(--space-md) auto var(--space-lg); max-width: 34em; }

/* Tighter hero rhythm on tablet/desktop so the form's submit CTA clears the
   fold on common laptop viewport heights — mobile is unaffected, it already
   scrolls past the fold naturally and has its own sticky CTA fallback. */
@media (min-width: 768px) {
  .crescita-diagnosi-hero { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
  .crescita-diagnosi-hero h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
  .crescita-diagnosi-hero .crescita-diagnosi-lede { margin-bottom: var(--space-md); }
}

/* Tool panel */
.crescita-diagnosi-tool-panel {
  margin-inline: auto;
  max-width: 640px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
}
.crescita-diagnosi-tool-field { display: grid; gap: 0.5rem; margin-bottom: var(--space-md); justify-items: center; }
.crescita-diagnosi-tool-field label { font-weight: 500; font-size: 1rem; }
.crescita-diagnosi-tool-field input {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  color: var(--crescita-midnight);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 34, 0.22);
  border-radius: var(--radius-btn);
  padding: 0.9rem 1.1rem;
  width: 100%;
  text-align: center;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.crescita-diagnosi-tool-field input::placeholder { color: rgba(15, 23, 34, 0.45); }
.crescita-diagnosi-tool-field input:focus { outline: 2px solid var(--crescita-ocean); outline-offset: 1px; border-color: var(--crescita-ocean); }
.crescita-diagnosi-tool-field small { font-size: var(--text-small); color: var(--color-text-secondary); }
.crescita-diagnosi-tool-panel .crescita-diagnosi-btn { width: 100%; text-align: center; }
.crescita-diagnosi-tool-privacy {
  display: flex; justify-content: center; align-items: flex-start; gap: 0.6rem;
  margin-top: var(--space-md);
  font-size: var(--text-small); color: var(--color-text-secondary);
  text-align: center;
}
.crescita-diagnosi-tool-privacy svg { width: 16px; height: 16px; stroke: var(--crescita-ocean); stroke-width: 1.7; margin-top: 0.2em; flex-shrink: 0; }
.crescita-diagnosi-proto-note {
  display: none;
  margin-top: var(--space-md);
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--crescita-stone);
  font-size: var(--text-small); color: var(--color-text-secondary);
  text-align: center;
}
.crescita-diagnosi-proto-note.crescita-diagnosi-show { display: block; }

/* Honeypot — off-screen rather than display:none, so simple bots that skip
   hidden fields still fill it in. Matches the contact form's treatment. */
.crescita-diagnosi-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hero trust markers — pills. With longer pill copy this row doesn't fit on
   narrow screens, so instead of wrapping or requiring a manual swipe, the
   track auto-scrolls: the pill list is duplicated once and the pair is
   animated left by exactly 50% of the track's own width, so the loop seam is
   invisible. Same technique as the homepage's value marquee. Paused under
   prefers-reduced-motion below. */
.crescita-diagnosi-hero-markers {
  overflow: hidden;
  margin-top: var(--space-lg);
  margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  font-size: var(--text-small); color: var(--color-text-secondary);
}
.crescita-diagnosi-hero-markers-track {
  display: flex; width: max-content;
  gap: 0.6rem;
  animation: crescita-diagnosi-hero-markers-scroll 22s linear infinite;
}
.crescita-diagnosi-hero-markers-list { display: flex; gap: 0.6rem; }
.crescita-diagnosi-hero-markers li {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  background: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  flex-shrink: 0;
}
.crescita-diagnosi-hero-markers svg { width: 15px; height: 15px; stroke: var(--crescita-ocean); stroke-width: 1.8; flex-shrink: 0; }
@keyframes crescita-diagnosi-hero-markers-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.crescita-diagnosi-text-center { text-align: center; margin-inline: auto; }
.crescita-diagnosi-section-head.crescita-diagnosi-text-center { margin-inline: auto; }
/* Same mobile-shrink technique the homepage uses on its own final-CTA lede:
   keeps a one-line sentence from wrapping on narrow screens by shrinking the
   font rather than letting it break. */
.crescita-diagnosi-lede-nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  /* 0.9375rem (15px) is the measured ceiling at 375px viewport — the next
     half-step (15.5px) overflows the one-line constraint. */
  .crescita-diagnosi-lede-tight { font-size: clamp(0.75rem, 4vw, 0.9375rem); }
}

/* "Come funziona" icon cards — reuses the homepage's own .get-grid/.get-card
   pattern (Prototype 02: glass cards + pulsing connecting thread) instead of
   inventing a new card style. */
.crescita-diagnosi-get-grid { display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .crescita-diagnosi-get-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }
.crescita-diagnosi-get-card { position: relative; padding: var(--space-lg); text-align: center; }
.crescita-diagnosi-get-icon { display: block; width: 28px; height: 28px; stroke: var(--crescita-ocean); stroke-width: 1.6; margin: -0.5rem auto var(--space-sm); }
.crescita-diagnosi-get-card h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.crescita-diagnosi-get-card p { font-size: 1rem; color: var(--color-text-secondary); }
/* On a dark section the light-mode icon/text colors read as near-invisible
   against Midnight. */
.crescita-diagnosi-s-dark .crescita-diagnosi-get-icon { stroke: #9FC1E8; }
.crescita-diagnosi-s-dark .crescita-diagnosi-get-card p { color: var(--color-text-on-dark-secondary); }
/* Closes the oversized gap this section would otherwise have against the
   hero above it. Bottom padding stays at the section default. */
.crescita-diagnosi-section-tight-top { padding-top: var(--space-lg); }
@media (max-width: 899.98px) {
  .crescita-diagnosi-get-card:not(:last-child)::after {
    content: "";
    position: absolute; left: 50%; bottom: calc(var(--space-md) * -1);
    width: 2px; height: var(--space-md);
    transform: translateX(-50%);
    background: linear-gradient(180deg,
      rgba(30, 58, 95, 0) 0%, rgba(30, 58, 95, 0.15) 40%,
      var(--crescita-ocean) 50%, rgba(30, 58, 95, 0.15) 60%, rgba(30, 58, 95, 0) 100%);
    background-size: 100% 260%;
    animation: crescita-diagnosi-get-thread-pulse 3.2s ease-in-out infinite;
  }
}
@media (min-width: 900px) {
  .crescita-diagnosi-get-card:not(:last-child)::after {
    content: "";
    position: absolute; top: 50%; right: calc(var(--space-lg) * -1);
    height: 2px; width: var(--space-lg);
    transform: translateY(-50%);
    background: linear-gradient(90deg,
      rgba(30, 58, 95, 0) 0%, rgba(30, 58, 95, 0.15) 40%,
      var(--crescita-ocean) 50%, rgba(30, 58, 95, 0.15) 60%, rgba(30, 58, 95, 0) 100%);
    background-size: 260% 100%;
    animation: crescita-diagnosi-get-thread-pulse-h 3.2s ease-in-out infinite;
  }
}
@keyframes crescita-diagnosi-get-thread-pulse {
  0%   { background-position: 0 -160%; }
  50%  { background-position: 0 60%; }
  100% { background-position: 0 -160%; }
}
@keyframes crescita-diagnosi-get-thread-pulse-h {
  0%   { background-position: -160% 0; }
  50%  { background-position: 60% 0; }
  100% { background-position: -160% 0; }
}

/* ── Le 8 aree analizzate — tap-to-flip cards ──────────────────
   Grid: 2 × 4 on mobile, 4 × 2 from 1024px. Each card flips 180° around its
   vertical axis on tap/click/Enter to reveal what that area actually
   measures. */
.crescita-diagnosi-areas-explore-head { text-align: center; margin-bottom: var(--space-lg); }
.crescita-diagnosi-areas-explore-head h3 {
  font-family: var(--font-secondary); font-size: var(--text-eyebrow); font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--crescita-ocean);
  margin-bottom: 0.4rem;
}
.crescita-diagnosi-areas-explore-head p { font-size: var(--text-small); color: var(--color-text-secondary); }

/* The `margin`/`padding` resets are load-bearing, not defensive tidying:
   GeneratePress's global typography sets `ul { margin: 0 0 1.5em 3em }`,
   and an element selector beats this file's `*` reset on specificity. That
   3em left padding measured as a 54px indent on staging, pushing the whole
   grid off-centre. Same failure mode as the homepage marquee's leaked
   margin-bottom (see current-state.md). Applies to every `ul` this page
   styles as a layout container, hence the markers list too. */
.crescita-diagnosi-areas-explain-grid {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.crescita-diagnosi-hero-markers-list { margin: 0; padding: 0; list-style: none; }
.crescita-diagnosi-br-desktop { display: none; }
@media (min-width: 768px) {
  .crescita-diagnosi-areas-explain-grid { gap: var(--space-md); }
  .crescita-diagnosi-br-mobile { display: none; }
  .crescita-diagnosi-br-desktop { display: inline; }
}
@media (min-width: 1024px) { .crescita-diagnosi-areas-explain-grid { grid-template-columns: repeat(4, 1fr); } }

/* The card's visible surface — rounded corners and drop shadow — lives
   HERE, on the <li>, not on the rotating faces inside it.
   Three successive attempts to keep it on the faces all failed on staging
   (backdrop-filter rendered as a grey fill; then square black corners that
   neither clip-path nor removing backface-visibility fixed). The common
   factor was a painted, rounded surface sitting inside .area-flip-btn's
   3D-transformed subtree, where Chromium's compositor does not apply the
   border-radius clip to the promoted layer. This element is not
   transformed and creates no 3D context, so its overflow clip is an
   ordinary 2D clip that composites correctly; the faces inside are now
   plain rectangles and have nothing left to clip wrongly. */
.crescita-diagnosi-area-flip {
  perspective: 1200px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15, 23, 34, 0.07);
}
.crescita-diagnosi-s-dark .crescita-diagnosi-area-flip { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); }
.crescita-diagnosi-area-flip-btn {
  position: relative;
  display: block; width: 100%;
  /* Sized to the longest back-face copy (03 / 06) at the narrowest 2-column
     width — measured, not guessed. */
  min-height: 272px;
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: center;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (min-width: 480px) { .crescita-diagnosi-area-flip-btn { min-height: 230px; } }
@media (min-width: 1024px) { .crescita-diagnosi-area-flip-btn { min-height: 250px; } }
.crescita-diagnosi-area-flip.crescita-diagnosi-is-flipped .crescita-diagnosi-area-flip-btn { transform: rotateY(180deg); }

/* Deliberately a plain, square, unshadowed rectangle. Every rounded or
   composited property that used to live here (border-radius, clip-path,
   mask-image, box-shadow, backdrop-filter, backface-visibility) is gone —
   the parent .area-flip now owns the card's rounded surface and clips it.
   Nothing here can be mis-clipped by the 3D layer any more.
   backdrop-filter in particular must stay off: inside a 3D transform
   Chromium cannot take a valid backdrop snapshot and paints an opaque
   grey fill instead of a blur. */
.crescita-diagnosi-area-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-md) 0.85rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* visibility (not backface-visibility) so assistive tech and tab order
     follow the visible face, not the one turned away. The delay matches
     the midpoint of the 0.6s flip so the swap lands exactly at 90° —
     which is also why backface-visibility is not needed here, and it is
     omitted on purpose: it was what forced this element onto its own GPU
     layer in the first place. */
  transition: visibility 0s linear 0.3s;
}
.crescita-diagnosi-s-dark .crescita-diagnosi-area-face { background: rgba(247, 245, 240, 0.08); }
.crescita-diagnosi-area-face-back { transform: rotateY(180deg); visibility: hidden; }
.crescita-diagnosi-area-flip.crescita-diagnosi-is-flipped .crescita-diagnosi-area-face-front { visibility: hidden; }
.crescita-diagnosi-area-flip.crescita-diagnosi-is-flipped .crescita-diagnosi-area-face-back { visibility: visible; }

.crescita-diagnosi-areas-explain-icon { display: block; width: 26px; height: 26px; stroke: var(--crescita-ocean); stroke-width: 1.6; margin: 0 auto var(--space-sm); }
.crescita-diagnosi-area-face h4 { font-size: 1rem; font-weight: 500; line-height: 1.25; margin: 0; }
.crescita-diagnosi-areas-explain-num { font-family: var(--font-secondary); font-weight: 600; color: var(--crescita-fog); }
.crescita-diagnosi-area-hint {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: var(--space-sm);
  font-size: 0.8125rem; color: var(--crescita-fog);
}
.crescita-diagnosi-area-flip-btn:hover .crescita-diagnosi-area-hint { color: var(--crescita-ocean); }
.crescita-diagnosi-area-face-back p {
  margin-top: 0.5rem;
  font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-secondary);
}
@media (min-width: 1024px) { .crescita-diagnosi-area-face-back p { font-size: 0.875rem; } }

/* Sequential assembly: the GRID is observed once, then each card's own
   delay runs in order (~100ms apart) — so the eight cards always land
   01→08 as one movement, instead of eight independent observers firing at
   whatever scroll position each card happens to cross. */
.crescita-diagnosi-areas-explain-grid .crescita-diagnosi-area-flip {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--crescita-diagnosi-reveal-ease), transform 0.5s var(--crescita-diagnosi-reveal-ease);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.crescita-diagnosi-areas-explain-grid.crescita-diagnosi-visible .crescita-diagnosi-area-flip { opacity: 1; transform: translateY(0); }

/* FAQ */
.crescita-diagnosi-faq { max-width: var(--width-text); margin: 0 auto; text-align: center; }
.crescita-diagnosi-faq details { border-top: 1px solid var(--color-border); }
.crescita-diagnosi-faq details:last-child { border-bottom: 1px solid var(--color-border); }
.crescita-diagnosi-faq summary {
  cursor: pointer; list-style: none; position: relative;
  display: flex; justify-content: center; align-items: center;
  padding: 1.3rem 2.25rem; font-size: 1.1875rem; font-weight: 500;
  transition: color var(--transition-base);
}
.crescita-diagnosi-faq summary:hover { color: var(--crescita-ocean); }
.crescita-diagnosi-faq summary::-webkit-details-marker { display: none; }
.crescita-diagnosi-faq summary::after {
  content: "+"; font-family: var(--font-secondary); font-weight: 500;
  font-size: 1.5rem; line-height: 1; color: var(--crescita-fog);
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  transition: transform var(--transition-base);
}
.crescita-diagnosi-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.crescita-diagnosi-faq details p { padding: 0 0 1.5rem; color: var(--color-text-secondary); max-width: 38em; margin-inline: auto; }
.crescita-diagnosi-s-dark .crescita-diagnosi-faq summary { color: var(--color-text-on-dark); }
.crescita-diagnosi-s-dark .crescita-diagnosi-faq details p { color: var(--color-text-on-dark-secondary); }

/* Final CTA (dark) */
.crescita-diagnosi-final { text-align: center; }
.crescita-diagnosi-final .crescita-diagnosi-lede { margin: var(--space-md) auto var(--space-lg); }
.crescita-diagnosi-final .crescita-diagnosi-actions { justify-content: center; }

/* Sticky mobile CTA */
.crescita-diagnosi-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 23, 34, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border-dark);
  transform: translateY(130%);
  transition: transform 0.35s var(--crescita-diagnosi-reveal-ease);
}
.crescita-diagnosi-sticky-cta.crescita-diagnosi-show { transform: translateY(0); }
.crescita-diagnosi-sticky-cta .crescita-diagnosi-btn { display: block; text-align: center; background: var(--crescita-sand); color: var(--crescita-midnight); }
/* Same reason as the homepage sticky bar: a light button on a dark bar lights
   to white, never toward Ocean, which would read as dimming. */
.crescita-diagnosi-sticky-cta .crescita-diagnosi-btn:hover,
.crescita-diagnosi-sticky-cta .crescita-diagnosi-btn:focus-visible { background: #fff; color: var(--crescita-midnight); box-shadow: var(--cta-lit-on-dark); }
@media (min-width: 768px) { .crescita-diagnosi-sticky-cta { display: none; } }
/* Gone once the questionnaire is open — founder direction 2026-09-07, the same
   ruling that unpinned the header, and this is the element it mattered most
   for. The bar reads "Inizia la Diagnosi Gratuita" and is offered to someone
   already filling in the Diagnosi, so it invites a restart of the thing in
   progress; on a phone it also covers the answer options and the email field
   at the bottom of the viewport, which is where both of them are.
   `display: none` rather than hiding the transform: the observer in
   diagnosi.js goes on toggling `crescita-diagnosi-show` underneath, and a
   merely-translated bar would still be a focusable link announced to a screen
   reader. It returns by itself, since the class is only on the body while the
   questionnaire is mounted. */
body.crescita-assessment-active .crescita-diagnosi-sticky-cta { display: none; }

/* The closing CTA section goes with it, and this one is also a broken link
   rather than only a redundant one: its button is an anchor to
   #crescita-diagnosi-form, and diagnosi-assessment.js sets that form hidden
   the moment the questionnaire mounts. Clicking it during the questionnaire
   jumps to nothing.
   The whole section, not just the button — it is headed "Cresci il tuo
   studio, sapendo da dove iniziare" and closes on "Pochi minuti. Nessun
   impegno.", so removing only the control would leave a pitch to start
   something the reader is in the middle of, with nothing to click. */
body.crescita-assessment-active .crescita-diagnosi-final { display: none; }

/* The hero's marketing framing goes once the questionnaire opens — founder
   direction 2026-09-08. The H1 stays: it is the brand's presence on the page
   and costs two lines. The eyebrow and lede are copy written to sell the
   Diagnosi to someone deciding whether to start it, which is nobody who can
   still see them, and together they were pushing the first question further
   down a phone screen that had none to spare.

   This is the smaller half of that fix. The larger half is in
   diagnosi-assessment.js, which now puts the top of the questionnaire at the
   top of the viewport; trimming here shortens what sits above it for anyone
   who scrolls back up. */
body.crescita-assessment-active .crescita-diagnosi-hero .crescita-diagnosi-eyebrow,
body.crescita-assessment-active .crescita-diagnosi-hero .crescita-diagnosi-lede { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .crescita-diagnosi-reveal { opacity: 1; transform: none; transition: none; }
  .crescita-diagnosi-hero-glow { animation: none; opacity: 0.6; }
  .crescita-diagnosi-hero-markers-track { animation: none; }
  .crescita-diagnosi-hero-markers { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .crescita-diagnosi-get-card:not(:last-child)::after { animation: none; }
  /* Flip still works (it's the only way to read the back), it just snaps
     instead of rotating; the staggered assembly is dropped. */
  .crescita-diagnosi-area-flip-btn { transition: none; }
  .crescita-diagnosi-areas-explain-grid .crescita-diagnosi-area-flip { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  .crescita-diagnosi-sticky-cta, .crescita-diagnosi-btn { transition: none; }
  .crescita-diagnosi-btn-primary:hover { transform: none; }
}