/* ==========================================================================
   IL BANCO · design system of the public Spiegamelo Facile hub
   --------------------------------------------------------------------------
   One idea: objects on a workbench. Pale mint wall, forest green ink,
   one orange for actions, paper cards and a wooden bench.

   Load order: app.css, readability.css, redesign.css, hub.css, atlante.css,
   banco.css, then banco-catalog.css / banco-finder.css / banco-content.css.
   Everything here is scoped to body.sf-banco. Page stylesheets extend these
   components, they never redefine tokens.

   Sections
     0. Fonts
     1. Tokens
     2. Base: canvas, type, links
     3. Shell: ribbon, header, brand, navigation, mobile menu
     4. Footer
     5. Buttons
     6. Forms: fields, checkbox, newsletter signup
     7. Chips, filters, tabs
     8. Labels and badges
     9. Surfaces: paper panel, tool card, content rows, disclosure
    10. Page head, section heading, empty state
    11. Home
    12. Atlante leftovers (colour only, until the page stylesheets land)
    13. Focus and motion
    14. Responsive
   ========================================================================== */


/* 0. Fonts ---------------------------------------------------------------- */
/* Both files were already in the repository. Self hosted, no CDN. */

@font-face {
  font-family: "Banco Sans";
  src: url(banco-manrope.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Banco Hand";
  src: url(banco-caveat.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}


/* 1. Tokens --------------------------------------------------------------- */

.sf-banco {
  /* Colour: wall, ink, action, bench */
  --banco-canvas: #eaf0e5;
  --banco-canvas-deep: #dfe8d8;
  --banco-sage: #d3dfc8;
  --banco-ink: #102f26;
  --banco-ink-soft: #2f4a3c;
  --banco-muted: #4e6155;
  --banco-line: #cbd3c5;
  --banco-line-strong: #93a590;
  --banco-paper: #fffaf1;
  --banco-paper-warm: #f6eddf;
  --banco-wood: #e2c5a1;
  --banco-wood-deep: #d1b28c;
  --banco-wood-ink: #5a4023;
  --banco-cta: #cd3c08;
  --banco-cta-hover: #a93105;
  --banco-cta-soft: #f7e4d5;
  --banco-cta-ink: #802c0d;
  --banco-marker: #ef8951;
  --banco-good: #1f4d33;
  --banco-good-soft: #dcebd6;
  --banco-amber-soft: #f3e6d2;
  --banco-amber-ink: #6b4515;

  /* Type */
  /* No "Manrope" in the stack: that family is the 165 KB TTF of the old site and the browser fetched it for any glyph the subset lacks */
  --banco-font: "Banco Sans", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --banco-hand: "Banco Hand", "Segoe Print", "Bradley Hand", cursive;
  --banco-text-xs: 12px;
  --banco-text-sm: 14px;
  --banco-text-base: 17px;
  --banco-text-lg: 19px;
  --banco-h3: 21px;
  --banco-h2: clamp(26px, 2.5vw, 34px);
  --banco-h1: clamp(36px, 4.4vw, 60px);
  --banco-display: clamp(38px, 4.5vw, 66px);

  /* Shape: fields and buttons 12, cards 18, panels 26, chips are pills */
  --banco-r-field: 12px;
  --banco-r-card: 18px;
  --banco-r-panel: 26px;
  --banco-r-pill: 999px;

  /* Natural soft shadows, tinted with the bench, never pure black */
  --banco-shadow-rest: 0 1px 2px #2b3a2a14, 0 10px 22px -12px #2b3a2a2e;
  --banco-shadow-lift: 0 2px 4px #2b3a2a14, 0 20px 34px -14px #2b3a2a40;
  --banco-shadow-wood: 0 2px 3px #5c3d1a24, 0 16px 28px -12px #5c3d1a59;

  /* Wood grain for the bench: two faint sets of lines, material not ornament */
  --banco-grain: repeating-linear-gradient(181deg, #a9763f12 0 1px, transparent 1px 9px), repeating-linear-gradient(179deg, #fff3 0 2px, transparent 2px 31px);

  /* Spacing scale */
  --banco-s1: 4px;
  --banco-s2: 8px;
  --banco-s3: 12px;
  --banco-s4: 16px;
  --banco-s5: 24px;
  --banco-s6: 32px;
  --banco-s7: 48px;
  --banco-s8: 64px;
  --banco-s9: 96px;

  /* Layout */
  --banco-gutter: 40px;
  --banco-max: 1280px;
  --banco-ease: cubic-bezier(.22, 1, .36, 1);

  /* Map the older Atlante and hub variables onto Banco, so inherited rules
     pick up the right colours and fonts without a rewrite. */
  --sf-ink: var(--banco-ink);
  --sf-blue: var(--banco-cta);
  --sf-soft: var(--banco-canvas-deep);
  --sf-line: var(--banco-line);
  --sf-muted: var(--banco-muted);
  --sf-font: var(--banco-font);
  --sf-display: var(--banco-font);
  --sf-gradient: var(--banco-cta);
  --ink: var(--banco-ink);
  --muted: var(--banco-muted);
  --line: var(--banco-line);
  --accent: var(--banco-cta);
  --paper: var(--banco-paper);
  --soft: var(--banco-canvas-deep);
  --bg: var(--banco-canvas);
  --radius: var(--banco-r-field);
  --shadow: var(--banco-shadow-rest);
}


/* 2. Base ----------------------------------------------------------------- */

body.sf-banco {
  background: var(--banco-canvas);
  color: var(--banco-ink);
  font: 500 var(--banco-text-base)/1.6 var(--banco-font);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
}

.sf-banco :is(h1, h2, h3, h4) {
  font-family: var(--banco-font);
  font-weight: 800;
  color: var(--banco-ink);
  text-wrap: balance;
}

.sf-banco h1 {
  font-size: var(--banco-h1);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.sf-banco h2 {
  font-size: var(--banco-h2);
  line-height: 1.14;
  letter-spacing: -.025em;
}

.sf-banco h3 {
  font-size: var(--banco-h3);
  line-height: 1.25;
  letter-spacing: -.015em;
}

.sf-banco p {
  text-wrap: pretty;
}

.sf-banco strong,
.sf-banco b {
  font-weight: 750;
}

/* The marker: the emphasised part of a headline keeps the ink colour and gets
   an orange underline, like a pen stroke. It replaces the blue second line. */
.sf-banco em,
.sf-banco .sf-page-head h1 em,
.sf-banco .sf-welcome h1 > span,
.sf-banco .sf-compare-start h1 span,
.sf-banco .banco-hero h1 span {
  font-style: normal;
  color: var(--banco-ink);
  -webkit-text-fill-color: currentColor;
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: .11em;
  text-underline-offset: .13em;
  text-decoration-skip-ink: none;
}

.sf-banco p em,
.sf-banco li em {
  font-style: italic;
  text-decoration: none;
}

.sf-banco a {
  color: inherit;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Inline links inside running text */
.sf-banco :is(p, li, dd) > a:not(.button):not([class]) {
  color: var(--banco-cta-hover);
  text-decoration: underline;
  text-decoration-color: #cd3c0866;
}

.sf-banco :is(p, li, dd) > a:not(.button):not([class]):hover {
  text-decoration-color: currentColor;
}

/* Action links: "leggi", "vedi tutto" and similar */
.sf-banco :is(.sf-text-link, .banco-more, .text-link, .atlas-text-link) {
  color: var(--banco-cta-hover);
  font-weight: 750;
  font-size: var(--banco-text-sm);
  text-decoration: none;
  border-bottom: 0;
}

.sf-banco :is(.sf-text-link, .banco-more, .text-link, .atlas-text-link):hover {
  text-decoration: underline;
}

.sf-banco ::selection {
  background: #ef895155;
}

.sf-banco .muted,
.sf-banco .fine {
  color: var(--banco-muted);
}

.sf-banco hr {
  border: 0;
  border-top: 1px solid var(--banco-line);
}


/* 3. Shell ---------------------------------------------------------------- */

.sf-banco > main,
.sf-banco > .sf-footer {
  margin-left: 0;
}

.sf-banco > main {
  max-width: none;
}

.sf-banco .wrap {
  width: calc(100% - var(--banco-gutter) * 2);
  max-width: var(--banco-max);
  margin-inline: auto;
}

.sf-banco .wrap:is(.hf-finder, .hf-report) {
  max-width: 740px;
}

.sf-banco .stage-ribbon {
  margin: 0;
  padding: 6px 20px;
  border: 0;
  background: var(--banco-canvas-deep);
  color: var(--banco-muted);
  font-size: 11px;
  text-align: center;
}

body.sf-banco .sf-header {
  position: relative;
  inset: auto;
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  width: calc(100% - var(--banco-gutter) * 2) !important;
  max-width: var(--banco-max) !important;
  height: auto;
  min-height: 84px;
  margin: 0 auto !important;
  padding: 16px 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Brand: wordmark plus two orange pen strokes. No mascot, no photo. */
.sf-banco .sf-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 22px;
  color: var(--banco-ink);
  font: 800 24px/1 var(--banco-font);
  letter-spacing: -.04em;
  white-space: nowrap;
  text-decoration: none;
}

.sf-banco .sf-brand img {
  display: none;
}

.sf-banco .sf-brand::before,
.sf-banco .sf-brand::after {
  content: "";
  position: absolute;
  right: 0;
  height: 4px;
  border-radius: 4px;
  background: var(--banco-cta);
}

.sf-banco .sf-brand::before {
  top: 1px;
  width: 13px;
  transform: rotate(-38deg);
  transform-origin: right center;
}

.sf-banco .sf-brand::after {
  top: 11px;
  right: -3px;
  width: 11px;
}

.sf-banco .sf-desktop-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.sf-banco .sf-desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--banco-r-pill);
  color: var(--banco-ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .18s var(--banco-ease);
}

.sf-banco .sf-desktop-nav a:hover {
  background: var(--banco-canvas-deep);
  color: var(--banco-ink);
}

.sf-banco .sf-desktop-nav a[aria-current] {
  background: var(--banco-ink);
  color: var(--banco-paper);
}

/* "Cosa usare" is the hero product: it sits on its own paper tab. */
.sf-banco .sf-desktop-nav .sf-nav-feature {
  gap: 6px;
  margin: 0 4px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--banco-r-pill);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
  color: var(--banco-ink);
  font-weight: 800;
}

.sf-banco .sf-desktop-nav .sf-nav-feature:hover {
  background: #fff;
  color: var(--banco-ink);
}

.sf-banco .sf-desktop-nav .sf-nav-feature[aria-current] {
  background: var(--banco-ink);
  color: var(--banco-paper);
}

.sf-banco .sf-desktop-nav .sf-nav-feature span {
  color: var(--banco-cta);
}

.sf-banco .sf-desktop-nav .sf-nav-feature[aria-current] span {
  color: var(--banco-marker);
}

.sf-banco .sf-header-cta {
  flex: none;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 15px;
}

.sf-banco .sf-atlas-signature {
  display: none;
}

/* Mobile menu: a paper sheet that drops from the header */
.sf-banco .sf-mobile-menu {
  display: none;
}

.sf-banco .sf-mobile-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--banco-line-strong);
  border-radius: var(--banco-r-pill);
  background: var(--banco-paper);
  color: var(--banco-ink);
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.sf-banco .sf-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.sf-banco .sf-mobile-menu summary span {
  display: inline-block;
  color: var(--banco-cta);
  font-size: 20px;
  line-height: 1;
  transition: transform .2s var(--banco-ease);
}

.sf-banco .sf-mobile-menu[open] summary span {
  transform: rotate(45deg);
}

.sf-banco .sf-mobile-menu nav {
  position: absolute;
  top: calc(100% - 4px);
  right: 0;
  left: auto;
  width: min(100%, 420px); /* a sheet, not a banner: full width only on phones */
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--banco-line);
  border-radius: var(--banco-r-card);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-lift);
}

