/* ============ Tokens ============ */

:root {
    --ba-orange:      #F7941D;
    --ba-orange-soft: #FEF3E2;
    --ba-orange-text: #B05E0D;
    --ba-blue:        #1E3A8A;
    --ba-blue-soft:   #EEF2FF;
    --ba-blue-deep:   #162C66;
    --ba-green:       #16A34A;
    --ba-green-soft:  #ECFDF5;
    --ba-green-deep:  #0F7A36;

    --dark-slate:     #0F172A;
    --slate:          #334155;
    --cool-gray:      #64748B;
    --light-gray:     #F1F5F9;
    --paper:          #F8FAFC;
    --white:          #FFFFFF;
    --border:         #E2E8F0;
    --border-soft:    #EFF2F7;

    --font-display: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-body:    'Inter',   system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    --container:      1120px;
    --container-pad:  clamp(20px, 4vw, 48px);
    --section-pad-y:  clamp(48px, 7vw, 96px);
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;

    --shadow-card:  0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .04);
    --shadow-lift:  0 2px 6px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .08);
    --shadow-bar:   0 4px 12px rgba(15, 23, 42, .06);

    --ease:      cubic-bezier(.2, .8, .2, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --dur-fast:  160ms;
    --dur:       240ms;
    --dur-slow:  700ms;
}


/* ============ Reset & base ============ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--slate);
    line-height: 1.65;
    font-size: 16px;
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--ba-blue); text-decoration: none; }
a:hover { color: var(--ba-blue-deep); }
code { font-family: var(--font-mono); font-size: .92em; }

/* Icon definitions only; every visible icon is a <use> reference. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ============ Scroll progress bar ============ */

.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--ba-blue) 0%, var(--ba-orange) 100%);
    z-index: 100;
    transition: width 60ms linear;
    pointer-events: none;
}


/* ============ Top bar ============ */

.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
    transition: box-shadow var(--dur) var(--ease);
}
.topbar::before {
    content: ''; display: block; height: 4px;
    background: linear-gradient(90deg, var(--ba-blue) 0 55%, var(--ba-orange) 55% 100%);
}
.topbar.is-scrolled { box-shadow: var(--shadow-bar); }

.topbar__inner {
    max-width: var(--container); margin: 0 auto;
    padding: 12px var(--container-pad);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar__brand {
    display: inline-flex; align-items: center;
    flex-shrink: 0;
}
.topbar__logo {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    object-position: left center;
}
.topbar__project { text-align: right; min-width: 0; }
.topbar__project-label {
    display: block; font-size: 10px; font-weight: 600;
    color: var(--cool-gray); text-transform: uppercase; letter-spacing: .8px;
    margin-bottom: 2px;
}
.topbar__project-name {
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    color: var(--dark-slate); display: inline-flex; align-items: center; gap: 6px;
    transition: color var(--dur) var(--ease);
}
.topbar__project-name:hover { color: var(--ba-blue); }
.topbar__project-arrow { width: 14px; height: 14px; }


/* ============ Hero ============ */

.hero {
    max-width: var(--container); margin: 0 auto;
    padding: clamp(40px, 7vw, 88px) var(--container-pad) clamp(32px, 5vw, 56px);
    position: relative;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 880px) {
    .hero__inner { grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
}

.hero__content { max-width: 720px; min-width: 0; }

.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ba-green-soft);
    padding: 6px 14px 6px 12px;
    border-radius: 999px;
    margin-bottom: clamp(16px, 2vw, 24px);
}
.hero__eyebrow-text {
    font-size: 11px; font-weight: 600;
    color: var(--ba-green-deep);
    text-transform: uppercase; letter-spacing: .8px;
}

