/*
 * Homepage (2026). Loaded only by front-page.php, which does not load any other stylesheet.
 * Palette: charcoal and gold on warm paper. Type: Barlow Condensed, IBM Plex Sans, IBM Plex Mono.
 * Written phone-first; wider layouts are added in the min-width blocks.
 */

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}

:root {
    --ink: #17181A;
    --paper: #F6F3EB;
    --white: #FFFFFF;
    --gold: #D4AF37;
    --gold-dark: #C39F2B;
    --muted: #55524A;
    --body2: #36342E;
    --rule: #D8D2C2;
    --dash: #8A8473;
    --light: #E9E6DD;
    --soft: #CFCABB;
    --line-on-ink: rgba(255, 255, 255, 0.22);
    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', Consolas, monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
h3,
dl,
dd,
ul,
blockquote {
    margin: 0;
}

img,
video {
    max-width: 100%;
}

a {
    color: var(--ink);
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid #2F6BFF;
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 100;
    padding: 10px 14px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
}

.skip-link:focus {
    top: 8px;
}

/* Read out by a screen reader, not shown. */
.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.gold {
    color: var(--gold);
}

.muted {
    color: var(--muted);
}

.strong {
    font-weight: 600;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.btn-lg {
    min-height: 56px;
}

.btn-block {
    width: 100%;
}

.btn-gold {
    background: var(--gold);
    color: var(--ink);
}

.btn-gold:hover {
    background: var(--gold-dark);
}

.btn-line {
    border: 1px solid var(--white);
    background: transparent;
    color: var(--white);
}

.btn[disabled] {
    opacity: 0.7;
    cursor: default;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    background: var(--ink);
    color: var(--white);
}

.hero-media,
.hero-shade {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/* The photo and the video are cut off at the hero's edge here, not on .hero itself, so the
   menu and the list under "Services" can hang below a short hero. */
.hero-media {
    overflow: hidden;
}

.hero-photo,
.hero-media video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.hero-media iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-shade {
    background: rgba(23, 24, 26, 0.78);
}

.top {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--line-on-ink);
}

.top-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    color: var(--white);
    text-decoration: none;
}

.brand-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--white);
}

/* The line under the name. It is held to two short lines so it never pushes the menu down. */
.brand-line {
    display: none;
    max-width: 20.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--soft);
    text-wrap: balance;
}

.menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--white);
    cursor: pointer;
}

.nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    padding: 8px 20px 16px;
    background: var(--ink);
    border-bottom: 1px solid var(--line-on-ink);
}

.nav.is-open {
    display: flex;
}

.no-js .menu-btn {
    display: none;
}

.no-js .nav {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 20px;
    padding: 0;
    border: 0;
}

.nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}

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

/* The page being shown, and "Services" on a trade page. */
.nav a[aria-current="page"],
.nav a.is-current {
    color: var(--gold);
}

/* "Services" and the trades under it. In the phone menu the trades are always listed, two
   across; on a wide screen they drop down (see the 900px block). */
.nav-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.nav-group > a {
    flex: 1 1 auto;
}

.nav-more {
    display: none;
}

.nav-sub {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    margin: 0 0 8px;
    padding: 0 0 0 14px;
    border-left: 2px solid var(--gold);
    list-style: none;
}

.nav .nav-sub a {
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--light);
}

.nav .nav-sub a:hover,
.nav .nav-sub a[aria-current="page"] {
    color: var(--gold);
}

.no-js .nav-group {
    flex: 1 1 100%;
}

/* The phone number: a line in the phone menu, and beside the button on a wide screen. */
.nav .nav-phone {
    gap: 8px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nav-phone svg {
    flex: 0 0 auto;
    color: var(--gold);
}

.nav .nav-cta {
    justify-content: center;
    margin-top: 8px;
    padding: 0 20px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
}

.nav .nav-cta:hover {
    background: var(--gold-dark);
    color: var(--ink);
}

.hero-in {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 40px;
    padding-bottom: 96px;
}

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

h1 {
    max-width: 10.5em;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.5rem, 12.4vw, 3.5rem);
    line-height: 0.97;
    text-wrap: balance;
}

