/*
 * The home page of wauchi.com (his design handoff «Sito Home», 1/11/2026). Every rule holds only
 * on the site, html[data-page="site"], so the app, served by the same page, never sees them. The
 * theme follows the device by itself, light or dark (his choice: «automatico senza scelta»); the
 * dark one keeps the design's navy and gold and turns the glass dark, as the app's dark theme.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* only 福 和 内 一 二 三 (Google Fonts' subset, Noto Serif JP 500, SIL OFL 1.1) */
@font-face {
  font-family: "Noto Serif JP Sito";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/noto-serif-jp-500-sito.woff2") format("woff2");
}

[data-page="app"] #site {
  display: none;
}

html[data-page="site"] {
  color-scheme: light dark;
  /* no grey rectangle on a tap (his note from his phone, 3/11/2026: «le selezioni non seguono la
     forma del tasto»): the control itself answers, see :active under (hover: none) */
  -webkit-tap-highlight-color: transparent;
  /* the page's margins at the sides: the design's 20px on a phone, wider on the Duo and tablets
     (his note of 1/11/2026: «appiccicate ai lati») */
  --side: clamp(20px, 4.5vw, 40px);
  scroll-behavior: smooth;
  --s-bg: #edf1f7;
  --s-text: #0a1f3f;
  --s-muted: #5a6577;
  --s-para: #3a4a63;
  --s-blue: #0b6fd6;
  --s-blue-hover: #08529f;
  --s-gold-text: #a87300;
  --s-salmon: #d9615c;
  --s-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  --s-glass-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
  --s-glass-border: #fff;
  --s-glass-shadow: inset 0 1px 0 #fff, 0 30px 60px -36px rgba(10, 30, 60, 0.45);
  --s-glass-shadow-hover: inset 0 1px 0 #fff, 0 40px 70px -34px rgba(10, 30, 60, 0.55);
  --s-tile: rgba(10, 31, 63, 0.035);
  --s-tile-border: rgba(10, 31, 63, 0.06);
  --s-row: #fff;
  --s-line: rgba(10, 31, 63, 0.08);
  --s-step: rgba(255, 255, 255, 0.6);
  --s-step-border: rgba(255, 255, 255, 0.95);
  --s-wa: #0a1f3f;
  --s-sheet: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 253, 0.94));
  --s-button: #fff;
  --s-button-border: rgba(10, 31, 63, 0.1);
  --s-button-hover: #f1f5fb;
}
@media (prefers-color-scheme: dark) {
  html[data-page="site"] {
    --s-bg: #061a45;
    --s-text: #eef3fb;
    --s-muted: #a3b2c8;
    --s-para: #c6d2e3;
    --s-blue: #6cb4ff;
    --s-blue-hover: #9fd0ff;
    --s-gold-text: #f2c14e;
    --s-salmon: #ff9e99;
    --s-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
    --s-glass-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    --s-glass-border: rgba(255, 255, 255, 0.13);
    --s-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -36px rgba(0, 0, 0, 0.75);
    --s-glass-shadow-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 40px 70px -34px rgba(0, 0, 0, 0.85);
    --s-tile: rgba(255, 255, 255, 0.05);
    --s-tile-border: rgba(255, 255, 255, 0.08);
    --s-row: rgba(255, 255, 255, 0.08);
    --s-line: rgba(255, 255, 255, 0.1);
    --s-step: rgba(255, 255, 255, 0.06);
    --s-step-border: rgba(255, 255, 255, 0.11);
    --s-wa: #eef3fb;
    --s-sheet: linear-gradient(180deg, rgba(14, 34, 72, 0.98), rgba(8, 24, 54, 0.97));
    --s-button: rgba(255, 255, 255, 0.08);
    --s-button-border: rgba(255, 255, 255, 0.14);
    --s-button-hover: rgba(255, 255, 255, 0.14);
  }
}

[data-page="site"] body {
  margin: 0;
  background: var(--s-bg);
  color: var(--s-text);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[data-page="site"] .site *,
[data-page="site"] .site *::before,
[data-page="site"] .site *::after {
  box-sizing: border-box;
}
.site {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}
.site a {
  color: var(--s-blue);
  text-decoration: none;
}
@media (hover: hover) {
  .site a:hover {
    color: var(--s-blue-hover);
  }
}
.site .jp {
  font-family: "Noto Serif JP Sito", "Noto Serif JP", serif;
  font-weight: 500;
}
.site .wrap {
  max-width: 1240px;
  margin: 0 auto;
}
.site .grow {
  flex: 1;
}
.site h1,
.site h2,
.site h3,
.site p {
  margin: 0;
}
.site h2 {
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.site .eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--s-blue);
}
.site .eyebrow.gold {
  color: #ffd76a;
}
.site .gold-text {
  background: linear-gradient(180deg, #ffe08a 0%, #f2c14e 55%, #d9a521 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site .salmon-text {
  background: linear-gradient(180deg, #ffaaa6 0%, #f28a86 55%, #e57373 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- buttons ----- */
.site .btn-gold,
.site .btn-glass,
.site .btn-ghost,
.site .btn-white,
.site .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  font-weight: 800;
  transition:
    transform 0.2s,
    filter 0.2s,
    background 0.2s;
}
.site .btn-gold {
  padding: 15px 24px;
  border-radius: 14px;
  font-size: 16px;
  color: #2a1e00;
  background: linear-gradient(180deg, #ffe08a, #f2c14e 55%, #d9a521);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 30px -12px rgba(242, 193, 78, 0.9);
}
@media (hover: hover) {
  .site .btn-gold:hover {
    color: #2a1e00;
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
}
.site .btn-gold.small {
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 24px -10px rgba(242, 193, 78, 0.8);
}
.site .big {
  padding: 18px 28px;
  border-radius: 16px;
  font-size: 18px;
}
.site .btn-gold.big {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 18px 40px -14px rgba(242, 193, 78, 0.9);
}
.site .wide {
  width: 100%;
}
.site .arrow {
  font-size: 20px;
}
.site .btn-ghost {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
@media (hover: hover) {
  .site .btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }
}
.site .btn-glass {
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
@media (hover: hover) {
  .site .btn-glass:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
  }
}
.site .btn-white {
  color: var(--s-text);
  background: var(--s-button);
  border: 1px solid var(--s-button-border);
  box-shadow: 0 10px 24px -16px rgba(10, 30, 60, 0.4);
}
@media (hover: hover) {
  .site .btn-white:hover {
    color: var(--s-blue);
  }
}
.site .btn-outline {
  padding: 15px 22px;
  border-radius: 14px;
  font-size: 16px;
  color: var(--s-blue);
  background: var(--s-button);
  border: 1px solid color-mix(in srgb, var(--s-blue) 30%, transparent);
}
@media (hover: hover) {
  .site .btn-outline:hover {
    background: var(--s-button-hover);
  }
}

/* ----- nav ----- */
.site .nav {
  position: sticky;
  top: 14px;
  z-index: 20;
  max-width: calc(1200px + 2 * var(--side));
  margin: 14px auto 0;
  padding: 0 var(--side);
}
.site .nav-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 16px;
  border-radius: 20px;
  background: rgba(6, 26, 69, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 20px 40px -24px rgba(4, 20, 50, 0.6);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.site .nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 19px;
}
@media (hover: hover) {
  .site .nav-brand:hover {
    color: #fff;
  }
}
.site .nav-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}
.site .nav-links {
  display: flex;
  gap: 2px;
  margin-left: 8px;
}
.site .nav-links a {
  padding: 8px 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  font-size: 14px;
}
@media (hover: hover) {
  .site .nav-links a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
}
@media (max-width: 1080px) {
  .site .nav-links {
    display: none;
  }
}
@media (max-width: 480px) {
  .site .nav {
    padding: 0 12px;
  }
  .site .nav-bar {
    gap: 8px;
    padding: 8px 8px 8px 12px;
  }
  .site .nav-brand {
    font-size: 17px;
  }
  .site .nav-bar .btn-ghost {
    padding: 9px 12px;
  }
  .site .nav-bar .btn-gold.small {
    padding: 9px 12px;
    font-size: 14px;
  }
}

/* ----- hero ----- */
.site .hero {
  position: relative;
  margin-top: -80px;
  padding: 150px var(--side) 120px;
}
.site .hero-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #041a3a 0%,
    #0a3e80 38%,
    #1e7be2 62%,
    #9ec6f3 84%,
    var(--s-bg) 100%
  );
}
@media (prefers-color-scheme: dark) {
  .site .hero-sky {
    background: linear-gradient(
      180deg,
      #041a3a 0%,
      #0a3e80 40%,
      #145fbc 64%,
      #0d3a7a 84%,
      var(--s-bg) 100%
    );
  }
}
.site .hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.site .hero-glow.blue {
  top: -300px;
  right: -260px;
  width: 1100px;
  height: 1100px;
  background: radial-gradient(circle, rgba(79, 163, 255, 0.45) 0%, rgba(79, 163, 255, 0) 60%);
}
.site .hero-glow.gold {
  top: 120px;
  left: -220px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(242, 193, 78, 0.22) 0%, rgba(242, 193, 78, 0) 60%);
}
.site .hero-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.site .hero-text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  color: #fff;
}
.site h1 {
  font-size: clamp(52px, 7.4vw, 104px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 0 60px rgba(124, 196, 255, 0.25);
}
.site h1 .gold-text {
  filter: drop-shadow(0 6px 28px rgba(242, 193, 78, 0.4));
  text-shadow: none;
  /* the gold is painted inside the word's box, and the tight letters of the title lean out of it
     at the end («stanze», «casa» lost a sliver of their last letter, his note of 3/11/2026): a
     wider box that takes no room */
  padding-right: 0.1em;
  margin-right: -0.1em;
}
.site .hero-lead {
  max-width: 540px;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}
.site .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* a tap on a touch screen: the control pressed fades a little, in its own shape */
@media (hover: none) {
  .site a:active,
  .site button:active,
  .site summary:active {
    opacity: 0.72;
  }
}
/* the second way of the hero, a link with its arrow beside the one gold button (the designmotionhq
   pattern «De-AI Landing Hero», 3/11/2026: two equal buttons split the tap; one leads) */
.site .hero-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.site .hero-link .arrow {
  transition: translate 0.16s ease-out;
}
@media (hover: hover) {
  .site .hero-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
  }
  .site .hero-link:hover .arrow {
    translate: 3px 0;
  }
}
.site .hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.site .hero-meta b {
  color: #fff;
}
.site .hero-meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

