/*
 * StudyBits public site — the 2026-10 redesign.
 *
 * White, crisp, one accent. Headings in tight Inter, labels in mono caps,
 * grey cards, numbered sections; the product itself (the course builder) in
 * the hero. Loaded after dia.css by DiaLayout; everything here is scoped to
 * `.sb` so legacy page bodies keep their own rules. Bump SB_CSS_VERSION in
 * DiaLayout.tsx when this file changes.
 */

/*
 * The look (2026-10-30), after the homepage: white page, black ink, sand
 * #f6f5f4 bands, #f7f7f7 tiles, hairlines, black pill buttons, Inter Tight
 * 500 headings. The site's "accent" is ink now — colour comes only from the
 * product (course covers, customer logos).
 */
.sb {
  --sb-bg: #ffffff;
  --sb-bg-2: #f6f5f4;
  --sb-bg-3: #efefef;
  --sb-tile: #f7f7f7;
  --sb-ink: #000000;
  --sb-ink-2: #464646;
  --sb-ink-3: #8a8a8a;
  --sb-line: rgba(10, 10, 10, 0.09);
  --sb-line-2: rgba(10, 10, 10, 0.16);
  --sb-accent: #000000;
  --sb-accent-2: #262626;
  --sb-accent-soft: #f6f5f4;
  --sb-green: #12a150;
  --sb-red: #c62828;
  --sb-radius: 22px;
  --sb-shadow: 0 0 0 1px rgba(10, 10, 10, 0.04), 0 12px 32px -18px rgba(0, 0, 0, 0.18);
  --sb-shadow-lg: 0 0 0 1px rgba(10, 10, 10, 0.04), 0 30px 60px -28px rgba(0, 0, 0, 0.24);
  --sb-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --sb-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --sb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --sb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--sb-sans);
  color: var(--sb-ink);
  -webkit-font-smoothing: antialiased;
}
body.sb-body {
  background: #ffffff;
}
.sb *,
.sb *::before,
.sb *::after {
  box-sizing: border-box;
}
.sb a {
  color: inherit;
  text-decoration: none;
}
.sb button {
  font: inherit;
  color: inherit;
}
.sb .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sb .sb-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.sb .sb-mono {
  font-family: var(--sb-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
}
.sb .sb-accent {
  color: var(--sb-accent);
}

/* ---- buttons ---- */
.sb .sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s var(--sb-ease), box-shadow 0.18s;
}
.sb .sb-btn:active {
  transform: translateY(1px);
}
.sb .sb-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.sb .sb-btn-primary {
  background: var(--sb-accent);
  color: #fff !important;
  box-shadow: none;
}
.sb .sb-btn-primary:hover {
  background: var(--sb-accent-2);
}
.sb .sb-btn-dark {
  background: var(--sb-ink);
  color: #fff !important;
}
.sb .sb-btn-dark:hover {
  background: #26262b;
}
.sb .sb-btn-ghost {
  background: #fff;
  border-color: var(--sb-line-2);
  color: var(--sb-ink);
}
.sb .sb-btn-ghost:hover {
  border-color: var(--sb-ink);
}
.sb .sb-btn-google {
  background: #fff;
  border-color: var(--sb-line-2);
  color: var(--sb-ink);
}
.sb .sb-btn-google:hover {
  background: var(--sb-bg-2);
}
.sb .sb-btn-sm {
  height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
}

/* ---- the pinned top: announcement bar + header ----
   One sticky block rather than two, so the bar can never scroll under the
   nav or sit on top of it, and the nav needs no offset that depends on how
   the bar wrapped. Its height is published as --sb-top-h (DiaLayout) for
   whatever else pins or scrolls to an anchor below it. */
.sb .sb-top {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* ---- announcement bar ---- */
.sb .sb-announce {
  position: relative;
  background: var(--sb-accent);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 9px 44px;
  line-height: 1.4;
}
.sb .sb-announce a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.sb .sb-announce .chip {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
  font-size: 12px;
}
.sb .sb-announce .go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sb .sb-announce .go-short {
  display: none;
}
.sb .sb-announce .chip {
  background: #fff;
  color: var(--sb-accent);
  font-weight: 700;
}
.sb .sb-announce-x {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #fff !important;
  opacity: 0.8;
  cursor: pointer;
  padding: 4px;
  display: flex;
}

/* ---- header ---- */
.sb .sb-header {
  /* pinned by .sb-top, which holds it */
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.sb .sb-header.scrolled,
.sb .sb-header.open {
  border-bottom-color: var(--sb-line);
}
.sb .sb-nav {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 28px;
}
.sb .sb-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Varela Round", var(--sb-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sb-ink);
}
.sb .sb-navlinks {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sb .sb-navlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-ink-2) !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sb .sb-navlink:hover,
.sb .sb-navlink.on {
  color: var(--sb-ink) !important;
  background: var(--sb-bg-2);
}
.sb .sb-navlink .chev {
  transition: transform 0.2s var(--sb-ease);
  opacity: 0.6;
}
.sb .sb-navlink.on .chev {
  transform: rotate(180deg);
}
.sb .sb-navright {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb .sb-login {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-ink);
  border-radius: 9px;
}
.sb .sb-login:hover {
  background: var(--sb-bg-2);
}
.sb .sb-burger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--sb-line);
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* mega panels */
.sb .sb-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--sb-line);
  box-shadow: 0 30px 50px -30px rgba(10, 20, 40, 0.18);
  padding: 22px 0 30px;
}
.sb .sb-scrim {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sb .sb-mcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
.sb .sb-mcard {
  display: block;
  background: var(--sb-bg-2);
  border-radius: 14px;
  padding: 16px 16px 15px;
  transition: background 0.15s;
}
.sb .sb-mcard:hover {
  background: var(--sb-bg-3);
}
.sb .sb-mcard-ico {
  color: var(--sb-accent);
  margin-bottom: 9px;
  display: flex;
}
.sb .sb-mcard-t {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.sb .sb-mcard-d {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sb-ink-2);
}
.sb .sb-mcols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sb .sb-mcols.with-feature {
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 40px;
}
.sb .sb-mcols.with-feature.four {
  grid-template-columns: 1.15fr 1fr 1fr 0.8fr;
  gap: 32px;
}
.sb .sb-mcol .sb-mono {
  display: block;
  margin-bottom: 12px;
}
.sb .sb-mlink {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--sb-ink);
  transition: color 0.15s;
}
.sb .sb-mlink:hover {
  color: var(--sb-accent);
}
.sb .sb-mlink .ico {
  color: var(--sb-ink-3);
  display: flex;
}
.sb .sb-mlink .tags {
  display: block;
  font-family: var(--sb-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  margin-top: 1px;
}
.sb .sb-mlink .new {
  font-size: 10px;
  font-weight: 600;
  color: var(--sb-accent);
  background: var(--sb-accent-soft);
  border-radius: 999px;
  padding: 1px 7px;
}
.sb .sb-mall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--sb-accent) !important;
}
.sb .sb-mfeature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 210px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  padding: 18px;
  background: #111 center/cover no-repeat;
}
.sb .sb-mfeature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.78));
}
.sb .sb-mfeature > * {
  position: relative;
}
.sb .sb-mfeature b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sb .sb-mfeature span {
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0.85;
  margin: 4px 0 10px;
}
.sb .sb-mfeature em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
}
.sb .sb-mfeature.dark {
  background: #0f1115;
  justify-content: space-between;
}
.sb .sb-mfeature.dark::before {
  display: none;
}

