/*
 * Optaxia "Field Atlas" theme
 * A restrained, survey-grade visual system for GPS evidence and property capture.
 * Loaded after the legacy New Age bundle so existing Bootstrap behaviour is preserved.
 */

:root {
    --oa-ink: #102a33;
    --oa-ink-strong: #0a1e26;
    --oa-slate: #40545b;
    --oa-muted: #6b7f84;
    --oa-field: #18745a;
    --oa-field-dark: #115b46;
    --oa-field-soft: #e7f2ed;
    --oa-teal: #168a8a;
    --oa-teal-soft: #e5f4f3;
    --oa-solar: #d69a2d;
    --oa-solar-soft: #fcf3df;
    --oa-surface: #f3f6f4;
    --oa-surface-raised: #ffffff;
    --oa-border: #d8e1dd;
    --oa-border-strong: #bdccc6;
    --oa-danger: #b54747;
    --oa-shadow-sm: 0 1px 2px rgba(16, 42, 51, .05), 0 5px 16px rgba(16, 42, 51, .045);
    --oa-shadow-md: 0 10px 30px rgba(16, 42, 51, .09);
    --oa-radius-sm: 7px;
    --oa-radius: 11px;
    --oa-radius-lg: 16px;
    --bs-primary: #18745a;
    --bs-primary-rgb: 24, 116, 90;
    --bs-secondary: #40545b;
    --bs-secondary-rgb: 64, 84, 91;
    --bs-success: #18745a;
    --bs-success-rgb: 24, 116, 90;
    --bs-info: #168a8a;
    --bs-info-rgb: 22, 138, 138;
    --bs-warning: #d69a2d;
    --bs-warning-rgb: 214, 154, 45;
    --bs-danger: #b54747;
    --bs-danger-rgb: 181, 71, 71;
    --bs-body-font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-body-color: #102a33;
    --bs-body-bg: #f3f6f4;
    --bs-link-color: #18745a;
    --bs-link-hover-color: #115b46;
    --bs-border-color: #d8e1dd;
}

html {
    scroll-padding-top: 82px;
}

body {
    background: var(--oa-surface);
    color: var(--oa-ink);
    font-family: var(--bs-body-font-family);
    font-weight: 400;
    letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--oa-ink);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: -.025em;
}

.text-muted {
    color: var(--oa-muted) !important;
}

.font-alt {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.bg-gradient-primary-to-secondary {
    background: linear-gradient(135deg, var(--oa-field), var(--oa-teal)) !important;
}

.text-gradient {
    background: linear-gradient(135deg, var(--oa-field), var(--oa-teal));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-start-color {
    stop-color: var(--oa-field) !important;
}

.gradient-end-color {
    stop-color: var(--oa-teal) !important;
}

.font-mono,
.coordinate-value,
time {
    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

a {
    color: var(--oa-field);
}

a:hover {
    color: var(--oa-field-dark);
}

/* Navigation */
#mainNav {
    min-height: 72px;
    padding: .75rem 0;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(216, 225, 221, .9);
    box-shadow: 0 1px 10px rgba(16, 42, 51, .035) !important;
    backdrop-filter: blur(14px);
}

#mainNav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--oa-ink);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.025em;
}

.brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(16, 42, 51, .14);
}

.brand-name {
    color: var(--oa-ink);
    font-size: 1.12rem;
    font-weight: 700;
}

.brand-name small {
    display: block;
    margin-top: -2px;
    color: var(--oa-muted);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
}

#mainNav .navbar-nav .nav-item .nav-link,
#mainNav .navbar-nav .nav-item button.nav-link {
    position: relative;
    padding: .65rem .75rem;
    color: var(--oa-slate);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:focus {
    color: var(--oa-field);
}

.navbar-toggler {
    border-color: var(--oa-border);
    border-radius: var(--oa-radius-sm);
    color: var(--oa-ink);
}

/* App shell */
.page-shell {
    width: 100%;
    max-width: 1500px;
    min-height: calc(100vh - 190px);
    margin: 0 auto;
    padding: 96px 28px 34px;
}

.app-public .page-shell {
    max-width: none;
    padding: 72px 0 0;
}

.app-public .page-shell > main {
    padding-bottom: 0 !important;
}

.public-page-header {
    min-height: 0 !important;
    padding: 3.25rem 0 3rem !important;
}

