/*
 * Every 2026 page except the homepage: the trade pages, the page that lists them (services),
 * about, contact, thank you and privacy.
 * Loaded after home-2026.css, which holds the palette, the type, the header, the form, the
 * trade cards, the footer and the pieces shared with the homepage.
 * Written phone-first; wider layouts are added in the min-width blocks.
 */

/* ---------- Hero: these headlines run longer than the homepage's ---------- */

.hero-inner h1 {
    max-width: 12.5em;
    font-size: clamp(2.125rem, 10.4vw, 3rem);
    line-height: 1;
}

/* ---------- Trade pages: a light hero under the dark menu bar, so the page does not open
   like the homepage. No photo and no video behind it. ---------- */

.hero-light {
    background: var(--paper);
    color: var(--ink);
}

.hero-light .top {
    border-bottom: 0;
    background: var(--ink);
}

.hero-light .eyebrow {
    color: var(--muted);
}

.hero-light .eyebrow a,
.hero-light .eyebrow a:hover {
    color: var(--ink);
}

.hero-light .hero-sub {
    color: var(--body2);
    text-wrap: pretty; /* "10 jobs to bid." was leaving "bid." alone on the last line */
}

/* A plain ink frame: the gold in this hero is the headline's block and the button, nothing
   else. John, October 5, 2026: "there's just a lot going on and my eyes don't know where to
   look". */
.hero-light .hero-card {
    border: 1px solid var(--ink);
}

/* Nothing overlaps this hero's lower edge, so it needs no room there. */
.hero-light .hero-in {
    padding-bottom: 48px;
}

/* The offer's name in the headline, on a gold block. The block stops short of the line's
   top so that it never covers the tails of a line above it. */
.mark {
    padding: 0 0.14em;
    background: linear-gradient(transparent 14%, var(--gold) 14%, var(--gold) 96%, transparent 96%);
    white-space: nowrap;
}

/* Each half of the headline stays together while there is room, so the line breaks before
   "for roofing contractors" and not in the middle of it. */
.h1-part {
    display: inline-block;
}

/* Under the deal: why John can offer it. Quiet on purpose; the headline and the form lead. */
.proof-line {
    max-width: 36em;
    font-size: 0.9375rem;
    color: var(--muted);
}

.proof-line a {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Trade pages: the first 30 days as four steps, a dark band under the light hero,
   where the homepage has its row of figures ---------- */

.path {
    padding: 28px 0 32px;
    background: var(--ink);
    color: var(--white);
}

.path-grid {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.path-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
    border-top: 1px solid var(--line-on-ink);
}

.path-cell:first-child {
    padding-top: 0;
    border-top: 0;
}

.path-cell:last-child {
    padding-bottom: 0;
}

.path-when {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold);
}

.path-cell h2 {
    font-size: 1.5rem;
    line-height: 1.05;
}

.path-cell p {
    font-size: 0.9375rem;
    color: var(--light);
}

/* The row of big figures, when it sits inside a section instead of over a hero's edge. */
.strip-flow {
    margin-top: 16px;
}

.numbers .strip-note {
    margin-bottom: 4px;
}

/* ---------- Trade pages: the form sits in the hero, under the headline on a phone and
   beside it on a wide screen ---------- */

.hero-split {
    gap: 28px;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* "All trades" in front of the line over the headline. */
.eyebrow a {
    color: var(--white);
}

.eyebrow a:hover {
    color: var(--gold);
}

.hero-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
    padding: 20px;
    background: var(--white);
    border-top: 6px solid var(--gold);
    color: var(--ink);
    scroll-margin-top: 12px;
}

.hero-card-title {
    font-size: 1.875rem;
    line-height: 1;
}

.hero-card-lede {
    font-size: 0.9375rem;
    color: var(--body2);
    text-wrap: pretty; /* no word left alone on the last line */
}

/* The card is the white box here, so the form inside it needs none of its own. */
.hero-card .market-form {
    padding: 0;
    background: transparent;
}

.hero-card-foot {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted);
}

/* The row of figures under the hero is the homepage's .strip, unchanged. */

/* Keeps a hyphenated word on one line in a headline. */
.nowrap {
    white-space: nowrap;
}

/* ---------- Shared by the sections below ---------- */