/* mobile menu */
.sb .sb-mobile {
  position: fixed;
  inset: 64px 0 0;
  z-index: 70;
  background: #fff;
  overflow-y: auto;
  padding: 8px 20px 40px;
}
.sb .sb-mobile details {
  border-bottom: 1px solid var(--sb-line);
}
.sb .sb-mobile summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.sb .sb-mobile summary::-webkit-details-marker {
  display: none;
}
.sb .sb-mobile details[open] summary .chev {
  transform: rotate(180deg);
}
.sb .sb-mobile .sb-mlink {
  font-size: 15px;
  padding: 9px 0;
}
.sb .sb-mobile > a.row {
  display: block;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--sb-line);
}
.sb .sb-mobile .ctas {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.sb .sb-mobile .ctas .sb-btn {
  width: 100%;
  height: 48px;
}

/* ---- sections ---- */
.sb .sb-section {
  padding: 112px 0;
}
.sb .sb-section.tight {
  padding: 72px 0;
}
.sb .sb-section.grey {
  background: var(--sb-bg-2);
}
.sb .sb-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.sb .sb-head .sb-mono {
  display: block;
  margin-bottom: 14px;
}
.sb .sb-h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.04;
  font-family: var(--sb-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  margin: 0;
}
.sb .sb-h2 .dim {
  color: var(--sb-ink-3);
}
.sb .sb-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--sb-ink-2);
  margin: 18px auto 0;
  max-width: 640px;
}

/* ---- hero ---- */
.sb .sb-hero {
  padding: 64px 0 40px;
  text-align: center;
}
.sb .sb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--sb-line);
  background: #fff;
  font-size: 13px;
  color: var(--sb-ink-2);
  margin-bottom: 26px;
  transition: border-color 0.15s;
}
.sb .sb-pill:hover {
  border-color: var(--sb-line-2);
}
.sb .sb-pill .tag {
  background: var(--sb-accent-soft);
  color: var(--sb-accent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
}
.sb .sb-h1 {
  font-size: clamp(40px, 6.6vw, 80px);
  line-height: 1;
  font-family: var(--sb-display);
  font-weight: 500;
  letter-spacing: -0.048em;
  margin: 0 auto;
  max-width: 980px;
}
.sb .sb-hero .sb-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  margin-top: 22px;
  max-width: 660px;
}
.sb .sb-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 34px;
  font-size: 13px;
  color: var(--sb-ink-2);
}
.sb .sb-trust span,
.sb .sb-trust a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sb .sb-trust a:hover {
  color: var(--sb-accent);
}
.sb .sb-trust svg {
  color: var(--sb-green);
}

/* ---- the course builder (tg = try generator) ---- */
@property --tg-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.sb .tg {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
  scroll-margin-top: calc(var(--sb-top-h, 64px) + 26px);
}
.sb .tg-card {
  background: #fff;
  border: 1px solid var(--sb-line);
  border-radius: 22px;
  box-shadow: var(--sb-shadow-lg);
  overflow: hidden;
}
/* The input card sits in a frame whose light orbits it — faster once it can build. */
.sb .tg-shell {
  position: relative;
  padding: 1.5px;
  border-radius: 24px;
  background: var(--sb-line-2);
  box-shadow: var(--sb-shadow-lg);
  isolation: isolate;
}
.sb .tg-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--tg-angle),
    transparent 0 52%,
    #0a0a0a 66%,
    #6b6b6b 76%,
    #0a0a0a 86%,
    transparent 100%
  );
  opacity: 0.6;
  animation: tg-orbit 7s linear infinite;
  transition: opacity 0.4s;
}
.sb .tg-shell::after {
  content: "";
  position: absolute;
  inset: 24px 6% -28px;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(50% 70% at 30% 100%, rgba(0, 0, 0, 0.2), transparent 70%),
    radial-gradient(50% 70% at 75% 100%, rgba(124, 92, 255, 0.18), transparent 70%);
  filter: blur(26px);
  transition: opacity 0.4s;
  opacity: 0.7;
}
.sb .tg-shell.is-ready::before {
  opacity: 1;
  animation-duration: 3.2s;
}
.sb .tg-shell.is-ready::after {
  opacity: 1;
}
@keyframes tg-orbit {
  to {
    --tg-angle: 360deg;
  }
}
.sb .tg-shell > .tg-card {
  position: relative;
  border: 0;
  border-radius: 22.5px;
  box-shadow: none;
}
.sb .tg-card[data-shake] {
  animation: tg-shake 0.42s var(--sb-ease);
}
@keyframes tg-shake {
  20%,
  60% {
    transform: translateX(-7px);
  }
  40%,
  80% {
    transform: translateX(7px);
  }
}
.sb .tg-tabs {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--sb-line);
  background: var(--sb-bg-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.sb .tg-tabs::-webkit-scrollbar {
  display: none;
}
.sb .tg-tab-pill {
  position: absolute;
  top: 8px;
  left: 0;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--sb-line);
  transition: transform 0.38s var(--sb-ease), width 0.38s var(--sb-ease);
}
.sb .tg-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--sb-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}
.sb .tg-tab:hover,
.sb .tg-tab.on {
  color: var(--sb-ink);
}
.sb .tg-tab svg {
  transition: color 0.2s, transform 0.3s var(--sb-ease);
}
.sb .tg-tab.on svg {
  color: var(--sb-accent);
  transform: scale(1.12);
}
.sb .tg-tab-short {
  display: none;
}
.sb .tg-body {
  padding: 18px;
}

