/* ==========================================================================
   Il Banco · content pages
   Newsletter, notizie, article, guide list, guide, video corsi, trend list,
   trend detail, privacy, error and empty states.
   Tokens and shared components live in banco.css. Nothing here redefines a
   token. Every rule starts with body.sf-banco so it also wins over
   hub_trends.css, which loads after this file.

   Objects used on these pages:
     sheet    a long paper page with a second sheet showing behind it
     coupon   the tear-off strip that closes a page (newsletter invite)
     label    the small printed tag on an object (topic, state)
     squares  squared notebook paper behind every chart
   ========================================================================== */


/* 1. Shared objects ---------------------------------------------------------- */

/* Coupon: closes guides, trends and the error page. Standalone on the wall. */
body.sf-banco :is(.banco-coupon, .sf-trends .sf-trend-subscribe) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--banco-s5);
  margin-block: var(--banco-s8) 0;
  padding: var(--banco-s6) var(--banco-s7);
  border: 2px dashed var(--banco-wood-deep);
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper-warm);
}

body.sf-banco :is(.banco-coupon, .sf-trends .sf-trend-subscribe) h2 {
  margin: 0 0 6px;
  font-size: var(--banco-h2);
  line-height: 1.15;
  letter-spacing: -.025em;
}

body.sf-banco :is(.banco-coupon, .sf-trends .sf-trend-subscribe) p {
  margin: 0;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-base);
}

body.sf-banco :is(.banco-coupon, .sf-trends .sf-trend-subscribe) .button {
  flex: none;
}

/* Sheet: article, guide, privacy. One paper page, a second one behind it. */
body.sf-banco :is(.sf-article, article.prose) {
  position: relative;
  isolation: isolate;
  max-width: 860px !important; /* hub.css sets 850px with !important */
  margin-top: var(--banco-s4);
  padding: var(--banco-s7) clamp(24px, 6vw, 72px) 0;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
}

body.sf-banco :is(.sf-article, article.prose)::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Offset, never rotated: a rotation on a very tall sheet swings its corners far out */
  inset: 12px -10px -10px 10px;
  border-radius: var(--banco-r-panel);
  background: #efe4d0; /* one step darker than paper-warm, so it shows under the coupon too */
  box-shadow: var(--banco-shadow-rest);
}

body.sf-banco :is(.sf-article, article.prose)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
}

/* Pill disclosure: "altre notizie", "altre guide" */
body.sf-banco :is(.banco-news .sf-more-content, .banco-guides .sf-more-content, .banco-italy-more) {
  grid-column: 1 / -1;
  margin-top: var(--banco-s4);
  border: 0;
}

body.sf-banco :is(.banco-news .sf-more-content, .banco-guides .sf-more-content, .banco-italy-more) > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 48px;
  margin-inline: auto;
  padding: 10px 22px;
  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;
  list-style: none;
}

body.sf-banco :is(.banco-news .sf-more-content, .banco-guides .sf-more-content, .banco-italy-more) > summary::-webkit-details-marker {
  display: none;
}

body.sf-banco :is(.banco-news .sf-more-content, .banco-guides .sf-more-content, .banco-italy-more) > summary::after {
  content: "+";
  margin-left: 10px;
  color: var(--banco-cta);
  font-size: 20px;
  line-height: 1;
}

body.sf-banco :is(.banco-news .sf-more-content, .banco-guides .sf-more-content, .banco-italy-more)[open] > summary::after {
  content: "–";
}

body.sf-banco :is(.banco-news .sf-more-content, .banco-guides .sf-more-content, .banco-italy-more) > summary:hover {
  background: var(--banco-canvas-deep);
}

body.sf-banco :is(.banco-news .sf-more-content, .banco-guides .sf-more-content, .banco-italy-more)[open] > summary {
  margin-bottom: var(--banco-s5);
}


/* 2. Newsletter --------------------------------------------------------------- */
/* One sheet split in two: the form on paper, the sample issue lying on wood. */

body.sf-banco .sf-welcome.banco-nl {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  margin-top: var(--banco-s4);
  padding: 0;
  overflow: hidden;
  text-align: left;
}

body.sf-banco .banco-nl .sf-welcome-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  margin: 0;
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4.4vw, 64px);
}

body.sf-banco .banco-nl .sf-kicker {
  margin: 0 0 var(--banco-s4);
}

body.sf-banco .banco-nl h1 {
  margin: 0 0 var(--banco-s5);
  font-size: var(--banco-h1);
  line-height: 1.05;
  letter-spacing: -.035em;
}

body.sf-banco .banco-nl .sf-welcome-intro {
  max-width: 30ch;
  margin: 0 0 var(--banco-s6);
  color: var(--banco-ink-soft);
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -.01em;
}

body.sf-banco .banco-nl .sf-signup {
  width: 100%;
  max-width: 520px;
}

body.sf-banco .banco-nl .sf-signup-row {
  padding: 6px;
  border-color: var(--banco-ink);
  box-shadow: 0 3px 0 var(--banco-line);
}

body.sf-banco .banco-nl .sf-signup-row input:not([type=checkbox]) {
  min-height: 52px;
  font-size: 17px;
}

body.sf-banco .banco-nl .sf-signup-row .button {
  min-height: 52px;
  padding-inline: 22px;
  font-size: 16px;
}

body.sf-banco .banco-nl-terms {
  margin: var(--banco-s4) 0 0;
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
}

/* The desk: wood to the edge of the sheet, the sample issue lying on it */
body.sf-banco .banco-nl-desk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding: var(--banco-s7) var(--banco-s6);
  background: var(--banco-grain), var(--banco-wood);
}

body.sf-banco .banco-nl .sf-newsletter-preview {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 0 var(--banco-s7);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: rotate(-2.2deg);
  transition: transform .3s var(--banco-ease);
}

body.sf-banco .banco-nl .sf-newsletter-preview:hover {
  transform: rotate(-1deg) translateY(-3px);
}

/* The sample keeps the ratio of its image, so no line of text is ever cut */
body.sf-banco .banco-nl .sf-newsletter-window {
  height: auto;
  aspect-ratio: 864 / 495;
  max-width: none;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: #fffef9;
  box-shadow: none;
}

body.sf-banco .banco-nl .sf-newsletter-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

body.sf-banco .banco-nl .sf-preview-caption {
  padding: 14px 18px;
  border-top: 1px dashed var(--banco-line);
  border-radius: 0 0 6px 6px;
  background: #fffef9;
  box-shadow: var(--banco-shadow-wood);
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
}

body.sf-banco .banco-nl .sf-preview-caption strong {
  color: var(--banco-cta-hover);
  font-weight: 750;
}