/* the 3D mockup: three layers at different depths, tilted by the pointer (site.ts) */
.site .hero-stage-wrap {
  flex: 1 1 480px;
  min-width: 0;
  perspective: 1600px;
  /* the scene keeps the design's 600 × 560 and is scaled to the room it has (site.ts sets --fit),
     so on a phone, the Duo or a tablet it never runs off the sides (his note of 1/11/2026) */
  height: calc(560px * var(--fit, 1));
}
.site .hero-stage {
  position: relative;
  left: 50%;
  width: 600px;
  margin-left: -300px;
  height: 560px;
  transform-style: preserve-3d;
  transform: scale(var(--fit, 1)) rotateX(8deg) rotateY(-14deg);
  transform-origin: top center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the Duo open and a tablet: the words and the scene side by side, the type a little smaller
   (his note of 1/11/2026: «se c'è spazio… tenere il grafico al lato della scritta»); below
   700px one under the other */
@media (min-width: 700px) and (max-width: 1080px) {
  .site .hero {
    padding-bottom: 90px;
  }
  .site .hero-row {
    flex-wrap: nowrap;
    gap: 28px;
  }
  .site .hero-text {
    flex: 1 1 0;
    gap: 18px;
  }
  .site .hero-stage-wrap {
    flex: 1.25 1 0;
  }
  .site h1 {
    font-size: clamp(40px, 6.2vw, 64px);
  }
  .site .hero-lead {
    font-size: 16px;
  }
  .site .hero-actions .big {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
  }
  .site .hero-meta {
    font-size: 13px;
  }
}
@media (max-width: 699px) {
  .site .hero-stage-wrap {
    flex-basis: 100%;
    padding-inline: clamp(12px, 5vw, 40px);
  }
}
.site .mock-liq {
  position: absolute;
  top: 10px;
  left: 0;
  width: 78%;
  border-radius: 28px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
  background: linear-gradient(155deg, #2b8bf0 0%, #0b6fd6 45%, #0a4fb0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 60px 100px -40px rgba(4, 20, 60, 0.85);
  overflow: hidden;
  transform: translateZ(0);
}
.site .mock-shine {
  position: absolute;
  top: -200px;
  left: -120px;
  width: 520px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 65%);
}
.site .mock-liq-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
}
.site .mock-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 12px;
  font-weight: 700;
}
.site .mock-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5be3a1;
  box-shadow: 0 0 8px #5be3a1;
}
.site .mock-liq-value {
  position: relative;
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -1.6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 4px 20px rgba(242, 193, 78, 0.35));
}
.site .mock-liq-box {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(4, 26, 58, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.site .mock-liq-box > div {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
}
.site .mock-liq-box > .gold-row {
  font-size: 13px;
  color: #ffd76a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site .mock-liq-box b {
  font-weight: 800;
}
.site .mock-bars {
  position: relative;
  height: 150px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
}
.site .mock-bars > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}
.site .mock-bars i {
  width: 100%;
  height: var(--h);
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  /* grown with a transform, which the compositor draws, not with the height, which lays the page
     out again at every frame */
  transform-origin: bottom;
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s);
}
.site .mock-bars .last i {
  background: linear-gradient(180deg, #fff, #e6f1ff);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.75),
    inset 0 1px 0 #fff;
}
.site .mock-bars[data-waiting] i {
  transform: scaleY(0.06);
}
.site .mock-bars small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}
.site .mock-rent {
  position: absolute;
  right: 0;
  top: 250px;
  width: 56%;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #0a1f3f;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
  border: 1px solid #fff;
  box-shadow:
    inset 0 1px 0 #fff,
    0 50px 80px -30px rgba(4, 20, 60, 0.6);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  transform: translateZ(90px);
}
.site .mock-rent-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}
.site .mock-rent-head small {
  font-size: 12px;
  color: #5a6577;
}
.site .mock-rent-due {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.site .mock-rent-due small {
  font-size: 12px;
  font-weight: 600;
  color: #5a6577;
}
.site .mock-rent-due b {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -1px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.site .mock-split {
  height: 8px;
  border-radius: 999px;
  display: flex;
  gap: 3px;
  overflow: hidden;
}
.site .mock-split i:first-child {
  background: linear-gradient(90deg, #0b6fd6, #4fa3ff);
}
.site .mock-split i:last-child {
  background: linear-gradient(90deg, #f28a86, #ffaaa6);
}
.site .mock-row {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
}
.site .mock-row i {
  height: 22px;
  border-radius: 4px;
}
.site .mock-row span {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site .mock-row b {
  font-weight: 800;
}
.site .mock-row.late {
  background: rgba(255, 236, 236, 0.8);
  border: 1px solid rgba(242, 138, 134, 0.3);
}
.site .mock-row.late i {
  background: linear-gradient(180deg, #ffaaa6, #e57373);
}
.site .mock-row.late b {
  color: #d9615c;
}
.site .mock-row.paid {
  background: rgba(11, 111, 214, 0.06);
  border: 1px solid rgba(11, 111, 214, 0.14);
}
.site .mock-row.paid i {
  background: linear-gradient(180deg, #4fa3ff, #0b6fd6);
}
.site .mock-row.paid b {
  color: #0b6fd6;
}
.site .mock-toast {
  /* the notice comes out of the bottom of the Affitti card, part of it (his note of 1/11/2026) */
  position: absolute;
  left: -26px;
  bottom: -36px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background: rgba(6, 26, 69, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 50px -20px rgba(4, 20, 60, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
}
.site .mock-toast > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.site .mock-toast b {
  font-size: 14px;
  font-weight: 800;
}
.site .mock-toast small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}
.site .mock-toast-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f6cf5e, #c9961a);
  color: #2a1e00;
  font-weight: 800;
}
/* on a phone the mockup is smaller, and still (no pointer to tilt it) */
@media (max-width: 640px) {
  .site .hero {
    padding: 130px 16px 80px;
  }
  .site .hero-row {
    gap: 36px;
  }
  .site .hero-actions > a {
    flex: 1 1 100%;
  }
}

/* ----- sections ----- */
.site .section {
  position: relative;
  padding: 40px var(--side) 100px;
}
.site .section > .wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.site .section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.site .section-head.center {
  align-items: center;
  text-align: center;
  max-width: 720px;
}

/* «Cosa fa»: seven cards, each opening its sheet */
.site .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.site .feature {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 28px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--s-glass);
  border: 1px solid var(--s-glass-border);
  box-shadow: var(--s-glass-shadow);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s;
}
.site .feature:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--s-glass-shadow-hover);
}
@media (hover: hover) {
  .site .feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--s-glass-shadow-hover);
  }
}
.site .feature:focus-visible {
  outline: 2px solid var(--s-blue);
  outline-offset: 3px;
}
.site .feature-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site .feature-text > b {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.4px;
}
.site .feature-text > span {
  font-size: 15px;
  line-height: 1.55;
  color: var(--s-muted);
}
.site .feature-more {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--s-blue);
}
.site .feature-more span {
  font-size: 16px;
}
.site .preview {
  height: 120px;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-border);
  font-size: 13px;
  font-weight: 700;
}
.site .preview .blue {
  color: var(--s-blue);
}
.site .preview .salmon {
  color: var(--s-salmon);
}
.site .preview .gold {
  color: var(--s-gold-text);
}
.site .preview-blue {
  justify-content: space-between;
  padding: 16px;
  color: #fff;
  border: 0;
  background: linear-gradient(155deg, #2b8bf0, #0a4fb0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.site .preview-blue small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.site .preview-blue b {
  font-size: 32px;
  letter-spacing: -1px;
  font-weight: 800;
}
.site .preview-rows {
  gap: 8px;
  padding: 14px;
}
.site .preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--s-row);
}
.site .preview-row.late {
  background: rgba(255, 236, 236, 0.9);
  border: 1px solid rgba(242, 138, 134, 0.3);
  color: #0a1f3f;
}
.site .preview-row.late .salmon {
  color: #d9615c;
}
.site .preview-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
}
.site .preview-days > span {
  border-radius: 12px;
  background: var(--s-row);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.site .preview-days small {
  font-size: 11px;
  font-weight: 800;
  color: var(--s-muted);
}
.site .preview-days b {
  font-size: 26px;
  font-weight: 800;
}
.site .preview-cities > span {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.site .preview-cities i {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b6fd6, #4fa3ff);
}
.site .preview-cities i.gold {
  background: linear-gradient(90deg, #d9a521, #ffe08a);
}
.site .preview-invest {
  justify-content: space-between;
}
.site .preview-invest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.site .preview-invest-head b {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.6px;
}
.site .preview-invest-head small {
  font-size: 13px;
  font-weight: 800;
  color: var(--s-blue);
}
.site .preview-invest-bars {
  height: 52px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  align-items: end;
}
.site .preview-invest-bars i {
  height: var(--h);
  border-radius: 3px;
  background: rgba(11, 111, 214, var(--o));
}
.site .preview-invest-bars i.top {
  background: linear-gradient(180deg, #4fa3ff, #0b6fd6);
}
.site .preview-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.site .preview-line small,
.site .preview-line.small {
  font-size: 12px;
  font-weight: 500;
  color: var(--s-muted);
}
.site .preview-line.small b {
  color: var(--s-text);
}
.site .preview-line .big {
  padding: 0;
  font-size: 18px;
  font-weight: 800;
}
.site .preview-split {
  height: 10px;
  border-radius: 999px;
  display: flex;
  gap: 3px;
  overflow: hidden;
}
.site .preview-split .paid {
  background: linear-gradient(90deg, #0b6fd6, #4fa3ff);
}
.site .preview-split .rest {
  background: rgba(242, 138, 134, 0.35);
}
.site .preview-split .gold {
  background: linear-gradient(90deg, #d9a521, #ffe08a);
}
.site .preview-split .empty {
  background: var(--s-line);
}
/* the ten instalments of the house bonus (the card «Bonus casa e 730», 3/11/2026) */
.site .preview-steps {
  display: flex;
  gap: 4px;
}
.site .preview-steps i {
  flex: 1;
  height: 14px;
  border-radius: 4px;
  background: var(--s-line);
}
.site .preview-steps i.on {
  background: linear-gradient(180deg, #4fa3ff, #0b6fd6);
}

/* «Come funziona» */
.site .steps-section {
  padding: 20px var(--side) 110px;
}
.site .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.site .step {
  position: relative;
  border-radius: 28px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--s-step);
  border: 1px solid var(--s-step-border);
  overflow: hidden;
}
.site .step > * {
  position: relative;
}
.site .step-n {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2b8bf0, #0b6fd6);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 20px -8px rgba(11, 111, 214, 0.6);
}
.site .step-n.gold {
  background: linear-gradient(180deg, #f6cf5e, #c9961a);
  color: #2a1e00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 20px -8px rgba(201, 150, 26, 0.6);
}
.site .step > b {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.4px;
}
.site .step > span:last-child {
  font-size: 16px;
  line-height: 1.55;
  color: var(--s-muted);
}
/* on a phone the number stands beside the title (his note of 1/11/2026) */
@media (max-width: 640px) {
  .site .step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    row-gap: 12px;
    padding: 24px;
  }
  .site .step > span:last-child {
    grid-column: 1 / -1;
  }
}

/* «Privacy» */
.site .privacy-section {
  position: relative;
  padding: 0 var(--side);
}
.site .privacy {
  position: relative;
  border-radius: 40px;
  padding: clamp(40px, 6vw, 80px);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(140deg, #041a3a 0%, #0a3e80 60%, #1673da 100%);
  box-shadow: 0 60px 100px -50px rgba(4, 20, 60, 0.7);
}
.site .privacy-glow {
  position: absolute;
  top: -300px;
  right: -200px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 163, 255, 0.35) 0%, rgba(79, 163, 255, 0) 60%);
}
.site .privacy-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.site .privacy-title {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.site .privacy-title p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}
.site .privacy-points {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site .privacy-point {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.site .privacy-point > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site .privacy-point b {
  font-weight: 800;
  font-size: 18px;
}
.site .privacy-point b + span {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.site .privacy-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 193, 78, 0.18);
  color: #ffd76a;
}
.site .privacy-icon svg,
.site .store-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* «Storia» */
.site .story-section {
  padding: 110px var(--side);
}
.site .section > .wrap.story-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}
.site .story-kanji {
  flex: 1 1 420px;
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  justify-content: center;
  align-items: flex-end;
}
.site .story-kanji > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.site .story-kanji small {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--s-gold-text);
}
.site .story-wa {
  font-size: 128px;
  line-height: 160px;
  color: var(--s-wa);
}
.site .story-uchi {
  display: block;
  width: 160px;
  height: 160px;
}
.site .story-text {
  flex: 1 1 440px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.site .story-text p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--s-para);
  text-wrap: pretty;
}
.site .story-text p b {
  color: var(--s-text);
}
.site .story-link {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--s-glass-strong);
  border: 1px solid var(--s-glass-border);
  box-shadow:
    inset 0 1px 0 var(--s-glass-border),
    0 10px 24px -14px rgba(10, 30, 60, 0.4);
}

/* «Prezzi» */
.site .prices-section {
  padding: 0 var(--side) 110px;
}
.site .section > .prices {
  align-items: center;
  gap: 36px;
  text-align: center;
}
.site .plan-switch {
  margin: 0;
  min-inline-size: 0;
  border: 0;
  display: flex;
  padding: 5px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--s-text) 7%, transparent);
  gap: 4px;
}
.site .plan-switch button {
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 10px 22px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--s-muted);
}
.site .plan-switch button[aria-pressed="true"] {
  background: var(--s-button);
  color: var(--s-text);
  box-shadow: 0 4px 12px -4px rgba(10, 30, 60, 0.3);
}
.site .plan-save {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.25);
  color: #8a5e00;
}
@media (prefers-color-scheme: dark) {
  .site .plan-save {
    color: #ffd76a;
  }
}
.site .plan {
  position: relative;
  width: 100%;
  max-width: 520px;
}
.site .plan-glow {
  position: absolute;
  inset: -40px -20px auto;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(242, 193, 78, 0.35) 0%, rgba(242, 193, 78, 0) 70%);
  filter: blur(20px);
}
.site .plan-card {
  position: relative;
  border-radius: 32px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background: var(--s-glass-strong);
  border: 1px solid var(--s-glass-border);
  box-shadow:
    inset 0 1px 0 var(--s-glass-border),
    0 50px 90px -40px rgba(10, 30, 60, 0.5);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.site .plan-name {
  font-weight: 800;
  font-size: 20px;
}
.site .plan-trial {
  margin-top: -8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #2a1e00;
  background: linear-gradient(180deg, #ffe08a, #f2c14e 55%, #d9a521);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 24px -12px rgba(242, 193, 78, 0.9);
}
.site .plan-friend {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  background: rgba(242, 193, 78, 0.12);
  border: 1px solid rgba(242, 193, 78, 0.35);
}
.site .plan-friend-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a1e00;
  background: linear-gradient(160deg, #f6cf5e, #c9961a);
}
.site .plan-friend-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site .plan-price {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
}
.site .plan-price b {
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(58px, 17vw, 84px);
  line-height: 1;
  letter-spacing: -3px;
  background: linear-gradient(180deg, #f6cf5e 0%, #d9a521 60%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site .plan-price span {
  font-size: 18px;
  font-weight: 700;
  color: var(--s-muted);
}
.site .plan-note {
  font-size: 15px;
  color: var(--s-muted);
  min-height: 22px;
}
.site .plan-list {
  list-style: none;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  padding: 18px 0;
  border-top: 1px solid var(--s-line);
  border-bottom: 1px solid var(--s-line);
}
.site .plan-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}
.site .plan-list li span {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--s-blue) 14%, transparent);
  color: var(--s-blue);
  font-size: 12px;
  font-weight: 800;
}

