:root {
  color-scheme: light dark;
  --canvas: #81958c;
  --canvas-deep: #6f8179;
  --glass: rgba(229, 236, 232, 0.72);
  --glass-strong: rgba(240, 244, 242, 0.82);
  --glass-solid: #dce5e1;
  --text-primary: #101714;
  --text-secondary: #1f2b26;
  --plum: #67315b;
  --plum-pressed: #56274c;
  --plum-soft: #d8c5d6;
  --plum-surface: #67315b;
  --plum-surface-deep: #4f2447;
  --on-plum: #ffffff;
  --on-plum-muted: #eadfe7;
  --brand-teal: #168575;
  --focus: #101714;
  --line: rgba(255, 255, 255, 0.52);
  --deep-shadow: rgba(16, 23, 20, 0.24);
  --soft-shadow: rgba(16, 23, 20, 0.16);
  --cta-text: #ffffff;
  --header-surface: rgba(229, 236, 232, 0.68);
  /* Il piè di pagina sta su --canvas-deep, dove --text-secondary arriva a 3,6:1.
     Nel tema chiaro il testo del piè è più scuro (4,7:1); nel tema scuro i
     colori sono quelli di sempre. */
  --footer-text: #0a0f0d;
  --footer-text-strong: #0a0f0d;
  /* Anche l'intestazione di «Come funziona» sta su --canvas-deep: stessi motivi,
     stessi colori del piè di pagina. Il nome è neutro perché non è del piè. */
  --deep-text: #0a0f0d;
  --deep-text-strong: #0a0f0d;
  --footer-link-hover-decoration: underline;
  --max-width: 1280px;
  --font-rounded: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #17241f;
    --canvas-deep: #101a16;
    --glass: rgba(220, 232, 226, 0.18);
    --glass-strong: rgba(220, 232, 226, 0.24);
    --glass-solid: #35453e;
    --text-primary: #f5faf7;
    --text-secondary: #b8c7c0;
    --plum: #d99acb;
    --plum-pressed: #ecb8df;
    --plum-soft: #6b5065;
    --plum-surface: #4b2944;
    --plum-surface-deep: #321c2e;
    --on-plum: #f5faf7;
    --on-plum-muted: #dccbd7;
    --brand-teal: #4dc4ae;
    --focus: #4dc4ae;
    --line: rgba(255, 255, 255, 0.18);
    --deep-shadow: rgba(0, 0, 0, 0.4);
    --soft-shadow: rgba(0, 0, 0, 0.26);
    --cta-text: #17241f;
    --header-surface: rgba(32, 48, 41, 0.82);
    --footer-text: #b8c7c0;
    --footer-text-strong: #f5faf7;
    --deep-text: #b8c7c0;
    --deep-text-strong: #f5faf7;
    --footer-link-hover-decoration: none;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  background: var(--canvas);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 7% -8%, rgba(240, 244, 242, 0.28), transparent 28rem),
    var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-rounded);
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--text-primary);
  color: var(--canvas);
  font-weight: 750;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  width: min(calc(100% - 40px), var(--max-width));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 0;
  left: 0;
  z-index: 100;
  padding-inline: max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-left));
  pointer-events: none;
}

.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  width: min(100%, var(--max-width));
  min-height: 72px;
  margin-inline: auto;
  padding: 10px 12px 10px 16px;
  border: 1px solid transparent;
  border-radius: 24px;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
  pointer-events: auto;
}

/* Solo la testata con il menù (la classe has-nav sta nell'HTML della prima
   pagina) è un contenitore: nella pagina inviti c'è solo il marchio, niente con
   cui la firma possa scontrarsi (vedi la container query più sotto). Una classe
   e non :has(.primary-nav), che Firefox prima della 121 non capisce. */
.header-inner.has-nav {
  container-type: inline-size;
  container-name: testata;
}

.site-header.is-scrolled .header-inner {
  border-color: var(--line);
  background: var(--header-surface);
  box-shadow: 0 14px 40px var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 14px;
}

.brand-link picture,
.brand-link img {
  width: 42px;
  height: 42px;
}

.brand-link img {
  object-fit: contain;
}

.brand-lockup-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: 3px;
  min-width: 0;
}

.brand-lockup-name {
  color: var(--text-primary);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* La firma «by Brown Cloud»: in testata sotto il nome da 820px in su, fino a
   819px nel piè di pagina. Il colore del piè di pagina si sceglie più sotto. */
.made-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.made-by-cloud {
  display: block;
  width: 23px;
  height: auto;
}

.made-by-name {
  color: var(--text-primary);
  font-weight: 700;
}

/* In testata la firma sta a un soffio da «Split»: l'anello del focus di serie
   (3px, a 4px di distanza) taglierebbe la base del nome. Con un po' d'aria ai
   lati (i margini negativi tengono il testo allineato a sinistra) l'anello sta
   dentro il riquadro della firma. Il piè di pagina resta con l'anello di serie. */
.brand-lockup .made-by {
  margin-inline: -6px;
  padding-inline: 6px;
}

.brand-lockup .made-by:focus-visible {
  outline-offset: -3px;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 38px);
  font-size: 0.94rem;
  font-weight: 650;
}

