/*
 * 2026-11-10 (second pass, the redesign): the public sales pages, rebuilt on
 * one light system after the owner saw the OneClick sales site. Every page in
 * scope wraps its content in .zp-page and uses only these classes.
 *
 * The brief, in ten lines:
 *  1. One idea per screen. A light page, white and a soft blue gray, no dark bands.
 *  2. Type: the site's self hosted Inter only (no font server), heavy and tight
 *     for headlines, 18px body. 40px headline on a phone, 64px on a desktop.
 *  3. One accent, the ZOOGABOOG! blue. Ink for words, a soft gray for the quiet ones.
 *  4. Buttons are pills. One primary per screen, never more than two side by side.
 *  5. First screen: a short line above, the headline, one line, the price, one
 *     pill, then a real product screen in a phone frame.
 *  6. Proof: three or four blocks, a real picture plus one line each.
 *  7. How it works: numbered steps, big numbers, one line each.
 *  8. Pricing: matching cards, the details behind a tap.
 *  9. One quiet trust line, then the footer.
 * 10. Doc shows up once per page, as a sticker by the phone. Fun, never loud.
 *
 * Phone first: every rule is written for 390px, then widened at 900px.
 * White words on colored backgrounds; every tap target is at least 44px.
 */

.zp-page {
    --zp-blue: var(--zoogaboog-blue, #01aade);
    --zp-blue-ink: #0079a6;
    /* 2026-11-10 (review pass): white words sit on this darker blue, 4.9 to 1.
       The bright brand blue under white words was 2.7 to 1. */
    --zp-fill: #0079a6;
    --zp-fill-hover: #00658b;
    /* Big headline words in blue: 3.3 to 1 on white, enough for large type. */
    --zp-blue-big: #0099c9;
    --zp-blue-soft: #e8f7fc;
    --zp-ink: #0f172a;
    --zp-ink-2: #334155;
    --zp-muted: #5b6b80;
    --zp-line: #e3eaf0;
    --zp-soft: #f4f8fb;
    --zp-radius: 22px;
    --zp-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.07);
    --zp-gutter: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--zp-ink);
    background: #ffffff;
    font-size: 1.125rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.zp-page *, .zp-page *::before, .zp-page *::after { box-sizing: border-box; }
.zp-page img { max-width: 100%; height: auto; }
.zp-page a { color: var(--zp-blue-ink); }
.zp-page h1, .zp-page h2, .zp-page h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--zp-ink);
    margin: 0;
}

.zp-wrap {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--zp-gutter);
}
.zp-narrow { max-width: 760px; }

/* ---- The top of the page on these pages: no banner, a slim bar --------- */

