/* Plucky for Business — public site base styles.
   Aligned to the Plucky Works design system (Newsprint & Ink palette).
   Manrope serves both editorial and UI typography roles.
   Brick red is the action color only (CTAs, links, errors); ink-blue carries
   all headlines and editorial weight; gold is reserved for the dark-hero CTA.
   Page bg is paper-cream, not white. */

:root {
    /* Brand tokens — Newsprint & Ink */
    --plucky-primary: #a72536;
    --plucky-primary-hover: #7a1a27;
    --plucky-primary-light: #fde9ec;

    --plucky-secondary: #1f2a44;
    --plucky-secondary-hover: #16203a;
    --plucky-secondary-light: #dde3f0;
    --plucky-secondary-soft: #3e5168;

    --plucky-tertiary: #e8b85b;
    --plucky-tertiary-hover: #d1a24a;
    --plucky-tertiary-light: #fbf1d9;

    --plucky-paper: #faf4e8;
    --plucky-paper-soft: #f4eddc;
    --plucky-neutral: #ece6d6;
    --plucky-neutral-100: #f8f4ea;

    --plucky-text: #2a2522;
    --plucky-text-strong: #161311;
    --plucky-text-muted: #6b6259;
    --plucky-border-soft: #e0d9c7;
    --plucky-border-soft-2: #d6cdb6;

    /* Legacy aliases (templates still reference --biz-accent / --success / etc.).
       Map them onto the brand palette so existing markup stays on-brand. */
    --biz-accent: var(--plucky-secondary);
    --biz-accent-hover: var(--plucky-secondary-hover);
    --biz-accent-light: var(--plucky-secondary-light);
    --primary-color: var(--plucky-secondary);
    --primary-color-light: var(--plucky-secondary-light);
    --secondary-color: var(--plucky-primary);
    --tertiary-color: var(--plucky-tertiary);
    --neutral: var(--plucky-neutral);
    --neutral-100: var(--plucky-neutral-100);
    --text-color: var(--plucky-text);
    /* Semantics point at the shared ramp in plucky_write_design.css rather
       than collapsing onto ink and brick, so success, warning and info stay
       tellable apart wherever these aliases get used. */
    --success: var(--plucky-sage-ink);
    --success-light: var(--plucky-sage-tint);
    --warning: var(--plucky-gold-ink);
    --warning-light: var(--plucky-gold-tint);
    --info: var(--plucky-secondary);
    --info-light: var(--plucky-secondary-light);
    --ink: var(--plucky-secondary);
    --muted: var(--plucky-text-muted);
    --line: var(--plucky-border-soft);
    --paper: var(--plucky-paper);
    --paper-soft: var(--plucky-paper-soft);
    --gold: var(--plucky-tertiary);

    /* Surfaces */
    --radius-xl: 1.5rem;
    --radius-lg: 1rem;
    --radius-3: 0.5rem;
    --radius-pill: 50rem;

    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --shadow-card: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --shadow-soft: 0 .5rem 1rem rgba(0, 0, 0, .12);

    /* Type */
    --font-sans: var(--plucky-font-family);
    --font-serif: var(--plucky-font-family);
}

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

html {
    height: 100%;
}

body {
    /* min-height (not height) — a fixed-height body breaks position:sticky on
       direct children, since the sticky's containing block is clamped to the
       viewport rather than scrolling with the page. */
    min-height: 100%;
    font-family: var(--font-sans);
    color: var(--plucky-text);
    background: var(--plucky-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ----- Global type ---------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-serif);
    color: var(--plucky-secondary);
    letter-spacing: -0.01em;
}

h5,
h6,
.h5,
.h6 {
    font-family: var(--font-serif);
}

/* ----- Header / nav --------------------------------------------------- */
.biz-navbar {
    min-height: 75px;
    background: var(--plucky-paper);
    border-bottom: 1px solid var(--plucky-border-soft);
}

.biz-brand {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--plucky-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
}

