/**
 * Website Builds — page-scoped styles.
 * Loaded only by websites-branding.html, after tokens.css and system.css.
 *
 * The centrepiece is .ba (before/after): two live mini-sites stacked in one
 * browser frame, wiped between with clip-path. Everything under .ba-before is
 * deliberately dated — that markup is content, not brand, so it is the one
 * place in this file that hardcodes colour on purpose.
 */

/* ── PAGE HERO ───────────────────────────────────────────────────── */
.wb-hero { text-align: center; max-width: 860px; margin: 0 auto 56px; }

.wb-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--t-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brand);
    margin-bottom: 20px;
}

.wb-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.5vw, 82px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin-bottom: 24px;
}
.wb-hero h1 em { font-style: normal; color: var(--horizon); }

.wb-hero p {
    font-size: var(--t-lead);
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto;
}

/* ── BEFORE / AFTER ──────────────────────────────────────────────── */
.ba-wrap { max-width: var(--w-content); margin: 0 auto 24px; padding: 0 20px; }

/* Browser chrome sits outside the wipe: one browser, one URL, two outcomes. */
.ba-browser {
    border-radius: var(--r-img);
    overflow: hidden;
    box-shadow: var(--lift-3);
    border: 1px solid var(--hairline);
    background: #fff;
}