.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--plum);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.primary-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* La sottolineatura al passaggio vale solo dove c'è un puntatore vero: sui
   telefoni lo stato hover resta dopo il tocco e la voce resterebbe sottolineata.
   Con la tastiera vale sempre, qui sopra. Stessa regola per i pulsanti e i link
   del piè di pagina più sotto, e per «Copia il link». */
@media (hover: hover) and (pointer: fine) {
  .primary-nav a:hover::after {
    transform: scaleX(1);
  }
}

/* La firma allarga il blocco del nome di circa 85px: con il testo ingrandito
   (zoom del solo testo) il menù finirebbe sopra la firma e il pulsante. La
   testata è un contenitore, e in una container query 1rem è il testo della
   radice: la firma lascia la testata quando il suo spazio non basta per il testo
   di adesso. A 820px col testo al 100% il contenitore è largo 762px (47,6rem) e la
   firma resta; serve almeno 46rem (nome, menù e pulsante con 12px liberi per
   lato). In quel caso raro (testo ingrandito su uno schermo medio) la firma non si
   vede da nessuna parte, né in testata né nel piè di pagina. Senza la firma le
   voci del menù tornano a poter andare a capo, come prima della firma: col testo
   ingrandito è meglio che sovrapporsi (il «nowrap» serve solo con la firma). */
@container testata (max-width: 47rem) {
  .brand-lockup .made-by {
    display: none;
  }

  .primary-nav a {
    white-space: normal;
  }
}

.app-store-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: var(--plum);
  box-shadow: 0 10px 24px rgba(64, 24, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: var(--cta-text);
  font-size: 0.96rem;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.app-store-cta svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

/* Il sollevamento al passaggio solo dove c'è un puntatore vero (vedi sopra). */
@media (hover: hover) and (pointer: fine) {
  .app-store-cta[href]:hover {
    background: var(--plum-pressed);
    box-shadow: 0 14px 28px rgba(64, 24, 55, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px) rotate(-0.4deg);
  }
}

.app-store-cta[href]:active {
  transform: scale(0.97);
}

.app-store-cta[aria-disabled="true"] {
  cursor: default;
}

.hero {
  position: relative;
  min-height: 980px;
  padding: clamp(148px, 13vw, 192px) 0 104px;
  isolation: isolate;
  overflow: clip;
}

.hero::before,
.invite-hero::before {
  position: absolute;
  top: 10%;
  left: -14rem;
  z-index: -2;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: rgba(229, 236, 232, 0.11);
  box-shadow: inset -28px -24px 60px rgba(111, 129, 121, 0.22);
  content: "";
  filter: blur(2px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(480px, 0.92fr);
  align-items: center;
  gap: clamp(40px, 6vw, 92px);
}

.hero-copy {
  position: relative;
  z-index: 4;
  min-width: 0;
  max-width: 720px;
}

.hero-mark,
.hero-mark img {
  width: 78px;
  height: 78px;
}

.hero-mark {
  display: block;
  margin-bottom: 24px;
}

.hero-mark img {
  object-fit: contain;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 0.93rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.55rem, 6vw, 5.65rem);
  font-weight: 860;
  letter-spacing: -0.062em;
  line-height: 0.98;
  text-wrap: balance;
}

.hero-support {
  max-width: 62ch;
  margin: 30px 0 0;
  color: var(--text-secondary);
  font-size: clamp(1.06rem, 1.55vw, 1.22rem);
  line-height: 1.58;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}

.hero-cta {
  min-width: 224px;
}

.money-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 58ch;
  margin: 22px 0 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 590;
}

/* Nel tema chiaro la frase sta sopra la parte più scura della sfumatura e con
   --text-secondary scendeva a 4,3:1, quindi lì è --text-primary. Nel tema scuro
   il colore è quello di sempre. */
@media (prefers-color-scheme: dark) {
  .money-note {
    color: var(--text-secondary);
  }
}

.money-note svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--brand-teal) 65%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-teal) 16%, transparent);
  fill: none;
  stroke: var(--brand-teal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.hero-visual {
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  height: 850px;
}

.visual-halo {
  position: absolute;
  top: 8%;
  right: -2%;
  bottom: 4%;
  left: 3%;
  z-index: -1;
  border: 1px solid var(--line);
  border-radius: 44% 56% 50% 48% / 40% 43% 57% 60%;
  background: var(--glass);
  box-shadow: 0 34px 70px var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform: rotate(-2deg) translateZ(-30px);
}

.screen-frame {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 38px;
  background: #81958c;
  box-shadow:
    -10px -9px 24px rgba(255, 255, 255, 0.12),
    14px 30px 52px var(--deep-shadow);
}

.screen-frame img {
  width: 100%;
  height: auto;
}

.screen-frame-primary {
  top: 0;
  left: 2%;
  z-index: 2;
  width: min(78%, 390px);
}

.screen-frame-secondary {
  top: 154px;
  right: 0;
  z-index: 1;
  width: min(53%, 286px);
}

.hero-ribbon {
  --ribbon-shift: 0px;
  position: absolute;
  top: 210px;
  right: -340px;
  z-index: 1;
  width: 850px;
  height: 980px;
  border: 42px solid var(--plum);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 48%;
  box-shadow:
    12px 22px 36px var(--deep-shadow),
    inset -9px -10px 14px rgba(38, 10, 32, 0.2),
    inset 8px 7px 12px rgba(255, 255, 255, 0.22);
  opacity: 0.9;
  transform: translateY(var(--ribbon-shift)) rotate(8deg);
  transition: transform 100ms linear;
}

.problem-section {
  position: relative;
  z-index: 5;
  padding: 132px 0 148px;
  background: var(--canvas);
}

.problem-section::after {
  position: absolute;
  right: 8%;
  bottom: -1px;
  left: 8%;
  height: 1px;
  background: color-mix(in srgb, var(--text-primary) 18%, transparent);
  content: "";
}

.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: clamp(48px, 8vw, 118px);
}