.biz-brand .biz-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 0.5rem;
    background: var(--plucky-primary);
    color: #fff;
    font-weight: 700;
    font-family: var(--font-serif);
    display: inline-grid;
    place-items: center;
}

.biz-brand .biz-brand-suffix {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--plucky-text-muted);
    font-size: 0.9rem;
}

.biz-brand-wordmark {
    height: 4em;
    width: auto;
    display: block;
}

/* The .pw-wordmark component itself lives in the shared
   plucky_typography.css, which both this shell and the authenticated
   distributor shell load. Only the placements below are public-site
   specific. */

/* The nav's own colour is ink, but the wordmark is always brand red. */
.landing-nav .pw-wordmark {
    color: var(--plucky-primary);
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(250, 244, 232, 0.94);
    border-bottom: 1px solid var(--plucky-border-soft);
}

.landing-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px clamp(18px, 3vw, 34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.landing-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.landing-links a {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--plucky-secondary-soft);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.landing-links a:hover {
    color: var(--plucky-primary);
}

/* ----- Buttons ------------------------------------------------------- */
/* Marketing pill — the dominant CTA shape on landing surfaces. */
.btn-biz,
.btn-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--plucky-primary);
    color: #fff;
    border: 1px solid var(--plucky-primary);
    border-radius: var(--radius-pill);
    padding: 12px 26px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-biz:hover,
.btn-create:hover {
    background: var(--plucky-primary-hover);
    border-color: var(--plucky-primary-hover);
    color: #fff;
}

/* Inert variant for an action that is temporarily unavailable. Keeps the
   button's shape and label so the page still reads as complete, but drops the
   brand fill and the hover so nothing invites a click. Applied to a <span>,
   not an <a>, so there is no link to follow. */
.btn-biz.is-disabled,
.btn-biz.is-disabled:hover,
.btn-create.is-disabled,
.btn-create.is-disabled:hover {
    position: relative;
    background: var(--plucky-neutral);
    border-color: var(--plucky-border-soft-2);
    color: var(--plucky-text);
    cursor: default;
}

/* Corner flag for an inert button, e.g. "Coming Soon". Gold is the palette's
   attention colour and the only warm note left on a muted button, so the
   notice registers before the label does. Sits proud of the top-right corner
   rather than inside it, so it does not squeeze the label. */
.btn-flag {
    position: absolute;
    top: -9px;
    right: -9px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--plucky-tertiary);
    color: var(--plucky-text-strong);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.btn-biz-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--plucky-secondary);
    border: 1px solid var(--plucky-secondary);
    border-radius: var(--radius-pill);
    padding: 12px 26px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-biz-outline:hover {
    background: var(--plucky-secondary);
    color: #fff;
}

/* Gold accent CTA — only on the dark CTA band / dark hero surfaces. */
.btn-biz-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--plucky-tertiary);
    color: var(--plucky-text-strong);
    border: 1px solid var(--plucky-tertiary);
    border-radius: var(--radius-pill);
    padding: 12px 26px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .18);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-biz-accent:hover {
    background: var(--plucky-tertiary-hover);
    border-color: var(--plucky-tertiary-hover);
    color: var(--plucky-text-strong);
}

.btn-soft {
    background: var(--plucky-neutral);
    color: var(--plucky-secondary);
    border: 1px solid var(--plucky-border-soft-2);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
}

.btn-soft:hover {
    background: var(--plucky-secondary-light);
    color: var(--plucky-secondary);
}

a {
    color: var(--plucky-primary);
    text-decoration: none;
}

a:hover {
    color: var(--plucky-primary-hover);
}

/* ----- Layout primitives -------------------------------------------- */
.page-shell {
    background: transparent;
}

.hero,
.section {
    padding-inline: clamp(18px, 4vw, 56px);
}

.hero {
    position: relative;
    min-height: clamp(560px, 70vh, 720px);
    display: flex;
    align-items: center;
    padding-top: clamp(56px, 6vw, 88px);
    padding-bottom: clamp(64px, 6vw, 96px);
    background: var(--plucky-secondary);
    color: #fff;
    overflow: hidden;
}