.public-page-header h1 {
    margin-bottom: .65rem !important;
    font-size: clamp(2.1rem, 4vw, 3.35rem);
    letter-spacing: -.045em;
}

.public-page-header .lead {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .78) !important;
}

.public-content-section {
    padding: 3rem 0 4.5rem;
}

/* Public help and support heroes */
.oa-public-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    background:
        linear-gradient(rgba(16, 42, 51, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 51, .035) 1px, transparent 1px),
        radial-gradient(circle at 84% 32%, rgba(24, 124, 101, .13), transparent 27%),
        linear-gradient(135deg, #f8fbf9 0%, #edf5f1 62%, #f7f4e9 100%);
    background-size: 40px 40px, 40px 40px, auto, auto;
}

.oa-public-hero::after {
    position: absolute;
    right: -180px;
    bottom: -310px;
    width: 620px;
    height: 620px;
    border: 1px solid rgba(22, 138, 138, .11);
    border-radius: 50%;
    box-shadow: 0 0 0 72px rgba(22, 138, 138, .025), 0 0 0 144px rgba(22, 138, 138, .018);
    content: "";
}

.oa-public-hero .container {
    position: relative;
    z-index: 1;
}

.oa-public-hero h1 {
    max-width: 760px;
    margin-bottom: 1.35rem;
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.055em;
}

.oa-public-hero h1 span {
    color: var(--oa-field);
}

.oa-public-hero-copy {
    max-width: 650px;
    margin-bottom: 2rem;
    color: var(--oa-slate);
    font-size: clamp(1.02rem, 1.4vw, 1.16rem);
    line-height: 1.7;
}

.oa-help-visual {
    position: relative;
    display: grid;
    min-height: 390px;
    place-items: center;
    isolation: isolate;
}

.oa-help-grid {
    position: absolute;
    inset: 4% 0;
    z-index: -3;
    border-radius: 30px;
    background:
        linear-gradient(rgba(24, 116, 90, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 116, 90, .08) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.oa-help-orbit {
    position: absolute;
    z-index: -2;
    width: 305px;
    height: 305px;
    border: 1px solid rgba(22, 138, 138, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(22, 138, 138, .035);
}

.oa-help-orbit::after {
    position: absolute;
    inset: 18%;
    border: 1px dashed rgba(214, 154, 45, .55);
    border-radius: 50%;
    content: "";
    transform: scaleX(1.55) rotate(-18deg);
}

.oa-help-core {
    display: flex;
    width: 220px;
    min-height: 220px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.65rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 12%, rgba(80, 201, 183, .4), transparent 38%),
        linear-gradient(155deg, #173c46, #071f28);
    color: #fff;
    box-shadow: 0 28px 65px rgba(16, 42, 51, .22);
}

.oa-help-core > i {
    margin-bottom: auto;
    color: #8ee2d0;
    font-size: 2rem;
}

.oa-help-core span {
    margin-bottom: .55rem;
    color: #8ee2d0;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.oa-help-core strong {
    font-size: 1.35rem;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.oa-help-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    gap: .55rem;
    align-items: center;
    padding: .72rem .85rem;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    color: var(--oa-ink);
    font-size: .72rem;
    font-weight: 600;
    box-shadow: 0 15px 35px rgba(16, 42, 51, .14);
    backdrop-filter: blur(10px);
}

.oa-help-chip i {
    color: var(--oa-field);
    font-size: 1rem;
}

.oa-help-chip-one {
    top: 16%;
    left: 1%;
}

.oa-help-chip-two {
    top: 31%;
    right: -1%;
}

.oa-help-chip-three {
    right: 5%;
    bottom: 13%;
}

.oa-faq-section,
.oa-support-section {
    background: #f6f9f7;
}

.faq-item {
    overflow: hidden;
    border: 1px solid var(--oa-border) !important;
    border-radius: var(--oa-radius) !important;
    background: #fff;
    box-shadow: var(--oa-shadow-sm) !important;
}

.faq-header {
    margin: 0;
}

.faq-button {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 1.15rem 1.25rem;
    border: 0;
    background: #fff;
    color: var(--oa-ink);
    text-align: left;
    transition: background-color .18s ease, color .18s ease;
}

.faq-icon {
    color: var(--oa-field);
}

.faq-button:hover,
.faq-button[aria-expanded="true"] {
    background: var(--oa-field-soft);
}

.faq-button:focus-visible {
    outline: 3px solid rgba(24, 124, 101, .2);
    outline-offset: -3px;
}

.faq-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-collapse.show {
    max-height: 520px;
}

.faq-body {
    padding: .35rem 1.5rem 1.5rem 4rem;
    border-top: 1px solid var(--oa-border);
    background: #fff;
    color: var(--oa-slate);
    line-height: 1.7;
}

.faq-support-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--oa-ink-strong), #124c50) !important;
}

.faq-support-cta::after {
    position: absolute;
    top: -90px;
    right: -70px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(142, 226, 208, .2);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(142, 226, 208, .04);
    content: "";
}

.faq-support-cta .card-body {
    position: relative;
    z-index: 1;
}

.support-form-card,
.support-info-card {
    border: 1px solid var(--oa-border) !important;
    background: #fff;
    box-shadow: var(--oa-shadow-sm) !important;
}

.support-form-card {
    border-top: 3px solid var(--oa-field) !important;
}

.support-info-card .card-body {
    text-align: left !important;
}

.support-info-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 1.1rem;
    place-items: center;
    border-radius: 12px;
    background: var(--oa-field-soft);
    color: var(--oa-field);
    font-size: 1.25rem;
}

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .55rem;
    color: var(--oa-field);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.page-eyebrow::before {
    width: 18px;
    height: 2px;
    background: var(--oa-solar);
    content: "";
}