body:has(.zp-page) { padding-top: 64px !important; background: #ffffff; }
body:has(.zp-page) .public-top-bar { display: none !important; }
body:has(.zp-page) .public-navbar-logged-out {
    top: 0 !important;
    height: 64px !important;
    box-shadow: none !important;
    border-bottom: 1px solid #edf1f5;
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    backdrop-filter: saturate(1.6) blur(10px);
}
body:has(.zp-page) .public-navbar-logged-out .public-brand-logo { height: 30px !important; }
body:has(.zp-page) .public-mobile-menu-toggle {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--zoogaboog-blue-soft, #eef8fc) !important;
    color: #0f172a !important;
}
body:has(.zp-page) .public-navbar-logged-out .public-nav-link { font-weight: 600; color: #0f172a; }
body:has(.zp-page) .public-navbar-logged-out .public-auth-actions .public-btn-sign-in,
body:has(.zp-page) .public-navbar-logged-out .public-auth-actions .public-btn-get-started {
    border-radius: 999px !important;
    text-transform: none;
}
body:has(.zp-page) .public-navbar-logged-out .public-auth-actions .public-btn-sign-in { border: 0 !important; background: transparent !important; color: #0f172a !important; }
body:has(.zp-page) .public-navbar-logged-out .public-auth-actions .public-btn-sign-in:hover { color: var(--zoogaboog-blue, #01aade) !important; box-shadow: none !important; transform: none !important; }
body:has(.zp-page) .public-navbar-logged-out .public-auth-actions .public-btn-get-started { box-shadow: none !important; }

/* ---- Sections ----------------------------------------------------------- */

.zp-section { padding: 56px 0; }
.zp-section--soft { background: var(--zp-soft); }
.zp-section--tight { padding: 48px 0; }
.zp-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.zp-kicker {
    display: block;
    color: var(--zp-blue-ink);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    margin: 0 0 12px;
}
.zp-h2 {
    font-size: 2rem !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em;
}
.zp-sub { color: var(--zp-muted); font-size: 1.125rem; line-height: 1.5; margin: 14px auto 0; }

/* ---- The first screen --------------------------------------------------- */

.zp-hero { padding: 36px 0 56px; text-align: center; position: relative; }
.zp-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 560px;
    background: radial-gradient(70% 60% at 50% 0%, rgba(1, 170, 222, 0.10), rgba(1, 170, 222, 0) 70%);
    pointer-events: none;
}
.zp-hero > * { position: relative; }
.zp-hero-grid { display: grid; gap: 40px; align-items: center; }
.zp-hero-copy { max-width: 640px; margin: 0 auto; }
.zp-h1, .zp-hero h1 {
    font-size: 2.55rem !important;
    font-weight: 850 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em;
    color: var(--zp-ink) !important;
    text-align: inherit !important;
}
.zp-h1 .zp-mark, .zp-h2 .zp-mark, .zp-hero h1 .zb-hero-accent, .zp-hero h1 .zp-mark {
    color: var(--zp-blue-big);
    background: linear-gradient(transparent 78%, rgba(1, 170, 222, 0.18) 78%);
    padding: 0 0.04em;
}
.zp-lede {
    font-size: 1.2rem;
    line-height: 1.45;
    color: var(--zp-ink-2);
    font-weight: 500;
    margin: 18px auto 0;
    max-width: 34ch;
}

/* The price, said once, quietly, right above the button. */
.zp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 0.35rem;
    margin: 22px 0 14px;
    color: var(--zp-muted);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    background: none;
    padding: 0;
}
.zp-price strong { color: var(--zp-ink); font-weight: 850; font-size: 1.3rem; letter-spacing: -0.02em; }

/* Pills. */
.zp-tap, .zp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--zp-fill);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 1.125rem;
    line-height: 1.1;
    text-decoration: none !important;
    border: 0;
    box-shadow: 0 10px 24px rgba(0, 121, 166, 0.26);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    cursor: pointer;
}
.zp-tap { width: 100%; max-width: 360px; }
.zp-tap:hover, .zp-tap:focus-visible, .zp-pill:hover, .zp-pill:focus-visible {
    background: var(--zp-fill-hover);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 121, 166, 0.32);
}
.zp-pill--ghost {
    background: #ffffff;
    color: var(--zp-ink) !important;
    box-shadow: inset 0 0 0 1.5px var(--zp-line);
}
.zp-pill--ghost:hover, .zp-pill--ghost:focus-visible {
    background: #ffffff;
    color: var(--zp-blue-ink) !important;
    box-shadow: inset 0 0 0 1.5px var(--zp-blue);
}
.zp-pill--sm { min-height: 46px; padding: 0 22px; font-size: 1rem; box-shadow: none; }
.zp-pill--block { width: 100%; }
.zp-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
/* 2026-11-10, decision 153: the price lives in the headline now, so the first tap keeps the room the price line had. */
.zp-pills--first { margin-top: 26px; }
/* 2026-11-10, decision 153: the home headline is three lines, "Your whole", "back office.",
   then the price on a line of its own. The size follows the screen width so the price
   line never breaks on a phone. */
.zp-home .zp-hero h1 { font-size: min(2.55rem, 8.6vw) !important; }
.zp-home .zp-hero h1 .zb-hero-accent { display: inline-block; }
.zp-under-tap { margin: 12px 0 0; color: var(--zp-muted); font-size: 0.95rem; line-height: 1.45; }
.zp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    color: var(--zp-blue-ink) !important;
    font-weight: 750;
    text-decoration: none !important;
}
.zp-link:hover { text-decoration: underline !important; }
.zp-second-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; color: var(--zp-blue-ink); font-weight: 750; text-decoration: none; }