/* Hand-drawn telephone-wire SVG, layered behind hero content. */
.hero-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

/* Alternating section bands — the marketing rhythm:
   paper-cream (default) → neutral → paper → ink-blue */
.section-paper {
    background: var(--plucky-paper);
}

.section-neutral {
    background: var(--plucky-neutral);
}

.section-ink {
    background: var(--plucky-secondary);
    color: #fff;
}

.section-ink h1,
.section-ink h2,
.section-ink h3,
.section-ink h4,
.section-ink h5,
.section-ink .section-title {
    color: #fff;
}

.section-ink .section-copy,
.section-ink p {
    color: rgba(255, 255, 255, 0.8);
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
}

/* ----- Eyebrow + headings ------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: clamp(18px, 2vw, 26px);
}

.eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--plucky-tertiary);
    flex: 0 0 8px;
}

/* On light bands, the eyebrow inverts to ink-blue text on a chip that has
   real contrast against the band's own background. Each band needs its own
   chip color: paper-soft on paper is too close in tone to read as a chip
   (it disappears), and neutral on neutral does the same. The chip must
   step away from the band, not match it. */
.section-paper .eyebrow {
    background: var(--plucky-neutral);
    border-color: var(--plucky-border-soft-2);
    color: var(--plucky-secondary);
}

.section-neutral .eyebrow {
    background: var(--plucky-paper);
    border-color: var(--plucky-border-soft-2);
    color: var(--plucky-secondary);
}

.section-paper .eyebrow-dot,
.section-neutral .eyebrow-dot {
    background: var(--plucky-primary);
}

h1,
.hero-title {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin: 0;
    color: #fff;
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
}

/* The single permitted "double accent" on the page — one verb word that picks
   up brick-red and weight 800. Use sparingly: one word per hero, never more. */
.hero-title .hl {
    color: var(--plucky-tertiary);
    font-weight: 800;
    font-style: italic;
}

.hero-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 60ch;
    margin-top: clamp(20px, 2.5vw, 28px);
    margin-bottom: clamp(28px, 3vw, 36px);
}

.section-title {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--plucky-secondary);
}

.section-copy {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    line-height: 1.6;
    color: var(--plucky-text);
    max-width: 70ch;
}

.small-copy {
    font-family: var(--font-sans);
    font-size: clamp(0.88rem, 1.05vw, 0.96rem);
    line-height: 1.55;
    color: var(--plucky-text-muted);
}

/* ----- CTA + cards -------------------------------------------------- */
.cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cta-row .btn-biz,
.cta-row .btn-biz-outline,
.cta-row .btn-biz-accent {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    padding: clamp(12px, 1.4vw, 16px) clamp(22px, 2.2vw, 30px);
}

/* On the dark hero, the primary CTA is gold and the secondary inverts to a
   white outline. Override the default red/ink palette inside .hero only. */
.hero .cta-row .btn-biz {
    background: var(--plucky-tertiary);
    border-color: var(--plucky-tertiary);
    color: var(--plucky-text-strong);
    font-weight: 700;
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .18);
}

.hero .cta-row .btn-biz:hover {
    background: var(--plucky-tertiary-hover);
    border-color: var(--plucky-tertiary-hover);
    color: var(--plucky-text-strong);
}

.hero .cta-row .btn-biz-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

.hero .cta-row .btn-biz-outline:hover {
    background: #fff;
    color: var(--plucky-secondary);
    border-color: #fff;
}

.feature-grid,
.flow-grid,
.proof-grid {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
}

.flow-grid {
    grid-template-columns: repeat(4, 1fr);
}

.feature-grid {
    grid-template-columns: repeat(3, 1fr);
}

.proof-grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
}

.feature-card,
.flow-step,
.proof-card {
    background: #fff;
    border: 1px solid var(--plucky-border-soft);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 2.4vw, 30px);
    box-shadow: var(--shadow-sm);
}

.feature-card h3,
.flow-step h3,
.proof-card h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.25;
    font-weight: 700;
    color: var(--plucky-secondary);
    margin-bottom: 10px;
}