.problem-copy h2,
.moments-copy h2,
.trust-copy h2,
.iphone-copy h2,
.final-cta h2 {
  margin: 0;
  font-size: clamp(2.6rem, 4.8vw, 4.65rem);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}

.problem-copy > p:last-child {
  max-width: 51ch;
  margin: 28px 0 0;
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.65;
}

.problem-ledger {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--glass);
  box-shadow: 0 30px 64px var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(24px) saturate(118%);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
}

.problem-ledger ul {
  margin: 0;
  padding: 18px 26px 10px;
  list-style: none;
}

.problem-ledger li {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 14px 4px;
  color: var(--text-secondary);
  font-size: 1.04rem;
  font-weight: 660;
}

.problem-ledger li + li {
  border-top: 1px solid color-mix(in srgb, var(--text-secondary) 19%, transparent);
}

.problem-icon {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--plum) 38%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--plum) 12%, transparent);
  color: var(--plum);
}

.problem-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.problem-resolution {
  margin: 10px;
  padding: 22px 24px;
  border-radius: 23px;
  background: var(--plum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: var(--cta-text);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  font-weight: 760;
  line-height: 1.4;
}

.how-it-works {
  position: relative;
  z-index: 5;
  padding: 112px 0 144px;
  background: var(--canvas-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.how-it-works::before {
  position: absolute;
  top: -38px;
  right: 0;
  left: 0;
  height: 40px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--canvas-deep);
  content: "";
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(280px, 0.48fr);
  column-gap: clamp(32px, 8vw, 110px);
  align-items: end;
  max-width: 1020px;
  margin-bottom: 48px;
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2.4rem, 4.6vw, 4.25rem);
  font-weight: 840;
  letter-spacing: -0.052em;
  line-height: 1;
  text-wrap: balance;
}

.section-heading > p:last-child {
  max-width: 48ch;
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.62;
}

/* «Come funziona» sta su --canvas-deep, dove nel tema chiaro --text-secondary
   arriva a 3,6:1 e --text-primary a 4,4:1. Qui solo l'intestazione: «Dentro
   Split» e gli altri titoli stanno su un altro fondo e restano com'erano. */
.how-it-works .section-heading .eyebrow,
.how-it-works .section-heading > p:last-child {
  color: var(--deep-text);
}

.how-it-works .section-heading h2 {
  color: var(--deep-text-strong);
}

.steps-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--glass);
  box-shadow: 0 26px 58px var(--deep-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  list-style: none;
  backdrop-filter: blur(24px) saturate(118%);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
}

.steps-panel li {
  position: relative;
  min-width: 0;
  min-height: 306px;
  padding: 34px clamp(24px, 3vw, 40px) 38px;
}

.steps-panel li + li {
  border-left: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
}

.step-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
}

.step-icon {
  display: inline-grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: var(--plum);
  box-shadow: 0 9px 18px var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: var(--cta-text);
}

.step-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.step-number {
  color: var(--text-secondary);
  font-size: 0.91rem;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.steps-panel h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  font-weight: 820;
  letter-spacing: -0.035em;
  line-height: 1.14;
}

.steps-panel p {
  max-width: 34ch;
  margin: 15px 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.58;
}

.inside-split {
  position: relative;
  padding: 154px 0 170px;
  overflow: clip;
  background: var(--canvas);
}

.inside-split::before {
  position: absolute;
  top: 16%;
  right: -20rem;
  width: 42rem;
  height: 42rem;
  border: 1px solid color-mix(in srgb, var(--plum) 24%, transparent);
  border-radius: 50%;
  content: "";
}

.inside-heading {
  margin-bottom: 18px;
}

.story-list {
  position: relative;
}

.story-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.84fr) minmax(360px, 1.16fr);
  align-items: center;
  gap: clamp(58px, 10vw, 154px);
  min-height: 760px;
  padding: 82px clamp(18px, 4vw, 58px);
}

.story-item + .story-item {
  border-top: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
}

.story-item-reverse {
  grid-template-columns: minmax(360px, 1.16fr) minmax(280px, 0.84fr);
}

.story-copy {
  position: relative;
  z-index: 2;
  max-width: 500px;
}

.story-number {
  margin: 0 0 34px;
  color: color-mix(in srgb, var(--plum) 78%, var(--text-primary));
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-weight: 820;
  letter-spacing: 0.13em;
}

.story-copy h3 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.35rem, 4.2vw, 4rem);
  font-weight: 840;
  letter-spacing: -0.052em;
  line-height: 1.02;
  text-wrap: balance;
}

