/* Generated by tailwind.frontend.build.mjs — do not edit.
   Source: resources/css/frontend-product.css. Rebuild: npm run build:product-css */
/*
 | SenangBook / product page stylesheet
 |-----------------------------------------------------------------------------
 | Loaded on top of public/frontend/css/styles.css by the product Blade views.
 |
 | Two parts:
 |   1. @tailwind utilities — the utility classes the product Blades use that
 |      the frozen styles.css build never generated. The build script strips any
 |      rule styles.css already ships, so the two files never compete.
 |   2. Components — plain CSS, so they win over the utilities above and stay
 |      readable.
 |
 | Layout (grids, gaps, section padding) lives in components here, never in
 | Tailwind utilities. product.css loads after styles.css and only carries what
 | styles.css lacks, so a *new* base utility here would outrank an *existing*
 | responsive one there — `col-span-6` beating `lg:col-span-3`, for instance.
 | Owning the layout outright keeps the cascade deterministic.
 |
 | Rebuild after editing a product Blade: npm run build:product-css
 */

.pointer-events-none {
  pointer-events: none;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.max-w-\[680px\] {
  max-width: 680px;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.border-\[\#16233a\] {
  --tw-border-opacity: 1;
  border-color: rgb(22 35 58 / var(--tw-border-opacity, 1));
}
.border-\[\#f97316\]\/20 {
  border-color: rgb(249 115 22 / 0.2);
}
.bg-\[\#f97316\]\/10 {
  background-color: rgb(249 115 22 / 0.1);
}
.bg-\[radial-gradient\(ellipse_at_25\%_80\%\2c rgba\(30\2c 58\2c 110\2c 0\.18\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(ellipse at 25% 80%,rgba(30,58,110,0.18),transparent 60%);
}
.bg-\[radial-gradient\(ellipse_at_70\%_25\%\2c rgba\(212\2c 175\2c 55\2c 0\.08\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(ellipse at 70% 25%,rgba(212,175,55,0.08),transparent 60%);
}
.text-\[2\.6rem\] {
  font-size: 2.6rem;
}
.text-\[clamp\(1\.75rem\2c 4\.4vw\2c 3\.1rem\)\] {
  font-size: clamp(1.75rem,4.4vw,3.1rem);
}
.text-\[clamp\(1\.9rem\2c 4vw\2c 3\.05rem\)\] {
  font-size: clamp(1.9rem,4vw,3.05rem);
}
.text-\[\#c2570a\] {
  --tw-text-opacity: 1;
  color: rgb(194 87 10 / var(--tw-text-opacity, 1));
}
.text-\[\#f0a45f\] {
  --tw-text-opacity: 1;
  color: rgb(240 164 95 / var(--tw-text-opacity, 1));
}
.text-\[\#f97316\] {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.opacity-\[0\.022\] {
  opacity: 0.022;
}
.shadow-\[0_0_10px_rgba\(212\2c 175\2c 55\2c 0\.55\)\] {
  --tw-shadow: 0 0 10px rgba(212,175,55,0.55);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* ═══════════════════════ Section scaffolding ═══════════════════════════
   Every band is the same shape: one padded section, one 1200px column, one
   centred header. The alternating surfaces are what separate them. */

.sb-section {
  padding: 4.25rem 0;
}
@media (min-width: 640px) {
.sb-section {
    padding: 6rem 0;
  }
}
.sb-section-cream {
  background: #faf9f6;
}
.sb-section-white {
  background: #fff;
}
.sb-section-dark {
  position: relative;
  overflow: hidden;
  background: #0a1628;
}
.sb-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
.sb-wrap {
    padding: 0 1.5rem;
  }
}
/* ── Centred section header ───────────────────────────────────────────── */

/* Wide enough that the longest section title stays on one line; the lede
   keeps its own narrower measure below. */

.sb-head {
  max-width: 1000px;
  margin: 0 auto 3rem;
  text-align: center;
}
@media (min-width: 640px) {
.sb-head {
    margin-bottom: 3.75rem;
  }
}
.sb-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c2570a;
}
.sb-eyebrow::before,
.sb-eyebrow::after {
  content: '';
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, #f97316, #fbbf7a);
}
.sb-title {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.16;
  color: #0a1628;
}
.sb-lede {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.1rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #4a5568;
  font-weight: 500;
}
@media (min-width: 640px) {
.sb-title {
    font-size: 2.35rem;
  }
.sb-lede {
    font-size: 1.05rem;
  }
}
.sb-head-dark .sb-eyebrow {
  color: #f0a45f;
}
.sb-head-dark .sb-title {
  color: #fff;
}
.sb-head-dark .sb-lede {
  color: #8896a8;
}
/* ── Shared card + grids ──────────────────────────────────────────────── */

.sb-grid-2 {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 1024px) {
.sb-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
/* ═══════════════════════════ Hero ══════════════════════════════════════ */

/* Full column width, same as every other section; the sub-heading keeps its
   own measure so only the headline uses the full span. */

.sb-hero {
  text-align: center;
}
.sb-hero-sub {
  max-width: 640px;
  margin: 0 auto;
  font-weight: 500;
}
.sb-hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}
.sb-wordmark {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
}
.sb-kicker {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f0a45f;
}
.sb-hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.9rem;
}
.sb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.45rem 0.9rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #e8edf5;
}
/* ── Buttons ──────────────────────────────────────────────────────────── */

.sb-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 999px;
  background: #25d366;
  padding: 0.875rem 1.6rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #052e16;
  transition: transform 0.3s, box-shadow 0.3s;
}
.sb-btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(37, 211, 102, 0.32);
}
.sb-btn-whatsapp-lg {
  padding: 1rem 2rem;
  font-size: 0.95rem;
}
/* ── Proof band ───────────────────────────────────────────────────────── */

.sb-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0;
  padding: 1.35rem 0;
}
.sb-proof-item {
  padding: 0 1.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #c3cedd;
}
@media (min-width: 900px) {
.sb-proof {
    justify-content: space-between;
  }
.sb-proof-item + .sb-proof-item {
    border-left: 1px solid #24344f;
  }
}
/* ── Pain points: a side-by-side comparison ───────────────────────────────
   One grid rather than two panels, so a pain and its answer always sit on the
   same row no matter how the text wraps. Below 900px the pairs stack and each
   cell carries its own column label. */

