:root {
      --bg: #ffffff;
      --bg-alt: #f4f6f8;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --hero-bg: #262b33;
      --hero-bg-deep: #1f232a;
      --text: #1f2937;
      --muted: #5b6573;
      --text-on-dark: #edf1f7;
      --muted-on-dark: #c4cbd7;
      --border: #dbe2ea;
      --accent: #2d5bd1;
      --accent-weak: rgba(45, 91, 209, 0.12);
      --accent-strong: #1e47b4;
      --radius: 16px;
      --container: 1120px;
      --header-height: 64px;
      --shadow-soft: 0 6px 24px rgba(17, 24, 39, 0.07);
      --shadow-card: 0 10px 30px rgba(17, 24, 39, 0.08);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Noto Sans JP", "Inter", sans-serif;
      font-weight: 600;
      font-size: 16px;
      line-height: 1.8;
      color: var(--text);
      background: var(--bg);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: var(--accent);
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    a:hover {
      text-decoration-thickness: 2px;
    }

    :focus-visible {
      outline: 3px solid rgba(45, 91, 209, 0.36);
      outline-offset: 2px;
      border-radius: 8px;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }
    }

    .skip-link {
      position: absolute;
      left: 16px;
      top: -48px;
      z-index: 999;
      background: #0f172a;
      color: #fff;
      text-decoration: none;
      border-radius: 10px;
      padding: 10px 14px;
    }

    .skip-link:focus {
      top: 12px;
    }

    .container {
      width: min(var(--container), calc(100% - 32px));
      margin-inline: auto;
    }

    .section {
      padding-block: clamp(48px, 8vw, 92px);
    }

    .section.alt {
      background: var(--bg-alt);
    }

    .strengths-section {
      position: relative;
      overflow: hidden;
      padding-block: clamp(44px, 6vw, 74px);
      background: linear-gradient(145deg, #111a2e 0%, #16243d 46%, #182d4c 100%);
    }

    .strengths-section::before {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 999px;
      top: -220px;
      right: -140px;
      background: radial-gradient(circle, rgba(111, 148, 255, 0.28) 0%, rgba(111, 148, 255, 0) 74%);
      pointer-events: none;
    }

    .strengths-section::after {
      content: "";
      position: absolute;
      width: 480px;
      height: 480px;
      border-radius: 999px;
      left: -180px;
      bottom: -220px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 76%);
      pointer-events: none;
    }

    .strengths-section .container {
      position: relative;
      z-index: 1;
    }

    .strengths-section .kicker {
      color: #b2c1df;
    }

    .strengths-section h2 {
      color: #f2f6ff;
      font-size: clamp(1.9rem, 3.5vw, 2.5rem);
      letter-spacing: 0.015em;
    }

    .strengths-section .lead {
      color: #d7e2f6;
      font-size: clamp(1.06rem, 1.5vw, 1.24rem);
      font-weight: 700;
    }

    .section-intro {
      max-width: 68ch;
      margin-bottom: 20px;
    }

    .kicker {
      margin: 0 0 10px;
      font-size: 0.84rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--muted);
    }

    h1,
    h2,
    h3 {
      margin: 0;
      line-height: 1.35;
      letter-spacing: 0.01em;
    }

    h1 {
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: 800;
      max-width: 18ch;
    }

    h2 {
      font-size: clamp(1.5rem, 2.8vw, 1.9rem);
      font-weight: 800;
      margin-bottom: 14px;
      color: #18212e;
    }

    h3 {
      font-size: clamp(1.12rem, 2vw, 1.34rem);
      font-weight: 700;
      margin-bottom: 8px;
    }

    p {
      margin: 0;
    }

    .lead {
      margin-top: 16px;
      max-width: 62ch;
      font-size: clamp(1rem, 1.3vw, 1.12rem);
      color: #2b3648;
    }

    .muted {
      color: var(--muted);
    }

    .list {
      margin: 14px 0 0;
      padding-left: 1.2rem;
      display: grid;
      gap: 9px;
      max-width: 64ch;
    }

    .list li {
      padding-left: 2px;
    }

    .btn {
      min-height: 46px;
      padding: 0 18px;
      border-radius: 12px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 0.96rem;
      font-weight: 700;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-1px);
      text-decoration: none;
    }

    .btn.primary {
      color: #fff;
      background: var(--accent);
      box-shadow: 0 8px 24px rgba(45, 91, 209, 0.28);
    }

    .btn.primary:hover {
      background: var(--accent-strong);
      box-shadow: 0 10px 26px rgba(45, 91, 209, 0.32);
    }

    .btn.outline {
      color: var(--accent);
      background: #fff;
      border-color: rgba(45, 91, 209, 0.34);
    }

    .btn.ghost {
      color: #243244;
      background: #fff;
      border-color: var(--border);
    }

    .btn.invert {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.34);
      background: rgba(255, 255, 255, 0.06);
    }

    .btn.invert:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 200;
      height: var(--header-height);
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(7px);
    }

    .topbar-inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #111827;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(45, 91, 209, 0.22);
      background: var(--accent-weak);
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.03em;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nav-links a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      color: #334155;
      text-decoration: none;
      font-size: 0.92rem;
      font-weight: 600;
    }

    .nav-links a:hover {
      color: var(--accent);
      text-decoration: underline;
    }

    .hero {
      position: relative;
      background: linear-gradient(150deg, var(--hero-bg) 0%, var(--hero-bg-deep) 68%);
      color: var(--text-on-dark);
      overflow: hidden;
      padding-top: clamp(44px, 6vw, 72px);
      padding-bottom: clamp(56px, 9vw, 102px);
    }

    .hero::before {
      content: "";
      position: absolute;
      width: 360px;
      height: 360px;
      border-radius: 999px;
      top: -150px;
      right: -80px;
      background: radial-gradient(circle, rgba(100, 140, 255, 0.27) 0%, rgba(100, 140, 255, 0) 72%);
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 320px;
      height: 320px;
      border-radius: 999px;
      left: -120px;
      bottom: -180px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 76%);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: clamp(24px, 4vw, 46px);
      align-items: start;
    }

    .hero .kicker {
      color: var(--muted-on-dark);
      margin-bottom: 12px;
    }

    .hero h1 {
      color: #f8fafc;
      max-width: 19ch;
    }

    .hero .lead {
      color: #d4dbe6;
      max-width: 62ch;
    }

    .hero-pills {
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .hero-pill {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.08);
      color: #f4f7fc;
      font-size: 0.86rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
    }

    .trust-row {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      list-style: none;
      padding: 0;
    }

    .trust-row li {
      color: #c4cddd;
      font-size: 0.9rem;
      padding-left: 14px;
      position: relative;
    }

    .trust-row li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.85em;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(180, 203, 255, 0.95);
      transform: translateY(-50%);
    }

    .hero-mock {
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.04);
      padding: 18px;
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
    }

    .mock-title {
      margin-bottom: 14px;
      color: #d8dfeb;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .mock-stack {
      display: grid;
      gap: 12px;
    }

    .mock-card {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(18, 24, 34, 0.82);
      padding: 14px;
    }

    .mock-card strong {
      display: block;
      color: #f3f5f9;
      margin-bottom: 4px;
      font-size: 0.96rem;
    }

    .mock-card p {
      color: #cad2df;
      font-size: 0.9rem;
      line-height: 1.65;
    }

    .card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      padding: clamp(20px, 2.5vw, 28px);
      box-shadow: var(--shadow-soft);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-card);
    }

    .card-grid {
      margin-top: 20px;
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card-grid.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-quiet {
      background: var(--surface-soft);
    }

    .stacked-copy {
      display: grid;
      gap: 14px;
      max-width: 68ch;
    }

    .table-wrap {
      margin-top: 18px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      box-shadow: var(--shadow-soft);
      overflow-x: auto;
    }

    .scroll-hint {
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 600;
    }

    table {
      width: 100%;
      min-width: 780px;
      border-collapse: collapse;
      font-size: 0.96rem;
    }

    th,
    td {
      text-align: left;
      vertical-align: top;
      padding: 13px 14px;
      border-bottom: 1px solid var(--border);
      line-height: 1.7;
    }

    thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f1f4f8;
      color: #283548;
      font-weight: 700;
    }

    th.eff,
    td.eff {
      background: rgba(45, 91, 209, 0.08);
      border-left: 3px solid var(--accent);
    }

    tbody tr:last-child td {
      border-bottom: 0;
    }

    .quote-band {
      margin-top: 18px;
      border-left: 3px solid var(--accent);
      background: rgba(45, 91, 209, 0.05);
      border-radius: 0 10px 10px 0;
      padding: 12px 14px;
      color: #243244;
      font-weight: 700;
      max-width: 72ch;
    }

    .mini-cta {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .split-grid {
      margin-top: 20px;
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .step-grid {
      margin-top: 20px;
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .strength-grid {
      margin-top: 20px;
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .strength-card {
      position: relative;
      overflow: hidden;
      border-color: rgba(255, 255, 255, 0.28);
      background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
      box-shadow: 0 16px 36px rgba(6, 15, 30, 0.26);
      padding: 22px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .strength-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 42px rgba(6, 15, 30, 0.32);
    }

    .strength-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #2d5bd1 0%, #6f94ff 100%);
    }

    .strength-card:nth-child(2)::before {
      background: linear-gradient(90deg, #2154c4 0%, #3c7df2 100%);
    }

    .strength-card:nth-child(3)::before {
      background: linear-gradient(90deg, #1b4ab4 0%, #5688ed 100%);
    }

    .strength-card:nth-child(4)::before {
      background: linear-gradient(90deg, #23469e 0%, #6d97f6 100%);
    }

    .strength-number {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--accent-weak);
      color: var(--accent-strong);
      font-size: 0.88rem;
      font-weight: 800;
      margin-bottom: 10px;
    }

    .strength-card h3 {
      font-size: clamp(1.24rem, 2vw, 1.45rem);
      margin-bottom: 10px;
      color: #17253d;
      line-height: 1.34;
    }

    .strength-card:nth-child(1) h3 {
      color: #163f95;
    }

    .strength-card:nth-child(2) h3 {
      color: #1b4aa9;
    }

    .strength-card:nth-child(3) h3 {
      color: #1a4498;
    }

    .strength-card:nth-child(4) h3 {
      color: #244d9e;
    }

    .strength-lead {
      margin-bottom: 10px;
      font-weight: 800;
      color: #182a49;
      font-size: 1.05rem;
    }

    .strength-card p {
      color: #2a3b5b;
      line-height: 1.72;
      font-size: 0.99rem;
    }

    .strength-card p + p {
      margin-top: 10px;
    }

    .strength-card .list {
      margin-top: 10px;
      gap: 7px;
      font-size: 0.97rem;
      line-height: 1.65;
      max-width: none;
    }

    .strength-card .list li {
      font-weight: 700;
      color: #203554;
    }

    .strength-card .list + p {
      margin-top: 10px;
    }

    .impact {
      font-weight: 800;
      color: #0f3d91;
      font-size: 1.05em;
    }

    .step-label {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--accent-weak);
      color: var(--accent-strong);
      font-size: 0.8rem;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .preview-band {
      border: 1px solid rgba(45, 91, 209, 0.24);
      background: linear-gradient(180deg, #f7f9ff 0%, #f2f5fc 100%);
    }

    .plan-grid {
      margin-top: 20px;
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .plan {
      position: relative;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: 24px;
      box-shadow: var(--shadow-soft);
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .plan.recommended {
      border-color: rgba(45, 91, 209, 0.4);
      box-shadow: 0 12px 34px rgba(45, 91, 209, 0.16);
    }

    .plan-badge {
      position: absolute;
      top: -12px;
      left: 20px;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: #233c8d;
      color: #fff;
      font-size: 0.79rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
    }

    .price {
      margin-top: 8px;
      margin-bottom: 6px;
      font-size: clamp(1.72rem, 3vw, 2.2rem);
      line-height: 1.2;
      font-weight: 800;
      color: #18212e;
    }

    .faq-list {
      margin-top: 20px;
      display: grid;
      gap: 12px;
    }

    details {
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #fff;
      overflow: hidden;
    }

    summary {
      list-style: none;
      cursor: pointer;
      min-height: 56px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: #1f2937;
      font-weight: 700;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "+";
      font-size: 1.2rem;
      color: #475569;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    details[open] summary::after {
      transform: rotate(45deg);
    }

    details > div {
      border-top: 1px solid var(--border);
      padding: 0 18px 18px;
      color: #334155;
    }

    .closing {
      max-width: 820px;
      margin-inline: auto;
      text-align: center;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: clamp(24px, 4vw, 40px);
      background: #fff;
      box-shadow: var(--shadow-soft);
    }

    .closing p {
      max-width: 60ch;
      margin: 10px auto 0;
      color: var(--muted);
    }

    .closing .cta-row {
      justify-content: center;
    }

    .footer {
      border-top: 1px solid var(--border);
      background: #f3f5f8;
      padding-block: 40px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .footer h3 {
      font-size: 1rem;
      margin-bottom: 8px;
      color: #1f2937;
    }

    .footer-links {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
    }

    .footer-links a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      color: #334155;
      text-decoration: none;
    }

    .footer-links a:hover {
      color: var(--accent);
      text-decoration: underline;
    }

    .copyright {
      margin-top: 24px;
      color: #64748b;
      font-size: 0.85rem;
    }

    @media (max-width: 1100px) {
      .card-grid,
      .plan-grid,
      .step-grid,
      .strength-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 960px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-mock {
        display: none;
      }
    }

    @media (max-width: 880px) {
      .nav-links {
        display: none;
      }
    }

    @media (max-width: 740px) {
      .section {
        padding-block: clamp(48px, 12vw, 64px);
      }

      .card-grid,
      .card-grid.two,
      .split-grid,
      .step-grid,
      .strength-grid,
      .plan-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .cta-row .btn,
      .mini-cta .btn,
      .closing .cta-row .btn {
        width: 100%;
      }

      .scroll-hint {
        display: block;
      }
    }

    @media (min-width: 741px) {
      .scroll-hint {
        display: none;
      }
    }

    /* ===== 2026 Conversion Redesign ===== */
    :root {
      --bg: #edf2f8;
      --bg-alt: #e5ecf5;
      --surface: #ffffff;
      --surface-soft: #f4f8fd;
      --hero-bg: #12385f;
      --hero-bg-deep: #0d2f52;
      --text: #1f2b3a;
      --muted: #5f6f84;
      --text-on-dark: #f4f7fb;
      --muted-on-dark: #d2deee;
      --border: #ced8e6;
      --accent: #3f6ea9;
      --accent-weak: rgba(63, 110, 169, 0.15);
      --accent-strong: #2f5f95;
      --alert: #c73732;
      --alert-strong: #a62a25;
      --alert-weak: rgba(199, 55, 50, 0.14);
      --radius: 20px;
      --container: 1140px;
      --header-height: 72px;
      --shadow-soft: 0 10px 30px rgba(29, 33, 42, 0.08);
      --shadow-card: 0 14px 34px rgba(23, 28, 36, 0.12);
    }

    body {
      font-family: "Noto Sans JP", "Inter", sans-serif;
      font-weight: 600;
      color: var(--text);
      background:
        radial-gradient(1200px 520px at -10% -12%, rgba(18, 56, 95, 0.08) 0%, rgba(18, 56, 95, 0) 72%),
        radial-gradient(980px 460px at 110% 8%, rgba(51, 79, 121, 0.1) 0%, rgba(51, 79, 121, 0) 72%),
        var(--bg);
    }

    h1,
    h2,
    h3,
    .brand,
    .btn {
      font-family: "Noto Sans JP", "Inter", sans-serif;
      letter-spacing: 0;
    }

    .container {
      width: min(var(--container), calc(100% - 36px));
    }

    .section {
      padding-block: clamp(58px, 8.5vw, 106px);
    }

    .section.alt {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.28) 100%),
        var(--bg-alt);
      border-top: 1px solid rgba(255, 255, 255, 0.55);
      border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    }

    .kicker {
      color: #6e7481;
      font-size: 0.8rem;
      letter-spacing: 0.11em;
      font-weight: 800;
    }

    h1 {
      font-size: clamp(2.22rem, 4.8vw, 3.66rem);
      line-height: 1.16;
      max-width: 15ch;
    }

    h2 {
      font-size: clamp(1.62rem, 3.2vw, 2.34rem);
      line-height: 1.22;
      color: #18263a;
      margin-bottom: 16px;
    }

    h3 {
      font-size: clamp(1.18rem, 2.1vw, 1.5rem);
      line-height: 1.3;
      margin-bottom: 10px;
      color: #1d2e47;
    }

    .lead {
      color: #2f3e56;
      font-size: clamp(1.04rem, 1.5vw, 1.22rem);
      line-height: 1.74;
      max-width: 60ch;
    }

    .topbar {
      height: var(--header-height);
      background: rgba(255, 255, 255, 0.9);
      border-bottom: 1px solid rgba(20, 39, 65, 0.12);
      box-shadow: 0 6px 22px rgba(15, 24, 35, 0.07);
      backdrop-filter: blur(10px);
    }

    .brand {
      font-size: 1.82rem;
      color: #102742;
      font-weight: 900;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      border-radius: 11px;
      border-color: rgba(18, 56, 95, 0.24);
      background: rgba(18, 56, 95, 0.1);
      color: #143f6c;
      font-size: 0.8rem;
    }

    .nav-links {
      gap: 22px;
    }

    .nav-links a {
      color: #2f3e56;
      font-size: 0.96rem;
      font-weight: 700;
    }

    .nav-links a:hover {
      color: #193e68;
    }

    .btn {
      border-radius: 14px;
      min-height: 48px;
      padding: 0 20px;
      font-size: 0.96rem;
      font-weight: 800;
      letter-spacing: 0.01em;
      transition: transform 0.2s ease, box-shadow 0.24s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn.primary {
      background: linear-gradient(135deg, var(--alert) 0%, var(--alert-strong) 100%);
      color: #fff;
      box-shadow: 0 12px 28px rgba(166, 42, 37, 0.28);
    }

    .btn.primary:hover {
      background: linear-gradient(135deg, #d74742 0%, #962621 100%);
      box-shadow: 0 14px 30px rgba(166, 42, 37, 0.34);
    }

    .btn.outline {
      color: #1f426d;
      background: #fff;
      border-color: rgba(31, 66, 109, 0.26);
    }

    .btn.ghost {
      color: #24415f;
      border-color: rgba(33, 66, 104, 0.2);
      background: #f8fbff;
    }

    .btn.invert {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.1);
    }

    .hero {
      background:
        radial-gradient(560px 320px at 85% 14%, rgba(93, 129, 177, 0.28) 0%, rgba(93, 129, 177, 0) 72%),
        radial-gradient(560px 320px at 0% 86%, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 76%),
        linear-gradient(138deg, var(--hero-bg) 0%, var(--hero-bg-deep) 68%);
      padding-top: clamp(56px, 7vw, 92px);
      padding-bottom: clamp(62px, 8.8vw, 108px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .hero::before,
    .hero::after {
      display: none;
    }

    .hero-grid {
      gap: clamp(26px, 4.2vw, 54px);
      align-items: center;
    }

    .hero .kicker {
      color: #dbe7f8;
    }

    .hero h1 {
      color: #f7fbff;
    }

    .hero .lead {
      color: #dbe5f4;
      max-width: 58ch;
    }

    .hero-pills {
      margin-top: 22px;
      gap: 10px;
    }

    .hero-pill {
      min-height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.26);
      background: rgba(255, 255, 255, 0.12);
      color: #eef4ff;
      font-weight: 700;
    }

    .trust-row {
      margin-top: 24px;
      gap: 9px 16px;
    }

    .trust-row li {
      color: #d4e0f1;
      font-size: 0.92rem;
    }

    .hero-mock {
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(5, 14, 28, 0.32);
      padding: 22px;
      box-shadow: 0 22px 42px rgba(4, 9, 18, 0.33);
    }

    .mock-card {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(14, 23, 40, 0.86);
    }

    .mock-card strong {
      font-size: 1rem;
    }

    .card {
      border: 1px solid #d3dce9;
      border-radius: 20px;
      background: var(--surface);
      padding: clamp(22px, 2.8vw, 30px);
      box-shadow: var(--shadow-soft);
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-card);
    }

    .card-quiet {
      background: var(--surface-soft);
      border-color: #d7e1ee;
    }

    .table-wrap {
      border-radius: 20px;
      border-color: #ccd7e6;
      box-shadow: var(--shadow-soft);
    }

    thead th {
      background: #eef3fa;
      color: #2a3c56;
      font-size: 0.95rem;
      letter-spacing: 0.01em;
    }

    th.eff,
    td.eff {
      background: rgba(63, 110, 169, 0.12);
      border-left: 4px solid #3f6ea9;
    }

    .quote-band {
      border-left: 4px solid #3f6ea9;
      background: rgba(63, 110, 169, 0.12);
      color: #2f425d;
      border-radius: 0 12px 12px 0;
      padding: 14px 16px;
      font-size: 1.01rem;
    }

    .strengths-section {
      background:
        radial-gradient(1000px 420px at 92% -20%, rgba(18, 56, 95, 0.16) 0%, rgba(18, 56, 95, 0) 76%),
        radial-gradient(860px 360px at -10% 108%, rgba(69, 96, 136, 0.15) 0%, rgba(69, 96, 136, 0) 72%),
        linear-gradient(180deg, #f1f5fb 0%, #e8eff8 100%);
      border-top: 1px solid rgba(160, 177, 202, 0.44);
      border-bottom: 1px solid rgba(160, 177, 202, 0.44);
    }

    .strengths-section::before,
    .strengths-section::after {
      display: none;
    }

    .strengths-section .kicker {
      color: #587198;
    }

    .strengths-section h2 {
      color: #162f53;
      max-width: 18ch;
      font-size: clamp(2rem, 4vw, 2.84rem);
      margin-bottom: 12px;
    }

    .strengths-section .lead {
      color: #334b68;
      max-width: 64ch;
      font-size: clamp(1.04rem, 1.55vw, 1.24rem);
    }

    .strength-overview-grid {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .strength-overview-card {
      text-decoration: none;
      color: #173761;
      border: 1px solid #ced8e6;
      border-radius: 18px;
      background: #fff;
      padding: 14px;
      box-shadow: 0 8px 22px rgba(17, 29, 42, 0.08);
      display: grid;
      gap: 8px;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .strength-overview-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(17, 29, 42, 0.12);
      border-color: #aebfd7;
      text-decoration: none;
    }

    .strength-overview-no {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(18, 56, 95, 0.1);
      color: #163a63;
      font-size: 0.8rem;
      font-weight: 800;
      border: 1px solid rgba(18, 56, 95, 0.15);
    }

    .strength-overview-card h3 {
      margin: 0;
      font-size: 1.02rem;
      line-height: 1.34;
      color: #173862;
    }

    .strength-overview-hook {
      margin: 0;
      color: #465871;
      font-size: 0.9rem;
      line-height: 1.52;
      font-weight: 700;
    }

    .strength-details {
      margin-top: 26px;
      display: grid;
      gap: 18px;
    }

    .strength-detail {
      scroll-margin-top: calc(var(--header-height) + 18px);
      border: 1px solid #cfd8e5;
      border-radius: 22px;
      background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
      box-shadow: 0 14px 32px rgba(17, 28, 40, 0.1);
      padding: clamp(22px, 2.8vw, 32px);
      position: relative;
      overflow: hidden;
    }

    .strength-detail::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 6px;
      background: linear-gradient(180deg, #4f80bb 0%, #365f94 100%);
    }

    .strength-detail-head {
      display: grid;
      gap: 10px;
      margin-bottom: 10px;
    }

    .strength-detail-no {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 30px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(18, 56, 95, 0.2);
      background: rgba(18, 56, 95, 0.1);
      color: #17385f;
      font-size: 0.86rem;
      font-weight: 800;
    }

    .strength-detail h3 {
      color: #16325a;
      font-size: clamp(1.38rem, 2.4vw, 1.92rem);
      line-height: 1.26;
      margin: 0;
    }

    .strength-detail-lead {
      margin: 0 0 10px;
      font-weight: 900;
      color: #193960;
      font-size: 1.08rem;
      line-height: 1.74;
    }

    .strength-detail p {
      color: #34455f;
      font-size: 1rem;
      line-height: 1.76;
      margin: 0;
    }

    .strength-detail p + p {
      margin-top: 10px;
    }

    .strength-detail .list {
      margin-top: 10px;
      margin-bottom: 4px;
      max-width: none;
      gap: 7px;
    }

    .strength-detail .list li {
      font-weight: 700;
      color: #223b5f;
      font-size: 1rem;
    }

    .strength-detail strong {
      color: var(--alert);
      font-weight: 900;
    }

    .strength-detail-lead strong,
    .strength-overview-hook strong {
      color: var(--alert);
    }

    .strength-detail .list li::marker {
      color: var(--alert);
    }

    .strengths-cta {
      margin-top: 22px;
      border: 1px dashed rgba(18, 56, 95, 0.25);
      border-radius: 16px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.66);
      display: grid;
      gap: 8px;
      justify-items: start;
    }

    .strengths-cta p {
      margin: 0;
      color: #2a4262;
      font-weight: 800;
      font-size: 0.95rem;
    }

    .preview-band {
      border-color: rgba(63, 110, 169, 0.4);
      background: linear-gradient(180deg, #f3f7fd 0%, #eaf1fa 100%);
    }

    .step-label {
      background: rgba(18, 56, 95, 0.1);
      color: #113d69;
    }

    .plan {
      border-color: #d2dce9;
      border-radius: 20px;
      box-shadow: var(--shadow-soft);
      background: #fff;
    }

    .plan .list {
      max-width: none;
    }

    .plan.recommended {
      border-color: rgba(199, 55, 50, 0.58);
      box-shadow: 0 16px 34px rgba(166, 42, 37, 0.22);
      background: linear-gradient(180deg, #ffffff 0%, #f6efef 100%);
    }

    .plan-badge {
      background: linear-gradient(135deg, var(--alert) 0%, var(--alert-strong) 100%);
      color: #fff;
      font-weight: 800;
    }

    #pain .list li::marker {
      color: var(--alert);
    }

    #pain .quote-band {
      border-left-color: var(--alert);
      background: var(--alert-weak);
    }

    .price {
      color: #173258;
    }

    details {
      border-color: #ddd2c1;
      border-radius: 16px;
      box-shadow: 0 7px 20px rgba(17, 27, 37, 0.05);
    }

    summary {
      color: #1d304b;
    }

    .closing {
      border: 1px solid rgba(18, 56, 95, 0.22);
      background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
      box-shadow: 0 14px 34px rgba(15, 35, 57, 0.1);
    }

    .closing h2 {
      color: #173761;
    }

    .closing p {
      color: #415473;
    }

    .footer {
      background: #102842;
      border-top: 0;
      padding-block: 44px;
    }

    .footer h3 {
      color: #f4f7fc;
    }

    .footer-links a {
      color: #d4dfef;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

    .copyright {
      color: #a9b8ce;
    }

    @media (max-width: 980px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-mock {
        display: none;
      }

      .strength-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .plan-grid,
      .step-grid,
      .strength-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .topbar {
        height: 66px;
      }

      .container {
        width: min(var(--container), calc(100% - 28px));
      }

      .section {
        padding-block: clamp(50px, 12vw, 70px);
      }

      .strength-overview-grid,
      .strength-grid,
      .card-grid,
      .card-grid.two,
      .split-grid,
      .plan-grid,
      .step-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .btn {
        min-height: 46px;
      }

      .hero h1 {
        max-width: 100%;
      }
    }

    /* ===== 2026 Conversion Redesign v4 (Anti-Monotone) ===== */
    body {
      background:
        radial-gradient(1200px 420px at -8% -12%, rgba(18, 56, 95, 0.12) 0%, rgba(18, 56, 95, 0) 70%),
        radial-gradient(960px 420px at 108% 4%, rgba(58, 83, 117, 0.14) 0%, rgba(58, 83, 117, 0) 70%),
        linear-gradient(180deg, #eef3f9 0%, #e8eff8 42%, #edf2f8 100%);
    }

    .section {
      position: relative;
      overflow: clip;
    }

    .section > .container {
      position: relative;
      z-index: 1;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(56, 84, 122, 0.2);
      background: rgba(255, 255, 255, 0.68);
      color: #486585;
      font-size: 0.76rem;
      letter-spacing: 0.1em;
    }

    .section-intro h2 {
      text-wrap: balance;
      letter-spacing: 0.01em;
    }

    .topbar {
      background: rgba(248, 251, 255, 0.9);
      border-bottom: 1px solid rgba(28, 52, 82, 0.14);
      box-shadow: 0 8px 26px rgba(19, 30, 45, 0.07);
    }

    .topbar::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(41, 71, 108, 0.26) 48%, rgba(0, 0, 0, 0) 100%);
      pointer-events: none;
    }

    .nav-links a {
      position: relative;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 9px;
      height: 2px;
      transform: scaleX(0);
      transform-origin: center;
      background: linear-gradient(90deg, transparent 0%, rgba(199, 55, 50, 0.9) 50%, transparent 100%);
      transition: transform 0.2s ease;
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
    }

    .hero {
      background:
        radial-gradient(620px 340px at 88% 12%, rgba(96, 130, 180, 0.32) 0%, rgba(96, 130, 180, 0) 72%),
        radial-gradient(520px 320px at 12% 88%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 74%),
        linear-gradient(142deg, #0f2e4f 0%, #153d67 52%, #0f2c4a 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .hero .kicker {
      border-color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.08);
      color: #d6e4f8;
    }

    .hero-pills .hero-pill {
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }

    .card {
      border: 1px solid #d0d9e6;
      border-radius: 22px;
      box-shadow: 0 12px 30px rgba(17, 28, 40, 0.09);
    }

    #pain {
      background: linear-gradient(180deg, #f0f5fc 0%, #e8eff8 100%);
    }

    #pain::before {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      border-radius: 999px;
      left: -180px;
      top: -220px;
      background: radial-gradient(circle, rgba(72, 112, 165, 0.18) 0%, rgba(72, 112, 165, 0) 74%);
      pointer-events: none;
    }

    #pain .card:first-child {
      border-top: 4px solid #3f6ea9;
    }

    #pain .card:last-child {
      border-top: 4px solid #c73732;
    }

    #direction {
      background:
        radial-gradient(600px 260px at 100% 10%, rgba(56, 87, 129, 0.09) 0%, rgba(56, 87, 129, 0) 72%),
        #f8fbff;
    }

    #direction .card {
      background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    }

    #compare {
      background:
        radial-gradient(820px 280px at -6% 96%, rgba(57, 89, 131, 0.12) 0%, rgba(57, 89, 131, 0) 74%),
        linear-gradient(180deg, #ebf2fb 0%, #e4ecf6 100%);
    }

    #compare .table-wrap {
      background: #fdfefe;
      border: 1px solid #c8d5e6;
      box-shadow: 0 16px 34px rgba(19, 33, 52, 0.12);
    }

    #compare .quote-band {
      font-size: 1.06rem;
      font-weight: 800;
    }

    #strengths .strength-overview-card {
      min-height: 168px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    #strengths .strength-overview-card h3 {
      font-size: 1.06rem;
    }

    #strengths .strength-detail:nth-child(odd) {
      background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
    }

    #strengths .strength-detail:nth-child(even) {
      background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
    }

    #strengths .strength-detail:nth-child(even)::before {
      background: linear-gradient(180deg, #3f6ea9 0%, #2e5a90 100%);
    }

    #strengths .strength-detail-lead {
      font-size: 1.12rem;
    }

    #strengths .strengths-cta {
      border: 1px solid rgba(48, 85, 131, 0.2);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 247, 255, 0.94) 100%);
      box-shadow: 0 10px 24px rgba(17, 30, 45, 0.08);
    }

    #normalization {
      background:
        radial-gradient(560px 220px at 12% 0%, rgba(72, 103, 146, 0.1) 0%, rgba(72, 103, 146, 0) 74%),
        #f7fbff;
    }

    #normalization .section-intro {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #d1dbe8;
      border-radius: 18px;
      padding: 20px;
      box-shadow: 0 10px 24px rgba(17, 30, 45, 0.08);
    }

    #preview-cta .preview-band {
      border-width: 2px;
      box-shadow: 0 12px 28px rgba(30, 52, 80, 0.1);
    }

    #preview-cta .preview-band h3 {
      font-size: clamp(1.24rem, 2vw, 1.6rem);
    }

    #learning {
      background:
        radial-gradient(820px 280px at 100% 100%, rgba(56, 84, 118, 0.12) 0%, rgba(56, 84, 118, 0) 74%),
        linear-gradient(180deg, #e9f0fa 0%, #e2eaf5 100%);
    }

    #learning .step-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    #learning .card {
      border-top: 4px solid #3f6ea9;
      padding: 20px;
      min-height: 100%;
    }

    #learning .step-label {
      background: rgba(63, 110, 169, 0.14);
      border: 1px solid rgba(63, 110, 169, 0.22);
      color: #24466f;
      font-size: 0.76rem;
    }

    #pricing {
      background:
        radial-gradient(700px 280px at 4% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(145deg, #102d4c 0%, #143d67 58%, #112f4d 100%);
      color: #e9f1fb;
    }

    #pricing .kicker {
      color: #c7d7ea;
      border-color: rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.08);
    }

    #pricing h2 {
      color: #f5f9ff;
    }

    #pricing .lead {
      color: #d5e1f1;
    }

    #pricing .plan {
      border-color: rgba(255, 255, 255, 0.24);
      background: linear-gradient(180deg, #ffffff 0%, #f3f7fe 100%);
    }

    #pricing .plan.recommended {
      border-color: rgba(199, 55, 50, 0.75);
      box-shadow: 0 18px 36px rgba(126, 24, 21, 0.3);
      background: linear-gradient(180deg, #fffefe 0%, #f8f0f0 100%);
    }

    #faq {
      background: linear-gradient(180deg, #f5f9ff 0%, #edf3fb 100%);
    }

    #faq details {
      border: 1px solid #cdd9e8;
      border-radius: 16px;
      box-shadow: 0 10px 22px rgba(15, 26, 40, 0.07);
    }

    #faq details[open] {
      border-color: #aac0db;
      box-shadow: 0 12px 24px rgba(14, 31, 49, 0.1);
    }

    #final-cta {
      background:
        radial-gradient(620px 220px at 92% 6%, rgba(60, 97, 148, 0.12) 0%, rgba(60, 97, 148, 0) 72%),
        linear-gradient(180deg, #eaf1fb 0%, #e3ebf7 100%);
    }

    #final-cta .closing {
      border: 1px solid rgba(34, 66, 104, 0.26);
      border-radius: 22px;
      background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
      box-shadow: 0 16px 36px rgba(17, 32, 52, 0.13);
    }

    #final-cta .closing h2 {
      font-size: clamp(1.8rem, 3vw, 2.3rem);
    }

    .footer {
      background: linear-gradient(180deg, #0d2742 0%, #0a2136 100%);
    }

    @media (max-width: 1200px) {
      #learning .step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 980px) {
      #strengths .strength-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #learning .step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .kicker {
        min-height: 26px;
        font-size: 0.72rem;
      }

      #strengths .strength-overview-grid,
      #learning .step-grid {
        grid-template-columns: 1fr;
      }

      #normalization .section-intro {
        padding: 16px;
      }
    }

    /* ===== 2026 Conversion Redesign v5 (Sales Rhythm Refresh) ===== */
    main strong {
      color: var(--alert);
      font-weight: 900;
    }

    .section {
      isolation: isolate;
    }

    .section + .section {
      border-top: 1px solid rgba(34, 56, 86, 0.08);
    }

    .section-intro {
      margin-bottom: clamp(22px, 3vw, 32px);
    }

    .section-intro h2 {
      line-height: 1.18;
      letter-spacing: 0.005em;
    }

    .section-intro .lead {
      font-weight: 700;
    }

    .card {
      position: relative;
      overflow: hidden;
    }

    .card::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, rgba(63, 110, 169, 0.88) 0%, rgba(63, 110, 169, 0.14) 100%);
      pointer-events: none;
    }

    .card-quiet::after {
      background: linear-gradient(90deg, rgba(199, 55, 50, 0.82) 0%, rgba(199, 55, 50, 0.14) 100%);
    }

    #pain .card-grid {
      align-items: stretch;
      gap: 20px;
    }

    #pain .card h3 {
      font-size: clamp(1.18rem, 2vw, 1.42rem);
    }

    #pain .quote-band {
      font-size: 1.08rem;
      letter-spacing: 0.01em;
      font-weight: 900;
    }

    #direction .split-grid {
      gap: 20px;
    }

    #direction .split-grid .card:first-child {
      background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    }

    #direction .split-grid .card:last-child {
      background: linear-gradient(180deg, #ffffff 0%, #fff6f6 100%);
    }

    #direction .split-grid .card:last-child .list li::marker {
      color: var(--alert);
    }

    #compare .mini-cta {
      margin-top: 24px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(40, 72, 112, 0.22);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(242, 248, 255, 0.9) 100%);
      box-shadow: 0 10px 24px rgba(15, 30, 46, 0.08);
    }

    #compare .mini-cta .btn.primary {
      min-width: 272px;
    }

    #strengths {
      border-top: 0;
      border-bottom: 0;
    }

    #strengths .section-intro {
      max-width: 80ch;
    }

    #strengths .section-intro h2 {
      max-width: 16ch;
    }

    #strengths .strength-overview-grid {
      gap: 14px;
      margin-top: 26px;
    }

    #strengths .strength-overview-card {
      min-height: 186px;
      border-radius: 18px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 14px 30px rgba(15, 28, 45, 0.11);
    }

    #strengths .strength-overview-card::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 5px;
      background: linear-gradient(90deg, #3f6ea9 0%, #6f94c2 100%);
      pointer-events: none;
    }

    #strengths .strength-overview-card:nth-child(even)::before {
      background: linear-gradient(90deg, var(--alert) 0%, #df7a76 100%);
    }

    #strengths .strength-overview-card h3 {
      font-size: 1.1rem;
      line-height: 1.3;
    }

    #strengths .strength-overview-hook {
      font-size: 0.92rem;
      line-height: 1.58;
    }

    #strengths .strength-details {
      margin-top: 24px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      align-items: start;
    }

    #strengths .strength-detail {
      min-height: 100%;
      border-radius: 20px;
      box-shadow: 0 16px 34px rgba(13, 26, 42, 0.12);
      padding: clamp(22px, 2.2vw, 30px);
    }

    #strengths .strength-detail::before {
      width: 8px;
      background: linear-gradient(180deg, #3f6ea9 0%, #2f5d92 100%);
    }

    #strengths .strength-detail:nth-child(even)::before {
      background: linear-gradient(180deg, var(--alert) 0%, var(--alert-strong) 100%);
    }

    #strengths .strength-detail-no {
      font-size: 0.84rem;
      letter-spacing: 0.02em;
    }

    #strengths .strength-detail h3 {
      font-size: clamp(1.42rem, 2vw, 1.84rem);
    }

    #strengths .strength-detail-lead {
      font-size: 1.13rem;
      line-height: 1.68;
      margin-bottom: 12px;
    }

    #strengths .strengths-cta {
      margin-top: 24px;
      border: 1px solid rgba(63, 110, 169, 0.28);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 250, 255, 0.95) 100%);
      box-shadow: 0 14px 28px rgba(17, 31, 46, 0.1);
      padding: 16px;
      position: relative;
      overflow: hidden;
    }

    #strengths .strengths-cta::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, rgba(63, 110, 169, 0.9) 0%, rgba(199, 55, 50, 0.88) 100%);
      pointer-events: none;
    }

    #strengths .strengths-cta p {
      font-size: 0.98rem;
      color: #263e5d;
      font-weight: 800;
    }

    #normalization .section-intro {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
      border-radius: 18px;
      border: 1px solid #cfd9e6;
      box-shadow: 0 12px 28px rgba(16, 30, 46, 0.09);
      padding: 24px;
    }

    #normalization .section-intro::before {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 0;
      height: 4px;
      border-radius: 0 0 6px 6px;
      background: linear-gradient(90deg, #3f6ea9 0%, var(--alert) 100%);
      pointer-events: none;
    }

    #preview-cta .preview-band {
      border-radius: 20px;
      border-width: 2px;
      background:
        radial-gradient(460px 180px at 96% 10%, rgba(63, 110, 169, 0.15) 0%, rgba(63, 110, 169, 0) 74%),
        linear-gradient(180deg, #f7faff 0%, #edf4fe 100%);
      box-shadow: 0 16px 30px rgba(18, 35, 54, 0.1);
    }

    #preview-cta .preview-band .list li::marker {
      color: var(--alert);
    }

    #preview-cta .preview-band .muted {
      margin-top: 12px;
      font-size: 0.98rem;
      line-height: 1.72;
      color: #36506f;
    }

    #learning .section-intro {
      max-width: 78ch;
    }

    #learning .step-grid {
      gap: 16px;
    }

    #learning .step-grid .card {
      border-radius: 18px;
      padding: 20px;
      box-shadow: 0 12px 26px rgba(16, 29, 45, 0.1);
    }

    #learning .step-grid .card:nth-child(1)::after {
      background: linear-gradient(90deg, #3f6ea9 0%, #84a6cf 100%);
    }

    #learning .step-grid .card:nth-child(2)::after {
      background: linear-gradient(90deg, #3b6a9f 0%, #6b93c2 100%);
    }

    #learning .step-grid .card:nth-child(3)::after {
      background: linear-gradient(90deg, #2f5e93 0%, #5f86b3 100%);
    }

    #learning .step-grid .card:nth-child(4)::after {
      background: linear-gradient(90deg, var(--alert) 0%, #db726d 100%);
    }

    #learning .step-grid h3 {
      font-size: clamp(1.14rem, 1.8vw, 1.3rem);
    }

    #pricing .plan-grid {
      align-items: stretch;
      gap: 20px;
    }

    #pricing .plan {
      display: flex;
      flex-direction: column;
      box-shadow: 0 14px 28px rgba(13, 25, 40, 0.22);
      border-radius: 18px;
    }

    #pricing .plan::after {
      height: 5px;
      background: linear-gradient(90deg, rgba(63, 110, 169, 0.95) 0%, rgba(63, 110, 169, 0.3) 100%);
    }

    #pricing .plan.recommended::after {
      background: linear-gradient(90deg, rgba(199, 55, 50, 0.98) 0%, rgba(199, 55, 50, 0.42) 100%);
    }

    #pricing .plan .cta-row {
      margin-top: auto;
      padding-top: 6px;
    }

    #faq .faq-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    #faq details {
      min-height: 100%;
    }

    #final-cta .closing {
      position: relative;
      overflow: hidden;
    }

    #final-cta .closing::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 5px;
      background: linear-gradient(90deg, #3f6ea9 0%, var(--alert) 100%);
      pointer-events: none;
    }

    #final-cta .closing p {
      font-size: 1.06rem;
      line-height: 1.8;
    }

    @media (max-width: 1180px) {
      #strengths .strength-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #strengths .strength-details {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 980px) {
      #compare .mini-cta .btn.primary {
        min-width: 0;
      }

      #faq .faq-list {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .section-intro .lead {
        font-size: 1rem;
      }

      #normalization .section-intro {
        padding: 18px;
      }

      #strengths .strength-overview-card {
        min-height: auto;
      }
    }

    /* ===== 2026 Conversion Redesign v6 (Strengths Vertical Sales Layout) ===== */
    #strengths {
      background:
        radial-gradient(880px 340px at 104% 4%, rgba(59, 93, 140, 0.16) 0%, rgba(59, 93, 140, 0) 74%),
        radial-gradient(860px 300px at -10% 100%, rgba(199, 55, 50, 0.08) 0%, rgba(199, 55, 50, 0) 76%),
        linear-gradient(180deg, #eef4fc 0%, #e7eff9 100%);
      border-top: 1px solid rgba(36, 61, 93, 0.16);
      border-bottom: 1px solid rgba(36, 61, 93, 0.16);
    }

    #strengths .section-intro {
      max-width: 86ch;
      margin-bottom: 28px;
    }

    #strengths .section-intro .kicker {
      background: rgba(16, 45, 78, 0.9);
      border-color: rgba(16, 45, 78, 0.8);
      color: #eef4ff;
    }

    #strengths .section-intro h2 {
      max-width: none;
      font-size: clamp(2.12rem, 4vw, 2.96rem);
      color: #102d4f;
      line-height: 1.14;
      text-wrap: balance;
      white-space: nowrap;
    }

    #strengths .section-intro .lead {
      max-width: 64ch;
      color: #2f4666;
      font-size: clamp(1.06rem, 1.55vw, 1.24rem);
      line-height: 1.74;
      font-weight: 700;
    }

    #strengths .strength-overview-grid {
      margin-top: 20px;
      margin-bottom: 24px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      max-width: 960px;
    }

    #strengths .strength-overview-card {
      border: 1px solid #bfcee1;
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #f6fafe 100%);
      min-height: auto;
      padding: 14px 16px;
      box-shadow: 0 10px 22px rgba(16, 29, 44, 0.08);
      position: relative;
      display: grid;
      gap: 6px;
    }

    #strengths .strength-overview-card::before {
      height: 4px;
      background: linear-gradient(90deg, #3f6ea9 0%, #789bc6 100%);
    }

    #strengths .strength-overview-card:nth-child(even)::before {
      background: linear-gradient(90deg, #3f6ea9 0%, var(--alert) 100%);
    }

    #strengths .strength-overview-no {
      background: rgba(16, 45, 78, 0.1);
      border: 1px solid rgba(16, 45, 78, 0.2);
      color: #13365d;
      font-size: 0.78rem;
      font-weight: 800;
    }

    #strengths .strength-overview-card h3 {
      font-size: clamp(1.16rem, 1.9vw, 1.36rem);
      line-height: 1.3;
      color: #123258;
      margin-right: 76px;
    }

    #strengths .strength-overview-hook {
      font-size: 0.94rem;
      line-height: 1.6;
      color: #3f516b;
      font-weight: 700;
    }

    #strengths .strength-details {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      max-width: 960px;
    }

    #strengths .strength-detail {
      border: 1px solid #b8c9de;
      border-radius: 24px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      box-shadow: 0 16px 34px rgba(12, 26, 42, 0.12);
      padding: 0;
      position: relative;
      overflow: hidden;
    }

    #strengths .strength-detail::before {
      display: none;
    }

    #strengths .strength-detail::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 24px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
      pointer-events: none;
    }

    #strengths .strength-detail-head {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 12px;
      margin-bottom: 0;
      padding: 18px clamp(20px, 2.2vw, 28px) 16px;
      background: linear-gradient(132deg, #0f3359 0%, #1c4d7d 62%, #123c67 100%);
      border-bottom: 1px solid rgba(11, 29, 50, 0.25);
      position: relative;
    }

    #strengths .strength-detail-head::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 78%);
      pointer-events: none;
    }

    #strengths .strength-detail:nth-child(2) .strength-detail-head,
    #strengths .strength-detail:nth-child(4) .strength-detail-head {
      background: linear-gradient(132deg, #153a62 0%, #7c2430 60%, #621a24 100%);
    }

    #strengths .strength-detail-no {
      min-height: 32px;
      padding: 0 12px;
      font-size: 0.82rem;
      font-weight: 800;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.18);
      color: #eef5ff;
    }

    #strengths .strength-detail h3 {
      font-size: clamp(1.54rem, 2.3vw, 2rem);
      line-height: 1.24;
      color: #f4f8ff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
      margin: 0;
    }

    #strengths .strength-detail-lead {
      font-size: clamp(1.1rem, 1.55vw, 1.24rem);
      line-height: 1.72;
      font-weight: 900;
      color: #163b64;
      margin: 0 0 12px;
      padding-top: 16px;
    }

    #strengths .strength-detail > p,
    #strengths .strength-detail > ul {
      padding-inline: clamp(20px, 2.2vw, 28px);
    }

    #strengths .strength-detail > :last-child {
      padding-bottom: clamp(20px, 2.4vw, 28px);
    }

    #strengths .strength-detail p {
      color: #324867;
      font-size: 1.04rem;
      line-height: 1.78;
    }

    #strengths .strength-detail .list {
      margin-top: 10px;
      margin-bottom: 8px;
      padding-left: calc(1.25rem + clamp(20px, 2.2vw, 28px));
      padding-right: clamp(20px, 2.2vw, 28px);
      gap: 8px;
    }

    #strengths .strength-detail .list li {
      font-size: 1.03rem;
      font-weight: 800;
      color: #203c63;
      line-height: 1.66;
    }

    #strengths .strength-detail .list li::marker {
      color: var(--alert);
    }

    #strengths .strengths-cta {
      margin-top: 24px;
      max-width: 960px;
      border: 1px solid rgba(24, 62, 108, 0.58);
      border-radius: 22px;
      background:
        radial-gradient(520px 260px at 92% -18%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(140deg, #102e53 0%, #18467b 56%, #245ca0 100%);
      box-shadow: 0 22px 44px rgba(8, 21, 40, 0.33);
      padding: clamp(18px, 2.4vw, 26px);
      position: relative;
      overflow: hidden;
    }

    #strengths .strengths-cta::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 6px;
      background: linear-gradient(90deg, #ffb37f 0%, #ffe0c3 22%, #ffffff 46%, #ff9f91 100%);
      pointer-events: none;
    }

    #strengths .strengths-cta::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 999px;
      right: -120px;
      bottom: -120px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 74%);
      pointer-events: none;
    }

    #strengths .strengths-cta p.strengths-cta-label {
      margin: 0;
      min-height: 30px;
      width: fit-content;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.14);
      color: #f5fbff;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
    }

    #strengths .strengths-cta p.strengths-cta-copy {
      margin: 10px 0 0;
      max-width: 46ch;
      color: #f4f8ff;
      font-size: clamp(1.08rem, 1.52vw, 1.28rem);
      line-height: 1.62;
      font-weight: 900;
      text-wrap: pretty;
      position: relative;
      z-index: 1;
    }

    #strengths .strengths-cta p.strengths-cta-copy span {
      display: block;
      margin-top: 2px;
      color: #d7e8ff;
      font-size: clamp(1rem, 1.3vw, 1.08rem);
      font-weight: 700;
    }

    #strengths .strengths-cta .cta-row {
      margin-top: 16px;
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    #strengths .strengths-cta .btn.primary {
      box-shadow: 0 14px 30px rgba(126, 26, 24, 0.42);
    }

    #strengths .strengths-cta .btn.outline {
      border-color: rgba(255, 255, 255, 0.46);
      background: rgba(255, 255, 255, 0.1);
      color: #f6f9ff;
    }

    #strengths .strengths-cta .btn.outline:hover {
      background: rgba(255, 255, 255, 0.16);
    }

    @media (max-width: 980px) {
      #strengths .strength-overview-card h3 {
        margin-right: 0;
      }
    }

    @media (max-width: 760px) {
      #strengths .section-intro h2 {
        font-size: clamp(1.8rem, 7vw, 2.18rem);
        white-space: normal;
      }

      #strengths .strengths-cta {
        border-radius: 18px;
        padding: 16px;
      }

      #strengths .strengths-cta p.strengths-cta-label {
        font-size: 0.72rem;
        letter-spacing: 0.06em;
      }

      #strengths .strengths-cta p.strengths-cta-copy {
        max-width: none;
        font-size: 1.03rem;
      }

      #strengths .strengths-cta p.strengths-cta-copy span {
        font-size: 0.94rem;
      }

      #strengths .strength-detail {
        border-radius: 20px;
        padding: 0;
      }

      #strengths .strength-detail-head {
        padding: 16px 16px 14px;
      }

      #strengths .strength-detail h3 {
        font-size: clamp(1.28rem, 5.7vw, 1.56rem);
      }

      #strengths .strength-detail > p,
      #strengths .strength-detail > ul {
        padding-inline: 16px;
      }

      #strengths .strength-detail > :last-child {
        padding-bottom: 18px;
      }

      #strengths .strength-detail .list {
        padding-left: calc(1.15rem + 16px);
        padding-right: 16px;
      }

      #strengths .strength-detail p,
      #strengths .strength-detail .list li {
        font-size: 0.99rem;
      }
    }

    /* ===== 2026 Conversion Redesign v7 (Compare Relaunch) ===== */
    #compare {
      background:
        radial-gradient(840px 320px at 104% 2%, rgba(63, 110, 169, 0.18) 0%, rgba(63, 110, 169, 0) 74%),
        radial-gradient(760px 300px at -12% 96%, rgba(199, 55, 50, 0.08) 0%, rgba(199, 55, 50, 0) 76%),
        linear-gradient(180deg, #edf3fb 0%, #e4ecf7 100%);
    }

    #compare .section-intro {
      max-width: 80ch;
      margin-bottom: 22px;
    }

    #compare .section-intro h2 {
      font-size: clamp(2.08rem, 4vw, 2.9rem);
      line-height: 1.15;
      color: #0f2f54;
    }

    #compare .section-intro .lead {
      font-size: clamp(1.08rem, 1.7vw, 1.26rem);
      color: #233f62;
      font-weight: 800;
    }

    #compare .compare-snapshot {
      display: grid;
      grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
      gap: 18px;
      margin: 18px 0 22px;
      align-items: stretch;
    }

    #compare .compare-side {
      border: 1px solid #c3d1e3;
      border-radius: 20px;
      padding: 18px 18px 16px;
      position: relative;
      overflow: hidden;
      display: grid;
      gap: 10px;
    }

    #compare .compare-side::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 5px;
      background: linear-gradient(90deg, #6f88aa 0%, #8ea5c1 100%);
      pointer-events: none;
    }

    #compare .compare-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      font-weight: 900;
      text-transform: uppercase;
    }

    #compare .compare-side h3 {
      margin: 0;
      font-size: clamp(1.2rem, 2vw, 1.46rem);
      color: #1b3556;
      line-height: 1.3;
    }

    #compare .compare-mini-list {
      margin-top: 2px;
      margin-bottom: 0;
      max-width: none;
      gap: 8px;
      padding-left: 1.1rem;
    }

    #compare .compare-mini-list li {
      font-size: 0.97rem;
      font-weight: 700;
      line-height: 1.58;
    }

    #compare .compare-side-old {
      border-color: #b8c9dd;
      background: linear-gradient(180deg, #f8fbff 0%, #edf3fb 100%);
      box-shadow: 0 10px 22px rgba(16, 30, 46, 0.09);
    }

    #compare .compare-side-old .compare-chip {
      border: 1px solid rgba(79, 109, 144, 0.3);
      background: rgba(228, 238, 249, 0.8);
      color: #446282;
    }

    #compare .compare-side-old h3 {
      color: #334f6d;
      font-weight: 800;
    }

    #compare .compare-side-old .compare-mini-list li {
      color: #3f5672;
    }

    #compare .compare-side-old .compare-mini-list li::marker {
      color: #6f859f;
    }

    #compare .compare-side-eff {
      border-color: rgba(44, 88, 138, 0.54);
      background:
        radial-gradient(380px 140px at 96% -14%, rgba(246, 141, 85, 0.3) 0%, rgba(246, 141, 85, 0) 72%),
        linear-gradient(160deg, #163f6c 0%, #1a4978 52%, #1f5a93 100%);
      box-shadow: 0 18px 34px rgba(14, 33, 56, 0.24);
      transform: translateY(-6px);
    }

    #compare .compare-side-eff .compare-chip {
      border: 1px solid rgba(255, 208, 173, 0.62);
      background: rgba(255, 231, 213, 0.16);
      color: #ffe0c7;
    }

    #compare .compare-side-eff::before {
      background: linear-gradient(90deg, #7fb4ff 0%, #ff9a61 100%);
    }

    #compare .compare-side-eff h3 {
      color: #f3f8ff;
      font-size: clamp(1.3rem, 2.25vw, 1.66rem);
      font-weight: 900;
      letter-spacing: 0.015em;
    }

    #compare .compare-side-eff .compare-mini-list li {
      color: #e7f0ff;
    }

    #compare .compare-side-eff .compare-mini-list li::marker {
      color: #ffbc87;
    }

    #compare .compare-prelead {
      margin: 24px auto 28px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      color: #264462;
      font-size: clamp(1rem, 1.4vw, 1.08rem);
      line-height: 1.72;
      font-weight: 700;
      text-align: center;
      max-width: 72ch;
    }

    #compare .compare-prelead .emphasis {
      color: #123a66;
      font-weight: 900;
    }

    #compare .table-wrap {
      margin-top: 10px;
      border: 1px solid #b8cadd;
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 16px 32px rgba(14, 29, 47, 0.12);
      overflow: auto;
    }

    #compare .compare-table-toggle {
      margin-top: 12px;
      border: 1px solid #b8cadd;
      border-radius: 20px;
      background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
      box-shadow: 0 14px 30px rgba(14, 29, 47, 0.12);
      overflow: hidden;
      position: relative;
    }

    #compare .compare-table-toggle::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, #3f6ea9 0%, #6e96c7 55%, #9ab8dc 100%);
      pointer-events: none;
    }

    #compare .compare-table-toggle > summary {
      list-style: none;
      cursor: pointer;
      min-height: 72px;
      padding: 14px 58px 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      text-align: center;
      color: #16385f;
      font-weight: 900;
      background: linear-gradient(180deg, #f3f8ff 0%, #eaf2fd 100%);
      border-bottom: 1px solid #c6d6e8;
      transition: background 0.2s ease;
      position: relative;
    }

    #compare .compare-table-toggle:not([open]) > summary {
      border-bottom: none;
    }

    #compare .compare-table-toggle > summary:hover {
      background: linear-gradient(180deg, #eaf4ff 0%, #e2eefb 100%);
    }

    #compare .compare-table-toggle > summary::-webkit-details-marker {
      display: none;
    }

    #compare .compare-table-toggle > summary::after {
      content: "▾";
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid #9eb7d4;
      background: #ffffff;
      color: #234a79;
      font-size: 1rem;
      line-height: 1;
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 0 6px 14px rgba(22, 50, 84, 0.12);
      transition: transform 0.2s ease, background 0.2s ease;
    }

    #compare .compare-table-toggle[open] > summary::after {
      content: "▴";
      background: #edf5ff;
      transform: translateY(calc(-50% - 1px));
    }

    #compare .compare-table-summary-copy {
      display: grid;
      gap: 3px;
      align-items: center;
      justify-items: center;
      text-align: center;
      width: 100%;
    }

    #compare .compare-table-summary-main {
      display: block;
      color: #163c66;
      font-size: clamp(1rem, 1.3vw, 1.1rem);
      line-height: 1.32;
      letter-spacing: 0.01em;
      font-weight: 900;
    }

    #compare .compare-table-summary-sub {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      justify-content: center;
      width: auto;
      color: #2f5a87;
      font-size: 0.88rem;
      line-height: 1.4;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    #compare .compare-table-summary-sub::before {
      content: "DETAIL";
      min-height: 20px;
      padding: 0 7px;
      border-radius: 999px;
      border: 1px solid rgba(63, 110, 169, 0.42);
      background: rgba(255, 255, 255, 0.88);
      color: #244d79;
      font-size: 0.66rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      display: inline-flex;
      align-items: center;
    }

    #compare .compare-table-body {
      padding: 0 0 2px;
    }

    #compare .compare-table-body .scroll-hint {
      margin: 8px 14px 2px;
    }

    #compare .compare-table-body .table-wrap {
      margin-top: 8px;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    #compare table {
      min-width: 860px;
      font-size: 0.98rem;
    }

    #compare thead th {
      background: linear-gradient(180deg, #eef4fb 0%, #e7eef8 100%);
      color: #1d3455;
      font-size: 0.96rem;
      font-weight: 800;
      border-bottom: 1px solid #bccde0;
    }

    #compare tbody td {
      border-bottom-color: #ccdae8;
    }

    #compare tbody tr:nth-child(odd) td {
      background: #fcfdff;
    }

    #compare tbody tr:nth-child(even) td {
      background: #f6f9fd;
    }

    #compare thead th:nth-child(2),
    #compare tbody td:nth-child(2) {
      text-align: center;
      box-shadow: inset 4px 0 0 rgba(63, 110, 169, 0.56);
    }

    #compare tbody td:nth-child(2) {
      font-weight: 800;
      color: #1b3455;
      background: linear-gradient(180deg, #f7fafe 0%, #f0f5fc 100%);
      white-space: nowrap;
    }

    #compare th.eff {
      border-left: 0;
      background: linear-gradient(180deg, #edf4ff 0%, #e5effc 100%);
      color: #123863;
      box-shadow: inset 4px 0 0 rgba(63, 110, 169, 0.72);
    }

    #compare td.eff {
      border-left: 0;
      background: linear-gradient(180deg, #f3f8ff 0%, #edf5ff 100%);
      box-shadow: inset 4px 0 0 rgba(63, 110, 169, 0.62);
      color: #1a3a60;
      font-weight: 800;
    }

    #compare .quote-band {
      margin: 18px auto 0;
      border: 1px solid #efc18f;
      border-radius: 16px;
      background: linear-gradient(180deg, #fff7ec 0%, #ffe8d1 100%);
      color: #5f3a17;
      text-align: center;
      padding: 16px 20px 18px;
      box-shadow: 0 10px 22px rgba(147, 84, 22, 0.14);
      width: min(100%, 1120px);
      display: grid;
      gap: 14px;
      justify-items: center;
    }

    #compare .quote-band-copy {
      margin: 0;
      color: #5f3a17;
      font-weight: 900;
      font-size: clamp(0.9rem, 1.35vw, 1.02rem);
      line-height: 1.6;
      white-space: nowrap;
    }

    @media (max-width: 1200px) {
      #compare .quote-band-copy {
        white-space: normal;
      }
    }

    #compare .quote-band-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
    }

    #compare .quote-band-actions .btn.primary {
      min-width: 280px;
    }

    @media (max-width: 980px) {
      #compare .compare-snapshot {
        grid-template-columns: 1fr;
      }

      #compare .compare-side-eff {
        transform: none;
      }

      #compare .quote-band-actions .btn.primary {
        min-width: 0;
      }
    }

    /* ===== 2026 Conversion Redesign v8 (Effboki Spotlight) ===== */
    #compare table {
      border-collapse: separate;
      border-spacing: 0;
    }

    #compare thead th,
    #compare tbody td {
      position: relative;
    }

    #compare thead th:first-child,
    #compare tbody td:first-child {
      color: #314862;
    }

    #compare thead th:nth-child(2),
    #compare tbody td:nth-child(2) {
      box-shadow:
        inset 4px 0 0 rgba(63, 110, 169, 0.56),
        inset -2px 0 0 rgba(63, 110, 169, 0.18);
    }

    #compare th.eff {
      background: linear-gradient(135deg, #1c4f84 0%, #21486f 58%, #7a2332 100%);
      color: #f5f9ff;
      font-weight: 900;
      letter-spacing: 0.02em;
      box-shadow:
        inset 5px 0 0 var(--alert),
        inset -3px 0 0 rgba(255, 255, 255, 0.18);
      padding-top: 24px;
    }

    #compare th.eff::before {
      content: "おすすめ";
      position: absolute;
      right: 12px;
      top: 6px;
      font-size: 0.68rem;
      line-height: 1;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.07em;
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(199, 55, 50, 0.92);
      box-shadow: 0 5px 12px rgba(120, 25, 22, 0.28);
    }

    #compare td.eff {
      background: linear-gradient(180deg, #ecf4ff 0%, #e3efff 100%);
      color: #102f53;
      font-weight: 900;
      box-shadow:
        inset 5px 0 0 var(--alert),
        inset -2px 0 0 rgba(63, 110, 169, 0.32),
        inset 0 0 0 1px rgba(63, 110, 169, 0.16);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    #compare tbody tr:hover td.eff {
      background: linear-gradient(180deg, #e2efff 0%, #d9e9ff 100%);
    }

    #compare tbody tr:hover td:not(.eff) {
      background: #f8fbff;
    }

    #compare td.eff::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: rgba(63, 110, 169, 0.26);
      pointer-events: none;
    }

    /* ===== 2026 Conversion Redesign v9 ===== */
    .problem-intro {
      background:
        radial-gradient(900px 340px at 102% 4%, rgba(63, 110, 169, 0.16) 0%, rgba(63, 110, 169, 0) 74%),
        radial-gradient(720px 320px at -10% 96%, rgba(199, 55, 50, 0.09) 0%, rgba(199, 55, 50, 0) 76%),
        linear-gradient(180deg, #ecf3fc 0%, #e5edf8 100%);
    }

    .problem-intro .section-intro {
      max-width: 86ch;
      margin-bottom: 22px;
    }

    .problem-intro .section-intro h2 {
      font-size: clamp(2rem, 3.7vw, 2.72rem);
      line-height: 1.13;
      color: #0f2f53;
      max-width: none;
      white-space: nowrap;
    }

    .problem-intro .section-intro .lead {
      font-size: clamp(1.08rem, 1.7vw, 1.26rem);
      color: #284666;
      font-weight: 800;
      max-width: 62ch;
    }

    .problem-main-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 16px;
      align-items: start;
    }

    .problem-card {
      border: 1px solid #bfd0e4;
      border-radius: 20px;
      background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
      box-shadow: 0 14px 30px rgba(16, 30, 46, 0.1);
      padding: clamp(20px, 2.2vw, 28px);
      position: relative;
      overflow: hidden;
    }

    .problem-card::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, #3f6ea9 0%, #7ca0cc 100%);
      pointer-events: none;
    }

    .problem-card h3 {
      margin: 0;
      color: #13375f;
      font-size: clamp(1.24rem, 2vw, 1.56rem);
      line-height: 1.3;
    }

    .problem-card p {
      margin-top: 10px;
      color: #334c6b;
      font-size: 1rem;
      line-height: 1.74;
    }

    .problem-card .list {
      margin-top: 10px;
      max-width: none;
      gap: 8px;
    }

    .problem-card .list li {
      font-weight: 700;
      color: #223e63;
      line-height: 1.66;
    }

    .problem-card .list li::marker {
      color: var(--alert);
    }

    .problem-card-side::before {
      background: linear-gradient(90deg, #3f6ea9 0%, var(--alert) 100%);
    }

    .problem-card-collapsible {
      padding: 0;
    }

    .problem-card-collapsible > summary {
      list-style: none;
      cursor: pointer;
      min-height: 74px;
      padding: clamp(20px, 2.2vw, 28px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: #13375f;
      font-weight: 800;
    }

    .problem-card-collapsible > summary::-webkit-details-marker {
      display: none;
    }

    .problem-card-collapsible > summary::after {
      content: "";
      width: 11px;
      height: 11px;
      border-right: 2px solid #2e5787;
      border-bottom: 2px solid #2e5787;
      transform: rotate(45deg);
      transition: transform 0.22s ease, border-color 0.2s ease;
      flex-shrink: 0;
      margin-top: -4px;
    }

    .problem-card-collapsible[open] > summary::after {
      transform: rotate(-135deg);
      border-color: #183b62;
      margin-top: 4px;
    }

    .problem-card-collapsible > .problem-card-body {
      border-top: 1px solid #d6e2ef;
      padding: 0 clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
    }

    .problem-card-collapsible.problem-card-wide > .problem-card-body {
      padding-top: 12px;
    }

    .problem-impact {
      font-size: 1.08rem;
      font-weight: 900;
      color: var(--alert);
      margin-top: 12px;
    }

    .problem-card-wide {
      margin-top: 16px;
      border-color: #b6c9e0;
      background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    }

    .problem-lead-strong {
      font-size: clamp(1.12rem, 1.6vw, 1.26rem);
      line-height: 1.72;
      color: #193f69;
      font-weight: 900;
    }

    .problem-loop {
      margin: 10px 0 14px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 30px;
      overflow: visible;
    }

    .problem-loop span {
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid #bed0e4;
      background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      font-weight: 800;
      color: #1e3b62;
      text-align: center;
      padding: 8px;
      box-shadow: 0 8px 16px rgba(17, 30, 45, 0.08);
      position: relative;
      overflow: visible;
      z-index: 1;
    }

    .problem-loop span:not(:last-child)::before {
      content: "";
      position: absolute;
      top: 50%;
      left: calc(100% + 4px);
      width: 8px;
      height: 2px;
      background: #4f78a8;
      transform: translateY(-50%);
      pointer-events: none;
      z-index: 3;
    }

    .problem-loop span:not(:last-child)::after {
      content: "";
      position: absolute;
      left: calc(100% + 13px);
      top: 50%;
      width: 7px;
      height: 7px;
      border-top: 2px solid #4f78a8;
      border-right: 2px solid #4f78a8;
      transform: translateY(-50%) rotate(45deg);
      pointer-events: none;
      z-index: 3;
    }

    .problem-loop span:nth-child(4) {
      border-color: rgba(199, 55, 50, 0.4);
      background: linear-gradient(180deg, #fff7f7 0%, #fdf0f0 100%);
      color: var(--alert-strong);
    }

    .problem-subhead {
      margin-top: 12px;
      font-size: 1.02rem;
      font-weight: 900;
      color: #173b63;
    }

    .problem-final-card {
      margin-top: 16px;
      padding: 18px 20px;
      border-radius: 16px;
      border: 1px solid #efc18f;
      background: linear-gradient(180deg, #fff7ec 0%, #ffe8d1 100%);
      box-shadow: 0 10px 22px rgba(147, 84, 22, 0.14);
      text-align: center;
    }

    .problem-final-card p {
      margin: 0 auto;
      max-width: 60ch;
      color: #5f3a17;
      font-size: clamp(1.02rem, 1.45vw, 1.16rem);
      line-height: 1.72;
      font-weight: 800;
    }

    .problem-final-card p + p {
      margin-top: 10px;
    }

    .problem-final-card strong {
      color: #b43e1f;
      font-weight: 900;
    }

    .problem-features {
      position: relative;
      background:
        radial-gradient(860px 300px at 98% 2%, rgba(46, 102, 176, 0.13) 0%, rgba(46, 102, 176, 0) 74%),
        radial-gradient(680px 260px at -8% 96%, rgba(120, 156, 204, 0.16) 0%, rgba(120, 156, 204, 0) 76%),
        linear-gradient(180deg, #f3f8ff 0%, #eaf2fc 100%);
    }

    .problem-features::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      background: rgba(70, 101, 142, 0.22);
      pointer-events: none;
    }

    .problem-features .section-intro {
      max-width: none;
      margin-bottom: 16px;
    }

    .problem-feature-intro {
      margin-top: 0;
      margin-bottom: 12px;
      max-width: none;
    }

    .problem-feature-intro h2 {
      font-size: clamp(2.08rem, 4vw, 2.9rem);
      line-height: 1.15;
      color: #0f2f54;
      max-width: none;
    }

    .problem-feature-intro .lead {
      margin-top: 8px;
      max-width: none;
      font-size: clamp(1.08rem, 1.7vw, 1.26rem);
      line-height: 1.72;
      color: #233f62;
      font-weight: 800;
    }

    .problem-feature-table-head {
      display: none;
    }

    .problem-feature-grid {
      display: grid;
      grid-template-columns: 1fr;
      border: none;
      border-radius: 0;
      overflow: visible;
      background: transparent;
      box-shadow: none;
      gap: 14px;
    }

    .problem-feature-card {
      display: block;
      border: 1px solid #bfd0e4;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
      box-shadow: 0 12px 26px rgba(16, 30, 46, 0.1);
      padding: 0;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .problem-feature-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 30px rgba(16, 30, 46, 0.14);
    }

    .problem-feature-card + .problem-feature-card {
      border-top: 1px solid #bfd0e4;
    }

    .problem-feature-card::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, #3f6ea9 0%, #89aad0 100%);
      pointer-events: none;
    }

    .problem-feature-card:nth-child(even)::before {
      background: linear-gradient(90deg, #3f6ea9 0%, var(--alert) 100%);
    }

    .problem-feature-card > summary {
      list-style: none;
      cursor: pointer;
      position: relative;
      display: grid;
      min-height: 0;
      align-items: start;
      gap: 8px;
      padding: 18px 52px 16px 18px;
      background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    }

    .problem-feature-card > summary::-webkit-details-marker {
      display: none;
    }

    .problem-feature-card > summary::after {
      content: "";
      position: absolute;
      right: 18px;
      top: 50%;
      width: 11px;
      height: 11px;
      border-right: 2px solid #2e5787;
      border-bottom: 2px solid #2e5787;
      transform: translateY(-62%) rotate(45deg);
      transition: transform 0.22s ease, border-color 0.2s ease;
    }

    .problem-feature-card[open] > summary::after {
      transform: translateY(-38%) rotate(-135deg);
      border-color: #183b62;
    }

    .problem-feature-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid #bcd0e4;
      background: #edf4fb;
      color: #153d68;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.03em;
    }

    .problem-feature-card > summary h3 {
      margin: 0;
      font-size: clamp(1.14rem, 1.8vw, 1.34rem);
      line-height: 1.34;
      color: #12375f;
    }

    .problem-feature-body {
      border-top: 1px solid #d5e2ef;
      background: #ffffff;
      padding: 0;
    }

    .problem-feature-card p {
      margin-top: 10px;
      margin-bottom: 0;
      color: #324a69;
      line-height: 1.72;
      font-size: 0.98rem;
    }

    .problem-feature-summary {
      padding: 16px 18px 14px;
      border-right: none;
      background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
      position: relative;
    }

    .problem-feature-summary::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, #3f6ea9 0%, #89aad0 100%);
    }

    .problem-feature-summary > .list {
      margin-top: 8px;
      margin-bottom: 2px;
      max-width: none;
      gap: 7px;
    }

    .problem-feature-summary > .list li {
      font-size: 0.98rem;
      color: #213f63;
      font-weight: 700;
    }

    .problem-feature-summary > .list li::marker {
      color: var(--alert);
    }

    .problem-feature-section {
      margin-top: 0;
      padding: 16px 18px 15px;
      border: none;
      border-top: 1px solid #d6e1ec;
      border-radius: 0;
      background: #ffffff;
      box-shadow: none;
    }

    .problem-feature-section h4 {
      margin: 0 0 10px;
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid #c7d8ea;
      background: #edf4fb;
      color: #1f4b7b;
      font-size: 0.8rem;
      line-height: 1.3;
      font-weight: 900;
    }

    .problem-feature-section p {
      margin-top: 8px;
      color: #2f4a69;
      line-height: 1.68;
      font-size: 0.96rem;
    }

    .problem-feature-section .list {
      margin-top: 2px;
      margin-bottom: 0;
      max-width: none;
      gap: 6px;
    }

    .problem-feature-section .list li {
      font-size: 0.96rem;
      color: #213f63;
      font-weight: 700;
    }

    .problem-feature-section .list li::marker {
      color: #3f6ea9;
    }

    .problem-feature-section.is-strength {
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    }

    .problem-feature-section.is-result {
      border-right: none;
      background: linear-gradient(180deg, #fff8f7 0%, #ffffff 100%);
    }

    .problem-feature-section.is-result h4 {
      border-color: #efc8c4;
      background: #fff0ef;
      color: #8d2f2a;
    }

    .problem-feature-section.is-result .list li::marker {
      color: var(--alert);
    }

    #hero .kicker,
    #problem-intro .kicker,
    #problem-features .kicker,
    #compare .kicker,
    #strengths .kicker,
    #preview-cta .kicker,
    #pricing .kicker,
    #faq .kicker,
    #final-cta .kicker,
    #footer .kicker {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      width: min(980px, 100%);
      min-height: 40px;
      margin: 0 0 14px;
      padding: 0 14px;
      border: 1px solid rgba(26, 57, 92, 0.42);
      border-radius: 999px;
      background: linear-gradient(180deg, #28486b 0%, #233f5f 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 18px rgba(14, 31, 49, 0.14);
      color: #edf4ff;
      font-size: 0.98rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
    }

    #hero .hero-grid {
      grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
      grid-template-areas:
        "title title"
        "copy mock";
      align-items: start;
      row-gap: clamp(20px, 2.8vw, 34px);
    }

    #hero-title {
      grid-area: title;
      margin: 0;
      max-width: none;
      font-size: clamp(2.22rem, 4.3vw, 3.52rem);
      line-height: 1.12;
      letter-spacing: 0.01em;
      display: grid;
      gap: 0.07em;
    }

    #hero-title .hero-title-line {
      display: block;
      white-space: nowrap;
    }

    #hero .hero-copy {
      grid-area: copy;
    }

    #hero .hero-copy .lead {
      margin-top: 0;
      max-width: 64ch;
    }

    #hero .hero-mock {
      grid-area: mock;
    }

    #faq .section-intro {
      max-width: 80ch;
      display: grid;
      gap: 10px;
    }

    #faq .section-intro h2 {
      margin: 0;
      font-size: clamp(1.86rem, 3vw, 2.4rem);
      color: #173863;
    }

    #faq .section-intro p {
      margin: 0;
      color: #556c88;
      font-size: clamp(1rem, 1.35vw, 1.12rem);
      line-height: 1.82;
    }

    #faq .section-intro a {
      color: #1f4f8a;
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 0.1em;
    }

    #faq .faq-quick {
      margin-top: 14px;
      display: grid;
      gap: 12px;
    }

    #faq details.faq-item {
      border: 1px solid #c9d7ea;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 10px 22px rgba(15, 28, 44, 0.08);
      padding: 0 16px;
      overflow: visible;
    }

    #faq details.faq-item summary {
      list-style: none;
      cursor: pointer;
      min-height: 58px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: #173a67;
      font-weight: 900;
      font-size: clamp(0.98rem, 1.32vw, 1.08rem);
      line-height: 1.55;
    }

    #faq details.faq-item summary::-webkit-details-marker {
      display: none;
    }

    #faq details.faq-item summary::after {
      content: "+";
      font-size: 1.28rem;
      color: #2259be;
      line-height: 1;
      font-weight: 500;
      flex-shrink: 0;
    }

    #faq details.faq-item[open] summary::after {
      content: "−";
    }

    #faq details.faq-item > p {
      margin: 0 0 14px;
      color: #355270;
      font-size: clamp(0.95rem, 1.2vw, 1.02rem);
      line-height: 1.84;
      padding-right: 20px;
    }

    #faq .faq-actions {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    #faq .faq-actions .btn.primary {
      background: #ffffff;
      color: #2259be;
      border: 1px solid #c7d6eb;
      box-shadow: 0 12px 24px rgba(14, 34, 58, 0.12);
    }

    @media (max-width: 1080px) {
      .problem-main-grid {
        grid-template-columns: 1fr;
      }

      .problem-loop {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .problem-loop span:not(:last-child)::before {
        left: 50%;
        top: calc(100% + 3px);
        width: 2px;
        height: 7px;
        transform: translateX(-50%);
      }

      .problem-loop span:not(:last-child)::after {
        content: "";
        left: 50%;
        top: calc(100% + 10px);
        width: 7px;
        height: 7px;
        border-top: none;
        border-right: 2px solid #4f78a8;
        border-bottom: 2px solid #4f78a8;
        transform: translateX(-50%) rotate(45deg);
      }

      .problem-feature-table-head {
        display: none;
      }

      .problem-feature-grid {
        display: grid;
        grid-template-columns: 1fr;
        border: none;
        box-shadow: none;
        border-radius: 0;
        gap: 14px;
        background: transparent;
      }

      .problem-feature-card {
        display: block;
        border: 1px solid #c2d2e4;
        border-radius: 16px;
        box-shadow: 0 10px 22px rgba(16, 30, 46, 0.08);
      }

      .problem-feature-card + .problem-feature-card {
        border-top: 1px solid #c2d2e4;
      }

      .problem-feature-summary,
      .problem-feature-section {
        border-right: none;
      }

      .problem-feature-section {
        border-top: 1px solid #d9e4ef;
      }

    }

    @media (max-width: 760px) {
      #hero .kicker,
      #problem-intro .kicker,
      #problem-features .kicker,
      #compare .kicker,
      #strengths .kicker,
      #preview-cta .kicker,
      #pricing .kicker,
      #faq .kicker,
      #final-cta .kicker,
      #footer .kicker {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.8rem;
        letter-spacing: 0.06em;
      }

      #hero-title {
        font-size: clamp(1.16rem, 5.2vw, 1.56rem);
        line-height: 1.26;
      }

      #hero-title .hero-title-line {
        white-space: normal;
      }

      #faq details.faq-item summary {
        min-height: 54px;
      }

      #faq .faq-actions .btn {
        width: 100%;
        justify-content: center;
      }

      #compare .quote-band {
        white-space: normal;
        width: 100%;
      }

      #compare .compare-table-toggle > summary {
        padding: 12px 48px 11px;
        gap: 10px;
      }

      #compare .compare-table-toggle > summary::after {
        width: 30px;
        height: 30px;
        font-size: 0.92rem;
      }

      #compare .compare-table-summary-main {
        font-size: 0.98rem;
      }

      #compare .compare-table-summary-sub {
        font-size: 0.8rem;
      }

      .problem-intro .section-intro h2 {
        font-size: clamp(1.82rem, 7vw, 2.24rem);
        white-space: normal;
      }

      .problem-card {
        border-radius: 16px;
      }

      .problem-card-collapsible > summary {
        min-height: 66px;
        padding: 18px 16px;
      }

      .problem-card-collapsible > .problem-card-body {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 18px;
      }

      .problem-feature-card > summary {
        padding-left: 12px;
        padding-right: 44px;
      }

      .problem-feature-card > summary::after {
        right: 12px;
      }

      .problem-feature-summary,
      .problem-feature-section {
        padding-left: 12px;
        padding-right: 12px;
      }

      .problem-loop {
        grid-template-columns: 1fr;
      }
    }

    /* ===== Unified Top Navigation (Home / Pricing pages) ===== */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 300;
      height: auto;
      background: linear-gradient(135deg, #1c2b45 0%, #162233 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 10px 26px rgba(15, 28, 47, 0.3);
      backdrop-filter: none;
    }

    .topbar::after {
      content: none;
    }

    .topbar-inner {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      font-size: 1.05rem;
      color: #f3f7ff;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 0;
      background: linear-gradient(135deg, #3a7bff 0%, #2357bf 100%);
      color: #fff;
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.03em;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .nav-links a {
      color: #d6e2ff;
      text-decoration: none;
      font-size: 0.92rem;
      font-weight: 700;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
    }

    .nav-links a::after {
      content: none;
    }

    .nav-links a:hover {
      color: #ffffff;
      text-decoration: underline;
    }

    @media (max-width: 760px) {
      .container {
        width: min(var(--container), calc(100% - 24px));
      }

      .section {
        padding-block: 34px;
      }

      .topbar-inner {
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 0 12px;
      }

      .brand {
        width: 100%;
        justify-content: center;
      }

      .nav-links {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 2px 6px;
        margin: 0 -2px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
      }

      .nav-links::-webkit-scrollbar {
        height: 5px;
      }

      .nav-links::-webkit-scrollbar-thumb {
        background: rgba(214, 226, 255, 0.45);
        border-radius: 999px;
      }

      .nav-links a {
        white-space: nowrap;
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.08);
      }

      #hero .cta-row {
        display: none;
      }

      .cta-row,
      #compare .quote-band-actions,
      #faq .faq-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .cta-row .btn,
      #compare .quote-band-actions .btn,
      #faq .faq-actions .btn {
        width: 100%;
      }

      #compare .compare-table-toggle > summary {
        text-align: left;
        justify-content: flex-start;
      }

      .problem-card-collapsible > summary,
      .problem-feature-card > summary,
      #faq details.faq-item summary {
        text-align: left;
      }
    }

    .mobile-section-toc {
      display: none;
    }

    .mobile-section-toc-shell {
      padding: 12px 0 14px;
    }

    .mobile-section-toc-card {
      border: 1px solid #c7d3e4;
      border-radius: 14px;
      background: #f6f9fd;
      box-shadow: 0 8px 18px rgba(33, 63, 98, 0.08);
      padding: 10px 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .mobile-section-toc-label {
      margin: 0 0 7px;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #5f6f84;
    }

    .mobile-section-toc-list {
      margin: 0;
      padding: 0 0 0 1.35rem;
      display: grid;
      gap: 6px;
      width: max-content;
      min-width: 100%;
    }

    .mobile-section-toc-list li {
      margin: 0;
    }

    .mobile-section-toc-list li::marker {
      color: #355f8f;
      font-weight: 800;
    }

    .mobile-section-toc-list a {
      color: #2f5f95;
      font-size: 0.84rem;
      font-weight: 700;
      line-height: 1.45;
      text-decoration: none;
      white-space: nowrap;
    }

    .mobile-section-toc-list a:hover {
      text-decoration: underline;
      text-decoration-thickness: 2px;
    }

    @media (max-width: 768px) {
      .mobile-section-toc {
        display: block;
        background: #ffffff;
        border-bottom: 1px solid rgba(47, 95, 149, 0.14);
      }

      main section[id] {
        scroll-margin-top: 124px;
      }
    }

    /* Section zebra bands */
    #problem-intro {
      background: linear-gradient(180deg, #eef6ff 0%, #e7f1fc 100%);
      border-top: 2px solid #c4d8ee;
      border-bottom: 2px solid #c4d8ee;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    #paradigm {
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border-top: 2px solid #d7e2ef;
      border-bottom: 2px solid #cbdced;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }

    #strengths {
      background: linear-gradient(180deg, #edf5ff 0%, #e5effc 100%);
      border-top: 2px solid #c4d8ee;
      border-bottom: 2px solid #c4d8ee;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    #future {
      background: linear-gradient(180deg, #fffdf8 0%, #fff7ee 100%);
      border-top: 2px solid #dcc89f;
      border-bottom: 2px solid #d7e2ef;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    #final-cta {
      background: linear-gradient(180deg, #eef6ff 0%, #f7fbff 100%);
      border-top: 2px solid #cbdced;
      border-bottom: 2px solid #d7e2ef;
    }

@media (max-width: 760px) {
      html,
      body {
        overflow-x: clip;
      }

      body {
        line-height: 1.82;
      }

      .container {
        width: min(var(--container), calc(100% - 28px));
      }

      .topbar-inner {
        gap: 8px;
        padding: 8px 0 10px;
      }

      .brand {
        font-size: 1rem;
      }

      .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 9px;
      }

      .nav-links {
        gap: 7px;
        padding: 1px 0 3px;
        margin: 0;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .nav-links a {
        min-height: 36px;
        padding: 0 12px;
        font-size: 0.84rem;
        line-height: 1;
        scroll-snap-align: start;
        box-shadow: none;
      }

      .section {
        padding-block: 36px;
      }

      #hero {
        padding: 34px 0 30px;
      }

      #hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      #hero-title {
        max-width: 100%;
        font-size: clamp(1.74rem, 7.6vw, 2.18rem);
        line-height: 1.34;
        letter-spacing: 0;
      }

      #hero .hero-copy .lead,
      .section-intro p,
      .problem-card p,
      .problem-feature-summary,
      #compare p,
      #faq details.faq-item > p {
        font-size: 0.96rem;
        line-height: 1.86;
      }

      #hero .hero-pills {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      #hero .hero-pill {
        justify-content: flex-start;
        min-height: 38px;
        white-space: normal;
        text-align: left;
      }

      .mobile-section-toc-card {
        overflow: visible;
        padding: 12px 13px;
      }

      .mobile-section-toc-list {
        width: auto;
        min-width: 0;
        gap: 7px;
      }

      .mobile-section-toc-list a {
        white-space: normal;
        line-height: 1.55;
      }

      .problem-card,
      .problem-feature-card,
      #compare .compare-table-toggle,
      #faq details.faq-item {
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(21, 46, 76, 0.1);
      }

      .problem-card-collapsible > summary,
      .problem-feature-card > summary,
      #compare .compare-table-toggle > summary,
      #faq details.faq-item summary {
        min-height: 58px;
        padding-top: 14px;
        padding-bottom: 14px;
        line-height: 1.55;
      }

      .problem-card-collapsible > summary h3,
      .problem-feature-card > summary h3 {
        font-size: 1rem;
        line-height: 1.5;
      }

      .problem-feature-summary > .list {
        padding-left: 1.15rem;
      }

      #compare .table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      #compare table {
        min-width: 680px;
      }

      .cta-row,
      .btn-row,
      #compare .quote-band-actions,
      #faq .faq-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
      }

      .cta-row .btn,
      .btn-row .btn,
      #compare .quote-band-actions .btn,
      #faq .faq-actions .btn {
        width: 100%;
        justify-content: center;
      }
    }

