.home {
    --fx-green-900: #0B3D2E; --fx-green-800: #0F4F3B; --fx-accent: #F2B705;
    --fx-accent-hover: #FFCA2C; --fx-ink: #1B2420; --fx-footer-text: #B9C9C1;
}
/* ===== Home page (uses the --fx-* tokens from style.css) ===== */
.home {
    --soft: #F6F8F7;
    --line: #e0e8e4;
    --muted: #5a6761;
    --mint: #E3F1EA;
    font-family: "DM Sans", system-ui, sans-serif;
}
.home h1, .home h2, .home h3, .home h4 {
    font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif;
    color: var(--fx-green-900);
    letter-spacing: -0.02em;
}
.home .section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.home .section-title { font-size: clamp(1.75rem, 3.5vw, 2.4rem); font-weight: 700; }
.home .section-intro { max-width: 36rem; color: var(--muted); font-size: 1.1rem; }
.bg-soft { background: var(--soft); }

/* ---- Buttons (btn-accent was missing before) ---- */
.btn-accent, .btn-fx-dark {
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-accent {
    --bs-btn-color: var(--fx-ink);
    --bs-btn-bg: var(--fx-accent);
    --bs-btn-border-color: var(--fx-accent);
    --bs-btn-hover-color: var(--fx-ink);
    --bs-btn-hover-bg: #FFD54F;
    --bs-btn-hover-border-color: #FFD54F;
    --bs-btn-active-color: var(--fx-ink);
    --bs-btn-active-bg: #E0A800;
    --bs-btn-active-border-color: #E0A800;
    --bs-btn-focus-shadow-rgb: 242, 183, 5;
    font-weight: 700;
}
.btn-accent:hover, .btn-accent:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(242, 183, 5, 0.45), 0 0 0 4px rgba(242, 183, 5, 0.25);
}
.btn-accent:active, .btn-fx-dark:active { transform: none; box-shadow: none; }
.btn-fx-dark {
    --bs-btn-color: #fff; --bs-btn-bg: var(--fx-green-900); --bs-btn-border-color: var(--fx-green-900);
    --bs-btn-hover-color: var(--fx-accent); --bs-btn-hover-bg: #14664D; --bs-btn-hover-border-color: #14664D;
    --bs-btn-active-bg: #14664D;
    font-weight: 600;
}
.btn-fx-dark:hover, .btn-fx-dark:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11, 61, 46, 0.3); }
.home .btn-outline-dark {
    --bs-btn-color: var(--fx-green-900); --bs-btn-border-color: var(--fx-green-900);
    --bs-btn-hover-bg: var(--fx-green-900); --bs-btn-hover-border-color: var(--fx-green-900);
    font-weight: 600;
}

/* ---- Hero ---- */
.hero-split {
    position: relative; overflow: hidden;
    background: radial-gradient(60rem 30rem at 0% 0%, var(--mint) 0%, transparent 60%), var(--soft);
}
.hero-split::before {   /* faint dot grid behind the copy */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(15, 79, 59, 0.1) 1.3px, transparent 1.4px); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 65%); mask-image: linear-gradient(90deg, #000, transparent 65%);
}
.hero-split .row { position: relative; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 3rem 1.5rem 2rem; }
.hero-pill {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--mint); color: var(--fx-green-800); font-weight: 600; font-size: 0.9rem;
    padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.pill-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fx-accent); box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.3); }