.sb-compare {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid #e4e0d6;
  border-radius: 18px;
  background: #fff;
}
@media (min-width: 900px) {
.sb-compare {
    grid-template-columns: 1fr 1fr;
  }
}
.sb-compare-head {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 1.75rem;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
@media (min-width: 900px) {
.sb-compare-head {
    display: flex;
  }
}
.sb-compare-head-bad {
  background: #eae6dd;
  color: #8b8578;
}
/* A small mark in each header, sized to match the row icons. */

.sb-compare-head-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
}
.sb-compare-head-icon svg {
  width: 0.85rem;
  height: 0.85rem;
}
.sb-compare-head-bad .sb-compare-head-icon {
  background: #d8d2c6;
  color: #7d776a;
}
.sb-compare-head-good .sb-compare-head-icon {
  background: #f97316;
  color: #fff;
}
.sb-compare-head-good {
  background: #0a1628;
  color: #fff;
}
.sb-compare-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.3rem 1.75rem;
  border-top: 1px solid #f1eee7;
  font-size: 0.92rem;
  line-height: 1.6;
}
.sb-compare-bad {
  background: #f7f4ee;
  font-weight: 500;
  color: #8b8578;
}
.sb-compare-good {
  font-weight: 600;
  color: #0a1628;
}
/* The only thing separating the columns — the tinted left side and the header
   colours already say which is which. */

@media (min-width: 900px) {
  .sb-compare-good,
    .sb-compare-head-good {
    border-left: 1px solid #e4e0d6;
  }
}
/* Stacked: mark where each new pair starts. */

.sb-compare-bad {
  border-top: 2px solid #e4e0d6;
}
@media (min-width: 900px) {
.sb-compare-bad {
    border-top: 1px solid #f1eee7;
  }
}
.sb-compare-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.05rem;
  border-radius: 999px;
}
.sb-compare-icon svg {
  width: 0.78rem;
  height: 0.78rem;
}
.sb-compare-bad .sb-compare-icon {
  background: #e2ddd2;
  color: #8b8578;
}
.sb-compare-good .sb-compare-icon {
  background: #f97316;
  color: #fff;
}
.sb-compare-tag {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a39e93;
}
.sb-compare-good .sb-compare-tag {
  color: #c2570a;
}
@media (min-width: 900px) {
.sb-compare-tag {
    display: none;
  }
}
/* ── Core functions: a bento grid ─────────────────────────────────────────
   Spans are component classes, not Tailwind `col-span-*`: product.css loads
   after styles.css and carries only what styles.css lacks, so a new base
   utility here would outrank an existing responsive one there. */