/* ===== Textbook Intro Final Design Refresh ===== */
    :root {
      --page-ink: #132238;
      --page-copy: #31445f;
      --page-muted: #66758a;
      --page-line: #d7e0ec;
      --page-panel: #ffffff;
      --page-panel-soft: #f7fafd;
      --page-blue: #1f5b9d;
      --page-blue-deep: #11385f;
      --page-red: #c33a32;
      --page-gold: #c9852e;
      --page-green: #1f7a63;
      --page-shadow: 0 18px 42px rgba(18, 36, 58, 0.11);
      --page-shadow-soft: 0 10px 26px rgba(18, 36, 58, 0.08);
    }

    body {
      color: var(--page-copy);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(245, 249, 253, 0.88) 44%, rgba(238, 244, 251, 0.96) 100%),
        #eef4fb;
    }

    .container {
      width: min(1160px, calc(100% - 40px));
    }

    .section {
      padding-block: clamp(64px, 8vw, 112px);
    }

    .section + .section {
      border-top: 1px solid rgba(45, 77, 111, 0.1);
    }

    .topbar {
      background: rgba(15, 31, 52, 0.94);
      border-bottom: 1px solid rgba(255, 255, 255, 0.13);
      box-shadow: 0 14px 34px rgba(9, 20, 34, 0.28);
      backdrop-filter: blur(16px);
    }

    .nav-links a {
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 0 12px;
      color: #dbe8f8;
      text-decoration: none;
    }

    .nav-links a:hover,
    .nav-links a[aria-current="page"] {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.16);
      text-decoration: none;
    }

    #hero {
      min-height: min(760px, calc(100vh - 68px));
      display: grid;
      align-items: center;
      padding-block: clamp(56px, 7vw, 92px);
      background:
        linear-gradient(90deg, rgba(13, 35, 60, 0.94) 0%, rgba(17, 54, 91, 0.9) 48%, rgba(18, 70, 113, 0.82) 100%),
        linear-gradient(135deg, #0d243d 0%, #174a78 100%);
      isolation: isolate;
    }

    #hero::before {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 44%;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(231, 239, 249, 0.1) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 84px);
      opacity: 0.55;
      pointer-events: none;
      z-index: -1;
    }

    #hero .hero-grid {
      grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
      grid-template-areas:
        "title mock"
        "copy mock";
      gap: clamp(24px, 4vw, 56px);
      align-items: center;
    }

    #hero-title {
      max-width: 15ch;
      font-size: clamp(2.36rem, 5vw, 4.28rem);
      line-height: 1.08;
      text-wrap: balance;
    }

    #hero-title .hero-title-line {
      white-space: normal;
    }

    #hero .lead {
      color: #e2edf9;
      font-size: clamp(1.04rem, 1.45vw, 1.24rem);
      line-height: 1.88;
    }

    #hero .lead strong {
      color: #ffd7b3;
    }

    .hero-pill {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .hero-mock {
      position: relative;
      border-radius: 24px;
      padding: 22px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
        rgba(10, 25, 43, 0.52);
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow: 0 28px 70px rgba(4, 12, 24, 0.42);
      transform: rotate(0.5deg);
    }

    .hero-mock::before {
      content: "";
      position: absolute;
      inset: 18px 18px auto auto;
      width: 84px;
      height: 110px;
      border-radius: 8px 12px 12px 8px;
      background:
        linear-gradient(90deg, rgba(17, 56, 95, 0.16) 0 8px, transparent 8px),
        linear-gradient(180deg, #fffefa 0%, #eef5ff 100%);
      box-shadow: -14px 12px 0 rgba(255, 255, 255, 0.22);
      opacity: 0.9;
      pointer-events: none;
    }

    .mock-title,
    .mock-card {
      position: relative;
      z-index: 1;
    }

    .mock-card {
      background: rgba(255, 255, 255, 0.92);
      color: var(--page-copy);
      border: 1px solid rgba(255, 255, 255, 0.66);
      box-shadow: 0 12px 24px rgba(6, 18, 34, 0.13);
    }

    .mock-card strong {
      color: var(--page-blue-deep);
    }

    .mock-card p {
      color: #465b75;
    }

    h2,
    h3 {
      color: var(--page-ink);
    }

    .section-intro {
      max-width: 78ch;
    }

    .section-intro h2,
    .problem-feature-intro h2,
    #compare .section-intro h2,
    #strengths .section-intro h2 {
      color: var(--page-ink);
      font-size: clamp(1.92rem, 3.6vw, 2.92rem);
      line-height: 1.18;
      white-space: normal;
      max-width: 20ch;
    }

    .section-intro .lead,
    .problem-feature-intro .lead,
    #compare .section-intro .lead,
    #strengths .section-intro .lead {
      color: #2e4868;
      font-weight: 800;
      line-height: 1.78;
    }

    .kicker,
    #hero .kicker,
    #problem-intro .kicker,
    #problem-features .kicker,
    #compare .kicker,
    #strengths .kicker,
    #preview-cta .kicker,
    #pricing .kicker,
    #faq .kicker,
    #final-cta .kicker,
    #footer .kicker {
      width: fit-content;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(31, 91, 157, 0.1);
      border: 1px solid rgba(31, 91, 157, 0.18);
      color: var(--page-blue-deep);
      box-shadow: none;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
    }

    #hero .kicker,
    #pricing .kicker,
    #footer .kicker {
      background: rgba(255, 255, 255, 0.11);
      border-color: rgba(255, 255, 255, 0.22);
      color: #eaf3ff;
    }

    .problem-intro,
    .problem-features,
    #compare,
    #faq,
    #final-cta {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 249, 253, 0.92) 100%),
        #eef4fb;
    }

    .problem-main-grid,
    .compare-snapshot {
      gap: 20px;
    }

    .problem-card,
    .problem-feature-card,
    .compare-side,
    .card,
    .plan,
    #faq details.faq-item,
    .closing {
      border: 1px solid var(--page-line);
      border-radius: 18px;
      background: var(--page-panel);
      box-shadow: var(--page-shadow-soft);
    }

    .problem-card:hover,
    .problem-feature-card:hover,
    .compare-side:hover,
    .card:hover,
    #faq details.faq-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--page-shadow);
    }

    .problem-card-collapsible > summary,
    .problem-feature-card > summary,
    #faq details.faq-item summary,
    #compare .compare-table-toggle > summary {
      min-height: 70px;
      padding: 18px 58px 18px 22px;
      background:
        linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
      color: var(--page-ink);
    }

    .problem-card-collapsible > summary h3,
    .problem-feature-card > summary h3 {
      color: var(--page-ink);
      font-size: clamp(1.1rem, 1.7vw, 1.36rem);
      line-height: 1.42;
    }

    .problem-card-body,
    .problem-feature-body {
      background: #ffffff;
    }

    .problem-feature-body {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      align-items: stretch;
    }

    .problem-feature-summary,
    .problem-feature-section {
      padding: 20px 22px;
    }

    .problem-feature-summary {
      grid-row: span 2;
      border-right: 1px solid var(--page-line);
      background: #f8fbfe;
    }

    .problem-feature-section.is-strength {
      background: #ffffff;
    }

    .problem-feature-section.is-result {
      background: #fff9f7;
    }

    .problem-feature-no,
    .strength-overview-no,
    .compare-chip,
    .step-label {
      border-radius: 999px;
      background: #edf5ff;
      border: 1px solid #c8dcef;
      color: var(--page-blue-deep);
    }

    .problem-final-card,
    #compare .quote-band {
      border: 1px solid #edcfaa;
      border-radius: 18px;
      background: linear-gradient(180deg, #fffaf4 0%, #fff0df 100%);
      box-shadow: 0 14px 30px rgba(154, 92, 30, 0.12);
    }

    .problem-loop {
      gap: 18px;
    }

    .problem-loop span {
      border-color: #c8d8e8;
      background: #ffffff;
      box-shadow: 0 8px 18px rgba(18, 36, 58, 0.08);
    }

    #compare .compare-side-old {
      background: #fbfdff;
    }

    #compare .compare-side-eff {
      background:
        radial-gradient(420px 180px at 96% 0%, rgba(255, 192, 138, 0.28) 0%, rgba(255, 192, 138, 0) 72%),
        linear-gradient(145deg, #123b65 0%, #1f5b91 58%, #225d79 100%);
      box-shadow: 0 22px 46px rgba(18, 52, 84, 0.24);
    }

    #compare .compare-prelead {
      color: #2b4867;
    }

    #compare .compare-table-toggle {
      border-radius: 18px;
      border-color: var(--page-line);
      box-shadow: var(--page-shadow-soft);
    }

    #compare table {
      min-width: 900px;
    }

    #strengths {
      background:
        linear-gradient(180deg, rgba(244, 249, 255, 0.94) 0%, rgba(235, 242, 250, 0.96) 100%),
        #eef4fb;
    }

    #strengths .section-intro .kicker {
      background: rgba(31, 91, 157, 0.1);
      border-color: rgba(31, 91, 157, 0.18);
      color: var(--page-blue-deep);
    }

    #strengths .strength-overview-grid {
      max-width: none;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }

    #strengths .strength-overview-card {
      min-height: 248px;
      border-radius: 18px;
      border: 1px solid var(--page-line);
      background: #ffffff;
      box-shadow: var(--page-shadow-soft);
      padding: 18px;
    }

    #strengths .strength-overview-card:nth-child(2n) {
      background: #fffafa;
    }

    #strengths .strength-overview-card h3 {
      margin: 0;
      color: var(--page-ink);
      font-size: 1.08rem;
      line-height: 1.42;
    }

    #strengths .strength-overview-hook {
      color: #425873;
    }

    #strengths .strengths-cta {
      max-width: none;
      border-radius: 22px;
      background:
        radial-gradient(620px 260px at 88% 0%, rgba(255, 211, 161, 0.28) 0%, rgba(255, 211, 161, 0) 74%),
        linear-gradient(135deg, #102d4d 0%, #1a568d 64%, #134d68 100%);
    }

    #preview-cta .preview-band {
      border-radius: 20px;
      background:
        linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
      box-shadow: var(--page-shadow);
    }

    #faq .faq-quick {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    #faq details.faq-item {
      padding: 0;
      overflow: hidden;
    }

    #faq details.faq-item > p {
      padding: 0 22px 20px;
      color: #405672;
    }

    #final-cta .closing {
      max-width: 920px;
      border-radius: 24px;
      background:
        radial-gradient(420px 180px at 100% 0%, rgba(31, 91, 157, 0.12) 0%, rgba(31, 91, 157, 0) 72%),
        #ffffff;
      box-shadow: var(--page-shadow);
    }

    .footer {
      background: #0e243b;
    }

    @media (max-width: 1180px) {
      #strengths .strength-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #strengths .strength-overview-card {
        min-height: auto;
      }
    }

    @media (max-width: 980px) {
      #hero {
        min-height: auto;
      }

      #hero .hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
          "title"
          "copy";
      }

      #hero .hero-mock {
        display: none;
      }

      .problem-feature-body,
      #faq .faq-quick {
        grid-template-columns: 1fr;
      }

      .problem-feature-summary {
        grid-row: auto;
        border-right: 0;
      }
    }

    @media (max-width: 760px) {
      .container {
        width: min(1160px, calc(100% - 28px));
      }

      .section {
        padding-block: 44px;
      }

      #hero {
        padding-block: 40px;
      }

      #hero-title {
        font-size: clamp(1.86rem, 8vw, 2.42rem);
        line-height: 1.24;
      }

      .section-intro h2,
      .problem-feature-intro h2,
      #compare .section-intro h2,
      #strengths .section-intro h2 {
        font-size: clamp(1.58rem, 7vw, 2.12rem);
      }

      .problem-card,
      .problem-feature-card,
      .compare-side,
      .card,
      #faq details.faq-item,
      .closing {
        border-radius: 14px;
      }

      .problem-card-collapsible > summary,
      .problem-feature-card > summary,
      #faq details.faq-item summary,
      #compare .compare-table-toggle > summary {
        min-height: 60px;
        padding: 15px 46px 15px 16px;
      }

      .problem-feature-summary,
      .problem-feature-section,
      #faq details.faq-item > p {
        padding-inline: 16px;
      }

      #strengths .strength-overview-grid {
        grid-template-columns: 1fr;
      }

      .mobile-section-toc-card {
        background: #ffffff;
        border-color: var(--page-line);
      }
    }

    /* New concise sales copy uses longer headlines, so keep the first view readable. */
    #hero {
      min-height: auto;
      padding-block: clamp(46px, 6vw, 78px);
      color: #eef6ff;
      background:
        linear-gradient(90deg, rgba(7, 25, 48, 0.94) 0%, rgba(10, 42, 78, 0.9) 50%, rgba(13, 57, 104, 0.7) 78%, rgba(247, 251, 255, 0.18) 100%),
        url("../img/generated/textbook-intro-hero-bg.webp") right center / cover no-repeat;
    }

    #hero::before {
      display: none;
    }

    #hero .hero-grid {
      grid-template-columns: minmax(0, 760px) 1fr;
      grid-template-areas:
        "title title"
        "copy .";
      gap: clamp(22px, 3.2vw, 42px);
    }

    #hero-title {
      max-width: min(1120px, 100%);
      font-size: clamp(2.18rem, 3.7vw, 3.38rem);
      line-height: 1.18;
      letter-spacing: 0;
      color: #f3f8ff;
      text-shadow: 0 2px 18px rgba(0, 13, 31, 0.26);
    }

    #hero-title .hero-title-line {
      width: auto;
      max-width: 100%;
      white-space: nowrap;
      word-break: keep-all;
      overflow-wrap: normal;
    }

    #hero .hero-copy {
      max-width: min(760px, 100%);
      display: grid;
      gap: 8px;
    }

    #hero .lead {
      color: #e6f0fb;
      max-width: 70ch;
      margin: 0;
      padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
      border: 1px solid rgba(218, 235, 255, 0.28);
      border-radius: 12px;
      background: rgba(9, 34, 62, 0.32);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 28px rgba(2, 17, 35, 0.16);
      backdrop-filter: blur(8px);
    }

    #hero .hero-lead-list {
      list-style: none;
      display: grid;
      gap: 8px;
    }

    #hero .hero-lead-list li {
      position: relative;
      padding-left: 1.1em;
    }

    #hero .hero-lead-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.78em;
      width: 0.38em;
      height: 0.38em;
      border-radius: 999px;
      background: rgba(210, 232, 255, 0.9);
      box-shadow: 0 0 0 3px rgba(210, 232, 255, 0.12);
      transform: translateY(-50%);
    }

    #hero .hero-copy p:not(.lead) {
      color: #d7e5f4;
      margin: 0;
    }

    #hero .hero-copy p:nth-of-type(3) {
      margin-top: 22px;
      width: max-content;
      max-width: min(1120px, calc(100vw - 40px));
      white-space: nowrap;
      word-break: keep-all;
      overflow-wrap: normal;
    }

    #hero .hero-bold {
      color: inherit;
      font-weight: 900;
    }

    #hero .hero-yellow-underline {
      color: inherit;
      font-weight: 900;
      padding: 0 2px;
      background: linear-gradient(transparent 78%, #FEF08A 78%);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    #hero .cta-row {
      max-width: min(760px, 100%);
      margin-top: 6px;
    }

    #hero .hero-mock {
      display: none;
    }

    #hero .hero-pill {
      color: #edf6ff;
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.24);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    #hero .hero-pills {
      margin-top: 2px;
    }

    #hero .btn.invert {
      color: #f6fbff;
      border-color: rgba(255, 255, 255, 0.44);
      background: rgba(8, 28, 52, 0.32);
    }

    #hero .btn.invert:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    #paradigm h2 span,
    #strengths h2 span {
      display: block;
    }

    @media (max-width: 980px) {
      #hero .hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
          "title"
          "copy";
      }
    }

    @media (max-width: 760px) {
      #hero {
        padding-block: 30px 40px;
      }

      #hero-title {
        font-size: clamp(1.56rem, 6.6vw, 2.04rem);
        line-height: 1.24;
      }

      #hero-title .hero-title-line {
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
      }

      #hero .lead,
      #hero .hero-copy p:not(.lead) {
        font-size: 0.95rem;
        line-height: 1.68;
      }

      #hero .lead {
        padding: 12px 13px;
        border-radius: 10px;
      }

      #hero .hero-copy p:not(.lead) {
        margin-bottom: 8px;
      }

      #hero .hero-copy p:nth-of-type(3) {
        width: auto;
        max-width: 100%;
        white-space: normal;
        word-break: normal;
      }

      #hero .hero-pills {
        display: none;
      }

      #hero .cta-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
      }

      #hero .btn {
        white-space: normal;
        line-height: 1.45;
        padding-block: 8px;
      }
    }

    .problem-intro .section-intro,
    #paradigm .section-intro,
    #strengths .section-intro,
    #future .section-intro {
      max-width: 100%;
    }

    .problem-intro .section-intro h2,
    #future .section-intro h2 {
      max-width: 100%;
      white-space: normal;
      text-wrap: balance;
      font-size: clamp(2rem, 3.1vw, 2.5rem);
    }

    .problem-intro .section-intro h2 {
      font-size: clamp(2.2rem, 3.55vw, 2.85rem);
    }

    .problem-intro .section-intro h2 span {
      display: block;
    }

    #future .section-intro h2 > span {
      display: block;
    }

    #future .future-title-nowrap {
      white-space: nowrap;
    }

    #textbook-policy .section-intro {
      max-width: 100%;
    }

    #textbook-policy .section-intro h2 {
      max-width: 100%;
      font-size: clamp(2rem, 3vw, 2.5rem);
      line-height: 1.22;
      text-wrap: normal;
    }

    #textbook-policy .section-intro h2 > span {
      display: block;
    }

    #textbook-policy .section-intro h2 > span:nth-of-type(2) {
      white-space: nowrap;
    }

    #paradigm .section-intro h2,
    #strengths .section-intro h2 {
      max-width: 100%;
      font-size: clamp(2rem, 3.1vw, 2.5rem);
      line-height: 1.22;
    }

    #paradigm .section-intro h2 {
      font-size: clamp(2.25rem, 3.55vw, 2.85rem);
    }

    #paradigm h2 span,
    #strengths h2 span {
      display: block;
      width: max-content;
      max-width: 100%;
      white-space: nowrap;
    }

    #paradigm {
      background:
        linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%);
    }

    #paradigm .section-intro {
      margin-bottom: clamp(28px, 4vw, 44px);
    }

    #paradigm .section-copy {
      display: grid;
      gap: 16px;
      max-width: 980px;
    }

    #paradigm .paradigm-feature {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: clamp(16px, 2.4vw, 26px);
      padding: clamp(18px, 2.5vw, 28px);
      border: 1px solid #d5e0ec;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 10px 26px rgba(18, 42, 68, 0.06);
    }

    #paradigm .paradigm-no {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border: 1px solid #bfd0e3;
      border-radius: 999px;
      background: #f1f6fb;
      color: #163a63;
      font-size: 0.82rem;
      font-weight: 900;
      line-height: 1.1;
      text-align: center;
    }

    #paradigm .paradigm-body {
      display: grid;
      gap: 10px;
    }

    #paradigm .paradigm-body h3 {
      margin: 0;
      color: #12345a;
      font-size: clamp(1.18rem, 1.85vw, 1.45rem);
      line-height: 1.38;
    }

    #paradigm .paradigm-body p {
      margin: 0;
      color: #294562;
      font-size: clamp(0.98rem, 1.15vw, 1.04rem);
      line-height: 1.82;
      font-weight: 700;
    }

    #paradigm .logic-key {
      color: #123a63;
      font-weight: 900;
    }

    #paradigm .logic-warn {
      color: #b9353d;
      font-weight: 900;
    }

    #paradigm .logic-marker {
      color: inherit;
      font-weight: 900;
      padding: 0 2px;
      background: linear-gradient(transparent 62%, #FEF08A 62%);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    #strengths .section-intro h2 {
      text-wrap: balance;
    }

    #strengths h2 span {
      width: auto;
      white-space: normal;
    }

    #strengths .study-step-copy {
      display: grid;
      gap: 20px;
      max-width: 980px;
      color: #284563;
      font-weight: 700;
      line-height: 1.82;
    }

    #strengths .normal-study-flow,
    #strengths .bad-study-flow {
      display: grid;
      gap: 10px;
      margin: -2px 0 0;
    }

    #strengths .normal-study-label,
    #strengths .bad-study-label {
      width: fit-content;
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border-radius: 999px;
      background: #e8f1fb;
      color: #14375f;
      font-size: 0.84rem;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    #strengths .bad-study-label {
      background: #fff0ef;
      color: #b9353d;
    }

    #strengths .normal-flow-list,
    #strengths .bad-flow-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(18px, 2.4vw, 28px);
      align-items: stretch;
    }

    #strengths .normal-flow-list li,
    #strengths .bad-flow-list li {
      position: relative;
      min-height: 88px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 4px;
      padding: 14px 12px;
      border: 1px solid #cbd8e8;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 8px 18px rgba(17, 32, 52, 0.06);
      color: #153a62;
      line-height: 1.45;
      text-align: center;
      font-weight: 900;
    }

    #strengths .bad-flow-list li {
      border-color: rgba(185, 53, 61, 0.3);
    }

    #strengths .normal-flow-list li:not(:last-child)::after,
    #strengths .bad-flow-list li:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: calc(clamp(18px, 2.4vw, 28px) / -2 - 5px);
      width: 13px;
      height: 13px;
      border-top: 3px solid #2e5f93;
      border-right: 3px solid #2e5f93;
      transform: translateY(-50%) rotate(45deg);
    }

    #strengths .bad-flow-list li:not(:last-child)::after {
      border-color: #b9353d;
    }

    #strengths .bad-flow-list strong {
      color: #b9353d;
    }

    #strengths .normal-flow-list span,
    #strengths .bad-flow-list span {
      color: #49647f;
      font-size: 0.82rem;
      font-weight: 800;
    }

    #strengths .study-step-contrast {
      max-width: 980px;
      margin: 0 0 2px;
    }

    #strengths .study-step-note {
      display: grid;
      gap: 12px;
      max-width: 88ch;
      padding: 0;
    }

    #strengths .study-step-conclusion {
      color: #153a62;
      font-size: clamp(1.02rem, 1.45vw, 1.16rem);
      font-weight: 900;
    }

    #future .future-copy {
      display: grid;
      gap: 16px;
      max-width: 88ch;
      color: #284563;
      font-size: clamp(1rem, 1.14vw, 1.08rem);
      font-weight: 700;
      line-height: 1.86;
    }

    #future .future-title-mark {
      display: inline;
      width: auto;
      max-width: none;
      color: #123a63;
      background: linear-gradient(transparent 64%, #FEF08A 64%);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    #future .future-positioning {
      color: #1d3f63;
      font-size: clamp(1.06rem, 1.35vw, 1.18rem);
      line-height: 1.85;
    }

    #future .future-line {
      display: block;
    }

    #future .future-line + .future-line {
      margin-top: 6px;
    }

    #future .future-brand {
      color: #1e47b4;
      font-weight: 900;
    }

    #future .future-positioning strong {
      color: #153a62;
      font-weight: 900;
    }

    #future .future-key,
    #future .future-axis {
      color: #123a63;
      font-weight: 900;
      background: linear-gradient(transparent 66%, #FEF08A 66%);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    #future .future-question {
      color: #153a62;
      font-size: clamp(1.04rem, 1.22vw, 1.12rem);
      font-weight: 900;
    }

    #future .future-warn {
      color: #b9353d;
      font-weight: 900;
    }

    #future .future-quote {
      color: #1e47b4;
      font-weight: 900;
    }

    #future .future-flow {
      margin: 4px 0;
      padding: clamp(16px, 2.2vw, 22px);
      border: 1px solid #cbd8e8;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 12px 28px rgba(17, 32, 52, 0.08);
      color: #153a62;
      font-size: clamp(1.04rem, 1.55vw, 1.22rem);
      font-weight: 900;
    }

    .problem-intro .section-copy > .list,
    .problem-image-panel > .list {
      max-width: 760px;
      margin: 18px 0;
      padding: 18px 22px 18px 40px;
      border: 1px solid #d8e4f2;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 14px 32px rgba(17, 38, 66, 0.08);
    }

    .problem-intro .section-copy > .list li,
    .problem-image-panel > .list li {
      color: #24415f;
      font-weight: 800;
      line-height: 1.75;
    }

    .problem-intro .section-copy h3 {
      margin-top: 26px;
      margin-bottom: 10px;
      color: #153a62;
      font-size: clamp(1.22rem, 2vw, 1.5rem);
      line-height: 1.38;
    }

    .problem-intro .section-copy h3:first-child {
      margin-top: 0;
    }

    .problem-intro .section-copy p {
      max-width: 82ch;
    }

    .problem-intro .section-copy strong {
      color: #b9353d;
    }

    @media (max-width: 760px) {
      .problem-intro .section-intro h2,
      #future .section-intro h2 {
        font-size: clamp(1.5rem, 6.2vw, 1.9rem);
      }

      .problem-intro .section-intro h2 {
        font-size: clamp(1.64rem, 6.8vw, 2.04rem);
      }

      #paradigm .section-intro h2,
      #strengths .section-intro h2 {
        font-size: clamp(1.08rem, 4.7vw, 1.16rem);
      }

      #paradigm .section-intro h2 {
        font-size: clamp(1.28rem, 5.7vw, 1.48rem);
      }

      #textbook-policy .section-intro h2 {
        font-size: clamp(1.42rem, 6vw, 1.82rem);
      }

      #textbook-policy .section-intro h2 > span:nth-of-type(2) {
        white-space: normal;
      }

      #paradigm .paradigm-feature {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      #paradigm .paradigm-no {
        width: fit-content;
        height: auto;
        min-height: 30px;
        padding: 0 12px;
        border-radius: 999px;
      }

      #strengths .normal-flow-list,
      #strengths .bad-flow-list {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      #strengths .normal-flow-list li,
      #strengths .bad-flow-list li {
        min-height: 74px;
      }

      #strengths .normal-flow-list li:not(:last-child)::after,
      #strengths .bad-flow-list li:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -12px;
        transform: translateX(50%) rotate(135deg);
      }

      .problem-intro .section-copy > .list,
      .problem-image-panel > .list {
        padding: 14px 14px 14px 32px;
        border-radius: 8px;
      }
    }