/* «Scarica» */
.site .download-section {
  padding: 0 var(--side) 110px;
}
.site .section > .wrap:has(.stores) {
  gap: 40px;
}
/* a store in one line: its icon beside the names, the word at the right (his note of 1/11/2026) */
.site .stores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
}
.site .store {
  border-radius: 22px;
  padding: 16px 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--s-text);
  background: var(--s-glass);
  border: 1px solid var(--s-glass-border);
  box-shadow:
    inset 0 1px 0 var(--s-glass-border),
    0 20px 40px -28px rgba(10, 30, 60, 0.45);
  transition: transform 0.2s;
}
@media (hover: hover) {
  .site a.store:hover {
    transform: translateY(-3px);
    color: var(--s-text);
  }
}
.site .store > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site .store small {
  font-size: 13px;
  font-weight: 600;
  color: var(--s-muted);
}
.site .store b {
  font-size: 18px;
  font-weight: 800;
}
@media (min-width: 700px) {
  .site .store b {
    white-space: nowrap;
  }
}
.site .store em {
  margin-left: auto;
  white-space: nowrap;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  color: var(--s-blue);
}
.site .store.soon em {
  color: var(--s-muted);
}
.site .store-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0b2a66, #051640);
  color: #fff;
}
.site .store-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}
/* the stores' marks, full, in white with a touch of gold (his request of 1/11/2026) */
.site .store-icon svg.filled {
  fill: #fff;
  stroke: none;
}
.site .store-icon svg .gold {
  fill: #f2c14e;
}

/* the last call */
.site .final-section {
  position: relative;
  padding: 0 var(--side) 90px;
}
.site .final {
  position: relative;
  border-radius: 40px;
  padding: clamp(40px, 6vw, 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  background: var(--s-glass-strong);
  border: 1px solid var(--s-glass-border);
  box-shadow:
    inset 0 1px 0 var(--s-glass-border),
    0 50px 90px -50px rgba(10, 30, 60, 0.5);
}
.site .final > * {
  position: relative;
}
.site .final .final-glow {
  position: absolute;
  bottom: -300px;
  left: 50%;
  width: 900px;
  height: 600px;
  margin-left: -450px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(242, 193, 78, 0.3) 0%, rgba(242, 193, 78, 0) 65%);
}
.site .final img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  display: block;
  box-shadow: 0 24px 48px -16px rgba(6, 26, 69, 0.5);
}
.site .final h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.site .final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.site .footer {
  background: #041a3a;
  color: rgba(255, 255, 255, 0.7);
  padding: 40px var(--side);
}
.site .footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 14px;
}
.site .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 17px;
}
.site .footer-brand .jp {
  color: #f2c14e;
}
.site .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.site .footer-links a {
  color: rgba(255, 255, 255, 0.75);
}
@media (hover: hover) {
  .site .footer-links a:hover {
    color: #fff;
  }
}
/* the site's page of each part, under the footer's row (3/11/2026) */
.site .footer-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
}
.site .footer-parts a {
  color: rgba(255, 255, 255, 0.6);
}
@media (hover: hover) {
  .site .footer-parts a:hover {
    color: #fff;
  }
}