body.sf-banco .sf-mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--banco-r-field);
  background: none;
  color: var(--banco-ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

body.sf-banco .sf-mobile-menu nav a:hover {
  background: var(--banco-canvas);
}

body.sf-banco .sf-mobile-menu nav a[aria-current] {
  background: var(--banco-ink);
  color: var(--banco-paper);
}

body.sf-banco .sf-mobile-menu nav .sf-nav-feature {
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--banco-r-field);
  font-weight: 800;
  background: var(--banco-canvas);
  color: var(--banco-ink);
}

.sf-banco .sf-mobile-menu nav .sf-nav-feature span {
  color: var(--banco-cta);
}

/* Last row of the sheet: the one orange action, same as the desktop header button */
body.sf-banco .sf-mobile-menu nav .sf-menu-signup {
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  background: var(--banco-cta);
  box-shadow: 0 1px 0 #7a2405;
  color: #fff;
  font-weight: 750;
}

body.sf-banco .sf-mobile-menu nav .sf-menu-signup:hover {
  background: var(--banco-cta-hover);
}


/* 4. Footer ---------------------------------------------------------------- */
/* The page ends on the edge of the bench: a wooden lip, then warm paper.
   The box-shadow plus clip-path pair paints the band edge to edge while the
   content stays inside the page width. */