/* Handwritten note: a physical slip on the desk, decorative only */
body.sf-banco .banco-nl-note {
  position: absolute;
  right: 8%;
  bottom: 8%;
  margin: 0;
  padding: 12px 18px 14px;
  background: #fff6dc;
  box-shadow: 0 1px 1px #5c3d1a33, 0 10px 16px -8px #5c3d1a66;
  color: var(--banco-ink);
  font: 700 24px/1.05 var(--banco-hand);
  transform: rotate(4deg);
}

/* What is inside: three printed labels, no cards */
body.sf-banco .banco-nl-inside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--banco-s6);
  align-items: start;
  margin-top: var(--banco-s8);
}

body.sf-banco .banco-nl-inside h2 {
  margin: 0;
  font-size: var(--banco-h2);
  line-height: 1.15;
}

body.sf-banco .banco-nl-inside ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--banco-s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.sf-banco .banco-nl-inside li {
  padding-top: var(--banco-s4);
  border-top: 2px solid var(--banco-ink);
}

body.sf-banco .banco-nl-inside .banco-tag {
  color: var(--banco-ink);
}

body.sf-banco .banco-nl-inside li p {
  max-width: 28ch;
  margin: 10px 0 0;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-base);
  line-height: 1.5;
}


/* 3. Notizie ------------------------------------------------------------------ */
/* A lead sheet, then index cards. The list itself is no longer a panel. */

body.sf-banco .sf-page-head .sf-filter {
  margin-top: var(--banco-s5);
}

body.sf-banco .sf-news-list.banco-news,
body.sf-banco .banco-news .sf-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.sf-banco .banco-news article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 24px 18px;
  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);
}

body.sf-banco .banco-news article:hover {
  box-shadow: var(--banco-shadow-lift);
  transform: translateY(-3px);
}

/* Label: the topic, printed on a small orange-tinted tag */
body.sf-banco .banco-news .sf-card-meta,
body.sf-banco .sf-article > .sf-card-meta {
  align-items: center;
  gap: var(--banco-s3);
}

body.sf-banco .banco-news .sf-card-meta > span,
body.sf-banco .sf-article > .sf-card-meta > span {
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--banco-cta-soft);
  color: var(--banco-cta-ink);
  font-size: var(--banco-text-xs);
  font-weight: 800;
  line-height: 1.2;
}

body.sf-banco .banco-news h2 {
  margin: var(--banco-s4) 0 var(--banco-s3);
  font-size: var(--banco-h3);
  line-height: 1.25;
}

body.sf-banco .banco-news article > p {
  margin: 0 0 var(--banco-s4);
  color: var(--banco-ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-line-clamp: 3;
}

body.sf-banco .banco-news .sf-source {
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--banco-line);
  font-size: var(--banco-text-xs);
}

body.sf-banco .banco-news .sf-source a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--banco-text-sm);
}

body.sf-banco .banco-news .news-company-context {
  margin: 0 0 var(--banco-s4);
  padding: 12px 0 0;
  border-top: 1px dashed var(--banco-line);
}

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

/* Lead sheet: the first story, across the whole row */
body.sf-banco .banco-news > article:first-child {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--banco-s8);
  padding: var(--banco-s7);
  border-radius: var(--banco-r-panel);
}

body.sf-banco .banco-news > article:first-child {
  position: relative;
  isolation: isolate;
  margin-bottom: 8px;
}

body.sf-banco .banco-news > article:first-child::before,
body.sf-banco .banco-news > article:first-child::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
}

body.sf-banco .banco-news > article:first-child::before {
  inset: 12px -10px -10px 10px;
  background: #efe4d0;
  box-shadow: var(--banco-shadow-rest);
}

body.sf-banco .banco-news > article:first-child > .sf-card-meta {
  grid-column: 1;
  grid-row: 1;
}

body.sf-banco .banco-news > article:first-child > h2 {
  grid-column: 1;
  grid-row: 2 / span 3;
  margin: var(--banco-s5) 0 0;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.12;
  letter-spacing: -.03em;
}

body.sf-banco .banco-news > article:first-child > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-bottom: var(--banco-s5);
  font-size: var(--banco-text-lg);
  line-height: 1.55;
  -webkit-line-clamp: 5;
}

body.sf-banco .banco-news > article:first-child > .news-company-context {
  grid-column: 2;
  grid-row: 3;
}

body.sf-banco .banco-news > article:first-child > .sf-source {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
}

body.sf-banco .banco-news > .sf-empty {
  grid-column: 1 / -1;
}


/* 4. Article and guide ---------------------------------------------------------- */

body.sf-banco .sf-article > .sf-text-link:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--banco-text-sm);
}

body.sf-banco .sf-article > .sf-card-meta {
  justify-content: flex-start;
  margin-top: var(--banco-s4);
}

body.sf-banco .sf-article h1 {
  max-width: 22ch;
  margin: var(--banco-s5) 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

body.sf-banco .sf-article-by,
body.sf-banco .sf-guide-dates {
  margin: 0;
  padding-bottom: var(--banco-s5);
  border-bottom: 1px dashed var(--banco-line-strong);
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
  line-height: 1.6;
}

body.sf-banco .sf-article-body {
  max-width: 66ch;
  margin: var(--banco-s6) 0;
  color: var(--banco-ink);
  font-size: 18px;
  line-height: 1.75;
}

body.sf-banco .sf-article-body p {
  margin: 0 0 1.25em;
  text-wrap: pretty;
}

body.sf-banco .sf-article > .news-company-context {
  margin: var(--banco-s5) 0 0;
  padding: var(--banco-s4) 0;
  border-block: 1px dashed var(--banco-line);
}

/* The source, as a slip */
body.sf-banco .sf-source-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--banco-line-strong);
  border-radius: var(--banco-r-pill);
  font-size: var(--banco-text-sm);
  overflow-wrap: anywhere;
}

body.sf-banco .sf-source-link:hover {
  background: var(--banco-canvas-deep);
  text-decoration: none;
}

/* Tear-off strip at the foot of the sheet */
body.sf-banco :is(.sf-article-next, .sf-guide-next) {
  margin: var(--banco-s7) calc(-1 * clamp(24px, 6vw, 72px)) 0;
  padding: var(--banco-s6) clamp(24px, 6vw, 72px) var(--banco-s7);
  border: 0;
  border-top: 2px dashed var(--banco-wood-deep);
  border-radius: 0 0 var(--banco-r-panel) var(--banco-r-panel);
  background: var(--banco-paper-warm);
}

body.sf-banco :is(.sf-article-next, .sf-guide-next) h2 {
  margin: 0 0 var(--banco-s4);
  font-size: var(--banco-h2);
  line-height: 1.15;
}

body.sf-banco .sf-guide-next p {
  margin: -8px 0 var(--banco-s5);
  color: var(--banco-ink-soft);
}

body.sf-banco .sf-guide-next > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--banco-s4) var(--banco-s5);
}

