/* ============================================================
   Production Readiness Scorecard - offer page
   ============================================================
   The supplied design, scoped under `.prs-page` with its palette renamed
   `--p-*`. Both are load-bearing, not tidiness: this design's --ink,
   --green and --line all exist in styles.css at DIFFERENT values, so
   letting them through would repaint the shared header and footer.

   The site header and footer are untouched. Everything between is the
   design.

   WHAT SCOPING DOES NOT FIX
   Higher specificity only wins the properties this file declares. Any
   property styles.css sets that the design never mentions still lands,
   and nothing in the source hints at it. The guards at the end are the
   ones that actually bit, found by walking all 180 elements in both
   documents and diffing 70-odd computed properties each - not by
   reading. The first pass of this file looked right and was wrong in 83
   places.
   ============================================================ */

/* ─────────────── Leak guards ───────────────
   These sit BEFORE the design rules on purpose. They out-specify
   styles.css either way (two classes against one), but placed after the
   design they also beat its @media overrides at equal specificity - which
   pinned .hero and .section to desktop padding at every width. Order is
   load-bearing here.
   Each undoes something styles.css applies to a class name this design
   reuses. Removing one does not break the page visibly; it quietly
   shifts it off the design. The count after each is how many computed
   mismatches it was responsible for. */

/* h1-h4 are pinned to var(--ink) and to weight 600. The design leaves
   weight at the browser default (bold) and takes colour by inheritance,
   which on the navy bands is white. [headings: 12] */
.prs-page h1, .prs-page h2, .prs-page h3 {
  color: inherit;
  font-weight: 700;
  text-transform: none;
}

/* .eyebrow gets line-height 1.5 and a bottom margin; the design sets
   neither, so both have to go back to initial. [eyebrow: 20] */
.prs-page .eyebrow { margin-bottom: 0; line-height: normal; }

/* .steps is a positioned grid with its own alignment. [steps: 8] */
.prs-page .steps {
  position: static;
  align-items: normal;
  place-items: normal;
  inset: auto;
}

/* .step is centred, positioned, and carries an injected "→" pseudo
   element that lands in the middle of each step card. [step: 14] */
.prs-page .step { text-align: start; position: static; }
/* content:none stops the box being generated, but the absolute
   positioning is still worth clearing so a later comparison stays clean */
.prs-page .step::before { content: none; position: static; }
.prs-page .step h3 { text-transform: none; }
/* below 760px styles.css makes the last step span the full row:
   `.steps .step:last-child { grid-column: 1 / -1 }` (0,3,0), so the guard
   has to match that weight to land. */
.prs-page .steps .step:last-child { grid-column: auto; }
.prs-page .step p { line-height: 1.6; }

/* .faq is capped at 760px and given a top margin; the design sizes
   .faq-wrap instead and starts flush. Its details carry a bottom border
   on every item, where the design puts one only on the last.
   [faq: 18] */
.prs-page .faq { max-width: none; margin-top: 0; }
.prs-page .faq details { border-bottom: 0; }
.prs-page .faq details:last-child { border-bottom: 1px solid var(--p-line); }
/* .faq summary is relatively positioned with 16px/34px padding to make
   room for an absolutely positioned marker; the design uses a flex row
   with no padding at all. [summary: 28] */
.prs-page .faq summary { position: static; padding: 0; inset: auto; }
.prs-page .faq summary::after { position: static; transform: none; line-height: normal; }
/* .faq details p is recoloured to --ink-soft and capped in width. [p: 24] */
.prs-page .faq details p { max-width: none; color: var(--p-muted); }

/* .range is display:block in the print scorecard styles. */
/* styles.css strips the underline from every <a>. The design never does,
   so its body links rely on the browser default and came out looking like
   plain text - the "ask us for a printable copy" link in the closing band
   was the visible one. Restoring it here is safe: the design's own
   .button and .back-link rules set text-decoration:none and outrank this
   on specificity. [1] */
.prs-page a { text-decoration: underline; }
.prs-page .button, .prs-page .back-link { text-decoration: none; }

/* non-rendering (content:none) but kept in step so a future comparison
   against the design file comes back clean rather than noisy */
.prs-page .step::before { color: inherit; }

.prs-page .range { display: inline; }