.story-copy > p:last-child {
  max-width: 46ch;
  margin: 25px 0 0;
  color: var(--text-secondary);
  font-size: 1.07rem;
  line-height: 1.66;
}

.product-shot {
  position: relative;
  width: min(100%, 394px);
  margin: 0;
  padding: 10px;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 43px;
  background: var(--glass);
  box-shadow:
    -12px -10px 30px rgba(255, 255, 255, 0.1),
    22px 36px 66px var(--deep-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(20px) saturate(118%);
  -webkit-backdrop-filter: blur(20px) saturate(118%);
}

.product-shot::before {
  position: absolute;
  top: 12%;
  right: -38%;
  z-index: -1;
  width: 94%;
  aspect-ratio: 1;
  border: 24px solid color-mix(in srgb, var(--plum) 72%, transparent);
  border-top-color: transparent;
  border-radius: 50%;
  content: "";
  transform: rotate(24deg);
}

.story-item-reverse .product-shot::before {
  right: auto;
  left: -38%;
  transform: rotate(-24deg);
}

.product-shot img {
  width: 100%;
  height: auto;
  border-radius: 33px;
}

.moments-section {
  position: relative;
  padding: 148px 0 156px;
  overflow: clip;
  isolation: isolate;
  background: var(--plum-surface);
  color: var(--on-plum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.moments-glow {
  position: absolute;
  top: -38%;
  left: -12%;
  z-index: -1;
  width: 44rem;
  height: 44rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  box-shadow: inset -70px -50px 120px rgba(20, 6, 17, 0.22);
}

.moments-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: clamp(48px, 8vw, 112px);
}

.moments-copy {
  max-width: 520px;
}

.moments-copy .eyebrow,
.final-cta .eyebrow {
  color: var(--on-plum-muted);
}

.moments-copy > p:last-child {
  max-width: 47ch;
  margin: 28px 0 0;
  color: var(--on-plum-muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.moments-stage {
  position: relative;
  min-width: 0;
  height: 870px;
}

.moment-shot {
  position: absolute;
  margin: 0;
  padding: 9px 9px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    18px 34px 66px rgba(20, 6, 17, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
}

.moment-shot img {
  width: 100%;
  height: auto;
  border-radius: 29px;
}

.moment-shot figcaption {
  padding: 15px 8px 16px;
  color: var(--on-plum);
  font-size: 0.92rem;
  font-weight: 720;
  text-align: center;
}

.moment-shot-primary {
  top: 0;
  left: 2%;
  z-index: 2;
  width: min(64%, 382px);
}

.moment-shot-secondary {
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(52%, 300px);
}

.trust-section {
  padding: 142px 0;
  background: var(--canvas-deep);
}

.trust-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(440px, 1.12fr);
  gap: clamp(48px, 8vw, 110px);
  padding: clamp(34px, 6vw, 76px);
  border: 1px solid var(--line);
  border-radius: 38px;
  background: var(--glass-strong);
  box-shadow: 0 34px 72px var(--deep-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(28px) saturate(118%);
  -webkit-backdrop-filter: blur(28px) saturate(118%);
}

.trust-copy > p:last-child {
  max-width: 48ch;
  margin: 27px 0 0;
  color: var(--text-secondary);
  font-size: 1.06rem;
  line-height: 1.64;
}

.trust-details {
  min-width: 0;
}

.trust-no-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-no-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 67px;
  padding: 12px 0;
  color: var(--text-secondary);
  font-weight: 680;
}

.trust-no-list li + li {
  border-top: 1px solid color-mix(in srgb, var(--text-secondary) 20%, transparent);
}

.trust-no-list svg {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--plum) 34%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--plum) 12%, transparent);
  fill: none;
  stroke: var(--plum);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.trust-flow {
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) 48px minmax(190px, 1.2fr);
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
}

.trust-flow div {
  min-width: 0;
}

.trust-flow span,
.trust-flow strong {
  display: block;
}

.trust-flow span {
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 650;
}

.trust-flow strong {
  font-size: 1rem;
  line-height: 1.35;
}

.trust-flow > svg {
  width: 40px;
  height: 16px;
  fill: none;
  stroke: var(--brand-teal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iphone-section {
  position: relative;
  padding: 150px 0;
  overflow: clip;
  background: var(--canvas);
}

.iphone-layout {
  display: grid;
  grid-template-columns: minmax(380px, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(52px, 9vw, 132px);
}

.app-icon-stage {
  position: relative;
  display: grid;
  width: min(100%, 470px);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
}

.app-icon-stage::before {
  position: absolute;
  inset: 10%;
  border: 1px solid var(--line);
  border-radius: 44% 56% 54% 46% / 48% 41% 59% 52%;
  background: var(--glass);
  box-shadow: 0 32px 70px var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  content: "";
  backdrop-filter: blur(24px) saturate(118%);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
  transform: rotate(-3deg);
}

.app-icon-stage img {
  position: relative;
  z-index: 2;
  width: 48%;
  height: auto;
  border-radius: 25.5%;
  box-shadow: 18px 28px 54px var(--deep-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.iphone-copy {
  max-width: 650px;
}

.iphone-copy > p:not(.eyebrow) {
  max-width: 50ch;
  margin: 27px 0 0;
  color: var(--text-secondary);
  font-size: 1.07rem;
  line-height: 1.64;
}

.iphone-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--text-secondary) 20%, transparent);
  list-style: none;
}

.iphone-features li {
  position: relative;
  min-height: 62px;
  padding: 20px 4px 16px 25px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 20%, transparent);
  color: var(--text-secondary);
  font-size: 0.98rem;
  font-weight: 650;
}

.iphone-features li::before {
  position: absolute;
  top: 26px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-teal) 15%, transparent);
  content: "";
}

