设计Section 08 · Applications & Project Scenarios

下面是 Section 08 · Applications & Project Scenarios 的完整 Block Editor 操作步骤。
H2 保持全局居中；不添加 "SECTION 08 --- ..." 这种说明文字；不添加 Design Spec；不使用 Ninja Tables；不使用 Fluent Forms；H3 只保留指定的 2 个。

Section 08 最终层级结构

复制代码

[Gutenberg Group] Section 外层
└── [Gutenberg Group] Section inner
    ├── [Gutenberg Group] orange kicker line
    ├── [Gutenberg Heading H2] Applications & Project Scenarios
    ├── [Gutenberg Paragraph] Lead text
    │
    ├── [Gutenberg Heading H3] Industries Where Turnkey Reduces Project Risk
    ├── [Stackable Columns] 4 个行业卡片
    │   ├── H4 Industrial Electronics
    │   ├── H4 Medical Electronics
    │   ├── H4 IoT & Connected Devices
    │   └── H4 Power & Communication
    │
    ├── [Gutenberg Heading H3] Typical Turnkey Project Scenarios
    ├── [Gutenberg Paragraph] scenario note
    └── [Stackable Columns] 3 个 Scenario 卡片
        ├── Scenario 01 · NPI with Complex BOM Risk
        ├── Scenario 02 · Multi-Vendor Consolidation
        └── Scenario 03 · Partial Turnkey with Customer-Supplied Critical Parts

注意：
行业卡片标题不要用 H3，用 H4。
Scenario 卡片标题也不要用 H3，用 H4。

因为你已经指定 Section 08 的 H3 只有两个：

复制代码

H3: Industries Where Turnkey Reduces Project Risk
H3: Typical Turnkey Project Scenarios

一、Blocksy 页面基础确认

Step 1 --- 打开页面编辑器

位置：WordPress 后台 → Pages → Turnkey PCBA 页面 → Edit

你现在主要操作的是：

复制代码

Gutenberg Block Editor
Stackable Columns

Blocksy 只负责主题容器，不要在 Blocksy 里给这个 section 单独设置背景、padding、margin。

不要操作：

复制代码

Blocksy → Page Settings → Spacing
Blocksy → Background
Blocksy → Container Width

Section 08 继续交给你的 V14.2 CSS 模板控制。

二、Section 外层结构

Step 2 --- 添加 Section 外层

组件：Gutenberg → Group

在 Section 07 后面新增一个 Group。

Toolbar 设置：

复制代码

Alignment: Full width

右侧 Advanced → Additional CSS class(es) 填：

复制代码

suga-pillar-section suga-pillar-section--08 suga-pillar-section--applications

不要设置：

复制代码

Background
Padding
Margin
Width
Max-width

说明：

复制代码

suga-pillar-section
= 复用全局 full-bleed 和 section rhythm

suga-pillar-section--08
= section 编号，只放 class，不显示在页面正文

suga-pillar-section--applications
= 语义 modifier，表示应用场景 section

Step 3 --- 添加 Section Inner

组件：Gutenberg → Group

在外层 Group 里面添加一个 Group。

Advanced → Additional CSS class(es) 填：

复制代码

suga-pillar-section__inner

不要设置：

复制代码

width
max-width
左右 padding
background
margin
Spacer

三、Section 标题区域

Step 4 --- 添加橘黄色短线

组件：Gutenberg → Group

在 .suga-pillar-section__inner 里面添加一个空 Group。

Advanced → Additional CSS class(es) 填：

复制代码

suga-pillar-kicker-line

注意：

复制代码

不要用 Gutenberg Separator
不要输入 "------"
不要用空段落模拟线
不要手动设置颜色、高度、宽度

Step 5 --- 添加 H2

组件：Gutenberg → Heading

Heading level 选择：

复制代码

H2

内容输入：

复制代码

Applications & Project Scenarios

Advanced → Additional CSS class(es) 填：

复制代码

suga-pillar-h2

重要：

效果图 H2 是左对齐，但你的规则是 普通 section H2 统一居中 。

所以这里不要添加：

复制代码

has-text-align-left

也不要给 Section 08 写 H2 左对齐 CSS。

Step 6 --- 添加 Lead 文案

组件：Gutenberg → Paragraph

内容输入：

复制代码

Where turnkey delivers the most project-risk reduction --- and how it plays out in practice.

Advanced → Additional CSS class(es) 填：

复制代码

suga-pillar-lead

四、H3 区块 1：Industries Where Turnkey Reduces Project Risk

Step 7 --- 添加 H3

组件：Gutenberg → Heading

Heading level 选择：

复制代码

H3

内容输入：

复制代码

Industries Where Turnkey Reduces Project Risk

Advanced → Additional CSS class(es) 填：

复制代码

suga-applications-subtitle

说明：

这是 Section 08 的第一个正式 H3。

不要加 "SECTION 08" 说明文字。

五、4 个行业卡片

Step 8 --- 添加行业卡片父级

组件：Stackable → Columns

在 H3 后面添加 Stackable Columns。

建议设置：

复制代码

Columns: 4

Advanced → Additional CSS class(es) 填：

复制代码

suga-stack-grid suga-applications-industry-grid

说明：

复制代码

suga-stack-grid
= 复用全局 Stackable Columns 兼容层

suga-applications-industry-grid
= Section 08 独有行业卡片 grid

不要用：

复制代码

Gutenberg Columns
suga-card-grid
普通 CSS display:grid 接管 Stackable

Step 9 --- Industry Card 01

组件：Stackable → Column

第 1 个 Column 的 Advanced class 填：

复制代码

suga-applications-industry-grid__item

在 Column 内添加一个 Group。

组件：Gutenberg → Group

Advanced class：

复制代码

suga-applications-industry-card suga-applications-industry-card--01

里面依次添加：

9.1 行业标题

组件：Gutenberg → Heading

Heading level：

复制代码

H4

内容：

复制代码

Industrial Electronics

Advanced class：

复制代码

suga-applications-industry-card__title

9.2 行业描述

组件：Gutenberg → Paragraph

内容：

复制代码

Control boards, drives, sensors

Advanced class：

复制代码

suga-applications-industry-card__meta

9.3 Common risk label

组件：Gutenberg → Paragraph

内容：

复制代码

Common risk:

Advanced class：

复制代码

suga-applications-industry-card__label

9.4 Common risk 正文

组件：Gutenberg → Paragraph

内容：

复制代码

Long product lifecycles require lifecycle-aware sourcing and strong revision control.

Advanced class：

复制代码

suga-applications-industry-card__text

9.5 Turnkey fit

组件：Gutenberg → Paragraph

内容：

复制代码

Turnkey fit: High

Advanced class：

复制代码

suga-applications-industry-card__fit

Step 10 --- Industry Card 02

组件：Stackable → Column

Column class：

复制代码

suga-applications-industry-grid__item

内部 Group class：

复制代码

suga-applications-industry-card suga-applications-industry-card--02

内容：

复制代码

H4:
Medical Electronics

Meta:
Per project-specified requirements

Label:
Common risk:

Text:
Traceability and documentation discipline require across sourcing and assembly.

Fit:
Turnkey fit: High (with Quality Agreement)

对应 class：

复制代码

suga-applications-industry-card__title
suga-applications-industry-card__meta
suga-applications-industry-card__label
suga-applications-industry-card__text
suga-applications-industry-card__fit

注意：

这里不要写成 "certified medical electronics manufacturing"。

也不要暗示默认具备医疗认证。只写 per project-specified requirements。

Step 11 --- Industry Card 03

组件：Stackable → Column

Column class：

复制代码

suga-applications-industry-grid__item

内部 Group class：

复制代码

suga-applications-industry-card suga-applications-industry-card--03

内容：

复制代码

H4:
IoT & Connected Devices

Meta:
Wireless, gateway, sensor modules

Label:
Common risk:

Text:
Component availability swings and fast NPI-to-production transitions drive schedule volatility.

Fit:
Turnkey fit: High

Step 12 --- Industry Card 04

组件：Stackable → Column

Column class：

复制代码

suga-applications-industry-grid__item

内部 Group class：

复制代码

suga-applications-industry-card suga-applications-industry-card--04

内容：

复制代码

H4:
Power & Communication

Meta:
Power electronics, comms devices

Label:
Common risk:

Text:
Mixed-technology builds with SMT + THT, connectors, thermal and EMI considerations.

Fit:
Turnkey fit: High

六、H3 区块 2：Typical Turnkey Project Scenarios

Step 13 --- 添加第二个 H3

组件：Gutenberg → Heading

Heading level：

复制代码

H3

内容输入：

复制代码

Typical Turnkey Project Scenarios

Advanced → Additional CSS class(es) 填：

复制代码

suga-applications-subtitle

Step 14 --- 添加 Scenario 说明

组件：Gutenberg → Paragraph

内容输入：

复制代码

Scenarios represent typical project patterns, not individual customer case studies.

Advanced → Additional CSS class(es) 填：

复制代码

suga-applications-scenario-note

说明：

这句话很重要。它可以避免用户误解为真实客户案例。

不要写 "Case Study"。

七、3 个 Scenario 卡片

Step 15 --- 添加 Scenario 父级

组件：Stackable → Columns

在 Scenario note 后面添加 Stackable Columns。

建议设置：

复制代码

Columns: 3

Advanced → Additional CSS class(es) 填：

复制代码

suga-stack-grid suga-applications-scenario-grid

Step 16 --- Scenario 01

组件：Stackable → Column

Column class：

复制代码

suga-applications-scenario-grid__item

在 Column 内添加 Group。

组件：Gutenberg → Group

Group class：

复制代码

suga-applications-scenario-card suga-applications-scenario-card--01

里面依次添加：

16.1 Scenario label

组件：Gutenberg → Paragraph

内容：

复制代码

SCENARIO 01

Advanced class：

复制代码

suga-applications-scenario-card__label

16.2 Scenario title

组件：Gutenberg → Heading

Heading level：

复制代码

H4

内容：

复制代码

NPI with Complex BOM Risk

Advanced class：

复制代码

suga-applications-scenario-card__title

16.3 The Situation

组件：Gutenberg → Paragraph

内容：

复制代码

The Situation

Advanced class：

复制代码

suga-applications-scenario-card__mini-title

组件：Gutenberg → Paragraph

内容：

复制代码

New product, 450+ line BOM, several long-lead ICs.

Advanced class：

复制代码

suga-applications-scenario-card__text

16.4 The Challenge

组件：Gutenberg → Paragraph

内容：

复制代码

The Challenge

Advanced class：

复制代码

suga-applications-scenario-card__mini-title

