/*
  Styles for castle.html and castle-comparison.html, extracted from inline
  style="..."/style-hover="..."/style-active="..." attributes the same way as
  bunker.css/gatekeeper.css/eula.css. Two consumers, like bunker.css - not a
  sole-consumer file like gatekeeper.css/404.css.

  Class prefixes: `.s70-castle-*` for castle.html, `.s70-ccmp-*` for
  castle-comparison.html (matching the bcmp/bunker-comparison convention).
  A handful of classes are deliberately reused across both files where the
  exact same declaration already existed in both (`.s70-castle-badge-row`,
  `-badge-dash`, `-badge-text`, `.s70-castle-eyebrow`, `.s70-castle-container`,
  `.s70-castle-card-p`, `.s70-castle-cta-inline`, `.s70-castle-trust-link`,
  `.s70-castle-cta-primary`, `.s70-ccmp-card-h3`, `.s70-castle-cap-card`,
  `.s70-text-orange`) - that's the DRY point of one shared stylesheet per
  product line (see bunker.css/gatekeeper.css), not a naming mistake.
  `.s70-ccmp-cta-primary` is its own near-duplicate of `.s70-castle-cta-primary`
  rather than reused, since it genuinely differs (adds `margin-top: 8px`) -
  same "only reuse when byte-identical" rule.

  Also carries the shared `html, body` reset plus the `s70-marquee`/
  `s70-dropdown-in`/`gk-blink`/`gk-pulse` `@keyframes`, previously an
  identical inline `<style>` block duplicated in each page's own `<head>` -
  same treatment as bunker.css/gatekeeper.css/eula.css/404.css/architecture.css.
  Only `gk-blink`/`gk-pulse` are actually used by this page's own markup (the
  hero identity diagram's blinking source dots and pulsing icon box);
  `s70-dropdown-in` is needed by `s70-nav.js`'s Products dropdown (loaded on
  every page including these two); `s70-marquee` isn't used by either file but
  is kept for parity with the block it replaced.

  Pre-existing `.s70-castle-hero-grid`/`.s70-castle-sidelabel`/
  `.s70-castle-sources`/`.s70-castle-source-badge` classes already existed
  before this extraction, as `responsive.css` mobile-breakpoint hooks
  (`!important` overrides) on elements that otherwise carried a full inline
  `style="..."` alongside them - this file adds each one's base (desktop)
  declaration under that same class rather than inventing a new name, so
  `responsive.css`'s existing selectors keep working unchanged.
*/

html, body { margin: 0; padding: 0; background: var(--s70-black); }
@keyframes s70-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes s70-dropdown-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes gk-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes gk-pulse { 0% { box-shadow: 0 0 0 0 var(--tint-orange-35); } 70% { box-shadow: 0 0 0 18px var(--tint-fade); } 100% { box-shadow: 0 0 0 0 var(--tint-fade); } }

/* ============ shared across castle.html + castle-comparison.html ============ */
.s70-castle-badge-row { display: inline-flex; align-items: center; gap: 12px; }
.s70-castle-badge-dash { width: 24px; height: 2px; background: var(--s70-orange); box-shadow: 0 0 8px var(--tint-orange-70); }
.s70-castle-badge-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tint-accent-soft); }
.s70-text-orange { color: var(--s70-orange); }
.s70-castle-container { max-width: 1120px; margin: 0 auto; }
.s70-castle-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s70-orange); }
.s70-castle-cap-card { display: flex; flex-direction: column; gap: 12px; padding: 30px; background: var(--s70-ink-700); border: 1px solid var(--border-default); border-radius: 14px; transition: border-color 160ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-castle-cap-card:hover { border-color: var(--tint-orange-35); }
.s70-ccmp-card-h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--s70-white); }
.s70-castle-cta-inline { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--tint-white-04); color: var(--fg-on-accent); font-family: var(--font-mono); font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 10px; border: 1px solid var(--tint-white-14); transition: border-color 140ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-castle-cta-inline:hover { border-color: var(--tint-orange-45); }
.s70-castle-trust-link { color: var(--tint-white-85); text-decoration: none; border-bottom: 1px solid var(--tint-white-30); }
.s70-castle-trust-link:hover { border-bottom-color: var(--tint-white-85); }
.s70-castle-card-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tint-white-55); text-wrap: pretty; }
.s70-castle-cta-primary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; background: var(--s70-orange); color: var(--fg-on-accent); font-family: var(--font-mono); font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 10px; box-shadow: 0 0 24px var(--tint-orange-35), 0 0 80px var(--tint-orange-12); transition: background 120ms cubic-bezier(0.2,0.7,0.2,1), transform 120ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-castle-cta-primary:hover { background: var(--s70-orange-bright); }
.s70-castle-cta-primary:active { background: var(--s70-orange-deep); transform: scale(0.97); }

