/* Above-the-fold layout shared by Groviglio, Alba, Fogli (.hx-fold) and Diagonale: compact copy, the Roadmap window right under it, proof and press after the window.
   It lives in this file because build.py links only the hero-* files and this one is always loaded. */
.site :is(.hx-fold, .h-diagonale) { --hx-ring: rgb(255 255 255 / 0.12); min-height: 0; }
.site :is(.hx-fold, .h-diagonale).light { --hx-ring: rgb(2 55 108 / 0.1); }
.site :is(.hx-fold, .h-diagonale) .hero-ui { position: relative; z-index: 1; order: 3; margin-top: clamp(32px, 5svh, 52px); padding-bottom: 0; }
.site :is(.hx-fold, .h-diagonale) .prm-window { box-shadow: var(--prm-window-shadow, none), 0 0 0 1px var(--hx-ring); }
.site :is(.hx-fold, .h-diagonale) :is(.hx-foot, .hero-proof) { order: 5; }
.site .h-diagonale .hero-press { order: 6; }
.site .hx-fold .hx-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 16px 56px; padding-block: 40px 48px; }
.site .hx-fold .hx-foot :is(.hero-proof, .hero-press) { margin: 0; padding: 0; }
/* the press row is centred under the Roadmap window, and so is any line it wraps onto */
.site .hx-fold .hero-press :is(.hp-press, .hp-logos) { justify-content: center; }
.site .h-diagonale .hero-proof { margin: 36px 0 8px; }
@media (min-width: 861px) {
  .site :is(.hx-fold, .h-diagonale) .hero-in { padding-top: 56px; }
  .site :is(.hx-fold, .h-diagonale) .hero-copy { min-height: 0; display: grid; justify-content: start; max-width: 800px; padding-block: clamp(32px, 6svh, 64px) 0; }
  /* one line of subtitle on desktop keeps the window inside the first screen */
  .site :is(.hx-fold, .h-diagonale) .sub { max-width: 44em; }
  .site :is(.hx-fold, .h-diagonale) .ctas { margin-top: 24px; }
  /* Diagonale: its pyramid stands on the window's right edge, so it shrinks to fit the space right of the copy */
  .site :is(.h-diagonale, [data-hx-sign="diagonale"]) .field .mo-sign { --s: 1.4; --lw: 4px; }
}
@media (min-width: 861px) and (max-width: 1300px) { .site :is(.h-diagonale, [data-hx-sign="diagonale"]) .field .mo-sign { --s: 1.2; --lw: 3.5px; } }
/* short desktop screens (800 px tall): tighter rhythm so three actions of the plan stay in the first screen */
@media (min-width: 861px) and (max-height: 820px) {
  .site :is(.hx-fold, .h-diagonale) .hero-copy { padding-top: 24px; }
  .site :is(.hx-fold, .h-diagonale) .hero-ui { margin-top: 28px; }
  .site :is(.hx-fold, .h-diagonale) .ctas { margin-top: 20px; }
}
/* phones: H1, subtitle, CTA, then the window; the calculator link, proof and press come after the window */
@media (max-width: 860px) {
  .site :is(.hx-fold, .h-diagonale) :is(.hero-copy, .hero-aside, .ctas) { display: contents; }
  .site :is(.hx-fold, .h-diagonale) .h1 { order: 1; margin-top: var(--m-stack); }
  .site :is(.hx-fold, .h-diagonale) .sub { order: 2; margin-top: var(--m-display-lede); }
  /* positioned, so the dawn glow (z-index 0) paints under the button instead of over it */
  .site :is(.hx-fold, .h-diagonale) .ctas > .btn { order: 3; position: relative; z-index: 1; align-self: flex-start; margin-top: var(--m-stack); }
  /* Diagonale's small pyramid stands right of the CTA on its ground line, at zero height, so the window keeps its place */
  .site :is(.h-diagonale, [data-hx-sign="diagonale"]) .mo-strip { order: 3; height: 0; margin: 0; }
  .site :is(.h-diagonale, [data-hx-sign="diagonale"]) .mo-strip .mo-sign { --s: 0.34; }
  .site :is(.hx-fold, .h-diagonale) .hero-ui { order: 4; margin-top: var(--m-stack); }
  .site :is(.hx-fold, .h-diagonale) .ctas > .link { order: 5; align-self: flex-start; margin-top: var(--m-btn-gap); }
  .site :is(.hx-fold, .h-diagonale) :is(.hx-foot, .hero-proof) { order: 6; }
  .site .h-diagonale .hero-press { order: 7; }
  .site .hx-fold .hx-foot { flex-direction: column; align-items: flex-start; gap: 16px; padding-block: var(--m-stack) var(--m-lede-content); }
  .site .h-diagonale .hero-proof { margin: 24px 0 8px; padding-top: 0; border-top: 0; }
}
.hx-play .hx-window { animation: hx-rise 640ms cubic-bezier(0.23, 1, 0.32, 1) 160ms backwards; }
@keyframes hx-rise { from { transform: translateY(16px); } }
/* entrance of the copy, every background and sign: only the copy moves, by 12 px */
.hx-play .hero-copy > * { animation: hx-copy 720ms cubic-bezier(0.23, 1, 0.32, 1) backwards; }
.hx-play .hero-copy > :nth-child(2) { animation-delay: 90ms; }
@keyframes hx-copy { from { opacity: 0; transform: translateY(12px); } }

