/* ============================================================
   TYPOGRAPHY & RHYTHM NORMALIZE
   Final cascade layer. Loaded after theme-layout-audit.css.

   Purpose: the deck accumulated three overlapping style layers, so the
   same visual role ended up with 20+ font sizes and 8 font weights, and
   sub-headings rendered larger than the section titles above them. This
   layer restates one scale for every role and applies it identically to
   Chinese and English.

   It only touches type (size / weight / line-height / tracking) and the
   vertical rhythm between blocks. Colour, background and grid structure
   stay with the earlier layers.
   ============================================================ */

:root{
  /* — Type scale — one value per role, no per-section variants.
       Ratio ~1.25, anchored on a 16px reading size. — */
  --tn-hero:    clamp(44px, 4.6vw, 68px);  /* cover only */
  --tn-h2:      clamp(32px, 3.0vw, 44px);  /* section title */
  --tn-h3:      clamp(24px, 2.0vw, 30px);  /* block title inside a section */
  --tn-h4:      20px;                      /* card title */
  --tn-lead:    17px;                      /* section standfirst */
  --tn-body:    15px;                      /* reading copy */
  --tn-meta:    13px;                      /* captions, secondary rows */
  --tn-label:   11px;                      /* mono eyebrows, tags */

  /* Oversized numerals keep their own scale but are now bounded so they
     never outrun the section title next to them. */
  --tn-figure:  clamp(40px, 4.0vw, 60px);

  /* — Line height. Chinese needs more leading than Latin at the same
       size, so body sits at 1.7 while display type tightens to 1.2. — */
  --lh-display: 1.18;
  --lh-title:   1.3;
  --lh-copy:    1.7;
  --lh-compact: 1.5;

  /* — Tracking. Negative on display type, positive on uppercase mono. — */
  --tr-display: -.022em;
  --tr-title:   -.012em;
  --tr-copy:    0;
  --tr-label:   .1em;

  /* — Weights. Three steps only. — */
  --w-body:  400;
  --w-label: 500;
  --w-title: 600;

  /* — Vertical rhythm, 8px base. — */
  --r-section:   120px;  /* section top / bottom padding */
  --r-block:     72px;   /* between major blocks in a section */
  --r-group:     40px;   /* between related groups */
  --r-title:     24px;   /* section title -> first block */
  --r-eyebrow:   16px;   /* eyebrow -> title */
  --r-text:      12px;   /* heading -> its paragraph */

  /* — Measure — */
  --m-content: 1160px;
  --m-text:    68ch;
}

@media (max-width: 1023px){
  :root{
    --r-section: 88px;
    --r-block:   56px;
    --r-group:   32px;
    --tn-h4:      18px;
    --tn-lead:    16px;
  }
}
@media (max-width: 639px){
  :root{
    --r-section: 64px;
    --r-block:   44px;
    --r-group:   28px;
    --tn-body:    15px;
    --tn-meta:    13px;
  }
}

/* ============================================================
   1. WEIGHT RESET
   The zh-CN layer forced weights through `*` selectors while the English
   copy inherited variable-font weights of 200/260/520/540/560/650. Both
   are collapsed here so a switch of language never changes weight.
   ============================================================ */

html:lang(zh-CN) section *,
html:lang(en) section *,
section *{
  font-weight: var(--w-body);
}

html:lang(zh-CN) section :is(h1, h2, h3, h4, h5, h6, strong, b),
html:lang(en) section :is(h1, h2, h3, h4, h5, h6, strong, b),
section :is(h1, h2, h3, h4, h5, h6, strong, b),
section :is(
  [class$="-title"],
  [class*="-title "],
  [class$="-headline"],
  [class$="-name"],
  [class$="-num"],
  [class$="-price"],
  .din-num
){
  font-weight: var(--w-title);
}

html:lang(zh-CN) section :is(
  [class$="-label"], [class*="-label "],
  [class$="-kicker"], [class*="-kicker "],
  [class$="-meta"], [class*="-meta "],
  [class$="-tag"], [class$="-index"], [class$="-owner"],
  .eyebrow, button
),
section :is(
  [class$="-label"], [class*="-label "],
  [class$="-kicker"], [class*="-kicker "],
  [class$="-meta"], [class*="-meta "],
  [class$="-tag"], [class$="-index"], [class$="-owner"],
  .eyebrow, button
){
  font-weight: var(--w-label);
}