.pulse { position: relative; width: 10px; height: 10px; display: inline-block; flex-shrink: 0; }
.pulse__dot {
    position: absolute; inset: 0; margin: auto;
    width: 8px; height: 8px; background: var(--ba-green);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .15);
}
.pulse__ring {
    position: absolute; inset: -3px;
    border-radius: 50%; background: var(--ba-green); opacity: .35;
    animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
    0%   { transform: scale(.6); opacity: .5; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--dark-slate);
    font-size: clamp(34px, 6vw, 56px);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-bottom: clamp(16px, 2vw, 22px);
}
.hero__lede {
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--slate);
    line-height: 1.6;
    max-width: 60ch;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.hero__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
@media (min-width: 600px) { .hero__meta { grid-template-columns: repeat(4, 1fr); } }

.hero__meta-cell { background: var(--white); padding: 14px 16px; }
.hero__meta-label {
    font-size: 10px; font-weight: 600;
    color: var(--cool-gray);
    text-transform: uppercase; letter-spacing: .6px;
    margin-bottom: 3px;
}
.hero__meta-value {
    font-family: var(--font-display);
    font-weight: 600; font-size: 14px;
    color: var(--dark-slate);
}
.hero__meta-value--green { color: var(--ba-green-deep); }

.hero__stamp {
    width: clamp(140px, 22vw, 200px);
    aspect-ratio: 1 / 1;
    justify-self: center;
    animation: stampFloat 9s ease-in-out infinite;
    transform-origin: center;
}
@media (min-width: 880px) { .hero__stamp { justify-self: end; } }

.hero__stamp-img { width: 100%; height: 100%; }

@keyframes stampFloat {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50%      { transform: rotate(-7deg) translateY(-6px); }
}


/* ============ Relative time ============ */

/* Appended by status.js when the stamp is within a week. Absent otherwise, so a
   stale page falls back to the plain date rather than lying about freshness. */
.rel {
    display: block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11px;
    color: var(--cool-gray);
    letter-spacing: .2px;
    margin-top: 2px;
}
.footer__meta-line .rel { display: inline; margin: 0 0 0 6px; color: rgba(255, 255, 255, .45); }


/* ============ Quicklinks ============ */

.quicklinks {
    margin-top: clamp(32px, 5vw, 48px);
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 720px) { .quicklinks { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

.quicklink {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    color: var(--dark-slate);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quicklink:hover {
    border-color: var(--ba-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}
.quicklink:hover .quicklink__icon { transform: translateX(2px); }
.quicklink__icon {
    width: 22px; height: 22px;
    color: var(--ba-blue);
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
}
.quicklink__body { min-width: 0; }
.quicklink__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 14px; color: var(--dark-slate); margin-bottom: 2px;
}
.quicklink__sub { font-size: 12.5px; color: var(--cool-gray); line-height: 1.4; }


/* ============ Section shell ============ */

.section {
    padding: var(--section-pad-y) 0;
    border-top: 1px solid var(--border);
}
.section--alt {
    background: linear-gradient(180deg, var(--paper) 0%, var(--white) 100%);
}
.section > * {
    max-width: var(--container); margin-left: auto; margin-right: auto;
    padding-left: var(--container-pad); padding-right: var(--container-pad);
}

.section__head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 820px; }
.section__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    color: var(--ba-orange-text);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 10px;
}
.section__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--dark-slate);
    font-size: clamp(24px, 3.4vw, 34px);
    line-height: 1.12;
    letter-spacing: -.015em;
    margin-bottom: 12px;
    position: relative;
}
.section__title::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--ba-orange);
    margin-top: 14px;
    border-radius: 2px;
    transition: width 900ms var(--ease-out) 250ms;
}
.section.is-in-view .section__title::after { width: 56px; }

.section__lede {
    font-size: clamp(14.5px, 1.2vw, 16px);
    color: var(--slate);
    line-height: 1.6;
    max-width: 68ch;
}


/* ============ Subgroup ============ */

.subgroup__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ba-blue);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 32px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.subgroup__title--review { color: var(--ba-orange-text); }
.subgroup__lede {
    font-size: 14px;
    color: var(--slate);
    max-width: 64ch;
    margin: -6px 0 16px;
}