组件：Gutenberg → Paragraph

内容：

复制代码

Uncertain lead times, revision changes during NPI, no BOM buffer.

Advanced class：

复制代码

suga-applications-scenario-card__text

16.5 What Turnkey Solved

组件：Gutenberg → Paragraph

内容：

复制代码

What Turnkey Solved

Advanced class：

复制代码

suga-applications-scenario-card__mini-title

组件：Gutenberg → Paragraph

内容：

复制代码

Early flagging of long-lead parts, pre-approved alternates, revision-controlled handoff.

Advanced class：

复制代码

suga-applications-scenario-card__text

16.6 Likely Outcome

组件：Gutenberg → Paragraph

内容：

复制代码

Likely Outcome: NPI schedule protected

Advanced class：

复制代码

suga-applications-scenario-card__outcome

Step 17 --- Scenario 02

组件：Stackable → Column

Column class：

复制代码

suga-applications-scenario-grid__item

内部 Group class：

复制代码

suga-applications-scenario-card suga-applications-scenario-card--02

内容：

复制代码

Label:
SCENARIO 02

H4:
Multi-Vendor Consolidation

The Situation:
Customer previously ran fab + procurement + assembly separately.

The Challenge:
Coordination overhead, accountability gaps, schedule misalignment.

What Turnkey Solved:
Single point of contact, integrated sourcing + build plan, one quality system.

Likely Outcome:
Likely Outcome: Lower coordination cost

对应 class 与 Scenario 01 一致。

Step 18 --- Scenario 03

组件：Stackable → Column

Column class：

复制代码

suga-applications-scenario-grid__item

内部 Group class：

复制代码

suga-applications-scenario-card suga-applications-scenario-card--03

内容：

复制代码

Label:
SCENARIO 03

H4:
Partial Turnkey --- Critical Parts

The Situation:
Customer owns contracts for critical ICs, wants us to handle the rest.

The Challenge:
Split accountability, inventory risk on customer-supplied parts.

What Turnkey Solved:
Clear responsibility matrix, joint review on readiness, attrition allowance defined up front.

Likely Outcome:
Likely Outcome: No blame-game zone

说明：

这里用 Partial Turnkey --- Critical Parts ，不要写成真实客户案例。

不要写 "a European customer" / "a US medical client"。

八、最终 List View 应该是这样

复制代码

Group --- suga-pillar-section suga-pillar-section--08 suga-pillar-section--applications
└── Group --- suga-pillar-section__inner
    ├── Group --- suga-pillar-kicker-line
    ├── Heading H2 --- suga-pillar-h2
    ├── Paragraph --- suga-pillar-lead
    │
    ├── Heading H3 --- suga-applications-subtitle
    ├── Stackable Columns --- suga-stack-grid suga-applications-industry-grid
    │   ├── Stackable Column --- suga-applications-industry-grid__item
    │   │   └── Group --- suga-applications-industry-card suga-applications-industry-card--01
    │   ├── Stackable Column --- suga-applications-industry-grid__item
    │   │   └── Group --- suga-applications-industry-card suga-applications-industry-card--02
    │   ├── Stackable Column --- suga-applications-industry-grid__item
    │   │   └── Group --- suga-applications-industry-card suga-applications-industry-card--03
    │   └── Stackable Column --- suga-applications-industry-grid__item
    │       └── Group --- suga-applications-industry-card suga-applications-industry-card--04
    │
    ├── Heading H3 --- suga-applications-subtitle
    ├── Paragraph --- suga-applications-scenario-note
    └── Stackable Columns --- suga-stack-grid suga-applications-scenario-grid
        ├── Stackable Column --- suga-applications-scenario-grid__item
        │   └── Group --- suga-applications-scenario-card suga-applications-scenario-card--01
        ├── Stackable Column --- suga-applications-scenario-grid__item
        │   └── Group --- suga-applications-scenario-card suga-applications-scenario-card--02
        └── Stackable Column --- suga-applications-scenario-grid__item
            └── Group --- suga-applications-scenario-card suga-applications-scenario-card--03

九、本 Section 不使用的组件

复制代码

Ninja Tables：不用
Fluent Forms：不用
Gutenberg Table：不用
Gutenberg Columns：不用
Spacer：不用
Separator：不用
Cover：不用
Media & Text：不用

原因：

复制代码

这是应用场景和项目模式展示，不是表格数据，不是询盘表单，也不是媒体布局。

十、必须避免的错误

复制代码

不要添加 "SECTION 08 --- APPLICATIONS & SCENARIOS"
不要添加 Design Spec
不要把 H2 改成左对齐
不要把行业卡片标题设为 H3
不要把 Scenario 卡片标题设为 H3
不要使用 Case Study 标签
不要虚构真实客户，例如 "a European automotive customer"
不要写 "US medical client"
不要为 4 个行业做成独立垂直页入口
不要把 Industries / Scenarios 做成 Ninja Table
不要在 inner 上设置背景色
不要用 Spacer 制造间距
不要在 Stackable Column 和内部 Group 同时添加 card class

十一、后续 Section 08 CSS 只允许新增这些类

复制代码

.suga-pillar-section--08
.suga-pillar-section--applications

.suga-applications-subtitle

.suga-applications-industry-grid
.suga-applications-industry-grid__item
.suga-applications-industry-card
.suga-applications-industry-card--01
.suga-applications-industry-card--02
.suga-applications-industry-card--03
.suga-applications-industry-card--04
.suga-applications-industry-card__title
.suga-applications-industry-card__meta
.suga-applications-industry-card__label
.suga-applications-industry-card__text
.suga-applications-industry-card__fit

.suga-applications-scenario-note
.suga-applications-scenario-grid
.suga-applications-scenario-grid__item
.suga-applications-scenario-card
.suga-applications-scenario-card--01
.suga-applications-scenario-card--02
.suga-applications-scenario-card--03
.suga-applications-scenario-card__label
.suga-applications-scenario-card__title
.suga-applications-scenario-card__mini-title
.suga-applications-scenario-card__text
.suga-applications-scenario-card__outcome

不能再碰：

复制代码

.suga-pillar-section full-bleed
.suga-pillar-section__inner width / max-width / 左右 padding
.suga-pillar-h2 全局对齐
.suga-pillar-lead 全局对齐
.suga-stack-grid 基础兼容
Gutenberg gap reset
section outer margin

/* =========================================================
   SUGA TURNKEY PCBA PILLAR TEMPLATE --- COMPLETE CSS V14.2
   Scope: Hero + Section 02 + Section 03 + Section 04 + reusable global components
   Stack: Blocksy + Gutenberg + Stackable + Ninja Tables

   =========================================================
   V14.2 RED LINES / 禁止红线
   =========================================================
   01) Do NOT redefine .suga-pillar-section full-bleed per section.
   02) Do NOT redefine .suga-pillar-section__inner width / max-width / left-right padding per section.
   03) Do NOT use section outer margin-top / margin-bottom to create spacing.
   04) Do NOT use Gutenberg Spacer / empty paragraph / Separator to create section gaps.
   05) Do NOT put section background on .suga-pillar-section__inner.
   06) Do NOT use Gutenberg Separator for the orange kicker line.
       Use an empty Gutenberg Group with class: suga-pillar-kicker-line.
   07) Do NOT show SECTION 03 --- SERVICE SCOPE as front-end body copy.
       Section number belongs in class: suga-pillar-section--03.
   08) Do NOT manually insert legend dots.
       Legend dots are generated by CSS ::before on .suga-table-legend__item.
   09) Do NOT control Stackable Columns with plain .suga-card-grid display:grid.
       Stackable Columns must be controlled through .stk-row inside .suga-stack-grid.
   10) Do NOT redefine normal section H2 alignment per section.
       All normal section H2 areas are centered by default.
       Hero is excluded because it uses .suga-pcba-hero__h2.
   11) Do NOT create one-off class names such as turnkey-section-three.
       Use suga-pillar-section--03 + semantic modifier such as suga-pillar-section--scope.
   12) Section-specific CSS may only define:
       background, section rhythm variables, and unique internal component differences.

   =========================================================
   V14.2 SECTION RHYTHM RULE / Section 间距统一规则
   =========================================================
   13) All normal sections must use the global rhythm owner:
       .suga-pillar-section + .suga-pillar-section__inner.
   14) Do NOT write independent padding-top / padding-bottom numbers inside
       Section 02 / 03 / 04 / 05 blocks unless it is a deliberate exception.
   15) Default section spacing is controlled by CSS variables:
       --suga-section-padding-top
       --suga-section-padding-bottom
   16) New sections should inherit the default rhythm. If a section truly needs
       different spacing, override only the variables on the outer section.
   17) Adjacent-section distance is NOT controlled by margin-bottom, Spacer,
       empty paragraphs, or Stackable block margins.
   18) For stacked same-background sections, keep the top padding compact and
       bottom padding standard to avoid double-spacing between sections.
   19) The orange kicker line must NEVER create top distance.
       .suga-pillar-kicker-line must keep margin-top / margin-block-start at 0.
   20) The distance above the orange kicker line belongs to section rhythm only.
       Do not fix it with section-specific negative margin or one-off line CSS.
   21) The last direct child inside .suga-pillar-section__inner must not carry
       margin-bottom / margin-block-end into the next section.
   22) .suga-section-note / .suga-table-wrap / .suga-table-legend / Stackable
       blocks may create internal spacing, but their terminal margin is removed
       when they are the last visual block in a section.

   =========================================================
   V14.2 NAMING STANDARD / 命名标准
   =========================================================
   Hero:
   - suga-pcba-hero
   - suga-pcba-hero__inner
   - suga-pcba-hero__content

   Normal Section:
   - suga-pillar-section
   - suga-pillar-section--02 / --03 / --04 ...
   - suga-pillar-section--definition / --scope / --comparison ...
   - suga-pillar-section__inner

   Heading:
   - suga-pillar-kicker-line
   - suga-pillar-h2
   - suga-pillar-lead

   Note:
   - suga-section-note
   - suga-section-note__text

   Table:
   - suga-table-title
   - suga-table-meta
   - suga-table-wrap
   - suga-table-legend
   - suga-table-legend__grid
   - suga-table-legend__item
   - suga-table-legend__item--default
   - suga-table-legend__item--project
   - suga-table-legend__item--applicable

   Grid / Cards:
   - suga-card-grid
   - suga-card-grid--2 / --3
   - suga-stack-grid
   - suga-stack-grid--2 / --3
   - suga-preview-card
   - suga-preview-card__title
   - suga-preview-card__text

   Comparison / CTA:
   - suga-compare-card
   - suga-compare-card--primary / --dark / --muted
   - suga-compare-card__title / __label / __list / __foot
   - suga-section-cta
   - suga-section-cta__copy / __title / __text / __action / __button
   ========================================================= */


