/* Website Punch List page. Hero values come from .hero in index.css and DESIGN.md; thin-rule lists on white and cream below. */
/* The hero dark also fills the 1 px between the fixed nav and the top section on phones. */
.punch-list-page, .pl-page { background: #23261F; }
.pl-page { padding-top: var(--nav-offset); }
.pl-top, .pl-score, .pl-results, .pl-audit, .pl-sec { padding-inline: 1.5rem; }
/* The same left edge as the nav, which steps to 3rem side padding at this width. */
@media (min-width: 801px) { .pl-top, .pl-score, .pl-results, .pl-audit, .pl-sec { padding-inline: max(var(--gutter), calc((100% - 1180px) / 2)); } }
.pl-wrap { min-width: 0; }

.pl-top { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 5rem); background: #23261F; color: #F5F1E7; }
.pl-top.is-done { padding-bottom: 2.5rem; }
.pl-kicker { margin: 0 0 1.875rem; color: #E5966B; font-size: var(--kicker-size); font-weight: var(--kicker-weight); letter-spacing: var(--kicker-track); text-transform: uppercase; }
.pl-top h1 { margin: 0 0 2rem; color: #F5F1E7; font-size: clamp(32px, 10.8vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.pl-top h1 span { display: block; text-wrap: balance; }
.pl-top h1 .pl-payoff { margin-top: .36em; color: #E5966B; font-size: .48em; line-height: 1.1; letter-spacing: -.025em; }
.pl-lead { max-width: 34em; margin: 0 0 1.75rem; color: #C4C4B9; font-size: var(--fs-lead); line-height: 1.65; }

.pl-form { max-width: 640px; }
.pl-form.is-done > :not(.cf-turnstile):not(.pl-second-check) { display: none; }
.pl-fields { display: grid; gap: .9rem; }
.pl-field { min-width: 0; }
.pl-field label { display: block; margin-bottom: .4rem; font-size: var(--fs-fine); font-weight: 700; }
.pl-field input, .pl-field select { width: 100%; height: 54px; padding: 0 1rem; border: 1px solid var(--card-border); border-radius: 6px; background-color: #fff; color: #1F1F1F; font: inherit; font-size: var(--fs-body); }
.pl-field input::placeholder { color: #635E56; opacity: 1; }
.pl-field select { -webkit-appearance: none; appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23635E56' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.pl-field select:invalid { color: #635E56; }
.pl-field input:focus-visible, .pl-field select:focus-visible, .pl-form a:focus-visible, .pl-top .pl-btn:focus-visible { outline: 2px solid #E5966B; outline-offset: 2px; }
.pl-form .cf-turnstile[data-shown] { margin: 1rem 0 0; }

.pl-btn { display: inline-flex; align-items: center; justify-content: center;  padding: 0 1.6rem; border: 0;  background: var(--action-orange); color: #fff; font-family: inherit;   white-space: nowrap; cursor: pointer; transition: background-color .15s ease, transform .1s ease; }
.pl-btn:hover { background: var(--action-orange-hover); }
.pl-btn:active { transform: scale(.98); }
.pl-btn:disabled { cursor: progress; opacity: .75; }
.pl-form .pl-btn { width: 100%; margin-top: 1.1rem; }
.pl-note { margin: .7rem 0 0; color: #C4C4B9; font-size: var(--fs-fine); line-height: 1.5; }

.pl-status:empty { display: none; }
.pl-form .pl-status { margin: .9rem 0 0; color: #F5F1E7; line-height: 1.5; }

.pl-thanks { max-width: 640px; outline: none; }
.pl-thanks h2 { margin: 0 0 .6rem; color: #F5F1E7; font-size: var(--fs-h2); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; }
.pl-thanks p { margin: 0; color: #C4C4B9; font-size: var(--fs-lead); line-height: 1.6; }

.pl-results { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(5rem, 7vw, 6rem); background: #fff; }
.pl-results h2 { margin: 0 0 .75rem; color: var(--text-headline); font-size: var(--fs-h2); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; outline: none; overflow-wrap: anywhere; }
.pl-sum { margin: 0 0 1.5rem; color: var(--text-body); line-height: 1.6; }
.pl-handled { max-width: 860px; margin: 1.75rem 0 0; color: var(--text-body); line-height: 1.6; }

/* The report. The score band sits on the hero dark: the text on the left, one panel (dial over its bars) on the right.
   Below it, section and item sizes follow the inner report pages (the contractor website checklist), not the homepage. */
.pl-page [hidden] { display: none !important; }
.pl-score { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: #23261F; color: #F5F1E7; }
.pl-score-grid { display: grid; gap: 2rem; }
.pl-score-text .pl-kicker { margin-bottom: 1rem; overflow-wrap: anywhere; }
/* "Iron Canyon Score" stays on one line, so this heading is a little smaller than the others and shrinks on narrow screens (Display Zoom, larger text). */
.pl-score h2 { margin: 0 0 1rem; color: #F5F1E7; font-size: clamp(1.45rem, 8vw, 2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; outline: none; }
.pl-score-text p { max-width: 30em; }
.pl-keep { white-space: nowrap; }
/* Even line lengths everywhere on this page, so no paragraph ends on a scrap of a line. */
.pl-page p, .pl-page li, .pl-page dd, .pl-page label { text-wrap: balance; }
@media (min-width: 801px) { .pl-score h2 { font-size: clamp(2rem, 3vw, 2.6rem); } }
.pl-hook { margin: 0; color: #F5F1E7; font-size: var(--fs-lead); line-height: 1.65; }
.pl-hook strong { color: #E5966B; }
.pl-compare { margin: .25rem 0 0; color: #C4C4B9; font-size: var(--fs-lead); line-height: 1.65; }
/* Brand row on the score card, so a cropped screenshot still says whose score it is and where it came from. */
.pl-panel-brand { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(245, 241, 231, .12); }
.pl-panel-mark { display: inline-flex; flex: none; align-items: center; gap: .55rem; color: #F5F1E7; font-size: var(--fs-body); font-weight: 800; letter-spacing: -.01em; }
.pl-panel-mark img { display: block; width: 36px; height: auto; }
.pl-panel-domain { min-width: 0; color: #C4C4B9; font-size: var(--fs-fine); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pl-panel { min-width: 0; padding: 2rem; border: 1px solid rgba(245, 241, 231, .12); border-radius: 8px; background: rgba(245, 241, 231, .04); }
.pl-dial { display: grid; justify-items: center; margin-bottom: 1.75rem; }
.pl-gauge { position: relative; width: 100%; max-width: 260px; margin: 0 auto; }
.pl-gauge svg { display: block; width: 100%; height: auto; }
.pl-gauge-track { stroke: rgba(245, 241, 231, .16); }
.pl-gauge-fill { stroke: #E5966B; transition: stroke-dasharray .6s ease; }
.pl-gauge-number { position: absolute; right: 0; bottom: .25rem; left: 0; color: #F5F1E7; font-size: clamp(3.5rem, 9vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-align: center; }
.pl-verdict { display: flex; justify-content: center; gap: .75rem; max-width: 260px; margin: .5rem auto 0; color: #C4C4B9; line-height: 1.6; }
.pl-verdict strong { color: #E5966B; font-weight: var(--kicker-weight); letter-spacing: var(--kicker-track); text-transform: uppercase; }
.pl-speed-note { margin: .5rem 0 0; color: #C4C4B9; font-size: var(--fs-fine); line-height: 1.5; text-align: center; }
.pl-speed-note:empty { display: none; }
.pl-bars { margin: 0; padding: 0; list-style: none; }
.pl-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .5rem; padding: 0 0 1.1rem; }
.pl-bars li:last-child { padding-bottom: 0; }
.pl-bar-name { color: #F5F1E7; font-weight: 600; }
.pl-bar-word { color: #C4C4B9; font-weight: 700; text-align: right; }
.pl-bar { grid-column: 1 / -1; display: block; width: 100%; height: 6px; }
.pl-bar-track { fill: rgba(245, 241, 231, .16); }
.pl-bar-fill { fill: #E5966B; }

.pl-results .pl-report h2 { margin: 0 0 1rem; font-size: clamp(24px, 2.06vw, 29.6px); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; text-transform: none; }
.pl-fixes { display: grid; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.pl-fix { padding: 1.5rem 0; border-top: 1px solid var(--card-border); }
.pl-fix:last-child { padding-bottom: 0; }
.pl-fix h3 { margin: 0 0 .4rem; color: var(--text-headline); font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; }
.pl-fix p { margin: 0 0 .5rem; color: var(--text-body); font-size: var(--fs-body); line-height: 1.6; }
.pl-fix p:last-child { margin-bottom: 0; }
.pl-fix .pl-pts { margin: 0 0 .5rem; color: var(--action-orange-deep); font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.pl-pts span { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0; }
.pl-why strong { color: var(--text-headline); }
.pl-rest-intro { margin: 0 0 1.25rem; color: var(--text-body); font-size: var(--fs-lead); line-height: 1.65; }
.pl-cols { display: grid; gap: 2rem; }
.pl-sub { margin: 0 0 .6rem; color: var(--text-headline); font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; }
.pl-small, .pl-done { margin: 0; padding: 0; list-style: none; }
.pl-small li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: .3rem 0; color: var(--text-body); font-size: var(--fs-body); line-height: 1.6; }
.pl-small strong { color: var(--action-orange-deep); }
.pl-small-note { margin: .75rem 0 0; color: var(--muted); font-size: var(--fs-fine); line-height: 1.5; }
.pl-done li { padding: .3rem 0 .3rem 1.75rem; color: var(--text-body); font-size: var(--fs-body); line-height: 1.6; text-indent: -1.75rem; break-inside: avoid; }
.pl-done li::before { display: inline-block; width: 1.75rem; color: var(--action-orange); font-weight: 800; text-indent: 0; content: "\2713"; }
.pl-reading h2 { margin-bottom: .75rem; }

/* Share your score: a thin-rule row inside the score panel. Outline buttons on dark, like the hero's secondary button. */
.pl-share { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(245, 241, 231, .12); }
.pl-share-title { margin: 0 0 .35rem; color: #F5F1E7; font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; }
.pl-share-text { margin: 0 0 1rem; color: #C4C4B9; font-size: var(--fs-body); line-height: 1.6; }
.pl-share-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.pl-btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid rgba(245, 241, 231, .4); border-radius: 6px; background: transparent; color: #F5F1E7; font: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, transform .1s ease; }
.pl-btn-line:hover { border-color: #E5966B; color: #E5966B; }
.pl-btn-line:active { transform: scale(.98); }
.pl-btn-line:focus-visible { outline: 2px solid #E5966B; outline-offset: 2px; }
.pl-btn-line[aria-expanded="true"] { border-color: #E5966B; color: #E5966B; }
.pl-badge { margin-top: 1.25rem; }
.pl-badge-looks { display: inline-flex; margin-bottom: .9rem; border: 1px solid rgba(245, 241, 231, .3); border-radius: 6px; overflow: hidden; }
.pl-badge-look { min-height: 44px; min-width: 5.5rem; padding: 0 1rem; border: 0; background: transparent; color: #C4C4B9; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.pl-badge-look + .pl-badge-look { border-left: 1px solid rgba(245, 241, 231, .3); }
.pl-badge-look[aria-pressed="true"] { background: rgba(229, 150, 107, .16); color: #E5966B; }
.pl-badge-look:focus-visible { outline: 2px solid #E5966B; outline-offset: -2px; }
.pl-badge-preview { display: block; max-width: 100%; margin-bottom: .9rem; line-height: 0; }
.pl-badge-preview img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.pl-badge-label { display: block; margin-bottom: .4rem; color: #C4C4B9; font-size: .9rem; }
.pl-badge-code { display: block; width: 100%; padding: .7rem .8rem; border: 1px solid rgba(245, 241, 231, .25); border-radius: 6px; background: rgba(245, 241, 231, .06); color: #F5F1E7; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: none; }
.pl-share-note { margin: .6rem 0 0; color: #C4C4B9; font-size: var(--fs-fine); line-height: 1.5; }
.pl-share-note:empty { display: none; }
@media (max-width: 640px) { .pl-share-row { flex-direction: column; } .pl-btn-line { width: 100%; } }

/* The same orange band and white card as the homepage free audit. */
.pl-audit { padding-block: clamp(4rem, 7vw, 6rem); background: var(--action-orange); color: #fff; }
.pl-nb { white-space: nowrap; }
.pl-audit-kicker { margin: 0 0 1rem; font-size: var(--kicker-size); font-weight: var(--kicker-weight); letter-spacing: var(--kicker-track); text-transform: uppercase; }
.pl-audit h2 { margin: 0 0 1rem; color: #fff; font-size: var(--fs-h2); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.pl-audit-copy p:last-child { margin: 0; font-size: var(--fs-lead); line-height: 1.65; }
.pl-audit-card { min-width: 0; margin-top: 2rem; padding: 2rem; border-radius: 8px; background: var(--card-bg); color: var(--text-body); box-shadow: 0 20px 40px rgba(0, 0, 0, .15); }
.pl-audit-card h3 { margin: 0 0 .75rem; color: var(--text-headline); font-size: var(--fs-h3); font-weight: 700; }
.pl-audit-list { margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--card-border); list-style: none; }
.pl-audit-list li { padding: .8rem 0; border-bottom: 1px solid var(--card-border); line-height: 1.5; }
.pl-audit-list strong { display: block; color: var(--text-headline); }
.pl-audit-card .pl-btn { width: 100%; }
.pl-audit-card .pl-note { color: var(--muted); }
.pl-audit-card .pl-status { margin: 1rem 0 0; color: var(--text-headline); line-height: 1.5; }

.pl-sec { padding-block: clamp(5rem, 7vw, 6rem); background: #fff; }
.pl-stone { background: var(--bg-cream); }
.pl-sec h2 { margin: 0 0 1rem; color: var(--text-headline); font-size: var(--fs-h2); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.pl-intro { max-width: 44em; margin: 0 0 1.5rem; color: var(--text-body); font-size: var(--fs-lead); line-height: 1.65; }

.pl-list { max-width: 860px; margin: 0; padding: 0; border-top: 1px solid var(--card-border); list-style: none; }
.pl-row { display: grid; gap: .3rem; padding: 1rem 0; border-bottom: 1px solid var(--card-border); }
.pl-label { color: var(--muted); font-size: var(--kicker-size); font-weight: var(--kicker-weight); letter-spacing: var(--kicker-track); text-transform: uppercase; }
.pl-fix .pl-label, .pl-example-pts { color: var(--action-orange-deep); }
.pl-row h3, .pl-row h4 { margin: 0 0 .15rem; color: var(--text-headline); font-size: var(--fs-lead); font-weight: 700; }
.pl-row p { margin: 0; color: var(--text-body); font-size: var(--fs-body); line-height: 1.55; }
.pl-row p:empty { display: none; }
.pl-pending { opacity: .6; }
.pl-check-row { display: grid; gap: .15rem; padding: .9rem 0; border-bottom: 1px solid var(--card-border); }
.pl-check-row h3 { margin: 0; color: var(--text-headline); font-size: var(--fs-body); font-weight: 700; }
.pl-check-row p { margin: 0; color: var(--text-body); line-height: 1.55; }

.pl-qa { max-width: 860px; }
.pl-faq h3 { margin: 0 0 .3rem; padding-top: 1.25rem; border-top: 1px solid var(--card-border); color: var(--text-headline); font-size: var(--fs-body); font-weight: 700; }
.pl-faq p { margin: 0 0 1.25rem; color: var(--text-body); line-height: 1.6; }

.pl-faq .pl-links { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--card-border); }

@media (min-width: 801px) {
    .pl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
    .pl-done { columns: 2; column-gap: 2rem; }
}
@media (min-width: 1100px) {
    .pl-fixes { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 2.5rem; }
    .pl-fix { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; padding-bottom: 0; }
}

@media (min-width: 641px) {
    .pl-fields { grid-template-columns: 1fr 1fr; }
    .pl-full { grid-column: 1 / -1; }
    .pl-check-row { grid-template-columns: 220px 1fr; gap: 1.5rem; }
}

/* Same as the inner page heroes and spec lists: copy on the left, the subject on the right. */
@media (min-width: 801px) { .pl-top h1 { font-size: clamp(44px, 5vw, 72px); } }
@media (min-width: 1025px) {
    .pl-top .pl-wrap { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; grid-template-rows: auto auto 1fr; column-gap: 4rem; }
    .pl-top.is-done .pl-wrap { display: block; }
    .pl-kicker, .pl-top h1, .pl-lead { grid-column: 1; }
    .pl-form, .pl-thanks { grid-column: 2; grid-row: 1 / -1; }
    .pl-form { max-width: none; }
    .pl-sec .pl-wrap { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; column-gap: 4rem; align-items: start; }
    .pl-score-grid { grid-template-columns: minmax(260px, 5fr) 7fr; column-gap: 4rem; align-items: center; }
    .pl-audit .pl-wrap { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; column-gap: 4rem; align-items: start; }
    .pl-audit-card { margin-top: 0; }
    .pl-head { position: sticky; top: 110px; }
    .pl-sec .pl-list, .pl-qa { max-width: none; }
}

/* Phones keep the whole form in reach: name and phone share a row, and the type steps down. */
@media (max-width: 640px) {
    .pl-top { padding-block: 1.5rem 2rem; }
    .pl-top.is-done { padding-bottom: 1.5rem; }
    .pl-top h1 { margin-bottom: .75rem; }
    .pl-top h1 .pl-payoff { margin-top: .3em; }
    .pl-lead { margin-bottom: 1rem; font-size: var(--fs-lead); line-height: 1.45; }
    .pl-kicker { margin-bottom: .6rem; letter-spacing: .12em; }
    .pl-fields { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .pl-full { grid-column: 1 / -1; }
    .pl-field label { margin-bottom: .25rem; font-size: var(--fs-fine); }
    .pl-field input, .pl-field select { height: 48px; padding-inline: .8rem; font-size: var(--fs-body); }
    .pl-field select { padding-right: 2.4rem; background-position: right .8rem center; }
    .pl-form .pl-btn {  margin-top: .8rem; }
    .pl-note { margin-top: .5rem; font-size: var(--fs-fine); }
    .pl-audit-card { padding: 1.5rem; }
    .pl-panel { padding: 1.5rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-btn, .pl-gauge-fill { transition: none; }
    .pl-btn:active { transform: none; }
}

/* First screens fill the window on desktop, like the homepage, with the same round scroll cue. Phones scroll on. */
.pl-top, .pl-score { position: relative; }
.pl-scroll-cue { display: none; }
@media (min-width: 801px) {
    /* Only while the form is on screen: after a submit (.is-done) the top section shrinks to its message. */
    .pl-top:not(.is-done), .pl-score { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--nav-offset)); padding-bottom: 6.5rem; }
    .pl-top.is-done .pl-scroll-cue { display: none; }
    .pl-scroll-cue { display: flex; position: absolute; left: 50%; bottom: 28px; z-index: 2; width: 44px; height: 44px; margin-left: -22px; align-items: center; justify-content: center; border: 1px solid rgba(245, 241, 231, .35); border-radius: 50%; color: #F5F1E7; transition: border-color .3s ease, background-color .3s ease; animation: pl-cue 2.4s ease 1.2s infinite; }
    .pl-scroll-cue span { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
    .pl-scroll-cue:hover, .pl-scroll-cue:focus-visible { border-color: #F5F1E7; background: rgba(245, 241, 231, .08); }
    .pl-scroll-cue:focus-visible { outline: 2px solid #E5966B; outline-offset: 3px; }
}
@keyframes pl-cue { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .pl-scroll-cue { animation: none; } }
/* 2026-11-12 phone review: on phones these sections use the same 48 px above and below as the rest of the site
   (they were 64 to 80 px, which left a 160 px blank band at each join). */
@media (max-width: 800px) { .pl-audit, .pl-sec { padding-block: var(--space-section-phone); } }