/* ============ Review banner ============ */

.review-banner {
    background: var(--ba-orange-soft);
    border: 1px solid #FCD7A4;
    border-left: 4px solid var(--ba-orange);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin: 8px 0 18px;
    display: flex; gap: 14px; align-items: flex-start;
}
.review-banner__icon {
    width: 22px; height: 22px;
    color: var(--ba-orange);
    flex-shrink: 0;
    margin-top: 2px;
}
.review-banner__text { font-size: 13.5px; color: var(--slate); line-height: 1.55; }
.review-banner__text strong { color: var(--dark-slate); font-weight: 600; }


/* ============ Cards ============ */

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover {
    border-color: var(--ba-blue);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}
.card--review { border-left: 3px solid var(--ba-orange); }
.card--review:hover { border-color: var(--ba-orange); border-left-color: var(--ba-orange); }

/* No public address to copy, so the head carries a tag where the button sits. */
.card--auth { background: var(--paper); }
.card--auth:hover { border-color: var(--ba-blue); }
.card--auth .card__head { margin-bottom: 10px; }

.card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 6px;
}
.card__name {
    font-family: var(--font-display); font-weight: 600;
    font-size: 16px; color: var(--dark-slate);
}
.card__copy {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--cool-gray);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
    flex-shrink: 0;
}
.card__copy svg { width: 14px; height: 14px; }
.card__copy:hover { color: var(--ba-blue); background: var(--ba-blue-soft); }
.card__copy.is-copied { color: var(--ba-green); background: var(--ba-green-soft); }

.card__url {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ba-blue);
    margin-bottom: 10px;
    word-break: break-all;
}
.card__url a { color: inherit; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.card__url a:hover { border-bottom-color: currentColor; }

.card__desc { font-size: 13.5px; color: var(--slate); line-height: 1.55; }


/* ============ Steps ============ */

.steps {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 880px) { .steps { grid-template-columns: 1fr 1fr; gap: 18px; } }

.step {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 22px 24px;
    display: flex; gap: 16px; align-items: flex-start;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step:hover { border-color: var(--ba-blue); transform: translateY(-2px); }
.step__num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ba-blue);
    color: var(--white);
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.step__body { min-width: 0; flex: 1; }
.step__title {
    font-family: var(--font-display); font-weight: 600;
    color: var(--dark-slate);
    font-size: 15.5px;
    margin-bottom: 6px;
}
.step__title code {
    background: var(--light-gray);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--dark-slate);
    font-weight: 500;
}
.step__text { font-size: 13.5px; color: var(--slate); line-height: 1.6; margin-bottom: 12px; }
.step__text code {
    background: var(--light-gray); padding: 1px 5px; border-radius: 4px;
    font-size: 12.5px; color: var(--dark-slate);
}
.step__action {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-weight: 600;
    font-size: 13px; color: var(--ba-blue);
    padding: 7px 12px;
    background: var(--ba-blue-soft);
    border-radius: var(--radius-sm);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step__action:hover { background: var(--ba-blue); color: var(--white); transform: translateX(2px); }
.step__action svg { width: 13px; height: 13px; }


/* ============ Note ============ */

.note {
    background: var(--light-gray);
    border-left: 3px solid var(--cool-gray);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 14px 18px;
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.6;
}
.note strong { color: var(--dark-slate); font-weight: 600; }
.note code {
    background: var(--white); padding: 1px 6px; border-radius: 4px;
    font-size: 12.5px; color: var(--dark-slate);
}


/* ============ Email table ============ */

.email-table {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.email-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-soft);
    align-items: center;
    font-size: 13.5px;
    color: var(--slate);
    transition: background var(--dur) var(--ease);
}
@media (min-width: 760px) {
    .email-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
}
.email-row:last-child { border-bottom: 0; }
.email-row:not(.email-row--head):hover { background: var(--paper); }

