/* The public pages (front page, guides, for carriers, find a carrier) and CWR Micro's drawn pictures. Loaded after
   office.css and built from its colours, so light and dark mode carry through. The header, heroes, closing band and
   footer are navy in both modes, like the office side menu. Anything dark-only goes under :root[data-theme="dark"]. */

:root {
    /* Light shadows tinted with the navy; in dark mode they turn black. */
    --shadow-rgb: 3 21 47;
    /* Behind the Clear Waste Route logo, white in both themes: its lettering is dark. */
    --logo-tile: #ffffff;
    /* The glow and dot grid on the navy heroes, the same in both modes. */
    --hero-glow: rgb(76 192 143 / 26%);
    --hero-dot: rgb(255 255 255 / 7%);
    --nav-raised: rgb(255 255 255 / 5%);
    --star-on-nav: #f2c14e;
    /* The drawn phone around the app's screens. */
    --device-edge: #3b4e6b;
    --device-screen: #ffffff;
    /* The space at each side of the page, smaller on a phone. */
    --gutter: 24px;
    /* The sticky header's height, so links to a part of the page and the phone menu clear it. */
    --header-height: 72px;
}

@media screen {
    :root[data-theme="dark"] {
        --shadow-rgb: 0 0 0;
        --device-edge: #4a5d7a;
    }
}

.site-icon { flex: none; }

/* ---- Drawn pictures ---- */
/* Drawn in the text colour, so they are dark on light pages and light in dark mode with no rule of their own. */
.illustration { --ill-ink: var(--ink); display: block; width: 100%; max-width: 240px; height: auto; }
.ill-glow { fill: var(--green-soft); }
.ill-ink { fill: var(--ill-ink); stroke: var(--ill-ink); }
.ill-stroke { stroke: var(--ill-ink); }
.ill-paper { fill: var(--surface); }
.ill-accent { fill: var(--green); }
.ill-on-accent { stroke: var(--on-accent); }
.ill-sky { fill: var(--blue-soft); }
.ill-warm { fill: var(--amber-soft); }
.ill-line { stroke: var(--line); fill: none; }
.ill-line-fill { fill: var(--line); }
.side-illustration { flex: none; max-width: 200px; padding: 16px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }

/* ---- Page frame ---- */
.site-bar, .hero-inner, .site-footer-inner, .site-footer-base, .site-section, .site-band, .trust-list {
    max-width: 1160px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.site-main:focus { outline: none; }
/* The header stays at the top, so a link to a part of the page stops below it, and the skip link shows above it. */
html:has(.site-header) { scroll-padding-top: calc(var(--header-height) + 16px); }
.skip-link:focus { z-index: 30; }
.site-band .test-server-band { margin: 16px 0 0; }
.site-main h1, .site-main h2, .site-main h3 { text-wrap: balance; }

/* ---- Header ---- */
.site-header, .hero, .find-hero, .site-footer, .callout-band { background: var(--nav); color: var(--on-nav); }
.site-header :focus-visible, .hero :focus-visible, .find-hero :focus-visible, .site-footer :focus-visible, .callout-band :focus-visible { outline-color: var(--on-nav); }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--nav-line); }
.site-bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; min-height: var(--header-height); padding-top: 8px; padding-bottom: 8px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--on-nav); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none; }
.site-brand:hover { color: var(--on-nav); }
.site-logo { flex: none; width: 36px; height: 36px; padding: 3px; border-radius: 9px; background: var(--paper); }
.site-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.site-by { font-size: 0.75rem; font-weight: 400; letter-spacing: 0; color: var(--nav-muted); }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-items: center; }
.site-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--nav-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.site-nav-link:hover { background: var(--nav-hover); color: var(--on-nav); }
.site-nav-group { display: flex; flex-direction: column; }
.site-nav-items { display: flex; flex-wrap: wrap; gap: 4px; }
.site-nav-group + .site-nav-group { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--nav-line); }
.site-nav-label { padding: 2px 12px 0; color: var(--nav-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; }
.site-nav-button { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; padding: 0 18px; border-radius: 10px; background: var(--paper); color: var(--paper-ink); font-weight: 700; font-size: 0.9375rem; text-decoration: none; }
.site-nav-button:hover { background: var(--paper-hover); color: var(--paper-ink); }

/* On a phone the links fold into a menu under a Menu button. */
.site-menu { display: none; }
.site-menu-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--nav-line); border-radius: 10px; color: var(--on-nav); font-weight: 600; cursor: pointer; list-style: none; }
.site-menu-button::-webkit-details-marker { display: none; }
.site-menu-button::after { content: ""; width: 8px; height: 8px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.site-menu[open] .site-menu-button::after { transform: translateY(2px) rotate(225deg); }
.site-menu-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 20px; background: var(--nav); border-bottom: 1px solid var(--nav-line); box-shadow: 0 24px 40px -16px rgb(0 0 0 / 50%); }
.site-menu-panel .site-nav-link { min-height: 48px; font-size: 1.0625rem; }
.site-menu-panel .site-nav-items { flex-direction: column; gap: 2px; }
.site-menu-panel .site-nav-group + .site-nav-group { margin: 8px 0 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--nav-line); }
.site-menu-panel .site-nav-label { padding: 8px 12px 4px; font-size: 0.75rem; }
.site-menu-panel .site-nav-button { justify-content: center; margin: 10px 0 0; min-height: 48px; }