/* file */
.sb .tg-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 190px;
  padding: 20px;
  border: 1.5px dashed var(--sb-line-2);
  border-radius: 16px;
  background: radial-gradient(70% 90% at 50% 0%, #f5f8ff, transparent 70%), #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.sb .tg-drop:hover {
  border-color: rgba(0, 0, 0, 0.5);
}
.sb .tg-drop.over {
  border-color: var(--sb-accent);
  background: var(--sb-accent-soft);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.07);
}
.sb .tg-drop.has {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.3);
  background: var(--sb-accent-soft);
}
.sb .tg-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  transition: transform 0.35s var(--sb-ease);
}
.sb .tg-drop:hover .tg-badges {
  transform: translateY(-3px);
}
.sb .tg-drop.over .tg-badges {
  transform: translateY(-8px) scale(1.12);
}
.sb .tg-badge {
  padding: 6px 8px 5px;
  border-radius: 7px;
  font-family: var(--sb-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(10, 20, 60, 0.45);
  animation: tg-float 3.2s ease-in-out infinite;
}
.sb .tg-badge:nth-child(odd) {
  rotate: -7deg;
}
.sb .tg-badge:nth-child(even) {
  rotate: 6deg;
}
@keyframes tg-float {
  50% {
    translate: 0 -6px;
  }
}
.sb .tg-drop-t {
  font-size: 15.5px;
  font-weight: 600;
  word-break: break-word;
}
.sb .tg-drop-d {
  font-size: 13px;
  color: var(--sb-ink-3);
}
.sb .tg-drop-d u {
  color: var(--sb-accent);
  text-decoration-color: rgba(0, 0, 0, 0.35);
  text-underline-offset: 3px;
}
.sb .tg-file {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  padding: 14px;
  border: 1px solid var(--sb-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sb-shadow);
  text-align: left;
  animation: tg-in 0.35s var(--sb-ease);
}
.sb .tg-file-badge {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 52px;
  padding-bottom: 8px;
  border-radius: 7px;
  background: linear-gradient(160deg, #3a3a3a, var(--sb-accent));
  clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%);
  font-family: var(--sb-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}
.sb .tg-file-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.sb .tg-file-name {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb .tg-file-meta {
  font-size: 12.5px;
  color: var(--sb-ink-3);
}
.sb .tg-file-meta b {
  color: var(--sb-green);
  font-weight: 600;
}
.sb .tg-file-x {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--sb-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sb-ink-3);
  cursor: pointer;
}
.sb .tg-file-x:hover {
  color: var(--sb-ink);
  border-color: var(--sb-line-2);
}

/* text, link, topic */
.sb .tg-textarea,
.sb .tg-input {
  width: 100%;
  border: 1px solid var(--sb-line-2);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--sb-ink);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sb .tg-textarea {
  min-height: 170px;
  resize: vertical;
  line-height: 1.5;
}
.sb .tg-input {
  height: 54px;
  font-size: 16px;
}
.sb .tg-input::placeholder,
.sb .tg-textarea::placeholder {
  color: var(--sb-ink-3);
}
.sb .tg-textarea:focus,
.sb .tg-input:focus,
.sb .tg-urlbox:focus-within {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12);
}
.sb .tg-meter {
  display: flex;
  justify-content: flex-end;
  margin-top: 7px;
  font-size: 12px;
  color: var(--sb-ink-3);
}
.sb .tg-meter .ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sb-green);
  font-weight: 550;
}
.sb .tg-urlbox {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 54px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--sb-line-2);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sb .tg-urlbox.ok:not(:focus-within) {
  border-color: rgba(18, 161, 80, 0.45);
}
.sb .tg-url-pre {
  font-size: 15px;
  color: var(--sb-ink-3);
}
.sb .tg-input.bare {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent;
}
.sb .tg-host {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 45%;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: #e8f7ee;
  color: #0b7a3b;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: tg-in 0.3s var(--sb-ease);
}
.sb .tg-hint {
  font-size: 12.5px;
  color: var(--sb-ink-3);
  margin: 9px 2px 0;
}
.sb .tg-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* chips: suggestions, audiences */
.sb .tg-chip {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--sb-line);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--sb-ink-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s, transform 0.15s var(--sb-ease);
}
.sb .tg-chip:hover {
  border-color: var(--sb-line-2);
  color: var(--sb-ink);
  transform: translateY(-1px);
}
.sb .tg-chip.on {
  border-color: var(--sb-accent);
  color: var(--sb-accent);
  background: var(--sb-accent-soft);
}
.sb .tg-chip.sm {
  height: 28px;
  padding: 0 11px;
  font-size: 12.5px;
}
.sb .tg-chip.dashed {
  border-style: dashed;
  border-color: var(--sb-line-2);
}
.sb .tg-aud-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.sb .tg-aud-label {
  margin-right: 2px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--sb-ink-3);
}
.sb .tg-aud-input {
  width: 180px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--sb-accent);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: var(--sb-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

/* footer: what you get, and the button */
.sb .tg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--sb-line);
  background: var(--sb-bg-2);
}
.sb .tg-gets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--sb-ink-2);
}
.sb .tg-gets li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sb .tg-gets svg {
  color: var(--sb-accent);
}
.sb .tg-go {
  position: relative;
  overflow: hidden;
  height: 48px;
  padding: 0 16px 0 20px;
  font-size: 15px;
}
.sb .tg-go kbd {
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  font-family: var(--sb-mono);
  font-size: 11px;
  font-weight: 500;
}
.sb .tg-shell.is-ready .tg-go::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: tg-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tg-shine {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -100% 0;
  }
}
.sb .tg-error {
  margin: 0;
  padding: 10px 18px 12px;
  border-top: 1px solid rgba(229, 72, 77, 0.18);
  background: #fff6f6;
  font-size: 13.5px;
  color: var(--sb-red);
}

/* samples */
.sb .tg-samples {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.sb .tg-samples-label {
  font-size: 12.5px;
  color: var(--sb-ink-3);
}
.sb .tg-sample-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  width: 100%;
}
.sb .tg-sample {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sb-line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s var(--sb-ease), border-color 0.2s, box-shadow 0.2s;
}
.sb .tg-sample:hover {
  transform: translateY(-2px);
  border-color: var(--sb-line-2);
  box-shadow: var(--sb-shadow);
}
.sb .tg-sample.on {
  border-color: var(--sb-accent);
  background: var(--sb-accent-soft);
}
.sb .tg-sample > svg {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--sb-accent);
}
.sb .tg-sample-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--sb-bg-2);
  color: var(--sb-accent);
}
.sb .tg-sample.on .tg-sample-ico {
  background: #fff;
}
.sb .tg-sample-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sb .tg-sample-copy b {
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-ink);
}
.sb .tg-sample-copy span {
  font-size: 11.5px;
  color: var(--sb-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb .tg-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--sb-accent) !important;
  font-weight: 550;
  cursor: pointer;
}