.hero-title { font-size: clamp(3rem, 8vw, 5.4rem); font-weight: 700; line-height: 1; margin-bottom: 1rem; }
.hero-sub { font-family: "Space Grotesk", sans-serif; font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 600; color: var(--fx-ink); margin-bottom: 1.25rem; }
.hero-text { color: #4d5b55; font-size: 1.1rem; line-height: 1.7; max-width: 32rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero-note { margin: 1.25rem 0 0; font-size: 0.95rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; }
.hero-note i { color: var(--fx-green-800); font-size: 1.1rem; }


/* photo with a floating quote card */
.hero-visual { position: relative; display: flex; flex-direction: column; padding: 0.5rem 1.25rem 3.25rem; }
.hero-photo { position: relative; flex: 1; min-height: 360px; border-radius: 1.75rem; overflow: hidden; box-shadow: 0 24px 50px rgba(11, 61, 46, 0.2); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero-float {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1.05rem; background: #fff; border-radius: 1rem; box-shadow: 0 14px 34px rgba(11, 61, 46, 0.25);
}
.hero-float strong { display: block; line-height: 1.2; color: var(--fx-green-900); }
.hero-quote { left: 0.5rem; bottom: 1.25rem; max-width: 20rem; animation: float 6s ease-in-out infinite; }
.hero-quote div > span { font-size: 0.88rem; color: var(--muted); }
.float-icon { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; display: grid; place-items: center; font-size: 1.25rem; background: var(--fx-accent); color: var(--fx-ink); }
@keyframes float { 50% { transform: translateY(-8px); } }

/* one orchestrated entrance: hero copy rises in once on page load */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero-copy > :nth-child(5) { animation-delay: 0.32s; }
.hero-copy > :nth-child(6) { animation-delay: 0.4s; }

@media (min-width: 992px) {
    .hero-copy { padding: 4.5rem 3.5rem 6rem max(1.5rem, calc((100vw - 1320px) / 2 + 0.75rem)); }
    .hero-visual { padding: 2.5rem max(1.5rem, calc((100vw - 1320px) / 2 + 0.75rem)) 5.5rem 0; }
    .hero-split .row { min-height: 640px; }
    .hero-quote { left: -2rem; bottom: 8rem; }
}




/* ---- How it works: dark band, line fills and steps light up in order ---- */
.how { background: var(--fx-green-900); color: #cfe0d7; position: relative; overflow: hidden; }
.how::before {
    content: ""; position: absolute; right: -8rem; bottom: -14rem; width: 36rem; height: 36rem;
    background: radial-gradient(circle, rgba(242, 183, 5, 0.14), transparent 62%); pointer-events: none;
}
.home .how h2, .home .how h3 { color: #fff; }
.home .how .section-intro { color: #b9cbc2; }
.how .container { position: relative; }

.steps { --gap: 1.25rem; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.step { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; list-style: none; transition: opacity 0.4s ease; }
.how.is-animating .step:not(.is-active) { opacity: 0.45; }

/* connector between nodes: grey track (::before) and yellow fill (::after) */
.step:not(:last-child)::before, .step:not(:last-child)::after {
    content: ""; position: absolute; left: 1.75rem; top: 3.5rem; bottom: calc(var(--gap) * -1);
    width: 3px; margin-left: -1.5px; border-radius: 2px;
}
.step:not(:last-child)::before { background: rgba(255, 255, 255, 0.18); }
.step:not(:last-child)::after {
    background: var(--fx-accent); transform: scaleY(0); transform-origin: top;
    transition: transform 0.55s ease;
}
.step.is-done:not(:last-child)::after { transform: scaleY(1); }

.step-node {
    position: relative; z-index: 1; width: 3.5rem; height: 3.5rem; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.45rem; color: #fff;
    background: var(--fx-green-800); border: 2px solid rgba(255, 255, 255, 0.28);
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.step-count {
    position: absolute; top: -0.35rem; right: -0.35rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: grid; place-items: center; background: #fff; color: var(--fx-green-900);
    font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.78rem;
}
.step-body {
    padding: 1.1rem 1.2rem; border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}
.step h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.35rem; }
.step p { margin: 0; color: #cfe0d7; line-height: 1.55; }

.step.is-active .step-node {
    background: var(--fx-accent); border-color: var(--fx-accent); color: var(--fx-ink);
    transform: scale(1.08); animation: node-ring 0.9s ease-out 1;
}
.step.is-active .step-node i { animation: icon-pop 0.5s ease 1; }
.step.is-active .step-body { background: rgba(255, 255, 255, 0.1); border-color: rgba(242, 183, 5, 0.55); }
.step:hover .step-body, .step:focus-within .step-body { transform: translateY(-4px); }

@keyframes node-ring { from { box-shadow: 0 0 0 0 rgba(242, 183, 5, 0.6); } to { box-shadow: 0 0 0 1rem rgba(242, 183, 5, 0); } }
@keyframes icon-pop { 0% { transform: scale(0.5); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

@media (min-width: 768px) {
    .steps { --gap: 1.5rem; grid-template-columns: repeat(4, 1fr); }
    .step { display: block; text-align: center; }
    .step-node { margin-inline: auto; }
    .step-body { margin-top: 1.25rem; height: calc(100% - 4.75rem); }
    .step:not(:last-child)::before, .step:not(:last-child)::after {
        left: 50%; top: 1.75rem; bottom: auto; margin-left: 0; margin-top: -1.5px;
        width: calc(100% + var(--gap)); height: 3px;
    }
    .step:not(:last-child)::after { transform: scaleX(0); transform-origin: left; }
    .step.is-done:not(:last-child)::after { transform: scaleX(1); }
}

/* ---- Category picker ---- */
.picker-grid { display: grid; gap: 1.25rem; }
@media (min-width: 992px) { .picker-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; } }
.picker-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; align-content: start; }
@media (min-width: 992px) { .picker-tabs { grid-template-columns: 1fr; } }
.picker-tab {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1rem;
    background: #fff; border: 1px solid var(--line); border-radius: 0.9rem;
    font: inherit; font-weight: 600; text-align: left; color: var(--fx-ink); cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.picker-tab > i:first-child { flex: none; width: 1.6rem; text-align: center; font-size: 1.35rem; color: var(--fx-green-800); transition: color 0.2s ease; }
.picker-tab:hover { border-color: var(--fx-green-800); }
.picker-tab.is-active { background: var(--fx-green-900); border-color: var(--fx-green-900); color: #fff; }
.picker-tab.is-active > i:first-child { color: var(--fx-accent); }
.tab-arrow { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.picker-tab.is-active .tab-arrow { opacity: 1; transform: none; color: var(--fx-accent); }
@media (max-width: 991.98px) { .tab-arrow { display: none; } .picker-tab { font-size: 0.92rem; padding: 0.8rem; } }

.picker-panel {
    position: relative; overflow: hidden; height: 100%; min-height: 20rem;
    display: flex; flex-direction: column; align-items: flex-start;
    background: #fff; border: 1px solid var(--line); border-radius: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 14px 34px rgba(11, 61, 46, 0.08);
}
.picker-panel[hidden] { display: none; }
.picker-panel:not([hidden]) { animation: panel-in 0.35s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.picker-panel > :not(.panel-mark) { position: relative; z-index: 1; }
.panel-mark { position: absolute; right: -1rem; bottom: -2.2rem; font-size: 12rem; line-height: 1; color: var(--mint); pointer-events: none; }
.picker-panel h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; margin-bottom: 0.5rem; }
.panel-sub { color: var(--muted); margin: 0; }
.chips { list-style: none; padding: 0; margin: 0.9rem 0 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { background: var(--mint); color: var(--fx-green-900); font-weight: 600; font-size: 0.95rem; padding: 0.4rem 0.95rem; border-radius: 999px; }
.panel-note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--muted); }

/* ---- Report your way: selector + phone demo ---- */
.mode-list { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.mode-btn {
    display: flex; gap: 1rem; align-items: flex-start; width: 100%; text-align: left;
    padding: 1rem 1.1rem; background: #fff; color: var(--fx-ink); font: inherit; cursor: pointer;
    border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mode-btn strong { display: block; font-size: 1.08rem; }
.mode-btn small { display: block; margin-top: 0.15rem; font-size: 0.95rem; color: var(--muted); }
.mode-ic {
    flex: none; width: 2.8rem; height: 2.8rem; border-radius: 0.8rem; display: grid; place-items: center;
    font-size: 1.3rem; background: var(--mint); color: var(--fx-green-800); transition: background-color 0.2s ease, color 0.2s ease;
}
.mode-btn:hover { border-color: var(--fx-green-800); border-left-color: var(--fx-green-800); }
.mode-btn.is-active { border-color: var(--fx-green-900); border-left-color: var(--fx-accent); box-shadow: 0 10px 24px rgba(11, 61, 46, 0.12); transform: translateX(4px); }
.mode-btn.is-active .mode-ic { background: var(--fx-green-900); color: var(--fx-accent); }

.phone-wrap { display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(circle at 50% 45%, var(--mint), transparent 70%); border-radius: 2rem; }
.phone { width: min(19rem, 100%); padding: 0.7rem; background: var(--fx-green-900); border-radius: 2.2rem; box-shadow: 0 26px 50px rgba(11, 61, 46, 0.3); }
.phone-screen { display: flex; flex-direction: column; min-height: 25rem; background: #fff; border-radius: 1.6rem; overflow: hidden; }
.phone-top { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.1rem 0.8rem; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--fx-green-900); }
.phone-top i { color: var(--fx-green-800); }
.phone-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.1rem; }
.phone-send { margin: 0 1.1rem 1.1rem; padding: 0.7rem; border-radius: 0.8rem; background: var(--fx-accent); color: var(--fx-ink); font-weight: 700; text-align: center; }
.view[hidden] { display: none; }
.view:not([hidden]) { animation: panel-in 0.3s ease; }
.view-label { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.bubble { min-height: 6rem; padding: 0.95rem 1rem; border-radius: 1rem 1rem 1rem 0.25rem; background: var(--mint); color: var(--fx-green-900); line-height: 1.5; }
.typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--fx-green-800); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.mic-pulse { width: 3.6rem; height: 3.6rem; margin: 0.5rem auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--fx-green-900); color: var(--fx-accent); animation: mic-ring 1.6s ease-out infinite; }
@keyframes mic-ring { from { box-shadow: 0 0 0 0 rgba(15, 79, 59, 0.4); } to { box-shadow: 0 0 0 1.2rem rgba(15, 79, 59, 0); } }
.wave { display: flex; align-items: center; justify-content: center; gap: 0.3rem; height: 5rem; }
.wave span { width: 0.32rem; height: 18%; border-radius: 2px; background: var(--fx-green-800); animation: wave 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); }
@keyframes wave { 50% { height: 100%; } }

.finder { position: relative; height: 13rem; display: grid; place-items: center; border-radius: 1rem; background: linear-gradient(160deg, #1d4a3c, var(--fx-green-900)); overflow: hidden; }
.finder > i { font-size: 2.6rem; color: rgba(255, 255, 255, 0.3); }
.frame { position: absolute; inset: 0.9rem; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 0.6rem; }
.rec { position: absolute; top: 1.3rem; left: 1.5rem; z-index: 1; display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.rec::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff5a5a; animation: blink 1s steps(2) infinite; }

.promise-strip {
    display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--fx-green-900); color: #dfeae4; border-radius: 1.5rem; border-top: 5px solid var(--fx-accent);
}
.promise-strip h3 { color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0; }
.promise-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
.promise-strip li { display: flex; gap: 0.6rem; line-height: 1.45; }
.promise-strip li i { color: var(--fx-accent); margin-top: 0.15rem; }
@media (min-width: 576px) { .promise-strip ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .promise-strip { grid-template-columns: 13rem 1fr; align-items: center; } }
@media (min-width: 1200px) { .promise-strip ul { grid-template-columns: repeat(4, 1fr); } }

/* ---- FAQ ---- */
.faq .accordion { --bs-accordion-bg: #fff; --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(242, 183, 5, 0.45); }
.faq .accordion-item,
.faq .accordion-item:not(:first-of-type) {
    border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; margin-bottom: 0.75rem;
}
.faq .accordion-button { font-weight: 600; font-size: 1.05rem; color: var(--fx-green-900); padding: 1.1rem 1.25rem; }
.faq .accordion-button:not(.collapsed) { background: var(--mint); color: var(--fx-green-900); box-shadow: none; }
.faq .accordion-body { color: var(--muted); padding: 1.1rem 1.25rem 1.25rem; }
.faq h3 { font-family: inherit; letter-spacing: normal; margin: 0; }

/* ---- Final calls to action ---- */
.cta-band { background: #fff; border-top: 1px solid #e4eae7; }
.cta-box {
    background: var(--soft); border: 1px solid var(--line); border-radius: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.5rem); height: 100%;
}
.cta-box.cta-main { background: var(--fx-green-900); border-color: var(--fx-green-900); color: #dfeae4; }
.cta-box h2 { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.6rem; }
.cta-box.cta-main h2 { color: #fff; }
.cta-box p { margin-bottom: 1.4rem; }

/* ---- Mobile sticky button (shown by home.js after the hero) ---- */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
}
.sticky-cta.is-shown { transform: none; visibility: visible; }
@media (min-width: 992px) { .sticky-cta { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .hero-copy > * { animation: none; }
    .category-card, .cat-arrow, .sticky-cta { transition: none; }
    .category-card:hover { transform: none; }
    .btn-accent, .btn-fx-dark, .step, .step::after, .step-node, .step-body { transition: none; }
    .btn-accent:hover, .btn-fx-dark:hover, .step:hover .step-body { transform: none; }
    .step.is-active .step-node, .step.is-active .step-node i { animation: none; }
    .picker-panel:not([hidden]), .view:not([hidden]), .mic-pulse, .wave span, .typed::after, .rec::before { animation: none; }
    .picker-tab, .mode-btn, .tab-arrow { transition: none; }
    .mode-btn.is-active { transform: none; }
    .hero-float, .trust-ic { animation: none; }
}


/* =========================================================
   Trust bar
   base    : plain stacked cards (no JS, or reduced motion)
   phones  : story-style single card + progress segments
   tablet  : 2 x 2 card     desktop: one row of four
   ========================================================= */
.tp {
    --tp-dur: 4.5s;                 /* how long each item stays on screen */
    position: relative;
    z-index: 2;
    padding-top: 1.25rem;
}

/* ---------- Base (also the no-JS fallback) ---------- */
.tp-list {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    touch-action: pan-y;            /* vertical scrolling still works while swiping sideways */
}
.tp-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    box-shadow: 0 8px 22px rgba(11, 61, 46, .07);
}

.tp-ic {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    font-size: 1.3rem;
    background: var(--mint);
    color: var(--fx-green-800);
    transition: background-color .35s ease, color .35s ease;
}
.tp-ic i { display: inline-block; line-height: 1; }

/* the ring that draws itself around the active icon */
.tp-ring {
    position: absolute;
    inset: -.4rem;
    width: calc(100% + .8rem);
    height: calc(100% + .8rem);
    transform: rotate(-90deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}
.tp-ring circle { fill: none; stroke-width: 2.5; }
.tp-ring-track { stroke: rgba(15, 79, 59, .12); }
.tp-ring-bar {
    stroke: var(--fx-accent);
    stroke-linecap: round;
    stroke-dasharray: 126;          /* circle length: 2 x pi x 20 */
    stroke-dashoffset: 126;
}

.tp-text { display: block; min-width: 0; }
.tp-text strong {
    display: block;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--fx-green-900);
    text-wrap: balance;
}
.tp-text span {
    display: block;
    margin-top: .2rem;
    font-size: .88rem;
    line-height: 1.35;
    color: #5f6c66;
}

/* progress segments: built by home.js, phones only */
.tp-seg { display: none; }

/* ---------- Tablets: one card, 2 x 2 ---------- */
@media (min-width: 768px) {
    .tp-list {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 1.5rem;
        box-shadow: 0 12px 32px rgba(11, 61, 46, .08);
    }
    .tp-item {
        padding: 1.3rem 1.4rem;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .tp-item:nth-child(odd)  { border-right: 1px solid var(--line); }
    .tp-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Desktop: one row of four, overlapping the hero ---------- */
@media (min-width: 992px) {
    .tp { padding-top: 0; }
    .tp-list { grid-template-columns: repeat(4, 1fr); margin-top: -3rem; }
    .tp-item { padding: 1.5rem; border-right: 1px solid var(--line); }
    .tp-item:last-child { border-right: 0; }
}

/* =========================================================
   Enhanced mode (home.js adds .tp-js)
   ========================================================= */

/* the whole bar rises into view the first time it is seen */
.tp-js .tp-list {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.tp-js.tp-in .tp-list { opacity: 1; transform: none; }

/* the active item: filled icon, drawing ring, soft highlight */
.tp-js .tp-item { transition: background-color .4s ease, opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.tp-js .tp-item.is-active .tp-ic { background: var(--fx-green-900); color: var(--fx-accent); }
.tp-js .tp-item.is-active .tp-ring { opacity: 1; }
.tp-js .tp-item.is-active .tp-ring-bar { animation: tp-ring-fill var(--tp-dur) linear forwards; }
@keyframes tp-ring-fill { to { stroke-dashoffset: 0; } }

@media (min-width: 768px) {
    .tp-js .tp-item.is-active {
        background: linear-gradient(180deg, rgba(227, 241, 234, .9), rgba(227, 241, 234, .2));
    }
}

/* each icon makes its own small entrance when its turn comes */
.tp-js .tp-item.is-active .tp-ic i { animation: tp-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.tp-js .tp-item:nth-child(2).is-active .tp-ic i { animation-name: tp-wiggle; }
.tp-js .tp-item:nth-child(3).is-active .tp-ic i { animation-name: tp-drop; }
.tp-js .tp-item:nth-child(4).is-active .tp-ic i { animation-name: tp-snap; }

@keyframes tp-pop    { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tp-wiggle { 0% { transform: rotate(-40deg) scale(.6); opacity: 0; } 50% { transform: rotate(18deg) scale(1.15); opacity: 1; } 75% { transform: rotate(-8deg); } 100% { transform: none; } }
@keyframes tp-drop   { 0% { transform: translateY(-14px); opacity: 0; } 60% { transform: translateY(3px); opacity: 1; } 100% { transform: none; } }
@keyframes tp-snap   { 0% { transform: scale(1.6); opacity: 0; } 55% { transform: scale(.88); opacity: 1; } 100% { transform: none; } }

/* paused while off-screen, hovered, touched or keyboard-focused */
.tp-js.is-paused .tp-ring-bar,
.tp-js.is-paused .tp-seg-btn i { animation-play-state: paused; }

/* ---------- Phones: one card at a time ---------- */
@media (max-width: 767.98px) {
    .tp-js .tp-list { gap: 0; }
    .tp-js .tp-item {
        grid-area: 1 / 1;           /* all four cards stacked in the same spot */
        opacity: 0;
        transform: translateY(12px) scale(.98);
        pointer-events: none;
    }
    .tp-js .tp-item.is-active { opacity: 1; transform: none; pointer-events: auto; }

    .tp-js .tp-seg { display: flex; gap: .4rem; padding: .3rem .25rem 0; }
    .tp-seg-btn {
        position: relative;
        flex: 1;
        height: 1.5rem;             /* comfortable tap target */
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .tp-seg-btn::before,
    .tp-seg-btn i {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 4px;
        margin-top: -2px;
        border-radius: 2px;
    }
    .tp-seg-btn::before { background: rgba(15, 79, 59, .15); }
    .tp-seg-btn i {
        background: var(--fx-green-900);
        transform: scaleX(0);
        transform-origin: left;
    }
    .tp-seg-btn.is-done i { transform: none; }
    .tp-seg-btn.is-active i { animation: tp-seg-fill var(--tp-dur) linear forwards; }
    .tp-seg-btn:focus-visible { outline: 3px solid var(--fx-accent); outline-offset: 2px; border-radius: 4px; }
}
@keyframes tp-seg-fill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .tp *, .tp *::before { animation: none !important; transition: none !important; }
}