.hero-sub {
    max-width: 34em;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--light);
    text-wrap: pretty; /* no word left alone on the last line */
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.hero-actions .btn {
    width: 100%;
}

.text-link {
    display: none;
    align-items: center;
    min-height: 44px;
    color: var(--white);
    font-weight: 600;
}

.rc-note {
    align-self: flex-start;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.55);
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* ---------- First-90-days numbers ---------- */

.strip {
    position: relative;
    z-index: 2;
    margin-top: -56px;
}

.strip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--white);
    border: 1px solid var(--ink);
}

.strip-cell {
    display: flex;
    flex-direction: column;
    /* Every label at the top of its box and every figure at the bottom, so labels line up with
       each other and figures with each other, whether a label takes one line ("Ad spend,
       about") or two ("First lead to first pour"). Until October 13, 2026 the labels sat at the
       bottom instead, and the gold box at the top, which put its figure out of line. */
    justify-content: space-between;
    gap: 4px;
    padding: 14px 16px;
}

.strip-cell:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
}

.strip-cell dt {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.strip-cell dd {
    font-family: var(--display);
    font-weight: 700;
    font-size: 2.125rem;
    line-height: 1;
}

/* A unit after a figure ("15 days"), set like the label so the number stays the big thing. */
.strip-cell dd small {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.strip-total {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: var(--gold);
    border-top: 0 !important;
}

.strip-total dt {
    color: var(--ink);
}

.strip-total dd {
    font-size: 2.375rem;
}

.strip-note {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--muted);
}

/* ---------- Shared section pieces ---------- */

.blk {
    padding: 48px 0;
}

h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
    text-wrap: balance;
}

.bar::before {
    content: "";
    display: block;
    width: 48px;
    height: 6px;
    margin-bottom: 16px;
    background: var(--gold);
}

.head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 46em;
    margin-bottom: 24px;
}

.lede {
    font-size: 1rem;
}

/* Empty Customizer slot. Only shown to people who can edit the theme. */
.rc-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 160px;
    padding: 20px;
    border: 2px dashed var(--dash);
    background: var(--white);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
}

.rc-slot small {
    font-size: 0.6875rem;
}

.rc-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- John ---------- */

.founder-in {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.founder-photo {
    width: 100%;
    max-height: 420px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}

.founder-photo.rc-slot {
    min-height: 300px;
    aspect-ratio: auto;
}

.founder-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.signature {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}

.signature-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.1;
}

.signature-role {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--muted);
}

/* ---------- Three claims ---------- */

.claims {
    padding: 44px 0;
    background: var(--ink);
    color: var(--white);
}

.claims-grid {
    display: grid;
    gap: 28px;
}

.claim {
    display: flex;
    gap: 16px;
}

.claim-no {
    flex: 0 0 auto;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--gold);
}

.claim h2 {
    margin-bottom: 6px;
    font-size: 1.75rem;
    line-height: 1.08;
}

/* The band also carries headings one level down (the reasons under "My bid was the highest"
   here, the guarantee on a trade page). */
.claim h3 {
    margin-bottom: 6px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.08;
}

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

/* ---------- A story told in paragraphs (October 13, 2026). Named .prose, not .story: the about
   page's section is .story, and a max-width here squeezed it. ---------- */

.prose {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 46em;
}

.prose p {
    color: var(--body2);
}

/* ---------- The highest bid: the story with the bid as a card beside it, then three reasons
   that each end on the fix. A light section; it was a dark band until John found it "a lot of
   black and ... a little too sparse" (October 13, 2026). ---------- */

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

.bids-top {
    display: grid;
    grid-template-areas: "head" "card" "text";
    gap: 24px;
}

.bids-head {
    grid-area: head;
}

.bids-text {
    grid-area: text;
}

.bid-card {
    grid-area: card;
    align-self: start;
    border: 1px solid var(--ink);
    background: var(--paper);
}

/* The job's photo on top of the card (Customize > Homepage (2026)). */
.bid-photo {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-bottom: 1px solid var(--ink);
}