body.sf-banco .sf-article-finder {
  margin: 0 0 0 var(--banco-s5);
}

/* Guide */
body.sf-banco .sf-guide-intro {
  margin: var(--banco-s4) 0 0;
}

body.sf-banco .sf-guide-intro h1 {
  margin: var(--banco-s3) 0 var(--banco-s5);
}

body.sf-banco .sf-guide-description {
  max-width: 58ch;
  margin: 0 0 var(--banco-s5);
  color: var(--banco-ink-soft);
  font-size: 20px;
  line-height: 1.5;
}

body.sf-banco .sf-guide-body {
  max-width: 66ch;
}

body.sf-banco .sf-guide-body :is(h2, h3) {
  margin: 1.9em 0 .6em;
  color: var(--banco-ink);
  letter-spacing: -.025em;
  text-wrap: balance;
}

body.sf-banco .sf-guide-body h2 {
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.2;
}

body.sf-banco .sf-guide-body h3 {
  font-size: var(--banco-h3);
  line-height: 1.25;
}

body.sf-banco .sf-guide-body :is(ul, ol) {
  margin: 0 0 1.25em;
  padding-left: 1.3em;
}

body.sf-banco .sf-guide-body li {
  margin-bottom: .6em;
  padding-left: .2em;
}

body.sf-banco .sf-guide-body li::marker {
  color: var(--banco-cta);
  font-weight: 800;
}

body.sf-banco .sf-guide-body a {
  color: var(--banco-cta-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.sf-banco .sf-guide-body :is(blockquote, .sf-guide-note) {
  margin: 1.6em 0;
  padding: var(--banco-s5);
  border: 0;
  border-radius: var(--banco-r-card);
  background: var(--banco-canvas);
  color: var(--banco-ink);
}

body.sf-banco .sf-guide-body :is(table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15.5px;
}

body.sf-banco .sf-guide-body :is(th, td) {
  padding: 10px 12px;
  border-bottom: 1px solid var(--banco-line);
  text-align: left;
}

body.sf-banco .sf-guide-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--banco-r-card);
}

body.sf-banco :is(.sf-guide-faqs, .sf-guide-sources) {
  max-width: 66ch;
  margin-top: var(--banco-s7);
}

body.sf-banco :is(.sf-guide-faqs, .sf-guide-sources) h2 {
  margin: 0 0 var(--banco-s4);
  font-size: clamp(24px, 2.3vw, 30px);
}

body.sf-banco .sf-guide-faq {
  margin: 0 0 10px;
  border: 0;
  border-radius: var(--banco-r-field);
  background: var(--banco-canvas);
}

body.sf-banco .sf-guide-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--banco-s4);
  min-height: 56px;
  padding: 12px 18px;
  color: var(--banco-ink);
  font-size: var(--banco-text-base);
  font-weight: 750;
  line-height: 1.35;
  list-style: none;
}

body.sf-banco .sf-guide-faq > summary::-webkit-details-marker {
  display: none;
}

body.sf-banco .sf-guide-faq > summary > span {
  flex: none;
  color: var(--banco-cta);
  font-size: 22px;
  font-weight: 500;
  transition: transform .2s var(--banco-ease);
}

body.sf-banco .sf-guide-faq[open] > summary > span {
  transform: rotate(45deg);
}

body.sf-banco .sf-guide-faq > p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-base);
  line-height: 1.65;
}

body.sf-banco .sf-guide-sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.sf-banco .sf-guide-sources a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--banco-line-strong);
  border-radius: var(--banco-r-pill);
  color: var(--banco-ink);
  font-size: var(--banco-text-sm);
  font-weight: 650;
  text-decoration: none;
}

body.sf-banco .sf-guide-sources a:hover {
  background: var(--banco-canvas-deep);
}

/* Several links to the same publisher: the address under the label tells them apart */
body.sf-banco .sf-guide-sources a:has(.sf-source-path) {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 1px 6px;
  padding: 9px 16px;
  border-radius: 16px;
}

body.sf-banco .sf-guide-sources .sf-source-path {
  grid-row: 2;
  grid-column: 1 / -1;
  color: var(--banco-muted);
  font-size: 13px;
  font-weight: 550;
  overflow-wrap: anywhere;
}


/* 5. Guide list ------------------------------------------------------------------ */
/* The index of a manual: one sheet, a row per guide, the whole row opens it. */

body.sf-banco .banco-guides {
  padding-top: 0;
}

/* "Le guide" is the tab of the folder the index sheet sits in */
body.sf-banco .banco-guides .section-heading {
  display: block;
  margin: 0;
}

body.sf-banco .banco-guides .section-heading h2 {
  display: inline-block;
  margin: 0;
  padding: 12px 24px 10px;
  border-radius: 14px 14px 0 0;
  background: var(--banco-wood); /* manila folder, flat: no grain, this is card not bench */
  color: var(--banco-wood-ink);
  font-size: var(--banco-text-sm);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* The folder: a warm back cover shows above the sheet and carries the tab */
body.sf-banco .banco-guides > .sf-library {
  position: relative;
  isolation: isolate;
  margin-top: 10px;
}

body.sf-banco .banco-guides > .sf-library::before,
body.sf-banco .banco-guides > .sf-library::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
}

body.sf-banco .banco-guides > .sf-library::before {
  inset: -10px 0 30px;
  border-radius: 0 var(--banco-r-panel) var(--banco-r-panel) var(--banco-r-panel);
  background: var(--banco-wood);
}

body.sf-banco .banco-guides .sf-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--banco-s8);
  padding: var(--banco-s3) var(--banco-s7);
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
}

body.sf-banco .banco-guides .sf-library article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--banco-s5);
  align-items: center;
  min-height: 92px;
  padding: var(--banco-s5) 0;
  border: 0;
  border-top: 1px dashed var(--banco-line-strong);
}

body.sf-banco .banco-guides .sf-library article:nth-child(-n+2) {
  border-top: 0;
}

body.sf-banco .banco-guides .sf-library h3 {
  margin: 0;
  font-size: var(--banco-h3);
  line-height: 1.25;
  text-wrap: balance;
}

/* The title link covers the row, so the whole row is one target */
body.sf-banco .banco-guides .sf-library h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

body.sf-banco .banco-guides .sf-library .sf-text-link {
  margin: 0;
  align-self: center;
  font-size: var(--banco-text-sm);
  white-space: nowrap;
}

body.sf-banco .banco-guides .sf-library article:hover h3 a {
  text-decoration: underline;
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body.sf-banco .banco-guides .sf-more-content {
  margin-top: var(--banco-s5);
}


/* 6. Video corsi -------------------------------------------------------------------- */

body.sf-banco .sf-course {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin-block: var(--banco-s4) 0;
  padding: 0;
  overflow: hidden;
}

body.sf-banco .sf-course-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1288 / 800;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
}