/* ----- the pages of the parts (src/site/topic-page.ts, 3/11/2026): the home's pieces ----- */
/* the heading is a sentence, not the home's three words: smaller, and the blue example beside it */
.site .topic-hero {
  padding-bottom: 150px;
}
.site .topic-hero h1 {
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
}
.site .topic-hero .hero-row > .topic-example {
  flex: 0 1 420px;
  align-self: center;
  padding: 28px;
}
@media (min-width: 700px) and (max-width: 1080px) {
  .site .topic-hero .hero-row > .topic-example {
    flex: 0 0 300px;
    padding: 22px;
  }
}
@media (max-width: 699px) {
  .site .topic-hero .hero-row > .topic-example {
    flex-basis: 100%;
  }
}
/* the heading's last word turning into the others (topic-page.ts `turns`, his request of
   3/11/2026): every word in the same place, each in turn for 2.2 s, coming up and going up, on
   opacity and transform only. The steps are for seven words, Affitti's (a seventh of the turn
   each: in by 2.6%, out by 14.3%); the first starts shown. */
.site .turn {
  display: inline-grid;
}
.site .turn > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  animation: turn calc(var(--turns) * 2.2s) cubic-bezier(0.2, 0.8, 0.2, 1) infinite both;
  animation-delay: calc(var(--turn, 0) * 2.2s - 0.4s);
}
.site .turn [data-word]::before {
  content: attr(data-word);
}
@keyframes turn {
  0% {
    opacity: 0;
    transform: translateY(0.35em);
  }
  2.6%,
  12% {
    opacity: 1;
    transform: none;
  }
  14.3%,
  100% {
    opacity: 0;
    transform: translateY(-0.35em);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site .turn > span {
    animation: none;
  }
  .site .turn > [aria-hidden] {
    visibility: hidden;
  }
}
/* the card Affitti of the app's Home beside the heading (his request of 3/11/2026), with invented
   houses: always its dark look, it stands on the sky */
.site .topic-hero .hero-row > .rent-preview {
  flex: 0 1 460px;
  align-self: center;
  min-width: 0;
}
.site .rent-preview {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(180deg, rgba(64, 128, 222, 0.62), rgba(30, 84, 184, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 40px 80px -40px rgba(2, 12, 40, 0.75);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.site .rp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.site .rp-head > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site .rp-head b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.site .rp-head small,
.site .rp-label,
.site .rp-under {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.site .rp-label {
  margin-top: 16px;
}
.site .rp-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 2px;
}
.site .rp-figure > b {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -1.2px;
  color: #ffa8a3;
  white-space: nowrap;
}
.site .rp-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #ffa8a3;
  background: rgba(10, 18, 40, 0.75);
  border: 1px solid rgba(255, 168, 163, 0.35);
  white-space: nowrap;
}
.site .rp-bar {
  display: flex;
  gap: 4px;
  height: 8px;
  margin-top: 16px;
}
.site .rp-bar i {
  border-radius: 999px;
  background: linear-gradient(90deg, #4fa3ff, #9fd0ff);
}
.site .rp-bar i.late {
  background: linear-gradient(90deg, #ff9e99, #f28a86);
}
.site .rp-under {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 14px;
}
.site .rp-under b {
  color: #8fc6ff;
  font-weight: 800;
}
.site .rp-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 13px 30px;
  margin-top: 10px;
  border-radius: 18px;
  background: rgba(14, 22, 48, 0.88);
  border: 1px solid rgba(255, 168, 163, 0.28);
}
.site .rp-row::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  bottom: 13px;
  width: 4px;
  border-radius: 4px;
  background: #ff9e99;
}
.site .rp-row > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.site .rp-row b {
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site .rp-row small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.site .rp-amount {
  color: #ffa8a3;
}
.site .rp-chev {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.55);
}
.site .rp-row.link {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
}
.site .rp-row.link::before {
  background: rgba(255, 255, 255, 0.3);
}
.site .rp-row b.rp-link {
  font-size: 18px;
  color: #7cc0ff;
}
/* the «?» after the title, as the app's (it asks Quadra there; here it only shows) */
.site .rp-help {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 12px;
  border-radius: 50%;
  vertical-align: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  color: #8fc6ff;
  border: 1.5px solid rgba(143, 198, 255, 0.5);
}
.site .rp-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.site .rp-tiles > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  min-width: 0;
}
.site .rp-tiles small {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.site .rp-tiles b {
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 700px) and (max-width: 1080px) {
  .site .topic-hero .hero-row > .rent-preview {
    flex: 0 0 340px;
    padding: 20px;
  }
}
@media (max-width: 699px) {
  .site .topic-hero .hero-row > .rent-preview {
    flex-basis: 100%;
  }
}
/* on a phone the names go on two lines instead of being cut */
@media (max-width: 480px) {
  .site .rent-preview {
    padding: 20px 18px;
  }
  .site .rp-row {
    padding: 12px 14px 12px 28px;
    gap: 8px;
  }
  .site .rp-row > span:first-child > b,
  .site .rp-tiles b {
    white-space: normal;
  }
}
/* ----- the sections beside their pictures (topic-visuals.ts, 3/11/2026) ----- */
.site .topic-shown > .wrap {
  gap: 72px;
}
.site .topic-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.site .topic-part.flipped .topic-words {
  order: 2;
}
.site .topic-words {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site .topic-words h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.site .topic-words p,
.site .topic-words li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--s-para);
  text-wrap: pretty;
}
.site .topic-words strong {
  color: var(--s-text);
}
.site .topic-words ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site .topic-words li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-top: 1px solid var(--s-line);
}
.site .topic-words li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #d9a521);
}
@media (max-width: 900px) {
  .site .topic-part {
    grid-template-columns: minmax(0, 1fr);
  }
  .site .topic-part.flipped .topic-words {
    order: 0;
  }
}

/* the 3D of the home page's mockup: a resting turn, and the pointer's (tilt.ts) on top of it */
.site [data-tilt] {
  perspective: 1600px;
}
.site [data-tilt] > .shot,
.site .rent-preview[data-tilt] {
  transform: rotateX(calc(6deg + var(--tilt-x, 0deg)))
    rotateY(calc(var(--turn-y, -10deg) + var(--tilt-y, 0deg)));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.site .topic-part.flipped [data-tilt] {
  --turn-y: 10deg;
}
.site .rent-preview[data-tilt],
.site .accounts-preview[data-tilt],
.site .bonus-preview[data-tilt],
.site .topic-example[data-tilt] {
  transform: perspective(1600px) rotateX(calc(6deg + var(--tilt-x, 0deg)))
    rotateY(calc(-10deg + var(--tilt-y, 0deg)));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .site [data-tilt] > .shot,
  .site .rent-preview[data-tilt],
  .site .accounts-preview[data-tilt],
  .site .bonus-preview[data-tilt],
  .site .topic-example[data-tilt] {
    transform: none;
  }
}

/* a picture of the app: its dark look, whatever the page's theme */
.site .shot {
  margin: 0;
  padding: 24px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(180deg, #172647, #0d1730);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 50px 90px -45px rgba(6, 20, 50, 0.75);
  font-size: 14px;
}
.site .sh-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}
.site .sh-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #6cb4ff;
}
.site .sh-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.6px;
}
.site .sh-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.site .shot .late {
  color: #ffa8a3;
}
.site .shot .even {
  color: #8fc6ff;
}
.site .sh-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.site .sh-tiles > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.site .sh-tiles small {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.site .sh-tiles b {
  font-size: 24px;
  font-weight: 800;
}
.site .sh-tiles em {
  font-size: 15px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.7);
}
.site .sh-dashes {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.site .sh-dashes i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #6cb4ff;
}
.site .sh-dashes i.late {
  background: #ff9e99;
}
.site .sh-th,
.site .sh-tr {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}
.site .sh-th {
  padding: 0 14px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.site .sh-th span:not(:first-child),
.site .sh-tr > :not(:first-child) {
  text-align: right;
}
.site .sh-tr {
  padding: 12px 14px;
  margin-top: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
}
.site .sh-tr.late {
  background: rgba(255, 158, 153, 0.08);
  border-color: rgba(255, 158, 153, 0.3);
}
.site .sh-tr > b:first-child {
  color: #fff;
}
@media (max-width: 480px) {
  .site .sh-th,
  .site .sh-tr {
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  }
  .site .sh-th span:nth-child(2),
  .site .sh-tr > :nth-child(2) {
    display: none;
  }
}

/* the reminder: a mail window */
.site .shot-reminder {
  padding: 0;
  overflow: hidden;
  background: #f7f9fc;
  color: #1c2b45;
}
.site .sh-mail-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: #e8edf5;
  font-size: 13px;
  font-weight: 700;
  color: #5a6577;
}
.site .sh-mail-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}
.site .sh-mail-bar i:nth-child(2) {
  background: #febc2e;
}
.site .sh-mail-bar i:nth-child(3) {
  background: #28c840;
}
.site .sh-mail-bar span {
  margin-left: 8px;
}
.site .sh-mail-field {
  display: flex;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid #e3e8f0;
  font-size: 14px;
}
.site .sh-mail-field small {
  width: 56px;
  flex: none;
  color: #8a96aa;
}
.site .sh-mail-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
}
.site .sh-mail-table {
  border: 1px solid #dde4ee;
  border-radius: 10px;
  overflow: hidden;
}
.site .sh-mail-table > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid #e8edf4;
}
.site .sh-mail-table > div:first-child {
  border-top: 0;
}
.site .sh-mail-table .total {
  background: #f0f4fa;
}