body.sf-banco > .sf-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  gap: 8px 40px;
  align-items: start;
  width: calc(100% - var(--banco-gutter) * 2);
  max-width: var(--banco-max);
  margin: 0 auto;
  /* hub.css pins the footer margin with !important */
  margin-top: var(--banco-s9) !important;
  padding: 46px 0 34px;
  border: 0;
  background: var(--banco-paper-warm);
  box-shadow: 0 0 0 100vmax var(--banco-paper-warm);
  clip-path: inset(0 -100vmax);
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-sm);
}

body.sf-banco > .sf-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 12px;
  margin-left: -50vw;
  border-bottom: 2px solid var(--banco-wood-deep);
  background: var(--banco-wood);
}

.sf-banco .sf-footer .sf-footer-brand {
  margin: 0;
  color: var(--banco-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.035em;
}

.sf-banco .sf-footer .sf-atlas-footer-line {
  grid-column: 1;
  margin: 0;
  max-width: 34ch;
  color: var(--banco-ink-soft);
  font-size: 15px;
}

.sf-banco .sf-footer .sf-footer-credit {
  grid-column: 1;
  margin: 0;
  font-size: var(--banco-text-sm);
}

.sf-banco .sf-footer nav {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px 34px;
  align-content: start;
}

.sf-banco .sf-footer nav a {
  color: var(--banco-ink);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}

.sf-banco .sf-footer nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
}

.sf-banco .sf-footer .fine {
  grid-column: 1 / -1;
  width: auto;
  margin: 14px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e3d3bb;
  color: var(--banco-muted);
  font-size: var(--banco-text-xs);
}


/* 5. Buttons --------------------------------------------------------------- */

.sf-banco .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--banco-r-field);
  box-shadow: none;
  font: 750 16px/1.2 var(--banco-font);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--banco-ease), transform .18s var(--banco-ease), box-shadow .18s var(--banco-ease);
}

.sf-banco .button.primary,
.sf-banco .button.dark {
  border-color: var(--banco-cta);
  background: var(--banco-cta);
  box-shadow: 0 1px 0 #7a2405, 0 8px 16px -10px #cd3c0899;
  color: #fff;
}

.sf-banco .button.primary:hover,
.sf-banco .button.dark:hover {
  border-color: var(--banco-cta-hover);
  background: var(--banco-cta-hover);
  box-shadow: 0 1px 0 #6a1f04, 0 10px 18px -10px #cd3c08b3;
  color: #fff;
}

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

.sf-banco .button.secondary,
.sf-banco .button:not(.primary):not(.dark):not(.secondary) {
  border-color: var(--banco-line-strong);
  background: var(--banco-paper);
  color: var(--banco-ink);
}

.sf-banco .button.secondary:hover,
.sf-banco .button:not(.primary):not(.dark):not(.secondary):hover {
  border-color: var(--banco-ink);
  background: #fff;
  box-shadow: none;
  color: var(--banco-ink);
}

.sf-banco .button.small {
  min-height: 40px;
  padding: 8px 14px;
  font-size: var(--banco-text-sm);
}

.sf-banco .button[disabled],
.sf-banco .button[aria-disabled=true] {
  opacity: .55;
  cursor: not-allowed;
}

.sf-banco .text-button {
  color: var(--banco-cta-hover);
  font-family: var(--banco-font);
  font-weight: 700;
}


/* 6. Forms ------------------------------------------------------------------ */

.sf-banco :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  min-height: 48px;
  border: 1px solid var(--banco-line-strong);
  border-radius: var(--banco-r-field);
  background-color: #fff;
  color: var(--banco-ink);
  font: 500 16px/1.4 var(--banco-font);
}

.sf-banco :is(input, textarea)::placeholder {
  color: #5b6d61;
  opacity: 1;
}

.sf-banco :is(input:not([type=checkbox]):not([type=radio]), select, textarea):hover {
  border-color: var(--banco-ink-soft);
}

.sf-banco :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  border-color: var(--banco-ink);
  outline: 3px solid #cd3c0840;
  outline-offset: 0;
}

.sf-banco label {
  color: var(--banco-ink);
  font-family: var(--banco-font);
}

.sf-banco input[type=checkbox],
.sf-banco input[type=radio] {
  accent-color: var(--banco-cta);
}

/* Newsletter signup: used on the home, /newsletter and inside gates */
.sf-banco .sf-signup {
  max-width: none;
  margin: 0;
}

.sf-banco .sf-signup-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--banco-line-strong);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.sf-banco .sf-signup-row:focus-within {
  border-color: var(--banco-ink);
  box-shadow: 0 0 0 3px #cd3c0833;
}

body.sf-banco .sf-signup-row input:not([type=checkbox]) {
  flex: 1;
  text-align: left;
  width: 0;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  font-size: 16px;
}

body.sf-banco .sf-signup-row input:not([type=checkbox]):focus,
body.sf-banco .sf-signup-row input:not([type=checkbox]):focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

body.sf-banco .sf-signup-row .button {
  flex: none;
  width: auto;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 15px;
}