.band {
    background: var(--white);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.kicker {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.item-no {
    flex: 0 0 auto;
    padding-top: 5px;
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
}

.point h3,
.stack-item h3 {
    margin-bottom: 6px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.08;
    text-wrap: balance;
}

.point p,
.stack-item p {
    font-size: 0.9375rem;
    color: var(--body2);
}

/* ---------- A numbered list of points, two across on desktop ---------- */

.points {
    display: grid;
    border-bottom: 1px solid var(--ink);
}

.point {
    display: flex;
    gap: 14px;
    padding: 20px 0;
    border-top: 1px solid var(--ink);
}

/* ---------- The offer and what it costs ---------- */

.offer-in {
    display: grid;
    gap: 28px;
}

.offer .head {
    margin-bottom: 20px;
}

.stack {
    display: grid;
    border-bottom: 1px solid var(--rule);
}

.stack-item {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
}

.deal {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-top: 6px solid var(--gold);
}

.deal-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1;
}

.deal-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--rule);
}

.deal-rows dt {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.9375rem;
}

.deal-rows dd {
    flex: 0 0 auto;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1;
    white-space: nowrap;
}

.deal-fine {
    font-size: 0.875rem;
    color: var(--muted);
}

/* On the page that lists the trades: the trade with a price of its own. */
.deal-own {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- The guarantee (uses the homepage's dark band of three) ---------- */

.pledge-title {
    max-width: 13em;
    margin-bottom: 28px;
}

.pledge-notes {
    display: grid;
    gap: 10px;
    max-width: 46em;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line-on-ink);
    font-size: 0.9375rem;
    color: var(--light);
}

.pledge-notes strong {
    color: var(--white);
}

/* ---------- The numbers ---------- */

.ledgers {
    display: grid;
    gap: 16px;
}

.ledger {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--white);
    border: 1px solid var(--ink);
}

.ledger-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.ledger-title {
    font-weight: 600;
}

.ledger-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
}

.ledger-rows dd {
    font-family: var(--mono);
    white-space: nowrap;
}

.ledger-rows .ledger-total {
    margin: 0 -18px;
    padding-left: 18px;
    padding-right: 18px;
    border-top: 0;
    background: var(--gold);
    font-weight: 600;
}

.ledger-rows .ledger-total + div {
    border-top: 0;
}

.ledger-foot {
    font-size: 0.875rem;
    color: var(--muted);
}

.numbers-more {
    max-width: 46em;
    margin-top: 20px;
}

/* ---------- About: a hero with nothing overlapping its lower edge ---------- */

.hero-plain .hero-in {
    padding-bottom: 48px;
}

/* On the about page the white band above it would touch this one, so it goes back to paper. */
.rc-about .voice {
    border: 0;
    background: var(--paper);
}

/* ---------- Not found: a short page, so the dark runs to the foot of a tall screen ---------- */

.rc-missing {
    background: var(--ink);
}

/* ---------- About: the story, one dated row at a time ---------- */

.story .head {
    margin-bottom: 20px;
}

.story-rows {
    display: grid;
    border-bottom: 1px solid var(--ink);
}

.story-row {
    display: grid;
    gap: 6px;
    padding: 20px 0;
    border-top: 1px solid var(--ink);
}

.story-when {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.story-row h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.08;
}

.story-row p {
    font-size: 0.9375rem;
    color: var(--body2);
}

/* ---------- Thank you: what happens next, beside what John will ask ---------- */

/* The phone number in the hero. */
.hero-sub strong {
    color: var(--white);
    font-weight: 600;
    white-space: nowrap;
}

.next-in {
    display: grid;
    gap: 28px;
}

/* The steps reuse the about page's dated rows. */
.next .fine {
    margin-top: 20px;
}

.ready {
    background: var(--white);
}

.ready-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ready;
}

.ready-list li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
    color: var(--body2);
    counter-increment: ready;
}

.ready-list li::before {
    content: counter(ready, decimal-leading-zero);
    flex: 0 0 auto;
    padding-top: 2px;
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
}

.ready-list strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Contact: three ways to reach John ---------- */

.reach-cards {
    display: grid;
    gap: 16px;
}

.reach-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--ink);
}

.reach-card .kicker {
    font-weight: 400;
    line-height: 1.4;
}

.reach-value {
    font-family: var(--display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.05;
    text-wrap: balance;
}

/* An email address is one long word. It is sized to fit a phone and may break if it must. */
.reach-email {
    font-size: clamp(1.375rem, 6.6vw, 2rem);
    overflow-wrap: anywhere;
}

.reach-note {
    font-size: 0.9375rem;
    color: var(--body2);
}

.reach-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    margin-top: auto;
    padding-top: 4px;
}

