@font-face {
  font-family: "Hanken Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2")
    format("woff2-variations");
  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: "Hanken Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/hanken-grotesk-latin-ext-wght-normal.woff2")
    format("woff2-variations");
  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;
}
@font-face {
  font-family: "Lora Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("../fonts/lora-latin-wght-normal.woff2") format("woff2-variations");
  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;
}
/* Latin only: the italic is used just for one word of the hero title. */
@font-face {
  font-family: "Lora Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url("../fonts/lora-latin-wght-italic.woff2") format("woff2-variations");
  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: "Lora Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("../fonts/lora-latin-ext-wght-normal.woff2")
    format("woff2-variations");
  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;
}

:root {
  --font-sans:
    "Hanken Grotesk Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Lora Variable", Georgia, serif;

  --radius: 0.45rem;
  --gutter: clamp(16px, 4vw, 24px);
  --content-width: 70rem;
  /* Section headings (h2): one size for all, and one space below them. */
  --section-head-size: clamp(1.5rem, 3vw, 2rem);
  --section-gap: clamp(1.5rem, 3vw, 2.5rem);
  /* The size of the chart card. */
  --feature-width: 38rem;
  --header-height: 4rem;

  --surface-0: oklch(0.945 0.008 90);
  /* A step darker than the page: the feature sections, set apart from the
     hero, with the white cards standing out more on them. */
  --surface-feature: oklch(0.925 0.009 90);
  /* Between the page and the cards: the inner areas of a card, as in the app. */
  --surface-1: oklch(0.965 0.006 95);
  --muted: oklch(0.92 0.008 90);
  --band: oklch(0.9 0.01 90);
  --surface-2: oklch(1 0 0);
  --border: oklch(0.905 0.011 90);
  --border-strong: oklch(0.86 0.012 90);
  --shadow-card: 0 1px 2px oklch(0.25 0.01 90 / 0.06);
  --shadow-raised:
    0 1px 2px oklch(0.25 0.01 90 / 0.06),
    0 12px 32px -8px oklch(0.25 0.01 90 / 0.16);

  --text-1: oklch(0.153 0.006 107.1);
  --text-2: oklch(0.41 0.0112 140.5);
  --text-label-serif: oklch(0.44 0.012 70);

  --brand: oklch(0.47 0.07 155);
  --brand-hover: oklch(0.42 0.07 155);
  --brand-tint: oklch(0.935 0.02 155);
  /* The highlighter behind the feature headings: light enough for the
     text over it, dark enough to show on the feature sections' surface. */
  --brand-highlight: oklch(0.86 0.06 155);
  --brand-fill: oklch(0.44 0.07 155);
  /* The month in progress, lighter than the closed ones, still 3.5:1 on
     white (WCAG 1.4.11 for chart marks). */
  --brand-open: oklch(0.62 0.09 155);
  --brand-fill-hover: oklch(0.39 0.07 155);
  --on-brand: oklch(0.99 0 0);
  /* The goal: a dark amber, 3.4:1 on the white charts (WCAG 1.4.11). */
  --goal: oklch(0.64 0.15 80);
  --status-good: oklch(0.965 0.03 150);
  --status-warn: oklch(0.965 0.045 75);
  /* The icons on the status tints: the brand green on the good one (6:1),
     a burnt orange on the warning one (4.5:1). */
  --status-good-ink: var(--brand);
  --status-warn-ink: oklch(0.55 0.13 60);

  /* The footer, dark: Radix Olive's darkest step (olive12). Its text is
     the dark scale's olive11 toned down to 5:1, clear of the 4.5:1 floor;
     olive12 (14:1) on hover. */
  --surface-inverse: oklch(0.242 0.011 139.4);
  --text-inverse-2: oklch(0.65 0.013 137.8);
  --text-inverse-1: oklch(0.947 0.0034 145.5);

  --link: oklch(0.4 0.07 155);
  --link-hover: oklch(0.35 0.07 155);

  /* The hero's map of Rome: thin lines a few steps darker than the page,
     the larger roads darker, the Tiber a faint grey-blue. */
  --map-street: oklch(0.885 0.01 90);
  --map-road: oklch(0.82 0.014 85);
  --map-ring-road: oklch(0.77 0.016 85);
  --map-water: oklch(0.78 0.035 230);
}

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

html {
  color-scheme: light;
  font-family: var(--font-sans), sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  min-width: 320px;
  background: var(--surface-0);
}

body {
  color: var(--text-1);
  line-height: 1.5;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

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

p,
li {
  text-wrap: pretty;
}
/* WCAG 1.4.8 (AAA): lines of text no wider than 80 characters. */
p {
  max-width: 80ch;
}

ul {
  list-style: none;
  padding: 0;
}

h1,
h2 {
  font-family: var(--font-display), sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-wrap: balance;
}

a {
  color: var(--link);
}
a:hover {
  color: var(--link-hover);
}

small {
  font-size: 1rem;
  color: var(--text-2);
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* Buttons keep their own radius, so the ring follows their shape. */
:focus-visible:not([data-btn]) {
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

[data-skip] {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--brand-fill);
  color: var(--on-brand);
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}
[data-skip]:focus {
  top: 0;
}

[data-container] {
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Stripe's visible grid: two rails run the page just outside the content column;
   the header's background covers them, so they start below its bottom line.
   They're drawn above the sections, so a section's background doesn't hide
   them, and never cross the content, so they can't cover it. On phones
   there's no room outside the content for them, so they show from tablet
   up. */
body {
  position: relative;
}
body::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  z-index: 1;
  width: min(var(--content-width) + 2 * var(--gutter), 100% - var(--gutter));
  margin-inline: auto;
  display: none;
  border-inline: 1px solid var(--border);
  pointer-events: none;
}

main {
  flex: 1;
  display: grid;
  /* minmax(0, …) keeps wide content (the table) from stretching the column
     past the viewport: it scrolls inside its own box instead. */
  grid-template-columns: minmax(0, 1fr);
}

main > section {
  padding-block: clamp(3rem, 7vw, 6rem);
}

a[rel~="home"] img {
  width: 5.4rem;
}
body > header a[rel~="home"] img {
  width: auto;
  height: 24px;
}

[data-btn] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}
[data-btn="primary"],
[data-btn="primary"]:hover {
  color: var(--on-brand);
}
[data-btn="primary"] {
  background: var(--brand-fill);
}
[data-btn="primary"]:hover {
  background: var(--brand-fill-hover);
}
/* Same box as the primary button, just without a fill. */
[data-btn="quiet"] {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
[data-btn="quiet"]:hover {
  color: var(--brand);
  text-decoration-color: var(--brand-hover);
}

/* Like Stripe, the header scrolls away with the page. It stays positioned
   above the page's rails (body::before). */
body > header {
  position: relative;
  z-index: 50;
  display: grid;
  min-height: var(--header-height);
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
}
body > header > [data-container] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Only the way in on the right: Accedi, with a person icon before it. */
body > header nav {
  margin-inline-start: auto;
}
body > header nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--text-2);
  text-decoration: none;
}
body > header nav a:hover {
  color: var(--text-1);
}
body > header nav svg {
  flex: none;
}

