/* ==========================================================================
   SteadyDwell — Clientflow Sunlit Multi-Widget Dwelling Intelligence Design
   Exclusive Prefix: sdw- / --sdw-
   Typography: Epilogue (Display) + Karla (UI/Body) + Overpass Mono (Telemetry)
   Palette: Sunlit Terracotta (#D9532F), Botanical Emerald (#15803D),
            Carbon Forest (#111B16), Warm Ivory (#FCFBF9), Pure White (#FFFFFF)
   ========================================================================== */

:root {
    --sdw-display: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sdw-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sdw-mono: 'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --sdw-ink: #111B16;
    --sdw-ink-soft: #26352D;
    --sdw-muted: #55645C;
    --sdw-subtle: #7C8B83;

    --sdw-surface: #FFFFFF;
    --sdw-ivory: #FCFBF9;
    --sdw-linen: #F7F4EE;
    --sdw-tint: #F3EFE7;
    --sdw-line: #EAE6DF;
    --sdw-line-strong: #D7D0C5;

    --sdw-terra: #D9532F;
    --sdw-terra-deep: #BD3E1D;
    --sdw-terra-soft: #FDF0EB;
    --sdw-terra-border: #F5CFC2;

    --sdw-emerald: #15803D;
    --sdw-emerald-deep: #116932;
    --sdw-emerald-soft: #E9F7EE;
    --sdw-emerald-border: #BCE5CA;

    --sdw-amber: #D97706;
    --sdw-amber-soft: #FEF4E3;
    --sdw-amber-border: #F6D8A6;

    --sdw-rose: #C53929;
    --sdw-rose-soft: #FDECE9;

    --sdw-primary: #D9532F;
    --sdw-radius-card: 18px;
    --sdw-radius-lg: 26px;
    --sdw-radius-pill: 999px;

    --sdw-shadow-pill: 0 10px 32px rgba(17, 27, 22, 0.06), 0 1px 2px rgba(17, 27, 22, 0.04);
    --sdw-shadow-card: 0 14px 36px rgba(27, 22, 17, 0.065), 0 2px 5px rgba(17, 27, 22, 0.035);
    --sdw-shadow-float: 0 22px 54px rgba(17, 27, 22, 0.12), 0 2px 6px rgba(17, 27, 22, 0.05);
}

/* 1. Reset & Document Shell
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html.sdw-root {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body.sdw-body {
    margin: 0;
    font-family: var(--sdw-sans);
    font-size: 16px;
    line-height: 1.58;
    color: var(--sdw-ink);
    background-color: #121B17;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.sdw-skip {
    position: fixed;
    top: -120px;
    left: 24px;
    z-index: 999;
    padding: 10px 18px;
    border-radius: var(--sdw-radius-pill);
    background: var(--sdw-ink);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    transition: top 0.2s ease;
}

.sdw-skip:focus {
    top: 18px;
}

/* 2. Clientflow Sunlit Outer Architectural Mat & White Sheet
   ========================================================================== */
.sdw-frame {
    min-height: 100vh;
    padding: 14px;
    background: linear-gradient(180deg, #121B17 0%, #4E271B 36%, #9A3F22 68%, #D96B38 100%);
}

.sdw-sheet {
    background: var(--sdw-surface);
    border-radius: 30px;
    min-height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
    overflow: clip;
    box-shadow: 0 28px 90px rgba(8, 13, 10, 0.38);
}

.sdw-main {
    flex: 1 0 auto;
}

.sdw-shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}

/* 3. Clientflow Floating White Pill Navbar
   ========================================================================== */
.sdw-topbar {
    position: sticky;
    top: 14px;
    z-index: 90;
    padding: 20px 28px 0;
}

.sdw-pill-nav {
    max-width: 1144px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--sdw-line);
    border-radius: var(--sdw-radius-pill);
    padding: 9px 12px 9px 18px;
    box-shadow: var(--sdw-shadow-pill);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sdw-pill-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sdw-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sdw-logo-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(217, 83, 47, 0.28);
}

.sdw-logo-title {
    font-family: var(--sdw-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sdw-ink);
}

.sdw-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 13px 4px 5px;
    border-radius: var(--sdw-radius-pill);
    background: var(--sdw-terra-soft);
    border: 1px solid var(--sdw-terra-border);
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--sdw-ink-soft);
    transition: border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.sdw-live-pill:hover {
    border-color: var(--sdw-terra);
    transform: translateY(-1px);
}

.sdw-live-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: var(--sdw-radius-pill);
    background: var(--sdw-terra);
    color: #FFFFFF;
    font-family: var(--sdw-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.sdw-live-copy {
    font-weight: 500;
}

.sdw-live-accent {
    color: var(--sdw-terra);
    font-weight: 700;
}

.sdw-pill-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sdw-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.sdw-nav-item {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sdw-ink-soft);
    transition: color 0.18s ease;
}

.sdw-nav-item:hover {
    color: var(--sdw-terra);
}

.sdw-topbar-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 4. Buttons, Pills & Status Tags
   ========================================================================== */
.sdw-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--sdw-radius-pill);
    border: 1px solid transparent;
    font-family: var(--sdw-sans);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
}

.sdw-cta:focus-visible,
.sdw-play-link:focus-visible,
.sdw-filter-pill:focus-visible,
.sdw-pin-btn:focus-visible,
.sdw-preset:focus-visible,
.sdw-terra-pill-btn:focus-visible,
.sdw-widget-card:focus-visible {
    outline: 2px solid var(--sdw-terra);
    outline-offset: 2px;
}

