/* =========================================================================
   home.css — M22-HOME-01 Clause-led executive homepage (premium B2B SaaS)

   Scoped under `.hp-root` so it never collides with `.app-root` (inner app)
   or `.lp-root` (legacy landing). Reuses the global --saip-* design tokens
   from saip-design-system.css; adds a brighter cyan + uses the amber token as
   a subtle gold accent. Dark navy / teal / cyan / gold premium identity.

   No external assets, no webfonts beyond the system stack, no confidential
   data. All artwork is inline SVG in the template.
   ========================================================================= */

.hp-root {
  --hp-cyan: #46E0E3;
  --hp-gold: var(--saip-amber-500);
  --hp-ink: var(--saip-navy-900);
  --hp-line: rgba(255, 255, 255, 0.12);
  margin: 0;
  font-family: var(--saip-font-ui);
  color: var(--saip-grey-700);
  background: var(--saip-ice-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hp-root *, .hp-root *::before, .hp-root *::after { box-sizing: border-box; }
.hp-container { width: 100%; max-width: var(--saip-container-max); margin: 0 auto; padding: 0 var(--saip-gutter); }
.hp-root a { color: var(--saip-teal-600); text-decoration: none; }
.hp-root h1, .hp-root h2, .hp-root h3, .hp-root h4 { margin: 0; line-height: 1.12; letter-spacing: -0.015em; color: var(--saip-navy-900); }
.hp-skip-link { position: absolute; left: -999px; top: 0; background: var(--saip-navy-900); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; }
.hp-skip-link:focus { left: 0; }
.hp-root :focus-visible { outline: 3px solid var(--hp-cyan); outline-offset: 2px; border-radius: 4px; }

/* ---- eyebrow / section scaffolding ---- */
.hp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size:var(--saip-text-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--saip-teal-600); }
.hp-eyebrow.on-dark { color: var(--hp-cyan); }
.hp-section { padding: clamp(56px, 8vw, 104px) 0; }
.hp-section-light { background: var(--saip-ice-50); }
.hp-section-ice { background: var(--saip-ice-100); }
.hp-section-dark { background: var(--saip-gradient-hero); color: #dfe8f6; }
.hp-section-dark h2, .hp-section-dark h3 { color: #fff; }
.hp-section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.hp-section-head h2 { font-size: clamp(26px, 3.6vw, 42px); margin: 14px 0 16px; }
.hp-lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--saip-grey-500); }
.hp-section-dark .hp-lead { color: #aebfda; }

/* ---- header ---- */
.hp-header { position: sticky; top: 0; z-index: 50; background: rgba(8, 21, 43, 0.82); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--hp-line); }
.hp-header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.hp-wordmark { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; font-size:var(--saip-text-h3); letter-spacing: -0.01em; }
/* M22-BRAND-02 — Profile Sentinel SVG mark replaces the legacy "PS" text
   square (.hp-wordmark-glyph). Decorative (alt=""); the "Profile Sentinel"
   text remains the accessible label. */
.hp-wordmark-mark { display: block; flex: 0 0 auto; width: 40px; height: 40px; }
.hp-nav { display: flex; align-items: center; gap: 6px; }
.hp-nav a { color: #c9d6ec; font-size:var(--saip-text-md); font-weight: 600; padding: 8px 12px; border-radius: 8px; }
.hp-nav a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.hp-nav .hp-nav-ghost { border: 1px solid rgba(255,255,255,0.22); }
.hp-nav .hp-nav-cta { background: var(--saip-gradient-cta-primary); color: #042; font-weight: 700; }
.hp-nav .hp-nav-cta:hover { color: #021; filter: brightness(1.05); }
.hp-nav-toggle { display: none; }

/* ---- buttons ---- */
.hp-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size:var(--saip-text-lg); padding: 13px 22px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, filter .12s ease, background .12s ease; }
.hp-btn:hover { transform: translateY(-1px); }
.hp-btn-primary { background: var(--saip-gradient-cta-primary); color: #042; box-shadow: 0 10px 30px rgba(31,168,171,0.35); }
.hp-btn-primary:hover { filter: brightness(1.06); }
.hp-btn-gold { background: linear-gradient(135deg, #E7A645 0%, #C97E22 100%); color: #2a1700; box-shadow: 0 10px 30px rgba(201,126,34,0.34); }
.hp-btn-ghost { background: rgba(255,255,255,0.04); color: #eaf1ff; border-color: rgba(255,255,255,0.28); }
.hp-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.hp-btn-dark { background: var(--saip-navy-800); color: #fff; }
.hp-btn-light { background: #fff; color: var(--saip-navy-800); border-color: var(--saip-grey-200); box-shadow: var(--saip-shadow-sm); }
.hp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- hero ---- */
.hp-hero { position: relative; background: var(--saip-gradient-hero); color: #e7eefb; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 110px); }
.hp-hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(420px 420px at 86% 8%, rgba(70,224,227,0.16), transparent 70%),
  radial-gradient(540px 420px at 100% 100%, rgba(216,142,47,0.10), transparent 70%);
  pointer-events: none; }
.hp-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.hp-hero h1 { color: #fff; font-size: clamp(32px, 5vw, 58px); line-height: 1.04; }
.hp-hero .hp-subhead { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: #b9c8e6; margin: 20px 0 28px; max-width: 620px; }
.hp-hero-foot { margin-top: 18px; font-size:var(--saip-text-mono); color: #8ea2c8; }
.hp-trust-strip { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 26px; }
.hp-trust-item { font-size:var(--saip-text-sm); font-weight: 600; color: #cdd9ef; padding: 6px 11px; border: 1px solid var(--hp-line); border-radius: 999px; background: rgba(255,255,255,0.03); }
.hp-live-pill { display: inline-flex; align-items: center; gap: 7px; font-size:var(--saip-text-sm); font-weight: 700; letter-spacing: 0.04em; color: #062; background: var(--hp-cyan); padding: 5px 12px; border-radius: 999px; }
.hp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #0a3; box-shadow: 0 0 0 0 rgba(10,170,80,0.6); animation: hp-pulse 2.2s infinite; }
@keyframes hp-pulse { 0% { box-shadow: 0 0 0 0 rgba(10,170,80,0.5);} 70%{ box-shadow:0 0 0 9px rgba(10,170,80,0);} 100%{ box-shadow:0 0 0 0 rgba(10,170,80,0);} }

/* hero art card */
.hp-hero-art { position: relative; }
.hp-glass-card { background: var(--saip-glass-dark); border: 1px solid var(--saip-glass-border); border-radius: var(--saip-radius-lg); backdrop-filter: var(--saip-blur-card); box-shadow: var(--saip-shadow-lg); padding: 18px; }
.hp-art-svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.hp-art-cap { display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:var(--saip-text-sm); color:#9fb2d6; }

/* ---- generic card grids ---- */
.hp-grid { display: grid; gap: 18px; }
.hp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hp-card { background: #fff; border: 1px solid var(--saip-grey-200); border-radius: var(--saip-radius-lg); padding: 22px; box-shadow: var(--saip-shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.hp-card:hover { transform: translateY(-3px); box-shadow: var(--saip-shadow-md); border-color: var(--saip-teal-50); }
.hp-card h3 { font-size: 17px; margin: 12px 0 8px; }
.hp-card p { font-size:var(--saip-text-md); line-height: 1.6; color: var(--saip-grey-500); margin: 0; }
.hp-section-dark .hp-card { background: var(--saip-gradient-card-dark); border-color: var(--hp-line); }
.hp-section-dark .hp-card p { color: #b6c6e4; }
.hp-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--saip-teal-50); color: var(--saip-teal-600); }
.hp-section-dark .hp-ico { background: rgba(70,224,227,0.14); color: var(--hp-cyan); }
.hp-ico svg { width: 22px; height: 22px; }

/* ---- before/after problem split ---- */
.hp-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; border-radius: var(--saip-radius-lg); overflow: hidden; box-shadow: var(--saip-shadow-md); }
.hp-split-pane { padding: 28px; }
.hp-split-before { background: linear-gradient(160deg, #2a1620 0%, #1b0e16 100%); color: #f6d9df; }
.hp-split-after { background: linear-gradient(160deg, #0e2e2c 0%, #0b1a33 100%); color: #d6f2ee; }
.hp-split-mid { display: grid; place-items: center; width: 64px; background: var(--saip-navy-900); color: var(--hp-cyan); font-size: 22px; }
.hp-split-pane h3 { color: #fff; font-size: 18px; margin-bottom: 14px; }
.hp-split-pane ul { margin: 0; padding-left: 18px; }
.hp-split-pane li { font-size:var(--saip-text-md); line-height: 1.7; }
.hp-split-tag { display:inline-block; font-size:var(--saip-text-xs); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:14px; }
.hp-split-before .hp-split-tag { background: rgba(196,81,99,0.25); color:#ffb9c4; }
.hp-split-after .hp-split-tag { background: rgba(43,164,110,0.22); color:#7ff0bd; }

/* ---- pipeline diagram ---- */
.hp-pipeline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 8px; }
.hp-pipe-node { flex: 1 1 130px; min-width: 120px; background: rgba(255,255,255,0.04); border: 1px solid var(--hp-line); border-radius: 12px; padding: 16px 14px; text-align: center; }
.hp-pipe-node .hp-pipe-k { font-size:var(--saip-text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-cyan); }
.hp-pipe-node .hp-pipe-v { font-size:var(--saip-text-base); color: #cdd9ef; margin-top: 6px; }
.hp-pipe-node.is-clause { border-color: rgba(70,224,227,0.5); background: linear-gradient(160deg, rgba(70,224,227,0.16), rgba(11,26,51,0.4)); }
.hp-pipe-arrow { align-self: center; color: #6f88b0; font-weight: 800; }

/* ---- Clause section ---- */
.hp-clause-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.hp-quote { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.5; color: #fff; font-weight: 600; border-left: 3px solid var(--hp-cyan); padding-left: 18px; margin: 22px 0; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hp-chip { font-size:var(--saip-text-mono); font-weight: 600; color: #d7e2f6; background: rgba(255,255,255,0.05); border: 1px solid var(--hp-line); border-radius: 999px; padding: 7px 13px; }
.hp-chip.is-gold { color: #ffd79a; border-color: rgba(231,166,69,0.4); }
.hp-ask-card { background: var(--saip-glass-dark); border: 1px solid var(--saip-glass-border); border-radius: var(--saip-radius-lg); padding: 18px; backdrop-filter: var(--saip-blur-card); }
.hp-ask-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.hp-ask-q { display: flex; align-items: center; gap: 10px; font-size:var(--saip-text-md); color: #e7eefb; background: rgba(255,255,255,0.04); border: 1px solid var(--hp-line); border-radius: 10px; padding: 11px 13px; margin-bottom: 9px; }
.hp-ask-q .hp-q-mark { color: var(--hp-cyan); font-weight: 800; }
.hp-ask-cite { margin-top: 12px; font-size:var(--saip-text-sm); color: #9fb2d6; }
.hp-ask-cite b { color: var(--hp-cyan); }

/* ---- workflow steps ---- */
.hp-flow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; counter-reset: step; }
.hp-flow-step { background: #fff; border: 1px solid var(--saip-grey-200); border-radius: 12px; padding: 16px 12px; position: relative; box-shadow: var(--saip-shadow-sm); }
.hp-flow-step .hp-flow-n { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background: var(--saip-navy-900); color:#fff; font-weight:800; font-size:var(--saip-text-base); margin-bottom:10px; }
.hp-flow-step.is-clause .hp-flow-n { background: var(--saip-gradient-cta-primary); color:#042; }
.hp-flow-step h3 { font-size:var(--saip-text-md); }
.hp-flow-step p { font-size:var(--saip-text-mono); color: var(--saip-grey-500); margin: 6px 0 0; }

/* ---- value columns (three generic personas) ---- */
.hp-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hp-value-col { border-radius: var(--saip-radius-lg); padding: 26px; }
.hp-value-mno { background: var(--saip-gradient-card-light); border: 1px solid var(--saip-grey-200); }
.hp-value-prov { background: linear-gradient(135deg, rgba(31,168,171,0.10), rgba(244,247,251,0.6)); border: 1px solid var(--saip-teal-50); }
.hp-value-qa { background: linear-gradient(135deg, rgba(19,41,77,0.06), rgba(244,247,251,0.6)); border: 1px solid var(--saip-grey-200); }
.hp-value-col h3 { font-size: 20px; margin-bottom: 6px; }
.hp-value-col .hp-value-sub { font-size:var(--saip-text-base); color: var(--saip-grey-500); margin-bottom: 16px; }
.hp-value-list { list-style: none; margin: 0; padding: 0; }
.hp-value-list li { display: flex; gap: 10px; font-size:var(--saip-text-md); line-height: 1.5; padding: 8px 0; border-top: 1px solid var(--saip-grey-200); color: var(--saip-grey-700); }
.hp-value-list li:first-child { border-top: 0; }
.hp-tick { color: var(--saip-teal-600); font-weight: 800; flex: 0 0 auto; }

/* ---- proof / tech facts ---- */
.hp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hp-fact { background: rgba(255,255,255,0.04); border: 1px solid var(--hp-line); border-radius: 12px; padding: 18px; }
.hp-fact h4 { color: #fff; font-size:var(--saip-text-lg); margin-bottom: 6px; }
.hp-fact p { font-size:var(--saip-text-base); color: #b6c6e4; margin: 0; line-height: 1.55; }
.hp-stat-row { display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 28px; }
.hp-stat { flex: 1 1 150px; background: rgba(70,224,227,0.06); border:1px solid rgba(70,224,227,0.22); border-radius: 14px; padding: 18px; }
.hp-stat .hp-stat-n { font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.hp-stat .hp-stat-l { font-size:var(--saip-text-mono); color: #aebfda; margin-top: 4px; }

/* ---- final CTA ---- */
.hp-final { background: var(--saip-gradient-hero); color: #e7eefb; padding: clamp(56px, 8vw, 100px) 0; text-align: center; }
.hp-final h2 { color:#fff; font-size: clamp(26px, 3.6vw, 42px); margin-bottom: 14px; }
.hp-final p { color:#aebfda; max-width: 620px; margin: 0 auto 26px; font-size:var(--saip-text-h3); }
.hp-final .hp-cta-row { justify-content: center; }

/* ---- footer ---- */
.hp-footer { background: var(--saip-navy-900); color: #93a6cc; padding: 48px 0 30px; border-top: 1px solid var(--hp-line); }
.hp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
.hp-footer h4 { color: #fff; font-size:var(--saip-text-base); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.hp-footer a { color: #93a6cc; font-size:var(--saip-text-md); }
.hp-footer a:hover { color: #fff; }
.hp-footer ul { list-style: none; margin: 0; padding: 0; }
.hp-footer li { margin: 7px 0; }
.hp-footer-base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hp-line); font-size:var(--saip-text-sm); color: #6f88b0; }
.hp-license-banner { margin-top:22px; background: rgba(216,142,47,0.14); border:1px solid rgba(216,142,47,0.4); color:#ffd79a; border-radius:12px; padding:12px 16px; font-size:var(--saip-text-base); }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .hp-hero-grid, .hp-clause-grid { grid-template-columns: 1fr; }
  .hp-hero-art { order: -1; }
  .hp-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hp-flow { grid-template-columns: repeat(2, 1fr); }
  .hp-value-grid, .hp-facts { grid-template-columns: 1fr; }
  .hp-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hp-nav { display: none; }
  .hp-nav.is-open { display: flex; position: absolute; top: 64px; right: 0; left: 0; flex-direction: column; background: var(--saip-navy-900); padding: 12px; gap: 4px; border-bottom: 1px solid var(--hp-line); }
  .hp-nav-toggle { display: inline-flex; background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #fff; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
  .hp-grid-3, .hp-facts { grid-template-columns: 1fr; }
  .hp-split { grid-template-columns: 1fr; }
  .hp-split-mid { width: auto; height: 48px; }
  .hp-flow { grid-template-columns: 1fr; }
  /* M22-BRAND-02 — slightly smaller Profile Sentinel mark on narrow viewports */
  .hp-wordmark-mark { width: 30px; height: 30px; }
}
/* ===================================================================== */
/*  M22-HOME-01-R1 additions — proof points, risk chain, Clause answer    */
/*  mock, competitive matrix, trust grid, support line                    */
/* ===================================================================== */

/* brand lockup (Profile Sentinel — powered by Clause) */
.hp-brand-lockup { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.hp-brand-lockup strong { font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.hp-brand-lockup span { font-size:var(--saip-text-base); font-weight: 600; letter-spacing: 0.02em; color: var(--hp-cyan); text-transform: lowercase; }

/* M22-BRAND-03 — hero brand hierarchy: Profile Sentinel is the primary
   hero-level brand (with the mark); the incident-prevention promise stays a
   strong value-prop line directly under it. */
.hp-hero .hp-hero-brand { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 18px); margin: 10px 0 4px; font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
.hp-hero-mark { flex: 0 0 auto; width: clamp(48px, 6vw, 62px); height: clamp(48px, 6vw, 62px); display: block; filter: drop-shadow(0 4px 14px rgba(11,26,51,0.45)); }
.hp-hero-poweredby { margin: 0 0 16px; font-size: clamp(13px, 1.2vw, 15px); font-weight: 600; letter-spacing: 0.02em; color: #9fb2d6; }
.hp-hero-poweredby strong { color: var(--hp-cyan); font-weight: 700; }
/* M22-HOME-NARRATIVE-01 — explicit target-audience line under the brand. */
.hp-hero-audience { margin: 0 0 18px; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.55; color: #c2d0ea; max-width: 560px; }
.hp-hero-value { color: #eaf1ff; font-size: clamp(22px, 2.7vw, 32px); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; margin: 0; max-width: 640px; }

/* M22-BRAND-03 — "Meet Clause" section identity: a memorable Clause lockup
   (mark + name + tagline) leading the section, not just a word in a heading. */
.hp-clause-identity { display: flex; align-items: center; gap: 16px; margin: 16px 0 14px; }
.hp-clause-mark { flex: 0 0 auto; width: 64px; height: 64px; display: block; filter: drop-shadow(0 4px 16px rgba(8,21,43,0.5)); }
.hp-clause-id-text { display: flex; flex-direction: column; line-height: 1.1; }
.hp-clause-name { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.hp-clause-tagline { font-size: clamp(12px, 1.1vw, 14px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hp-cyan); margin-top: 4px; }
#hp-clause-h { margin-top: 6px; }

/* hero support line + proof points */
.hp-support { font-size:var(--saip-text-md); color: #9fb2d6; margin: -10px 0 18px; }
.hp-proofpoints { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.hp-proofpoint { display: inline-flex; align-items: center; gap: 8px; font-size:var(--saip-text-base); font-weight: 600; color: #eaf1ff; background: rgba(70,224,227,0.08); border: 1px solid rgba(70,224,227,0.28); border-radius: 999px; padding: 8px 13px; }
.hp-proofpoint .hp-pp-n { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--hp-cyan); color: #042; font-size:var(--saip-text-xs); font-weight: 800; }

/* risk chain (business-risk section) */
.hp-chain-wrap { display: grid; gap: 16px; }
.hp-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; border-radius: var(--saip-radius-lg); padding: 18px; }
.hp-chain-risk { background: linear-gradient(160deg, #2a1620 0%, #1b0e16 100%); border: 1px solid rgba(196,81,99,0.35); }
.hp-chain-safe { background: linear-gradient(160deg, #0e2e2c 0%, #0b1a33 100%); border: 1px solid rgba(43,164,110,0.4); }
.hp-chain-tag { flex: 0 0 100%; font-size:var(--saip-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.hp-chain-risk .hp-chain-tag { color: #ffb9c4; }
.hp-chain-safe .hp-chain-tag { color: #7ff0bd; }
.hp-chain-node { flex: 1 1 120px; min-width: 110px; display: flex; align-items: center; justify-content: center; text-align: center; font-size:var(--saip-text-mono); font-weight: 600; color: #fff; background: rgba(255,255,255,0.04); border: 1px solid var(--hp-line); border-radius: 10px; padding: 12px 10px; }
.hp-chain-arrow { align-self: center; font-weight: 800; }
.hp-chain-risk .hp-chain-arrow { color: #C45163; }
.hp-chain-safe .hp-chain-arrow { color: var(--hp-cyan); }

/* Clause mock answer card */
.hp-answer-card { background: #fff; border: 1px solid var(--saip-grey-200); border-radius: var(--saip-radius-lg); box-shadow: var(--saip-shadow-md); overflow: hidden; }
.hp-answer-head { display: flex; align-items: center; gap: 10px; background: var(--saip-gradient-cta-primary); padding: 12px 16px; }
/* M22-BRAND-02 — Clause mark on a navy backing tile (the mark reads on navy,
   not on the teal gradient header). Replaces the legacy "C" text glyph. */
.hp-answer-head .hp-ah-glyph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(8,21,43,0.85); }
.hp-answer-head .hp-ah-glyph img { display: block; width: 22px; height: 22px; }
.hp-answer-head strong { color: #042; font-size:var(--saip-text-md); }
.hp-answer-q { font-size:var(--saip-text-base); color: #042; font-weight: 600; margin-left: auto; background: rgba(255,255,255,0.55); padding: 4px 10px; border-radius: 999px; }
.hp-answer-body { padding: 16px; }
.hp-answer-body p { font-size:var(--saip-text-base); line-height: 1.6; color: var(--saip-grey-700); margin: 0 0 12px; }
.hp-answer-label { font-size:var(--saip-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saip-teal-600); margin: 12px 0 6px; }
.hp-answer-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-answer-ref { font-size:var(--saip-text-xs); font-family: var(--saip-font-mono); color: var(--saip-navy-800); background: var(--saip-ice-100); border: 1px solid var(--saip-grey-200); border-radius: 6px; padding: 4px 9px; }
.hp-answer-checks { margin: 6px 0 0; padding-left: 18px; }
.hp-answer-checks li { font-size:var(--saip-text-base); line-height: 1.6; color: var(--saip-grey-700); }
.hp-answer-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.hp-answer-followup { font-size:var(--saip-text-sm); color: var(--saip-teal-600); background: var(--saip-teal-50); border-radius: 999px; padding: 5px 11px; }
.hp-answer-disc { padding: 0 16px 14px; font-size:var(--saip-text-xs); color: var(--saip-grey-500); font-style: italic; }

/* competitive comparison matrix */
.hp-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--saip-radius-lg); }
.hp-matrix { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size:var(--saip-text-base); }
.hp-matrix th, .hp-matrix td { padding: 11px 12px; text-align: center; border-bottom: 1px solid var(--hp-line); }
.hp-matrix thead th { font-size:var(--saip-text-sm); font-weight: 700; color: #cdd9ef; background: rgba(255,255,255,0.03); vertical-align: bottom; }
.hp-matrix thead th.hp-mx-win { color: #042; background: var(--hp-cyan); border-radius: 10px 10px 0 0; }
.hp-matrix tbody th { text-align: left; font-weight: 600; color: #e7eefb; background: rgba(255,255,255,0.02); white-space: nowrap; }
.hp-matrix td.hp-mx-wincol { background: rgba(70,224,227,0.10); }
.hp-mx-yes { color: var(--hp-cyan); font-weight: 800; }
.hp-mx-part { color: var(--hp-gold); font-weight: 800; }
.hp-mx-no { color: #6f88b0; font-weight: 800; }

/* trust / governance grid */
.hp-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hp-trust-card { background: #fff; border: 1px solid var(--saip-grey-200); border-radius: 12px; padding: 16px; box-shadow: var(--saip-shadow-sm); }
.hp-trust-card h4 { font-size:var(--saip-text-md); margin: 0 0 6px; }
.hp-trust-card p { font-size:var(--saip-text-mono); color: var(--saip-grey-500); margin: 0; line-height: 1.5; }
.hp-closing { font-size: clamp(15px, 1.6vw, 19px); font-weight: 600; color: var(--hp-cyan); margin-top: 18px; }

@media (max-width: 960px) {
  .hp-trust-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hp-trust-grid { grid-template-columns: 1fr; }
  .hp-chain-node { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-root *, .hp-root *::before, .hp-root *::after { animation: none !important; transition: none !important; }
}

/* ── M22-HOME-USECASES-01 — hero use-case carousel ─────────────────────────
   One use case visible at a time. Slides are stacked in a single CSS-grid cell
   so the viewport auto-sizes to the TALLEST slide → no layout jump on rotation,
   at any breakpoint. The first slide is server-rendered .is-active, so without
   JavaScript only it shows and the controls (hidden by default) never appear.
   The global prefers-reduced-motion block above already disables the fade. */
/* visually-hidden utility consolidated to the canonical .app-vh
   (saip-design-system.css) — UX-REFONTE-W4B-NAMESPACE-CONSOLIDATION-01. */
.hp-usecase { margin: 4px 0 26px; max-width: 640px; }
.hp-uc-viewport { display: grid; }
.hp-uc-slide {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}
.hp-uc-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hp-uc-label {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size:var(--saip-text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hp-cyan); background: rgba(70,224,227,0.10);
  border: 1px solid rgba(70,224,227,0.30); border-radius: 999px; padding: 6px 12px;
  margin: 0 0 14px;
}
.hp-uc-headline {
  color: #eaf1ff; font-size: clamp(22px, 2.7vw, 32px); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 12px;
}
.hp-uc-body { font-size: clamp(15px, 1.45vw, 18px); line-height: 1.55; color: #b9c8e6; margin: 0; }
.hp-uc-body strong { color: var(--hp-cyan); font-weight: 700; }

.hp-uc-controls { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
/* Without JS the controls keep their `hidden` attribute → stay hidden. This rule
   out-specifies the display:flex above so the boolean attribute wins. */
.hp-uc-controls[hidden] { display: none; }
.hp-uc-arrow {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1;
  color: #eaf1ff; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16); transition: background .15s ease, border-color .15s ease;
}
.hp-uc-arrow:hover { background: rgba(70,224,227,0.12); border-color: rgba(70,224,227,0.45); }
.hp-uc-arrow:focus-visible { outline: 2px solid var(--hp-cyan); outline-offset: 2px; }
.hp-uc-dots { display: flex; align-items: center; gap: 9px; }
.hp-uc-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.22); border: 0; transition: background .2s ease, transform .2s ease, width .2s ease;
}
.hp-uc-dot:hover { background: rgba(255,255,255,0.45); }
.hp-uc-dot:focus-visible { outline: 2px solid var(--hp-cyan); outline-offset: 3px; }
.hp-uc-dot.is-active { background: var(--hp-cyan); width: 22px; border-radius: 999px; }
.hp-uc-counter { margin-left: auto; font-size:var(--saip-text-base); font-weight: 600; color: #9fb2d6; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .hp-uc-counter { display: none; }
  .hp-uc-controls { gap: 10px; }
}

/* ── M22-HOME-AGENT-TEAM-01 — AI-native specialist-agent team grid ──────────
   Compact cards, icon on the left, role title + mission + domain tags. Dark
   navy / teal identity, subtle border + glow, responsive 4/2/1. Inline SVG
   sprite (#ic-*); no external assets. */
.hp-team-sub { font-size:var(--saip-text-lg); line-height: 1.65; color: #9fb2d6; max-width: 760px; margin: 14px 0 0; }
.hp-team-sub strong { color: #eaf1ff; font-weight: 700; }
.hp-agent-grid {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr);
}
.hp-agent-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px 16px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(31,168,171,0.07) 0%, rgba(11,26,51,0.55) 100%);
  border: 1px solid rgba(120,200,220,0.16);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.hp-agent-card:hover {
  border-color: rgba(70,224,227,0.42);
  background: linear-gradient(160deg, rgba(31,168,171,0.13) 0%, rgba(11,26,51,0.6) 100%);
  transform: translateY(-2px);
}
.hp-agent-ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; background: rgba(70,224,227,0.10); border: 1px solid rgba(70,224,227,0.28);
}
.hp-agent-ic svg {
  width: 22px; height: 22px; color: var(--hp-cyan);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.hp-agent-body { min-width: 0; }
.hp-agent-body h3 { margin: 2px 0 0; font-size:var(--saip-text-lg); font-weight: 700; color: #eaf1ff; line-height: 1.25; letter-spacing: -0.01em; }
.hp-agent-body p { margin: 7px 0 0; font-size:var(--saip-text-base); line-height: 1.5; color: #aebfda; }
.hp-agent-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 0; padding: 0; }
.hp-agent-tags li {
  font-size:var(--saip-text-xs); font-weight: 600; letter-spacing: 0.02em; color: #8fd9e6;
  background: rgba(70,224,227,0.08); border: 1px solid rgba(70,224,227,0.22);
  border-radius: 999px; padding: 3px 9px;
}
.hp-team-foot { margin: 28px 0 0; max-width: 760px; font-size:var(--saip-text-base); line-height: 1.6; color: #8aa0c6; }

@media (max-width: 1040px) { .hp-agent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hp-agent-grid { grid-template-columns: 1fr; } }

/* ── M22-HOME-VIDEO-01 — keynote video (hero CTA + section card + modal) ────── */
.hp-keynote-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-family: inherit; font-size:var(--saip-text-md); font-weight: 600; color: #cfe7ee;
  background: transparent; border: 0; padding: 6px 2px; cursor: pointer;
  transition: color .15s ease;
}
.hp-keynote-cta:hover { color: #fff; }
.hp-keynote-play {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(70,224,227,0.12); border: 1px solid rgba(70,224,227,0.4);
}
.hp-keynote-play svg { width: 14px; height: 14px; fill: var(--hp-cyan); }
.hp-keynote-dur { font-size:var(--saip-text-sm); font-weight: 600; color: #8aa0c6; }

.hp-video-wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.hp-video-col { min-width: 0; }
.hp-video-card {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  border: 1px solid rgba(120,200,220,0.2); border-radius: 18px; overflow: hidden;
  background: #05070d; box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hp-video-card:hover { transform: translateY(-3px); border-color: rgba(70,224,227,0.5); box-shadow: 0 30px 90px rgba(0,0,0,0.55); }
.hp-video-card:focus-visible { outline: 3px solid var(--hp-cyan); outline-offset: 3px; }
.hp-video-poster { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hp-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  background: rgba(8,21,43,0.55); backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px rgba(70,224,227,0.5), 0 8px 30px rgba(0,0,0,0.5);
  transition: transform .18s ease, background .18s ease;
}
.hp-video-card:hover .hp-video-play { transform: translate(-50%, -50%) scale(1.06); background: rgba(70,224,227,0.18); }
.hp-video-play svg { width: 64px; height: 64px; }
.hp-video-play svg circle { fill: none; stroke: var(--hp-cyan); stroke-width: 1.3; }
.hp-video-play svg path { fill: var(--hp-cyan); stroke: none; }
.hp-video-dur {
  position: absolute; right: 12px; bottom: 12px; font-size:var(--saip-text-sm); font-weight: 700;
  color: #eaf1ff; background: rgba(5,7,13,0.7); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; padding: 4px 10px; font-variant-numeric: tabular-nums;
}
.hp-video-cap { margin: 16px 0 0; font-size:var(--saip-text-md); line-height: 1.55; color: #aebfda; }
.hp-video-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hp-video-bullets li {
  position: relative; padding-left: 26px; font-size:var(--saip-text-lg); line-height: 1.45; color: #d7e2f4;
}
.hp-video-bullets li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--hp-cyan); box-shadow: 0 0 0 4px rgba(70,224,227,0.14);
}

/* modal */
.hp-video-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); }
.hp-video-modal[hidden] { display: none; }
.hp-video-modal-backdrop { position: absolute; inset: 0; background: rgba(3,5,11,0.82); backdrop-filter: blur(6px); }
.hp-video-modal-inner { position: relative; width: min(1040px, 100%); }
.hp-video-el { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; box-shadow: 0 40px 120px rgba(0,0,0,0.7); border: 1px solid rgba(120,200,220,0.18); }
.hp-video-modal-close {
  position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 24px; line-height: 1;
  color: #eaf1ff; background: #0b1a33; border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); transition: background .15s ease, transform .15s ease;
}
.hp-video-modal-close:hover { background: #16315e; transform: scale(1.05); }
.hp-video-modal-close:focus-visible { outline: 2px solid var(--hp-cyan); outline-offset: 2px; }
@media (max-width: 880px) {
  .hp-video-wrap { grid-template-columns: 1fr; }
  .hp-video-modal-close { top: 6px; right: 6px; }
}

/* ===================================================================== */
/*  M22-HOME-NARRATIVE-01 — "Analyse · Explain · Report" three-layer model */
/* ===================================================================== */
.hp-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-layer-card {
  position: relative;
  background: var(--saip-gradient-card-dark);
  border: 1px solid var(--hp-line);
  border-radius: var(--saip-radius-lg);
  padding: 26px 22px 22px;
  box-shadow: var(--saip-shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hp-layer-card:hover { transform: translateY(-3px); box-shadow: var(--saip-shadow-md); border-color: rgba(70,224,227,0.35); }
.hp-layer-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--saip-gradient-cta-primary); color: #042; font-weight: 800; font-size:var(--saip-text-h3); margin-bottom: 14px; }
.hp-layer-card h3 { font-size: 19px; margin: 0 0 8px; color: #fff; }
.hp-layer-card p { font-size:var(--saip-text-md); line-height: 1.6; color: #b6c6e4; margin: 0; }
.hp-layer-card strong { color: var(--hp-cyan); }
@media (max-width: 640px) { .hp-layers { grid-template-columns: 1fr; } }

/* ===================================================================== */
/*  FT-W5-HOME-REPITCH-01 — six-power line · six-pillar showcase · pricing */
/*  Wave-5 homepage rebuild (brief 07). Marketing tier (light-only).       */
/* ===================================================================== */

/* --- six-power line ("Design · Decode · Check · Compare · Learn · Ask") --- */
.hp-powers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 18px 0 4px; }
.hp-power { font-weight: 800; letter-spacing: -0.01em; font-size: clamp(16px, 1.6vw, 21px); color: #fff; }
.hp-power-sep { color: var(--hp-cyan); font-weight: 700; }
.hp-section-light .hp-power, .hp-section-ice .hp-power { color: var(--saip-navy-900); }

/* --- six-pillar showcase (the new centrepiece) --- */
.hp-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.hp-pillar-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--saip-grey-200); border-radius: var(--saip-radius-lg);
  padding: 24px 22px 22px; box-shadow: var(--saip-shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hp-pillar-card:hover { transform: translateY(-3px); box-shadow: var(--saip-shadow-md); border-color: var(--saip-teal-50); }
.hp-pillar-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hp-pillar-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; background: var(--saip-teal-50); color: var(--saip-teal-600); }
.hp-pillar-ico svg { width: 24px; height: 24px; }
.hp-pillar-num { position: absolute; top: 18px; right: 20px; font-size:var(--saip-text-sm); font-weight: 800; color: var(--saip-grey-300); letter-spacing: 0.04em; }
.hp-pillar-name { font-size: 18px; margin: 0; color: var(--saip-navy-900); }
.hp-pillar-tag { display: block; font-size:var(--saip-text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--saip-teal-600); margin-top: 2px; }
.hp-pillar-lead { font-size:var(--saip-text-md); line-height: 1.55; color: var(--saip-grey-600); margin: 0 0 12px; }
.hp-pillar-caps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.hp-pillar-caps li { position: relative; padding-left: 20px; font-size:var(--saip-text-md); line-height: 1.5; color: var(--saip-slate-700); }
.hp-pillar-caps li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--saip-teal-500); }
.hp-pillar-foot { margin-top: auto; }
.hp-pillar-link { display: inline-flex; align-items: center; gap: 6px; font-size:var(--saip-text-md); font-weight: 700; color: var(--saip-teal-600); }
.hp-pillar-link:hover { color: var(--saip-teal-500); }
.hp-pillar-link .hp-pillar-arrow { transition: transform .14s ease; }
.hp-pillar-link:hover .hp-pillar-arrow { transform: translateX(3px); }
.hp-pillar-badge { display: inline-block; font-size:var(--saip-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saip-grey-500); }

/* --- pricing / tiers --- */
.hp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; margin-top: 8px; }
.hp-price-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--saip-grey-200); border-radius: var(--saip-radius-lg);
  padding: 28px 24px 26px; box-shadow: var(--saip-shadow-sm);
}
.hp-price-card.is-featured { border-color: var(--saip-teal-500); box-shadow: 0 18px 48px rgba(31,168,171,0.20); }
.hp-price-flag { display: inline-block; align-self: flex-start; font-size:var(--saip-text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #042; background: var(--saip-gradient-cta-primary); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.hp-price-name { font-size: 22px; margin: 0 0 4px; color: var(--saip-navy-900); }
.hp-price-tagline { font-size:var(--saip-text-md); line-height: 1.5; color: var(--saip-grey-600); margin: 0 0 16px; min-height: 42px; }
.hp-price-structure { font-size:var(--saip-text-lg); font-weight: 700; color: var(--saip-navy-800); margin: 0 0 4px; }
.hp-price-meter { font-size:var(--saip-text-sm); color: var(--saip-grey-500); margin: 0 0 18px; }
.hp-price-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.hp-price-list li { position: relative; padding-left: 24px; font-size:var(--saip-text-md); line-height: 1.5; color: var(--saip-slate-700); }
.hp-price-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--saip-teal-600); }
.hp-price-list li .hp-price-k { font-weight: 700; color: var(--saip-navy-900); }
.hp-price-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: auto; width: 100%; font-weight: 700; font-size:var(--saip-text-lg);
  padding: 12px 20px; border-radius: 12px; border: 1px solid var(--saip-teal-600);
  color: var(--saip-teal-600); background: #fff; transition: background .12s ease, color .12s ease, transform .12s ease;
}
.hp-price-cta:hover { transform: translateY(-1px); }
.hp-price-card.is-featured .hp-price-cta { background: var(--saip-gradient-cta-primary); color: #042; border-color: transparent; box-shadow: 0 10px 26px rgba(31,168,171,0.3); }
.hp-price-cta.is-solid { background: var(--saip-gradient-cta-primary); color: #042; border-color: transparent; }
.hp-price-cta:not(.is-solid):hover { background: var(--saip-teal-50); }
.hp-price-note { margin-top: 22px; font-size:var(--saip-text-sm); color: var(--saip-grey-500); font-style: italic; }

@media (max-width: 960px) {
  .hp-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .hp-powers { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .hp-pillars-grid { grid-template-columns: 1fr; }
}

/* hero positioning line (FT-W5-HOME-REPITCH-01) */
.hp-hero-positioning { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: #cdd9ef; margin: 16px 0 6px; max-width: 640px; }