[data-hero] {
  padding-block: clamp(1rem, 2.5vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  align-content: center;
}
/* The fade past the title's and subheading's end: shorter on phones,
   where they take the whole width. */
[data-hero] {
  --hero-fade: 1.5rem;
}
@media (min-width: 48rem) {
  [data-hero] {
    --hero-fade: 3rem;
  }
}
[data-hero] > [data-container] {
  container-type: inline-size;
  display: grid;
  justify-items: start;
  gap: 2rem;
}
/* From tablet up the hero sits on a 12-column grid and takes ten of them,
   starting from the first: its text on the same left edge as every other
   section's content. */
@media (min-width: 48rem) {
  [data-hero] > [data-container] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  [data-hero] > [data-container] > * {
    grid-column: 1 / span 10;
  }
}
[data-hero] hgroup {
  display: grid;
  gap: 1rem;
}
[data-hero] h1 {
  display: grid;
  gap: 1rem;
  font-family: var(--font-sans), sans-serif;
  font-size: clamp(2rem, 11.5cqi, 3.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  hyphens: none;
}
/* The title always breaks on the same two lines: it never wraps, and on
   phones the font shrinks with the width so the longest line still fits. */
[data-title] {
  font-size: min(1em, 12cqi);
  white-space: nowrap;
}
/* On tablets the title shares the row with the map; on desktop it grows
   again, its end running over the map's faded edge. */
@media (min-width: 48rem) {
  [data-hero] h1 {
    font-size: clamp(2.25rem, 5.5cqi, 3.5rem);
  }
}
@media (min-width: 64rem) {
  [data-hero] h1 {
    font-size: clamp(3.5rem, 7.5cqi, 5.25rem);
  }
}
/* The map runs under the title and the subheading: each has the page's
   colour behind its text, fading out past its end so the map shows. */
[data-hero] h1,
[data-subheading] {
  width: fit-content;
  padding-inline-end: var(--hero-fade);
  background: linear-gradient(
    to right,
    var(--surface-0) calc(100% - var(--hero-fade)),
    transparent
  );
}
/* Lora italic, bigger and in the brand colour,
   without spreading the lines apart. */
[data-title] em {
  font-family: var(--font-display);
  font-size: 1.1em;
  line-height: 0;
  color: var(--brand);
}
/* Always on one line: on narrow screens the font shrinks with the width
   (the line is about 26em long), less the title's fade. */
[data-eyebrow] {
  font-size: min(1rem, (100cqi - var(--hero-fade)) / 26);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-fill);
}
/* On tablets the text takes 7 of the 12 columns, about 58% of the width. */
@media (min-width: 48rem) {
  [data-eyebrow] {
    font-size: min(1rem, (58cqi - var(--hero-fade)) / 26);
  }
}
[data-eyebrow] abbr {
  text-decoration: none;
}
[data-eyebrow] abbr:hover {
  text-decoration: underline dotted;
}
/* Each sentence on its own line when it fits; when it doesn't, its lines
   as even as possible. */
[data-subheading] {
  max-width: 44rem;
  font-size: clamp(1.125rem, 2cqi, 1.375rem);
  line-height: 1.5;
  color: var(--text-2);
}
[data-subheading] span {
  display: block;
  text-wrap: balance;
}
[data-actions] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1.25rem 0.5rem;
}
[data-hero] [data-btn] {
  min-height: 2.95rem;
  padding: 0.8rem 1.7rem;
  font-size: 1rem;
}

/* The text stays above the map wherever they meet. */
[data-hero] > [data-container] > hgroup {
  position: relative;
  z-index: 1;
}
/* On tablets the map sits beside the text instead of below it, its left
   part running under the text. */
@media (min-width: 48rem) {
  [data-hero] > [data-container] > hgroup {
    grid-column: 1 / span 7;
    grid-row: 1;
    align-self: center;
  }
  [data-hero] > [data-container] > [data-hero-map] {
    grid-column: 6 / -1;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    margin-block-start: 0;
  }
}
/* From desktop up the text takes the left half and the map the right one.
   The empty rows above and below the text share the map's extra height,
   so the text stays centred on it. The demo bar runs below both. */
@media (min-width: 64rem) {
  [data-hero] > [data-container] {
    grid-template-rows: 1fr auto 1fr auto;
  }
  [data-hero] > [data-container] > hgroup {
    grid-column: 1 / span 9;
    grid-row: 2;
  }
  [data-hero] > [data-container] > [data-hero-map] {
    grid-column: 7 / -1;
    grid-row: 1 / span 3;
  }
}

/* The map of Rome with the dealership's three branches. On phones it
   rises under the text: the north of the city runs behind the title, and
   the ring road starts just below the subheading (it starts 32% of the
   map's width from its top). Where the page is wider than the map, the
   map is centred. */
[data-hero-map] {
  justify-self: center;
  display: grid;
  width: min(100%, 36rem);
  margin-block-start: calc(-1rem - min(100cqi, 36rem) * 0.32);
}
/* The SVG holds a tall crop and keeps its bottom: on phones the map
   shows it all, from tablet up only its lower 5:4, around the ring road.
   The branches are placed in the SVG's units, so they follow the crop. */
[data-map] {
  --map-top: -105;
  --map-height: 650;
  container: hero-map / inline-size;
  position: relative;
  aspect-ratio: 600 / 650;
}
@media (min-width: 48rem) {
  [data-map] {
    --map-top: 65;
    --map-height: 480;
    aspect-ratio: 600 / 480;
  }
}
/* The streets fade out towards the edges, so the map has no hard frame. */
[data-map-base] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  mask-image: radial-gradient(closest-side, black 72%, transparent);
}
/* The hero's last line: the demo request and the way to the features in
   one bar across the whole content width. On phones it's left out: the
   map's button leads to the form at the bottom of the page instead. On
   tablets everything stacks, the link last; from desktop up the link sits
   on the left, set apart by a line, and the fields and the button share
   one row. */