.sdw-cta:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.sdw-cta-dark {
    background: var(--sdw-ink);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(17, 27, 22, 0.16);
}

.sdw-cta-dark:hover:not(:disabled) {
    background: #1D2D25;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(17, 27, 22, 0.22);
}

.sdw-cta-terra {
    background: var(--sdw-terra);
    color: #FFFFFF;
    box-shadow: 0 8px 22px rgba(217, 83, 47, 0.26);
}

.sdw-cta-terra:hover:not(:disabled) {
    background: var(--sdw-terra-deep);
    transform: translateY(-1px);
}

.sdw-cta-emerald {
    background: var(--sdw-ink);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(17, 27, 22, 0.15);
}

.sdw-cta-emerald:hover:not(:disabled) {
    background: var(--sdw-emerald);
    transform: translateY(-1px);
}

.sdw-cta-linen {
    background: var(--sdw-linen);
    color: var(--sdw-ink);
    border-color: var(--sdw-line-strong);
}

.sdw-cta-linen:hover:not(:disabled) {
    background: #EFEAE0;
    border-color: var(--sdw-ink-soft);
}

.sdw-cta-lg {
    padding: 13px 24px;
    font-size: 15px;
}

.sdw-cta-full {
    width: 100%;
}

.sdw-cta-active {
    background: var(--sdw-terra);
}

.sdw-spark {
    font-size: 12px;
    line-height: 1;
    color: #FFB49E;
}

.sdw-cta-terra .sdw-spark {
    color: #FFF4EE;
}

.sdw-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--sdw-radius-pill);
    font-family: var(--sdw-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.sdw-tag-emerald {
    background: var(--sdw-emerald-soft);
    color: var(--sdw-emerald);
    border: 1px solid var(--sdw-emerald-border);
}

.sdw-tag-ochre {
    background: var(--sdw-amber-soft);
    color: #B45309;
    border: 1px solid var(--sdw-amber-border);
}

.sdw-eyebrow {
    margin: 0 0 10px;
    font-family: var(--sdw-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sdw-terra);
}

/* Mobile Drawer Toggle */
.sdw-drawer-btn {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--sdw-line);
    background: var(--sdw-ivory);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}

.sdw-drawer-line {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--sdw-ink);
    border-radius: 2px;
}

.sdw-drawer {
    max-width: 1144px;
    margin: 10px auto 0;
    background: var(--sdw-surface);
    border: 1px solid var(--sdw-line);
    border-radius: 22px;
    padding: 18px;
    box-shadow: var(--sdw-shadow-float);
}

.sdw-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sdw-drawer-link {
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    color: var(--sdw-ink);
}

.sdw-drawer-link:hover {
    background: var(--sdw-linen);
    color: var(--sdw-terra);
}

.sdw-drawer-action {
    margin-top: 8px;
    width: 100%;
}

/* 5. Clientflow Hero: Asymmetric Top Split + 8-Card 2x4 Luminous UI Wall
   ========================================================================== */
.sdw-hero {
    padding: 54px 0 36px;
}

.sdw-hero-top {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 44px;
    align-items: end;
    margin-bottom: 36px;
}

.sdw-hero-heading {
    margin: 0;
    font-family: var(--sdw-display);
    font-size: clamp(2.7rem, 4.9vw, 4.3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--sdw-ink);
}

.sdw-hero-side-col {
    padding-bottom: 4px;
}

.sdw-hero-summary {
    margin: 0 0 22px;
    font-size: 16.5px;
    line-height: 1.56;
    color: var(--sdw-muted);
    max-width: 460px;
}

.sdw-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.sdw-play-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sdw-ink);
    padding: 6px 4px;
    transition: color 0.18s ease, transform 0.18s ease;
}

.sdw-play-link:hover {
    color: var(--sdw-terra);
    transform: translateX(2px);
}

.sdw-play-disc {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sdw-ink);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.18s ease;
}

.sdw-play-link:hover .sdw-play-disc {
    background: var(--sdw-terra);
}

/* Interactive Wall Toolbar */
.sdw-wall-wrap {
    scroll-margin-top: 96px;
}