.sf-banco .sf-signup-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  max-width: 520px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.sf-banco .sf-signup-consent input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  accent-color: var(--banco-cta);
}

.sf-banco .sf-signup-consent label {
  margin: 0;
  color: var(--banco-ink-soft);
  font: 500 13px/1.45 var(--banco-font);
  letter-spacing: 0;
}

.sf-banco :is(.sf-signup-consent, .sf-gate-consent) a {
  color: var(--banco-ink);
  font-weight: 700;
  text-decoration: underline;
}

.sf-banco .sf-signup-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--banco-r-field);
  background: var(--banco-good-soft);
  color: var(--banco-good);
  font-size: var(--banco-text-sm);
}

.sf-banco .sf-signup-status:empty {
  display: none;
}

.sf-banco .error-message,
.sf-banco [role=alert]:not(:empty) {
  border-radius: var(--banco-r-field);
}


/* 7. Chips, filters, tabs ----------------------------------------------------- */
/* One chip: a paper pill. Selected = ink. Used by topic filters, finder
   suggestions, budget shortcuts and the home quick start. */

.sf-banco :is(.sf-filter a, .hf-chips button, .banco-chip) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--banco-line-strong);
  border-radius: var(--banco-r-pill);
  background: var(--banco-paper);
  color: var(--banco-ink);
  font: 650 15px/1.2 var(--banco-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--banco-ease), border-color .18s var(--banco-ease), transform .18s var(--banco-ease);
}

.sf-banco :is(.sf-filter a, .hf-chips button, .banco-chip):hover {
  border-color: var(--banco-ink);
  background: #fff;
  color: var(--banco-ink);
}

.sf-banco :is(.sf-filter a[aria-current], .hf-chips button[aria-pressed=true], .banco-chip[aria-current], .banco-chip[aria-pressed=true]) {
  border-color: var(--banco-ink);
  background: var(--banco-ink);
  color: var(--banco-paper);
}

.sf-banco .sf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tabs (classifica modes and similar): same ink, underline marker */
.sf-banco :is(.rank-tabs, .tabs) a {
  color: var(--banco-ink-soft);
  font-weight: 700;
  text-decoration: none;
}

.sf-banco :is(.rank-tabs, .tabs) a[aria-current] {
  border-color: var(--banco-cta);
  color: var(--banco-ink);
}


/* 8. Labels and badges -------------------------------------------------------- */
/* Kicker: a quiet sentence-case label, never tracked capitals. Use it at most
   once per page. */

.sf-banco :is(.sf-kicker, .eyebrow, .sf-page-head .eyebrow, .sf-course-label, .atlas-section-name, .hf-eyebrow) {
  color: var(--banco-cta-hover);
  font: 750 var(--banco-text-sm)/1.3 var(--banco-font);
  letter-spacing: 0;
  text-transform: none;
}