.email-row--head {
    background: var(--light-gray);
    font-family: var(--font-display);
    font-weight: 600; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--cool-gray);
    padding-top: 10px; padding-bottom: 10px;
}
.email-row--system { background: rgba(247, 148, 29, .04); }
.email-row--system:hover { background: rgba(247, 148, 29, .08); }

.email-addr {
    display: inline-flex; align-items: center; gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}
.email-addr code {
    font-size: 12.5px;
    color: var(--dark-slate);
    background: var(--light-gray);
    padding: 3px 8px;
    border-radius: 4px;
    word-break: break-all;
}
.email-row--system .email-addr code { background: var(--ba-orange-soft); color: var(--ba-orange-text); }

.email-copy {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--cool-gray);
    flex-shrink: 0;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.email-copy svg { width: 13px; height: 13px; }
.email-copy:hover { color: var(--ba-blue); background: var(--ba-blue-soft); }
.email-copy.is-copied { color: var(--ba-green); background: var(--ba-green-soft); }

.tag {
    display: inline-block;
    font-size: 10.5px; font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .3px;
    white-space: nowrap;
}
.tag--primary { background: var(--ba-blue); color: var(--white); }
.tag--alias   { background: var(--ba-blue-soft); color: var(--ba-blue); }
.tag--system  { background: var(--ba-orange-soft); color: var(--ba-orange-text); }


/* ============ Checklist ============ */

.checklist {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 720px) { .checklist { grid-template-columns: 1fr 1fr; gap: 16px; } }

.check {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex; gap: 14px; align-items: flex-start;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.check:hover { border-color: var(--ba-green); transform: translateY(-2px); }

.check__icon {
    width: 22px; height: 22px;
    color: var(--ba-green);
    flex-shrink: 0;
    margin-top: 2px;
}
/* Stroke-draw the tick when the section enters view. */
.check__icon circle {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    transition: stroke-dashoffset 700ms var(--ease-out);
}
.check__icon path {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    transition: stroke-dashoffset 500ms var(--ease-out) 350ms;
}
.is-in-view .check__icon circle,
.section.is-in-view .check__icon circle { stroke-dashoffset: 0; }
.is-in-view .check__icon path,
.section.is-in-view .check__icon path { stroke-dashoffset: 0; }

.check__body { min-width: 0; flex: 1; }
.check__title {
    font-family: var(--font-display); font-weight: 600;
    color: var(--dark-slate); font-size: 14.5px;
    margin-bottom: 3px;
}
.check__sub { font-size: 13px; color: var(--cool-gray); line-height: 1.5; }


/* ============ Beyond ============ */

.beyond {
    list-style: none;
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 880px) { .beyond { grid-template-columns: 1fr 1fr; gap: 14px; } }

.beyond__item {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--ba-blue);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 14px 18px;
    font-size: 14px;
    color: var(--slate);
    line-height: 1.6;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.beyond__item:hover { transform: translateX(4px); box-shadow: var(--shadow-card); }
.beyond__item strong { color: var(--dark-slate); font-family: var(--font-display); font-weight: 600; }


/* ============ Next cards ============ */

.next-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 640px) { .next-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .next-grid { grid-template-columns: repeat(4, 1fr); } }

.next-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 20px 22px;
    position: relative;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.next-card:hover { border-color: var(--ba-orange); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.next-card__num {
    font-family: var(--font-mono); font-weight: 500;
    font-size: 11px;
    color: var(--cool-gray);
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}
.next-card__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 15.5px;
    color: var(--dark-slate);
    margin-bottom: 8px;
}
.next-card__text { font-size: 13px; color: var(--slate); line-height: 1.55; }


/* ============ Payments timeline ============ */

.payments {
    list-style: none;
    display: grid; grid-template-columns: 1fr;
    gap: 0;
    position: relative;
}
.payment {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 0 0 24px;
    position: relative;
}
.payment::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 36px;
    bottom: -8px;
    width: 2px;
    background: var(--border);
}
.payment:last-child::before { display: none; }