/* ---- Heroes ---- */
.hero, .find-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--nav-line); }
.hero { padding: 64px 0 72px; }
.hero::before, .find-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(640px 420px at 82% 45%, var(--hero-glow), transparent 70%),
                radial-gradient(var(--hero-dot) 1px, transparent 1px) 0 0 / 22px 22px; }
.hero-inner { position: relative; display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; }
.hero-text { flex: 1 1 480px; min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; border: 1px solid var(--nav-line); border-radius: 999px; background: var(--nav-raised); color: var(--nav-accent); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.35; }
.eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--nav-accent); }
.hero h1 { margin: 0 0 20px; font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; }
.hero-accent { color: var(--nav-accent); }
.hero-lead { margin: 0 0 30px; font-size: 1.1875rem; line-height: 1.6; color: var(--nav-ink); max-width: 36em; }
.hero-note { margin: 16px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--nav-muted); max-width: 60em; }
.store-lead { margin: 24px 0 10px; font-size: 1.0625rem; font-weight: 700; }
.price-action .store-lead { margin-top: 0; }
.hero-customer-link { margin: 16px 0 0; font-size: 0.9375rem; color: var(--nav-ink); }
.hero-customer-link a { color: var(--on-nav); font-weight: 600; text-decoration: underline; }
.hero-ticks { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.9375rem; color: var(--nav-ink); }
.hero-ticks li { display: inline-flex; align-items: center; gap: 8px; }
.hero-ticks li::before { content: ""; flex: none; width: 10px; height: 5px; border-left: 2px solid var(--nav-accent); border-bottom: 2px solid var(--nav-accent); transform: translateY(-2px) rotate(-45deg); }
.hero-short { padding: 48px 0 64px; }
.hero-short h1 { font-size: clamp(2rem, 3.6vw, 2.875rem); }
.hero-home { padding: 64px 0 0; }
.hero-home .hero-text { padding-bottom: 64px; }

/* The picture on an inner page's hero sits on a raised panel, drawn in the hero's own light colours. */
.hero-picture { flex: 0 1 340px; min-width: 0; display: flex; justify-content: center; }
.hero-illustration { max-width: 340px; padding: 28px; border: 1px solid var(--nav-line); border-radius: 28px; background: var(--nav-raised); }
.hero .illustration, .find-hero .illustration { --ill-ink: var(--on-nav); }
.hero .ill-glow, .find-hero .ill-glow { fill: var(--nav-raised); }
.hero .ill-paper, .find-hero .ill-paper { fill: var(--nav-hover); }
.hero .ill-sky, .find-hero .ill-sky { fill: var(--nav-art); }
.hero .ill-accent, .find-hero .ill-accent { fill: var(--nav-accent); }
.hero .ill-on-accent, .find-hero .ill-on-accent { stroke: var(--nav); }
.hero .ill-line, .find-hero .ill-line { stroke: var(--nav-art); }
.hero .ill-line-fill, .find-hero .ill-line-fill { fill: var(--nav-art); }