/* the deadlines: the line of each contract */
.site .sh-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site .sh-line {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.site .sh-line > span:first-child {
  display: flex;
  flex-direction: column;
}
.site .sh-line small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.site .sh-track {
  position: relative;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.site .sh-track.bare {
  height: 16px;
  background: none;
}
.site .sh-years .sh-track > span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}
.site .sh-track .sh-today {
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
}
.site .sh-today {
  display: inline-block;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: #fff;
}
.site .sh-fill {
  position: absolute;
  left: 0;
  top: 13px;
  height: 4px;
  border-radius: 2px;
  background: rgba(108, 180, 255, 0.25);
}
.site .sh-window {
  display: inline-block;
  width: 20px;
  height: 7px;
  border-radius: 4px;
  background: #f2c14e;
}
.site .sh-track .sh-window {
  position: absolute;
  top: 11px;
  transform: translateX(-50%);
}
.site .sh-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #6cb4ff;
  background: #0d1730;
}
.site .sh-dot.ends {
  border-color: #f2c14e;
}
.site .sh-track .sh-dot {
  position: absolute;
  top: 3px;
  width: 24px;
  height: 24px;
  border-width: 4px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(108, 180, 255, 0.18);
}
.site .sh-track .sh-dot.ends {
  box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.2);
}
.site .shot .sh-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.site .sh-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site .sh-deadline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(242, 193, 78, 0.12), rgba(242, 193, 78, 0.05));
  border: 1px solid rgba(242, 193, 78, 0.3);
  border-left: 4px solid #6cb4ff;
}
.site .sh-count,
.site .sh-when {
  display: flex;
  flex-direction: column;
}
.site .sh-count b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #f2c14e;
}
.site .sh-count small,
.site .sh-when small,
.site .sh-who small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.site .sh-who em {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  color: #8fc6ff;
  border: 1px solid rgba(108, 180, 255, 0.4);
}
.site .sh-who .sh-rule {
  display: block;
  margin-top: 4px;
}
.site .sh-when {
  text-align: right;
}
.site .sh-when b {
  font-size: 18px;
  font-weight: 800;
  color: #f2c14e;
}
@media (max-width: 560px) {
  .site .sh-line {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .site .sh-deadline {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .site .sh-when {
    text-align: left;
  }
}

/* the bills: a row each, what each tenant pays */
.site .sh-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px 13px 28px;
  margin-top: 10px;
  border-radius: 16px;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.site .sh-row::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 13px;
  bottom: 13px;
  width: 4px;
  border-radius: 4px;
  background: #f2c14e;
}
.site .sh-row > span {
  display: flex;
  flex-direction: column;
}
.site .sh-row small {
  color: rgba(255, 255, 255, 0.6);
}
.site .sh-row > b {
  font-size: 16px;
}
.site .sh-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.site .sh-sum b {
  font-size: 24px;
  font-weight: 800;
  color: #f2c14e;
}

/* the yield: the blue figure and a bar each */
.site .sh-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(155deg, #2b8bf0 0%, #0b6fd6 50%, #0a4fb0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.site .sh-hero-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}
.site .sh-hero-head em {
  font-style: normal;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.site .sh-hero > b {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -1.4px;
}
.site .sh-hero-tiles {
  display: flex;
  gap: 10px;
}
.site .sh-hero-tiles > span {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
}
.site .sh-hero-tiles .out b {
  color: #ffd76a;
}
.site .sh-bar-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.site .sh-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.site .sh-net {
  color: #8fc6ff;
}
.site .sh-bar {
  display: flex;
  gap: 4px;
  height: 10px;
}
.site .sh-bar i,
.site .sh-swatch {
  border-radius: 999px;
  background: linear-gradient(90deg, #4fa3ff, #9fd0ff);
}
.site .sh-bar i.spent,
.site .sh-swatch.spent {
  background: #f2c14e;
}
.site .sh-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
}

/* the parts of a page with no picture: the words alone, as wide as a column of text */
.site .topic-part.plain {
  grid-template-columns: minmax(0, 760px);
}

/* the lists of the other parts: the row's bar in its colour, a badge, a progress bar */
.site .sh-row {
  flex-wrap: wrap;
}
.site .sh-row.accent-blue::before {
  background: #6cb4ff;
}
.site .sh-row.accent-late::before {
  background: #ff9e99;
}
.site .sh-row.accent-ok::before {
  background: #5fd4a0;
}
.site .sh-row.accent-grey::before {
  background: rgba(255, 255, 255, 0.3);
}
.site .sh-row > .sh-end {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 10px;
  margin-left: auto;
}
.site .sh-end b {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}
.site .shot .in {
  color: #8fc6ff;
}
.site .shot .out {
  color: rgba(255, 255, 255, 0.92);
}
.site .shot .gold {
  color: #f2c14e;
}
.site .sh-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  color: #8fc6ff;
  border: 1px solid rgba(108, 180, 255, 0.4);
}
.site .sh-badge.gold {
  color: #f2c14e;
  border-color: rgba(242, 193, 78, 0.45);
}
.site .sh-badge.ok {
  color: #5fd4a0;
  border-color: rgba(95, 212, 160, 0.45);
}
.site .sh-progress {
  flex-basis: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.site .sh-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d9a521, #ffe08a);
}
.site .sh-note {
  margin-bottom: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
  color: #ffe08a;
  background: rgba(242, 193, 78, 0.1);
  border: 1px solid rgba(242, 193, 78, 0.3);
}
.site .sh-hero > b.late {
  color: #ffd1ce;
}
.site .sh-hero + .sh-bar-row {
  margin-top: 18px;
}
.site .sh-bar i.rest,
.site .sh-swatch.rest {
  background: rgba(255, 255, 255, 0.14);
}

/* Quadra's bubbles */
.site .sh-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 18px;
}
.site .sh-quadra {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0d1730 0 30%, #f2c14e 31% 55%, #4fa3ff 56%);
}
.site .sh-bubble {
  max-width: 85%;
  margin: 8px 0 0;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 6px;
  font-size: 15px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.site .sh-bubble.me {
  margin-left: auto;
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(180deg, #2b8bf0, #0b6fd6);
  border-color: transparent;
}

/* «Quanto risparmi» and the same pace to the end of the year */
.site .sh-pace {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.site .sh-pace b {
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  color: #6cb4ff;
}
.site .sh-pace small {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}
.site .sh-forecast {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.site .sh-forecast > small {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}
.site .sh-forecast > b {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #8fc6ff;
}
.site .sh-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 6px 8px;
  border-top: 2px dashed rgba(108, 180, 255, 0.6);
}
.site .sh-steps i {
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border-radius: 50%;
  background: #0d1730;
  border: 3px solid #6cb4ff;
}
.site .sh-steps i:first-child {
  background: #fff;
  border-color: #fff;
}
.site .sh-steps i:last-child {
  width: 22px;
  height: 22px;
  margin-top: -12px;
}
.site .sh-step-labels {
  display: flex;
  justify-content: space-between;
}
.site .sh-step-labels > span {
  display: flex;
  flex-direction: column;
}
.site .sh-step-labels > span:nth-child(2) {
  align-items: center;
}
.site .sh-step-labels > span:last-child {
  align-items: flex-end;
}
.site .sh-step-labels b {
  font-size: 14px;
}
.site .sh-step-labels small {
  color: rgba(255, 255, 255, 0.6);
}

/* the short end of a page of a part */
.site .topic-closing .final {
  gap: 18px;
}
.site .topic-closing-line {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--s-para);
}
.site .topic-closing-line strong {
  color: var(--s-text);
}
.site .topic-others {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 6px 24px;
  margin-top: 48px;
}
.site .topic-others .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 6px;
}
.site .topic-others a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--s-line);
}
.site .topic-others b {
  color: var(--s-text);
  font-weight: 800;
}
.site .topic-others span {
  font-size: 14px;
  color: var(--s-muted);
}

/* the card «Liquidità sui conti» of the app's Home, «Movimenti ultime 24h» over its foot (Conti,
   3/11/2026), with invented banks */