.sdw-wall-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.sdw-wall-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sdw-filter-pill {
    padding: 6px 14px;
    border-radius: var(--sdw-radius-pill);
    border: 1px solid var(--sdw-line);
    background: var(--sdw-ivory);
    color: var(--sdw-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.sdw-filter-pill:hover {
    border-color: var(--sdw-line-strong);
    color: var(--sdw-ink);
}

.sdw-filter-pill.sdw-filter-active {
    background: var(--sdw-ink);
    border-color: var(--sdw-ink);
    color: #FFFFFF;
}

.sdw-wall-caption {
    margin: 0;
    font-family: var(--sdw-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--sdw-subtle);
}

/* Luminous Sunlit Aura Stage for the 2x4 Widget Wall */
.sdw-wall-stage {
    position: relative;
    padding: 22px;
    border-radius: 28px;
    background:
        radial-gradient(56% 58% at 18% 92%, rgba(217, 83, 47, 0.24) 0%, rgba(217, 83, 47, 0) 72%),
        radial-gradient(52% 60% at 54% 96%, rgba(217, 119, 6, 0.22) 0%, rgba(217, 119, 6, 0) 72%),
        radial-gradient(48% 54% at 86% 88%, rgba(21, 128, 61, 0.15) 0%, rgba(21, 128, 61, 0) 72%),
        linear-gradient(180deg, #FAF8F5 0%, #FDF4EE 62%, #FBE8DC 100%);
    border: 1px solid #EFE7DD;
}

.sdw-wall-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sdw-widget-card {
    background: var(--sdw-surface);
    border: 1px solid rgba(234, 230, 223, 0.95);
    border-radius: var(--sdw-radius-card);
    padding: 18px;
    box-shadow: var(--sdw-shadow-card);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
    cursor: pointer;
}

.sdw-widget-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(27, 20, 15, 0.11);
    border-color: #DFC9BD;
}

.sdw-widget-card.sdw-widget-selected {
    border-color: var(--sdw-terra);
    box-shadow: 0 18px 44px rgba(217, 83, 47, 0.16), 0 0 0 2px rgba(217, 83, 47, 0.14);
}

.sdw-widget-card.sdw-widget-highlighted {
    border-color: rgba(217, 83, 47, 0.55);
}

.sdw-widget-card.sdw-widget-dimmed {
    opacity: 0.34;
    transform: scale(0.985);
}

.sdw-w-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.sdw-w-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
}

.sdw-w-icon-terra {
    background: linear-gradient(135deg, #EB6540 0%, #D9532F 100%);
}

.sdw-w-icon-amber {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.sdw-w-icon-emerald {
    background: linear-gradient(135deg, #22A052 0%, #15803D 100%);
}

.sdw-w-title {
    margin: 0;
    font-family: var(--sdw-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sdw-ink);
}

/* Card 1: Parcel Dispatch */
.sdw-dispatch-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #F2EFE9;
    font-size: 12px;
}

.sdw-dispatch-key {
    color: var(--sdw-subtle);
    min-width: 46px;
}

.sdw-dispatch-val {
    color: var(--sdw-ink);
    font-weight: 700;
    font-size: 12px;
}

.sdw-dispatch-body {
    margin: 10px 0 14px;
    font-size: 12px;
    line-height: 1.48;
    color: var(--sdw-muted);
    flex: 1 0 auto;
}

.sdw-terra-pill-btn {
    align-self: flex-start;
    padding: 8px 15px;
    border-radius: var(--sdw-radius-pill);
    border: none;
    background: linear-gradient(135deg, #EC6440 0%, #D9532F 100%);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(217, 83, 47, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.sdw-terra-pill-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(217, 83, 47, 0.36);
}

.sdw-terra-pill-busy {
    opacity: 0.72;
}

/* Card 2: Primary Occupant */
.sdw-occupant-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 13px;
    margin-bottom: 12px;
    border-bottom: 1px solid #F2EFE9;
}

.sdw-avatar-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FCE4D8 0%, #F6C8B2 100%);
    border: 1px solid #EAB59C;
    color: #8A2E14;
    font-family: var(--sdw-display);
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sdw-occupant-name {
    display: block;
    font-family: var(--sdw-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sdw-ink);
    line-height: 1.2;
}

.sdw-occupant-role {
    display: block;
    font-size: 11.5px;
    color: var(--sdw-subtle);
    margin-top: 2px;
}

.sdw-meta-2x2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 10px;
    margin-top: auto;
}

.sdw-meta-compact {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #F2EFE9;
}

.sdw-meta-k {
    display: block;
    font-size: 10.5px;
    color: var(--sdw-subtle);
    margin-bottom: 2px;
}

.sdw-meta-v {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sdw-ink);
    line-height: 1.28;
}

/* Card 3: Vacancy Loss Curve */
.sdw-chart-subrow,
.sdw-score-subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 12px;
}

.sdw-soft-chip {
    padding: 3px 8px;
    border-radius: var(--sdw-radius-pill);
    background: var(--sdw-linen);
    border: 1px solid var(--sdw-line);
    font-family: var(--sdw-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--sdw-muted);
}

.sdw-bars-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    height: 104px;
    padding-top: 8px;
    margin-bottom: 12px;
}

.sdw-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.sdw-bar-fill {
    width: 100%;
    border-radius: 9px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    font-family: var(--sdw-mono);
    font-size: 10px;
    font-weight: 600;
}

.sdw-bar-low {
    height: 34%;
    background: #F3F1ED;
    color: var(--sdw-muted);
}

.sdw-bar-mid {
    height: 56%;
    background: #F7E8DE;
    color: #9A4226;
}

.sdw-bar-high {
    height: 86%;
    background: linear-gradient(180deg, #EE633D 0%, #D9532F 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(217, 83, 47, 0.26);
}

.sdw-bar-lbl {
    margin-top: 5px;
    font-size: 10px;
    color: var(--sdw-subtle);
    text-align: center;
    line-height: 1.15;
}

.sdw-chart-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #F2EFE9;
}

.sdw-big-figure {
    display: block;
    font-family: var(--sdw-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sdw-ink);
    line-height: 1.1;
}

.sdw-emerald-delta {
    display: block;
    font-family: var(--sdw-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sdw-emerald);
    line-height: 1.2;
}

.sdw-foot-sub {
    display: block;
    font-size: 10.5px;
    color: var(--sdw-subtle);
}

/* Card 4: Verification Pipeline */
.sdw-kanban-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.sdw-kanban-head {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sdw-subtle);
    margin-bottom: 5px;
}