.payment__marker {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--white);
    border: 2px solid var(--border);
    z-index: 1;
}
.payment__num {
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px;
    color: var(--cool-gray);
}

.payment--paid .payment__marker { background: var(--ba-green); border-color: var(--ba-green); }
.payment--paid .payment__num { color: var(--white); }
.payment--paid::before { background: var(--ba-green); opacity: .4; }

/* Kept for the milestone that becomes due once the client review completes. */
.payment--due .payment__marker {
    background: var(--ba-orange);
    border-color: var(--ba-orange);
    box-shadow: 0 0 0 4px rgba(247, 148, 29, .15);
    animation: dueBreathe 2.5s ease-in-out infinite;
}
.payment--due .payment__num { color: var(--white); }
@keyframes dueBreathe {
    0%, 100% { box-shadow: 0 0 0 4px rgba(247, 148, 29, .15); }
    50%      { box-shadow: 0 0 0 7px rgba(247, 148, 29, .08); }
}

.payment__body {
    flex: 1; min-width: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px 18px;
}
.payment--paid .payment__body { border-color: var(--ba-green); background: var(--ba-green-soft); }
.payment--due  .payment__body { border-color: var(--ba-orange); background: var(--ba-orange-soft); }

.payment__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.payment__title {
    font-family: var(--font-display); font-weight: 600;
    color: var(--dark-slate);
    font-size: 15.5px;
}
.payment__amount {
    font-family: var(--font-display); font-weight: 700;
    color: var(--ba-blue);
    font-size: 18px;
    letter-spacing: -.01em;
}
.payment--paid .payment__amount { color: var(--ba-green-deep); }

.payment__trigger {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--cool-gray);
    margin-bottom: 10px;
}
.payment__status {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.55;
    display: flex; align-items: flex-start; gap: 6px;
}
.payment__status svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--ba-green-deep); }
.payment__status--paid { color: var(--ba-green-deep); font-weight: 500; }
.payment__status--due { color: var(--ba-orange-text); font-weight: 500; }


/* ============ Needs ============ */

.needs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 760px)  { .needs { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1000px) { .needs { grid-template-columns: repeat(3, 1fr); } }

.need {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px 18px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.need:hover { border-color: var(--ba-orange); transform: translateY(-2px); }
.need__head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.need__title {
    font-family: var(--font-display); font-weight: 600;
    color: var(--dark-slate);
    font-size: 14.5px;
}
.need__due {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ba-orange-text);
    background: var(--ba-orange-soft);
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
/* Three weights so eight asks do not all read as equally urgent. */
.need__due--info { color: var(--ba-blue); background: var(--ba-blue-soft); }
.need__due--soft { color: var(--cool-gray); background: var(--light-gray); }

.need__text { font-size: 13px; color: var(--slate); line-height: 1.55; }


/* ============ Log (no dates, dot-and-rule timeline) ============ */

.log {
    list-style: none;
    position: relative;
}
.log__entry {
    position: relative;
    padding: 0 0 22px 36px;
}
.log__entry::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 22px;
    bottom: -6px;
    width: 1px;
    background: var(--border);
}
.log__entry:last-child::before { display: none; }
.log__entry::after {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--ba-blue);
}
.log__entry:first-child::after {
    background: var(--ba-green);
    border-color: var(--ba-green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .2);
    animation: logPulse 2.2s ease-in-out infinite;
}
@keyframes logPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); }
    50%      { box-shadow: 0 0 0 7px rgba(22, 163, 74, .08); }
}