.site .topic-hero .hero-row > .accounts-preview {
  flex: 0 1 480px;
  align-self: center;
  min-width: 0;
}
.site .ap-liquidity {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 70px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(160deg, #3f93ef 0%, #1d72dc 45%, #1559c0 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 40px 80px -40px rgba(2, 12, 40, 0.75);
}
.site .ap-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.site .ap-total {
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.05;
}
.site .ap-read {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}
.site .ap-bank {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 14px;
  font-size: 16px;
}
.site .ap-line {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.site .ap-line i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #fff;
}
.site .ap-bank.card small {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.site .ap-bank.card b:first-child {
  font-size: 15px;
}
.site .ap-box {
  margin-top: 4px;
  padding: 4px 16px;
  border-radius: 18px;
  background: rgba(8, 40, 110, 0.35);
}
.site .ap-box > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-size: 16px;
}
.site .ap-box > div + div {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.site .ap-box .gold {
  color: #ffd76a;
  font-weight: 800;
}
.site .ap-moves {
  position: relative;
  margin: -48px 18px 0 36px;
  padding: 18px 20px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(180deg, #1b2a4d, #111c38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -28px rgba(2, 12, 40, 0.8);
}
.site .ap-moves-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.site .ap-moves-head b {
  font-size: 18px;
  font-weight: 800;
}
.site .ap-moves-head small,
.site .ap-sums {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.site .ap-sums {
  display: block;
  margin: 6px 0 4px;
}
.site .ap-sums span {
  display: inline-block;
  width: 16px;
}
.site .ap-sums b.in,
.site .ap-move.in > b {
  color: #8fc6ff;
}
.site .ap-move {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.site .ap-move::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: #6cb4ff;
}
.site .ap-move.out::before {
  background: #f2c14e;
}
.site .ap-move > small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.site .ap-move > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.site .ap-move > span b {
  font-size: 15px;
}
.site .ap-move > span small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.site .ap-move > b {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}
@media (min-width: 700px) and (max-width: 1080px) {
  .site .topic-hero .hero-row > .accounts-preview {
    flex: 0 0 360px;
  }
}
@media (max-width: 699px) {
  .site .topic-hero .hero-row > .accounts-preview {
    flex-basis: 100%;
  }
}
@media (max-width: 480px) {
  .site .ap-liquidity {
    padding: 20px 18px 64px;
  }
  .site .ap-bank {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .site .ap-line {
    display: none;
  }
  .site .ap-bank.card small {
    display: none;
  }
  .site .ap-moves {
    margin: -44px 8px 0 16px;
  }
}

/* the card «Nel salvadanaio» and «La scorta per gli imprevisti» over its foot (Salvadanaio,
   3/11/2026): the accounts' pair of cards, with the savings' tiles and the reserve's light glass */
.site .sv-card {
  padding-bottom: 80px;
}
.site .sv-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.site .sv-head em {
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
}
.site .sv-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.site .sv-tiles > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  min-width: 0;
}
.site .sv-tiles small {
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}
.site .sv-tiles b {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}
.site .sv-bar {
  display: flex;
  gap: 4px;
  height: 8px;
  margin-top: 6px;
}
.site .sv-bar i {
  border-radius: 999px;
  background: #fff;
}
.site .sv-bar i.locked {
  background: linear-gradient(90deg, #f2c14e, #d9a521);
}
.site .sv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}
.site .sv-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  background: #fff;
}
.site .sv-legend i.locked {
  background: #f2c14e;
}
.site .sv-reserve {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -58px 18px 0 36px;
  padding: 18px 20px;
  border-radius: 22px;
  color: #0a1f3f;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 245, 252, 0.95));
  border: 1px solid #fff;
  box-shadow: 0 30px 60px -28px rgba(2, 12, 40, 0.6);
}
.site .sv-reserve > b {
  font-size: 18px;
  font-weight: 800;
}
.site .sv-line {
  font-size: 14px;
  font-weight: 800;
}
.site .sv-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(10, 31, 63, 0.08);
  overflow: hidden;
}
.site .sv-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b6fd6, #4fa3ff);
}
.site .sv-note {
  font-size: 13px;
  line-height: 1.5;
  color: #5a6577;
}
@media (max-width: 480px) {
  .site .sv-tiles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .site .sv-tiles > span:last-child {
    grid-column: 1 / -1;
  }
  .site .sv-reserve {
    margin: -50px 8px 0 16px;
  }
}

/* «Valore» and «Come va ognuno?» (Investimenti, 3/11/2026): the savings' pair of cards */
.site .sv-tiles.iv-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site .sv-tiles.iv-tiles > span:last-child {
  grid-column: auto;
}
.site .iv-each {
  gap: 10px;
}
.site .iv-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 12px 14px 12px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px -18px rgba(10, 30, 60, 0.5);
}
.site .iv-row::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: #0b6fd6;
}
.site .iv-row.gold::before {
  background: #f2c14e;
}
.site .iv-row > span:first-child {
  display: flex;
  flex-direction: column;
}
.site .iv-row b {
  font-size: 15px;
  font-weight: 800;
}
.site .iv-row small {
  font-size: 12px;
  color: #5a6577;
}
.site .iv-gain {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.site .iv-gain b {
  color: #0f9d63;
  font-size: 16px;
}
.site .iv-bar {
  grid-column: 1 / -1;
  display: flex;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
}
.site .iv-bar i {
  height: 100%;
  background: #b8c0cc;
}
.site .iv-bar i.grown {
  background: #0f9d63;
}
.site .iv-worth {
  grid-column: 1 / -1;
}

/* «Mutuo casa: quanto ti manca?» and «La prossima rata» (Mutui e prestiti, 3/11/2026) */
.site .mg-card .ap-title {
  font-size: 20px;
}
.site .mg-label {
  margin-top: 8px;
}
.site .mg-label b {
  font-size: 17px;
  font-weight: 800;
}
.site .sv-tiles > span.gold {
  background: rgba(8, 40, 110, 0.4);
}
.site .sv-tiles > span.gold b,
.site .sv-tiles > span.gold small {
  color: #ffd76a;
}
.site .mg-bar i.left,
.site .sv-legend i.left {
  background: rgba(255, 255, 255, 0.35);
}
.site .mg-next {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site .mg-next-title {
  font-size: 18px;
  font-weight: 800;
}
.site .mg-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.site .mg-date i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2c14e;
}
.site .mg-amount {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #ffe08a 0%, #f2c14e 55%, #d9a521 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.1em;
  align-self: flex-start;
}
.site .mg-next > small:last-child {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
/* «Come scende il debito»: the years' bars, this year lit */
.site .sh-columns.sh-debt {
  gap: 4px;
  height: 180px;
  padding-bottom: 0;
}
.site .sh-debt i {
  border-radius: 6px 6px 2px 2px;
}
.site .sh-debt-ends {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

/* «Netto 2026» and «Mese per mese» (Finanze personali, 3/11/2026) */
.site .fl-bar i {
  background: #fff;
}
.site .fl-bar i.spent {
  background: linear-gradient(90deg, #f2c14e, #d9a521);
}
.site .fl-line {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.site .fl-line b {
  color: #fff;
}
.site .fl-line b.gold {
  color: #ffd76a;
}
.site .fl-months {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site .fl-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.55);
}
.site .fl-caption em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0;
  padding: 2px 8px;
  border-radius: 999px;
  color: #0a1f3f;
  background: #fff;
}
.site .fl-net {
  display: block;
  width: 100%;
  height: 46px;
  overflow: visible;
}
.site .fl-net polyline {
  fill: none;
  stroke: #8fc6ff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.site .fl-bars {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
  height: 120px;
}
.site .fl-bars > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.site .fl-pair {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding: 4px 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.site .now .fl-pair {
  border: 1px dashed rgba(255, 255, 255, 0.4);
}
.site .fl-pair i {
  flex: 1;
  max-width: 10px;
  border-radius: 4px 4px 2px 2px;
  background: #8fc6ff;
}
.site .fl-pair i.out {
  background: #f2c14e;
}
.site .fl-bars small {
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
}
.site .fl-legend {
  margin-top: 4px;
}
.site .fl-legend i {
  background: #8fc6ff;
}
.site .fl-legend i.dashed {
  background: none;
  border: 1px dashed rgba(255, 255, 255, 0.55);
}

/* «Quanto ti torna dalle tasse?» (Detrazioni e 730, 3/11/2026): the app's dark card */
.site .topic-hero .hero-row > .bonus-preview {
  flex: 0 1 480px;
  align-self: center;
  min-width: 0;
}
.site .bonus-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(180deg, #1b2a4d, #111c38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 80px -40px rgba(2, 12, 40, 0.8);
}
.site .bn-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #6cb4ff;
}
.site .bn-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.site .bn-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.site .bn-tiles > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.site .bn-tiles small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.site .bn-tiles small i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6cb4ff;
}
.site .bn-tiles b {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.site .bn-tiles b.blue {
  color: #8fc6ff;
}
.site .bn-progress {
  margin-top: 4px;
  font-size: 14px;
}
.site .bn-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.site .bn-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4fa3ff, #9fd0ff);
}
.site .bn-next {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.site .bn-work {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 14px 16px 14px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.site .bn-work::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 4px;
  background: #5fd4a0;
}
.site .bn-work > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.site .bn-work b {
  font-size: 16px;
  font-weight: 800;
}
.site .bn-work small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.site .bn-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.site .bn-amount b {
  color: #8fc6ff;
}
.site .bn-steps {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
}
.site .bn-steps i {
  width: 12px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}
.site .bn-steps i.on {
  background: linear-gradient(180deg, #9fd0ff, #4fa3ff);
}
.site .bn-step {
  grid-column: 1 / -1;
}
@media (min-width: 700px) and (max-width: 1080px) {
  .site .topic-hero .hero-row > .bonus-preview {
    flex: 0 0 360px;
    padding: 20px;
  }
}
@media (max-width: 699px) {
  .site .topic-hero .hero-row > .bonus-preview {
    flex-basis: 100%;
    padding: 20px;
  }
}
/* the bonus year by year: the years recovered lit */
.site .sh-columns.sh-bonus {
  gap: 6px;
  height: 170px;
}
.site .sh-bonus i {
  background: rgba(143, 198, 255, 0.3);
}
.site .sh-bonus .done i {
  background: linear-gradient(180deg, #9fd0ff, #4fa3ff);
}
.site .sh-swatch.done {
  background: linear-gradient(90deg, #4fa3ff, #9fd0ff);
}
.site .shot-bonusYears .sh-legend .sh-swatch:not(.done) {
  background: rgba(143, 198, 255, 0.3);
}

/* «Liquidità a fine mese»: the months' bars, the last one lit */
.site .sh-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.site .sh-deltas b {
  color: #fff;
}
.site .sh-columns {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 200px;
  margin-top: 10px;
  padding-bottom: 26px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.site .sh-columns > span {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.site .sh-columns i {
  width: 100%;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, rgba(143, 198, 255, 0.85), rgba(79, 163, 255, 0.35));
}
.site .sh-columns .now i {
  background: linear-gradient(180deg, #fff, #dcecff);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.45);
}
.site .sh-columns small {
  position: absolute;
  bottom: -24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.site .shot-monthsLiquidity {
  background: linear-gradient(160deg, #3f93ef 0%, #1d72dc 45%, #1559c0 100%);
  border-color: rgba(255, 255, 255, 0.25);
}

/* the part's sections: the glass of «Cosa fa» */
.site .topic-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 18px;
}
.site .topic-card {
  border-radius: 28px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--s-glass);
  border: 1px solid var(--s-glass-border);
  box-shadow: var(--s-glass-shadow);
}
.site .topic-card h3 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.site .topic-card p,
.site .topic-card li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--s-para);
  text-wrap: pretty;
}
.site .topic-card strong {
  color: var(--s-text);
}
.site .topic-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.site .topic-card li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: 1px solid var(--s-line);
}
.site .topic-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #d9a521);
}
.site .topic-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  vertical-align: 4px;
  color: var(--s-gold-text);
  border: 1px solid color-mix(in srgb, var(--s-gold-text) 50%, transparent);
}
.site .topic-more {
  align-self: flex-start;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 15px;
}
/* «E anche»: links, not buttons that open a sheet */
.site a.feature {
  color: inherit;
}

/* ----- «Come funziona» and «Il nome Wauchi» in the home's style (3/11/2026) ----- */
@font-face {
  font-family: "Noto Serif JP Storia";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/noto-serif-jp-500-storia.woff2") format("woff2");
}
.site .jp-story {
  font-family: "Noto Serif JP Storia", "Noto Serif JP", serif;
  font-weight: 500;
}
.site .how-sections > .wrap,
.site .story-ideas > .wrap {
  max-width: 920px;
  gap: 18px;
}
.site .story-idea .eyebrow {
  color: var(--s-gold-text);
}
/* the number of a section of «Come funziona», beside its title (his note of 3/11/2026) */
.site .how-card h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.site .how-n {
  flex: none;
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--s-gold-text);
}
.site .how-card ul {
  margin-top: 4px;
}
.site .story-lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--s-para);
  text-wrap: pretty;
}
.site .story-lead strong {
  color: var(--s-text);
}
.site .story-idea {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 30px;
  border-radius: 28px;
  background: var(--s-glass);
  border: 1px solid var(--s-glass-border);
  box-shadow: var(--s-glass-shadow);
}
.site .idea-mark {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 24px;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-border);
}
.site .idea-kanji {
  font-size: 84px;
  line-height: 1;
  color: var(--s-text);
}
/* the animated 内: its SVG keeps room around the glyph for the roof, so the box is larger and
   pulled back, and the glyph has the size of 和 and 打 (the old page's measures, 23/10/2026) */
