/* UK Bonus Pages: shared styles for every page built with the .nb-page layout (the homepage guide
   and the bonus, casino and payment pages). Loaded automatically on those pages. Everything is scoped to .nb-page and
   nothing here sets a page width, background or margin: the theme keeps control of the layout. */
/* ---------- 1. Tokens ---------- */
.nb-page {
  --nb-paper: #F5F7F3;
  --nb-white: #FFFFFF;
  --nb-ink: #10261F;
  --nb-felt: #1F5A45;
  --nb-felt-deep: #12382B;
  --nb-mint: #E1EEE6;
  --nb-gold: #E0A42B;
  --nb-gold-deep: #B9841A;
  --nb-rule: #D3DCD6;
  --nb-muted: #556B62;
  --nb-alert: #B4432F;
  --nb-serif: "Literata", Georgia, "Times New Roman", serif;
  --nb-sans: "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nb-measure: 48rem;           /* text column, ~90 characters */
  --nb-wide: 68rem;              /* ranking block, tables */
  --nb-radius: 8px;
  --nb-radius-sm: 6px;

  /* Layout is left to the theme: the block fills whatever column the theme gives it.
     This stylesheet only styles the elements inside. */
  width: 100%;
  background: transparent;
  color: var(--nb-ink);
  font-family: var(--nb-sans);
  font-size: 1.0625rem;          /* body text on phones: 18px with Astra's 17px root */
  line-height: 1.65;
}
@media (min-width: 760px) {
  .nb-page { font-size: 1.18rem; }  /* body text from tablets up: 20px. Change this one number to resize the article text */
}
.nb-page *, .nb-page *::before, .nb-page *::after { box-sizing: border-box; }

/* ---------- 2. Type ---------- */
.nb-page h1, .nb-page h2, .nb-page h3, .nb-page h4 {
  font-family: var(--nb-serif); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--nb-ink); margin: 0 0 0.6em;
}
.nb-page h1 { font-size: 1.6rem; }
.nb-page h2 { font-size: 1.7rem; margin-top: 2.6rem; }
.nb-page h3 { font-size: 1.32rem; margin-top: 1.8rem; }
@media (min-width: 760px) {
  .nb-page h1 { font-size: 2.5rem; }
  .nb-page h2 { font-size: 2.05rem; }
  .nb-page h3 { font-size: 1.5rem; }
}
.nb-page p, .nb-page ul, .nb-page ol, .nb-page dl { margin: 0 0 1.1rem; font-size: inherit; }
.nb-page ul, .nb-page ol { padding-left: 1.3rem; list-style-position: outside; }
.nb-page ul { list-style: disc; }
.nb-page ol { list-style: decimal; }
.nb-page li { margin-bottom: 0.35rem; }
.nb-page a { color: var(--nb-felt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.nb-page a:hover { color: var(--nb-felt-deep); }
.nb-page strong { font-weight: 600; }
.nb-page .nb-small { font-size: 0.9em; }
.nb-page figure { margin: 0 0 1.5rem; }
.nb-page figcaption { font-size: 0.88em; color: var(--nb-muted); margin-top: 0.5rem; font-style: italic; }
.nb-page img { max-width: 100%; height: auto; display: block; border-radius: var(--nb-radius); }
.nb-page :focus-visible { outline: 3px solid var(--nb-gold); outline-offset: 2px; }
.nb-page h2, .nb-page h3 { scroll-margin-top: 5rem; }

/* ---------- 3. Grid (no constraints: everything is as wide as the theme's content column) ---------- */
.nb-page .nb-container { width: 100%; margin: 0; padding: 0; }
.nb-page .nb-prose, .nb-page .nb-wide { max-width: none; margin-left: 0; margin-right: 0; }

/* ---------- 4. Hero ---------- */
.nb-page .nb-hero h1 { margin-bottom: 0.9rem; }
.nb-page .nb-lead { font-size: 1.06em; }
.nb-page .nb-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.nb-page .nb-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0;
  border: 1px solid var(--nb-rule); background: var(--nb-white);
  border-radius: 999px; padding: 0.28rem 0.8rem; font-size: 0.82em; font-weight: 600; color: var(--nb-felt-deep);
}
.nb-page .nb-badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--nb-felt); }
.nb-page .nb-badge--age { background: var(--nb-ink); color: #fff; border-color: var(--nb-ink); }
.nb-page .nb-badge--age::before { background: var(--nb-gold); }
.nb-page .nb-datacurrent { font-size: 0.88em; color: var(--nb-muted); font-style: italic; }
.nb-page .nb-hero__figure { margin: 1.5rem 0 1.25rem; }
/* Chart figures (one or more per page): desktop image with a phone version from <picture> */
.nb-page .nb-figure { margin: 1.75rem 0 2rem; }
.nb-page .nb-figure picture { display: block; }
.nb-page .nb-figure img { width: 100%; height: auto; border: 1px solid var(--nb-rule); border-radius: var(--nb-radius); background: var(--nb-white); }
.nb-page .nb-figure figcaption { margin-top: 0.6rem; line-height: 1.45; }

.nb-page .nb-hero__placeholder {
  aspect-ratio: 16 / 7; border-radius: var(--nb-radius);
  background:
    linear-gradient(135deg, rgba(31,90,69,0.9), rgba(18,56,43,0.95)),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px);
  display: grid; place-items: center; color: #fff; text-align: center; padding: 1rem;
}
.nb-page .nb-hero__placeholder span { font-family: var(--nb-serif); font-size: 1.2rem; max-width: 24rem; opacity: 0.95; }