.sb-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (min-width: 640px) {
.sb-bento {
    gap: 1.15rem;
  }
}
.sb-bento > * {
  grid-column: span 12 / span 12;
}
@media (min-width: 768px) {
.sb-bento > .k-4,
    .sb-bento > .k-6 {
    grid-column: span 6 / span 6;
  }
}
@media (min-width: 1024px) {
.sb-bento > .k-4 {
    grid-column: span 4 / span 4;
  }
.sb-bento > .k-6 {
    grid-column: span 6 / span 6;
  }
.sb-bento > .k-8 {
    grid-column: span 8 / span 8;
  }
}
.sb-kt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 18px;
  border: 1px solid #ebe7df;
  background: #faf9f6;
  padding: 1.6rem;
}
@media (min-width: 640px) {
.sb-kt {
    padding: 2rem;
  }
}
.sb-kt-dark {
  background: #0a1628;
  border-color: #0a1628;
}
.sb-kt-accent {
  background: #f97316;
  border-color: #f97316;
}
.sb-kt-num {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: #f97316;
}
.sb-kt-dark .sb-kt-num {
  color: #f0a45f;
}
.sb-kt-accent .sb-kt-num {
  color: rgba(255, 255, 255, 0.55);
}
.sb-kt-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0a1628;
}
.sb-kt-dark .sb-kt-title,
.sb-kt-accent .sb-kt-title {
  color: #fff;
}
.sb-kt-body {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.65;
  color: #4a5568;
}
.sb-kt-dark .sb-kt-body {
  color: #8896a8;
}
.sb-kt-accent .sb-kt-body {
  color: rgba(255, 255, 255, 0.9);
}
/* The two wide tiles carry the section, so they get more type. */

@media (min-width: 1024px) {
  .k-8 .sb-kt-num {
    font-size: 3.1rem;
  }

  .k-8 .sb-kt-title {
    font-size: 1.32rem;
  }

  .k-8 .sb-kt-body {
    max-width: 34rem;
    font-size: 0.94rem;
  }
}
/* ── Video ────────────────────────────────────────────────────────────── */

.sb-video-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #0f1c31;
  aspect-ratio: 16 / 9;
}
.sb-video-frame iframe,
.sb-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.sb-video-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  text-align: center;
  padding: 1.5rem;
}
.sb-video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  box-shadow: 0 0 0 10px rgba(249, 115, 22, 0.14);
}
.sb-video-play svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.2rem;
}
.sb-video-note {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8896a8;
}
/* ── Sub-block inside a section ───────────────────────────────────────── */

.sb-subblock {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid #ebe7df;
}
.sb-subblock-title {
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0a1628;
}
.sb-subblock-title::before {
  content: '';
  flex: none;
  width: 3px;
  height: 1.15rem;
  border-radius: 2px;
  background: #f97316;
}
/* The list is proof, not a pitch — the bento above already sells the system.
   Collapsed by default so the pricing section stays readable; the markup stays
   in the DOM either way, so search engines still see all 24 items. */

.sb-included-summary {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
  color: #4a5568;
}
.sb-fulllist {
  margin-top: 1.35rem;
}
.sb-fulllist > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.3rem;
  border: 1px solid rgba(10, 22, 40, 0.18);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0a1628;
  transition: border-color 0.3s, background-color 0.3s;
}
.sb-fulllist > summary::-webkit-details-marker {
  display: none;
}
.sb-fulllist > summary:hover {
  border-color: rgba(10, 22, 40, 0.4);
  background: #faf9f6;
}
.sb-fulllist > summary:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 3px;
}
.sb-fulllist > summary svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.25s;
}
.sb-fulllist[open] > summary svg {
  transform: rotate(180deg);
}
.sb-fulllist[open] > summary {
  margin-bottom: 1.75rem;
}
/* ── "Everything included" ────────────────────────────────────────────────
   Three columns made every item wrap at a different point, so the list read as
   noise. Two wide columns fit almost every item on one line; a rule under each
   turns it into a ledger you can scan instead of a block of text. */