.site wauchi-kanji-casa.idea-kanji {
  --w: 132px;
  display: block;
  width: var(--w);
  --kc-ink: var(--s-text);
  margin: calc(var(--w) * -0.21) calc(var(--w) * -0.12) calc(var(--w) * -0.15)
    calc(var(--w) * -0.22);
}
.site .idea-words {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site .idea-words h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.site .idea-words p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--s-para);
  text-wrap: pretty;
}
.site .idea-words p strong {
  color: var(--s-text);
}
.site .idea-words blockquote {
  margin: 4px 0;
  padding: 18px 20px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--s-tile);
  border-left: 4px solid #f2c14e;
}
.site .idea-words blockquote strong {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 22px;
  font-weight: 800;
}
.site .idea-words blockquote .jp-story {
  display: inline-flex;
  align-items: center;
  font-size: 26px;
}
/* the 内 of «福は内», gold as the text: a box of 1.78em gives the glyph the size of the text */
.site wauchi-kanji-casa.kanji-inline {
  display: inline-block;
  --kc-ink: var(--s-gold-text);
  width: 1.78em;
  margin: -0.4em -0.42em -0.48em;
  vertical-align: 0;
}
.site .idea-words blockquote .jp-story {
  color: var(--s-gold-text);
}
.site .idea-words blockquote em {
  font-style: italic;
  color: var(--s-para);
}
.site .story-rhythm {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site .story-rhythm li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--s-line);
  font-size: 17px;
  line-height: 1.55;
  color: var(--s-para);
}
.site .story-rhythm .jp {
  font-size: 22px;
  color: var(--s-gold-text);
}
@media (max-width: 640px) {
  .site .story-idea {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }
  .site .idea-mark {
    width: 110px;
  }
  .site .idea-kanji {
    font-size: 64px;
  }
  .site wauchi-kanji-casa.idea-kanji {
    --w: 96px;
  }
}
.site .story-synthesis {
  padding-top: 64px;
}
.site .story-synthesis .final > .eyebrow {
  color: var(--s-gold-text);
}
.site .story-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--s-muted);
}
.site .story-card-section {
  padding-top: 0;
  padding-bottom: 60px;
}
.site .story-card {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 32px;
  background: var(--s-glass-strong);
  border: 1px solid var(--s-glass-border);
  box-shadow: var(--s-glass-shadow);
}
.site .story-card h2 {
  font-size: clamp(32px, 3.6vw, 48px);
}
.site .story-actions {
  justify-content: flex-start;
}
.site .story-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}
.site .story-contacts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-border);
}
.site .story-contacts small {
  font-size: 13px;
  font-weight: 700;
  color: var(--s-muted);
}
.site .story-contacts a {
  font-size: 20px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.site #riservatezza .privacy-title {
  max-width: 760px;
}

/* the company's data under the footer of the pages of words (page-shell.ts) */
.site .footer-company {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}

/* ----- the sheet of a card: it grows out of the card (site.ts) ----- */
.site .sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.site .sheet-layer[hidden] {
  display: none;
}
.site .sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 20, 50, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.45s;
}
.site .sheet-layer.open .sheet-backdrop {
  opacity: 1;
}
.site .sheet-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(940px, calc(100vw - 2 * var(--side)));
  max-height: calc(100dvh - 48px);
  overflow: hidden auto;
  overscroll-behavior: contain;
  border-radius: 32px;
  background: var(--s-sheet);
  border: 1px solid var(--s-glass-border);
  box-shadow:
    inset 0 1px 0 var(--s-glass-border),
    0 60px 120px -40px rgba(4, 20, 50, 0.7);
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.9, 0.15, 1),
    opacity 0.35s;
  transform-origin: center;
}
.site .sheet-layer.open .sheet-panel {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.site .sheet-inner {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.site .sheet-inner > * {
  position: relative;
}
.site .sheet-inner > .sheet-glow {
  position: absolute;
  top: -180px;
  right: -140px;
  width: 520px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--glow) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}
.site .sheet-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.site .sheet-buttons {
  display: flex;
  gap: 8px;
}
.site .sheet-buttons button {
  font: inherit;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--s-button-border);
  background: var(--s-button);
  color: var(--s-text);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
@media (hover: hover) {
  .site .sheet-buttons button:hover {
    background: var(--s-button-hover);
  }
}
.site .sheet-buttons .sheet-close {
  border: 0;
  background: #0a1f3f;
  color: #fff;
  font-weight: 700;
}
@media (hover: hover) {
  .site .sheet-buttons .sheet-close:hover {
    background: #0b2a66;
  }
}
.site .sheet-main {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}
.site .sheet-words {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site .sheet-words h3 {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.site .sheet-words p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--s-para);
  text-wrap: pretty;
}
.site .sheet-example {
  flex: 1 1 320px;
  min-width: 0;
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
  background: linear-gradient(155deg, #2b8bf0 0%, #0b6fd6 45%, #0a4fb0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 30px 60px -28px rgba(11, 111, 214, 0.7);
}
.site .sheet-example > small {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.75);
}
.site .sheet-example-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.site .sheet-example-row span {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.site .sheet-example-row b {
  font-weight: 800;
  white-space: nowrap;
}
.site .sheet-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.site .sheet-point {
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-border);
}
.site .sheet-point .jp {
  font-size: 22px;
  line-height: 1;
  color: #c9961a;
}
.site .sheet-point b {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.2px;
}
.site .sheet-point span:last-child {
  font-size: 14px;
  line-height: 1.55;
  color: var(--s-muted);
}
.site .sheet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--s-line);
}
.site .sheet-actions small {
  font-size: 13px;
  font-weight: 700;
  color: var(--s-muted);
}
/* the words come up after the panel, the three points one after the other; going to the next
   card (‹ › or a swipe) they come from its side, --swap-x (site.ts) */
.site .sheet-in,
.site .sheet-point {
  opacity: 0;
  transform: translate(var(--swap-x, 0px), 18px);
  transition:
    opacity 0.45s var(--d, 0.18s),
    transform 0.6s cubic-bezier(0.2, 0.9, 0.15, 1) var(--d, 0.18s);
}
.site .sheet-layer.open .sheet-in:not(.swap),
.site .sheet-layer.open .sheet-points:not(.swap) .sheet-point {
  opacity: 1;
  transform: none;
}

@media (max-width: 560px) {
  .site .sheet-panel {
    border-radius: 26px;
  }
  .site .sheet-inner {
    padding: 22px 20px;
    gap: 22px;
  }
  .site .sheet-main {
    gap: 22px;
  }
  .site .sheet-words h3 {
    font-size: 32px;
  }
  .site .sheet-words p {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page="site"] {
    scroll-behavior: auto;
  }
  .site *,
  .site *::before,
  .site *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .site .hero-stage {
    transform: scale(var(--fit, 1)) rotateX(8deg) rotateY(-14deg) !important;
  }
}