/* =========================================================
   0) GLOBAL VARIABLES
   Only define once.
   ========================================================= */

body[data-prefix="single_page"] {
  --suga-page-max-width: 1240px;

  /* Unified side padding: Hero + all normal Sections */
  --suga-page-side-padding: 60px;
  --suga-page-side-padding-tablet: 24px;
  --suga-page-side-padding-mobile: 20px;

  /* V14.2 unified section rhythm.
     This is the ONLY default vertical spacing system for normal sections.
     The orange kicker line must not add top distance by itself.
     Terminal component margins are guarded later so section-to-section spacing
     cannot be inflated by the previous section's last block. */
  --suga-section-padding-top: 4px;
  --suga-section-padding-bottom: 32px;
  --suga-section-padding-top-tablet: 4px;
  --suga-section-padding-bottom-tablet: 30px;
  --suga-section-padding-top-mobile: 4px;
  --suga-section-padding-bottom-mobile: 28px;

  /* Internal component gaps only. Not for section-to-section spacing. */
  --suga-section-gap-compact: 20px;
  --suga-component-gap-default: 24px;
  --suga-component-gap-loose: 32px;

  --suga-color-navy: #0b2745;
  --suga-color-hero-navy: #081a2e;
  --suga-color-title: #102a46;
  --suga-color-h2: #0b2038;
  --suga-color-text: #52677e;
  --suga-color-muted: #6a7f94;
  --suga-color-orange: #FD5320;
  --suga-color-section-blue: #eef4fa;
  --suga-color-border: #d7e1ea;
  --suga-color-border-strong: #d9e3ec;
}


/* =========================================================
   1) GLOBAL GUTENBERG / BLOCKSY GAP RESET
   This prevents white gaps between sections.
   Do not redefine this per section.
   ========================================================= */

body[data-prefix="single_page"] .entry-content.is-layout-constrained > *,
body[data-prefix="single_page"] .entry-content.is-layout-flow > *,
body[data-prefix="single_page"] .entry-content > * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}


/* =========================================================
   2) FULL-BLEED FOUNDATION
   Hero + all normal Sections use this.
   Do not redefine per section.
   ========================================================= */

body[data-prefix="single_page"] .entry-content .suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .wp-block-group.suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .stk-block.suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .suga-pillar-section,
body[data-prefix="single_page"] .entry-content .wp-block-group.suga-pillar-section,
body[data-prefix="single_page"] .entry-content .stk-block.suga-pillar-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body[data-prefix="single_page"] .suga-pcba-hero,
body[data-prefix="single_page"] .suga-pcba-hero *,
body[data-prefix="single_page"] .suga-pillar-section,
body[data-prefix="single_page"] .suga-pillar-section * {
  box-sizing: border-box;
}


/* =========================================================
   3) UNIFIED INNER WIDTH + SIDE PADDING
   Only width and left-right padding are defined here.
   Normal-section vertical rhythm is defined in Section 6.
   Do not redefine side padding per section.
   ========================================================= */

body[data-prefix="single_page"] .suga-pcba-hero__inner,
body[data-prefix="single_page"] .suga-pillar-section__inner {
  width: 100% !important;
  max-width: var(--suga-page-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--suga-page-side-padding) !important;
  padding-right: var(--suga-page-side-padding) !important;
  box-sizing: border-box !important;
}

body[data-prefix="single_page"] .suga-pcba-hero__inner.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pillar-section__inner.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-pcba-hero__inner,
  body[data-prefix="single_page"] .suga-pillar-section__inner {
    max-width: none !important;
    padding-left: var(--suga-page-side-padding-tablet) !important;
    padding-right: var(--suga-page-side-padding-tablet) !important;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-pcba-hero__inner,
  body[data-prefix="single_page"] .suga-pillar-section__inner {
    padding-left: var(--suga-page-side-padding-mobile) !important;
    padding-right: var(--suga-page-side-padding-mobile) !important;
  }
}


/* =========================================================
   4) HERO MODULE
   Hero keeps its own visual system.
   Normal section H2 centering does not affect Hero.
   ========================================================= */

body[data-prefix="single_page"] .entry-content.is-layout-constrained {
  overflow: visible !important;
}

body[data-prefix="single_page"] .entry-content.is-layout-constrained > .suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .suga-pcba-hero.alignfull,
body[data-prefix="single_page"] .entry-content .wp-block-group.suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .stk-block.suga-pcba-hero,
body[data-prefix="single_page"] .suga-pcba-hero {
  --suga-pcba-hero-bg-image: none;
  position: relative;
  z-index: 1;
  display: block !important;
  background-color: var(--suga-color-hero-navy) !important;
  background-image: linear-gradient(90deg, #041526 0%, #0a2741 42%, #123b61 100%) !important;
}

body[data-prefix="single_page"] .suga-pcba-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--suga-pcba-hero-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.24;
  transform: scale(1.01);
}

body[data-prefix="single_page"] .suga-pcba-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(4, 18, 31, 0.94) 0%,
    rgba(8, 28, 46, 0.90) 28%,
    rgba(12, 38, 62, 0.80) 56%,
    rgba(18, 59, 97, 0.56) 100%
  );
}

