/* ==========================================================================
   Sierra Action Planner — marketing HOME page styles (served at /).
   Self-contained: this page loads ONLY this file (not the ~99KB planner.css),
   so the shared header/beta-bar rules are duplicated below.
   KEEP IN SYNC with planner.css: :root 1-33, .beta-bar 58-67,
   .site-header/.sh-* 72-144, .sh-tabs/.sh-tab 856-861,
   .sh-menu* 863-887.
   ========================================================================== */

:root {
    /* New Sierra editorial palette (2026 redesign) — mirrors planner.css :root */
    --forest-green: #163C2E;
    --green-2: #1E4636;
    --green-mid: #24614A;
    --green-deep: #102D22;
    --cedar-accent: #B4552F;
    --cedar-2: #B25E3B;
    --gold: #C7913F;
    --gold-soft: #EBCB8F;
    --alert-amber: #9A7B34;

    --light-bg: #F1EBDF;
    --card: #FFFDF8;
    --card-2: #FBF7EE;
    --cream: #FCF4EA;
    --dark-text: #211E1A;
    --ink-soft: #5C564C;
    --muted: #726C61;
    --muted-2: #8A8172;
    --faint: #A69C89;

    --border: #E9E1D2;
    --border-2: #DDD3C1;
    --border-soft: #F0E9DA;
    --green-tint: #EAF1EA;
    --green-tint-border: #CFE0D3;

    --radius-card: 20px;
    --shadow-card: 0 1px 2px rgba(20,40,30,0.04), 0 20px 40px -34px rgba(20,40,30,0.4);
    --shadow-soft: 0 6px 16px -8px rgba(20,52,42,0.4);
    --maxw: 1180px;

    /* Home-only additions (from the design handoff) */
    --hero-base: #1A2E1A;           /* reused from the live planner hero */
    --green-darkest: #12301F;
    --sage: #9CC0AB;
    --cedar-light: #D99B72;
    --cream-alt: #EFE7D8;
    --hairline: #E2D9C8;
    --gold-panel-bg: #FBF3E4;
    --gold-panel-border: #EAD5AC;
    --gold-panel-text: #8A5A17;
    --on-dark: #F3EDE0;
    --on-dark-soft: #CFD8CF;
    --on-dark-body: #C6D0C7;
    --on-dark-heading: #FBF7EE;
    --shadow-card-lg: 0 1px 2px rgba(20,40,30,0.04), 0 24px 48px -34px rgba(20,40,30,0.4);
    --shadow-dark-card: 0 30px 56px -32px rgba(16,45,34,0.9);
    --shadow-cedar-btn: 0 16px 34px -14px rgba(180,85,47,0.95);
}

/* Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Figtree', system-ui, -apple-system, sans-serif;
    color: var(--dark-text);
    background: var(--light-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--green-mid); text-decoration: none; }
a:hover { color: var(--forest-green); }
input, button { font-family: inherit; }
::selection { background: var(--cedar-accent); color: #fff; }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.home-page section[id] { scroll-margin-top: 78px; }

/* ==========================================================================
   Beta strip + sticky header (duplicated verbatim from planner.css)
   ========================================================================== */
.beta-bar {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--forest-green); color: #fff; font-size: 13px; font-weight: 600;
    padding: 8px 14px; text-align: center; line-height: 1.35;
}
.beta-bar .beta-tag {
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    background: var(--gold); color: #33240a; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(241,235,223,0.82);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(20,52,42,0.10);
}
.sh-inner {
    /* 1360px, NOT var(--maxw). --maxw (1180) is the reading width for this
       page's prose; the header bar is chrome and every other page gives it
       1360 (planner.css .sh-inner). Inheriting the article width squeezed the
       same header contents into 180px less room, which is what made this one
       page look cramped once the audience switcher joined the row. */
    max-width: 1360px; margin: 0 auto; padding: 10px clamp(16px, 4vw, 32px);
    display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative;
}
/* flex-shrink: 0 matches planner.css. Without it the brand absorbs the whole
   squeeze — it was rendering 120px narrower here than on every other page. */