/* ---- The phone frame ---------------------------------------------------- */

.zp-stage { position: relative; display: flex; justify-content: center; }
.zp-phone {
    position: relative;
    width: 268px;
    margin: 0 auto;
    padding: 9px;
    border-radius: 46px;
    background: #0f172a;
    border: 1px solid #2b3445;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 30px 60px -12px rgba(15, 23, 42, 0.28), 0 18px 36px -18px rgba(1, 170, 222, 0.35);
}
.zp-phone::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 50%;
    width: 74px;
    height: 20px;
    margin-left: -37px;
    border-radius: 999px;
    background: #0f172a;
    z-index: 2;
}
.zp-phone img, .zp-phone video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 37px;
    background: #ffffff;
    padding-top: 30px;
}
.zp-phone--sm { width: 220px; border-radius: 40px; padding: 8px; }
.zp-phone--sm img { border-radius: 32px; padding-top: 26px; }
.zp-phone--sm::before { top: 15px; width: 60px; height: 17px; margin-left: -30px; }
.zp-phone--crop img { aspect-ratio: 390 / 600; object-fit: cover; object-position: top; }

/* Doc, the sticker beside the phone, and the one place he shows up on these
   pages: tap him and his chat opens. Decision 158 (2026-11-10): the
   floating corner Doc steps aside only while this sticker is in view
   (data-inline-doc, components/unified-chatbot), and below while the
   cookie bar shows, so he never covers it. */
.zp-doc {
    position: absolute;
    left: calc(50% - 196px);
    bottom: -18px;
    width: 112px;
    z-index: 3;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    font: inherit;
}
.zp-doc img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.18)); }
.zp-doc__say {
    margin-top: -6px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--zp-ink);
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 0 0 1.5px var(--zp-line), 0 6px 14px rgba(15, 23, 42, 0.10);
    white-space: nowrap;
}
.zp-doc:hover .zp-doc__say, .zp-doc:focus-visible .zp-doc__say { box-shadow: 0 0 0 2px var(--zp-blue), 0 6px 14px rgba(15, 23, 42, 0.10); }
.zp-doc:focus-visible { outline: 3px solid var(--zp-blue); outline-offset: 4px; border-radius: 16px; }
body:has(.zp-page):has(#zb-cookie-banner:not(.is-hidden)):not(.doc-sheet-open) .chatbot-container {
    visibility: hidden;
    pointer-events: none;
}

/* A wide screen in a plain window frame (desktop screenshots). */
.zp-window {
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    box-shadow: var(--zp-shadow);
}
.zp-window img { display: block; width: 100%; height: auto; }

/* ---- Proof blocks: a picture and one line ------------------------------ */

.zp-proofs { display: grid; gap: 16px; }
.zp-proof {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-radius);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
a.zp-proof:hover { transform: translateY(-2px); box-shadow: var(--zp-shadow); }
.zp-proof__pic {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--zp-blue-soft);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.zp-proof__pic > img { width: 100%; height: 100%; object-fit: cover; }
.zp-proof__pic--phone { padding-top: 22px; align-items: flex-start; }
.zp-proof__pic--phone > img {
    width: 62%;
    height: auto;
    object-fit: initial;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 0 0 6px #0f172a, 0 18px 40px rgba(15, 23, 42, 0.25);
    margin-bottom: -2px;
}
.zp-proof__pic--icon { align-items: center; color: var(--zp-blue); font-size: 3.4rem; }
.zp-proof__body { padding: 18px 20px 22px; }
.zp-proof__body h3 { font-size: 1.2rem !important; font-weight: 800 !important; letter-spacing: -0.02em; line-height: 1.2; }
.zp-proof__body p { margin: 6px 0 0; color: var(--zp-muted); font-size: 1rem; line-height: 1.45; }

/* ---- How it works: numbered steps --------------------------------------- */