body.sf-banco .sf-course > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
}

body.sf-banco .sf-course-label {
  margin: 0 0 var(--banco-s4);
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--banco-cta-soft);
  color: var(--banco-cta-ink);
  font-size: var(--banco-text-xs);
  font-weight: 800;
}

body.sf-banco .sf-course h2 {
  margin: 0 0 var(--banco-s4);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

body.sf-banco .sf-course p:not(.sf-course-label) {
  max-width: 36ch;
  margin: 0 0 var(--banco-s6);
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-lg);
  line-height: 1.5;
}


/* 7. Trend list ------------------------------------------------------------------------ */
/* Styled by class only: another stream owns this markup. */

/* hub_trends.css narrows the list to 1120px: line it up with the page head */
body.sf-banco .sf-trends :is(.sf-trends-content, .sf-trend-subscribe) {
  max-width: var(--banco-max);
}

body.sf-banco .sf-trends .sf-trends-head {
  padding-bottom: var(--banco-s5);
}

body.sf-banco .sf-trends .sf-trend-filters {
  align-items: end;
  gap: var(--banco-s4);
  margin-bottom: var(--banco-s5);
  padding: var(--banco-s4) var(--banco-s5);
  border-radius: var(--banco-r-card);
  background: var(--banco-canvas-deep);
}

body.sf-banco .sf-trends .sf-trend-filters label {
  margin-bottom: 6px;
  color: var(--banco-ink);
  font-size: var(--banco-text-sm);
  font-weight: 750;
}

body.sf-banco .sf-trends .sf-trend-filters select {
  min-height: 48px;
  border: 1px solid var(--banco-line-strong);
  border-radius: var(--banco-r-field);
  background-color: #fff;
  color: var(--banco-ink);
  font-size: 16px;
}

body.sf-banco .sf-trends .sf-trend-filters .sf-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

body.sf-banco .sf-trends :is([data-trend-filter-help], [data-trend-results]) {
  margin: 0 0 var(--banco-s3);
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
}

body.sf-banco .sf-trends [data-trend-results] {
  margin-bottom: var(--banco-s5);
}

body.sf-banco .sf-trends [data-trend-results] strong {
  color: var(--banco-ink);
}

body.sf-banco .sf-trends .sf-trends-list {
  gap: 22px;
}

body.sf-banco .sf-trends .sf-trend-card {
  padding: 26px 28px 18px;
  border: 0;
  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);
}

body.sf-banco .sf-trends .sf-trend-card:hover {
  box-shadow: var(--banco-shadow-lift);
  transform: translateY(-3px);
}

body.sf-banco .sf-trends .sf-trend-meta {
  gap: 10px;
  color: var(--banco-muted);
  font-size: var(--banco-text-xs);
  font-weight: 650;
}

body.sf-banco .sf-trends .sf-trend-state {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: var(--banco-text-xs);
  font-weight: 800;
  line-height: 1.2;
}

/* States: neutral while we only watch, green when it grows, amber when it is new,
   ink when confirmed. Also covers the states the trend stream is adding. */
body.sf-banco .sf-trends :is(.sf-trend-state-early, .sf-trend-state-quiet, .sf-trend-state-stable, .sf-trend-state-cooling) {
  background: var(--banco-canvas-deep);
  color: var(--banco-ink-soft);
}

body.sf-banco .sf-trends :is(.sf-trend-state-rising, .sf-trend-state-exploding) {
  background: var(--banco-good-soft);
  color: var(--banco-good);
}

body.sf-banco .sf-trends .sf-trend-state-new {
  background: var(--banco-amber-soft);
  color: var(--banco-amber-ink);
}

body.sf-banco .sf-trends .sf-trend-state-confirmed {
  background: var(--banco-ink);
  color: var(--banco-paper);
}

body.sf-banco .sf-trends .sf-trend-card h2 {
  margin: var(--banco-s4) 0 var(--banco-s2);
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.18;
  letter-spacing: -.025em;
}

body.sf-banco .sf-trends .sf-trend-card h2 a {
  color: var(--banco-ink);
  text-decoration: none;
}

body.sf-banco .sf-trends .sf-trend-card h2 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body.sf-banco .sf-trends .sf-trend-overview {
  color: var(--banco-ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Squares: every chart is drawn on squared notebook paper */
body.sf-banco .sf-trends .sf-trend-plot {
  border: 1px solid #e6e0cf;
  border-radius: var(--banco-r-field);
  background-color: #fffef9;
  background-image: linear-gradient(#1f4d3312 1px, transparent 1px), linear-gradient(90deg, #1f4d3312 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}

body.sf-banco .sf-trends .sf-trend-line {
  stroke: var(--banco-good);
  stroke-width: 2.4;
  stroke-linecap: round;
}

body.sf-banco .sf-trends .sf-trend-area {
  fill: #1f6b4522;
}

body.sf-banco .sf-trends .sf-trend-point {
  fill: var(--banco-good);
  stroke: #fffef9;
  stroke-width: 1.5;
}

body.sf-banco .sf-trends .sf-trend-chart-top {
  color: var(--banco-muted);
}

body.sf-banco .sf-trends .sf-trend-chart-top > span > strong {
  color: var(--banco-ink);
  font-size: var(--banco-text-sm);
  font-weight: 750;
}

body.sf-banco .sf-trends .sf-trend-chart-top > span > small {
  font-size: var(--banco-text-xs);
}

body.sf-banco .sf-trends .sf-trend-period {
  padding: 3px;
  border: 1px solid var(--banco-line-strong);
  border-radius: var(--banco-r-pill);
  background: #fff;
}

body.sf-banco .sf-trends .sf-trend-period button {
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--banco-r-pill);
  color: var(--banco-ink-soft);
  font-family: var(--banco-font);
  font-size: var(--banco-text-xs);
  font-weight: 700;
}

body.sf-banco .sf-trends :is(figcaption, .sf-trend-tooltip) {
  color: var(--banco-muted);
  font-size: var(--banco-text-xs);
}

body.sf-banco .sf-trends .sf-trend-values > summary {
  color: var(--banco-cta-hover);
  font-size: var(--banco-text-xs);
  font-weight: 750;
}

body.sf-banco .sf-trends .sf-trend-values table {
  font-size: var(--banco-text-sm);
}

body.sf-banco .sf-trends .sf-trend-history {
  border: 2px dashed var(--banco-line-strong);
  border-radius: var(--banco-r-field);
  background: none;
  color: var(--banco-ink-soft);
}

body.sf-banco .sf-trends .sf-trend-card-bottom {
  align-items: center;
  border-top: 1px dashed var(--banco-line);
}

body.sf-banco .sf-trends :is(.sf-trend-mentions, .sf-trend-growth small) {
  color: var(--banco-muted);
  font-size: var(--banco-text-xs);
}

body.sf-banco .sf-trends .sf-trend-mentions strong {
  color: var(--banco-ink);
  font-size: 22px;
  font-weight: 800;
}

body.sf-banco .sf-trends .sf-trend-growth {
  color: var(--banco-good);
  font-weight: 800;
}

body.sf-banco .sf-trends .sf-trend-growth-down {
  color: var(--banco-muted);
}

body.sf-banco .sf-trends .sf-trend-open {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--banco-cta-hover);
  font-size: var(--banco-text-sm);
  font-weight: 750;
  text-decoration: none;
}

body.sf-banco .sf-trends .sf-trend-open:hover {
  text-decoration: underline;
}

body.sf-banco .sf-trends .sf-trend-empty {
  padding: var(--banco-s7) var(--banco-s5);
  border: 2px dashed var(--banco-line-strong);
  border-radius: var(--banco-r-card);
  background: none;
}

body.sf-banco .sf-trends .sf-trend-empty h2 {
  font-size: var(--banco-h2);
}

body.sf-banco .sf-trends .sf-trend-empty p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--banco-ink-soft);
}