.bid-photo.rc-slot {
    min-height: 0;
    border: 0;
    border-bottom: 2px dashed var(--dash);
}

.bid-body {
    padding: 24px;
}

.bid-job {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--muted);
}

.bid-label {
    margin-top: 16px;
    font-weight: 600;
}

.bid-amount {
    font-family: var(--display);
    font-weight: 700;
    font-size: 3.75rem;
    line-height: 1;
}

.bid-note {
    margin-top: 6px;
    color: var(--muted);
}

.bid-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 8px 14px 8px 12px;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- The books ---------- */

.books .head {
    margin-bottom: 0;
}

.shots {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

/* One screenshot on its own (the pipeline ships with the theme; the ad account is still to come): narrower, centred. */
.shots.shots-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

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

.shot.rc-slot {
    border: 2px dashed var(--dash);
}

/* ---------- Weekly score ---------- */

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

.score-in {
    display: grid;
    gap: 20px;
}

.score-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.score-phone {
    display: none;
}

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

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

.score-card-title {
    font-weight: 600;
}

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.6875rem;
}

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

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

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

/* ---------- Trades ---------- */

.trade-tabs {
    display: none;
}

/* Four trades: two rows of two on a phone. The 1px gap over an ink background draws the lines between them. */
.js .trade-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 20px;
    border: 1px solid var(--ink);
    background: var(--ink);
}

/* Five or seven trades: three across, then rows of two, so no row is left holding one box. */
.js .trade-tabs-5,
.js .trade-tabs-7 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.trade-tabs-5 .trade-tab,
.trade-tabs-7 .trade-tab {
    grid-column: span 2;
}

.trade-tabs-5 .trade-tab:nth-child(n + 4),
.trade-tabs-7 .trade-tab:nth-child(n + 4) {
    grid-column: span 3;
}

.trade-tab {
    min-height: 48px;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.trade-tab[aria-pressed="true"] {
    background: var(--ink);
    color: var(--white);
}

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

.trade-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.js .trade-card {
    display: none;
}

.js .trade-card.is-active,
.js .trade-cards-all .trade-card {
    display: flex;
}

.trade-card h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
}

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

.trade-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0 0;
    border-top: 1px solid var(--rule);
    list-style: none;
    font-family: var(--mono);
    font-size: 0.875rem;
}

/* The bar at the foot of a card is the link to that trade's page. Its ::after is stretched
   over the whole card, so a click or a tap anywhere on the card follows the link. */
.trade-go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin-top: auto;
    padding: 0 16px;
    background: var(--ink);
    color: var(--white);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.trade-go::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.trade-go svg {
    flex: 0 0 auto;
    color: var(--gold);
    transition: transform 0.15s ease;
}

/* With one card, the bar goes to the form and this small link under it goes to the offer page.
   It sits above the bar's stretched ::after, so it can be clicked on its own. */
.trade-more {
    position: relative;
    z-index: 1;
    align-self: center;
    padding: 4px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trade-more:hover {
    color: var(--gold-dark);
}

/* On the page that lists the trades a phone shows all the cards, so each is kept short: the
   link shrinks to a dark square with the arrow, at the card's top right. It is still
   stretched over the whole card. */
@media (max-width: 599px) {
    .trade-cards-all {
        gap: 10px;
    }

    .js .trade-cards-all .trade-card,
    .trade-cards-all .trade-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 6px 14px;
        padding: 16px;
    }

    .trade-cards-all .trade-card > * {
        grid-column: 1;
    }

    .trade-cards-all .trade-card h3 {
        font-size: 1.875rem;
    }

    .trade-cards-all .trade-price {
        margin-top: 4px;
        padding-top: 10px;
    }

    .trade-cards-all .trade-card .trade-go {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: start;
        justify-content: center;
        min-height: 44px;
        margin-top: 0;
        padding: 0;
    }

    .trade-cards-all .trade-go > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* With a mouse, the card lifts and the bar turns gold, so it reads as something to click. */
@media (hover: hover) {
    .trade-card:hover {
        transform: translate(-3px, -3px);
        box-shadow: 6px 6px 0 var(--gold);
    }

    .trade-card:hover .trade-go {
        background: var(--gold);
        color: var(--ink);
    }

    .trade-card:hover .trade-go svg {
        color: var(--ink);
        transform: translateX(4px);
    }
}

.other-trade {
    max-width: 46em;
    margin-top: 20px;
}

.other-trade a {
    font-weight: 600;
}

.fine {
    max-width: 46em;
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--muted);
}