.sdw-kanban-tile {
    background: #F8F6F2;
    border: 1px solid #ECE7DF;
    border-radius: 11px;
    padding: 9px 10px;
}

.sdw-kanban-tile strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sdw-ink);
    line-height: 1.25;
}

.sdw-kanban-tile span {
    display: block;
    font-size: 10.5px;
    color: var(--sdw-subtle);
    margin-top: 3px;
}

.sdw-kanban-bottom {
    margin-top: auto;
}

.sdw-kanban-wide {
    background: #FDF4EF;
    border-color: #F4D5C8;
}

/* Card 5: Live Threshold Activity */
.sdw-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sdw-feed-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.sdw-feed-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.sdw-dot-emerald {
    background: var(--sdw-emerald);
}

.sdw-dot-terra {
    background: var(--sdw-terra);
}

.sdw-dot-amber {
    background: var(--sdw-amber);
}

.sdw-feed-list strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sdw-ink);
    line-height: 1.28;
}

.sdw-feed-list span {
    display: block;
    font-size: 10.5px;
    color: var(--sdw-subtle);
}

/* Card 6: Portfolio Disposition Ledger */
.sdw-ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.sdw-ledger-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sdw-subtle);
    padding: 0 4px 7px 0;
    border-bottom: 1px solid #F2EFE9;
}

.sdw-ledger-table td {
    padding: 7.5px 4px 7.5px 0;
    border-bottom: 1px solid #F6F4EF;
    color: var(--sdw-ink);
    font-weight: 600;
}

.sdw-ledger-table tr:last-child td {
    border-bottom: none;
}

.sdw-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--sdw-radius-pill);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.sdw-pill-emerald {
    background: var(--sdw-emerald-soft);
    color: var(--sdw-emerald);
}

.sdw-pill-amber {
    background: var(--sdw-amber-soft);
    color: #B45309;
}

.sdw-pill-rose {
    background: var(--sdw-rose-soft);
    color: var(--sdw-rose);
}

/* Card 7: Dwelling Stability Score */
.sdw-score-subrow span:first-child {
    color: var(--sdw-muted);
    font-weight: 600;
    font-size: 11.5px;
}

.sdw-score-hero {
    font-family: var(--sdw-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sdw-ink);
    margin-bottom: 10px;
}

.sdw-progress-track {
    width: 100%;
    height: 7px;
    border-radius: var(--sdw-radius-pill);
    background: #F1EEE8;
    overflow: hidden;
}

.sdw-progress-fill {
    height: 100%;
    border-radius: var(--sdw-radius-pill);
    background: linear-gradient(90deg, #D9532F 0%, #D97706 48%, #15803D 100%);
}

.sdw-progress-caption {
    text-align: right;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sdw-muted);
    margin-top: 5px;
}

/* Card 8: Post-Bind Automations */
.sdw-auto-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.sdw-auto-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8.5px 10px;
    border-radius: 12px;
    background: #F9F7F4;
    border: 1px solid #EEE9E0;
}

.sdw-auto-glyph {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--sdw-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.sdw-auto-tile strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sdw-ink);
    line-height: 1.22;
}

.sdw-auto-tile span {
    display: block;
    font-size: 10.5px;
    color: var(--sdw-subtle);
}

/* 6. Clientflow 50/50 Sunlit Dwelling Showcase (#dwellings)
   ========================================================================== */
.sdw-showcase-band {
    padding: 68px 0;
    scroll-margin-top: 90px;
}

.sdw-showcase-split {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: 56px;
    align-items: center;
}

.sdw-showcase-stage {
    background: linear-gradient(145deg, #FCEAE2 0%, #F9F4EC 54%, #EBF5EE 100%);
    border: 1px solid #EFE5DB;
    border-radius: 28px;
    padding: 20px;
    position: relative;
}

.sdw-photo-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 14px 36px rgba(17, 27, 22, 0.12);
    aspect-ratio: 16 / 11;
    background: #1B2821;
}

.sdw-dwelling-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sdw-photo-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sdw-svg-zone {
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
    transform-box: fill-box;
}

.sdw-svg-zone:hover {
    transform: scale(1.1);
}

.sdw-svg-zone-active circle:first-child {
    stroke: #FFFFFF;
    stroke-width: 2px;
}

/* Floating White Structure & Occupancy Inspector Card */
.sdw-floating-inspector {
    position: relative;
    margin-top: -42px;
    margin-left: 14px;
    margin-right: 14px;
    background: var(--sdw-surface);
    border: 1px solid var(--sdw-line);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: var(--sdw-shadow-float);
    z-index: 2;
}

.sdw-inspector-ribbon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sdw-ink-soft);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #F2EFE9;
}

.sdw-ribbon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sdw-emerald);
    box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.15);
    flex-shrink: 0;
}

.sdw-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-family: var(--sdw-mono);
    font-size: 10.5px;
}

.sdw-apn-code {
    color: var(--sdw-muted);
    font-weight: 600;
}

.sdw-apn-class {
    color: var(--sdw-emerald);
    font-weight: 600;
}

.sdw-pin-selector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}

.sdw-pin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid var(--sdw-line);
    background: var(--sdw-ivory);
    color: var(--sdw-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.16s ease;
}

.sdw-pin-btn:hover {
    border-color: var(--sdw-line-strong);
    color: var(--sdw-ink);
}