/* ---- Store buttons ---- */
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-early { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 16px 0 0; }
.store-button { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; min-width: 176px; padding: 8px 20px 8px 16px; border: 1px solid var(--paper); border-radius: 12px; background: var(--paper); color: var(--paper-ink); font-weight: 700; font-size: 1.0625rem; line-height: 1.15; text-decoration: none; }
.store-button:hover { background: var(--paper-hover); color: var(--paper-ink); }
.store-text { display: flex; flex-direction: column; }
.store-small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.store-button-soon { border-color: var(--nav-line); background: var(--nav-raised); color: var(--on-nav); cursor: default; }
.store-button-soon .store-small { color: var(--nav-accent); opacity: 1; }
.store-button-soon:hover { background: var(--nav-raised); color: var(--on-nav); }
/* On a light card or page (not the dark hero band), the buttons take the page's own colours so they stay readable in both themes. */
.price-action .store-button, .narrow-section .store-button { border-color: var(--line); }
.price-action .store-button-soon, .price-action .store-button-soon:hover { background: var(--surface); color: var(--ink); }
.price-action .store-button-soon .store-small { color: var(--muted); }

/* ---- The app in a drawn phone ---- */
.device { position: relative; width: 270px; max-width: 100%; padding: 10px; border-radius: 44px; background: var(--phone-frame); box-shadow: inset 0 0 0 1.5px var(--device-edge), 0 40px 80px -28px rgb(var(--shadow-rgb) / 55%); }
.device picture { display: block; }
/* The screenshots start at the app's own header, so a white strip above them holds the drawn camera. */
.device img { display: block; width: 100%; height: auto; border-top: 30px solid var(--device-screen); border-radius: 34px; background: var(--device-screen); }
.device::before { content: ""; position: absolute; z-index: 1; top: 19px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: var(--phone-frame); }