/* ---------- The offer in six lines, above the price card (October 13, 2026). A list, not
   boxes: each line is a check, a short name and one sentence. ---------- */

.get-list {
    display: grid;
    gap: 18px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.get-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.get-list svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--gold-dark);
}

.get-list h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.1;
}

.get-list p {
    margin-top: 4px;
    font-size: 0.9375rem;
    color: var(--body2);
}

/* The lead app on a phone beside the six lines (October 19, 2026): held to a phone's width, under the list on a phone, beside it from 900px. */
.get-grid {
    display: grid;
    gap: 28px;
    margin-bottom: 28px;
}

.get-grid .get-list {
    margin-bottom: 0;
}

.get-phone {
    justify-self: center;
    width: min(250px, 72%);
    margin: 0;
}

.get-phone .shot-phone {
    border: 1px solid var(--ink);
    border-radius: 28px;
}

.get-phone figcaption {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}

/* The guarantee, under the price it answers. */
.stack-deal {
    max-width: 46em;
    margin-top: 20px;
    font-weight: 600;
}

/* ---------- Brandon ---------- */

.voice-in {
    display: grid;
    gap: 18px;
}

.voice-head {
    font-size: 2rem;
    line-height: 1.02;
}

.video-facade,
.video-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    background: var(--ink);
    overflow: hidden;
}

.video-facade {
    cursor: pointer;
}

.video-facade img,
.video-frame iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    border: 0;
    object-fit: cover;
}

.play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    transform: translate(-50%, -50%);
}

.slot-video {
    min-height: 190px;
    background: var(--paper);
}

.voice-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.voice blockquote p {
    font-size: 1.1875rem;
    line-height: 1.45;
    font-weight: 500;
}

.voice blockquote footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
}

.voice cite {
    font-style: normal;
    font-weight: 600;
}

.voice blockquote footer span {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
}

/* ---------- Questions ---------- */

.faq h2 {
    margin-bottom: 20px;
}

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

.faq details {
    border-top: 1px solid var(--ink);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 8px 0;
    font-size: 1.0625rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary svg {
    flex: 0 0 auto;
}

.faq details[open] summary svg {
    transform: rotate(180deg);
}

.faq details p {
    padding-bottom: 18px;
    font-size: 0.9375rem;
    color: var(--body2);
}

/* ---------- Market check ---------- */

.market {
    padding: 48px 0;
    background: var(--ink);
    color: var(--white);
}

.market-in {
    display: grid;
    gap: 20px;
}

.market-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.market h2 {
    font-size: 2.75rem;
    line-height: 0.98;
}

.market .lede {
    font-size: 1.0625rem;
    color: var(--light);
}

.market .muted {
    font-size: 0.9375rem;
    color: var(--soft);
}

.market-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--white);
    color: var(--ink);
}

.field-row {
    display: grid;
    gap: 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.field input,
.field select {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
}

.hp {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}

.form-error {
    padding: 12px 14px;
    border: 1px solid #9B1C1C;
    background: #FDF2F2;
    color: #7A1414;
    font-size: 0.9375rem;
}

/* The line under the button. Printed once a privacy page is published. */
.form-note {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted);
}

.form-note a {
    color: inherit;
}

/* ---------- Footer and the phone bar ---------- */

.foot {
    padding: 28px 0 104px;
    background: var(--ink);
    border-top: 1px solid var(--line-on-ink);
    color: var(--soft);
    font-size: 0.875rem;
}

.foot-in {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.foot-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.foot-brand .brand-name {
    font-size: 1.375rem;
}

.foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

.foot-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--white);
}

.sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.sticky-bar .btn {
    min-height: 50px;
    padding: 0 8px;
    font-size: 1rem;
}

