/* ============================================================
 * Stanford-Binet design system
 * Generated by apply-seo-expansion.js - do not edit by hand.
 * Single source of truth for the site's CSS. On the WordPress
 * migration this file becomes the theme stylesheet.
 * ============================================================ */

.sb-main { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#121722; background:#fff; }
.sb-eyebrow { display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#b5820a; }
.sb-eyebrow.dark { color:#c5c8d1; }
.sb-chip { display:inline-block; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; }

/* ---- Score-explainer hero ---- */
.sb-score-hero { background:linear-gradient(135deg,#fdf8ee 0%,#deedff 100%); padding:80px 24px 64px; }
.sb-score-hero-inner { max-width:1040px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:center; }
.sb-score-numeric { text-align:center; }
.sb-score-numeric .num { font-size:148px; font-weight:800; color:#121722; line-height:0.95; letter-spacing:-0.04em; }
.sb-score-numeric .lab { font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:#5a6478; margin-top:10px; font-weight:600; }
.sb-score-meta h1 { font-size:38px; line-height:1.15; margin:14px 0 14px; font-weight:700; }
.sb-score-meta p { font-size:18px; line-height:1.55; color:#3a4456; margin:0; max-width:520px; }
.sb-score-stats { display:flex; gap:32px; margin-top:24px; }
.sb-score-stats > div { font-size:13px; color:#5a6478; }
.sb-score-stats > div b { display:block; font-size:22px; font-weight:700; color:#121722; margin-bottom:4px; }
@media (max-width:760px) {
  .sb-score-hero-inner { grid-template-columns:1fr; gap:24px; text-align:center; }
  .sb-score-numeric .num { font-size:108px; }
  .sb-score-meta h1 { font-size:30px; }
  .sb-score-stats { justify-content:center; }
}

/* ---- Factor hero ---- */
.sb-factor-hero { background:#121722; color:#fff; padding:96px 24px; position:relative; overflow:hidden; }
.sb-factor-hero::after { content:""; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,#b5820a33 0%,#b5820a00 65%); pointer-events:none; }
.sb-factor-hero-inner { max-width:980px; margin:0 auto; position:relative; z-index:1; }
.sb-factor-hero h1 { font-size:56px; line-height:1.05; margin:18px 0 18px; font-weight:700; letter-spacing:-0.02em; }
.sb-factor-hero p { font-size:20px; line-height:1.55; color:#c5c8d1; max-width:680px; margin:0; }
.sb-factor-meta { display:flex; gap:32px; margin-top:36px; padding-top:28px; border-top:1px solid #2a3144; flex-wrap:wrap; }
.sb-factor-meta > div { font-size:13px; color:#8a93a6; }
.sb-factor-meta > div b { display:block; color:#fff; font-size:15px; font-weight:600; margin-bottom:4px; }
@media (max-width:760px) {
  .sb-factor-hero { padding:64px 24px; }
  .sb-factor-hero h1 { font-size:38px; }
}

/* ---- Article (compare / how-accurate / data report) hero ---- */
.sb-article-hero { background:#faf7ee; border-bottom:1px solid #ede8df; padding:72px 24px 56px; }
.sb-article-hero-inner { max-width:920px; margin:0 auto; }
.sb-article-hero h1 { font-size:44px; line-height:1.1; margin:14px 0 16px; font-weight:700; letter-spacing:-0.01em; }
.sb-article-hero p { font-size:19px; line-height:1.55; color:#444; margin:0; max-width:720px; }
@media (max-width:760px) {
  .sb-article-hero h1 { font-size:32px; }
}

/* ---- Demographic hero ---- */
.sb-demo-hero { padding:80px 24px 56px; border-bottom:1px solid #ede8df; }
.sb-demo-hero.kids { background:linear-gradient(180deg,#fff7e8,#fff); }
.sb-demo-hero.teens { background:linear-gradient(180deg,#fdf8ee,#fff); }
.sb-demo-hero.adults { background:linear-gradient(180deg,#fdf8ee,#fff); }
.sb-demo-hero.seniors { background:linear-gradient(180deg,#fdf8ee,#fff); }
.sb-demo-hero-inner { max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; }
.sb-demo-hero h1 { font-size:42px; line-height:1.12; margin:14px 0 14px; font-weight:700; }
.sb-demo-hero p { font-size:18px; line-height:1.55; color:#3a4456; margin:0; max-width:620px; }
.sb-demo-badge { width:128px; height:128px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1.5px solid rgba(15,18,28,0.06); position:relative; box-shadow:inset 0 0 0 4px rgba(255,255,255,0.4); }
.sb-demo-badge .sb-demo-badge-num { font:italic 700 30px/1 Georgia, "Times New Roman", serif; letter-spacing:-0.01em; }
.sb-demo-badge .sb-demo-badge-cap { font:600 9.5px/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing:0.22em; text-transform:uppercase; opacity:0.7; }
.sb-demo-badge.kids { background:linear-gradient(135deg,#fff8e7,#fff0d4); color:#a86b00; }
.sb-demo-badge.teens { background:linear-gradient(135deg,#fdf8ee,#fdf8ee); color:#b5820a; }
.sb-demo-badge.adults { background:linear-gradient(135deg,#fdf8ee,#fdf8ee); color:#9a6e08; }
.sb-demo-badge.seniors { background:linear-gradient(135deg,#fdf8ee,#fdf8ee); color:#9a6e08; }
@media (max-width:760px) {
  .sb-demo-hero-inner { grid-template-columns:1fr; }
  .sb-demo-hero h1 { font-size:32px; }
  .sb-demo-badge { width:96px; height:96px; }
  .sb-demo-badge .sb-demo-badge-num { font-size:22px; }
  .sb-demo-badge .sb-demo-badge-cap { font-size:8.5px; letter-spacing:0.18em; }
}

/* ---- Tool hero (calculators) ---- */
.sb-tool-hero { background:#121722; color:#fff; padding:64px 24px 56px; }
.sb-tool-hero-inner { max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.sb-tool-hero h1 { font-size:36px; line-height:1.15; margin:14px 0 14px; font-weight:700; }
.sb-tool-hero p { font-size:17px; line-height:1.55; color:#c5c8d1; margin:0; }
.sb-tool-card { background:#fff; color:#121722; border-radius:14px; padding:28px; box-shadow:0 24px 48px rgba(0,0,0,0.18); }
.sb-tool-card label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:#5a6478; text-transform:uppercase; letter-spacing:0.05em; }
.sb-tool-card input, .sb-tool-card select { font:inherit; font-size:18px; padding:12px 14px; width:100%; border:1.5px solid #d9dade; border-radius:8px; background:#fff; box-sizing:border-box; }
.sb-tool-card input:focus, .sb-tool-card select:focus { outline:none; border-color:#b5820a; }
.sb-tool-card button { padding:14px 24px; background:#b5820a; color:#fff; border:none; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; width:100%; transition:background 0.15s; }
.sb-tool-card button:hover { background:#9a6e08; }
.sb-tool-result { margin-top:20px; padding:20px; background:#faf7ee; border-radius:12px; border:1px solid rgba(15,18,28,0.06); }
@media (max-width:760px) {
  .sb-tool-hero-inner { grid-template-columns:1fr; gap:32px; }
}

/* ---- Vault hero (Binet historical pages) ---- */
.sb-vault-hero { background:#1a1f2e; color:#f4ecdb; padding:88px 24px 72px; border-bottom:4px solid #d4a857; }
.sb-vault-hero-inner { max-width:920px; margin:0 auto; }
.sb-vault-hero .sb-eyebrow { color:#d4a857; }
.sb-vault-hero h1 { font-family:Georgia, 'Times New Roman', serif; font-size:52px; line-height:1.1; margin:14px 0 18px; font-weight:600; letter-spacing:-0.01em; }
.sb-vault-hero p { font-size:19px; line-height:1.55; color:#c5b994; max-width:680px; margin:0; font-style:italic; }
@media (max-width:760px) { .sb-vault-hero h1 { font-size:36px; } }

/* ---- Blog hero ---- */
.sb-blog-hero { padding:80px 24px 56px; max-width:780px; margin:0 auto; border-bottom:1px solid #ede8df; }
.sb-blog-meta { display:flex; gap:14px; align-items:center; font-size:13px; color:#666; margin-bottom:16px; }
.sb-blog-meta .sb-eyebrow { margin:0; }
.sb-blog-hero h1 { font-size:42px; line-height:1.15; margin:0 0 16px; font-weight:700; letter-spacing:-0.01em; }
.sb-blog-hero p.lede { font-size:20px; line-height:1.55; color:#444; margin:0; font-weight:400; }
@media (max-width:760px) { .sb-blog-hero h1 { font-size:30px; } }

/* ---- Article body ---- */
.sb-article { max-width:760px; margin:0 auto; padding:48px 24px 64px; font-size:17px; line-height:1.75; }
.sb-article h2 { font-size:28px; font-weight:700; margin:48px 0 16px; line-height:1.2; }
.sb-article h3 { font-size:21px; font-weight:700; margin:32px 0 12px; }
.sb-article p { margin:0 0 18px; }
.sb-article ul, .sb-article ol { padding-left:24px; margin:16px 0 22px; }
.sb-article li { margin-bottom:10px; }
.sb-article a { color:#b5820a; }
.sb-article blockquote { background:#faf7ee; padding:28px 32px; margin:32px 0; font-style:italic; font-size:18px; line-height:1.65; border-radius:12px; border:1px solid rgba(15,18,28,0.06); color:#1a1f2e; }
.sb-article blockquote cite { display:block; font-style:normal; font-size:14px; color:#666; margin-top:12px; }
.sb-article.vault { font-family:Georgia, 'Times New Roman', serif; font-size:18px; line-height:1.8; }
.sb-article.vault h2 { font-family:Georgia, 'Times New Roman', serif; }

.sb-cta { margin:48px 0 0; padding:32px 28px; background:#faf7ee; border-radius:10px; text-align:center; border:1px solid #ede8df; }
.sb-cta p { margin:0 0 16px; font-size:16px; color:#444; }
.sb-cta a { display:inline-block; padding:14px 32px; background:#b5820a; color:#fff; text-decoration:none; border-radius:8px; font-weight:600; font-size:16px; transition:background 0.15s; }
.sb-cta a:hover { background:#9a6e08; text-decoration:none; }
.sb-cta small { display:block; margin-top:14px; font-size:13px; color:#666; }

.sb-table-wrap { overflow-x:auto; margin:24px 0; border-radius:10px; border:1px solid #ede8df; -webkit-overflow-scrolling:touch; }
.sb-cmp-table { width:100%; border-collapse:collapse; font-size:14.5px; table-layout:fixed; }
@media (max-width:560px) {
  .sb-cmp-table { font-size:14px; }
  .sb-cmp-table thead th { padding:12px 10px !important; font-size:10.5px !important; letter-spacing:0.03em !important; }
  .sb-cmp-table tbody td, .sb-cmp-table tbody th { padding:14px 10px !important; }
}
.sb-cmp-table col.col-provider { width:24%; }
.sb-cmp-table col.col-price    { width:11%; }
.sb-cmp-table col.col-time     { width:11%; }
.sb-cmp-table col.col-factors  { width:14%; }
.sb-cmp-table col.col-range    { width:18%; }
.sb-cmp-table col.col-best     { width:22%; }
.sb-cmp-table thead th { padding:14px 14px; text-align:left; background:#121722; color:#fff; font-weight:600; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; vertical-align:middle; }
.sb-cmp-table tbody td,
.sb-cmp-table tbody th { padding:16px 14px; border-bottom:1px solid #eef0f4; vertical-align:top; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto; line-height:1.45; font-weight:400; text-align:left; color:#1a1f2e; }
.sb-cmp-table tbody tr:hover { background:#fafbfd; }
.sb-cmp-table tbody tr:last-child td,
.sb-cmp-table tbody tr:last-child th { border-bottom:none; }
.sb-cmp-table tbody tr.us { background:linear-gradient(135deg, #fffaf0 0%, #fff4e0 100%); }
.sb-cmp-table tbody tr.us th,
.sb-cmp-table tbody tr.us td { font-weight:500; }
.sb-cmp-table tbody tr.us th { font-weight:700; color:#1a1f2e; }
.sb-cmp-table tbody tr.us .badge { display:inline-block; margin-left:4px; padding:2px 8px; background:#b5820a; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; border-radius:4px; vertical-align:middle; }
.sb-cmp-table tbody tr.clinical { background:#faf7ee; }
.sb-cmp-table tbody tr.clinical td:first-child { font-weight:700; }
@media (max-width:720px) {
  .sb-cmp-table { min-width:680px; }
}
.sb-table-note { font-size:13px; color:#5a6478; margin:8px 0 32px; font-style:italic; }

/* ---- Swiper carousel fallback (no JS) ----
   The mirrored homepage embeds Swiper markup but we no longer load Swiper.js,
   so without these styles the first slide expands to fill the row and the
   rest stack underneath. We rebuild it as a CSS-only horizontal scroll-snap
   rail with edge-fade affordances and hide the original move-arrow images
   (they were siblings of the wrapper and scrolled with the cards).

   Compound class selectors (.swiper-container.swiper-container.swiper-container)
   give us specificity (0,3,0) so we win against the mirrored Next.js
   styled-components rules - those use 2-class selectors like
   .bPJFHM .swiper-container with their own !important and would otherwise tie
   us in source order. The `.the-best-container` wrapper hosts the fade mask. */

.the-best-container { position:relative; }
.the-best-container::before,
.the-best-container::after {
  content:""; position:absolute; top:0; bottom:0; width:64px; pointer-events:none; z-index:2;
  transition:opacity .25s ease;
}
.the-best-container::before { left:0; background:linear-gradient(90deg, #fdf8ee 0%, rgba(232,242,255,0) 100%); }
.the-best-container::after { right:0; background:linear-gradient(270deg, #fdf8ee 0%, rgba(232,242,255,0) 100%); }
@media (max-width:560px) {
  .the-best-container::before, .the-best-container::after { width:36px; }
}

.the-best-container .swiper.swiper-container.swiper-container,
.the-best-container .swiper-container.swiper-container.swiper-container {
  overflow-x:auto !important; overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:24px;
  padding:0 !important;
  margin:0 !important;
  scrollbar-width:none;
  /* Drop the position:relative the original Swiper.js / styled-components
     stylesheet sets on .swiper-container. Otherwise our absolutely-positioned
     arrow buttons anchor to the rail and scroll with it instead of pinning
     to .the-best-container. */
  position:static !important;
}
.the-best-container .swiper.swiper-container.swiper-container::-webkit-scrollbar,
.the-best-container .swiper-container.swiper-container.swiper-container::-webkit-scrollbar { display:none; }

.the-best-container .swiper.swiper-container.swiper-container .swiper-wrapper,
.the-best-container .swiper-container.swiper-container.swiper-container .swiper-wrapper {
  display:flex !important; flex-wrap:nowrap !important;
  gap:24px; padding:8px 24px 24px;
  align-items:stretch;
  transform:none !important;
  width:max-content !important;
  height:auto !important;
}
.the-best-container .swiper.swiper-container.swiper-container .swiper-slide,
.the-best-container .swiper-container.swiper-container.swiper-container .swiper-slide {
  flex:0 0 auto !important; width:auto !important;
  scroll-snap-align:center; scroll-snap-stop:always;
  height:auto !important;
  /* The original Swiper.js library hides inactive slides with opacity:0
     and only fades the "active" one in. Without Swiper.js running, every
     slide stays invisible. Force opacity:1 so all cards render. */
  opacity:1 !important;
  transform:none !important;
  transition:opacity .25s ease, transform .25s ease !important;
}

/* On mobile, the carousel script tags the slide closest to the rail's
   horizontal centre with .is-active. Use that to dim the off-centre cards
   and lift the active one a touch - gives the user a clear "this is the
   one you're looking at" without requiring a click. Desktop shows multiple
   cards at once so the dimming reads as visual noise; we only apply this
   below 720px. */
@media (max-width:720px) {
  .the-best-container .swiper.swiper-container.swiper-container .swiper-slide,
  .the-best-container .swiper-container.swiper-container.swiper-container .swiper-slide {
    opacity:0.45 !important;
  }
  .the-best-container .swiper.swiper-container.swiper-container .swiper-slide.is-active,
  .the-best-container .swiper-container.swiper-container.swiper-container .swiper-slide.is-active {
    opacity:1 !important;
    transform:scale(1.02) !important;
  }
}
.the-best-container .swiper.swiper-container.swiper-container .swiper-slide > *,
.the-best-container .swiper-container.swiper-container.swiper-container .swiper-slide > * { height:100%; }

/* On mobile, peek-of-next pattern: pad the rail so the active card sits in
   the visual center with a sliver of the next card peeking on the right -
   the universal "this can scroll" affordance. */
@media (max-width:560px) {
  .the-best-container .swiper.swiper-container.swiper-container .swiper-wrapper,
  .the-best-container .swiper-container.swiper-container.swiper-container .swiper-wrapper {
    padding:8px max(20px, calc((100vw - 290px) / 2)) 20px max(20px, calc((100vw - 290px) / 2));
    gap:14px;
  }
  /* Force testimonial cards (originally 350px) to a width that leaves room
     for a peek of the neighbour on a 375px viewport. */
  .the-best-container .review-card { width:280px !important; min-width:280px !important; height:auto !important; min-height:0 !important; }
  .the-best-container .review-card .review-card-img { height:200px !important; }
}

/* Hide the original Swiper navigation <img> arrows entirely - they live
   inside .swiper-container in the DOM and would scroll with the rail.
   Our companion script (/binet-chat-widget.js) injects fresh <button>
   navigators as direct children of .the-best-container, giving them their
   own positioning context outside the scroll. */
.the-best-container .swiper-move-arrow { display:none !important; }

/* Wrapper injected by the carousel script that hosts the rail + nav buttons.
   Gives us a positioning context scoped to the rail (not the section group).
   `width:100%` keeps it from ballooning to the rail's scrollWidth in flex
   parents that align children to content size. */
.sb-rail-wrap { position:relative; width:100%; max-width:100vw; }

.sb-rail-nav {
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index:5;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,18,28,0.32);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  transition:background .2s ease, transform .15s ease, opacity .2s ease, border-color .2s ease;
  /* Hidden by default; shown only when the section is actually hovered or
     a keyboard user focuses inside the rail. Mobile keeps them visible
     because there's no hover. */
  opacity:0.85;
}
.sb-rail-nav:hover { background:rgba(15,18,28,0.55); border-color:rgba(255,255,255,0.32); transform:translateY(-50%) scale(1.06); opacity:1; }
.sb-rail-nav:active { transform:translateY(-50%) scale(0.94); }
.sb-rail-nav.is-prev { left:32px; }
.sb-rail-nav.is-next { right:32px; }
.sb-rail-nav[data-disabled="true"] { opacity:0; pointer-events:none; }
.sb-rail-nav svg { width:22px; height:22px; display:block; stroke:currentColor; }
@media (max-width:560px) {
  .sb-rail-nav { width:42px; height:42px; opacity:0.92; }
  .sb-rail-nav.is-prev { left:14px; }
  .sb-rail-nav.is-next { right:14px; }
  .sb-rail-nav svg { width:18px; height:18px; }
}

/* ---- Inline-style comparison tables (e.g. /iq-test-pricing) ----
   Some mirrored pages embed a raw <table style="width:100%;max-width:960px;…">
   without a wrapper, which on mobile collapses each column to ~60px and
   reduces every header to a vertical letter stack. Wrappers up the chain
   are sized by the original React inline styles and can be wider than the
   phone viewport, so we constrain to viewport width directly and let the
   table scroll horizontally inside that. The :not() filters out our own
   .sb-cmp-table, which already has dedicated mobile rules. */
@media (max-width:760px) {
  table:not(.sb-cmp-table) { display:block !important; max-width:calc(100vw - 32px) !important; width:calc(100vw - 32px) !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; box-sizing:border-box; }
  table:not(.sb-cmp-table) > tbody, table:not(.sb-cmp-table) > thead { display:table; width:100%; min-width:580px; }
}

/* Compare-page widened article container so the table fits without clipping */
.sb-compare-article { max-width:1080px; }

/* TL;DR verdict aside - no vertical bar, soft tinted card */
.sb-verdict {
  margin:28px 0 36px;
  padding:24px 28px;
  background:linear-gradient(135deg, #faf7ee 0%, #fdf8ee 100%);
  border:1px solid rgba(181,130,10,0.18);
  border-radius:12px;
  position:relative;
}
.sb-verdict .sb-eyebrow { display:block; margin:0 0 8px; color:#b5820a; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.sb-verdict p { margin:0; font-size:16.5px; line-height:1.65; color:#1a1f2e; }
.sb-verdict::before {
  content:"";
  position:absolute;
  top:-1px;
  left:18px;
  width:38px;
  height:4px;
  background:linear-gradient(90deg, #b5820a 0%, #b5820a 8px, transparent 8px, transparent 12px, #d4a857 12px);
  border-radius:0 0 2px 2px;
}

.sb-callout { padding:24px 28px; background:#faf7ee; border:1px solid rgba(15,18,28,0.06); border-radius:12px; margin:24px 0; font-size:16px; line-height:1.6; }
.sb-callout.amber { background:#fff8e7; border-color:rgba(212,168,87,0.32); }
.sb-callout strong { display:block; margin-bottom:6px; font-size:14px; text-transform:uppercase; letter-spacing:0.04em; color:#b5820a; }
.sb-callout.amber strong { color:#a86b00; }

.sb-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:32px 0; }
.sb-stat-row > div { padding:24px; background:#faf7ee; border-radius:10px; text-align:center; }
.sb-stat-row b { display:block; font-size:32px; font-weight:700; color:#b5820a; margin-bottom:6px; line-height:1; }
.sb-stat-row span { font-size:13px; color:#5a6478; line-height:1.4; }
@media (max-width:760px) { .sb-stat-row { grid-template-columns:1fr; } }

/* ---- Figures (historical photos and artefacts) ---- */
.sb-figure { margin:32px 0; border-radius:12px; overflow:hidden; background:#faf7ee; border:1px solid #ede8df; }
.sb-figure img { display:block; width:100%; height:auto; }
.sb-figure figcaption { padding:14px 18px; font-size:13.5px; line-height:1.55; color:#5a6478; background:#fff; border-top:1px solid #eef0f4; }
.sb-figure figcaption strong { color:#121722; font-weight:600; }
.sb-figure.dark { background:#1a1f2e; border-color:#2a3144; }
.sb-figure.dark figcaption { background:#1a1f2e; color:#c5b994; border-top-color:#2a3144; }
.sb-figure.dark figcaption strong { color:#f4ecdb; }

.sb-figure-portrait { float:right; width:240px; margin:6px 0 24px 28px; border-radius:10px; overflow:hidden; background:#faf7ee; border:1px solid #ede8df; }
.sb-figure-portrait img { display:block; width:100%; height:auto; }
.sb-figure-portrait figcaption { padding:10px 14px; font-size:12.5px; line-height:1.5; color:#5a6478; }
@media (max-width:760px) { .sb-figure-portrait { float:none; width:100%; margin:24px 0; } }

.sb-vault-portrait { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; max-width:920px; margin:0 auto; }
.sb-vault-portrait .img { width:200px; border-radius:8px; overflow:hidden; flex-shrink:0; box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.sb-vault-portrait .img img { display:block; width:100%; height:auto; }
.sb-vault-portrait .img figcaption { padding:10px 14px; font-size:12px; color:#8a7f5e; background:#0f1320; line-height:1.5; }
@media (max-width:760px) { .sb-vault-portrait { grid-template-columns:1fr; } .sb-vault-portrait .img { width:160px; } }

/* ---- Breadcrumb ---- */
.sb-crumbs { background:#fafbfd; border-bottom:1px solid #eef0f4; padding:14px 30px; }
.sb-crumbs ol { max-width:1500px; margin:0 auto; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:#5a6478; }
.sb-crumbs li { display:flex; align-items:center; gap:8px; }
.sb-crumbs li + li::before { content:"›"; color:#a4adbe; }
.sb-crumbs a { color:#5a6478; text-decoration:none; }
.sb-crumbs a:hover { color:#b5820a; }
.sb-crumbs li[aria-current="page"] { color:#121722; font-weight:500; }

/* ---- Related block ---- */
.sb-related { background:#faf7ee; padding:40px 24px 48px; border-top:1px solid #ede8df; }
.sb-related-head { max-width:920px; margin:0 auto 24px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sb-related-head h2 { font-size:24px; font-weight:700; margin:0; color:#121722; line-height:1.2; }
.sb-related-head .sb-eyebrow { margin:0; }
.sb-related-grid { max-width:920px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.sb-related a { display:block; padding:20px 22px; background:#fff; border:1px solid #ede8df; border-radius:10px; text-decoration:none; color:#121722; transition:border-color 0.15s, transform 0.15s; }
.sb-related a:hover { border-color:#b5820a; transform:translateY(-1px); }
.sb-related a small { display:block; font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#b5820a; margin-bottom:6px; }
.sb-related a strong { display:block; font-size:15.5px; font-weight:600; line-height:1.35; margin-bottom:6px; }
.sb-related a span { font-size:13.5px; color:#5a6478; line-height:1.55; }
@media (max-width:680px) { .sb-related-grid { grid-template-columns:1fr; } }

/* ---- Hub-page directory cards ---- */
.sb-hub-grid { display:grid; gap:16px; max-width:1040px; margin:0 auto; padding:0 24px; }
.sb-hub-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.sb-hub-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.sb-hub-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.sb-hub-card { display:block; padding:24px 26px; background:#fff; border:1px solid #ede8df; border-radius:12px; text-decoration:none; color:#121722; transition:border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.sb-hub-card:hover { border-color:#b5820a; transform:translateY(-2px); box-shadow:0 12px 32px rgba(181,130,10,0.08); }
.sb-hub-card .badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; background:#fdf8ee; color:#b5820a; margin-bottom:10px; }
.sb-hub-card h3 { font-size:18px; font-weight:700; margin:0 0 8px; line-height:1.25; color:#121722; }
.sb-hub-card p { margin:0; font-size:14px; line-height:1.55; color:#5a6478; }
.sb-hub-card .arrow { display:inline-block; margin-top:12px; color:#b5820a; font-size:13px; font-weight:600; }
@media (max-width:860px) { .sb-hub-grid.cols-3, .sb-hub-grid.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .sb-hub-grid.cols-2, .sb-hub-grid.cols-3, .sb-hub-grid.cols-4 { grid-template-columns:1fr; } }

/* Score-guide table style for /iq-scores hub */
.sb-score-list { max-width:920px; margin:0 auto; padding:0 24px; }
.sb-score-list a { display:grid; grid-template-columns:88px 1fr 120px auto; gap:20px; align-items:center; padding:18px 22px; background:#fff; border:1px solid #ede8df; border-radius:10px; text-decoration:none; color:#121722; margin-bottom:10px; transition:border-color 0.15s, transform 0.15s; }
.sb-score-list a:hover { border-color:#b5820a; transform:translateY(-1px); }
.sb-score-list a .num { font-size:32px; font-weight:800; color:#121722; letter-spacing:-0.02em; line-height:1; }
.sb-score-list a .meta { font-size:13.5px; color:#5a6478; line-height:1.5; }
.sb-score-list a .meta strong { color:#121722; font-weight:600; display:block; margin-bottom:2px; }
.sb-score-list a .pct { font-size:13.5px; color:#5a6478; text-align:right; }
.sb-score-list a .pct b { display:block; color:#b5820a; font-size:18px; font-weight:700; }
.sb-score-list a .arrow { color:#b5820a; font-size:18px; font-weight:600; }
@media (max-width:680px) { .sb-score-list a { grid-template-columns:64px 1fr auto; } .sb-score-list a .pct { display:none; } }

*, *::before, *::after { box-sizing:border-box; }
/* `overflow-x:clip` blocks horizontal overflow without creating a separate
   scroll context. `hidden` here was making the <body> itself scrollable on
   mobile (instead of <html>), which broke layout in the homepage mirror -
   sections like "Match wits with the stars" rendered blank because their
   absolute positions resolved against the wrong scroll origin. */
html { overflow-x:clip; }
body { overflow-x:clip; max-width:100%; }

/* The mirrored homepage's <html> element has `font-family: Ubuntu` baked
   in from the original Next.js build, but it was masked by the body's
   system-font declaration only at the body level - every styled-components
   wrapper between body and the hero <h1> resets to Ubuntu inheritance.
   Use chained class selectors (specificity 0,3,0) on the hero block only,
   so we beat the original styled-components rules without nuking the
   Georgia serif headings used in our own sections. */
.kKTCzD.kKTCzD .header-big-title.header-big-title,
.kKTCzD.kKTCzD .header-title-container.header-title-container,
.kKTCzD.kKTCzD .header-subtitle-container.header-subtitle-container,
.kKTCzD.kKTCzD .header-subtitle.header-subtitle,
.kKTCzD.kKTCzD .header-desc.header-desc {
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* The original mirror shipped the hero at weight 500 / 28px on mobile and
   only switched to weight 700 / 56px at 1280px+ - making the mobile
   heading visibly thinner and "wrong" next to the desktop version.
   Match the bold/tight desktop treatment from 480px up so the mobile
   hero reads with the same visual confidence. */
.kKTCzD.kKTCzD .header-big-title.header-big-title {
  font-weight:700 !important;
  font-size:34px !important;
  line-height:42px !important;
  letter-spacing:-0.01em !important;
}
@media (min-width:480px) {
  .kKTCzD.kKTCzD .header-big-title.header-big-title {
    font-size:42px !important;
    line-height:50px !important;
  }
}
@media (min-width:768px) {
  .kKTCzD.kKTCzD .header-big-title.header-big-title {
    font-size:52px !important;
    line-height:60px !important;
  }
}
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#121722; background:#fff; }
img, svg, video, iframe { max-width:100%; height:auto; }
.sb-nav { background:#fdf8ee; position:relative; z-index:50; }
.sb-nav-inner { max-width:1500px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:14px 16px; gap:12px; }
@media (min-width:1024px) { .sb-nav-inner { grid-template-columns:1fr auto 1fr; padding:20px 30px; gap:32px; } }
.sb-logo { display:inline-flex; align-items:center; text-decoration:none; justify-self:start; min-width:0; }
.sb-logo img { display:block; height:36px; width:auto; max-width:180px; }
@media (min-width:1024px) { .sb-logo img { height:44px; max-width:none; } }
.sb-logo-icon img { height:36px; }
.sb-nav-actions { display:flex; align-items:center; gap:8px; justify-self:end; min-width:0; }
@media (min-width:1024px) { .sb-nav-actions { gap:12px; } }

/* Mega-menu nav using CSS-only :hover/:focus-within (a11y).
   The list lives in the middle grid column and is centered horizontally. */
.sb-nav-list { display:none; gap:8px; list-style:none; padding:0; margin:0; align-items:center; justify-content:center; justify-self:center; }
@media (min-width:1024px) { .sb-nav-list { display:flex; } }
.sb-nav-list > li { position:relative; }
.sb-nav-link { display:inline-flex; align-items:center; gap:6px; padding:10px 14px; color:#121722; text-decoration:none; font-size:14.5px; font-weight:500; border-radius:6px; cursor:pointer; background:none; border:0; font-family:inherit; }
.sb-nav-link:hover, .sb-nav-link:focus { background:rgba(181,130,10,0.08); color:#b5820a; }
.sb-nav-link .chev { font-size:9px; color:#5a6478; transform:translateY(1px); }
.sb-nav-list > li:hover > .sb-mega, .sb-nav-list > li:focus-within > .sb-mega { opacity:1; pointer-events:auto; transform:translateY(0); }

.sb-mega { position:absolute; top:100%; left:0; min-width:520px; background:#fff; border:1px solid #ede8df; border-radius:12px; box-shadow:0 16px 48px rgba(18,23,34,0.12); padding:20px; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity 0.15s, transform 0.15s; }
.sb-mega.right { left:auto; right:0; }
.sb-mega.wide { min-width:680px; }
.sb-mega.huge { min-width:760px; }
.sb-mega-cols { display:grid; gap:18px; }
.sb-mega-cols.c2 { grid-template-columns:1fr 1fr; }
.sb-mega-cols.c3 { grid-template-columns:1fr 1fr 1fr; }
.sb-mega-col h4 { margin:0 0 8px; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#b5820a; }
.sb-mega-col ul { padding:0; margin:0; list-style:none; }
.sb-mega-col li { margin:0; }
.sb-mega-col a { display:block; padding:8px 10px; margin:0 -10px; border-radius:6px; color:#121722; text-decoration:none; font-size:14px; line-height:1.4; transition:background 0.1s; }
.sb-mega-col a small { display:block; color:#5a6478; font-size:12px; margin-top:2px; }
.sb-mega-col a:hover { background:#faf7ee; color:#b5820a; }
.sb-mega-col.featured { background:#faf7ee; padding:18px; border-radius:8px; margin:-4px; }
.sb-mega-col.featured h4 { color:#b5820a; }
.sb-mega-col.featured p { font-size:13px; line-height:1.55; color:#3a4456; margin:0 0 12px; }
.sb-mega-col.featured a.cta { display:inline-block; padding:8px 14px; background:#b5820a; color:#fff; border-radius:6px; font-size:13px; font-weight:600; margin:0; }
.sb-mega-col.featured a.cta:hover { background:#9a6e08; color:#fff; }

.sb-nav-cta { display:inline-block; padding:10px 22px; background:#121722; color:#fff; text-decoration:none; border-radius:6px; font-size:14px; font-weight:600; white-space:nowrap; }
.sb-nav-cta:hover { background:#b5820a; }
@media (max-width:520px) { .sb-nav-cta { padding:9px 12px; font-size:12.5px; } }
@media (max-width:380px) { .sb-nav-cta { padding:8px 10px; font-size:12px; } }

.sb-nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:0; cursor:pointer; }
.sb-nav-toggle span, .sb-nav-toggle span::before, .sb-nav-toggle span::after { display:block; width:22px; height:2px; background:#121722; position:relative; transition:transform 0.2s; }
.sb-nav-toggle span::before { content:""; position:absolute; top:-7px; left:0; width:22px; height:2px; background:#121722; }
.sb-nav-toggle span::after { content:""; position:absolute; top:7px; left:0; width:22px; height:2px; background:#121722; }
@media (min-width:1024px) { .sb-nav-toggle { display:none; } }

/* Mobile: nav-list shows inside an off-canvas <details> below 1024px */
.sb-nav-mobile { display:none; }
@media (max-width:1023px) {
  .sb-nav-mobile { display:block; background:#fff; border-top:1px solid #cbdcef; max-height:0; overflow:hidden; transition:max-height 0.3s; }
  .sb-nav-mobile.open { max-height:1200px; }
  .sb-nav-mobile-inner { padding:8px 30px 20px; max-width:1500px; margin:0 auto; }
  .sb-nav-mobile details { border-bottom:1px solid #eef0f4; }
  .sb-nav-mobile summary { padding:14px 0; font-size:15px; font-weight:600; color:#121722; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .sb-nav-mobile summary::-webkit-details-marker { display:none; }
  .sb-nav-mobile summary::after { content:"+"; color:#b5820a; font-size:20px; font-weight:300; transition:transform 0.15s; }
  .sb-nav-mobile details[open] summary::after { content:"−"; }
  .sb-nav-mobile ul { padding:0 0 14px; margin:0; list-style:none; }
  .sb-nav-mobile ul a { display:block; padding:8px 12px; color:#3a4456; text-decoration:none; font-size:14px; }
  .sb-nav-mobile ul a:hover { color:#b5820a; }
  .sb-nav-mobile h4 { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#b5820a; margin:14px 0 4px; padding:0 12px; }
  .sb-nav-mobile h4:first-child { margin-top:0; }
}

.sb-footer { background:#fdf8ee; color:#121722; padding:0; margin-top:0; }
.sb-footer-inner { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:56px; padding:64px 24px 40px; align-items:start; }
.sb-footer-brand .sb-logo { display:inline-block; margin-bottom:18px; }
.sb-footer-brand .sb-logo img { display:block; max-width:220px; height:auto; }
.sb-footer-brand p { color:#3a4456; font:400 14px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; margin:0 0 26px; max-width:360px; }
.sb-footer-pay { font:400 12px/1.4 -apple-system, sans-serif; }
.sb-footer-pay-label { display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; color:#5a6478; letter-spacing:0.16em; text-transform:uppercase; font-size:10.5px; font-weight:600; }
.sb-footer-pay-label img { opacity:0.6; }
.sb-footer-pay-icons { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sb-footer-pay-icons img { height:22px; width:auto; background:#ffffff; padding:4px 7px; border-radius:4px; border:1px solid rgba(15,18,28,0.06); object-fit:contain; }
.sb-footer h4 { font:600 11px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; text-transform:uppercase; letter-spacing:0.2em; margin:4px 0 18px; color:#b5820a; }
.sb-footer ul { padding:0; margin:0; list-style:none; }
.sb-footer li { margin-bottom:11px; font:400 14px/1.5 -apple-system, sans-serif; }
.sb-footer a { color:#121722; text-decoration:none; transition:color .2s ease; }
.sb-footer a:hover { color:#b5820a; }
.sb-footer-contact { margin-top:22px; padding-top:18px; border-top:1px solid rgba(15,18,28,0.1); }
.sb-footer-contact p { font:400 13px/1.55 -apple-system, sans-serif; color:#3a4456; margin:0 0 8px; }
.sb-footer-contact strong { display:inline-block; color:#b5820a; font:600 10.5px/1 -apple-system, sans-serif; letter-spacing:0.2em; text-transform:uppercase; margin-right:10px; min-width:32px; }
.sb-footer-bar { padding:22px 24px 32px; border-top:1px solid rgba(15,18,28,0.1); display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; font:400 12.5px/1.55 -apple-system, sans-serif; color:#5a6478; }
.sb-footer-bar-left { font-weight:500; white-space:nowrap; }
.sb-footer-disc { flex:1; min-width:280px; max-width:720px; text-align:right; font-size:12.5px; color:#5a6478; line-height:1.55; }
.sb-footer-disc strong { color:#b5820a; font-weight:600; }
@media (max-width:1023px) { .sb-footer-inner { grid-template-columns:1fr 1fr; gap:40px 32px; padding:48px 24px 32px; } .sb-footer-brand { grid-column:1 / -1; } .sb-footer-bar { flex-direction:column; } .sb-footer-disc { text-align:left; max-width:none; } }
@media (max-width:560px) { .sb-footer-inner { grid-template-columns:1fr; gap:32px; } .sb-footer-bar { padding-bottom:24px; } }

/* ---- Live IQ tools workshop (used on /free-iq-tools/ and on each individual calculator page) ---- */
.sb-tool-hero.compact { padding:56px 24px 44px; }
.sb-tool-hero.compact .sb-tool-hero-inner { display:block; max-width:720px; text-align:center; }
.sb-tool-hero.compact h1 { font-size:38px; }
.sb-tool-hero.compact p { max-width:640px; margin:14px auto 0; }
.sb-tools-workshop { max-width:980px; margin:0 auto; padding:32px 24px 24px; display:grid; gap:24px; }
.sb-tools-workshop.standalone { margin-top:-44px; position:relative; z-index:2; }
.sb-tool-block { background:#fff; border:1px solid rgba(15,18,28,0.08); border-radius:16px; padding:28px 32px; box-shadow:0 24px 48px -28px rgba(15,18,28,0.18); scroll-margin-top:90px; }
.sb-tool-block-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid rgba(15,18,28,0.08); }
.sb-tool-num { flex-shrink:0; width:40px; height:40px; border-radius:50%; background:#fff8e6; border:1px solid rgba(212,168,87,0.45); color:#1a1f2e; font:italic 700 14px/1 Georgia, "Times New Roman", serif; display:flex; align-items:center; justify-content:center; letter-spacing:0.04em; }
.sb-tool-block-head h2 { font:700 22px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#121722; margin:0 0 4px; letter-spacing:-0.01em; }
.sb-tool-block-head p { font:400 14.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; margin:0; }
.sb-tool-block-body { display:grid; grid-template-columns:minmax(220px, 0.85fr) 1.15fr; gap:32px; align-items:start; }
@media (max-width:720px) {
  .sb-tool-block { padding:24px 20px; }
  .sb-tool-block-body { grid-template-columns:1fr; gap:20px; }
}
.sb-tool-form label { display:block; font:600 11.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; margin-bottom:8px; letter-spacing:0.06em; text-transform:uppercase; }
.sb-tool-form label:not(:first-child) { margin-top:18px; }
.sb-tool-form input[type="number"], .sb-tool-form select { width:100%; font:700 20px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#121722; padding:12px 14px; border:1.5px solid rgba(15,18,28,0.14); border-radius:10px; background:#fbfaf6; outline:none; transition:border-color .15s ease, background .15s ease; font-variant-numeric:tabular-nums; box-sizing:border-box; }
.sb-tool-form select { font-weight:500; font-size:14.5px; }
.sb-tool-form input[type="number"]:focus, .sb-tool-form select:focus { border-color:#b5820a; background:#fff; }
.sb-age-split-heading { display:block; font:600 11.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; margin-bottom:12px !important; letter-spacing:0.06em; text-transform:uppercase; }
.sb-age-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.sb-age-split-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.sb-age-split-field input[type="number"] { width:100%; }
.sb-age-split-unit { display:block; font:600 11.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; letter-spacing:0.06em; text-transform:uppercase; margin:0 0 6px; }
.sb-tool-form .sb-age-split-unit { margin-top:0; }
.sb-input-row { display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center; }
.sb-input-row input[type="range"] { width:100%; accent-color:#b5820a; }
.sb-input-hint { font:italic 400 12.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#7a8092; margin-top:10px; }
.sb-tool-output { background:#fbfaf6; border:1px solid rgba(15,18,28,0.08); border-radius:12px; padding:20px 22px; }
.sb-stat { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0; }
.sb-stat-label { font:600 11.5px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; text-transform:uppercase; letter-spacing:0.08em; }
.sb-stat-value { font:700 21px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#121722; text-align:right; font-variant-numeric:tabular-nums; }
.sb-stat-value.blue { color:#b5820a; font-size:26px; }
.sb-stat-note { font:400 13px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; border-top:1px solid rgba(15,18,28,0.08); margin-top:10px; padding-top:12px; }
.sb-curve { margin-top:14px; width:100%; }
.sb-curve svg { width:100%; height:150px; display:block; overflow:visible; }
.sb-curve .axis-label { font:500 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; fill:#7a8092; }
.sb-conv-grid { display:grid; gap:12px; }
.sb-conv-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px dashed rgba(15,18,28,0.10); }
.sb-conv-row:last-child { border-bottom:0; padding-bottom:0; }
.sb-conv-label { font:500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; flex:1; }
.sb-conv-value { font:700 20px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#121722; font-variant-numeric:tabular-nums; text-align:right; }
.sb-conv-row.is-source .sb-conv-value { color:#b5820a; }
.sb-conv-row.is-source .sb-conv-label::before { content:"Your input · "; color:#b5820a; font-weight:700; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; }
.sb-tool-deeplink { display:inline-block; margin-top:18px; font:600 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#b5820a; text-decoration:none; letter-spacing:0.01em; }
.sb-tool-deeplink:hover { text-decoration:underline; }
.sb-tool-cta { background:#faf7ee; padding:40px 24px 64px; }
.sb-tool-cta-inner { max-width:920px; margin:0 auto; background:#fff; border:1px solid #ede8df; border-radius:14px; padding:28px 32px; }
.sb-tool-cta-inner .sb-eyebrow { color:#a86b00; }
.sb-tool-cta-inner h2 { font-size:22px; font-weight:700; margin:8px 0 8px; color:#121722; }
.sb-tool-cta-inner p { margin:0 0 16px; color:#3a4456; line-height:1.55; }
.sb-tool-cta-inner .cta-btn { display:inline-block; padding:12px 24px; background:#b5820a; color:#fff; text-decoration:none; border-radius:8px; font-weight:600; }
.sb-tool-cta-inner .cta-btn:hover { background:#9a6e08; }
.sb-tool-cta-dyn { color:#b5820a; font-weight:700; }
.sb-mensa-verdict { display:inline-block; padding:8px 16px; border-radius:999px; font:700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:14px; }
.sb-mensa-verdict.qualifies { background:#e9f5ee; color:#1a6b3a; border:1px solid #7bc296; }
.sb-mensa-verdict.does-not-qualify { background:#faf3e6; color:#85500e; border:1px solid #d4a857; }
/* ---- Quick-facts strip + FAQ accordion (used on age-band child pages) ---- */
.sb-quick-facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:0 0 32px; padding:18px 22px; background:#fbfaf6; border:1px solid rgba(15,18,28,0.08); border-radius:12px; }
@media (max-width:600px) { .sb-quick-facts { grid-template-columns:1fr; gap:10px; } }
.sb-quick-facts > div { display:flex; flex-direction:column; gap:3px; }
.sb-quick-facts b { font:700 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#121722; letter-spacing:-0.01em; }
.sb-quick-facts span { font:400 12.5px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; }
.sb-faq { max-width:760px; margin:0 auto; padding:24px 24px 32px; }
.sb-faq h2 { font:700 24px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin:0 0 18px; letter-spacing:-0.01em; color:#121722; }
.sb-faq-item { border-bottom:1px solid rgba(15,18,28,0.10); }
.sb-faq-item:first-of-type { border-top:1px solid rgba(15,18,28,0.10); }
.sb-faq-item summary { font:600 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#121722; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; }
.sb-faq-item summary::-webkit-details-marker { display:none; }
.sb-faq-item summary::after { content:"+"; font-weight:400; font-size:22px; color:#b5820a; flex-shrink:0; line-height:1; }
.sb-faq-item[open] summary::after { content:"−"; }
.sb-faq-item > p { margin:0 0 18px; font:400 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#3a4456; }

/* ---- "For You" / iq-test-by-age live selector + richer cards ---- */
.sb-age-selector { max-width:980px; margin:0 auto -20px; padding:24px 24px 0; position:relative; z-index:2; }
.sb-age-selector-inner { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; background:#fff; border:1px solid rgba(15,18,28,0.08); border-radius:16px; padding:24px 28px; box-shadow:0 24px 48px -28px rgba(15,18,28,0.18); }
@media (max-width:680px) { .sb-age-selector-inner { grid-template-columns:1fr; gap:16px; padding:20px; } }
.sb-age-label { display:block; font:600 11.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }
.sb-age-input-row { display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center; }
.sb-age-input-row input[type="number"] { width:100%; font:700 22px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#121722; padding:12px 14px; border:1.5px solid rgba(15,18,28,0.14); border-radius:10px; background:#fbfaf6; outline:none; font-variant-numeric:tabular-nums; box-sizing:border-box; transition:border-color .15s ease, background .15s ease; }
.sb-age-input-row input[type="number"]:focus { border-color:#b5820a; background:#fff; }
.sb-age-input-row input[type="range"] { width:100%; accent-color:#b5820a; }
/* YOUR MATCH card - editorial corner-bracket plate, no enclosing border.
   Echoes the test-kit hero figure (top-left blue bracket) and the factor
   cards' italic-Georgia + gold-underline + blue-dot signature. */
.sb-age-result { position:relative; display:flex; flex-direction:column; gap:8px; padding:20px 24px; background:#fbfaf6; border-radius:12px; overflow:visible; }
.sb-age-result::before { content:""; position:absolute; top:-6px; left:-6px; width:22px; height:22px; border-top:2px solid #b5820a; border-left:2px solid #b5820a; border-radius:2px 0 0 0; pointer-events:none; }
.sb-age-result::after  { content:""; position:absolute; bottom:-6px; right:-6px; width:22px; height:22px; border-bottom:2px solid #d4a857; border-right:2px solid #d4a857; border-radius:0 0 2px 0; pointer-events:none; }
.sb-age-result-label { font:italic 700 13.5px/1 Georgia, "Times New Roman", serif; color:#1a1f2e; letter-spacing:0.02em; text-transform:none; margin-bottom:6px; display:inline-block; padding-bottom:6px; border-bottom:2px solid rgba(212,168,87,0.55); width:max-content; position:relative; }
.sb-age-result-label::after { content:""; position:absolute; left:100%; bottom:-2px; width:5px; height:5px; background:#b5820a; border-radius:50%; margin-left:4px; transform:translateY(50%); }
.sb-age-result-link { font:700 19px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#b5820a; text-decoration:none; display:inline-flex; align-items:baseline; gap:8px; }
.sb-age-result-link:hover { text-decoration:underline; }
.sb-age-cards-wrap { padding:32px 24px 32px; max-width:1040px; margin:0 auto; }
.sb-age-cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
@media (max-width:680px) { .sb-age-cards { grid-template-columns:1fr; } }
.sb-age-card { display:block; padding:28px 28px 22px; background:#fff; border:1px solid rgba(15,18,28,0.08); border-radius:14px; text-decoration:none; color:inherit; position:relative; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.sb-age-card:hover { transform:translateY(-3px); box-shadow:0 24px 48px -22px rgba(15,18,28,0.18); border-color:rgba(181,130,10,0.22); }
.sb-age-card-badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; background:#fdf8ee; color:#b5820a; margin-bottom:12px; }
.sb-age-card h3 { font:700 22px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#121722; margin:0 0 6px; letter-spacing:-0.01em; }
.sb-age-card > p { font:400 14.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#5a6478; margin:0 0 16px; }
.sb-age-card-feats { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:6px; }
.sb-age-card-feats li { font:400 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#3a4456; padding-left:18px; position:relative; }
.sb-age-card-feats li::before { content:"›"; position:absolute; left:4px; color:#b5820a; font-weight:700; line-height:1.5; }
.sb-age-card-cta { display:inline-block; font:600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#b5820a; letter-spacing:0.01em; }
.sb-age-card.is-match { border-color:#b5820a; background:linear-gradient(135deg, #fff 0%, #fdf8ee 100%); box-shadow:0 24px 48px -20px rgba(181,130,10,0.28); }
.sb-age-card.is-match::before { content:"Your match"; position:absolute; top:-10px; left:22px; padding:4px 10px; background:#b5820a; color:#fff; font:700 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:0.08em; text-transform:uppercase; border-radius:999px; z-index:1; }
.sb-age-edge-note { max-width:1040px; margin:0 auto; padding:0 24px 8px; font:italic 400 13.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#7a8092; text-align:center; }

.sb-crumbs li.sb-crumbs-pill { margin-left:auto; }
.sb-crumbs li.sb-crumbs-pill::before { content:none !important; }
.sb-crumbs li.sb-crumbs-pill a { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; background:#fff; border:1px solid rgba(15,18,28,0.12); border-radius:999px; color:#b5820a; font-weight:600; font-size:12px; letter-spacing:0.01em; transition:border-color .15s ease, background .15s ease; }
.sb-crumbs li.sb-crumbs-pill a:hover { border-color:#b5820a; background:#fbfaf6; }