/* CF Ready — sito pubblico
   Direzione: docs/brand/brand-foundation.md §9.1. Token: tokens.css (copia di
   docs/brand/assets/tokens.css, fonte canonica del brand).
   Nessun webfont; JavaScript locale e beacon Cloudflare senza cookie.
   Gli elementi visivi sono forme del sistema — tessera, fascia, blocchi — mai
   fotografie, personaggi o scene: la credibilità viene dalla precisione. */

@import "tokens.css";

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

/* Lo scorrimento verso un'ancora è accompagnato, non uno scatto. Chi ha chiesto
   meno animazioni al sistema torna allo scatto: ci pensa il blocco
   prefers-reduced-motion di tokens.css. `scroll-padding-top` tiene conto della
   testata, che resta sopra il contenuto. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--cf-color-surface);
  color: var(--cf-color-ink);
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-body);
  line-height: var(--cf-leading-body);
  -webkit-text-size-adjust: 100%;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

/* ---- Struttura ---- */

.wrap {
  max-width: var(--cf-container-max);
  margin: 0 auto;
  padding: 0 var(--cf-space-6);
}

.column {
  max-width: var(--cf-measure);
}

.wide-column {
  max-width: 58rem;
}

/* Ritmo verticale unico: ogni sezione porta la stessa mezza distanza sopra e
   sotto, così lo stacco fra due sezioni è sempre lo stesso. Le eccezioni sono
   solo due, e sono volute: il primo schermo e le fasce a fondo pieno. */
section {
  padding-block: var(--cf-space-16);
}

.divided {
  border-top: var(--cf-border-subtle);
}

/* Intestazione di sezione: occhiello, titolo, eventuale spiegazione. Lo stacco
   verso il contenuto vive qui invece che in uno stile in linea per blocco. */
.section-head {
  max-width: var(--cf-measure);
  margin-bottom: var(--cf-space-8);
}

.section-head > :last-child {
  margin-bottom: 0;
}

.note {
  max-width: var(--cf-measure);
  margin-top: var(--cf-space-6);
}

/* Sezione a fondo pieno: limiti, chiusura e piè di pagina (§9.1). Respira più
   delle altre perché il colore ne definisce i bordi, che altrimenti stringono. */
.inverse {
  background: var(--cf-color-primary);
  color: var(--cf-color-ink-inverse);
  border-top: 0;
}

section.inverse {
  padding-block: var(--cf-space-16);
}

.inverse :is(h2, h3, a, strong) {
  color: var(--cf-color-ink-inverse);
}

.inverse :focus-visible {
  outline-color: var(--cf-color-ink-inverse);
}

/* ---- Testata ---- */

.masthead {
  padding-block: var(--cf-space-4);
  border-bottom: var(--cf-border-subtle);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, white 96%, transparent);
  backdrop-filter: blur(8px);
  z-index: 10;
  transition: transform calc(var(--cf-duration-base) * 1.5) var(--cf-easing);
}

.skip-link {
  position: fixed;
  inset: var(--cf-space-3) auto auto var(--cf-space-3);
  z-index: 20;
  padding: var(--cf-space-3) var(--cf-space-4);
  background: var(--cf-color-paper);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Su schermo largo la testata resta ferma dov'è. Su telefono si ritira mentre si
   scende e torna appena si risale: la classe la mette `menu.js`, che agisce solo
   sotto la soglia mobile. Senza JavaScript la testata resta comunque agganciata,
   che è il comportamento di prima. */
.masthead.is-hidden {
  transform: translateY(-100%);
  transition-delay: var(--cf-duration-fast);
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-4) var(--cf-space-8);
  align-items: center;
  justify-content: space-between;
}

.masthead img {
  display: block;
  height: 30px;
  width: auto;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cf-text-small);
}

/* ---- Tipografia ---- */

h1,
h2,
h3 {
  font-weight: var(--cf-weight-medium);
  color: var(--cf-color-primary);
  margin: 0 0 var(--cf-space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--cf-text-h1);
  line-height: var(--cf-leading-h1);
}

.display {
  font-size: clamp(2.25rem, 1.3rem + 2.8vw, var(--cf-text-display));
  line-height: var(--cf-leading-display);
  letter-spacing: -0.045em;
  color: var(--cf-color-ink);
  font-weight: var(--cf-weight-semibold);
}