/* The parent theme's "scroll to top" button, in case it is ever printed here. Its own styles are not loaded. */
#ast-scroll-top {
    display: none;
}

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

@media (min-width: 600px) {
    .brand-line {
        display: block;
    }

    .get-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 32px;
    }

    .hero-actions .btn {
        width: auto;
    }

    .text-link {
        display: inline-flex;
    }

    .field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .js .trade-tabs-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .trade-tabs-5 .trade-tab,
    .trade-tabs-5 .trade-tab:nth-child(n + 4) {
        grid-column: auto;
    }

    /* Seven: four across, then three. */
    .js .trade-tabs-7 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .trade-tabs-7 .trade-tab,
    .trade-tabs-7 .trade-tab:nth-child(n + 4) {
        grid-column: span 3;
    }

    .trade-tabs-7 .trade-tab:nth-child(n + 5) {
        grid-column: span 4;
    }

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

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

@media (min-width: 900px) {
    body {
        font-size: 17px;
    }

    .wrap {
        padding-left: 32px;
        padding-right: 32px;
    }

    .btn-lg {
        min-height: 58px;
        padding: 0 28px;
    }

    .top-in {
        gap: 12px 32px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .brand-name {
        font-size: 1.875rem;
    }

    .menu-btn {
        display: none;
    }

    .nav,
    .nav.is-open {
        display: flex;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 28px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .nav a {
        min-height: 44px;
        font-size: 0.9375rem;
    }

    .nav .nav-cta {
        margin-top: 0;
    }

    /* The trades drop down under "Services": on hover, when a key moves into them, or when
       the arrow beside it is pressed (a touch screen has no hover). The menu and the group
       are as tall as the bar, so the list starts exactly on the bar's lower edge. */
    .nav,
    .nav.is-open,
    .nav-group {
        align-self: stretch;
    }

    .nav-group {
        position: relative;
        flex-wrap: nowrap;
        gap: 2px;
    }

    .nav-more {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--white);
        cursor: pointer;
    }

    .nav-more svg {
        transition: transform 0.15s ease;
    }

    .nav-sub {
        position: absolute;
        left: -18px;
        top: calc(100% + 16px);
        z-index: 30;
        display: none;
        min-width: 220px;
        margin: 0;
        padding: 8px 0;
        border: 1px solid var(--line-on-ink);
        border-top: 2px solid var(--gold);
        background: var(--ink);
    }

    /* Covers the gap between "Services" and the list, so the pointer can cross it. */
    .nav-sub::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -20px;
        height: 20px;
    }

    .nav-group:hover .nav-sub,
    .nav-group:focus-within .nav-sub,
    .nav-group.is-open .nav-sub {
        display: block;
    }

    .nav-group:hover .nav-more svg,
    .nav-group:focus-within .nav-more svg,
    .nav-group.is-open .nav-more svg {
        transform: rotate(180deg);
    }

    .nav .nav-sub a {
        min-height: 42px;
        padding: 0 18px;
        color: var(--white);
        font-size: 0.9375rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .nav .nav-sub a:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .hero-in {
        gap: 28px;
        padding-top: 88px;
        padding-bottom: 150px;
    }

    .eyebrow {
        font-size: 0.8125rem;
    }

    h1 {
        font-size: clamp(3.25rem, 7vw, 6.5rem);
        line-height: 0.95;
    }

    .hero-sub {
        font-size: 1.25rem;
    }

    .strip {
        margin-top: -64px;
    }

    .strip-note {
        font-size: 0.75rem;
    }

    .blk {
        padding: 80px 0;
    }

    h2 {
        font-size: clamp(2.25rem, 4.2vw, 3.625rem);
    }

    .bar::before {
        width: 56px;
        margin-bottom: 18px;
    }

    .head {
        margin-bottom: 32px;
    }

    .lede {
        font-size: 1.125rem;
    }

    .rc-slot {
        min-height: 200px;
        padding: 24px;
        font-size: 0.875rem;
    }

    .founder-in {
        display: grid;
        grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
        align-items: center;
        gap: 56px;
    }

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

    .founder-photo {
        max-height: none;
    }

    .founder-photo.rc-slot {
        min-height: 460px;
    }

    .founder-text {
        gap: 18px;
    }

    .claims {
        padding: 64px 0;
    }

    .claims-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 48px;
    }

    .claim {
        flex-direction: column;
        gap: 12px;
    }

    .claim-no {
        font-size: 1.875rem;
        line-height: 1;
    }

    .claim h2,
    .claim h3 {
        margin-bottom: 12px;
        font-size: 2.125rem;
        line-height: 1.05;
    }

    .claim p {
        font-size: 1rem;
    }

    .prose {
        gap: 18px;
    }

    .prose p {
        font-size: 1.0625rem;
    }

    /* The headline and the story on the left, centred against the card on the right. */
    .bids-top {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas: ". card" "head card" "text card" ". card";
        align-items: start;
        column-gap: 72px;
        row-gap: 18px;
    }

    .bid-body {
        padding: 32px;
    }

    .bid-amount {
        font-size: 5rem;
    }

    .shots {
        gap: 16px;
        margin-top: 32px;
    }

    .score-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "card text";
        align-items: center;
        gap: 40px;
    }

    .score-card {
        grid-area: card;
        gap: 14px;
        padding: 24px;
    }

    .score-text {
        grid-area: text;
    }

    .score-text h2 {
        font-size: clamp(2.125rem, 3.8vw, 3.25rem);
    }

    .tag {
        min-height: 28px;
        padding: 0 10px;
        font-size: 0.75rem;
    }

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

    .js .trade-tabs {
        display: none;
    }

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

    /* Five trades: three across, then two wider ones. */
    .trade-cards-5 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .trade-cards-5 .trade-card {
        grid-column: span 2;
    }

    .trade-cards-5 .trade-card:nth-child(n + 4) {
        grid-column: span 3;
    }

    /* Seven trades: three across, then two rows of two. */
    .trade-cards-7 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .trade-cards-7 .trade-card {
        grid-column: span 4;
    }

    .trade-cards-7 .trade-card:nth-child(n + 4) {
        grid-column: span 6;
    }

    /* One trade (concrete, since October 13, 2026): one card across the width. The offer's
       name and who it is for on the left, the terms beside them, the bar to the form
       underneath with the small offer-page link under it; from 1180px the bar and the link
       move up beside the terms. */
    .trade-cards-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .trade-cards-1 .trade-card,
    .js .trade-cards-1 .trade-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 32px;
    }

    .trade-cards-1 .trade-card h3 {
        grid-column: 1;
        grid-row: 1;
    }

    .trade-cards-1 .trade-card p {
        grid-column: 1;
        grid-row: 2;
        text-wrap: pretty; /* no word left alone on the second line */
    }

    .trade-cards-1 .trade-price {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding: 0 0 0 24px;
        border-top: 0;
        border-left: 1px solid var(--rule);
        white-space: nowrap;
    }

    .trade-cards-1 .trade-go {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 12px;
    }

    .trade-cards-1 .trade-more {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: center;
    }

    .get-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 40px;
        margin-bottom: 40px;
    }

    .get-list h3 {
        font-size: 1.5rem;
    }

    .get-grid {
        grid-template-columns: minmax(0, 1fr) 250px;
        align-items: center;
        gap: 40px 56px;
        margin-bottom: 40px;
    }

    .get-grid-solo {
        grid-template-columns: minmax(0, 1fr);
    }

    .get-grid:not(.get-grid-solo) .get-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .get-phone {
        width: auto;
        justify-self: stretch;
    }

    .trade-card,
    .js .trade-card {
        display: flex;
        padding: 26px;
    }

    .trade-card h3 {
        font-size: 2.375rem;
    }

    .trade-card p {
        font-size: 1rem;
    }

    .trade-price {
        font-size: 0.9375rem;
    }

    .other-trade {
        margin-top: 28px;
    }

    .voice-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "media head" "media text";
        align-items: start;
        gap: 18px 56px;
    }

    .voice-solo .voice-in {
        grid-template-columns: minmax(0, 46em);
        grid-template-areas: "head" "text";
    }

    .voice-head {
        grid-area: head;
        align-self: end;
        font-size: clamp(2.125rem, 3.8vw, 3.25rem);
        line-height: 1;
    }

    .voice-media {
        grid-area: media;
        align-self: center;
    }

    .voice-text {
        grid-area: text;
        gap: 18px;
    }

    .voice blockquote p {
        font-size: 1.3125rem;
    }

    .voice blockquote footer span {
        font-size: 0.8125rem;
    }

    .slot-video {
        min-height: 300px;
    }

    .faq h2 {
        margin-bottom: 32px;
    }

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

    .faq summary {
        font-size: 1.1875rem;
    }

    .faq details p {
        font-size: 1rem;
    }

    .market {
        padding: 80px 0;
    }

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

    .market-text {
        gap: 20px;
    }

    .market h2 {
        font-size: clamp(2.5rem, 5vw, 4.375rem);
    }

    .market .lede {
        font-size: 1.1875rem;
    }

    .market .muted {
        font-size: 1rem;
    }

    .market-form {
        gap: 18px;
        padding: 32px;
    }

    .field-row {
        gap: 18px;
    }

    .field input,
    .field select {
        min-height: 48px;
    }

    .foot {
        padding: 32px 0;
    }

    .foot-in {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 32px;
    }

    .sticky-bar {
        display: none;
    }
}