.sb .tg-builder {
  background: #fff;
  border: 1px solid var(--sb-line);
  border-radius: 22px;
  box-shadow: var(--sb-shadow-lg);
  overflow: hidden;
}
.sb .tg-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--sb-line);
  background: var(--sb-bg-2);
  font-size: 13.5px;
  color: var(--sb-ink-2);
}
.sb .tg-status b {
  color: var(--sb-ink);
  font-weight: 600;
}
.sb .tg-status-r {
  margin-left: auto;
  white-space: nowrap;
}
.sb .tg-timer {
  font-family: var(--sb-mono);
  font-size: 12px;
  color: var(--sb-ink-3);
}
.sb .tg-ok {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--sb-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb .tg-spin {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--sb-accent);
  animation: tg-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.sb .tg-spin.sm {
  width: 12px;
  height: 12px;
}
@keyframes tg-spin {
  to {
    transform: rotate(360deg);
  }
}
.sb .tg-trunc {
  margin: 0;
  padding: 8px 18px;
  font-size: 12.5px;
  color: var(--sb-ink-3);
  border-bottom: 1px solid var(--sb-line);
}
.sb .tg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
.sb .tg-stage {
  padding: 18px;
  border-right: 1px solid var(--sb-line);
  min-width: 0;
}
.sb .tg-stage-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  min-width: 0;
}
.sb .tg-stage-title {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.sb .tg-mono {
  font-family: var(--sb-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  white-space: nowrap;
}
.sb .tg-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 550;
  color: var(--sb-accent);
  white-space: nowrap;
}
.sb .tg-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  animation: tg-pulse 0.9s ease-in-out infinite alternate;
}
.sb .tg-live.done {
  color: var(--sb-green);
}
.sb .tg-live.done::before {
  animation: none;
}
/* Lesson one, drawn by the editor's renderer in /try/preview/<draft>. */
.sb .tg-frame-real {
  position: relative;
  height: 520px;
  border: 1px solid var(--sb-line);
  border-radius: 14px;
  overflow: hidden;
  background: #f6f7f9;
}
.sb .tg-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f6f7f9;
  animation: tg-fade 0.4s;
}
.sb .tg-steps {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  padding: 28px 32px;
  background: var(--sb-tile);
}
.sb .tg-step {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: var(--sb-ink-3);
  transition: color 0.3s;
}
.sb .tg-step.now {
  color: var(--sb-ink);
  font-weight: 550;
}
.sb .tg-step.done {
  color: var(--sb-ink-2);
}
.sb .tg-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--sb-line-2);
  border-radius: 999px;
  background: #fff;
  font-family: var(--sb-mono);
  font-size: 11px;
  font-weight: 600;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.sb .tg-step.now .tg-step-dot {
  border-color: var(--sb-accent);
  color: var(--sb-accent);
  animation: tg-ring 1.3s ease-out infinite;
}
.sb .tg-step.done .tg-step-dot {
  border-color: var(--sb-green);
  background: var(--sb-green);
  color: #fff;
}
@keyframes tg-ring {
  from {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35);
  }
  to {
    box-shadow: 0 0 0 9px rgba(0, 0, 0, 0);
  }
}
.sb .tg-step-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 22px;
  border: 1px solid var(--sb-line);
  border-radius: 12px;
  background: #fff;
}
.sb .tg-step-skel span {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(110deg, #eef0f3 30%, #f8f9fb 50%, #eef0f3 70%);
  background-size: 200% 100%;
  animation: tg-shimmer 1.4s linear infinite;
}
.sb .tg-step-skel span:first-child {
  width: 50%;
  height: 20px;
  margin-bottom: 6px;
}
.sb .tg-step-skel span:nth-child(2) {
  width: 85%;
}
.sb .tg-step-skel span:nth-child(3) {
  width: 68%;
}
@keyframes tg-shimmer {
  to {
    background-position: -200% 0;
  }
}
@keyframes tg-pulse {
  to {
    opacity: 0.3;
  }
}
.sb .tg-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.sb .tg-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--sb-line);
  background: #fff;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.sb .tg-action:hover:not(:disabled) {
  border-color: var(--sb-line-2);
  background: var(--sb-bg-2);
}
.sb .tg-action:disabled {
  opacity: 0.5;
  cursor: default;
}
.sb .tg-lock {
  margin-left: auto;
  color: var(--sb-ink-3);
  display: flex;
}
.sb .tg-outline {
  padding: 18px 18px 20px;
  max-height: 560px;
  overflow-y: auto;
  min-width: 0;
}
.sb .tg-ol-label {
  display: block;
  margin-bottom: 8px;
}
.sb .tg-ctitle {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.sb .tg-for {
  font-size: 13px;
  color: var(--sb-ink-2);
  margin: 0 0 12px;
}
.sb .tg-skel {
  border-radius: 6px;
  background: var(--sb-bg-3);
  animation: tg-pulse 1s ease-in-out infinite alternate;
}
.sb .tg-skel-title {
  height: 24px;
  width: 70%;
  margin: 2px 0 14px;
}
.sb .tg-objectives {
  list-style: none;
  padding: 10px 12px;
  margin: 0 0 14px;
  background: var(--sb-bg-2);
  border-radius: 12px;
  display: grid;
  gap: 6px;
}
.sb .tg-objectives li {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sb-ink-2);
}
.sb .tg-objectives svg {
  color: var(--sb-green);
  flex-shrink: 0;
  margin-top: 2px;
}
.sb .tg-module {
  margin-bottom: 12px;
  animation: tg-in 0.4s var(--sb-ease);
}
@keyframes tg-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.sb .tg-mod-h {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 6px 0;
}
.sb .tg-mod-n {
  font-family: var(--sb-mono);
  font-size: 11px;
  color: var(--sb-accent);
}
.sb .tg-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 7px 8px 7px 28px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--sb-ink-2);
  cursor: pointer;
  animation: tg-in 0.4s var(--sb-ease);
}
.sb .tg-lesson:hover {
  background: var(--sb-bg-2);
}
.sb .tg-lesson.open {
  background: var(--sb-accent-soft);
  color: var(--sb-ink);
  font-weight: 550;
  cursor: default;
}
.sb .tg-l-title {
  flex: 1;
  min-width: 0;
}
.sb .tg-l-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--sb-ink-3);
  white-space: nowrap;
}
.sb .tg-lesson.open .tg-l-meta {
  color: var(--sb-accent);
  font-weight: 600;
}
.sb .tg-writing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--sb-ink-3);
  padding: 8px 0 0 28px;
}
.sb .tg-keep {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 22px;
  border-top: 1px solid var(--sb-line);
  background: var(--sb-bg-2);
}
.sb .tg-keep-copy {
  flex: 1;
  min-width: 0;
}
.sb .tg-keep h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.sb .tg-keep p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sb-ink-2);
  margin: 0;
}
.sb .tg-keep-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 380px;
}
.sb .tg-keep-btns.compact {
  min-width: 0;
}
.sb .tg-keep-btns .sb-btn {
  width: 100%;
}
.sb .tg-keep-btns .sb-btn-primary:only-child {
  grid-column: 1 / -1;
}
/* The finished panel's two ways on, each as wide as its words; signing up
   is the popup's. */
.sb .tg-keep-btns.is-choice {
  grid-template-columns: repeat(2, max-content);
  min-width: 0;
}
.sb .tg-keep-error {
  grid-column: 1 / -1;
  color: var(--sb-red) !important;
  font-size: 12.5px !important;
  margin: 2px 0 0 !important;
}
.sb .tg-keep-login {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12.5px !important;
  color: var(--sb-ink-3) !important;
  margin: 4px 0 0 !important;
}
.sb .tg-keep-login a {
  color: var(--sb-accent) !important;
  font-weight: 550;
}
/* Under the one primary action: tailor it with the assistant, or email it. */
.sb .tg-keep-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 14px;
}
.sb .tg-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--sb-ink-2);
  text-align: left;
  cursor: pointer;
}
.sb .tg-more svg {
  flex-shrink: 0;
}
.sb .tg-more b {
  color: var(--sb-ink);
  font-weight: 550;
}
.sb .tg-more:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sb .tg-more:hover > svg:last-child {
  transform: translateX(2px);
}
.sb .tg-more > svg:last-child {
  transition: transform 0.2s;
}
.sb .tg-more.quiet {
  font-size: 12.5px;
  color: var(--sb-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sb-line-2);
}
.sb .tg-more.quiet:hover {
  color: var(--sb-ink);
}
.sb .tg-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sb .tg-email input {
  height: 36px;
  min-width: 0;
  width: 220px;
  padding: 0 14px;
  border: 1px solid var(--sb-line-2);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--sb-ink);
}
.sb .tg-email input:focus {
  outline: none;
  border-color: var(--sb-ink);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}