h2 {
  font-size: clamp(1.625rem, 1.2rem + 1vw, var(--cf-text-h2));
  letter-spacing: -0.025em;
  line-height: var(--cf-leading-h2);
}

h3 {
  font-size: var(--cf-text-h3);
  line-height: var(--cf-leading-h3);
  margin-bottom: var(--cf-space-2);
}

p,
ul,
ol {
  margin: 0 0 var(--cf-space-4);
}

li {
  margin-bottom: var(--cf-space-2);
}

.label {
  display: block;
  font-size: var(--cf-text-label);
  line-height: var(--cf-leading-label);
  font-weight: var(--cf-weight-medium);
  letter-spacing: var(--cf-tracking-label);
  text-transform: uppercase;
  color: var(--cf-color-ink-muted);
  margin-bottom: var(--cf-space-3);
}

.inverse .label {
  color: var(--cf-color-ink-inverse);
  opacity: 0.85;
}

.lede {
  font-size: var(--cf-text-h3);
  line-height: var(--cf-leading-h3);
}

small,
.small {
  font-size: var(--cf-text-small);
  line-height: var(--cf-leading-small);
  color: var(--cf-color-ink-muted);
}

.inverse .small {
  color: var(--cf-color-ink-inverse);
  opacity: 0.85;
}

a {
  color: var(--cf-color-primary);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* ---- Azioni ---- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-3);
  align-items: center;
  margin-top: var(--cf-space-8);
}

/* `a` e `button` hanno metriche diverse: senza un'altezza dichiarata e senza
   allineamento interno, due bottoni affiancati risultano alti in modo diverso. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  padding-inline: var(--cf-space-6);
  padding-block: 0;
  border-radius: var(--cf-radius-md);
  background: var(--cf-color-primary);
  color: var(--cf-color-ink-inverse);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--cf-text-body);
  line-height: 1.2;
  font-weight: var(--cf-weight-medium);
  text-align: center;
  border: var(--cf-border-width-strong) solid var(--cf-color-primary);
  transition: background-color var(--cf-duration-fast) var(--cf-easing), transform var(--cf-duration-fast) var(--cf-easing);
}

.button:hover {
  background: color-mix(in srgb, var(--cf-color-primary) 90%, black);
}

.button:active {
  transform: translateY(1px);
}

.button.secondary:hover {
  background: color-mix(in srgb, var(--cf-color-primary) 6%, white);
}

.inverse .button:hover {
  background: white;
}

.inverse .button.secondary:hover {
  background: color-mix(in srgb, white 10%, var(--cf-color-primary));
}

.button.secondary {
  background: transparent;
  color: var(--cf-color-primary);
}

.inverse .button {
  background: var(--cf-color-ink-inverse);
  color: var(--cf-color-primary);
  border-color: var(--cf-color-ink-inverse);
}

.inverse .button.secondary {
  background: transparent;
  color: var(--cf-color-ink-inverse);
}

.masthead .button {
  min-block-size: 2.75rem;
  padding-inline: var(--cf-space-4);
  font-size: var(--cf-text-small);
}

/* Il cambio lingua non è una voce del menu come le altre: porta altrove la
   stessa pagina. Si distingue con una cornice, non con il solo colore (§10.7). */
.lang {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--cf-space-3);
  border: var(--cf-border);
  border-radius: var(--cf-radius-pill);
  font-weight: var(--cf-weight-medium);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.lang:hover {
  border-color: var(--cf-color-primary);
}

.inverse .lang {
  border-color: color-mix(in srgb, var(--cf-color-ink-inverse) 45%, transparent);
}

.inverse .lang:hover {
  border-color: var(--cf-color-ink-inverse);
}

/* Voce corrente: la sezione in vista sulla Home, o la pagina aperta. Il segno è
   una sottolineatura spessa, che resta visibile anche senza distinguere i
   colori. */
nav a[aria-current],
nav a.is-active {
  font-weight: var(--cf-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

/* ---- Hero ---- */

.hero {
  padding-block: 88px 72px;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--cf-space-16);
  align-items: center;
}

.hero-copy {
  max-width: 38rem;
}

/* ---- Prove reali e guide ---- */

.product-gallery {
  max-width: 64rem;
  margin-inline: auto;
}

.product-detail {
  border-bottom: var(--cf-border-subtle);
  padding-block: var(--cf-space-6);
}

.product-detail summary {
  cursor: pointer;
  color: var(--cf-color-primary);
  font-weight: var(--cf-weight-medium);
  min-height: 44px;
  align-content: center;
}

.product-detail figure {
  margin-block: var(--cf-space-4);
}

figure {
  margin: 0;
}

.product-shot {
  display: block;
  inline-size: 100%;
  border: var(--cf-border-subtle);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-card);
  background: var(--cf-color-surface);
}