/* ---------- 5. Table of contents ---------- */
.nb-page .nb-toc {
  background: var(--nb-white); border: 1px solid var(--nb-rule); border-radius: var(--nb-radius);
  padding: 1rem 1.25rem; margin: 1.5rem 0 1rem;
}
.nb-page .nb-toc__title { font-family: var(--nb-serif); font-weight: 600; margin: 0 0 0.5rem; }
.nb-page .nb-toc ol { margin: 0; padding-left: 1.3rem; columns: 1; column-gap: 2rem; }
.nb-page .nb-toc li { break-inside: avoid; margin-bottom: 0.25rem; }
.nb-page .nb-toc a { text-decoration: none; }
.nb-page .nb-toc a:hover { text-decoration: underline; }
@media (min-width: 640px) { .nb-page .nb-toc ol { columns: 2; } }

/* ---------- 6. Body elements ---------- */
.nb-page .nb-note {
  background: var(--nb-mint); border-left: 4px solid var(--nb-felt);
  border-radius: 0 var(--nb-radius) var(--nb-radius) 0; padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.nb-page .nb-note p:last-child { margin-bottom: 0; }
.nb-page .nb-formula {
  font-family: var(--nb-serif); font-size: 1.2em; text-align: center;
  padding: 1rem; margin: 1.25rem 0; background: var(--nb-white); border: 1px solid var(--nb-rule); border-radius: var(--nb-radius);
}
.nb-page .nb-table-wrap { overflow-x: auto; margin: 1.25rem 0 1.75rem; -webkit-overflow-scrolling: touch; }
.nb-page .nb-table {
  width: 100%; border-collapse: collapse; background: var(--nb-white);
  border: 1px solid var(--nb-rule); font-size: 0.92em; margin: 0;
}
.nb-page .nb-table th, .nb-page .nb-table td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--nb-rule); }
.nb-page .nb-table th { font-weight: 600; background: var(--nb-mint); white-space: nowrap; }
.nb-page .nb-table tbody tr:last-child td { border-bottom: 0; }
.nb-page .nb-table td.nb-num, .nb-page .nb-table th.nb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-page .nb-table .nb-alert { color: var(--nb-alert); }
.nb-page .nb-table .nb-ok { color: var(--nb-felt-deep); font-weight: 600; }
@media (max-width: 600px) {
  .nb-page .nb-table { font-size: 0.86em; }
  .nb-page .nb-table th, .nb-page .nb-table td { padding: 0.55rem 0.65rem; }
  .nb-page .nb-table th { white-space: normal; min-width: 5.5rem; }
  .nb-page .nb-table td:not(.nb-num) { min-width: 8.5rem; }
}

.nb-page .nb-steps { counter-reset: step; list-style: none; padding: 0; }
.nb-page .nb-steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 1rem; }
.nb-page .nb-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.1rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--nb-felt); color: #fff;
  font-family: var(--nb-serif); font-weight: 600; display: grid; place-items: center;
}

