/* ProEstimate Solutions public site: the shared system (tokens, type, buttons, chrome, shared sections).
   Ported from docs/mockups/public-site/site.css; page files are public-home.css, public-product.css and
   public-pages.css. Public pages are static SSR (no circuit), so these rules style plain server HTML.

   Old-machine contract, kept by every file:
   - motion runs on transform and opacity. The exceptions are short and paint-only: SVG strokes that
     draw in once (stroke-dashoffset: the home datum chart, the four-color mark and the loop ring's
     arcs, and the company ring in pages.css), and colour fades (background, border, text, SVG fill
     and stroke) on hover and on state changes. Nothing animates a shadow, a filter, layout or size:
     the audit theater's bars and scan beam scale and translate;
   - no backdrop-filter, no blend modes;
   - every looping animation is gated on .is-inview (the audit theater's, on .is-playing) so it stops
     off-screen, and every demo plays once and then holds its finished frame;
   - html.ps-lite (weak hardware, Save-Data, or a slow first second) drops the ambient motion;
   - prefers-reduced-motion and Pause motion (html.ps-still) show finished frames. */

/* Layout: left-aligned 12-column grid at 1240px; e-coat (dark) and booth-light grounds alternate down each page. */
:root {
    /* Grounds: ProAudit's Audit Journal palette (src/ProEstimate.Web/wwwroot/css/proaudit-theme.css). */
    --espresso: #211C16;   /* --pa-sidebar: the app's chrome, the dark ground here */
    --espresso-2: #2B241D; /* raised surfaces on espresso */
    --espresso-3: #3A3129; /* hover on espresso */
    --hair-dk: rgba(246, 241, 234, 0.12);
    --cream: #F6F1EA;      /* text on espresso (--pa-sidebar-text-bright) */
    --cream-2: #C9BFB1;    /* secondary text on espresso (--pa-sidebar-text), 9.3:1 */
    --paper: #F6F1EA;      /* --pa-paper: the light ground */
    --card: #FFFAF3;       /* --pa-card: cards, documents, the second light ground */
    --card-tint: #FBF6EE;  /* --pa-card-tint */
    --ink: #191510;        /* --pa-ink */
    --muted: #706358;      /* --pa-muted: secondary text, 5.2:1 on paper */
    --faint: #786B5C;      /* --pa-faint: tertiary text, 4.6:1 on paper */
    --hair: #E3D8CB;       /* --pa-hair */
    --hair-strong: #D9CAB7;/* --pa-hair-strong */
    --row: #EDE3D6;        /* --pa-row-border */

    /* Brand. Orange is the company's primary, as in the app; teal, orange and lime still mark each service. */
    --orange: #DD9142;     /* --pa-orange: primary fill, and ProAudit */
    --orange-hover: #D0832F;
    --orange-fg: #16120E;  /* ink on an orange fill */
    --orange-ink: #925F2A; /* --pa-orange-deep: orange as text on light, 4.8:1 on paper */
    --orange-wash: #F8EBDA;
    --teal: #00A69C;       /* ProEstimate */
    --teal-ink: #006D67;   /* --pa-teal-deep */
    --teal-wash: #DCEFEA;
    --lime: #A4CD39;       /* ProRecovery; never text on light */
    --lime-ink: #4F6B12;
    --lime-wash: #EEF3D9;
    --red: #C81F31;        /* the mark's fourth color: the stripe, closed stamps */
    --red-on-dark: #F0606D;

    /* Semantic states, ProAudit's (deliberately not the brand hues). */
    --ok-bg: #E8F6EA; --ok-fg: #296A37; --ok-border: #46A359;
    --warn-bg: #F4F1DC; --warn-fg: #71640B; --warn-border: #AE9900;
    --bad-bg: #F8E9E6; --bad-fg: #963D30; --bad-border: #C0584A;
    --info-bg: #EEF2F8; --info-fg: #3D5A82; --info-border: #7A93B8;
    --adas-bg: #F0EAF4; --adas-fg: #5D4470; --adas-border: #8A6DA0;

    /* Type: the app's faces. */
    --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Source Serif 4', Georgia, serif;
    --num: 'Outfit', 'Figtree', sans-serif;

    /* Shape and depth, as in the app. */
    --radius: 10px;
    --radius-sm: 8px;
    --shadow-btn: 0 6px 14px rgba(139, 82, 28, 0.16);
    --shadow-card: 0 1px 2px rgba(25, 21, 16, 0.06), 0 10px 30px rgba(25, 21, 16, 0.08);
    /* ProAudit's hero and dialog-header ground: espresso, a faint orange glow, a hint of teal. */
    --hero-bg: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--orange) 11%, transparent), transparent 65%),
        linear-gradient(120deg, var(--espresso), color-mix(in srgb, var(--teal) 7%, var(--espresso)));
    --max: 1240px;
    --bar-h: 68px;
    --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bar-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--espresso);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--orange-wash); color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--focus, var(--orange));
    outline-offset: 3px;
    border-radius: 4px;
}

.skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--orange);
    color: var(--orange-fg);
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
}
.skip:focus { top: 12px; }

.wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
}

.num { font-variant-numeric: tabular-nums; }
.c-teal { color: var(--teal-ink); }
.c-orange { color: var(--orange-ink); }
.c-lime { color: var(--lime-ink); }
.c-red { color: var(--red); }

/* ─── Grounds ──────────────────────────────────────────────────────────────── */

.g-dark { background: var(--espresso); color: var(--cream); --focus: var(--orange); }
.g-dark .lead { color: var(--cream-2); }
.g-dark .h2 { color: var(--card); }
.g-booth { background: var(--paper); color: var(--ink); --focus: var(--ink); }
.g-paper { background: var(--card); color: var(--ink); --focus: var(--ink); }
.g-booth .lead, .g-paper .lead { color: var(--muted); }

/* Paper and card are close in tone, so where two light sections meet a hairline marks the edge. */
:is(.g-paper, .g-booth) + :is(.g-paper, .g-booth) { border-top: 1px solid var(--hair); }
.sec { padding-block: clamp(80px, 10vw, 136px); }
.sec--tight { padding-block: clamp(64px, 8vw, 104px); }

/* ─── Type ─────────────────────────────────────────────────────────────────── */

.h2 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(34px, 4.4vw, 60px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.h3 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.h4 {
    font-family: var(--display);
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.lead {
    margin: 0;
    max-width: 58ch;
    font-size: clamp(18px, 1.4vw, 20px);
    line-height: 1.55;
}

.sec-head { display: grid; gap: 20px; max-width: 820px; }
.sec-head--split {
    max-width: none;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    gap: 24px 64px;
}

.fine { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 80ch; }
.g-dark .fine { color: var(--cream-2); }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.18s var(--ease), background-color 0.18s, border-color 0.18s, color 0.18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 15px; }

.btn--primary { background: var(--orange); color: var(--orange-fg); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--orange-hover); }
.btn--ghost { border-color: rgba(246, 241, 234, 0.38); color: var(--cream); }
.btn--ghost:hover { border-color: var(--cream); }
.btn--ink { background: var(--espresso); color: var(--cream); }
.btn--ink:hover { background: var(--espresso-3); }
.btn--line { background: var(--card); border-color: var(--hair-strong); color: var(--ink); }
.btn--line:hover { border-color: var(--orange-ink); }