.sb-allin {
  display: grid;
  -moz-column-gap: 3.5rem;
       column-gap: 3.5rem;
  border-top: 1px solid #ebe7df;
}
@media (min-width: 900px) {
.sb-allin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sb-allin li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid #f1eee7;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
  color: #4a5568;
}
.sb-allin li.is-highlight {
  font-weight: 700;
  color: #0a1628;
}
.sb-check {
  flex: none;
  display: block;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 2px solid #f97316;
  border-bottom: 2px solid #f97316;
  transform: rotate(-45deg) translateY(-0.12rem);
}
/* ── Pricing ──────────────────────────────────────────────────────────── */

.sb-plans {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 768px) {
.sb-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
.sb-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid #ebe7df;
  background: #fff;
  padding: 1.9rem;
}
.sb-plan-featured {
  border: 2px solid #f97316;
  box-shadow: 0 24px 55px -30px rgba(249, 115, 22, 0.55);
}
.sb-plan-badge {
  position: absolute;
  top: -0.75rem;
  right: 1.5rem;
  border-radius: 999px;
  background: #f97316;
  padding: 0.25rem 0.85rem;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.sb-plan-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0a1628;
}
.sb-plan-note {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #8b8578;
  font-weight: 500;
}
.sb-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin-top: 1.5rem;
}
.sb-plan-was {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: #c2bcae;
  text-decoration: line-through;
}
.sb-plan-amount {
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #0a1628;
}
.sb-plan-per {
  font-size: 0.88rem;
  font-weight: 600;
  color: #8b8578;
}
.sb-plan-save {
  display: inline-block;
  margin-top: 0.85rem;
  border-radius: 999px;
  background: #fff4ea;
  padding: 0.38rem 0.85rem;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c2570a;
}
.sb-plan-list {
  flex: 1;
  margin: 1.5rem 0 1.8rem;
}
.sb-plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4a5568;
  font-weight: 500;
}
.sb-plan-list li + li {
  margin-top: 0.75rem;
}
.sb-tick {
  flex: none;
  display: block;
  width: 0.68rem;
  height: 0.38rem;
  margin-top: 0.3rem;
  border-left: 2px solid #d9d3c6;
  border-bottom: 2px solid #d9d3c6;
  transform: rotate(-45deg);
}
.sb-tick-orange {
  border-left-color: #f97316;
  border-bottom-color: #f97316;
}
.sb-plan-cta,
.sb-plan-cta-ghost {
  display: block;
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.sb-plan-cta {
  background: #f97316;
  color: #fff;
}
.sb-plan-cta:hover {
  background: #ea6a08;
  box-shadow: 0 12px 30px -12px rgba(249, 115, 22, 0.7);
}
.sb-plan-cta-ghost {
  border: 1px solid rgba(10, 22, 40, 0.16);
  color: #0a1628;
}
.sb-plan-cta-ghost:hover {
  border-color: rgba(10, 22, 40, 0.4);
  background: #faf9f6;
}
/* ── Pricing notes ────────────────────────────────────────────────────────
   Tinted blocks read as two loud stickers under the plans; these are asides,
   so they get an icon and a rule instead of a fill. */

.sb-notes {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #ebe7df;
}
@media (min-width: 1024px) {
.sb-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
.sb-notes > :first-child {
    padding-right: 2.75rem;
  }
.sb-notes > :last-child {
    padding-left: 2.75rem;
    border-left: 1px solid #ebe7df;
  }
}
.sb-note {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.65;
  color: #4a5568;
}
.sb-note svg {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.12rem;
  color: #f97316;
}
.sb-note-strong {
  font-weight: 700;
  color: #0a1628;
}
.sb-note-accent {
  font-weight: 700;
  color: #c2570a;
}
/* ── Price tables ─────────────────────────────────────────────────────── */

.sb-table {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #ebe7df;
  background: #fff;
}
.sb-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #0a1628;
  padding: 1rem 1.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c3cedd;
}
.sb-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid #f1eee7;
}
.sb-table-row:first-of-type {
  border-top: 0;
}
.sb-table-row:nth-of-type(even) {
  background: #fcfbf8;
}
.sb-table-label {
  font-size: 0.88rem;
  color: #4a5568;
  font-weight: 500;
}
.sb-table-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0a1628;
  white-space: nowrap;
}
.sb-table-price.is-free {
  color: #f97316;
}
.sb-table-note {
  margin-top: 1rem;
  font-size: 0.79rem;
  line-height: 1.6;
  color: #8b8578;
  font-weight: 500;
}
/* ── FAQ ──────────────────────────────────────────────────────────────── */