/* Final section zebra overrides */
#problem-intro {
  background: linear-gradient(180deg, #eef6ff 0%, #e7f1fc 100%);
  border-top: 2px solid #c4d8ee;
  border-bottom: 2px solid #c4d8ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.problem-image-panels {
  display: grid;
  gap: clamp(28px, 4.6vw, 48px);
}

.problem-image-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(196, 216, 238, 0.92);
  border-radius: 14px;
  background-color: #eef6ff;
  background-position: center right;
  background-size: cover;
  box-shadow: 0 18px 40px rgba(17, 38, 66, 0.08);
}

.problem-image-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(238, 246, 255, 0.98) 0%, rgba(238, 246, 255, 0.94) 48%, rgba(238, 246, 255, 0.62) 74%, rgba(238, 246, 255, 0.36) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(231, 241, 252, 0.44) 100%);
}

.problem-image-panel > * {
  position: relative;
  z-index: 1;
}

.problem-image-panel-loop {
  background-image: url("../img/generated/textbook-intro-negative-loop-bg.webp");
}

.problem-image-panel-lost-time {
  background-image: url("../img/generated/textbook-intro-lost-time-bg.webp");
}

#paradigm {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.94) 48%, rgba(248, 251, 255, 0.72) 76%, rgba(248, 251, 255, 0.46) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 251, 255, 0.58) 100%),
    url("../img/generated/textbook-intro-structure-bg.webp") center right / cover no-repeat;
  border-top: 2px solid #d7e2ef;
  border-bottom: 2px solid #cbdced;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