.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link {
    /* The app's ghost action: serif italic in the orange text ink, underlined until hovered. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.06em;
    font-weight: 600;
    color: var(--orange-ink);
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 1px;
}
.g-dark .link, .phero .link, .shero .link { color: var(--orange); }
.link:hover { border-bottom-color: transparent; }

/* A product's mark and name, side by side. */
.pmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.pmark img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.pmark b { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.pmark small { display: block; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.g-dark .pmark small { color: var(--cream-2); }

/* The four colors of the mark, as a hard-stop stripe. Used sparingly: footer edge, progress bar. */
.stripe4 {
    background: linear-gradient(90deg, var(--orange) 0 25%, var(--teal) 25% 50%, var(--lime) 50% 75%, var(--red) 75% 100%);
}

/* ─── Header ───────────────────────────────────────────────────────────────── */

.bar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: var(--espresso);
    color: var(--cream);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, transform 0.3s var(--ease);
}
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    z-index: 51;
    background: var(--espresso);
}
html[data-scrolled] .bar { border-bottom-color: var(--hair-dk); }

.bar__in { display: flex; align-items: center; gap: 32px; height: var(--bar-h); }
.bar__brand { flex: none; border-radius: 4px; }
.bar__brand img { width: 106px; height: auto; }

.bar__nav { display: flex; align-items: center; gap: 28px; margin-left: 12px; }
.bar__nav > a,
.dd > summary {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--cream);
    text-decoration: none;
    opacity: 0.86;
    transition: opacity 0.15s;
}
.bar__nav > a:hover,
.bar__nav > a[aria-current="page"],
.dd > summary:hover,
.dd[open] > summary { opacity: 1; }
.bar__nav > a[aria-current="page"] { box-shadow: 0 2px 0 var(--orange); }

.bar__end { display: flex; align-items: center; gap: 20px; margin-left: auto; }

.bar__burger {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 14px;
    background: transparent;
    border: 1.5px solid var(--hair-dk);
    border-radius: 6px;
    color: var(--cream);
    font-weight: 600;
    cursor: pointer;
}
.bar__burger i,
.bar__burger i::before,
.bar__burger i::after {
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    position: relative;
    content: "";
}
.bar__burger i::before { position: absolute; top: -5px; }
.bar__burger i::after { position: absolute; top: 5px; }

/* Reading progress, in the four colors of the mark. */
.bar__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    transform-origin: 0 50%;
    transform: scaleX(var(--sp, 0));
    pointer-events: none;
}
@supports (animation-timeline: scroll()) {
    .bar__progress { animation: bar-progress linear both; animation-timeline: scroll(root); }
}
@keyframes bar-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.dd { position: relative; }
.dd > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s var(--ease);
}
.dd[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }

.dd__panel {
    position: absolute;
    top: calc(100% + 18px);
    left: -20px;
    z-index: 2;
    min-width: 230px;
    padding: 8px;
    background: var(--card);
    color: var(--ink);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(12, 9, 6, 0.45);
    --focus: var(--ink);
    animation: dd-in 0.22s var(--ease);
}
.dd--end .dd__panel { left: auto; right: -12px; }
@keyframes dd-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.dd__link { display: block; padding: 10px 14px; border-radius: 6px; font-size: 15px; text-decoration: none; }
.dd__link:hover { background: var(--paper); }