.zp-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 14px; max-width: 980px; counter-reset: zp-step; }
.zp-steps > li {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    align-items: start;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-radius);
    counter-increment: zp-step;
}
.zp-steps > li::before {
    content: counter(zp-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--zp-fill);
    color: #ffffff;
    font-weight: 850;
    font-size: 1.4rem;
}
.zp-steps h3 { font-size: 1.2rem !important; font-weight: 800 !important; line-height: 1.25; letter-spacing: -0.02em; padding-top: 4px; }
.zp-steps p { margin: 4px 0 0; color: var(--zp-muted); font-size: 1rem; line-height: 1.45; }
.zp-steps .zp-acc { margin-top: 12px; }
.zp-step-shot { grid-column: 1 / -1; margin-top: 6px; }
.zp-step-shot picture, .zp-step-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--zp-line); }

/* ---- Pricing cards ------------------------------------------------------ */

.zp-plans { display: grid; gap: 16px; max-width: 1160px; margin: 0 auto; }
.zp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 22px 22px;
    background: #ffffff;
    border: 1.5px solid var(--zp-line);
    border-radius: var(--zp-radius);
    text-align: left;
}
.zp-plan--pop { border-color: var(--zp-blue); box-shadow: 0 18px 44px -12px rgba(1, 170, 222, 0.35); }
.zp-plan__flag {
    position: absolute;
    top: -13px;
    left: 22px;
    background: var(--zp-fill);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 999px;
}
.zp-plan__name { font-size: 1.25rem !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.zp-plan__price { margin: 8px 0 0; font-size: 2.6rem; font-weight: 850; letter-spacing: -0.045em; line-height: 1; color: var(--zp-ink); }
.zp-plan__price small { font-size: 1rem; font-weight: 600; color: var(--zp-muted); letter-spacing: 0; }
.zp-plan__line { margin: 12px 0 0; color: var(--zp-ink-2); font-size: 1rem; line-height: 1.45; flex: 1 1 auto; }
.zp-plan .zp-acc { margin: 14px 0 0; border-radius: 14px; }
.zp-plan .zp-pill { margin-top: 18px; width: 100%; }
.zp-plan__list { list-style: none; margin: 0; padding: 0; }
.zp-plan__list li { position: relative; padding: 6px 0 6px 26px; font-size: 0.98rem; line-height: 1.4; color: var(--zp-ink-2); border-top: 1px solid #f0f4f7; }
.zp-plan__list li:first-child { border-top: 0; }
.zp-plan__list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 12px;
    width: 12px;
    height: 7px;
    border-left: 2.5px solid var(--zp-blue);
    border-bottom: 2.5px solid var(--zp-blue);
    transform: rotate(-45deg);
}
.zp-plan__under { margin: 10px 0 0; font-size: 0.95rem; color: var(--zp-muted); }
.zp-plans-foot { text-align: center; margin: 22px auto 0; color: var(--zp-muted); font-size: 1rem; max-width: 640px; }

/* A simple price list (trade pages). */
.zp-list {
    list-style: none;
    margin: 0 auto;
    padding: 6px 22px;
    max-width: 760px;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-radius);
}
.zp-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #eef2f6;
    font-size: 1.02rem;
    line-height: 1.4;
}
.zp-list li:first-child { border-top: 0; }
.zp-list li > span:first-child { color: var(--zp-ink-2); }
.zp-list li > span:first-child small { display: block; color: var(--zp-muted); font-size: 0.9rem; margin-top: 2px; }
.zp-list li > span:last-child { font-weight: 800; white-space: nowrap; color: var(--zp-ink); }

/* ---- Details behind a tap ----------------------------------------------- */