body.sf-banco .sf-trends .sf-trend-pagination {
  padding-top: var(--banco-s6);
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
}

body.sf-banco .sf-trends .sf-trend-pagination a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--banco-line-strong);
  border-radius: var(--banco-r-pill);
  background: var(--banco-paper);
  color: var(--banco-ink);
  font-weight: 750;
  text-decoration: none;
}

body.sf-banco .sf-trends .sf-trend-pagination a:hover {
  background: var(--banco-canvas-deep);
}

body.sf-banco .sf-trends .sf-trend-pagination a[rel=next] {
  justify-self: end;
}

body.sf-banco .sf-trends .sf-trend-pagination a[rel=prev] {
  justify-self: start;
}

body.sf-banco .sf-trends .sf-trend-reading {
  max-width: 66ch;
  margin: var(--banco-s6) 0 0;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-sm);
}

body.sf-banco .sf-trends .sf-trend-reading summary {
  color: var(--banco-cta-hover);
  font-weight: 750;
}


/* Topic cards and news blocks (markup owned by the trend stream) */
body.sf-banco .sf-trends :is(.sf-trends-updated, .sf-trend-growth-note, .sf-trend-news-note, .sf-trend-chart-note, .sf-trend-headlines-label) {
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
  line-height: 1.5;
}

body.sf-banco .sf-trends .sf-trend-headlines-label {
  font-weight: 750;
}

body.sf-banco .sf-trends .sf-trend-happening {
  padding: var(--banco-s4) 18px;
  border-radius: var(--banco-r-field);
  background: var(--banco-canvas);
}

body.sf-banco .sf-trends .sf-trend-happening h3 {
  color: var(--banco-ink-soft);
  font: 800 var(--banco-text-xs)/1.2 var(--banco-font);
  letter-spacing: .08em;
}

body.sf-banco .sf-trends .sf-trend-happening p {
  color: var(--banco-ink);
  font-size: 16px;
  line-height: 1.55;
}

body.sf-banco .sf-trends .sf-trend-headlines li {
  padding-top: var(--banco-s3);
  border-top: 1px dashed var(--banco-line);
  font-size: 15.5px;
}

body.sf-banco .sf-trends .sf-trend-headlines a {
  color: var(--banco-ink);
  font-weight: 700;
  text-decoration-color: var(--banco-line-strong);
}

body.sf-banco .sf-trends .sf-trend-headlines a:hover {
  color: var(--banco-ink);
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
}

body.sf-banco .sf-trends .sf-trend-headline-source {
  color: var(--banco-muted);
  font-size: var(--banco-text-xs);
}

body.sf-banco .sf-trends :is(.sf-trend-reads, .sf-trend-card-tools) {
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-sm);
}

body.sf-banco .sf-trends :is(.sf-trend-reads, .sf-trend-card-tools) strong {
  color: var(--banco-ink);
  font-weight: 800;
}

/* Ink links with a quiet underline: a card full of orange sentences shouts */
body.sf-banco .sf-trends :is(.sf-trend-reads, .sf-trend-card-tools) a {
  color: var(--banco-ink);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--banco-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.sf-banco .sf-trends :is(.sf-trend-reads, .sf-trend-card-tools) a:hover {
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
}

body.sf-banco .sf-trends .sf-trend-news {
  padding: var(--banco-s6) var(--banco-s6) var(--banco-s5);
  border: 0;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
}

body.sf-banco .sf-trends .sf-trend-news h2 {
  font-size: var(--banco-h2);
  letter-spacing: -.025em;
}

body.sf-banco .sf-trends .sf-trend-news-line {
  color: var(--banco-ink);
  font-size: var(--banco-text-lg);
}

body.sf-banco .sf-trends .sf-trend-news .sf-trend-reads {
  font-size: var(--banco-text-base);
}

body.sf-banco .sf-trends .sf-trend-detail-lead {
  max-width: 58ch;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-lg);
  line-height: 1.55;
}

body.sf-banco .sf-trends .sf-trend-filters-below {
  margin-top: var(--banco-s7);
  padding-top: var(--banco-s6);
  border-top: 1px dashed var(--banco-line-strong);
}

body.sf-banco .sf-trends .sf-trend-filters-below h2 {
  margin: 0 0 var(--banco-s4);
  font-size: var(--banco-h3);
  letter-spacing: -.015em;
}


/* 8. Trend detail ------------------------------------------------------------------------- */

body.sf-banco .sf-trends.sf-trend-detail {
  max-width: 1040px;
}

body.sf-banco .sf-trends .sf-trend-back {
  color: var(--banco-cta-hover);
  font-size: var(--banco-text-sm);
  font-weight: 750;
  text-decoration: none;
}

body.sf-banco .sf-trends .sf-trend-back:hover {
  text-decoration: underline;
}

body.sf-banco .sf-trends .sf-trend-detail-head h1 {
  margin: var(--banco-s4) 0 var(--banco-s6);
  font-size: var(--banco-h1);
  line-height: 1.06;
  letter-spacing: -.035em;
}

body.sf-banco .sf-trends .sf-trend-detail-chart {
  padding: var(--banco-s6) var(--banco-s6) var(--banco-s5);
  border: 0;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
}

body.sf-banco .sf-trends .sf-trend-detail-stat {
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
}

body.sf-banco .sf-trends .sf-trend-detail-stat strong {
  color: var(--banco-ink);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
}

body.sf-banco .sf-trends .sf-trend-explainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--banco-s6) var(--banco-s7);
  max-width: none;
  margin-top: var(--banco-s7);
}

body.sf-banco .sf-trends .sf-trend-explainer > section {
  margin: 0;
  padding-top: var(--banco-s4);
  border-top: 2px solid var(--banco-ink);
}