.final-cta {
  position: relative;
  padding: 146px 0 152px;
  overflow: clip;
  isolation: isolate;
  background: var(--plum-surface);
  color: var(--on-plum);
  text-align: center;
}

.final-ribbon {
  position: absolute;
  top: -300px;
  left: 50%;
  z-index: -1;
  width: 980px;
  height: 720px;
  border: 45px solid rgba(255, 255, 255, 0.09);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-shadow: inset 12px 10px 20px rgba(255, 255, 255, 0.07);
  transform: translateX(-50%) rotate(18deg);
}

.final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-mark {
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
  object-fit: contain;
}

.final-cta h2 {
  width: 100%;
  max-width: 13ch;
  font-size: clamp(3rem, 6vw, 5.4rem);
  overflow-wrap: anywhere;
}

.final-cta-inner > p:not(.eyebrow) {
  max-width: 55ch;
  margin: 27px 0 0;
  color: var(--on-plum-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.final-download-cta {
  min-width: 230px;
  margin-top: 35px;
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--on-plum);
  box-shadow: 0 16px 34px rgba(20, 6, 17, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--plum-surface-deep);
}

@media (hover: hover) and (pointer: fine) {
  .final-download-cta[href]:hover {
    background: #ffffff;
    box-shadow: 0 20px 38px rgba(20, 6, 17, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
}

.final-cta a:focus-visible {
  outline-color: var(--on-plum);
}

.site-footer {
  padding: 34px 0 max(34px, env(safe-area-inset-bottom));
  background: var(--canvas-deep);
  color: var(--footer-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 13%, transparent);
}

.footer-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border-radius: 12px;
  color: var(--footer-text-strong);
  font-weight: 800;
}

.footer-brand picture,
.footer-brand img {
  width: 38px;
  height: 38px;
}

.footer-brand img {
  object-fit: contain;
}

/* Da 820px in su la firma sta in testata: nel piè di pagina compare solo fino a
   819px (vedi il blocco dei 819px). */
.footer-made-by {
  display: none;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 30px);
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 10px;
  color: var(--footer-text);
  font-size: 0.91rem;
  font-weight: 630;
}

@media (hover: hover) and (pointer: fine) {
  .footer-nav a[href]:hover {
    color: var(--footer-text-strong);
    text-decoration: var(--footer-link-hover-decoration);
    text-underline-offset: 5px;
  }
}

.footer-nav a[aria-disabled="true"] {
  cursor: default;
}

.footer-copyright {
  margin: 0;
  color: var(--footer-text);
  font-size: 0.86rem;
  text-align: right;
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 260ms ease-out,
    transform 260ms ease-out;
}

.reveal.is-visible,
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (max-width: 1099px) {
  .primary-nav {
    gap: 18px;
  }

  .hero {
    min-height: 0;
    padding-bottom: 120px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }

  .hero-copy {
    max-width: 790px;
  }

  h1 {
    max-width: 13ch;
  }

  .hero-visual {
    width: min(100%, 660px);
    margin-inline: auto;
  }

  .hero-ribbon {
    right: -460px;
  }

  .problem-grid,
  .moments-layout,
  .trust-panel,
  .iphone-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .problem-copy,
  .moments-copy,
  .trust-copy,
  .iphone-copy {
    max-width: 720px;
  }

  .problem-ledger {
    width: min(100%, 760px);
    justify-self: end;
  }

  .moments-stage {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .trust-panel {
    gap: 54px;
  }

  .app-icon-stage {
    width: min(100%, 420px);
  }

  .iphone-copy {
    justify-self: center;
  }

  .footer-inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .footer-nav {
    justify-content: flex-end;
  }

  .footer-copyright {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* Fino a 819px la testata non ha spazio per la firma «by Brown Cloud» accanto al
   menù e al pulsante: lascia la testata e compare nel piè di pagina. Il nome
   «Split» resta in testata fino ai 761px (sul telefono sparisce, vedi sotto). */
@media (max-width: 819px) {
  .brand-lockup .made-by {
    display: none;
  }

  .footer-made-by {
    display: inline-flex;
    min-height: 44px;
    padding-inline: 10px;
    color: var(--footer-text);
    font-size: 0.82rem;
  }

  .footer-made-by .made-by-name {
    color: var(--footer-text-strong);
  }

  /* Da 761px a 819px il piè di pagina ha due colonne: la firma sta sotto il
     marchio, il menù legale resta a destra sulla riga del marchio e il
     copyright va sotto. «not all and (max-width: 760px)» è il contrario esatto
     dei 760px, decimali compresi (la sintassi a intervallo, 760px < width, non
     la capiscono Safari prima della 16.4 e Chrome prima della 104). Sta dopo le
     regole di sopra: a pari specificità vince l'ultima. */
  @media not all and (max-width: 760px) {
    .footer-inner {
      row-gap: 12px;
    }

    .footer-made-by {
      grid-column: 1;
      grid-row: 2;
      justify-self: start;
      padding-inline: 0;
    }

    .footer-nav {
      grid-column: 2;
      grid-row: 1;
    }

    .footer-copyright {
      grid-row: 3;
      margin-top: 18px;
    }
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 92px;
  }

  body {
    background:
      radial-gradient(circle at 10% -5%, rgba(240, 244, 242, 0.24), transparent 19rem),
      var(--canvas);
  }

  .page-shell {
    width: min(calc(100% - 32px), var(--max-width));
  }

  .site-header {
    top: max(8px, env(safe-area-inset-top));
    padding-inline: max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-left));
  }

  .header-inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 64px;
    padding: 8px 8px 8px 12px;
    border-radius: 21px;
  }

  .brand-lockup-text,
  .primary-nav {
    display: none;
  }

  .brand-link picture,
  .brand-link img {
    width: 40px;
    height: 40px;
  }

  .header-cta {
    justify-self: end;
    min-height: 46px;
    padding: 11px 13px;
    font-size: 0.88rem;
  }

  .header-cta svg {
    width: 17px;
    height: 17px;
  }

  .hero {
    padding: 124px 0 92px;
  }

  .hero::before,
  .invite-hero::before {
    top: 0;
    left: -18rem;
    width: 30rem;
    height: 30rem;
  }

  .hero-grid {
    gap: 52px;
  }

  .hero-mark,
  .hero-mark img {
    width: 64px;
    height: 64px;
  }

  .hero-mark {
    margin-bottom: 20px;
  }

  .eyebrow {
    margin-bottom: 12px;
    font-size: 0.85rem;
  }

  h1 {
    max-width: 11.6ch;
    font-size: clamp(2.72rem, 12.7vw, 4.1rem);
    letter-spacing: -0.058em;
    line-height: 0.99;
  }

  .hero-support {
    margin-top: 24px;
    font-size: 1.03rem;
    line-height: 1.57;
  }

  .hero-actions {
    margin-top: 28px;
  }

  .hero-cta {
    width: 100%;
    min-width: 0;
  }

  .money-note {
    margin-top: 18px;
    font-size: 0.9rem;
  }

  .hero-visual {
    width: 100%;
    height: 635px;
    perspective: none;
    transform: none;
  }

  .visual-halo {
    top: 4%;
    right: -8%;
    bottom: 2%;
    left: -7%;
    transform: none;
  }

  .screen-frame {
    border-radius: 30px;
  }

  .screen-frame-primary {
    top: 0;
    left: 0;
    width: min(74%, 270px);
    transform: none;
  }

  .screen-frame-secondary {
    top: 116px;
    right: 0;
    width: min(54%, 198px);
    transform: none;
  }

  .hero-visual:hover .screen-frame-primary,
  .hero-visual:hover .screen-frame-secondary {
    transform: none;
  }

  .hero-ribbon {
    top: 690px;
    right: -520px;
    width: 710px;
    height: 820px;
    border-width: 30px;
    opacity: 0.72;
  }

  .problem-section {
    padding: 88px 0 102px;
  }

  .problem-grid {
    gap: 40px;
  }

  .problem-copy h2,
  .moments-copy h2,
  .trust-copy h2,
  .iphone-copy h2 {
    font-size: clamp(2.35rem, 10.8vw, 3.35rem);
  }

  .problem-copy > p:last-child,
  .moments-copy > p:last-child,
  .trust-copy > p:last-child,
  .iphone-copy > p:not(.eyebrow) {
    margin-top: 21px;
    font-size: 1rem;
  }

  .problem-ledger {
    border-radius: 25px;
  }

  .problem-ledger ul {
    padding: 12px 18px 6px;
  }

  .problem-ledger li {
    min-height: 70px;
    gap: 14px;
    font-size: 0.97rem;
  }

  .problem-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .problem-resolution {
    padding: 19px 18px;
    border-radius: 18px;
    font-size: 1.02rem;
  }

  .how-it-works {
    padding: 84px 0 104px;
  }

  .section-heading {
    display: block;
    margin-bottom: 32px;
  }

  .section-heading h2 {
    font-size: clamp(2.35rem, 10.8vw, 3.35rem);
  }

  .section-heading > p:last-child {
    margin-top: 20px;
    font-size: 1rem;
  }

  .steps-panel {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  .steps-panel li {
    min-height: 0;
    padding: 28px 24px 32px;
  }

  .steps-panel li + li {
    border-top: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-left: 0;
  }

  .step-topline {
    margin-bottom: 26px;
  }

  .step-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }

  .inside-split {
    padding: 100px 0 110px;
  }

  .inside-heading {
    margin-bottom: 36px;
  }

  .story-item,
  .story-item-reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    min-height: 0;
    padding: 62px 0 76px;
  }

  .story-item:first-child {
    padding-top: 24px;
  }

  .story-copy {
    max-width: 560px;
  }

  .story-number {
    margin-bottom: 25px;
  }

  .story-copy h3 {
    font-size: clamp(2.3rem, 10.2vw, 3.25rem);
  }

  .story-copy > p:last-child {
    margin-top: 21px;
    font-size: 1rem;
  }

  .product-shot {
    width: min(86%, 310px);
    border-radius: 38px;
  }

  .product-shot img {
    border-radius: 29px;
  }

  .product-shot::before,
  .story-item-reverse .product-shot::before {
    right: -30%;
    left: auto;
    border-width: 18px;
  }

  .moments-section {
    padding: 96px 0 104px;
  }

  .moments-layout {
    gap: 42px;
  }

  .moments-stage {
    height: 650px;
  }

  .moment-shot {
    padding: 7px 7px 0;
    border-radius: 30px;
  }

  .moment-shot img {
    border-radius: 23px;
  }

  .moment-shot figcaption {
    padding: 12px 5px 13px;
    font-size: 0.82rem;
  }

  .moment-shot-primary {
    left: 0;
    width: min(67%, 248px);
    transform: none;
  }

  .moment-shot-secondary {
    right: 0;
    width: min(54%, 198px);
    transform: none;
  }

  .trust-section {
    padding: 92px 0;
  }

  .trust-panel {
    gap: 38px;
    padding: 29px 23px 32px;
    border-radius: 28px;
  }

  .trust-no-list li {
    min-height: 65px;
    font-size: 0.95rem;
  }

  .trust-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .trust-flow > svg {
    margin-left: 14px;
    transform: rotate(90deg);
    transform-origin: center;
  }

  .trust-flow div:last-child {
    padding: 17px 18px;
    border: 1px solid color-mix(in srgb, var(--brand-teal) 35%, transparent);
    border-radius: 17px;
    background: color-mix(in srgb, var(--brand-teal) 10%, transparent);
  }

  .iphone-section {
    padding: 94px 0 106px;
  }

  .iphone-layout {
    gap: 50px;
  }

  .app-icon-stage {
    width: min(100%, 340px);
  }

  .iphone-features {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 29px;
  }

  .final-cta {
    padding: 102px 0 110px;
  }

  .final-mark {
    width: 72px;
    height: 72px;
    margin-bottom: 21px;
  }

  .final-cta h2 {
    font-size: clamp(2.7rem, 12vw, 4rem);
  }

  .final-cta-inner > p:not(.eyebrow) {
    margin-top: 23px;
    font-size: 1rem;
  }

  .final-download-cta {
    width: 100%;
    min-width: 0;
    margin-top: 30px;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 12px;
  }

  .footer-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 18px;
  }

  .footer-copyright {
    grid-column: auto;
    margin-top: 6px;
    text-align: center;
  }
}