#paradigm > .container {
  position: relative;
  z-index: 1;
}

#paradigm .paradigm-feature {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}

#strengths {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(237, 245, 255, 0.98) 0%, rgba(237, 245, 255, 0.94) 48%, rgba(229, 239, 252, 0.72) 76%, rgba(229, 239, 252, 0.46) 100%),
    linear-gradient(180deg, rgba(237, 245, 255, 0.74) 0%, rgba(229, 239, 252, 0.62) 100%),
    url("../img/generated/textbook-intro-study-steps-bg.webp") center right / cover no-repeat;
  border-top: 2px solid #c4d8ee;
  border-bottom: 2px solid #c4d8ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

#strengths > .container {
  position: relative;
  z-index: 1;
}

#future {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 250, 241, 0.94) 48%, rgba(255, 247, 238, 0.72) 76%, rgba(255, 247, 238, 0.46) 100%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.74) 0%, rgba(255, 247, 238, 0.62) 100%),
    url("../img/generated/textbook-intro-future-steps-bg.webp") center right / cover no-repeat;
  border-top: 2px solid #dcc89f;
  border-bottom: 2px solid #d7e2ef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#future > .container {
  position: relative;
  z-index: 1;
}

#final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(238, 246, 255, 0.98) 0%, rgba(238, 246, 255, 0.94) 46%, rgba(247, 251, 255, 0.72) 76%, rgba(247, 251, 255, 0.48) 100%),
    linear-gradient(180deg, rgba(238, 246, 255, 0.72) 0%, rgba(247, 251, 255, 0.64) 100%),
    url("../img/generated/textbook-intro-final-cta-bg.webp") center right / cover no-repeat;
  border-top: 2px solid #cbdced;
  border-bottom: 2px solid #d7e2ef;
}

