/* Back to the House — backtothehouse.com
   Static pages. No external requests, no scripts: what moves on the home
   pages is CSS only, and every page is complete and still without it (see
   "Motion", at the end). Design: direction C, «Casa viva» (block 80).
   Typeface: Public Sans (400, 500, 600, 700), self-hosted below. */

/* Public Sans, self-hosted in assets/fonts/ with its licence (OFL.txt, SIL
   Open Font License 1.1), the same file the app uses. It is a variable font
   (wght 100–900): one download draws every weight of the site, 400 to 700.
   The latin subset covers English and Italian; tests/sito.test.mjs checks
   that every character on the pages is in it. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/public-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;
}

:root {
  --ink: #17212c;         /* text; 15.0:1 on paper */
  --slate: #22415f;       /* brand, the dark sections; 9.7:1 on paper */
  --slate-deep: #1a3249;  /* hover on filled buttons */
  --grey: #5b6976;        /* secondary text; 5.2:1 on paper, 4.8:1 on sand */
  --paper: #f7f5f3;
  --sand: #f0edea;        /* the app's --muted surface */
  --white: #ffffff;
  --mist: #dee3e8;        /* the other language, on slate; 8.2:1 on slate */
  --border: #768593;      /* the light button's outline; 3.2:1 on sand */
  --rule: #d7dadd;        /* hairlines, decorative only */
  /* The people: four of the app's person colours (property-app,
     src/lib/personColor.js). Marco indigo, Chiara terracotta, Luca teal,
     Giulia plum. As text they need 4.5:1. */
  --terracotta: #a94a2d;  /* 5.2:1 on paper, 4.9:1 on sand */
  --teal: #226977;        /* 5.8:1 on paper, 5.4:1 on sand */
  --indigo: #454ca1;      /* 6.9:1 on paper, 6.4:1 on sand */
  --plum: #943866;        /* 6.4:1 on paper, 6.0:1 on sand */
  /* The app's pills and states (property-app, components/maintenance/badges.js). */
  --urgent: #991b1b;      /* 6.8:1 on urgent-bg */
  --urgent-bg: #fee2e2;
  --good: #166534;        /* 6.5:1 on good-bg */
  --good-bg: #dcfce7;
  --in-progress: #6366f1;
  --planned: #f59e0b;
  --focus: var(--slate);
  --wrap: 1040px;
  --gutter: 20px;
  --shadow-piece: 0 2px 3px rgba(23, 33, 43, 0.06), 0 12px 15px rgba(23, 33, 43, 0.12);
  --shadow-card: 0 10px 26px rgba(23, 33, 43, 0.1);
  --shadow-bubble: 0 14px 32px rgba(8, 15, 26, 0.28);
  --shadow-phone: 0 4px 12px rgba(8, 15, 26, 0.12), 0 30px 60px rgba(8, 15, 26, 0.3);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Skip link */
.skip {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--slate);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The mark, drawn in line where it moves: one stroke, in currentColor. */
.mark { display: block; flex: none; overflow: visible; }
.mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 112;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Language switch (top bar and footer) */
.lang ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.9375rem;
  color: var(--grey);
  text-decoration: none;
}
.lang a:hover { color: var(--ink); text-decoration: underline; }
.lang a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Inner pages: the mark and the name, side by side, lead back to the home
   page. Under 560px they are a little smaller, and the language links a
   little closer, so that the bar stays on one line from 360px; narrower
   than that, the languages go to a second line. On the 404 page the mark
   and the name are alone in the bar, and stay on the left. */
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  padding-top: 8px;
}
.topbar .lang { margin-left: auto; }
.topbar__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.topbar__home:hover { text-decoration: underline; }
.topbar__home img { width: 28px; }
.topbar__home ~ .lang a { padding: 0 8px; }

/* The home pages: the bar lies on the first screen, over the slate scene on
   the phone; on the computer the name is on the sand and the languages on
   the slate. IT and EN are short: their links say «Italiano» and «English». */
.topbar--home {
  --focus: var(--paper);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 12px 10px 20px;
  color: var(--paper);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 600;
}
.topbar__brand .mark { width: 28.8px; height: 24px; }
.topbar--home .topbar__name { display: none; }
.lang--short a { font-size: 0.875rem; color: var(--mist); }
.lang--short a:hover { color: var(--paper); }
.lang--short a[aria-current="page"] { color: var(--paper); }

/* Buttons */
.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 49px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.btn--primary { background: var(--slate); color: var(--white); }
.btn--primary:hover { background: var(--slate-deep); }
.btn--secondary { border-color: var(--border); color: var(--ink); }
.btn--secondary:hover { background: var(--white); }

/* ---------------------------------------------------------------------------
   The home pages, on the phone first. */
.home main { overflow-x: clip; } /* the pieces that stick out of a scene never scroll the page sideways */

/* The scenes: a stage with the proportions of the design, which grows with
   the width. Everything in it is measured on the stage (cqw), so the phone
   and the pieces keep their places at every width. */
.stage {
  position: relative;
  container-type: inline-size;
  margin: 0 auto;
}
.phone {
  position: absolute;
  aspect-ratio: 250 / 515;
  border-radius: var(--phone-radius);
  background: var(--ink);
  box-shadow: var(--shadow-phone);
}
.phone::after { /* the island */
  content: "";
  position: absolute;
  top: var(--island-y);
  left: 50%;
  width: var(--island-w);
  height: var(--island-h);
  margin-left: calc(var(--island-w) / -2);
  border-radius: 999px;
  background: var(--ink);
}
.phone__screen {
  position: absolute;
  top: var(--bezel);
  left: var(--bezel);
  width: calc(100% - 2 * var(--bezel));
  height: calc(100% - 2 * var(--bezel));
  border-radius: var(--screen-radius);
  background: var(--paper);
  object-fit: cover;
  object-position: top;
}
.stage--hero {
  width: min(100%, 480px);
  aspect-ratio: 375 / 560;
  --bezel: 2.4cqw;
  --phone-radius: 11.467cqw;
  --screen-radius: 9.067cqw;
  --island-w: 20cqw;
  --island-h: 6.133cqw;
  --island-y: 4cqw;
}
.stage--hero .phone { left: 16.53%; top: 16.43%; width: 66.67%; }
.stage--feature {
  width: min(100%, 420px);
  aspect-ratio: 335 / 520;
  --bezel: 2.388cqw;
  --phone-radius: 11.642cqw;
  --screen-radius: 9.254cqw;
  --island-w: 20.597cqw;
  --island-h: 6.269cqw;
  --island-y: 4.179cqw;
}
.stage--feature .phone { left: 15.52%; top: 6.54%; width: 68.66%; }

/* The pieces of the app around the phone: HTML, sharp and in the page's
   language. Their sizes are in em, on the stage: 16px at the design's width. */