@media (max-width: 370px) {
  .header-cta {
    max-width: 132px;
    padding-inline: 9px;
  }

  .header-cta span {
    max-width: 88px;
  }

  .hero-visual {
    height: 600px;
  }
}

@media (max-width: 300px) {
  .header-inner {
    gap: 6px;
    padding-inline: 6px;
  }

  .brand-link picture,
  .brand-link img {
    width: 34px;
    height: 34px;
  }

  .header-cta {
    max-width: 112px;
    padding-inline: 7px;
    font-size: 0.76rem;
  }

  .header-cta span {
    max-width: 82px;
  }

  .header-cta svg {
    display: none;
  }
}

/* ------------------------------------------------------------------------
   Pagina degli inviti (invito.html, servita a /join/<codice>).
   Riusa testata, pulsanti, titoli, nota e piede del resto del sito: qui c'è
   solo quello che alla prima pagina non serve.
   ------------------------------------------------------------------------ */

.invite-page {
  display: flex;
  flex-direction: column;
}

.invite-main {
  flex: 1 0 auto;
}

.invite-hero {
  position: relative;
  padding: clamp(132px, 12vw, 176px) 0 clamp(72px, 9vw, 120px);
  isolation: isolate;
  overflow: clip;
}

/* Il nastro prugna, come nella prima pagina: qui passa dietro il pannello, non
   dietro le frasi (sarebbero poco leggibili). Misure per schermo stretto e
   medio; a partire da 900px la pagina va su due colonne e il nastro cambia. */