.sh-brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex-shrink: 0; }
.sh-logo { border-radius: 11px; padding: 6px 11px; display: flex; align-items: center; box-shadow: var(--shadow-soft); background: #fff; flex-shrink: 0; }
.sh-logo img { display: block; height: 26px; width: auto; }
.sh-titles { line-height: 1.05; min-width: 0; }
.sh-title { display: block; font-family: 'Newsreader', serif; font-size: 16px; font-weight: 600; color: var(--forest-green); white-space: nowrap; }
.sh-sub { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.sh-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sh-phone { display: none; align-items: center; font-size: 13.5px; font-weight: 600; color: #3E5A4E; padding: 9px 12px; border-radius: 999px; }
.sh-store-link { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 8px 10px; border-radius: 999px; white-space: nowrap; text-decoration: none; transition: background 0.15s, color 0.15s; }
.sh-store-link:hover { color: var(--forest-green); background: rgba(20,52,42,0.06); }
@media (max-width: 1240px) { .sh-nav { display: none; } }
.sh-login {
    background: transparent; border: 1.5px solid rgba(20,52,42,0.22); color: var(--green-2);
    border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
    min-height: 42px; font-family: inherit; text-decoration: none;
    display: inline-flex; align-items: center;
    transition: background 0.15s, border-color 0.15s;
}
.sh-login:hover { background: rgba(20,52,42,0.06); }
.sh-login[hidden] { display: none; }
.sh-cta {
    background: var(--cedar-accent); border: none; color: var(--cream); border-radius: 999px;
    padding: 9px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; min-height: 42px;
    font-family: inherit; text-decoration: none; display: inline-flex; align-items: center;
    box-shadow: 0 8px 20px -10px rgba(20,52,42,0.9); transition: background 0.15s, transform 0.15s;
}
.sh-cta:hover { background: #9c4526; transform: translateY(-1px); }
@media (min-width: 620px) { .sh-phone { display: inline-flex; } }

.sh-tabs { display: inline-flex; gap: 4px; background: rgba(20,52,42,0.08); border-radius: 999px; padding: 4px; flex-shrink: 0; }
.sh-tab { border: none; background: transparent; color: #3E5A4E; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 38px; text-decoration: none; display: inline-flex; align-items: center; transition: background 0.15s, color 0.15s; }
.sh-tab:hover { color: var(--forest-green); }
.sh-tab.is-active { background: var(--forest-green); color: #F6F1E7; box-shadow: 0 2px 6px -2px rgba(16,45,34,0.5); }
.sh-tab.is-active:hover { color: #fff; }

.sh-menu-btn { display: none; background: transparent; border: 1.5px solid rgba(20,52,42,0.22); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; flex-shrink: 0; align-items: center; justify-content: center; }
@media (max-width: 1240px) { .sh-menu-btn { display: inline-flex; } }
.sh-menu-bars { position: relative; }
.sh-menu-bars, .sh-menu-bars::before, .sh-menu-bars::after { content: ''; display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--green-2); }
.sh-menu-bars::before { position: absolute; top: -5px; left: 0; }
.sh-menu-bars::after { position: absolute; top: 5px; left: 0; }
.sh-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 59; background: rgba(247,242,232,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(20,52,42,0.12); box-shadow: 0 24px 40px -24px rgba(16,45,34,0.4); padding: 8px clamp(14px,4vw,32px) 16px; display: grid; gap: 2px; }
.sh-menu[hidden] { display: none; }
.shm-link { display: flex; align-items: center; min-height: 46px; padding: 10px 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid rgba(20,52,42,0.07); background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; font-family: inherit; width: 100%; }
.shm-link:hover { color: var(--forest-green); }
.shm-cta { justify-content: center; text-align: center; margin-top: 10px; border-bottom: none; color: var(--cream); }
@media (max-width: 768px) {
    .sh-inner { padding: 8px 14px; gap: 10px; }
    .sh-logo { padding: 4px 8px; }
    .sh-logo img { height: 22px; }
    .sh-title { font-size: 14.5px; }
    .sh-sub { display: none; }
    .sh-tab { padding: 7px 13px; font-size: 12.5px; min-height: 34px; }
}
@media (max-width: 480px) { .sh-titles { display: none; } }

/* ==========================================================================
   Shared home primitives
   ========================================================================== */
.home-band { }
.home-band--cream { background: var(--light-bg); }
.home-band--dark { background: var(--forest-green); color: var(--on-dark); position: relative; overflow: hidden; }
.home-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px,4.5vw,58px) clamp(16px,4vw,32px); position: relative; }
.home-intro { text-align: center; max-width: 42em; margin: 0 auto; }
.home-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cedar-accent); }
.home-eyebrow--gold { color: var(--gold-soft); }
.home-eyebrow--green { color: var(--green-mid); }
.home-h2 { font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(25px,3.4vw,38px); color: var(--forest-green); margin: 10px 0 0; line-height: 1.15; }
.home-h2--light { color: var(--on-dark-heading); }
.home-h2--sub { font-size: clamp(23px,3vw,33px); }
.home-lead { font-size: clamp(15px,1.7vw,18px); line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; }
.home-lead--light { color: var(--on-dark-body); }
.home-sub { font-size: clamp(14.5px,1.6vw,17px); line-height: 1.6; color: var(--on-dark-body); margin: 14px 0 0; }

.home-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--cedar-accent); color: var(--cream); border: none; border-radius: 12px; padding: 16px 26px; font-size: 15px; font-weight: 800; min-height: 54px; cursor: pointer; box-shadow: var(--shadow-cedar-btn); transition: background 0.15s, transform 0.15s; }
.home-btn-primary:hover { background: #9c4526; color: var(--cream); transform: translateY(-1px); }
.home-btn-ghost-dark { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.28); color: var(--on-dark); border-radius: 12px; padding: 16px 24px; font-size: 15px; font-weight: 700; min-height: 54px; cursor: pointer; transition: background 0.15s; }
.home-btn-ghost-dark:hover { background: rgba(255,255,255,0.12); color: #fff; }
.home-btn-cedar-sm { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--cedar-accent); color: var(--cream); border-radius: 11px; padding: 12px 18px; font-size: 13.5px; font-weight: 800; min-height: 46px; box-shadow: 0 14px 28px -14px rgba(180,85,47,0.9); transition: background 0.15s, transform 0.15s; }
.home-btn-cedar-sm:hover { background: #9c4526; color: var(--cream); transform: translateY(-1px); }
.home-btn-ghost-sm { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.26); color: var(--on-dark); border-radius: 11px; padding: 12px 18px; font-size: 13.5px; font-weight: 700; min-height: 46px; }
.home-btn-ghost-sm:hover { background: rgba(255,255,255,0.14); color: #fff; }

.home-pill-gold { display: inline-flex; align-items: center; gap: 8px; background: rgba(199,145,63,0.16); border: 1px solid rgba(199,145,63,0.4); color: var(--gold-soft); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.home-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-card); padding: clamp(20px,2.6vw,26px); }
.home-card-h3 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 19px; color: var(--forest-green); margin: 12px 0 0; line-height: 1.2; }
.home-card-p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 8px 0 0; }