@media (min-width: 48rem) {
  [data-hero] > [data-container] > [data-hero-bar] {
    grid-column: 1 / -1;
    display: grid;
  }
}
[data-hero-bar] {
  justify-self: stretch;
  display: none;
  justify-items: start;
  gap: 1rem;
  padding: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* On tablets the link comes last, under a line across the bar, its
   arrow pointing down to the features. */
[data-hero-bar] > [data-btn] {
  justify-self: stretch;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
[data-hero-form] {
  justify-self: stretch;
  display: grid;
  gap: 0.75rem;
}
[data-hero-fields] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
@media (min-width: 40rem) {
  [data-hero-fields] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  [data-hero-bar] {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
  }
  /* The link moves to the left, set apart by an upright line. */
  [data-hero-bar] > [data-btn] {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding: 0.8rem 1.5rem 0.8rem 0.5rem;
    border-top: 0;
    border-inline-end: 1px solid var(--border);
  }
  [data-hero-form] {
    grid-column: 2;
    grid-row: 1;
  }
  [data-hero-fields] {
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr)
      auto;
  }
}
[data-hero-fields] input {
  min-width: 0;
  min-height: 2.95rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  color: var(--text-1);
  background: var(--surface-2);
}
[data-hero-fields] input::placeholder {
  color: var(--text-2);
}
[data-hero-fields] button {
  font-family: inherit;
  cursor: pointer;
}
/* The consent on white: the text grey, the box and the link green. */
[data-hero-form] [data-consent] {
  font-size: 0.875rem;
  color: var(--text-2);
}
[data-hero-form] [data-consent] input {
  margin-top: 0.0625rem;
  accent-color: var(--brand);
}
[data-hero-form] [data-consent] a,
[data-hero-form] [data-consent] a:hover {
  color: var(--link);
}

[data-map-layer="streets"] {
  stroke: var(--map-street);
  stroke-width: 0.75;
}
[data-map-layer="consolari"] {
  stroke: var(--map-road);
  stroke-width: 1.25;
}
[data-map-layer="gra"] {
  stroke: var(--map-ring-road);
  stroke-width: 2;
}
[data-map-layer="river"] {
  stroke: var(--map-water);
  stroke-width: 3;
  opacity: 0.7;
}
/* The network: dashed lines between the branches. */
[data-map-network] {
  stroke: var(--text-2);
  stroke-opacity: 0.45;
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

/* A branch: its ring centred on its place, its card beside it. The colour
   only carries the status: green on track or reached, amber behind. */
[data-site] {
  --ring: 2rem;
  --site-color: var(--brand);
  --site-ink: var(--brand);
  position: absolute;
  left: calc(var(--site-x) / 600 * 100%);
  top: calc((var(--site-y) - var(--map-top)) / var(--map-height) * 100%);
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  translate: calc(var(--ring) / -2) -50%;
}
[data-site][data-state="behind"] {
  --site-color: var(--goal);
  --site-ink: var(--status-warn-ink);
}
/* Places in the SVG's units, from the map's projection: Bufalotta,
   Tiburtina and EUR. Nord's card sits on its left. */
[data-site="nord"] {
  --site-x: 366;
  --site-y: 145;
  flex-direction: row-reverse;
  translate: calc(-100% + var(--ring) / 2) -50%;
}
/* Est's card sits below it, clear of Nord's. */
[data-site="est"] {
  --site-x: 444;
  --site-y: 251;
  flex-direction: column;
  translate: -50% calc(var(--ring) / -2);
}
/* On phones Sud's card sits on its left, clear of Est's; from tablet up,
   on its right. */
[data-site="sud"] {
  --site-x: 257;
  --site-y: 439;
  flex-direction: row-reverse;
  translate: calc(-100% + var(--ring) / 2) -50%;
}
[data-site-ring] {
  flex: none;
  width: var(--ring);
  height: var(--ring);
  overflow: visible;
  fill: none;
}
[data-site-track] {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 3;
}
[data-site-progress] {
  stroke: var(--site-color);
  stroke-width: 3;
  transform: rotate(-90deg);
  transform-origin: center;
  transform-box: fill-box;
}
[data-site-pulse] {
  stroke: var(--site-color);
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
[data-site-dot] {
  fill: var(--site-color);
}
[data-site-card],
[data-network-card] {
  display: grid;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
}
[data-site-card] {
  position: relative;
}
[data-site-name],
[data-network-name] {
  font-weight: 600;
  color: var(--text-1);
}
[data-site-count],
[data-network-count] {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
[data-site-count] strong,
[data-network-count] strong {
  font-weight: 600;
  color: var(--text-1);
}
[data-site-status] {
  font-weight: 500;
  color: var(--site-ink);
}
/* The new sale: a chip over the card's corner, shown by the animation. */
[data-site-badge] {
  position: absolute;
  top: 0;
  right: 0.5rem;
  translate: 0 -60%;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0;
}
[data-site][data-sale] [data-site-pulse] {
  animation: site-pulse 1.2s ease-out;
}
[data-site][data-sale] [data-site-badge] {
  animation: site-badge 2.6s ease-out;
}
@keyframes site-pulse {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}
@keyframes site-badge {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }
  15%,
  70% {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

/* The network card, above the ring road, only on desktop: on phones its
   corner holds the demo button, and beside the text on tablets the map is
   too small for it. */
[data-network-card] {
  position: absolute;
  top: 0;
  right: 0;
  width: 11rem;
  display: none;
  gap: 0.25rem;
}
@media (min-width: 64rem) {
  [data-network-card] {
    display: grid;
  }
}
/* On phones, the hero's way to the demo: on the right, rising into the
   map's faded bottom edge, below the branches whatever the width. While
   the hero's bottom is below the screen, it stays at the screen's bottom
   instead, so it's always in sight. Outside the map's image, so it stays
   a link for screen readers. From tablet up the demo bar takes its
   place. */
[data-map-cta] {
  position: sticky;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  justify-self: end;
  margin-block-start: -1.5rem;
}
@media (min-width: 48rem) {
  [data-map-cta] {
    display: none;
  }
}
/* Phones held sideways have no room for the map under the text: only the
   button shows, at the bottom right of the hero. */
@media (orientation: landscape) and (max-width: 47.99rem) {
  /* The button joins the hero's grid, so it can stay in sight across
     the whole hero rather than the map's empty box. */
  [data-hero-map] {
    display: contents;
  }
  /* The hero fills the screen below the header: the text centred, the
     button at the bottom. The title and the subheading shrink with the
     screen's height so they fit. */
  [data-hero] {
    min-height: calc(100svh - var(--header-height));
    align-content: stretch;
    padding-block: 0.75rem;
  }
  [data-hero] > [data-container] {
    grid-template-rows: 1fr auto;
  }
  [data-hero] > [data-container] > hgroup {
    align-self: center;
  }
  [data-hero] h1 {
    font-size: min(clamp(2rem, 11.5cqi, 3.75rem), 10svh);
  }
  [data-subheading] {
    font-size: min(clamp(1.125rem, 2cqi, 1.375rem), 4.5svh);
  }
  [data-map] {
    display: none;
  }
  [data-map-cta] {
    margin-block-start: 0;
  }
}
/* From tablet up Sud's card moves to its right. */
@media (min-width: 40rem) {
  [data-site="sud"] {
    flex-direction: row;
    translate: calc(var(--ring) / -2) -50%;
  }
}
/* On a wide enough map the rings and cards grow. Measured on the map, not
   the page: beside the text on tablets the map is as narrow as on
   phones. */
@container hero-map (min-width: 30rem) {
  [data-site] {
    --ring: 2.5rem;
    gap: 0.5rem;
  }
  [data-site-card],
  [data-network-card] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }
}
[data-network-bar] {
  width: 100%;
  height: 0.375rem;
  border-radius: 999px;
  overflow: hidden;
}
[data-network-track] {
  fill: var(--muted);
}
[data-network-fill] {
  fill: var(--brand);
}

/* Between the hero and the features, as Stripe's logo strip: a white band
   between two lines, the three sides of a dealership's business in cells
   split by dashed lines instead of cards. */
[data-pillars] {
  padding-block: 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
[data-pillars] > [data-container] {
  container-type: inline-size;
}
/* The section has no padding of its own (the cells' lines reach its
   bottom), so the heading keeps the space above it. It never wraps: where
   the shared size wouldn't fit on one line, on phones, the font shrinks
   with the width (5cqi), as the hero's title does. */
[data-pillars] [data-section-head] {
  max-width: none;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  font-size: min(var(--section-head-size), 5cqi);
  white-space: nowrap;
}
[data-pillars] ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px dashed var(--border-strong);
}
/* As in Stripe's feature rows: every cell starts at the top, its icon
   above the text, behind a dashed line on its left, so icons and titles
   line up across a row however long the descriptions run. */
[data-pillars] li {
  --cell-padding: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.25rem, 3vw, 2rem);
  padding-inline: var(--cell-padding);
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1rem;
  border-left: 1px dashed var(--border-strong);
}
[data-pillars] li + li {
  border-top: 1px dashed var(--border-strong);
}
/* From tablet up the six cells sit in a grid: two columns on tablets,
   three on desktops, with a dashed line on top of every cell below the
   first row. */
@media (min-width: 40rem) {
  [data-pillars] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-pillars] li:nth-child(-n + 2) {
    border-top: 0;
  }
}
@media (min-width: 64rem) {
  [data-pillars] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-pillars] li:nth-child(-n + 3) {
    border-top: 0;
  }
}
[data-pillars] li > div {
  display: grid;
  gap: 0.25rem;
}
[data-pillar-icon] {
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  color: var(--brand);
  background: var(--brand-tint);
  border-radius: var(--radius);
}
/* The part of the cell's dashed line beside the title is a solid line in
   the brand colour, as in the columns further down. */
[data-pillars] h3 {
  position: relative;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}
[data-pillars] h3::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(-1 * var(--cell-padding) - 1px);
  width: 1px;
  background: var(--brand);
}
[data-pillars] abbr {
  text-decoration: none;
}
[data-pillars] p {
  color: var(--text-2);
}