.prs-page { --p-navy:#0b1533;--p-ink:#17223d;--p-green:#356c57;--p-green-dark:#244d40;--p-mint:#e1eee4;--p-pale:#f6f8f1;--p-lime:#d9fa78;--p-cream:#fffdf6;--p-muted:#5b6575;--p-line:#dce2d8;--p-amber:#e3b64e;--p-red:#dd7359 }
.prs-page { margin:0;background:var(--p-pale);color:var(--p-navy);font:400 16px/1.6 Inter,"Avenir Next",system-ui,sans-serif }
.prs-page a { color:inherit }
.prs-page h1, .prs-page h2, .prs-page h3 { font-family:Poppins,"Avenir Next",system-ui,sans-serif;line-height:1.08;letter-spacing:-.05em }
.prs-page h1 { font-size:clamp(3.2rem,6.1vw,5.6rem);max-width:720px;margin:20px 0;letter-spacing:-.065em }
.prs-page h2 { font-size:clamp(2.2rem,4.5vw,3.8rem);margin:0 0 18px }
.prs-page h3 { font-size:1.08rem;margin:0 0 8px }
.prs-page p { margin:0 0 18px;color:var(--p-muted) }
.prs-page .wrap { width:min(1160px,calc(100% - 48px));margin:auto }
.prs-page .eyebrow { font:500 .72rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--p-green) }
.prs-page .back-link { font-size:.85rem;text-decoration:none;color:var(--p-muted) }
.prs-page .back-link:hover { color:var(--p-green) }
.prs-page .button { display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;background:var(--p-navy);border-radius:999px;color:white;font-weight:600;text-decoration:none;box-shadow:0 8px 22px #0b153326;transition:transform .18s,box-shadow .18s }
.prs-page .button:hover { transform:translateY(-2px);box-shadow:0 12px 25px #0b15333a }
.prs-page .hero { position:relative;overflow:hidden;background:var(--p-mint);padding:55px 0 68px }
.prs-page .hero:before { content:"";position:absolute;width:600px;height:600px;border:1px solid #8ba99655;border-radius:50%;right:-160px;top:-270px;box-shadow:0 0 0 42px #ffffff30,0 0 0 84px #ffffff22 }
.prs-page .hero-grid { position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:35px;align-items:center }
.prs-page .hero-copy { padding:27px 0 }
.prs-page .hero h1 span { color:var(--p-green) }
.prs-page .hero-copy>p { font-size:1.08rem;line-height:1.75;max-width:630px }
.prs-page .hero-actions { display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px }
.prs-page .small-note { margin-top:18px;color:#596a60;font-size:.78rem }
.prs-page .small-note b { color:var(--p-green-dark) }
.prs-page .score-visual { position:relative;min-height:420px;display:grid;place-items:center }
.prs-page .score-card { position:relative;z-index:1;width:min(420px,100%);padding:25px;background:var(--p-cream);border:1px solid #d7ded3;border-radius:14px;box-shadow:0 24px 55px #163c3518;transform:rotate(1.5deg) }
.prs-page .card-top { display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--p-line);padding-bottom:14px }
.prs-page .card-name { font:500 .61rem "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase }
.prs-page .sample { font:500 .56rem "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;background:#f3e6be;color:#705925;border-radius:999px;padding:5px 8px }
.prs-page .score-overview { display:flex;align-items:center;gap:20px;padding:19px 0 18px }
.prs-page .dial { width:116px;height:116px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--p-amber) 0deg 222deg,#e8ece4 222deg 360deg);position:relative }
.prs-page .dial:before { content:"";position:absolute;inset:9px;background:var(--p-cream);border-radius:50% }
.prs-page .dial-inner { position:relative;text-align:center;line-height:1 }
.prs-page .dial b { font:700 1.82rem Poppins,sans-serif;letter-spacing:-.07em }
.prs-page .dial span { display:block;margin-top:5px;font:500 .55rem "DM Mono",monospace;color:#71796f;text-transform:uppercase;letter-spacing:.07em }
.prs-page .score-explainer small { font:500 .57rem "DM Mono",monospace;color:#777f75;text-transform:uppercase;letter-spacing:.08em }
.prs-page .score-explainer b { display:block;color:#947019;font:600 1.02rem Poppins,sans-serif;margin:5px 0 }
.prs-page .score-explainer span { font-size:.67rem;color:#596354 }
.prs-page .domains { border-top:1px solid var(--p-line) }
.prs-page .domain { display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #edf0e9;font-size:.68rem;color:#4f5d53 }
.prs-page .bar { height:5px;background:#e9ece5;border-radius:9px;margin-top:5px;overflow:hidden }
.prs-page .bar i { display:block;height:100%;background:var(--p-green);border-radius:9px }
.prs-page .domain-score { font:500 .62rem "DM Mono",monospace;color:#6e776e }
.prs-page .card-bottom { display:flex;align-items:center;justify-content:space-between;padding-top:13px;color:#697369;font:400 .57rem "DM Mono",monospace }
.prs-page .orbit-dot { position:absolute;width:15px;height:15px;background:var(--p-lime);border:2px solid var(--p-navy);border-radius:50%;top:43px;right:13% }
.prs-page .stamp { position:absolute;z-index:2;left:2%;bottom:28px;background:var(--p-lime);border:1px solid var(--p-navy);width:91px;height:91px;border-radius:50%;display:grid;place-items:center;text-align:center;font:500 .61rem/1.35 "DM Mono",monospace;text-transform:uppercase;transform:rotate(-11deg);box-shadow:3px 4px 0 var(--p-navy) }
.prs-page .trust-strip { background:var(--p-navy);color:#fff }
.prs-page .trust-grid { display:grid;grid-template-columns:repeat(3,1fr) }
.prs-page .trust { padding:20px 24px;border-right:1px solid #ffffff2b }
.prs-page .trust:first-child { padding-left:0 }
.prs-page .trust:last-child { border:0 }
.prs-page .trust b { display:block;color:var(--p-lime);font:600 .89rem Poppins,sans-serif }
.prs-page .trust span { color:#d0d7e2;font-size:.74rem }
.prs-page .section { padding:96px 0 }
.prs-page .intro { max-width:730px }
.prs-page .intro>p { font-size:1.02rem }
.prs-page .domains-section { background:#fff }
.prs-page .domain-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px }
.prs-page .domain-card { padding:20px;background:var(--p-pale);border:1px solid var(--p-line);border-radius:10px;min-height:144px }
.prs-page .domain-card .n { display:block;font:500 .63rem "DM Mono",monospace;color:var(--p-green);margin-bottom:18px }
.prs-page .domain-card p { font-size:.79rem;margin:0 }
.prs-page .bands { background:var(--p-navy);color:#fff }
.prs-page .bands .intro p { color:#cbd3df }
.prs-page .band-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px }
.prs-page .band { padding:23px;border-radius:10px;background:#192647;border:1px solid #ffffff20 }
.prs-page .band-head { display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid #ffffff24 }
.prs-page .band-name { display:flex;align-items:center;gap:10px;font:600 .92rem Poppins,sans-serif }
.prs-page .signal { width:10px;height:10px;border-radius:50%;background:var(--p-red) }
.prs-page .band.amber .signal { background:var(--p-amber) }
.prs-page .band.green .signal { background:#8ed5a2 }
.prs-page .range { font:500 .64rem "DM Mono",monospace;color:#c5ccda }
.prs-page .band p { font-size:.78rem;color:#ccd4df;margin:15px 0 0 }
.prs-page .band strong { color:white }
.prs-page .band-note { margin-top:17px;font-size:.72rem;color:#aeb9ca }
.prs-page .steps { display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:35px;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line) }
.prs-page .step { padding:25px 24px 25px 0;border-right:1px solid var(--p-line) }
.prs-page .step+.step { padding-left:24px }
.prs-page .step:last-child { border:0 }
.prs-page .step .num { font:500 .66rem "DM Mono",monospace;color:var(--p-green);display:block;margin-bottom:22px }
.prs-page .step p { font-size:.82rem;margin:0 }
.prs-page .debrief { margin-top:28px;background:var(--p-mint);padding:23px 26px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-left:3px solid var(--p-green) }
.prs-page .debrief div { max-width:690px }
.prs-page .debrief b { font:600 1rem Poppins,sans-serif }
.prs-page .debrief p { font-size:.82rem;margin:5px 0 0 }
.prs-page .debrief em { font-style:normal;color:var(--p-green-dark);font-weight:600 }
.prs-page .faq-wrap { max-width:820px;margin:auto }
/* .intro is capped at 730px to keep intro paragraphs readable. This one
   holds no paragraph, just the eyebrow and the heading, so the cap buys
   nothing and costs a line break: h2 is clamp(2.2rem,4.5vw,3.8rem), and
   "Before you request a copy." needs 748px once that reaches its 3.8rem
   ceiling. Above a 1320px viewport it was 18px short and wrapped. Letting
   it use the full .faq-wrap width fixes it with room to spare.

   Unconditional rather than behind a media query: below 1320px the
   heading already fit on one line, and a wider line box can only ever
   remove a wrap, never add one. */
.prs-page .faq-wrap .intro { margin-bottom:28px;max-width:none }
.prs-page .faq details { border-top:1px solid var(--p-line);padding:20px 0 }
.prs-page .faq details:last-child { border-bottom:1px solid var(--p-line) }
.prs-page .faq summary { list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;font:600 .96rem Poppins,sans-serif }
.prs-page .faq summary::-webkit-details-marker { display:none }
.prs-page .faq summary:after { content:"+";color:var(--p-green);font-size:1.2rem }
.prs-page .faq details[open] summary:after { content:"−" }
.prs-page .faq details p { padding:13px 36px 0 0;margin:0;font-size:.87rem }
.prs-page .final { background:var(--p-green-dark);color:#fff;padding:72px 0 }
.prs-page .final-inner { display:flex;justify-content:space-between;align-items:center;gap:32px }
.prs-page .final .eyebrow { color:var(--p-lime) }
.prs-page .final h2 { max-width:700px;margin:10px 0 }
.prs-page .final p { color:#d4e2d9;margin:0 }
.prs-page .final .button { white-space:nowrap;background:var(--p-lime);color:var(--p-navy);box-shadow:none }
@media(max-width:820px) {
  .prs-page .hero-grid { grid-template-columns:1fr 1fr;gap:15px }
  .prs-page .score-visual { min-height:370px }
  .prs-page .score-card { padding:19px }
  .prs-page .dial { width:92px;height:92px }
  .prs-page .dial b { font-size:1.5rem }
  .prs-page .domain-grid { grid-template-columns:repeat(2,1fr) }
  .prs-page .section { padding:76px 0 }
}
@media(max-width:620px) {
  .prs-page .wrap { width:calc(100% - 34px) }
  .prs-page .back-link { font-size:.76rem }
  .prs-page .hero { padding:42px 0 34px }
  .prs-page .hero-grid { grid-template-columns:1fr;gap:0 }
  .prs-page .hero-copy { padding:14px 0 0 }
  .prs-page .hero h1 { font-size:clamp(3rem,14vw,4.4rem) }
  .prs-page .hero-copy>p { font-size:.97rem }
  .prs-page .hero-actions { align-items:flex-start;flex-direction:column;gap:14px }
  .prs-page .score-visual { min-height:340px }
  .prs-page .score-card { width:calc(100% - 15px);padding:19px }
  .prs-page .dial { width:92px;height:92px }
  .prs-page .stamp { width:76px;height:76px;left:0;bottom:20px;font-size:.53rem }
  .prs-page .orbit-dot { right:10%;top:22px }
  .prs-page .trust-grid { grid-template-columns:1fr }
  .prs-page .trust, .prs-page .trust:first-child { padding:13px 0;border-right:0;border-bottom:1px solid #ffffff2b }
  .prs-page .trust:last-child { border:0 }
  .prs-page .section { padding:64px 0 }
  .prs-page .domain-grid { gap:8px }
  .prs-page .domain-card { padding:15px;min-height:145px }
  .prs-page .domain-card .n { margin-bottom:12px }
  .prs-page .band-grid { grid-template-columns:1fr }
  .prs-page .band { padding:18px }
  .prs-page .steps { grid-template-columns:1fr }
  .prs-page .step, .prs-page .step+.step { padding:18px 0;border-right:0;border-bottom:1px solid var(--p-line) }
  .prs-page .step:last-child { border:0 }
  .prs-page .step .num { margin-bottom:13px }
  .prs-page .debrief { align-items:flex-start;flex-direction:column;padding:19px }
  .prs-page .final-inner { align-items:flex-start;flex-direction:column }
}