body.sf-banco .sf-trends .sf-trend-explainer > section.sf-trend-next {
  padding: var(--banco-s5);
  border-top: 0;
  border-radius: var(--banco-r-card);
  background: var(--banco-sage);
}

body.sf-banco .sf-trends :is(.sf-trend-explainer, .sf-trend-tools) h2 {
  margin: 0 0 var(--banco-s3);
  font-size: var(--banco-h3);
  line-height: 1.25;
  letter-spacing: -.015em;
}

body.sf-banco .sf-trends .sf-trend-explainer p {
  max-width: 60ch;
  margin: 0;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-base);
  line-height: 1.65;
}

body.sf-banco .sf-trends .sf-trend-related,
body.sf-banco .sf-trends .sf-trend-tools a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--banco-s4);
  min-height: 72px;
  padding: var(--banco-s4) var(--banco-s5);
  border: 0;
  border-radius: var(--banco-r-card);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
  color: var(--banco-ink);
  text-decoration: none;
  transition: transform .22s var(--banco-ease), box-shadow .22s var(--banco-ease);
}

body.sf-banco .sf-trends .sf-trend-related {
  margin-top: var(--banco-s6);
  background: var(--banco-paper-warm);
}

body.sf-banco .sf-trends :is(.sf-trend-related, .sf-trend-tools a):hover {
  box-shadow: var(--banco-shadow-lift);
  transform: translateY(-3px);
}

body.sf-banco .sf-trends :is(.sf-trend-related, .sf-trend-tools a) strong {
  display: block;
  color: var(--banco-ink);
  font-size: var(--banco-text-lg);
  font-weight: 800;
}

body.sf-banco .sf-trends :is(.sf-trend-related small, .sf-trend-tools a span span) {
  color: var(--banco-muted);
  font-size: var(--banco-text-sm);
}

body.sf-banco .sf-trends :is(.sf-trend-related, .sf-trend-tools a) > span:last-child {
  color: var(--banco-cta);
  font-size: 20px;
}

body.sf-banco .sf-trends .sf-trend-tools {
  margin-top: var(--banco-s7);
}

body.sf-banco .sf-trends .sf-trend-tools > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--banco-s4);
}


/* 9. Privacy, error, empty ------------------------------------------------------------------ */

body.sf-banco article.prose {
  padding-bottom: var(--banco-s7);
}

body.sf-banco article.prose h1 {
  max-width: 16ch;
  margin: 0 0 var(--banco-s5);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

body.sf-banco article.prose h2 {
  margin: var(--banco-s7) 0 var(--banco-s3);
  padding-top: var(--banco-s5);
  border-top: 1px dashed var(--banco-line-strong);
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.2;
  letter-spacing: -.02em;
}

body.sf-banco article.prose p {
  max-width: 66ch;
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-base);
  line-height: 1.7;
}

body.sf-banco article.prose > p:first-of-type {
  color: var(--banco-ink);
  font-size: var(--banco-text-lg);
}

body.sf-banco article.prose #analytics-form {
  display: grid;
  gap: var(--banco-s4);
  justify-items: start;
  max-width: 66ch;
  margin: var(--banco-s5) 0;
  padding: var(--banco-s5);
  border-radius: var(--banco-r-card);
  background: var(--banco-canvas);
}

body.sf-banco article.prose #analytics-form .checkbox {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  font-size: var(--banco-text-base);
  font-weight: 650;
  line-height: 1.45;
}

body.sf-banco article.prose #analytics-form input[type=checkbox] {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
}

body.sf-banco article.prose #analytics-status {
  margin: 0;
  font-size: var(--banco-text-sm);
}

body.sf-banco article.prose #analytics-status:empty {
  display: none;
}

/* Error: a slip of paper left on the wall, with the ways out */
body.sf-banco .banco-lost {
  padding: var(--banco-s7) 0 var(--banco-s4);
  border: 0;
  background: none;
  text-align: left;
}

body.sf-banco .banco-lost-slip {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding: var(--banco-s8) clamp(24px, 6vw, 72px);
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
  transform: rotate(-.6deg);
}

/* A strip of paper tape holds the slip */
body.sf-banco .banco-lost-slip::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 120px;
  height: 30px;
  background: #ef895166;
  transform: translateX(-50%) rotate(-2deg);
}

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

body.sf-banco .banco-lost p {
  max-width: 44ch;
  margin: 0 0 var(--banco-s6);
  color: var(--banco-ink-soft);
  font-size: var(--banco-text-lg);
}

body.sf-banco .banco-lost-ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--banco-s2) var(--banco-s5);
  margin-top: var(--banco-s6);
  padding-top: var(--banco-s5);
  border-top: 1px dashed var(--banco-line-strong);
}

body.sf-banco .banco-lost-ways a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* 10. Responsive --------------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  body.sf-banco .sf-welcome.banco-nl {
    grid-template-columns: minmax(0, 1fr);
  }

  body.sf-banco .banco-nl-desk {
    min-height: 0;
    padding: var(--banco-s7) var(--banco-s5) var(--banco-s8);
  }

  body.sf-banco .banco-nl-inside {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--banco-s5);
  }

  body.sf-banco .banco-news > article:first-child {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding: var(--banco-s6);
  }

  /* Named one by one: the desktop rules place each child by name */
  body.sf-banco .banco-news > article:first-child > :is(.sf-card-meta, h2, p, .news-company-context, .sf-source) {
    grid-column: 1;
    grid-row: auto;
  }

  body.sf-banco .banco-news > article:first-child > h2 {
    margin: var(--banco-s4) 0;
  }

  body.sf-banco .banco-guides .sf-library {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--banco-s6);
  }

  body.sf-banco .banco-guides .sf-library article:nth-child(2) {
    border-top: 1px dashed var(--banco-line-strong);
  }

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

  body.sf-banco .sf-course-image {
    height: auto;
  }
}