/* The feature sections keep the sections' padding (see main > section),
   so each one has room above and below its content. */
main > [data-feature] {
  background: var(--surface-feature);
  border-top: 1px solid var(--border);
}
/* The feature sections alternate the darker surface with the page's
   colour, so each one reads as a block of its own. */
/* On phones the features run closer to the screen's edges: 8px on each
   side instead of the gutter, so the cards and the table get more room.
   From tablet up they're back in the content column. */
main > [data-feature] > [data-container] {
  width: calc(100% - 1rem);
}
@media (min-width: 48rem) {
  main > [data-feature] > [data-container] {
    width: min(var(--content-width), 100% - 2 * var(--gutter));
  }
}
main > [data-feature] + [data-feature] {
  background: var(--surface-0);
}
main > [data-feature] + [data-feature] + [data-feature] {
  background: var(--surface-feature);
}
/* TODO: temporary height while the sections are empty; remove it once
   the features are in. */
[data-feature]:has(> [data-container]:empty) {
  height: 360px;
}

/* On phones the table scrolls sideways instead of squeezing the columns. */
[data-table] {
  /* The cells' hidden text, positioned absolutely, stays inside the
     scrolling box: otherwise it would widen the page on phones. */
  position: relative;
  /* As wide as its columns need, never wider than the page. */
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-card);
}
[data-table] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-table] th,
[data-table] td {
  padding: 0.75rem 1rem;
  text-align: start;
  vertical-align: middle;
}
[data-table] thead th {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
}
[data-table] tbody tr + tr {
  border-top: 1px solid var(--border);
}
/* Light tint on the results at or above target and on the one falling behind. */
[data-table] td[data-status="good"] {
  background: var(--status-good);
}
[data-table] td[data-status="warn"] {
  background: var(--status-warn);
}
/* Not by colour alone (WCAG 1.4.1): an icon after the figure, a tick on
   the good results and a warning sign on the one falling behind. The
   cell's hidden text says the same to screen readers. */
[data-table] td[data-status]::after {
  content: "";
  display: inline-block;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
  margin-inline-start: 0.375rem;
  mask: var(--status-icon) center / contain no-repeat;
}
[data-table] td[data-status="good"]::after {
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background: var(--status-good-ink);
}
[data-table] td[data-status="warn"]::after {
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  background: var(--status-warn-ink);
}
[data-table] tbody th {
  font-weight: 600;
}
[data-table] abbr {
  text-decoration: none;
}
[data-fraction] span {
  color: var(--text-2);
}

/* The table's and the chart's figures can't be selected and copied. */
:is(
  [data-table],
  [data-penetration],
  [data-scores],
  [data-coverage],
  [data-sheet]
) {
  -webkit-user-select: none;
  user-select: none;
}

/* The section's heading and, below it, its cards: each one a short text
   beside (above, on phones) its table or chart. */
[data-container]:has(> [data-section-head]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-gap);
}
/* The section heading, shared by every h2 of the landing: the display
   serif (see h2) at one size and line height. The space below it is the
   container's gap, --section-gap, the same in every section. */
[data-section-head] {
  max-width: 44rem;
  font-size: var(--section-head-size);
  line-height: 1.25;
}
/* Optional variant, only where the markup has it: the claim in full
   colour, its explanation in grey right after it in a <span>, instead of
   a separate subheading. */