figcaption {
  margin-top: var(--cf-space-3);
  color: var(--cf-color-ink-muted);
  font-size: var(--cf-text-small);
  line-height: var(--cf-leading-small);
}

.guide-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--cf-border-subtle);
}

.guide-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--cf-space-4);
  padding-block: var(--cf-space-6);
  border-bottom: var(--cf-border-subtle);
}

.guide-list a {
  font-size: var(--cf-text-h3);
  line-height: var(--cf-leading-h3);
  font-weight: var(--cf-weight-medium);
}

.guide-list p {
  margin: var(--cf-space-2) 0 0;
}

.guide-list .arrow {
  font-size: var(--cf-text-h3);
  color: var(--cf-color-primary);
}

.breadcrumbs {
  margin: 0 0 var(--cf-space-8);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-2);
  list-style: none;
  color: var(--cf-color-ink-muted);
  font-size: var(--cf-text-small);
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: var(--cf-space-2);
}

.article-header {
  max-width: 52rem;
}

.article-body {
  max-width: var(--cf-measure);
}

.article-section {
  padding-block: var(--cf-space-12);
}

.article-body h2 {
  margin-top: var(--cf-space-12);
}

.article-body h3 {
  margin-top: var(--cf-space-8);
}

.article-body > :first-child {
  margin-top: 0;
}

.callout {
  margin-block: var(--cf-space-8);
  padding: var(--cf-space-6);
  border-left: 4px solid var(--cf-color-accent);
  background: var(--cf-color-surface);
}

.callout > :last-child {
  margin-bottom: 0;
}

.source-note {
  margin-top: var(--cf-space-12);
  padding-top: var(--cf-space-6);
  border-top: var(--cf-border-subtle);
}

/* ---- Griglie ---- */

/* Le colonne sono fissate per scaglioni invece che con `auto-fit`: sei schede in
   quattro colonne lasciavano una riga con due elementi e due buchi, quattro in
   tre ne lasciavano uno solo in fondo. Tre e due dividono esattamente sei e
   quattro, quindi le righe si chiudono sempre. */
.grid {
  display: grid;
  gap: var(--cf-space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 64rem) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .grid,
  .grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  background: var(--cf-color-surface);
  border: var(--cf-border-subtle);
  border-radius: var(--cf-radius-lg);
  padding: var(--cf-space-6);
}

.inverse .card {
  background: color-mix(in srgb, var(--cf-color-ink-inverse) 8%, transparent);
  border-color: color-mix(in srgb, var(--cf-color-ink-inverse) 22%, transparent);
}

.card > :last-child,
section > .wrap > :last-child,
.column > :last-child {
  margin-bottom: 0;
}

.card svg {
  display: block;
  margin-bottom: var(--cf-space-4);
}

/* Fascia dei tre punti fermi sotto il primo schermo: una riga di respiro breve
   fra l'hero e il corpo, non una sezione a sé. */
.facts {
  padding-block: var(--cf-space-8);
  border-block: var(--cf-border-subtle);
}

.facts .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--cf-space-6);
}

.facts p {
  margin: 0;
}

/* Passi numerati. */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--cf-space-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  margin: 0;
}

@media (max-width: 52rem) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

.steps li {
  counter-increment: step;
  margin: 0;
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-bottom: var(--cf-space-3);
  border-radius: var(--cf-radius-md);
  background: var(--cf-color-primary);
  color: var(--cf-color-ink-inverse);
  font-size: var(--cf-text-small);
  font-weight: var(--cf-weight-medium);
}

/* Elenco con segno di spunta disegnato, mai affidato al solo colore (§10.7). */
.checks {
  list-style: none;
  padding: 0;
}

.checks li {
  position: relative;
  padding-left: var(--cf-space-8);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  inline-size: 14px;
  block-size: 8px;
  border-left: var(--cf-border-width-strong) solid var(--cf-color-accent);
  border-bottom: var(--cf-border-width-strong) solid var(--cf-color-accent);
  transform: rotate(-45deg);
}