/* ============================================================
   2. TYPE SCALE
   Applied by role. `!important` is required only because the earlier
   two layers already declare these properties with `!important`.
   ============================================================ */

/* 2.1 Cover */
#cover .hero-title{
  font-size: var(--tn-hero) !important;
  font-weight: var(--w-title) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--tr-display) !important;
}

/* 2.2 Section title — the largest type inside any section */
.section-title,
section > h2{
  font-size: var(--tn-h2) !important;
  font-weight: var(--w-title) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--tr-display) !important;
  margin: 0 !important;
}

/* 2.3 Block title — was previously rendering at 63px / 65px / 38px,
   i.e. larger than the section title above it. Now one step below. */
.effect-part-title,
.ai-story-title,
.dual-wheel-title,
.effect-result-title,
.service-demo-copy > h3,
.cost-part-title,
.tier-intro h3,
.capability-patent-title,
.method-title,
section > h3,
section > .swiss-block-title{
  font-size: var(--tn-h3) !important;
  font-weight: var(--w-title) !important;
  line-height: var(--lh-title) !important;
  letter-spacing: var(--tr-title) !important;
  max-width: 28ch;
}

/* 2.4 Card title */
.cap-card h3,
.integration-card h3,
.integration-card-title,
.delivery-spec h3,
.seat-compare-title,
.ai-story-cap-title,
.service-story-title,
.cost-tier-name,
.cost-side-headline,
.process-title,
.tri-name,
.integration-block-title,
h3.block-title,
h4{
  font-size: var(--tn-h4) !important;
  font-weight: var(--w-title) !important;
  line-height: var(--lh-title) !important;
  letter-spacing: var(--tr-title) !important;
}

/* 2.5 Standfirst — the paragraph that follows a section title */
.effect-part-desc,
.section-lead,
.lead,
.tier-intro p,
.integration-card-lead{
  font-size: var(--tn-lead) !important;
  font-weight: var(--w-body) !important;
  line-height: var(--lh-copy) !important;
  letter-spacing: var(--tr-copy) !important;
  max-width: var(--m-text);
}

/* 2.6 Reading copy */
p, li,
.tri-desc,
.cap-card p,
.process-desc,
.cost-tier-positioning,
.cost-tier-feature,
.integration-phase p,
.delivery-spec li,
.integration-list li,
.service-ai-qa,
.cost-side-label,
.dual-growth-core-node,
.cost-ai-stage-copy{
  font-size: var(--tn-body) !important;
  font-weight: var(--w-body) !important;
  line-height: var(--lh-copy) !important;
  letter-spacing: var(--tr-copy) !important;
}

/* 2.7 Secondary text */
.note, .caveat, .footnote, .period-caveat,
.cost-note, .integration-download-note,
figcaption,
.ai-story-cap-sub,
.tpl-btn-sub,
.process-out,
.cost-tier-media-label,
.cost-side-media-label,
.seat-segment-label,
.ai-story-case-note{
  font-size: var(--tn-meta) !important;
  font-weight: var(--w-body) !important;
  line-height: var(--lh-compact) !important;
  letter-spacing: var(--tr-copy) !important;
}

/* 2.8 Mono labels and eyebrows — one size for every uppercase tag */
.eyebrow,
.cap-card-label,
.kicker,
[class$="-kicker"],
.ai-story-kicker,
.cost-case-kicker,
.cost-side-kicker,
.delivery-spec-kicker,
.service-shooting-kicker,
.seat-compare-kicker,
.integration-block-kicker,
.ai-story-result-meta,
.process-reference-meta,
.service-demo-meta,
.service-shooting-meta,
.dual-growth-track-label,
.ai-story-stage-label,
.seat-segment-card-label,
.cost-tier-media-label,
.tri-num,
.integration-phase-no,
.integration-card-index,
.process-step-index,
.seat-segment-index,
.ai-story-stage-index,
.cost-ai-stage-no,
.process-split-label,
.process-milestones-label,
.eyebrow-num{
  font-size: var(--tn-label) !important;
  font-weight: var(--w-label) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--tr-label) !important;
}

/* Cycle breakdown: the two component figures read one step below the
   headline total, and their captions sit at the secondary size. */
.process-split-value{
  font-size: var(--tn-h4) !important;
  font-weight: var(--w-title) !important;
  line-height: var(--lh-title) !important;
  letter-spacing: var(--tr-title) !important;
}
.process-split-note{
  font-size: var(--tn-meta) !important;
  font-weight: var(--w-body) !important;
}
.process-split-plus{
  font-size: var(--tn-h3) !important;
  font-weight: var(--w-body) !important;
}