/* ---------- Narrow desktop: no room for the line under the name beside the menu, and up to
   1199px none for the phone number either ---------- */

@media (min-width: 900px) and (max-width: 1099px) {
    .brand-line {
        display: none;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .nav .nav-phone {
        display: none;
    }
}

/* ---------- Wide enough for the app screenshot beside the weekly score ---------- */

@media (min-width: 1000px) {
    .score-in {
        grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "phone card text";
    }

    .score-solo .score-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "card text";
    }

    .score-phone {
        display: block;
        grid-area: phone;
    }

    .shot-phone {
        border: 1px solid var(--ink);
        border-radius: 28px;
    }

    .shot-phone.rc-slot {
        min-height: 420px;
        border: 2px dashed var(--dash);
        background: var(--paper);
    }
}

/* ---------- Wide enough for the five numbers in one row ---------- */

@media (min-width: 1100px) {
    .strip-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .strip-cell {
        gap: 6px;
        padding: 20px 24px;
    }

    .strip-cell:nth-child(n + 3) {
        border-top: 0;
    }

    .strip-cell dt {
        font-size: 0.75rem;
        letter-spacing: 0.06em;
    }

    .strip-cell dd,
    .strip-total dd {
        font-size: 2.625rem;
    }

    .strip-total {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between; /* the same as the other four boxes */
        gap: 6px;
    }
}