.page-title {
    margin-bottom: .45rem;
    font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

.page-intro {
    max-width: 700px;
    margin-bottom: 0;
    color: var(--oa-muted);
    font-size: 1rem;
}

/* Core controls */
.btn {
    min-height: 40px;
    padding: .55rem 1rem;
    border-radius: var(--oa-radius-sm);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--oa-field);
    box-shadow: 0 0 0 3px rgba(24, 116, 90, .16) !important;
}

.btn-primary {
    border-color: var(--oa-field);
    background: var(--oa-field);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--oa-field-dark);
    background: var(--oa-field-dark);
}

.btn-outline-primary {
    border-color: var(--oa-border-strong);
    color: var(--oa-field);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    border-color: var(--oa-field);
    background: var(--oa-field-soft);
    color: var(--oa-field-dark);
}

.btn-outline-secondary,
.btn-secondary {
    border-color: var(--oa-border-strong);
}

.btn-outline-secondary {
    color: var(--oa-slate);
}

.btn-outline-secondary:hover {
    border-color: var(--oa-slate);
    background: #edf1ef;
    color: var(--oa-ink);
}

.btn-outline-warning {
    border-color: #e7c985;
    background: var(--oa-solar-soft);
    color: #76500d;
}

.btn-outline-warning:hover {
    border-color: var(--oa-solar);
    background: #f7e6bc;
    color: #5f400b;
}

.btn-outline-success,
.btn-outline-info {
    border-color: var(--oa-border-strong);
    color: var(--oa-slate);
}

.btn-outline-success:hover,
.btn-outline-info:hover {
    border-color: var(--oa-teal);
    background: var(--oa-teal-soft);
    color: #0c6262;
}

.form-label {
    margin-bottom: .45rem;
    color: var(--oa-slate);
    font-size: .78rem;
    font-weight: 600 !important;
}

.form-control,
.form-select {
    min-height: 44px;
    border-color: var(--oa-border);
    border-radius: var(--oa-radius-sm);
    background-color: #fff;
    color: var(--oa-ink);
    font-size: .92rem;
}

textarea.form-control {
    min-height: auto;
}

.form-floating > .form-control {
    border-radius: var(--oa-radius-sm);
}

/* Panels and feedback */
.card {
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    background: var(--oa-surface-raised);
    box-shadow: var(--oa-shadow-sm);
}

.card.shadow,
.card.shadow-sm {
    box-shadow: var(--oa-shadow-sm) !important;
}

.card-header {
    border-bottom-color: var(--oa-border);
    background: #f8faf9;
}

.modal-content {
    overflow: hidden;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-lg);
    box-shadow: 0 24px 70px rgba(8, 30, 38, .22);
}