.nb-page .nb-verdict { border: 1px solid var(--nb-felt); border-radius: var(--nb-radius); padding: 1.25rem 1.5rem; background: var(--nb-white); margin: 1.5rem 0; }
.nb-page .nb-verdict dl { display: grid; grid-template-columns: 1fr; gap: 0.5rem 1rem; margin: 0; }
.nb-page .nb-verdict dt { font-weight: 600; color: var(--nb-muted); font-size: 0.9em; }
.nb-page .nb-verdict dd { margin: 0 0 0.5rem; }
@media (min-width: 640px) { .nb-page .nb-verdict dl { grid-template-columns: 12rem 1fr; } .nb-page .nb-verdict dd { margin-bottom: 0; } }

.nb-page .nb-faq { border-top: 1px solid var(--nb-rule); }
.nb-page .nb-faq details { border-bottom: 1px solid var(--nb-rule); }
.nb-page .nb-faq summary {
  cursor: pointer; list-style: none; padding: 0.95rem 2.2rem 0.95rem 0; position: relative;
  font-family: var(--nb-serif); font-weight: 500; font-size: 1.08em;
}
.nb-page .nb-faq summary::-webkit-details-marker { display: none; }
.nb-page .nb-faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.8rem; font-size: 1.4rem; color: var(--nb-felt); line-height: 1; }
.nb-page .nb-faq details[open] summary::after { content: "–"; }
.nb-page .nb-faq details > div { padding: 0 0 1rem; }

.nb-page .nb-byline {
  display: flex; gap: 1rem; align-items: flex-start; margin: 2.5rem 0 0; padding: 1.25rem;
  background: var(--nb-white); border: 1px solid var(--nb-rule); border-radius: var(--nb-radius);
}
.nb-page .nb-byline__avatar {
  flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--nb-mint); color: var(--nb-felt); display: grid; place-items: center;
  font-family: var(--nb-serif); font-weight: 600;
}
.nb-page .nb-byline p { margin: 0 0 0.3rem; font-size: 0.95rem; }
.nb-page .nb-compliance { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--nb-rule); font-size: 0.88em; color: var(--nb-muted); }

/* ---------- 7. Ranking (same rules the plugin ships, so the page renders before the plugin stylesheet loads) ---------- */
/* Ranking list: logo tile · name and licence · facts · headline figures · collapsible terms */
.nb-page .nb-toplist__title { font-family: var(--nb-serif); font-weight: 500; }
.nb-page .nb-toplist__disclosure { color: var(--nb-muted); font-size: 0.95rem; margin: 0 0 1.4rem; }
.nb-page .nb-toplist__summary { margin: 0 0 1rem; padding: 0.85rem 1.1rem; background: var(--nb-mint); border-radius: 8px; font-size: 1.05rem; line-height: 1.55; color: var(--nb-ink); }
.nb-page .nb-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

.nb-page .nb-rank { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: none; }
.nb-page .nb-rank__item {
  position: relative; margin: 0; padding: 1.15rem 1.25rem 0;
  display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) 15.5rem; column-gap: 1.35rem;
  grid-template-areas: "logo head side" "logo body side" "more more more";
  background: var(--nb-white); border: 1px solid var(--nb-rule); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(16, 38, 31, 0.03), 0 10px 24px -18px rgba(16, 38, 31, 0.35);
}
.nb-page .nb-rank__item--first { border-color: var(--nb-gold); box-shadow: 0 0 0 1px var(--nb-gold), 0 12px 28px -18px rgba(185, 132, 26, 0.55); }

.nb-page .nb-rank__pos {
  position: absolute; top: -0.75rem; left: -0.75rem; z-index: 2;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--nb-serif); font-weight: 600; font-size: 1.1rem; line-height: 1;
  background: var(--nb-felt); color: #fff; box-shadow: 0 0 0 3px var(--nb-paper);
  font-variant-numeric: tabular-nums;
}
.nb-page .nb-rank__item--first .nb-rank__pos { background: var(--nb-gold); color: var(--nb-ink); }

