:root {
    --orange: #ff5a00;
    --orange-light: #ff7a2f;
    --orange-dark: #d94c00;
    --black: #101010;
    --charcoal: #191919;
    --white: #ffffff;
    --paper: #f6f4f1;
    --muted: #6c6c6c;
    --border: #dedbd6;
    --radius: 1rem;
    --shadow: 0 1rem 2.5rem rgba(16, 16, 16, 0.1);
    --shell: 72rem;
}

/* Mobile invoicing page */
.billing-hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: var(--black);
}
.billing-hero::after {
    position: absolute;
    right: -10rem;
    bottom: -15rem;
    width: 32rem;
    height: 32rem;
    background: var(--orange);
    border-radius: 50%;
    opacity: .12;
    content: "";
}
.billing-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3.5rem;
    padding-block: 4.5rem 5.5rem;
}
.billing-hero h1 { max-width: 12ch; }
.billing-hero__lead { max-width: 47rem; color: #c7c7c7; font-size: 1.08rem; }
.billing-hero__visual { position: relative; min-height: 28rem; }
.billing-invoice-sheet {
    width: 82%;
    padding: 1rem;
    color: var(--black);
    background: var(--white);
    border-radius: .8rem;
    box-shadow: 0 1.6rem 3.5rem rgba(0,0,0,.35);
    transform: rotate(-3deg);
}
.billing-invoice-sheet header { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: .2rem solid var(--orange); }
.billing-invoice-sheet header div span { display: grid; width: 2rem; height: 2rem; place-items: center; float: left; margin-right: .5rem; color: var(--black); background: var(--orange); font-size: .6rem; font-weight: 900; }
.billing-invoice-sheet header div strong { font-size: .62rem; }
.billing-invoice-sheet header b { font-size: .85rem; }
.billing-invoice-sheet__meta { display: flex; gap: 1rem; justify-content: flex-end; padding-block: .8rem; }
.billing-invoice-sheet__meta small,
.billing-invoice-sheet__meta strong,
.billing-invoice-sheet__customer small,
.billing-invoice-sheet__customer strong,
.billing-invoice-sheet__customer span { display: block; }
.billing-invoice-sheet__meta small,
.billing-invoice-sheet__customer small { color: var(--muted); font-size: .42rem; text-transform: uppercase; }
.billing-invoice-sheet__meta strong,
.billing-invoice-sheet__customer strong,
.billing-invoice-sheet__customer span { font-size: .55rem; }
.billing-invoice-sheet__line,
.billing-invoice-sheet__total { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding: .65rem; font-size: .55rem; }
.billing-invoice-sheet__line { background: #f1efec; }
.billing-invoice-sheet__total { margin-left: 40%; color: var(--white); background: var(--black); }
.billing-invoice-sheet__total small,
.billing-invoice-sheet__total strong { display: block; }
.billing-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 54%;
    padding: .5rem;
    color: var(--white);
    background: #202020;
    border-radius: 1.7rem;
    box-shadow: var(--shadow);
}
.billing-phone > div { padding: .6rem; color: var(--orange); font-size: .55rem; font-weight: 850; text-align: center; }
.billing-phone article { min-height: 19rem; padding: .8rem; color: var(--black); background: #f2f0ed; border-radius: 1.15rem; }
.billing-phone article > small { color: var(--orange-dark); font-size: .43rem; font-weight: 900; letter-spacing: .1em; }
.billing-phone article > strong { display: block; margin: .25rem 0 .8rem; font-size: .68rem; }
.billing-phone label { display: block; margin-top: .5rem; color: var(--muted); font-size: .45rem; }
.billing-phone label span { display: block; margin-top: .2rem; padding: .55rem; color: var(--black); background: var(--white); border: 1px solid var(--border); border-radius: .35rem; font-size: .52rem; }
.billing-phone button,
.billing-mobile-form button,
.billing-customer-card button { width: 100%; margin-top: .7rem; padding: .65rem; color: var(--black); background: var(--orange); border: 0; border-radius: .4rem; font: inherit; font-size: .55rem; font-weight: 850; opacity: 1; }
.billing-value-strip { background: var(--orange); }
.billing-value-strip > div { display: grid; gap: .3rem; padding-block: 1rem; }
.billing-value-strip strong { font-size: .8rem; }
.billing-value-strip span { font-size: .7rem; }

.billing-workflow-section { background: var(--paper); }
.billing-workflow { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.billing-workflow li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .75rem; }
.billing-workflow li > span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .5rem; font-size: .58rem; font-weight: 900; }
.billing-workflow h3 { margin: .05rem 0 .3rem; font-size: .95rem; }
.billing-workflow p { margin: 0; color: var(--muted); font-size: .72rem; }

.billing-mobile-section { color: var(--white); background: var(--black); }
.billing-mobile__layout { display: grid; gap: 3rem; align-items: center; }
.billing-mobile__layout > div:first-child > p:not(.eyebrow) { color: #bdbdbd; }
.billing-check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.billing-check-list li { position: relative; padding-left: 1.3rem; color: #d0d0d0; font-size: .68rem; }
.billing-check-list li::before { position: absolute; left: 0; color: var(--orange); content: "\2713"; font-weight: 900; }
.billing-mobile-form { width: min(100%,21rem); margin-inline: auto; padding: .55rem; color: var(--white); background: #222; border-radius: 1.6rem; box-shadow: var(--shadow); }
.billing-mobile-form__top { display: flex; justify-content: space-between; padding: .7rem; color: var(--orange); font-size: .57rem; font-weight: 850; }
.billing-mobile-form article { padding: .8rem; color: var(--black); background: #f2f0ed; border-radius: 1.1rem; }
.billing-mobile-form label { display: block; margin-bottom: .55rem; color: var(--muted); font-size: .48rem; font-weight: 750; }
.billing-mobile-form label span { display: block; margin-top: .2rem; padding: .55rem; color: var(--black); background: var(--white); border: 1px solid var(--border); border-radius: .35rem; font-size: .56rem; }
.billing-mobile-form__item { padding: .6rem; background: var(--white); border-radius: .45rem; }
.billing-mobile-form__item header,
.billing-mobile-form__item > div,
.billing-mobile-form__summary span { display: flex; justify-content: space-between; gap: .5rem; }
.billing-mobile-form__item header { margin-bottom: .5rem; color: var(--orange-dark); font-size: .45rem; }
.billing-mobile-form__item > div label { width: 48%; }
.billing-mobile-form__summary { padding-block: .6rem; }
.billing-mobile-form__summary span { padding: .3rem; font-size: .55rem; }

.billing-pdf-section { background: #ece8e2; }
.billing-pdf__layout { display: grid; gap: 3rem; align-items: center; }
.billing-pdf__layout > div:last-child p:not(.eyebrow) { color: var(--muted); }
.billing-pdf-preview { padding: 1.2rem; background: var(--white); border-radius: .5rem; box-shadow: var(--shadow); }
.billing-pdf-preview__head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: .2rem solid var(--orange); }
.billing-pdf-preview__head strong,
.billing-pdf-preview__head small { display: block; }
.billing-pdf-preview__head strong { font-size: .7rem; }
.billing-pdf-preview__head small { color: var(--muted); font-size: .45rem; }
.billing-pdf-preview__head > span { font-size: 1.1rem; font-weight: 900; }
.billing-pdf-preview__details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 1rem; }
.billing-pdf-preview__details small,
.billing-pdf-preview__details strong,
.billing-pdf-preview__details span { display: block; font-size: .5rem; }
.billing-pdf-preview__details small { margin-top: .25rem; color: var(--muted); }
.billing-pdf-preview__table > div { display: grid; grid-template-columns: 1fr auto auto auto; gap: .5rem; padding: .55rem; font-size: .5rem; }
.billing-pdf-preview__table > div:first-child { color: var(--white); background: var(--black); }
.billing-pdf-preview__table > div:nth-child(2) { background: #f2f0ed; }
.billing-pdf-preview__totals { width: 55%; margin: .7rem 0 0 auto; }
.billing-pdf-preview__totals span { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem; font-size: .5rem; }
.billing-pdf-preview__totals span:last-child { color: var(--white); background: var(--black); }
.billing-pdf-preview__footer { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--border); font-size: .5rem; }
.billing-pdf-preview > small { display: block; color: var(--muted); font-size: .42rem; text-align: right; }

.billing-status-section { background: var(--paper); }
.billing-status-board { overflow: hidden; margin-top: 2rem; padding: .8rem; background: #efede9; border: 1px solid var(--border); border-radius: .9rem; box-shadow: var(--shadow); }
.billing-status-board__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; color: var(--white); background: var(--black); border-radius: .5rem; }
.billing-status-board__head small,
.billing-status-board__head strong { display: block; }
.billing-status-board__head small { color: var(--orange); font-size: .45rem; font-weight: 900; letter-spacing: .1em; }
.billing-status-board__head strong { font-size: .75rem; }
.billing-status-board__head > span { padding: .5rem; color: var(--black); background: var(--orange); border-radius: .35rem; font-size: .5rem; font-weight: 850; }
.billing-status-board__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: .45rem; margin-top: .55rem; }
.billing-status-board__stats article { padding: .7rem; background: var(--white); border-radius: .45rem; }
.billing-status-board__stats small,
.billing-status-board__stats strong,
.billing-status-board__stats span { display: block; }
.billing-status-board__stats small { color: var(--muted); font-size: .47rem; }
.billing-status-board__stats strong { font-size: 1rem; }
.billing-status-board__stats span { color: var(--muted); font-size: .46rem; }
.billing-status-board__filters { display: flex; overflow-x: auto; gap: .35rem; padding-block: .6rem; }
.billing-status-board__filters span { flex: 0 0 auto; padding: .4rem .5rem; background: var(--white); border-radius: .35rem; font-size: .48rem; }
.billing-status-board__filters .is-active { color: var(--black); background: var(--orange); font-weight: 850; }
.billing-status-board__row { display: grid; grid-template-columns: .7fr 1.3fr .7fr .7fr .8fr; gap: .35rem; padding: .55rem; background: var(--white); border-bottom: 1px solid var(--border); font-size: .48rem; }
.billing-status-board__row--head { color: var(--muted); font-size: .43rem; }
.billing-status-board__row .is-sent,
.billing-status-board__row .is-overdue,
.billing-status-board__row .is-paid { justify-self: start; padding: .18rem .3rem; border-radius: 99rem; font-weight: 850; }
.billing-status-board__row .is-sent { color: #245e8a; background: #e5f2fc; }
.billing-status-board__row .is-overdue { color: #8a211b; background: #fde9e7; }
.billing-status-board__row .is-paid { color: #176138; background: #e5f7ec; }
.billing-status-board > small { display: block; padding-top: .45rem; color: var(--muted); font-size: .43rem; text-align: right; }

.billing-customer-section { color: var(--white); background: var(--black); }
.billing-customer__layout { display: grid; gap: 3rem; align-items: center; }
.billing-customer__layout > div:first-child p:not(.eyebrow) { color: #bdbdbd; }
.billing-customer-card { padding: 1rem; color: var(--black); background: #f2f0ed; border-radius: .9rem; }
.billing-customer-card__head { display: flex; gap: .7rem; align-items: center; padding: .8rem; color: var(--white); background: #222; border-radius: .5rem; }
.billing-customer-card__head i { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-size: .65rem; font-style: normal; font-weight: 900; }
.billing-customer-card__head small,
.billing-customer-card__head strong,
.billing-customer-card__head span { display: block; }
.billing-customer-card__head small { color: var(--orange); font-size: .43rem; }
.billing-customer-card__head strong { font-size: .68rem; }
.billing-customer-card__head span { color: #aaa; font-size: .46rem; }
.billing-customer-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-block: .6rem; }
.billing-customer-card__stats article { padding: .65rem; background: var(--white); border-radius: .4rem; }
.billing-customer-card__stats small,
.billing-customer-card__stats strong { display: block; }
.billing-customer-card__stats small { color: var(--muted); font-size: .46rem; }
.billing-customer-card__stats strong { font-size: .85rem; }
.billing-customer-card ul { margin: 0; padding: 0; list-style: none; }
.billing-customer-card li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; padding: .6rem; background: var(--white); border-bottom: 1px solid var(--border); font-size: .5rem; }
.billing-customer-card li span { color: var(--orange-dark); font-weight: 850; }
.billing-customer-card li small { color: var(--muted); }

.billing-reports-section { background: #ece8e2; }
.billing-report-grid,
.billing-business-grid { display: grid; gap: .8rem; margin-top: 2rem; }
.billing-report-grid article,
.billing-business-grid article { padding: 1.2rem; background: var(--white); border-top: .3rem solid var(--orange); border-radius: .2rem .2rem .75rem .75rem; }
.billing-report-grid span,
.billing-business-grid span { color: var(--orange-dark); font-size: .55rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.billing-report-grid h3,
.billing-business-grid h3 { margin: .7rem 0 .35rem; font-size: 1rem; }
.billing-report-grid p,
.billing-business-grid p { margin: 0; color: var(--muted); font-size: .72rem; }
.billing-businesses-section { background: var(--paper); }
.billing-foundation-section { background: var(--orange); }
.billing-foundation-section .eyebrow { color: var(--black); }
.billing-foundation__panel { display: grid; gap: 1.5rem; }
.billing-foundation__panel > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; align-content: center; }
.billing-foundation__panel > div:last-child span { padding: .6rem .7rem; color: var(--white); background: var(--black); border-radius: .4rem; font-size: .58rem; font-weight: 800; }
.billing-compliance-section { background: #ece8e2; }
.billing-compliance__layout { display: grid; gap: 2rem; align-items: center; }
.billing-compliance__layout > div:first-child p:not(.eyebrow) { color: var(--muted); }
.billing-compliance__note { padding: 1.3rem; color: var(--white); background: var(--black); border-left: .4rem solid var(--orange); border-radius: 0 .8rem .8rem 0; }
.billing-compliance__note span,
.billing-compliance__note strong { display: block; }
.billing-compliance__note span { color: var(--orange); font-size: .55rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.billing-compliance__note strong { margin-block: .4rem; font-size: .9rem; }
.billing-compliance__note p { margin: 0; color: #aaa; font-size: .68rem; }
.billing-final-section { background: #ece8e2; }
.billing-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; color: var(--white); background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }
.billing-final__panel h2 { max-width: 16ch; }
.billing-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }
.billing-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .billing-value-strip > div { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }
    .billing-workflow,
    .billing-report-grid,
    .billing-business-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .billing-status-board__stats { grid-template-columns: repeat(4,1fr); }
}

@media (min-width: 58rem) {
    .billing-hero__layout { grid-template-columns: minmax(0,1fr) minmax(28rem,1fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .billing-workflow,
    .billing-report-grid,
    .billing-business-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .billing-mobile__layout,
    .billing-pdf__layout,
    .billing-customer__layout,
    .billing-compliance__layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }
    .billing-foundation__panel { grid-template-columns: 1fr 1fr; align-items: center; }
    .billing-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--black);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

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

a {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: 1.1;
}

h1 {
    max-width: 14ch;
    margin-bottom: 1.25rem;
    font-size: clamp(2.5rem, 9vw, 5.5rem);
    letter-spacing: -0.055em;
}

h2 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 7vw, 3.8rem);
    letter-spacing: -0.04em;
}

.shell {
    width: min(calc(100% - 2rem), var(--shell));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 0;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    color: var(--white);
    background: var(--orange);
    transform: translateY(-120%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    color: var(--white);
    background: var(--black);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 .5rem 1.5rem rgba(16, 16, 16, 0.08);
    transform: translateY(0);
    transition: transform 220ms ease, box-shadow 220ms ease;
    will-change: transform;
}

.site-header.site-header--hidden {
    transform: translateY(calc(-100% - 1px));
    box-shadow: none;
}

.site-header:focus-within {
    transform: translateY(0);
}

.site-header__inner {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--white);
    text-decoration: none;
}

.brand__initials {
    color: var(--orange);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.07em;
}

.brand__name {
    padding-left: 0.65rem;
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: 0.015em;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.menu-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.6rem;
    font: inherit;
}

.menu-button__icon,
.menu-button__icon::before,
.menu-button__icon::after {
    display: block;
    width: 1.2rem;
    height: 2px;
    background: currentColor;
}

.menu-button__icon {
    position: relative;
}

.menu-button__icon::before,
.menu-button__icon::after {
    position: absolute;
    left: 0;
    content: "";
}

.menu-button__icon::before { top: -0.38rem; }
.menu-button__icon::after { top: 0.38rem; }

.primary-navigation {
    position: absolute;
    top: 100%;
    right: 1rem;
    left: 1rem;
    display: none;
    padding: 0.5rem;
    background: var(--charcoal);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
}

.primary-navigation.is-open {
    display: grid;
}

.primary-navigation a {
    padding: 0.8rem 1rem;
    text-decoration: none;
    border-radius: 0.55rem;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible,
.primary-navigation a.is-current {
    color: var(--black);
    background: var(--orange);
}

.hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: var(--black);
}

.hero::after {
    position: absolute;
    right: -8rem;
    bottom: -12rem;
    width: 23rem;
    height: 23rem;
    background: var(--orange);
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.16;
    content: "";
}

.hero__inner {
    position: relative;
    z-index: 1;
    padding-block: 5rem 6rem;
}

.eyebrow {
    margin-bottom: 0.9rem;
    color: var(--orange-light);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero__lead {
    max-width: 37rem;
    margin-bottom: 2rem;
    color: #c9c9c9;
    font-size: clamp(1.05rem, 3vw, 1.3rem);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.button {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.15rem;
    font-weight: 800;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 0.7rem;
}

.button--primary {
    color: var(--white);
    background: var(--black);
    border-color: var(--orange);
}

.button--secondary {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.35);
}

.section {
    padding-block: 4.5rem;
}

.section-heading {
    max-width: 43rem;
    margin-bottom: 2rem;
}

.section-heading > p:last-child {
    color: var(--muted);
}

.status-grid {
    display: grid;
    gap: 1rem;
}

.status-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem rgba(16, 16, 16, 0.05);
}

.status-card__dot {
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: 0.22rem;
    background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 0 0.3rem rgba(255, 90, 0, 0.15);
}

.status-card h3 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.status-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.section--dark {
    color: var(--white);
    background: var(--charcoal);
}

.split-panel > p {
    max-width: 38rem;
    margin-bottom: 0;
    color: #c9c9c9;
}

.site-footer {
    padding-block: 2rem;
    color: #a8a8a8;
    background: var(--black);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__inner {
    display: grid;
    gap: 0.35rem;
}

.site-footer p {
    margin-bottom: 0;
}

@media (min-width: 42rem) {
    .hero__actions {
        flex-direction: row;
    }

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

@media (min-width: 52rem) {
    .menu-button {
        display: none;
    }

    .primary-navigation {
        position: static;
        display: flex;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .hero__inner {
        padding-block: 7rem 8rem;
    }

    .status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .split-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: end;
    }

    .site-footer__inner {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .site-header {
        transition: none;
    }
}

/* Homepage: SMT services and software */
.home-hero__inner { position: relative; z-index: 1; display: grid; gap: 2.5rem; padding-block: 4.5rem 5.5rem; }
.home-hero__content h1 { max-width: 12ch; }
.hero-workflow {
    padding: 1.25rem; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
    backdrop-filter: blur(8px);
}
.hero-workflow__label {
    margin-bottom: 1.25rem; color: var(--orange-light); font-size: .72rem;
    font-weight: 850; letter-spacing: .15em; text-transform: uppercase;
}
.hero-workflow__step { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; }
.hero-workflow__step span {
    display: grid; width: 2.35rem; height: 2.35rem; place-items: center;
    color: var(--black); background: var(--orange); border-radius: .65rem;
    font-size: .7rem; font-weight: 900;
}
.hero-workflow__step strong { font-size: .9rem; }
.hero-workflow__line { width: 1px; height: 1.25rem; margin-left: 1.15rem; background: rgba(255,255,255,.25); }

.trust-strip { color: var(--white); background: var(--orange); }
.trust-strip__grid { display: grid; }
.trust-strip__grid div { padding: 1rem 0; border-bottom: 1px solid rgba(16,16,16,.18); }
.trust-strip__grid div:last-child { border-bottom: 0; }
.trust-strip strong, .trust-strip span { display: block; }
.trust-strip strong { color: var(--black); font-size: .88rem; }
.trust-strip span { color: #552000; font-size: .75rem; }

.section-heading--wide { max-width: 52rem; }
.section-heading--split { display: grid; gap: 1rem; max-width: none; }
.section-heading--split > p { max-width: 35rem; color: var(--muted); }
.service-feature-grid { display: grid; gap: 1rem; }
.service-feature {
    display: flex; min-height: 20rem; flex-direction: column; padding: 1.4rem;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 .7rem 1.8rem rgba(16,16,16,.06);
}
.service-feature__number { margin-bottom: auto; color: var(--orange); font-size: .75rem; font-weight: 900; }
.service-feature h3 { margin: 2rem 0 .75rem; font-size: 1.55rem; }
.service-feature p { color: var(--muted); }
.service-feature--orange { color: var(--black); background: var(--orange); border-color: var(--orange); }
.service-feature--orange .service-feature__number, .service-feature--orange p { color: #572000; }
.service-feature--dark { color: var(--white); background: var(--black); border-color: var(--black); }
.service-feature--dark p { color: #bdbdbd; }
.text-link { margin-top: auto; font-weight: 850; text-decoration: none; }

.tree-section { overflow: hidden; background: var(--white); }
.tree-layout { display: grid; gap: 3rem; align-items: center; }
.tree-content > p:not(.eyebrow):not(.tree-growth-copy) { max-width: 43rem; color: var(--muted); }
.tree-price {
    display: inline-grid; margin: .5rem 0 1.25rem; padding: 1rem 1.15rem;
    color: var(--white); background: var(--black); border-left: .35rem solid var(--orange);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.tree-price span, .tree-price small { color: #bdbdbd; }
.tree-price span { font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.tree-price strong { color: var(--orange); font-size: 1.85rem; line-height: 1.1; }
.tree-price small { font-size: .72rem; }
.tree-growth-copy { max-width: 43rem; color: var(--muted); }

.tree-visual {
    position: relative; min-height: 34rem; max-width: 38rem; margin-inline: auto;
    isolation: isolate;
}
.tree-canopy { position: absolute; inset: 4rem 10% auto; height: 18rem; z-index: -2; }
.tree-canopy i { position: absolute; background: var(--orange); border-radius: 50%; box-shadow: 0 1rem 2rem rgba(255,90,0,.18); }
.tree-canopy i:nth-child(1) { top: 2rem; left: 4%; width: 13rem; height: 13rem; }
.tree-canopy i:nth-child(2) { top: 0; right: 4%; width: 14rem; height: 14rem; }
.tree-canopy i:nth-child(3) { bottom: 0; left: 27%; width: 15rem; height: 15rem; }
.tree-trunk { position: absolute; top: 17rem; bottom: 4.5rem; left: 50%; z-index: -1; width: 2.4rem; background: var(--black); border-radius: 1.2rem .5rem .3rem 1rem; transform: translateX(-50%); }
.tree-core {
    position: absolute; top: 10.5rem; left: 50%; display: grid; width: 10rem; height: 10rem;
    place-content: center; padding: 1rem; color: var(--white); background: var(--black);
    border: .4rem solid var(--white); border-radius: 50%; box-shadow: var(--shadow);
    text-align: center; transform: translateX(-50%);
}
.tree-core span { color: var(--orange); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.tree-core strong { font-size: 2rem; line-height: 1; }
.tree-core small { margin-top: .45rem; color: #bdbdbd; font-size: .58rem; }
.tree-branch {
    position: absolute; z-index: 2; display: grid; min-width: 7.5rem; padding: .7rem .8rem;
    background: var(--white); border: 1px solid var(--border); border-radius: .75rem;
    box-shadow: 0 .65rem 1.6rem rgba(16,16,16,.12);
}
.tree-branch::after { position: absolute; z-index: -1; width: 4rem; height: .28rem; background: var(--black); content: ""; }
.tree-branch span { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.tree-branch strong { font-size: .9rem; }
.tree-branch--invoice { top: 3rem; left: 0; }
.tree-branch--invoice::after { top: 100%; left: 75%; transform: rotate(42deg); transform-origin: left; }
.tree-branch--quote { top: 3rem; right: 0; }
.tree-branch--quote::after { top: 100%; right: 75%; transform: rotate(-42deg); transform-origin: right; }
.tree-branch--portal { top: 18rem; left: 0; }
.tree-branch--portal::after { top: 50%; left: 100%; transform: rotate(-8deg); transform-origin: left; }
.tree-branch--team { top: 18rem; right: 0; }
.tree-branch--team::after { top: 50%; right: 100%; transform: rotate(8deg); transform-origin: right; }
.tree-roots { position: absolute; right: 18%; bottom: 3.5rem; left: 18%; height: 3rem; z-index: -1; }
.tree-roots i { position: absolute; bottom: 0; left: 50%; width: 45%; height: .35rem; background: var(--black); border-radius: 99rem; transform-origin: left; }
.tree-roots i:first-child { transform: rotate(160deg); }.tree-roots i:nth-child(2) { transform: rotate(20deg); }.tree-roots i:nth-child(3) { width: 28%; transform: translateX(-50%) rotate(90deg); }

@media (min-width: 52rem) {
    .tree-layout { grid-template-columns: minmax(0, .9fr) minmax(30rem, 1.1fr); gap: 4rem; }
}

.office-section { position: relative; overflow: hidden; }
.office-layout { display: grid; gap: 2.5rem; }
.office-layout > div:first-child > p:not(.eyebrow) { max-width: 41rem; color: #c7c7c7; }
.device-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.device-list span { padding: .45rem .75rem; border: 1px solid rgba(255,255,255,.22); border-radius: 99rem; font-size: .75rem; font-weight: 750; }
.process-panel { padding: 1.15rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.process-panel__item { padding: 1rem; color: var(--black); background: var(--paper); border: 1px solid var(--border); border-radius: .75rem; }
.process-panel__item span, .process-panel__item strong { display: block; }
.process-panel__item span { margin-bottom: .25rem; color: var(--muted); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.process-panel__item--active { background: var(--orange); border-color: var(--orange); }
.process-panel__item--active span { color: #572000; }
.process-panel__arrow { color: var(--orange); font-size: 1.25rem; font-weight: 900; text-align: center; }

.solution-grid { display: grid; gap: 1rem; }
.solution-card {
    display: flex; min-height: 20rem; flex-direction: column; padding: 1.25rem;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
}
.solution-card__tag { align-self: flex-start; padding: .35rem .6rem; color: var(--orange-dark); background: rgba(255,90,0,.1); border-radius: 99rem; font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.solution-card h3 { margin: 2rem 0 .75rem; font-size: 1.45rem; }
.solution-card p { color: var(--muted); }
.solution-card--accent { background: var(--orange); border-color: var(--orange); }
.solution-card--accent .solution-card__tag { color: var(--white); background: var(--black); }
.solution-card--accent p { color: #572000; }
.card-button { margin-top: auto; padding-top: 1rem; color: var(--orange-dark); font-weight: 850; text-decoration: none; border-top: 1px solid var(--border); }
.solution-card--accent .card-button { color: var(--black); border-color: rgba(16,16,16,.2); }

.invoice-section { background: #e9e5df; }
.invoice-layout { display: grid; gap: 2rem; }
.invoice-content p:not(.eyebrow) { max-width: 39rem; color: var(--muted); }
.button--dark { color: var(--white); background: var(--black); }
.trade-panel { padding: 1.25rem; background: var(--black); border-radius: var(--radius); box-shadow: var(--shadow); }
.trade-panel__title { color: var(--white); font-weight: 850; }
.trade-tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.trade-tags span { padding: .5rem .7rem; color: #d2d2d2; border: 1px solid rgba(255,255,255,.18); border-radius: .6rem; font-size: .76rem; }
.trade-tags span:nth-child(3n+1) { color: var(--black); background: var(--orange); border-color: var(--orange); }

.setup-section { background: var(--white); }
.setup-grid { display: grid; border-top: 1px solid var(--border); }
.setup-grid article { padding: 1.3rem 0; border-bottom: 1px solid var(--border); }
.setup-grid article > span { color: var(--orange); font-size: .72rem; font-weight: 900; }
.setup-grid h3 { margin: .75rem 0 .45rem; font-size: 1.15rem; }
.setup-grid p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }

.contact-section { color: var(--white); background: var(--black); }
.contact-panel { text-align: center; }
.contact-panel h2 { max-width: 21ch; margin-inline: auto; }
.contact-panel > p:not(.eyebrow) { max-width: 45rem; margin-inline: auto; color: #bdbdbd; }
.contact-panel__actions { display: flex; flex-direction: column; gap: .75rem; justify-content: center; margin-top: 2rem; }
.is-static { cursor: default; }

@media (min-width: 42rem) {
    .trust-strip__grid { grid-template-columns: repeat(3, 1fr); }
    .trust-strip__grid div { padding: 1rem; border-right: 1px solid rgba(16,16,16,.18); border-bottom: 0; }
    .trust-strip__grid div:first-child { padding-left: 0; }
    .trust-strip__grid div:last-child { padding-right: 0; border-right: 0; }
    .service-feature-grid, .solution-grid, .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-panel__actions { flex-direction: row; }
}

@media (min-width: 52rem) {
    .home-hero__inner { grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr); align-items: center; padding-block: 7rem 8rem; }
    .section-heading--split { grid-template-columns: 1.25fr .75fr; align-items: end; }
    .office-layout, .invoice-layout { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
    .service-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .setup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .setup-grid article { padding: 1.5rem; border-right: 1px solid var(--border); }
    .setup-grid article:nth-child(3n) { border-right: 0; }
}

/* Responsive admin-panel device showcase */
.device-showcase-section { overflow: hidden; background: #ece8e2; }
.device-stage { display: grid; gap: 2rem; align-items: end; margin-top: 2.5rem; }
.device-demo { min-width: 0; }
.device-demo__label {
    margin-bottom: .65rem; color: var(--muted); font-size: .7rem;
    font-weight: 850; letter-spacing: .14em; text-align: center; text-transform: uppercase;
}
.device-frame {
    position: relative; overflow: hidden; padding: .45rem;
    background: #171717; border: 1px solid #353535; box-shadow: 0 1.4rem 3rem rgba(16,16,16,.18);
}
.device-frame--desktop { aspect-ratio: 16 / 9; border-radius: .75rem; }
.device-frame--laptop { aspect-ratio: 16 / 9; border-radius: .65rem .65rem .2rem .2rem; }
.device-frame--tablet { width: min(100%, 29rem); aspect-ratio: 4 / 3; margin-inline: auto; padding: .6rem; border-radius: 1.2rem; }
.device-frame--phone { width: min(72%, 15rem); aspect-ratio: 9 / 18.7; margin-inline: auto; padding: .42rem; border-radius: 1.8rem; }
.device-camera { position: absolute; top: .17rem; left: 50%; z-index: 2; width: .24rem; height: .24rem; background: #555; border-radius: 50%; transform: translateX(-50%); }
.phone-island { position: absolute; top: .72rem; left: 50%; z-index: 3; width: 30%; height: .7rem; background: #050505; border-radius: 99rem; transform: translateX(-50%); }
.device-screen-image { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: .18rem; }
.device-frame--tablet .device-screen-image { border-radius: .65rem; }
.device-frame--phone .device-screen-image { border-radius: 1.35rem; }
.desktop-stand { width: 19%; height: 2.4rem; margin-inline: auto; background: linear-gradient(90deg,#8e8e8e,#d2d2d2,#858585); clip-path: polygon(35% 0,65% 0,78% 82%,100% 88%,100% 100%,0 100%,0 88%,22% 82%); }
.laptop-base { width: 108%; height: .65rem; margin-left: -4%; background: linear-gradient(#d6d6d6,#858585); border-radius: 0 0 45% 45%; box-shadow: 0 .5rem 1rem rgba(16,16,16,.2); }

.mock-admin { overflow: hidden; height: 100%; color: var(--black); background: #f4f2ef; border-radius: .18rem; font-size: clamp(.32rem, 1.25vw, .72rem); }
.mock-admin__header { display: flex; height: 13%; align-items: center; gap: 4%; padding-inline: 4%; color: var(--white); background: var(--black); }
.mock-admin__header strong { color: var(--orange); font-size: 1.35em; letter-spacing: -.06em; }
.mock-admin__header span { margin-right: auto; color: #bdbdbd; font-size: .75em; font-weight: 800; text-transform: uppercase; }
.mock-admin__header i { width: 8%; height: 14%; background: #636363; border-radius: 99rem; }
.mock-admin__body { display: grid; grid-template-columns: 15% 1fr; height: 87%; }
.mock-admin__body aside { display: flex; flex-direction: column; gap: 9%; padding: 18% 20%; background: #202020; }
.mock-admin__body aside b { width: 100%; height: 4%; background: #6d6d6d; border-radius: 99rem; }
.mock-admin__body aside b:first-child { background: var(--orange); }
.mock-admin__content { display: grid; align-content: start; gap: 7%; height: 87%; padding: 5%; }
.mock-admin__body .mock-admin__content { height: 100%; }
.mock-admin__welcome { padding: 4%; color: var(--white); background: var(--black); border-radius: .45em; }
.mock-admin__welcome small, .mock-admin__welcome strong { display: block; }
.mock-admin__welcome small { margin-bottom: 1%; color: var(--orange); font-size: .62em; font-weight: 900; letter-spacing: .12em; }
.mock-admin__welcome strong { font-size: 1.4em; }
.mock-admin__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 3%; }
.mock-admin__stats span { padding: 7%; background: var(--white); border: 1px solid #ddd; border-radius: .4em; }
.mock-admin__stats small, .mock-admin__stats b { display: block; }
.mock-admin__stats small { color: #777; font-size: .55em; font-weight: 850; }
.mock-admin__stats b { font-size: 1.25em; }
.mock-admin__panels { display: grid; grid-template-columns: 1.4fr .6fr; gap: 3%; min-height: 35%; }
.mock-chart { display: flex; min-height: 28%; align-items: end; justify-content: space-around; gap: 4%; padding: 6% 6% 3%; background: var(--white); border: 1px solid #ddd; border-radius: .4em; }
.mock-chart i { width: 10%; height: 35%; background: var(--orange); border-radius: .3em .3em 0 0; }
.mock-chart i:nth-child(2) { height: 52%; }.mock-chart i:nth-child(3) { height: 43%; }.mock-chart i:nth-child(4) { height: 68%; }.mock-chart i:nth-child(5) { height: 76%; }.mock-chart i:nth-child(6) { height: 91%; }
.mock-activity { display: grid; align-content: center; gap: 12%; padding: 8%; background: var(--white); border: 1px solid #ddd; border-radius: .4em; }
.mock-activity b { display: block; height: .35em; background: #d5d5d5; border-radius: 99rem; }
.mock-activity b::before { display: inline-block; width: .7em; height: .7em; margin-right: 6%; background: var(--orange); border-radius: 50%; content: ""; transform: translateY(-.18em); }
.mock-admin:not(.mock-admin--wide) .mock-admin__content { height: 87%; }
.mock-admin:not(.mock-admin--wide) .mock-admin__stats { grid-template-columns: repeat(2,1fr); }
.mock-admin--compact .mock-admin__content { gap: 8%; }
.mock-admin--phone { font-size: .54rem; border-radius: 1.35rem; }
.mock-admin--phone .mock-admin__header { height: 11%; padding-top: 4%; }
.mock-admin--phone .mock-admin__header strong { margin-right: auto; }
.mock-admin--phone .mock-admin__content { height: 89%; gap: 4%; padding: 8% 7%; }
.mock-admin--phone .mock-admin__welcome { padding: 9%; }
.mock-admin--phone .mock-admin__stats { grid-template-columns: 1fr; gap: 5%; }
.mock-admin--phone .mock-admin__stats span { padding: 8%; }
.mock-admin--phone .mock-chart { min-height: 26%; }
.mock-admin--phone .mock-activity { min-height: 18%; }

.device-showcase-copy { display: grid; gap: 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #d1cbc4; }
.device-showcase-copy p { max-width: 48rem; margin-bottom: 0; color: var(--muted); }
.device-showcase-copy p strong { color: var(--black); }
.device-showcase-copy .button { justify-self: start; }

@media (min-width: 42rem) {
    .device-stage { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .device-demo--desktop { grid-column: 1 / -1; }
    .device-demo--phone { align-self: end; }
    .device-showcase-copy { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 62rem) {
    .device-stage { grid-template-columns: 1.45fr .9fr .62fr .42fr; gap: 1.15rem; }
    .device-demo--desktop { grid-column: auto; }
    .device-frame--phone { width: 100%; }
    .mock-admin { font-size: clamp(.3rem,.57vw,.54rem); }
    .mock-admin--phone { font-size: clamp(.25rem,.44vw,.44rem); }
}

/* Simplified SMT Tree using the original geometric brand mark */
.tree-visual { min-height: 32rem; width: min(100%, 36rem); }
.tree-brand-mark {
    position: absolute; top: 1.5rem; left: 50%; z-index: 1;
    width: 14rem; height: 14rem; object-fit: contain;
    filter: drop-shadow(0 1rem 1.4rem rgba(255,90,0,.18));
    transform: translateX(-50%);
}
.tree-trunk {
    top: 14rem; bottom: 6.8rem; z-index: 0; width: 1.6rem;
    background: var(--black); border-radius: 0;
}
.tree-core {
    top: auto; bottom: 1.5rem; z-index: 2; width: 13.5rem; height: auto;
    min-height: 6.3rem; padding: 1rem 1.25rem; background: var(--black);
    border: .28rem solid var(--orange); border-radius: .85rem;
}
.tree-core span { font-size: .65rem; }
.tree-core strong { font-size: 1.8rem; }
.tree-core small { font-size: .6rem; }
.tree-branch { min-width: 8rem; }
.tree-branch::after { width: 3.6rem; height: .24rem; }
.tree-branch--invoice { top: 4rem; left: 0; }
.tree-branch--invoice::after { top: 52%; left: 100%; transform: rotate(14deg); transform-origin: left; }
.tree-branch--quote { top: 4rem; right: 0; }
.tree-branch--quote::after { top: 52%; right: 100%; transform: rotate(-14deg); transform-origin: right; }
.tree-branch--portal { top: 15.5rem; left: 0; }
.tree-branch--portal::after { top: 50%; left: 100%; transform: rotate(-12deg); transform-origin: left; }
.tree-branch--team { top: 15.5rem; right: 0; }
.tree-branch--team::after { top: 50%; right: 100%; transform: rotate(12deg); transform-origin: right; }

@media (max-width: 28rem) {
    .tree-brand-mark { width: 11.5rem; height: 11.5rem; }
    .tree-trunk { top: 12rem; }
    .tree-branch { min-width: 6.7rem; padding: .55rem .6rem; }
    .tree-branch::after { width: 2.1rem; }
    .tree-branch--invoice, .tree-branch--quote { top: 3rem; }
    .tree-branch--portal, .tree-branch--team { top: 14.5rem; }
    .tree-core { width: 11.5rem; }
}

/* Contact page */
.contact-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.contact-hero::after {
    position: absolute; right: -8rem; bottom: -12rem; width: 25rem; height: 25rem;
    background: var(--orange); border-radius: 50%; opacity: .17; content: "";
}
.contact-hero__inner { position: relative; z-index: 1; padding-block: 4.5rem 5rem; }
.contact-hero h1 { max-width: 13ch; }
.contact-hero__inner > p:last-child { max-width: 47rem; margin-bottom: 0; color: #c9c9c9; font-size: 1.08rem; }
.contact-page-section { background: #ece8e2; }
.contact-page-layout { display: grid; gap: 2rem; align-items: start; }
.contact-introduction > p:not(.eyebrow) { max-width: 42rem; color: var(--muted); }
.contact-steps { display: grid; gap: 1rem; margin: 2rem 0; padding: 0; list-style: none; }
.contact-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.contact-steps li > span {
    display: grid; width: 2.75rem; height: 2.75rem; place-items: center;
    color: var(--black); background: var(--orange); border-radius: .75rem;
    font-size: .7rem; font-weight: 900;
}
.contact-steps strong { display: block; margin-bottom: .25rem; }
.contact-steps p { margin-bottom: 0; color: var(--muted); font-size: .86rem; }
.contact-note { padding: 1.15rem; color: var(--white); background: var(--black); border-left: .3rem solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0; }
.contact-note p { margin: .35rem 0 0; color: #bdbdbd; font-size: .86rem; }

.contact-form-panel { padding: 1.25rem; background: var(--white); border: 1px solid var(--border); border-radius: 1.2rem; box-shadow: var(--shadow); }
.contact-form-panel__heading { padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.contact-form-panel__heading h2 { margin-bottom: .5rem; font-size: clamp(1.7rem,6vw,2.4rem); }
.contact-form-panel__heading > p:last-child { margin-bottom: 0; color: var(--muted); font-size: .78rem; }
.contact-domain-request {
    display: grid; gap: .3rem; margin-top: 1rem; padding: 1rem;
    color: var(--white); background: var(--black); border-left: .35rem solid var(--orange);
    border-radius: 0 .75rem .75rem 0;
}
.contact-domain-request span { color: var(--orange); font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.contact-domain-request strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.contact-domain-request small { color: #c8c8c8; font-size: .66rem; }
.contact-form { padding-top: 1.25rem; }
.contact-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-grid { display: grid; gap: 1rem; }
.form-field { display: grid; gap: .4rem; }
.form-field label { font-size: .8rem; font-weight: 800; }
.form-field label span { color: var(--orange-dark); }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; min-height: 3rem; padding: .72rem .8rem; color: var(--black);
    background: #faf9f7; border: 1px solid #cfcac4; border-radius: .65rem;
    font: inherit; font-size: 1rem;
}
.form-field textarea { min-height: 10rem; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: 3px solid rgba(255,90,0,.2); border-color: var(--orange);
}
.form-field input:invalid:not(:placeholder-shown), .form-field textarea:invalid:not(:placeholder-shown) { border-color: #b42318; }
.form-consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: 1.25rem 0; color: var(--muted); font-size: .78rem; }
.form-consent input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; accent-color: var(--orange); }
.contact-submit { width: 100%; cursor: pointer; }
.contact-form-status { margin: 1rem 0 0; padding: .85rem; color: var(--black); background: #fff1e9; border: 1px solid rgba(255,90,0,.35); border-radius: .65rem; font-size: .84rem; }
.contact-form-status strong { display: block; margin-bottom: .2rem; }
.contact-form-status--success { color: #124c31; background: #e8f7ef; border-color: #8ac6a5; }
.contact-form-errors { margin-top: 1rem; padding: .9rem; color: #7a1e18; background: #fde9e7; border-left: .3rem solid #b42318; border-radius: 0 .65rem .65rem 0; }
.contact-form-errors ul { margin: .45rem 0 0; padding-left: 1.2rem; }

@media (min-width: 42rem) {
    .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .form-field--full { grid-column: 1 / -1; }
}

@media (min-width: 58rem) {
    .contact-hero__inner { padding-block: 6rem 6.5rem; }
    .contact-page-layout { grid-template-columns: minmax(0,.8fr) minmax(30rem,1.2fr); gap: 4rem; }
    .contact-form-panel { padding: 2rem; }
}

/* Custom back-end systems page */
.systems-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.systems-hero::before {
    position: absolute; top: -10rem; right: -9rem; width: 29rem; height: 29rem;
    background: var(--orange); border-radius: 50%; opacity: .15; content: "";
}
.systems-hero__layout { position: relative; z-index: 1; display: grid; gap: 2.5rem; padding-block: 4.5rem 5rem; }
.systems-hero h1 { max-width: 12ch; }
.systems-hero__lead { max-width: 47rem; color: #c9c9c9; font-size: 1.08rem; }
.systems-outcome { display: grid; gap: .65rem; align-content: center; padding: 1.2rem; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.16); border-radius: 1.2rem; }
.systems-outcome > div { padding: 1rem; background: rgba(0,0,0,.35); border-radius: .75rem; }
.systems-outcome > div > span { display: block; margin-bottom: .3rem; color: var(--orange); font-size: .64rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.systems-outcome > div > strong { display: block; font-size: .9rem; line-height: 1.4; }
.systems-outcome .systems-outcome__active { color: var(--black); background: var(--orange); }
.systems-outcome .systems-outcome__active > span { color: var(--black); }
.systems-outcome__arrow { color: var(--orange); font-size: 1.25rem; line-height: 1; text-align: center; }

.systems-problems { background: #ece8e2; }
.problem-grid { display: grid; gap: 1rem; }
.problem-grid article { position: relative; padding: 1.4rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.problem-grid article > span { display: inline-grid; width: 2.3rem; height: 2.3rem; margin-bottom: 1.25rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .65rem; font-weight: 900; }
.problem-grid h3 { margin-bottom: .55rem; font-size: 1.15rem; }
.problem-grid p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }

.systems-capabilities .section-heading > p:last-child { color: #bdbdbd; }
.capability-grid { display: grid; gap: 1rem; }
.capability-grid article { padding: 1.35rem; background: #222; border: 1px solid #363636; border-radius: var(--radius); }
.capability-grid article > span { display: grid; width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .65rem; font-size: 1.1rem; font-weight: 900; }
.capability-grid h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.capability-grid p { margin-bottom: 0; color: #bdbdbd; font-size: .84rem; }

.systems-visual-section { background: var(--paper); }
.systems-visual-layout { display: grid; gap: 2.5rem; align-items: center; }
.systems-screen { min-width: 0; }
.systems-screen__label { display: block; margin-bottom: .7rem; color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.systems-screen__frame { overflow: hidden; padding: .45rem; background: #171717; border: 1px solid #383838; border-radius: .8rem; box-shadow: 0 1.5rem 3.5rem rgba(16,16,16,.18); }
.systems-screen__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: .35rem; }
.systems-visual-layout > div:last-child > p:not(.eyebrow) { color: var(--muted); }
.systems-check-list { display: grid; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.systems-check-list li { position: relative; padding-left: 2rem; font-size: .88rem; font-weight: 700; }
.systems-check-list li::before { position: absolute; top: .02rem; left: 0; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; content: "\2713"; font-size: .7rem; font-weight: 900; }

.systems-use-cases { background: #ece8e2; }
.use-case-grid { display: grid; gap: 1rem; }
.use-case-grid article { padding: 1.4rem; background: var(--white); border-top: .3rem solid var(--orange); border-radius: .25rem .25rem var(--radius) var(--radius); }
.use-case-grid article > span { display: block; margin-bottom: .8rem; color: var(--orange-dark); font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.use-case-grid h3 { margin-bottom: .55rem; font-size: 1.15rem; }
.use-case-grid p { margin-bottom: 0; color: var(--muted); font-size: .86rem; }

.systems-process-section { background: var(--white); }
.delivery-steps { display: grid; gap: 0; margin: 2rem 0 0; padding: 0; list-style: none; }
.delivery-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-bottom: 1.5rem; }
.delivery-steps li:not(:last-child)::before { position: absolute; top: 2.6rem; bottom: 0; left: 1.25rem; width: 2px; background: var(--border); content: ""; }
.delivery-steps li > span { position: relative; z-index: 1; display: grid; width: 2.55rem; height: 2.55rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .65rem; font-size: .65rem; font-weight: 900; }
.delivery-steps h3 { margin: .1rem 0 .35rem; font-size: 1.1rem; }
.delivery-steps p { margin-bottom: 0; color: var(--muted); font-size: .86rem; }

.systems-final-cta { color: var(--white); background: #ece8e2; }
.systems-final-cta__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }
.systems-final-cta h2 { max-width: 16ch; }
.systems-final-cta__panel p:not(.eyebrow) { max-width: 45rem; margin-bottom: 0; color: #bdbdbd; }
.systems-final-cta .button { justify-self: start; }

@media (min-width: 42rem) {
    .problem-grid, .capability-grid, .use-case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .delivery-steps { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1rem; }
    .delivery-steps li { display: block; padding-bottom: 0; }
    .delivery-steps li:not(:last-child)::before { top: 1.25rem; right: -1rem; bottom: auto; left: 2.55rem; width: calc(100% - 1.55rem); height: 2px; }
    .delivery-steps li > span { margin-bottom: 1rem; }
}

@media (min-width: 58rem) {
    .systems-hero__layout { grid-template-columns: minmax(0,1.25fr) minmax(18rem,.75fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .problem-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .capability-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .systems-visual-layout { grid-template-columns: minmax(0,1.2fr) minmax(20rem,.8fr); gap: 4rem; }
    .use-case-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .systems-final-cta__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* Complete online setup page */
.setup-section__action { margin-top: 2rem; text-align: center; }
.online-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.online-hero::after { position: absolute; right: -9rem; bottom: -13rem; width: 29rem; height: 29rem; background: var(--orange); border-radius: 50%; opacity: .17; content: ""; }
.online-hero__layout { position: relative; z-index: 1; display: grid; gap: 2.5rem; padding-block: 4.5rem 5rem; }
.online-hero h1 { max-width: 13ch; }
.online-hero__lead { max-width: 48rem; color: #c9c9c9; font-size: 1.08rem; }
.online-hero__card { display: grid; gap: .65rem; align-self: center; padding: 1.25rem; background: #212121; border: 1px solid #383838; border-radius: 1.2rem; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.28); }
.online-hero__card > p { margin-bottom: .35rem; color: var(--orange); font-size: .66rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.online-hero__card > div { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; padding: .75rem; background: #171717; border-radius: .65rem; }
.online-hero__card > div span { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .5rem; font-size: .6rem; font-weight: 900; }
.online-hero__card > div strong { font-size: .84rem; }
.online-hero__card > small { padding-top: .35rem; color: #a9a9a9; font-size: .68rem; text-align: center; }

.online-intro { background: var(--orange); }
.online-intro__layout { display: grid; gap: 1.5rem; }
.online-intro__layout h2 { max-width: 15ch; }
.online-intro__layout > div:last-child p { max-width: 42rem; }
.online-intro__layout > div:last-child p:last-child { margin-bottom: 0; }

.online-journey { background: #ece8e2; }
.online-service-grid { display: grid; gap: 1rem; }
.online-service-grid article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.35rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.online-service-grid article > span { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .65rem; font-size: .67rem; font-weight: 900; }
.online-service-grid article div > p:first-child { margin-bottom: .35rem; color: var(--orange-dark); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.online-service-grid h3 { margin-bottom: .55rem; font-size: 1.12rem; }
.online-service-grid article div > p:last-child { margin-bottom: 0; color: var(--muted); font-size: .84rem; }

.online-brand-section { background: var(--paper); }
.online-brand__layout { display: grid; gap: 2.5rem; align-items: center; }
.online-brand__visual { position: relative; padding-bottom: 3rem; }
.online-browser { overflow: hidden; background: var(--white); border: .45rem solid #202020; border-radius: .8rem; box-shadow: var(--shadow); }
.online-browser__bar { display: flex; min-height: 2rem; align-items: center; gap: .32rem; padding: .45rem; color: #d0d0d0; background: #202020; }
.online-browser__bar i { width: .42rem; height: .42rem; background: var(--orange); border-radius: 50%; }
.online-browser__bar span { overflow: hidden; margin-left: .3rem; font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.online-browser__page { display: grid; min-height: 12rem; align-content: center; padding: 1.5rem; color: var(--white); background: linear-gradient(130deg,#151515,#272727); }
.online-browser__page > span { color: var(--orange); font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.online-browser__page > strong { max-width: 13ch; margin-block: .55rem; font-size: clamp(1.45rem,6vw,2.5rem); line-height: 1.05; }
.online-browser__page > small { color: #bcbcbc; }
.online-email { position: absolute; right: 1rem; bottom: 0; display: grid; max-width: calc(100% - 2rem); grid-template-columns: auto 1fr; gap: .8rem; align-items: center; padding: .85rem 1rem; color: var(--black); background: var(--orange); border-radius: .7rem; box-shadow: var(--shadow); }
.online-email > span { font-size: 1.4rem; font-weight: 900; }
.online-email small, .online-email strong { display: block; }
.online-email small { font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.online-email strong { overflow: hidden; max-width: 16rem; font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.online-brand__layout > div:last-child > p:not(.eyebrow) { color: var(--muted); }
.online-check-list { display: grid; gap: .65rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.online-check-list li { position: relative; padding-left: 1.8rem; font-size: .86rem; font-weight: 700; }
.online-check-list li::before { position: absolute; left: 0; color: var(--orange); content: "\2713"; font-weight: 900; }

.online-managed { color: var(--white); background: var(--black); }
.online-managed__layout { display: grid; gap: 2.5rem; }
.online-managed__layout > div:first-child > p:last-child { color: #bdbdbd; }
.online-managed__list { display: grid; gap: .75rem; }
.online-managed__list article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem; background: #222; border: 1px solid #373737; border-radius: .75rem; }
.online-managed__list article > span { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .6rem; font-size: .62rem; font-weight: 900; }
.online-managed__list h3 { margin: .05rem 0 .3rem; font-size: 1rem; }
.online-managed__list p { margin-bottom: 0; color: #bdbdbd; font-size: .78rem; }

.online-google { background: var(--orange); }
.online-google__layout { display: grid; gap: 2.5rem; align-items: center; }
.online-google__note { padding: .9rem; background: rgba(255,255,255,.25); border-left: .25rem solid var(--black); font-size: .78rem; }
.online-listing-card { overflow: hidden; padding: 1.25rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow); }
.online-listing-card__mark { display: grid; width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .75rem; font-size: 1.4rem; font-weight: 900; }
.online-listing-card small, .online-listing-card strong { display: block; }
.online-listing-card small { color: var(--muted); font-size: .63rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.online-listing-card strong { margin-block: .2rem; font-size: 1.35rem; }
.online-listing-card p { color: var(--muted); font-size: .75rem; }
.online-listing-card__actions { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.online-listing-card__actions span { padding: .55rem .25rem; color: var(--black); background: #f2efeb; border-radius: .5rem; font-size: .65rem; font-weight: 800; text-align: center; }

.online-checklist-section { background: #ece8e2; }
.online-launch-checklist { display: grid; gap: .75rem; }
.online-launch-checklist article { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .7rem; }
.online-launch-checklist article > span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-size: .75rem; font-weight: 900; }
.online-launch-checklist strong { font-size: .8rem; }

.online-final { color: var(--white); background: #ece8e2; }
.online-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }
.online-final__panel h2 { max-width: 16ch; }
.online-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }
.online-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .online-service-grid, .online-launch-checklist { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .online-managed__list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 58rem) {
    .online-hero__layout { grid-template-columns: minmax(0,1.25fr) minmax(18rem,.75fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .online-intro__layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 4rem; align-items: start; }
    .online-service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .online-brand__layout { grid-template-columns: minmax(0,1.15fr) minmax(20rem,.85fr); gap: 4rem; }
    .online-managed__layout { grid-template-columns: minmax(0,.75fr) minmax(30rem,1.25fr); gap: 4rem; align-items: center; }
    .online-google__layout { grid-template-columns: minmax(0,1fr) minmax(23rem,.7fr); gap: 5rem; }
    .online-launch-checklist { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .online-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* SMT Tree page */
.tree-page-hero {
    overflow: hidden;
    color: var(--white);
    background: var(--black);
}

.tree-page-hero__layout {
    display: grid;
    gap: 3rem;
    padding-block: 4.5rem 5rem;
}

.tree-page-hero h1 {
    max-width: 13ch;
}

.tree-page-hero__lead {
    max-width: 47rem;
    color: #c9c9c9;
    font-size: 1.08rem;
}

.tree-page-mark {
    position: relative;
    min-height: 29rem;
    align-self: center;
}

.tree-page-mark img {
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 2;
    width: 15rem;
    height: 15rem;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 1rem 1.5rem rgba(255, 90, 0, 0.2));
    transform: translateX(-50%);
}

/* Compatibility rule: hides the old branch labels if they remain in the PHP. */
.tree-page-mark__branches {
    display: none;
}

.tree-page-mark__trunk {
    position: absolute;
    top: 14.5rem;
    bottom: 5.8rem;
    left: 50%;
    width: 1.4rem;
    background: var(--orange);
    transform: translateX(-50%);
}

.tree-page-mark__base {
    position: absolute;
    right: 50%;
    bottom: 0;
    z-index: 2;
    width: 13rem;
    padding: 1rem;
    color: var(--white);
    background: #242424;
    border: 0.25rem solid var(--orange);
    border-radius: 0.8rem;
    text-align: center;
    transform: translateX(50%);
}

.tree-page-mark__base span,
.tree-page-mark__base strong,
.tree-page-mark__base small {
    display: block;
}

.tree-page-mark__base span {
    color: var(--orange);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.tree-page-mark__base strong {
    font-size: 1.7rem;
}

.tree-page-mark__base small {
    color: #d0d0d0;
    font-size: 0.62rem;
}

.tree-page-strip { color: var(--black); background: var(--orange); }
.tree-page-strip__grid { display: grid; }
.tree-page-strip__grid > div { display: grid; grid-template-columns: auto 1fr; gap: 0 .7rem; padding: 1rem 0; border-bottom: 1px solid rgba(16,16,16,.2); }
.tree-page-strip__grid > div:last-child { border-bottom: 0; }
.tree-page-strip__grid span { grid-row: 1 / 3; font-size: .65rem; font-weight: 900; }
.tree-page-strip__grid strong { font-size: .85rem; }
.tree-page-strip__grid small { font-size: .68rem; }

.tree-package { background: #ece8e2; }
.tree-package__layout { display: grid; gap: 2.5rem; align-items: start; }
.tree-package__layout > div:first-child > p:not(.eyebrow) { max-width: 39rem; color: var(--muted); }
.tree-package__price { display: inline-grid; margin-top: 1rem; padding: 1.2rem 1.4rem; color: var(--white); background: var(--black); border-left: .35rem solid var(--orange); border-radius: 0 .8rem .8rem 0; }
.tree-package__price span { color: var(--orange); font-size: .65rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.tree-package__price strong { font-size: 2.3rem; line-height: 1.05; }
.tree-package__price small { color: #bdbdbd; font-size: .68rem; }
.tree-package__included { display: grid; gap: .7rem; }
.tree-package__included article { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .75rem; }
.tree-package__included article > span { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }
.tree-package__included h3 { margin: .05rem 0 .3rem; font-size: 1rem; }
.tree-package__included p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.tree-pages-section { background: var(--paper); }
.tree-pages-grid { display: grid; gap: .75rem; }
.tree-pages-grid article { min-height: 12rem; padding: 1.2rem; background: var(--white); border: 1px solid var(--border); border-top: .3rem solid var(--orange); border-radius: .2rem .2rem .8rem .8rem; }
.tree-pages-grid article > span { display: block; margin-bottom: 1.2rem; color: var(--orange-dark); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.tree-pages-grid article > strong { display: block; margin-bottom: .5rem; font-size: 1rem; }
.tree-pages-grid article > p { margin-bottom: 0; color: var(--muted); font-size: .8rem; }
.tree-pages-grid__last { color: var(--white); background: var(--black) !important; border-color: var(--orange) !important; }
.tree-pages-grid__last > p { color: #bdbdbd !important; }

.tree-roots { color: var(--white); background: var(--black); }
.tree-roots__layout { display: grid; gap: 3rem; align-items: center; }
.tree-roots__layout > div:last-child p:not(.eyebrow) { color: #bdbdbd; }
.tree-roots__visual { display: grid; justify-items: center; }
.tree-roots__mark { position: relative; z-index: 2; width: 10rem; padding: 1rem; background: #222; border: 2px solid var(--orange); border-radius: 1rem; }
.tree-roots__mark img { width: 100%; }
.tree-roots__stem { width: .25rem; height: 2.5rem; background: var(--orange); }
.tree-roots__base { display: grid; width: 100%; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.tree-roots__base span { padding: .8rem .35rem; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 850; text-align: center; }

.tree-branches { background: #ece8e2; }
.tree-branch-grid { display: grid; gap: 1rem; }
.tree-branch-grid article { display: flex; min-height: 15rem; flex-direction: column; padding: 1.3rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.tree-branch-grid article > span { margin-bottom: 1rem; color: var(--orange-dark); font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.tree-branch-grid h3 { margin-bottom: .55rem; font-size: 1.15rem; }
.tree-branch-grid p { margin-bottom: 1.2rem; color: var(--muted); font-size: .83rem; }
.tree-branch-grid a { margin-top: auto; font-size: .72rem; font-weight: 850; text-decoration: none; }
.tree-branch-grid a.is-static { color: #999; }
.tree-branch-grid__custom { color: var(--white); background: var(--black) !important; border-color: var(--black) !important; }
.tree-branch-grid__custom > span, .tree-branch-grid__custom a { color: var(--orange) !important; }
.tree-branch-grid__custom p { color: #bdbdbd; }

.tree-payment { background: var(--orange); }
.tree-payment__layout { display: grid; gap: 2.5rem; align-items: center; }
.tree-payment__layout > div:first-child p:not(.eyebrow) { max-width: 45rem; }
.tree-payment__example { padding: 1.3rem; color: var(--white); background: var(--black); border-radius: 1rem; box-shadow: var(--shadow); }
.tree-payment__example > p { color: var(--orange); font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.tree-payment__example > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .8rem 0; border-top: 1px solid #383838; }
.tree-payment__example > div span { color: #bdbdbd; font-size: .78rem; }
.tree-payment__example > div strong { font-size: .86rem; text-align: right; }
.tree-payment__example > small { display: block; padding-top: .9rem; color: #999; border-top: 1px solid #383838; font-size: .65rem; }

.tree-process { background: var(--white); }
.tree-process__steps { display: grid; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.tree-process__steps li { padding: 1rem; background: var(--paper); border: 1px solid var(--border); border-radius: .75rem; }
.tree-process__steps li > span { display: grid; width: 2.3rem; height: 2.3rem; margin-bottom: 1rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }
.tree-process__steps h3 { margin-bottom: .35rem; font-size: 1rem; }
.tree-process__steps p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.tree-final { color: var(--white); background: #ece8e2; }
.tree-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }
.tree-final__panel h2 { max-width: 16ch; }
.tree-final__panel p:not(.eyebrow) { max-width: 45rem; margin-bottom: 0; color: #bdbdbd; }
.tree-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .tree-page-strip__grid { grid-template-columns: repeat(3,1fr); }
    .tree-page-strip__grid > div { padding-inline: 1.2rem; border-right: 1px solid rgba(16,16,16,.2); border-bottom: 0; }
    .tree-page-strip__grid > div:last-child { border-right: 0; }
    .tree-pages-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .tree-branch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .tree-process__steps { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (min-width: 58rem) {
    .tree-page-hero__layout { grid-template-columns: minmax(0,1.15fr) minmax(25rem,.85fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .tree-package__layout { grid-template-columns: minmax(0,.85fr) minmax(30rem,1.15fr); gap: 4rem; }
    .tree-pages-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .tree-roots__layout { grid-template-columns: minmax(24rem,.8fr) minmax(0,1.2fr); gap: 5rem; }
    .tree-branch-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .tree-payment__layout { grid-template-columns: minmax(0,1.15fr) minmax(23rem,.85fr); gap: 5rem; }
    .tree-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* Custom admin panels page */
.admin-page-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.admin-page-hero::after { position: absolute; right: -10rem; bottom: -14rem; width: 30rem; height: 30rem; background: var(--orange); border-radius: 50%; opacity: .15; content: ""; }
.admin-page-hero__layout { position: relative; z-index: 1; display: grid; gap: 3rem; padding-block: 4.5rem 5rem; }
.admin-page-hero h1 { max-width: 12ch; }
.admin-page-hero__lead { max-width: 47rem; color: #c9c9c9; font-size: 1.08rem; }
.admin-page-hero__screen { align-self: center; }
.admin-page-hero__screen > span { display: block; margin-bottom: .65rem; color: var(--orange); font-size: .64rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.admin-page-hero__screen > div { overflow: hidden; padding: .45rem; background: #202020; border: 1px solid #3a3a3a; border-radius: .8rem; box-shadow: 0 1.6rem 3.5rem rgba(0,0,0,.35); }
.admin-page-hero__screen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: .35rem; }

.admin-page-summary { color: var(--black); background: var(--orange); }
.admin-page-summary__grid { display: grid; }
.admin-page-summary__grid div { padding: 1rem 0; border-bottom: 1px solid rgba(16,16,16,.22); }
.admin-page-summary__grid div:last-child { border-bottom: 0; }
.admin-page-summary strong, .admin-page-summary span { display: block; }
.admin-page-summary strong { font-size: .85rem; }
.admin-page-summary span { font-size: .7rem; }

.admin-page-intro { background: #ece8e2; }
.admin-page-intro__layout { display: grid; gap: 1.5rem; }
.admin-page-intro__layout h2 { max-width: 15ch; }
.admin-page-intro__layout > div:last-child p { max-width: 44rem; color: var(--muted); }
.admin-page-intro__layout > div:last-child p:last-child { margin-bottom: 0; }

.admin-page-capabilities { background: var(--paper); }
.admin-capability-grid { display: grid; gap: 1rem; }
.admin-capability-grid article { padding: 1.3rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.admin-capability-grid article > span { display: grid; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .6rem; font-size: .64rem; font-weight: 900; }
.admin-capability-grid h3 { margin-bottom: .5rem; font-size: 1.08rem; }
.admin-capability-grid p { margin-bottom: 0; color: var(--muted); font-size: .82rem; }

.admin-page-roles { color: var(--white); background: var(--black); }
.admin-page-roles__layout { display: grid; gap: 2.5rem; align-items: center; }
.admin-page-roles__layout > div:first-child p:not(.eyebrow) { color: #bdbdbd; }
.admin-role-stack { display: grid; gap: .7rem; }
.admin-role-stack article { padding: 1rem; background: #222; border: 1px solid #383838; border-radius: .75rem; }
.admin-role-stack article > span, .admin-role-stack article > strong, .admin-role-stack article > small { display: block; }
.admin-role-stack article > span { margin-bottom: .3rem; color: var(--orange); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.admin-role-stack article > strong { font-size: .92rem; }
.admin-role-stack article > small { margin-top: .25rem; color: #aaa; font-size: .68rem; }
.admin-role-stack .admin-role-stack__active { color: var(--black); background: var(--orange); border-color: var(--orange); }
.admin-role-stack .admin-role-stack__active > span, .admin-role-stack .admin-role-stack__active > small { color: var(--black); }

.admin-page-devices { background: #ece8e2; }
.admin-page-device-grid { display: grid; gap: 1.5rem; align-items: end; }
.admin-page-device > span { display: block; margin-bottom: .6rem; color: var(--muted); font-size: .63rem; font-weight: 900; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.admin-page-device > div { overflow: hidden; padding: .4rem; background: #1d1d1d; border: 1px solid #373737; box-shadow: var(--shadow); }
.admin-page-device img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.admin-page-device--desktop > div { aspect-ratio: 16 / 9; border-radius: .7rem; }
.admin-page-device--tablet > div { aspect-ratio: 4 / 3; border-radius: 1rem; }
.admin-page-device--phone > div { width: min(65%,13rem); aspect-ratio: 9 / 18.7; margin-inline: auto; border-radius: 1.6rem; }
.admin-page-device--phone img { border-radius: 1.2rem; }

.admin-page-branding { background: var(--white); }
.admin-page-branding__layout { display: grid; gap: 2.5rem; align-items: center; }
.admin-page-branding__sample { padding: 1.4rem; color: var(--white); background: var(--black); border-radius: 1rem; box-shadow: var(--shadow); }
.admin-page-branding__sample > div:first-child { display: flex; align-items: center; gap: .65rem; padding-bottom: 1rem; border-bottom: 1px solid #383838; }
.admin-page-branding__sample img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.admin-page-branding__sample > div:first-child span { font-size: .78rem; font-weight: 850; }
.admin-page-branding__sample > strong { display: block; margin-top: 1.25rem; font-size: 1.45rem; }
.admin-page-branding__sample > p { color: #bdbdbd; font-size: .8rem; }
.admin-page-branding__swatches { display: flex; gap: .5rem; }
.admin-page-branding__swatches i { width: 2rem; height: 2rem; background: var(--orange); border-radius: .45rem; }
.admin-page-branding__swatches i:nth-child(2) { background: #f2f0ed; }
.admin-page-branding__swatches i:nth-child(3) { background: #555; }
.admin-page-branding__layout > div:last-child p:not(.eyebrow) { color: var(--muted); }

.admin-page-security { color: var(--black); background: var(--orange); }
.admin-page-security .eyebrow { color: var(--black); }
.admin-page-security__layout { display: grid; gap: 2.5rem; align-items: center; }
.admin-security-list { display: grid; gap: .65rem; }
.admin-security-list article { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; padding: .85rem; background: rgba(255,255,255,.25); border: 1px solid rgba(16,16,16,.18); border-radius: .7rem; }
.admin-security-list article > span { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; color: var(--orange); background: var(--black); border-radius: 50%; font-size: .68rem; font-weight: 900; }
.admin-security-list strong, .admin-security-list small { display: block; }
.admin-security-list strong { font-size: .8rem; }
.admin-security-list small { font-size: .68rem; }

.admin-page-process { background: #ece8e2; }
.admin-process-steps { display: grid; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.admin-process-steps li { padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .75rem; }
.admin-process-steps li > span { display: grid; width: 2.3rem; height: 2.3rem; margin-bottom: 1rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }
.admin-process-steps h3 { margin-bottom: .35rem; font-size: 1rem; }
.admin-process-steps p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.admin-page-final { color: var(--white); background: #ece8e2; }
.admin-page-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }
.admin-page-final__panel h2 { max-width: 16ch; }
.admin-page-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }
.admin-page-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .admin-page-summary__grid { grid-template-columns: repeat(3,1fr); }
    .admin-page-summary__grid div { padding-inline: 1.2rem; border-right: 1px solid rgba(16,16,16,.22); border-bottom: 0; }
    .admin-page-summary__grid div:last-child { border-right: 0; }
    .admin-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-page-device-grid { grid-template-columns: 1.3fr .75fr .45fr; }
    .admin-page-device--phone > div { width: 100%; }
    .admin-security-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-process-steps { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (min-width: 58rem) {
    .admin-page-hero__layout { grid-template-columns: minmax(0,.9fr) minmax(30rem,1.1fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .admin-page-intro__layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 4rem; }
    .admin-capability-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .admin-page-roles__layout { grid-template-columns: minmax(0,1fr) minmax(28rem,1fr); gap: 5rem; }
    .admin-page-branding__layout { grid-template-columns: minmax(25rem,.8fr) minmax(0,1.2fr); gap: 5rem; }
    .admin-page-security__layout { grid-template-columns: minmax(0,.85fr) minmax(30rem,1.15fr); gap: 5rem; }
    .admin-page-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* High-contrast eyebrow headings on orange backgrounds */
.online-intro .eyebrow,
.online-google .eyebrow,
.tree-payment .eyebrow,
.admin-page-security .eyebrow {
    color: var(--black);
}

/* NFC proof-of-presence page */
.nfc-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.nfc-hero::after { position: absolute; right: -10rem; bottom: -13rem; width: 30rem; height: 30rem; background: var(--orange); border-radius: 50%; opacity: .16; content: ""; }
.nfc-hero__layout { position: relative; z-index: 1; display: grid; gap: 3rem; padding-block: 4.5rem 5rem; }
.nfc-hero h1 { max-width: 12ch; }
.nfc-hero__lead { max-width: 47rem; color: #c9c9c9; font-size: 1.08rem; }
.nfc-hero__visual { position: relative; display: grid; min-height: 25rem; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.nfc-tag-demo { position: relative; display: grid; aspect-ratio: 1; place-content: center; color: var(--white); background: #242424; border: .5rem solid var(--orange); border-radius: 1.4rem; box-shadow: 0 1.4rem 3rem rgba(0,0,0,.3); text-align: center; }
.nfc-tag-demo::before { position: absolute; inset: .45rem; border: 1px solid #4a4a4a; border-radius: .7rem; content: ""; }
.nfc-tag-demo span, .nfc-tag-demo strong, .nfc-tag-demo small { position: relative; z-index: 1; display: block; }
.nfc-tag-demo span { color: var(--orange); font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.nfc-tag-demo strong { font-size: 2rem; }
.nfc-tag-demo small { color: #bdbdbd; font-size: .6rem; }
.nfc-tag-demo > i { position: absolute; right: .6rem; bottom: .6rem; width: .7rem; height: .7rem; background: var(--orange); border-radius: 50%; }
.nfc-signal { display: flex; gap: .22rem; align-items: center; }
.nfc-signal i { display: block; width: .18rem; height: 1.2rem; background: var(--orange); border-radius: 99rem; }
.nfc-signal i:nth-child(2) { height: 2rem; }
.nfc-signal i:nth-child(3) { height: 2.8rem; }
.nfc-phone-demo { overflow: hidden; align-self: stretch; max-height: 24rem; padding: .55rem; background: #181818; border: 1px solid #424242; border-radius: 1.8rem; box-shadow: 0 1.4rem 3rem rgba(0,0,0,.3); }
.nfc-phone-demo > span { display: block; padding: .65rem; color: var(--orange); font-size: .67rem; font-weight: 900; text-align: center; }
.nfc-phone-demo > div { display: grid; height: calc(100% - 2.2rem); align-content: center; justify-items: center; padding: .75rem; color: var(--black); background: #f1efec; border-radius: 1.25rem; text-align: center; }
.nfc-phone-demo i { display: grid; width: 3.2rem; height: 3.2rem; margin-bottom: .8rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-style: normal; font-weight: 900; }
.nfc-phone-demo strong, .nfc-phone-demo small { display: block; }
.nfc-phone-demo strong { font-size: .78rem; }
.nfc-phone-demo small { color: var(--muted); font-size: .58rem; }

.nfc-platform-strip { color: var(--black); background: var(--orange); }
.nfc-platform-strip__inner { display: grid; gap: .25rem; padding-block: 1rem; }
.nfc-platform-strip strong { font-size: .78rem; }
.nfc-platform-strip span { font-size: .7rem; }

.nfc-flow-section { background: #ece8e2; }
.nfc-flow { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.nfc-flow li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .75rem; }
.nfc-flow li > span { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }
.nfc-flow h3 { margin: .05rem 0 .3rem; font-size: 1rem; }
.nfc-flow p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.nfc-tags-section { background: var(--paper); }
.nfc-tags__layout { display: grid; gap: 3rem; align-items: center; }
.nfc-sleeve-showcase { display: grid; justify-items: center; }
.nfc-sleeve { width: min(100%,22rem); padding: 1rem; background: linear-gradient(135deg,#303030,#151515); border-radius: 1.5rem; box-shadow: 0 1.6rem 3rem rgba(16,16,16,.2); transform: perspective(45rem) rotateY(-8deg) rotateX(4deg); }
.nfc-sleeve > div { display: grid; aspect-ratio: 1.25; place-content: center; justify-items: center; padding: 1rem; color: var(--white); background: #111; border: .35rem solid var(--orange); border-radius: 1rem; text-align: center; }
.nfc-sleeve img { width: 4.5rem; height: 4.5rem; margin-bottom: .65rem; object-fit: contain; }
.nfc-sleeve strong, .nfc-sleeve small { display: block; }
.nfc-sleeve strong { font-size: 1rem; }
.nfc-sleeve small { color: #bdbdbd; font-size: .58rem; }
.nfc-sleeve-showcase > span { margin-top: 1.5rem; color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.nfc-tags__layout > div:last-child > p:not(.eyebrow) { color: var(--muted); }
.nfc-check-list { display: grid; gap: .65rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.nfc-check-list li { position: relative; padding-left: 1.8rem; font-size: .84rem; font-weight: 700; }
.nfc-check-list li::before { position: absolute; left: 0; color: var(--orange); content: "\2713"; font-weight: 900; }

.nfc-record-section { color: var(--white); background: var(--black); }
.nfc-record__layout { display: grid; gap: 3rem; align-items: center; }
.nfc-record__layout > div:first-child > p:not(.eyebrow) { color: #bdbdbd; }
.nfc-record__note { padding: 1rem; color: #d0d0d0 !important; background: #222; border-left: .3rem solid var(--orange); border-radius: 0 .7rem .7rem 0; font-size: .75rem; }
.nfc-record__note strong { color: var(--orange); }
.nfc-record-card { overflow: hidden; padding: 1.1rem; color: var(--black); background: var(--white); border-radius: 1rem; box-shadow: var(--shadow); }
.nfc-record-card > div { display: grid; grid-template-columns: .75fr 1.25fr; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.nfc-record-card > div span { color: var(--muted); font-size: .72rem; }
.nfc-record-card > div strong { font-size: .78rem; text-align: right; }
.nfc-record-card__accepted { color: #237a42; }
.nfc-record-card > small { display: block; padding-top: .7rem; color: var(--muted); font-size: .6rem; text-align: right; }

.nfc-offline-section { background: var(--orange); }
.nfc-offline-section .eyebrow { color: var(--black); }
.nfc-offline__layout { display: grid; gap: 3rem; align-items: center; }
.nfc-offline-phone { overflow: hidden; width: min(100%,18rem); margin-inline: auto; padding: .55rem; color: var(--white); background: #161616; border-radius: 1.7rem; box-shadow: var(--shadow); }
.nfc-offline-phone__top { padding: .65rem; color: var(--orange); font-size: .68rem; font-weight: 900; text-align: center; }
.nfc-offline-phone__body { min-height: 19rem; padding: 1.3rem; color: var(--black); background: #f3f1ee; border-radius: 1.2rem; }
.nfc-offline-phone__body span { display: inline-block; padding: .35rem .55rem; color: var(--white); background: var(--black); border-radius: 99rem; font-size: .57rem; font-weight: 850; }
.nfc-offline-phone__body strong { display: block; margin-block: 1.1rem .5rem; font-size: 1.45rem; }
.nfc-offline-phone__body p { color: var(--muted); font-size: .72rem; }
.nfc-offline-phone__body button { width: 100%; padding: .75rem; color: var(--black); background: var(--orange); border: 0; border-radius: .55rem; font: inherit; font-size: .7rem; font-weight: 850; opacity: 1; }

.nfc-portal-section { background: #ece8e2; }
.nfc-portal-demo { overflow: hidden; margin-top: 2rem; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); }
.nfc-portal-demo__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; color: var(--white); background: var(--black); border-radius: .7rem; }
.nfc-portal-demo__header strong { font-size: .9rem; }
.nfc-portal-demo__header span { color: var(--orange); font-size: .6rem; font-weight: 850; }
.nfc-portal-demo__filters { display: flex; overflow-x: auto; gap: .45rem; padding-block: 1rem; }
.nfc-portal-demo__filters span { flex: 0 0 auto; padding: .45rem .65rem; background: #eeeae5; border-radius: .45rem; font-size: .62rem; font-weight: 800; }
.nfc-portal-demo__filters span:first-child { background: var(--orange); }
.nfc-portal-demo__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }
.nfc-portal-demo__stats article { padding: .75rem; background: #f5f3f0; border: 1px solid var(--border); border-radius: .55rem; }
.nfc-portal-demo__stats small, .nfc-portal-demo__stats strong { display: block; }
.nfc-portal-demo__stats small { color: var(--muted); font-size: .52rem; }
.nfc-portal-demo__stats strong { font-size: 1rem; }
.nfc-portal-demo__table { overflow-x: auto; margin-top: .8rem; }
.nfc-portal-demo__table > div { display: grid; min-width: 32rem; grid-template-columns: .6fr 1fr 1.4fr .8fr; border-bottom: 1px solid var(--border); }
.nfc-portal-demo__table span, .nfc-portal-demo__table strong { padding: .65rem; font-size: .62rem; }
.nfc-portal-demo__table > div:first-child { background: #eeeae5; }
.nfc-portal-demo__table > div:not(:first-child) span:last-child { color: #237a42; font-weight: 850; }
.nfc-portal-demo > small { display: block; padding-top: .7rem; color: var(--muted); font-size: .56rem; text-align: right; }

.nfc-access-section { color: var(--white); background: var(--black); }
.nfc-access__layout { display: grid; gap: 3rem; align-items: center; }
.nfc-access__layout > div:first-child p:not(.eyebrow) { color: #bdbdbd; }
.nfc-access-map { display: grid; justify-items: center; }
.nfc-access-map > div { width: min(100%,24rem); padding: 1rem; background: #222; border: 1px solid #3b3b3b; border-radius: .75rem; text-align: center; }
.nfc-access-map span, .nfc-access-map strong, .nfc-access-map small { display: block; }
.nfc-access-map span { color: var(--orange); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.nfc-access-map strong { font-size: .9rem; }
.nfc-access-map small { margin-top: .25rem; color: #bdbdbd; font-size: .62rem; }
.nfc-access-map > i { width: .22rem; height: 2.2rem; background: var(--orange); }
.nfc-access-map .nfc-access-map__client { color: var(--black); background: var(--orange); border-color: var(--orange); }
.nfc-access-map .nfc-access-map__client span, .nfc-access-map .nfc-access-map__client small { color: var(--black); }

.nfc-reporting-section { background: var(--paper); }
.nfc-report-grid { display: grid; gap: .8rem; }
.nfc-report-grid article { padding: 1.2rem; background: var(--white); border: 1px solid var(--border); border-radius: .8rem; }
.nfc-report-grid article > span { display: inline-grid; min-width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; padding-inline: .45rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }
.nfc-report-grid h3 { margin-bottom: .4rem; font-size: 1rem; }
.nfc-report-grid p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.nfc-pricing-section { background: var(--orange); }
.nfc-pricing-section .eyebrow { color: var(--black); }
.nfc-pricing__layout { display: grid; gap: 2.5rem; align-items: center; }
.nfc-price-card { padding: 1.4rem; color: var(--white); background: var(--black); border-radius: 1rem; box-shadow: var(--shadow); }
.nfc-price-card > span { display: block; color: var(--orange); font-size: .64rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.nfc-price-card > strong { display: inline-block; margin-top: .4rem; font-size: 2.6rem; line-height: 1; }
.nfc-price-card > small { color: #bdbdbd; }
.nfc-price-card > p { margin-block: 1rem; color: #bdbdbd; font-size: .7rem; }

.nfc-use-section { background: #ece8e2; }
.nfc-use-grid { display: grid; gap: .8rem; }
.nfc-use-grid article { padding: 1.2rem; background: var(--white); border-top: .3rem solid var(--orange); border-radius: .2rem .2rem .8rem .8rem; }
.nfc-use-grid article > span { display: block; margin-bottom: .8rem; color: var(--orange-dark); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.nfc-use-grid h3 { margin-bottom: .4rem; font-size: 1rem; }
.nfc-use-grid p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.nfc-final-section { color: var(--white); background: #ece8e2; }
.nfc-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }
.nfc-final__panel h2 { max-width: 16ch; }
.nfc-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }
.nfc-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .nfc-platform-strip__inner { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }
    .nfc-flow, .nfc-report-grid, .nfc-use-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 58rem) {
    .nfc-hero__layout { grid-template-columns: minmax(0,1fr) minmax(28rem,1fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .nfc-tags__layout, .nfc-record__layout, .nfc-offline__layout, .nfc-access__layout, .nfc-pricing__layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }
    .nfc-flow, .nfc-report-grid, .nfc-use-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .nfc-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* Client portals page */
@keyframes portal-live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(36, 190, 91, .55); }
    50% { opacity: .72; box-shadow: 0 0 0 .35rem rgba(36, 190, 91, 0); }
}

.portal-live { display: inline-flex; align-items: center; gap: .4rem; color: #63e58f; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.portal-live > i { display: inline-block; width: .52rem; height: .52rem; background: #24be5b; border-radius: 50%; animation: portal-live-pulse 1.4s ease-in-out infinite; }
.portal-live--dark { color: var(--black); }

.portal-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.portal-hero::after { position: absolute; right: -11rem; bottom: -14rem; width: 31rem; height: 31rem; background: var(--orange); border-radius: 50%; opacity: .15; content: ""; }
.portal-hero__layout { position: relative; z-index: 1; display: grid; gap: 3rem; padding-block: 4.5rem 5rem; }
.portal-hero h1 { max-width: 13ch; }
.portal-hero__lead { max-width: 48rem; color: #c9c9c9; font-size: 1.08rem; }
.portal-hero__screen { align-self: center; padding: .7rem; color: var(--black); background: #f1efec; border: .45rem solid #292929; border-radius: 1rem; box-shadow: 0 1.7rem 3.5rem rgba(0,0,0,.35); }
.portal-hero__screen-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem; color: var(--white); background: var(--black); border-radius: .55rem; }
.portal-hero__screen-top > span { font-size: .65rem; font-weight: 850; }
.portal-hero__welcome { position: relative; margin-top: .6rem; padding: 1rem; color: var(--white); background: linear-gradient(120deg,#202020,#303030); border-radius: .6rem; }
.portal-hero__welcome small, .portal-hero__welcome strong, .portal-hero__welcome span { display: block; }
.portal-hero__welcome small { color: var(--orange); font-size: .52rem; font-weight: 900; letter-spacing: .11em; }
.portal-hero__welcome strong { font-size: 1.05rem; }
.portal-hero__welcome span { color: #bdbdbd; font-size: .6rem; }
.portal-hero__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin-top: .55rem; }
.portal-hero__stats article { padding: .65rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }
.portal-hero__stats small, .portal-hero__stats strong { display: block; }
.portal-hero__stats small { color: var(--muted); font-size: .48rem; }
.portal-hero__stats strong { font-size: .9rem; }
.portal-hero__activity { display: flex; height: 5.5rem; align-items: end; justify-content: space-around; gap: .5rem; margin-top: .55rem; padding: .75rem .75rem 0; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }
.portal-hero__activity span { width: 15%; height: 35%; background: var(--orange); border-radius: .3rem .3rem 0 0; }
.portal-hero__activity span:nth-child(2) { height: 58%; }.portal-hero__activity span:nth-child(3) { height: 47%; }.portal-hero__activity span:nth-child(4) { height: 82%; }
.portal-hero__screen > small { display: block; padding-top: .45rem; color: var(--muted); font-size: .5rem; text-align: right; }

.portal-status-strip { color: var(--black); background: var(--orange); }
.portal-status-strip__inner { display: grid; gap: .3rem; padding-block: 1rem; }
.portal-status-strip__inner > span { font-size: .7rem; }

.portal-purpose { background: #ece8e2; }
.portal-purpose__layout { display: grid; gap: 1.5rem; }
.portal-purpose__layout h2 { max-width: 15ch; }
.portal-purpose__layout > div:last-child p { max-width: 45rem; color: var(--muted); }
.portal-purpose__layout > div:last-child p:last-child { margin-bottom: 0; }

.portal-preview-section { background: var(--paper); }
.portal-dashboard { display: grid; overflow: hidden; margin-top: 2rem; color: var(--black); background: #f3f1ee; border: .45rem solid #1c1c1c; border-radius: 1rem; box-shadow: 0 1.7rem 3.5rem rgba(16,16,16,.18); }
.portal-dashboard__sidebar { display: none; color: var(--white); background: #1b1b1b; }
.portal-dashboard__sidebar > div { display: flex; align-items: center; gap: .5rem; padding: 1rem; border-bottom: 1px solid #363636; }
.portal-dashboard__sidebar img { width: 2rem; height: 2rem; object-fit: contain; }
.portal-dashboard__sidebar strong { font-size: .68rem; }
.portal-dashboard__sidebar nav { display: grid; gap: .3rem; padding: .8rem; }
.portal-dashboard__sidebar nav span { padding: .65rem; color: #aaa; border-radius: .45rem; font-size: .58rem; font-weight: 750; }
.portal-dashboard__sidebar nav .is-active { color: var(--black); background: var(--orange); }
.portal-dashboard__sidebar > small { display: block; margin-top: auto; padding: 1rem; color: #777; font-size: .5rem; }
.portal-dashboard__main { min-width: 0; padding: .65rem; }
.portal-dashboard__main > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; color: var(--white); background: var(--black); border-radius: .55rem; }
.portal-dashboard__main > header small, .portal-dashboard__main > header strong { display: block; }
.portal-dashboard__main > header small { color: var(--orange); font-size: .48rem; font-weight: 900; letter-spacing: .1em; }
.portal-dashboard__main > header strong { font-size: .82rem; }
.portal-dashboard__filters { display: flex; overflow-x: auto; gap: .4rem; padding-block: .65rem; }
.portal-dashboard__filters span { flex: 0 0 auto; padding: .4rem .55rem; background: var(--white); border: 1px solid var(--border); border-radius: .4rem; font-size: .52rem; font-weight: 800; }
.portal-dashboard__filters .is-active { background: var(--orange); border-color: var(--orange); }
.portal-dashboard__filters .portal-dashboard__site-filter { margin-left: auto; }
.portal-dashboard__stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; }
.portal-dashboard__stats article { padding: .6rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }
.portal-dashboard__stats small, .portal-dashboard__stats strong, .portal-dashboard__stats span { display: block; }
.portal-dashboard__stats small { color: var(--muted); font-size: .46rem; }
.portal-dashboard__stats strong { font-size: .9rem; }
.portal-dashboard__stats span { color: var(--muted); font-size: .42rem; }
.portal-dashboard__panels { display: grid; gap: .45rem; margin-top: .45rem; }
.portal-dashboard__panels article { min-width: 0; padding: .65rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }
.portal-dashboard__panels article > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.portal-dashboard__panels article > div:first-child strong { font-size: .6rem; }
.portal-dashboard__panels article > div:first-child small { color: var(--muted); font-size: .45rem; }
.portal-bars { display: flex; height: 6rem; align-items: end; justify-content: space-around; gap: .3rem; padding-top: .7rem; }
.portal-bars i { width: 8%; height: 35%; background: var(--orange); border-radius: .2rem .2rem 0 0; }
.portal-bars i:nth-child(2) { height: 52%; }.portal-bars i:nth-child(3) { height: 43%; }.portal-bars i:nth-child(4) { height: 68%; }.portal-bars i:nth-child(5) { height: 61%; }.portal-bars i:nth-child(6) { height: 78%; }.portal-bars i:nth-child(7) { height: 72%; }.portal-bars i:nth-child(8) { height: 91%; }
.portal-dashboard__sites ul { display: grid; gap: .5rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.portal-dashboard__sites li { display: grid; grid-template-columns: auto 1fr auto; gap: .45rem; align-items: center; padding-bottom: .45rem; border-bottom: 1px solid var(--border); }
.portal-dashboard__sites li i { width: .45rem; height: .45rem; background: #24be5b; border-radius: 50%; }
.portal-dashboard__sites li span, .portal-dashboard__sites li strong { font-size: .5rem; }
.portal-dashboard__recent { overflow: hidden; margin-top: .45rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }
.portal-dashboard__recent > div:first-child { display: flex; justify-content: space-between; padding: .65rem; }
.portal-dashboard__recent > div:first-child strong, .portal-dashboard__recent > div:first-child span { font-size: .55rem; }
.portal-dashboard__recent > div:first-child span { color: var(--orange-dark); font-weight: 850; }
.portal-dashboard__row { display: grid; min-width: 27rem; grid-template-columns: .55fr .9fr 1.5fr .65fr; border-top: 1px solid var(--border); }
.portal-dashboard__row span { padding: .48rem; font-size: .47rem; }
.portal-dashboard__row span:last-child { color: #237a42; font-weight: 850; }
.portal-dashboard__row--head { background: #eeeae5; }
.portal-dashboard__row--head span { color: var(--black) !important; font-weight: 850; }
.portal-dashboard__disclaimer { display: block; padding-top: .45rem; color: var(--muted); font-size: .46rem; text-align: right; }

.portal-permissions-section { color: var(--white); background: var(--black); }
.portal-permissions__layout { display: grid; gap: 3rem; align-items: center; }
.portal-permissions__layout > div:first-child p:not(.eyebrow) { color: #bdbdbd; }
.portal-permission-map { display: grid; justify-items: center; }
.portal-permission-map__client { width: min(100%,20rem); padding: 1rem; background: #222; border: 1px solid #3b3b3b; border-radius: .75rem; text-align: center; }
.portal-permission-map__client span, .portal-permission-map__client strong { display: block; }
.portal-permission-map__client span { color: var(--orange); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.portal-permission-map__client strong { font-size: .9rem; }
.portal-permission-map__line { width: .22rem; height: 2.3rem; background: var(--orange); }
.portal-permission-map__sites { display: grid; width: 100%; gap: .55rem; }
.portal-permission-map__sites article { display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem; padding: .85rem; background: #222; border: 1px solid #3b3b3b; border-radius: .65rem; }
.portal-permission-map__sites article > span { grid-row: 1 / 3; display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 50%; font-size: .7rem; font-weight: 900; }
.portal-permission-map__sites strong { font-size: .76rem; }
.portal-permission-map__sites small { color: #aaa; font-size: .6rem; }
.portal-permission-map__sites .is-allowed > span { color: var(--black); background: var(--orange); }
.portal-permission-map__sites .is-blocked { opacity: .5; }
.portal-permission-map__sites .is-blocked > span { color: var(--white); background: #555; }

.portal-features-section { background: #ece8e2; }
.portal-feature-grid { display: grid; gap: .8rem; }
.portal-feature-grid article { padding: 1.2rem; background: var(--white); border: 1px solid var(--border); border-radius: .8rem; }
.portal-feature-grid article > span { display: grid; width: 2.4rem; height: 2.4rem; margin-bottom: 1rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }
.portal-feature-grid h3 { margin-bottom: .4rem; font-size: 1rem; }
.portal-feature-grid p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.portal-mobile-section { background: var(--paper); }
.portal-mobile__layout { display: grid; gap: 3rem; align-items: center; }
.portal-mobile-preview { overflow: hidden; width: min(100%,18rem); margin-inline: auto; padding: .55rem; color: var(--white); background: #161616; border-radius: 1.8rem; box-shadow: var(--shadow); }
.portal-mobile-preview__top { display: flex; align-items: center; justify-content: space-between; padding: .7rem; color: var(--orange); font-size: .66rem; font-weight: 900; }
.portal-mobile-preview__top i { width: 1rem; height: .12rem; background: #666; box-shadow: 0 .3rem #666,0 -.3rem #666; }
.portal-mobile-preview__body { min-height: 26rem; padding: .75rem; color: var(--black); background: #f2f0ed; border-radius: 1.2rem; }
.portal-mobile-preview__welcome { position: relative; padding: 1rem; color: var(--white); background: var(--black); border-radius: .65rem; }
.portal-mobile-preview__welcome > small, .portal-mobile-preview__welcome > strong { display: block; }
.portal-mobile-preview__welcome > small { color: var(--orange); font-size: .5rem; font-weight: 900; letter-spacing: .1em; }
.portal-mobile-preview__welcome > strong { max-width: 10rem; font-size: .9rem; }
.portal-mobile-preview__welcome .portal-live { position: absolute; top: 1rem; right: .7rem; font-size: .48rem; }
.portal-mobile-preview__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem; margin-top: .55rem; }
.portal-mobile-preview__stats article { padding: .75rem; background: var(--white); border: 1px solid var(--border); border-radius: .55rem; }
.portal-mobile-preview__stats small, .portal-mobile-preview__stats strong { display: block; }
.portal-mobile-preview__stats small { color: var(--muted); font-size: .5rem; }
.portal-mobile-preview__stats strong { font-size: 1rem; }
.portal-mobile-preview__cards { display: grid; gap: .55rem; margin-top: .55rem; }
.portal-mobile-preview__cards article { padding: .85rem; background: var(--white); border-left: .25rem solid var(--orange); border-radius: 0 .55rem .55rem 0; }
.portal-mobile-preview__cards span, .portal-mobile-preview__cards strong, .portal-mobile-preview__cards small { display: block; }
.portal-mobile-preview__cards span { color: var(--orange-dark); font-size: .52rem; font-weight: 900; }
.portal-mobile-preview__cards strong { font-size: .76rem; }
.portal-mobile-preview__cards small { color: var(--muted); font-size: .52rem; }
.portal-mobile__layout > div:last-child p:not(.eyebrow) { color: var(--muted); }

.portal-invite-section { color: var(--black); background: var(--orange); }
.portal-invite-section .eyebrow { color: var(--black); }
.portal-invite__layout { display: grid; gap: 2.5rem; align-items: center; }
.portal-invite-steps { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.portal-invite-steps li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; padding: .85rem; background: rgba(255,255,255,.25); border: 1px solid rgba(16,16,16,.18); border-radius: .65rem; }
.portal-invite-steps li > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; color: var(--orange); background: var(--black); border-radius: .5rem; font-size: .6rem; font-weight: 900; }
.portal-invite-steps strong, .portal-invite-steps small { display: block; }
.portal-invite-steps strong { font-size: .78rem; }
.portal-invite-steps small { font-size: .62rem; }

.portal-benefits-section { background: #ece8e2; }
.portal-benefit-grid { display: grid; gap: .8rem; }
.portal-benefit-grid article { padding: 1.25rem; background: var(--white); border-top: .3rem solid var(--orange); border-radius: .2rem .2rem .8rem .8rem; }
.portal-benefit-grid article > span { display: block; margin-bottom: .8rem; color: var(--orange-dark); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.portal-benefit-grid h3 { margin-bottom: .4rem; font-size: 1rem; }
.portal-benefit-grid p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.portal-final-section { color: var(--white); background: #ece8e2; }
.portal-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }
.portal-final__panel h2 { max-width: 16ch; }
.portal-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }
.portal-final__panel .button { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
    .portal-live > i { animation: none; }
}

@media (min-width: 42rem) {
    .portal-status-strip__inner { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }
    .portal-dashboard { grid-template-columns: 8rem minmax(0,1fr); }
    .portal-dashboard__sidebar { display: flex; flex-direction: column; }
    .portal-dashboard__panels { grid-template-columns: 1.25fr .75fr; }
    .portal-permission-map__sites { grid-template-columns: repeat(3,1fr); }
    .portal-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .portal-benefit-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 58rem) {
    .portal-hero__layout { grid-template-columns: minmax(0,.95fr) minmax(30rem,1.05fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .portal-purpose__layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 4rem; }
    .portal-dashboard__main { padding: 1rem; }
    .portal-permissions__layout, .portal-mobile__layout, .portal-invite__layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }
    .portal-feature-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .portal-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* Incident reporting page */
.incident-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.incident-hero::after { position: absolute; right: -11rem; bottom: -14rem; width: 31rem; height: 31rem; background: var(--orange); border-radius: 50%; opacity: .15; content: ""; }
.incident-hero__layout { position: relative; z-index: 1; display: grid; gap: 3rem; padding-block: 4.5rem 5rem; }
.incident-hero h1 { max-width: 13ch; }
.incident-hero__lead { max-width: 48rem; color: #c9c9c9; font-size: 1.08rem; }
.incident-hero__preview { align-self: center; padding: .75rem; color: var(--black); background: #f2f0ed; border: .45rem solid #292929; border-radius: 1rem; box-shadow: 0 1.7rem 3.5rem rgba(0,0,0,.35); }
.incident-hero__preview-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem; color: var(--white); background: var(--black); border-radius: .55rem; }
.incident-hero__preview-top > span { font-size: .66rem; font-weight: 850; }
.incident-hero__preview-top > strong { display: inline-flex; align-items: center; gap: .4rem; color: var(--orange); font-size: .58rem; text-transform: uppercase; }
.incident-hero__preview-top i { width: .5rem; height: .5rem; background: #e53935; border-radius: 50%; }
.incident-hero__preview-alert { margin-top: .55rem; padding: 1rem; color: var(--white); background: linear-gradient(120deg,#212121,#313131); border-left: .3rem solid #e53935; border-radius: 0 .55rem .55rem 0; }
.incident-hero__preview-alert small, .incident-hero__preview-alert strong, .incident-hero__preview-alert span { display: block; }
.incident-hero__preview-alert small { color: #ff7774; font-size: .5rem; font-weight: 900; letter-spacing: .1em; }
.incident-hero__preview-alert strong { font-size: .95rem; }
.incident-hero__preview-alert span { color: #bdbdbd; font-size: .56rem; }
.incident-hero__preview-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin-top: .55rem; }
.incident-hero__preview-stats article { padding: .65rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }
.incident-hero__preview-stats small, .incident-hero__preview-stats strong { display: block; }
.incident-hero__preview-stats small { color: var(--muted); font-size: .47rem; }.incident-hero__preview-stats strong { font-size: .9rem; }
.incident-hero__preview-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.incident-hero__preview-actions span { padding: .45rem .55rem; color: #237a42; background: #e8f7ed; border-radius: .4rem; font-size: .53rem; font-weight: 850; }
.incident-hero__preview > small { display: block; padding-top: .5rem; color: var(--muted); font-size: .48rem; text-align: right; }

.incident-principle-strip { color: var(--black); background: var(--orange); }
.incident-principle-strip__inner { display: grid; gap: .3rem; padding-block: 1rem; }
.incident-principle-strip__inner strong { font-size: .78rem; }.incident-principle-strip__inner span { font-size: .7rem; }

.incident-journey-section { background: #ece8e2; }
.incident-journey { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.incident-journey li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .75rem; }
.incident-journey li > span { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }
.incident-journey h3 { margin: .05rem 0 .3rem; font-size: 1rem; }.incident-journey p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.incident-capture-section { background: var(--paper); }
.incident-capture__layout { display: grid; gap: 3rem; align-items: center; }
.incident-capture__layout > div:first-child > p:not(.eyebrow) { color: var(--muted); }
.incident-check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.incident-check-list li { position: relative; padding-left: 1.4rem; font-size: .72rem; font-weight: 700; }
.incident-check-list li::before { position: absolute; left: 0; color: var(--orange); content: "\2713"; font-weight: 900; }
.incident-form-preview { padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); }
.incident-form-preview__head { display: flex; justify-content: space-between; gap: .8rem; padding: .8rem; color: var(--white); background: var(--black); border-radius: .55rem; }
.incident-form-preview__head span { font-size: .72rem; font-weight: 850; }.incident-form-preview__head small { color: #aaa; font-size: .5rem; }
.incident-form-preview__grid { display: grid; gap: .55rem; margin-top: .65rem; }
.incident-form-preview label { color: var(--muted); font-size: .52rem; font-weight: 800; }
.incident-form-preview label > span { display: block; min-height: 2.3rem; margin-top: .25rem; padding: .65rem; color: var(--black); background: #f5f3f0; border: 1px solid var(--border); border-radius: .4rem; font-size: .62rem; font-weight: 600; }
.incident-form-preview label > span.is-high { color: #a31512; background: #fff0ef; border-color: #edaaa7; font-weight: 850; }
.incident-form-preview__submit { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--border); }
.incident-form-preview__submit span, .incident-form-preview__submit strong { padding: .6rem; border-radius: .4rem; font-size: .55rem; }
.incident-form-preview__submit span { background: #eeeae5; }.incident-form-preview__submit strong { color: var(--black); background: var(--orange); }
.incident-form-preview > small { display: block; padding-top: .45rem; color: var(--muted); font-size: .48rem; text-align: right; }

.incident-alert-section { color: var(--white); background: var(--black); }
.incident-alert-section .section-heading--split > p { color: #bdbdbd; }
.incident-alert__layout { display: grid; gap: 1.5rem; }
.incident-email-preview { overflow: hidden; color: var(--black); background: var(--white); border-radius: .8rem; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.25); }
.incident-email-preview__top { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; color: var(--white); background: #222; }
.incident-email-preview__top img { width: 2rem; height: 2rem; object-fit: contain; }.incident-email-preview__top span { color: var(--orange); font-size: .62rem; font-weight: 900; letter-spacing: .11em; }
.incident-email-preview__body { padding: 1rem; }.incident-email-preview__body > small { color: #b42318; font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.incident-email-preview__body h3 { margin: .3rem 0 .6rem; font-size: 1.05rem; }.incident-email-preview__body > p { color: var(--muted); font-size: .72rem; }
.incident-email-preview__body > div { display: grid; grid-template-columns: .7fr 1.3fr; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.incident-email-preview__body > div span, .incident-email-preview__body > div strong { font-size: .62rem; }.incident-email-preview__body > div span { color: var(--muted); }
.incident-email-preview__body > a { display: inline-block; margin-top: .8rem; padding: .65rem .8rem; color: var(--black); background: var(--orange); border-radius: .45rem; font-size: .6rem; font-weight: 850; text-decoration: none; }
.incident-email-preview__attachment { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; padding: .8rem 1rem; background: #f0ede9; border-top: 1px solid var(--border); }
.incident-email-preview__attachment > span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; color: var(--white); background: #c8322b; border-radius: .4rem; font-size: .58rem; font-weight: 900; }
.incident-email-preview__attachment strong, .incident-email-preview__attachment small { display: block; }.incident-email-preview__attachment strong { font-size: .65rem; }.incident-email-preview__attachment small { color: var(--muted); font-size: .52rem; }
.incident-recipient-panel { align-self: start; padding: 1rem; background: #222; border: 1px solid #3b3b3b; border-radius: .8rem; }
.incident-recipient-panel > p { color: var(--orange); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.incident-recipient-panel article { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .7rem 0; border-top: 1px solid #383838; }
.incident-recipient-panel article > span { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-size: .55rem; font-weight: 900; }
.incident-recipient-panel article strong, .incident-recipient-panel article small { display: block; }.incident-recipient-panel article strong { font-size: .7rem; }.incident-recipient-panel article small { color: #aaa; font-size: .55rem; }
.incident-recipient-panel article > i { color: #63e58f; font-style: normal; font-weight: 900; }.incident-recipient-panel > small { display: block; padding-top: .7rem; color: #888; border-top: 1px solid #383838; font-size: .52rem; }

.incident-sms-section { background: var(--orange); }.incident-sms-section .eyebrow { color: var(--black); }
.incident-sms__layout { display: grid; gap: 3rem; align-items: center; }
.incident-sms-phone { overflow: hidden; width: min(100%,18rem); margin-inline: auto; padding: .55rem; color: var(--white); background: #171717; border-radius: 1.8rem; box-shadow: var(--shadow); }
.incident-sms-phone > div { padding: .7rem; color: #aaa; font-size: .62rem; font-weight: 850; text-align: center; }
.incident-sms-phone article { min-height: 22rem; padding: 1rem; color: var(--black); background: #f2f0ed; border-radius: 1.25rem; }
.incident-sms-phone article > span { display: block; margin-bottom: 1rem; color: var(--muted); font-size: .58rem; text-align: center; }.incident-sms-phone article p { margin-bottom: .4rem; padding: .8rem; background: #d9f5df; border-radius: .8rem .8rem .2rem .8rem; font-size: .7rem; }
.incident-sms-phone article strong { display: block; padding: .6rem .8rem; color: #125fc1; background: #d9f5df; font-size: .62rem; }.incident-sms-phone article small { display: block; margin-top: .35rem; color: var(--muted); font-size: .5rem; text-align: right; }
.incident-sms__note { padding: .9rem; background: rgba(255,255,255,.25); border-left: .25rem solid var(--black); font-size: .72rem; }

.incident-integrity-section { color: var(--white); background: var(--black); }
.incident-integrity__layout { display: grid; gap: 3rem; align-items: center; }.incident-integrity__layout > div:first-child p:not(.eyebrow) { color: #bdbdbd; }
.incident-timeline article { position: relative; display: grid; grid-template-columns: 3rem auto 1fr; gap: .65rem; padding-bottom: 1.2rem; }
.incident-timeline article:not(:last-child)::after { position: absolute; top: 1.2rem; bottom: 0; left: 3.35rem; width: 2px; background: #444; content: ""; }
.incident-timeline article > span { padding-top: .2rem; color: #aaa; font-size: .58rem; text-align: right; }.incident-timeline article > i { position: relative; z-index: 1; width: .75rem; height: .75rem; margin-top: .15rem; background: var(--orange); border: .18rem solid var(--black); border-radius: 50%; box-shadow: 0 0 0 2px var(--orange); }
.incident-timeline article div { padding: .8rem; background: #222; border: 1px solid #383838; border-radius: .65rem; }.incident-timeline small, .incident-timeline strong { display: block; }
.incident-timeline small { color: var(--orange); font-size: .5rem; font-weight: 900; letter-spacing: .1em; }.incident-timeline strong { font-size: .75rem; }.incident-timeline p { margin: .3rem 0 0; color: #aaa; font-size: .62rem; }

.incident-portal-section { background: #ece8e2; }
.incident-portal-preview { overflow: hidden; margin-top: 2rem; padding: .8rem; background: var(--white); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); }
.incident-portal-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; color: var(--white); background: var(--black); border-radius: .55rem; }
.incident-portal-preview__head small, .incident-portal-preview__head strong { display: block; }.incident-portal-preview__head small { color: var(--orange); font-size: .47rem; font-weight: 900; letter-spacing: .1em; }.incident-portal-preview__head strong { font-size: .78rem; }.incident-portal-preview__head > span { color: #aaa; font-size: .5rem; }
.incident-portal-preview__filters { display: flex; overflow-x: auto; gap: .4rem; padding-block: .65rem; }.incident-portal-preview__filters span { flex: 0 0 auto; padding: .4rem .55rem; background: #eeeae5; border-radius: .4rem; font-size: .52rem; font-weight: 800; }.incident-portal-preview__filters .is-active { background: var(--orange); }
.incident-portal-preview__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; }.incident-portal-preview__stats article { padding: .65rem; background: #f5f3f0; border: 1px solid var(--border); border-radius: .45rem; }.incident-portal-preview__stats small, .incident-portal-preview__stats strong { display: block; }.incident-portal-preview__stats small { color: var(--muted); font-size: .48rem; }.incident-portal-preview__stats strong { font-size: .9rem; }
.incident-portal-preview__table { overflow-x: auto; margin-top: .6rem; }.incident-portal-preview__table > div { display: grid; min-width: 34rem; grid-template-columns: .8fr 1fr 1.5fr .7fr .7fr; border-bottom: 1px solid var(--border); }.incident-portal-preview__table > div:first-child { background: #eeeae5; }.incident-portal-preview__table span, .incident-portal-preview__table strong { padding: .55rem; font-size: .52rem; }.incident-portal-preview__table .is-high { color: #b42318; font-weight: 900; }
.incident-portal-preview__exports { display: flex; gap: .45rem; padding-top: .65rem; }.incident-portal-preview__exports span { padding: .45rem .6rem; color: var(--white); background: var(--black); border-radius: .4rem; font-size: .52rem; font-weight: 800; }.incident-portal-preview > small { display: block; padding-top: .5rem; color: var(--muted); font-size: .46rem; text-align: right; }

.incident-credits-section { background: var(--paper); }
.incident-credits__layout { display: grid; gap: 3rem; align-items: center; }.incident-credits__layout > div:first-child p:not(.eyebrow) { color: var(--muted); }
.incident-credit-wallet { overflow: hidden; padding: 1rem; color: var(--white); background: var(--black); border-radius: 1rem; box-shadow: var(--shadow); }
.incident-credit-wallet__top { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid #383838; }.incident-credit-wallet__top span { color: var(--orange); font-size: .68rem; font-weight: 900; }.incident-credit-wallet__top small { color: #888; font-size: .55rem; }
.incident-credit-wallet__balance { padding-block: 1.3rem; }.incident-credit-wallet__balance small { display: block; color: #aaa; font-size: .56rem; }.incident-credit-wallet__balance strong { font-size: 2.4rem; }.incident-credit-wallet__balance span { color: var(--orange); font-size: .65rem; font-weight: 850; }
.incident-credit-wallet__usage { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem; }.incident-credit-wallet__usage > div { padding: .7rem; background: #222; border: 1px solid #383838; border-radius: .5rem; }.incident-credit-wallet__usage span, .incident-credit-wallet__usage strong { display: block; }.incident-credit-wallet__usage span { color: #999; font-size: .5rem; }.incident-credit-wallet__usage strong { font-size: .68rem; }
.incident-credit-wallet button { width: 100%; margin-top: .7rem; padding: .7rem; color: var(--black); background: var(--orange); border: 0; border-radius: .5rem; font: inherit; font-size: .65rem; font-weight: 850; opacity: 1; }.incident-credit-wallet > small { display: block; padding-top: .55rem; color: #777; font-size: .5rem; text-align: center; }

.incident-benefits-section { background: #ece8e2; }
.incident-benefit-grid { display: grid; gap: .8rem; }.incident-benefit-grid article { padding: 1.2rem; background: var(--white); border: 1px solid var(--border); border-radius: .8rem; }.incident-benefit-grid article > span { display: grid; width: 2.4rem; height: 2.4rem; margin-bottom: 1rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }.incident-benefit-grid h3 { margin-bottom: .4rem; font-size: 1rem; }.incident-benefit-grid p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.incident-final-section { color: var(--white); background: #ece8e2; }
.incident-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }.incident-final__panel h2 { max-width: 16ch; }.incident-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }.incident-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .incident-principle-strip__inner { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }
    .incident-journey, .incident-benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .incident-form-preview__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.incident-form-preview__wide { grid-column: 1 / -1; }
    .incident-alert__layout { grid-template-columns: minmax(0,1.15fr) minmax(16rem,.85fr); }
}

@media (min-width: 58rem) {
    .incident-hero__layout { grid-template-columns: minmax(0,1fr) minmax(29rem,1fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .incident-journey, .incident-benefit-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .incident-capture__layout, .incident-sms__layout, .incident-integrity__layout, .incident-credits__layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }
    .incident-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* Construction management page */
.build-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.build-hero::after { position: absolute; right: -11rem; bottom: -14rem; width: 31rem; height: 31rem; background: var(--orange); border-radius: 50%; opacity: .15; content: ""; }
.build-hero__layout { position: relative; z-index: 1; display: grid; gap: 3rem; padding-block: 4.5rem 5rem; }
.build-hero h1 { max-width: 13ch; }.build-hero__lead { max-width: 48rem; color: #c9c9c9; font-size: 1.08rem; }
.build-hero__visual { position: relative; min-height: 28rem; align-self: center; }
.build-plan-card { position: absolute; top: 0; left: 0; width: 78%; min-height: 19rem; padding: 1rem; color: var(--black); background: #f7f5f1; border: .45rem solid #292929; border-radius: .7rem; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.3); }
.build-plan-card > div { padding-bottom: .8rem; border-bottom: 1px solid #c9c4bd; }.build-plan-card span, .build-plan-card strong, .build-plan-card small { display: block; }.build-plan-card span { color: var(--orange-dark); font-size: .55rem; font-weight: 900; letter-spacing: .1em; }.build-plan-card strong { font-size: .85rem; }.build-plan-card small { color: var(--muted); font-size: .5rem; }
.build-plan-card > i { position: absolute; display: block; background: #b7b1aa; }.build-plan-card > i:nth-of-type(1) { top: 7rem; left: 10%; width: 55%; height: 2px; }.build-plan-card > i:nth-of-type(2) { top: 7rem; left: 10%; width: 2px; height: 7rem; }.build-plan-card > i:nth-of-type(3) { top: 11rem; left: 35%; width: 45%; height: 2px; transform: rotate(-25deg); }.build-plan-card > i:nth-of-type(4) { top: 8.5rem; left: 62%; width: 2px; height: 6rem; }
.build-plan-card > b { position: absolute; right: .8rem; bottom: .8rem; display: grid; width: 2.3rem; height: 2.3rem; place-items: center; color: var(--white); background: #c8322b; border-radius: .4rem; font-size: .55rem; }
.build-task-phone { position: absolute; right: 0; bottom: 0; z-index: 2; overflow: hidden; width: 48%; padding: .5rem; color: var(--white); background: #171717; border-radius: 1.5rem; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.35); }
.build-task-phone > div { padding: .6rem; color: var(--orange); font-size: .58rem; font-weight: 900; text-align: center; }.build-task-phone article { min-height: 20rem; padding: .9rem; color: var(--black); background: #f2f0ed; border-radius: 1rem; }.build-task-phone article > small { color: var(--orange-dark); font-size: .48rem; font-weight: 900; }.build-task-phone article > strong, .build-task-phone article > span { display: block; }.build-task-phone article > strong { font-size: .82rem; }.build-task-phone article > span { color: var(--muted); font-size: .52rem; }.build-task-phone article > p { margin-block: .8rem; font-size: .62rem; }.build-task-phone article > div { display: grid; grid-template-columns: auto 1fr; gap: .5rem; padding: .6rem; background: #fff1e9; border: 1px solid #ffcab0; border-radius: .5rem; }.build-task-phone article > div i { width: .55rem; height: .55rem; margin-top: .1rem; background: var(--orange); border-radius: 50%; }.build-task-phone article > div span { font-size: .52rem; font-weight: 750; }.build-task-phone button { width: 100%; margin-top: .8rem; padding: .6rem; color: var(--black); background: var(--orange); border: 0; border-radius: .45rem; font: inherit; font-size: .58rem; font-weight: 850; opacity: 1; }

.build-concept-strip { color: var(--black); background: var(--orange); }.build-concept-strip > div { display: grid; gap: .3rem; padding-block: 1rem; }.build-concept-strip strong { font-size: .78rem; }.build-concept-strip span { font-size: .7rem; }
.build-workflow-section { background: #ece8e2; }.build-workflow { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }.build-workflow li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .75rem; }.build-workflow li > span { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }.build-workflow h3 { margin: .05rem 0 .3rem; font-size: 1rem; }.build-workflow p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }

.build-tasks-section { background: var(--paper); }.build-task-examples { display: grid; gap: 1rem; }.build-task-examples > article { overflow: hidden; padding: 1.2rem; background: var(--white); border: 1px solid var(--border); border-radius: .9rem; box-shadow: var(--shadow); }.build-task-examples header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }.build-task-examples header small, .build-task-examples header strong { display: block; }.build-task-examples header small { color: var(--orange-dark); font-size: .53rem; font-weight: 900; letter-spacing: .1em; }.build-task-examples header strong { font-size: .7rem; }.build-task-examples header > span { padding: .35rem .5rem; border-radius: 99rem; font-size: .52rem; font-weight: 850; }.build-task-examples .is-progress { color: #7a4b00; background: #fff2d8; }.build-task-examples .is-new { color: #145c34; background: #e5f7ec; }.build-task-examples h3 { margin: 1rem 0 .45rem; font-size: 1.15rem; }.build-task-examples > article > p { color: var(--muted); font-size: .78rem; }.build-task-examples dl { display: grid; gap: 0; margin: 1rem 0; }.build-task-examples dl > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--border); }.build-task-examples dt, .build-task-examples dd { margin: 0; font-size: .68rem; }.build-task-examples dt { color: var(--muted); }.build-task-examples dd { font-weight: 750; }.build-task-examples footer { display: flex; flex-wrap: wrap; gap: .45rem; }.build-task-examples footer span { padding: .5rem .6rem; color: var(--black); background: var(--orange); border-radius: .4rem; font-size: .58rem; font-weight: 850; }

.build-drawings-section { color: var(--white); background: var(--black); }.build-drawings__layout { display: grid; gap: 3rem; align-items: center; }.build-drawings__layout > div:first-child p:not(.eyebrow) { color: #bdbdbd; }.build-drawings__note { padding: 1rem; color: #d0d0d0 !important; background: #222; border-left: .3rem solid var(--orange); border-radius: 0 .7rem .7rem 0; font-size: .72rem; }.build-drawings__note strong { color: var(--orange); }
.build-library-preview { overflow: hidden; padding: .8rem; color: var(--black); background: #f2f0ed; border-radius: .9rem; }.build-library-preview__head { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem; color: var(--white); background: #222; border-radius: .5rem; }.build-library-preview__head small, .build-library-preview__head strong { display: block; }.build-library-preview__head small { color: var(--orange); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }.build-library-preview__head strong { font-size: .7rem; }.build-library-preview__head > span { color: #aaa; font-size: .5rem; }.build-library-preview__filters { display: flex; overflow-x: auto; gap: .4rem; padding-block: .6rem; }.build-library-preview__filters span { flex: 0 0 auto; padding: .4rem .5rem; background: var(--white); border-radius: .35rem; font-size: .5rem; font-weight: 750; }.build-library-preview__filters .is-active { background: var(--orange); }.build-library-preview > article { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; padding: .7rem; background: var(--white); border-bottom: 1px solid var(--border); }.build-library-preview > article b { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--white); background: #c8322b; border-radius: .35rem; font-size: .48rem; }.build-library-preview > article strong, .build-library-preview > article small { display: block; }.build-library-preview > article strong { font-size: .65rem; }.build-library-preview > article small { color: var(--muted); font-size: .5rem; }.build-library-preview > article > span { color: #237a42; font-size: .5rem; font-weight: 850; }.build-library-preview > article.is-archive { opacity: .55; }.build-library-preview > article.is-archive > span { color: var(--muted); }.build-library-preview > small { display: block; padding-top: .5rem; color: var(--muted); font-size: .45rem; text-align: right; }

.build-alerts-section { background: var(--orange); }.build-alerts-section .eyebrow { color: var(--black); }.build-alerts__layout { display: grid; gap: 3rem; align-items: center; }.build-alert-phone { overflow: hidden; width: min(100%,18rem); margin-inline: auto; padding: .55rem; color: var(--white); background: #171717; border-radius: 1.8rem; box-shadow: var(--shadow); }.build-alert-phone > div { padding: .7rem; color: var(--orange); font-size: .62rem; font-weight: 850; text-align: center; }.build-alert-phone article { min-height: 22rem; padding: 1rem; color: var(--black); background: #f2f0ed; border-radius: 1.2rem; }.build-alert-phone article > small { color: #b42318; font-size: .5rem; font-weight: 900; letter-spacing: .08em; }.build-alert-phone article > strong { display: block; margin-block: .5rem; font-size: 1.1rem; }.build-alert-phone article > p { font-size: .72rem; }.build-alert-phone article > span { display: block; padding: .65rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; font-size: .58rem; }.build-alert-phone button { width: 100%; margin-top: .75rem; padding: .65rem; color: var(--black); background: var(--orange); border: 0; border-radius: .45rem; font: inherit; font-size: .6rem; font-weight: 850; opacity: 1; }.build-alert-list { display: grid; gap: .55rem; margin: 1rem 0; padding: 0; list-style: none; }.build-alert-list li { position: relative; padding-left: 1.5rem; font-size: .78rem; font-weight: 700; }.build-alert-list li::before { position: absolute; left: 0; content: "\2713"; font-weight: 900; }.build-alerts__note { padding: .85rem; background: rgba(255,255,255,.25); border-left: .25rem solid var(--black); font-size: .7rem; }

.build-evidence-section { background: #ece8e2; }.build-evidence-grid { display: grid; gap: 1rem; }.build-evidence-grid article { padding: .9rem; background: var(--white); border: 1px solid var(--border); border-radius: .8rem; }.build-photo-placeholder { position: relative; display: grid; aspect-ratio: 4 / 3; place-content: center; justify-items: center; overflow: hidden; color: var(--white); background: linear-gradient(145deg,#2d2d2d,#151515); border-radius: .55rem; }.build-photo-placeholder::before, .build-photo-placeholder::after { position: absolute; background: #454545; content: ""; }.build-photo-placeholder::before { right: -20%; bottom: -30%; width: 90%; height: 80%; transform: rotate(-22deg); }.build-photo-placeholder::after { bottom: -35%; left: -15%; width: 75%; height: 75%; transform: rotate(28deg); }.build-photo-placeholder > span { position: absolute; top: .6rem; left: .6rem; z-index: 1; display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .45rem; font-size: .55rem; font-weight: 900; }.build-photo-placeholder > i { position: relative; z-index: 1; width: 3rem; height: 2.2rem; border: .25rem solid var(--orange); border-radius: .4rem; }.build-photo-placeholder > i::before { position: absolute; top: -.65rem; left: .65rem; width: 1.2rem; height: .55rem; background: var(--orange); border-radius: .2rem .2rem 0 0; content: ""; }.build-photo-placeholder > strong { position: relative; z-index: 1; margin-top: .7rem; font-size: .68rem; }.build-evidence-grid h3 { margin: .8rem 0 .35rem; font-size: 1rem; }.build-evidence-grid p { margin-bottom: 0; color: var(--muted); font-size: .75rem; }.build-evidence-status { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; margin-top: 1rem; padding: 1rem; color: var(--white); background: var(--black); border-radius: .75rem; }.build-evidence-status > span { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-weight: 900; }.build-evidence-status strong, .build-evidence-status small { display: block; }.build-evidence-status strong { font-size: .72rem; }.build-evidence-status small, .build-evidence-status time { color: #aaa; font-size: .55rem; }

.build-roles-section { background: var(--paper); }.build-roles__layout { display: grid; gap: 3rem; }.build-roles__layout > div:first-child p:not(.eyebrow) { color: var(--muted); }.build-role-grid { display: grid; gap: .7rem; }.build-role-grid article { padding: 1rem; background: var(--white); border: 1px solid var(--border); border-left: .3rem solid var(--orange); border-radius: 0 .7rem .7rem 0; }.build-role-grid span, .build-role-grid strong { display: block; }.build-role-grid span { color: var(--orange-dark); font-size: .55rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.build-role-grid strong { margin-block: .2rem; font-size: .82rem; }.build-role-grid p { margin-bottom: 0; color: var(--muted); font-size: .68rem; }

.build-dashboard-section { color: var(--white); background: var(--black); }.build-dashboard-section .section-heading--split > p { color: #bdbdbd; }.build-dashboard { overflow: hidden; padding: .8rem; color: var(--black); background: #f2f0ed; border-radius: 1rem; }.build-dashboard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; color: var(--white); background: #222; border-radius: .5rem; }.build-dashboard__head small, .build-dashboard__head strong { display: block; }.build-dashboard__head small { color: var(--orange); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }.build-dashboard__head strong { font-size: .74rem; }.build-dashboard__head > span { color: #aaa; font-size: .55rem; }.build-dashboard__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: .45rem; margin-top: .55rem; }.build-dashboard__stats article { padding: .65rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }.build-dashboard__stats small, .build-dashboard__stats strong, .build-dashboard__stats span { display: block; }.build-dashboard__stats small { color: var(--muted); font-size: .47rem; }.build-dashboard__stats strong { font-size: .9rem; }.build-dashboard__stats span { color: var(--muted); font-size: .43rem; }.build-dashboard__body { display: grid; gap: .45rem; margin-top: .45rem; }.build-dashboard__body > article { padding: .75rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }.build-dashboard__body > article > div:first-child { display: flex; justify-content: space-between; }.build-dashboard__body > article > div:first-child strong { font-size: .62rem; }.build-dashboard__body > article > div:first-child small { color: var(--muted); font-size: .48rem; }.build-progress-bars { display: grid !important; gap: .55rem; margin-top: .7rem; }.build-progress-bars span { position: relative; display: block; overflow: hidden; height: 1.25rem; background: #eeeae5; border-radius: 99rem; }.build-progress-bars i { position: absolute; inset: 0 auto 0 0; background: var(--orange); }.build-progress-bars b { position: relative; z-index: 1; display: block; padding: .28rem .5rem; font-size: .48rem; }.build-dashboard__body ul { display: grid; gap: .5rem; margin: .7rem 0 0; padding: 0; list-style: none; }.build-dashboard__body li { display: grid; grid-template-columns: auto 1fr; gap: .45rem; align-items: center; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }.build-dashboard__body li i { width: .5rem; height: .5rem; background: #e53935; border-radius: 50%; }.build-dashboard__body li span { font-size: .52rem; }.build-dashboard > small { display: block; padding-top: .45rem; color: var(--muted); font-size: .45rem; text-align: right; }

.build-environments-section { background: #ece8e2; }.build-environment-grid { display: grid; gap: .8rem; }.build-environment-grid article { padding: 1.2rem; background: var(--white); border-top: .3rem solid var(--orange); border-radius: .2rem .2rem .8rem .8rem; }.build-environment-grid span { display: block; margin-bottom: .8rem; color: var(--orange-dark); font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.build-environment-grid h3 { margin-bottom: .4rem; font-size: 1rem; }.build-environment-grid p { margin-bottom: 0; color: var(--muted); font-size: .76rem; }
.build-future-section { background: var(--orange); }.build-future-section .eyebrow { color: var(--black); }.build-future__panel { display: grid; gap: 1.5rem; }.build-future__panel > div:last-child { padding: 1.2rem; color: var(--white); background: var(--black); border-radius: .8rem; }.build-future__panel > div:last-child span, .build-future__panel > div:last-child strong, .build-future__panel > div:last-child small { display: block; }.build-future__panel > div:last-child span { color: var(--orange); font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.build-future__panel > div:last-child strong { margin-block: .35rem; font-size: 1rem; }.build-future__panel > div:last-child small { color: #aaa; font-size: .6rem; }
.build-final-section { color: var(--white); background: #ece8e2; }.build-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }.build-final__panel h2 { max-width: 16ch; }.build-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }.build-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .build-concept-strip > div { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }
    .build-workflow { grid-template-columns: repeat(2,minmax(0,1fr)); }.build-task-examples { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .build-evidence-grid, .build-environment-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.build-role-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.build-dashboard__stats { grid-template-columns: repeat(4,1fr); }.build-dashboard__body { grid-template-columns: 1.35fr .65fr; }
}

@media (min-width: 58rem) {
    .build-hero__layout { grid-template-columns: minmax(0,1fr) minmax(29rem,1fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .build-workflow { grid-template-columns: repeat(4,minmax(0,1fr)); }.build-drawings__layout, .build-alerts__layout, .build-roles__layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }
    .build-future__panel { grid-template-columns: 1fr auto; align-items: center; }.build-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* Closed-door registration page */
.invite-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }.invite-hero::after { position: absolute; right: -11rem; bottom: -14rem; width: 31rem; height: 31rem; background: var(--orange); border-radius: 50%; opacity: .15; content: ""; }.invite-hero__layout { position: relative; z-index: 1; display: grid; gap: 3rem; padding-block: 4.5rem 5rem; }.invite-hero h1 { max-width: 13ch; }.invite-hero__lead { max-width: 48rem; color: #c9c9c9; font-size: 1.08rem; }
.invite-hero__visual { position: relative; min-height: 24rem; align-self: center; }.invite-card { position: absolute; top: 0; left: 0; width: 78%; padding: 1.2rem; color: var(--black); background: var(--white); border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.3); }.invite-card > span { color: var(--orange-dark); font-size: .56rem; font-weight: 900; letter-spacing: .12em; }.invite-card > strong, .invite-card > p { display: block; }.invite-card > strong { margin-top: .4rem; font-size: 1.15rem; }.invite-card > p { color: var(--muted); font-size: .7rem; }.invite-card > div { display: grid; grid-template-columns: repeat(6,1fr); gap: .35rem; margin-block: 1rem; }.invite-card > div b { display: grid; aspect-ratio: 1; place-items: center; color: var(--white); background: var(--black); border-radius: .4rem; font-size: .8rem; }.invite-card > small { color: var(--muted); font-size: .58rem; }
.invite-lock { position: absolute; right: 0; bottom: 0; z-index: 2; width: 62%; padding: 1rem; color: var(--black); background: var(--orange); border-radius: .8rem; box-shadow: var(--shadow); }.invite-lock > i { position: relative; display: block; width: 2.5rem; height: 2rem; margin-bottom: .8rem; background: var(--black); border-radius: .3rem; }.invite-lock > i::before { position: absolute; top: -1.3rem; left: .5rem; width: 1.5rem; height: 1.6rem; border: .3rem solid var(--black); border-bottom: 0; border-radius: 1rem 1rem 0 0; content: ""; }.invite-lock span, .invite-lock strong { display: block; }.invite-lock span { font-size: .53rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.invite-lock strong { font-size: .8rem; }
.invite-private-strip { color: var(--black); background: var(--orange); }.invite-private-strip > div { display: grid; gap: .3rem; padding-block: 1rem; }.invite-private-strip strong { font-size: .78rem; }.invite-private-strip span { font-size: .7rem; }
.invite-purpose-section { background: #ece8e2; }.invite-purpose__layout { display: grid; gap: 1.5rem; }.invite-purpose__layout h2 { max-width: 15ch; }.invite-purpose__layout > div:last-child p { max-width: 45rem; color: var(--muted); }.invite-purpose__layout > div:last-child p:last-child { margin-bottom: 0; }
.invite-journey-section { background: var(--paper); }.invite-journey { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }.invite-journey li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .75rem; }.invite-journey li > span { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .62rem; font-weight: 900; }.invite-journey h3 { margin: .05rem 0 .3rem; font-size: 1rem; }.invite-journey p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }
.invite-create-section { color: var(--white); background: var(--black); }.invite-create__layout { display: grid; gap: 3rem; align-items: center; }.invite-create__layout > div:first-child > p:not(.eyebrow) { color: #bdbdbd; }.invite-check-list { display: grid; gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }.invite-check-list li { position: relative; padding-left: 1.5rem; color: #d0d0d0; font-size: .74rem; }.invite-check-list li::before { position: absolute; left: 0; color: var(--orange); content: "\2713"; font-weight: 900; }
.invite-create-preview { padding: .9rem; color: var(--black); background: #f2f0ed; border-radius: .9rem; }.invite-create-preview__head { padding: .75rem; color: var(--white); background: #222; border-radius: .5rem; }.invite-create-preview__head small, .invite-create-preview__head strong { display: block; }.invite-create-preview__head small { color: var(--orange); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }.invite-create-preview__head strong { font-size: .75rem; }.invite-create-preview__grid { display: grid; gap: .5rem; margin-top: .6rem; }.invite-create-preview label { color: var(--muted); font-size: .5rem; font-weight: 800; }.invite-create-preview label > span { display: block; min-height: 2.1rem; margin-top: .2rem; padding: .6rem; color: var(--black); background: var(--white); border: 1px solid var(--border); border-radius: .4rem; font-size: .6rem; }.invite-create-preview__action { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--border); }.invite-create-preview__action span { color: var(--muted); font-size: .52rem; }.invite-create-preview__action strong { padding: .6rem; background: var(--orange); border-radius: .4rem; font-size: .58rem; }.invite-create-preview > small { display: block; padding-top: .45rem; color: var(--muted); font-size: .45rem; text-align: right; }
.invite-message-section { background: var(--orange); }.invite-message-section .eyebrow { color: var(--black); }.invite-message__layout { display: grid; gap: 3rem; align-items: center; }.invite-message-phone { overflow: hidden; width: min(100%,18rem); margin-inline: auto; padding: .55rem; color: var(--white); background: #171717; border-radius: 1.8rem; box-shadow: var(--shadow); }.invite-message-phone > div { padding: .7rem; color: #aaa; font-size: .62rem; font-weight: 850; text-align: center; }.invite-message-phone article { min-height: 23rem; padding: 1rem; color: var(--black); background: #f2f0ed; border-radius: 1.2rem; }.invite-message-phone article > span { display: block; margin-bottom: .8rem; color: var(--muted); font-size: .55rem; text-align: center; }.invite-message-phone article p { margin-bottom: .45rem; padding: .7rem; background: #d9f5df; border-radius: .8rem .8rem .2rem .8rem; font-size: .68rem; }.invite-message-phone article strong { display: block; padding: .8rem; color: var(--white); background: var(--black); border-radius: .6rem; font-size: 1.35rem; letter-spacing: .25em; text-align: center; }.invite-message-phone article small { display: block; color: var(--muted); font-size: .5rem; text-align: right; }.invite-message__note { padding: .85rem; background: rgba(255,255,255,.25); border-left: .25rem solid var(--black); font-size: .7rem; }
.invite-register-section { background: #ece8e2; }.invite-register-demo { display: grid; overflow: hidden; background: var(--white); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); }.invite-register-demo > aside { padding: 1.4rem; color: var(--white); background: var(--black); }.invite-register-demo > aside img { width: 3.4rem; height: 3.4rem; object-fit: contain; }.invite-register-demo > aside > span { display: block; margin-top: 1rem; color: var(--orange); font-size: .55rem; font-weight: 900; letter-spacing: .1em; }.invite-register-demo > aside h3 { margin-block: .3rem; }.invite-register-demo > aside p { color: #aaa; font-size: .7rem; }.invite-register-demo > aside ul { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }.invite-register-demo > aside li { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; font-size: .63rem; }.invite-register-demo > aside li i { display: grid; width: 1.3rem; height: 1.3rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-style: normal; font-weight: 900; }.invite-register-demo > div { padding: 1.4rem; }.invite-register-demo__progress { display: flex; align-items: center; margin-bottom: 1rem; }.invite-register-demo__progress span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; background: #ddd9d4; border-radius: 50%; font-size: .58rem; font-weight: 900; }.invite-register-demo__progress span.is-complete, .invite-register-demo__progress span.is-active { background: var(--orange); }.invite-register-demo__progress i { flex: 1; height: 2px; background: #ddd9d4; }.invite-register-demo > div > small { color: var(--orange-dark); font-size: .5rem; font-weight: 900; letter-spacing: .1em; }.invite-register-demo > div h3 { margin-block: .3rem 1rem; }.invite-register-demo > div label { display: block; margin-top: .6rem; color: var(--muted); font-size: .52rem; font-weight: 800; }.invite-register-demo > div label span { display: block; margin-top: .2rem; padding: .65rem; color: var(--black); background: #f4f2ef; border: 1px solid var(--border); border-radius: .4rem; font-size: .62rem; }.invite-register-demo__button { margin-top: .8rem; padding: .7rem; color: var(--black); background: var(--orange); border-radius: .45rem; font-size: .62rem; font-weight: 850; text-align: center; }.invite-register-demo > div > p { margin: .6rem 0 0; color: var(--muted); font-size: .46rem; text-align: right; }
.invite-status-section { background: var(--paper); }.invite-status__layout { display: grid; gap: 3rem; align-items: center; }.invite-status__layout > div:first-child p:not(.eyebrow) { color: var(--muted); }.invite-status-board { overflow: hidden; padding: .8rem; background: var(--white); border: 1px solid var(--border); border-radius: .9rem; box-shadow: var(--shadow); }.invite-status-board__head { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem; color: var(--white); background: var(--black); border-radius: .5rem; }.invite-status-board__head strong { font-size: .7rem; }.invite-status-board__head span { color: var(--orange); font-size: .55rem; font-weight: 850; }.invite-status-board > article { display: grid; grid-template-columns: 1fr auto; gap: .3rem .7rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--border); }.invite-status-board article > div strong, .invite-status-board article > div small { display: block; }.invite-status-board article > div strong { font-size: .65rem; }.invite-status-board article > div small, .invite-status-board article time { color: var(--muted); font-size: .5rem; }.invite-status-board article time { grid-column: 1 / -1; }.invite-status-board article > span { padding: .3rem .45rem; border-radius: 99rem; font-size: .48rem; font-weight: 850; }.invite-status-board .is-pending { color: #7a4b00; background: #fff1d2; }.invite-status-board .is-accepted { color: #12518c; background: #e3f1ff; }.invite-status-board .is-complete { color: #1f6d3e; background: #e3f6ea; }.invite-status-board .is-withdrawn { color: #777; background: #e8e8e8; }.invite-status-board article.is-muted { opacity: .6; }.invite-status-board > small { display: block; padding-top: .5rem; color: var(--muted); font-size: .45rem; text-align: right; }
.invite-controls-section { color: var(--white); background: var(--black); }.invite-controls-section .section-heading > p:last-child { color: #bdbdbd; }.invite-control-grid { display: grid; gap: .8rem; }.invite-control-grid article { padding: 1.1rem; background: #222; border: 1px solid #383838; border-radius: .75rem; }.invite-control-grid article > span { display: grid; width: 2.35rem; height: 2.35rem; margin-bottom: .8rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .6rem; font-weight: 900; }.invite-control-grid h3 { margin-bottom: .35rem; font-size: 1rem; }.invite-control-grid p { margin-bottom: 0; color: #aaa; font-size: .72rem; }
.invite-access-section { background: #ece8e2; }.invite-access__layout { display: grid; gap: 3rem; align-items: center; }.invite-access__layout > div:first-child p:not(.eyebrow) { color: var(--muted); }.invite-access-map { display: grid; justify-items: center; }.invite-access-map > div { width: min(100%,20rem); padding: .8rem; color: var(--white); background: var(--black); border-radius: .65rem; text-align: center; }.invite-access-map span, .invite-access-map strong { display: block; }.invite-access-map span { color: var(--orange); font-size: .5rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.invite-access-map strong { font-size: .76rem; }.invite-access-map > i { width: .2rem; height: 1.4rem; background: var(--orange); }.invite-access-map > div.is-result { color: var(--black); background: var(--orange); }.invite-access-map > div.is-result span { color: var(--black); }
.invite-security-section { background: var(--orange); }.invite-security-section .eyebrow { color: var(--black); }.invite-security__panel { display: grid; gap: 1.5rem; }.invite-security__panel > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; align-content: center; }.invite-security__panel > div:last-child span { padding: .6rem .7rem; color: var(--white); background: var(--black); border-radius: .45rem; font-size: .62rem; font-weight: 800; }
.invite-final-section { color: var(--white); background: #ece8e2; }.invite-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }.invite-final__panel h2 { max-width: 16ch; }.invite-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }.invite-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .invite-private-strip > div { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }.invite-journey, .invite-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.invite-create-preview__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.invite-create-preview__wide { grid-column: 1 / -1; }.invite-register-demo { grid-template-columns: .8fr 1.2fr; }
}

@media (min-width: 58rem) {
    .invite-hero__layout { grid-template-columns: minmax(0,1fr) minmax(27rem,.9fr); gap: 4rem; padding-block: 6rem 6.5rem; }.invite-purpose__layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 4rem; }.invite-journey, .invite-control-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.invite-create__layout, .invite-message__layout, .invite-status__layout, .invite-access__layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }.invite-security__panel { grid-template-columns: 1fr 1fr; align-items: center; }.invite-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* Team management page */
.team-hero { position: relative; overflow: hidden; color: var(--white); background: var(--black); }.team-hero::after { position: absolute; right: -11rem; bottom: -14rem; width: 31rem; height: 31rem; background: var(--orange); border-radius: 50%; opacity: .15; content: ""; }.team-hero__layout { position: relative; z-index: 1; display: grid; gap: 3rem; padding-block: 4.5rem 5rem; }.team-hero h1 { max-width: 13ch; }.team-hero__lead { max-width: 48rem; color: #c9c9c9; font-size: 1.08rem; }
.team-hero__screen { align-self: center; padding: .75rem; color: var(--black); background: #f2f0ed; border: .45rem solid #292929; border-radius: 1rem; box-shadow: 0 1.7rem 3.5rem rgba(0,0,0,.35); }.team-hero__screen-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem; color: var(--white); background: var(--black); border-radius: .55rem; }.team-hero__screen-head small, .team-hero__screen-head strong { display: block; }.team-hero__screen-head small { color: var(--orange); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }.team-hero__screen-head strong { font-size: .75rem; }.team-hero__screen-head > span { padding: .4rem .5rem; color: var(--black); background: var(--orange); border-radius: .4rem; font-size: .52rem; font-weight: 850; }
.team-hero__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin-top: .55rem; }.team-hero__stats article { padding: .65rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }.team-hero__stats small, .team-hero__stats strong, .team-hero__stats span { display: block; }.team-hero__stats small { color: var(--muted); font-size: .45rem; }.team-hero__stats strong { font-size: .9rem; }.team-hero__stats span { color: var(--muted); font-size: .42rem; }
.team-hero__people { overflow: hidden; margin-top: .55rem; background: var(--white); border: 1px solid var(--border); border-radius: .45rem; }.team-hero__people article { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding: .65rem; border-bottom: 1px solid var(--border); }.team-hero__people article:last-child { border-bottom: 0; }.team-hero__people article > i { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-size: .5rem; font-style: normal; font-weight: 900; }.team-hero__people article strong, .team-hero__people article small { display: block; }.team-hero__people article strong { font-size: .62rem; }.team-hero__people article small { color: var(--muted); font-size: .48rem; }.team-hero__people article > span { color: #237a42; font-size: .5rem; font-weight: 850; }.team-hero__people article > span.is-pending { color: #7a4b00; }.team-hero__screen > small { display: block; padding-top: .45rem; color: var(--muted); font-size: .45rem; text-align: right; }
.team-principle-strip { color: var(--black); background: var(--orange); }.team-principle-strip > div { display: grid; gap: .3rem; padding-block: 1rem; }.team-principle-strip strong { font-size: .78rem; }.team-principle-strip span { font-size: .7rem; }
.team-purpose-section { background: #ece8e2; }.team-purpose__layout { display: grid; gap: 1.5rem; }.team-purpose__layout h2 { max-width: 15ch; }.team-purpose__layout > div:last-child p { max-width: 45rem; color: var(--muted); }.team-purpose__layout > div:last-child p:last-child { margin-bottom: 0; }
.team-capabilities-section { background: var(--paper); }.team-capability-grid { display: grid; gap: .8rem; }.team-capability-grid article { padding: 1.15rem; background: var(--white); border: 1px solid var(--border); border-radius: .8rem; }.team-capability-grid article > span { display: grid; width: 2.4rem; height: 2.4rem; margin-bottom: .9rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .55rem; font-size: .6rem; font-weight: 900; }.team-capability-grid h3 { margin-bottom: .35rem; font-size: 1rem; }.team-capability-grid p { margin-bottom: 0; color: var(--muted); font-size: .74rem; }
.team-directory-section { color: var(--white); background: var(--black); }.team-directory-section .section-heading--split > p { color: #bdbdbd; }.team-directory { overflow: hidden; padding: .8rem; color: var(--black); background: #f2f0ed; border-radius: 1rem; }.team-directory__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem; color: var(--white); background: #222; border-radius: .5rem; }.team-directory__head small, .team-directory__head strong { display: block; }.team-directory__head small { color: var(--orange); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }.team-directory__head strong { font-size: .72rem; }.team-directory__head > span { color: var(--orange); font-size: .52rem; font-weight: 850; }.team-directory__filters { display: flex; overflow-x: auto; gap: .4rem; padding-block: .6rem; }.team-directory__filters span { flex: 0 0 auto; padding: .4rem .5rem; background: var(--white); border-radius: .35rem; font-size: .5rem; font-weight: 750; }.team-directory__filters .is-active { background: var(--orange); }.team-directory__filters .team-directory__search { margin-left: auto; color: var(--muted); font-weight: 600; }.team-directory__row { display: grid; min-width: 42rem; grid-template-columns: 1.4fr .9fr 1.1fr .7fr .6fr; align-items: center; border-bottom: 1px solid var(--border); }.team-directory__row > div { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; }.team-directory__row > div i { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-size: .48rem; font-style: normal; font-weight: 900; }.team-directory__row > div span, .team-directory__row > div small { display: block; }.team-directory__row > div small { color: var(--muted); font-size: .44rem; }.team-directory__row > span, .team-directory__row > strong, .team-directory__row > div { padding: .55rem; font-size: .5rem; }.team-directory__row > span.is-complete, .team-directory__row > span.is-active { color: #237a42; font-weight: 850; }.team-directory__row > span.is-action { color: #a05b00; font-weight: 850; }.team-directory__row > span.is-pending { color: #7a4b00; font-weight: 850; }.team-directory__row--head { background: #e8e4df; }.team-directory > small { display: block; padding-top: .45rem; color: var(--muted); font-size: .44rem; text-align: right; }
.team-access-section { background: #ece8e2; }.team-access__layout { display: grid; gap: 3rem; align-items: center; }.team-access__layout > div:first-child p:not(.eyebrow) { color: var(--muted); }.team-access-matrix { overflow: hidden; padding: .8rem; background: var(--white); border: 1px solid var(--border); border-radius: .9rem; box-shadow: var(--shadow); }.team-access-matrix__person { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; padding: .7rem; color: var(--white); background: var(--black); border-radius: .5rem; }.team-access-matrix__person > i { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-size: .55rem; font-style: normal; font-weight: 900; }.team-access-matrix__person small, .team-access-matrix__person strong, .team-access-matrix__person span { display: block; }.team-access-matrix__person small { color: var(--orange); font-size: .45rem; font-weight: 900; letter-spacing: .1em; }.team-access-matrix__person strong { font-size: .7rem; }.team-access-matrix__person span { color: #aaa; font-size: .5rem; }.team-access-matrix > div:not(.team-access-matrix__person) { display: grid; grid-template-columns: 1fr repeat(3,.45fr); align-items: center; border-bottom: 1px solid var(--border); }.team-access-matrix > div:not(.team-access-matrix__person) > * { padding: .55rem; font-size: .52rem; text-align: center; }.team-access-matrix > div:not(.team-access-matrix__person) > span { text-align: left; }.team-access-matrix > div:not(.team-access-matrix__person) > i { color: #237a42; font-style: normal; font-weight: 900; }.team-access-matrix__head { margin-top: .5rem; background: #eeeae5; }.team-access-matrix > small { display: block; padding-top: .45rem; color: var(--muted); font-size: .44rem; text-align: right; }
.team-sites-section { background: var(--paper); }.team-sites__layout { display: grid; gap: 3rem; align-items: center; }.team-sites__layout > div:last-child p:not(.eyebrow) { color: var(--muted); }.team-site-map { padding: 1rem; color: var(--white); background: var(--black); border-radius: .9rem; box-shadow: var(--shadow); }.team-site-map > div:first-child { padding-bottom: .8rem; border-bottom: 1px solid #383838; }.team-site-map > div:first-child small, .team-site-map > div:first-child strong { display: block; }.team-site-map > div:first-child small { color: var(--orange); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }.team-site-map > div:first-child strong { font-size: .8rem; }.team-site-map article { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .75rem 0; border-bottom: 1px solid #383838; }.team-site-map article > span { grid-row: 1; display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; font-size: .65rem; font-weight: 900; }.team-site-map article.is-allowed > span { color: var(--black); background: var(--orange); }.team-site-map article.is-denied { opacity: .45; }.team-site-map article.is-denied > span { background: #555; }.team-site-map article strong, .team-site-map article small { display: block; }.team-site-map article strong { font-size: .7rem; }.team-site-map article small { color: #aaa; font-size: .5rem; }.team-site-map button { width: 100%; margin-top: .8rem; padding: .65rem; color: var(--black); background: var(--orange); border: 0; border-radius: .45rem; font: inherit; font-size: .58rem; font-weight: 850; opacity: 1; }
.team-profile-section { background: #ece8e2; }.team-profile__layout { display: grid; gap: 3rem; align-items: center; }.team-profile__layout > div:first-child p:not(.eyebrow) { color: var(--muted); }.team-profile-card { padding: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: .9rem; box-shadow: var(--shadow); }.team-profile-card__person { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; }.team-profile-card__person > i { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-size: .6rem; font-style: normal; font-weight: 900; }.team-profile-card__person small, .team-profile-card__person strong, .team-profile-card__person span { display: block; }.team-profile-card__person small { color: var(--orange-dark); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }.team-profile-card__person strong { font-size: .78rem; }.team-profile-card__person span { color: var(--muted); font-size: .52rem; }.team-profile-card__progress { overflow: hidden; height: .45rem; margin-block: .8rem; background: #e1ddd8; border-radius: 99rem; }.team-profile-card__progress i { display: block; width: 82%; height: 100%; background: var(--orange); }.team-profile-card ul { margin: 0; padding: 0; list-style: none; }.team-profile-card li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }.team-profile-card li > span { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; color: var(--white); background: #2f8a50; border-radius: 50%; font-size: .55rem; font-weight: 900; }.team-profile-card li.is-action > span { color: var(--black); background: var(--orange); }.team-profile-card li strong, .team-profile-card li small { display: block; }.team-profile-card li strong { font-size: .65rem; }.team-profile-card li small { color: var(--muted); font-size: .5rem; }.team-profile-card button { width: 100%; margin-top: .7rem; padding: .65rem; color: var(--black); background: var(--orange); border: 0; border-radius: .45rem; font: inherit; font-size: .58rem; font-weight: 850; opacity: 1; }
.team-lifecycle-section { color: var(--white); background: var(--black); }.team-lifecycle { display: grid; gap: .7rem; margin: 2rem 0 0; padding: 0; list-style: none; }.team-lifecycle li { padding: 1rem; background: #222; border: 1px solid #383838; border-radius: .7rem; }.team-lifecycle li > span { display: grid; width: 2.3rem; height: 2.3rem; margin-bottom: .8rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .5rem; font-size: .58rem; font-weight: 900; }.team-lifecycle h3 { margin-bottom: .3rem; font-size: .9rem; }.team-lifecycle p { margin-bottom: 0; color: #aaa; font-size: .68rem; }
.team-offboard-section { background: var(--orange); }.team-offboard-section .eyebrow { color: var(--black); }.team-offboard__layout { display: grid; gap: 3rem; align-items: center; }.team-offboard__layout > div:first-child ul { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }.team-offboard__layout > div:first-child li { position: relative; padding-left: 1.4rem; font-size: .74rem; font-weight: 700; }.team-offboard__layout > div:first-child li::before { position: absolute; left: 0; content: "\2713"; font-weight: 900; }.team-offboard-card { padding: 1rem; color: var(--white); background: var(--black); border-radius: .9rem; box-shadow: var(--shadow); }.team-offboard-card > span { color: var(--orange); font-size: .48rem; font-weight: 900; letter-spacing: .1em; }.team-offboard-card > strong { display: block; font-size: 1rem; }.team-offboard-card > p { color: #aaa; font-size: .6rem; }.team-offboard-card > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid #383838; }.team-offboard-card > div small { color: #aaa; font-size: .55rem; }.team-offboard-card > div b { font-size: .7rem; }.team-offboard-card button { width: 100%; margin-top: .7rem; padding: .65rem; color: var(--black); background: var(--orange); border: 0; border-radius: .45rem; font: inherit; font-size: .58rem; font-weight: 850; opacity: 1; }.team-offboard-card > small { display: block; padding-top: .5rem; color: #777; font-size: .45rem; text-align: center; }
.team-mobile-section { background: var(--paper); }.team-mobile__layout { display: grid; gap: 3rem; align-items: center; }.team-mobile__layout > div:last-child p:not(.eyebrow) { color: var(--muted); }.team-mobile-preview { overflow: hidden; width: min(100%,18rem); margin-inline: auto; padding: .55rem; color: var(--white); background: #171717; border-radius: 1.8rem; box-shadow: var(--shadow); }.team-mobile-preview > div { padding: .7rem; color: var(--orange); font-size: .62rem; font-weight: 850; text-align: center; }.team-mobile-preview > article { min-height: 25rem; padding: .75rem; color: var(--black); background: #f2f0ed; border-radius: 1.2rem; }.team-mobile-preview header { position: relative; padding: .8rem; color: var(--white); background: var(--black); border-radius: .55rem; }.team-mobile-preview header small, .team-mobile-preview header strong { display: block; }.team-mobile-preview header small { color: var(--orange); font-size: .45rem; font-weight: 900; letter-spacing: .1em; }.team-mobile-preview header strong { font-size: .85rem; }.team-mobile-preview header span { position: absolute; top: .8rem; right: .7rem; color: var(--orange); font-size: .48rem; }.team-mobile-preview label { display: block; margin-block: .55rem; padding: .6rem; color: var(--muted); background: var(--white); border: 1px solid var(--border); border-radius: .45rem; font-size: .55rem; }.team-mobile-preview article > div { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding: .65rem; background: var(--white); border-bottom: 1px solid var(--border); }.team-mobile-preview article > div > i { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--black); background: var(--orange); border-radius: 50%; font-size: .48rem; font-style: normal; font-weight: 900; }.team-mobile-preview article > div span strong, .team-mobile-preview article > div span small { display: block; }.team-mobile-preview article > div span strong { font-size: .62rem; }.team-mobile-preview article > div span small { color: var(--muted); font-size: .48rem; }.team-mobile-preview article > div > b { font-size: 1rem; }
.team-data-section { background: #ece8e2; }.team-data__panel { display: grid; gap: 1.5rem; padding: 1.5rem; color: var(--white); background: var(--black); border-radius: 1rem; box-shadow: var(--shadow); }.team-data__panel p:not(.eyebrow) { color: #bdbdbd; }.team-data__panel > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; align-content: center; }.team-data__panel > div:last-child span { padding: .6rem .7rem; color: var(--black); background: var(--orange); border-radius: .45rem; font-size: .6rem; font-weight: 800; }
.team-final-section { color: var(--white); background: #ece8e2; }.team-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }.team-final__panel h2 { max-width: 16ch; }.team-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }.team-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .team-principle-strip > div { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }.team-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.team-lifecycle { grid-template-columns: repeat(5,minmax(0,1fr)); }.team-data__panel { grid-template-columns: 1fr 1fr; align-items: center; }
}

@media (min-width: 58rem) {
    .team-hero__layout { grid-template-columns: minmax(0,1fr) minmax(30rem,1fr); gap: 4rem; padding-block: 6rem 6.5rem; }.team-purpose__layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 4rem; }.team-capability-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.team-access__layout, .team-sites__layout, .team-profile__layout, .team-offboard__layout, .team-mobile__layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }.team-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}

/* Domain search page */
.domain-hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: var(--black);
}

.domain-hero::after {
    position: absolute;
    right: -12rem;
    bottom: -16rem;
    width: 34rem;
    height: 34rem;
    background: var(--orange);
    border-radius: 50%;
    opacity: .13;
    content: "";
}

.domain-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3.5rem;
    padding-block: 4.5rem 5.5rem;
}

.domain-hero h1 { max-width: 12ch; }
.domain-hero__lead { max-width: 47rem; color: #c7c7c7; font-size: 1.08rem; }

.domain-search-form {
    max-width: 42rem;
    margin-top: 1.8rem;
    padding: 1.15rem;
    color: var(--black);
    background: var(--white);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 1.1rem;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,.25);
}

.domain-search-form > label {
    display: block;
    margin: 0 0 .7rem .1rem;
    font-size: .72rem;
    font-weight: 850;
}

.domain-search-form__controls {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .55rem;
    align-items: stretch;
}

.domain-search-form__prefix {
    display: flex;
    align-items: center;
    padding-left: .9rem;
    color: var(--muted);
    background: #f3f0ec;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: .65rem 0 0 .65rem;
    font-size: .8rem;
    font-weight: 750;
}

.domain-search-form input {
    min-width: 0;
    margin-left: -.55rem;
    padding: .95rem .7rem;
    background: #f3f0ec;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 .65rem .65rem 0;
    outline: 0;
    font: inherit;
    font-size: .9rem;
    font-weight: 800;
}

.domain-search-form input:focus {
    background: #fff9f5;
    box-shadow: inset 0 0 0 2px rgba(255,90,0,.25);
}

.domain-search-form__helpers { display: grid; gap: .65rem; margin-top: .8rem; }
.domain-search-form__helpers label { display: grid; gap: .35rem; color: var(--muted); font-size: .62rem; font-weight: 800; }
.domain-search-form__helpers label > span { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.domain-search-form__helpers label small { padding: 0; color: #8a847e; font-size: .5rem; font-weight: 650; }
.domain-search-form__helpers input { width: 100%; margin: 0; padding: .78rem .85rem; background: #f3f0ec; border: 1px solid var(--border); border-radius: .6rem; font-size: .72rem; font-weight: 750; }

.domain-search-form button {
    grid-column: 1 / -1;
    min-height: 3.35rem;
    margin-top: .15rem;
    padding-inline: 1.3rem;
    color: var(--black);
    background: var(--orange);
    border: 0;
    border-radius: .65rem;
    box-shadow: 0 .45rem 1rem rgba(255,90,0,.2);
    font: inherit;
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.domain-search-form button:hover,
.domain-search-form button:focus-visible {
    background: var(--orange-light);
    box-shadow: 0 .6rem 1.2rem rgba(255,90,0,.3);
    transform: translateY(-1px);
}

.domain-search-form button:disabled {
    color: #76716c;
    background: #d8d3cd;
    box-shadow: none;
    cursor: wait;
    transform: none;
}

.domain-search-form small { display: block; padding: .7rem .1rem 0; color: var(--muted); font-size: .58rem; }
.domain-search-form__status { min-height: 1.4em; margin: .55rem .1rem 0; color: var(--muted); font-size: .62rem; }
.domain-search-form.is-searching .domain-search-form__status { color: var(--orange-dark); font-weight: 800; }

.domain-hero__card {
    align-self: center;
    padding: 1rem;
    color: var(--black);
    background: #f2f0ed;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.35);
}

.domain-hero__card header { padding: 1rem; color: var(--white); background: #222; border-radius: .6rem; }
.domain-hero__card header span,
.domain-hero__card header strong { display: block; }
.domain-hero__card header span { color: var(--orange); font-size: .5rem; font-weight: 900; letter-spacing: .12em; }
.domain-hero__card header strong { font-size: 1rem; overflow-wrap: anywhere; }
.domain-hero__card > div { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .8rem .5rem; background: var(--white); border-bottom: 1px solid var(--border); }
.domain-hero__card > div > span { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .45rem; font-size: .5rem; font-weight: 900; }
.domain-hero__card > div small,
.domain-hero__card > div strong { display: block; }
.domain-hero__card > div small { color: var(--muted); font-size: .48rem; }
.domain-hero__card > div strong { font-size: .62rem; overflow-wrap: anywhere; }
.domain-hero__card > div b { color: #237a42; font-size: .5rem; }
.domain-hero__card footer { padding: .7rem .5rem 0; color: var(--muted); font-size: .54rem; text-align: right; }

.domain-trust-strip { color: var(--black); background: var(--orange); }
.domain-trust-strip > div { display: grid; gap: .25rem; padding-block: 1rem; }
.domain-trust-strip strong { font-size: .8rem; }
.domain-trust-strip span { font-size: .68rem; }

.domain-results-section { background: var(--paper); }
.domain-results__heading { display: grid; gap: 1rem; align-items: end; }
.domain-results__heading h2 { margin-bottom: 0; }
.domain-results__heading > p { max-width: 30rem; margin: 0; color: var(--muted); }
.domain-results { display: grid; gap: .8rem; margin-top: 2rem; }
.domain-result { display: grid; gap: 1rem; align-items: center; padding: 1rem; background: var(--white); border: 1px solid var(--border); border-left: .35rem solid #c7c3bd; border-radius: 0 .8rem .8rem 0; }
.domain-result--featured { border-left-color: var(--orange); box-shadow: var(--shadow); }
.domain-result > div:first-child > strong { display: block; margin-block: .4rem .1rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.domain-result > div:first-child > small,
.domain-result > div:nth-child(2) span,
.domain-result > div:nth-child(2) strong,
.domain-result > div:nth-child(2) small { display: block; }
.domain-result > div:first-child > small,
.domain-result > div:nth-child(2) span,
.domain-result > div:nth-child(2) small { color: var(--muted); font-size: .58rem; }
.domain-result > div:nth-child(2) strong { font-size: .82rem; }
.domain-status { display: inline-block; padding: .25rem .45rem; border-radius: 99rem; font-size: .5rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.domain-status--available { color: #176138; background: #e5f7ec; }
.domain-status--unavailable { color: #8a211b; background: #fde9e7; }
.domain-status--premium { color: #7a4b00; background: #fff2d8; }
.domain-status--unknown { color: #4f4b47; background: #e9e6e2; }
.domain-result button,
.domain-result__action,
.domain-suggestion-list button { padding: .7rem .8rem; color: var(--black); background: var(--orange); border: 0; border-radius: .45rem; font: inherit; font-size: .62rem; font-weight: 850; cursor: pointer; }
.domain-result__action { display: inline-flex; justify-content: center; text-align: center; text-decoration: none; }
.domain-result button:disabled { color: #777; background: #ddd9d3; cursor: not-allowed; }
.domain-result--empty { grid-template-columns: 1fr; border-left-color: var(--orange); }
.domain-results__note { margin-top: 1.2rem; padding: 1rem; color: var(--muted); background: #ece8e2; border-left: .3rem solid var(--orange); border-radius: 0 .6rem .6rem 0; font-size: .68rem; }
.domain-results__note strong { color: var(--black); }

.domain-alternatives-section { color: var(--white); background: var(--black); }
.domain-alternatives__layout { display: grid; gap: 3rem; align-items: center; }
.domain-alternatives__layout > div:first-child p:not(.eyebrow) { color: #bdbdbd; }
.domain-suggestion-list { display: grid; gap: .65rem; }
.domain-suggestion-list article { display: grid; grid-template-columns: 1fr auto; gap: .25rem .7rem; align-items: center; padding: .85rem; color: var(--black); background: var(--white); border-radius: .65rem; }
.domain-suggestion-list span { color: var(--orange-dark); font-size: .46rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.domain-suggestion-list strong { grid-column: 1; font-size: .7rem; overflow-wrap: anywhere; }
.domain-suggestion-list button { grid-column: 2; grid-row: 1 / 3; }
.domain-suggestion-list article small { grid-column: 1; color: var(--muted); font-size: .52rem; }

.domain-choice-section { background: #ece8e2; }
.domain-choice-grid { display: grid; gap: .8rem; margin-top: 2rem; }
.domain-choice-grid article { padding: 1.2rem; background: var(--white); border-top: .3rem solid var(--orange); border-radius: .15rem .15rem .75rem .75rem; }
.domain-choice-grid span { color: var(--orange-dark); font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.domain-choice-grid h3 { margin: .7rem 0 .35rem; font-size: 1rem; }
.domain-choice-grid p { margin: 0; color: var(--muted); font-size: .72rem; }

.domain-connected-section { background: var(--paper); }
.domain-connected__layout { display: grid; gap: 3.5rem; align-items: center; }
.domain-connected__layout > div:last-child > p:not(.eyebrow) { color: var(--muted); }
.domain-connected__visual { position: relative; display: grid; gap: .55rem; padding: 1rem; background: #ece8e2; border-radius: 1rem; }
.domain-connected__centre { padding: 1rem; color: var(--white); background: var(--black); border-radius: .65rem; text-align: center; }
.domain-connected__centre small,
.domain-connected__centre strong { display: block; }
.domain-connected__centre small { color: var(--orange); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }
.domain-connected__centre strong { font-size: .86rem; overflow-wrap: anywhere; }
.domain-connected__visual article { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: center; padding: .7rem; background: var(--white); border-radius: .5rem; }
.domain-connected__visual article > span { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--black); background: var(--orange); border-radius: .4rem; font-size: .5rem; font-weight: 900; }
.domain-connected__visual article small,
.domain-connected__visual article strong { display: block; }
.domain-connected__visual article small { color: var(--muted); font-size: .47rem; }
.domain-connected__visual article strong { font-size: .62rem; }
.domain-check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.domain-check-list li { position: relative; padding-left: 1.35rem; font-size: .68rem; font-weight: 700; }
.domain-check-list li::before { position: absolute; left: 0; color: var(--orange-dark); content: "\2713"; font-weight: 900; }

.domain-extensions-section { color: var(--white); background: var(--black); }
.domain-extensions-section .section-heading--split > p { color: #bdbdbd; }
.domain-extension-grid { display: grid; gap: .8rem; margin-top: 2rem; }
.domain-extension-grid article { padding: 1.2rem; background: #222; border: 1px solid #383838; border-radius: .75rem; }
.domain-extension-grid strong { display: block; color: var(--orange); font-size: 1.3rem; }
.domain-extension-grid span { font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.domain-extension-grid p { margin: .5rem 0 0; color: #aaa; font-size: .7rem; }

.domain-process-section { background: var(--orange); }
.domain-process-section .eyebrow { color: var(--black); }
.domain-process__panel { display: grid; gap: 2rem; align-items: center; }
.domain-process__panel ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.domain-process__panel li { padding: .8rem; color: var(--white); background: var(--black); border-radius: .55rem; }
.domain-process__panel li span,
.domain-process__panel li strong { display: block; }
.domain-process__panel li span { color: var(--orange); font-size: .5rem; font-weight: 900; }
.domain-process__panel li strong { font-size: .7rem; }

.domain-final-section { background: #ece8e2; }
.domain-final__panel { display: grid; gap: 1.75rem; padding: 2rem 1.4rem; color: var(--white); background: var(--black); border-radius: 1.2rem; box-shadow: var(--shadow); }
.domain-final__panel h2 { max-width: 16ch; }
.domain-final__panel p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: #bdbdbd; }
.domain-final__panel .button { justify-self: start; }

@media (min-width: 42rem) {
    .domain-search-form__controls { grid-template-columns: auto minmax(0,1fr) auto; }
    .domain-search-form button { grid-column: auto; margin-top: 0; }
    .domain-search-form__helpers { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .domain-trust-strip > div,
    .domain-results__heading { grid-template-columns: auto 1fr; gap: 1.5rem; }
    .domain-results__heading > p { justify-self: end; }
    .domain-result { grid-template-columns: minmax(0,1.5fr) minmax(8rem,.6fr) auto; }
    .domain-choice-grid,
    .domain-extension-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .domain-connected__visual { grid-template-columns: repeat(2,1fr); }
    .domain-connected__centre { grid-column: 1 / -1; }
    .domain-process__panel ol { grid-template-columns: repeat(4,1fr); }
}

@media (min-width: 58rem) {
    .domain-hero__layout { grid-template-columns: minmax(0,1.2fr) minmax(25rem,.8fr); gap: 4rem; padding-block: 6rem 6.5rem; }
    .domain-alternatives__layout,
    .domain-connected__layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }
    .domain-choice-grid,
    .domain-extension-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .domain-process__panel { grid-template-columns: 1fr 1fr; }
    .domain-final__panel { grid-template-columns: 1fr auto; align-items: center; padding: 3rem; }
}