body[data-prefix="single_page"] .suga-pcba-hero > .wp-block-group__inner-container,
body[data-prefix="single_page"] .suga-pcba-hero > .stk-container,
body[data-prefix="single_page"] .suga-pcba-hero > .stk-content-align,
body[data-prefix="single_page"] .suga-pcba-hero .stk-content-align,
body[data-prefix="single_page"] .suga-pcba-hero .stk-container {
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hero inner: only vertical spacing here. Left-right comes from global inner variables. */
body[data-prefix="single_page"] .suga-pcba-hero__inner {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 36px !important;
}

body[data-prefix="single_page"] .suga-pcba-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-breadcrumbs.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-hero__content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-trust-wrap.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-trust-grid.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-trust-copy.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Breadcrumbs */
body[data-prefix="single_page"] .suga-pcba-breadcrumbs,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs {
  margin: 0 0 18px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transform: none !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs a,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs span,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs [itemprop="name"],
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs .last-item {
  color: rgba(231, 238, 247, 0.84) !important;
  text-decoration: none !important;
}

body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs .ct-separator {
  color: rgba(231, 238, 247, 0.58) !important;
  fill: currentColor !important;
}

body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs a:hover {
  color: #ffffff !important;
}

/* Hero divider */
body[data-prefix="single_page"] .suga-pcba-hero-divider,
body[data-prefix="single_page"] .suga-pcba-hero__line {
  display: block !important;
  width: 128px !important;
  max-width: 128px !important;
  min-width: 128px !important;
  margin: 0 0 20px !important;
  text-align: left !important;
  border: 0 !important;
  opacity: 1 !important;
  background: transparent !important;
}

body[data-prefix="single_page"] .suga-pcba-hero-divider {
  height: 4px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  border: 0 !important;
  background: var(--suga-color-orange) !important;
}

body[data-prefix="single_page"] .suga-pcba-hero__line hr,
body[data-prefix="single_page"] .suga-pcba-hero__line .stk-block-divider__hr {
  height: 4px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  border: 0 !important;
  background: var(--suga-color-orange) !important;
}

/* Hero content */
body[data-prefix="single_page"] .suga-pcba-hero__content {
  max-width: 1080px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hero H1 */
body[data-prefix="single_page"] .suga-pcba-hero-h1,
body[data-prefix="single_page"] .suga-pcba-hero-h1 h1,
body[data-prefix="single_page"] .suga-pcba-hero-h1 .stk-block-heading__text,
body[data-prefix="single_page"] .suga-pcba-hero__h1,
body[data-prefix="single_page"] .suga-pcba-hero__h1 h1,
body[data-prefix="single_page"] .suga-pcba-hero__h1 .stk-block-heading__text {
  margin: 0 0 24px !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: var(--suga-color-orange) !important;
  -webkit-text-fill-color: var(--suga-color-orange) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hero H2 */
body[data-prefix="single_page"] .suga-pcba-hero__h2,
body[data-prefix="single_page"] .suga-pcba-hero__h2 h2,
body[data-prefix="single_page"] .suga-pcba-hero__h2 .stk-block-heading__text,
body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__h2 .stk-container,
body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content h2 {
  max-width: 1040px !important;
  margin: 0 0 44px !important;
  font-size: clamp(34px, 3.2vw, 40px) !important;
  line-height: 1.06 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: left !important;
  text-shadow: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-wrap: pretty;
}

/* Hero description */
body[data-prefix="single_page"] .suga-pcba-hero-subtext,
body[data-prefix="single_page"] .suga-pcba-hero__desc,
body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content > p {
  max-width: 840px !important;
  margin: 0 0 60px !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #d7e2ee !important;
}

/* Hero CTA */
body[data-prefix="single_page"] .suga-pcba-hero-actions,
body[data-prefix="single_page"] .suga-pcba-hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-pcba-hero-actions .wp-block-button,
body[data-prefix="single_page"] .suga-pcba-hero__actions .wp-block-button {
  margin: 0 !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 196px !important;
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 0 !important;
  border: 1px solid var(--suga-color-orange) !important;
  background: var(--suga-color-orange) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 0 0 0 rgba(253, 83, 32, 0.00) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
  animation: sugaHeroCtaPulse 2.2s ease-in-out infinite !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link::before,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #ff6e3a 0%, var(--suga-color-orange) 52%, #ff7b4c 100%);
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link::after,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -35%;
  width: 24%;
  height: 140%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  animation: sugaHeroCtaShine 2.8s ease-in-out infinite;
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link:hover,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link:hover {
  transform: translateY(-1px) scale(1.015) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 10px 28px rgba(253, 83, 32, 0.30), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link:focus-visible,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link:focus-visible {
  outline: 2px solid rgba(255,255,255,0.90) !important;
  outline-offset: 3px !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-secondary .wp-block-button__link,
body[data-prefix="single_page"] .suga-pcba-btn--secondary .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 196px !important;
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-secondary .wp-block-button__link:hover,
body[data-prefix="single_page"] .suga-pcba-btn--secondary .wp-block-button__link:hover {
  border-color: rgba(255,255,255,0.72) !important;
  background: rgba(255,255,255,0.06) !important;
  transform: translateY(-1px) !important;
}

/* Hero Trust */
body[data-prefix="single_page"] .suga-pcba-trust-wrap {
  margin-top: 44px !important;
  padding-top: 30px !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: start !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-icon {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--suga-color-orange) !important;
  border-radius: 50% !important;
  color: var(--suga-color-orange) !important;
  transform: translateY(1px);
}

body[data-prefix="single_page"] .suga-pcba-trust-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-title,
body[data-prefix="single_page"] .suga-pcba-trust-title h4,
body[data-prefix="single_page"] .suga-pcba-trust-copy h4 {
  margin: 0 0 6px !important;
  font-size: 21px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-desc,
body[data-prefix="single_page"] .suga-pcba-trust-copy p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #c5d3e2 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

@keyframes sugaHeroCtaPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(253, 83, 32, 0.00), 0 0 0 0 rgba(253, 83, 32, 0.00);
    filter: brightness(1);
  }
  35% {
    box-shadow: 0 8px 22px rgba(253, 83, 32, 0.26), 0 0 0 6px rgba(253, 83, 32, 0.08);
    filter: brightness(1.04);
  }
  70% {
    box-shadow: 0 10px 28px rgba(253, 83, 32, 0.18), 0 0 0 12px rgba(253, 83, 32, 0.00);
    filter: brightness(1.01);
  }
}

@keyframes sugaHeroCtaShine {
  0% {
    left: -35%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  45% {
    left: 125%;
    opacity: 0;
  }
  100% {
    left: 125%;
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-pcba-hero__inner {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__content {
    max-width: 100% !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 .stk-block-heading__text,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content h2 {
    max-width: 920px !important;
    font-size: clamp(32px, 4.3vw, 38px) !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 28px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-title,
  body[data-prefix="single_page"] .suga-pcba-trust-title h4,
  body[data-prefix="single_page"] .suga-pcba-trust-copy h4 {
    font-size: 19px !important;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-pcba-hero::before {
    background-position: 64% center;
    opacity: 0.20;
  }

  body[data-prefix="single_page"] .suga-pcba-hero::after {
    background: linear-gradient(
      180deg,
      rgba(4, 18, 31, 0.95) 0%,
      rgba(8, 28, 46, 0.91) 42%,
      rgba(14, 43, 70, 0.83) 100%
    );
  }

  body[data-prefix="single_page"] .suga-pcba-hero__inner {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-breadcrumbs,
  body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 .stk-block-heading__text,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.08 !important;
    margin-bottom: 34px !important;
    text-wrap: balance !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero-subtext,
  body[data-prefix="single_page"] .suga-pcba-hero__desc,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content > p {
    font-size: 17px !important;
    line-height: 1.68 !important;
    margin-bottom: 44px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero-actions,
  body[data-prefix="single_page"] .suga-pcba-hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn-secondary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn--secondary .wp-block-button__link {
    width: 100% !important;
    min-width: 100% !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-wrap {
    margin-top: 34px !important;
    padding-top: 24px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-item {
    gap: 14px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-icon {
    flex-basis: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-title,
  body[data-prefix="single_page"] .suga-pcba-trust-title h4,
  body[data-prefix="single_page"] .suga-pcba-trust-copy h4 {
    font-size: 18px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-desc,
  body[data-prefix="single_page"] .suga-pcba-trust-copy p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px) {
  body[data-prefix="single_page"] .suga-pcba-hero-h1,
  body[data-prefix="single_page"] .suga-pcba-hero-h1 h1,
  body[data-prefix="single_page"] .suga-pcba-hero-h1 .stk-block-heading__text {
    font-size: 15px !important;
    letter-spacing: 0.09em !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 .stk-block-heading__text,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 9.8vw, 38px) !important;
    text-wrap: balance !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero-subtext,
  body[data-prefix="single_page"] .suga-pcba-hero__desc,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content > p {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link::after,
  body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link::after {
    animation: none !important;
    transition: none !important;
  }
}


/* Background image interface:
body[data-prefix="single_page"] .entry-content .suga-pcba-hero {
  --suga-pcba-hero-bg-image: url("your-image.webp");
}
*/


/* =========================================================
   5) SECTION BACKGROUNDS
   Background belongs to outer section only.
   Section 02 / 03 / 04 currently share the same blue background.
   Future sections add only their own background here.
   ========================================================= */

body[data-prefix="single_page"] .suga-pillar-section--02,
body[data-prefix="single_page"] .suga-pillar-section--definition,
body[data-prefix="single_page"] .suga-pillar-section--03,
body[data-prefix="single_page"] .suga-pillar-section--scope,
body[data-prefix="single_page"] .suga-pillar-section--04,
body[data-prefix="single_page"] .suga-pillar-section--comparison {
  background: var(--suga-color-section-blue) !important;
}


/* =========================================================
   6) UNIFIED NORMAL SECTION VERTICAL RHYTHM
   This is the single spacing owner for all normal sections.

   Why V14.2 changed this:
   - V13 allowed Section 02 / 03 / 04 to each define separate padding.
   - Early V14 unified the rhythm, but the orange kicker line still needed
     a stricter logical margin reset.
   - Adjacent sections can visually double the distance when these are mixed:
     previous bottom padding + next top padding + Gutenberg block gap + kicker margin.
   - V14.1 prevented that by giving every normal section one shared rhythm
     and forcing the kicker line to contribute zero top distance.
   - V14.2 adds the terminal margin guard so the previous section
     cannot add extra bottom space through its last component.

   Rules:
   - Do not add margin-top / margin-bottom to section wrappers.
   - Do not use Spacer / empty paragraph / Separator for gaps.
   - Do not redefine .suga-pillar-section__inner width or side padding.
   - Future Section 05 / 06 should inherit this default rhythm.
   - If a future section really needs special spacing, override only:
     --suga-section-padding-top / --suga-section-padding-bottom
     on the OUTER .suga-pillar-section--XX class.
   - Do not use .suga-pillar-kicker-line margin-top to close gaps.
     Its top margin must stay 0 forever.
   ========================================================= */

body[data-prefix="single_page"] .suga-pillar-section {
  --suga-section-current-padding-top: var(--suga-section-padding-top);
  --suga-section-current-padding-bottom: var(--suga-section-padding-bottom);
}

body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-section__inner {
  padding-top: var(--suga-section-current-padding-top) !important;
  padding-bottom: var(--suga-section-current-padding-bottom) !important;
}

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-pillar-section {
    --suga-section-current-padding-top: var(--suga-section-padding-top-tablet);
    --suga-section-current-padding-bottom: var(--suga-section-padding-bottom-tablet);
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-pillar-section {
    --suga-section-current-padding-top: var(--suga-section-padding-top-mobile);
    --suga-section-current-padding-bottom: var(--suga-section-padding-bottom-mobile);
  }
}

/* Optional future exception pattern --- keep as comment only.
   Use outer-section variables, not hard-coded inner padding.
body[data-prefix="single_page"] .suga-pillar-section--05 {
  --suga-section-padding-top: 4px;
  --suga-section-padding-bottom: 44px;
}
*/


/* =========================================================
   6.1) V14.2 SECTION TERMINAL MARGIN GUARD
   This prevents the previous section's final component from inflating
   the visual gap before the next section's orange kicker line.

   Why this exists:
   - Section rhythm controls top/bottom section spacing.
   - Shared components may still have margin-bottom for internal layout.
   - When a component is the last visual block in a section, that margin
     must collapse to 0. Otherwise, the visible section gap becomes:
     last component margin-bottom + section padding-bottom + next padding-top.

   Rules:
   - Do not solve section gaps with negative margin.
   - Do not create Section 04-only spacing exceptions for this issue.
   - Keep this guard global so Section 05 / 06 inherit the same behavior.
   ========================================================= */

body[data-prefix="single_page"] .suga-pillar-section__inner > :last-child {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

body[data-prefix="single_page"] .suga-pillar-section__inner > .suga-section-note:last-child,
body[data-prefix="single_page"] .suga-pillar-section__inner > .suga-stack-grid:last-child,
body[data-prefix="single_page"] .suga-pillar-section__inner > .suga-card-grid:last-child,
body[data-prefix="single_page"] .suga-pillar-section__inner > .suga-table-wrap:last-child,
body[data-prefix="single_page"] .suga-pillar-section__inner > .suga-table-legend:last-child,
body[data-prefix="single_page"] .suga-pillar-section__inner > .stk-block:last-child,
body[data-prefix="single_page"] .suga-pillar-section__inner > .wp-block-group:last-child,
body[data-prefix="single_page"] .suga-pillar-section__inner > .wp-block-columns:last-child {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

body[data-prefix="single_page"] .suga-section-note > :last-child,
body[data-prefix="single_page"] .suga-table-wrap > :last-child,
body[data-prefix="single_page"] .suga-table-legend > :last-child,
body[data-prefix="single_page"] .suga-card-grid > :last-child,
body[data-prefix="single_page"] .suga-stack-grid > :last-child {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

/* Defensive cleanup only inside the pillar system.
   Empty paragraphs must not be used as spacing controls. */
body[data-prefix="single_page"] .suga-pillar-section__inner > p:empty,
body[data-prefix="single_page"] .suga-section-note > p:empty,
body[data-prefix="single_page"] .suga-table-wrap > p:empty,
body[data-prefix="single_page"] .suga-table-legend > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}


/* =========================================================
   7) SHARED SECTION HEADING COMPONENTS
   Default: centered for all normal sections.
   Hero is excluded.
   ========================================================= */

body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-kicker-line {
  display: block !important;
  width: 60px !important;
  max-width: 60px !important;
  min-width: 60px !important;
  height: 4px !important;
  min-height: 4px !important;

  /* V14.2 critical rhythm lock:
     The orange kicker line is the first visual element inside normal sections.
     It must NEVER add top distance. Distance from the previous section is
     controlled only by the unified section rhythm variables above. */
  margin-top: 0 !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  margin-left: auto !important;
  margin-block-start: 0 !important;
  margin-block-end: 14px !important;

  padding: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;

  border: 0 !important;
  background: var(--suga-color-orange) !important;
  background-color: var(--suga-color-orange) !important;
  opacity: 1 !important;
}

body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-h2,
body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-h2 h2,
body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-h2 .stk-block-heading__text {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 18px !important;
  font-size: 40px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--suga-color-h2) !important;
  -webkit-text-fill-color: var(--suga-color-h2) !important;
  text-align: center !important;
  text-wrap: pretty;
}

body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-lead {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto 32px !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--suga-color-text) !important;
  text-align: center !important;
}

/* Explicit opt-out for rare left-aligned section heading */
body[data-prefix="single_page"] .suga-pillar-section--left-head .suga-pillar-kicker-line {
  margin-left: 0 !important;
  margin-right: auto !important;
}

body[data-prefix="single_page"] .suga-pillar-section--left-head .suga-pillar-h2,
body[data-prefix="single_page"] .suga-pillar-section--left-head .suga-pillar-h2 h2,
body[data-prefix="single_page"] .suga-pillar-section--left-head .suga-pillar-h2 .stk-block-heading__text,
body[data-prefix="single_page"] .suga-pillar-section--left-head .suga-pillar-lead {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-kicker-line {
    width: 52px !important;
    max-width: 52px !important;
    min-width: 52px !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    margin-block-start: 0 !important;
    margin-block-end: 14px !important;
  }

  body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-h2,
  body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-h2 h2,
  body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-h2 .stk-block-heading__text {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.12 !important;
    margin-bottom: 14px !important;
  }

  body[data-prefix="single_page"] .suga-pillar-section .suga-pillar-lead {
    margin-bottom: 26px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}


/* =========================================================
   8) SHARED NOTE COMPONENT
   ========================================================= */

body[data-prefix="single_page"] .suga-section-note {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 28px !important;
  padding: 18px 24px !important;
  border: 1px solid var(--suga-color-border) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  box-sizing: border-box !important;
}

body[data-prefix="single_page"] .suga-section-note__text {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #3f5873 !important;
  font-style: italic !important;
}

body[data-prefix="single_page"] .suga-card-grid > .suga-section-note,
body[data-prefix="single_page"] .suga-def-grid > .suga-section-note {
  grid-column: 1 / -1 !important;
}

/* Section 02 note difference */
body[data-prefix="single_page"] .suga-pillar-section--02 .suga-section-note,
body[data-prefix="single_page"] .suga-pillar-section--definition .suga-section-note {
  margin-top: 5px !important;
  margin-bottom: 0 !important;
  border: 2px dashed #6f89a3 !important;
  background: rgba(255, 255, 255, 0.28) !important;
}


/* =========================================================
   9) SECTION 02 --- DEFINITION COMPONENTS
   Existing structure preserved.
   ========================================================= */

body[data-prefix="single_page"] .suga-def-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: stretch !important;
}

body[data-prefix="single_page"] .suga-info-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--suga-color-border-strong) !important;
  box-shadow: 0 1px 2px rgba(8, 26, 46, 0.05) !important;
}

body[data-prefix="single_page"] .suga-info-card__title {
  margin: 0 !important;
  padding: 18px 30px !important;
  background: var(--suga-color-navy) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

body[data-prefix="single_page"] .suga-info-card__body {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 26px 30px 28px !important;
}

body[data-prefix="single_page"] .suga-card-label,
body[data-prefix="single_page"] .suga-card-subtitle {
  margin: 0 0 12px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  color: var(--suga-color-title) !important;
}

body[data-prefix="single_page"] .suga-card-text {
  max-width: 520px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--suga-color-text) !important;
}

body[data-prefix="single_page"] .suga-bullet-list {
  margin: 0 !important;
  padding-left: 22px !important;
  color: var(--suga-color-text) !important;
}

body[data-prefix="single_page"] .suga-bullet-list li {
  margin: 0 0 12px !important;
  padding-left: 2px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--suga-color-text) !important;
}

body[data-prefix="single_page"] .suga-bullet-list li::marker {
  color: var(--suga-color-orange) !important;
  font-size: 0.9em !important;
}

body[data-prefix="single_page"] .suga-card-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  margin: 26px 0 20px !important;
  border: 0 !important;
  background: #e3ebf2 !important;
  opacity: 1 !important;
}

body[data-prefix="single_page"] .suga-reason-list {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 24px !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

body[data-prefix="single_page"] .suga-reason-item {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-reason-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border: 1px solid var(--suga-color-orange) !important;
  background: #fff4ec !important;
  color: var(--suga-color-orange) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body[data-prefix="single_page"] .suga-reason-copy {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-reason-title {
  margin: 0 0 5px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  color: var(--suga-color-title) !important;
}

body[data-prefix="single_page"] .suga-reason-desc {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--suga-color-muted) !important;
}

body[data-prefix="single_page"] .suga-def-grid > .suga-section-note,
body[data-prefix="single_page"] .suga-def-grid > .wp-block-group.suga-section-note,
body[data-prefix="single_page"] .suga-def-grid > .stk-block.suga-section-note {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-def-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  body[data-prefix="single_page"] .suga-info-card__title {
    padding: 16px 20px !important;
    font-size: 16px !important;
  }

  body[data-prefix="single_page"] .suga-info-card__body {
    padding: 22px 20px 24px !important;
  }

  body[data-prefix="single_page"] .suga-bullet-list li {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  body[data-prefix="single_page"] .suga-reason-list {
    justify-content: flex-start !important;
    gap: 20px !important;
  }

  body[data-prefix="single_page"] .suga-reason-item {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  body[data-prefix="single_page"] .suga-reason-num {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
  }

  body[data-prefix="single_page"] .suga-pillar-section--02 .suga-section-note,
  body[data-prefix="single_page"] .suga-pillar-section--definition .suga-section-note {
    padding: 16px 18px !important;
  }
}


/* =========================================================
   10) TABLE COMPONENTS --- NINJA TABLES WRAPPER
   Use Gutenberg Group + Shortcode:
   .suga-table-wrap .suga-table-wrap--scope
   shortcode: [ninja_tables id='xxxx']
   ========================================================= */

body[data-prefix="single_page"] .suga-table-title {
  margin: 0 0 4px !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  color: var(--suga-color-title) !important;
}

body[data-prefix="single_page"] .suga-table-meta {
  margin: 0 0 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #8aa0b5 !important;
}

body[data-prefix="single_page"] .suga-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}

body[data-prefix="single_page"] .suga-table-wrap table {
  width: 100% !important;
  border-collapse: collapse !important;
}

body[data-prefix="single_page"] .suga-table-wrap thead th {
  background: var(--suga-color-navy) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  padding: 14px 16px !important;
  text-align: left !important;
  border: 0 !important;
}

body[data-prefix="single_page"] .suga-table-wrap tbody td {
  padding: 13px 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #3f5873 !important;
  border-bottom: 1px solid #dfe7ef !important;
  background: #ffffff !important;
}

body[data-prefix="single_page"] .suga-table-wrap tbody tr:nth-child(even) td {
  background: #f8fbfd !important;
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-table-wrap {
    margin-bottom: 24px !important;
  }

  body[data-prefix="single_page"] .suga-table-wrap table {
    min-width: 760px !important;
  }

  body[data-prefix="single_page"] .suga-table-title {
    font-size: 18px !important;
  }
}


/* =========================================================
   11) TABLE LEGEND --- GUTENBERG COLUMNS
   Do not insert manual dots.
   Dots are generated by ::before on each legend item.
   ========================================================= */

body[data-prefix="single_page"] .suga-table-legend {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 28px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--suga-color-border) !important;
  background: rgba(255, 255, 255, 0.35) !important;
  box-sizing: border-box !important;
}

body[data-prefix="single_page"] .suga-table-legend .wp-block-columns,
body[data-prefix="single_page"] .suga-table-legend__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: start !important;
}

body[data-prefix="single_page"] .suga-table-legend .wp-block-column,
body[data-prefix="single_page"] .suga-table-legend__item {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
}

body[data-prefix="single_page"] .suga-table-legend__item {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #3f5873 !important;
}

body[data-prefix="single_page"] .suga-table-legend__item::before {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 8px !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  margin-top: 0.48em !important;
  border-radius: 999px !important;
  background: #8aa0b5 !important;
}

body[data-prefix="single_page"] .suga-table-legend__item--default::before {
  background: #2fb86f !important;
}

body[data-prefix="single_page"] .suga-table-legend__item--project::before {
  background: #f08a24 !important;
}

body[data-prefix="single_page"] .suga-table-legend__item--applicable::before {
  background: #2997d8 !important;
}

body[data-prefix="single_page"] .suga-table-legend__item p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

body[data-prefix="single_page"] .suga-table-legend .suga-status-dot {
  display: none !important;
}

body[data-prefix="single_page"] .suga-table-legend p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-table-legend .wp-block-columns,
  body[data-prefix="single_page"] .suga-table-legend__grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-table-legend {
    padding: 16px 18px !important;
  }

  body[data-prefix="single_page"] .suga-table-legend .wp-block-columns,
  body[data-prefix="single_page"] .suga-table-legend__grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}


/* =========================================================
   12) GENERIC CARD GRID
   Only for Gutenberg Group-based grids.
   Stackable Columns use .suga-stack-grid instead.
   ========================================================= */

body[data-prefix="single_page"] .suga-card-grid:not(.wp-block-stackable-columns) {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 24px !important;
}

body[data-prefix="single_page"] .suga-card-grid--2:not(.wp-block-stackable-columns) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-prefix="single_page"] .suga-card-grid--3:not(.wp-block-stackable-columns) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-card-grid:not(.wp-block-stackable-columns),
  body[data-prefix="single_page"] .suga-card-grid--2:not(.wp-block-stackable-columns),
  body[data-prefix="single_page"] .suga-card-grid--3:not(.wp-block-stackable-columns) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}


/* =========================================================
   13) STACKABLE COLUMNS COMPATIBILITY LAYER
   Use on Stackable Columns:
   suga-stack-grid suga-stack-grid--3
   or for Section 03:
   suga-stack-grid suga-stack-grid--3 suga-scope-preview-grid
   ========================================================= */

body[data-prefix="single_page"] .suga-stack-grid,
body[data-prefix="single_page"] .suga-scope-preview-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-stack-grid .stk-row,
body[data-prefix="single_page"] .suga-scope-preview-grid .stk-row {
  display: grid !important;
  gap: 24px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

body[data-prefix="single_page"] .suga-stack-grid--2 .stk-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-prefix="single_page"] .suga-stack-grid--3 .stk-row,
body[data-prefix="single_page"] .suga-scope-preview-grid .stk-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-prefix="single_page"] .suga-stack-grid .stk-column,
body[data-prefix="single_page"] .suga-stack-grid .stk-block-column,
body[data-prefix="single_page"] .suga-scope-preview-grid .stk-column,
body[data-prefix="single_page"] .suga-scope-preview-grid .stk-block-column {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-stack-grid .stk-row,
  body[data-prefix="single_page"] .suga-scope-preview-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-stack-grid .stk-row,
  body[data-prefix="single_page"] .suga-scope-preview-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}


/* =========================================================
   14) PREVIEW CARD COMPONENT
   Compatible with Gutenberg Group and Stackable Column/Card nesting.
   ========================================================= */

body[data-prefix="single_page"] .suga-subsection-title {
  margin: 0 0 18px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  color: var(--suga-color-title) !important;
}

body[data-prefix="single_page"] .suga-preview-card {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid var(--suga-color-border) !important;
  border-left: 4px solid var(--suga-color-orange) !important;
  box-shadow: none !important;
}

body[data-prefix="single_page"] .suga-preview-card .stk-block-card,
body[data-prefix="single_page"] .suga-preview-card .stk-block-card > .stk-container,
body[data-prefix="single_page"] .suga-preview-card .stk-block-card__content,
body[data-prefix="single_page"] .suga-preview-card .stk-container-padding {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-prefix="single_page"] .suga-preview-card__title,
body[data-prefix="single_page"] .suga-preview-card__title h3,
body[data-prefix="single_page"] .suga-preview-card__title .stk-block-heading__text {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  color: var(--suga-color-title) !important;
}

body[data-prefix="single_page"] .suga-preview-card__text,
body[data-prefix="single_page"] .suga-preview-card__text p,
body[data-prefix="single_page"] .suga-preview-card__text .stk-block-text__text {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--suga-color-text) !important;
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-preview-card {
    padding: 18px 20px !important;
  }
}


/* =========================================================
   15) DESIGN SPEC
   Optional. Hide on production if needed.
   ========================================================= */

body[data-prefix="single_page"] .suga-design-spec {
  margin: 28px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-style: italic !important;
  color: #9aabba !important;
}

/* =========================================================
   SECTION 04 --- COMPARISON ADD-ON CSS
   For: Full Turnkey vs Partial Turnkey vs Consigned

   Depends on V14:
   - .suga-pillar-section
   - .suga-pillar-section__inner
   - .suga-pillar-h2
   - .suga-pillar-lead
   - .suga-section-note
   - .suga-table-wrap
   - .suga-stack-grid / .suga-stack-grid--3

   This block only adds:
   1) Section 04 background registration
   2) Reusable comparison card component
   3) Reusable section CTA strip

   V14.2 note:
   Section 04 does not define its own hard-coded vertical padding.
   It inherits Section 6 unified normal-section rhythm.
   ========================================================= */


/* =========================================================
   1) Section 04 background only
   Vertical spacing is inherited from Section 6 unified rhythm.
   Do not add Section 04-specific padding here.
   ========================================================= */

body[data-prefix="single_page"] .suga-pillar-section--04,
body[data-prefix="single_page"] .suga-pillar-section--comparison {
  background: var(--suga-color-section-blue) !important;
}


/* =========================================================
   2) Comparison card grid spacing
   Stackable Columns already handled by V14:
   suga-stack-grid suga-stack-grid--3
   ========================================================= */

body[data-prefix="single_page"] .suga-pillar-section--comparison .suga-stack-grid,
body[data-prefix="single_page"] .suga-pillar-section--04 .suga-stack-grid {
  margin: 0 0 24px !important;
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-pillar-section--comparison .suga-stack-grid,
  body[data-prefix="single_page"] .suga-pillar-section--04 .suga-stack-grid {
    margin-bottom: 22px !important;
  }
}


/* =========================================================
   3) Reusable comparison card component
   ========================================================= */

body[data-prefix="single_page"] .suga-compare-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--suga-color-border-strong) !important;
  box-shadow: 0 1px 2px rgba(8, 26, 46, 0.05) !important;
  overflow: hidden !important;
}

body[data-prefix="single_page"] .suga-compare-card--primary {
  border: 2px solid var(--suga-color-orange) !important;
}

body[data-prefix="single_page"] .suga-compare-card__title,
body[data-prefix="single_page"] .suga-compare-card__title h3,
body[data-prefix="single_page"] .suga-compare-card__title .stk-block-heading__text {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  background: var(--suga-color-navy) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body[data-prefix="single_page"] .suga-compare-card--primary .suga-compare-card__title,
body[data-prefix="single_page"] .suga-compare-card--primary .suga-compare-card__title h3,
body[data-prefix="single_page"] .suga-compare-card--primary .suga-compare-card__title .stk-block-heading__text {
  background: var(--suga-color-orange) !important;
}

body[data-prefix="single_page"] .suga-compare-card--dark .suga-compare-card__title,
body[data-prefix="single_page"] .suga-compare-card--dark .suga-compare-card__title h3,
body[data-prefix="single_page"] .suga-compare-card--dark .suga-compare-card__title .stk-block-heading__text {
  background: var(--suga-color-navy) !important;
}

body[data-prefix="single_page"] .suga-compare-card--muted .suga-compare-card__title,
body[data-prefix="single_page"] .suga-compare-card--muted .suga-compare-card__title h3,
body[data-prefix="single_page"] .suga-compare-card--muted .suga-compare-card__title .stk-block-heading__text {
  background: #51667f !important;
}

body[data-prefix="single_page"] .suga-compare-card__label,
body[data-prefix="single_page"] .suga-compare-card__label p,
body[data-prefix="single_page"] .suga-compare-card__label .stk-block-text__text {
  margin: 22px 22px 12px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  color: var(--suga-color-title) !important;
}

body[data-prefix="single_page"] .suga-compare-card__list {
  margin: 0 22px 18px !important;
  padding-left: 18px !important;
  color: var(--suga-color-text) !important;
}

body[data-prefix="single_page"] .suga-compare-card__list li {
  margin: 0 0 8px !important;
  padding-left: 2px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--suga-color-text) !important;
}

body[data-prefix="single_page"] .suga-compare-card__list li::marker {
  color: #8aa0b5 !important;
  font-size: 0.9em !important;
}

body[data-prefix="single_page"] .suga-compare-card--primary .suga-compare-card__list li::marker {
  color: var(--suga-color-orange) !important;
}

body[data-prefix="single_page"] .suga-compare-card__foot,
body[data-prefix="single_page"] .suga-compare-card__foot p,
body[data-prefix="single_page"] .suga-compare-card__foot .stk-block-text__text {
  margin: auto 22px 0 !important;
  padding: 16px 0 18px !important;
  border-top: 1px solid #e3ebf2 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  color: var(--suga-color-text) !important;
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-compare-card__title,
  body[data-prefix="single_page"] .suga-compare-card__title h3,
  body[data-prefix="single_page"] .suga-compare-card__title .stk-block-heading__text {
    padding: 16px 20px !important;
    font-size: 16px !important;
  }

  body[data-prefix="single_page"] .suga-compare-card__label,
  body[data-prefix="single_page"] .suga-compare-card__label p,
  body[data-prefix="single_page"] .suga-compare-card__label .stk-block-text__text {
    margin: 20px 20px 12px !important;
  }

  body[data-prefix="single_page"] .suga-compare-card__list {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  body[data-prefix="single_page"] .suga-compare-card__foot,
  body[data-prefix="single_page"] .suga-compare-card__foot p,
  body[data-prefix="single_page"] .suga-compare-card__foot .stk-block-text__text {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}


/* =========================================================
   4) Reusable table text utilities
   Use these class names inside Ninja Tables content when needed.
   Do not paste HTML examples into the CSS editor.
   ========================================================= */

body[data-prefix="single_page"] .suga-text-accent {
  color: var(--suga-color-orange) !important;
  font-weight: 800 !important;
}

body[data-prefix="single_page"] .suga-text-strong {
  color: var(--suga-color-title) !important;
  font-weight: 800 !important;
}

body[data-prefix="single_page"] .suga-text-muted {
  color: var(--suga-color-muted) !important;
  font-weight: 700 !important;
}


/* =========================================================
   5) Reusable section CTA strip

   Correct HTML structure:
   .suga-section-cta
     .suga-section-cta__copy
     .suga-section-cta__action

   Current Section 04 compatibility:
   The uploaded HTML currently uses .suga-section-cta__copy as the wrapper
   without a parent .suga-section-cta. V14 supports both structures so the
   dark navy background, white text, and right-aligned button still work
   without changing HTML.
   ========================================================= */

body[data-prefix="single_page"] .suga-section-cta,
body[data-prefix="single_page"] .suga-section-note--comparison > .suga-section-cta__copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 24px !important;
  row-gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
  margin: 32px 0 0 !important;
  padding: 20px 26px !important;
  background: var(--suga-color-navy) !important;
  box-sizing: border-box !important;
}

body[data-prefix="single_page"] .suga-section-cta__copy {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-section-note--comparison > .suga-section-cta__copy .suga-section-cta__title {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body[data-prefix="single_page"] .suga-section-note--comparison > .suga-section-cta__copy .suga-section-cta__text {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body[data-prefix="single_page"] .suga-section-note--comparison > .suga-section-cta__copy .suga-section-cta__action {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  align-self: center !important;
  justify-content: flex-end !important;
}

body[data-prefix="single_page"] .suga-section-cta__title,
body[data-prefix="single_page"] .suga-section-cta__title h3,
body[data-prefix="single_page"] .suga-section-cta__title .stk-block-heading__text {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-prefix="single_page"] .suga-section-cta__text,
body[data-prefix="single_page"] .suga-section-cta__text p,
body[data-prefix="single_page"] .suga-section-cta__text .stk-block-text__text {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #c5d3e2 !important;
}

body[data-prefix="single_page"] .suga-section-cta__action,
body[data-prefix="single_page"] .suga-section-cta__action .wp-block-buttons,
body[data-prefix="single_page"] .suga-section-cta__action .wp-block-button {
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-section-cta__button .wp-block-button__link,
body[data-prefix="single_page"] .suga-section-cta__action .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 28px !important;
  border-radius: 0 !important;
  border: 1px solid var(--suga-color-orange) !important;
  background: var(--suga-color-orange) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform 0.22s ease, filter 0.22s ease !important;
}

body[data-prefix="single_page"] .suga-section-cta__button .wp-block-button__link:hover,
body[data-prefix="single_page"] .suga-section-cta__action .wp-block-button__link:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-section-cta,
  body[data-prefix="single_page"] .suga-section-note--comparison > .suga-section-cta__copy {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 14px !important;
    padding: 20px !important;
  }

  body[data-prefix="single_page"] .suga-section-note--comparison > .suga-section-cta__copy .suga-section-cta__title,
  body[data-prefix="single_page"] .suga-section-note--comparison > .suga-section-cta__copy .suga-section-cta__text,
  body[data-prefix="single_page"] .suga-section-note--comparison > .suga-section-cta__copy .suga-section-cta__action {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
  }

  body[data-prefix="single_page"] .suga-section-cta__action .wp-block-button,
  body[data-prefix="single_page"] .suga-section-cta__action .wp-block-button__link {
    width: 100% !important;
  }
}

/* =========================================================
   SECTION 05 --- PROCESS
   Scope:
   - 6-step process timeline
   - 3 process support cards

   This section does NOT redefine:
   - .suga-pillar-section full-bleed
   - .suga-pillar-section__inner width / max-width / left-right padding
   - global Gutenberg gap reset
   - global .suga-pillar-h2 alignment
   - global .suga-pillar-lead alignment
   - global .suga-stack-grid base compatibility

   Important:
   - H2 / lead / kicker line keep the same centered behavior as previous sections.
   - Do not add suga-process-card to both Stackable Column and inner Group.
   ========================================================= */


/* ---------------------------------------------------------
   05.1) Section-level differences only
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-pillar-section--05,
body[data-prefix="single_page"] .suga-pillar-section--process {
  background: var(--suga-color-soft-bg);
}


/* ---------------------------------------------------------
   05.2) Process timeline wrapper
   Stackable Columns unique layout for 6-step process.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-process-timeline {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 64px !important;
  margin-bottom: 44px !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-process-timeline .stk-row {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-process-timeline .stk-row::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 7%;
  right: 7%;
  height: 0;
  border-top: 3px dashed var(--suga-color-orange);
  z-index: 0;
  pointer-events: none;
}

body[data-prefix="single_page"] .suga-process-timeline .stk-column,
body[data-prefix="single_page"] .suga-process-timeline .stk-block-column {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  flex: none !important;
}


/* ---------------------------------------------------------
   05.3) Process step inner Stackable structure
   Critical:
   Stackable Column creates .stk-column-wrapper and .stk-inner-blocks.
   The step content must be forced into a vertical stack.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-process-step > .stk-column-wrapper,
body[data-prefix="single_page"] .suga-process-step > .stk-column-wrapper > .stk-inner-blocks,
body[data-prefix="single_page"] .suga-process-step .stk-block-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-process-step__node {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  border: 3px solid var(--suga-color-orange) !important;
  border-radius: 999px !important;
  background: var(--suga-color-navy) !important;
  box-shadow: 0 10px 24px rgba(7, 28, 52, 0.14) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}

body[data-prefix="single_page"] .suga-process-step__num {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
}

body[data-prefix="single_page"] .suga-process-step__title {
  display: block !important;
  max-width: 128px !important;
  margin: 0 auto 5px !important;
  padding: 0 !important;
  color: var(--suga-color-navy) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body[data-prefix="single_page"] .suga-process-step__phase {
  display: block !important;
  max-width: 128px !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
  color: var(--suga-color-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  text-align: center !important;
}

body[data-prefix="single_page"] .suga-process-step__desc {
  display: block !important;
  max-width: 132px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--suga-color-text) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  text-align: center !important;
}


/* Final outcome node */

body[data-prefix="single_page"] .suga-process-step--final .suga-process-step__node {
  border-color: var(--suga-color-orange) !important;
  background: var(--suga-color-orange) !important;
}

body[data-prefix="single_page"] .suga-process-step--final .suga-process-step__num {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ---------------------------------------------------------
   05.4) Process support cards
   Use either:
   A) Stackable Column = suga-preview-card suga-process-card
   OR
   B) Inner Gutenberg Group = suga-preview-card suga-process-card

   Do not apply card classes to both levels.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-process-card-grid {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body[data-prefix="single_page"] .suga-process-card {
  min-height: 148px;
  border-left: 4px solid var(--suga-color-orange) !important;
}

/* Safety guard:
   If card classes were accidentally applied to both Stackable Column
   and inner Gutenberg Group, neutralize the inner duplicate visual box.
   This is a guard only; the clean fix is to remove duplicate classes in editor. */

body[data-prefix="single_page"] .suga-process-card .suga-process-card {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body[data-prefix="single_page"] .suga-process-card .suga-preview-card__title {
  margin-top: 0 !important;
}

body[data-prefix="single_page"] .suga-process-card .suga-preview-card__text {
  max-width: 100%;
}


/* ---------------------------------------------------------
   05.5) Responsive behavior
   Tablet: 3 columns x 2 rows.
   Mobile: vertical timeline stack.
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-process-timeline {
    margin-top: 54px !important;
    margin-bottom: 38px !important;
  }

  body[data-prefix="single_page"] .suga-process-timeline .stk-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 34px !important;
  }

  body[data-prefix="single_page"] .suga-process-timeline .stk-row::before {
    display: none !important;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-process-timeline {
    margin-top: 42px !important;
    margin-bottom: 34px !important;
  }

  body[data-prefix="single_page"] .suga-process-timeline .stk-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body[data-prefix="single_page"] .suga-process-timeline .stk-row::before {
    display: block !important;
    left: 38px;
    right: auto;
    top: 38px;
    bottom: 38px;
    width: 0;
    height: auto;
    border-top: 0;
    border-left: 3px dashed var(--suga-color-orange);
  }

  body[data-prefix="single_page"] .suga-process-step {
    margin-bottom: 30px !important;
  }

  body[data-prefix="single_page"] .suga-process-step:last-child {
    margin-bottom: 0 !important;
  }

  body[data-prefix="single_page"] .suga-process-step > .stk-column-wrapper,
  body[data-prefix="single_page"] .suga-process-step > .stk-column-wrapper > .stk-inner-blocks,
  body[data-prefix="single_page"] .suga-process-step .stk-block-content {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: start !important;
    text-align: left !important;
  }

  body[data-prefix="single_page"] .suga-process-step__node {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    margin: 0 !important;
  }

  body[data-prefix="single_page"] .suga-process-step__title,
  body[data-prefix="single_page"] .suga-process-step__phase,
  body[data-prefix="single_page"] .suga-process-step__desc {
    grid-column: 2 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  body[data-prefix="single_page"] .suga-process-step__title {
    margin-top: 6px !important;
  }

  body[data-prefix="single_page"] .suga-process-card {
    min-height: auto;
  }
}

@media (max-width: 480px) {
  body[data-prefix="single_page"] .suga-process-timeline .stk-row::before {
    left: 32px;
  }

  body[data-prefix="single_page"] .suga-process-step > .stk-column-wrapper,
  body[data-prefix="single_page"] .suga-process-step > .stk-column-wrapper > .stk-inner-blocks,
  body[data-prefix="single_page"] .suga-process-step .stk-block-content {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }

  body[data-prefix="single_page"] .suga-process-step__node {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }

  body[data-prefix="single_page"] .suga-process-step__num {
    font-size: 19px !important;
  }
}

/* =========================================================
   SECTION 06 --- COMPONENT SOURCING & BOM RISK CONTROL
   Only Section 06 unique styles.
   Does not redefine base layout / inner width / global H2 alignment.
   ========================================================= */


/* ---------------------------------------------------------
   06.1) Section background + rhythm variables only
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-pillar-section--06,
body[data-prefix="single_page"] .suga-pillar-section--sourcing {
  background: var(--suga-color-navy);
  --suga-section-padding-bottom: 48px;
}


/* ---------------------------------------------------------
   06.2) Dark section heading color only
   Important:
   - Only changes color for readability on dark background.
   - Does NOT change H2 font-size / font-weight / line-height / alignment / margin.
   - Therefore it does NOT break global H2 consistency.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-h2,
body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-h2 h2,
body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-h2 .stk-block-heading__text,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-h2,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-h2 h2,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-h2 .stk-block-heading__text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-lead,
body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-lead p,
body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-lead .stk-block-text__text,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-lead,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-lead p,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-lead .stk-block-text__text {
  color: rgba(255, 255, 255, 0.76) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.76) !important;
}


/* ---------------------------------------------------------
   06.3) Position box
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-sourcing-position {
  margin: 34px 0;
  padding: 18px 24px;
  border: 2px solid var(--suga-color-orange);
  background: rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-sourcing-position__label {
  margin: 0 0 8px;
  padding: 0;
  color: var(--suga-color-orange);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-prefix="single_page"] .suga-sourcing-position__text {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;
}


/* ---------------------------------------------------------
   06.4) Sourcing grid
   Stackable Columns only.
   Do NOT use .suga-card-grid display:grid here.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-sourcing-grid {
  margin-top: 0;
  margin-bottom: 0;
}

body[data-prefix="single_page"] .suga-sourcing-grid .stk-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

body[data-prefix="single_page"] .suga-sourcing-grid .stk-column,
body[data-prefix="single_page"] .suga-sourcing-grid .stk-block-column {
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

body[data-prefix="single_page"] .suga-sourcing-grid__item > .stk-column-wrapper,
body[data-prefix="single_page"] .suga-sourcing-grid__item > .stk-column-wrapper > .stk-inner-blocks {
  height: 100%;
}


/* ---------------------------------------------------------
   06.5) Sourcing cards
   Card class should be applied to the inner Gutenberg Group:
   .suga-sourcing-card
   Do NOT apply .suga-sourcing-card to Stackable Column.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-sourcing-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 18px;
  height: 100%;
  min-height: 210px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-sourcing-card__num {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--suga-color-orange);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-prefix="single_page"] .suga-sourcing-card__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  padding: 0;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 18px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-prefix="single_page"] .suga-sourcing-card__list {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: 18px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.72;
  font-weight: 500;
}

body[data-prefix="single_page"] .suga-sourcing-card__list li {
  margin: 0 0 8px;
}

body[data-prefix="single_page"] .suga-sourcing-card__list li:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   06.6) Orange outcome card
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-sourcing-card--outcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 210px;
  background: var(--suga-color-orange);
  border-color: var(--suga-color-orange);
  box-shadow: 0 18px 36px rgba(253, 83, 32, 0.22);
}

body[data-prefix="single_page"] .suga-sourcing-card--outcome .suga-sourcing-card__title {
  margin: 0 0 18px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 20px;
  line-height: 1.3;
}

body[data-prefix="single_page"] .suga-sourcing-card--outcome .suga-sourcing-card__list {
  padding-top: 18px;
  border-top-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.94);
}

body[data-prefix="single_page"] .suga-sourcing-card--outcome .suga-sourcing-card__list li:last-child {
  font-weight: 800;
  color: #ffffff;
}


/* ---------------------------------------------------------
   06.7) Responsive behavior
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-sourcing-grid .stk-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  body[data-prefix="single_page"] .suga-sourcing-card {
    min-height: 200px;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-pillar-section--06,
  body[data-prefix="single_page"] .suga-pillar-section--sourcing {
    --suga-section-padding-bottom: 38px;
  }

  body[data-prefix="single_page"] .suga-sourcing-position {
    margin: 26px 0 28px;
    padding: 16px 18px;
  }

  body[data-prefix="single_page"] .suga-sourcing-position__text {
    font-size: 15px;
  }

  body[data-prefix="single_page"] .suga-sourcing-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body[data-prefix="single_page"] .suga-sourcing-card {
    min-height: auto;
    padding: 22px 20px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card__title {
    font-size: 17px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card__list {
    font-size: 13.5px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card--outcome .suga-sourcing-card__title {
    font-size: 19px;
  }
}

@media (max-width: 480px) {
  body[data-prefix="single_page"] .suga-sourcing-card {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px 18px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card__num {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card__title {
    font-size: 16px;
  }
}

/* =========================================================
   SECTION 07 --- QUALITY CONTROL, TRACEABILITY & COLLABORATION
   Clean Section-only CSS.
   Does not redefine:
   - .suga-pillar-section full-bleed
   - .suga-pillar-section__inner width / max-width / left-right padding
   - global .suga-pillar-h2 alignment / typography
   - global .suga-pillar-lead alignment / typography
   - global .suga-stack-grid base compatibility
   ========================================================= */


/* ---------------------------------------------------------
   07.1) Section background only
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-pillar-section--07,
body[data-prefix="single_page"] .suga-pillar-section--quality {
  background: var(--suga-color-soft-bg);
}


/* ---------------------------------------------------------
   07.2) Top quality control cards
   Structure:
   Stackable Columns: .suga-stack-grid .suga-quality-control-grid
   Column: .suga-quality-control-grid__item
   Inner Group: .suga-quality-control-card
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-quality-control-grid {
  margin-top: 34px;
  margin-bottom: 34px;
}

body[data-prefix="single_page"] .suga-quality-control-grid .stk-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

body[data-prefix="single_page"] .suga-quality-control-grid .stk-column,
body[data-prefix="single_page"] .suga-quality-control-grid .stk-block-column {
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

body[data-prefix="single_page"] .suga-quality-control-card {
  height: 100%;
  min-height: 112px;
  padding: 18px 16px;
  border: 1px solid rgba(7, 28, 52, 0.12);
  border-top: 4px solid var(--suga-color-orange);
  background: rgba(255, 255, 255, 0.58);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-quality-control-card--highlight {
  background: rgba(253, 83, 32, 0.08);
  border-color: var(--suga-color-orange);
  border-top-color: var(--suga-color-orange);
}

body[data-prefix="single_page"] .suga-quality-control-card__title {
  margin: 0 0 10px;
  padding: 0;
  color: var(--suga-color-navy);
  font-size: 15px;
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-prefix="single_page"] .suga-quality-control-card__text {
  margin: 0;
  padding: 0;
  color: var(--suga-color-text);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}


/* ---------------------------------------------------------
   07.3) Table intro + table wrapper
   Uses existing reusable classes:
   - .suga-section-note
   - .suga-section-note__text
   - .suga-table-title
   - .suga-table-meta
   - .suga-table-wrap
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-quality-table-intro {
  margin-top: 0;
  margin-bottom: 18px;
}

body[data-prefix="single_page"] .suga-quality-table-wrap {
  margin-top: 18px;
  margin-bottom: 34px;
  overflow-x: auto;
}


/* ---------------------------------------------------------
   07.4) Friction-free collaboration sub-section
   This is an internal H3 block, not a new H2 section.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-quality-collab {
  margin-top: 34px;
  padding: 30px 30px 28px;
  border-left: 4px solid var(--suga-color-orange);
  background: var(--suga-color-navy);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-quality-collab__title {
  margin: 0 0 10px;
  padding: 0;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body[data-prefix="single_page"] .suga-quality-collab__lead {
  margin: 0 0 28px;
  padding: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}


/* ---------------------------------------------------------
   07.5) Collaboration promise cards
   Structure:
   Stackable Columns: .suga-stack-grid .suga-quality-collab-grid
   Column: .suga-quality-collab-grid__item
   Inner Group: .suga-quality-collab-card
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-quality-collab-grid {
  margin: 0;
}

body[data-prefix="single_page"] .suga-quality-collab-grid .stk-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body[data-prefix="single_page"] .suga-quality-collab-grid .stk-column,
body[data-prefix="single_page"] .suga-quality-collab-grid .stk-block-column {
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

body[data-prefix="single_page"] .suga-quality-collab-card {
  height: 100%;
  min-height: 132px;
  padding: 20px 18px;
  background: rgba(255, 255, 255, 0.065);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-quality-collab-card__title {
  margin: 0 0 12px;
  padding: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}

body[data-prefix="single_page"] .suga-quality-collab-card__text {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}


/* ---------------------------------------------------------
   07.6) Responsive
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-quality-control-grid .stk-row,
  body[data-prefix="single_page"] .suga-quality-collab-grid .stk-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-prefix="single_page"] .suga-quality-collab__title {
    font-size: 24px;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-quality-control-grid {
    margin-top: 28px;
    margin-bottom: 28px;
  }

  body[data-prefix="single_page"] .suga-quality-control-grid .stk-row,
  body[data-prefix="single_page"] .suga-quality-collab-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body[data-prefix="single_page"] .suga-quality-control-card {
    min-height: auto;
  }

  body[data-prefix="single_page"] .suga-quality-collab {
    margin-top: 28px;
    padding: 24px 20px;
  }

  body[data-prefix="single_page"] .suga-quality-collab__title {
    font-size: 22px;
  }

  body[data-prefix="single_page"] .suga-quality-collab-card {
    min-height: auto;
  }
}

/* =========================================================
   SECTION 08 --- APPLICATIONS & PROJECT SCENARIOS
   Clean Section-only CSS.
   Does not redefine:
   - .suga-pillar-section full-bleed
   - .suga-pillar-section__inner width / max-width / left-right padding
   - global .suga-pillar-h2 alignment / typography
   - global .suga-pillar-lead alignment / typography
   - global .suga-stack-grid base compatibility

   Notes:
   - No SECTION 08 label in front-end body copy.
   - No Scenario label styles, because SCENARIO 01 / 02 / 03 were removed.
   - Industry titles and scenario titles remain H4 inside this section.
   ========================================================= */


/* ---------------------------------------------------------
   08.1) Section background only
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-pillar-section--08,
body[data-prefix="single_page"] .suga-pillar-section--applications {
  background: var(--suga-color-soft-bg);
}


/* ---------------------------------------------------------
   08.2) Section internal H3 subtitles
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-applications-subtitle {
  margin: 34px 0 18px;
  padding: 0;
  color: var(--suga-color-navy);
  font-size: 24px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.015em;
}


/* ---------------------------------------------------------
   08.3) Industry cards
   Structure:
   Stackable Columns: .suga-stack-grid .suga-applications-industry-grid
   Column: .suga-applications-industry-grid__item
   Inner Group: .suga-applications-industry-card
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-applications-industry-grid {
  margin: 0 0 34px;
}

body[data-prefix="single_page"] .suga-applications-industry-grid .stk-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

body[data-prefix="single_page"] .suga-applications-industry-grid .stk-column,
body[data-prefix="single_page"] .suga-applications-industry-grid .stk-block-column {
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

body[data-prefix="single_page"] .suga-applications-industry-card {
  height: 100%;
  min-height: 176px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(7, 28, 52, 0.12);
  background:
    linear-gradient(
      to bottom,
      var(--suga-color-navy) 0,
      var(--suga-color-navy) 72px,
      #ffffff 72px,
      #ffffff 100%
    );
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-applications-industry-card__title {
  margin: 0 0 4px;
  padding: 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-prefix="single_page"] .suga-applications-industry-card__meta {
  margin: 0 0 30px;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}

body[data-prefix="single_page"] .suga-applications-industry-card__label {
  margin: 0 0 6px;
  padding: 0;
  color: var(--suga-color-navy);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}

body[data-prefix="single_page"] .suga-applications-industry-card__text {
  margin: 0 0 10px;
  padding: 0;
  color: var(--suga-color-text);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

body[data-prefix="single_page"] .suga-applications-industry-card__fit {
  margin: 0;
  padding: 0;
  color: var(--suga-color-orange);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 800;
}


/* ---------------------------------------------------------
   08.4) Scenario note
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-applications-scenario-note {
  margin: -8px 0 18px;
  padding: 0;
  color: var(--suga-color-muted);
  font-size: 13px;
  line-height: 1.55;
  font-style: italic;
  font-weight: 500;
}


/* ---------------------------------------------------------
   08.5) Scenario cards
   Structure:
   Stackable Columns: .suga-stack-grid .suga-applications-scenario-grid
   Column: .suga-applications-scenario-grid__item
   Inner Group: .suga-applications-scenario-card
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-applications-scenario-grid {
  margin: 0;
}

body[data-prefix="single_page"] .suga-applications-scenario-grid .stk-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

body[data-prefix="single_page"] .suga-applications-scenario-grid .stk-column,
body[data-prefix="single_page"] .suga-applications-scenario-grid .stk-block-column {
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

body[data-prefix="single_page"] .suga-applications-scenario-card {
  height: 100%;
  min-height: 322px;
  padding: 24px 24px 22px;
  border: 1px solid rgba(7, 28, 52, 0.12);
  border-top: 4px solid var(--suga-color-orange);
  background: #ffffff;
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-applications-scenario-card__title {
  margin: 0 0 22px;
  padding: 0;
  color: var(--suga-color-navy);
  font-size: 18px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-prefix="single_page"] .suga-applications-scenario-card__mini-title {
  margin: 0 0 5px;
  padding: 0;
  color: var(--suga-color-navy);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}

body[data-prefix="single_page"] .suga-applications-scenario-card__text {
  margin: 0 0 16px;
  padding: 0;
  color: var(--suga-color-text);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

body[data-prefix="single_page"] .suga-applications-scenario-card__outcome {
  margin: 2px 0 0;
  padding: 0;
  color: var(--suga-color-orange);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}


/* ---------------------------------------------------------
   08.6) Responsive
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-applications-industry-grid .stk-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-prefix="single_page"] .suga-applications-scenario-grid .stk-row {
    grid-template-columns: 1fr !important;
  }

  body[data-prefix="single_page"] .suga-applications-scenario-card {
    min-height: auto;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-applications-subtitle {
    margin: 28px 0 16px;
    font-size: 21px;
  }

  body[data-prefix="single_page"] .suga-applications-industry-grid {
    margin-bottom: 28px;
  }

  body[data-prefix="single_page"] .suga-applications-industry-grid .stk-row,
  body[data-prefix="single_page"] .suga-applications-scenario-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body[data-prefix="single_page"] .suga-applications-industry-card,
  body[data-prefix="single_page"] .suga-applications-scenario-card {
    min-height: auto;
  }

  body[data-prefix="single_page"] .suga-applications-scenario-card {
    padding: 22px 20px 20px;
  }
}