#final-cta > .container {
  position: relative;
  z-index: 1;
}

#final-cta .closing {
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(31, 91, 157, 0.1) 0%, rgba(31, 91, 157, 0) 72%),
    rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(3px);
}

@media (max-width: 760px) {
  .problem-image-panels {
    gap: 24px;
  }

  .problem-image-panel {
    padding: 18px 16px;
    border-radius: 10px;
    background-position: 60% center;
  }

  .problem-image-panel::before {
    background: rgba(238, 246, 255, 0.94);
  }

  #paradigm {
    background:
      linear-gradient(rgba(248, 251, 255, 0.94), rgba(248, 251, 255, 0.94)),
      url("../img/generated/textbook-intro-structure-bg.webp") 58% center / cover no-repeat;
  }

  #strengths {
    background:
      linear-gradient(rgba(237, 245, 255, 0.94), rgba(229, 239, 252, 0.94)),
      url("../img/generated/textbook-intro-study-steps-bg.webp") 58% center / cover no-repeat;
  }

  #future {
    background:
      linear-gradient(rgba(255, 253, 248, 0.94), rgba(255, 247, 238, 0.94)),
      url("../img/generated/textbook-intro-future-steps-bg.webp") 58% center / cover no-repeat;
  }

  #final-cta {
    background:
      linear-gradient(rgba(238, 246, 255, 0.94), rgba(247, 251, 255, 0.94)),
      url("../img/generated/textbook-intro-final-cta-bg.webp") 58% center / cover no-repeat;
  }

  #final-cta .closing {
    background: rgba(255, 255, 255, 0.9);
  }
}