.zp-more__list, .zp-accs { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.zp-acc {
    background: #ffffff;
    border: 1px solid var(--zp-line);
    border-radius: 16px;
    overflow: hidden;
}
.zp-acc > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    padding: 14px 18px;
    font-weight: 750;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--zp-ink);
}
.zp-acc > summary::-webkit-details-marker { display: none; }
.zp-acc > summary::after {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--zp-blue);
    border-bottom: 2.5px solid var(--zp-blue);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.18s ease;
}
.zp-acc[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.zp-acc > summary:focus-visible { outline: 3px solid var(--zp-blue); outline-offset: -3px; border-radius: 16px; }
.zp-acc__h { font-size: inherit !important; font-weight: inherit !important; line-height: inherit; display: inline; }
.zp-acc__body { padding: 0 18px 18px; color: var(--zp-ink-2); font-size: 1rem; line-height: 1.6; }
.zp-acc__body p { margin: 0 0 10px; }
.zp-acc__body p:last-child { margin-bottom: 0; }
.zp-acc__body ul { margin: 0 0 10px; padding-left: 1.1rem; }
.zp-acc__body li { margin: 4px 0; }
.zp-acc--quiet { background: transparent; border: 0; }
.zp-acc--quiet > summary { justify-content: center; min-height: 44px; padding: 8px 0; font-size: 1rem; color: var(--zp-blue-ink); }

/* ---- One quiet trust line ----------------------------------------------- */

.zp-trust {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.zp-trust__stars { color: #f5a623; letter-spacing: 3px; font-size: 1.15rem; }
.zp-trust blockquote { margin: 10px 0 0; font-size: 1.2rem; line-height: 1.45; font-weight: 600; color: var(--zp-ink); letter-spacing: -0.01em; }
.zp-trust figcaption { margin-top: 12px; color: var(--zp-muted); font-size: 0.98rem; }
.zp-trust figcaption a { font-weight: 700; }
.zp-trust-line { text-align: center; color: var(--zp-muted); font-size: 1rem; margin: 0 auto; max-width: 640px; }

/* ---- The closing ask ---------------------------------------------------- */

.zp-close { text-align: center; padding: 56px var(--zp-gutter) 64px; }
.zp-close h2 { font-size: 2rem !important; font-weight: 850 !important; letter-spacing: -0.035em; line-height: 1.08; max-width: 18ch; margin: 0 auto !important; }
.zp-close .zp-price { margin-top: 16px; }

/* ---- Small chips (aisles, other shops) ---------------------------------- */

.zp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.zp-chips a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    color: var(--zp-ink) !important;
    font-weight: 650;
    font-size: 0.98rem;
    text-decoration: none !important;
}
.zp-chips a:hover { border-color: var(--zp-blue); color: var(--zp-blue-ink) !important; }
.zp-chips i { color: var(--zp-blue); }

/* ---- Two offer cards side by side (AI builds, the free rebuild) --------- */

.zp-offers { display: grid; gap: 16px; max-width: 1000px; margin: 0 auto; }
.zp-offer {
    display: flex;
    flex-direction: column;
    padding: 26px 22px 22px;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-radius);
}
.zp-offer .zp-kicker { margin-bottom: 8px; }
.zp-offer h3 { font-size: 1.45rem !important; font-weight: 850 !important; letter-spacing: -0.03em; line-height: 1.12; }
.zp-offer > p { color: var(--zp-ink-2); font-size: 1.02rem; margin: 10px 0 0; flex: 1 1 auto; }
.zp-offer .zp-pills { justify-content: flex-start; margin-top: 18px; }
.zp-offer .zp-acc { margin-top: 14px; }

/* ---- Contact methods --------------------------------------------------- */

.zp-ways { display: grid; gap: 12px; max-width: 980px; margin: 0 auto; }
.zp-way {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    border-radius: 18px;
    text-decoration: none !important;
    color: inherit !important;
    min-height: 72px;
}
a.zp-way:hover { border-color: var(--zp-blue); }
.zp-way__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--zp-fill);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.zp-way b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--zp-ink); }
.zp-way > div > span { display: block; color: var(--zp-muted); font-size: 0.95rem; }

/* ---- Notices ------------------------------------------------------------ */

.zp-notice {
    max-width: 640px;
    margin: 18px auto 0;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--zp-blue-soft);
    color: var(--zp-ink);
    font-weight: 600;
    font-size: 1rem;
}

/* ---- Video in a soft frame ---------------------------------------------- */

.zp-video { max-width: 960px; margin: 0 auto; }

/* ---- Screen reader only ------------------------------------------------- */

.zp-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Wider screens ------------------------------------------------------ */