/* Two columns of groups, balanced by item count in the Blade so both finish
   at about the same height. */

.sb-faq-grid {
  display: grid;
  align-items: start;
  gap: 2.75rem;
}
@media (min-width: 1024px) {
.sb-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
  }
}
.sb-faq-col > .sb-faq-group + .sb-faq-group {
  margin-top: 2.75rem;
}
.sb-faq-group-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #0a1628;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0a1628;
}
.sb-faq-group-label::before {
  content: '';
  flex: none;
  width: 3px;
  height: 1.05rem;
  border-radius: 2px;
  background: #f97316;
}
.sb-faq {
  border-bottom: 1px solid #ebe7df;
}
.sb-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}
.sb-faq summary::-webkit-details-marker {
  display: none;
}
.sb-faq summary:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 3px;
  border-radius: 6px;
}
.sb-faq-q {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.45;
  color: #0a1628;
  transition: color 0.2s;
}
.sb-faq:hover .sb-faq-q,
.sb-faq[open] .sb-faq-q {
  color: #c2570a;
}
.sb-faq-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  margin-top: 0.05rem;
  border-radius: 999px;
  border: 1px solid #e6e1d7;
  color: #8b8578;
  transition: transform 0.25s, background-color 0.25s, border-color 0.25s, color 0.25s;
}
.sb-faq-icon svg {
  width: 0.78rem;
  height: 0.78rem;
}
.sb-faq[open] .sb-faq-icon {
  transform: rotate(180deg);
  background: #f97316;
  border-color: #f97316;
  color: #fff;
}
.sb-faq-a {
  padding: 0 2.5rem 1.1rem 0;
  font-size: 0.9rem;
  line-height: 1.72;
  color: #4a5568;
  font-weight: 500;
}
/* ── Closing CTA ──────────────────────────────────────────────────────────
   A dark card sitting on the light section, matching the shared
   free-consultation block the rest of the site closes with. */

.sb-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #0a1628;
  padding: 3rem 1.75rem;
  text-align: center;
}
@media (min-width: 640px) {
.sb-cta-card {
    border-radius: 28px;
    padding: 4.5rem 4rem;
  }
}
.sb-cta-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.sb-cta-title {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.16;
  color: #fff;
}
@media (min-width: 640px) {
.sb-cta-title {
    font-size: 2.35rem;
  }
}
.sb-cta-body {
  margin-top: 1.15rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #8896a8;
  font-weight: 500;
}
.sb-cta-actions {
  margin-top: 2.25rem;
}
.sb-fine-print {
  max-width: 940px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.7;
  color: #8b8578;
  font-weight: 500;
}
.hover\:text-\[\#f0a45f\]:hover {
  --tw-text-opacity: 1;
  color: rgb(240 164 95 / var(--tw-text-opacity, 1));
}
.hover\:shadow-\[0_8px_32px_rgba\(212\2c 175\2c 55\2c 0\.28\)\]:hover {
  --tw-shadow: 0 8px 32px rgba(212,175,55,0.28);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 640px) {
.sm\:h-\[3\.25rem\] {
    height: 3.25rem;
  }
.sm\:pt-36 {
    padding-top: 9rem;
  }
.sm\:text-\[3rem\] {
    font-size: 3rem;
  }
}
@media (min-width: 1024px) {
.lg\:grid-cols-\[1\.4fr_1fr\] {
    grid-template-columns: 1.4fr 1fr;
  }
.lg\:grid-cols-\[1\.55fr_1fr\] {
    grid-template-columns: 1.55fr 1fr;
  }
.lg\:border-l {
    border-left-width: 1px;
  }
.lg\:border-t-0 {
    border-top-width: 0px;
  }
.lg\:text-right {
    text-align: right;
  }
}