/* ============ castle.html only ============ */
.s70-castle-hero { position: relative; width: 100%; min-height: 100vh; overflow: hidden; background: var(--s70-black); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.s70-castle-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(64% 58% at 78% 40%, var(--tint-orange-20) 0%, var(--tint-orange-06) 34%, var(--tint-fade) 66%); }
.s70-castle-gridpattern { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.6; background-image: linear-gradient(var(--tint-white-035) 1px, transparent 1px), linear-gradient(90deg, var(--tint-white-035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(82% 82% at 62% 42%, var(--tint-mask-solid) 28%, transparent 80%); mask-image: radial-gradient(82% 82% at 62% 42%, var(--tint-mask-solid) 28%, transparent 80%); }
.s70-castle-hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: center; gap: clamp(40px, 6vw, 88px); max-width: 1280px; margin: 0 auto; padding: clamp(140px, 20vh, 220px) clamp(24px, 7vw, 120px) clamp(40px, 5vw, 64px); }
.s70-castle-herotext { display: flex; flex-direction: column; gap: 24px; max-width: 540px; }
.s70-castle-h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.02em; color: var(--s70-white); text-wrap: balance; }
.s70-castle-p { margin: 0; font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--s70-ink-100); max-width: 500px; text-wrap: pretty; }
.s70-castle-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.s70-castle-cta-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; background: var(--tint-white-04); color: var(--fg-on-accent); font-family: var(--font-mono); font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 10px; border: 1px solid var(--tint-white-14); transition: border-color 140ms cubic-bezier(0.2,0.7,0.2,1), background 140ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-castle-cta-secondary:hover { border-color: var(--tint-orange-45); background: var(--tint-white-06); }
.s70-castle-visualwrap { justify-self: center; display: flex; flex-direction: column; align-items: center; width: min(560px, 100%); }
.s70-castle-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.s70-castle-source-badge { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--s70-ink-700); border: 1px solid var(--tint-white-12); border-radius: 10px; white-space: nowrap; }
.s70-castle-source-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--s70-orange); box-shadow: 0 0 7px var(--tint-orange-70); animation: gk-blink 2.4s infinite; }
.s70-castle-source-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint-white-70); }
.s70-castle-svg-block { display: block; }
.s70-castle-iconwrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.s70-castle-iconbox { width: 128px; height: 128px; border-radius: 24px; background: var(--tint-header-bg); border: 1px solid var(--tint-orange-35); display: flex; align-items: center; justify-content: center; animation: gk-pulse 3.2s infinite; }
.s70-castle-identity-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tint-accent-soft); white-space: nowrap; }

/* Base shared by both side callouts; -left/-right hold only what differs
   (which side, label width, text-align). */
.s70-castle-sidelabel { position: absolute; top: 44px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tint-white-40); }
.s70-castle-sidelabel-left { right: calc(100% + 24px); width: 120px; text-align: right; }
.s70-castle-sidelabel-right { left: calc(100% + 24px); width: 130px; }