/* Sign Diagonale: motion.js's pyramid (it adds .field .mo-sign and .mo-strip); hidden whenever another sign is chosen */
.hx-hero:not([data-hx-sign="diagonale"]) :is(.field, .mo-strip) { display: none; }

/* Sign Groviglio (data-hx-sign="groviglio"): a knot of one line, in the free space right of the copy, pulled until it lies calm between the CTAs and the window.
   Knobs: --hg-line (default from the background), --hg-stroke; knot density, size and speed go to hero-groviglio.js. */
.hx-hero { --hg-line: var(--hg-line-d, #62cefe); --hg-stroke: 2.2; }
/* the line's colour lives on the gradient stops; on Alba it is white, which keeps it readable on the bright band of the horizon */
.hg-fade stop { stop-color: var(--hg-line); }
.hx-hero[data-hx-bg^="alba"]:not(.light) { --hg-line-d: rgb(255 255 255 / 0.85); }
.hg-field { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* phones: no knot; next to the CTA it reads as a stray scribble */
@media (max-width: 860px) { [data-hx-sign="groviglio"] .hg-field { display: none; } }
/* the groviglio is off: the hero keeps only the dawn and the lit window edge */
.hg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hg-path { fill: none; stroke: var(--hg-line); stroke-width: var(--hg-stroke); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* at rest the hugging line carries a thread of light: the same path, wider and blurred, under it */
.hg-glow { display: none; fill: none; stroke: var(--hg-line); stroke-width: calc(var(--hg-stroke) * 5); stroke-linecap: round; stroke-linejoin: round; opacity: 0.28; filter: blur(5px); vector-effect: non-scaling-stroke; }
[data-hg-hug] .hg-glow { display: inline; }
[data-hg-hug] .hg-path { stroke-width: calc(var(--hg-stroke) * 1.15); }

@media (prefers-reduced-motion: reduce) {
  .hx-play :is(.hero-copy > *, .hx-window) { animation: none; }
}

/* Dawn over the knot: no horizon line. A warm glow centred on the window's top edge, and the edge itself catches the light, brightest at the centre and fading down the sides.
   .hx-dawn is a zero-height anchor on that edge (under «Qual è il tuo caso?»); the window is lifted above the glow, which is positioned and would otherwise paint over it. */
.hx-dawn { display: none; }
#apertura[data-hx-sign="groviglio"]:not(.light) .hx-dawn { --hx-dawn-y: 36px; display: block; position: absolute; z-index: 0; top: var(--hx-dawn-y); left: 50%; width: 100vw; height: 0; margin-left: -50vw; pointer-events: none; }
#apertura .hx-dawn::before { content: ""; position: absolute; left: 8%; right: 8%; top: -150px; height: 300px; border-radius: 50%; filter: blur(22px); background: radial-gradient(46% 50% at 52% 50%, hsl(36 100% 88%) 0%, hsl(28 95% 74% / 0.9) 22%, hsl(14 70% 62% / 0.55) 40%, rgb(98 206 254 / 0.28) 62%, transparent 80%); }
#apertura[data-hx-sign="groviglio"]:not(.light) .hx-window { position: relative; z-index: 1; }
#apertura[data-hx-sign="groviglio"]:not(.light) .prm-window { --prm-window-shadow: 0 -18px 60px -10px rgb(255 205 160 / 0.55), 0 30px 80px rgb(3 20 60 / 0.45); }
/* the lit edge: a 1.5 px rim just outside the window, lit from the top centre and fading down the sides, with a tight bloom behind its brightest part */
#apertura[data-hx-sign="groviglio"]:not(.light) .hx-window::before { content: ""; position: absolute; inset: -1.5px; z-index: 2; padding: 1.5px; border-radius: 13.5px; pointer-events: none; background: radial-gradient(64% 260px at 50% 0, #ffffff 0%, rgb(255 238 214) 22%, rgb(255 205 160 / 0.6) 50%, rgb(255 205 160 / 0.14) 76%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
#apertura[data-hx-sign="groviglio"]:not(.light) .hx-window::after { content: ""; position: absolute; z-index: -1; left: 22%; right: 22%; top: -7px; height: 14px; border-radius: 50%; pointer-events: none; filter: blur(7px); background: radial-gradient(50% 50% at 50% 50%, rgb(255 240 220 / 0.95), rgb(255 205 160 / 0.45) 60%, transparent); }
/* phones: the anchor is the window's top edge under the question, so the question stays on night with the light right below it */
@media (max-width: 860px) {
  #apertura[data-hx-sign="groviglio"]:not(.light) .hx-dawn { --hx-dawn-y: calc(var(--m-title-lede) + 32px); }
  #apertura .hx-dawn::before { left: -10%; right: -10%; top: -100px; height: 200px; filter: blur(18px); }
  #apertura[data-hx-sign="groviglio"]:not(.light) .prm-window { --prm-window-shadow: 0 -10px 36px -14px rgb(255 205 160 / 0.5), 0 24px 64px rgb(3 20 60 / 0.45); }
  #apertura[data-hx-sign="groviglio"]:not(.light) .hx-window::before { background: radial-gradient(72% 180px at 50% 0, #ffffff 0%, rgb(255 238 214) 22%, rgb(255 205 160 / 0.6) 50%, rgb(255 205 160 / 0.14) 76%, transparent 92%); }
  #apertura[data-hx-sign="groviglio"]:not(.light) .hx-window::after { left: 16%; right: 16%; top: -5px; height: 10px; filter: blur(5px); }
}

/* H1 at display size: 72 px on wide screens, down to 56 px at the desktop breakpoint; phones scale with the width */
.site #apertura .h1 { font-size: clamp(56px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; }
@media (max-width: 860px) { .site #apertura .h1 { font-size: clamp(36px, 10.6vw, 48px); line-height: 1.04; } }

/* Subtitle: two lines on desktop, the first sentence says who we are, the second what you get */
@media (min-width: 861px) { .site #apertura .sub { max-width: 68ch; } .site #apertura .sub-then { display: block; } }

/* «Qual è il tuo caso?» stands above the window; its arrow ends on the window's edge right above the case tabs
   in the title bar (home.js measures where the tabs start into --hx-tabs-x). Overrides narrativa.css. */
#apertura .hero-ui .hx-ask { position: relative; z-index: 3; top: auto; left: auto; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 6px; height: 36px; margin: 0; padding-left: calc(var(--hx-tabs-x, 44px) + 2px); font-size: var(--t-16); line-height: 22px; }
#apertura .hero-ui .hx-ask-arrow { width: 44px; height: 28px; margin: 6px 0 0; transform: none; }
@media (max-width: 860px) {
  #apertura .hero-ui .hx-ask { height: 32px; margin-top: var(--m-title-lede); font-size: var(--t-14); line-height: 20px; color: #ffffff; }
  #apertura .hero-ui .hx-ask-arrow { width: 38px; height: 24px; margin-top: 7px; }
}

/* Reviews, next to the CTA and apart from the press row: the official Trustpilot logo stands in for the word, inline in the sentence.
   The wordmark's baseline sits at 25/28 of the logo, hence the drop under the text baseline. */
#apertura .hx-rating { margin: 0; font-size: var(--t-14); line-height: 20px; color: rgb(255 255 255 / 0.78); }
#apertura.light .hx-rating { color: var(--ink-2); }
#apertura .hx-rating a { color: inherit; text-decoration: none; }
#apertura .hx-rating b { font-weight: 500; color: #ffffff; }
#apertura.light .hx-rating b { color: var(--ink); }
#apertura .hx-rating .tp-logo { display: inline-block; width: auto; height: 20px; margin: 0 0 0 3px; vertical-align: -4px; color: #ffffff; }
#apertura.light .hx-rating .tp-logo { color: #191919; }
#apertura .hx-rating-sep { margin: 0 6px 0 4px; }
@media (hover: hover) and (pointer: fine) { #apertura .hx-rating a:hover > .tnum { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 860px) {
  /* phones: right under the window, so the window keeps its place under the CTA; the press row follows on its own */
  .site #apertura .hx-rating { order: 5; align-self: flex-start; margin-top: var(--m-stack); font-size: var(--t-13); line-height: 18px; }
  #apertura .hx-rating .tp-logo { height: 18px; vertical-align: -4px; }
}


/* Identity as a quiet badge above the H1; the subtitle carries who it is for and what you get. */
.hx-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); color: rgb(255 255 255 / 0.92); font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em; }
.hx-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky, #62cefe); }
/* phones: the copy wrappers are display: contents, so the badge would stretch across the column; the press row comes back in #recensioni */
@media (max-width: 860px) {
  .site #apertura .hx-badge { align-self: flex-start; margin-bottom: 0; }
  .site #apertura .hero-press { display: none; }
}

/* Phones: fixed air under the nav, and the demo follows the CTA at the section rhythm, so there is never a hole between them */
@media (max-width: 860px) {
  .site #apertura { --hx-m-h1: clamp(36px, 10.6vw, 48px); --hx-m-air: 40px; }
  .site #apertura .hero-in { padding-top: calc(52px + var(--hx-m-air)); }
  .site #apertura .hx-badge { gap: 6px; padding: 2px 10px 2px 8px; background: rgb(255 255 255 / 0.08); }
  .site #apertura .h1 { margin-top: 16px; font-size: var(--hx-m-h1); }
  .site #apertura .ctas > .btn { margin-top: var(--m-lede-content); }
  .site #apertura .hero-ui { margin-top: 40px; }
}