@media (max-width: 767px) {
  body.sf-banco :is(.banco-coupon, .sf-trends .sf-trend-subscribe) {
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--banco-s7);
    padding: var(--banco-s5);
    border-radius: 22px;
  }

  body.sf-banco :is(.banco-coupon, .sf-trends .sf-trend-subscribe) .button {
    width: 100%;
  }

  body.sf-banco :is(.sf-article, article.prose) {
    padding-top: var(--banco-s6);
    border-radius: 22px;
  }

  body.sf-banco :is(.sf-article, article.prose)::before {
    inset: 8px -6px -7px 6px;
    border-radius: 22px;
  }

  body.sf-banco :is(.sf-article, article.prose)::after {
    border-radius: 22px;
  }

  body.sf-banco :is(.sf-article-next, .sf-guide-next) {
    border-radius: 0 0 22px 22px;
  }

  body.sf-banco :is(.sf-article-next, .sf-guide-next) .button {
    width: 100%;
  }

  body.sf-banco .sf-article-finder {
    display: block;
    margin: var(--banco-s4) 0 0;
  }

  body.sf-banco .sf-article-body {
    font-size: 17px;
    line-height: 1.7;
  }

  body.sf-banco .sf-guide-description {
    font-size: 18px;
  }

  body.sf-banco .banco-nl .sf-welcome-intro {
    font-size: 18px;
  }

  body.sf-banco .banco-nl .sf-newsletter-window {
    aspect-ratio: 525 / 450; /* the phone crop of the sample, see <picture> */
  }

  body.sf-banco .banco-nl .sf-newsletter-preview {
    margin-bottom: var(--banco-s6);
  }

  body.sf-banco .banco-nl-note {
    right: 5%;
    bottom: 5%;
    font-size: 20px;
  }

  body.sf-banco .banco-nl-inside ul {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--banco-s5);
  }

  body.sf-banco .banco-nl-inside li p {
    max-width: none;
  }

  body.sf-banco .banco-news > article:first-child {
    padding: var(--banco-s5);
    border-radius: 22px;
  }

  body.sf-banco .banco-guides .sf-library {
    padding: var(--banco-s2) var(--banco-s5);
    border-radius: 22px;
  }

  body.sf-banco .banco-guides .sf-library article {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--banco-s2);
    min-height: 0;
    padding: var(--banco-s5) 0;
  }

  body.sf-banco .sf-trends .sf-trend-filters {
    gap: var(--banco-s3);
    padding: var(--banco-s4);
  }

  body.sf-banco .sf-trends .sf-trend-filters > div {
    flex-basis: 100%;
  }

  body.sf-banco .sf-trends .sf-trend-filters .button {
    width: 100%;
  }

  body.sf-banco .sf-trends .sf-trend-card {
    padding: 22px 20px 14px;
    border-radius: 22px;
  }

  body.sf-banco .sf-trends :is(.sf-trend-detail-chart, .sf-trend-news) {
    padding: var(--banco-s5) var(--banco-s4);
    border-radius: 22px;
  }

  body.sf-banco .banco-lost-slip {
    padding: var(--banco-s7) var(--banco-s5);
    border-radius: 22px;
  }
}

@media (max-width: 480px) {
  /* Room for the whole placeholder: the button drops under the field */
  body.sf-banco .banco-nl .sf-signup-row {
    flex-wrap: wrap;
  }

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

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


/* 12. Practical guides list (/cosa-usare/guide) --------------------------------------- */
/* Same object as the /guide list: a manila folder with one index sheet. Each row is a
   guide: task label, title, the question it answers, and the way in. */

body.sf-banco .banco-nowrap {
  white-space: nowrap;
}

body.sf-banco .banco-cases {
  padding-bottom: var(--banco-s8);
}

body.sf-banco .banco-cases-tab {
  display: inline-block;
  margin: 0;
  padding: 12px 24px 10px;
  border-radius: 14px 14px 0 0;
  background: var(--banco-wood);
  color: var(--banco-wood-ink);
  font-size: var(--banco-text-sm);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
}

body.sf-banco .banco-cases .guide-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--banco-s8);
  margin-top: 10px;
  padding: var(--banco-s3) var(--banco-s7);
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-rest);
}

/* back cover of the folder */
body.sf-banco .banco-cases .guide-grid::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -10px 0 30px;
  border-radius: 0 var(--banco-r-panel) var(--banco-r-panel) var(--banco-r-panel);
  background: var(--banco-wood);
}

body.sf-banco .banco-cases .guide-grid::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
}

body.sf-banco .banco-cases .guide-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "title go"
    "ask   go";
  gap: 4px var(--banco-s5);
  align-items: center;
  align-content: start;
  min-width: 0;
  padding: var(--banco-s5) 0;
  border: 0;
  border-top: 1px dashed var(--banco-line-strong);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow-wrap: normal;
}

body.sf-banco .banco-cases .guide-card:nth-child(-n+2) {
  border-top: 0;
}

body.sf-banco .banco-cases .guide-card .eyebrow {
  grid-area: label;
  margin: 0;
  font-size: 13px;
}

body.sf-banco .banco-cases .guide-card h2 {
  grid-area: title;
  margin: 0;
  color: var(--banco-ink);
  font-size: var(--banco-h3);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
  hyphens: manual;
}

body.sf-banco .banco-cases .guide-card p {
  grid-area: ask;
  max-width: 46ch;
  margin: 0;
  color: var(--banco-muted);
  font-size: 15px;
  line-height: 1.45;
}

body.sf-banco .banco-cases .guide-card .inline-link {
  grid-area: go;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--banco-cta-hover);
  font-size: var(--banco-text-sm);
  font-weight: 750;
  white-space: nowrap;
}

body.sf-banco .banco-cases .guide-card:hover h2 {
  text-decoration: underline;
  text-decoration-color: var(--banco-marker);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}


/* 13. Come scegliamo, Perché Cosa usare ------------------------------------------------- */
/* Three steps as one short list: ink chip, title, one sentence. No rules, no gaps. */

body.sf-banco article.prose .method-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 66ch;
  margin: var(--banco-s7) 0;
}

body.sf-banco article.prose .method-steps > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 11ch) minmax(0, 1fr);
  gap: 0 var(--banco-s4);
  align-items: center;
  padding: var(--banco-s4) 0;
  border: 0;
  border-top: 1px dashed var(--banco-line-strong);
}

body.sf-banco article.prose .method-steps > div:first-child {
  border-top: 0;
  padding-top: 0;
}

body.sf-banco article.prose .method-steps > div > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--banco-ink);
  color: var(--banco-paper);
  font: 800 16px/1 var(--banco-font);
  letter-spacing: 0;
}

body.sf-banco article.prose .method-steps h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.015em;
}

body.sf-banco article.prose .method-steps p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Questions: the same round + / − control as the tool page and the finder */
body.sf-banco article.prose .method-detail {
  max-width: 66ch;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--banco-line);
}

body.sf-banco article.prose .method-detail:last-of-type {
  border-bottom: 1px solid var(--banco-line);
}

body.sf-banco article.prose .method-detail > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--banco-s4);
  min-height: 64px;
  padding: var(--banco-s3) 0;
  list-style: none;
  color: var(--banco-ink);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.35;
  cursor: pointer;
}

body.sf-banco article.prose .method-detail > summary::-webkit-details-marker {
  display: none;
}

body.sf-banco article.prose .method-detail > summary::after {
  content: "+";
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--banco-canvas-deep);
  color: var(--banco-ink);
  font: 700 20px/1 var(--banco-font);
  transition: background-color .18s var(--banco-ease);
}

body.sf-banco article.prose .method-detail[open] > summary::after {
  content: "\2212";
}

