/* Extracted from school.html without changing rule order or presentation. */
/* Design refresh: keep copy unchanged while improving readability and visual hierarchy. */
    :root {
      --bg: #f6f8fb;
      --surface: #ffffff;
      --surface-soft: #f2f6fb;
      --text: #172033;
      --muted: #526173;
      --line: #d9e2ee;
      --deep: #102035;
      --deep-2: #18324f;
      --primary: #255fb8;
      --primary-strong: #174a93;
      --accent: #d0643a;
      --accent-soft: #fff4ee;
      --ok: #19715f;
      --warn: #a7472d;
      --radius: 8px;
      --shadow: 0 10px 24px rgba(17, 34, 58, 0.09);
    }

    body {
      color: var(--text);
      background:
        linear-gradient(90deg, rgba(37, 95, 184, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, #fbfcfe 0%, #f3f6fa 100%);
      background-size: 42px 42px, auto;
      font-weight: 500;
    }

    h1,
    h2,
    h3,
    h4,
    .brand,
    .btn,
    summary,
    strong {
      font-weight: 800;
      letter-spacing: 0;
    }

    .topbar {
      background: rgba(13, 27, 45, 0.96);
      backdrop-filter: blur(16px);
    }

    .hero {
      background:
        linear-gradient(120deg, rgba(16, 32, 53, 0.96) 0%, rgba(24, 50, 79, 0.92) 60%, rgba(37, 95, 184, 0.88) 100%),
        url("../img/home-hero-boki-school.webp") center / cover;
      padding: clamp(48px, 7vw, 88px) 0 clamp(38px, 5vw, 62px);
    }

    .hero::before,
    .community-cta::after,
    .service-spotlight::before,
    .service-spotlight::after,
    .strength-card::after {
      display: none;
    }

    .kicker,
    .pillar .tag,
    .support-tile .tag,
    .roadmap-step .step-badge,
    .core-conclusion-tags li {
      border-radius: 999px;
      letter-spacing: 0.04em;
    }

    .hero .lead {
      color: #e8eef8;
      font-weight: 600;
    }

    .hero-points {
      padding: 0;
      list-style: none;
      gap: 9px;
    }

    .hero-points li {
      position: relative;
      padding-left: 28px;
    }

    .hero-points li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.68em;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: inset 0 0 0 4px #2f73d8;
    }

    .btn {
      border-radius: 8px;
      min-height: 46px;
      padding: 0 18px;
      box-shadow: none;
    }

    .btn.primary {
      background: #ffffff;
      color: #174a93;
      box-shadow: 0 12px 22px rgba(6, 16, 32, 0.2);
    }

    .btn.secondary {
      border-color: rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.12);
    }

    .hero-board,
    .stat-card,
    .message-card,
    .core-conclusion,
    .narrative-card,
    .founder-card,
    .risk-alert-card,
    .narrative-highlight,
    .story-quote,
    .reality-card,
    .community-card,
    .core-pillar,
    .core-question-modes,
    .support-tile,
    .mode-tile,
    .community-cta,
    .pillar,
    .response-card,
    .compare-note-list li,
    .comparison-wrap,
    .summary-card,
    .summary-detail-list li,
    .learning-roadmap,
    .roadmap-step,
    .roadmap-side-card,
    .roadmap-side-note,
    .service-cta,
    .strength-card,
    .fit-card,
    details.faq-item,
    .cta-band,
    .mobile-section-toc-card {
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .section {
      padding: clamp(46px, 6.4vw, 82px) 0;
    }

    .section + .section {
      border-top: 1px solid rgba(23, 32, 51, 0.07);
    }

    .section-ink,
    .core-message-showcase {
      background:
        linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%);
    }

    .section-intro {
      max-width: 82ch;
      margin-bottom: 22px;
      padding-left: 18px;
      border-left: 4px solid var(--primary);
    }

    .section-intro.section-intro-full {
      max-width: 96ch;
    }

    .section-intro p {
      color: #4f6176;
      font-weight: 600;
    }

    .hero-board,
    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.26);
      backdrop-filter: blur(12px);
    }

    .stat-card {
      padding: 13px;
    }

    .stat-card .value {
      font-size: 1.02rem;
    }

    .message-card,
    .narrative-card,
    .reality-card,
    .community-card,
    .summary-card,
    .learning-roadmap,
    details.faq-item {
      background: rgba(255, 255, 255, 0.96);
      border-color: #d8e3f0;
    }

    .core-message-showcase .message-card,
    .core-message-showcase .core-conclusion,
    .service-cta,
    .community-cta,
    .cta-band {
      border-radius: 8px;
    }

    .core-message-showcase .message-card {
      border-top: 4px solid var(--accent);
      background: #ffffff;
    }

    .core-message-showcase .message-card::before,
    .core-message-showcase .message-card::after,
    .core-message-showcase .core-conclusion::before,
    .core-message-showcase .core-conclusion::after {
      display: none;
    }

    .core-message-points,
    .compare-note-list,
    .summary-detail-list {
      gap: 10px;
    }

    .core-message-points li,
    .compare-note-list li,
    .summary-detail-list li {
      border-color: #d7e4f4;
      background: #f8fbff;
      box-shadow: none;
      text-align: left;
      justify-content: flex-start;
    }

    .core-conclusion,
    .core-message-showcase .core-conclusion,
    .community-cta,
    .service-cta,
    .cta-band {
      background: linear-gradient(135deg, #102035 0%, #183b63 58%, #255fb8 100%);
      border-color: rgba(255, 255, 255, 0.18);
    }

    .narrative-highlight,
    .reality-card.in-card,
    .core-system-card,
    .roadmap-side-card {
      background: #f7fbff;
      border-color: #cfe0f5;
    }

    .story-quote,
    .risk-alert-card,
    .roadmap-side-note {
      background: #fff7f2;
      border-color: #efc9b8;
    }

    .community-card h3,
    .community-card summary,
    .summary-card h3,
    .summary-card summary,
    .learning-roadmap h3,
    .learning-roadmap summary,
    .founder-card summary {
      border-radius: 0;
      background: #f3f7fc;
      border-color: #d7e4f4;
      box-shadow: none;
      color: #173b68;
    }

    .community-card {
      position: relative;
      overflow: hidden;
      padding: 0;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    .community-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 5px;
      background: linear-gradient(180deg, #255fb8 0%, #5b91e5 100%);
    }

    .community-card:nth-child(2)::before {
      background: linear-gradient(180deg, #19715f 0%, #55a58e 100%);
    }

    .community-card.full-width::before {
      background: linear-gradient(180deg, #d0643a 0%, #ed9a72 100%);
    }

    .community-card:hover {
      transform: translateY(-2px);
      border-color: #bcd3f1;
      box-shadow: 0 16px 32px rgba(17, 34, 58, 0.12);
    }

    .community-card h3,
    .community-card summary {
      min-height: 88px;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #15375f;
      justify-content: flex-start;
      text-align: left;
      padding: 18px 58px 18px 26px;
      font-size: clamp(1rem, 1.35vw, 1.14rem);
      line-height: 1.55;
    }

    .community-card summary::before {
      content: "仕組み";
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      margin-right: 12px;
      border-radius: 999px;
      border: 1px solid #c5d9f5;
      background: #eef5ff;
      color: #255fb8;
      padding: 0 9px;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      flex: 0 0 auto;
    }

    .community-card:nth-child(2) summary::before {
      content: "管理";
      border-color: #c5e3da;
      background: #eefaf6;
      color: #19715f;
    }

    .community-card.full-width summary::before {
      content: "中核";
      border-color: #f0c9b6;
      background: #fff4ee;
      color: #b54f2e;
    }

    .community-card summary::after {
      right: 18px;
      width: 30px;
      height: 30px;
      border: 1px solid #c4d8f6;
      background: #ffffff;
      box-shadow: 0 8px 16px rgba(20, 57, 103, 0.12);
      color: #255fb8;
      font-size: 1.1rem;
    }

    .community-card[open] summary {
      margin-bottom: 0;
      border-bottom: 1px solid #d9e5f4;
      background: #f8fbff;
    }

    .community-card > p,
    .community-card > ul,
    .community-card > .core-pillar-grid {
      margin: 0;
      padding: 18px 20px 20px 26px;
    }

    .community-card > p + p {
      padding-top: 0;
    }

    .community-card > ul {
      list-style: none;
    }

    .community-card > ul li,
    .community-card:not(.full-width) > p {
      position: relative;
    }

    .community-card > ul li {
      padding-left: 22px;
    }

    .community-card > ul li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #255fb8;
      box-shadow: 0 0 0 4px #e7f0ff;
    }

    .founder-card summary {
      background: #183b63;
      color: #ffffff;
    }

    .core-pillar {
      border-top: 4px solid #255fb8;
      border-color: #bad3f4;
      background: linear-gradient(180deg, #eef6ff 0%, #dcecff 100%);
      box-shadow: 0 10px 22px rgba(37, 95, 184, 0.1);
      padding: 18px;
    }

    .core-pillar:nth-child(2) {
      border-top-color: #19715f;
      border-color: #bddfd5;
      background: linear-gradient(180deg, #edf9f5 0%, #daf0e9 100%);
      box-shadow: 0 10px 22px rgba(25, 113, 95, 0.1);
    }

    .core-pillar:nth-child(3),
    .core-pillar-question {
      border-top-color: #d0643a;
      border-color: #efc7b6;
      background: linear-gradient(180deg, #fff4ee 0%, #ffe5d8 100%);
      box-shadow: 0 10px 22px rgba(208, 100, 58, 0.11);
    }

    .core-pillar h4 {
      margin-top: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      text-align: left;
      padding: 0;
    }

    .core-pillar h4::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #255fb8;
      margin-right: 8px;
      transform: none;
    }

    .core-pillar:nth-child(2) h4::before {
      background: #19715f;
    }

    .core-pillar:nth-child(3) h4::before {
      background: #b54f2e;
    }

    .core-pillar p {
      color: #254769;
      font-size: 0.91rem;
      line-height: 1.82;
    }

    .core-pillar:nth-child(2) p {
      color: #285f52;
    }

    .core-pillar:nth-child(3) p {
      color: #70402e;
    }

    .core-question-modes {
      border-color: rgba(181, 79, 46, 0.28);
      background: rgba(255, 255, 255, 0.62);
      box-shadow: none;
    }

    .compare-note {
      margin-top: 6px;
      padding: 14px 16px;
      border-left: 4px solid var(--primary);
      background: #ffffff;
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .comparison-wrap {
      border-color: #d8e3f0;
      background: #ffffff;
    }

    .comparison-table th {
      background: #eef4fb;
      color: #173b68;
      text-transform: none;
    }

    .comparison-table td:first-child {
      color: #173b68;
      font-weight: 800;
      white-space: nowrap;
    }

    .comparison-table td:nth-child(3) {
      background: #f3f8ff;
      box-shadow: inset 4px 0 0 rgba(37, 95, 184, 0.24);
    }

    .summary-card::before {
      height: 4px;
    }

    .roadmap-step::before {
      border-radius: 4px;
      border-color: #255fb8;
    }

    .fit-card.good {
      background: #f1fbf6;
    }

    .fit-card.bad {
      background: #fff7f2;
    }

    .faq-quick {
      gap: 12px;
    }

    details.faq-item {
      padding: 0 16px;
    }

    .cta-band .btn-row {
      justify-content: center;
    }

    @media (max-width: 1020px) {
      .section-intro {
        max-width: none;
      }
    }

    @media (max-width: 760px) {
      body {
        background-size: 34px 34px, auto;
      }

      .hero {
        padding: 34px 0 36px;
      }

      .section {
        padding: 40px 0;
      }

      .section-intro {
        padding-left: 13px;
        margin-bottom: 18px;
      }

      .hero-board,
      .message-card,
      .narrative-card,
      .story-quote,
      .community-card,
      .summary-card,
      .learning-roadmap,
      .cta-band {
        padding: 16px;
      }

      .comparison-table {
        min-width: 720px;
      }
    }

    /* Textbook-intro aligned polish: calm, logical, document-like presentation. */
    :root {
      --bg: #ffffff;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --text: #1f2937;
      --muted: #5b6573;
      --line: #dbe2ea;
      --deep: #1f232a;
      --deep-2: #262b33;
      --primary: #2d5bd1;
      --primary-strong: #1e47b4;
      --accent: #d0643a;
      --accent-soft: #fff4ee;
      --ok: #19715f;
      --radius: 8px;
      --container: 1120px;
      --shadow: 0 10px 26px rgba(18, 42, 68, 0.06);
    }

    body {
      font-family: "Noto Sans JP", "Inter", sans-serif;
      font-weight: 600;
      color: var(--text);
      background: #ffffff;
    }

    .hero {
      min-height: auto;
      padding: clamp(42px, 6vw, 72px) 0 clamp(38px, 5vw, 58px);
      background:
        linear-gradient(120deg, rgba(31, 35, 42, 0.94) 0%, rgba(38, 43, 51, 0.9) 52%, rgba(45, 91, 209, 0.72) 100%),
        url("../img/home-hero-boki-school.webp") center / cover;
    }

    .hero-grid {
      gap: clamp(20px, 3vw, 34px);
    }

    .hero h1 {
      max-width: 1120px;
      margin-top: 0;
      color: #f3f8ff;
      font-size: clamp(2rem, 3.15vw, 2.85rem);
      line-height: 1.24;
      text-shadow: 0 2px 18px rgba(0, 13, 31, 0.28);
    }

    .hero-main.is-copy-only {
      grid-template-columns: minmax(0, 800px);
    }

    .hero-main.is-copy-only .lead {
      max-width: 74ch;
      margin: 0;
      color: #e6f0fb;
      font-size: clamp(0.98rem, 1.22vw, 1.08rem);
      line-height: 1.72;
    }

    .hero-main.is-copy-only .lead:first-child {
      padding: clamp(11px, 1.35vw, 15px) clamp(14px, 1.8vw, 20px);
      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-main.is-copy-only .reveal {
      display: grid;
      gap: 9px;
    }

    .hero .btn-row {
      margin-top: 12px;
    }

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

    .hero .btn.primary:hover {
      background: var(--primary-strong);
    }

    .hero .btn.secondary {
      color: #1f2937;
      background: rgba(255, 255, 255, 0.94);
      border-color: rgba(255, 255, 255, 0.84);
    }

    .section {
      padding-block: clamp(54px, 7vw, 92px);
      background: #ffffff;
    }

    .section + .section {
      border-top: 1px solid #e5ebf2;
    }

    .section-ink,
    .core-message-showcase,
    .service-spotlight {
      background: linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%);
    }

    .section-intro,
    .section-intro.section-intro-full,
    .service-spotlight .section-intro,
    .core-message-intro {
      max-width: 100%;
      margin-bottom: clamp(22px, 3vw, 34px);
      padding-left: 0;
      border-left: 0;
    }

    .section-intro h2,
    .numbered-section-title,
    .service-spotlight .section-intro h2,
    .core-message-showcase .section-intro h2 {
      max-width: 980px;
      color: #12345a;
      font-size: clamp(2rem, 3.2vw, 2.72rem);
      line-height: 1.24;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .section-intro p,
    .service-lead,
    .core-message-showcase .section-intro p {
      max-width: 78ch;
      color: #294562;
      font-size: clamp(0.98rem, 1.18vw, 1.06rem);
      line-height: 1.86;
      font-weight: 700;
    }

    .section-intro p {
      margin-top: 12px;
    }

    @media (min-width: 1100px) {
      #community-driven .numbered-section-title {
        max-width: none;
        white-space: nowrap;
        text-wrap: nowrap;
      }
    }

    .message-card,
    .narrative-card,
    .story-quote,
    .founder-card,
    .reality-card,
    details.faq-item,
    .cta-band {
      border: 1px solid #d5e0ec;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: var(--shadow);
    }

    .message-card,
    .narrative-card,
    .story-quote {
      max-width: 980px;
      padding: clamp(18px, 2.5vw, 28px);
    }

    .message-card p,
    .narrative-card p,
    .story-quote p,
    .founder-card-body p,
    details.faq-item p {
      color: #294562;
      font-size: clamp(0.98rem, 1.15vw, 1.04rem);
      line-height: 1.84;
      font-weight: 700;
    }

    .message-card p + p,
    .narrative-card p + p,
    .story-quote p + p {
      margin-top: 10px;
    }

    .narrative-card h3,
    .message-card h3,
    .story-quote h3 {
      margin: 0 0 10px;
      color: #12345a;
      font-size: clamp(1.18rem, 1.85vw, 1.45rem);
      line-height: 1.38;
    }

    .narrative-card ul,
    .message-card ul,
    .story-quote ul {
      margin-top: 12px;
      padding-left: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .narrative-card li,
    .message-card li,
    .story-quote li {
      position: relative;
      padding-left: 24px;
      color: #294562;
      font-size: clamp(0.96rem, 1.1vw, 1.02rem);
      line-height: 1.78;
      font-weight: 700;
    }

    .narrative-card li::before,
    .message-card li::before,
    .story-quote li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.78em;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(45, 91, 209, 0.12);
      transform: translateY(-50%);
    }

    #compare .narrative-card {
      display: grid;
      gap: 2px;
    }

    #compare .narrative-card h3 {
      padding-bottom: 10px;
      border-bottom: 1px solid #dbe6f2;
      text-align: left;
    }

    #compare .narrative-card .logic-kicker {
      width: 100%;
      justify-content: center;
      text-align: center;
    }

    #compare .narrative-card:nth-of-type(1) {
      border-left: 5px solid var(--primary);
    }

    #compare .narrative-card:nth-of-type(2) {
      border-left: 5px solid var(--ok);
    }

    #compare .narrative-card:nth-of-type(3) {
      border-left: 5px solid var(--accent);
    }

    .founder-card summary,
    .summary-card summary,
    .learning-roadmap summary,
    details.faq-item summary {
      color: #12345a;
      background: #f1f6fb;
      border-bottom: 1px solid #d5e0ec;
      box-shadow: none;
    }

    .risk-alert-card {
      background: #fff7f2;
      border-color: #efc9b8;
      box-shadow: none;
    }

    .reality-card.in-card {
      background: #f7fbff;
      border-color: #cfe0f5;
      box-shadow: none;
    }

    .mobile-section-toc {
      background: #ffffff;
    }

    .mobile-section-toc-card {
      border: 1px solid #d5e0ec;
      background: #ffffff;
      box-shadow: var(--shadow);
    }

    .mobile-section-toc-list a {
      border-color: #dbe6f2;
      background: #f7fbff;
      color: #12345a;
    }

    .faq-quick {
      max-width: 980px;
    }

    .cta-band {
      background: linear-gradient(135deg, #1f232a 0%, #253047 54%, #2d5bd1 100%);
    }

    .logic-list,
    .logic-flow {
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .logic-list li {
      position: relative;
      padding: 13px 14px 13px 42px;
      border: 1px solid #dbe6f2;
      border-radius: 8px;
      background: #f7fbff;
      color: #294562;
      font-size: clamp(0.96rem, 1.1vw, 1.02rem);
      line-height: 1.72;
      font-weight: 800;
    }

    .logic-list li::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 1.55em;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(45, 91, 209, 0.12);
    }

    .logic-flow {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 30px;
    }

    .belief-flow {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin: 8px 0 18px;
    }

    .inline-belief-copy {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .inline-belief-flow {
      margin: 0 2px;
      padding: 0;
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 20px;
      vertical-align: middle;
    }

    .inline-belief-flow [role="listitem"] {
      position: relative;
      min-height: 30px;
      padding: 4px 10px;
      border: 1px solid #dbe6f2;
      border-radius: 8px;
      background: #ffffff;
      color: #12345a;
      font-size: 0.9em;
      line-height: 1.35;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }

    .inline-belief-flow [role="listitem"] + [role="listitem"]::before {
      content: "→";
      position: absolute;
      left: -18px;
      top: 50%;
      width: 16px;
      height: 16px;
      transform: translateY(-50%);
      border-radius: 999px;
      border: 1px solid #c9d9f2;
      background: #ffffff;
      box-shadow: 0 3px 8px rgba(17, 48, 91, 0.08);
      color: var(--primary);
      font-size: 0.8rem;
      font-weight: 900;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .logic-flow li {
      position: relative;
      min-height: 52px;
      padding: 12px 10px;
      border: 1px solid #dbe6f2;
      border-radius: 8px;
      background: #ffffff;
      color: #12345a;
      font-size: clamp(0.86rem, 0.95vw, 0.94rem);
      line-height: 1.55;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: none;
    }

    .logic-flow li::before {
      content: none;
    }

    .logic-flow li + li::before {
      content: "→";
      position: absolute;
      left: -25px;
      top: 50%;
      width: 20px;
      height: 20px;
      transform: translateY(-50%);
      border-radius: 999px;
      border: 1px solid #c9d9f2;
      background: #ffffff;
      box-shadow: 0 4px 10px rgba(17, 48, 91, 0.08);
      color: var(--primary);
      font-size: 0.92rem;
      font-weight: 900;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .logic-note {
      margin-top: 14px;
      padding: 16px 18px;
      border-left: 5px solid var(--primary);
      border-radius: 8px;
      background: #f7fbff;
      color: #12345a;
      box-shadow: 0 8px 18px rgba(18, 42, 68, 0.05);
    }

    .logic-note strong {
      color: #12345a;
    }

    .logic-kicker {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      margin: 0 0 10px;
      padding: 0 10px;
      border: 1px solid #cfe0f5;
      border-radius: 999px;
      background: #eef4ff;
      color: var(--primary);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.04em;
    }

    .compare-closing {
      max-width: 980px;
      margin: 26px 0 0;
      padding: clamp(22px, 2.8vw, 30px);
      border: 0;
      border-radius: 8px;
      background: linear-gradient(135deg, #12345a 0%, #1f5fd6 100%);
      color: #ffffff;
      font-size: clamp(1.2rem, 1.7vw, 1.48rem);
      line-height: 1.72;
      font-weight: 900;
      text-align: center;
      box-shadow: 0 18px 36px rgba(18, 52, 90, 0.2);
    }

    .compare-closing strong {
      color: inherit;
      font-weight: 900;
    }

    .compare-closing .question-yellow-underline {
      padding: 0 3px 2px;
      background: linear-gradient(transparent 76%, #FEF08A 76%);
      color: inherit;
    }

    .split-panel {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 14px;
      align-items: stretch;
    }

    .split-panel > .logic-note {
      margin-top: 0;
    }

    #community-driven .question-support-panel {
      display: block;
    }

    #community-driven .question-support-panel .logic-list {
      max-width: 720px;
      padding: 14px;
      border: 1px solid #dbe6f2;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(18, 42, 68, 0.06);
    }

    #community-driven .question-support-panel .logic-list li {
      padding: 8px 0 8px 36px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    #community-driven .question-support-panel .logic-list li::before {
      left: 12px;
    }

    #community-driven .question-position {
      max-width: 880px;
      margin: 0 0 20px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #12345a;
    }

    #community-driven .question-position-small {
      display: block;
      color: #5a6f8a;
      font-size: 0.92rem;
      font-weight: 900;
      line-height: 1.5;
    }

    #community-driven .question-position-main {
      display: block;
      margin-top: 4px;
      color: #12345a;
      font-size: clamp(1.08rem, 1.35vw, 1.22rem);
      font-weight: 900;
      line-height: 1.45;
    }

    #community-driven .question-position-main strong {
      color: #b93f23;
      font-weight: 900;
    }

    #community-driven .question-support-copy {
      max-width: 760px;
      margin-top: 16px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #12345a;
    }

    #community-driven .question-support-copy p {
      margin: 0;
    }

    #community-driven .question-support-copy p + p {
      margin-top: 8px;
    }

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

    #community-driven .question-support-commitment {
      margin-top: 14px;
      padding: 14px 16px;
      border: 1px solid #f0c8b8;
      border-left: 5px solid var(--accent);
      border-radius: 8px;
      background: linear-gradient(180deg, #fff8f3 0%, #fffdf9 100%);
      color: #12345a;
      font-weight: 900;
      line-height: 1.72;
    }

    #community-driven .question-support-commitment strong {
      color: #b93f23;
      font-weight: 900;
    }

    .pricing-logic {
      display: grid;
      gap: 14px;
      padding: clamp(22px, 3vw, 34px);
    }

    .pricing-logic p {
      font-size: clamp(1rem, 1.16vw, 1.08rem);
      line-height: 1.95;
    }

    .pricing-logic strong {
      color: #12345a;
      font-weight: 950;
    }

    .pricing-logic .logic-note {
      margin-top: 0;
      padding: 18px 20px;
      border-left-color: var(--accent);
      background: #fff7f2;
      color: #7c2d12;
      font-size: clamp(1.08rem, 1.35vw, 1.22rem);
      text-align: center;
      box-shadow: 0 10px 22px rgba(91, 45, 22, 0.08);
    }

    .pricing-logic .logic-note strong {
      color: #7c2d12;
    }

    .pricing-logic .question-yellow-underline {
      padding-bottom: 2px;
      background: linear-gradient(transparent 72%, #FEF08A 72%);
    }

    #core-message .core-main-card {
      max-width: 980px;
      padding: clamp(18px, 2.5vw, 28px);
      border: 1px solid #d5e0ec;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: var(--shadow);
      gap: 14px;
    }

    #core-message .core-message-intro {
      max-width: 880px;
      margin-bottom: clamp(18px, 2.4vw, 28px);
    }

    #why-question .step-reversal-note {
      margin-top: 22px;
    }

    #core-message .core-message-intro h2 {
      max-width: 820px;
      font-size: clamp(1.95rem, 2.7vw, 2.42rem);
      line-height: 1.22;
      letter-spacing: 0;
      white-space: normal;
      text-wrap: balance;
    }

    #core-message .core-message-intro h2 span {
      color: #12345a;
      text-decoration: none;
    }

    #core-message .core-message-intro p {
      line-height: 1.72;
    }

    #core-message .core-message-lead {
      max-width: 72ch;
      margin-top: 12px;
      color: #294562;
      font-size: clamp(1rem, 1.18vw, 1.08rem);
      font-weight: 700;
    }

    #why-question .section-intro {
      margin-bottom: 12px;
    }

    #core-message .core-main-card::before,
    #core-message .core-main-card::after {
      display: none;
    }

    #core-message .core-problem-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: #12345a;
      font-size: clamp(1.02rem, 1.2vw, 1.12rem);
      line-height: 1.5;
      font-weight: 900;
    }

    #core-message .core-problem-label::before {
      content: "";
      width: 4px;
      height: 1.35em;
      border-radius: 999px;
      background: var(--accent);
      flex: 0 0 auto;
    }

    #core-message .core-main-card .logic-list {
      margin-top: 0;
      padding: 0;
      border: 1px solid #d5e0ec;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(17, 34, 58, 0.08);
      gap: 0;
      overflow: hidden;
    }

    #core-message .core-main-card .logic-list li {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-height: 48px;
      padding: 8px 16px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #17385f;
      line-height: 1.45;
      font-size: clamp(0.95rem, 1.08vw, 1.02rem);
    }

    #core-message .core-main-card .logic-list li + li {
      border-top: 1px solid #e6edf6;
    }

    #core-message .core-main-card .logic-list li::before {
      content: none;
    }

    #core-message .core-list-index {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: #eef4ff;
      color: #1f5fd6;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 900;
      line-height: 1;
    }

    #core-message .core-main-card p {
      margin: 0;
      line-height: 1.7;
    }

    #core-message .core-main-card .logic-list + .core-impact-block {
      margin-top: 18px;
    }

    #core-message .core-main-card p + p {
      margin-top: 12px;
    }

    #core-message .core-impact-block {
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
    }

    #core-message .core-impact-title {
      color: #111827;
      font-size: clamp(1.04rem, 1.25vw, 1.16rem);
      font-weight: 900;
      text-align: center;
      line-height: 1.55;
    }

    #core-message .core-impact-steps {
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 28px;
    }

    #core-message .core-impact-steps li {
      position: relative;
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid #c7ced8;
      border-radius: 8px;
      background: #ffffff;
      color: #111827;
      font-size: 0.84rem;
      font-weight: 900;
      line-height: 1.4;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #core-message .core-impact-steps li::before {
      content: none;
    }

    #core-message .core-impact-steps li + li::before {
      content: "→";
      position: absolute;
      left: -24px;
      top: 50%;
      width: 20px;
      height: 20px;
      transform: translateY(-50%);
      border-radius: 999px;
      border: 1px solid #c7ced8;
      background: #ffffff;
      box-shadow: 0 4px 10px rgba(17, 24, 39, 0.08);
      color: #111827;
      font-size: 0.9rem;
      font-weight: 900;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    #core-message .core-main-card .core-impact-summary {
      max-width: 920px;
      margin: 18px auto 0;
      padding: 18px 22px 20px;
      border: 1px solid #f0c8b8;
      border-left: 5px solid var(--accent);
      border-radius: 8px;
      background: linear-gradient(180deg, #fff8f3 0%, #fffaf6 100%);
      box-shadow: 0 10px 22px rgba(91, 45, 22, 0.08);
      color: #7c2d12;
      font-size: clamp(1.02rem, 1.18vw, 1.1rem);
      line-height: 1.75;
      text-align: center;
      font-weight: 900;
    }

    #core-message .core-main-card .core-impact-quote {
      display: block;
      margin: 0 0 12px;
      color: #12345a;
      font-size: clamp(1.2rem, 2vw, 1.72rem);
      font-weight: 950;
      line-height: 1.55;
      text-wrap: balance;
    }

    #core-message .core-main-card .logic-note {
      max-width: 920px;
      margin: 18px auto 0;
      padding: 15px 18px;
      border: 1px solid #ead58b;
      border-radius: 8px;
      background: #fff8d9;
      box-shadow: 0 8px 18px rgba(92, 68, 14, 0.06);
      text-align: center;
      color: #12345a;
      font-size: clamp(0.98rem, 1.12vw, 1.04rem);
      line-height: 1.65;
    }

    #core-message .core-main-card .core-origin {
      max-width: 920px;
      margin: 16px auto 0;
      padding-top: 0;
      border-top: 0;
      color: #12345a;
      font-size: clamp(0.98rem, 1.12vw, 1.04rem);
      font-weight: 900;
      text-align: center;
    }

    /* Section zebra bands */
    #core-message {
      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);
    }

    #why-question {
      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);
    }

    #community-driven {
      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);
    }

    #community-driven .section-intro p {
      max-width: none;
      font-size: clamp(0.96rem, 1.05vw, 1rem);
    }

    #compare {
      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);
    }

    #service-summary {
      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);
    }

    #fit {
      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);
    }

    #faq-teaser {
      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: 900px) {
      .logic-flow,
      .split-panel {
        grid-template-columns: 1fr;
      }

      #core-message .core-impact-steps {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      #core-message .core-impact-steps li + li::before {
        content: "↓";
        left: 50%;
        top: -12px;
        transform: translate(-50%, -50%);
      }

      .logic-flow {
        gap: 24px;
      }

      .logic-flow li {
        min-height: auto;
      }

      .logic-flow li + li::before {
        content: "↓";
        right: auto;
        top: -12px;
        left: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
      }
    }

    @media (max-width: 760px) {
      .hero h1 {
        font-size: clamp(1.84rem, 7.3vw, 2.35rem);
        line-height: 1.32;
      }

      .hero-main.is-copy-only .lead {
        padding: 12px 13px;
      }

      .section-intro h2,
      .numbered-section-title,
      .service-spotlight .section-intro h2,
      .core-message-showcase .section-intro h2 {
        font-size: clamp(1.62rem, 6.5vw, 2.05rem);
      }

      .message-card,
      .narrative-card,
      .story-quote {
        padding: 16px;
      }

      .logic-list li {
        padding: 12px 12px 12px 36px;
      }

      .logic-list li::before {
        left: 14px;
      }

      #core-message .core-message-intro h2 {
        text-wrap: balance;
        white-space: normal;
      }

      #core-message .core-main-card .logic-list li {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 12px;
      }

      #core-message .core-list-index {
        width: 28px;
        height: 28px;
      }

    }