.ba-chrome {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    background: #E9EDF2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ba-dots { display: flex; gap: 7px; flex-shrink: 0; }
.ba-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.ba-dots i:nth-child(1) { background: #FF5F57; }
.ba-dots i:nth-child(2) { background: #FEBC2E; }
.ba-dots i:nth-child(3) { background: #28C840; }
.ba-url {
    font-family: var(--font-ui);
    font-size: 12px; color: #6B7684;
    background: #fff;
    border-radius: var(--r-pill);
    padding: 6px 16px;
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.ba {
    position: relative;
    /* The mini-sites size themselves against this frame, not the viewport —
       they are meant to look like websites at whatever size we render them. */
    container-type: inline-size;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #fff;
    touch-action: pan-y;
}
@media (max-width: 720px) { .ba { aspect-ratio: 3 / 4; } }

.ba-pane {
    position: absolute; inset: 0;
    overflow: hidden;
    /* Panes never reflow — clip-path hides, it does not resize. */
}

/* --split is the handle position in %. 100% = all before, 0% = all after. */
.ba-pane--after { clip-path: inset(0 0 0 var(--split, 50%)); }

/* ── The seam ────────────────────────────────────────────────────── */
/* The seam is the moment of transformation, so it reads as a bar of light
   rather than a divider — colour pours back into the world at this line. */
.ba-seam {
    position: absolute; top: 0; bottom: 0;
    left: var(--split, 50%);
    width: 3px; margin-left: -1.5px;
    background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.75),
                #FFF6D8 18%, #FFE9A3 50%, #FFF6D8 82%,
                rgba(255, 255, 255, 0.75));
    box-shadow:
        0 0 10px 1px rgba(255, 224, 130, 0.95),
        0 0 34px 6px rgba(202, 138, 4, 0.55),
        0 0 90px 18px rgba(202, 138, 4, 0.20);
    pointer-events: none; z-index: 3;
}

/* A soft bloom spilling onto the colour side only. */
.ba-seam::before {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 1px;
    width: 90px;
    background: linear-gradient(to right,
                rgba(255, 233, 163, 0.42), rgba(255, 233, 163, 0));
    pointer-events: none;
}

.ba-grip {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(140deg, #F3C13A, var(--brand) 55%, #A97103);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.32),
        0 0 0 5px rgba(255, 255, 255, 0.92),
        0 0 30px 6px rgba(202, 138, 4, 0.55);
    display: grid; place-items: center;
    color: #fff; font-size: 20px; line-height: 1;
}

/* Breathing halo — the one thing on the page asking to be touched. */
.ba-grip::after {
    content: '';
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(202, 138, 4, 0.55);
    animation: ba-beckon 2.6s var(--ease) infinite;
}
@keyframes ba-beckon {
    0%   { transform: scale(1);    opacity: 0.85; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* ── SPARKLES ────────────────────────────────────────────────────────
   Spawned by js/before-after.js inside the after pane, so the clip-path
   confines them to the colour side. Same glyph vocabulary as the navbar
   logo — the site already sparkles when something good happens. */
.ba-spark {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
    user-select: none;
    animation: ba-sparkle 900ms ease-out forwards;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
@keyframes ba-sparkle {
    0%   { opacity: 0; transform: scale(0) rotate(0deg); }
    30%  { opacity: 1; transform: scale(1) rotate(18deg); }
    100% { opacity: 0; transform: scale(0.35) rotate(46deg) translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    .ba-grip::after { animation: none; }
    .ba-spark { display: none; }
}

/* The real control: a range input laid over the frame. Gives us keyboard,
   touch and mouse for free rather than reimplementing all three. */
.ba-range {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    appearance: none; -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
    z-index: 4;
}
.ba-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 46px; height: 100%;
    background: transparent; cursor: ew-resize;
}
.ba-range::-moz-range-thumb {
    width: 46px; height: 100%;
    background: transparent; border: 0; cursor: ew-resize;
}
.ba-range:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

/* Corner tags name what you are looking at on each side. */
.ba-tag {
    position: absolute; top: 16px; z-index: 2;
    font-family: var(--font-ui);
    font-size: var(--t-micro); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    padding: 7px 14px; border-radius: var(--r-pill);
}
.ba-tag--before { left: 16px; background: rgba(26, 39, 64, 0.82); color: #fff; }
.ba-tag--after  { right: 16px; background: var(--life); color: #fff; }

.ba-hint {
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--t-label);
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    margin-bottom: 96px;
}

/* ═════════════════════════════════════════════════════════════════
   THE "BEFORE" SITE — every value here is intentionally dated.
   Scoped hard under .ba-before so none of it can leak into the page.
   ═════════════════════════════════════════════════════════════════ */
.ba-before {
    background: #DCDCDC;
    font-family: 'Times New Roman', Times, serif;
    color: #000;
    text-align: center;
    padding: 0;
    font-size: 13px;
    display: flex; flex-direction: column;

    /* The infomercial "problem" shot: drained of colour and hope. Doing this
       with a filter rather than grey hex values means the markup underneath
       stays honest — it really is a garish 1998 site, we are just filming it
       in black and white. */
    filter: grayscale(1) contrast(0.82) brightness(0.86);
}
.ba-before * { box-sizing: border-box; }

/* Vignette — the corners fall away like a worn-out VHS transfer. */
.ba-before::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
                rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.42) 100%);
}

.bb-banner {
    background: linear-gradient(#2B4C9B, #16306B);
    color: #FFE24D;
    font-weight: 700;
    padding: 10px 8px 8px;
    letter-spacing: 0.03em;
    border-bottom: 3px ridge #8FA8D8;
}
.bb-banner .bb-name { font-size: clamp(15px, 2.6cqw, 26px); display: block; text-shadow: 2px 2px 0 #000; }
.bb-banner .bb-tag  { font-size: clamp(8px, 1.2cqw, 11px); color: #FFF; font-style: italic; }

.bb-nav {
    display: flex; justify-content: center; gap: 3px;
    padding: 7px 4px; background: #B6B6B6;
    border-bottom: 2px groove #EFEFEF;
    flex-wrap: wrap;
}
.bb-nav span {
    font-size: clamp(8px, 1.1cqw, 11px);
    padding: 3px 9px;
    background: linear-gradient(#8FE84A, #4FA018);
    border: 2px outset #B6F08A;
    color: #06300B; font-weight: 700;
}

.bb-body { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }

.bb-construction {
    font-size: clamp(9px, 1.3cqw, 12px);
    color: #B00; font-weight: 700;
    background: #FFF3B0;
    border: 1px dashed #B00;
    padding: 5px;
}
.bb-h {
    font-size: clamp(11px, 1.7cqw, 16px);
    color: #16306B; text-decoration: underline;
    margin-bottom: 2px;
}
.bb-p {
    font-size: clamp(8px, 1.15cqw, 11.5px);
    line-height: 1.45; color: #222;
    max-width: 46ch; margin: 0 auto;
}
.bb-hr { border: 0; border-top: 1px solid #999; margin: 2px 0; }

.bb-foot {
    background: #B6B6B6; padding: 7px 8px;
    font-size: clamp(7px, 1cqw, 10px); color: #333;
    border-top: 2px groove #EFEFEF;
    display: flex; flex-direction: column; gap: 3px;
}
.bb-counter {
    font-family: 'Courier New', monospace;
    background: #000; color: #0F0;
    display: inline-block; padding: 1px 6px;
    letter-spacing: 0.16em;
}

/* ═════════════════════════════════════════════════════════════════
   THE "AFTER" SITE — the brand palette, doing its job.
   ═════════════════════════════════════════════════════════════════ */
.ba-after-site {
    position: relative;
    background: rgb(var(--ground-arrival));
    display: flex; flex-direction: column;
    height: 100%;
    text-align: left;

    /* Nudged warm and bright so the swing out of black and white lands as
       relief rather than merely "different". */
    filter: saturate(1.12) brightness(1.03);
}

/* Light blooming in from the seam edge. */
.ba-after-site::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    background: linear-gradient(105deg,
                rgba(255, 240, 190, 0.55) 0%,
                rgba(255, 240, 190, 0.10) 22%,
                rgba(255, 255, 255, 0) 48%);
}

.ab-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(10px, 1.8cqw, 18px) clamp(14px, 2.6cqw, 30px);
    border-bottom: 1px solid var(--hairline-soft);
    background: rgba(255, 255, 255, 0.7);
}
.ab-logo {
    font-family: var(--font-display);
    font-weight: 900; color: var(--ink);
    font-size: clamp(12px, 1.7cqw, 19px);
    letter-spacing: -0.02em;
}
.ab-logo b { color: var(--biz); }
.ab-call {
    font-family: var(--font-ui);
    font-size: clamp(7px, 1cqw, 11px); font-weight: 600;
    background: var(--biz); color: #fff;
    padding: clamp(5px, 0.8cqw, 9px) clamp(10px, 1.6cqw, 18px);
    border-radius: var(--r-pill);
    white-space: nowrap;
}

/* Two columns: the pitch on the left, the thing that captures the job on the
   right. A single centred column left two thirds of the frame empty, which
   read as an unfinished page rather than a finished one. */
.ab-hero {
    flex: 1;
    padding: clamp(12px, 2.6cqw, 34px) clamp(14px, 2.6cqw, 30px);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(12px, 2.4cqw, 32px);
    align-items: center;
    position: relative; z-index: 2;

    /* A real photograph, because the thing being sold is a site that looks
       like someone built it on purpose — and every dated site this replaces
       is wall-to-wall text. The scrim is heaviest under the copy and clears
       to nearly nothing on the right, so the van stays plainly visible
       instead of becoming texture. */
    background-image:
        linear-gradient(96deg,
            rgba(255, 251, 244, 0.96) 0%,
            rgba(255, 251, 244, 0.88) 26%,
            rgba(255, 251, 244, 0.18) 58%,
            rgba(255, 251, 244, 0.00) 100%),
        url('../images/demo/hero-plumbing.jpg');
    background-size: cover, cover;
    background-position: center, 58% 42%;
}
.ab-copy { display: flex; flex-direction: column; gap: clamp(5px, 0.9cqw, 11px); }

/* Booking card — the after site doesn't just look better, it captures work. */
.ab-card {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: clamp(8px, 1.4cqw, 18px);
    box-shadow: 0 clamp(6px, 1.2cqw, 16px) clamp(16px, 3cqw, 40px) rgba(26, 39, 64, 0.12);
    padding: clamp(10px, 1.8cqw, 22px);
    display: flex; flex-direction: column; gap: clamp(6px, 1cqw, 12px);
}
.ab-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-bottom: clamp(6px, 1cqw, 12px);
    border-bottom: 1px solid var(--hairline-soft);
}
.ab-card-title {
    font-weight: 800; color: var(--ink);
    font-size: clamp(8px, 1.15cqw, 13px);
}
.ab-card-live {
    font-family: var(--font-ui);
    font-size: clamp(5px, 0.7cqw, 8.5px); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--life);
    display: inline-flex; align-items: center; gap: 4px;
}
.ab-card-live i {
    width: clamp(4px, 0.55cqw, 6px); height: clamp(4px, 0.55cqw, 6px);
    border-radius: 50%; background: var(--life); display: block;
}
.ab-field {
    display: flex; align-items: center; gap: clamp(5px, 0.9cqw, 10px);
    background: rgb(var(--ground-origin));
    border: 1px solid var(--hairline-soft);
    border-radius: clamp(5px, 0.9cqw, 10px);
    padding: clamp(6px, 1cqw, 11px) clamp(7px, 1.2cqw, 13px);
    font-size: clamp(6.5px, 0.95cqw, 11px);
    color: var(--ink-soft);
}
.ab-field .material-symbols-outlined {
    font-size: clamp(8px, 1.2cqw, 14px); color: var(--biz); flex-shrink: 0;
}
.ab-field b { color: var(--ink); font-weight: 700; }
.ab-slot {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    background: rgba(22, 101, 52, 0.08);
    border: 1px solid rgba(22, 101, 52, 0.22);
    border-radius: clamp(5px, 0.9cqw, 10px);
    padding: clamp(6px, 1cqw, 11px) clamp(7px, 1.2cqw, 13px);
    font-size: clamp(6.5px, 0.95cqw, 11px);
    color: var(--life); font-weight: 700;
}
.ab-card-btn {
    text-align: center;
    background: var(--biz); color: #fff;
    border-radius: var(--r-pill);
    padding: clamp(7px, 1.15cqw, 13px);
    font-size: clamp(7px, 1.05cqw, 12px); font-weight: 700;
}

/* Narrow frame (the mobile 3:4 crop): stack rather than hide. The card is the
   proof that the site captures work — dropping it costs the argument. */
@container (max-width: 560px) {
    .ab-hero { grid-template-columns: 1fr; align-content: center; }
    .ab-card { padding: clamp(8px, 2.4cqw, 16px); }
    .ab-field:nth-of-type(2) { display: none; }
}
.ab-kicker {
    font-family: var(--font-ui);
    font-size: clamp(6px, 0.85cqw, 10px); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--life);
}
.ab-h1 {
    font-family: var(--font-display);
    font-size: clamp(16px, 3.4cqw, 40px);
    font-weight: 900; line-height: 1.05; letter-spacing: -0.035em;
    color: var(--ink); max-width: 15ch;
}
.ab-p {
    font-size: clamp(8px, 1.15cqw, 13px);
    color: var(--ink-soft); line-height: 1.55; max-width: 34ch;
}
.ab-actions { display: flex; gap: clamp(6px, 1cqw, 12px); flex-wrap: wrap; margin-top: 2px; }
.ab-btn {
    font-size: clamp(7px, 1cqw, 12px); font-weight: 700;
    padding: clamp(6px, 1cqw, 12px) clamp(12px, 2cqw, 26px);
    border-radius: var(--r-pill);
    background: var(--biz); color: #fff; white-space: nowrap;
}
.ab-btn--ghost {
    background: transparent; color: var(--ink);
    border: 1px solid var(--hairline);
}
/* Full-width strip across the base of the frame — anchors the layout and
   stops the page bottom reading as dead space. */
.ab-trust {
    display: flex; gap: clamp(8px, 1.6cqw, 22px);
    justify-content: space-between; flex-wrap: wrap;
    padding: clamp(7px, 1.3cqw, 16px) clamp(14px, 2.6cqw, 30px);
    border-top: 1px solid var(--hairline-soft);
    background: rgba(255, 255, 255, 0.6);
    position: relative; z-index: 2;
}
.ab-trust div { display: flex; flex-direction: column; gap: 1px; }
.ab-trust b {
    font-family: var(--font-display);
    font-size: clamp(11px, 1.8cqw, 22px); color: var(--brand); line-height: 1;
}
.ab-trust span {
    font-family: var(--font-ui);
    font-size: clamp(5.5px, 0.75cqw, 9px); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft);
}

/* ── ATTENDANT / CALL LOG ────────────────────────────────────────── */
.wb-split {
    max-width: var(--w-content); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center;
    padding: 0 20px 96px;
}
@media (max-width: 900px) { .wb-split { grid-template-columns: 1fr; gap: 40px; } }

.wb-h2 {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 900; line-height: 1.1; letter-spacing: -0.035em;
    color: var(--ink); margin-bottom: 18px;
}
.wb-p { font-size: var(--t-lead); color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; }

.wb-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.wb-list li {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: var(--t-body); color: var(--ink-soft); line-height: 1.5;
}
.wb-list .material-symbols-outlined {
    color: var(--life); font-size: 20px; flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}

/* The log is the artifact: real timestamps, mono type, no decoration. */
.log {
    background: var(--ink);
    border-radius: var(--r-box);
    padding: 26px 24px;
    box-shadow: var(--lift-2);
    font-family: var(--font-ui);
    overflow-x: auto;
}
.log-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding-bottom: 16px; margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.log-title {
    font-size: var(--t-micro); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
}
.log-live {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--t-micro); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: #7EC8A8;
}
.log-live i {
    width: 7px; height: 7px; border-radius: 50%;
    background: #7EC8A8; display: block;
    animation: log-pulse 2s ease-in-out infinite;
}
@keyframes log-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.log-row {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 14px; align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
}
.log-row:last-child { border-bottom: 0; }
.log-time { color: rgba(255, 255, 255, 0.45); white-space: nowrap; font-size: 11px; }
.log-what { color: rgba(255, 255, 255, 0.92); line-height: 1.4; }
.log-badge {
    font-size: 9.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
.log-badge--miss { background: rgba(185, 28, 28, 0.22); color: #FCA5A5; }
.log-badge--won  { background: rgba(22, 101, 52, 0.30); color: #86EFAC; }

.log-foot {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 11px; color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
}

/* ── BUILD FEE ───────────────────────────────────────────────────────
   The one-time cost, scaled by page count. Deliberately quieter than the
   monthly tiers below — this is the door charge, not the relationship. */
.build {
    max-width: var(--w-content); margin: 0 auto;
    padding: 0 20px 20px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 820px) { .build { grid-template-columns: 1fr; max-width: 460px; } }

.build-card {
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: var(--r-box);
    padding: 28px 26px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color var(--base), transform var(--slow) var(--ease);
}
.build-card:hover { border-color: rgba(202, 138, 4, 0.4); transform: translateY(-3px); }

.build-pages {
    font-family: var(--font-ui);
    font-size: var(--t-micro); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--ink-soft);
}
.build-fee {
    font-family: var(--font-display);
    font-size: 42px; font-weight: 900; line-height: 1;
    color: var(--ink); letter-spacing: -0.03em;
}
.build-fee small {
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 500; color: var(--ink-soft);
    letter-spacing: 0; margin-left: 6px;
}
.build-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ── Price, above the fold ───────────────────────────────────────────
   A page headlined "no discovery call to find out the price" that makes you
   scroll to find the price is arguing against itself. These are the same
   three numbers as the sections below, stated before anything else. */
.flash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2px;
    margin: 30px 0 26px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-box);
    overflow: hidden;
}
.flash-i {
    background: var(--surface-soft);
    padding: 20px 22px 22px;
    display: flex; flex-direction: column; gap: 5px;
}
.flash-i--offer { background: color-mix(in srgb, var(--gold, #C89211) 9%, var(--surface-soft)); }

.flash-k {
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--ink-soft);
}
.flash-v {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.4vw, 40px); font-weight: 900;
    line-height: 1; letter-spacing: -0.035em;
    color: var(--ink);
}
.flash-v s {
    font-size: 0.55em; font-weight: 700;
    color: var(--stone, #8A8578);
    text-decoration-thickness: 2px;
    margin-right: 8px;
}
.flash-v em { font-style: normal; color: var(--ink-soft); font-weight: 600; }
.flash-s {
    font-size: 13px; line-height: 1.45;
    color: var(--ink-soft);
}

/* Reclaim the space the hero padding takes, so the numbers clear the fold on
   a laptop and a phone rather than only a laptop. */
.page-head--tight { padding-top: 118px; padding-bottom: 30px; }
/* One column below 700px. Two columns leaves each cell ~170px, and the price
   is 30px display type — it clipped. */
@media (max-width: 700px) {
    .flash { grid-template-columns: 1fr; margin: 22px 0 20px; }
    .flash-i { padding: 15px 18px 16px; }
    .flash-v { font-size: 34px; }
}

/* ── The August offer ────────────────────────────────────────────────
   A struck price only works if the higher number is the one actually
   charged the rest of the year. $1,197 is the standing rate; $598 is a
   dated promotion that has to genuinely end, or it stops being a
   promotion and starts being a fiction. */
.build-card--offer {
    border-color: rgba(202, 138, 4, 0.5);
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--gold, #C89211) 7%, var(--surface-soft)),
                var(--surface-soft) 62%);
    position: relative;
}

.special-tag {
    align-self: flex-start;
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--pitch, #16120E);
    background: var(--gold, #C89211);
    padding: 7px 14px;
    border-radius: var(--r-pill);
    margin-bottom: 4px;
}

.build-fee s {
    font-size: 26px; font-weight: 700;
    color: var(--stone, #8A8578);
    text-decoration-thickness: 2px;
    margin-right: 10px;
    letter-spacing: -0.02em;
}

.special-until {
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 600;
    color: var(--terra, #A8543A);
    letter-spacing: 0.04em;
}

.build-note {
    max-width: var(--w-content); margin: 0 auto;
    padding: 0 20px 90px;
    font-family: var(--font-ui);
    font-size: 12px; color: var(--ink-soft);
    text-align: center; line-height: 1.6;
}

/* ── TIERS ───────────────────────────────────────────────────────── */
.wb-tiers {
    max-width: var(--w-content); margin: 0 auto;
    padding: 0 20px 40px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    align-items: stretch;
}
@media (max-width: 900px) { .wb-tiers { grid-template-columns: 1fr; max-width: 460px; } }

.tier {
    background: var(--surface);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 36px 30px 32px;
    display: flex; flex-direction: column;
    box-shadow: var(--lift-1);
    transition: transform var(--slow) var(--ease), box-shadow var(--slow);
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--lift-2); }

.tier--featured {
    border-color: rgba(202, 138, 4, 0.42);
    box-shadow: 0 18px 50px rgba(202, 138, 4, 0.14);
    position: relative;
}
.tier--featured::after {
    content: 'Most chosen';
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-ui);
    font-size: 9.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    background: var(--brand); color: #fff;
    padding: 5px 14px; border-radius: var(--r-pill);
    white-space: nowrap;
}

.tier-name {
    font-family: var(--font-ui);
    font-size: var(--t-micro); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--ink-soft); margin-bottom: 18px;
}

/* The change allowance is the number that differentiates the tiers, so it is
   the number that gets the display face — not the price. */
.tier-changes {
    font-family: var(--font-display);
    font-size: 56px; font-weight: 900; line-height: 0.95;
    color: var(--brand); letter-spacing: -0.03em;
}
.tier-changes small { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.tier-changes-lbl {
    font-size: 14px; color: var(--ink-soft);
    font-weight: 600; margin: 8px 0 22px; line-height: 1.4;
}

.tier-price {
    display: flex; align-items: baseline; gap: 5px;
    padding-top: 20px; border-top: 1px solid var(--hairline);
}
.tier-price b { font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.tier-price span { font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); }

.tier-feats { list-style: none; margin: 22px 0 28px; display: flex; flex-direction: column; gap: 11px; }
.tier-feats li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 14.5px; color: var(--ink-soft); line-height: 1.45;
}
.tier-feats .material-symbols-outlined {
    font-size: 18px; color: var(--life); flex-shrink: 0; margin-top: 1px;
    font-variation-settings: 'FILL' 1;
}

.tier-cta {
    margin-top: auto; text-align: center;
    padding: 15px 24px; border-radius: var(--r-pill);
    font-weight: 700; font-size: 15px; text-decoration: none;
    background: transparent; color: var(--ink);
    border: 1.5px solid var(--hairline);
    transition: var(--base);
}
.tier-cta:hover { border-color: var(--biz); color: var(--biz); }
.tier--featured .tier-cta {
    background: var(--biz); color: #fff; border-color: var(--biz);
    box-shadow: 0 10px 24px rgba(var(--biz-glow), 0.22);
}
.tier--featured .tier-cta:hover {
    background: var(--biz-hover); color: #fff;
    transform: translateY(-2px);
}

.wb-note {
    text-align: center;
    font-family: var(--font-ui);
    font-size: 12px; color: var(--ink-soft);
    max-width: 620px; margin: 0 auto 96px; line-height: 1.6;
    padding: 0 20px;
}