/* 2.9 Display figures — capped so they read as data, not as headings */
.cost-num,
.cost-tier-price,
.flywheel-num,
.process-reference-duration,
.period-duration,
.cost-result-num{
  font-size: var(--tn-figure) !important;
  font-weight: var(--w-title) !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
}
/* The tier price carries a currency word alongside the numeral; keep the
   unit visibly subordinate instead of matching the figure. */
.cost-tier-price small,
.cost-tier-price .unit,
.process-reference-duration span{
  font-size: .42em !important;
  font-weight: var(--w-label) !important;
  letter-spacing: 0 !important;
}
/* Two of the three tiers state a sentence ("quoted per project scope")
   rather than a figure. At figure scale they wrapped across three lines
   and overpowered the tier they sit in, so they take the card-title step. */
.cost-tier-price-text{
  font-size: var(--tn-h4) !important;
  font-weight: var(--w-title) !important;
  line-height: var(--lh-title) !important;
  letter-spacing: var(--tr-title) !important;
}

/* The quote row intentionally keeps a top rule. Give its text enough inset
   to keep that rule from feeling like an underline. */
#sec-cost .cost-tier-price{
  padding-top: 20px !important;
}

/* ============================================================
   3. VERTICAL RHYTHM
   One ladder for every section: eyebrow -> title -> block -> block.
   ============================================================ */

main > section,
body > section{
  padding-top: var(--r-section) !important;
  padding-bottom: var(--r-section) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The cover manages its own full-height composition. */
#cover{
  padding-top: var(--r-section) !important;
  padding-bottom: var(--r-section) !important;
}

/* Consecutive sections must not add a second gap on top of padding. */
section + section{ margin-top: 0 !important; }

/* The service-story evidence and the benefits-journey demo are one
   continuous narrative. Keep a deliberate pause, but avoid stacking two
   full section paddings between them. */
#sec-effect-service{
  padding-bottom: clamp(36px, 3vw, 44px) !important;
}
#sec-effect-service-demo{
  padding-top: clamp(36px, 3vw, 44px) !important;
}
#sec-effect-service-demo .service-demo-split{
  margin-top: 0 !important;
}

.eyebrow{
  margin-top: 0 !important;
  margin-bottom: var(--r-eyebrow) !important;
}

.section-title + *,
section > h2 + *{
  margin-top: var(--r-title) !important;
}

/* Major blocks: a single spacing value replaces the previous
   40 / 48 / 56 / 65 / 72 / 120px mix. */
.capability-board,
.dual-wheel-block,
.effect-part,
.process-overview,
.process-list,
.cost-hero,
.cost-tiers,
.tier-intro,
.integration-block,
.service-demo-split,
.capability-suite,
.seat-segment-demo{
  margin-top: var(--r-block) !important;
  margin-bottom: 0 !important;
}

/* The first block after the title uses the tighter title gap instead of
   stacking a full block gap under the heading. */
.section-title + .capability-board,
.section-title + .effect-part,
.section-title + .process-overview,
.section-title + .cost-hero,
.section-title + .integration-block,
.section-title + .service-demo-split{
  margin-top: var(--r-title) !important;
}

/* A standalone heading block (.tier-intro) introduces the block that
   follows it, so the pair must read as one unit: a full block gap above
   the heading, but only the title gap between it and its own content.
   Otherwise the heading floats midway and reads as belonging to the
   preceding block instead. */
.tier-intro + *,
.seat-segment-intro + *{
  margin-top: var(--r-title) !important;
}

/* Cost-tier heading sits directly on its divider in the source structure.
   Give the statement room above and below so it reads as a transition into
   the three plans rather than a label attached to either neighbour. */
#sec-cost .tier-intro{
  padding-top: clamp(22px, 2.2vw, 30px) !important;
}
#sec-cost .tier-intro + .cost-tiers{
  margin-top: clamp(36px, 4vw, 52px) !important;
}

/* Heading -> its own paragraph */
:is(h2, h3, h4, .section-title, .effect-part-title, .ai-story-title,
    .dual-wheel-title, .cost-side-headline) + :is(p, .lead, .effect-part-desc,
    .tri-desc, .integration-card-lead){
  margin-top: var(--r-text) !important;
}