.mega { width: min(700px, calc(100vw - 48px)); padding: 10px; display: grid; gap: 2px; }
.mega__item {
    display: grid;
    grid-template-columns: 44px 76px 1fr;
    gap: 2px 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 8px;
    text-decoration: none;
}
.mega__item:hover { background: var(--paper); }
.mega__item img { grid-row: span 2; width: 44px; height: 44px; object-fit: contain; }
.mega__verb { grid-row: span 2; font-size: 13px; font-weight: 650; letter-spacing: 0.04em; color: var(--muted); }
.mega__name { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.mega__desc { grid-column: 3; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.mega__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 6px;
    padding: 14px 16px 8px;
    border-top: 1px solid var(--hair);
    font-size: 14.5px;
}
.mega__foot a { color: var(--teal-ink); font-weight: 600; text-decoration: none; }
.mega__foot a:hover { text-decoration: underline; }

/* Block padding only: the side padding is .wrap's, so the links line up with the page at every width. */
.drawer { display: none; padding-block: 8px 24px; border-top: 1px solid var(--hair-dk); }
.drawer.is-open { display: block; }
/* The drawer's links, not its button: .drawer a outranked .btn and left "Get started" uncentred,
   unpadded and cream on orange (2.2:1). */
.drawer a:not(.btn) {
    display: block;
    padding: 12px 0;
    color: var(--cream);
    font-size: 17px;
    text-decoration: none;
    border-bottom: 1px solid var(--hair-dk);
}
.drawer small { display: block; color: var(--cream-2); font-size: 14px; margin-top: 2px; }
.drawer .btn { margin-top: 20px; width: 100%; }

/* With no script the Menu button can do nothing, so on phones and tablets the drawer's links show
   under the bar as a compact list instead. The bar then scrolls away with the page rather than
   holding that list on screen, and a product page's sticky bar pins to the top edge in its place. */
@media (max-width: 960px) {
    html:not(.js) .bar { position: relative; top: 0; }
    html:not(.js) .bar__burger { display: none; }
    html:not(.js) .drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; padding-block: 2px 16px; }
    html:not(.js) .drawer a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 15.5px; border-bottom: 0; }
    html:not(.js) .drawer small { display: none; }
    html:not(.js) .drawer .btn { margin-top: 8px; }
    html:not(.js) .pnav { top: env(safe-area-inset-top, 0px); }
}

/* ─── FAQ ──────────────────────────────────────────────────────────────────── */

.faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}
.faq__aside { display: grid; gap: 20px; position: sticky; top: calc(var(--bar-h) + 40px); }
.faq__aside p { margin: 0; color: var(--muted); }
.faq__list { border-top: 1.5px solid var(--ink); }
.q { border-bottom: 1px solid var(--hair); }
.q > summary {
    font-family: var(--display);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 22px 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
}
.q > summary::-webkit-details-marker { display: none; }
.q > summary::after {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat,
        linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat;
    box-shadow: inset 0 0 0 1.5px var(--hair);
    transition: transform 0.25s var(--ease);
}
.q[open] > summary::after { transform: rotate(45deg); }
.q__a { padding: 0 48px 24px 0; color: var(--muted); }
.q__a p { margin: 0 0 12px; max-width: 64ch; }
.q__a p:last-child { margin-bottom: 0; }
.q[open] .q__a { animation: lift 0.35s var(--ease) both; }

/* ─── Close: the company red ───────────────────────────────────────────────── */

.close {
    position: relative;
    overflow: hidden;
    background: var(--espresso);
    background-image: var(--hero-bg);
    color: var(--cream);
    padding-block: clamp(64px, 7vw, 100px);
    --focus: var(--orange);
}
.close__loop {
    position: absolute;
    right: -6%;
    top: 50%;
    width: min(620px, 62vw);
    transform: translateY(-50%);
    pointer-events: none;
}
.close__loop circle, .close__loop path { fill: none; stroke: rgba(246, 241, 234, 0.1); stroke-width: 2; }
.close__in { position: relative; display: grid; gap: 28px; max-width: 820px; }
.close__title {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(36px, 4.6vw, 66px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.close p { margin: 0; max-width: 54ch; color: var(--cream-2); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; }
.close__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1.5px solid rgba(246, 241, 234, 0.32);
    counter-reset: cs;
}
.close__steps li {
    counter-increment: cs;
    padding: 16px 20px 0 0;
    font-size: 16px;
    line-height: 1.4;
}
.close__steps li + li { padding-left: 20px; border-left: 1px solid var(--hair-dk); }
.close__steps li::before {
    font-family: var(--num);
    content: counter(cs);
    display: block;
    margin-bottom: 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--orange);
}
.close__steps b { font-weight: 700; color: var(--card); }
.close .fine { color: var(--cream-2); }
.close p.close__call { font-size: 16px; color: var(--cream-2); }
.close__call a { color: var(--orange); font-weight: 700; white-space: nowrap; }

/* ─── Footer ───────────────────────────────────────────────────────────────── */