.sdw-pin-btn[aria-pressed="true"] {
    background: var(--sdw-ink);
    border-color: var(--sdw-ink);
    color: #FFFFFF;
}

.sdw-pin-index {
    font-family: var(--sdw-mono);
    font-size: 10.5px;
    opacity: 0.85;
}

.sdw-inspector-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.sdw-inspector-title {
    margin: 0;
    font-family: var(--sdw-display);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sdw-ink);
}

.sdw-inspector-copy {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sdw-muted);
}

.sdw-inspector-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #F2EFE9;
}

.sdw-spec-cell span {
    display: block;
    font-family: var(--sdw-mono);
    font-size: 9.5px;
    color: var(--sdw-subtle);
    margin-bottom: 2px;
}

.sdw-spec-cell strong {
    display: block;
    font-size: 12px;
    color: var(--sdw-ink);
}

/* Showcase Right Column */
.sdw-showcase-heading {
    margin: 0 0 14px;
    font-family: var(--sdw-display);
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--sdw-ink);
}

.sdw-showcase-lead {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sdw-muted);
}

.sdw-feature-rows {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 30px;
}

.sdw-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.sdw-pastel-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sdw-pastel-terra {
    background: #FDECE6;
    color: var(--sdw-terra);
    border: 1px solid #F8D2C5;
}

.sdw-pastel-amber {
    background: #FEF3DF;
    color: var(--sdw-amber);
    border: 1px solid #F7DCA8;
}

.sdw-pastel-emerald {
    background: #E8F7EE;
    color: var(--sdw-emerald);
    border: 1px solid #C2E8D0;
}

.sdw-feature-row h3 {
    margin: 0 0 5px;
    font-family: var(--sdw-display);
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sdw-ink);
}

.sdw-feature-row p {
    margin: 0;
    font-size: 14.8px;
    line-height: 1.55;
    color: var(--sdw-muted);
}

/* 7. Clientflow Soft Rounded Stack Sections (#methodology & #governance)
   ========================================================================== */
.sdw-stack-section {
    padding: 24px 0;
    scroll-margin-top: 90px;
}

.sdw-stack-surface {
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    border-radius: 28px;
    padding: 56px 44px;
}

.sdw-band {
    padding: 68px 0;
    scroll-margin-top: 90px;
}

.sdw-centered-head {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
}

.sdw-band-title {
    margin: 0 0 12px;
    font-family: var(--sdw-display);
    font-size: clamp(1.9rem, 3.2vw, 2.65rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--sdw-ink);
}

.sdw-band-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sdw-muted);
}

.sdw-phase-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.sdw-phase-card {
    background: var(--sdw-surface);
    border: 1px solid var(--sdw-line);
    border-radius: 20px;
    padding: 24px 22px;
    box-shadow: 0 8px 24px rgba(17, 27, 22, 0.04);
    display: flex;
    flex-direction: column;
}

.sdw-phase-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sdw-phase-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--sdw-terra-soft);
    border: 1px solid var(--sdw-terra-border);
    color: var(--sdw-terra);
    font-family: var(--sdw-mono);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sdw-phase-tag {
    font-family: var(--sdw-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sdw-subtle);
}

.sdw-phase-card h3 {
    margin: 0 0 8px;
    font-family: var(--sdw-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sdw-ink);
}

.sdw-phase-card p {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--sdw-muted);
    flex: 1 0 auto;
}

.sdw-phase-output {
    padding-top: 12px;
    border-top: 1px solid #F2EFE9;
    font-family: var(--sdw-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sdw-emerald);
}

/* 8. National Parcel Footprint (#footprint)
   ========================================================================== */
.sdw-footprint-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}

.sdw-parcel-map {
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    border-radius: 24px;
    padding: 20px;
    box-shadow: var(--sdw-shadow-card);
}

.sdw-parcel-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 0 4px;
    font-family: var(--sdw-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sdw-muted);
}

.sdw-density-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.sdw-density-box {
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    border-radius: 18px;
    padding: 20px;
}

.sdw-density-box strong {
    display: block;
    font-family: var(--sdw-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sdw-ink);
    margin-bottom: 4px;
}

.sdw-density-box span {
    display: block;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sdw-muted);
}

/* 9. Property Governance & Sunlit Banner (#governance)
   ========================================================================== */
.sdw-gov-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.sdw-gov-box {
    background: var(--sdw-surface);
    border: 1px solid var(--sdw-line);
    border-radius: 20px;
    padding: 22px;
}

.sdw-gov-box h3 {
    margin: 14px 0 8px;
    font-family: var(--sdw-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sdw-ink);
}

.sdw-gov-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--sdw-muted);
}