/* Tag: the little printed label on an object */
.sf-banco .banco-tag {
  display: inline-block;
  color: var(--banco-ink-soft);
  font: 800 var(--banco-text-xs)/1.2 var(--banco-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-banco .badge {
  padding: 5px 10px;
  border-radius: var(--banco-r-pill);
  background: var(--banco-canvas-deep);
  color: var(--banco-ink);
  font: 700 var(--banco-text-xs)/1.4 var(--banco-font);
}

.sf-banco .badge.documented {
  background: var(--banco-good-soft);
  color: var(--banco-good);
}

.sf-banco .italy {
  color: var(--banco-ink);
  font-size: var(--banco-text-xs);
  font-weight: 750;
}

/* Company facts. Every badge is a link to its source: keep it a link. */
.sf-banco .company-badges {
  gap: 8px 10px;
  font-family: var(--banco-font);
}

.sf-banco .company-entity {
  color: var(--banco-muted);
  font-size: var(--banco-text-xs);
  font-weight: 600;
}

.sf-banco .company-badge {
  padding: 6px 11px;
  border: 1px solid var(--banco-line);
  border-radius: var(--banco-r-pill);
  background: var(--banco-canvas);
  color: var(--banco-ink);
  font-size: var(--banco-text-xs);
  font-weight: 700;
}

.sf-banco .company-tone-ink {
  border-color: var(--banco-line);
  background: var(--banco-canvas);
  color: var(--banco-ink);
}

.sf-banco .company-tone-blue {
  border-color: #bcd3b6;
  background: var(--banco-good-soft);
  color: var(--banco-good);
}

.sf-banco .company-tone-violet {
  border-color: #e2cda9;
  background: var(--banco-amber-soft);
  color: var(--banco-amber-ink);
}

.sf-banco .company-more,
.sf-banco .company-source,
.sf-banco .company-expand {
  color: var(--banco-cta-hover);
  font-weight: 650;
}

.sf-banco .company-unknown {
  color: var(--banco-muted);
  font-weight: 600;
}

.sf-banco .company-profile {
  border-color: var(--banco-line);
}

.sf-banco .company-profile > summary:hover {
  color: var(--banco-cta-hover);
}

.sf-banco :is(.company-fact-meta, .company-scope, .company-missing-note) {
  color: var(--banco-muted);
}

.sf-banco .news-company-context {
  border-color: var(--banco-line);
}

.sf-banco .news-company-tool {
  color: var(--banco-ink);
  font-weight: 750;
}


/* 9. Surfaces ----------------------------------------------------------------- */
/* Paper panel: the large sheet a page puts its main content on. */

.sf-banco :is(.sf-welcome, .sf-compare-start, .sf-news-list, .sf-article, .sf-course, .sf-tool-intro, .sf-guide-directory, .sf-gate-panel, .sf-quick-finder, .sf-audit-invite, .banco-panel) {
  border: 0;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
}

/* A list nested inside a panel is not a second panel */
.sf-banco .sf-news-list .sf-news-list {
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Tool card: the shared object of catalogue, category, sector and trend pages */
/* Breakpoint free: 3 columns on desktop, 2 on tablets, 1 on phones */
.sf-banco .tool-grid,
.sf-banco .tool-grid.four {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 20px;
}

.sf-banco .tool-card {
  padding: 22px;
  border: 0;
  border-radius: var(--banco-r-card);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
  transition: transform .22s var(--banco-ease), box-shadow .22s var(--banco-ease);
}

.sf-banco .tool-card:hover {
  border: 0;
  box-shadow: var(--banco-shadow-lift);
  transform: translateY(-3px);
}

.sf-banco .card-top {
  gap: 14px;
  margin-bottom: 16px;
  color: var(--banco-ink);
  text-decoration: none;
}

.sf-banco .card-top h3 {
  margin: 0 0 3px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.sf-banco .card-top .muted {
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
  font-weight: 600;
}

.sf-banco .card-top:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sf-banco .card-arrow {
  color: var(--banco-cta);
  font-size: 18px;
}

.sf-banco .tool-card > p {
  margin-bottom: 16px;
  color: var(--banco-ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

.sf-banco .tool-logo {
  border: 1px solid #ece3d2;
  border-radius: 14px;
  background: #fff;
  color: var(--banco-ink);
  font-weight: 800;
}

.sf-banco .tool-logo.large {
  border-radius: 20px;
}

.sf-banco .card-bottom {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--banco-line);
}

.sf-banco .card-bottom .fine {
  font-size: var(--banco-text-xs);
}

/* Content rows: news, guides, latest articles */
.sf-banco .sf-news-list > article,
.sf-banco .sf-library article,
.sf-banco .sf-more-content,
.sf-banco .sf-article-by,
.sf-banco .sf-article-next {
  border-color: var(--banco-line);
}

.sf-banco .sf-card-meta {
  color: var(--banco-muted);
  font-size: var(--banco-text-xs);
}

.sf-banco .sf-card-meta > span {
  color: var(--banco-cta-hover);
  font-weight: 750;
}

.sf-banco :is(.sf-news-list h2, .sf-library h3, .sf-guide-list h2, .sf-guide-list h3) {
  font-size: var(--banco-h3);
  line-height: 1.25;
  letter-spacing: -.015em;
}

.sf-banco :is(.sf-news-list h2, .sf-library h3) a {
  text-decoration: none;
}

.sf-banco :is(.sf-news-list h2 a, .sf-library a, .sf-guide-list > a h2, .sf-guide-list > a h3, .sf-news-row h3):hover,
.sf-banco .sf-guide-list > a:hover :is(h2, h3),
.sf-banco .sf-news-row:hover h3 {
  color: var(--banco-ink);
  text-decoration: underline;
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
}

.sf-banco .sf-source {
  color: var(--banco-muted);
}

.sf-banco .sf-source a,
.sf-banco .sf-compact-heading > a {
  color: var(--banco-cta-hover);
  font-weight: 750;
}

/* Disclosure: "altre notizie", FAQ, tool facts */
.sf-banco details > summary {
  cursor: pointer;
}

.sf-banco .sf-more-content > summary {
  color: var(--banco-cta-hover);
  font-weight: 750;
}


/* 10. Page head, section heading, empty state ---------------------------------- */

.sf-banco .sf-page-head {
  /* hub.css caps this block at 1000px with !important and centres it */
  max-width: var(--banco-max) !important;
  padding: var(--banco-s7) 0 var(--banco-s6);
  text-align: left;
}

.sf-banco .sf-page-head h1 {
  max-width: 17ch;
  margin-inline: 0;
  font-size: var(--banco-h1);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.sf-banco .sf-page-head p {
  max-width: 56ch;
  margin-inline: 0;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-lg);
}

.sf-banco .sf-page-head .sf-filter {
  justify-content: flex-start;
}

.sf-banco :is(.section-heading, .banco-section-heading) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--banco-s5);
}

.sf-banco :is(.section-heading, .banco-section-heading) h2 {
  margin: 0;
}

/* Empty state: say what is missing and where to go, on a dashed paper slip */
.sf-banco :is(.sf-empty, .empty-state, .banco-empty) {
  padding: var(--banco-s7) var(--banco-s5);
  border: 2px dashed var(--banco-line-strong);
  border-radius: var(--banco-r-card);
  background: none;
  box-shadow: none;
  text-align: center;
}

.sf-banco :is(.sf-empty, .empty-state, .banco-empty) :is(h2, h3) {
  margin: 0 0 10px;
  font-size: var(--banco-h3);
}

.sf-banco .compare-tray {
  border-radius: var(--banco-r-pill);
  background: var(--banco-ink);
  box-shadow: var(--banco-shadow-lift);
}

.sf-banco .toast {
  border-radius: var(--banco-r-field);
  background: var(--banco-ink);
  color: var(--banco-paper);
}


/* 11. Home ---------------------------------------------------------------------- */
/* The hero is a wall and a bench top. The photo stands on the bench, its wall
   fades into the page and its table runs into the wooden band. */

.banco-hero {
  --banco-img: clamp(440px, min(45vw, 72vh), 640px);
  --banco-table: calc(var(--banco-img) * .925 * .3);
  position: relative;
  padding: 20px 0 34px;
}

.banco-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--banco-table) + 34px);
  border-top: 1px solid var(--banco-wood-deep);
  background: var(--banco-grain), var(--banco-wood);
}

.banco-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--banco-img);
  gap: 0 40px;
  align-items: stretch;
  min-height: calc(var(--banco-img) * .925);
}

.banco-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-width: 0;
}

.banco-eyebrow {
  margin: 12px 0 18px;
  color: var(--banco-ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sf-banco .banco-hero h1 {
  margin: 0 0 22px;
  font-size: var(--banco-display);
  line-height: 1.04;
  letter-spacing: -.04em;
}

.banco-hero h1 span {
  white-space: nowrap;
}

.banco-lead {
  max-width: 30em;
  margin: 0;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-lg);
  line-height: 1.5;
}

/* The signup is an object too: a paper card lying on the bench */
.banco-signup {
  position: relative;
  max-width: 540px;
  padding: 16px 18px 14px;
  border-radius: var(--banco-r-card);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-wood);
}

.banco-signup .banco-signup-note {
  margin: 10px 0 0;
  color: var(--banco-muted);
  font-size: 13px;
}