.nb-page .nb-rank__logo {
  grid-area: logo; align-self: start;
  height: 6.2rem; border-radius: 10px; padding: 0.7rem 0.8rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background-color: var(--logo-bg, #1F5A45);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.28) 100%);
}
.nb-page .nb-rank__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; }
.nb-page a.nb-rank__logo:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 20px -14px rgba(0, 0, 0, 0.7); }
.nb-page .nb-rank__wordmark {
  color: #fff; text-align: center; font-family: var(--nb-serif); font-weight: 600;
  font-size: 1.4rem; line-height: 1.1; letter-spacing: 0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.nb-page .nb-rank__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; margin: 0 0 0.4rem; min-width: 0; }
.nb-page .nb-rank__name { margin: 0 0.25rem 0 0; font-family: var(--nb-serif); font-weight: 600; font-size: 1.55rem; line-height: 1.2; color: var(--nb-ink); letter-spacing: -0.01em; }
.nb-page .nb-rank__name a { color: inherit; text-decoration: none; }
.nb-page .nb-rank__name a:hover { text-decoration: underline; }
.nb-page .nb-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.86rem; font-weight: 600; line-height: 1.2; padding: 0.26rem 0.7rem; border-radius: 999px; white-space: nowrap; }
.nb-page .nb-chip--ok { background: var(--nb-mint); color: var(--nb-felt-deep); }
.nb-page .nb-chip--off { background: #FBE9E5; color: #8A2E1F; }
.nb-page .nb-chip--off::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #C0452F; }
.nb-page .nb-chip--badge { background: #F7ECD2; color: #6B4E0F; }
.nb-page .nb-chip--plain { background: var(--nb-paper); color: var(--nb-muted); border: 1px solid var(--nb-rule); }

.nb-page .nb-rank__body { grid-area: body; min-width: 0; }
.nb-page .nb-rank__offer { margin: 0 0 0.35rem; font-weight: 600; font-size: 1.2rem; line-height: 1.4; color: var(--nb-ink); }
.nb-page .nb-rank__facts { margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.1rem; font-size: 1rem; line-height: 1.5; color: var(--nb-muted); }
.nb-page .nb-rank__facts b { font-weight: 600; color: var(--nb-ink); }
.nb-page .nb-rank__worth { font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 6px; }
.nb-page .nb-rank__worth.is-neg { background: #FBE9E5; color: #8A2E1F; }
.nb-page .nb-rank__worth.is-pos { background: var(--nb-mint); color: var(--nb-felt-deep); }
.nb-page .nb-rank__sum { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #2F463E; }
.nb-page .nb-rank__pay { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.nb-page .nb-rank__pay li { margin: 0; font-size: 0.82rem; font-weight: 600; padding: 0.18rem 0.55rem; border: 1px solid var(--nb-rule); border-radius: 5px; color: var(--nb-muted); background: var(--nb-paper); }
.nb-page .nb-rank__pay .nb-rank__pay-more { border-style: dashed; background: transparent; }

.nb-page .nb-rank__side { grid-area: side; align-self: center; display: flex; flex-direction: column; gap: 0.65rem; }
.nb-page .nb-rank__stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 12px; overflow: hidden;
  background: linear-gradient(150deg, #1F5A45 0%, #12382B 100%); color: #fff;
}
.nb-page .nb-rank__stats > div { padding: 0.8rem 0.5rem; text-align: center; }
.nb-page .nb-rank__stats > div + div { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.nb-page .nb-rank__stats small { display: block; font-size: 0.82rem; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.75); margin-bottom: 0.2rem; }
.nb-page .nb-rank__stats strong { display: block; font-family: var(--nb-serif); font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: var(--nb-gold); font-variant-numeric: tabular-nums; }
.nb-page .nb-rank__go { display: grid; gap: 0.35rem; }
.nb-page .nb-rank__tc { margin: 0; text-align: center; font-size: 0.76rem; line-height: 1.3; color: var(--nb-muted); }

.nb-page .nb-rank__more { grid-area: more; margin-top: 0.85rem; border-top: 1px dashed var(--nb-rule); }
.nb-page .nb-rank__more summary { list-style: none; cursor: pointer; padding: 0.55rem 0 0.65rem; font-size: 0.98rem; font-weight: 600; color: var(--nb-felt); text-align: right; }
.nb-page .nb-rank__more summary::-webkit-details-marker { display: none; }
.nb-page .nb-rank__more summary::after { content: " ▾"; }
.nb-page .nb-rank__more[open] summary::after { content: " ▴"; }
.nb-page .nb-rank__more summary:hover { color: var(--nb-felt-deep); text-decoration: underline; }
.nb-page .nb-rank__more-body { padding: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.55; }
.nb-page .nb-rank__verdict { margin: 0 0 0.9rem; color: var(--nb-ink); }
.nb-page .nb-rank__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.75rem; }
.nb-page .nb-rank__cols h4 { margin: 0 0 0.5rem; font-family: var(--nb-serif); font-weight: 600; font-size: 1.12rem; color: var(--nb-ink); }
.nb-page .nb-rank__dl { margin: 0 0 0.6rem; }
.nb-page .nb-rank__dl > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--nb-rule); }
.nb-page .nb-rank__dl dt { color: var(--nb-muted); font-weight: 600; margin: 0; }
.nb-page .nb-rank__dl dd { margin: 0; }
.nb-page .nb-rank__terms { margin: 0; font-size: 0.9rem; color: var(--nb-muted); }
.nb-page .nb-rank__lic { margin: 0 0 0.7rem; }
.nb-page .nb-rank__lic--off { color: #6E2C20; }
.nb-page .nb-rank__pc ul { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.nb-page .nb-rank__pc li { position: relative; margin: 0 0 0.3rem; padding-left: 1.2rem; }
.nb-page .nb-rank__pc li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.nb-page .nb-rank__pros li::before { content: "+"; color: var(--nb-felt); }
.nb-page .nb-rank__cons li::before { content: "–"; color: #B4432F; }

.nb-page .nb-rank.is-collapsible:not(.is-open) .nb-rank__item--hidden { display: none; }
.nb-page .nb-rank__toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 1rem 0 1.5rem; padding: 0.55rem 1.2rem;
  border: 1px solid var(--nb-rule); border-radius: 999px; background: var(--nb-white); color: var(--nb-felt-deep);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.nb-page .nb-rank__toggle::after { content: "▾"; font-size: 0.75em; }
.nb-page .nb-rank__toggle[aria-expanded="true"]::after { content: "▴"; }
.nb-page .nb-rank__toggle:hover { border-color: var(--nb-felt); }

.nb-page .nb-btn {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--nb-gold); color: var(--nb-ink); font-weight: 700; font-size: 1.1rem;
  padding: 0.85rem 1.1rem; border-radius: 8px; border: 0; font-family: inherit;
}
.nb-page .nb-btn:hover { background: var(--nb-gold-deep); color: var(--nb-ink); }
.nb-page .nb-btn, .nb-page .nb-btn:hover, .nb-page .nb-btn:focus { text-decoration: none !important; } /* themes underline links in post content */

.nb-page .nb-rank__cta {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
  padding: 0.95rem 1rem 0.9rem; border-radius: 10px;
  font-size: 1.15rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1;
  color: var(--nb-ink); background: linear-gradient(180deg, #F6C553 0%, #E6AA2E 55%, #D99A1F 100%);
  box-shadow: 0 4px 0 #A8750F, 0 12px 20px -10px rgba(185, 132, 26, 0.75);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.nb-page .nb-rank__cta:hover, .nb-page .nb-rank__cta:focus-visible {
  color: var(--nb-ink); background: linear-gradient(180deg, #F8CD66 0%, #EAB13A 55%, #DDA026 100%);
  transform: translateY(-1px); box-shadow: 0 5px 0 #A8750F, 0 16px 24px -12px rgba(185, 132, 26, 0.8);
}
.nb-page .nb-rank__cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #A8750F, 0 6px 12px -8px rgba(185, 132, 26, 0.6); }
.nb-page .nb-rank__cta svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.nb-page .nb-rank__cta:hover svg { transform: translateX(3px); }
.nb-page .nb-rank__cta--missing { opacity: 0.55; box-shadow: none; outline: 2px dashed var(--nb-gold-deep); outline-offset: 3px; }
.nb-page .nb-rank__tc--missing { color: #8A2E1F; }
.nb-page .nb-rank__tc--missing a { color: inherit; font-weight: 600; }

@media (max-width: 860px) {
  .nb-page .nb-rank__item { grid-template-columns: 9rem minmax(0, 1fr); grid-template-areas: "logo head" "logo body" "side side" "more more"; }
  .nb-page .nb-rank__side { margin-top: 0.9rem; flex-direction: row; align-items: stretch; }
  .nb-page .nb-rank__stats { flex: 1 1 auto; }
  .nb-page .nb-rank__go { flex: 0 0 auto; align-content: center; }
  .nb-page .nb-rank__cta { width: auto; padding: 1rem 1.5rem 0.95rem; }
  .nb-page .nb-rank__side .nb-rank__pay { display: none; }
}
@media (max-width: 600px) {
  .nb-page .nb-rank__item { padding: 1rem 0.95rem 0; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 0.9rem; grid-template-areas: "logo head" "body body" "side side" "more more"; }
  .nb-page .nb-rank__logo { height: 4.5rem; padding: 0.5rem 0.55rem; border-radius: 8px; }
  .nb-page .nb-rank__wordmark { font-size: 0.95rem; }
  .nb-page .nb-rank__head { align-self: center; margin: 0; }
  .nb-page .nb-rank__name { font-size: 1.35rem; flex-basis: 100%; }
  .nb-page .nb-rank__body { margin-top: 0.75rem; }
  .nb-page .nb-rank__offer { font-size: 1.12rem; }
  .nb-page .nb-rank__side { flex-direction: column; }
  .nb-page .nb-rank__go { flex: 1 1 auto; }
  .nb-page .nb-rank__cta { width: 100%; }
  .nb-page .nb-rank__pos { top: -0.6rem; left: -0.5rem; width: 2rem; height: 2rem; font-size: 0.95rem; }
  .nb-page .nb-rank__cols { grid-template-columns: 1fr; }
  .nb-page .nb-rank__more summary { text-align: left; }
  .nb-page .nb-toplist__disclosure { font-size: 0.82rem; line-height: 1.45; margin-bottom: 1.2rem; }
}

/* Ranking at the top of the page */
.nb-page .nb-top-rank { margin: 0.25rem 0 0; scroll-margin-top: 5rem; }
.nb-page .nb-rank-notes { margin-top: 1.4rem; }
.nb-page .nb-rank-notes p { font-size: 0.9em; color: var(--nb-muted); }
.nb-page .nb-rank-notes p strong { color: var(--nb-ink); }
.nb-page .nb-rank-licence .nb-toplist__summary {
  position: relative; margin: 0 0 0.8rem; padding: 0.7rem 1rem 0.7rem 2.6rem;
  font-size: 0.98rem; line-height: 1.5; color: var(--nb-ink); border: 1px solid #CFE0D6;
}
@media (max-width: 600px) {
  .nb-page .nb-rank-licence .nb-toplist__summary { font-size: 0.88rem; line-height: 1.45; padding: 0.6rem 0.8rem 0.6rem 2.3rem; }
  .nb-page .nb-rank-licence .nb-toplist__summary::before { left: 0.75rem; top: 0.68rem; }
}
.nb-page .nb-rank-licence .nb-toplist__summary::before {
  content: "i"; position: absolute; left: 0.9rem; top: 0.82rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--nb-felt); color: #fff; font: 700 0.75rem/1.15rem var(--nb-serif); text-align: center;
}
.nb-page .nb-intro { margin-top: 2.25rem; padding-top: 1.9rem; border-top: 1px solid var(--nb-rule); }

/* Calculator */
.nb-page .nb-calc { background: var(--nb-white); border: 1px solid var(--nb-rule); border-radius: var(--nb-radius); padding: 1.25rem; margin: 1rem 0 1.5rem; }
.nb-page .nb-calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem 1rem; }
.nb-page .nb-calc label { display: flex; flex-direction: column; justify-content: space-between; gap: 0.35rem; font-size: 0.95rem; font-weight: 600; color: var(--nb-muted); }
.nb-page .nb-calc input, .nb-page .nb-calc select { font: inherit; font-size: 1.1rem; font-weight: 600; color: var(--nb-ink); padding: 0.55rem 0.65rem; border: 1px solid var(--nb-rule); border-radius: 6px; background: var(--nb-paper); width: 100%; }
.nb-page .nb-calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.8rem 1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--nb-rule); }
.nb-page .nb-calc__out small { display: block; color: var(--nb-muted); font-size: 0.9rem; }
.nb-page .nb-calc__out strong { font-family: var(--nb-serif); font-size: 1.65rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.nb-page .nb-calc__out p { grid-column: 1 / -1; margin: 0.3rem 0 0; font-weight: 600; padding: 0.6rem 0.8rem; border-radius: 6px; }
.nb-page .nb-calc__out--good p { background: var(--nb-mint); color: var(--nb-felt-deep); }
.nb-page .nb-calc__out--bad p { background: #FBF1EF; color: #8A2E1F; }
@media (min-width: 760px) { .nb-page .nb-calc__out { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .nb-page .nb-calc { padding: 1rem 0.95rem; }
  .nb-page .nb-calc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.8rem; }
  .nb-page .nb-calc__grid label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nb-page .nb-calc label { font-size: 0.85rem; }
  .nb-page .nb-calc input, .nb-page .nb-calc select { font-size: 1.05rem; padding: 0.5rem 0.55rem; }
  .nb-page .nb-calc__out { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.8rem; }
  .nb-page .nb-calc__out small { font-size: 0.82rem; }
  .nb-page .nb-calc__out strong { font-size: 1.3rem; }
  .nb-page .nb-calc__out p { font-size: 0.95rem; }
}

/* Owners grid */
.nb-page .nb-owners { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1rem; margin: 1.25rem 0 1.75rem; }
.nb-page .nb-owner { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem 1.1rem; background: var(--nb-white); border: 1px solid var(--nb-rule); border-radius: 12px; }
.nb-page .nb-owner h4 { margin: 0; font-family: var(--nb-serif); font-weight: 600; font-size: 1.22rem; line-height: 1.25; color: var(--nb-ink); }
.nb-page .nb-owner p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--nb-muted); }
.nb-page .nb-owner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.nb-page .nb-owner li { margin: 0; font-size: 0.88rem; font-weight: 600; padding: 0.22rem 0.6rem; border-radius: 999px; background: var(--nb-mint); color: var(--nb-felt-deep); }
.nb-page .nb-owner__fine { margin-top: auto !important; padding-top: 0.55rem; border-top: 1px solid var(--nb-rule); font-size: 0.92rem !important; color: #7A3426 !important; }
.nb-page .nb-owner__fine b { font-weight: 700; }
.nb-page .nb-owner--wide { grid-column: 1 / -1; }
.nb-page .nb-owner--wide li { background: var(--nb-paper); color: var(--nb-ink); border: 1px solid var(--nb-rule); }
@media (min-width: 1180px) {
  .nb-page .nb-owners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nb-page .nb-owner--half { grid-column: span 2; }
}

/* Breadcrumbs */
.nb-page .nb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; margin: 0 0 0.9rem; font-size: 0.85em; line-height: 1.4; color: var(--nb-muted); }
.nb-page .nb-crumbs a { color: var(--nb-felt); text-decoration: none; }
.nb-page .nb-crumbs a:hover { text-decoration: underline; }
.nb-page .nb-crumbs span[aria-hidden] { color: #9AA9A2; }

/* Link cards: related pages, hub directories, browse by offer */
.nb-page .nb-links { list-style: none; margin: 1rem 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.nb-page .nb-links li { margin: 0; }
.nb-page .nb-links a {
  display: block; height: 100%; padding: 0.85rem 1rem; text-decoration: none; color: var(--nb-ink);
  background: var(--nb-white); border: 1px solid var(--nb-rule); border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.nb-page .nb-links a:hover { border-color: var(--nb-felt); box-shadow: 0 8px 18px -14px rgba(16, 38, 31, 0.6); transform: translateY(-1px); }
.nb-page .nb-links strong { display: block; margin-bottom: 0.2rem; font-family: var(--nb-serif); font-weight: 600; font-size: 1.05em; line-height: 1.3; color: var(--nb-felt-deep); }
.nb-page .nb-links span { display: block; font-size: 0.86em; line-height: 1.45; color: var(--nb-muted); }
.nb-page .nb-related { margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  .nb-page * { transition: none !important; animation: none !important; }
}