/* Pricing (commercial planning and evaluation) page. Loads after platform.css and reuses its
   tokens/components (.fp-hero/.fp-sec/.fp-wrap/.fp-grid/.fp-checks/.fp-metrics/.fp-products/
   .fp-timeline/.fp-cov/.fp-callout/.fp-faq/.fp-sec--cta/.fu family). A distinct commercial-
   planning identity, not the Blog design: sticky section nav, scope-building components, and
   a review-status vocabulary (requested / needs clarification / subject to review) rather than
   confirmed facts. Nothing here calculates or displays a price. Prefix: pr-. */

.sh-notice { display:flex; gap:12px; align-items:flex-start; margin:22px 0 0!important; padding:14px 18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:6px; color:#b7cccd!important; font-size:.875rem!important; line-height:1.55!important; max-width:720px; }
.sh-notice svg { flex:none; width:22px; height:22px; margin-top:1px; fill:none; stroke:#6fd6b4; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sh-notice--light { background:var(--mint-l); border-color:#d3e6de; color:var(--mute)!important; }
.sh-notice--light svg { stroke:var(--em); }

/* ---------- hero: commercial-scope workspace ---------- */
.pr-scope-dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.pr-scope-dl > div { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; border-bottom:1px solid #16394a; }
.pr-scope-dl dt { color:#8fb0b5; font-size:.8125rem; flex:none; }
.pr-scope-dl dd { margin:0; color:#eaf4f2; font-size:.875rem; text-align:right; overflow-wrap:anywhere; }
.pr-scope-dl dd.tbc { color:#e0a94a; font-style:italic; }
.pr-flag { display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 16px; background:#2d2210; border:1px solid #5a4318; border-radius:6px; color:#f2c777; font-size:.8125rem; font-weight:650; }
.pr-flag svg { flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.fu-live--tbc { background:transparent; color:#f2c777; border:1px solid #5a4318; padding:3px 10px; border-radius:999px; }
.fu-live--tbc::before { background:#f2c777; box-shadow:0 0 8px #f2c777; }

/* ---------- sticky section nav ---------- */
.pr-jumps { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e1ebe7; }
.pr-jumps-in { max-width:1240px; margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; gap:4px; }
.pr-jumps a { display:inline-block; padding:15px 16px; font-size:.8125rem; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); text-decoration:none; border-bottom:2px solid transparent; }
.pr-jumps a:hover { color:var(--ink); }
.pr-jumps a.is-on { color:var(--em); border-bottom-color:var(--em); }
.pr-jumps a:focus-visible { outline:2px solid var(--em); outline-offset:-2px; }

/* ---------- status pills (requested / needs clarification / subject to review / confirmed) ---------- */
.pr-status { display:inline-block; font-size:.75rem; font-weight:700; padding:3px 11px; border-radius:4px; white-space:nowrap; line-height:1.5; border:1px solid transparent; letter-spacing:.01em; }
.pr-status--tbc { background:#e4ebee; color:#41565f; border-color:#c5d2d8; }
.pr-status--review { background:#fbefcf; color:#7a5300; border-color:#ecd28f; }
.pr-status--clarify { background:#fde2cc; color:#8a3d05; border-color:#f4c19b; }
.pr-status--confirmed { background:#d9f4ea; color:#075c47; border-color:#a9e2cd; }
.pr-status-dark { background:rgba(255,255,255,.08); color:#dcebe8; border-color:rgba(255,255,255,.16); }

/* ---------- scope cards (Start with scope) ---------- */
.pr-scope-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:clamp(28px,3.5vw,40px); }
.pr-scope-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.pr-scope-i { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:var(--mint); color:var(--em); }
.pr-scope-i svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pr-scope-card h3 { margin:0; font-size:1.0625rem; }
.pr-scope-card p { margin:0; font-size:.9375rem; line-height:1.55; color:var(--mute); flex:1; }
.pr-scope-tags { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pr-scope-tags li { padding:4px 10px; border-radius:999px; background:var(--mint-l); border:1px solid #d3e6de; color:var(--mute); font-size:.75rem; font-weight:600; }
.pr-scope-card > .pr-status { align-self:flex-start; }

/* ---------- connected chain (requirement -> scope -> coverage -> integration -> discussion) ---------- */
.pr-chain { list-style:none; margin:clamp(32px,4vw,44px) 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; gap:0; counter-reset:pr-chain; }
.pr-chain li { flex:1 1 160px; display:flex; align-items:center; gap:10px; padding:14px 12px; }
.pr-chain li:not(:last-child)::after { content:'\2192'; margin-left:auto; color:var(--em); font-size:1.25rem; padding-left:10px; }
.pr-chain b { counter-increment:pr-chain; display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--navy-2); color:#fff; font-size:.8125rem; font-weight:700; }
.pr-chain b::before { content:counter(pr-chain); }
.pr-chain span { font-size:.9375rem; font-weight:650; color:var(--ink); }

/* ---------- illustrative scope builder ---------- */
.pr-builder { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,3vw,40px); align-items:start; margin-top:clamp(32px,4vw,44px); }
.pr-builder-form { background:#fff; border:1px solid var(--line); border-radius:12px; padding:clamp(22px,2.6vw,32px); display:grid; gap:20px; }
.pr-field { display:grid; gap:8px; }
.pr-field > label, .pr-field > span, .pr-field > legend { display:block; font-size:.8125rem; font-weight:650; text-transform:uppercase; letter-spacing:.05em; color:var(--em); padding:0; }
.pr-field select, .pr-field input[type="text"] { width:100%; padding:12px 14px; border:1px solid #c7dcd1; border-radius:8px; font-size:.9375rem; background:#fff; font-family:inherit; color:var(--ink); }
.pr-field select:focus-visible, .pr-field input:focus-visible { outline:2px solid var(--em); outline-offset:1px; }
.pr-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.pr-check-grid label, .pr-check { display:flex; align-items:center; gap:8px; font-size:.9375rem; color:var(--ink); }
.pr-check-grid input, .pr-check input { accent-color:var(--em); width:17px; height:17px; flex:none; }
.pr-builder-form fieldset { border:0; margin:0; padding:0; display:grid; gap:8px; }

.pr-summary { position:sticky; top:88px; background:#0a1c28; border:1px solid #1d4254; border-radius:12px; padding:24px; color:#dcebe8; }
.pr-summary-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.pr-summary-h small { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:#6fd6b4; font-weight:650; }
.pr-summary dl { margin:0 0 16px; display:grid; gap:0; }
.pr-summary dl > div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #16394a; }
.pr-summary dt { color:#8fb0b5; font-size:.8125rem; }
.pr-summary dd { margin:0; color:#eaf4f2; font-size:.875rem; text-align:right; overflow-wrap:anywhere; }
.pr-summary-note { margin:0!important; padding:12px 14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:6px; color:#b7cccd!important; font-size:.8125rem!important; line-height:1.5!important; }

/* ---------- what to bring: two-column requirement workspace ---------- */
.pr-prep-progress { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; margin:clamp(28px,3.5vw,40px) 0; padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.pr-prep-progress small { font-size:.8125rem; font-weight:650; color:var(--ink); white-space:nowrap; }
.pr-prep-progress div { height:10px; background:#e2ece8; border-radius:99px; overflow:hidden; }
.pr-prep-progress i { display:block; height:100%; width:0%; background:var(--em); transition:width .25s ease; }
.pr-prep-progress b { font-size:.875rem; color:var(--mute); white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { .pr-prep-progress i { transition:none; } }
.pr-prep-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pr-prep-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 22px; display:grid; gap:8px; }
.pr-prep-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.pr-prep-card h3 { margin:0; font-size:1.0625rem; }
.pr-prep-card p { margin:0; font-size:.9375rem; color:var(--mute); line-height:1.5; }
.pr-prep-why { margin:0!important; font-size:.8125rem!important; color:#5c7a70!important; font-style:italic; }
.pr-prep-example { display:inline-block; margin-top:2px; padding:4px 10px; border-radius:999px; background:var(--mint-l); border:1px solid #d3e6de; color:var(--mute); font-size:.75rem; font-weight:600; align-self:flex-start; }
.pr-prep-toggle { display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:650; color:var(--em); cursor:pointer; }
.pr-prep-toggle input { accent-color:var(--em); width:16px; height:16px; }

/* ---------- deployment / integration context ---------- */
.pr-ctx-list { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.pr-ctx-list li { display:flex; align-items:center; gap:10px; font-size:.9375rem; color:var(--ink); }
.pr-ctx-list li::before { content:''; flex:none; width:8px; height:8px; border-radius:50%; background:var(--em); }

/* Platform's own .fp-deploy assumes a dark parent (.fp-cov); reused here on a light section,
 * so its background/border/text colors need a light-appropriate variant. */
.fp-deploy.pr-deploy-light li { background:#fff; border-color:var(--line); }
.fp-deploy.pr-deploy-light b { color:var(--ink); }
.fp-deploy.pr-deploy-light small { color:var(--mute); }
.fp-deploy.pr-deploy-light .fp-dicon { background:var(--mint); }
.fp-deploy.pr-deploy-light .fp-dicon svg { stroke:var(--em); }

/* ---------- scope matrix (What may be included) ---------- */
.pr-matrix-wrap { overflow-x:auto; margin-top:clamp(24px,3vw,32px); }
.pr-matrix-wrap:focus-visible { outline:2px solid var(--em); outline-offset:2px; }
.pr-matrix { width:100%; border-collapse:collapse; min-width:840px; }
.pr-matrix th { padding:14px 12px; font-size:.6875rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); background:#f6faf8; border-bottom:1px solid #d3e6de; text-align:left; }
.pr-matrix th:not(:first-child), .pr-matrix td:not(:first-child) { text-align:center; }
.pr-matrix td { padding:14px 12px; border-bottom:1px solid #e8f0ed; font-size:.9375rem; }
.pr-matrix tbody th { text-align:left; font-weight:600; color:var(--ink); }
.pr-matrix tbody tr:hover { background:#f6faf8; }
.pr-matrix tbody tr:last-child td, .pr-matrix tbody tr:last-child th { border-bottom:0; }

/* ---------- process (vertical, numbered, handles 7 steps cleanly) ---------- */
.pr-process { list-style:none; margin:clamp(32px,4vw,44px) 0 0; padding:0; display:grid; gap:0; max-width:860px; }
.pr-process li { position:relative; display:grid; grid-template-columns:56px 1fr; gap:20px; padding-bottom:clamp(24px,3vw,32px); }
.pr-process li:last-child { padding-bottom:0; }
.pr-process li::before { content:''; position:absolute; left:27px; top:56px; bottom:0; width:2px; background:#d3dedb; }
.pr-process li:last-child::before { display:none; }
.pr-process b { position:relative; z-index:1; width:56px; height:56px; border-radius:10px; background:var(--navy-2); color:#6fd6b4; display:grid; place-items:center; font-weight:700; font-size:1.125rem; box-shadow:0 0 0 6px #fff; }
.pr-process-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 22px; }
.pr-process-card h3 { margin:0 0 6px; font-size:1.125rem; }
.pr-process-card p { margin:0; font-size:.9375rem; color:var(--mute); line-height:1.5; }

/* ---------- evaluation access illustrative panel ---------- */
.pr-eval-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,3.5vw,44px); align-items:center; }
/* .fu--mini (the wrapping panel) is a light/white component, unlike the dark .fu--hero panel
 * this dt/dd style was first written for, so it needs light-appropriate colors, not the dark
 * navy palette. */
.pr-eval-fields { margin:0; padding:16px 22px; display:grid; gap:0; }
.pr-eval-fields > div { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid #e8f0ed; }
.pr-eval-fields > div:last-child { border-bottom:0; }
.pr-eval-fields dt { color:var(--mute); font-size:.8125rem; flex:none; } .pr-eval-fields dd { margin:0; color:var(--ink); font-size:.875rem; text-align:right; overflow-wrap:anywhere; }

/* ---------- product configuration selection state ---------- */
/* Platform's own .fp-pcard wraps its whole card in one <a>; this page adds an optional
 * selection checkbox, which cannot legally nest inside a link, so the border/background/hover
 * treatment moves from the anchor to the <li> and the checkbox sits beside it as a sibling. */
.pr-product-grid .fp-pcard { background:#fff; border:1px solid var(--line); border-top:3px solid var(--acc); border-radius:8px; overflow:hidden; transition:transform .22s,box-shadow .22s,border-color .22s; }
.pr-product-grid .fp-pcard:hover, .pr-product-grid .fp-pcard.is-selected { transform:translateY(-2px); box-shadow:0 26px 44px -30px color-mix(in srgb,var(--acc) 70%,#0a1f2c); border-color:color-mix(in srgb,var(--acc) 45%,#d3dedb); }
.pr-product-grid .fp-pcard a { display:flex; flex-direction:column; height:auto; padding:28px 26px 0; background:none; border:0; border-radius:0; color:var(--ink); text-decoration:none; }
.pr-product-grid .fp-pcard a::before { display:none; }
.pr-product-grid .fp-pcard a:focus-visible { outline:3px solid var(--acc); outline-offset:-3px; }
/* Platform's own --acc accent palette and .fp-pnum gray are both too light on white to meet
 * AA text contrast (verified against the live Platform Overview page: same failure, just
 * undetected there because an overlapping ::before there confuses automated contrast checks).
 * Fixed here, scoped to this page, without touching the shared component elsewhere. */
.pr-product-grid .fp-pnum { color:var(--mute); }
.pr-product-grid .fp-pmore { color:var(--em); }
.pr-pcard-select { display:flex; align-items:center; gap:8px; margin:14px 26px 22px; padding-top:14px; border-top:1px dashed #d3e6de; font-size:.8125rem; font-weight:650; color:var(--mute); cursor:pointer; }
.pr-pcard-select input { accent-color:var(--em); width:16px; height:16px; }
.pr-product-grid .fp-pcard.is-selected .pr-pcard-select { color:var(--em); }
.pr-eval-q { margin:0!important; padding:10px 0 0!important; font-size:.8125rem!important; color:var(--em)!important; font-weight:600; }

@media (max-width:1100px) {
	.pr-builder { grid-template-columns:1fr; }
	.pr-summary { position:static; }
	.pr-eval-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
	.pr-scope-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.pr-scope-dl, .pr-check-grid { grid-template-columns:1fr; }
	.pr-prep-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
	.pr-scope-grid { grid-template-columns:1fr; }
	.pr-chain { flex-direction:column; }
	.pr-chain li::after { display:none; }
	.pr-jumps-in { overflow-x:auto; flex-wrap:nowrap; }
}
@media (prefers-reduced-motion:reduce) {
	.pr-pcard-select, .pr-prep-toggle { transition:none; }
}