.hero-phones { position: relative; flex: 1 1 420px; align-self: flex-end; min-width: 0; height: 710px; max-width: 520px; margin: 0 auto; }
.hero-phones .device { position: absolute; }
.hero-phones .device-front { left: 8%; top: 24px; z-index: 2; }
.hero-phones .device-back { right: 32px; top: 88px; transform: rotate(6deg); }
.hero-phones-single { height: 620px; flex-basis: 320px; }
.hero-phones-single .device-front { left: 50%; margin-left: -135px; }
.hero-with-phone { padding-bottom: 0; }
.hero-with-phone .hero-text { padding-bottom: 64px; }
.hero-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 8%), 0 18px 36px -14px rgb(var(--shadow-rgb) / 40%); font-weight: 700; font-size: 0.875rem; line-height: 1.3; }
.hero-chip > span:last-child { display: flex; flex-direction: column; }
.hero-chip-note { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.hero-chip-icon { width: 32px; height: 32px; border-radius: 9px; }
.hero-chip-signed { left: 0; top: 330px; }
.hero-chip-invoice { right: 0; top: 150px; }

/* ---- Trust strip ---- */
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-list { padding-top: 22px; padding-bottom: 22px; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.trust-list li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.trust-list strong { display: block; color: var(--ink); font-size: 0.9375rem; }
.trust-list a { color: inherit; }
.trust-icon { width: 44px; height: 44px; border-radius: 12px; }

/* ---- Sections ---- */
.site-section { padding-top: 80px; padding-bottom: 80px; }
.site-section-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-intro { margin-bottom: 8px; }
.section-intro-centre { text-align: center; }
.section-intro-centre .section-lead { margin-left: auto; margin-right: auto; }
.kicker { margin: 0 0 10px; color: var(--green-dark); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.section-heading { margin: 0 0 12px; font-size: clamp(1.625rem, 3vw, 2.375rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.section-lead { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--muted); max-width: 40em; }
.section-actions { margin: 32px 0 0; }
.section-actions-centre { text-align: center; }
.section-search { margin-top: 32px; max-width: 560px; }

.feature-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.feature-grid-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature { padding: 26px 22px; border-radius: 18px; }
.feature h3 { margin: 18px 0 8px; font-size: 1.125rem; line-height: 1.3; }
.feature p { margin: 0; color: var(--muted); line-height: 1.55; }
/* The green tile behind a line icon, in three sizes. */
.feature-icon, .trust-icon, .hero-chip-icon { flex: none; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.feature-icon { width: 48px; height: 48px; border-radius: 14px; }
.feature-picture { max-width: 132px; }
.feature .feature-picture + h3 { margin-top: 10px; }

/* A screenshot beside its words, swapping sides down the page. */
.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.showcase + .showcase { margin-top: 96px; }
.showcase-flip .showcase-picture { order: -1; }
.showcase-section { padding-top: 0; }
.showcase-text { min-width: 0; }
.showcase-picture { display: flex; justify-content: center; padding: 44px 16px; border-radius: 28px; background: linear-gradient(160deg, var(--green-soft), var(--blue-soft)); }
.showcase-picture .device { width: 250px; }

.check-list { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.check-list li { position: relative; padding-left: 34px; line-height: 1.55; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); }
.check-list li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 9px; height: 5px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg); }

/* ---- Numbered steps ---- */
.step-list { margin: 44px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.step { display: flex; flex-direction: column; gap: 14px; }
.step h3 { margin: 0 0 6px; font-size: 1.1875rem; line-height: 1.3; }
.step p { margin: 0; color: var(--muted); line-height: 1.55; }
.step .step-number { align-self: flex-start; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: var(--on-accent); font-weight: 800; }
.step-picture { max-width: none; padding: 16px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--canvas); }
/* Beside a picture, the steps run down a line with the number on the left. */
.step-list-compact { margin-top: 28px; grid-template-columns: minmax(0, 1fr); gap: 0; }
.step-list-compact .step { flex-direction: row; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.step-list-compact .step:last-child { border-bottom: 0; }
.step-list-compact .step .step-number { flex: none; border-radius: 12px; }
.step-list-compact .step-text { min-width: 0; }
.step-list-compact h3 { font-size: 1.0625rem; }

/* ---- Bands ---- */
.book-band { background: var(--green-soft); }
.book-band .section-lead { color: var(--ink); }
.book-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 32px 48px; align-items: center; }
.book-illustration { justify-self: center; max-width: 260px; }

.callout-band { position: relative; overflow: hidden; }
.callout-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 320px at 90% 100%, var(--hero-glow), transparent 70%); }
.owners { position: relative; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; padding-top: 72px; padding-bottom: 72px; }
.owners > div:first-child { flex: 1 1 480px; min-width: 0; }
.callout-band .section-lead { color: var(--nav-ink); }
.owners-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-paper { border-color: var(--paper); background: var(--paper); color: var(--paper-ink); }
.btn-paper:hover { background: var(--paper-hover); color: var(--paper-ink); }
.btn-on-nav { border-color: var(--nav-line); background: var(--nav-raised); color: var(--on-nav); }
.btn-on-nav:hover { background: var(--nav-hover); color: var(--on-nav); }
.site-main .btn-large { min-height: 52px; padding: 0 24px; border-radius: 12px; font-weight: 700; }

/* ---- For carriers ---- */
#price { padding-top: 64px; padding-bottom: 0; }
.price-card { position: relative; overflow: hidden; padding: 40px; border-radius: 24px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; box-shadow: 0 24px 48px -32px rgb(var(--shadow-rgb) / 35%); }
.price-text { flex: 1 1 100%; min-width: 0; }
.price-amount { font-size: 2.5rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--green-dark); }
.site-plan-cards, .plan-sizes, .price-foot { flex: 1 1 100%; }
.site-plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.site-plan-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.site-plan-card-pro { border: 2px solid var(--green); }
.site-plan-card-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.site-plan-card h3 { margin: 0; font-size: 1.375rem; }
.plan-badge { padding: 4px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 0.8125rem; font-weight: 700; }
.plan-price { margin: 14px 0 4px; }
.plan-sub { margin: 2px 0 0; color: var(--muted); font-size: 0.9375rem; }
.plan-lead { margin: 18px 0 0; font-weight: 700; }
.site-main .plan-ticks { margin: 14px 0 0; }
.site-main .plan-ticks li { font-size: 1rem; }
.plan-sizes summary { cursor: pointer; font-weight: 700; color: var(--green-dark); }
.plan-sizes .guide-table { margin-top: 12px; }
.price-foot { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.compare-price { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }

/* ---- Digital waste tracking (home and for carriers): no doubled gap after another section ---- */
.site-section + .dwt-section { padding-top: 0; }
.dwt-card { padding: 40px; border-radius: 24px; }
.dwt-card .section-lead + .section-lead { margin-top: 12px; }
.dwt-card .fine-print { margin-top: 20px; }
.price-card .fine-print { margin-top: 16px; }
.source-note { font-size: 0.875rem; color: var(--muted); }
.source-list { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.need-list { margin: 24px 0 0; display: grid; gap: 18px; }
.need-list dt { font-weight: 700; }
.need-list dd { margin: 4px 0 0; line-height: 1.55; }

/* ---- Footer ---- */
.site-footer { font-size: 0.9375rem; border-top: 1px solid var(--nav-line); }
.site-footer-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.7fr); gap: 32px 48px; padding-top: 56px; padding-bottom: 32px; }
.site-footer-about .site-company { margin-top: 14px; }
.site-company { margin: 0; color: var(--nav-ink); line-height: 1.5; }
.site-parent { color: var(--on-nav); }
.site-footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.site-footer-column { display: flex; flex-direction: column; min-width: 0; }
.site-footer-heading { margin: 0 0 6px; color: var(--on-nav); font-weight: 700; font-size: 0.875rem; }
.site-footer-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--nav-ink); text-decoration: none; }
.site-footer-links a:hover { color: var(--on-nav); text-decoration: underline; }
.site-footer-base { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--nav-line); font-size: 0.875rem; }
.site-footer-base .site-company { color: var(--nav-muted); }
.site-footer-base .theme-choice { margin: 0; }