.modal-header,
.modal-footer {
    border-color: var(--oa-border);
    background: #f8faf9;
}

.alert {
    border-width: 1px;
    border-radius: var(--oa-radius);
}

.alert-danger {
    border-color: #eccaca;
    background: #fdf3f3;
    color: #853535;
}

/* Home */
.oa-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.25rem, 5vw, 4.75rem) 0 clamp(3.5rem, 5vw, 4.75rem);
    background:
        linear-gradient(rgba(16, 42, 51, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 51, .032) 1px, transparent 1px),
        linear-gradient(145deg, #f8faf8 0%, #edf4f0 58%, #e5efeb 100%);
    background-size: 34px 34px, 34px 34px, auto;
}

.oa-hero::after {
    position: absolute;
    right: -16vw;
    bottom: -34vw;
    width: 65vw;
    height: 65vw;
    border: 1px solid rgba(22, 138, 138, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(22, 138, 138, .035), 0 0 0 140px rgba(22, 138, 138, .025);
    content: "";
}

.oa-hero-content,
.oa-hero-visual {
    position: relative;
    z-index: 1;
}

.oa-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.35rem;
    padding: .45rem .75rem;
    border: 1px solid #cbdcd5;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--oa-field-dark);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .035em;
}

.oa-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--oa-solar);
    box-shadow: 0 0 0 4px rgba(214, 154, 45, .14);
}

.oa-hero h1 {
    max-width: 720px;
    margin-bottom: 1.35rem;
    font-size: clamp(2.55rem, 5.2vw, 4.75rem);
    font-weight: 600;
    line-height: 1.01;
    letter-spacing: -.055em;
}

.oa-hero h1 span {
    color: var(--oa-field);
}

.oa-hero-copy {
    max-width: 610px;
    margin-bottom: 2rem;
    color: var(--oa-slate);
    font-size: clamp(1.03rem, 1.4vw, 1.2rem);
    line-height: 1.7;
}

.oa-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.4rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--oa-slate);
    font-size: .82rem;
    font-weight: 500;
}

.oa-trust-row i {
    margin-right: .35rem;
    color: var(--oa-field);
}

.oa-hero-phone-stage {
    position: relative;
    display: grid;
    min-height: 590px;
    margin-left: auto;
    place-items: center;
    isolation: isolate;
}

.oa-hero-phone-grid {
    position: absolute;
    inset: 9% -2% 7%;
    z-index: -3;
    border-radius: 40px;
    background:
        linear-gradient(rgba(24, 116, 90, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 116, 90, .08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}

.oa-hero-phone-orbit {
    position: absolute;
    z-index: -2;
    width: 405px;
    height: 405px;
    border: 1px solid rgba(22, 138, 138, .25);
    border-radius: 50%;
    box-shadow: 0 0 0 58px rgba(22, 138, 138, .028);
}

.oa-hero-phone-orbit::after {
    position: absolute;
    inset: 17%;
    border: 1px dashed rgba(214, 154, 45, .52);
    border-radius: 50%;
    content: "";
    transform: scaleX(1.55) rotate(-18deg);
}

.oa-hero-phone {
    position: relative;
    width: 278px;
    height: 558px;
    padding: 7px;
    border: 3px solid #53636a;
    border-radius: 48px;
    background: #101e24;
    box-shadow:
        0 32px 75px rgba(16, 42, 51, .25),
        inset 0 0 0 2px rgba(255, 255, 255, .1);
}

.oa-hero-phone-island {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 5;
    width: 88px;
    height: 25px;
    border-radius: 20px;
    background: #061116;
    transform: translateX(-50%);
}

.oa-hero-phone-screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 38px;
    background:
        radial-gradient(circle at 82% 12%, rgba(80, 201, 183, .44), transparent 34%),
        radial-gradient(circle at 16% 88%, rgba(214, 154, 45, .27), transparent 31%),
        linear-gradient(155deg, #173c46 0%, #0b2630 48%, #061b23 100%);
}

.oa-hero-phone-screen::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255, 255, 255, .09), transparent 22%, transparent 78%, rgba(255, 255, 255, .03));
    content: "";
    pointer-events: none;
}