.fragments { position: absolute; inset: 0; pointer-events: none; }
.stage--hero .fragments { font-size: 4.267cqw; }
.stage--feature .fragments { font-size: 4.776cqw; }
.fragment {
  position: absolute;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-piece);
}
.fragment--card {
  display: grid;
  justify-items: start;
  gap: 0.375em;
  padding: 0.875em 1.125em 0.875em 1em;
  border-radius: 1em;
  background: var(--white);
}
.fragment--bubble {
  display: grid;
  gap: 0.125em;
  padding: 0.875em 1em;
  border-radius: 1em 1em 1em 0.25em;
  background: var(--white);
  font-size: 0.9375em;
}
.fragment__who { font-size: 0.8667em; font-weight: 600; }
.fragments .fragment--wide { display: none; } /* only on the computer */
.fragment--bar {
  padding: 0.643em 1.143em 0.643em 1em;
  border-radius: 0.714em;
  color: var(--white);
  font-size: 0.875em;
  font-weight: 600;
}
.bar--marco { background: var(--indigo); }
.bar--chiara { background: var(--terracotta); }
.bar--giulia { background: var(--plum); }
.fragment--check {
  display: flex;
  align-items: center;
  gap: 0.333em;
  padding: 0.8em 1.2em 0.8em 0.933em;
  border-radius: 999px;
  background: var(--white);
  font-size: 0.9375em;
}
.checkbox { width: 1.467em; height: 1.467em; margin-right: 0.333em; flex: none; }
.checkbox rect { fill: var(--slate); }
.checkbox path,
.tick path {
  fill: none;
  stroke: var(--white);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fragment__label { font-size: 0.8125em; font-weight: 500; color: var(--grey); }
.fragment__title { font-weight: 600; }
.fragment__line { display: flex; align-items: center; gap: 0.467em; font-size: 0.9375em; }
.fragment__line--strong { font-size: 1em; font-weight: 600; }
.fragment__strong { font-weight: 600; }
.fragment__muted { color: var(--grey); }
.fragment__amount { display: flex; align-items: baseline; gap: 0.5em; }
.fragment__big { font-size: 1.375em; font-weight: 700; }
.fragment__amount .fragment__muted { font-size: 0.8125em; }
.fragment__phone { font-size: 0.9375em; font-weight: 600; color: var(--slate); }
.fragment__status { display: flex; align-items: center; gap: 0.625em; }
.fragment__icon { width: 0.8em; height: 0.8em; flex: none; color: var(--grey); }
.pill {
  display: inline-block;
  padding: 0.25em 0.667em;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
}
.pill--urgent { background: var(--urgent-bg); color: var(--urgent); }
.pill--good { background: var(--good-bg); color: var(--good); }
.state { display: inline-flex; align-items: center; gap: 0.462em; font-size: 0.8125em; font-weight: 500; }
.dot { display: inline-block; flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; }
.dot--marco { background: var(--indigo); }
.dot--chiara { background: var(--terracotta); }
.dot--luca { background: var(--teal); }
.dot--giulia { background: var(--plum); }
.dot--in-progress { background: var(--in-progress); }
.dot--planned { background: var(--planned); }
.person--marco { color: var(--indigo); }
.person--chiara { color: var(--terracotta); }
.person--luca { color: var(--teal); }
.person--giulia { color: var(--plum); }

/* Where each piece sits, from the design (x and y on the stage). The ones
   on the right are held by their right edge: a longer text grows inwards. */
.stage--hero .f1 { left: 2.67%; top: 13.21%; }
.stage--hero .f2 { right: 4.53%; top: 35%; }
.stage--hero .f3 { left: 1.6%; top: 53.57%; }
.stage--hero .f6 { left: 5.87%; top: 86.79%; }
.feature--stays .f1 { left: -1.79%; top: 28.85%; }
.feature--stays .f2 { right: 6.27%; top: 49.62%; }
.feature--stays .f3 { left: 0; top: 73.08%; }
.feature--expenses .f1 { right: -0.9%; top: 21.15%; }
.feature--expenses .f2 { left: -1.19%; top: 48.08%; }
.feature--expenses .f3 { right: -4.78%; top: 71.15%; }
.feature--maintenance .f1 { right: 10.15%; top: 21.54%; }
.feature--maintenance .f2 { left: -1.19%; top: 48.08%; }
.feature--maintenance .f3 { right: -0.6%; top: 72.69%; }
.feature--knowledge .f1 { right: 11.94%; top: 20.77%; }
.feature--knowledge .f2 { left: -1.19%; top: 50.38%; }
.feature--knowledge .f3 { right: 4.18%; top: 76.15%; }
.feature--report .f1 { left: -1.19%; top: 25%; }
.feature--report .f2 { right: 2.69%; top: 80.38%; }

/* 1 · The first screen: the scene on slate, then the text on sand. */
.hero {
  display: flex;
  flex-direction: column;
  background: var(--sand);
}
.hero__scene {
  order: -1;
  overflow: hidden;
  background: var(--slate);
}
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: calc(560px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 32px var(--gutter) 40px;
}
.hero h1 { font-size: 3.5rem; line-height: 1; letter-spacing: -2px; }
.hero__lead { font-size: 1.125rem; line-height: 1.556; }
.hero__note { font-size: 0.875rem; line-height: 1.43; color: var(--grey); }

/* 2 · The family chat, on slate */
.problem {
  --focus: var(--paper);
  padding: 64px 0;
  background: var(--slate);
  color: var(--paper);
}
.problem__inner {
  display: grid;
  grid-template-areas: "title" "intro" "chat" "close";
  gap: 18px;
  max-width: calc(560px + 2 * var(--gutter));
}
.problem__text { display: contents; }
.problem h2 { grid-area: title; font-size: 2.25rem; line-height: 1.111; letter-spacing: -1px; }
.problem__intro { grid-area: intro; font-size: 1.0625rem; line-height: 1.588; }
.problem__close { grid-area: close; display: grid; gap: 4px; padding-top: 8px; font-size: 1.375rem; line-height: 1.364; }
.problem__answer { font-weight: 700; }
.problem__close .mark { width: 33.6px; height: 28px; margin-top: 4px; }
.chat {
  grid-area: chat;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.msg {
  display: grid;
  gap: 3px;
  max-width: min(282px, calc(100% - 28px));
  padding: 11px 16px;
  border-radius: 6px 20px 20px 20px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-bubble);
  transform-origin: top left;
}
.msg:nth-child(even) { margin-left: 28px; }
.msg__who { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.msg__text { font-size: 1rem; line-height: 1.375; }
.msg__time { justify-self: end; font-size: 0.75rem; line-height: 1.2; color: var(--grey); }

/* 3 · The five features, on paper and sand in turn */
.feature { padding: 64px 0 24px; overflow: clip; background: var(--paper); } /* each scene keeps its shadows and pieces, as in the design */
.feature--expenses,
.feature--knowledge { background: var(--sand); }
.feature__inner {
  display: grid;
  gap: 14px;
  max-width: calc(560px + 2 * var(--gutter));
}
.feature__text { display: grid; gap: 14px; }
.feature__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}
/* The app's icons (Lucide, stroke 2 on 24). */
.feature__icon { width: 22px; height: 22px; flex: none; }
.eyebrow--teal { color: var(--teal); }
.eyebrow--terracotta { color: var(--terracotta); }
.eyebrow--indigo { color: var(--indigo); }
.eyebrow--plum { color: var(--plum); }
.feature h2 { font-size: 2.125rem; line-height: 1.118; letter-spacing: -1px; }
.feature__text p:last-child { font-size: 1.0625rem; line-height: 1.588; }
.feature__scene { width: 100%; }

/* 4 · One house, many different families, on slate: four made-up example
   houses on an illustrated map of western Europe (Figma 321:2882): one SVG for
   the two languages, cut differently on the phone and on the computer, with the
   names in HTML on top. Only CSS: one radio per house, with two labels, the pin
   and the list row; a fifth radio, «none», is itself the × of the card. At rest
   the section is complete and no card is open: the list says the four houses
   and their families. Each house has the colour of the person in its card: the
   place, the line, the pin, the card and the row. */
.who { --focus: var(--paper); padding: 64px 0; background: var(--slate); color: var(--paper); }
.who__inner {
  position: relative;
  display: grid;
  grid-template-areas: "titolo" "sotto" "mappa" "elenco" "nota";
  row-gap: 16px;
  max-width: calc(560px + 2 * var(--gutter));
}
.who h2 { grid-area: titolo; font-size: 2.25rem; line-height: 1.111; letter-spacing: -1px; }
.who__sotto { grid-area: sotto; font-size: 1.0625rem; line-height: 1.53; }
.who__mappa { grid-area: mappa; position: relative; }
.mappa { position: relative; overflow: hidden; aspect-ratio: 335 / 520; border-radius: 16px; }
.mappa__terra { position: absolute; left: -5.463%; top: -7.577%; width: 119.91%; max-width: none; }
.mappa__cartellino {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 9999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}
/* A house: on the place a dot, the pin where there is room, a line between them. */
.casa { display: contents; --pin: 35px; --lato: -1; }
.casa--cornovaglia { --colore: var(--terracotta); }
.casa--aosta { --colore: var(--plum); }
.casa--liguria { --colore: var(--teal); }
.casa--provenza { --colore: var(--indigo); }
.casa--cornovaglia { --lato: 1; }
.casa--cornovaglia { --lx: 20.892%; --ly: 28.674%; --px: 10.743%; --py: 36.367%; --l: 15.671%; --a: 130.36deg; }
.casa--aosta { --lx: 65.038%; --ly: 45.025%; --px: 65.038%; --py: 31.564%; --l: 20.896%; --a: -90deg; }
.casa--liguria { --lx: 70.67%; --ly: 49.913%; --px: 88.581%; --py: 52.798%; --l: 18.462%; --a: 14.04deg; }
.casa--provenza { --lx: 58.135%; --ly: 51.118%; --px: 41.419%; --py: 49.58%; --l: 16.886%; --a: -171.87deg; }
.linea {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: var(--l);
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--colore);
  transform-origin: 0 50%;
  rotate: var(--a);
}
.luogo {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--colore);
}
/* The pin: its 44px touch area is centred on it; the name beside it. */
.pin {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  cursor: pointer;
}
.pin__segno {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: var(--pin);
  height: var(--pin);
  margin: auto;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--colore);
  box-shadow: 0 4px 8px rgba(8, 15, 26, 0.28);
}
.pin__casa { width: 15px; height: 15px; color: var(--white); stroke-width: 2.2; pointer-events: none; }
.pin__nome {
  position: absolute;
  top: 50%;
  right: 46px;
  translate: 0 -50%;
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
.casa--cornovaglia .pin__nome { right: auto; left: 46px; }
/* The radios, the × and the cards: the four houses' radios are out of sight;
   the card opens under the map on the narrowest phones, inside it from 360px. */
.who__scelta { position: relative; z-index: 2; }
.who:has(.who__radio:checked) .who__scelta { margin-top: 12px; }
.who__radio,
.who__chiudi {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  appearance: none;
}
/* The ×: the radio «none» itself, 44px, drawn on the card's top right corner,
   outside the card. On the iPhone a tap on a <label> goes through Safari's
   «hover first» check before it clicks, and the × inside the card, a label
   with only an icon in it, did not close anything; a tap on a form control
   clicks at once. The icon on top lets the tap through to the radio. */
.who:has(.who__radio:checked) .who__chiudi {
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: 0;
  overflow: visible;
  clip-path: none;
  border: 1px solid var(--mist);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(8, 15, 26, 0.18);
  cursor: pointer;
}
.who__x { position: absolute; top: 20px; right: 20px; z-index: 3; display: none; width: 20px; height: 20px; color: var(--ink); pointer-events: none; }
.who:has(.who__radio:checked) .who__x { display: block; }
.scheda {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(8, 15, 26, 0.12), 0 18px 40px rgba(8, 15, 26, 0.3);
}
.scheda--cornovaglia { --colore: var(--terracotta); }
.scheda--aosta { --colore: var(--plum); }
.scheda--liguria { --colore: var(--teal); }
.scheda--provenza { --colore: var(--indigo); }
.scheda__testa { display: flex; align-items: flex-start; gap: 12px; padding-right: 40px; }
.scheda__foto { position: relative; flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: 10px; }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda__esempio {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.scheda__testo { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.scheda h3 { font-size: 1rem; line-height: 1.3125; letter-spacing: 0; }
.scheda__famiglia { display: flex; align-items: flex-start; gap: 6px; font-size: 0.875rem; font-weight: 600; line-height: 1.357; }
.scheda__famiglia::before,
.scheda__app::before { content: ""; flex: none; border-radius: 50%; background: var(--colore); }
.scheda__famiglia::before { width: 9px; height: 9px; margin-top: 5px; }
.scheda__riga { display: grid; gap: 3px; padding: 9px 12px; border: 1px solid var(--mist); border-radius: 10px; background: var(--paper); }
.scheda__come { font-size: 0.75rem; font-weight: 500; line-height: 1.2; color: var(--grey); }
.scheda__app { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; line-height: 1.2; }
.scheda__app::before { width: 8px; height: 8px; }
.scheda__chi { font-weight: 600; }
/* The list: the other way to choose a house, always there. */
.elenco { grid-area: elenco; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.riga {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.riga::before {
  content: "";
  grid-row: span 2;
  width: 14px;
  height: 14px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--colore);
}
.riga--cornovaglia { --colore: var(--terracotta); }
.riga--aosta { --colore: var(--plum); }
.riga--liguria { --colore: var(--teal); }
.riga--provenza { --colore: var(--indigo); }
.riga__nome { font-size: 0.9375rem; font-weight: 700; line-height: 1.333; }
.riga__famiglia { margin-top: 2px; font-size: 0.875rem; line-height: 1.357; color: var(--mist); }
.who__nota { grid-area: nota; font-size: 0.8125rem; line-height: 1.46; color: var(--mist); }
/* The chosen house: its card, its pin a bit bigger with a paper edge and its
   name on slate, its row with an edge. */
.who:has(#casa-cornovaglia:checked) .scheda--cornovaglia,
.who:has(#casa-aosta:checked) .scheda--aosta,
.who:has(#casa-liguria:checked) .scheda--liguria,
.who:has(#casa-provenza:checked) .scheda--provenza { display: flex; }
.who:has(#casa-cornovaglia:checked) .casa--cornovaglia .pin__segno,
.who:has(#casa-aosta:checked) .casa--aosta .pin__segno,
.who:has(#casa-liguria:checked) .casa--liguria .pin__segno,
.who:has(#casa-provenza:checked) .casa--provenza .pin__segno { scale: 1.2; border-width: 2.85px; border-color: var(--paper); }
.who:has(#casa-cornovaglia:checked) .casa--cornovaglia .pin__nome,
.who:has(#casa-aosta:checked) .casa--aosta .pin__nome,
.who:has(#casa-liguria:checked) .casa--liguria .pin__nome,
.who:has(#casa-provenza:checked) .casa--provenza .pin__nome { translate: calc(var(--lato) * 3.5px) -50%; background: var(--slate); color: var(--paper); font-weight: 700; box-shadow: 0 0 0 1px var(--paper); }
.who:has(#casa-cornovaglia:checked) .riga--cornovaglia,
.who:has(#casa-aosta:checked) .riga--aosta,
.who:has(#casa-liguria:checked) .riga--liguria,
.who:has(#casa-provenza:checked) .riga--provenza { border-color: var(--paper); }
/* The keyboard: the focused radio shows on its row (on the list, for «none»). */
.who:has(#casa-cornovaglia:focus-visible) .riga--cornovaglia,
.who:has(#casa-aosta:focus-visible) .riga--aosta,
.who:has(#casa-liguria:focus-visible) .riga--liguria,
.who:has(#casa-provenza:focus-visible) .riga--provenza,
.who:has(#casa-nessuna:focus-visible) .elenco { outline: 3px solid var(--focus); outline-offset: 3px; }

/* 5 · How it starts, on paper */
.start { padding: 64px 0; }
.start .wrap { max-width: calc(560px + 2 * var(--gutter)); }
.start h2 { font-size: 2.25rem; line-height: 1.111; letter-spacing: -1px; }
.steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.step {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.step__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}
.step__num--teal { background: var(--teal); }
.step__num--terracotta { background: var(--terracotta); }
.step__num--indigo { background: var(--indigo); }
.step__text { display: grid; gap: 4px; }
.step h3 { font-size: 1.125rem; line-height: 1.333; letter-spacing: 0; }
.step p { font-size: 1rem; line-height: 1.5; }

/* 6 · Trust, on sand */
.trust { padding: 64px 0; background: var(--sand); }
.trust__inner { display: grid; gap: 18px; max-width: calc(560px + 2 * var(--gutter)); }
.trust h2 { font-size: 2.25rem; line-height: 1.111; letter-spacing: -1px; }
.trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.trust__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.444;
}
.tick { width: 26px; height: 26px; flex: none; }
.tick circle { fill: var(--slate); }

/* 7 · Where it comes from, on paper */
.origin { padding: 64px 0; }
.origin__inner { display: grid; gap: 18px; max-width: calc(560px + 2 * var(--gutter)); }
.origin__photo {
  width: 100%;
  aspect-ratio: 335 / 280;
  object-fit: cover;
  object-position: 50% 74%;
  border-radius: 20px;
}
.origin__text { display: grid; gap: 18px; }
.origin .mark { width: 38.4px; height: 32px; color: var(--slate); }
.origin h2 { font-size: 2.25rem; line-height: 1.111; letter-spacing: -1px; }
.origin__text p { font-size: 1.125rem; line-height: 1.667; }

/* 8 · Questions, on sand: <details>, no script. The + becomes a − when the
   vertical bar turns flat over the other one. */
.faq { padding: 64px 0; background: var(--sand); }
.faq__inner { display: grid; gap: 12px; max-width: calc(560px + 2 * var(--gutter)); }
.faq h2 { font-size: 2.25rem; line-height: 1.111; letter-spacing: -1px; }
.faq__list { display: grid; gap: 12px; }
.faq__item {
  border-radius: 14px;
  background: var(--white);
}
.faq__item summary {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 16px 52px 16px 18px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.412;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--slate);
}
.faq__item summary::after { rotate: 90deg; }
.faq__item[open] summary::after { rotate: 0deg; }
.faq__item p { padding: 0 18px 16px; margin-top: -6px; font-size: 1rem; line-height: 1.5625; }
.faq__altre { margin-top: 8px; padding: 0 18px; font-size: 1rem; line-height: 1.5625; }

/* 9 · The closing: the arrival at the open door, under a paper veil */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
}
.cta__photo { position: absolute; inset: 0 0 -40px; z-index: -2; } /* 40px more, for the photo's slower scroll */
.cta__photo img { width: 100%; height: 100%; object-fit: cover; }
.cta::before { /* the veil */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(247, 245, 243, 0.94) 0%, rgba(247, 245, 243, 0.9) 42%, rgba(247, 245, 243, 0) 56%);
}
.cta__inner {
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: calc(560px + 2 * var(--gutter));
  padding-top: 56px;
  padding-bottom: 440px;
}
.cta .mark { width: 48px; height: 40px; color: var(--slate); }
.cta h2 { font-size: 2.5rem; line-height: 1.1; letter-spacing: -1px; }
.cta h2 .line { display: block; }
.cta p { font-size: 1.125rem; line-height: 1.556; }
.cta .actions { width: 100%; }
.cta .btn--secondary { background: var(--paper); }
.cta .btn--secondary:hover { background: var(--white); }

/* Footer */
.footer { padding: 32px 0 40px; font-size: 0.9375rem; }
.footer__inner { display: grid; gap: 14px; }
.footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
}
.footer__brand img { width: 26.4px; }
/* On the site's privacy notices the name leads back to the home page. */
.footer__brand a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
}
.footer__brand a:hover { text-decoration: underline; }
/* Guide · App terms · App privacy · Site privacy: one per line on the
   phone, side by side with a dot between from 560px. The current page is
   in 600. */
.footer__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.footer__links li { display: flex; align-items: center; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}
.footer__links a[aria-current="page"] { font-weight: 600; }
.footer .lang { margin-left: -10px; }

/* Inner pages: the site's privacy notice */
.doc { padding: 40px 0 96px; overflow-wrap: break-word; }
.doc .wrap { max-width: calc(640px + 2 * var(--gutter)); }
.doc h1 { font-size: 2rem; }
.doc h2 { margin: 48px 0 12px; font-size: 1.375rem; }
.doc p + p { margin-top: 16px; }
.doc__updated { margin-top: 12px; font-size: 0.9375rem; color: var(--grey); }

/* The guide for families (block 87): an index and short pages, in the
   column of the privacy notices. The app's labels are in 600; below each
   page, the previous and the next published page. */
.label { font-weight: 600; }
.guida__su { margin-bottom: 4px; font-size: 0.9375rem; }
.guida__su a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}
.guida__riga { margin-top: 12px; font-size: 1.125rem; line-height: 1.556; }
.guida__indice {
  display: grid;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0 0 0 1.5em;
}
.guida__indice li::marker { color: var(--grey); font-weight: 600; }
.guida__indice a { font-size: 1.1875rem; font-weight: 600; }
.guida__indice p { margin-top: 4px; color: var(--grey); }
.guida__pagine {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.guida__pagine a {
  display: grid;
  gap: 2px;
  min-height: 44px;
  text-decoration: none;
}
.guida__pagine a:hover .guida__titolo { text-decoration: underline; }
.guida__succ { margin-left: auto; text-align: right; }
.guida__verso { font-size: 0.875rem; color: var(--grey); }
.guida__titolo { font-weight: 600; }
/* In the guide's own footer, «Guide» is the current section. */
.footer__links a[aria-current="true"] { font-weight: 600; }

/* The 404 page: one page for every address that does not exist, English
   first, then Italian. The two titles (h1 and h2) have the same size. */
.notfound { padding: 40px 0 96px; }
.notfound__inner { display: grid; gap: 48px; }
.notfound h1,
.notfound h2 { font-size: 2rem; }
.notfound p { margin-top: 12px; }
.notfound .actions { margin-top: 28px; }
.notfound section + section { padding-top: 48px; border-top: 1px solid var(--rule); }

/* ≥ 360px: the map's card opens inside the map, at the bottom, over the sea. */
@media (min-width: 360px) {
  .who__scelta { position: absolute; left: 8px; right: 8px; bottom: 8px; }
  .who:has(.who__radio:checked) .who__scelta { margin-top: 0; }
  .scheda__foto { width: 92px; height: 92px; }
}

/* ≥ 560px: buttons side by side (inner pages); the footer links on one line */
@media (min-width: 560px) {
  .notfound .actions { flex-direction: row; flex-wrap: wrap; }
  .topbar__home { gap: 12px; font-size: inherit; }
  .topbar__home img { width: 34px; }
  .topbar__home ~ .lang a { padding: 0 10px; }
  .footer__links ul { flex-direction: row; flex-wrap: wrap; }
  .footer__links li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    margin: 0 14px;
    border-radius: 50%;
    background: var(--grey);
  }
}

/* ≥ 720px: tablet, inner pages */
@media (min-width: 720px) {
  :root { --gutter: 40px; }
  .notfound__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .notfound section:first-child { padding-right: 48px; }
  .notfound section + section { padding: 0 0 0 48px; border-top: 0; border-left: 1px solid var(--rule); }
}

/* ≥ 900px: the home pages on the computer, as in the design at 1280. Text
   and scenes side by side; titles grow with the width up to 1280. */
@media (min-width: 900px) {
  .topbar--home {
    align-items: flex-start;
    padding: 18px 48px 0 clamp(40px, 9.375vw, 120px);
  }
  .topbar__brand { min-height: 44px; color: var(--ink); }
  .topbar__brand .mark { color: var(--slate); }
  .topbar--home .topbar__name { display: inline; }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 700fr) minmax(0, 580fr);
  }
  .hero__scene { order: 0; }
  .hero__text {
    gap: 26px;
    max-width: none;
    margin: 0;
    padding: clamp(96px, 9.375vw, 120px) 48px 64px clamp(40px, 9.375vw, 120px);
  }
  .hero h1 { font-size: clamp(4rem, 7.8125vw, 6.25rem); line-height: 0.96; letter-spacing: -3px; }
  .hero__lead { font-size: 1.25rem; line-height: 1.55; max-width: 35em; }
  .hero .actions { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .hero__note { font-size: 0.9375rem; }
  .stage--hero {
    width: 100%;
    aspect-ratio: 580 / 860;
    --bezel: 2.069cqw;
    --phone-radius: 10cqw;
    --screen-radius: 7.931cqw;
    --island-w: 17.586cqw;
    --island-h: 5.345cqw;
    --island-y: 3.621cqw;
  }
  .stage--hero .phone { left: 20.69%; top: 13.95%; width: 58.62%; }
  .stage--hero .fragments { font-size: 3.362cqw; }
  .fragments .fragment--wide { display: grid; }
  .fragments .fragment--bar.fragment--wide { display: block; }
  .stage--hero .f1 { left: auto; right: 2.41%; top: 8.14%; }
  .stage--hero .f2 { left: 4.14%; right: auto; top: 26.74%; }
  .stage--hero .f3 { left: auto; right: 2.24%; top: 36.98%; }
  .stage--hero .f4 { left: 1.38%; top: 54.65%; }
  .stage--hero .f5 { right: 8.62%; top: 65.12%; }
  .stage--hero .f6 { left: 6.9%; top: 81.4%; }

  .problem { padding: clamp(96px, 10.9375vw, 140px) 0; }
  .problem__inner {
    grid-template-columns: minmax(0, 480fr) minmax(0, 464fr);
    grid-template-areas: "text chat";
    align-items: center;
    column-gap: clamp(48px, 7.5vw, 96px);
    max-width: calc(var(--wrap) + 2 * var(--gutter));
  }
  /* The text stays still while the bubbles arrive: layout, not motion, so
     it holds also for whoever reduces motion. */
  .problem__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    grid-area: text;
    position: sticky;
    top: 96px;
  }
  .problem h2 { font-size: clamp(2.75rem, 4.6875vw, 3.75rem); line-height: 1.033; letter-spacing: -2px; }
  .problem__intro { font-size: 1.125rem; line-height: 1.611; }
  .problem__close { padding-top: 12px; font-size: 1.625rem; line-height: 1.308; }
  .problem__close .mark { width: 43.2px; height: 36px; }
  .chat { gap: 16px; padding: 0; }
  .msg { max-width: 366px; padding: 12px 18px; border-radius: 6px 22px 22px 22px; }
  .msg:nth-child(even) { margin-left: 0; }
  .msg:nth-child(2) { margin-left: 64px; }
  .msg:nth-child(3) { margin-left: 16px; }
  .msg:nth-child(4) { margin-left: 80px; }
  .msg:nth-child(5) { margin-left: 32px; }
  .msg__who { font-size: 0.875rem; }
  .msg__text { font-size: 1.125rem; line-height: 1.389; }

  .feature { padding: clamp(64px, 7.8125vw, 100px) 0; }
  .feature__inner {
    grid-template-columns: minmax(0, 440fr) minmax(0, 600fr);
    align-items: center;
    column-gap: clamp(40px, 6.25vw, 80px);
    max-width: calc(1120px + 2 * var(--gutter));
  }
  .feature--expenses .feature__inner,
  .feature--knowledge .feature__inner { grid-template-columns: minmax(0, 600fr) minmax(0, 440fr); }
  .feature--expenses .feature__text,
  .feature--knowledge .feature__text { order: 2; }
  .feature__text { gap: 20px; }
  .feature__eyebrow { gap: 10px; font-size: 1.0625rem; }
  .feature__icon { width: 28px; height: 28px; }
  .feature h2 { font-size: clamp(2.75rem, 4.375vw, 3.5rem); line-height: 1.071; letter-spacing: -1.8px; }
  .feature__text p:last-child { font-size: 1.1875rem; line-height: 1.579; }
  .stage--feature {
    width: min(100%, 600px);
    aspect-ratio: 600 / 760;
    --bezel: 2cqw;
    --phone-radius: 9.333cqw;
    --screen-radius: 7.333cqw;
    --island-w: 16.5cqw;
    --island-h: 5cqw;
    --island-y: 3.333cqw;
  }
  .stage--feature .phone { left: 22.5%; top: 5.26%; width: 55%; }
  .stage--feature .fragments { font-size: 3.25cqw; }
  .feature--stays .f1 { left: -1.67%; top: 26.32%; }
  .feature--stays .f2 { right: 12.5%; top: 43.42%; }
  .feature--stays .f3 { left: 0; top: 61.84%; }
  .feature--expenses .f1 { right: 5.83%; top: 18.42%; }
  .feature--expenses .f2 { left: -1.67%; top: 39.47%; }
  .feature--expenses .f3 { right: 6.83%; top: 61.84%; }
  .feature--maintenance .f1 { right: 14.33%; top: 18.42%; }
  .feature--maintenance .f2 { left: -1.67%; top: 42.11%; }
  .feature--maintenance .f3 { right: 9.5%; top: 64.47%; }
  .feature--knowledge .f1 { right: 15.17%; top: 18.42%; }
  .feature--knowledge .f2 { left: -3.33%; top: 42.11%; }
  .feature--knowledge .f3 { right: 11.67%; top: 65.79%; }
  .feature--report .f1 { left: -3.33%; top: 23.68%; }
  .feature--report .f2 { right: 4.83%; top: 73.68%; }

  .who { padding: clamp(80px, 7.8125vw, 100px) 0; }
  .who h2 { font-size: clamp(2.75rem, 4.375vw, 3.5rem); line-height: 1.071; letter-spacing: -1.8px; }
  .who__sotto { font-size: 1.25rem; line-height: 1.5; }

  .start { padding: clamp(80px, 9.375vw, 120px) 0; }
  .start .wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
  .start h2 { font-size: clamp(2.75rem, 4.6875vw, 3.75rem); line-height: 1.033; letter-spacing: -2px; }
  .steps { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .step { flex-direction: column; padding: 28px 28px 32px; border-radius: 22px; box-shadow: 0 12px 30px rgba(23, 33, 43, 0.1); }
  .step__num { width: 52px; height: 52px; font-size: 1.375rem; }
  .step__text { gap: 14px; }
  .step h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.5px; }
  .step p { font-size: 1.125rem; line-height: 1.556; }

  .trust { padding: clamp(80px, 9.375vw, 120px) 0; }
  .trust__inner {
    grid-template-columns: minmax(0, 420fr) minmax(0, 540fr);
    align-items: start;
    column-gap: 80px;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
  }
  .trust h2 { font-size: clamp(2.75rem, 4.6875vw, 3.75rem); line-height: 1.033; letter-spacing: -2px; }
  .trust__list { gap: 22px; padding-top: 8px; }
  .trust__list li { align-items: center; gap: 16px; font-size: 1.375rem; line-height: 1.364; }
  .tick { width: 30px; height: 30px; }

  .origin { padding: clamp(96px, 10.9375vw, 140px) 0; }
  .origin__inner {
    grid-template-columns: minmax(0, 460fr) minmax(0, 492fr);
    align-items: center;
    column-gap: clamp(48px, 6.875vw, 88px);
    max-width: calc(var(--wrap) + 2 * var(--gutter));
  }
  .origin__photo { aspect-ratio: 4 / 5; object-position: 50% 50%; border-radius: 24px; }
  .origin__text { gap: 24px; }
  .origin .mark { width: 48px; height: 40px; }
  .origin h2 { font-size: clamp(2.75rem, 4.6875vw, 3.75rem); line-height: 1.033; letter-spacing: -2px; }
  .origin__text p { font-size: 1.3125rem; line-height: 1.619; }

  .faq { padding: clamp(80px, 9.375vw, 120px) 0; }
  .faq__inner {
    grid-template-columns: minmax(0, 360fr) minmax(0, 600fr);
    align-items: start;
    column-gap: 80px;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
  }
  .faq h2 { font-size: clamp(2.75rem, 4.6875vw, 3.75rem); line-height: 1.033; letter-spacing: -2px; }
  .faq__item { border-radius: 16px; }
  .faq__item summary { padding: 20px 60px 20px 24px; font-size: 1.25rem; line-height: 1.4; }
  .faq__item summary::before,
  .faq__item summary::after { right: 26px; width: 16px; }
  .faq__item p { padding: 0 24px 20px; margin-top: -8px; font-size: 1.125rem; line-height: 1.556; }
  .faq__altre { padding: 0 24px; font-size: 1.125rem; line-height: 1.556; }

  .cta::before { background: linear-gradient(to right, rgba(247, 245, 243, 0.9) 0%, rgba(247, 245, 243, 0.82) 36%, rgba(247, 245, 243, 0) 56%); }
  .cta__inner {
    gap: 24px;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    padding-top: clamp(112px, 12.5vw, 160px);
    padding-bottom: clamp(112px, 12.5vw, 160px);
  }
  .cta .mark { width: 67.2px; height: 56px; }
  .cta h2 { font-size: clamp(3.5rem, 5.625vw, 4.5rem); line-height: 1.028; letter-spacing: -2.5px; }
  .cta p { max-width: 460px; font-size: 1.3125rem; line-height: 1.524; }
  .cta .actions { width: auto; flex-direction: row; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

  .footer { padding: 36px 0 44px; }
  .footer__inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 48px;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
  }
  .footer__links ul { justify-content: center; }
  .footer .lang { margin-left: 0; }
}

/* ≥ 1024px: desktop, inner pages */
@media (min-width: 1024px) {
  :root { --gutter: 48px; }
  body { font-size: 1.125rem; }
  .topbar .wrap { padding-top: 16px; }
  .doc { padding: 64px 0 128px; }
  .doc h1 { font-size: 2.75rem; }
  .doc h2 { margin-top: 56px; font-size: 1.625rem; }
  .notfound { padding: 64px 0 128px; }
  .notfound h1,
  .notfound h2 { font-size: 2.75rem; }
}

/* ≥ 1180px: the map section in two columns, as in the design at 1280: the
   text and the list on the left, lined up with the other sections, the map on
   the right, 40px wider than the column; the card opens beside its pin, with a
   point towards it, on the side where there is room. Narrower, it stays as on
   the phone. */
@media (min-width: 1180px) {
  .who__inner {
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    grid-template-columns: 400px 616px;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: ". mappa" "titolo mappa" "sotto mappa" "elenco mappa" "nota mappa" ". mappa";
    column-gap: 64px;
    row-gap: 22px;
  }
  .who__mappa { width: 616px; }
  .mappa { aspect-ratio: 616 / 640; }
  .mappa__terra { left: -3.328%; top: -9.438%; width: 110.016%; }
  .mappa__cartellino { font-size: 0.875rem; }
  .casa { --pin: 42px; --lato: 1; }
  .casa--cornovaglia { --lx: 20.836%; --ly: 40.251%; --px: 11.524%; --py: 50.796%; --l: 14.378%; --a: 130.36deg; }
  .casa--aosta { --lx: 61.341%; --ly: 62.665%; --px: 61.341%; --py: 44.212%; --l: 19.172%; --a: -90deg; }
  .casa--liguria { --lx: 66.509%; --ly: 69.366%; --px: 74.725%; --py: 85.183%; --l: 18.373%; --a: 63.43deg; }
  .casa--provenza { --lx: 55.007%; --ly: 71.017%; --px: 41.313%; --py: 76.817%; --l: 14.961%; --a: 156.25deg; }
  .pin__segno { border-width: 2.5px; }
  .pin__casa { width: 18px; height: 18px; }
  .pin__nome,
  .casa--cornovaglia .pin__nome { right: auto; left: 50px; font-size: 0.875rem; }
  .elenco { gap: 6px; }
  .riga__nome { font-size: 1rem; line-height: 1.375; }
  .riga__famiglia { font-size: 0.9375rem; line-height: 1.4; }
  .who__nota { font-size: 0.875rem; line-height: 1.43; }
  .who__scelta { left: var(--sx); right: auto; top: var(--sy); bottom: auto; width: 320px; }
  .who:has(#casa-cornovaglia:checked) { --sx: 119px; --sy: 148px; --punta: 165px; }
  .who:has(#casa-aosta:checked) { --sx: 9px; --sy: 105px; --punta: 166px; --da: 8px; }
  .who:has(#casa-liguria:checked) { --sx: 92px; --sy: 350px; --punta: 183px; --da: 8px; }
  .who:has(#casa-provenza:checked) { --sx: 303px; --sy: 308px; --punta: 172px; }
  .scheda { gap: 0; padding: 0; }
  .scheda__testa { display: block; padding: 0; }
  .scheda__foto { width: 100%; height: 160px; border-radius: 16px 16px 0 0; }
  .scheda__esempio { left: 10px; top: 12px; padding: 5px 10px; font-size: 0.8125rem; }
  .scheda__testo { gap: 10px; padding: 14px 18px 0; }
  .scheda h3 { font-size: 1.125rem; line-height: 1.333; }
  .scheda__famiglia { gap: 8px; font-size: 0.9375rem; line-height: 1.4; }
  .scheda__famiglia::before { width: 10px; height: 10px; margin-top: 5.5px; }
  .scheda__riga { margin: 10px 18px 18px; }
  .scheda::before {
    content: "";
    position: absolute;
    top: var(--punta);
    left: -13px;
    width: 14px;
    height: 24px;
    background: var(--white);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }
  .scheda--aosta::before,
  .scheda--liguria::before { left: auto; right: -13px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  /* Where the card covers the chosen pin's name, the card's title says it. */
  .who:has(#casa-cornovaglia:checked) .casa--cornovaglia .pin__nome,
  .who:has(#casa-provenza:checked) .casa--provenza .pin__nome { display: none; }
}

/* ---------------------------------------------------------------------------
   Motion. Only here, only for screens, and only for whoever has not asked to
   reduce it: outside this block every element already stands where the
   design puts it, so the page is complete and still without motion, in
   print, and where a browser does not know a rule. What follows the scroll
   is in a second block, only for browsers that know animation-timeline;
   where they do not (Safari before 26, for one), the page is still. The
   pieces and the phones move with translate, scale and opacity only:
   individual properties, so the entrance and the parallax never fight. */
@media screen and (prefers-reduced-motion: no-preference) {
  /* The first screen, on load: the mark draws itself, the phone rises, the
     pieces arrive after it, one after the other. */
  .topbar__brand .mark path { stroke-dasharray: 1; animation: draw 900ms ease-out both; }
  .stage--hero .phone { animation: rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; --rise: 64px; }
  .stage--hero .fragment { animation: arrive 450ms ease-out both; animation-delay: calc(900ms + var(--k) * 120ms); }
  .f1 { --k: 0; }
  .f2 { --k: 1; }
  .f3 { --k: 2; }
  .f4 { --k: 3; }
  .f5 { --k: 4; }
  .f6 { --k: 5; }

  /* The questions: the + turns into a −; where the browser knows how, the
     answer opens softly (::details-content), elsewhere at once. */
  :root { interpolate-size: allow-keywords; }
  .faq__item summary::after { transition: rotate 200ms ease; }
  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 250ms ease, content-visibility 250ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }

  /* The map: the chosen pin grows, its row takes its edge; the card, its ×
     and the icon rise in (on the computer they slide in beside the pin). */
  .pin__segno { transition: scale 150ms ease-out, border-color 150ms ease-out; }
  .riga { transition: border-color 150ms ease-out; }
  .scheda,
  .who__x,
  .who:has(.who__radio:checked) .who__chiudi { animation: scheda-su 200ms ease-out both; }
  @media (min-width: 1180px) {
    .scheda,
    .who__x,
    .who:has(.who__radio:checked) .who__chiudi { animation-name: scheda-accanto; }
  }

  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes rise { from { transform: translateY(var(--rise)); } to { transform: none; } }
  @keyframes arrive { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
  @keyframes enter { from { opacity: 0; translate: 0 var(--up, 16px); } to { opacity: 1; translate: 0 0; } }
  @keyframes out-of-screen { from { opacity: 0; scale: 0.6; translate: var(--dx, 0) var(--dy, 0); } to { opacity: 1; scale: 1; translate: 0 0; } }
  @keyframes bubble-in { from { opacity: 0; scale: 0.96; translate: 0 24px; } to { opacity: 1; scale: 1; translate: 0 0; } }
  @keyframes scheda-su { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @keyframes scheda-accanto { from { opacity: 0; translate: var(--da, -8px) 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes drift { from { translate: 0 0; } to { translate: 0 var(--drift); } }

  @media (min-width: 900px) {
    .stage--hero .phone { --rise: 80px; animation-duration: 1s; animation-delay: 250ms; }
    .stage--hero .fragment { animation-delay: calc(1250ms + var(--k) * 110ms); }
    /* The title comes out from below; the rest follows, 80 ms apart. */
    .hero h1 { animation: uncover 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .hero__lead,
    .hero .actions,
    .hero__note { animation: fade-in 500ms ease-out both; }
    .hero__lead { animation-delay: 300ms; }
    .hero .actions { animation-delay: 380ms; }
    .hero__note { animation-delay: 460ms; }
    @keyframes uncover { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  }

  @supports (animation-timeline: view()) {
    /* The parallax of the first screen, on the first 500 px of scroll (800
       on the computer): the nearer a piece, the more it moves. */
    .stage--hero .phone,
    .stage--hero .fragment {
      animation-name: rise, drift;
      animation-duration: 900ms, auto;
      animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1), linear;
      animation-fill-mode: both, both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 500px;
      --drift: -20px;
    }
    .stage--hero .phone { animation-delay: 0s, 0s; }
    .stage--hero .fragment {
      animation-name: arrive, drift;
      animation-duration: 450ms, auto;
      animation-timing-function: ease-out, linear;
      animation-delay: calc(900ms + var(--k) * 120ms), 0s;
    }
    .stage--hero .f1 { --drift: -60px; }
    .stage--hero .f2 { --drift: -100px; }
    .stage--hero .f3 { --drift: -70px; }
    .stage--hero .f4 { --drift: -120px; }
    .stage--hero .f5 { --drift: -90px; }
    .stage--hero .f6 { --drift: -40px; }

    /* On the phone the text is under the scene: it comes in with the scroll. */
    .hero__text > * { animation: enter linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }

    /* The chat: each bubble arrives when it comes on screen, from its
       narrow corner; then the two closing lines, then the mark. */
    .msg { animation: bubble-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .problem__close > p { animation: enter linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .problem__close > .problem__answer { animation-range: entry 20% entry 60%; }
    .problem__close .mark path,
    .origin .mark path,
    .cta .mark path { stroke-dasharray: 1; animation: draw linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }

    /* The features: the words, then the phone, then the pieces coming out of
       the screen towards their places. */
    .feature__text > * { animation: enter linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .feature__text > :nth-child(2) { animation-range: entry 5% entry 55%; }
    .feature__text > :nth-child(3) { animation-range: entry 10% entry 60%; }
    .feature__scene .phone { --up: 48px; animation: enter linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    .feature__scene .fragment { animation: out-of-screen linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .feature__scene .f2 { animation-range: entry 35% cover 50%; }
    .feature__scene .f3 { animation-range: entry 40% cover 55%; }
    .feature__scene .fragment:is(.feature--stays .f1, .feature--stays .f3, .feature--expenses .f2, .feature--maintenance .f2, .feature--knowledge .f2, .feature--report .f1) { --dx: 3em; }
    .feature__scene .fragment:is(.feature--stays .f2, .feature--expenses .f1, .feature--expenses .f3, .feature--maintenance .f1, .feature--maintenance .f3, .feature--knowledge .f1, .feature--knowledge .f3, .feature--report .f2) { --dx: -3em; }
    .trust__list .tick path { stroke-dasharray: 1; animation: draw linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }

    /* The map: the pins come in one after the other as they come on screen,
       and each line grows from its place to its pin. */
    .pin { animation: pin-compare linear both; animation-timeline: view(); animation-range: entry 10% entry 40%; }
    .linea { animation: linea-cresce linear both; animation-timeline: view(); animation-range: entry 10% entry 40%; }
    .casa--aosta :is(.pin, .linea) { animation-range: entry 15% entry 45%; }
    .casa--liguria :is(.pin, .linea) { animation-range: entry 20% entry 50%; }
    .casa--provenza :is(.pin, .linea) { animation-range: entry 25% entry 55%; }
    @keyframes pin-compare { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
    @keyframes linea-cresce { from { scale: 0 1; } to { scale: 1 1; } }

    /* How it starts: the cards one at a time; the coloured number first. */
    .step { --up: 20px; animation: enter linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .step__num { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }

    /* Where it comes from: the most personal section, still on purpose;
       only a slow fade, the words a moment later, the mark drawn. */
    .origin__photo { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .origin__text > :not(.mark) { animation: enter linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }

    /* The closing: the photo slower than the page; the words, then the buttons. */
    .cta__photo img { --drift: -40px; animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .cta h2,
    .cta p { animation: enter linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    .cta .actions { animation: enter linear both; animation-timeline: view(); animation-range: entry 30% entry 80%; }

    @media (min-width: 900px) {
      .stage--hero .phone,
      .stage--hero .fragment { animation-range: normal, 0 800px; }
      .stage--hero .phone { --drift: -24px; animation-duration: 1s, auto; animation-delay: 250ms, 0s; }
      .stage--hero .fragment { animation-delay: calc(1250ms + var(--k) * 110ms), 0s; }
      /* On the computer the text is on the first screen: it comes in on load, above. */
      .hero__text > * { animation-timeline: auto; animation-range: normal; }
      .hero h1 { animation: uncover 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
      .hero__lead,
      .hero .actions,
      .hero__note { animation: fade-in 500ms ease-out both; }
      .hero__lead { animation-delay: 300ms; }
      .hero .actions { animation-delay: 380ms; }
      .hero__note { animation-delay: 460ms; }
      .feature__scene .phone { --up: 64px; }
      .feature--expenses .feature__scene .phone,
      .feature--knowledge .feature__scene .phone { animation-name: from-left; }
      .feature--stays .feature__scene .phone,
      .feature--maintenance .feature__scene .phone,
      .feature--report .feature__scene .phone { animation-name: from-right; }
      .step { --up: 0px; animation-name: from-left-short; animation-range: entry 10% entry 50%; }
      .step:nth-child(2) { animation-range: entry 15% entry 55%; }
      .step:nth-child(3) { animation-range: entry 20% entry 60%; }
      @keyframes from-left { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
      @keyframes from-right { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
      @keyframes from-left-short { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
    }
  }
}