.invite-hero .hero-ribbon {
  top: 120px;
  right: -520px;
  width: 710px;
  height: 820px;
  border-width: 30px;
}

.invite-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.invite-side {
  position: relative;
  z-index: 4;
  min-width: 0;
  max-width: 640px;
}

/* Il pulsante «Copia il link»: stesso aspetto del pulsante prugna del sito.
   Nasce nascosto (`hidden`) e lo mostra lo script: senza JavaScript non c'è. */
.copy-link {
  min-width: 224px;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.copy-link[hidden] {
  display: none;
}

/* Il sollevamento al passaggio (e la sottolineatura della firma «by Brown Cloud»)
   vale solo dove c'è un puntatore vero: sui telefoni lo stato hover resta
   attaccato dopo il tocco e lascerebbe il pulsante sollevato e ruotato. */
@media (hover: hover) and (pointer: fine) {
  .copy-link:hover {
    background: var(--plum-pressed);
    box-shadow: 0 14px 28px rgba(64, 24, 55, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px) rotate(-0.4deg);
  }

  .made-by:hover .made-by-name {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.copy-link:active {
  transform: scale(0.97);
}

/* Due icone nel pulsante: la copia, e la spunta per un attimo dopo la copia. */
.copy-link .icon-done,
.copy-link[data-state="done"] .icon-copy {
  display: none;
}

.copy-link[data-state="done"] .icon-done {
  display: block;
}

/* La zona di stato: VoiceOver la legge da sola. Vuota non si vede, ma tiene il
   posto di una riga così la pagina non salta quando compare il messaggio. */
.copy-status {
  min-height: 1.6em;
  margin: 16px 0 0;
  color: var(--text-primary);
  font-size: 0.97rem;
  font-weight: 680;
  line-height: 1.5;
}

.copy-status:not(:empty)::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--brand-teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-teal) 15%, transparent);
  content: "";
  vertical-align: 0.06em;
}