.log__body {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 18px 16px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.log__entry:hover .log__body {
    border-color: var(--ba-blue);
    transform: translateX(3px);
}
.log__title {
    font-family: var(--font-display); font-weight: 600;
    color: var(--dark-slate); font-size: 14.5px;
    margin-bottom: 6px;
}
.log__text { font-size: 13px; color: var(--slate); line-height: 1.6; }


/* ============ Footer ============ */

.footer {
    margin-top: clamp(48px, 7vw, 80px);
    background: var(--dark-slate);
    color: rgba(255, 255, 255, .82);
    position: relative;
}
.footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 40px) var(--container-pad);
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 760px) {
    .footer__inner {
        grid-template-columns: 2fr 1.4fr 1fr;
        gap: 32px;
    }
}

.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__logo-chip {
    background: var(--white);
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.footer__logo {
    height: 32px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}
.footer__brand-name {
    font-family: var(--font-display); font-weight: 600;
    color: var(--white); font-size: 15px;
    margin-bottom: 2px;
}
.footer__brand-sub { font-size: 12px; color: rgba(255, 255, 255, .6); }

.footer__contact-name {
    font-family: var(--font-display); font-weight: 600;
    color: var(--white); font-size: 14px;
    margin-bottom: 2px;
}
.footer__contact-role { font-size: 11.5px; color: rgba(255, 255, 255, .6); }

.footer__meta-line {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 4px;
}
.footer__meta-line:last-child { margin-bottom: 0; }

.footer__bar {
    height: 4px;
    background: linear-gradient(90deg, var(--ba-blue) 0 55%, var(--ba-orange) 55% 100%);
}


/* ============ Toast ============ */

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--dark-slate);
    color: var(--white);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    z-index: 100;
    max-width: calc(100vw - 32px);
}
.toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ============ Reveal animations (JS-enabled only) ============ */

/* With JS active, pre-reveal sections are hidden and .is-in-view brings them up.
   Without JS there is no .js class on <html>, so all content stays visible. */

.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
}
.js .reveal.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Cascading children inside revealed sections */
.js .reveal .card,
.js .reveal .check,
.js .reveal .step,
.js .reveal .beyond__item,
.js .reveal .next-card,
.js .reveal .payment,
.js .reveal .need,
.js .reveal .log__entry,
.js .reveal .quicklink,
.js .reveal .email-row:not(.email-row--head) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js .reveal.is-in-view .card.is-in-view,
.js .reveal.is-in-view .check.is-in-view,
.js .reveal.is-in-view .step.is-in-view,
.js .reveal.is-in-view .beyond__item.is-in-view,
.js .reveal.is-in-view .next-card.is-in-view,
.js .reveal.is-in-view .payment.is-in-view,
.js .reveal.is-in-view .need.is-in-view,
.js .reveal.is-in-view .log__entry.is-in-view,
.js .reveal.is-in-view .quicklink.is-in-view,
.js .reveal.is-in-view .email-row:not(.email-row--head).is-in-view {
    opacity: 1;
    transform: translateY(0);
}


/* ============ Focus ring ============ */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ba-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .js .reveal,
    .js .reveal .card,
    .js .reveal .check,
    .js .reveal .step,
    .js .reveal .beyond__item,
    .js .reveal .next-card,
    .js .reveal .payment,
    .js .reveal .need,
    .js .reveal .log__entry,
    .js .reveal .quicklink,
    .js .reveal .email-row:not(.email-row--head) {
        opacity: 1;
        transform: none;
    }
    .check__icon circle,
    .check__icon path { stroke-dashoffset: 0; }
}


/* ============ Print ============ */

@media print {
    body { background: var(--white); }
    .topbar, .quicklinks, .footer__bar, .toast, .scroll-progress { display: none; }
    .card__copy, .email-copy { display: none; }
    .hero__stamp { width: 140px; animation: none; }
    .card, .check, .step, .need, .log__body, .payment__body, .next-card, .beyond__item {
        box-shadow: none;
        page-break-inside: avoid;
    }
    .section { padding: 24px 0; }
    .js .reveal { opacity: 1; transform: none; }
    .check__icon circle, .check__icon path { stroke-dashoffset: 0; }
}