[data-section-head] span {
  color: var(--text-2);
}
/* The feature sections' headings are highlighted: a highlighter stroke
   across the lower part of the text, repeated on every line it wraps to. */
[data-feature] [data-section-head] mark {
  color: inherit;
  background: linear-gradient(
    transparent 55%,
    var(--brand-highlight) 55% 92%,
    transparent 92%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* From desktop up the first section's heading, with no grey explanation,
   stays on a single line, on the left like the other headings. */
@media (min-width: 64rem) {
  #funzioni [data-section-head] {
    max-width: none;
    white-space: nowrap;
  }
}

/* Two overlapping cards of the same width: the text on a card at the
   back and, in front of it, the table or chart on a raised card that
   covers the bottom of the text card. The middle row is the overlap: the
   text card reaches into it with empty space, so the visual never covers
   the text. Below desktop both cards take the column's whole width. */
[data-feature-block] {
  --overlap: 2.5rem;
  --copy-padding: clamp(1.25rem, 3vw, 2rem);
  /* The table's and the chart's shared width from desktop up. */
  --visual-width: 40.5rem;
  display: grid;
  /* minmax(0, …) lets the cards narrow on small screens, where the table
     scrolls inside its own box. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--overlap) auto;
}
[data-feature-copy] {
  grid-column: 1;
  grid-row: 1 / 3;
  /* Its text doesn't widen the card: the visual sets the width and the
     text wraps inside it. */
  contain: inline-size;
  padding: var(--copy-padding);
  padding-bottom: calc(var(--copy-padding) + var(--overlap));
  display: grid;
  align-content: start;
  gap: 0.5rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
}
[data-feature-copy] > * {
  max-width: 34rem;
}
[data-feature-copy] h3 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}
/* The description is as big as the title: the grey sets it apart. */
[data-feature-copy] p {
  font-size: 1.25rem;
  color: var(--text-2);
}
[data-feature-visual] {
  grid-column: 1;
  grid-row: 2 / 4;
  min-width: 0;
  padding: clamp(1rem, 3vw, 2rem);
  display: grid;
  /* As above: the chart narrows and the table scrolls inside the card
     instead of spilling out of it. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-raised);
}
/* The table and the chart fill the card; on phones the table still
   scrolls inside its own box. */
[data-feature-visual] :is([data-table], [data-penetration]) {
  width: 100%;
}
/* From desktop up the cards sit side by side across the whole column, in
   every block: the table or chart on the right, the text card on the left,
   centred on the visual's height. The text card still reaches 5rem under
   the visual, with as much empty space on its right, so the visual never
   covers the text. */
@media (min-width: 64rem) {
  [data-feature-block] {
    --overlap: 5rem;
    grid-template-columns: minmax(0, 1fr) var(--overlap) auto;
    grid-template-rows: auto;
    align-items: center;
  }
  [data-feature-block] [data-feature-copy] {
    grid-column: 1 / 3;
    grid-row: 1;
    padding: var(--copy-padding);
    padding-inline-end: calc(var(--copy-padding) + var(--overlap));
  }
  [data-feature-block] [data-feature-visual] {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  /* As wide as each other: about the ranking table's own width. */
  [data-feature-visual] :is([data-table], [data-penetration]) {
    width: var(--visual-width);
    max-width: 100%;
  }
}

/* The ranking's toggle above the table. */
[data-ranking] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 0.75rem;
}
/* Switches the ranking between September and the year so far, and the
   insurance scores between lenders. */
:is([data-rank-toggle], [data-lender-toggle]) {
  display: inline-flex;
  padding: 2px;
  font-size: 1rem;
  font-weight: 500;
  background: var(--muted);
  border-radius: var(--radius);
}
:is([data-rank-toggle], [data-lender-toggle]) button {
  padding: 0.125rem 0.5rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  white-space: nowrap;
  color: var(--text-2);
  background: none;
  cursor: pointer;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}
:is([data-rank-toggle], [data-lender-toggle]) button:hover {
  color: var(--text-1);
}
:is([data-rank-toggle], [data-lender-toggle]) [aria-pressed="true"] {
  color: var(--text-1);
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
}

/* When the ranking or the lender of the scores changes, the rows slide to
   their new places. */
:is([data-table] tbody tr, [data-scores] > ol > li) {
  view-transition-class: rank-row;
}
::view-transition-group(*.rank-row) {
  animation-duration: 450ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(*.rank-row),
::view-transition-new(*.rank-row) {
  animation-duration: 450ms;
}
/* Only the rows move: the rest of the page switches without a crossfade. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* The fraction gets the same room whatever its digits,
   so the dots before the percentages line up row after row. */
[data-fraction] {
  display: inline-block;
  width: 3.875rem;
  text-align: end;
}
/* September's figures have two digits at most: a narrower box. */
[data-table] td:nth-child(2) [data-fraction] {
  width: 2.875rem;
}

svg:has(> [data-spark]) {
  /* Keeps its 120px on phones too: the table scrolls instead. */
  max-width: none;
  overflow: visible;
  cursor: crosshair;
  /* A horizontal drag scrubs the chart; a vertical one still scrolls. */
  touch-action: pan-y;
}
[data-table] td:has(> [data-spark-tip]) {
  position: relative;
}
[data-spark-tip] {
  position: absolute;
  z-index: 10;
  translate: -50% calc(-100% - 8px);
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.08);
}
[data-spark-tip][hidden] {
  display: none;
}
[data-spark] {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
[data-spark-end] {
  fill: var(--brand);
  transition:
    cx 120ms ease,
    cy 120ms ease;
}
[data-spark-goal] {
  stroke: var(--goal);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

[data-goals] {
  --panel-overlap: clamp(2rem, 8svh, 5rem);
  padding-block-start: 0;
  background: linear-gradient(
    transparent var(--panel-overlap),
    var(--border) var(--panel-overlap) calc(var(--panel-overlap) + 1px),
    var(--band) calc(var(--panel-overlap) + 1px)
  );
}

[data-panel] {
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow-card);
}
[data-panel] > h2 {
  text-align: center;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
}

[data-tabs] {
  align-self: center;
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding: 3px;
  background: var(--muted);
  border-radius: var(--radius);
}
[role="tab"] {
  height: calc(100% - 1px);
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-2);
  background: none;
  cursor: pointer;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}
[role="tab"]:hover {
  color: var(--text-1);
}
[role="tab"][aria-selected="true"] {
  color: var(--text-1);
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow:
    0 1px 3px oklch(0 0 0 / 0.1),
    0 1px 2px -1px oklch(0 0 0 / 0.1);
}

[data-cards] {
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  [data-cards] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  [data-cards] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

[data-card] {
  --card-spacing: 1rem;
  padding: var(--card-spacing);
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
  font-size: 1rem;
  color: var(--text-1);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-card);
}
[data-card] figcaption {
  display: grid;
  gap: 0.5rem;
}
[data-card] h3 {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-sans), sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1;
}
[data-card] figcaption p {
  color: var(--text-2);
}