.copy-status[data-tone="error"]::before {
  background: var(--plum);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--plum) 18%, transparent);
}

.invite-panel {
  padding: 30px clamp(20px, 3vw, 34px) 12px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--glass);
  box-shadow: 0 26px 58px var(--deep-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(24px) saturate(118%);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
}

/* Nel tema scuro il vetro del sito è quasi trasparente (0,18): il nastro rosa
   passerebbe attraverso le frasi e il testo scenderebbe sotto 4,5:1. Qui il
   pannello è quasi pieno, con lo stesso colore del vetro sopra lo sfondo. */
@media (prefers-color-scheme: dark) {
  .invite-panel {
    background: color-mix(in srgb, var(--glass-solid) 92%, transparent);
  }
}

@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .invite-panel {
    background: var(--glass-solid);
  }
}

/* Nel tema chiaro il bordo del bagliore tondo scurisce lo sfondo dietro il
   paragrafo: con --text-secondary il contrasto scende a 4,4:1. */
@media (prefers-color-scheme: light) {
  .invite-hero .hero-support {
    color: var(--text-primary);
  }
}

.invite-panel h2 {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 830;
  letter-spacing: -0.035em;
  line-height: 1.14;
}

/* Elenco numerato: la lista resta una lista vera (numeri letti da VoiceOver),
   i cerchietti prugna sono solo disegno. Il numero disegnato porta il testo
   alternativo vuoto dove il browser lo capisce, per non farlo leggere due
   volte. */
.invite-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.invite-steps li {
  position: relative;
  min-height: 78px;
  padding: 19px 0 19px 58px;
  counter-increment: passo;
}

.invite-steps li + li {
  border-top: 1px solid color-mix(in srgb, var(--text-secondary) 19%, transparent);
}

.invite-steps li::before {
  position: absolute;
  top: 19px;
  left: 0;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  background: var(--plum);
  box-shadow: 0 8px 16px var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: var(--cta-text);
  content: counter(passo);
  content: counter(passo) / "";
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.invite-steps p {
  margin: 0;
  padding-top: 7px;
  color: var(--text-secondary);
  font-size: 1.04rem;
  font-weight: 560;
  line-height: 1.5;
}

.invite-steps strong {
  color: var(--text-primary);
  font-weight: 800;
}

.invite-after {
  padding: 18px 6px 0;
}

.invite-home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 12px;
  font-weight: 780;
}

.invite-home-link span {
  text-decoration: underline;
  text-decoration-color: var(--plum);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.invite-home-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

@media (min-width: 900px) {
  .invite-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: clamp(48px, 6vw, 92px);
    align-items: center;
  }

  .invite-side {
    max-width: none;
  }

  .invite-hero .hero-ribbon {
    top: 60px;
    right: -420px;
    width: 850px;
    height: 980px;
    border-width: 42px;
  }

  .invite-footer .footer-inner {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .invite-hero {
    padding: 116px 0 64px;
  }

  .invite-grid {
    gap: 26px;
  }

  .copy-link {
    width: 100%;
    min-width: 0;
  }

  .invite-panel {
    padding: 24px 18px 8px;
    border-radius: 26px;
  }

  .invite-steps li {
    padding-left: 54px;
  }

  .invite-steps p {
    font-size: 1.02rem;
  }

  .invite-after {
    padding-inline: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    transform: none;
    transition: opacity 180ms ease-out;
  }

  .hero-visual,
  .screen-frame,
  .hero-visual:hover .screen-frame-primary,
  .hero-visual:hover .screen-frame-secondary,
  .moment-shot-primary,
  .moment-shot-secondary,
  .hero-ribbon,
  .app-store-cta[href]:hover,
  .app-store-cta[href]:active,
  .copy-link:hover,
  .copy-link:active {
    transform: none;
    transition: opacity 180ms ease-out;
  }
}

@media (prefers-contrast: more) {
  :root {
    --glass: var(--glass-solid);
    --glass-strong: var(--glass-solid);
    --header-surface: var(--glass-solid);
    --line: currentColor;
  }

  .site-header.is-scrolled .header-inner,
  .steps-panel,
  .visual-halo,
  .problem-ledger,
  .invite-panel,
  .product-shot,
  .moment-shot,
  .trust-panel,
  .app-icon-stage::before {
    border-width: 2px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: var(--glass-solid);
    --glass-strong: var(--glass-solid);
    --header-surface: var(--glass-solid);
  }

  .site-header.is-scrolled .header-inner,
  .steps-panel,
  .visual-halo,
  .problem-ledger,
  .invite-panel,
  .product-shot,
  .moment-shot,
  .trust-panel,
  .app-icon-stage::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}