.oa-hero-phone-map {
    position: absolute;
    inset: 8% -35% 0 -25%;
    opacity: .82;
    background:
        radial-gradient(circle at 50% 50%, rgba(126, 232, 213, .9) 0 3px, transparent 4px),
        linear-gradient(rgba(126, 232, 213, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 232, 213, .12) 1px, transparent 1px);
    background-size: 118px 118px, 42px 42px, 42px 42px;
    transform: perspective(380px) rotateX(56deg) rotateZ(-10deg) scale(1.25);
    transform-origin: center bottom;
}

.oa-hero-phone-topbar {
    position: absolute;
    top: 58px;
    right: 22px;
    left: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, .78);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.oa-hero-phone-topbar span {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.oa-hero-phone-topbar i {
    color: #87e1ce;
}

.oa-hero-phone-copy {
    position: absolute;
    top: 132px;
    right: 22px;
    left: 22px;
    z-index: 2;
}

.oa-hero-phone-eyebrow {
    display: block;
    margin-bottom: .8rem;
    color: #8ee2d0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.oa-hero-phone-copy h2 {
    margin-bottom: 1rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -.045em;
}

.oa-hero-phone-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: .76rem;
    line-height: 1.55;
}

.oa-hero-phone-data {
    position: absolute;
    right: 20px;
    bottom: 24px;
    left: 20px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.oa-hero-phone-data > div:not(.oa-hero-phone-ready) {
    padding: .65rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(4, 22, 29, .48);
    backdrop-filter: blur(8px);
}

.oa-hero-phone-data span,
.oa-hero-phone-data strong {
    display: block;
}

.oa-hero-phone-data span {
    margin-bottom: .2rem;
    color: rgba(255, 255, 255, .5);
    font-size: .54rem;
    text-transform: uppercase;
}

.oa-hero-phone-data strong {
    color: #fff;
    font-family: "IBM Plex Mono", monospace;
    font-size: .64rem;
    font-weight: 500;
}

.oa-hero-phone-ready {
    grid-column: 1 / -1;
    display: flex;
    gap: .4rem;
    align-items: center;
    padding: .55rem .65rem;
    border-radius: 7px;
    background: rgba(126, 232, 213, .14);
    color: #a8ebdd;
    font-size: .65rem;
    font-weight: 600;
}

.oa-hero-float {
    position: absolute;
    z-index: 4;
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .75rem .9rem;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
    color: var(--oa-ink);
    font-size: .74rem;
    font-weight: 600;
    box-shadow: 0 16px 38px rgba(16, 42, 51, .16);
    backdrop-filter: blur(12px);
}

.oa-hero-float i {
    color: var(--oa-field);
    font-size: 1rem;
}

.oa-hero-float-location {
    top: 24%;
    left: -2%;
}

.oa-hero-float-sync {
    right: -4%;
    bottom: 20%;
}

.oa-section {
    padding: clamp(4.5rem, 7vw, 7rem) 0;
}

.oa-section-heading {
    max-width: 740px;
    margin-bottom: 2.5rem;
}

.oa-section-heading h2 {
    margin-bottom: .8rem;
    font-size: clamp(2rem, 3.4vw, 3.15rem);
    line-height: 1.08;
}

.oa-feature-card {
    height: 100%;
    padding: 1.65rem;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-lg);
    background: #fff;
    box-shadow: var(--oa-shadow-sm);
}

.oa-feature-icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 1.25rem;
    place-items: center;
    border-radius: 12px;
    background: var(--oa-field-soft);
    color: var(--oa-field);
    font-size: 1.22rem;
}

.oa-feature-card:nth-child(2n) .oa-feature-icon {
    background: var(--oa-teal-soft);
    color: var(--oa-teal);
}

.oa-feature-card h3 {
    font-size: 1.08rem;
}

.oa-feature-card p {
    margin: 0;
    color: var(--oa-muted);
    font-size: .92rem;
    line-height: 1.65;
}

.oa-connected-capture {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--oa-border);
}