.textbook-hub-breadcrumb {
  padding: 12px 0;
}

.seo-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 800;
}

.seo-breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  color: #94a3b8;
}

.seo-breadcrumb a {
  color: #1d4ed8;
  text-decoration: none;
}

.seo-breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.textbook-hub-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 118px) 0 clamp(58px, 7vw, 86px);
  background:
    linear-gradient(90deg, rgba(8, 17, 36, 0.94) 0%, rgba(10, 28, 62, 0.86) 45%, rgba(16, 42, 88, 0.54) 100%),
    url("../img/generated/dictionary-hero.jpg") center / cover no-repeat,
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 54%, #2563eb 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.textbook-hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 360px at 18% 28%, rgba(49, 110, 232, 0.2), transparent 72%),
    linear-gradient(180deg, rgba(7, 15, 31, 0.06) 0%, rgba(7, 15, 31, 0.38) 100%);
  pointer-events: none;
}

.textbook-hub-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

.textbook-hub-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 16px;
  padding: 6px 12px;
  border: 1px solid rgba(191, 219, 254, 0.52);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #dbeafe;
  font-size: 0.84rem;
  font-weight: 800;
}

.textbook-hub-hero h1 {
  margin: 0;
  max-width: 780px;
  color: #ffffff;
  font-size: clamp(2.15rem, 4.4vw, 3.7rem);
  line-height: 1.35;
  letter-spacing: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}