[data-chart-frame] {
  display: grid;
}
[data-chart] {
  aspect-ratio: 1 / 1;
  min-height: 0;
  max-height: 300px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}
[data-chart] > svg {
  width: 100%;
  height: 100%;
}
[data-ring="open"] {
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
[data-chart] text {
  font-family: var(--font-sans), sans-serif;
  fill: var(--on-brand);
}
[data-chart] [data-value] {
  font-size: 16px;
  font-weight: 600;
}

:is([data-card], [data-tooltip]) dl {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  row-gap: 2px;
  font-size: 1rem;
}
:is([data-card], [data-tooltip]) dl > :nth-child(n + 3) {
  padding-block-start: 2px;
  border-top: 1px solid var(--border);
}
:is([data-card], [data-tooltip]) dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
[data-card] abbr {
  text-decoration: none;
}

[data-card] dt {
  display: flex;
  color: var(--text-2);
  align-items: baseline;
  gap: 0.45rem;
}
[data-mark] {
  flex: none;
  translate: 0 calc(0.3125rem - 0.5cap);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}
[data-mark="closed"] {
  background: var(--brand-tint);
  border: 1px solid var(--border-strong);
}
[data-mark="penetration"] {
  background: var(--brand);
}
[data-mark="goal"] {
  border: 2px solid var(--goal);
}
[data-mark="open"] {
  border: 1.5px dashed var(--brand);
}
[data-mark="bar"] {
  border-radius: 2px;
  background: var(--brand);
}
[data-mark="bar-open"] {
  border-radius: 2px;
  background: var(--brand-open);
  border: 1.5px dashed var(--brand);
}
[data-mark="goal-line"] {
  width: 0.875rem;
  border-radius: 0;
  background: linear-gradient(
    transparent calc(50% - 1px),
    var(--goal) 0 calc(50% + 1px),
    transparent 0
  );
}
/* The same line, standing: the goal of the insurance scores. */
[data-mark="goal-tick"] {
  border-radius: 0;
  background: linear-gradient(
    to right,
    transparent calc(50% - 1px),
    var(--goal) 0 calc(50% + 1px),
    transparent 0
  );
}

[role="tabpanel"][hidden] {
  display: none;
}

[data-sr-only] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-bars] {
  position: relative;
  min-width: 0;
  height: 240px;
}
[data-bars] > svg {
  overflow: visible;
}
[data-bars] text {
  font-family: var(--font-sans), sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  fill: var(--text-2);
}
[data-grid] line {
  stroke: var(--border);
}
[data-cursor] {
  fill: var(--muted);
}
[data-track] {
  fill: var(--brand-tint);
  stroke: var(--border-strong);
}
[data-bar] {
  fill: var(--brand);
}
[data-bar="open"] {
  fill: var(--brand-open);
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
[data-bar-outline] {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
[data-goal-halo],
[data-goal-line] {
  stroke-linecap: round;
}
[data-goal-halo] {
  stroke: var(--surface-0);
  stroke-width: 6;
}
[data-goal-line] {
  stroke: var(--goal);
  stroke-width: 2;
}

[data-tooltip] {
  position: absolute;
  z-index: 10;
  translate: -50% calc(-100% - 8px);
  min-width: 11rem;
  padding: 0.5rem 0.625rem;
  display: grid;
  gap: 0.375rem;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.08);
}
[data-tooltip][hidden] {
  display: none;
}
[data-tooltip] > p {
  font-size: 1rem;
  font-weight: 600;
}
[data-tooltip] dl {
  column-gap: 1rem;
  font-size: 1rem;
}
[data-tooltip] dt {
  display: block;
}

/* The legend's entries in a column, one under the other, on the left. */
[data-legend] {
  display: grid;
  justify-items: start;
  gap: 0.375rem;
  font-size: 1rem;
  color: var(--text-2);
}
[data-legend] li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
[data-legend] abbr {
  text-decoration: none;
}

:is([data-penetration], [data-scores]) {
  width: 100%;
  padding: 1rem;
  display: grid;
  gap: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-card);
}
/* The bars keep their height; the card grows with the caption below. */
[data-penetration] [data-bars] {
  height: 14.4375rem;
}
:is([data-penetration], [data-scores]) figcaption {
  display: grid;
  gap: 0.5rem;
}
[data-year] {
  justify-self: center;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The year's financing, split by lender: names, shares and counts in columns. */
[data-lenders] {
  justify-self: start;
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
[data-lenders] div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
[data-lenders] dd {
  text-align: end;
}
/* The total heads the list; its count lines up with the lenders' counts. */
[data-lenders] div:first-child {
  padding-block-end: 0.25rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
[data-lenders] div:first-child dd {
  grid-column: 3;
}
[data-lenders] div + div dt {
  padding-inline-start: 0.75rem;
  color: var(--text-2);
}

/* The halo separates the goal line from the bar in the card's colour. */
[data-penetration] [data-goal-halo] {
  stroke: var(--surface-2);
}

/* Insurance scores: one row per seller (name, then the bar with its average
   inside); the axis below sits in the bar column. */
[data-scores] {
  position: relative;
  --score-goal: 350;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
[data-scores] > :is([data-lender-toggle], ol, figcaption),
[data-scores] > ol > li {
  grid-column: 1 / -1;
}
/* Shown once the data is in: without it the toggle would do nothing. */
[data-scores] > [data-lender-toggle] {
  justify-self: start;
}
[data-scores] > [data-lender-toggle][hidden] {
  display: none;
}
[data-scores] > ol,
[data-scores] > ol > li {
  display: grid;
  grid-template-columns: subgrid;
}
[data-scores] > ol {
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}
[data-scores] > ol > li {
  align-items: center;
  cursor: pointer;
}
[data-scores] > ol > li > :first-child {
  font-weight: 600;
}
/* The track carries the axis's gridlines; the fill is the average out of 500. */
[data-score-bar] {
  position: relative;
  height: 1.5rem;
  padding-inline-start: 0.5rem;
  display: flex;
  align-items: center;
  background: repeating-linear-gradient(
    to right,
    var(--border) 0 1px,
    transparent 1px 20%
  );
}
[data-score-bar]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: calc(var(--score) / 500 * 100%);
  background: var(--brand-fill);
  border-radius: 0 var(--radius) var(--radius) 0;
}
/* Once the data is in, a new lender's bars grow or shrink to their length. */
@property --score {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
[data-scores][data-animated] > ol > li {
  transition: --score 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The goal line slides to the new lender's goal in the same way. */
@property --score-goal {
  syntax: "<number>";
  inherits: true;
  initial-value: 350;
}
[data-scores][data-animated] {
  transition: --score-goal 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* A lender without a goal: no line across the bars, no tick in the legend. */
[data-scores][data-no-goal] [data-score-bar]::after,
[data-scores][data-no-goal] [data-goal] [data-mark] {
  display: none;
}
/* No financings from the lender: no bar, a dash in the text's grey. */
[data-scores] li[data-empty] [data-score-bar] > span {
  color: var(--text-2);
}
/* The total, below a line and in grey: all the sellers, not one of them. */
[data-scores] li[data-total] {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
[data-scores] li[data-total] [data-score-bar]::before {
  background: var(--text-2);
}
[data-scores] li[data-total][data-active] [data-score-bar]::before {
  background: var(--text-1);
}
/* The seller whose tooltip is open. */
[data-scores] li[data-active] [data-score-bar]::before {
  background: var(--brand-fill-hover);
}
/* The average, at the start of its bar. */
[data-score-bar] > span {
  position: relative;
  font-weight: 600;
  color: var(--on-brand);
}
/* The goal crosses every bar; reaching into half the gap above and below,
   the pieces join into one line. The halo parts it from the bars. */
[data-score-bar]::after {
  content: "";
  position: absolute;
  inset-block: -0.25rem;
  left: calc(var(--score-goal) / 500 * 100% - 1px);
  width: 2px;
  background: var(--goal);
  box-shadow: 0 0 0 2px var(--surface-2);
}
/* Equal-width labels spread edge to edge: reaching half a label past each
   end puts every label's centre on its gridline. */
[data-score-axis] {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  margin-inline: -1rem;
  color: var(--text-2);
}
[data-score-axis] span {
  width: 2rem;
  text-align: center;
}
[data-scores] figcaption {
  justify-items: center;
  color: var(--text-2);
}
[data-scores] [data-year] {
  color: var(--text-1);
}

/* The tooltip's radar: a seller's average month by month, from the centre
   (0) to the rim (500), with the goal as a ring. */
[data-radar] {
  justify-self: center;
  overflow: visible;
}
[data-radar] [data-ring] {
  fill: none;
  stroke: var(--border);
}
[data-radar] text {
  font-family: var(--font-sans), sans-serif;
  font-size: 16px;
  fill: var(--text-2);
}
[data-radar-goal] {
  fill: none;
  stroke: var(--goal);
  stroke-width: 2;
}
[data-radar-area] {
  fill: var(--brand-tint);
  fill-opacity: 0.6;
}
[data-radar-line] {
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-linecap: round;
}
[data-radar-dot] {
  fill: var(--brand);
}
/* The month in progress: lighter, reached by a dashed line. */
[data-radar-line][data-open] {
  stroke: var(--brand-open);
  stroke-dasharray: 3 3;
}
[data-radar-dot][data-open] {
  fill: var(--brand-open);
}
[data-tooltip] > [data-radar-note] {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-weight: 400;
  color: var(--text-2);
}
[data-mark="radar-open"] {
  background: var(--brand-open);
}

/* The section without cards: the chart and the policies' points as one
   composition on the section's background, its two features in columns
   below it. */
[data-showcase] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 1rem;
}
/* From desktop up the policies float over the chart's right edge, where
   the bars don't reach: the points set there feed the chart. */
@media (min-width: 64rem) {
  [data-showcase] {
    position: relative;
  }
  [data-showcase] [data-scores] {
    width: var(--feature-width);
  }
  [data-showcase] [data-coverage] {
    position: absolute;
    top: 2rem;
    /* Over the chart's padding only: a bar at 500 still ends clear of it. */
    left: calc(var(--feature-width) - 1rem);
    width: 22rem;
    box-shadow:
      var(--shadow-card),
      0 12px 32px oklch(0.25 0.01 90 / 0.1);
    /* Over the chart a fade would show the axis through it; the
       placeholder row is enough to say there are more. */
    mask-image: none;
  }
}

/* Each feature in a column, set apart by a thin line; the part of the line
   beside the title is in the brand colour. */
[data-columns] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 2rem;
}
[data-columns] > div {
  max-width: 26rem;
  padding-inline-start: 1rem;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  border-left: 1px solid var(--border-strong);
}
[data-columns] h3 {
  position: relative;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}
[data-columns] h3::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(-1rem - 1px);
  width: 1px;
  background: var(--brand);
}
/* The description is as big as the title, as in the cards above: the
   grey sets it apart. */
[data-columns] p {
  font-size: 1.25rem;
  color: var(--text-2);
}

/* A list of the policies and their points, not a form. It fades out at the
   bottom: there are more insurances than these. */
[data-coverage] {
  width: 100%;
  padding: 0.25rem 1rem;
  list-style: none;
  font-size: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-card);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
}
[data-coverage] li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 0.75rem;
}
[data-coverage] li + li {
  border-top: 1px solid var(--border);
}
[data-coverage] li > :first-child {
  font-weight: 600;
}
[data-coverage] li > :last-child {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
/* The row that fades: placeholders instead of a name and points. */
[data-coverage] li[aria-hidden] > span {
  height: 0.625rem;
  background: var(--muted);
  border-radius: 999px;
}
[data-coverage] li[aria-hidden] > :first-child {
  width: 7rem;
}
[data-coverage] li[aria-hidden] > :last-child {
  width: 2.5rem;
}

/* The closing call to action, on the brand green: the heading larger than
   the sections', the signup form below it, all centred. White on this
   green is 7:1; the grey parts become a pale green tint. */
main > [data-cta] {
  padding-block: clamp(4rem, 10vw, 7rem);
  color: var(--on-brand);
  background: var(--brand-fill);
}
/* The CTA and the footer are dark: they cover the page's rails
   (body::before) and draw their own in white. */
:is(main > [data-cta], body > footer) {
  position: relative;
  z-index: 2;
}
:is(main > [data-cta], body > footer)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  width: min(var(--content-width) + 2 * var(--gutter), 100% - var(--gutter));
  margin-inline: auto;
  display: none;
  border-inline: 1px solid oklch(1 0 0 / 0.12);
  pointer-events: none;
}
@media (min-width: 48rem) {
  body::before,
  :is(main > [data-cta], body > footer)::before {
    display: block;
  }
}
[data-cta] > [data-container] {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
}
[data-cta] [data-section-head] {
  max-width: 40rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  text-wrap: balance;
}
/* The explanation in a paler green, 5:1 on the brand green. */
[data-cta] [data-section-head] span {
  display: block;
  color: oklch(0.86 0.04 155);
}
/* The button turns round: white on the green, the green for its text and
   its focus ring white. */
[data-cta] [data-btn] {
  min-height: 2.95rem;
  padding: 0.8rem 1.7rem;
  font-size: 1rem;
}
[data-cta] [data-btn="primary"],
[data-cta] [data-btn="primary"]:hover {
  color: var(--brand-fill);
}
[data-cta] [data-btn="primary"] {
  background: var(--surface-2);
}
[data-cta] [data-btn="primary"]:hover {
  background: var(--brand-tint);
}
[data-cta] :focus-visible {
  outline-color: var(--on-brand);
}
/* Name and surname side by side, then the email, the consent and the
   button across the whole form; on phones every field takes a row. */
[data-cta-form] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: min(30rem, 100%);
  text-align: start;
}
@media (min-width: 30rem) {
  [data-cta-form] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Netlify injects a hidden form-name input as the first child at
     deploy, so count only the fields: Nome and Cognome share a row. */
  [data-cta-form] > * {
    grid-column: 1 / -1;
  }
  [data-cta-form] > :nth-child(-n + 2 of [data-field]) {
    grid-column: auto;
  }
}
[data-field] {
  display: grid;
  gap: 0.375rem;
}
[data-field] label {
  font-size: 1rem;
  font-weight: 600;
}
[data-field] input {
  min-height: 2.95rem;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  color: var(--text-1);
  background: var(--surface-2);
}
[data-field] input::placeholder {
  color: var(--text-2);
}
/* The box white on the green, its label beside it in the paler tint; the
   link keeps the text's colour and is told apart by its underline. */
[data-consent] {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 1rem;
  color: var(--brand-tint);
}
[data-consent] input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  accent-color: var(--surface-2);
}
[data-consent] a,
[data-consent] a:hover {
  color: var(--on-brand);
}
[data-cta-form] button {
  font-family: inherit;
  cursor: pointer;
}