.sb .tg-email .sb-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}
.sb .tg-email-error {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--sb-red);
}
.sb .tg-email-sent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--sb-ink-2);
}
.sb .tg-email-sent svg {
  color: var(--sb-green);
}
.sb .tg-failed {
  background: #fff;
}
.sb .tg-capped {
  padding: 34px;
  text-align: center;
}
.sb .tg-capped h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.sb .tg-capped > p {
  color: var(--sb-ink-2);
  font-size: 14.5px;
  margin: 0 auto 20px;
  max-width: 460px;
}
.sb .tg-capped .tg-keep-btns {
  max-width: 420px;
  margin: 0 auto;
  min-width: 0;
}
.sb .tg-fine {
  font-size: 12px !important;
  color: var(--sb-ink-3) !important;
  margin: 14px 0 0 !important;
  text-align: center;
}
.sb .tg-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 12, 20, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tg-fade 0.2s;
}
@keyframes tg-fade {
  from {
    opacity: 0;
  }
}
.sb .tg-modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 26px 22px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.35);
  animation: tg-in 0.3s var(--sb-ease);
}
.sb .tg-modal-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 8px 0 8px;
}
.sb .tg-modal-card > p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sb-ink-2);
  margin: 0 0 20px;
}
.sb .tg-modal-card .tg-keep-btns {
  grid-template-columns: 1fr;
  min-width: 0;
}
.sb .tg-modal-x {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: var(--sb-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sb .tg-modal-eyebrow {
  color: var(--sb-accent);
}

/* ---- stats strip ---- */
.sb .sb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--sb-line);
  border-bottom: 1px solid var(--sb-line);
}
.sb .sb-stat {
  padding: 30px 24px;
  border-right: 1px solid var(--sb-line);
}
.sb .sb-stat:last-child {
  border-right: 0;
}
.sb .sb-stat b {
  display: block;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.sb .sb-stat span {
  display: block;
  font-size: 13.5px;
  color: var(--sb-ink-2);
  margin-top: 10px;
  line-height: 1.45;
}

/* ---- numbered feature rows ---- */
.sb .sb-rows {
  display: grid;
  gap: 120px;
}
.sb .sb-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.sb .sb-row.flip .sb-row-copy {
  order: 2;
}
.sb .sb-row-copy .sb-mono {
  display: block;
  margin-bottom: 16px;
  color: var(--sb-accent);
}
.sb .sb-row-copy h3 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  font-family: var(--sb-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
}
.sb .sb-row-copy p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--sb-ink-2);
  margin: 0 0 22px;
}
.sb .sb-row-copy ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}
.sb .sb-row-copy li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--sb-ink);
}
.sb .sb-row-copy li svg {
  color: var(--sb-accent);
  flex-shrink: 0;
  margin-top: 3px;
}
.sb .sb-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sb-accent) !important;
}
.sb .sb-visual {
  background: var(--sb-bg-2);
  border-radius: 24px;
  padding: 28px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sb .sb-mock {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow);
  padding: 18px;
}
.sb .sb-mock-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 600;
}
.sb .sb-mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--sb-line);
  font-size: 13px;
}
.sb .sb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.sb .sb-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--sb-bg-3);
  overflow: hidden;
}
.sb .sb-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sb-accent);
}
.sb .sb-tag {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.sb .sb-tag.ok {
  background: #e7f7ee;
  color: #0b7a3b;
}
.sb .sb-tag.warn {
  background: #fff4e0;
  color: #9a5b00;
}
.sb .sb-tag.blue {
  background: var(--sb-accent-soft);
  color: var(--sb-accent);
}
.sb .sb-chat {
  display: grid;
  gap: 10px;
}
.sb .sb-bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.sb .sb-bubble.me {
  margin-left: auto;
  background: var(--sb-ink);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.sb .sb-bubble.ai {
  background: var(--sb-bg-2);
  border-bottom-left-radius: 4px;
}
.sb .sb-cite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--sb-accent);
  background: #fff;
  border: 1px solid var(--sb-line);
  border-radius: 999px;
  padding: 2px 9px;
}
.sb .sb-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sb .sb-src {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--sb-line);
  font-size: 13px;
  font-weight: 550;
}
.sb .sb-src i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- time-to-value timeline ---- */
.sb .sb-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--sb-line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
.sb .sb-tstep {
  padding: 24px 22px;
  border-right: 1px solid var(--sb-line);
}
.sb .sb-tstep:last-child {
  border-right: 0;
  background: var(--sb-accent-soft);
}
.sb .sb-tstep .when {
  font-family: var(--sb-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--sb-accent);
}
.sb .sb-tstep b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 10px 0 6px;
}
.sb .sb-tstep span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sb-ink-2);
}

/* ---- founder / people ---- */
.sb .sb-founder {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.sb .sb-photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--sb-bg-2);
  aspect-ratio: 3 / 2;
}
.sb .sb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb .sb-photo figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 550;
}
.sb .sb-quote {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 18px 0 22px;
}
.sb .sb-quote-by {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.sb .sb-quote-by b {
  display: block;
  font-weight: 600;
}
.sb .sb-quote-by span {
  color: var(--sb-ink-3);
  font-size: 13px;
}
.sb .sb-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.sb .sb-gallery .sb-photo {
  aspect-ratio: auto;
  height: 340px;
}

/* ---- principles (vcards) ---- */
.sb .sb-cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sb .sb-card {
  background: var(--sb-bg-2);
  border-radius: var(--sb-radius);
  padding: 26px;
}
.sb .sb-card .ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--sb-line);
  color: var(--sb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.sb .sb-card h4 {
  font-family: var(--sb-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.sb .sb-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sb-ink-2);
  margin: 0;
}

/* ---- pricing ---- */
.sb .sb-billing {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--sb-bg-2);
  border: 1px solid var(--sb-line);
  margin-top: 28px;
}
.sb .sb-billing button {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--sb-ink-2);
  cursor: pointer;
}
.sb .sb-billing button.on {
  background: #fff;
  color: var(--sb-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.sb .sb-billing .save {
  color: var(--sb-green);
  font-weight: 600;
  margin-left: 4px;
}
.sb .sb-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sb .sb-plans.three {
  grid-template-columns: repeat(3, 1fr);
}
.sb .sb-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--sb-line);
  border-radius: 20px;
  padding: 24px 22px;
}
.sb .sb-plan.featured {
  border: 1.5px solid var(--sb-accent);
  box-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.45);
}
.sb .sb-plan-badge {
  position: absolute;
  top: -11px;
  left: 22px;
  background: var(--sb-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 3px 10px;
}
.sb .sb-plan-name {
  font-size: 15px;
  font-weight: 600;
}
.sb .sb-plan-for {
  font-size: 13px;
  color: var(--sb-ink-3);
  margin-top: 4px;
  min-height: 36px;
  line-height: 1.4;
}
.sb .sb-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 18px 0 2px;
}
.sb .sb-plan-price b {
  font-size: 40px;
  font-family: var(--sb-display);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}
.sb .sb-plan-price span {
  font-size: 13px;
  color: var(--sb-ink-3);
}
.sb .sb-plan-note {
  font-size: 12.5px;
  color: var(--sb-ink-3);
  min-height: 34px;
  line-height: 1.4;
}
.sb .sb-plan .sb-btn {
  width: 100%;
  margin: 16px 0 20px;
}
.sb .sb-plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}
.sb .sb-plan li {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--sb-ink-2);
}
.sb .sb-plan li svg {
  color: var(--sb-accent);
  flex-shrink: 0;
  margin-top: 3px;
}
/* What Free doesn't do, under its ticks: muted, a dash for a tick. */
.sb .sb-plan li.without {
  color: var(--sb-ink-3, #9a9a9a);
}
.sb .sb-plan li.without svg {
  color: currentColor;
}
.sb .sb-plan li.lead {
  color: var(--sb-ink);
  font-weight: 600;
}
.sb .sb-ent {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 14px;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--sb-ink);
  color: #fff;
}
.sb .sb-ent b {
  font-size: 17px;
  font-weight: 600;
}
.sb .sb-ent p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.sb .sb-ent .sb-btn {
  margin-left: auto;
  background: #fff;
  color: var(--sb-ink) !important;
}
.sb .sb-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.sb .sb-compare th,
.sb .sb-compare td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--sb-line);
}
.sb .sb-compare th {
  font-weight: 600;
  font-size: 13px;
}
.sb .sb-compare td:first-child {
  color: var(--sb-ink-2);
}
.sb .sb-compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--sb-line);
  border-radius: 18px;
  background: #fff;
}