.home-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 16px; margin-top: 28px; }
.home-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; margin-top: 28px; }
.home-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(18px,2.5vw,24px); margin-top: 26px; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.home-hero {
    position: relative; background: var(--hero-base); color: var(--on-dark);
    overflow: hidden; isolation: isolate; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.home-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: url('/planner/models/hero-background.jpg') center / cover no-repeat;
    opacity: 0.5; pointer-events: none;
}
.home-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(105deg, rgba(20,36,20,0.96) 0%, rgba(20,36,20,0.88) 45%, rgba(20,36,20,0.45) 100%);
    pointer-events: none;
}
.home-glow-a { position: absolute; inset: -10%; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 22% 18%, rgba(199,145,63,0.26), transparent 46%);
    animation: slt-drift-a 26s ease-in-out infinite alternate; }

.home-hero-body { position: relative; z-index: 2; max-width: 900px; margin: 0 auto;
    padding: clamp(40px,6vw,64px) clamp(16px,4vw,32px) clamp(26px,4vw,44px); text-align: center;
    animation: slt-rise .7s ease both; }
.home-logo-tile { display: inline-block; background: #fff; border-radius: 10px; padding: 10px 24px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); margin-bottom: 20px; }
.home-logo-tile img { display: block; height: clamp(40px,6vw,56px); width: auto; }
.home-hero-h1 { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(32px,5.6vw,58px); line-height: 1.04; letter-spacing: -0.01em; margin: 18px 0 0; color: var(--on-dark-heading); }
.home-hero-h1 em { font-style: italic; color: var(--gold-soft); }
.home-hero-lead { font-size: clamp(16px,1.7vw,19px); line-height: 1.55; color: var(--on-dark); margin: 18px auto 0; max-width: 34em; font-weight: 600; }
.home-hero-text { font-size: clamp(14.5px,1.5vw,17px); line-height: 1.6; color: var(--on-dark-soft); margin: 12px auto 0; max-width: 38em; }
.home-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.home-hero-alt { font-size: 13.5px; line-height: 1.5; color: var(--on-dark-soft); margin: 16px 0 0; }
.home-hero-alt a { color: var(--gold-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.home-hero-alt a:hover { color: #fff; }

.home-marquee { position: relative; z-index: 2; padding: 0 0 clamp(24px,3.4vw,36px); }
.home-marquee-label { max-width: var(--maxw); margin: 0 auto 11px; padding: 0 clamp(16px,4vw,32px); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8FA394; font-weight: 600; }
.home-marquee-mask { overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.slt-marquee-track { display: flex; gap: 16px; width: max-content; animation: slt-marquee 40s linear infinite; padding: 0 8px; }
.slt-marquee-track:hover { animation-play-state: paused; }
.slt-marquee-track img { height: clamp(96px,13vw,140px); width: auto; border-radius: 12px; box-shadow: 0 14px 30px -16px rgba(0,0,0,0.75); flex: 0 0 auto; }

/* ==========================================================================
   1b. THE FOUR DOORS (#planners) + the fire band

   Sits between the dark hero and the cream "what is it" band. The gradient
   settles from --cream-alt to the page background so the two light bands
   below the hero do not read as one long slab; it is the same device
   .home-dome-band uses, not a new colour.

   .door-arc: every door draws the SAME path and differs only in
   stroke-dasharray (set inline in the HTML, because the dash rhythm IS the
   data — ten segments for ten phases, four for four plans, a fine dotted
   line for phases you define). Keep the path shared.
   ========================================================================== */
.home-doors { background: linear-gradient(180deg, var(--cream-alt), var(--light-bg)); border-bottom: 1px solid var(--hairline); }

.door-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
/* Two up, lead across the top; then three up with the lead given the extra
   room. The lead is wider rather than louder — same card, more column. */
@media (min-width: 760px) {
    .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .door--lead { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
    .door-grid { grid-template-columns: 1.3fr minmax(0, 1fr) minmax(0, 1fr); }
    .door--lead { grid-column: auto; }
}

.door {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    padding: clamp(20px, 2.6vw, 26px);
    box-shadow: var(--shadow-card);
    text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.door:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-lg); border-color: var(--border-2); color: inherit; }
.door:focus-visible { outline: 3px solid var(--cedar-accent); outline-offset: 3px; }
.door--lead { border-left: 4px solid var(--cedar-accent); }

.door-arc { display: block; width: 120px; height: 44px; overflow: visible; }
.door-arc path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.door--lead .door-arc path { stroke: var(--cedar-accent); }

.door-kicker { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-top: 16px; }
.door-h3 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 20px; color: var(--forest-green); margin: 8px 0 0; line-height: 1.2; }
.door--lead .door-h3 { font-size: clamp(21px, 2.2vw, 25px); }
.door-p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 9px 0 0; }
.door-meta { display: block; font-size: 12px; font-weight: 700; color: var(--green-mid); margin-top: 14px; }
.door-go { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 800; color: var(--cedar-accent); display: inline-flex; align-items: center; gap: 7px; transition: gap .18s ease; }
.door:hover .door-go { gap: 11px; }

/* The fire guide. Quiet on purpose: no cedar, no gold, no shadow, no lift on
   hover, and a bordered link rather than a filled button. See the note in
   index.html before making this match the cards above — it should not. */
.home-fire {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
    margin-top: 18px;
    background: var(--card-2); border: 1px solid var(--hairline); border-radius: 16px;
    padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
}
.home-fire-body { flex: 1 1 340px; min-width: 0; }
.home-fire-h { font-family: 'Newsreader', serif; font-weight: 600; font-size: 18px; color: var(--forest-green); margin: 0; line-height: 1.2; }
.home-fire-p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 7px 0 0; max-width: 54em; }
.home-fire-meta { font-size: 12px; color: var(--muted-2); margin: 8px 0 0; }
.home-fire-link {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
    background: var(--card); border: 1.5px solid var(--border-2); border-radius: 11px;
    padding: 11px 18px; font-size: 13.5px; font-weight: 700; color: var(--green-mid);
    transition: background .15s, border-color .15s;
}
.home-fire-link:hover { background: var(--green-tint); border-color: var(--green-tint-border); color: var(--green-2); }

/* The Builder Portal band. Green where the doors are cedar, and outside
   #planners rather than inside it — a different product for a different buyer,
   not a fifth planner. See the note in index.html before restyling it to match
   the cards above; it should not. */
.home-builders { background: var(--green-tint); border-top: 1px solid var(--green-tint-border); border-bottom: 1px solid var(--green-tint-border); }
.home-builders-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.home-builders-copy { flex: 1 1 420px; min-width: 0; }
.home-builders .home-h2 { margin-top: 8px; }
.home-builders .home-lead { margin-top: 10px; max-width: 46em; }
.home-builders-link {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 52px;
    background: var(--green-mid); border-radius: 12px; padding: 15px 24px;
    font-size: 14.5px; font-weight: 800; color: var(--cream);
    box-shadow: var(--shadow-soft); transition: background .15s ease, gap .18s ease;
}
.home-builders-link:hover { background: var(--forest-green); color: var(--cream); gap: 12px; }
.home-builders-link:focus-visible { outline: 3px solid var(--green-mid); outline-offset: 3px; }

/* ==========================================================================
   2. WHAT IT IS
   ========================================================================== */
.home-what-card { text-align: center; }
.home-num { width: 44px; height: 44px; border-radius: 12px; background: var(--green-tint); color: var(--green-2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; margin: 0 auto; }
.home-formula { margin-top: 22px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: clamp(20px,2.6vw,28px); text-align: center; }
.home-formula-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.home-formula-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 14px; }
.home-formula-row span { font-family: 'Newsreader', serif; font-size: clamp(18px,2.4vw,25px); font-weight: 600; color: var(--forest-green); }
.home-formula-row .op, .home-formula-row .res { color: var(--cedar-accent); }
.home-formula-cap { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 12px auto 0; max-width: 38em; }

/* ==========================================================================
   3. JOURNEY (dark)
   ========================================================================== */
.home-journey .home-glow-a { inset: -15%; z-index: 0; animation: slt-drift-a 30s ease-in-out infinite alternate; }
.home-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(16px,2.4vw,22px); margin-top: 30px; align-items: stretch; }
.home-step { position: relative; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: clamp(20px,2.6vw,26px); display: flex; flex-direction: column; text-align: center; }
.home-step--build { background: rgba(199,145,63,0.10); border-color: rgba(235,203,143,0.42); }
.home-step-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.home-step-h3 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 19px; color: var(--on-dark-heading); margin: 16px 0 0; line-height: 1.2; }
.home-step-p { font-size: 14px; line-height: 1.55; color: var(--on-dark-body); margin: 8px 0 0; }
.home-step-foot { margin-top: auto; padding-top: 16px; }
.home-step-art { margin: 16px auto 0; }
.home-chip-static { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: rgba(235,203,143,0.14); border: 1px solid rgba(235,203,143,0.4); color: var(--gold-soft); border-radius: 11px; padding: 12px 18px; font-size: 13.5px; font-weight: 700; min-height: 46px; }
.home-rail { margin-top: 20px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(156,192,171,0.75), #D99B72, #EBCB8F); overflow: hidden; position: relative; }
.home-rail > span { position: absolute; top: 0; bottom: 0; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: slt-sheen 4.5s ease-in-out infinite; }
.home-rail-caps { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 11.5px; font-weight: 700; color: #8FA394; }

/* Explore CSS-phone */
.home-phone-mini { width: 104px; aspect-ratio: 9/16; border-radius: 16px; border: 2px solid rgba(255,255,255,0.22); background: #0D2419; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 20px 40px -22px rgba(0,0,0,0.85); }
.home-phone-notch { width: 30px; height: 3px; border-radius: 999px; background: #3A5145; margin: 2px auto 5px; }
.home-phone-screen { flex: 1; border-radius: 9px; background: var(--card); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.home-fp-cell { border: 1.5px solid #C9BCA3; border-radius: 2px; position: relative; }
/* Activate document card */
.home-doc { width: 100%; max-width: 170px; aspect-ratio: 1/1; max-height: 180px; border-radius: 14px; background: linear-gradient(150deg,#FFFDF8,#EFE7D8); border: 1px solid rgba(255,255,255,0.3); padding: 14px; display: flex; flex-direction: column; gap: 6px; justify-content: center; box-shadow: 0 20px 40px -22px rgba(0,0,0,0.85); }
.home-doc-line { height: 7px; border-radius: 999px; background: #DCD2BF; }
/* Build dome */
.home-dome-art { width: 100%; max-width: 180px; aspect-ratio: 1/1; max-height: 180px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.home-dome-glow { position: absolute; bottom: 6%; left: 50%; width: 150px; height: 150px; margin-left: -75px; border-radius: 999px; background: radial-gradient(circle, rgba(235,203,143,0.32), transparent 68%); animation: slt-glow 4.5s ease-in-out infinite; }

/* ==========================================================================
   4. WHY (cream)
   ========================================================================== */
.home-why-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--green-mid); border-radius: 16px; padding: clamp(18px,2.4vw,24px); }
.home-num-serif { font-family: 'Newsreader', serif; font-size: 24px; font-weight: 600; color: var(--cedar-accent); }
.home-why-h4 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 18px; color: var(--forest-green); margin: 6px 0 0; line-height: 1.25; }
.home-why-p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 8px 0 0; }

/* ==========================================================================
   5. TIME DOME
   ========================================================================== */
.home-dome-band { background: linear-gradient(180deg, var(--light-bg), var(--cream-alt)); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.home-dome-head { text-align: center; max-width: 44em; margin: 0 auto; }
.home-dome-uline { display: block; width: clamp(150px,22vw,230px); height: auto; margin: 8px auto 0; overflow: visible; }
.home-dome-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.home-dome-pills-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.home-pill-opt { border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 42px; transition: all .2s; background: var(--green-tint); border: 1px solid var(--green-tint-border); color: var(--green-2); }
.home-pill-opt.is-selected { background: var(--green-2); border-color: var(--green-2); color: var(--on-dark); }
.home-dome-wrap { position: relative; max-width: 900px; margin: clamp(18px,3vw,30px) auto 0; }
.home-dome-box { position: relative; width: 100%; aspect-ratio: 1000/400; min-height: 190px; }
.home-dome-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.home-baseline { animation: slt-fade .8s ease 1.6s both; }
.home-crest-wrap { position: absolute; left: 0; right: 0; top: 1%; display: flex; justify-content: center; pointer-events: none; }
.slt-crest { max-width: 86%; background: var(--card); border: 1px solid var(--border-2); border-radius: 999px; padding: 8px 16px; box-shadow: 0 12px 26px -16px rgba(20,40,30,0.5); text-align: center; animation: slt-rise .7s ease 1.5s both; }
.slt-crest span { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-mid); }
.home-anchors { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-top: 12px; }
.home-anchor { flex: 1 1 0; min-width: 0; max-width: 47%; text-align: center; }
.home-anchor-motion { animation: slt-rise .6s ease both; }
.home-anchor-dot { width: 42px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; font-size: 19px; font-weight: 600; margin: 0 auto 8px; }
.home-anchor-dot.a { background: var(--forest-green); color: #F6F1E7; box-shadow: 0 12px 24px -12px rgba(20,52,42,0.9); }
.home-anchor-dot.b { background: var(--cedar-accent); color: var(--cream); box-shadow: 0 12px 24px -12px rgba(180,85,47,0.9); }
.home-anchor-k { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); }
.home-anchor-d { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.home-anchor-date { font-size: 12.5px; font-weight: 700; color: var(--cedar-accent); margin-top: 3px; }
.home-phasebar-wrap { margin-top: clamp(14px,2.4vw,22px); }
.home-phasebar { display: flex; gap: 3px; height: 34px; }
.home-phasebar-seg { border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: flex-grow .5s cubic-bezier(.4,0,.2,1); }
.home-phasebar-seg span { font-size: 10.5px; font-weight: 800; color: rgba(255,255,255,0.92); }
.home-phasebar-caps { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 11.5px; font-weight: 700; color: var(--muted-2); }
.home-dome-close { font-size: clamp(14px,1.5vw,16px); line-height: 1.65; color: var(--ink-soft); max-width: 46em; margin: clamp(20px,3vw,28px) auto 0; text-align: center; }

/* ==========================================================================
   main wrapper for #value / #report / who / app / cta
   ========================================================================== */
.home-main { max-width: var(--maxw); margin: 0 auto; padding: clamp(28px,4vw,48px) clamp(16px,4vw,32px) 60px; display: flex; flex-direction: column; gap: clamp(30px,4.4vw,50px); }
.home-main section { scroll-margin-top: 78px; }
.home-center-40 { text-align: center; max-width: 40em; margin: 0 auto; }

/* 6. VALUE */
.home-feature { background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card-lg); padding: clamp(20px,2.8vw,30px); display: flex; flex-direction: column; }
.home-feature-h3 { font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(19px,2.2vw,23px); color: var(--forest-green); margin: 10px 0 0; line-height: 1.2; }
.home-feature-lead { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }
.home-deflist { display: flex; flex-direction: column; margin-top: 14px; }
.home-defrow { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.home-defterm { font-size: 14px; font-weight: 700; color: var(--forest-green); min-width: 0; flex: 0 0 40%; }
.home-defdesc { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.home-callout { margin-top: auto; padding-top: 16px; }
.home-callout .box { border-radius: 12px; padding: 13px 15px; font-size: 13px; line-height: 1.5; }
.home-callout.green .box { background: var(--green-tint); border: 1px solid var(--green-tint-border); color: var(--green-2); }
.home-callout.gold .box { background: var(--gold-panel-bg); border: 1px solid var(--gold-panel-border); color: var(--gold-panel-text); }

/* 7. REPORT */
.home-report { background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card-lg); padding: clamp(22px,3.4vw,38px); }
.home-report-split { display: flex; flex-wrap: wrap; gap: clamp(22px,4vw,44px); align-items: center; }
.home-report-h2 { font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(22px,2.8vw,31px); color: var(--forest-green); margin: 10px 0 0; line-height: 1.15; }
.home-report-body { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
.home-report-body strong { color: var(--forest-green); }
.home-report-mock { flex: 1 1 280px; min-width: 0; background: #F4EFE4; border: 1px solid #E4DACA; border-radius: 18px; padding: clamp(16px,2.2vw,22px); }
.home-report-paper { background: #fff; border: 1px solid #EDE5D6; border-radius: 14px; padding: clamp(16px,2vw,20px); box-shadow: 0 18px 34px -26px rgba(20,40,30,0.5); }
.home-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #F2ECDE; padding-bottom: 13px; }
.home-micro-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.home-report-title { font-family: 'Newsreader', serif; font-size: 16px; font-weight: 600; color: var(--forest-green); margin-top: 3px; }
.home-pdf-badge, .home-bound-badge { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.home-pdf-badge { color: var(--cedar-accent); background: #FBEDE5; border: 1px solid #EFD3C4; }
.home-bound-badge { color: var(--green-2); background: var(--green-tint); border: 1px solid var(--green-tint-border); }
.home-file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card-2); border: 1px solid #EDE5D6; border-radius: 11px; padding: 11px 13px; margin-top: 14px; }
.home-file-name { font-size: 12.5px; font-weight: 700; color: var(--dark-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-file-meta { font-size: 11px; color: var(--faint); margin-top: 2px; }
.home-paper-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.home-paper-lines i { display: block; height: 8px; border-radius: 999px; background: #F2ECDE; }
.home-paper-lines i:nth-child(2) { width: 82%; }
.home-paper-lines i:nth-child(3) { width: 66%; }

/* 8. (was WHO IT HELPS — section removed; the #planners doors cover it) */

/* 9. MOBILE APP */
.home-app { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--green-2), var(--green-darkest)); color: var(--on-dark); border-radius: 20px; padding: clamp(24px,3.6vw,42px); box-shadow: var(--shadow-dark-card); }
.home-app-glow { position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(circle at 78% 20%, rgba(199,145,63,0.22), transparent 45%); animation: slt-drift-b 28s ease-in-out infinite alternate; }
.home-app-inner { position: relative; display: flex; flex-wrap: wrap-reverse; gap: clamp(24px,4vw,48px); align-items: center; justify-content: center; }
.home-app-copy { flex: 1 1 300px; min-width: 0; }
.home-app-h2 { font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(23px,3.2vw,34px); margin: 14px 0 0; color: var(--on-dark-heading); line-height: 1.15; }
.home-app-body { font-size: clamp(14.5px,1.6vw,17px); line-height: 1.6; color: var(--on-dark-body); margin: 12px 0 0; max-width: 34em; }
.home-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.home-check { display: flex; align-items: center; gap: 11px; font-size: 14px; color: #DCE4DB; }
.home-check b { color: var(--gold-soft); font-weight: 800; }
.home-notify { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; max-width: 460px; }
.home-notify input { flex: 1 1 180px; min-width: 0; padding: 14px; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 11px; font-size: 15px; background: rgba(255,255,255,0.06); color: var(--on-dark); min-height: 52px; }
.home-notify input::placeholder { color: rgba(243,237,224,0.55); }
.home-notify button { background: var(--cedar-accent); border: none; color: var(--cream); border-radius: 11px; padding: 14px 22px; font-size: 14.5px; font-weight: 800; cursor: pointer; min-height: 52px; white-space: nowrap; box-shadow: 0 14px 28px -14px rgba(180,85,47,0.9); transition: background 0.15s; }
.home-notify button:hover { background: #9c4526; }
.home-notify button:disabled { opacity: 0.6; cursor: default; }
.home-notify-msg { flex: 1 1 100%; font-size: 13.5px; line-height: 1.5; color: var(--gold-soft); margin: 2px 0 0; }
.home-notify-msg a { color: var(--gold-soft); text-decoration: underline; }
.home-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.home-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: #DCE4DB; }
.home-phone-wrap { flex: 0 1 250px; display: flex; justify-content: center; position: relative; min-width: 220px; }
.home-phone-ring { position: absolute; top: 50%; left: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 999px; border: 1px solid rgba(235,203,143,0.5); animation: slt-ring 3.6s ease-out infinite; }
.home-phone { position: relative; width: 222px; border-radius: 32px; background: #0D2419; border: 8px solid #24382C; box-shadow: 0 40px 70px -30px rgba(0,0,0,0.85); padding: 12px 12px 16px; animation: slt-bob 6s ease-in-out infinite; overflow: hidden; }
.home-phone-sheen { position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); animation: slt-sheen 5.5s ease-in-out infinite; pointer-events: none; }
.home-phone-notch2 { width: 52px; height: 5px; border-radius: 999px; background: #3A5145; margin: 0 auto 12px; }
.home-phone-panel { background: var(--card); border-radius: 20px; padding: 14px; }
.home-phone-title { font-family: 'Newsreader', serif; font-size: 15px; font-weight: 600; color: var(--forest-green); line-height: 1.2; margin-top: 3px; }
.home-phone-progress { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.home-phone-progress > div { flex: 1; height: 8px; border-radius: 999px; background: #E7DECE; overflow: hidden; }
.home-phone-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--cedar-accent),var(--gold)); animation: slt-fill 2.6s cubic-bezier(.4,0,.2,1) .6s both; }
.home-phone-progress b { font-family: 'Newsreader', serif; font-size: 14px; font-weight: 600; color: var(--forest-green); }
.home-phone-tasks { display: grid; grid-template-columns: 17px 1fr; align-items: center; gap: 7px 9px; margin-top: 13px; }
.home-phone-tasks span { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-2); }
.home-phone-tasks span.done { background: var(--green-2); border-color: var(--green-2); color: var(--on-dark); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; animation: slt-tick 1.4s ease .9s both; }
.home-phone-tasks del { font-size: 11px; color: #A59E92; }
.home-phone-tasks b { font-size: 11px; color: var(--dark-text); font-weight: 600; }
.home-inspection { margin-top: 12px; background: var(--gold-panel-bg); border: 1px solid var(--gold-panel-border); border-radius: 9px; padding: 8px 10px; font-size: 10px; font-weight: 700; color: var(--gold-panel-text); line-height: 1.35; }

/* 10. CTA + footer */
.home-cta-card { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--green-2), var(--green-darkest)); color: var(--on-dark); border-radius: 20px; padding: clamp(26px,4vw,44px); box-shadow: var(--shadow-dark-card); text-align: center; }
.home-cta-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 8%, rgba(199,145,63,0.24), transparent 45%); }
.home-cta-inner { position: relative; max-width: 44em; margin: 0 auto; }
.home-cta-h2 { font-family: 'Newsreader', serif; font-weight: 600; font-size: clamp(23px,3.2vw,34px); margin: 0; color: var(--on-dark-heading); line-height: 1.15; }
.home-cta-body { font-size: clamp(14.5px,1.6vw,17px); line-height: 1.6; color: var(--on-dark-body); margin: 14px 0 0; }
.home-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.home-footer { text-align: center; padding: 20px 0 0; border-top: 1px solid var(--hairline); color: var(--muted-2); font-size: 13px; line-height: 1.7; }
.home-footer-planners { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-bottom: 14px; }
.home-footer-planners a { font-size: 13px; font-weight: 700; color: var(--green-mid); min-height: 32px; display: inline-flex; align-items: center; }
.home-footer-planners a:hover { color: var(--forest-green); }
.home-footer-builders { margin: 0 0 14px; font-size: 13px; color: var(--muted-2); }
.home-footer-builders a { color: var(--green-mid); }
.home-footer a { font-weight: 700; color: var(--muted-2); }
.home-footer a:hover { color: var(--forest-green); }
.home-footer .fine { font-size: 12px; }

/* ==========================================================================
   Animations (verbatim from the design handoff)
   ========================================================================== */
@keyframes slt-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slt-draw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes slt-pop { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes slt-drift-a { 0% { transform: translate3d(-4%, 0, 0) scale(1); } 100% { transform: translate3d(6%, 4%, 0) scale(1.18); } }
@keyframes slt-drift-b { 0% { transform: translate3d(4%, 2%, 0) scale(1.1); } 100% { transform: translate3d(-6%, -3%, 0) scale(1); } }
@keyframes slt-ember { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .8; } 80% { opacity: .5; } 100% { transform: translateY(-190px) translateX(26px); opacity: 0; } }
@keyframes slt-sheen { 0% { transform: translateX(-120%) skewX(-14deg); } 100% { transform: translateX(320%) skewX(-14deg); } }
@keyframes slt-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes slt-ring { 0% { transform: scale(.75); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes slt-fill { from { width: 8%; } to { width: 72%; } }
@keyframes slt-tick { 0%, 40% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slt-shimmer { 0% { background-position: -180% 0, 0 0; } 55%, 100% { background-position: 180% 0, 0 0; } }
@keyframes slt-underline { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes slt-glow { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

.slt-step { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.33,1,.68,1); }
.slt-step.slt-in { opacity: 1; transform: none; }
.slt-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.33,1,.68,1); }
.slt-reveal.slt-in { opacity: 1; transform: none; }
.slt-word { display: inline-block; opacity: 0; transform: translateY(26px) rotate(2deg); transition: opacity .75s ease, transform .75s cubic-bezier(.33,1,.68,1); }
.slt-in .slt-word { opacity: 1; transform: none; }
.slt-shimmer {
    background-image:
        linear-gradient(100deg, rgba(199,145,63,0) 38%, #C7913F 47%, #EBCB8F 50%, #C7913F 53%, rgba(199,145,63,0) 62%),
        linear-gradient(#163C2E, #163C2E);
    background-size: 220% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: -180% 0, 0 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slt-in .slt-shimmer { animation: slt-shimmer 5.5s ease-in-out 1s infinite; }
.slt-uline { stroke-dasharray: 300; stroke-dashoffset: 300; }
.slt-in .slt-uline { animation: slt-underline 1.1s cubic-bezier(.4,0,.2,1) .55s both; }
.slt-arc { stroke-dasharray: 1600; animation: slt-draw 2.2s cubic-bezier(.4,0,.2,1) forwards; }
.home-dome-box .slt-arc { animation: none; stroke-dashoffset: 1600; }
.home-dome-band.slt-dome-in .home-dome-box .slt-arc { animation: slt-draw 3.6s cubic-bezier(.33,1,.68,1) forwards; }

@media (prefers-reduced-motion: reduce) {
    .slt-arc, .slt-marquee-track, .slt-uline { animation: none !important; stroke-dashoffset: 0 !important; }
    .slt-motion { animation: none !important; }
    .slt-reveal, .slt-word, .slt-step { opacity: 1 !important; transform: none !important; }
    .slt-shimmer { animation: none !important; color: #163C2E !important; background-image: none !important; }
    .slt-crest, .home-hero-body,
    .home-anchor-motion, .home-phasebar-wrap { animation: none !important; }
    .door, .door-go { transition: none !important; }
    .door:hover { transform: none !important; }
    .door:hover .door-go { gap: 7px; }
    .home-dome-box svg circle, .home-baseline { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 560px) { .home-hero-body { padding-top: 22px; } }
@media (max-width: 520px) { .slt-crest span { font-size: 10px; } .slt-crest { padding: 5px 10px; } }