/* ---- Find a carrier, town and carrier pages: navy like the other heroes, with the search on a card ---- */
.find-hero .site-section { position: relative; padding-top: 56px; padding-bottom: 64px; }
.find-hero .site-section > :not(.find-illustration) { max-width: 640px; }
.find-illustration { position: absolute; right: var(--gutter); top: 50%; max-width: 300px; transform: translateY(-50%); padding: 24px; border: 1px solid var(--nav-line); border-radius: 28px; background: var(--nav-raised); }
.find-hero h1 { margin: 0 0 14px; font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.find-hero .hero-lead { color: var(--nav-ink); margin-bottom: 24px; }
.find-hero .crumbs { color: var(--nav-muted); }
.find-hero .crumbs a, .find-hero .hero-lead a, .find-hero .carrier-rating a { color: var(--on-nav); }
.hero .hero-lead a { color: var(--on-nav); }
.dwt-cta { margin: 20px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.cwr-logo { width: 200px; height: auto; padding: 10px 14px; background: var(--logo-tile); border-radius: 12px; border: 1px solid var(--line); }
.find-hero .postcode-search { padding: 20px; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 48px -24px rgb(0 0 0 / 50%); }
.find-hero .postcode-search :focus-visible { outline-color: var(--focus); }
/* Stars on the navy: empty ones dim, filled ones the bright gold dark mode uses. */
.find-hero .star { fill: var(--nav-line); }
.find-hero .star-on { fill: var(--star-on-nav); }
.carrier-card { border-radius: 18px; padding: 22px 24px; }
.carrier-card:hover { border-color: var(--green); }
.carrier-details .card { border-radius: 18px; }
.trust-line { border-radius: 12px; }
/* The carrier page's trust line follows its reviews closely. */
#reviews + .site-section { padding-top: 0; }

/* ---- Breadcrumb ---- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 0.875rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 4px; }
.breadcrumb a { color: inherit; }
.hero .breadcrumb ol { color: var(--nav-muted); }
.hero .breadcrumb a { color: var(--nav-ink); }

/* ---- Guide text ---- */
.guide .site-section { padding-top: 48px; padding-bottom: 48px; }
.guide .site-section + .site-section:not(.warning-section, .warning-section + .site-section) { border-top: 1px solid var(--line); }
.guide p, .guide li { font-size: 1.0625rem; line-height: 1.65; }
.guide p { margin: 14px 0 0; max-width: 680px; }
.guide .tick-list { margin-top: 14px; }
.split-section { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; }
.split-section > div { flex: 1 1 420px; min-width: 0; }
.guide .warning-section { background: var(--amber-soft); padding-top: 40px; padding-bottom: 40px; }
.warning-section .section-heading { color: var(--amber-ink); }
.questions .tick-list { margin-top: 16px; }
/* A narrow section keeps the page's left edge and narrows its lines instead. */
.site-section.narrow-section { max-width: 1160px; }
.site-section.narrow-section > :not(.faq-list, .side-illustration) { max-width: 760px; }
.site-section.narrow-section > .faq-list { max-width: 860px; }
.site-section.narrow-section.split-section > div { max-width: 680px; }
/* On the public pages a list of points is ticked in green; warning signs get an amber mark instead. */
.site-main .tick-list { padding-left: 0; list-style: none; gap: 12px; }
.site-main .tick-list li { position: relative; padding-left: 32px; font-size: 1.0625rem; line-height: 1.6; }
.site-main .tick-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--green-soft); }
.site-main .tick-list li::after { content: ""; position: absolute; left: 6px; top: 9px; width: 8px; height: 4px; border-left: 2px solid var(--green-dark); border-bottom: 2px solid var(--green-dark); transform: rotate(-45deg); }
.site-main .warning-list li::before { background: var(--amber-ink); }
.site-main .warning-list li::after { content: none; }
.tinted-section { background: var(--green-soft); }
.site-section.tinted-section { padding-top: 56px; padding-bottom: 56px; }
/* With room around them, the green and amber boxes get rounded corners and a margin; narrower, they run edge to edge. */
@media (min-width: 1168px) {
    .site-section.tinted-section, .guide .warning-section { border-radius: 24px; margin-top: 24px; margin-bottom: 24px; }
    .guide .warning-section { border-left: 4px solid var(--amber-ink); }
}
.tinted-section .section-lead, .tinted-section .step p:not(.step-number) { color: var(--ink); }