/* ---- FAQ ---- */
.sb .sb-faq {
  max-width: 780px;
  margin: 0 auto;
}
.sb .sb-faq details {
  border-bottom: 1px solid var(--sb-line);
}
.sb .sb-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-size: 16.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
}
.sb .sb-faq summary::-webkit-details-marker {
  display: none;
}
.sb .sb-faq summary svg {
  flex-shrink: 0;
  transition: transform 0.2s var(--sb-ease);
  color: var(--sb-ink-3);
}
.sb .sb-faq details[open] summary svg {
  transform: rotate(45deg);
}
.sb .sb-faq p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sb-ink-2);
  max-width: 680px;
}

/* ---- final CTA ---- */
.sb .sb-cta {
  position: relative;
  border-radius: 28px;
  padding: 72px 32px;
  text-align: center;
  overflow: hidden;
  background: var(--sb-bg-2);
  border: 1px solid var(--sb-line);
}
.sb .sb-cta .sb-h2 {
  max-width: 760px;
  margin: 0 auto;
}
.sb .sb-cta .btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ---- footer ---- */
.sb .sb-footer {
  border-top: 1px solid var(--sb-line);
  padding: 64px 0 36px;
  margin-top: 40px;
  background: #fff;
}
.sb .sb-fgrid {
  display: grid;
  grid-template-columns: 1.3fr repeat(5, 1fr);
  gap: 28px;
}
.sb .sb-fbrand p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sb-ink-2);
  margin: 14px 0 18px;
  max-width: 280px;
}
.sb .sb-fcol .sb-mono {
  display: block;
  margin-bottom: 14px;
}
.sb .sb-fcol a {
  display: block;
  font-size: 14px;
  color: var(--sb-ink-2);
  padding: 5px 0;
}
.sb .sb-fcol a:hover {
  color: var(--sb-ink);
}
.sb .sb-fbottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--sb-line);
  font-size: 12.5px;
  color: var(--sb-ink-3);
}
.sb .sb-fbottom nav {
  display: flex;
  gap: 18px;
}

/* ---- auth panel: the course waiting to be kept ---- */
.sb .sb-waiting {
  background: #fff;
  border: 1px solid var(--sb-line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--sb-shadow);
  text-align: left;
}
.sb .sb-waiting h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
.sb .sb-waiting ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.sb .sb-waiting li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: #333;
}
.sb .sb-waiting li span {
  font-family: var(--sb-mono);
  font-size: 11px;
  color: var(--sb-accent);
  padding-top: 2px;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .sb .sb-navlinks,
  .sb .sb-navright {
    display: none;
  }
  .sb .sb-burger {
    display: inline-flex;
  }
  .sb .sb-plans {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .sb .sb-section {
    padding: 80px 0;
  }
  .sb .tg-grid {
    grid-template-columns: 1fr;
  }
  .sb .tg-stage {
    border-right: 0;
    border-bottom: 1px solid var(--sb-line);
  }
  .sb .tg-outline {
    max-height: none;
  }
  .sb .tg-keep {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .sb .tg-keep-btns {
    min-width: 0;
  }
  .sb .tg-keep-btns.is-choice {
    grid-template-columns: 1fr 1fr;
  }
  .sb .sb-row,
  .sb .sb-founder {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sb .sb-row.flip .sb-row-copy {
    order: 0;
  }
  .sb .sb-rows {
    gap: 80px;
  }
  .sb .sb-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .sb .sb-stat:nth-child(2) {
    border-right: 0;
  }
  .sb .sb-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--sb-line);
  }
  .sb .sb-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .sb .sb-tstep:nth-child(2) {
    border-right: 0;
  }
  .sb .sb-tstep:nth-child(-n + 2) {
    border-bottom: 1px solid var(--sb-line);
  }
  .sb .sb-cards3,
  .sb .sb-plans.three {
    grid-template-columns: 1fr;
  }
  .sb .sb-fgrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sb .sb-fbrand {
    grid-column: 1 / -1;
  }
  .sb .sb-gallery {
    grid-template-columns: 1fr;
  }
  .sb .sb-gallery .sb-photo {
    height: 260px;
  }
  .sb .sb-ent {
    flex-direction: column;
    align-items: flex-start;
  }
  .sb .sb-ent .sb-btn {
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  .sb .sb-wrap {
    padding: 0 16px;
  }
  .sb .sb-hero {
    padding: 40px 0 24px;
  }
  .sb .sb-section {
    padding: 64px 0;
  }
  .sb .sb-head {
    margin-bottom: 36px;
  }
  .sb .tg-tab-long {
    display: none;
  }
  .sb .tg-tab-short {
    display: inline;
  }
  .sb .tg-tab {
    flex: 1;
    justify-content: center;
    padding: 0 8px;
  }
  .sb .tg-body {
    padding: 14px;
  }
  .sb .tg-foot {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }
  .sb .tg-gets {
    justify-content: center;
    gap: 6px 12px;
  }
  .sb .tg-go {
    width: 100%;
  }
  .sb .tg-go kbd {
    display: none;
  }
  .sb .tg-drop {
    min-height: 170px;
  }
  .sb .tg-actions {
    grid-template-columns: 1fr 1fr;
  }
  .sb .tg-keep-btns,
  .sb .tg-keep-btns.is-choice {
    grid-template-columns: 1fr;
  }
  .sb .tg-frame-real {
    height: 440px;
  }
  .sb .tg-stage-top {
    flex-wrap: wrap;
  }
  .sb .sb-plans {
    grid-template-columns: 1fr;
  }
  .sb .sb-timeline {
    grid-template-columns: 1fr;
  }
  .sb .sb-tstep {
    border-right: 0 !important;
    border-bottom: 1px solid var(--sb-line);
  }
  .sb .sb-visual {
    padding: 16px;
    min-height: 0;
  }
  .sb .sb-cta {
    padding: 48px 20px;
  }
  .sb .sb-fgrid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .sb .sb-announce {
    font-size: 12.5px;
    padding: 8px 40px 8px 14px;
  }
  .sb .sb-announce .hide-sm {
    display: none;
  }
  /* One line on a phone, always: a bar that wraps to two lines here would
     pin ~30px more of a small screen for the whole visit. */
  .sb .sb-announce a {
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
  }
}
@media (max-width: 370px) {
  .sb .sb-announce .go-long {
    display: none;
  }
  .sb .sb-announce .go-short {
    display: inline;
  }
}

/* ---- customers (cw = customer wall) ---- */
.sb .cw {
  padding: 8px 0 0;
  overflow: hidden;
}
.sb .cw-label {
  text-align: center;
  font-family: var(--sb-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  margin: 0 0 22px;
}
.sb .cw-track {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  padding: 6px 0;
}
.sb .cw-run {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: cw-scroll 70s linear infinite;
}
.sb .cw-track.rev .cw-run {
  animation-direction: reverse;
  animation-duration: 80s;
}
.sb .cw-track:hover .cw-run {
  animation-play-state: paused;
}
@keyframes cw-scroll {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb .cw-run {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
}
.sb .cw-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.sb .cw-name {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: #3a3b41;
}
.sb .cw-logo {
  display: block;
  object-fit: contain;
  max-width: none;
  transition: transform 0.2s var(--sb-ease);
}
/* Logos that only exist in white are drawn dark so they show on a white page. */
.sb .cw-logo.light {
  filter: brightness(0);
  opacity: 0.8;
}
.sb .cw-item:hover .cw-logo,
.sb .cw-cell:hover .cw-logo {
  transform: scale(1.04);
}
.sb .cw-item {
  justify-content: center;
  min-height: 64px;
}
.sb .cw-cell .cw-logo,
.sb .cw-cell .cw-name {
  margin: auto 0;
}
.sb .cw-cell .cw-meta {
  margin-top: 10px;
}
.sb .cw-ind {
  font-family: var(--sb-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
}
.sb .cw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--sb-line);
  border-left: 1px solid var(--sb-line);
}
.sb .cw-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 112px;
  padding: 18px 20px 16px;
  border-right: 1px solid var(--sb-line);
  border-bottom: 1px solid var(--sb-line);
  background: #fff;
  transition: background 0.15s;
}
.sb .cw-cell:hover {
  background: var(--sb-bg-2);
}
.sb .cw-cell .cw-name {
  font-size: 16.5px;
}
.sb .cw-meta {
  font-size: 12px;
  color: var(--sb-ink-3);
}
@media (max-width: 900px) {
  .sb .cw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .sb .cw-name {
    font-size: 16px;
  }
  .sb .cw-run {
    gap: 32px;
  }
}

/* ---- comparison pages (cmp) ---- */
.sb .cmp-hero {
  position: relative;
  padding: 44px 0 40px;
  text-align: center;
  overflow: hidden;
}
.sb .cmp-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 560px;
  background:
    radial-gradient(40% 60% at 30% 40%, rgba(0, 0, 0, 0.12), transparent 70%),
    radial-gradient(35% 55% at 72% 35%, rgba(128, 212, 255, 0.18), transparent 70%);
  pointer-events: none;
}
.sb .cmp-hero > * {
  position: relative;
}
.sb .cmp-crumbs {
  display: inline-flex;
  gap: 8px;
  font-size: 13px;
  color: var(--sb-ink-3);
  margin-bottom: 30px;
}
.sb .cmp-crumbs a:hover {
  color: var(--sb-accent);
}
.sb .cmp-versus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 30px;
}
.sb .cmp-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 210px;
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow);
}
.sb .cmp-side.us {
  transform: rotate(-3deg);
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.5);
}
.sb .cmp-side.them {
  transform: rotate(3deg);
}
.sb .cmp-side b {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.sb .cmp-side > span:last-child {
  font-size: 12px;
  color: var(--sb-ink-3);
  text-align: center;
  line-height: 1.35;
}
.sb .cmp-vs {
  font-family: var(--sb-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-ink);
  color: #fff;
  z-index: 1;
  margin: 0 -26px;
  box-shadow: 0 0 0 6px #fff;
}
.sb .cmp-logo {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.sb .cmp-h1 {
  font-family: var(--sb-display);
  font-weight: 500;
  font-size: clamp(38px, 5.8vw, 72px);
}
.sb .cmp-verdict {
  font-size: clamp(17px, 1.7vw, 20px);
  max-width: 720px;
  color: var(--sb-ink);
}
.sb .cmp-hero-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.sb .cmp-checked {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--sb-ink-3);
}
.sb .cmp-checked a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sb .cmp-glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sb .cmp-stat {
  background: var(--sb-bg-2);
  border-radius: 20px;
  padding: 22px 22px 18px;
}
.sb .cmp-stat-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 8px;
}
.sb .cmp-stat-row b {
  font-size: 44px;
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--sb-ink-2);
}
.sb .cmp-stat-row.small b {
  font-size: 24px;
  letter-spacing: -0.03em;
}
.sb .cmp-stat-row b.us {
  color: var(--sb-accent);
}
.sb .cmp-stat-row > span {
  font-family: var(--sb-mono);
  font-size: 11px;
  color: var(--sb-ink-3);
  text-transform: uppercase;
}
.sb .cmp-stat p {
  margin: 0;
  font-size: 13px;
  color: var(--sb-ink-2);
  line-height: 1.45;
}
.sb .cmp-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sb .cmp-choose-card {
  border-radius: 22px;
  border: 1px solid var(--sb-line);
  padding: 26px;
  background: #fff;
}
.sb .cmp-choose-card.us {
  background: linear-gradient(180deg, #f4f8ff, #fff 70%);
  border-color: rgba(0, 0, 0, 0.25);
}
.sb .cmp-choose-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.sb .cmp-choose ul,
.sb .cmp-fair ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.sb .cmp-choose li,
.sb .cmp-fair li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sb-ink-2);
}
.sb .cmp-choose li svg,
.sb .cmp-fair li svg {
  flex-shrink: 0;
  margin-top: 4px;
}
.sb .cmp-choose-card.us li svg {
  color: var(--sb-accent);
}
.sb .cmp-choose-card:not(.us) li svg {
  color: var(--sb-ink-3);
}