/* ----- the page of the downloads, wauchi.com/app (app-page.ts, 3/11/2026) ----- */
.site .app-lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--s-para);
  text-wrap: pretty;
  max-width: 760px;
}
.site .app-note {
  font-size: 14px;
  color: var(--s-muted);
}
/* a screen of the app in a phone's frame: dark edge, round corners, the shadow of the cards */
/* the corners follow the phone's width (his note of 3/11/2026: rounder ones cut the screen) */
.site .app-phone {
  padding: 2.4%;
  border-radius: 9% / 4.2%;
  background: linear-gradient(160deg, #1d2c48, #0a1426);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 40px 70px -34px rgba(10, 30, 60, 0.6);
}
.site .app-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7% / 3.2%;
}
.site .app-hero .hero-row > .app-hero-phone {
  flex: 0 1 330px;
  align-self: center;
  min-width: 0;
}
.site .app-hero-phone > .app-phone {
  transform: perspective(1600px) rotateX(calc(6deg + var(--tilt-x, 0deg)))
    rotateY(calc(-10deg + var(--tilt-y, 0deg)));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the group turns less than a single picture, so its sides stay on the page */
.site .app-devices[data-tilt] > .app-devices-stage {
  transform: perspective(2400px) rotateX(calc(4deg + var(--tilt-x, 0deg)))
    rotateY(calc(-5deg + var(--tilt-y, 0deg)));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 700px) and (max-width: 1080px) {
  .site .app-hero .hero-row > .app-hero-phone {
    flex: 0 0 260px;
  }
}
@media (max-width: 699px) {
  .site .app-hero .hero-row > .app-hero-phone {
    flex-basis: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}
.site .app-stores {
  padding-top: 0;
}
/* the screens side by side; on a phone a row to scroll with the finger */
.site .app-screens-section > .wrap,
.site .app-devices-section > .wrap {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.site .app-screens {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}
.site .app-screen {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.site .app-screen figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--s-para);
}
.site .app-screen figcaption b {
  font-size: 18px;
  font-weight: 800;
  color: var(--s-text);
}
@media (max-width: 1080px) {
  .site .app-screens {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--side));
    padding: 6px var(--side) 18px;
    scrollbar-width: none;
  }
  .site .app-screens::-webkit-scrollbar {
    display: none;
  }
  .site .app-screen {
    flex: 0 0 min(64vw, 240px);
    scroll-snap-align: center;
  }
}
/* the app on a computer: a window with its three dots */
.site .app-desktop {
  padding: 0 10px 10px;
  border-radius: 22px;
  background: linear-gradient(160deg, #1d2c48, #0a1426);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 50px 90px -40px rgba(10, 30, 60, 0.6);
}
.site .app-desktop-bar {
  display: flex;
  gap: 7px;
  padding: 12px 6px;
}
.site .app-desktop-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.site .app-desktop img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .site .app-hero-phone > .app-phone,
  .site .app-devices[data-tilt] > .app-devices-stage {
    transform: none;
  }
}
/* the computer, the tablet and the phone together: the tablet and the phone in front, at the
   computer's lower corners, everything in percentages so the group keeps its shape on a phone */
.site .app-devices-stage {
  position: relative;
  padding: 0 5% 14%;
}
.site .app-devices .app-desktop {
  width: 84%;
  margin: 0 auto;
}
.site .app-tablet {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: 25%;
  padding: 1.1%;
  border-radius: 7% / 5%;
  background: linear-gradient(160deg, #1d2c48, #0a1426);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 40px 70px -34px rgba(10, 30, 60, 0.6);
}
.site .app-tablet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6% / 4.2%;
}
.site .app-device-phone {
  position: absolute;
  left: 2%;
  bottom: 0;
  width: 15%;
}
.site .app-device-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.site .app-device-notes p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--s-para);
}
.site .app-device-notes b {
  font-size: 18px;
  font-weight: 800;
  color: var(--s-text);
}
@media (max-width: 699px) {
  .site .app-device-notes {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* ----- the offer of another language (language-offer.ts, 3/11/2026): a small glass strip at the
   bottom, the same page in the device's language, never a redirect ----- */
.language-offer {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 32px);
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(11, 42, 102, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -18px rgba(5, 22, 64, 0.7);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.language-offer a {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .language-offer a:hover {
    color: #f2c14e;
  }
}
.language-offer button {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* ----- the languages of the site in the footer (page-shell.ts `languagesRow`, 3/11/2026): a
   small pill, the page's language marked, the others leading to the same page in them ----- */
.site .footer-languages {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
}
.site .footer-languages svg {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.6;
}
.site .footer-languages a,
.site .footer-languages span {
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
@media (hover: hover) {
  .site .footer-languages a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
}
.site .footer-languages span[aria-current] {
  color: #041a3a;
  background: #f2c14e;
  font-weight: 700;
}

/* ----- the languages in the glass bar (page-shell.ts `languageMenu`, 3/11/2026): the globe and
   the page's language, opening the three ----- */
.site .nav-language {
  position: relative;
}
.site .nav-language summary {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.site .nav-language summary::-webkit-details-marker {
  display: none;
}
.site .nav-language[open] summary {
  background: rgba(255, 255, 255, 0.12);
}
@media (hover: hover) {
  .site .nav-language summary:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}
.site .nav-language svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.site .nav-language b {
  font-weight: 800;
  letter-spacing: 0.04em;
}
/* the menu as the app's own drop-down (wauchi-menu.ts, H1's pop-up menu, his note of 3/11/2026:
   «in stile proprio»): a light card with its hairline and soft shadow, a small title, the
   language in use in blue with its tick, opening with a short fall */
.site .nav-language-menu {
  --nav-language-edge: rgba(255, 255, 255, 0.95);
  --nav-language-shine: rgba(255, 255, 255, 0.5);
  --nav-language-glass: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94),
    rgba(255, 255, 255, 0.78) 40%,
    rgba(255, 255, 255, 0.86)
  );
  position: absolute;
  /* the body clear of the glass bar (its own padding, 10px, and a breath more), the tail's tip
     (9px, BUBBLE_TAIL) rising to the bar's edge */
  top: calc(100% + 11px);
  right: -4px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 15px 6px 6px;
  border-radius: 16px;
  /* the glass of the notice centre and Quadra (quadra-surface.ts, his note of 3/11/2026: «come il
     centro notifiche, più opaco»): the frost, the reflection at the top left, the light on the
     top edge; cut to a bubble by site.ts (LanguageMenuTail), its thin edge drawn on `.edge` */
  background:
    radial-gradient(ellipse 200px 140px at 130px 30px, var(--nav-language-shine), transparent)
    no-repeat,
    var(--nav-language-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  backdrop-filter: blur(40px) saturate(1.4);
  transform-origin: top right;
  animation: nav-language-open 0.16s ease-out;
}
/* the bar's own glass at night, as the site follows the device's theme */
@media (prefers-color-scheme: dark) {
  html[data-page="site"] .nav-language-menu {
    --nav-language-edge: rgba(255, 255, 255, 0.24);
    --nav-language-shine: rgba(255, 255, 255, 0.16);
    --nav-language-glass:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.08)
      ),
      rgba(6, 24, 58, 0.5);
  }
}
/* the thin edge of the bubble, as Quadra's (quadra-surface.ts): half the stroke falls outside
   the shape and is cut, 1px shows */
.site .nav-language-menu > svg.edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: var(--nav-language-edge);
  stroke-width: 2;
}
@keyframes nav-language-open {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site .nav-language-menu {
    animation: none;
  }
}
.site .nav-language-menu small {
  padding: 6px 12px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--s-muted);
}
.site .nav-language-menu a,
.site .nav-language-menu span {
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--s-text);
  font-size: 15px;
  font-weight: 500;
}
.site .nav-language-menu a:focus-visible {
  color: var(--s-text);
  background: rgba(127, 150, 190, 0.16);
  outline: none;
}
@media (hover: hover) {
  .site .nav-language-menu a:hover {
    color: var(--s-text);
    background: rgba(127, 150, 190, 0.16);
    outline: none;
  }
}
.site .nav-language-menu span[aria-current] {
  color: var(--s-blue);
  font-weight: 700;
}
.site .nav-language-menu span[aria-current]::after {
  content: "✓";
  margin-left: auto;
  padding-left: 12px;
}
.site .nav-language-menu svg.flag {
  box-shadow: 0 0 0 1px var(--s-button-border);
}
/* the button's caret, turned while the menu is open */
.site .nav-language summary i {
  width: 7px;
  height: 7px;
  margin: -3px 0 0 2px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.8;
  transition: transform 0.16s;
}
.site .nav-language[open] summary i {
  margin-top: 3px;
  transform: rotate(-135deg);
}
/* on a phone the flag alone and the bar a little tighter, so its buttons stay on one line inside
   it: with «IT» and its caret the bar needs some 445 px (his phone, 3/11/2026, at about 412) */
@media (max-width: 460px) {
  .site .nav-bar {
    gap: 6px;
  }
  .site .nav-brand {
    gap: 8px;
    font-size: 16px;
  }
  .site .nav-brand img {
    width: 30px;
    height: 30px;
  }
  .site .nav-language summary {
    height: 38px;
    padding: 0 9px;
  }
  .site .nav-language b,
  .site .nav-language summary i {
    display: none;
  }
  /* the flag alone sits in the middle of the bar: the menu hangs from the bar's right edge,
     inside the screen at any width, the tail still on the flag (site.ts measures it) */
  .site .nav-bar {
    position: relative;
  }
  .site .nav-language {
    position: static;
  }
  .site .nav-language-menu {
    top: calc(100% + 1px);
    right: 0;
  }
  .site .nav-bar .btn-ghost {
    padding: 8px 10px;
    font-size: 14px;
  }
  .site .nav-bar .btn-gold.small {
    padding: 8px 10px;
    font-size: 13px;
  }
}
/* on the narrowest phones (320 px) the brand's mark alone, its name said to the screen readers */
@media (max-width: 360px) {
  .site .nav-brand {
    gap: 0;
    font-size: 0;
  }
}

/* the flags of the languages (page-shell.ts `FLAGS`, 3/11/2026), in the bar, its menu and the
   footer: 3:2, the corners rounded, a hairline so the white of Italy shows on light and dark */
.site svg.flag {
  flex: none;
  width: 21px;
  height: 14px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  overflow: hidden;
  fill: initial;
  stroke: initial;
  stroke-width: initial;
}
.site .nav-language summary svg.flag {
  width: 22px;
  height: 15px;
}
.site .nav-language-menu a,
.site .nav-language-menu span,
.site .footer-languages a,
.site .footer-languages span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.site .footer-languages {
  padding: 4px;
}