.banco-visual {
  position: relative;
  align-self: end;
  min-width: 0;
  margin-right: -40px;
}

/* The whole photo is shown, square, so the box stands on its base with its contact shadow.
   The last 7.5% hangs below the layout box (negative margin) and lies on the wooden band:
   the file itself blends its table into --banco-wood there, the mask only feathers the
   last few pixels. Wall side: soft fade on the left and top, a short one on the right. */
.banco-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: -7.5%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 96.5%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 95%, transparent 99.5%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 96.5%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 95%, transparent 99.5%);
  mask-composite: intersect;
}

.banco-paper-note {
  position: absolute;
  bottom: 7%;
  left: -4%;
  padding: 12px 20px 14px;
  background: #fff6dc;
  box-shadow: 0 1px 1px #5c3d1a33, 0 10px 16px -8px #5c3d1a66;
  color: var(--banco-ink);
  font: 700 25px/1.05 var(--banco-hand);
  transform: rotate(-5deg);
}

/* Bench: Cosa usare is the big object, the other entries sit beside it */
.banco-bench {
  padding: 10px 0 58px;
  border-bottom: 2px solid var(--banco-wood-deep);
  background: var(--banco-grain), var(--banco-wood);
}

.banco-bench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.banco-finder {
  display: flex;
  flex-direction: column;
  padding: 34px 36px 30px;
  border-radius: var(--banco-r-panel);
  background: var(--banco-ink);
  box-shadow: var(--banco-shadow-wood);
  color: var(--banco-paper);
}

.sf-banco .banco-finder .banco-tag {
  color: #bfe0b4;
}

.sf-banco .banco-finder h2 {
  max-width: 16ch;
  margin: 14px 0 12px;
  color: var(--banco-paper);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.banco-finder > p {
  max-width: 46ch;
  margin: 0 0 22px;
  color: #d9e6d3;
  font-size: var(--banco-text-base);
}

.banco-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.sf-banco .banco-finder .banco-chip {
  border-color: #ffffff38;
  background: #ffffff14;
  color: var(--banco-paper);
}

.sf-banco .banco-finder .banco-chip:hover {
  border-color: var(--banco-paper);
  background: var(--banco-paper);
  color: var(--banco-ink);
  transform: translateY(-1px);
}

.banco-finder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: auto;
}

.sf-banco .banco-finder-catalog {
  color: var(--banco-paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #ffffff66;
}

.sf-banco .banco-finder-catalog:hover {
  text-decoration-color: var(--banco-marker);
}

.banco-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #ffffff24;
  color: #d9e6d3;
  font-size: var(--banco-text-sm);
}

.banco-popular > span {
  margin-right: 6px;
}

.banco-popular a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff;
  transition: transform .2s var(--banco-ease);
}

.banco-popular a:hover {
  transform: translateY(-3px) rotate(-3deg);
}

.banco-popular img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: contain;
}

.banco-shelf {
  display: grid;
  gap: 14px;
}

.banco-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  align-content: center;
  padding: 22px 24px;
  border-radius: var(--banco-r-card);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-wood);
  color: var(--banco-ink);
  text-decoration: none;
  transition: transform .22s var(--banco-ease), box-shadow .22s var(--banco-ease);
}

.banco-entry:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 4px #5c3d1a24, 0 24px 34px -14px #5c3d1a73;
}

.banco-entry-audit {
  background: var(--banco-sage);
}

.banco-entry-guides {
  background: var(--banco-paper-warm);
}

.sf-banco .banco-entry h3 {
  grid-column: 1;
  margin: 0;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.banco-entry p {
  grid-column: 1;
  margin: 0;
  color: var(--banco-ink-soft);
  font-size: 15px;
  line-height: 1.45;
}

.banco-entry-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--banco-ink);
  color: var(--banco-paper);
  font-size: 18px;
  transition: background-color .2s var(--banco-ease);
}

.banco-entry:hover .banco-entry-arrow {
  background: var(--banco-cta);
}

/* Latest reading: one lead story and a short list */
.banco-latest {
  padding: var(--banco-s8) 0 0;
}

.banco-latest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px 48px;
  align-items: start;
}

.banco-story {
  display: block;
  color: var(--banco-ink);
  text-decoration: none;
}

.banco-story-topic {
  display: block;
  margin-bottom: 8px;
  color: var(--banco-cta-hover);
  font-size: var(--banco-text-sm);
  font-weight: 750;
}

.sf-banco .banco-story h3 {
  margin: 0;
  font-size: var(--banco-h3);
  line-height: 1.25;
}

.banco-story:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.banco-story-lead {
  padding: 30px 32px;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
  transition: transform .22s var(--banco-ease), box-shadow .22s var(--banco-ease);
}

.banco-story-lead:hover {
  transform: translateY(-3px);
  box-shadow: var(--banco-shadow-lift);
}