/* the table */
.sb .cmp-table {
  border: 1px solid var(--sb-line);
  border-radius: 22px;
  /* clip, not hidden: hidden makes the table a scroll container, and the
     sticky header then pins 64px down inside it, over the first rows. */
  overflow: clip;
  background: #fff;
}
.sb .cmp-thead,
.sb .cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
}
.sb .cmp-thead {
  position: sticky;
  top: var(--sb-top-h, 64px);
  z-index: 5;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sb-line);
  border-radius: 22px 22px 0 0;
}
.sb .cmp-thead > span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 650;
}
.sb .cmp-thead > span.us,
.sb .cmp-row > span.us {
  background: rgba(0, 0, 0, 0.035);
}
.sb .cmp-group {
  padding: 18px 20px 8px;
  font-family: var(--sb-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sb-accent);
  border-top: 1px solid var(--sb-line);
}
.sb .cmp-group:first-child {
  border-top: 0;
}
.sb .cmp-row > span {
  padding: 13px 20px;
  border-top: 1px solid var(--sb-line);
}
.sb .cmp-label {
  font-size: 14px;
  font-weight: 550;
  color: var(--sb-ink);
  display: flex;
  align-items: center;
}
.sb .cmp-cell {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sb .cmp-cell b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}
.sb .cmp-note {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--sb-ink-3);
  margin-top: 1px;
}
.sb .cmp-mark {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.sb .cmp-mark.yes {
  background: var(--sb-green);
  color: #fff;
}
.sb .cmp-mark.no {
  background: #f1f1f3;
  color: #9a9ba1;
}
.sb .cmp-mark.partial {
  background: conic-gradient(var(--sb-green) 0 50%, #e4e5e8 50% 100%);
}
.sb .cmp-mark.addon {
  background: #fff4e0;
  border: 2px solid #e5a03a;
}
.sb .cmp-mark.unknown {
  background: #fff;
  border: 2px dashed #c9cace;
}
.sb .cmp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 20px;
  border-top: 1px solid var(--sb-line);
  font-size: 12.5px;
  color: var(--sb-ink-3);
  background: var(--sb-bg-2);
}
.sb .cmp-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sb .cmp-legend .cmp-mark {
  width: 14px;
  height: 14px;
  margin: 0;
}

/* price */
.sb .cmp-price-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.sb .cmp-calc,
.sb .cmp-plans {
  background: #fff;
  border: 1px solid var(--sb-line);
  border-radius: 22px;
  padding: 24px;
}
.sb .cmp-calc-top label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--sb-ink-2);
  margin-bottom: 14px;
}
.sb .cmp-calc-top label b {
  color: var(--sb-ink);
  font-size: 15px;
}
.sb .cmp-calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sb-accent) var(--p), var(--sb-bg-3) var(--p));
  outline: none;
}
.sb .cmp-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--sb-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: grab;
}
.sb .cmp-calc input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--sb-accent);
  cursor: grab;
}
.sb .cmp-calc-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--sb-mono);
  font-size: 11px;
  color: var(--sb-ink-3);
  margin-top: 8px;
}
.sb .cmp-bars {
  display: grid;
  gap: 14px;
  margin: 26px 0 18px;
}
.sb .cmp-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 112px;
  align-items: center;
  gap: 12px;
}
.sb .cmp-bar-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb .cmp-bar {
  height: 34px;
  border-radius: 10px;
  background: var(--sb-bg-2);
  overflow: hidden;
}
.sb .cmp-bar i {
  display: block;
  height: 100%;
  border-radius: 10px;
  transition: width 0.45s var(--sb-ease);
  min-width: 6px;
}
.sb .cmp-bar i.us {
  background: var(--sb-ink);
}
.sb .cmp-bar i.them {
  background: #c9c9c9;
}
.sb .cmp-bar i.them.est {
  background: repeating-linear-gradient(-45deg, #8d8f96 0 6px, #a3a5ab 6px 12px);
}
.sb .cmp-est {
  font-style: normal;
  font-family: var(--sb-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a5b00;
  background: #fff4e0;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 6px;
}
.sb .cmp-calc-fine a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sb .cmp-bar i.quote {
  width: 100%;
  background: repeating-linear-gradient(-45deg, #eeeef0 0 8px, #f7f7f8 8px 16px);
}
.sb .cmp-bar-val {
  font-size: 13.5px;
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}
.sb .cmp-calc-verdict {
  font-size: 15px;
  line-height: 1.55;
  color: var(--sb-ink);
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sb-accent-soft);
}
.sb .cmp-calc-fine {
  font-size: 11.5px;
  color: var(--sb-ink-3);
  margin: 12px 0 0;
  line-height: 1.5;
}
.sb .cmp-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.sb .cmp-plans-col {
  display: flex;
  flex-direction: column;
}
.sb .cmp-plans-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 650;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sb-line);
}
.sb .cmp-plans-col.us .cmp-plans-h {
  color: var(--sb-accent);
}
.sb .cmp-plans-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sb .cmp-plans-col li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--sb-line);
  font-size: 13px;
}
.sb .cmp-plans-col li span {
  color: var(--sb-ink-2);
}
.sb .cmp-plans-col li em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--sb-ink-3);
  margin-top: 2px;
}
.sb .cmp-plans-col li b {
  text-align: right;
  font-weight: 650;
  white-space: nowrap;
}
.sb .cmp-plans-col p {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sb-ink-3);
}