.sdw-banner-cta {
    background: linear-gradient(125deg, #111B16 0%, #24332B 58%, #5D2C1D 100%);
    color: #FFFFFF;
    border-radius: 22px;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sdw-banner-cta h3 {
    margin: 0 0 6px;
    font-family: var(--sdw-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.sdw-banner-cta p {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
}

/* 10. FAQ Accordion (#faq)
   ========================================================================== */
.sdw-faq-stack {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sdw-faq-card {
    background: var(--sdw-surface);
    border: 1px solid var(--sdw-line);
    border-radius: 18px;
    padding: 0 22px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sdw-faq-card[open] {
    border-color: #DFC9BD;
    box-shadow: var(--sdw-shadow-card);
}

.sdw-faq-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    font-family: var(--sdw-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sdw-ink);
}

.sdw-faq-summary::-webkit-details-marker {
    display: none;
}

.sdw-faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sdw-linen);
    color: var(--sdw-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sdw-mono);
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.sdw-faq-card[open] .sdw-faq-icon {
    transform: rotate(45deg);
    background: var(--sdw-terra);
    color: #FFFFFF;
}

.sdw-faq-body {
    padding: 0 0 20px;
    font-size: 15px;
    line-height: 1.62;
    color: var(--sdw-muted);
}

.sdw-faq-body a {
    color: var(--sdw-terra);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 11. Dwelling Portal (/login) & Electronic Consent Sheet
   ========================================================================== */
.sdw-portal-section {
    padding: 34px 0 68px;
}

.sdw-portal-keystrip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.sdw-keystrip-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--sdw-radius-pill);
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    font-family: var(--sdw-mono);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sdw-ink-soft);
}

.sdw-keystrip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sdw-emerald);
    flex-shrink: 0;
}

.sdw-keystrip-dot-terra {
    background: var(--sdw-terra);
}

.sdw-keystrip-dot-emerald {
    background: var(--sdw-emerald);
}

.sdw-keystrip-dot-amber {
    background: var(--sdw-amber);
}

.sdw-keystrip-link {
    background: var(--sdw-terra-soft);
    border-color: var(--sdw-terra-border);
    color: var(--sdw-ink);
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.sdw-keystrip-link:hover {
    border-color: var(--sdw-terra);
    color: var(--sdw-terra-deep);
    transform: translateY(-1px);
}

.sdw-portal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: 40px;
    align-items: start;
}

.sdw-portal-aside {
    padding: 8px 0;
}

.sdw-portal-badge-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 14px 4px 5px;
    border-radius: var(--sdw-radius-pill);
    background: var(--sdw-terra-soft);
    border: 1px solid var(--sdw-terra-border);
    margin-bottom: 16px;
}

.sdw-portal-badge-text {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sdw-ink-soft);
}

.sdw-portal-aside h2,
.sdw-portal-aside-title {
    margin: 0 0 12px;
    font-family: var(--sdw-display);
    font-size: clamp(1.65rem, 2.5vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--sdw-ink);
}

.sdw-portal-lead {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.58;
    color: var(--sdw-muted);
}

.sdw-portal-trust-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.sdw-portal-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sdw-portal-trust-item strong {
    display: block;
    font-family: var(--sdw-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--sdw-ink);
}

.sdw-portal-trust-item span {
    display: block;
    font-size: 13.5px;
    color: var(--sdw-muted);
}

.sdw-portal-help {
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    font-size: 14px;
}

.sdw-portal-help p {
    margin: 4px 0 0;
    color: var(--sdw-muted);
}

.sdw-portal-help a {
    color: var(--sdw-terra);
    font-weight: 700;
}

.sdw-portal-panel {
    background: var(--sdw-surface);
    border: 1px solid var(--sdw-line);
    border-radius: 24px;
    padding: 32px;
    box-shadow:
        0 20px 54px rgba(217, 83, 47, 0.08),
        0 6px 20px rgba(17, 27, 22, 0.05);
}

.sdw-step-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid #F2EFE9;
}

.sdw-step-chip {
    padding: 6px 13px;
    border-radius: var(--sdw-radius-pill);
    background: var(--sdw-linen);
    color: var(--sdw-muted);
    font-family: var(--sdw-mono);
    font-size: 11px;
    font-weight: 600;
}

.sdw-step-chip-current {
    background: var(--sdw-ink);
    color: #FFFFFF;
}

.sdw-step-arrow {
    color: var(--sdw-subtle);
    font-size: 13px;
}

.sdw-pane-heading {
    margin: 0 0 8px;
    font-family: var(--sdw-display);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--sdw-ink);
}

.sdw-pane-sub {
    margin: 0 0 22px;
    font-size: 15px;
    color: var(--sdw-muted);
}

.sdw-alert {
    padding: 13px 16px;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
    background: var(--sdw-linen);
    border: 1px solid var(--sdw-line-strong);
    color: var(--sdw-ink);
}

.sdw-alert-ochre {
    background: var(--sdw-amber-soft);
    border-color: var(--sdw-amber-border);
    color: #7C2D12;
}

.sdw-alert-emerald {
    background: var(--sdw-emerald-soft);
    border-color: var(--sdw-emerald-border);
    color: #14532D;
}

.sdw-field {
    margin-bottom: 18px;
}

.sdw-label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sdw-ink);
    margin-bottom: 6px;
}

.sdw-input {
    width: 100%;
    padding: 13px 15px;
    border-radius: 13px;
    border: 1px solid var(--sdw-line-strong);
    background: var(--sdw-ivory);
    color: var(--sdw-ink);
    font-size: 15.5px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.sdw-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--sdw-terra);
    box-shadow: 0 0 0 3px rgba(217, 83, 47, 0.14);
}

/* Step 2 Controls */
.sdw-applicant-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 15px;
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    margin-bottom: 18px;
}

.sdw-applicant-info strong {
    display: block;
    font-size: 14.5px;
    color: var(--sdw-ink);
}

.sdw-applicant-info span {
    display: block;
    font-family: var(--sdw-mono);
    font-size: 11px;
    color: var(--sdw-emerald);
    margin-top: 2px;
}