.inverse .checks li::before {
  border-color: var(--cf-color-ink-inverse);
}

/* ---- Esempio di checkout: schema, non uno screenshot ---- */

.mock {
  background: var(--cf-color-surface);
  border: var(--cf-border-subtle);
  border-radius: var(--cf-radius-lg);
  padding: var(--cf-space-6);
  box-shadow: var(--cf-shadow-card);
  max-width: 100%;
  align-self: center;
}

.mock-label {
  font-size: var(--cf-text-label);
  letter-spacing: var(--cf-tracking-label);
  text-transform: uppercase;
  color: var(--cf-color-ink-muted);
  margin-bottom: var(--cf-space-2);
}

.mock-field {
  border: var(--cf-border);
  border-radius: var(--cf-radius-md);
  padding: var(--cf-space-3) var(--cf-space-4);
  font-size: var(--cf-text-small);
  background: var(--cf-color-paper);
}

.mock-field.invalid {
  border-color: var(--cf-color-accent);
  border-width: var(--cf-border-width-strong);
}

.mock-error {
  display: flex;
  gap: var(--cf-space-2);
  align-items: flex-start;
  margin-top: var(--cf-space-3);
  font-size: var(--cf-text-small);
  line-height: var(--cf-leading-small);
}

.mock-error svg {
  flex: none;
  margin-top: 0.15em;
}

/* ---- FAQ ---- */

.faq details {
  border-bottom: var(--cf-border-subtle);
  padding: var(--cf-space-4) 0;
}

.faq summary {
  cursor: pointer;
  font-weight: var(--cf-weight-medium);
  color: var(--cf-color-primary);
  font-size: var(--cf-text-h3);
  line-height: var(--cf-leading-h3);
}

.faq details p {
  margin: var(--cf-space-3) 0 0;
}

/* ---- Documenti legali ---- */

.legal h2 {
  margin-top: var(--cf-space-12);
}

.legal h2:first-of-type {
  margin-top: 0;
}

.updated {
  color: var(--cf-color-ink-muted);
  font-size: var(--cf-text-small);
}

/* ---- Piè di pagina ---- */

footer {
  padding: var(--cf-space-12) 0;
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-4) var(--cf-space-6);
  margin: 0 0 var(--cf-space-6);
  padding: 0;
  list-style: none;
}

/* Il prodotto guida la Home; il marchio resta un accento visivo. */
.home .wrap {
  max-width: 1248px;
}

.home .column {
  max-width: var(--cf-measure);
}

.home .wide-column {
  max-width: 58rem;
}

.masthead nav li {
  margin-bottom: 0;
}

.masthead nav a:not(.button, .lang) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.masthead nav a[aria-current] {
  text-decoration: underline;
}

.masthead nav ul {
  gap: var(--cf-space-4);
}

.hero-copy .label {
  color: var(--cf-color-primary);
  letter-spacing: .035em;
}

.hero .lede {
  margin-top: var(--cf-space-6);
  color: var(--cf-color-ink-muted);
  max-width: 56ch;
}

.hero .actions {
  gap: var(--cf-space-3);
}

.hero .button {
  padding-inline: var(--cf-space-4);
  font-size: var(--cf-text-small);
}

.shot-link {
  display: block;
  border-radius: var(--cf-radius-lg);
}

.shot-link:hover {
  outline: 2px solid var(--cf-color-primary);
  outline-offset: 3px;
}

.facts {
  background: var(--cf-color-paper);
  font-size: var(--cf-text-small);
}

.facts strong {
  display: block;
  color: var(--cf-color-ink);
  margin-bottom: var(--cf-space-2);
}

.product-preview {
  padding-bottom: var(--cf-space-8);
}

.steps li {
  border-top: var(--cf-border-subtle);
  padding-top: var(--cf-space-6);
}

.steps li::before {
  border-radius: var(--cf-radius-sm);
  background: var(--cf-color-paper);
  color: var(--cf-color-primary);
  border: var(--cf-border-subtle);
}

.card {
  border-radius: var(--cf-radius-md);
}

.guide-list a {
  text-decoration: none;
}

.guide-list a:hover {
  text-decoration: underline;
}

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--cf-space-16);
}

.faq summary {
  padding-block: var(--cf-space-2);
  font-size: var(--cf-text-body);
}

.faq details:first-child {
  border-top: var(--cf-border-subtle);
}

.faq details[open] {
  padding-bottom: var(--cf-space-6);
}