/* ---------- Wide enough for four trade cards in one row (five stay three and two; seven go four and three) ---------- */

@media (min-width: 1180px) {
    .trade-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .trade-cards-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .trade-cards-5 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .trade-cards-7 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .trade-cards-7 .trade-card,
    .trade-cards-7 .trade-card:nth-child(n + 4) {
        grid-column: span 3;
    }

    .trade-cards-7 .trade-card:nth-child(n + 5) {
        grid-column: span 4;
    }

    .trade-card,
    .js .trade-card {
        padding: 24px;
    }

    .trade-card h3 {
        font-size: 2.125rem;
    }

    /* Four across, the second price line just fits at this size. */
    .trade-price {
        font-size: 0.8125rem;
    }

    .trade-cards-1 .trade-price {
        font-size: 0.9375rem;
    }

    .trade-cards-1 .trade-card,
    .js .trade-cards-1 .trade-card {
        grid-template-columns: minmax(0, 1fr) auto minmax(220px, auto);
    }

    /* The bar beside the offer's name, the small link under it beside the line about who it is for. */
    .trade-cards-1 .trade-go {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
    }

    .trade-cards-1 .trade-more {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .trade-card,
    .trade-go svg,
    .nav-more svg {
        transition: none;
    }

    .trade-card:hover,
    .trade-card:hover .trade-go svg {
        transform: none;
    }
}