.sdw-text-btn {
    border: none;
    background: transparent;
    color: var(--sdw-terra);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sdw-slider-card {
    padding: 20px;
    border-radius: 18px;
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    margin-bottom: 18px;
}

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

.sdw-amount-sub {
    display: block;
    font-size: 12.5px;
    color: var(--sdw-muted);
}

.sdw-amount-value {
    font-family: var(--sdw-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sdw-terra);
}

.sdw-range {
    width: 100%;
    accent-color: var(--sdw-terra);
    cursor: pointer;
    margin: 6px 0 14px;
}

.sdw-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.sdw-preset {
    padding: 8px 10px;
    border-radius: var(--sdw-radius-pill);
    border: 1px solid var(--sdw-line-strong);
    background: #FFFFFF;
    color: var(--sdw-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.16s ease;
}

.sdw-preset[aria-pressed="true"] {
    background: var(--sdw-ink);
    border-color: var(--sdw-ink);
    color: #FFFFFF;
}

.sdw-consent-card {
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    margin-bottom: 16px;
}

.sdw-consent-heading {
    margin: 0 0 6px;
    font-family: var(--sdw-display);
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sdw-consent-intro {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--sdw-muted);
}

.sdw-consent-bullets {
    margin: 0 0 14px;
    padding-left: 18px;
    font-size: 13.5px;
    color: var(--sdw-ink-soft);
}

.sdw-consent-bullets li {
    margin-bottom: 6px;
}

.sdw-consent-bullets a,
.sdw-checkbox-line a {
    color: var(--sdw-terra);
    font-weight: 700;
    text-decoration: underline;
}

.sdw-consent-drawer summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sdw-terra);
    padding: 6px 0;
}

.sdw-consent-scroll {
    max-height: 290px;
    overflow-y: auto;
    margin-top: 10px;
    padding: 16px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid var(--sdw-line);
}

.sdw-ag-sheet {
    font-size: 13px;
    line-height: 1.58;
    color: var(--sdw-ink-soft);
}

.sdw-ag-banner {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--sdw-line);
}

.sdw-ag-tag {
    display: inline-block;
    font-family: var(--sdw-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--sdw-terra);
    margin-bottom: 4px;
}

.sdw-ag-heading {
    margin: 0 0 4px;
    font-family: var(--sdw-display);
    font-size: 15.5px;
    color: var(--sdw-ink);
}

.sdw-ag-subline {
    margin: 0;
    font-size: 12px;
    color: var(--sdw-muted);
}

.sdw-ag-sheet h5 {
    margin: 14px 0 5px;
    font-family: var(--sdw-display);
    font-size: 13.5px;
    color: var(--sdw-ink);
}

.sdw-ag-sheet p {
    margin: 0 0 10px;
}

.sdw-ag-sheet a {
    color: var(--sdw-terra);
    font-weight: 700;
}

.sdw-ag-seal {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--sdw-ivory);
    border: 1px dashed var(--sdw-line-strong);
}

.sdw-ag-seal-cap {
    display: block;
    font-family: var(--sdw-mono);
    font-size: 10px;
    color: var(--sdw-subtle);
}

.sdw-ag-seal-name {
    display: block;
    font-family: var(--sdw-display);
    font-size: 15px;
    color: var(--sdw-ink);
    margin: 2px 0;
}

.sdw-ag-seal-meta {
    display: block;
    font-size: 11.5px;
    color: var(--sdw-muted);
}

.sdw-checkbox-line {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sdw-ink-soft);
    cursor: pointer;
}

.sdw-checkbox-line input[type="checkbox"] {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--sdw-terra);
    flex-shrink: 0;
}

.sdw-sig-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    margin-bottom: 18px;
}

.sdw-sig-cap {
    display: block;
    font-family: var(--sdw-mono);
    font-size: 10px;
    color: var(--sdw-subtle);
}

.sdw-sig-rendered {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--sdw-ink);
}

.sdw-sig-stamp {
    text-align: right;
    font-family: var(--sdw-mono);
    font-size: 11px;
    color: var(--sdw-muted);
}

/* 12. Legal Pages (/privacy, /terms, /esign) & 404
   ========================================================================== */
.sdw-legal-grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 28px 72px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.sdw-legal-sidebar {
    position: sticky;
    top: 98px;
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    border-radius: 22px;
    padding: 24px;
}

.sdw-legal-sidebar h1 {
    margin: 0 0 6px;
    font-family: var(--sdw-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.sdw-legal-date {
    margin: 0 0 18px;
    font-family: var(--sdw-mono);
    font-size: 11px;
    color: var(--sdw-subtle);
}

.sdw-legal-index {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sdw-legal-index a {
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sdw-muted);
    transition: background-color 0.16s ease, color 0.16s ease;
}

.sdw-legal-index a:hover {
    background: #FFFFFF;
    color: var(--sdw-terra);
}

.sdw-legal-doc {
    background: var(--sdw-surface);
    border: 1px solid var(--sdw-line);
    border-radius: 24px;
    padding: 36px 40px;
    box-shadow: var(--sdw-shadow-card);
}

.sdw-legal-summary {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--sdw-ivory);
    border: 1px solid var(--sdw-line);
    margin-bottom: 28px;
    font-size: 15px;
    color: var(--sdw-ink-soft);
}

.sdw-legal-doc section {
    margin-bottom: 28px;
    scroll-margin-top: 100px;
}

.sdw-legal-doc h2 {
    margin: 0 0 10px;
    font-family: var(--sdw-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sdw-ink);
}

.sdw-legal-doc h3 {
    margin: 16px 0 8px;
    font-family: var(--sdw-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--sdw-ink);
}

.sdw-legal-doc p,
.sdw-legal-doc li {
    color: var(--sdw-muted);
    font-size: 15.5px;
    line-height: 1.65;
}

.sdw-legal-doc ul {
    padding-left: 20px;
}

.sdw-legal-doc a {
    color: var(--sdw-terra);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sdw-legal-doc code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--sdw-linen);
    font-family: var(--sdw-mono);
    font-size: 13px;
    color: var(--sdw-ink);
}