body.sf-banco article.prose .method-detail > summary:hover::after {
  background: var(--banco-sage);
}

body.sf-banco article.prose .method-detail > p {
  margin: 0 0 var(--banco-s5);
  font-size: 16px;
}

/* The ink callout keeps its own heading: no section rule inside it */
body.sf-banco article.prose .method-callout h2 {
  margin: 0;
  padding: 0;
  border: 0;
}

body.sf-banco article.prose.why-page > .button {
  margin-top: var(--banco-s5);
}

@media (max-width: 1000px) {
  body.sf-banco .banco-cases .guide-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--banco-s2) var(--banco-s5);
  }

  body.sf-banco .banco-cases .guide-card:nth-child(2) {
    border-top: 1px dashed var(--banco-line-strong);
  }
}

@media (max-width: 767px) {
  body.sf-banco .banco-cases .guide-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "title"
      "ask"
      "go";
    gap: 6px;
  }

  body.sf-banco .banco-cases .guide-card .inline-link {
    margin-top: 4px;
  }

  body.sf-banco article.prose .method-steps > div {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
  }

  body.sf-banco article.prose .method-steps > div > span {
    grid-row: span 2;
  }

  body.sf-banco article.prose .method-steps p {
    grid-column: 2;
    margin-top: 2px;
  }
}


/* 14. Conferma: the same stack of papers as the report gate ------------------------------- */
/* A negative z-index child paints above its parent's background: the front sheet is ::after. */

body.sf-banco .banco-confirm {
  position: relative;
  isolation: isolate;
  width: min(100% - var(--banco-gutter) * 2, 500px);
  max-width: none;
  margin: var(--banco-s8) auto var(--banco-s9);
  padding: clamp(26px, 6vw, 44px);
}

body.sf-banco .banco-confirm::before,
body.sf-banco .banco-confirm::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
}

body.sf-banco .banco-confirm::before {
  border-radius: var(--banco-r-card);
  background: var(--banco-paper-warm);
  box-shadow: var(--banco-shadow-rest);
  transform: translate(-34px, 20px) rotate(-4.5deg);
}

body.sf-banco .banco-confirm::after {
  border-radius: var(--banco-r-panel);
  background: var(--banco-paper);
  box-shadow: var(--banco-shadow-lift);
}

body.sf-banco .banco-confirm h1 {
  margin: 0 0 var(--banco-s3);
  font-size: clamp(30px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

body.sf-banco .banco-confirm p {
  margin: 0 0 var(--banco-s4);
  color: var(--banco-ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

body.sf-banco .banco-confirm p:last-child {
  margin-bottom: 0;
}

body.sf-banco .banco-confirm .button {
  width: 100%;
  min-height: 54px;
  margin-bottom: var(--banco-s4);
}


/* 15. Italia: three observations, the rest on request ------------------------------------ */

body.sf-banco article.prose .banco-italy-note {
  max-width: 66ch;
  margin: var(--banco-s5) 0 0;
  padding: var(--banco-s4) var(--banco-s5);
  border-radius: var(--banco-r-card);
  background: var(--banco-canvas);
  color: var(--banco-ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

body.sf-banco article.prose section.fact {
  max-width: 66ch;
  margin-top: var(--banco-s6);
  padding: var(--banco-s5) 0 0;
  border: 0;
  border-top: 1px dashed var(--banco-line-strong);
}

body.sf-banco article.prose section.fact h2 {
  margin-top: var(--banco-s2);
  padding-top: 0;
  border: 0;
}

body.sf-banco article.prose section.fact .eyebrow {
  margin: 0;
}

body.sf-banco article.prose section.fact .fine {
  font-size: 13px;
  line-height: 1.55;
}

body.sf-banco article.prose .banco-italy-more {
  max-width: 66ch;
  margin-top: var(--banco-s6);
}

body.sf-banco article.prose .banco-italy-more > summary {
  margin-inline: 0;
}

@media (max-width: 767px) {
  body.sf-banco .banco-confirm::before {
    transform: translate(-5px, 14px) rotate(-2deg);
  }
}


/* 16. Reading floor ----------------------------------------------------------------------- */
/* Notes, sources and "Fonti e dettagli" are read, not decoration: never under 13px.
   The older sheets set several of them to 11px with two or three classes. */
body.sf-banco :is(.fine, .company-more, .company-fact-meta, .company-missing-note, .sf-tool-price-note),
body.sf-banco :is(.sf-tool-disclosure-body, .sf-tool-fact, .sf-tool-next, .sf-gate-panel, .sf-compare-start) .fine,
body.sf-banco :is(.sf-tool-disclosure-body, .sf-tool-fact) li .fine {
  font-size: 13px;
  line-height: 1.5;
}


/* 17. Trend filters: one behaviour on screen ------------------------------------------------ */
/* With JavaScript the selects apply on change and the page says so: the "Mostra" button
   would contradict the sentence. Without JavaScript the help stays hidden and the button stays. */
body.sf-banco .sf-trends .sf-trend-filters:has(+ [data-trend-filter-help]:not([hidden])) button[type=submit] {
  display: none;
}


/* 18. Video corsi: the photo is a print taped to the sheet ---------------------------------- */
/* The only photograph of people on the site. It is an object like the others: a snapshot
   with its white border, a little crooked, held by a strip of tape. Never stretched. */
body.sf-banco .sf-course {
  position: relative;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3vw, 40px);
  overflow: visible;
}

body.sf-banco .sf-course-image {
  align-self: center;
  height: auto;
  border: 10px solid #fff;
  border-bottom-width: 14px;
  border-radius: 4px;
  box-shadow: var(--banco-shadow-wood);
  transform: rotate(-1.6deg);
}

body.sf-banco .sf-course::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: clamp(8px, 1.6vw, 22px);
  left: clamp(90px, 22%, 300px);
  width: 118px;
  height: 30px;
  background: #ef895166;
  transform: rotate(-4deg);
}

body.sf-banco .sf-course > div {
  padding: 0 clamp(0px, 1.5vw, 24px);
}

@media (max-width: 1000px) {
  body.sf-banco .sf-course::before {
    left: 34%;
  }

  body.sf-banco .sf-course > div {
    padding: var(--banco-s3) 4px var(--banco-s2);
  }
}


/* 19. Guide sources: quiet chips, not running-text links ------------------------------------ */
body.sf-banco :is(.sf-article, article) .sf-guide-sources li {
  margin: 0;
  padding: 0;
}

body.sf-banco :is(.sf-article, article) .sf-guide-sources li a {
  border-bottom: 1px solid var(--banco-line-strong);
  color: var(--banco-ink);
  text-decoration: none;
}

body.sf-banco :is(.sf-article, article) .sf-guide-sources li a > span[aria-hidden] {
  color: var(--banco-cta-hover);
}