/* Text on the left, the contract on the right; on phones the contract
   follows the text. The features stack in one column beside the heading. */
[data-split] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 2.5rem;
}
[data-split-copy] {
  display: grid;
  gap: var(--section-gap);
}
[data-split-copy] [data-columns] {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
/* Under the text the whole sheet would be too tall: its top half, fading
   out, is enough to show what a contract scores for. Below desktop it
   sits in the middle of the column. */
[data-split] [data-sheet] {
  justify-self: center;
  aspect-ratio: 210 / 148.5;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
@media (min-width: 64rem) {
  [data-split] {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4rem;
  }
  [data-split] [data-sheet] {
    justify-self: start;
    aspect-ratio: 210 / 297;
    overflow: visible;
    mask-image: none;
  }
}

/* A contract as a sheet of A4 paper: what it scores for, the other details,
   more that fades out, and the total at the foot of the page. */
[data-sheet] {
  width: min(26rem, 100%);
  aspect-ratio: 210 / 297;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow:
    var(--shadow-card),
    0 12px 32px oklch(0.25 0.01 90 / 0.08);
}
[data-sheet] ul {
  padding: 0;
  list-style: none;
}
[data-sheet] dl > div,
[data-sheet-more] p,
[data-sheet-total] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
[data-sheet] li > span:last-child,
[data-sheet] dd,
[data-sheet-total] > :last-child {
  flex: none;
  font-variant-numeric: tabular-nums;
}
/* Each line: the item on the left, its points on the right. */
[data-sheet] li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
}
[data-sheet] > ul > li {
  padding-block: 0.5rem;
}
[data-sheet] > ul > li + li {
  border-top: 1px solid var(--border);
}
[data-sheet] > ul > li > span:first-child {
  font-weight: 600;
}
/* The insurances inside "Assicurazione": indented, lighter. */
[data-sheet] li ul {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.25rem;
  padding-inline-start: 0.75rem;
  color: var(--text-2);
}
[data-sheet] li ul span:last-child {
  font-variant-numeric: tabular-nums;
}
[data-tag] {
  white-space: nowrap;
  padding: 0 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--brand);
  background: var(--brand-tint);
  border-radius: var(--radius);
}
/* The other details, apart from the points above. */
[data-sheet] dl {
  display: grid;
  gap: 0.375rem;
  padding-block-start: 1rem;
  border-top: 1px solid var(--border-strong);
}
[data-sheet] dt {
  color: var(--text-2);
}
/* Placeholder rows fill the page and fade out: the contract goes on. */
[data-sheet-more] {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding-block-start: 0.5rem;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
[data-sheet-more] span {
  height: 0.625rem;
  background: var(--muted);
  border-radius: 999px;
}
[data-sheet-more] span:first-child {
  width: 8rem;
}
[data-sheet-more] p:nth-child(2) span:first-child {
  width: 6rem;
}
[data-sheet-more] span:last-child {
  width: 2.5rem;
}
[data-sheet-total] {
  padding-block-start: 1rem;
  font-weight: 600;
  border-top: 1px solid var(--border-strong);
}
[data-sheet-total] > :last-child {
  font-size: 1.125rem;
  color: var(--brand);
}

[data-field="summary"] {
  font-weight: 500;
}

/* A thin, dark footer: the copyright on the left, the legal links on the
   right; on phones the links wrap below it. */
body > footer {
  margin-block-start: auto;
  padding-block: 1.25rem;
  background: var(--surface-inverse);
}
body > footer > [data-container] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
  font-size: 0.75rem;
  color: var(--text-inverse-2);
}
body > footer small {
  font-size: inherit;
  color: inherit;
}
body > footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  list-style: none;
}
body > footer a {
  color: var(--text-inverse-2);
  text-decoration: none;
}
body > footer a:hover {
  color: var(--text-inverse-1);
  text-decoration: underline;
}
body > footer :focus-visible {
  outline-color: var(--text-inverse-1);
}

/* A page of text, such as the privacy policy: a readable column aligned
   with the logo, headings in the display face, the paragraphs spaced by the column's gap. */
main > [data-prose] {
  padding-block: clamp(3rem, 7vw, 5rem);
}
[data-prose] > [data-container] {
  display: grid;
  justify-items: start;
  gap: 1rem;
}
[data-prose] > [data-container] > * {
  max-width: 44rem;
}
[data-prose] h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
}
[data-prose] h2 {
  padding-top: 1rem;
  font-size: 1.375rem;
}
[data-prose] h1 + p {
  font-size: 1rem;
  color: var(--text-2);
}
[data-prose] ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
}