.sdw-404-box {
    max-width: 680px;
    margin: 28px auto;
    text-align: center;
}

.sdw-404-box .sdw-live-chip {
    margin-bottom: 14px;
}

.sdw-404-actions {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* 13. Warm Architectural Footer
   ========================================================================== */
.sdw-footer {
    margin-top: 32px;
    padding: 56px 0 36px;
    background: var(--sdw-ivory);
    border-top: 1px solid var(--sdw-line);
}

.sdw-footer-columns {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr 1.1fr;
    gap: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--sdw-line);
}

.sdw-footer-blurb {
    margin: 14px 0 16px;
    font-size: 14.5px;
    line-height: 1.58;
    color: var(--sdw-muted);
    max-width: 360px;
}

.sdw-footer-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sdw-mini-pill {
    padding: 4px 9px;
    border-radius: var(--sdw-radius-pill);
    background: #FFFFFF;
    border: 1px solid var(--sdw-line);
    font-family: var(--sdw-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--sdw-ink-soft);
}

.sdw-footer-title {
    margin: 0 0 14px;
    font-family: var(--sdw-display);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sdw-ink);
}

.sdw-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.sdw-footer-links a {
    font-size: 14px;
    color: var(--sdw-muted);
    transition: color 0.16s ease;
}

.sdw-footer-links a:hover {
    color: var(--sdw-terra);
}

.sdw-footer-contact {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 14px;
    color: var(--sdw-muted);
}

.sdw-footer-contact strong {
    color: var(--sdw-ink);
}

.sdw-footer-contact a {
    color: var(--sdw-ink-soft);
    font-weight: 600;
}

.sdw-footer-contact a:hover {
    color: var(--sdw-terra);
}

.sdw-footer-bar {
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--sdw-subtle);
}

.sdw-footer-bar p {
    margin: 0;
}

.sdw-footer-code {
    font-family: var(--sdw-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--sdw-muted);
}

/* 14. Responsive Breakpoints (Tablet & Mobile Precision)
   ========================================================================== */
@media (max-width: 1120px) {
    .sdw-live-pill {
        display: none;
    }

    .sdw-wall-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sdw-phase-track,
    .sdw-gov-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sdw-showcase-split,
    .sdw-footprint-split {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .sdw-footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 959px) {
    .sdw-portal-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 900px) {
    .sdw-nav {
        display: none;
    }

    .sdw-drawer-btn {
        display: inline-flex;
    }

    .sdw-hero-top {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sdw-hero-summary {
        max-width: 620px;
    }

    .sdw-legal-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sdw-legal-sidebar {
        position: static;
    }

    .sdw-banner-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    .sdw-frame {
        padding: 0;
        background: #FFFFFF;
    }

    .sdw-sheet {
        border-radius: 0;
        min-height: 100vh;
        box-shadow: none;
    }

    .sdw-topbar {
        padding: 12px 16px 0;
        top: 8px;
    }

    .sdw-shell {
        padding: 0 18px;
    }

    .sdw-pill-nav {
        padding: 8px 10px 8px 14px;
    }

    .sdw-topbar-cta .sdw-cta {
        padding: 8px 14px;
        font-size: 13px;
    }

    .sdw-hero {
        padding: 34px 0 24px;
    }

    .sdw-wall-stage {
        padding: 14px;
        border-radius: 22px;
    }

    .sdw-wall-grid,
    .sdw-phase-track,
    .sdw-gov-cards,
    .sdw-density-cards,
    .sdw-footer-columns {
        grid-template-columns: 1fr;
    }

    .sdw-floating-inspector {
        margin: 12px 0 0;
        padding: 16px;
    }

    .sdw-pin-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sdw-inspector-specs {
        grid-template-columns: 1fr;
    }

    .sdw-stack-surface {
        padding: 34px 20px;
        border-radius: 22px;
    }

    .sdw-portal-section {
        padding: 22px 0 52px;
    }

    .sdw-portal-keystrip {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }

    .sdw-keystrip-pill {
        padding: 5px 9px;
        font-size: 11px;
        gap: 5px;
    }

    .sdw-portal-panel {
        padding: 20px 18px 22px;
    }

    .sdw-step-bar {
        padding-bottom: 13px;
        margin-bottom: 15px;
    }

    .sdw-pane-heading {
        font-size: 20.5px;
        margin-bottom: 6px;
    }

    .sdw-pane-sub {
        font-size: 14px;
        line-height: 1.48;
        margin-bottom: 15px;
    }

    .sdw-field {
        margin-bottom: 13px;
    }

    .sdw-input {
        padding: 11px 14px;
    }

    .sdw-legal-doc {
        padding: 22px 18px;
    }

    .sdw-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sdw-sig-stamp {
        text-align: left;
    }
}