.feature-card p,
.flow-step p,
.proof-card p {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.15vw, 1.02rem);
    line-height: 1.55;
    color: var(--plucky-text);
    margin: 0;
}

.pr-body p {
    margin: 0 0 1em;
}

.pr-body p:last-child {
    margin-bottom: 0;
}

.step-num {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: var(--plucky-secondary);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.brand-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.brand-list span {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--plucky-paper-soft);
    border: 1px solid var(--plucky-border-soft);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(0.82rem, 1vw, 0.92rem);
    color: var(--plucky-secondary);
}

/* ----- CTA band (dark, ink-blue) ------------------------------------ */
.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--plucky-secondary);
    padding: clamp(36px, 5vw, 60px);
    color: #fff;
    box-shadow: var(--shadow-soft);
}

.cta-band .section-title {
    color: #fff;
}

.cta-band .section-copy {
    color: rgba(255, 255, 255, 0.78);
}

.cta-band .btn-biz {
    background: var(--plucky-tertiary);
    border-color: var(--plucky-tertiary);
    color: var(--plucky-text-strong);
    font-weight: 700;
}

.cta-band .btn-biz:hover {
    background: var(--plucky-tertiary-hover);
    border-color: var(--plucky-tertiary-hover);
    color: var(--plucky-text-strong);
}

/* ----- Hero panel (release card preview) ---------------------------- */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.metric-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: clamp(28px, 4vw, 40px);
    max-width: 720px;
}

.metric {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    padding: clamp(16px, 1.8vw, 22px);
}

.metric strong {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    line-height: 1.15;
    color: #fff;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.metric span {
    font-family: var(--font-sans);
    font-size: clamp(0.78rem, 1vw, 0.88rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
}

.hero-panel {
    position: relative;
    border-radius: var(--radius-xl);
    background: rgba(250, 244, 232, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: clamp(20px, 2.6vw, 28px);
}

.panel-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.window-dots {
    display: flex;
    gap: 7px;
}

.window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.panel-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    background: var(--plucky-tertiary-light);
    color: #7a5a1f;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
}

.release-card {
    background: #fff;
    border: 1px solid var(--plucky-border-soft);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

.release-card h5 {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    line-height: 1.32;
    font-weight: 700;
    color: var(--plucky-secondary);
    margin: 0 0 7px;
}

.release-card p {
    font-family: var(--font-sans);
    font-size: clamp(0.85rem, 1.1vw, 0.94rem);
    line-height: 1.5;
    color: var(--plucky-text-muted);
    margin: 0;
}

.engagement-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.engagement-bars div {
    background: var(--plucky-paper-soft);
    border: 1px solid var(--plucky-border-soft);
    border-radius: var(--radius-3);
    padding: 11px;
    text-align: center;
}

.engagement-bars strong {
    display: block;
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--plucky-secondary);
    font-size: 1.25rem;
    line-height: 1.1;
}

.engagement-bars span {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--plucky-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ----- Footer ------------------------------------------------------- */
.biz-footer {
    background: var(--plucky-secondary);
    color: rgba(255, 255, 255, 0.78);
    padding: 44px clamp(18px, 4vw, 56px) 28px;
    margin-top: 80px;
    font-family: var(--font-sans);
}

.biz-footer .wrap {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 32px;
}

.biz-footer h6 {
    font-family: var(--font-sans);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.biz-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    display: block;
    padding: 4px 0;
    font-size: 0.92rem;
}

.biz-footer a:hover {
    color: var(--plucky-tertiary);
}

.biz-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 28px;
    padding-top: 18px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ----- Wizard step indicator ---------------------------------------- */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 24px 0 8px;
    overflow-x: auto;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: clamp(0.78rem, 1vw, 0.88rem);
    color: var(--plucky-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.wizard-step.active {
    color: var(--plucky-secondary);
    font-weight: 700;
}

.wizard-step.completed {
    color: var(--plucky-secondary);
}

.wizard-step .step-num-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    border: 2px solid var(--plucky-border-soft);
    color: var(--plucky-text-muted);
    background: #fff;
}

.wizard-step.active .step-num-small {
    border-color: var(--plucky-primary);
    color: #fff;
    background: var(--plucky-primary);
}

.wizard-step.completed .step-num-small {
    border-color: var(--plucky-secondary);
    color: #fff;
    background: var(--plucky-secondary);
}

.wizard-connector {
    width: 48px;
    height: 2px;
    background: var(--plucky-border-soft);
    margin: 0 8px;
    flex: 0 0 48px;
}

.wizard-connector.completed {
    background: var(--plucky-secondary);
}

.wizard-card {
    background: #fff;
    border: 1px solid var(--plucky-border-soft);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 3vw, 36px);
    box-shadow: var(--shadow-sm);
}

.register-shell {
    background: var(--plucky-paper);
    min-height: calc(100vh - 162px);
    padding: clamp(18px, 3vw, 34px);
}

.register-wrap {
    max-width: 980px;
    margin: 0 auto;
}

/* ----- Form inputs -------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--radius-3);
    border-color: var(--plucky-border-soft-2);
    padding: 0.72rem 0.82rem;
    font-family: var(--font-sans);
    background: #fff;
    color: var(--plucky-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--plucky-secondary);
    box-shadow: 0 0 0 0.2rem rgba(31, 42, 68, 0.18);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--plucky-primary);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(167, 37, 54, 0.18);
}

.invalid-feedback {
    color: var(--plucky-primary);
    font-family: var(--font-sans);
    font-weight: 500;
}

.form-label-sm {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--plucky-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.helper-text {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--plucky-text-muted);
    margin-top: 6px;
    line-height: 1.4;
}

/* ----- Lead-form card ----------------------------------------------- */
.lead-form-card {
    background: #fff;
    border: 1px solid var(--plucky-border-soft);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 2.6vw, 30px);
    box-shadow: var(--shadow-sm);
}