@media (min-width: 600px) {
    .zp-proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zp-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zp-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .zp-page { --zp-gutter: 32px; }
    body:has(.zp-page) { padding-top: 72px !important; }
    body:has(.zp-page) .public-navbar-logged-out { height: 72px !important; }
    body:has(.zp-page) .public-navbar-logged-out .public-brand-logo { height: 34px !important; }
    .zp-section { padding: 120px 0; }
    .zp-section--tight { padding: 72px 0; }
    .zp-head { margin-bottom: 56px; }
    .zp-h2 { font-size: 2.9rem !important; }
    .zp-sub { font-size: 1.25rem; }
    .zp-hero { padding: 40px 0 88px; text-align: left; }
    .zp-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; }
    .zp-hero-copy { margin: 0; }
    .zp-h1, .zp-hero h1 { font-size: 4.1rem !important; }
    .zp-home .zp-hero h1 { font-size: 3.55rem !important; }
    .zp-lede { font-size: 1.4rem; margin-left: 0; }
    .zp-hero .zp-price { justify-content: flex-start; }
    .zp-hero .zp-pills { justify-content: flex-start; }
    .zp-tap { width: auto; min-width: 280px; min-height: 60px; padding: 0 36px; }
    /* 250px keeps the whole phone above the fold on a 1280 by 800 screen. */
    .zp-phone { width: 250px; padding: 10px; border-radius: 46px; }
    .zp-phone img { border-radius: 37px; padding-top: 32px; }
    .zp-phone::before { top: 19px; width: 78px; height: 22px; margin-left: -39px; }
    .zp-doc { width: 150px; right: auto; left: calc(50% - 250px); bottom: -10px; }
    .zp-proofs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .zp-proofs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .zp-proofs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
    .zp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .zp-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zp-steps--1col { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
    .zp-steps > li { grid-template-columns: 1fr; padding: 28px; }
    .zp-steps--1col > li { grid-template-columns: 52px 1fr; }
    .zp-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .zp-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .zp-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
    .zp-close { padding: 120px 32px 128px; }
    .zp-close h2 { font-size: 3rem !important; }
    .zp-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
    .zp-trust blockquote { font-size: 1.45rem; }
}

@media (min-width: 900px) and (max-width: 1180px) {
    .zp-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}

@media (prefers-reduced-motion: reduce) {
    .zp-tap, .zp-pill, .zp-proof, .zp-acc > summary::after { transition: none; }
}

/* ---- What we do: the six blocks and the eight aisles -------------------- */