.textbook-hub-hero p {
  max-width: 62ch;
  margin: 18px 0 0;
  color: #dbeafe;
  font-size: 1rem;
  line-height: 1.9;
}

.textbook-hub-card {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(191, 219, 254, 0.24);
  border-radius: 18px;
  background: rgba(9, 25, 55, 0.68);
  box-shadow: 0 16px 34px rgba(5, 18, 41, 0.26);
  backdrop-filter: blur(12px);
}

.textbook-hub-card h2 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 1.32rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.textbook-hub-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.textbook-hub-list a {
  display: block;
  padding: 14px 16px;
  border: 1px solid rgba(219, 234, 254, 0.78);
  border-radius: 12px;
  background: #dbeafe;
  color: #0647d9;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  box-shadow: 0 10px 22px rgba(5, 18, 41, 0.14);
}

.textbook-hub-list a:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

@media (max-width: 760px) {
  .textbook-hub-grid {
    grid-template-columns: 1fr;
  }

  .textbook-hub-hero {
    padding: 52px 0 44px;
  }

  .textbook-hub-card {
    border-radius: 14px;
  }
}

@media (max-width: 760px) {
  .problem-card,
  .compare-side,
  .card,
  .closing,
  #strengths .strengths-cta,
  #preview-cta .preview-band,
  #final-cta .closing,
  .textbook-hub-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  .problem-feature-summary,
  .problem-feature-section,
  #faq details.faq-item > p {
    padding-left: 12px;
    padding-right: 12px;
  }

  .problem-card-collapsible > summary,
  .problem-feature-card > summary,
  #faq details.faq-item summary,
  #compare .compare-table-toggle > summary {
    padding-left: 12px;
    padding-right: 44px;
  }

  #faq details.faq-item {
    padding-left: 10px;
    padding-right: 10px;
  }

  .textbook-hub-list a {
    padding-left: 12px;
    padding-right: 12px;
  }

  .mobile-section-toc-list {
    width: auto;
    min-width: 0;
  }

  .mobile-section-toc-list a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}