.lead-form-card h3 {
    font-family: var(--font-serif);
    color: var(--plucky-secondary);
}

/* ----- Responsive collapse ------------------------------------------ */
@media (max-width: 920px) {

    .hero-grid,
    .proof-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
    }

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

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

    .landing-links {
        display: none;
    }

    .biz-footer .wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {

    .hero,
    .section {
        padding-inline: 16px;
    }

    .hero {
        padding-top: 48px;
        padding-bottom: 56px;
    }

    .metric-strip,
    .engagement-bars,
    .feature-grid,
    .flow-grid {
        grid-template-columns: 1fr;
    }

    .cta-row {
        align-items: stretch;
    }

    .cta-row .btn-biz,
    .cta-row .btn-biz-outline,
    .cta-row .btn-biz-accent {
        width: 100%;
        text-align: center;
    }

    .wizard-step .label {
        display: none;
    }

    .wizard-connector {
        width: 28px;
        flex-basis: 28px;
    }

    .cta-band {
        border-radius: var(--radius-lg);
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Landing-nav split button: outline "Sign In" with a Register        */
/* dropdown. Reuses the .btn-biz-outline brand style; we only override */
/* the border radii so the two halves read as one pill, and overlap    */
/* the shared edge so the seam is a single 1px line (not a double      */
/* border). The primary "Get started" CTA sits separately to the right.*/
/* ------------------------------------------------------------------ */
.biz-auth-split {
    vertical-align: middle;
}

.biz-auth-split > .btn-biz-outline:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 20px;
}

.biz-auth-split > .btn-biz-outline.dropdown-toggle-split {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* Pull the toggle 1px left so its border overlaps the Sign In
       button's border — one crisp divider instead of a 2px seam. */
    margin-left: -1px;
    padding-left: 14px;
    padding-right: 18px;
}

/* Bootstrap renders the caret via ::after; keep it centered. It inherits
   the button's text color, so on the outline button it shows in the brand
   secondary color. */
.biz-auth-split > .dropdown-toggle-split::after {
    vertical-align: middle;
    margin-left: 0;
}