.zp-page .ps-do-grid, .zp-page .categories-grid { display: grid; gap: 14px; }
.zp-page .ps-do-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-radius);
}
.zp-page .ps-do-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--zp-fill);
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.zp-page .ps-do-card h3, .zp-page .category-showcase-card h3 { font-size: 1.2rem !important; font-weight: 800 !important; letter-spacing: -0.02em; line-height: 1.2; }
.zp-page .ps-do-card p { color: var(--zp-muted); font-size: 1rem; margin: 6px 0 14px; flex: 1 1 auto; }
.zp-page .ps-do-btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-weight: 750; color: var(--zp-blue-ink); text-decoration: none; }
.zp-page .ps-do-btn:hover { text-decoration: underline; }
.zp-page .category-showcase-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--zp-line);
    border-radius: 18px;
    color: inherit !important;
    text-decoration: none !important;
    min-height: 72px;
}
.zp-page .category-showcase-card:hover { border-color: var(--zp-blue); }
.zp-page .category-showcase-card .ps-do-icon { margin: 0; width: 44px; height: 44px; font-size: 1.15rem; }
.zp-page .category-showcase-card p { margin: 2px 0 0; color: var(--zp-muted); font-size: 0.95rem; line-height: 1.35; }
@media (min-width: 600px) {
    .zp-page .ps-do-grid, .zp-page .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .zp-page .ps-do-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .zp-page .ps-do-card { padding: 28px; }
    .zp-page .categories-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The plans page names its flag pl-v2-band; same look as the card flag. */
.zp-page .pl-v2-band {
    position: absolute;
    top: -13px;
    left: 22px;
    background: var(--zp-fill);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 999px;
}

/* Pages that keep an older button class for their tests get the pill look. */
.zp-page .bp-btn.bp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    width: 100%;
    max-width: 360px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--zp-fill);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 121, 166, 0.26);
}
.zp-page .bp-btn.bp-btn-primary:hover { background: var(--zp-fill-hover); color: #ffffff; }
.zp-page .in-need-price { display: block; margin-top: 10px !important; color: var(--zp-ink) !important; font-weight: 800; font-size: 1.15rem !important; }
.zp-page .in-need-price span { color: var(--zp-muted); font-weight: 600; font-size: 0.95rem; margin-right: 4px; }
@media (min-width: 900px) { .zp-page .bp-btn.bp-btn-primary { width: auto; min-width: 280px; min-height: 60px; } }

/* ---- 2026-11-10 (review pass) ------------------------------------------ */

/* Links typed with an inline brand blue inside answers read darker. */
.zp-page .zp-acc__body a[style] { color: var(--zp-blue-ink) !important; }
.zp-page .zg-win__alt, .zp-page .zg-win__note { color: var(--zp-muted); }

/* Trade pages: the extra block is one tap with short headed paragraphs. */
.zp-more__body .zp-more__h { font-size: 1rem !important; font-weight: 800 !important; margin: 14px 0 4px !important; color: var(--zp-ink); }
.zp-more__body .zp-more__h:first-child { margin-top: 0 !important; }

/* Trade pages: the free rebuild sits under the price list, same section. */
.zp-offer--rebuild { max-width: 760px; margin: 28px auto 0; }

/* The closing band can carry the quiet review under its button. */
.zp-close.zp-section--soft { background: var(--zp-soft); }
.zp-trust--quiet { margin-top: 40px; max-width: 560px; }
.zp-trust--quiet blockquote { font-size: 1.02rem !important; font-weight: 500; color: var(--zp-ink-2); }
.zp-trust--quiet figcaption { font-size: 0.92rem; }
.zp-trust__stars { color: #b26b00; }

/* ---- The compact footer (pages/partials/_zp-footer) -------------------- */

.zf {
    background: #f4f8fb;
    border-top: 1px solid #e3eaf0;
    color: #334155;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
}
.zf-wrap { max-width: 1160px; margin: 0 auto; padding: 36px 16px 28px; }
.zf a { color: #334155; text-decoration: none; }
.zf a:hover { color: #0079a6; text-decoration: underline; }
.zf-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-bottom: 20px; border-bottom: 1px solid #e3eaf0; }
.zf-logo { display: inline-flex; align-items: center; min-height: 44px; }
.zf-logo img { display: block; height: 26px; width: auto; }
.zf-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 0; color: #5b6b80; }
.zf-reach a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: #0f172a; }
.zf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 20px 0 6px; }
/* Phones: the two long lists run as wrapped rows across the full width. */
.zf-col--flow { grid-column: 1 / -1; }
.zf-col--flow ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.zf-h { margin: 0 0 4px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #0f172a; }
.zf-col ul { list-style: none; margin: 0; padding: 0; }
.zf-col li a { display: flex; align-items: center; min-height: 44px; }
.zf-legal { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid #e3eaf0; font-size: 0.85rem; }
.zf-legal a { display: inline-flex; align-items: center; min-height: 44px; color: #5b6b80; }
.zf-copy { margin: 6px 0 0; font-size: 0.85rem; color: #5b6b80; }
@media (min-width: 900px) {
    .zf-wrap { padding: 44px 32px 32px; }
    .zf-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
    .zf-col--flow { grid-column: auto; }
    .zf-col--flow ul { display: block; }
}

/* Buttons drawn by shared parts carry white words on the darker blue too. */
.zp-page .zg-flag-card__cta,
.zp-page #submitBtn,
.zp-page .zg-app-btn { background: var(--zp-fill) !important; border-color: var(--zp-fill) !important; color: #ffffff !important; }
.zp-page #submitBtn:hover, .zp-page .zg-app-btn:hover { background: var(--zp-fill-hover) !important; }

/* Price rows: the name and the price on one line, the note under both, so
   a phone gives the note the full width instead of a narrow column. */
.zp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 0; }
.zp-list li > span:first-child { display: contents; }
.zp-list li > span:first-child strong { grid-column: 1; grid-row: 1; color: var(--zp-ink); }
.zp-list li > span:last-child { grid-column: 2; grid-row: 1; }
.zp-list li > span:first-child small { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
.zp-page .zg-flagship__all { display: inline-flex; align-items: center; min-height: 44px; }

/* Phones: the small screen grabs under each step were too small to read and
   sliced text mid row, so the steps stand on their words there. */
@media (max-width: 599px) {
    .zp-step-shot { display: none; }
}

/* What we do: one plan card takes the full width instead of peeking. */
.zp-page .zg-flag-card:only-child { flex: 1 1 100%; max-width: 560px; margin: 0 auto; }
.zp-page .zg-flagship__head { text-align: center; }
.zp-page .zg-flagship__eyebrow { color: var(--zp-blue-ink); }

/* Phones: the six blocks sit icon beside words, and the eight aisles become
   short two column tiles, so the page is not a long stack of cards. */
@media (max-width: 599px) {
    .zp-page .ps-do-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
    .zp-page .ps-do-card .ps-do-icon { grid-row: 1 / span 3; width: 44px; height: 44px; font-size: 1.1rem; margin: 0; }
    .zp-page .ps-do-card p { margin: 4px 0 6px; }
    .zp-page .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .zp-page .category-showcase-card { padding: 10px 12px; gap: 10px; min-height: 64px; }
    .zp-page .category-showcase-card .ps-do-icon { width: 36px; height: 36px; font-size: 1rem; }
    .zp-page .category-showcase-card h3 { font-size: 0.98rem !important; }
    .zp-page .category-showcase-card p { display: none; }
}

/* Phones: no installer there, so the first screen drops the Windows line
   (the closing band still answers it once). */
@media (max-width: 767.98px) {
    .zp-hero .zg-win { display: none; }
}

/* A wide screen strip keeps its own shape inside a proof card. */
.zp-proof__pic--wide { aspect-ratio: auto; background: #ffffff; border-bottom: 1px solid var(--zp-line); }
.zp-proof__pic--wide > img { height: auto; object-fit: initial; }

/* ---- The cookie bar on these pages ------------------------------------- */
/* One slim line flush with the bottom edge, the full width: the sentence and
   Got it (the policy link joins it on wider screens). The corner Doc steps
   aside while it shows (see .zp-doc above) and the page gets room at its
   foot, so the bar never sits on the last button. Signed-in pages and every
   other public page keep the bar as cookie-banner.blade.php draws it. */
body:has(.zp-page) .zb-cookie-banner {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 0.9rem;
    justify-content: center;
    padding: 0.4rem 1rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    border: 0;
    border-top: 1px solid #e3eaf0;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
}
body:has(.zp-page):has(#zb-cookie-banner:not(.is-hidden)) { padding-bottom: 60px !important; }
body:has(.zp-page) .zb-cookie-banner__body { flex: 0 1 auto; font-size: 0.9rem; color: #0f172a; }
body:has(.zp-page) .zb-cookie-banner__link { color: #0079a6; min-height: 44px; display: inline-flex; align-items: center; }
body:has(.zp-page) .zb-cookie-banner .zb-cookie-banner__btn { min-height: 44px; padding: 0.4rem 1.2rem; border-radius: 999px; background: #0079a6; color: #ffffff; box-shadow: none; }
body:has(.zp-page) .zb-cookie-banner .zb-cookie-banner__btn:hover { background: #00658b; }
@media (max-width: 640px) {
    body:has(.zp-page) .zb-cookie-banner { justify-content: space-between; gap: 0.6rem; max-width: none; width: 100%; padding-left: 0.85rem; padding-right: 0.6rem; }
    body:has(.zp-page) .zb-cookie-banner__body { font-size: 0.8rem; }
    body:has(.zp-page) .zb-cookie-banner__link { display: none; }
    body:has(.zp-page) .zb-cookie-banner .zb-cookie-banner__btn { padding: 0.4rem 1rem; }
}