.reach-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Small tablets: 600px and up ---------- */

@media (min-width: 600px) {
    .deal {
        padding: 24px;
    }
}

/* ---------- Tablets and desktop: 900px and up ---------- */

@media (min-width: 900px) {
    .hero-inner h1 {
        font-size: clamp(2.875rem, 5.6vw, 5.25rem);
        line-height: 0.97;
    }

    .kicker {
        font-size: 0.8125rem;
    }

    .item-no {
        padding-top: 8px;
        font-size: 0.875rem;
    }

    .point h3,
    .stack-item h3 {
        font-size: 1.875rem;
    }

    .point p,
    .stack-item p {
        font-size: 1rem;
    }

    .points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 56px;
    }

    .point {
        gap: 18px;
        padding: 26px 0;
    }

    .offer-in {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        align-items: start;
        gap: 56px;
    }

    .offer .head {
        margin-bottom: 28px;
    }

    .stack-item {
        gap: 18px;
        padding: 22px 0;
    }

    .deal {
        position: sticky;
        top: 24px;
        gap: 16px;
        padding: 28px;
    }

    .deal-title {
        font-size: 2.25rem;
    }

    .deal-rows > div {
        padding: 14px 0;
    }

    .deal-rows dd {
        font-size: 2rem;
    }

    .pledge-title {
        margin-bottom: 44px;
    }

    .pledge-notes {
        margin-top: 44px;
        padding-top: 24px;
        font-size: 1rem;
    }

    .ledgers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 20px;
    }

    .ledger {
        gap: 14px;
        padding: 24px;
    }

    .ledger-rows > div {
        gap: 24px;
        padding: 10px 0;
        font-size: 1rem;
    }

    .ledger-rows .ledger-total {
        margin: 0 -24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .numbers-more {
        margin-top: 28px;
    }

    .hero-plain .hero-in {
        padding-bottom: 96px;
    }

    .story .head {
        margin-bottom: 28px;
    }

    .story .founder-in {
        align-items: start;
    }

    .story-row {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 6px 24px;
        padding: 24px 0;
    }

    .story-when {
        padding-top: 8px;
        font-size: 0.8125rem;
    }

    .story-row h3 {
        font-size: 1.875rem;
    }

    .story-row p {
        grid-column: 2;
        font-size: 1rem;
    }

    .reach-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .reach-card {
        gap: 12px;
        padding: 26px;
    }

    /* Three cards across: the type follows the card's width so a phone number or an email address stays on one line. */
    .reach-value {
        font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    }

    .reach-email {
        font-size: clamp(1rem, 1.9vw, 1.75rem);
    }

    .reach-note {
        font-size: 1rem;
    }

    .next-in {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        align-items: start;
        gap: 56px;
    }

    .next-solo .next-in {
        grid-template-columns: minmax(0, 46em);
    }

    .ready-list li {
        gap: 16px;
        padding: 14px 0;
        font-size: 1rem;
    }

    .ready-list li::before {
        padding-top: 3px;
    }

    .hero-light .hero-in {
        padding-bottom: 72px;
    }

    .path {
        padding: 44px 0 48px;
    }

    .path-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .path-cell {
        gap: 8px;
        padding: 0 24px;
        border-top: 0;
        border-left: 1px solid var(--line-on-ink);
    }

    .path-cell:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .path-cell:last-child {
        padding-right: 0;
    }

    .path-cell h2 {
        font-size: 1.625rem;
    }

    .path-cell p {
        font-size: 1rem;
    }

    .proof-line {
        font-size: 1rem;
    }

    .strip-flow {
        margin-top: 20px;
    }

    .hero-card {
        gap: 16px;
        padding: 28px;
    }

    .hero-card-title {
        font-size: 2.125rem;
    }

    .hero-card-lede {
        font-size: 1rem;
    }

    .hero-card .market-form {
        gap: 16px;
    }
}

/* ---------- Wide enough for the trade page's form beside its headline ---------- */

@media (min-width: 1000px) {
    .hero-split {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: start;
        gap: 56px;
        padding-top: 56px;
    }

    .hero-copy {
        gap: 26px;
        padding-top: 16px;
    }

    /* The headline has a little over half the width here, so it is set smaller. */
    .hero-form h1 {
        font-size: clamp(2.5rem, 4.3vw, 4rem);
    }

    .hero-form .hero-sub {
        font-size: 1.125rem;
    }

    .hero-card {
        max-width: none;
    }
}