.foot { position: relative; background: var(--espresso); color: var(--cream-2); padding-block: 72px 32px; font-size: 15px; }
.foot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--orange) 0 25%, var(--teal) 25% 50%, var(--lime) 50% 75%, var(--red) 75% 100%);
}
.foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.foot__brand { display: grid; gap: 14px; align-content: start; }
.foot__brand img { width: 120px; height: auto; }
.foot__brand p { margin: 0; color: var(--cream); font-size: 16px; font-weight: 560; }
.foot h2 { margin: 0 0 14px; font-size: 14px; font-weight: 650; color: var(--cream); }
.foot ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* A long address wraps inside its column: unbroken, it pushed every page sideways at 1000 to 1200px. */
.foot a { text-decoration: none; overflow-wrap: anywhere; }
.foot a:hover { color: var(--cream); text-decoration: underline; }
.foot__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px 32px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--hair-dk);
    font-size: 13.5px;
}
.foot__cieca { display: flex; align-items: center; gap: 12px; }
.foot__cieca img { width: 44px; height: auto; border-radius: 5px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__motion { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot__motion[aria-pressed="true"] { text-decoration: none; font-weight: 650; color: var(--cream); }
.foot__motion[aria-pressed="true"]::before { content: "\2713\00a0"; }

/* ─── Shared pieces: step sequences, priority chips, validation statuses ─────── */

/* Sequenced items start hidden only once the script takes over, so no-JS sees the finished card. */
.js [data-seq] [data-step] { transition: opacity 0.35s, transform 0.45s var(--ease); }
.js [data-seq].is-armed [data-step]:not(.is-on) { opacity: 0; transform: translateY(6px); }
[data-seq].is-resetting [data-step] { opacity: 0 !important; transition: opacity 0.3s !important; }

/* Replay: PS.seq builds it under each sequenced card, so a page with no script never shows one. Quiet
   until pointed at. With Pause motion on it steps aside but keeps its space, so nothing below moves. */
.ps-replay {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 32px;
    margin: 8px 0 0 auto;
    padding: 0 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.ps-replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ps-replay:hover { color: var(--ink); border-color: var(--hair-strong); }
:is(.g-dark, .hero, .phero) .ps-replay { color: var(--cream-2); }
:is(.g-dark, .hero, .phero) .ps-replay:hover { color: var(--cream); border-color: rgba(246, 241, 234, 0.32); }
html.ps-still .ps-replay { visibility: hidden; }
/* In a product hero the Replay shares the fine-print row under the card: the note left, Replay right.
   The note comes later in the page, so its box must stop short of the button (a margin, never padding):
   any overlap paints over Replay and takes its clicks. */
.phero__vis > .ps-replay { grid-row: 2; grid-column: 1; margin: 0 0 0 auto; align-self: center; }
.phero__vis > .ps-replay ~ .phero__note { grid-row: 2; grid-column: 1; align-self: center; margin-right: 100px; }

.prio {
    /* ProAudit's impact badges: ADAS plum, high red, moderate yellow, low blue. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--pb, var(--hair-strong));
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--pg, var(--card));
    color: var(--pf, var(--muted));
}
.prio b { font-family: var(--num); font-variant-numeric: tabular-nums; }
.prio--adas { --pg: var(--adas-bg); --pf: var(--adas-fg); --pb: var(--adas-border); }
.prio--high { --pg: var(--bad-bg); --pf: var(--bad-fg); --pb: var(--bad-border); }
.prio--mod { --pg: var(--warn-bg); --pf: var(--warn-fg); --pb: var(--warn-border); }
.prio--low { --pg: var(--info-bg); --pf: var(--info-fg); --pb: var(--info-border); }

.vst { display: inline-grid; font-size: 12px; font-weight: 650; white-space: nowrap; }
.vst > * { grid-area: 1 / 1; justify-self: end; padding: 3px 9px; border-radius: 999px; transition: opacity 0.25s, transform 0.3s var(--ease); }
.vst i { font-style: normal; background: var(--paper); color: var(--muted); }
.vst b { opacity: 0; transform: scale(0.9); }
.vst--ok b { background: var(--ok-bg); color: var(--ok-fg); box-shadow: inset 0 0 0 1px var(--ok-border); }
.vst--doc b { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 1px var(--warn-border); }
.vst--no b { background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1px #D9CAB7; }
li.is-done .vst i { opacity: 0; transform: scale(0.9); }
li.is-done .vst b { opacity: 1; transform: none; }

/* ─── Shared motion ────────────────────────────────────────────────────────── */

@keyframes lift { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ─── Next in the loop (product pages) ─────────────────────────────────────── */

.next {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px);
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.25s var(--ease), border-color 0.25s;
}
.next:hover { transform: translateY(-2px); border-color: var(--nc, var(--ink)); }
.next__loop { position: relative; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--hair); }
.next__loop i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--hair); }
.next__loop i:nth-child(1) { left: 50%; top: 0; }
.next__loop i:nth-child(2) { left: 93%; top: 75%; }
.next__loop i:nth-child(3) { left: 7%; top: 75%; }
.next__loop i.is-here { background: var(--ink); }
.next__loop i.is-next { background: var(--nc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nc) 30%, transparent); }
.next__txt { display: grid; gap: 4px; }
.next__txt small { font-size: 14px; color: var(--muted); }
.next__txt b { font-family: var(--display); font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.next img { width: 56px; height: 56px; object-fit: contain; }
.next--estimate { --nc: var(--teal); }
.next--audit { --nc: var(--orange); }
.next--recovery { --nc: var(--lime); }

/* ─── Phone action dock: one tap to act, after the hero ────────────────────── */

.dock { display: none; }

/* With no script, every tab panel shows, stacked, so nothing is unreachable. */
html:not(.js) [role="tabpanel"][hidden] { display: block; }

/* ─── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
    }
}

html.ps-still *, html.ps-still *::before, html.ps-still *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .bar__nav { gap: 20px; }
}

@media (max-width: 960px) {
    html[data-bar-hidden] .bar { transform: translateY(-100%); }
    .bar__nav, .bar__end > .dd, .bar__end > .btn { display: none; }
    .bar__burger { display: inline-flex; }
    .dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        display: flex;
        gap: 8px;
        padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        background: var(--espresso);
        border-top: 1px solid var(--hair-dk);
        transform: translateY(110%);
        transition: transform 0.35s var(--ease);
        --focus: var(--orange);
    }
    .dock.is-shown { transform: none; }
    .dock .btn { flex: 1 1 auto; min-height: 48px; padding: 0 12px; font-size: 15px; }
    .sec-head--split { grid-template-columns: minmax(0, 1fr); }
    .faq__grid { grid-template-columns: minmax(0, 1fr); }
    .faq__aside { position: static; }
    .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .wrap {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }
    .close__steps { grid-template-columns: minmax(0, 1fr); }
    .close__steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(246, 241, 234, 0.28); padding-bottom: 14px; }
    .q__a { padding-right: 0; }
    .next { grid-template-columns: minmax(0, 1fr) auto; }
    .next__loop { display: none; }
    .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .foot__brand, .foot__grid > div:last-child { grid-column: 1 / -1; }
    /* Phones only: a tighter vertical rhythm, so the long pages read in fewer screens. */
    .sec { padding-block: 56px; }
    .sec--tight { padding-block: 44px; }
    .close { padding-block: 52px; }
    .close__in { gap: 22px; }
    .foot { padding-block: 48px 24px; }
    /* Each closing step's number sits beside its words. Positioned, not a grid: a step mixes bold and plain text. */
    .close__steps li, .close__steps li + li { position: relative; padding: 12px 0 12px 34px; }
    .close__steps li::before { position: absolute; left: 0; top: 12px; margin: 0; font-size: 22px; }
}