.sf-banco .banco-story-lead h3 {
  font-size: clamp(24px, 2.3vw, 31px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.banco-story-lead p {
  margin: 14px 0 0;
  color: var(--banco-ink-soft);
  font-size: 16px;
}

.banco-story-list {
  display: grid;
}

.banco-story-list .banco-story {
  padding: 20px 0;
  border-bottom: 1px solid var(--banco-line);
}

.banco-story-list .banco-story:first-child {
  padding-top: 6px;
}

.banco-story-list .banco-story:last-child {
  border-bottom: 0;
}


/* 12. Atlante leftovers ------------------------------------------------------------ */
/* Colour and radius only, so no page shows blue or violet while its own Banco
   stylesheet is being written. Layout stays with the page stylesheets. */

.sf-banco :is(.sf-catalog-paths, .sf-audit-next strong, .sf-audit-next > span:last-child) {
  color: var(--banco-cta-hover);
}

.sf-banco .sf-audit-next,
.sf-banco .sf-catalog-paths a {
  border-color: var(--banco-line);
}

.sf-banco .sf-newsletter-preview {
  border: 0;
  border-radius: var(--banco-r-card);
  background: var(--banco-wood);
  box-shadow: none;
}

.sf-banco .sf-newsletter-window {
  border-radius: var(--banco-r-field);
  box-shadow: var(--banco-shadow-wood);
}

.sf-banco .sf-preview-caption,
.sf-banco .sf-preview-caption strong {
  color: var(--banco-wood-ink);
}

.sf-banco .sf-welcome {
  padding-top: var(--banco-s7);
}

.sf-banco .sf-course-image {
  border-radius: var(--banco-r-card);
}

.sf-banco .sf-blur-circle {
  border-color: var(--banco-cta);
}

.sf-banco .sf-gate-check,
.sf-banco .sf-gate-panel #membership-status {
  background: var(--banco-good-soft);
  color: var(--banco-good);
}

.sf-banco .hero-v4 .choice-visual {
  border-color: var(--banco-line);
  background: var(--banco-canvas-deep);
}

/* Filter bars (catalogue, ranking): a quiet tray, never a square grey box */
.sf-banco :is(.filters, .filter-bar) {
  border: 0;
  border-radius: var(--banco-r-card);
  background: var(--banco-canvas-deep);
}

.sf-banco :is(.rank-row, .score-details, .optional-fields) {
  border-color: var(--banco-line);
  border-radius: var(--banco-r-card);
}

/* Tool page */
.sf-banco :is(.sf-tool-compare, .sf-tool-expand, .sf-tool-source, .sf-tool-source-list a, .sf-tool-alternatives a > span:last-child) {
  color: var(--banco-cta-hover);
}

.sf-banco .sf-tool-disclosure > summary:hover {
  color: var(--banco-cta-hover);
}

.sf-banco :is(.sf-tool-description, .sf-tool-disclosure-body) {
  color: var(--banco-ink-soft);
}

.sf-banco :is(.sf-tool-missing, .sf-tool-missing strong) {
  color: var(--banco-muted);
}

.sf-banco :is(.sf-tool-start, .sf-tool-fact) {
  border-color: var(--banco-line);
}

.sf-banco .sf-tool-fact h3 > span {
  background: var(--banco-canvas-deep);
}

.sf-banco .sf-tool-identity .tool-logo.large {
  border-color: #ece3d2;
  background: #fff;
}

.sf-banco .sf-tool-next {
  border-radius: var(--banco-r-panel);
  background: var(--banco-sage);
}

/* Finder and report */
.sf-banco :is(.hf-finder, .hf-report) {
  font-family: var(--banco-font);
}

.sf-banco :is(.hf-progress, .hf-request, .hf-price-row small, .hf-alternative > span) {
  color: var(--banco-muted);
}

.sf-banco .hf-report :is(.hf-eyebrow, .hf-context, .hf-method) {
  color: var(--banco-muted);
}

.sf-banco .hf-finder :is(input:not([type=checkbox]), select, textarea) {
  border-color: var(--banco-line-strong);
  border-radius: var(--banco-r-field);
}

.sf-banco .hf-finder :is(select, input, textarea):focus {
  outline: 3px solid #cd3c0840;
}

.sf-banco .hf-report :is(.hf-primary, .hf-unverified) {
  border-color: var(--banco-line);
  border-radius: var(--banco-r-card);
}

.sf-banco :is(.hf-extra, .hf-alternative),
.sf-banco .hf-report .hf-section {
  border-color: var(--banco-line);
}

/* Trend pages load hub_trends.css after this file: body prefix on purpose */
body.sf-banco .sf-trends {
  --trend-blue: #1f6b45;
  --trend-quiet: var(--banco-muted);
  --trend-border: var(--banco-line);
}

body.sf-banco .sf-trends .sf-trend-state {
  border-radius: var(--banco-r-pill);
  background: var(--banco-good-soft);
  color: var(--banco-good);
}

body.sf-banco .sf-trends .sf-trend-state-cooling {
  background: var(--banco-canvas-deep);
  color: var(--banco-muted);
}

body.sf-banco .sf-trends .sf-trend-period button[aria-pressed=true] {
  background: var(--banco-ink);
  color: var(--banco-paper);
}

body.sf-banco .sf-trends :is(.sf-trend-baseline, .sf-trend-gridline) {
  stroke: var(--banco-line);
}

body.sf-banco .sf-trends .sf-trend-cursor {
  stroke: var(--banco-muted);
}

body.sf-banco .sf-trends .sf-trend-card-bottom {
  border-color: var(--banco-line);
}

body.sf-banco .sf-trends .sf-trend-filters select {
  border-color: var(--banco-line-strong);
}

body.sf-banco .sf-trends .sf-trend-next {
  border-radius: var(--banco-r-panel);
  background: var(--banco-sage);
}

body.sf-banco .sf-trends .sf-trend-next p {
  color: var(--banco-ink-soft);
}


/* 13. Focus and motion --------------------------------------------------------------- */
/* One focus ring everywhere: thick, ink coloured, offset from the object. */

body.sf-banco :is(a, button, summary, [tabindex]):focus-visible,
body.sf-banco .company-badges a:focus-visible,
body.sf-banco :is(.hf-finder button, .hf-report a, .hf-report summary):focus-visible {
  outline: 3px solid var(--banco-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

body.sf-banco :is(.button, .banco-chip, .sf-filter a, .hf-chips button, .sf-desktop-nav a, .sf-mobile-menu summary):focus-visible {
  border-radius: var(--banco-r-pill);
}

body.sf-banco .button:focus-visible {
  border-radius: var(--banco-r-field);
}

body.sf-banco .banco-finder :is(a, button):focus-visible {
  outline-color: var(--banco-paper);
}

body.sf-banco input[type=checkbox]:focus-visible {
  outline: 3px solid var(--banco-ink);
  outline-offset: 2px;
}

body.sf-banco .skip:focus {
  border-radius: var(--banco-r-field);
  background: var(--banco-ink);
  color: var(--banco-paper);
}

@media (prefers-reduced-motion: reduce) {
  .sf-banco *,
  .sf-banco *::before,
  .sf-banco *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .sf-banco :is(.tool-card, .banco-entry, .banco-story-lead, .banco-popular a, .banco-chip):hover {
    transform: none;
  }
}


/* 14. Responsive ------------------------------------------------------------------------ */

@media (min-width: 1600px) {
  .sf-banco > main {
    max-width: none;
  }

  body.sf-banco > .sf-footer {
    max-width: var(--banco-max);
  }
}

/* The orange signup stays in the header at every width above phones:
   first the navigation tightens, then it folds into the menu, the button stays. */
@media (max-width: 1240px) {
  body.sf-banco .sf-header {
    gap: 16px;
  }

  .sf-banco .sf-brand {
    font-size: 22px;
  }

  .sf-banco .sf-desktop-nav {
    gap: 0;
  }

  .sf-banco .sf-desktop-nav a {
    padding: 8px 9px;
    font-size: 14px;
  }

  .sf-banco .sf-desktop-nav .sf-nav-feature {
    padding: 8px 11px;
  }

  body.sf-banco .sf-header .sf-header-cta {
    min-height: 42px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

@media (max-width: 1100px) {
  .sf-banco .sf-desktop-nav {
    display: none;
  }

  body.sf-banco .sf-header .sf-header-cta {
    margin-left: auto;
  }

  .sf-banco .sf-mobile-menu {
    display: block;
  }

  .banco-hero-grid {
    gap: 0 24px;
  }

  .banco-paper-note {
    font-size: 22px;
  }
}

@media (max-width: 1000px) {
  .sf-banco {
    --banco-gutter: 24px;
  }

  .sf-banco .sf-desktop-nav {
    display: none;
  }

  .sf-banco .sf-mobile-menu {
    display: block;
  }

  /* Home: copy and signup on the wall, then the photo on the bench */
  .banco-hero {
    --banco-img: min(100vw - var(--banco-gutter) * 2, 520px);
    padding: 8px 0 0;
  }

  .banco-hero::before {
    height: var(--banco-table);
  }

  .banco-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
  }

  .banco-intro {
    gap: 24px;
  }

  .sf-banco .banco-hero h1 {
    font-size: clamp(34px, 7vw, 60px);
  }

  .banco-signup {
    box-shadow: var(--banco-shadow-rest);
  }

  .banco-visual {
    width: var(--banco-img);
    margin: 0 auto;
  }

  .banco-paper-note {
    left: 0;
    bottom: 5%;
  }

  .banco-bench {
    padding: 22px 0 40px;
  }

  .banco-bench-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .banco-latest-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.sf-banco > .sf-footer {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--banco-s8) !important;
  }

  .sf-banco .sf-footer nav {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
  }
}

@media (max-width: 640px) {
  body.sf-banco .sf-header .sf-header-cta {
    display: none;
  }

  .sf-banco .sf-mobile-menu {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .sf-banco {
    --banco-gutter: 18px;
    --banco-text-base: 16px;
    --banco-text-lg: 17px;
  }

  body.sf-banco .sf-header {
    min-height: 68px;
    padding: 12px 0;
  }

  .sf-banco .sf-brand {
    font-size: 21px;
  }

  .banco-eyebrow {
    margin: 4px 0 14px;
    font-size: 12.5px;
    letter-spacing: .08em;
  }

  .sf-banco .banco-hero h1 {
    margin-bottom: 16px;
    font-size: clamp(33px, 9.6vw, 56px);
  }

  .banco-signup {
    max-width: none;
    padding: 12px 12px 12px;
  }

  .sf-banco .sf-signup-row .button {
    padding: 10px 12px;
    font-size: 14px;
  }

  .banco-paper-note {
    padding: 9px 14px 10px;
    font-size: 19px;
  }

  .banco-finder {
    padding: 26px 22px 24px;
    border-radius: 22px;
  }

  .banco-finder-actions .button {
    width: 100%;
  }

  .banco-quick {
    gap: 7px;
    margin-bottom: 22px;
  }

  .sf-banco .banco-quick .banco-chip {
    min-height: 40px;
    padding: 7px 13px;
    font-size: 14px;
  }

  .banco-popular > span {
    flex-basis: 100%;
  }

  .banco-entry {
    padding: 18px 18px;
  }

  .sf-banco .banco-entry h3 {
    font-size: 21px;
  }

  .banco-story-lead {
    padding: 22px 20px;
    border-radius: 22px;
  }

  .sf-banco :is(.sf-welcome, .sf-compare-start, .sf-news-list, .sf-article, .sf-course, .sf-tool-intro, .sf-guide-directory, .sf-gate-panel, .banco-panel) {
    border-radius: 22px;
  }

  .sf-banco .sf-page-head {
    padding: var(--banco-s6) 0 var(--banco-s5);
  }

  .sf-banco .sf-footer nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-banco .tool-card {
    padding: 20px;
  }
}

@media (max-width: 380px) {
  .sf-banco {
    --banco-gutter: 14px;
  }

  body.sf-banco .sf-header {
    gap: 8px;
  }

  /* Never push the page sideways, even while the web font is still loading */
  .sf-banco .sf-brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 18px;
    padding-right: 19px;
  }

  .sf-banco .sf-brand::after {
    right: 0;
  }

  .sf-banco .sf-mobile-menu {
    flex: none;
  }

  .sf-banco .sf-mobile-menu summary {
    padding: 8px 12px;
    font-size: 14px;
  }

  .sf-banco .sf-signup-row .button span {
    display: none;
  }

  /* Without the web font the system face is wider: a long label wraps, it never pushes the page sideways */
  .sf-banco main .button,
  .sf-banco main :is(.sf-tool-next, .method-callout, .banco-coupon) .button.primary {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* 320px phones: the placeholder was cut ("La tua emai"). Field first, button under it. */
@media (max-width: 340px) {
  .sf-banco .sf-signup-row {
    flex-wrap: wrap;
  }

  body.sf-banco .sf-signup-row input:not([type=checkbox]) {
    flex: 1 0 100%;
    width: 100%;
  }

  body.sf-banco .sf-signup-row .button {
    width: 100%;
  }

  .sf-banco .sf-signup-row .button span {
    display: inline;
  }
}

@media print {
  .sf-banco .sf-header,
  .sf-banco .sf-footer,
  .sf-banco .stage-ribbon {
    display: none !important;
  }
}