.oa-connected-capture::before {
    position: absolute;
    top: -230px;
    right: -180px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(22, 138, 138, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(22, 138, 138, .025), 0 0 0 140px rgba(22, 138, 138, .018);
    content: "";
}

.oa-connected-capture .oa-section-heading {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.oa-connected-phone-stage {
    max-width: 510px;
    margin: 0 auto;
}

.oa-capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.oa-capability {
    display: grid;
    min-height: 220px;
    padding: 1.6rem;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-lg);
    background: #fff;
    box-shadow: var(--oa-shadow-sm);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.oa-capability:hover {
    border-color: #b4c9c0;
    box-shadow: var(--oa-shadow-md);
    transform: translateY(-3px);
}

.oa-capability-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 1.4rem;
    place-items: center;
    border-radius: 14px;
    background: var(--oa-field-soft);
    color: var(--oa-field);
    font-size: 1.45rem;
}

.oa-capability:nth-child(2n) .oa-capability-icon {
    background: var(--oa-teal-soft);
    color: var(--oa-teal);
}

.oa-capability h3 {
    margin-bottom: .55rem;
    font-size: 1.08rem;
}

.oa-capability p {
    margin: 0;
    color: var(--oa-muted);
    font-size: .88rem;
    line-height: 1.65;
}

.oa-workflow {
    background: var(--oa-ink);
    color: #fff;
}

.oa-workflow h2,
.oa-workflow h3 {
    color: #fff;
}

.oa-workflow .page-eyebrow {
    color: #88d4c1;
}

.oa-step {
    position: relative;
    padding: 1.2rem 1.2rem 1.2rem 3.75rem;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.oa-step-number {
    position: absolute;
    top: 1.05rem;
    left: -18px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: var(--oa-ink-strong);
    color: var(--oa-solar);
    font-family: "IBM Plex Mono", monospace;
    font-size: .76rem;
}

.oa-step p {
    margin: 0;
    color: rgba(255, 255, 255, .62);
}

.oa-download {
    background: linear-gradient(135deg, #e7f1ec 0%, #f7f4e9 100%);
}

.app-badge {
    height: 3rem;
}

/* Dashboard */
.dashboard-page {
    padding-top: .5rem !important;
}

.dashboard-heading {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.dashboard-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
}

.dashboard-toolbar .btn {
    min-height: 36px;
    padding: .45rem .72rem;
}

#dateFilterCollapse .card {
    border-left: 3px solid var(--oa-field);
}

#dashboardContent > .col-12 > .card {
    border: 0;
    background: transparent;
    box-shadow: none !important;
}

#dashboardContent > .col-12 > .card > .card-body {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.folder-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--oa-border) !important;
    background: #fff;
    box-shadow: var(--oa-shadow-sm) !important;
}

.folder-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--oa-field);
    opacity: 0;
    content: "";
    transition: opacity .18s ease;
}

.folder-card:hover {
    border-color: #aec5bb !important;
    box-shadow: var(--oa-shadow-md) !important;
    transform: translateY(-3px) !important;
}

.folder-card:hover::before {
    opacity: 1;
}

.folder-card .card-body {
    padding: 1.45rem !important;
    text-align: left !important;
}

.folder-icon {
    display: grid;
    width: 45px;
    height: 45px;
    margin-bottom: 1.2rem !important;
    place-items: center;
    border-radius: 11px;
    background: var(--oa-field-soft);
}

.folder-icon i {
    color: var(--oa-field) !important;
    font-size: 1.42rem !important;
}

.folder-card .card-title {
    margin-bottom: .35rem;
    color: var(--oa-ink);
    font-size: 1rem;
    font-weight: 600;
}

.folder-card .card-text {
    margin: 0;
    font-size: .77rem;
}

.empty-state {
    max-width: 520px;
    margin: 2rem auto;
    padding: 3.5rem 2rem;
    border: 1px dashed var(--oa-border-strong);
    border-radius: var(--oa-radius-lg);
    background: rgba(255, 255, 255, .55);
}

/* Collections and evidence */
.collection-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
}

.collection-count {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .65rem;
    border: 1px solid var(--oa-border);
    border-radius: 999px;
    background: #fff;
    color: var(--oa-slate);
    font-size: .76rem;
    font-weight: 500;
}

.image-card {
    overflow: hidden;
    border-color: var(--oa-border) !important;
    border-radius: var(--oa-radius) !important;
    box-shadow: var(--oa-shadow-sm) !important;
}

.image-card:hover {
    border-color: #adc1b9 !important;
    box-shadow: var(--oa-shadow-md) !important;
    transform: translateY(-3px) !important;
}

.image-card .image-container {
    height: 220px !important;
    background: #dfe7e3;
}