.s70-castle-tagsrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 13px 15px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--tint-media-bg); }
.s70-castle-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tint-white-70); padding: 4px 8px; border: 1px solid var(--tint-white-12); border-radius: 7px; white-space: nowrap; }
.s70-castle-wpwrap { position: relative; z-index: 3; max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 7vw, 120px) clamp(64px, 8vw, 104px); }
.s70-castle-workswith-section { background: var(--tint-section-alt-bg); border-top: 1px solid var(--tint-white-06); border-bottom: 1px solid var(--tint-white-06); padding: 24px clamp(24px, 7vw, 120px); font-family: var(--font-body); }
.s70-castle-workswith-row { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; }
.s70-castle-workswith-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tint-white-35); }
.s70-castle-workswith-chip { display: inline-flex; align-items: center; gap: 9px; opacity: 0.62; transition: opacity 160ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-castle-workswith-chip:hover { opacity: 1; }
.s70-castle-workswith-icon { filter: brightness(0) invert(1); }
.s70-castle-workswith-name { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--tint-white-82); }
.s70-castle-workswith-more { font-family: var(--font-mono); font-size: 13px; color: var(--tint-accent-soft); }
.s70-castle-section { background: var(--s70-black); padding: clamp(80px, 10vw, 128px) clamp(24px, 7vw, 120px); font-family: var(--font-body); }
.s70-castle-section-header { display: flex; flex-direction: column; gap: 18px; margin-bottom: 48px; max-width: 760px; }
.s70-castle-h2 { margin: 0; max-width: 760px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--s70-white); text-wrap: balance; }
.s70-castle-hiw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.s70-castle-card { display: flex; flex-direction: column; gap: 14px; padding: 30px; background: var(--s70-ink-700); border: 1px solid var(--border-default); border-radius: 14px; transition: border-color 160ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-castle-card:hover { border-color: var(--tint-orange-35); }
.s70-castle-card-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--tint-accent-soft); }
.s70-castle-card-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--s70-white); }
.s70-castle-section-alt { background: var(--tint-section-alt-bg); padding: clamp(80px, 10vw, 128px) clamp(24px, 7vw, 120px); font-family: var(--font-body); }
.s70-castle-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.s70-castle-cap-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--tint-input-bg); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; }
.s70-castle-cap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s70-orange); box-shadow: 0 0 8px var(--tint-orange-70); }
.s70-castle-cap-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--s70-white); }
.s70-castle-compliance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.s70-castle-compliance-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--s70-ink-700); border: 1px solid var(--border-default); border-radius: 14px; transition: border-color 160ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-castle-compliance-card:hover { border-color: var(--tint-orange-35); }
.s70-castle-compliance-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint-white-42); }
.s70-castle-compliance-value { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--s70-white); }
.s70-castle-compliance-desc { font-size: 15px; line-height: 1.55; color: var(--tint-white-55); text-wrap: pretty; }
.s70-castle-trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--tint-white-08); }
.s70-castle-trust-p { margin: 0; font-size: 15px; color: var(--tint-white-55); }
.s70-castle-faq-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.s70-castle-faq-left { display: flex; flex-direction: column; gap: 16px; }
.s70-castle-h2-nomax { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--s70-white); text-wrap: balance; }
.s70-castle-faq-intro-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tint-white-55); }
.s70-castle-faq-right { display: flex; flex-direction: column; }
.s70-castle-faq-item { border-top: 1px solid var(--border-default); }
.s70-castle-faq-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; background: none; border: none; cursor: pointer; text-align: left; color: var(--fg-on-accent); font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
/* transform stays inline per-instance (dynamic rotate({{ faqNRot }})); only the static declarations live here. */
.s70-castle-faq-chevron { flex: none; transition: transform 180ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-castle-faq-answer { margin: 0; padding: 0 48px 26px 0; color: var(--tint-white-60); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.s70-castle-faq-item-last { border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.s70-castle-cmpbanner-section { background: var(--tint-section-alt-bg); border-top: 1px solid var(--tint-white-06); padding: clamp(56px, 7vw, 88px) clamp(24px, 7vw, 120px); font-family: var(--font-body); }
.s70-castle-cmpbanner-row { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.s70-castle-cmpbanner-text { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.s70-castle-cmpbanner-h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; color: var(--s70-white); }
.s70-castle-finalcta-section { position: relative; background: var(--s70-black); padding: clamp(96px, 13vw, 168px) clamp(24px, 7vw, 120px); font-family: var(--font-body); overflow: hidden; }
.s70-castle-finalcta-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 110% at 50% 128%, var(--tint-orange-20) 0%, var(--tint-orange-05) 36%, var(--tint-fade) 68%); }
.s70-castle-finalcta-inner { position: relative; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.s70-castle-finalcta-p { margin: 0; max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--tint-white-60); text-wrap: pretty; }
.s70-castle-finalcta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }

/* ============ castle-comparison.html only ============ */
.s70-ccmp-page { background: var(--s70-black); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.s70-ccmp-hero-section { position: relative; padding: clamp(130px, 16vh, 170px) clamp(24px, 7vw, 120px) clamp(56px, 7vw, 80px); overflow: hidden; }
.s70-ccmp-hero-glow { position: absolute; top: 0; left: 0; right: 0; height: 420px; pointer-events: none; background: radial-gradient(60% 90% at 50% -20%, var(--tint-orange-14) 0%, var(--tint-orange-04) 40%, var(--tint-fade) 70%); }
.s70-ccmp-hero-inner { position: relative; max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.s70-ccmp-h1 { margin: 0; max-width: 860px; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.05; letter-spacing: -0.02em; color: var(--s70-white); text-wrap: balance; }
.s70-ccmp-hero-p { margin: 0; max-width: 700px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--tint-white-60); text-wrap: pretty; }
.s70-ccmp-jobs-section { padding: 0 clamp(24px, 7vw, 120px) clamp(64px, 8vw, 96px); }
.s70-ccmp-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s70-orange); margin-bottom: 16px; }
.s70-ccmp-h2 { margin: 0 0 16px; max-width: 760px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--s70-white); text-wrap: balance; }
.s70-ccmp-section-p { margin: 0 0 36px; max-width: 680px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--tint-white-60); text-wrap: pretty; }
.s70-ccmp-jobs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.s70-ccmp-job-card-highlight { display: flex; flex-direction: column; gap: 12px; padding: 30px; background: var(--tint-ember-box-bg); border: 1px solid var(--tint-orange-40); border-radius: 14px; }
.s70-ccmp-job-label-highlight { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tint-accent-soft); }
.s70-ccmp-card-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tint-white-55); text-wrap: pretty; }
.s70-ccmp-job-card { display: flex; flex-direction: column; gap: 12px; padding: 30px; background: var(--s70-ink-700); border: 1px solid var(--border-default); border-radius: 14px; }
.s70-ccmp-job-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tint-white-40); }
.s70-ccmp-table-section { background: var(--tint-section-alt-bg); border-top: 1px solid var(--tint-white-06); border-bottom: 1px solid var(--tint-white-06); padding: clamp(64px, 8vw, 96px) clamp(24px, 7vw, 120px); }
.s70-ccmp-table-wrap { border: 1px solid var(--border-default); border-radius: 14px; overflow: hidden; background: var(--tint-media-bg); }
.s70-ccmp-table-header-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; background: var(--tint-header-bg); border-bottom: 1px solid var(--border-default); }
.s70-ccmp-th-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; line-height: 1.5; text-transform: uppercase; padding: 14px 16px; display: flex; align-items: center; color: var(--tint-white-40); }
.s70-ccmp-cell-castle { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; line-height: 1.5; text-transform: uppercase; padding: 14px 16px; display: flex; align-items: center; color: var(--tint-accent-soft); background: var(--tint-orange-06); }
.s70-ccmp-th-competitor { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; line-height: 1.5; text-transform: uppercase; padding: 14px 16px; display: flex; align-items: center; color: var(--tint-white-60); }
.s70-ccmp-table-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; border-bottom: 1px solid var(--tint-white-06); }
.s70-ccmp-td-label { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--tint-white-75); padding: 14px 16px; display: flex; align-items: center; text-transform: none; letter-spacing: 0; }
.s70-ccmp-td-competitor { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; line-height: 1.5; text-transform: uppercase; padding: 14px 16px; display: flex; align-items: center; color: var(--tint-white-45); }
.s70-ccmp-table-row-last { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.s70-ccmp-table-footnote { margin: 16px 4px 0; max-width: 900px; font-size: 12px; line-height: 1.6; color: var(--tint-white-35); }
.s70-ccmp-faq2-section { padding: clamp(64px, 8vw, 96px) clamp(24px, 7vw, 120px) clamp(56px, 7vw, 80px); }
.s70-ccmp-faq2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 36px; }
.s70-ccmp-card-p2 { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tint-white-55); text-wrap: pretty; }
.s70-ccmp-section-tight { padding: 0 clamp(24px, 7vw, 120px) clamp(72px, 9vw, 110px); }
.s70-ccmp-scope-card { max-width: 1120px; margin: 0 auto; padding: clamp(30px, 3.5vw, 44px); background: var(--s70-ink-700); border: 1px solid var(--border-default); border-radius: 18px; display: flex; flex-direction: column; gap: 18px; }
.s70-ccmp-scope-list { display: flex; flex-direction: column; gap: 12px; }
.s70-ccmp-scope-item { display: flex; gap: 12px; align-items: flex-start; }
.s70-ccmp-scope-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--s70-orange); margin-top: 8px; flex: none; }
.s70-ccmp-scope-p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tint-white-60); text-wrap: pretty; }
.s70-ccmp-cta-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.s70-ccmp-cta-h2 { margin: 0; max-width: 720px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--s70-white); text-wrap: balance; }
.s70-ccmp-cta-p { margin: 0; max-width: 620px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--tint-white-60); text-wrap: pretty; }
.s70-ccmp-cta-primary { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 15px 30px; background: var(--s70-orange); color: var(--fg-on-accent); font-family: var(--font-mono); font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 10px; box-shadow: 0 0 24px var(--tint-orange-35), 0 0 80px var(--tint-orange-12); transition: background 120ms cubic-bezier(0.2,0.7,0.2,1), transform 120ms cubic-bezier(0.2,0.7,0.2,1); }
.s70-ccmp-cta-primary:hover { background: var(--s70-orange-bright); }
.s70-ccmp-cta-primary:active { background: var(--s70-orange-deep); transform: scale(0.97); }