.pricing {
  border-block: var(--cf-border-subtle);
  background: var(--cf-color-paper);
}

.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  gap: var(--cf-space-16);
  align-items: center;
}

.trial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 3px solid var(--cf-color-primary);
  padding-left: var(--cf-space-8);
  color: var(--cf-color-primary);
}

.trial-number {
  font-size: 5rem;
  font-weight: var(--cf-weight-medium);
  line-height: 1.1;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}

.trial-card p {
  margin: var(--cf-space-6) 0 0;
  color: var(--cf-color-ink-muted);
  font-size: var(--cf-text-small);
}

footer {
  border-top: 1px solid color-mix(in srgb, white 20%, transparent);
}

@media (max-width: 64rem) {
  .home .masthead .wrap {
    gap: var(--cf-space-3);
  }

}

.hero-art svg {
  display: block;
  width: 100%;
}

.reading-progress {
  appearance: none;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border: 0;
  background: transparent;
  color: var(--cf-color-primary);
}

.reading-progress::-webkit-progress-bar {
  background: transparent;
}

.reading-progress::-webkit-progress-value {
  background: var(--cf-color-primary);
}

.reading-progress::-moz-progress-bar {
  background: var(--cf-color-primary);
}

@media (max-width: 52rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cf-space-12);
  }

  .faq,
  .pricing-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cf-space-8);
  }

  section {
    padding-block: var(--cf-space-8);
  }

  .article-section {
    padding-block: var(--cf-space-8);
  }

  section.inverse,
  .hero {
    padding-block: var(--cf-space-12);
  }

  .section-head {
    margin-bottom: var(--cf-space-6);
  }

  /* Su mobile la navigazione si apre dal pulsante Menu. */
  .masthead {
    padding-block: var(--cf-space-3);
  }

  nav ul {
    flex-wrap: wrap;
    gap: 0 var(--cf-space-3);
    font-size: .8125rem;
  }

  .masthead nav ul {
    gap: 0 var(--cf-space-3);
  }

  .masthead nav {
    max-width: 100%;
    width: 100%;
  }

  html {
    scroll-padding-top: 14rem;
  }
}

@media (max-width: 40rem) {
  .wrap {
    padding-inline: 20px;
  }

  .hero .button {
    width: 100%;
  }

  .hero .display {
    font-size: 2.25rem;
  }

  .hero .note {
    font-size: .8125rem;
  }
}

.menu-toggle {
  display: none;
}

.nav-actions {
  display: contents;
}

@media (max-width: 52rem) {
  html:has(.masthead.has-menu) {
    scroll-padding-top: 6rem;
  }

  .masthead.has-menu .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    gap: var(--cf-space-2);
    padding: 0 var(--cf-space-2);
    border: 0;
    border-radius: var(--cf-radius-md);
    background: transparent;
    color: var(--cf-color-ink);
    font: inherit;
    cursor: pointer;
  }

  .masthead.has-menu nav:not(.is-open) {
    display: none;
  }

  .masthead.has-menu .menu-toggle::after {
    content: "";
    width: 14px;
    height: 8px;
    border-block: 1.5px solid currentColor;
  }

  .masthead.has-menu .menu-toggle[aria-expanded="true"]::after {
    height: 0;
    border-bottom: 0;
  }

  .masthead.has-menu nav {
    position: absolute;
    inset: 100% 0 auto;
    padding: var(--cf-space-2) 20px var(--cf-space-4);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    background: var(--cf-color-surface);
    border-bottom: var(--cf-border-subtle);
    box-shadow: 0 12px 20px rgb(26 33 28 / 8%);
  }

  .masthead.has-menu nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--cf-space-4);
    font-size: .875rem;
  }

  .masthead.has-menu nav a:not(.lang, .button) {
    min-height: 32px;
    text-decoration: none;
  }

  .masthead.has-menu nav a[aria-current] {
    font-weight: var(--cf-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .masthead.has-menu nav .nav-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--cf-space-2);
    padding-top: var(--cf-space-2);
    border-top: var(--cf-border-subtle);
  }

  .masthead.has-menu nav .lang {
    min-block-size: 32px;
    border: 0;
    border-radius: 0;
    padding-inline: 0;
  }

  .masthead.has-menu nav .button {
    min-block-size: 32px;
    padding-inline: var(--cf-space-3);
    font-size: .8125rem;
  }
}