/* fair */
.sb .cmp-fair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sb .cmp-fair > div {
  border-radius: 22px;
  border: 1px solid var(--sb-line);
  padding: 26px;
}
.sb .cmp-fair .sb-mono {
  display: block;
  margin-bottom: 16px;
}
.sb .cmp-fair > div:first-child li svg {
  color: var(--sb-green);
}
.sb .cmp-fair > div:last-child li svg {
  color: #e5a03a;
}
.sb .cmp-review {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--sb-ink-3);
}
.sb .cmp-review a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sb .cmp-news {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--sb-bg-2);
  font-size: 13.5px;
  color: var(--sb-ink-2);
  line-height: 1.5;
}
.sb .cmp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sb .cmp-steps li {
  position: relative;
  border-radius: 22px;
  background: var(--sb-bg-2);
  padding: 24px;
}
.sb .cmp-step-n {
  font-family: var(--sb-mono);
  font-size: 12px;
  color: var(--sb-accent);
}
.sb .cmp-steps b {
  display: block;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
}
.sb .cmp-steps li > span:last-child {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sb-ink-2);
}
.sb .cmp-others {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sb .cmp-other {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--sb-line);
  transition: border-color 0.15s, transform 0.15s var(--sb-ease);
}
.sb .cmp-other:hover {
  border-color: var(--sb-line-2);
  transform: translateY(-1px);
}
.sb .cmp-other > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.sb .cmp-other b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.sb .cmp-other b + span {
  display: block;
  font-size: 12px;
  color: var(--sb-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb .cmp-sources {
  border-top: 1px solid var(--sb-line);
  padding-top: 24px;
}
.sb .cmp-sources ol {
  margin: 14px 0 16px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--sb-ink-2);
}
.sb .cmp-sources a {
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
.sb .cmp-sources p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sb-ink-3);
  margin: 0;
  max-width: 760px;
}

/* hub */
.sb .cmp-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--sb-line);
  border-radius: 22px;
  background: #fff;
}
.sb .cmp-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}
.sb .cmp-matrix th,
.sb .cmp-matrix td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--sb-line);
  text-align: center;
  font-size: 13px;
}
.sb .cmp-matrix thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--sb-ink-2);
  vertical-align: bottom;
}
.sb .cmp-matrix tbody th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.sb .cmp-matrix tr.us {
  background: rgba(0, 0, 0, 0.04);
}
.sb .cmp-matrix tbody tr:last-child th,
.sb .cmp-matrix tbody tr:last-child td {
  border-bottom: 0;
}
.sb .cmp-matrix-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sb a.cmp-matrix-name:hover {
  color: var(--sb-accent);
}
.sb .cmp-matrix-txt {
  font-size: 12px !important;
  color: var(--sb-ink-2);
  max-width: 160px;
}
.sb .cmp-matrix-price {
  font-weight: 650;
  white-space: nowrap;
}
.sb .cmp-matrix-quote {
  font-size: 12px;
  color: var(--sb-ink-3);
  white-space: nowrap;
}
.sb .cmp-matrix-note {
  max-width: 760px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--sb-ink-3);
}
.sb .cmp-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  vertical-align: middle;
}
.sb .cmp-dot.yes {
  background: var(--sb-green);
}
.sb .cmp-dot.partial {
  background: conic-gradient(var(--sb-green) 0 50%, #e4e5e8 50% 100%);
}
.sb .cmp-dot.addon {
  border: 2px solid #e5a03a;
  background: #fff4e0;
}
.sb .cmp-dot.no {
  background: #e4e5e8;
}
.sb .cmp-dot.unknown {
  border: 2px dashed #c9cace;
}
.sb .cmp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sb .cmp-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--sb-line);
  padding: 22px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s var(--sb-ease);
}
.sb .cmp-card:hover {
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: var(--sb-shadow);
  transform: translateY(-2px);
}
.sb .cmp-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.sb .cmp-card h3 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.sb .cmp-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sb-ink-2);
  margin: 0 0 18px;
  flex: 1;
}

@media (max-width: 900px) {
  .sb .cmp-glance,
  .sb .cmp-choose,
  .sb .cmp-price-grid,
  .sb .cmp-fair,
  .sb .cmp-steps {
    grid-template-columns: 1fr;
  }
  .sb .cmp-others,
  .sb .cmp-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .sb .cmp-versus {
    gap: 10px;
  }
  .sb .cmp-side {
    width: 150px;
    padding: 16px 12px 14px;
  }
  .sb .cmp-side > span:last-child {
    display: none;
  }
  .sb .cmp-thead,
  .sb .cmp-row {
    grid-template-columns: 1fr 1fr;
  }
  .sb .cmp-thead > span:first-child {
    display: none;
  }
  .sb .cmp-label {
    grid-column: 1 / -1;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--sb-line);
  }
  .sb .cmp-row > span[role="cell"] {
    border-top: 0;
  }
  .sb .cmp-thead > span,
  .sb .cmp-row > span {
    padding: 10px 14px;
  }
  .sb .cmp-plans {
    grid-template-columns: 1fr;
  }
  .sb .cmp-bar-row {
    grid-template-columns: 92px 1fr 88px;
  }
  .sb .cmp-others,
  .sb .cmp-cards {
    grid-template-columns: 1fr;
  }
}