/* ---- Questions and answers ---- */
.faq-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.faq { padding: 22px 24px; border-radius: 16px; }
.faq h3 { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.4; }
.faq p { margin: 0; color: var(--muted); line-height: 1.65; }
.faq-more { margin-top: 28px; }

/* ---- More guides ---- */
.guide-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.guide-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 18px; color: var(--ink); text-decoration: none; }
.guide-card:hover { border-color: var(--green); color: var(--ink); }
.guide-picture { max-width: none; margin-bottom: 6px; padding: 8px 20px; border-radius: 14px; background: var(--canvas); }
.guide-card-title { font-weight: 700; font-size: 1.0625rem; color: var(--green-dark); }
.guide-card-text { color: var(--muted); line-height: 1.5; }

/* ---- Privacy, account deletion and support, the same words as the API's pages ---- */
.notice-page { padding-top: 48px; }
.notice-page section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.notice-page section:last-child { border-bottom: 0; }
.notice-page h1 { margin: 0 0 12px; font-size: clamp(1.875rem, 3.4vw, 2.5rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.notice-page h2 { margin: 0 0 10px; font-size: 1.375rem; }
.notice-page h3 { margin: 16px 0 8px; font-size: 1.125rem; }
.notice-page p, .notice-page li { line-height: 1.65; max-width: 72ch; }
.notice-page .lede { font-size: 1.1875rem; }
.notice-page .updated { color: var(--muted); }

/* ---- The owner's listing page: the status card held its heading and lines too far apart ---- */
.listing-status { gap: 10px; }
.listing-status > * { margin: 0; }

/* The wide header has a label row over each group of links. */
@media (min-width: 1141px) {
    :root { --header-height: 80px; }
}

/* ---- Narrower screens ---- */
/* Brand, five links in two labelled groups and the sign-in button need about 1100px on one line, with room for bigger text. */
@media (max-width: 1140px) {
    .site-nav { display: none; }
    .site-menu { display: block; flex: none; }
    /* Only the brand and the Menu button are left, so they stay on one line and the header keeps its height. */
    .site-bar { flex-wrap: nowrap; }
    .site-brand { min-width: 0; }
}

@media (max-width: 1020px) {
    .feature-grid, .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .find-illustration { display: none; }
    .showcase, .book-inner { grid-template-columns: minmax(0, 1fr); }
    .showcase-flip .showcase-picture { order: 0; }
    .hero-home .hero-text, .hero-with-phone .hero-text { padding-bottom: 0; }
    .hero-phones { flex-basis: 100%; height: 700px; }
    .hero-phones-single { height: 620px; }
    .site-footer-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    :root { --gutter: 16px; --header-height: 64px; }
    .site-brand { font-size: 1.125rem; }
    .hero, .hero-short { padding: 32px 0 48px; }
    .hero-home, .hero-with-phone { padding-bottom: 0; }
    .hero-lead { font-size: 1.0625rem; }
    .hero-picture { display: none; }
    .site-section { padding-top: 56px; padding-bottom: 56px; }
    .showcase-section { padding-top: 0; }
    .showcase + .showcase { margin-top: 64px; }
    .feature-grid, .trust-list { grid-template-columns: minmax(0, 1fr); }
    .feature-grid { margin-top: 32px; gap: 12px; }
    .feature:has(> .feature-icon) { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 20px 18px; }
    .feature:has(> .feature-icon) > :not(.feature-icon) { grid-column: 2; }
    .feature .feature-icon { grid-row: 1 / span 2; }
    .feature:has(> .feature-icon) h3 { margin: 0; }
    .store-button { flex: 1 1 150px; min-width: 0; }
    .hero-phones { height: 580px; }
    .hero-phones .device { width: 200px; padding: 8px; border-radius: 34px; }
    .hero-phones .device img { border-radius: 27px; border-top-width: 24px; }
    .hero-phones .device::before { top: 14px; width: 56px; height: 16px; margin-left: -28px; }
    .hero-phones .device-front { left: 0; top: 64px; }
    .hero-phones .device-back { right: 30px; top: 112px; }
    .hero-phones-single { height: 480px; }
    .hero-phones-single .device-front { left: 50%; margin-left: -100px; top: 24px; }
    .hero-chip { padding: 8px 10px; font-size: 0.8125rem; }
    .hero-chip-note { display: none; }
    .hero-chip-signed { left: 0; top: 300px; }
    .hero-chip-invoice { right: 0; top: 8px; }
    .showcase-picture { padding: 32px 12px; }
    .showcase-picture .device { width: 220px; }
    .price-card, .dwt-card { padding: 24px 18px; }
    .site-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .side-illustration { max-width: 160px; }
    .find-hero .postcode-search { padding: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
    .guide-card { transition: border-color 0.15s, transform 0.15s; }
    .guide-card:hover { transform: translateY(-2px); }
    .hero-phones .device-front { animation: device-rise 0.7s ease-out both; }
    .hero-phones .device-back { animation: device-rise-tilted 0.8s 0.08s ease-out both; }
}
@keyframes device-rise { from { transform: translateY(16px); } to { transform: none; } }
@keyframes device-rise-tilted { from { transform: translateY(20px) rotate(6deg); } to { transform: rotate(6deg); } }

@media print {
    .illustration, .guide-links, .hero-phones, .showcase-picture, .site-menu, .callout-band { display: none; }
    .site-header { position: static; }
}

/* Waste guides under /guides */
.guide-table { margin-top: 18px; max-width: 680px; border: 1px solid var(--field-line); border-radius: 12px; background: var(--surface); }
.guide-table table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.guide-table th, .guide-table td { padding: 12px 14px; text-align: left; vertical-align: top; }
.guide-table thead th { background: var(--canvas); border-bottom: 1px solid var(--field-line); font-weight: 700; }
.guide-table tbody th { font-weight: 600; }
.guide-table tr + tr > * { border-top: 1px solid var(--line); }
.guide-table:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.compare-table { max-width: none; }
.compare-table thead th:not(:first-child), .compare-table td { width: 22%; }
.compare-table tbody + tbody > tr:first-child > * { border-top: 1px solid var(--field-line); }
.compare-table .compare-group th { background: var(--canvas); font-weight: 700; }
.compare-table .compare-yes { color: var(--green-dark); font-weight: 600; }
.compare-table .compare-no { color: var(--muted); }
@media (max-width: 600px) { .compare-table th, .compare-table td { padding: 10px 8px; font-size: 0.9375rem; } .compare-table thead th:not(:first-child), .compare-table td { width: 26%; } }
.guide ol.guide-steps { margin: 14px 0 0; padding-left: 1.4em; display: grid; gap: 8px; max-width: 680px; }
.guide .source-list { margin-top: 14px; }
.guide-closing { padding: 20px 24px; border-radius: 18px; border-left: 4px solid var(--green); background: var(--green-soft); color: var(--ink); font-weight: 600; }