.image-card .card-body {
    border-top: 1px solid var(--oa-border);
}

.image-card .card-title {
    font-size: .96rem;
}

.image-card .text-muted,
.image-card small {
    font-size: .73rem;
}

.card-edit-btn {
    border: 1px solid rgba(255, 255, 255, .3) !important;
    background: rgba(10, 30, 38, .84) !important;
    box-shadow: none !important;
}

.fullscreen-overlay {
    background: rgba(7, 23, 29, .97) !important;
}

.fullscreen-container {
    background: transparent !important;
}

.fullscreen-info-overlay {
    background: linear-gradient(transparent, rgba(7, 23, 29, .92)) !important;
}

.fullscreen-close,
.fullscreen-edit,
.fullscreen-nav-btn {
    border-color: rgba(255, 255, 255, .2) !important;
    background: rgba(16, 42, 51, .82) !important;
    backdrop-filter: blur(8px);
}

/* Account and subscription surfaces */
.auth-masthead {
    min-height: calc(100vh - 210px);
    padding: 2.5rem 0 !important;
    background:
        linear-gradient(rgba(16, 42, 51, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 51, .025) 1px, transparent 1px),
        var(--oa-surface);
    background-size: 32px 32px;
}

.auth-masthead section {
    padding: 1.75rem;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-lg);
    background: #fff;
    box-shadow: var(--oa-shadow-sm);
}

.auth-masthead .masthead-device-mockup .shape-1,
.auth-masthead .masthead-device-mockup .shape-2 {
    fill: var(--oa-solar);
    opacity: .85;
}

.auth-masthead .masthead-device-mockup .circle {
    opacity: .72;
}

.auth-masthead .auth-visual {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    border: 1px solid rgba(16, 42, 51, .12);
    border-radius: 20px;
    background-image: url("../assets/img/login-spatial-intelligence.webp");
    background-position: center;
    background-size: cover;
    box-shadow: 0 24px 65px rgba(16, 42, 51, .16);
}

.auth-masthead .auth-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(7, 26, 33, .46));
    content: "";
    pointer-events: none;
}

.auth-masthead .auth-visual .masthead-device-mockup {
    display: none;
}

/* Login workspace */
.account-masthead {
    position: relative;
    min-height: calc(100svh - 72px);
    overflow: hidden;
    padding: clamp(3.5rem, 6vw, 6rem) 0 !important;
    background:
        radial-gradient(circle at 82% 46%, rgba(24, 124, 101, .12), transparent 31%),
        linear-gradient(135deg, #f7faf8 0%, #edf5f1 54%, #f7f4e9 100%);
}

.account-masthead::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(16, 42, 51, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 51, .035) 1px, transparent 1px);
    background-size: 40px 40px;
    content: "";
    pointer-events: none;
}

.account-masthead .container,
.account-masthead > .container > .row {
    position: relative;
    z-index: 1;
}

.account-masthead > .container > .row {
    min-height: 620px;
}

.account-masthead .account-panel-column {
    margin: 0;
}

.account-masthead section {
    padding: clamp(1.75rem, 3vw, 2.45rem);
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 80px rgba(4, 20, 27, .32);
    backdrop-filter: blur(18px) saturate(120%);
}

.account-masthead .page-eyebrow {
    margin-bottom: .7rem;
}

.account-masthead .form-control {
    border-color: rgba(116, 139, 133, .42);
    background: rgba(255, 255, 255, .82);
}

.account-masthead .auth-visual {
    display: flex;
    min-height: auto;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 3rem;
    border: 0;
    background: none;
    box-shadow: none;
}

.account-masthead .auth-visual::after {
    display: none;
}

.account-phone-stage {
    width: min(100%, 540px);
    min-height: 620px;
    margin: 0 auto;
}

.account-phone-stage .oa-hero-phone-copy h2 {
    font-size: 1.8rem;
}

.register-masthead > .container > .row {
    min-height: 660px;
}

.register-masthead section {
    padding: clamp(1.5rem, 2.4vw, 2rem);
}

.subscription-page .page-intro {
    max-width: 580px;
}

.subscription-page .list-unstyled li {
    color: var(--oa-slate);
    font-size: .9rem;
}

#monthly-plan-card,
#yearly-plan-card {
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