/* Groups inside a block */
.integration-content-grid,
.cost-ai-stages,
.delivery-spec,
.process-reference,
.ai-story-panel{
  margin-top: var(--r-group) !important;
}

/* ============================================================
   4. HORIZONTAL BASELINE
   Every section shares one measure so titles and content start on the
   same vertical line. #sec-process previously indented to 176px while
   its neighbours sat at 80px.
   ============================================================ */

main > section,
body > section{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: max(24px, calc((100% - var(--m-content)) / 2)) !important;
  padding-right: max(24px, calc((100% - var(--m-content)) / 2)) !important;
}

/* Inner wrappers already centred by an earlier layer must not add a
   second indent on top of the section padding. */
main > section > *,
body > section > *{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--m-content) !important;
}

/* Section headings align left with the content grid. Centre-aligned
   titles on some sections and left-aligned on others read as an error;
   the deck now uses one axis throughout. */
.eyebrow,
.section-title,
section > h2{
  text-align: left !important;
}
#cover .hero-title,
#cover .cover-tag{
  text-align: center !important;
}

/* Some headings wrap their text in an extra div/span carrying its own
   alignment; force the whole subtree onto the same axis. */
section > h2,
section > h3,
.section-title,
.tier-intro h3,
.tier-intro h3 *,
.eyebrow *{
  text-align: inherit !important;
}
.tier-intro,
.tier-intro h3{
  text-align: left !important;
}

/* ============================================================
   5. LANGUAGE PARITY
   Latin copy at the same nominal size reads smaller than Chinese, so the
   English deck gets marginally looser tracking rather than a size bump.
   ============================================================ */

html:lang(en) body{
  letter-spacing: .002em;
}
html:lang(en) :is(.section-title, .effect-part-title, .ai-story-title,
                  .dual-wheel-title, #cover .hero-title){
  letter-spacing: -.018em !important;
}
/* English headings wrap later than Chinese; allow a wider measure so a
   two-word orphan does not fall to its own line. */
html:lang(en) :is(.effect-part-title, .ai-story-title, .dual-wheel-title){
  max-width: 34ch;
}

/* ============================================================
   6. STRAY SIZE SWEEP
   The role selectors above are class-based, so inline elements that carry
   no class of their own (a bare <span>, <strong>, <b> or <figcaption>)
   kept their legacy sizes and reintroduced 10/12/14/16/18/21/25px into
   what should be a four-step body scale. These rules snap the remainder
   onto the nearest owned step without touching the display roles.
   ============================================================ */

/* Inline emphasis and generic spans inherit their container's size, so a
   <strong> inside body copy no longer jumps a step on its own. Elements
   that carry a named role (label, kicker, meta, index, figure) are excluded
   so they keep the size assigned in section 2. */
section :is(strong, b, em, i, span, a, small):not([class]):not(.din-num){
  font-size: inherit;
}

/* Captions and micro-labels that sit outside the named label roles. */
section :is(figcaption, .ai-story-hd, .ai-story-proof, .ai-story-online-link,
            .service-story-ai, .process-owner, .service-ai-arrow, .tpl-btn-arrow){
  font-size: var(--tn-meta) !important;
  line-height: var(--lh-compact) !important;
}

/* Bare paragraphs and headings in the two service acts still resolved to
   their pre-normalize sizes because no role class was applied. */
#sec-effect-service-demo p{
  font-size: var(--tn-body) !important;
  line-height: var(--lh-copy) !important;
}
#sec-input .delivery-spec h3,
#sec-input .integration-card h3{
  font-size: var(--tn-h4) !important;
}

/* ============================================================
   7. CHAPTER TRANSITIONS
   Major chapters already carry their own filled surfaces and generous
   internal padding. A hard rule directly against the next filled surface
   reads like an accidental seam, especially before the process chapter.
   Keep the transition as breathing room instead of a decorative divider.
   ============================================================ */
.chapter-divider{
  width: 100% !important;
  height: clamp(24px, 2.5vw, 40px) !important;
  margin: 0 !important;
  background: transparent !important;
}
.chapter-divider::after{
  display: none !important;
}

/* The move from 04 报价 to 05 接入 is a primary chapter transition, so keep
   its breathing room but restore one quiet structural rule. */
.chapter-divider-cost{
  width: 100% !important;
  max-width: none !important;
  height: 1px !important;
  margin: clamp(40px, 4vw, 64px) 0 !important;
  background: var(--swiss-dark-rule) !important;
}