#monthly-plan-card:hover,
#yearly-plan-card:hover {
    box-shadow: var(--oa-shadow-md);
    transform: translateY(-3px);
}

#monthly-plan-card .card-header,
#yearly-plan-card .card-header {
    background: #f7faf8 !important;
    color: var(--oa-ink) !important;
}

#monthly-plan-card .card-header.bg-success,
#yearly-plan-card .card-header.bg-success,
#yearly-plan-card .card-header.bg-primary {
    background: var(--oa-ink) !important;
}

/* Footer */
footer.bg-black {
    padding: 2rem 0 !important;
    border-top: 3px solid var(--oa-field);
    background: var(--oa-ink-strong) !important;
}

.footer-brand {
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    #mainNav .navbar-collapse {
        margin-top: .75rem;
        padding: .85rem;
        border: 1px solid var(--oa-border);
        border-radius: var(--oa-radius);
        background: #fff;
        box-shadow: var(--oa-shadow-md);
    }

    .page-shell {
        padding: 92px 18px 28px;
    }

    .app-public .page-shell {
        padding: 72px 0 0;
    }

    .oa-hero-phone-stage {
        max-width: 520px;
        margin: 3rem auto 0;
    }

    .oa-public-hero {
        padding: 4.5rem 0;
    }

    .oa-help-visual {
        max-width: 520px;
        margin: 0 auto;
    }

    .public-page-header {
        padding: 2.5rem 0 2.25rem !important;
    }

    .public-content-section {
        padding: 2.25rem 0 3.5rem;
    }

    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-toolbar {
        justify-content: flex-start;
    }

    .account-masthead {
        padding: 3.5rem 0 !important;
    }

    .account-masthead > .container > .row {
        min-height: auto;
        justify-content: center;
    }

    .account-masthead .account-panel-column {
        margin: auto;
    }

    .account-masthead .auth-visual {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .oa-hero {
        padding-top: 3.5rem;
    }

    .oa-hero h1 {
        font-size: 2.65rem;
    }

    .oa-public-hero {
        padding: 3.5rem 0;
    }

    .oa-public-hero h1 {
        font-size: 2.55rem;
    }

    .oa-help-visual {
        min-height: 350px;
    }

    .oa-help-core {
        width: 190px;
        min-height: 190px;
        padding: 1.35rem;
    }

    .oa-help-orbit {
        width: 265px;
        height: 265px;
    }

    .oa-help-chip-one {
        left: 0;
    }

    .oa-help-chip-two {
        top: 34%;
        right: 0;
    }

    .oa-help-chip-three {
        right: 2%;
        bottom: 10%;
    }

    .faq-button {
        padding: 1rem;
    }

    .faq-button > i:first-child {
        margin-right: .75rem !important;
    }

    .faq-body {
        padding: 1rem 1.25rem 1.35rem;
    }

    .oa-hero-phone-stage {
        min-height: 520px;
    }

    .oa-hero-phone {
        width: 235px;
        height: 475px;
        border-radius: 41px;
    }

    .oa-hero-phone-screen {
        border-radius: 32px;
    }

    .oa-hero-phone-orbit {
        width: 330px;
        height: 330px;
    }

    .oa-hero-phone-topbar {
        top: 52px;
        right: 18px;
        left: 18px;
    }

    .oa-hero-phone-copy {
        top: 112px;
        right: 18px;
        left: 18px;
    }

    .oa-hero-phone-copy h2 {
        font-size: 1.65rem;
    }

    .oa-hero-phone-copy p {
        font-size: .68rem;
    }

    .oa-hero-phone-data {
        right: 16px;
        bottom: 18px;
        left: 16px;
    }

    .oa-hero-float-location {
        top: 22%;
        left: 0;
    }

    .oa-hero-float-sync {
        right: 0;
        bottom: 17%;
    }

    .oa-capability-grid {
        grid-template-columns: 1fr;
    }

    .oa-capability {
        min-height: auto;
    }

    .dashboard-toolbar .btn {
        flex: 1 1 calc(50% - .5rem);
    }

    .image-card .image-container {
        height: 245px !important;
    }

    .account-masthead {
        min-height: 0;
        padding: 2.5rem 0 !important;
    }

    .account-masthead .container {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .account-masthead section {
        padding: 1.5rem;
        background: rgba(255, 255, 255, .95);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}